bge-ui 1.4.2 → 1.4.4

package/dist/index.js

@@ -4666,7 +4666,7 @@ function toValue(r) {
 const isClient = typeof window !== "undefined" && typeof document !== "undefined";
 typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
 const toString = Object.prototype.toString;
-const isObject = (val2) => toString.call(val2) === "[object Object]";
+const isObject = (val) => toString.call(val) === "[object Object]";
 const noop$1 = () => {
 };
 const isIOS$1 = /* @__PURE__ */ getIsIOS();
@@ -5366,7 +5366,7 @@ var range = function range2(rule, value, source, errors2, options) {
   var min2 = typeof rule.min === "number";
   var max2 = typeof rule.max === "number";
   var spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
-  var val2 = value;
+  var val = value;
   var key = null;
   var num = typeof value === "number";
   var str = typeof value === "string";
@@ -5382,20 +5382,20 @@ var range = function range2(rule, value, source, errors2, options) {
     return false;
   }
   if (arr) {
-    val2 = value.length;
+    val = value.length;
   }
   if (str) {
-    val2 = value.replace(spRegexp, "_").length;
+    val = value.replace(spRegexp, "_").length;
   }
   if (len) {
-    if (val2 !== rule.len) {
+    if (val !== rule.len) {
       errors2.push(format$1(options.messages[key].len, rule.fullField, rule.len));
     }
-  } else if (min2 && !max2 && val2 < rule.min) {
+  } else if (min2 && !max2 && val < rule.min) {
     errors2.push(format$1(options.messages[key].min, rule.fullField, rule.min));
-  } else if (max2 && !min2 && val2 > rule.max) {
+  } else if (max2 && !min2 && val > rule.max) {
     errors2.push(format$1(options.messages[key].max, rule.fullField, rule.max));
-  } else if (min2 && max2 && (val2 < rule.min || val2 > rule.max)) {
+  } else if (min2 && max2 && (val < rule.min || val > rule.max)) {
     errors2.push(format$1(options.messages[key].range, rule.fullField, rule.min, rule.max));
   }
 };
@@ -6219,8 +6219,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       emit("blur");
       emit("update:modelValue", input.value);
     }
-    watch(() => props.modelValue, (val2) => {
-      input.value = val2;
+    watch(() => props.modelValue, (val) => {
+      input.value = val;
       formItemContext && formItemContext.validate && formItemContext.validate().catch((err) => err);
     });
     function handleChange() {
@@ -8895,16 +8895,16 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const props = __props;
     const formItemContext = inject(formItemContextKey$3, void 0);
     const input = ref(false);
-    watch(() => props.modelValue, (val2) => {
-      if (typeof val2 === "number" || typeof val2 === "string" || typeof val2 === "boolean") {
+    watch(() => props.modelValue, (val) => {
+      if (typeof val === "number" || typeof val === "string" || typeof val === "boolean") {
         input.value = true;
-        if (val2 === props.trueValue) {
+        if (val === props.trueValue) {
           input.value = true;
         } else {
           input.value = false;
         }
       } else {
-        if (val2.includes(props.trueValue)) {
+        if (val.includes(props.trueValue)) {
           input.value = true;
         } else {
           input.value = false;
@@ -8913,15 +8913,15 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       formItemContext && formItemContext.validate && formItemContext.validate().catch((err) => err);
     });
     onMounted(() => {
-      if (typeof val === "number" || typeof val === "string" || typeof val === "boolean") {
+      if (typeof props.modelValue === "number" || typeof props.modelValue === "string" || typeof props.modelValue === "boolean") {
         input.value = true;
-        if (val === props.trueValue) {
+        if (props.modelValue === props.trueValue) {
           input.value = true;
         } else {
           input.value = false;
         }
       } else {
-        if (val.includes(props.trueValue)) {
+        if (props.modelValue.includes(props.trueValue)) {
           input.value = true;
         } else {
           input.value = false;
@@ -9065,8 +9065,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     const props = __props;
     const formItemContext = inject(formItemContextKey$2, void 0);
     const input = ref(false);
-    watch(() => props.modelValue, (val2) => {
-      if (val2 === props.trueValue) {
+    watch(() => props.modelValue, (val) => {
+      if (val === props.trueValue) {
         input.value = true;
       } else {
         input.value = false;
@@ -10590,14 +10590,22 @@ function toFixedPoint(str, e, z) {
   return str;
 }
 var BigNumber = clone();
-const _hoisted_1$e = { class: "bge-slider__scale" };
+const _hoisted_1$e = {
+  key: 0,
+  class: "bge-slider__scale"
+};
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     marks: {
       type: Object,
-      default: () => {
-      }
+      default: () => ({
+        0: "",
+        25: "",
+        50: "",
+        75: "",
+        100: ""
+      })
     },
     modelValue: {
       type: Number,
@@ -10632,7 +10640,6 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       currentY: 0,
       startPosition: 0,
       newPosition: 0,
-      stopValue: 0,
       newValue: 0
     });
     function onDragStart(event) {
@@ -10704,21 +10711,51 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       setTimeout(() => emit("blur"));
     }
     const tooltip = ref();
+    const maxValue = computed(() => {
+      if (props.marks) {
+        return Object.keys(props.marks)[Object.keys(props.marks).length - 1];
+      }
+      return 100;
+    });
+    const minValue = computed(() => {
+      if (props.marks) {
+        return Object.keys(props.marks)[0];
+      }
+      return 0;
+    });
+    const marksPercents = computed(() => {
+      const result = {};
+      Object.keys(props.marks).forEach((mark) => {
+        const percent = new BigNumber(new BigNumber(mark).minus(minValue.value)).div(new BigNumber(maxValue.value).minus(minValue.value)).multipliedBy(100).toFixed(0);
+        result[mark] = percent;
+      });
+      return result;
+    });
+    const stopValue = computed(() => {
+      let value = 0;
+      Object.keys(props.marks).forEach((item, index2) => {
+        if (props.modelValue >= Number(item)) {
+          value = index2;
+        }
+      });
+      return value;
+    });
     function setPosition(percent) {
       state2.sliderBarStyle = `width: ${percent}%`;
       state2.sliderButtonStyle = `left: ${percent}%`;
-      state2.stopValue = Math.floor(percent / 100 * (Object.values(props.marks).length - 1));
-      state2.newValue = Math.floor(percent);
+      state2.newValue = Math.floor(Number(new BigNumber(percent).div(100).multipliedBy(new BigNumber(maxValue.value).minus(minValue.value)).plus(minValue.value).toFixed(0)));
       emit("input", state2.newValue);
       emit("update:modelValue", state2.newValue);
+      const newPercent = new BigNumber(new BigNumber(state2.newValue).minus(minValue.value)).div(new BigNumber(maxValue.value).minus(minValue.value)).multipliedBy(100).toFixed(0);
+      if (newPercent !== percent) {
+        setPosition(newPercent);
+      }
       setTimeout(() => {
         tooltip.value && tooltip.value.popper.value && tooltip.value.popper.value.update();
       }, 50);
     }
-    watch(() => props.modelValue, (val2) => {
-      let percent = val2;
-      percent = percent > 100 ? 100 : percent;
-      percent = percent < 0 ? 0 : percent;
+    watch(() => props.modelValue, () => {
+      const percent = new BigNumber(new BigNumber(props.modelValue).minus(minValue.value)).div(new BigNumber(maxValue.value).minus(minValue.value)).multipliedBy(100).toFixed(0);
       setPosition(percent);
     }, {
       immediate: true
@@ -10771,15 +10808,15 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             }, null, 32))
           ], 36),
           createElementVNode("div", {
-            class: normalizeClass(`bge-slider__stops bge-slider__stop-${state2.stopValue}`)
+            class: normalizeClass(`bge-slider__stops bge-slider__stop-${stopValue.value}`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.marks, (mark, key) => {
               return openBlock(), createElementBlock("div", {
                 key,
                 class: "bge-slider__stop",
-                style: normalizeStyle(`left: ${key}%;`)
+                style: normalizeStyle(`left: ${marksPercents.value[key]}%;`)
               }, [
-                createElementVNode("div", _hoisted_1$e, toDisplayString(mark), 1)
+                mark ? (openBlock(), createElementBlock("div", _hoisted_1$e, toDisplayString(mark), 1)) : createCommentVNode("", true)
               ], 4);
             }), 128))
           ], 2)
@@ -10916,8 +10953,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
 });
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
-  for (const [key, val2] of props) {
-    target[key] = val2;
+  for (const [key, val] of props) {
+    target[key] = val;
   }
   return target;
 };
@@ -14729,8 +14766,8 @@ const errors = {
   prop: (name) => `"${name}" prop must be enabled!`,
   dateArr: (name) => `You need to use array as "model-value" binding in order to support "${name}"`
 };
-const convertType = (val2) => {
-  return val2;
+const convertType = (val) => {
+  return val;
 };
 const getNumVal = (num) => {
   if (num === 0)
@@ -15562,8 +15599,8 @@ const getDefaultUI = (ui) => {
       Object.keys(ui).map((item) => {
         const key = item;
         const value = ui[key];
-        const val2 = typeof ui[key] === "string" ? { [value]: true } : Object.fromEntries(value.map((k) => [k, true]));
-        return [item, val2];
+        const val = typeof ui[key] === "string" ? { [value]: true } : Object.fromEntries(value.map((k) => [k, true]));
+        return [item, val];
       })
     )
   };
@@ -15719,7 +15756,7 @@ const useExternalInternalMapper = (emit, props, isInputFocused) => {
   const mapYearExternalToInternal = (value) => {
     if (Array.isArray(value)) {
       if (defaultedMultiDates.value.enabled) {
-        return value.map((val2) => convertCustomModeType(val2, setYear(getDate(), val2)));
+        return value.map((val) => convertCustomModeType(val, setYear(getDate(), val)));
       }
       return checkRangeEnabled(
         () => [
@@ -15756,7 +15793,7 @@ const useExternalInternalMapper = (emit, props, isInputFocused) => {
     const today = set(getDate(), { date: 1 });
     if (Array.isArray(value)) {
       if (defaultedMultiDates.value.enabled) {
-        return value.map((val2) => convertCustomModeType(val2, setDateMonthOrYear(today, +val2.month, +val2.year)));
+        return value.map((val) => convertCustomModeType(val, setDateMonthOrYear(today, +val.month, +val.year)));
       }
       return checkRangeEnabled(
         () => [
@@ -15903,22 +15940,22 @@ const useExternalInternalMapper = (emit, props, isInputFocused) => {
     }
     return convertModelToTz(new Date(value));
   };
-  const toModelType = (val2) => {
-    if (!val2)
+  const toModelType = (val) => {
+    if (!val)
       return "";
     if (props.utc) {
-      return dateToUtc(val2, props.utc === "preserve", props.enableSeconds);
+      return dateToUtc(val, props.utc === "preserve", props.enableSeconds);
     }
     if (props.modelType) {
       if (props.modelType === "timestamp")
-        return +convertZonedModelToLocal(val2);
+        return +convertZonedModelToLocal(val);
       if (props.modelType === "iso")
-        return convertZonedModelToLocal(val2).toISOString();
+        return convertZonedModelToLocal(val).toISOString();
       if (props.modelType === "format" && (typeof props.format === "string" || !props.format))
-        return formatDateFn(convertZonedModelToLocal(val2));
-      return formatDateFn(convertZonedModelToLocal(val2), props.modelType, true);
+        return formatDateFn(convertZonedModelToLocal(val));
+      return formatDateFn(convertZonedModelToLocal(val), props.modelType, true);
     }
-    return convertZonedModelToLocal(val2);
+    return convertZonedModelToLocal(val);
   };
   const emitValue = (value, useTz = false, returnOnly = false) => {
     if (returnOnly)
@@ -16770,9 +16807,9 @@ const useValidation = (props) => {
     }
     return true;
   };
-  const isValidYear = (val2) => {
-    if (val2) {
-      const activeYear = getYear(val2);
+  const isValidYear = (val) => {
+    if (val) {
+      const activeYear = getYear(val);
       return activeYear >= +props.yearRange[0] && activeYear <= props.yearRange[1];
     }
     return true;
@@ -17236,7 +17273,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         handleRangeTextInput(value);
       } else if (defaultedMultiDates.value.enabled) {
         const dates = value.split(`;`);
-        parsedDate.value = dates.map((val2) => parser(val2.trim())).filter((val2) => val2);
+        parsedDate.value = dates.map((val) => parser(val.trim())).filter((val) => val);
       } else {
         parsedDate.value = parser(value);
       }
@@ -17764,9 +17801,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         }
       });
     };
-    const onClick = (val2) => {
-      if (!val2.disabled) {
-        emit("selected", val2.value);
+    const onClick = (val) => {
+      if (!val.disabled) {
+        emit("selected", val.value);
       }
     };
     const toggle = () => {
@@ -17803,9 +17840,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         return;
       checkStopPropagation(ev, defaultedConfig.value, true);
     };
-    const setHoverValue = (val2) => {
-      hoverValue.value = val2;
-      emit("hover-value", val2);
+    const setHoverValue = (val) => {
+      hoverValue.value = val;
+      emit("hover-value", val);
     };
     const onTab = () => {
       toggle();
@@ -18388,7 +18425,7 @@ const useMonthPicker = (props, emit) => {
   const getModelMonthYear = () => {
     if (modelValue.value) {
       if (Array.isArray(modelValue.value)) {
-        return modelValue.value.map((val2) => getMonthYear(val2));
+        return modelValue.value.map((val) => getMonthYear(val));
       }
       return getMonthYear(modelValue.value);
     }
@@ -18875,17 +18912,17 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       () => (type4) => isValueDisabled(type4, props[type4]) || isOverlayValueDisabled(type4, props[type4])
     );
     const timeValues = computed(() => ({ hours: props.hours, minutes: props.minutes, seconds: props.seconds }));
-    const isOverlayValueDisabled = (type4, val2) => {
+    const isOverlayValueDisabled = (type4, val) => {
       if (defaultedRange.value.enabled && !defaultedRange.value.disableTimeRangeValidation) {
-        return !props.validateTime(type4, val2);
+        return !props.validateTime(type4, val);
       }
       return false;
     };
     const disabledRangedArrows = (type4, inc) => {
       if (defaultedRange.value.enabled && !defaultedRange.value.disableTimeRangeValidation) {
         const inVal = inc ? +props[`${type4}Increment`] : -+props[`${type4}Increment`];
-        const val2 = props[type4] + inVal;
-        return !props.validateTime(type4, val2);
+        const val = props[type4] + inVal;
+        return !props.validateTime(type4, val);
       }
       return false;
     };
@@ -18939,10 +18976,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         return true;
       return Boolean((_a = disabledTimes[type4]) == null ? void 0 : _a.includes(value));
     };
-    const getAmPmDiff = (val2, type4) => {
+    const getAmPmDiff = (val, type4) => {
       if (type4 !== "hours")
-        return val2;
-      return amPm.value === "AM" ? val2 : val2 + 12;
+        return val;
+      return amPm.value === "AM" ? val : val + 12;
     };
     const getGridItems = (type4) => {
       const timeRange = props.is24 ? 24 : 12;
@@ -18962,16 +18999,16 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         return { active, disabled };
       });
     };
-    const sanitizeMinutesAndSeconds = (val2) => val2 >= 0 ? val2 : 59;
-    const sanitizeHours = (val2) => val2 >= 0 ? val2 : 23;
-    const isDateInRange = (val2, type4) => {
+    const sanitizeMinutesAndSeconds = (val) => val >= 0 ? val : 59;
+    const sanitizeHours = (val) => val >= 0 ? val : 23;
+    const isDateInRange = (val, type4) => {
       const minTime = props.minTime ? setTime(sanitizeTime(props.minTime)) : null;
       const maxTime = props.maxTime ? setTime(sanitizeTime(props.maxTime)) : null;
       const selectedDate = setTime(
         sanitizeTime(
           timeValues.value,
           type4,
-          type4 === "minutes" || type4 === "seconds" ? sanitizeMinutesAndSeconds(val2) : sanitizeHours(val2)
+          type4 === "minutes" || type4 === "seconds" ? sanitizeMinutesAndSeconds(val) : sanitizeHours(val)
         )
       );
       if (minTime && maxTime)
@@ -19917,13 +19954,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         return { active, disabled, highlighted };
       });
     });
-    const toggleWrap = (val2, type4, show) => {
+    const toggleWrap = (val, type4, show) => {
       if (show !== void 0) {
-        val2.value = show;
+        val.value = show;
       } else {
-        val2.value = !val2.value;
+        val.value = !val.value;
       }
-      if (!val2.value) {
+      if (!val.value) {
         overlayOpen.value = false;
         emit("overlay-closed", type4);
       } else {
@@ -19958,7 +19995,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           index: 1,
           toggle: toggleMonthPicker,
           modelValue: monthModelBind.value,
-          updateModelValue: (val2) => monthModelBind.value = val2,
+          updateModelValue: (val) => monthModelBind.value = val,
           text: getMonthDisplayVal.value.text,
           showSelectionGrid: showMonthPicker.value,
           items: groupedMonths.value,
@@ -19970,7 +20007,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           index: 2,
           toggle: toggleYearPicker,
           modelValue: yearModelBind.value,
-          updateModelValue: (val2) => yearModelBind.value = val2,
+          updateModelValue: (val) => yearModelBind.value = val,
           text: formatNumber(props.year, props.locale),
           showSelectionGrid: showYearPicker.value,
           items: groupedYears.value,
@@ -20978,16 +21015,16 @@ const useDatePicker = (props, emit, triggerCalendarTransition, updateFlow) => {
       postRangeSelect();
     }
   };
-  const updateMonthYear = (instance, val2) => {
+  const updateMonthYear = (instance, val) => {
     var _a;
-    setCalendarMonthYear(instance, val2.month, val2.year, true);
+    setCalendarMonthYear(instance, val.month, val.year, true);
     if (defaultedMultiCalendars.value.count && !defaultedMultiCalendars.value.solo) {
       autoChangeMultiCalendars(instance);
     }
-    emit("update-month-year", { instance, month: val2.month, year: val2.year });
+    emit("update-month-year", { instance, month: val.month, year: val.year });
     triggerCalendarTransition(defaultedMultiCalendars.value.solo ? instance : void 0);
     const flowActive = ((_a = props.flow) == null ? void 0 : _a.length) ? props.flow[props.flowStep] : void 0;
-    if (!val2.fromNav && (flowActive === FlowStep.month || flowActive === FlowStep.year)) {
+    if (!val.fromNav && (flowActive === FlowStep.month || flowActive === FlowStep.year)) {
       updateFlow();
     }
   };
@@ -21382,7 +21419,7 @@ const useQuarterPicker = (props, emit) => {
   const isQuarterActive = computed(() => (date4) => {
     if (modelValue.value) {
       if (Array.isArray(modelValue.value)) {
-        return modelValue.value.some((val2) => isSameQuarter(date4, val2));
+        return modelValue.value.some((val) => isSameQuarter(date4, val));
       }
       return isSameQuarter(modelValue.value, date4);
     }
@@ -22585,17 +22622,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const inputValue = ref();
     const formItemContext = inject(formItemContextKey, void 0);
-    function inputValueCallback(val2) {
-      inputValue.value = val2.split(" - ");
+    function inputValueCallback(val) {
+      inputValue.value = val.split(" - ");
     }
-    watch(() => props.modelValue, (val2) => {
-      date4.value = val2;
+    watch(() => props.modelValue, (val) => {
+      date4.value = val;
       formItemContext && formItemContext.validate && formItemContext.validate().catch((err) => err);
     });
-    watch(date4, (val2) => {
-      emit("input", val2);
-      emit("change", val2);
-      emit("update:modelValue", val2);
+    watch(date4, (val) => {
+      emit("input", val);
+      emit("change", val);
+      emit("update:modelValue", val);
     });
     onMounted(() => {
       if (props.modelValue) {
@@ -22694,13 +22731,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isChecked = ref(false);
     const emit = __emit;
     const props = __props;
-    watch(() => props.modelValue, (val2) => {
-      isChecked.value = val2 === props.trueValue;
+    watch(() => props.modelValue, (val) => {
+      isChecked.value = val === props.trueValue;
     }, {
       immediate: true
     });
-    watch(isChecked, (val2) => {
-      if (val2) {
+    watch(isChecked, (val) => {
+      if (val) {
         emit("update:modelValue", props.trueValue);
         emit("change", props.trueValue);
       } else {

package/dist/slider/index.vue.d.ts

@@ -1,7 +1,13 @@
 declare const _default: import("vue").DefineComponent<{
     marks: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {
+            0: string;
+            25: string;
+            50: string;
+            75: string;
+            100: string;
+        };
     };
     modelValue: {
         type: NumberConstructor;
@@ -27,7 +33,13 @@ declare const _default: import("vue").DefineComponent<{
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     marks: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => {
+            0: string;
+            25: string;
+            50: string;
+            75: string;
+            100: string;
+        };
     };
     modelValue: {
         type: NumberConstructor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/checkbox/index.vue

@@ -95,15 +95,15 @@ watch(() => props.modelValue, (val) => {
 })
 
 onMounted(() => { 
-  if (typeof val === 'number' || typeof val === 'string' || typeof val === 'boolean') {
+  if (typeof props.modelValue === 'number' || typeof props.modelValue === 'string' || typeof props.modelValue === 'boolean') {
     input.value = true
-    if (val === props.trueValue) {
+    if (props.modelValue === props.trueValue) {
       input.value = true
     } else {
       input.value = false
     }
   } else {
-    if (val.includes(props.trueValue)) {
+    if (props.modelValue.includes(props.trueValue)) {
       input.value = true
     } else {
       input.value = false

package/src/slider/index.vue

@@ -15,23 +15,29 @@
 
         <div v-else class="slider-button" @mouseover="state.hovering = true" @mouseleave="state.hovering = false"></div>
       </div>
-      <div :class="`bge-slider__stops bge-slider__stop-${state.stopValue}`">
-        <div v-for="(mark, key) in marks" :key="key" class="bge-slider__stop" :style="`left: ${key}%;`">
-          <div class="bge-slider__scale">{{ mark }}</div>
+      <div :class="`bge-slider__stops bge-slider__stop-${stopValue}`">
+        <div v-for="(mark, key) in marks" :key="key" class="bge-slider__stop" :style="`left: ${marksPercents[key]}%;`">
+          <div v-if="mark" class="bge-slider__scale">{{ mark }} </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, watch, computed } from 'vue'
 import UiTooltip from '../tooltip/index.vue'
 import BigNumber from 'bignumber.js'
 
 const props = defineProps({
   marks: {
     type: Object,
-    default: () => {}
+    default: () => ({
+      0: '',
+      25: '',
+      50: '',
+      75: '',
+      100: ''
+    })
   },
   modelValue: {
     type: Number,
@@ -63,7 +69,6 @@ const state = reactive({
   currentY: 0,
   startPosition: 0,
   newPosition: 0,
-  stopValue: 0,
   newValue: 0
 })
 
@@ -149,22 +154,63 @@ function onSliderClick (event: any) {
 
 const tooltip = ref()
 
-function setPosition (percent: any) {
+const maxValue = computed(() => {
+  if (props.marks) {
+    return Object.keys(props.marks)[Object.keys(props.marks).length - 1]
+  }
+  return 100
+})
+
+const minValue = computed(() => {
+  if (props.marks) {
+    return Object.keys(props.marks)[0]
+  }
+  return 0
+})
+
+const marksPercents = computed(() => {
+  const result: any = {}
+  Object.keys(props.marks).forEach((mark: string) => {
+    const percent = new BigNumber(new BigNumber(mark).minus(minValue.value)).div(new BigNumber(maxValue.value).minus(minValue.value)).multipliedBy(100).toFixed(0)
+    result[mark] = percent
+  })
+  return result
+})
+
+// const percent = computed(() => {
+//   return new BigNumber(new BigNumber(props.modelValue).minus(minValue.value)).div(new BigNumber(maxValue.value).minus(minValue.value)).multipliedBy(100).toFixed(0)
+// })
+
+const stopValue = computed(() => {
+  let value = 0
+  Object.keys(props.marks).forEach(((item: string, index: number) => {
+    if (props.modelValue >= Number(item)) {
+      value = index
+    }
+  }))
+  return value
+})
+
+function setPosition (percent: string) {
   state.sliderBarStyle = `width: ${percent}%`
   state.sliderButtonStyle = `left: ${percent}%`
-  state.stopValue = Math.floor(percent / 100 * (Object.values(props.marks).length - 1))
-  state.newValue = Math.floor(percent)
+  // state.stopValue = Math.floor(Number(percent.value) / 100 * (Object.values(props.marks).length - 1))
+  // state.newValue = Math.floor(Number(percent.value))
+  // state.stopValue = Number(new BigNumber(percent).div(100).multipliedBy(new BigNumber(maxValue.value).minus(minValue.value)).plus(minValue.value).toFixed(0))
+  state.newValue = Math.floor(Number(new BigNumber(percent).div(100).multipliedBy(new BigNumber(maxValue.value).minus(minValue.value)).plus(minValue.value).toFixed(0)))
   emit('input', state.newValue)
   emit('update:modelValue', state.newValue)
+  const newPercent = new BigNumber(new BigNumber(state.newValue).minus(minValue.value)).div(new BigNumber(maxValue.value).minus(minValue.value)).multipliedBy(100).toFixed(0)
+  if (newPercent !== percent) {
+    setPosition(newPercent)
+  }
   setTimeout(() => {
     tooltip.value && tooltip.value.popper.value && tooltip.value.popper.value.update()
   }, 50)
 }
 
-watch(() => props.modelValue, (val: number) => {
-  let percent = val
-  percent = percent > 100 ? 100 : percent
-  percent = percent < 0 ? 0 : percent
+watch(() => props.modelValue, () => {
+  const percent = new BigNumber(new BigNumber(props.modelValue).minus(minValue.value)).div(new BigNumber(maxValue.value).minus(minValue.value)).multipliedBy(100).toFixed(0)
   setPosition(percent)
 }, {
   immediate: true