@bagelink/vue 0.0.1041 → 0.0.1043

package/dist/components/form/inputs/RangeInput.vue.d.ts

@@ -9,6 +9,7 @@ export interface RangeInputProps {
     id?: string;
     rtl?: boolean;
     multiRange?: boolean;
+    formatValue?: (value: number) => string;
 }
 declare const _default: import('vue').DefineComponent<RangeInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;

package/dist/components/form/inputs/RangeInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RangeInput.vue"],"names":[],"mappings":"AAyNA,MAAM,WAAW,eAAe;IAC/B,UAAU,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;CACpB;;;;;;AAkND,wBAQG"}
+{"version":3,"file":"RangeInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RangeInput.vue"],"names":[],"mappings":"AAgNA,MAAM,WAAW,eAAe;IAC/B,UAAU,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACvC;;;;;;AAwMD,wBAQG"}

package/dist/index.cjs

@@ -20436,10 +20436,10 @@ const _hoisted_1$s = {
   class: "label"
 };
 const _hoisted_2$i = ["dir"];
-const _hoisted_3$e = ["id", "min", "max", "step", "required", "disabled", "aria-label"];
-const _hoisted_4$9 = ["min", "max", "step", "required", "disabled"];
+const _hoisted_3$e = ["id", "value", "min", "max", "step", "required", "disabled", "aria-label"];
+const _hoisted_4$9 = ["value", "min", "max", "step", "required", "disabled"];
 const _hoisted_5$9 = { class: "track absolute pointer-events-none overflow-hidden round" };
-const _hoisted_6$8 = { class: "txt-center txt-14 range-slider-txt flex space-between opacity-4 mx-05" };
+const _hoisted_6$8 = { class: "txt-center txt-14 user-select-none range-slider-txt flex space-between opacity-4 mx-05" };
 const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   __name: "RangeInput",
   props: {
@@ -20452,7 +20452,8 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     disabled: { type: Boolean },
     id: {},
     rtl: { type: Boolean },
-    multiRange: { type: Boolean }
+    multiRange: { type: Boolean },
+    formatValue: { type: Function }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -20466,43 +20467,32 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
       disabled,
       id,
       rtl,
-      multiRange
+      multiRange = false,
+      formatValue = (value) => value.toString()
     } = props2;
-    let from = vue.ref(min2);
-    let to2 = vue.ref(max2);
-    let isExternalUpdate = vue.ref(true);
+    let from = vue.ref(Array.isArray(props2.modelValue) ? props2.modelValue[0] : props2.modelValue ?? min2);
+    let to2 = vue.ref(Array.isArray(props2.modelValue) ? props2.modelValue[1] : max2);
     const validFrom = vue.computed(() => Math.min(Math.max(from.value, min2), multiRange ? to2.value : max2));
     const validTo = vue.computed(() => Math.max(Math.min(to2.value, max2), from.value));
+    const fromPercentage = vue.computed(() => (validFrom.value - min2) / (max2 - min2) * 100);
+    const toPercentage = vue.computed(() => (validTo.value - min2) / (max2 - min2) * 100);
     vue.watch(() => props2.modelValue, (newVal) => {
-      isExternalUpdate.value = true;
-      if (multiRange && Array.isArray(newVal)) {
+      if (Array.isArray(newVal) && multiRange) {
         from.value = newVal[0];
         to2.value = newVal[1];
-      } else if (!multiRange && !Array.isArray(newVal)) {
+      } else if (!Array.isArray(newVal)) {
         from.value = newVal ?? min2;
         to2.value = max2;
       }
     }, { immediate: true });
-    vue.watch([() => validFrom.value, () => validTo.value], () => {
-      if (!isExternalUpdate.value) {
-        if (multiRange) {
-          emit2("update:modelValue", [validFrom.value, validTo.value]);
-        } else {
-          emit2("update:modelValue", validFrom.value);
-        }
-      }
-      isExternalUpdate.value = false;
-    });
     function handleInput(value, isFromInput) {
-      isExternalUpdate.value = false;
       if (isFromInput) {
         from.value = value;
       } else {
         to2.value = value;
       }
+      emit2("update:modelValue", multiRange ? [validFrom.value, validTo.value] : validFrom.value);
     }
-    const fromPercentage = vue.computed(() => (validFrom.value - min2) / (max2 - min2) * 100);
-    const toPercentage = vue.computed(() => (validTo.value - min2) / (max2 - min2) * 100);
     const rangeStyle = vue.computed(() => {
       if (multiRange) {
         return {
@@ -20512,6 +20502,8 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
       }
       return rtl ? { left: `${100 - fromPercentage.value}%`, width: `${fromPercentage.value}%` } : { left: "0", width: `${fromPercentage.value}%` };
     });
+    const displayFrom = vue.computed(() => formatValue(validFrom.value));
+    const displayTo = vue.computed(() => formatValue(validTo.value));
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", null, [
         vue.unref(label) ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$s, vue.toDisplayString(vue.unref(label)), 1)) : vue.createCommentVNode("", true),
