convert slider to typescript (#108)

lib/components/base/Slider.vue

@@ -5,11 +5,11 @@
         <div class="snap-points-wrapper">
           <div class="snap-points">
             <div
-              v-for="snapPoint in props.snapPoints"
+              v-for="snapPoint in snapPoints"
               :key="snapPoint"
               class="snap-point"
               :class="{ green: snapPoint <= currentValue }"
-              :style="{ left: ((snapPoint - props.min) / (props.max - props.min)) * 100 + '%' }"
+              :style="{ left: ((snapPoint - min) / (max - min)) * 100 + '%' }"
             ></div>
           </div>
         </div>
@@ -30,7 +30,7 @@
             '--min-value': min,
             '--max-value': max,
           }"
-          @input="onInputWithSnap($refs.input.value)"
+          @input="onInputWithSnap(($event.target as HTMLInputElement).value)"
         />
         <div class="slider-range">
           <span> {{ min }} {{ unit }} </span>
@@ -44,74 +44,57 @@
       type="text"
       class="slider-input"
       :disabled="disabled"
-      @change="onInput($refs.value.value)"
+      @change="onInput(($event.target as HTMLInputElement).value)"
     />
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 
-const emit = defineEmits(['update:modelValue'])
+let emit = defineEmits<{ 'update:modelValue': [number] }>()
 
-const props = defineProps({
+interface Props {
-  modelValue: {
+  modelValue?: number
-    type: Number,
+  min: number
-    default: 0,
+  max: number
-  },
+  step?: number
-  min: {
+  forceStep?: boolean
-    type: Number,
+  snapPoints?: number[]
-    default: 0,
+  snapRange?: number
-  },
+  disabled?: boolean
-  max: {
+  unit?: string
-    type: Number,
+}
-    default: 100,
+
-  },
+const props = withDefaults(defineProps<Props>(), {
-  step: {
+  modelValue: 0,
-    type: Number,
+  min: 0,
-    default: 10,
+  max: 100,
-  },
+  step: 10,
-  forceStep: {
+  forceStep: true,
-    type: Boolean,
+  snapPoints: () => [],
-    default: true,
+  snapRange: 100,
-  },
+  disabled: false,
-  snapPoints: {
+  unit: '',
-    type: Array,
-    default: () => [],
-  },
-  snapRange: {
-    type: Number,
-    default: 100,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  unit: {
-    type: String,
-    default: '',
-  },
 })
 
-let currentValue = ref(Math.max(props.min, props.modelValue).toString())
+let currentValue = ref(Math.max(props.min, props.modelValue))
 
-const inputValueValid = (newValue) => {
+const inputValueValid = (newValue: number) => {
-  const parsedValue = parseInt(newValue)
+  if (newValue < props.min) {
-
+    currentValue.value = props.min
-  if (parsedValue < props.min) {
+  } else if (newValue > props.max) {
-    currentValue.value = props.min.toString()
+    currentValue.value = props.max
-  } else if (parsedValue > props.max) {
+  } else if (!newValue) {
-    currentValue.value = props.max.toString()
+    currentValue.value = props.min
-  } else if (!parsedValue) {
-    currentValue.value = props.min.toString()
   } else {
-    currentValue.value = (parsedValue - (props.forceStep ? parsedValue % props.step : 0)).toString()
+    currentValue.value = newValue - (props.forceStep ? newValue % props.step : 0)
   }
 
-  emit('update:modelValue', parseInt(currentValue.value))
+  emit('update:modelValue', currentValue.value)
 }
 
-const onInputWithSnap = (value) => {
+const onInputWithSnap = (value: string) => {
   let parsedValue = parseInt(value)
 
   for (let snapPoint of props.snapPoints) {
@@ -125,8 +108,8 @@ const onInputWithSnap = (value) => {
   inputValueValid(parsedValue)
 }
 
-const onInput = (value) => {
+const onInput = (value: string) => {
-  inputValueValid(value)
+  inputValueValid(parseInt(value))
 }
 </script>