@nutui/nutui 3.1.17 → 3.1.19-beta.0

package/dist/packages/_es/Picker.js

@@ -18,46 +18,35 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
-* @nutui/nutui v3.1.16 Fri Feb 25 2022 18:32:15 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.0 Mon Mar 28 2022 17:50:21 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref, reactive, computed, watch, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, toRaw, resolveComponent, createVNode, withCtx } from "vue";
+import { ref, reactive, computed, watch, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, onBeforeUnmount, resolveComponent, createVNode, withCtx } from "vue";
 import { c as createComponent } from "./component.js";
+import popup, { popupProps } from "./Popup.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
-import Popup, { popupProps } from "./Popup.js";
 import "./OverLay.js";
 import "./Icon.js";
 import "./pxCheck.js";
-const commonProps = {
-  listData: {
-    type: Array,
-    default: () => {
-      return [];
-    }
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  defaultIndex: {
-    type: [Number, String],
-    default: 0
-  },
-  itemHeight: {
-    type: [Number, String],
-    default: 35
-  }
-};
 const { create: create$1 } = createComponent("picker-column");
 const _sfc_main$1 = create$1({
-  props: __spreadValues({
-    dataType: String,
+  props: {
+    value: [String, Number],
+    columnsType: String,
     itemShow: {
       type: Boolean,
       default: false
+    },
+    column: {
+      type: Array,
+      default: () => []
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
-  }, commonProps),
+  },
   emits: ["click", "change"],
   setup(props, { emit }) {
     const wrapper = ref();
@@ -67,7 +56,8 @@ const _sfc_main$1 = create$1({
         endY: 0,
         startTime: 0,
         endTime: 0,
-        lastY: 0
+        lastY: 0,
+        lastTime: 0
       },
       currIndex: 1,
       transformY: 0,
@@ -113,7 +103,7 @@ const _sfc_main$1 = create$1({
       event.preventDefault();
       let changedTouches = event.changedTouches[0];
       state.touchParams.lastY = changedTouches.pageY;
-      state.touchParams.lastTime = event.timestamp || Date.now();
+      state.touchParams.lastTime = event.timeStamp || Date.now();
       let move = state.touchParams.lastY - state.touchParams.startY;
       let moveTime = state.touchParams.lastTime - state.touchParams.startTime;
       if (moveTime <= 300) {
@@ -150,8 +140,8 @@ const _sfc_main$1 = create$1({
         if (updateMove > 0) {
           updateMove = 0;
         }
-        if (updateMove < -(props.listData.values.length - 1) * state.lineSpacing) {
-          updateMove = -(props.listData.values.length - 1) * state.lineSpacing;
+        if (updateMove < -(props.column.length - 1) * state.lineSpacing) {
+          updateMove = -(props.column.length - 1) * state.lineSpacing;
         }
         let endMove = Math.round(updateMove / state.lineSpacing) * state.lineSpacing;
         let deg = `${(Math.abs(Math.round(endMove / state.lineSpacing)) + 1) * state.rotation}deg`;
@@ -173,25 +163,22 @@ const _sfc_main$1 = create$1({
       }
     };
     const setChooseValue = () => {
-      emit("change", state.currIndex - 1);
+      emit("change", props.column[state.currIndex - 1]);
     };
     const modifyStatus = (type) => {
-      let index = props.defaultIndex;
+      const { column: column2 } = props;
+      let index = column2.findIndex((columnItem) => columnItem.value == props.value);
       state.currIndex = index === -1 ? 1 : index + 1;
       let move = index === -1 ? 0 : index * state.lineSpacing;
       type && setChooseValue();
       setMove(-move);
     };
-    watch(() => props.listData, (val) => {
+    watch(() => props.column, (val) => {
       state.transformY = 0;
       modifyStatus(false);
     }, {
       deep: true
     });
-    watch(() => props.defaultIndex, (val) => {
-      state.transformY = 0;
-      modifyStatus(false);
-    });
     onMounted(() => {
       modifyStatus(true);
     });
@@ -206,7 +193,8 @@ const _sfc_main$1 = create$1({
       onTouchMove,
       onTouchEnd,
       touchRollerStyle,
-      touchListStyle
+      touchListStyle,
+      setMove
     });
   }
 });
@@ -227,12 +215,12 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       ref: "roller",
       style: normalizeStyle(_ctx.touchRollerStyle)
     }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listData.values, (item, index) => {
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.column, (item, index) => {
         return openBlock(), createElementBlock("view", {
           class: normalizeClass(["nut-picker-roller-item", { "nut-picker-roller-item-hidden": _ctx.isHidden(index + 1) }]),
           style: normalizeStyle(_ctx.setRollerStyle(index + 1)),
-          key: item.label ? item.label : index
-        }, toDisplayString(_ctx.dataType === "cascade" ? item.text : item), 7);
+          key: item.value ? item.value : index
+        }, toDisplayString(item.text), 7);
       }), 128))
     ], 4),
     createElementVNode("view", _hoisted_1$1, [
@@ -241,25 +229,29 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         ref: "list",
         style: normalizeStyle(_ctx.touchListStyle)
       }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listData.values, (item, index) => {
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.column, (item, index) => {
           return openBlock(), createElementBlock("view", {
-            class: "nut-picker-item nut-picker-item-ref",
-            key: item.label ? item.label : index
-          }, toDisplayString(_ctx.dataType === "cascade" ? item.text : item), 1);
+            class: normalizeClass(["nut-picker-item", "nut-picker-item-ref", item.className]),
+            key: item.value ? item.value : index
+          }, toDisplayString(item.text), 3);
         }), 128)),
-        _ctx.listData && _ctx.listData.length === 1 ? (openBlock(), createElementBlock("view", _hoisted_2$1)) : createCommentVNode("", true)
+        _ctx.column && _ctx.column.length === 1 ? (openBlock(), createElementBlock("view", _hoisted_2$1)) : createCommentVNode("", true)
       ], 4)
     ])
   ], 32);
 }
 var column = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const { create, componentName } = createComponent("picker");
