bge-ui 1.4.3 → 1.4.4

package/dist/index.js

@@ -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, (val) => {
-      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
@@ -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)

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.3",
+  "version": "1.4.4",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

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