Update slider to composition API (#35)

* Update slider to composition API

* Version bump

docs/components/slider.md

@@ -1,9 +1,21 @@
 # Slider
 
+<script setup>
+import { ref } from "vue"; 
+
+const value = ref(0)
+</script>
+
 <DemoContainer>
-  <Slider :min="1000" :max="10000" :step="1000"/>
+  <Slider v-model="value" :min="1000" :max="10000" :step="1000"/>
 </DemoContainer>
 
 ```vue
-<Slider :min="1000" :max="10000" :step="1000"/>
+<script setup>
+import { ref } from "vue";
+
+const value = ref(0)
+</script>
+
+<Slider v-model="value" :min="1000" :max="10000" :step="1000"/>
 ```

lib/components/base/Slider.vue

@@ -37,11 +37,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
-export default {
+import { ref } from 'vue'
-  name: 'Slider',
+
-  props: {
+const emit = defineEmits(['update:modelValue'])
-    value: {
+
+const props = defineProps({
+  modelValue: {
     type: Number,
     default: 0,
   },
@@ -61,44 +63,26 @@ export default {
     type: Boolean,
     default: true,
   },
-  },
+})
-  emits: ['input'],
+
-  data() {
+let currentValue = ref(Math.max(props.min, props.modelValue).toString())
-    return {
+
-      sliderWidth: 0,
+const inputValueValid = (newValue) => {
-      objectPosition: 0,
-      startOffset: 0,
-      currentValue: Math.max(this.min, this.value).toString(),
-    }
-  },
-  computed: {
-    inputValueValid: {
-      get() {
-        return this.$refs.value.value
-      },
-      set(newValue) {
   const parsedValue = parseInt(newValue)
-        if (parsedValue < this.min) {
+  if (parsedValue < props.min) {
-          this.currentValue = this.min.toString()
+    currentValue.value = props.min.toString()
-        } else if (parsedValue > this.max) {
+  } else if (parsedValue > props.max) {
-          this.currentValue = this.max.toString()
+    currentValue.value = props.max.toString()
   } else if (!parsedValue) {
-          this.currentValue = this.min.toString()
+    currentValue.value = props.min.toString()
   } else {
-          this.currentValue = (
+    currentValue.value = (parsedValue - (props.forceStep ? parsedValue % props.step : 0)).toString()
-            parsedValue - (this.forceStep ? parsedValue % this.step : 0)
-          ).toString()
   }
-        this.$refs.value.value = this.currentValue
+  emit('update:modelValue', parseInt(currentValue.value))
-        this.$emit('input', parseInt(this.currentValue))
+}
-      },
+
-    },
+const onInput = (value) => {
-  },
+  inputValueValid(value)
-  methods: {
-    onInput(value) {
-      this.inputValueValid = parseInt(value)
-    },
-  },
 }
 </script>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "files": [
     "dist"
   ],