+const { componentName, create } = createComponent("picker");
 const _sfc_main = create({
   components: {
     [column.name]: column,
-    [Popup.name]: Popup
+    [popup.name]: popup
   },
-  props: __spreadValues(__spreadProps(__spreadValues({}, popupProps), {
+  props: __spreadProps(__spreadValues({}, popupProps), {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
     title: {
       type: String,
       default: ""
@@ -271,143 +263,158 @@ const _sfc_main = create({
     okText: {
       type: String,
       default: "\u786E\u5B9A"
+    },
+    columns: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
-  }), commonProps),
-  emits: ["close", "change", "confirm", "update:visible"],
+  }),
+  emits: ["close", "change", "confirm", "update:visible", "update:modelValue"],
   setup(props, { emit }) {
-    const childrenKey = "children";
-    const valuesKey = "values";
     const state = reactive({
       show: false,
-      formattedColumns: props.listData,
-      defaultIndex: props.defaultIndex
+      formattedColumns: props.columns
     });
-    let _defaultIndex = props.defaultIndex;
-    let defaultIndexList = [];
+    let defaultValues = ref(props.modelValue);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true
       };
     });
-    const dataType = computed(() => {
+    const selectedOptions = computed(() => {
+      let optins = [];
+      columnsList.value.map((column2, index) => {
+        let currOptions = [];
+        currOptions = column2.filter((item) => item.value == defaultValues.value[index]);
+        optins.push(currOptions[0]);
+      });
+      return optins;
+    });
+    const columnsType = computed(() => {
       const firstColumn = state.formattedColumns[0];
-      if (typeof firstColumn === "object") {
-        if (firstColumn[childrenKey]) {
+      if (firstColumn) {
+        if (Array.isArray(firstColumn)) {
+          return "multiple";
+        }
+        if ("children" in firstColumn) {
           return "cascade";
-        } else if (firstColumn == null ? void 0 : firstColumn[valuesKey]) {
-          addDefaultIndexList(props.listData);
-          return "multipleColumns";
         }
       }
-      return "text";
+      return "single";
     });
-    const columnList = computed(() => {
-      if (dataType.value === "text") {
-        return [{ values: state.formattedColumns, defaultIndex: state.defaultIndex }];
-      } else if (dataType.value === "multipleColumns") {
-        return state.formattedColumns;
-      } else if (dataType.value === "cascade") {
-        return formatCascade(state.formattedColumns, state.defaultIndex);
+    const columnsList = computed(() => {
+      switch (columnsType.value) {
+        case "multiple":
+          return state.formattedColumns;
+        case "cascade":
+          return formatCascade(state.formattedColumns, defaultValues.value);
+        default:
+          return [state.formattedColumns];
       }
-      return state.formattedColumns;
     });
-    const addDefaultIndexList = (listData) => {
-      defaultIndexList = [];
-      listData.forEach((res) => {
-        defaultIndexList.push(res.defaultIndex || 0);
-      });
-    };
-    const formatCascade = (listData, defaultIndex) => {
+    const formatCascade = (columns, defaultValues2) => {
       const formatted = [];
-      let children = listData;
-      children.defaultIndex = defaultIndex;
-      while (children) {
-        formatted.push({
-          values: children,
-          defaultIndex: children.defaultIndex || 0
-        });
-        children = children == null ? void 0 : children[children.defaultIndex || 0].children;
+      let cursor = {
+        text: "",
+        value: "",
+        children: columns
+      };
+      let columnIndex = 0;
+      while (cursor && cursor.children) {
+        const options = cursor.children;
+        const value = defaultValues2[columnIndex];
+        let index = options.findIndex((columnItem) => columnItem.value == value);
+        if (index == -1)
+          index = 0;
+        cursor = cursor.children[index];
+        columnIndex++;
+        formatted.push(options);
       }
-      addDefaultIndexList(formatted);
       return formatted;
     };
-    const getCascadeData = (listData, defaultIndex) => {
-      var _a;
-      let arr = listData;
-      arr.defaultIndex = defaultIndex;
-      const dataList = [];
-      while (arr) {
-        const item = arr[(_a = arr.defaultIndex) != null ? _a : 0];
-        dataList.push(item.text);
-        arr = item.children;
-      }
-      return dataList;
-    };
     const close = () => {
       emit("close");
       emit("update:visible", false);
     };
-    const changeHandler = (columnIndex, dataIndex) => {
-      if (dataType.value === "cascade") {
-        let cursor = state.formattedColumns;
-        if (columnIndex === 0) {
-          state.defaultIndex = dataIndex;
-        }
-        let i = 0;
-        while (cursor) {
-          if (i === columnIndex) {
-            cursor.defaultIndex = dataIndex;
-          } else if (i > columnIndex) {
-            cursor.defaultIndex = 0;
+    const changeHandler = (columnIndex, option) => {
+      if (option && Object.keys(option).length) {
+        if (columnsType.value === "cascade") {
+          defaultValues.value[columnIndex] = option.value ? option.value : "";
+          let index = columnIndex;
+          let cursor = option;
+          while (cursor && cursor.children) {
+            defaultValues.value[index + 1] = cursor.children[0].value;
+            index++;
+            cursor = cursor.children[0];
           }
-          cursor = cursor[cursor.defaultIndex || 0].children;
-          i++;
+        } else {
+          defaultValues.value[columnIndex] = option.value ? option.value : "";
         }
-      } else if (dataType.value === "text") {
-        _defaultIndex = dataIndex;
-      } else if (dataType.value === "multipleColumns") {
-        defaultIndexList[columnIndex] = dataIndex;
-        const val = defaultIndexList.map((res, i) => toRaw(state.formattedColumns)[i].values[res]);
-        emit("change", val, columnIndex, dataIndex);
+        emit("change", {
+          columnIndex,
+          selectedValue: defaultValues.value,
+          selectedOptions: selectedOptions.value
+        });
       }
     };
-    const confirm = () => {
-      if (dataType.value === "text") {
-        state.defaultIndex = _defaultIndex;
-        emit("confirm", state.formattedColumns[_defaultIndex]);
-      } else if (dataType.value === "multipleColumns") {
-        for (let i = 0; i < defaultIndexList.length; i++) {
-          state.formattedColumns[i].defaultIndex = defaultIndexList[i];
-        }
-        const checkedArr = toRaw(state.formattedColumns).map((res) => res.values && res.values[res.defaultIndex]);
-        emit("confirm", checkedArr);
-      } else if (dataType.value === "cascade") {
-        emit("confirm", getCascadeData(toRaw(state.formattedColumns), state.defaultIndex));
-      }
+    const confirmHandler = () => {
+      emit("confirm", {
+        selectedValue: defaultValues.value,
+        selectedOptions: selectedOptions.value
+      });
       emit("update:visible", false);
     };
+    onMounted(() => {
+      if (props.visible)
+        state.show = props.visible;
+    });
+    onBeforeUnmount(() => {
+      if (props.visible)
+        state.show = false;
+    });
+    watch(() => props.modelValue, (newValues) => {
+      const isSameValue = JSON.stringify(newValues) === JSON.stringify(defaultValues.value);
+      if (!isSameValue) {
+        defaultValues.value = newValues;
+      }
+    }, { deep: true });
+    watch(defaultValues, (newValues) => {
+      const isSameValue = JSON.stringify(newValues) === JSON.stringify(props.modelValue);
+      if (!isSameValue) {
+        emit("update:modelValue", newValues);
+      }
+    }, { immediate: true });
     watch(() => props.visible, (val) => {
       state.show = val;
     });
-    watch(() => props.listData, (val) => {
-      state.formattedColumns = val;
+    watch(() => props.columns, (val) => {
+      if (val.length)
+        state.formattedColumns = val;
     });
     return __spreadProps(__spreadValues({
       classes
     }, toRefs(state)), {
       column,
-      dataType,
-      columnList,
+      columnsType,
+      columnsList,
       close,
       changeHandler,
-      confirm
+      confirmHandler,
+      defaultValues
     });
   }
 });
 const _hoisted_1 = { class: "nut-picker__bar" };
-const _hoisted_2 = { class: "nut-picker__column" };
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("view", { class: "nut-picker__hairline" }, null, -1);
+const _hoisted_2 = { class: "nut-picker__title" };
+const _hoisted_3 = { class: "nut-picker__column" };
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("view", { class: "nut-picker__hairline" }, null, -1);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_picker_column = resolveComponent("nut-picker-column");
   const _component_nut_popup = resolveComponent("nut-popup");
@@ -422,44 +429,44 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "lock-scroll": _ctx.lockScroll,
       "close-on-click-overlay": _ctx.closeOnClickOverlay,
       onClose: _ctx.close,
-      round: true
+      round: true,
+      isWrapTeleport: _ctx.isWrapTeleport
     }, {
       default: withCtx(() => [
         createElementVNode("view", _hoisted_1, [
           createElementVNode("view", {
-            class: "nut-picker__left nut-picker__button",
+            class: "nut-picker__cancel nut-picker__left nut-picker__button",
             onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args))
           }, toDisplayString(_ctx.cancelText), 1),
-          createElementVNode("view", null, toDisplayString(_ctx.title), 1),
+          createElementVNode("view", _hoisted_2, toDisplayString(_ctx.title), 1),
           createElementVNode("view", {
-            class: "nut-picker__button",
-            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirm())
+            class: "nut-picker__confirm nut-picker__right nut-picker__button",
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirmHandler())
           }, toDisplayString(_ctx.okText), 1)
         ]),
-        createElementVNode("view", _hoisted_2, [
-          _hoisted_3,
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columnList, (item, columnIndex) => {
+        createElementVNode("view", _hoisted_3, [
+          _hoisted_4,
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columnsList, (column2, columnIndex) => {
             return openBlock(), createElementBlock("view", {
               class: "nut-picker__columnitem",
               key: columnIndex
             }, [
               createVNode(_component_nut_picker_column, {
                 itemShow: _ctx.show,
-                "list-data": item,
+                column: column2,
                 readonly: _ctx.readonly,
-                "default-index": item.defaultIndex,
-                "visible-item-count": _ctx.visibleItemCount,
-                "data-type": _ctx.dataType,
-                onChange: (dataIndex) => {
-                  _ctx.changeHandler(columnIndex, dataIndex);
+                columnsType: _ctx.columnsType,
+                value: _ctx.defaultValues[columnIndex],
+                onChange: (option) => {
+                  _ctx.changeHandler(columnIndex, option);
                 }
-              }, null, 8, ["itemShow", "list-data", "readonly", "default-index", "visible-item-count", "data-type", "onChange"])
+              }, null, 8, ["itemShow", "column", "readonly", "columnsType", "value", "onChange"])
             ]);
           }), 128))
         ])
       ]),
       _: 1
-    }, 8, ["visible", "teleport", "lock-scroll", "close-on-click-overlay", "onClose"])
+    }, 8, ["visible", "teleport", "lock-scroll", "close-on-click-overlay", "onClose", "isWrapTeleport"])
   ], 2);
 }
 var picker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/dist/packages/_es/Popover.js

@@ -18,13 +18,13 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
-* @nutui/nutui v3.1.16 Fri Feb 25 2022 18:32:15 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.0 Mon Mar 28 2022 17:50:21 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 import { ref, reactive, toRefs, computed, onMounted, watch, resolveComponent, openBlock, createElementBlock, withModifiers, normalizeClass, createElementVNode, renderSlot, Fragment, normalizeStyle, renderList, createVNode, createCommentVNode, toDisplayString } from "vue";
 import { c as createComponent } from "./component.js";
-import Popup, { popupProps } from "./Popup.js";
+import popup, { popupProps } from "./Popup.js";
 import Button from "./Button.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "./OverLay.js";
@@ -34,7 +34,7 @@ const { componentName, create } = createComponent("popover");
 const _sfc_main = create({
   inheritAttrs: false,
   components: {
-    [Popup.name]: Popup,
+    [popup.name]: popup,
     [Button.name]: Button
   },
   props: __spreadProps(__spreadValues({}, popupProps), {
@@ -138,6 +138,9 @@ const _sfc_main = create({
       emit("update:visible", false);
     };
     const chooseItem = (item, index2) => {
+      if (item.disabled) {
+        return;
+      }
       emit("choose", item, index2);
     };
     return {

package/dist/packages/_es/Popup.js

@@ -18,8 +18,8 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
-* @nutui/nutui v3.1.16 Fri Feb 25 2022 18:32:15 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.0 Mon Mar 28 2022 17:50:21 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 import { reactive, computed, onMounted, onBeforeUnmount, onBeforeMount, onActivated, onDeactivated, watch, toRefs, resolveComponent, openBlock, createBlock, Teleport, normalizeClass, normalizeStyle, createCommentVNode, createVNode, Transition, withCtx, withDirectives, createElementVNode, renderSlot, createElementBlock, vShow } from "vue";
@@ -307,5 +307,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["name", "onAfterEnter", "onAfterLeave"])
   ]));
 }
-var Popup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { Popup as default, popupProps };
+var popup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { popup as default, popupProps };

package/dist/packages/_es/Price.js

@@ -1,6 +1,6 @@
 /*!
-* @nutui/nutui v3.1.16 Fri Feb 25 2022 18:32:15 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.0 Mon Mar 28 2022 17:50:21 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 import { computed, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString } from "vue";

package/dist/packages/_es/Progress.js

@@ -1,9 +1,9 @@
 /*!
-* @nutui/nutui v3.1.16 Fri Feb 25 2022 18:32:15 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.0 Mon Mar 28 2022 17:50:21 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref, computed, watch, onMounted, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, toDisplayString, createCommentVNode, createBlock } from "vue";
+import { ref, computed, onMounted, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, toDisplayString, createCommentVNode, createBlock } from "vue";
 import { c as createComponent } from "./component.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 const { create } = createComponent("progress");
@@ -42,6 +42,10 @@ const _sfc_main = create({
       tyep: String,
       default: ""
     },
+    textBackground: {
+      tyep: String,
+      default: ""
+    },
     iconName: {
       type: String,
       default: "checked"
@@ -59,7 +63,6 @@ const _sfc_main = create({
     const height = ref(props.strokeWidth + "px");
     const progressOuter = ref();
     const insideText = ref();
-    const left = ref();
     const bgStyle = computed(() => {
       return {
         width: props.percentage + "%",
@@ -71,30 +74,14 @@ const _sfc_main = create({
         color: props.textColor || ""
       };
     });
-    const slideLeft = (values) => {
-      if (props.textInside) {
-        let offsetWidth = progressOuter.value.offsetWidth;
-        let percentageWidth = progressOuter.value.offsetWidth * Number(values) * 0.01;
-        let insideTextWidth = insideText.value.offsetWidth;
-        left.value = percentageWidth - 5 + "px";
-        if (offsetWidth == percentageWidth) {
-          left.value = percentageWidth - insideTextWidth + "px";
-        }
-      }
-    };
-    watch(() => props.percentage, (values) => {
-      slideLeft(values);
-    });
     onMounted(() => {
-      slideLeft(props.percentage);
     });
     return {
       height,
       bgStyle,
       textStyle,
       progressOuter,
-      insideText,
-      left
+      insideText
     };
   }
 });
@@ -115,7 +102,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           key: 0,
           class: "nut-progress-text nut-progress-insidetext",
           ref: "insideText",
-          style: normalizeStyle({ lineHeight: _ctx.height, left: _ctx.left })
+          style: normalizeStyle({
+            lineHeight: _ctx.height,
+            left: `${_ctx.percentage}%`,
+            transform: `translate(-${+_ctx.percentage}%,-50%)`,
+            background: _ctx.textBackground || _ctx.strokeColor
+          })
         }, [
           createElementVNode("span", {
             style: normalizeStyle(_ctx.textStyle)