@@ -20519,36 +20511,32 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
           class: "range-slider relative w-100",
           dir: vue.unref(rtl) ? "rtl" : "ltr"
         }, [
-          vue.withDirectives(vue.createElementVNode("input", {
+          vue.createElementVNode("input", {
             id: vue.unref(id),
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(from) ? from.value = $event : from = $event),
+            value: validFrom.value,
             class: "from",
             type: "range",
             min: vue.unref(min2),
-            max: vue.unref(multiRange) ? vue.unref(to2) : vue.unref(max2),
+            max: vue.unref(multiRange) ? validTo.value : vue.unref(max2),
             step: vue.unref(step),
             required: _ctx.required,
             disabled: vue.unref(disabled),
             "aria-label": vue.unref(multiRange) ? "Minimum value" : "Value",
-            onInput: _cache[1] || (_cache[1] = (e) => handleInput(+e.target.value, true))
-          }, null, 40, _hoisted_3$e), [
-            [vue.vModelText, vue.unref(from)]
-          ]),
-          vue.unref(multiRange) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+            onInput: _cache[0] || (_cache[0] = (e) => handleInput(+e.target.value, true))
+          }, null, 40, _hoisted_3$e),
+          vue.unref(multiRange) ? (vue.openBlock(), vue.createElementBlock("input", {
             key: 0,
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(to2) ? to2.value = $event : to2 = $event),
+            value: validTo.value,
             class: "to",
             type: "range",
-            min: vue.unref(from),
+            min: validFrom.value,
             max: vue.unref(max2),
             step: vue.unref(step),
             required: _ctx.required,
             disabled: vue.unref(disabled),
             "aria-label": "Maximum value",
-            onInput: _cache[3] || (_cache[3] = (e) => handleInput(+e.target.value, false))
-          }, null, 40, _hoisted_4$9)), [
-            [vue.vModelText, vue.unref(to2)]
-          ]) : vue.createCommentVNode("", true),
+            onInput: _cache[1] || (_cache[1] = (e) => handleInput(+e.target.value, false))
+          }, null, 40, _hoisted_4$9)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", _hoisted_5$9, [
             vue.createElementVNode("div", {
               class: "active-range absolute h-100 pointer-events-none bg-primary",
@@ -20559,22 +20547,22 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
             key: 1,
             class: "txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0",
             style: vue.normalizeStyle({ "--progress": `${fromPercentage.value}` })
-          }, vue.toDisplayString(validFrom.value), 5)) : vue.createCommentVNode("", true),
+          }, vue.toDisplayString(displayFrom.value), 5)) : vue.createCommentVNode("", true),
           vue.unref(multiRange) && validTo.value !== vue.unref(max2) ? (vue.openBlock(), vue.createElementBlock("p", {
             key: 2,
             class: "txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute",
             style: vue.normalizeStyle({ "--progress": `${toPercentage.value}` })
-          }, vue.toDisplayString(validTo.value), 5)) : vue.createCommentVNode("", true)
+          }, vue.toDisplayString(displayTo.value), 5)) : vue.createCommentVNode("", true)
         ], 8, _hoisted_2$i),
         vue.createElementVNode("p", _hoisted_6$8, [
-          vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(min2)), 1),
-          vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(max2)), 1)
+          vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)(vue.unref(min2))), 1),
+          vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)(vue.unref(max2))), 1)
         ])
       ]);
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-28a2da0e"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-3616fbd2"]]);
 const tableTools = [
   "mergeCells",
   "splitCells",

package/dist/index.mjs

@@ -20434,10 +20434,10 @@ const _hoisted_1$s = {
   class: "label"
 };
 const _hoisted_2$i = ["dir"];
-const _hoisted_3$e = ["id", "min", "max", "step", "required", "disabled", "aria-label"];
-const _hoisted_4$9 = ["min", "max", "step", "required", "disabled"];
+const _hoisted_3$e = ["id", "value", "min", "max", "step", "required", "disabled", "aria-label"];
+const _hoisted_4$9 = ["value", "min", "max", "step", "required", "disabled"];
 const _hoisted_5$9 = { class: "track absolute pointer-events-none overflow-hidden round" };
-const _hoisted_6$8 = { class: "txt-center txt-14 range-slider-txt flex space-between opacity-4 mx-05" };
+const _hoisted_6$8 = { class: "txt-center txt-14 user-select-none range-slider-txt flex space-between opacity-4 mx-05" };
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "RangeInput",
   props: {
@@ -20450,7 +20450,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean },
     id: {},
     rtl: { type: Boolean },
-    multiRange: { type: Boolean }
+    multiRange: { type: Boolean },
+    formatValue: { type: Function }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -20464,43 +20465,32 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       disabled,
       id,
       rtl,
-      multiRange
+      multiRange = false,
+      formatValue = (value) => value.toString()
     } = props2;
