refactor: use v-model and defineModel to update range input

ICIJ · Dec 16, 2024 · bab312d · bab312d
1 parent 7071434
commit bab312d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 38 deletions.
diff --git a/src/components/Form/FormControl/FormControlRange/FormControlRange.vue b/src/components/Form/FormControl/FormControlRange/FormControlRange.vue
@@ -2,10 +2,14 @@
 import FormControlRangeSlider from './FormControlRangeSlider'
 import FormControlRangeTicks from './FormControlRangeTicks'
 
+const modelValue = defineModel({
+  type: Number,
+  default: 0
+})
+
 defineProps({
-  modelValue: {
-    type: Number,
-    default: 0
+  name: {
+    type: String
   },
   min: {
     type: Number,
@@ -25,21 +29,8 @@ defineProps({
 <template>
   <div class="form-control-range d-inline-block">
     <div class="form-control-range__wrapper">
-      <form-control-range-slider
-        class="mb-3"
-        :model-value="modelValue"
-        :min="min"
-        :max="max"
-        :step="step"
-        @update:modelValue="$emit('update:modelValue', $event)"
-      />
-      <form-control-range-ticks
-        :model-value="modelValue"
-        :min="min"
-        :max="max"
-        :step="step"
-        @update:modelValue="$emit('update:modelValue', $event)"
-      />
+      <form-control-range-slider v-model="modelValue" class="mb-3" :min="min" :max="max" :step="step" />
+      <form-control-range-ticks v-model="modelValue" :min="min" :max="max" :step="step" />
     </div>
   </div>
 </template>

diff --git a/src/components/Form/FormControl/FormControlRange/FormControlRangeSlider.vue b/src/components/Form/FormControl/FormControlRange/FormControlRangeSlider.vue
@@ -1,10 +1,11 @@
 <script setup>
 import FormControlRangeSliderBullet from './FormControlRangeSliderBullet'
 
+const modelValue = defineModel({
+  type: Number
+})
+
 defineProps({
-  modelValue: {
-    type: Number
-  },
   step: {
     type: Number
   },
@@ -18,14 +19,8 @@ defineProps({
 </script>
 
 <template>
-  <div class="form-control-range-slider" aria-hidden>
-    <form-control-range-slider-bullet
-      :model-value="modelValue"
-      :min="min"
-      :max="max"
-      :step="step"
-      @update:modelValue="$emit('update:modelValue', $event)"
-    />
+  <div class="form-control-range-slider" aria-hidden="true">
+    <form-control-range-slider-bullet v-model="modelValue" :min="min" :max="max" :step="step" />
   </div>
 </template>
 

diff --git a/src/components/Form/FormControl/FormControlRange/FormControlRangeSliderBullet.vue b/src/components/Form/FormControl/FormControlRange/FormControlRangeSliderBullet.vue
@@ -3,11 +3,10 @@ import { range } from 'd3'
 import { computed, ref } from 'vue'
 
 import { draggable as vDraggable } from '@/directives/draggable'
-
+const modelValue = defineModel({
+  type: Number
+})
 const props = defineProps({
-  modelValue: {
-    type: Number
-  },
   step: {
     type: Number
   },
@@ -27,7 +26,7 @@ const steps = computed(() => {
 })
 
 const modelValueStep = computed(() => {
-  return steps.value.indexOf(props.modelValue)
+  return steps.value.indexOf(modelValue.value)
 })
 
 const style = computed(() => {
@@ -40,12 +39,10 @@ const style = computed(() => {
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
-
 const drag = ({ detail: x }) => {
   active.value = true
   const index = Math.round(steps.value.length * (x / 100))
-  emit('update:modelValue', steps.value[index])
+  modelValue.value = steps.value[index]
 }
 
 const dragend = () => {
@@ -66,7 +63,6 @@ const classList = computed(() => {
     class="form-control-range-slider-bullet"
     :class="classList"
     :style="style"
-    aria-live
     @drag="drag"
     @dragend="dragend"
   ></a>