@bagelink/vue 0.0.1041 → 0.0.1043

package/src/components/form/inputs/RangeInput.vue

@@ -12,6 +12,7 @@ export interface RangeInputProps {
 	id?: string
 	rtl?: boolean
 	multiRange?: boolean
+	formatValue?: (value: number) => string
 }
 
 const props = defineProps<RangeInputProps>()
@@ -25,51 +26,38 @@ const {
 	disabled,
 	id,
 	rtl,
-	multiRange
+	multiRange = false,
+	formatValue = (value: number) => value.toString()
 } = props
 
-let from = $ref<number>(min)
-let to = $ref<number>(max)
-
-let isExternalUpdate = $ref(true)
+let from = $ref<number>(Array.isArray(props.modelValue) ? props.modelValue[0] : (props.modelValue ?? min))
+let to = $ref<number>(Array.isArray(props.modelValue) ? props.modelValue[1] : max)
 
 const validFrom = $computed(() => Math.min(Math.max(from, min), multiRange ? to : max))
 const validTo = $computed(() => Math.max(Math.min(to, max), from))
 
+const fromPercentage = $computed(() => ((validFrom - min) / (max - min)) * 100)
+const toPercentage = $computed(() => ((validTo - min) / (max - min)) * 100)
+
 watch(() => props.modelValue, (newVal) => {
-	isExternalUpdate = true
-	if (multiRange && Array.isArray(newVal)) {
+	if (Array.isArray(newVal) && multiRange) {
 		from = newVal[0]
 		to = newVal[1]
-	} else if (!multiRange && !Array.isArray(newVal)) {
+	} else if (!Array.isArray(newVal)) {
 		from = newVal ?? min
 		to = max
 	}
 }, { immediate: true })
 
-watch([() => validFrom, () => validTo], () => {
-	if (!isExternalUpdate) {
-		if (multiRange) {
-			emit('update:modelValue', [validFrom, validTo])
-		} else {
-			emit('update:modelValue', validFrom)
-		}
-	}
-	isExternalUpdate = false
-})
-
 function handleInput(value: number, isFromInput: boolean) {
-	isExternalUpdate = false
 	if (isFromInput) {
 		from = value
 	} else {
 		to = value
 	}
+	emit('update:modelValue', multiRange ? [validFrom, validTo] : validFrom)
 }
 
-const fromPercentage = $computed(() => ((validFrom - min) / (max - min)) * 100)
-const toPercentage = $computed(() => ((validTo - min) / (max - min)) * 100)
-
 const rangeStyle = $computed(() => {
 	if (multiRange) {
 		return {
@@ -81,6 +69,9 @@ const rangeStyle = $computed(() => {
 		? { left: `${100 - fromPercentage}%`, width: `${fromPercentage}%` }
 		: { left: '0', width: `${fromPercentage}%` }
 })
+
+const displayFrom = $computed(() => formatValue(validFrom))
+const displayTo = $computed(() => formatValue(validTo))
 </script>
 
 <template>
@@ -89,11 +80,11 @@ const rangeStyle = $computed(() => {
 		<div class="range-slider relative w-100" :dir="rtl ? 'rtl' : 'ltr'">
 			<input
 				:id="id"
-				v-model="from"
+				:value="validFrom"
 				class="from"
 				type="range"
 				:min="min"
-				:max="multiRange ? to : max"
+				:max="multiRange ? validTo : max"
 				:step="step"
 				:required="required"
 				:disabled="disabled"
@@ -102,10 +93,10 @@ const rangeStyle = $computed(() => {
 			>
 			<input
 				v-if="multiRange"
-				v-model="to"
+				:value="validTo"
 				class="to"
 				type="range"
-				:min="from"
+				:min="validFrom"
 				:max="max"
 				:step="step"
 				:required="required"
@@ -124,19 +115,19 @@ const rangeStyle = $computed(() => {
 				class="txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0"
 				:style="{ '--progress': `${fromPercentage}` }"
 			>
-				{{ validFrom }}
+				{{ displayFrom }}
 			</p>
 			<p
 				v-if="multiRange && validTo !== max"
 				class="txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute"
 				:style="{ '--progress': `${toPercentage}` }"
 			>
-				{{ validTo }}
+				{{ displayTo }}
 			</p>
 		</div>
-		<p class="txt-center txt-14 range-slider-txt flex space-between opacity-4 mx-05">
-			<span>{{ min }}</span>
-			<span>{{ max }}</span>
+		<p class="txt-center txt-14 user-select-none range-slider-txt flex space-between opacity-4 mx-05">
+			<span>{{ formatValue(min) }}</span>
+			<span>{{ formatValue(max) }}</span>
 		</p>
 	</div>
 </template>