-    let from = ref(min2);
-    let to2 = ref(max2);
-    let isExternalUpdate = ref(true);
+    let from = ref(Array.isArray(props2.modelValue) ? props2.modelValue[0] : props2.modelValue ?? min2);
+    let to2 = ref(Array.isArray(props2.modelValue) ? props2.modelValue[1] : max2);
     const validFrom = computed(() => Math.min(Math.max(from.value, min2), multiRange ? to2.value : max2));
     const validTo = computed(() => Math.max(Math.min(to2.value, max2), from.value));
+    const fromPercentage = computed(() => (validFrom.value - min2) / (max2 - min2) * 100);
+    const toPercentage = computed(() => (validTo.value - min2) / (max2 - min2) * 100);
     watch(() => props2.modelValue, (newVal) => {
-      isExternalUpdate.value = true;
-      if (multiRange && Array.isArray(newVal)) {
+      if (Array.isArray(newVal) && multiRange) {
         from.value = newVal[0];
         to2.value = newVal[1];
-      } else if (!multiRange && !Array.isArray(newVal)) {
+      } else if (!Array.isArray(newVal)) {
         from.value = newVal ?? min2;
         to2.value = max2;
       }
     }, { immediate: true });
-    watch([() => validFrom.value, () => validTo.value], () => {
-      if (!isExternalUpdate.value) {
-        if (multiRange) {
-          emit2("update:modelValue", [validFrom.value, validTo.value]);
-        } else {
-          emit2("update:modelValue", validFrom.value);
-        }
-      }
-      isExternalUpdate.value = false;
-    });
     function handleInput(value, isFromInput) {
-      isExternalUpdate.value = false;
       if (isFromInput) {
         from.value = value;
       } else {
         to2.value = value;
       }
+      emit2("update:modelValue", multiRange ? [validFrom.value, validTo.value] : validFrom.value);
     }
-    const fromPercentage = computed(() => (validFrom.value - min2) / (max2 - min2) * 100);
-    const toPercentage = computed(() => (validTo.value - min2) / (max2 - min2) * 100);
     const rangeStyle = computed(() => {
       if (multiRange) {
         return {
@@ -20510,6 +20500,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       }
       return rtl ? { left: `${100 - fromPercentage.value}%`, width: `${fromPercentage.value}%` } : { left: "0", width: `${fromPercentage.value}%` };
     });
+    const displayFrom = computed(() => formatValue(validFrom.value));
+    const displayTo = computed(() => formatValue(validTo.value));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
         unref(label) ? (openBlock(), createElementBlock("label", _hoisted_1$s, toDisplayString(unref(label)), 1)) : createCommentVNode("", true),
@@ -20517,36 +20509,32 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           class: "range-slider relative w-100",
           dir: unref(rtl) ? "rtl" : "ltr"
         }, [
-          withDirectives(createElementVNode("input", {
+          createElementVNode("input", {
             id: unref(id),
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(from) ? from.value = $event : from = $event),
+            value: validFrom.value,
             class: "from",
             type: "range",
             min: unref(min2),
-            max: unref(multiRange) ? unref(to2) : unref(max2),
+            max: unref(multiRange) ? validTo.value : unref(max2),
             step: unref(step),
             required: _ctx.required,
             disabled: unref(disabled),
             "aria-label": unref(multiRange) ? "Minimum value" : "Value",
-            onInput: _cache[1] || (_cache[1] = (e) => handleInput(+e.target.value, true))
-          }, null, 40, _hoisted_3$e), [
-            [vModelText, unref(from)]
-          ]),
-          unref(multiRange) ? withDirectives((openBlock(), createElementBlock("input", {
+            onInput: _cache[0] || (_cache[0] = (e) => handleInput(+e.target.value, true))
+          }, null, 40, _hoisted_3$e),
+          unref(multiRange) ? (openBlock(), createElementBlock("input", {
             key: 0,
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(to2) ? to2.value = $event : to2 = $event),
+            value: validTo.value,
             class: "to",
             type: "range",
-            min: unref(from),
+            min: validFrom.value,
             max: unref(max2),
             step: unref(step),
             required: _ctx.required,
             disabled: unref(disabled),
             "aria-label": "Maximum value",
-            onInput: _cache[3] || (_cache[3] = (e) => handleInput(+e.target.value, false))
-          }, null, 40, _hoisted_4$9)), [
-            [vModelText, unref(to2)]
-          ]) : createCommentVNode("", true),
+            onInput: _cache[1] || (_cache[1] = (e) => handleInput(+e.target.value, false))
+          }, null, 40, _hoisted_4$9)) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_5$9, [
             createElementVNode("div", {
               class: "active-range absolute h-100 pointer-events-none bg-primary",
@@ -20557,22 +20545,22 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             key: 1,
             class: "txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0",
             style: normalizeStyle({ "--progress": `${fromPercentage.value}` })
-          }, toDisplayString(validFrom.value), 5)) : createCommentVNode("", true),
+          }, toDisplayString(displayFrom.value), 5)) : createCommentVNode("", true),
           unref(multiRange) && validTo.value !== unref(max2) ? (openBlock(), createElementBlock("p", {
             key: 2,
             class: "txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute",
             style: normalizeStyle({ "--progress": `${toPercentage.value}` })
-          }, toDisplayString(validTo.value), 5)) : createCommentVNode("", true)
+          }, toDisplayString(displayTo.value), 5)) : createCommentVNode("", true)
         ], 8, _hoisted_2$i),
         createElementVNode("p", _hoisted_6$8, [
-          createElementVNode("span", null, toDisplayString(unref(min2)), 1),
-          createElementVNode("span", null, toDisplayString(unref(max2)), 1)
+          createElementVNode("span", null, toDisplayString(unref(formatValue)(unref(min2))), 1),
+          createElementVNode("span", null, toDisplayString(unref(formatValue)(unref(max2))), 1)
         ])
       ]);
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-28a2da0e"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-3616fbd2"]]);
 const tableTools = [
   "mergeCells",
   "splitCells",