@opentiny/vue-renderless 3.28.2 → 3.30.0

package/form-item/vue.js

@@ -32,9 +32,11 @@ import {
   handleMouseenter,
   handleMouseleave
 } from "./index";
+import { nanoid } from "@opentiny/utils";
 const api = [
   "state",
   "validate",
+  "validateOrigin",
   "clearValidate",
   "resetField",
   "getRules",
@@ -58,6 +60,9 @@ const initState = ({
   inject,
   props
 }) => {
+  const uniqueId = nanoid.api.nanoid(8);
+  const errorId = `tiny-form-item-error-${uniqueId}`;
+  const labelId = `tiny-form-item-label-${uniqueId}`;
   const state = reactive({
     mode,
     validateState: "",
@@ -77,6 +82,9 @@ const initState = ({
     showTooltip: false,
     typeName: "",
     formInstance: inject("form"),
+    // 无障碍支持：为错误信息和标签生成唯一 ID
+    errorId,
+    labelId,
     labelFor: computed(() => props.for || props.prop || ""),
     labelStyle: computed(() => api2.computedLabelStyle()),
     valueStyle: computed(() => api2.computedValueStyle()),
@@ -142,6 +150,7 @@ const initState = ({
   return state;
 };
 const initApi = ({ api: api2, state, dispatch, broadcast, props, constants, vm, t, nextTick, slots }) => {
+  const validateOriginFunc = validate({ api: api2, props, state, t });
   Object.assign(api2, {
     state,
     dispatch,
@@ -170,7 +179,8 @@ const initApi = ({ api: api2, state, dispatch, broadcast, props, constants, vm,
     onFieldBlur: onFieldBlur(api2),
     onFieldChange: onFieldChange({ api: api2, state }),
     addValidateEvents: addValidateEvents({ api: api2, vm, props, state }),
-    validate: wrapValidate({ validateFunc: validate({ api: api2, props, state, t }), props }),
+    validateOrigin: validateOriginFunc,
+    validate: wrapValidate({ validateFunc: validateOriginFunc, props }),
     getDisplayedValue: getDisplayedValue({ state }),
     clearDisplayedValue: clearDisplayedValue({ state }),
     handleLabelMouseenter: handleLabelMouseenter({ props, state, slots }),

package/grid-select/index.js

@@ -31,7 +31,7 @@ const syncGridSelection = ({ props, vm, state, nextTick }) => () => {
       const fullData = (tableData == null ? void 0 : tableData.fullData) || [];
       if (props.multiple) {
         if (Array.isArray(state.modelValue) && state.modelValue.length > 0) {
-          const rowsToSelect = fullData.filter((row) => state.modelValue.indexOf(row[props.valueField]) !== -1);
+          const rowsToSelect = fullData.filter((row) => state.modelValue.includes(row[props.valueField]));
           vm.$refs.gridRef.clearSelection();
           if (rowsToSelect.length > 0) {
             vm.$refs.gridRef.setSelection(rowsToSelect, true);
@@ -93,7 +93,7 @@ const filter = ({ props, state, vm }) => async (value) => {
       if (multiple) {
         const selectedIds = Array.isArray(state.selected) ? state.selected.map((sel) => sel[valueField]) : [];
         vm.$refs.gridRef.clearSelection();
-        const selectedRows = data.filter((row) => selectedIds.indexOf(row[valueField]) !== -1);
+        const selectedRows = data.filter((row) => selectedIds.includes(row[valueField]));
         if (selectedRows.length > 0) {
           vm.$refs.gridRef.setSelection(selectedRows, true);
         }
@@ -441,7 +441,7 @@ const selectChange = ({ props, vm, emit, state, nextTick }) => ({ $table, select
         try {
           const tableData = vm.$refs.gridRef.getTableData();
           const fullData = (tableData == null ? void 0 : tableData.fullData) || [];
-          const rowsToSelect = fullData.filter((row2) => currentValue.indexOf(row2[valueField]) !== -1);
+          const rowsToSelect = fullData.filter((row2) => currentValue.includes(row2[valueField]));
           vm.$refs.gridRef.clearSelection();
           if (rowsToSelect.length > 0) {
             vm.$refs.gridRef.setSelection(rowsToSelect, true);

package/guide/index.js

@@ -103,7 +103,7 @@ const itemStep = (item, state, deepCopy, index, Shepherd) => {
     hightBox: item.hightBox || null,
     buttons: deepCopy[index].button,
     cancelIcon: {
-      enabled: true
+      enabled: state.showClose
     },
     id: item.id,
     scrollTo: true,
@@ -122,16 +122,22 @@ const itemStep = (item, state, deepCopy, index, Shepherd) => {
         const currentStepElement = currentStep && currentStep.getElement();
         const footer = currentStepElement && currentStepElement.querySelector(".shepherd-footer");
         const cancelIcon = currentStepElement && currentStepElement.querySelector(".shepherd-header .shepherd-cancel-icon span");
-        const cloesIcon = `<svg  viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <desc fill="none">
-            Created with Pixso.
-        </desc>
-        <defs fill="none" />
-        <g>
-          <path id="path" d="M12.49 3.3C12.66 3.47 12.66 3.74 12.54 3.92L8.58 7.89L12.49 11.77C12.7 11.96 12.72 12.25 12.54 12.48C12.37 12.67 12.05 12.72 11.83 12.54L7.88 8.58L4 12.49C3.82 12.66 3.5 12.67 3.32 12.5C3.13 12.33 3.08 12.05 3.24 11.83L7.17 7.89L3.29 4C3.12 3.79 3.13 3.48 3.33 3.29C3.5 3.15 3.75 3.13 3.91 3.24L7.88 7.17L11.78 3.3C11.96 3.08 12.29 3.08 12.49 3.3Z" fill-opacity="1.000000" fill-rule="evenodd"/>
-        </g>
-      </svg>`;
-        cancelIcon.innerHTML = cloesIcon;
+        if (cancelIcon) {
+          if (state.showClose) {
+            const cloesIcon = `<svg  viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <desc fill="none">
+                Created with Pixso.
+            </desc>
+            <defs fill="none" />
+            <g>
+              <path id="path" d="M12.49 3.3C12.66 3.47 12.66 3.74 12.54 3.92L8.58 7.89L12.49 11.77C12.7 11.96 12.72 12.25 12.54 12.48C12.37 12.67 12.05 12.72 11.83 12.54L7.88 8.58L4 12.49C3.82 12.66 3.5 12.67 3.32 12.5C3.13 12.33 3.08 12.05 3.24 11.83L7.17 7.89L3.29 4C3.12 3.79 3.13 3.48 3.33 3.29C3.5 3.15 3.75 3.13 3.91 3.24L7.88 7.17L11.78 3.3C11.96 3.08 12.29 3.08 12.49 3.3Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+            </g>
+          </svg>`;
+            cancelIcon.innerHTML = cloesIcon;
+          } else {
+            cancelIcon.parentElement.style.display = "none";
+          }
+        }
         const progress = document.createElement("span");
         progress.classList.add("progress-style");
         progress.innerText = `${Shepherd.activeTour && Shepherd.activeTour.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour && Shepherd.activeTour.steps.length}`;

package/guide/vue.js

@@ -17,7 +17,8 @@ const renderless = (props, { reactive, onMounted, onBeforeUnmount, watch }, { de
     modalOverlayOpeningPadding: props.modalOverlayOpeningPadding,
     modalOverlayOpeningRadius: props.modalOverlayOpeningRadius,
     arrow: props.arrow,
-    lightClass: props.lightClass
+    lightClass: props.lightClass,
+    showClose: props.showClose
   });
   let baseApi = {
     state,

package/input/vue.js

@@ -41,7 +41,7 @@ import {
 } from "./index";
 import useStorageBox from "../tall-storage/vue-storage-box";
 import { on, off } from "@opentiny/utils";
-import { debounce } from "@opentiny/utils";
+import { debounceBoth } from "@opentiny/utils";
 const api = [
   "blur",
   "showBox",
@@ -222,7 +222,8 @@ const mergeApi = ({
     }),
     handleFocus: handleFocus({ api: api2, emit, state }),
     handleInput: handleInput({ api: api2, emit, nextTick, state }),
-    resizeTextarea: debounce(200, true, resizeTextarea({ api: api2, parent, vm, state, props })),
+    resizeTextarea: debounceBoth(200, resizeTextarea({ api: api2, parent, vm, state, props })),
+    // 抖动的首尾都要执行一次
     updateIconOffset: updateIconOffset(api2),
     calcTextareaHeight: calcTextareaHeight({
       api: api2,

package/modal/index.js

@@ -87,12 +87,12 @@ const mouseEnterEvent = (state) => () => {
 };
 const mouseLeaveEvent = ({ api, props, state }) => () => {
   api.addMsgQueue();
-  state.timer = window.setTimeout(
-    () => {
+  const duration = parseFloat(props.duration);
+  if (duration > 0) {
+    state.timer = window.setTimeout(() => {
       api.close("close");
-    },
-    parseFloat(props.duration)
-  );
+    }, duration);
+  }
 };
 const updateZindex = ({ state, props }) => () => {
   state.modalZindex = props.zIndex || PopupManager.nextZIndex();
@@ -157,12 +157,12 @@ const open = ({
     }, 10);
     if (state.isMsg) {
       api.addMsgQueue();
-      state.timer = window.setTimeout(
-        () => {
+      const duration = parseFloat(props.duration);
+      if (duration > 0) {
+        state.timer = window.setTimeout(() => {
           api.close(params.type);
-        },
-        parseFloat(props.duration)
-      );
+        }, duration);
+      }
     } else {
       nextTick(() => {
         if (!isMobileFirstMode) {
@@ -233,7 +233,7 @@ const close = ({ emit, parent, props, state }) => (type) => {
         emit("update:modelValue", false);
         emit("hide", params);
       }
-    }, 200);
+    }, 400);
   }
 };
 const handleGlobalKeydownEvent = (api) => (event) => {

package/modal/vue.js

@@ -33,6 +33,7 @@ import {
   hideScrollbar,
   watchVisible
 } from "./index";
+import { nanoid } from "@opentiny/utils";
 const api = [
   "state",
   "dragEvent",
@@ -59,6 +60,8 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
   const api2 = {};
   const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode);
   const state = reactive({
+    titleId: "tiny-modal-title-" + nanoid.api.nanoid(8),
+    contentId: "tiny-modal-content-" + nanoid.api.nanoid(8),
     emitter: emitter(),
     visible: false,
     contentVisible: false,

package/notify/vue.js

@@ -11,6 +11,7 @@ import {
   getPositionSide,
   getZindex
 } from "./index";
+import { nanoid } from "@opentiny/utils";
 const api = [
   "state",
   "clearTimer",
@@ -37,7 +38,9 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     dangerouslyUseHTMLString: false,
     positionStyle: computed(() => api2.getOffsetStyle(state)),
     verticalProperty: computed(() => api2.getPositionSide(state)),
-    customClass: computed(() => props.customClass)
+    customClass: computed(() => props.customClass),
+    titleId: `tiny-notify-title-${nanoid.api.nanoid(8)}`,
+    contentId: `tiny-notify-content-${nanoid.api.nanoid(8)}`
   });
   Object.assign(api2, {
     state,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.28.2",
+  "version": "3.30.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",
@@ -25,8 +25,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@opentiny/utils": "~3.28.0",
-    "@opentiny/vue-hooks": "~3.28.0",
+    "@opentiny/utils": "~3.30.0",
+    "@opentiny/vue-hooks": "~3.30.0",
     "color": "4.2.3"
   },
   "devDependencies": {

package/picker/vue.js

@@ -59,7 +59,7 @@ import {
   formatInputValue
 } from "./index";
 import { dateMobileToggle, timeMobileToggle, dateToTimeArray, timeArrayToDate, timeMobileConfirm } from "./mb";
-import { DATEPICKER } from "@opentiny/utils";
+import { DATEPICKER, nanoid } from "@opentiny/utils";
 const api = [
   "state",
   "btnClick",
@@ -154,7 +154,8 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent, br
     innerWidth: 0,
     breakLine: computed(
       () => (state.innerWidth < 230 && state.type === "daterange" || state.innerWidth < 335 && state.type === "datetimerange") && state.displayValue && state.displayValue[1]
-    )
+    ),
+    ariaPanelId: "panel-" + nanoid.api.nanoid(8)
   });
   return state;
 };

package/qr-code/vue.js

@@ -21,7 +21,9 @@ const renderless = (props, { reactive, watch, onMounted }, { vm, emit }, { QRCod
     () => {
       api2.draw();
       api2.change();
-    }
+    },
+    { deep: true }
+    // 添加深度监听，防止响应式失效
   );
   return api2;
 };

package/rate/index.js

@@ -52,7 +52,9 @@ const selectValue = ({ emit, props, state }) => (value) => {
   if (props.disabled) {
     return;
   }
-  if (props.allowHalf && state.pointerAtLeftHalf) {
+  if (props.clearable && props.modelValue === value) {
+    value = 0;
+  } else if (props.allowHalf && state.pointerAtLeftHalf) {
     value = state.currentValue;
   }
   emit("update:modelValue", value);
@@ -112,8 +114,7 @@ const showDecimalIcon = ({ props, state }) => (item) => {
   const showWhenAllowHalf = props.allowHalf && state.pointerAtLeftHalf && item - 0.5 <= state.currentValue && item > state.currentValue;
   return showWhenDisabled || showWhenAllowHalf;
 };
-const getIconStyle = ({ api, props, state }) => (item) => {
-  const isHalf = api.showDecimalIcon(item);
+const getIconStyle = ({ props, state }) => (item) => {
   const voidColor = props.disabled ? props.disabledVoidColor : props.voidColor;
   if (props.radio) {
     return {
@@ -122,7 +123,7 @@ const getIconStyle = ({ api, props, state }) => (item) => {
     };
   }
   return {
-    fill: isHalf ? "transparent" : item <= state.currentValue ? state.activeColor : voidColor,
+    fill: item <= state.currentValue ? state.activeColor : voidColor,
     "font-size": props.size || "18px"
   };
 };

package/rate/vue.js

@@ -120,7 +120,7 @@ const renderless = (props, { computed, reactive, toRefs, watch, onMounted, onUnm
     computedActiveColor: computedActiveColor(props),
     computedActiveClass: computedActiveClass(props),
     showDecimalIcon: showDecimalIcon({ props, state }),
-    getIconStyle: getIconStyle({ api: api2, props, state })
+    getIconStyle: getIconStyle({ props, state })
   }, changeValue.api));
   return api2;
 };

package/rich-text/index.js

@@ -106,6 +106,26 @@ const initQuill = ({ api, emit, props, vm, service, state, Quill, ImageDrop, Ima
   }
   emit("ready", state.quill);
   api.setToolbarTips();
+  api.setTooltipI18n();
+  state.tooltipI18nHandler = () => setTimeout(() => {
+    api.setTooltipI18n();
+    api.adjustTooltipPosition();
+  });
+  state.tooltipResizeHandler = () => api.adjustTooltipPosition();
+  vm.$el.addEventListener("click", state.tooltipI18nHandler);
+  vm.$el.addEventListener("keyup", state.tooltipI18nHandler);
+  window.addEventListener("resize", state.tooltipResizeHandler);
+  if (typeof MutationObserver !== "undefined") {
+    state.tooltipObserver = new MutationObserver(() => {
+      requestAnimationFrame(() => api.adjustTooltipPosition());
+    });
+    state.tooltipObserver.observe(vm.$el, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["style", "class", "data-mode"]
+    });
+  }
 };
 const handleClick = ({ state, Quill }) => (event) => {
   const el = event.target;
@@ -138,6 +158,64 @@ const setToolbarTips = ({ t, vm }) => () => {
     });
   }
 };
+const setTooltipI18n = ({ t, vm }) => () => {
+  const richTextEl = vm.$el;
+  const tips = richTextEl.querySelectorAll(".ql-container .ql-tooltip");
+  const getPlaceholderByMode = (mode) => {
+    if (mode === "video")
+      return t("ui.richText.enterVideo");
+    if (mode === "formula")
+      return t("ui.richText.enterFormula");
+    return t("ui.richText.enterLink");
+  };
+  if (tips.length) {
+    Array.prototype.slice.call(tips).forEach((tip) => {
+      const mode = tip.getAttribute("data-mode") || "link";
+      const input = tip.querySelector("input[type='text']");
+      tip.setAttribute("data-visit-url-text", `${t("ui.richText.visitUrl")}:`);
+      tip.setAttribute("data-edit-text", t("ui.richText.edit"));
+      tip.setAttribute("data-remove-text", t("ui.richText.remove"));
+      tip.setAttribute("data-save-text", t("ui.richText.save"));
+      tip.setAttribute("data-enter-link-text", `${t("ui.richText.enterLink")}:`);
+      tip.setAttribute("data-enter-formula-text", `${t("ui.richText.enterFormula")}:`);
+      tip.setAttribute("data-enter-video-text", `${t("ui.richText.enterVideo")}:`);
+      if (input) {
+        input.setAttribute("placeholder", getPlaceholderByMode(mode));
+      }
+    });
+  }
+};
+const adjustTooltipPosition = ({ vm }) => () => {
+  const container = vm.$el.querySelector(".ql-container");
+  const tips = vm.$el.querySelectorAll(".ql-container .ql-tooltip");
+  const minGap = 8;
+  if (!container) {
+    return;
+  }
+  const containerRect = container.getBoundingClientRect();
+  if (tips.length) {
+    Array.prototype.slice.call(tips).forEach((tip) => {
+      if (!tip.classList.contains("ql-editing")) {
+        return;
+      }
+      const offsetParent = tip.offsetParent || tip.parentElement;
+      if (!offsetParent) {
+        return;
+      }
+      const parentRect = offsetParent.getBoundingClientRect();
+      const currentLeft = parseFloat(tip.style.left || "0");
+      const safeCurrentLeft = Number.isFinite(currentLeft) ? currentLeft : 0;
+      const minLeft = containerRect.left - parentRect.left + minGap;
+      const maxLeft = containerRect.right - parentRect.left - tip.offsetWidth - minGap;
+      if (maxLeft <= minLeft) {
+        tip.style.left = `${minLeft}px`;
+        return;
+      }
+      const clampedLeft = Math.min(Math.max(safeCurrentLeft, minLeft), maxLeft);
+      tip.style.left = `${clampedLeft}px`;
+    });
+  }
+};
 const setPlaceholder = ({ state, props }) => () => {
   if (state.quill) {
     state.quill.root.setAttribute("data-placeholder", props.options.placeholder);
@@ -220,17 +298,27 @@ const mounted = ({ api, props, state, i18n, watch }) => () => {
     api.initQuill();
   }
   if (i18n) {
-    watch(() => i18n.locale, api.setToolbarTips);
+    watch(() => i18n.locale, () => {
+      api.setToolbarTips();
+      api.setTooltipI18n();
+      api.adjustTooltipPosition();
+    });
   }
 };
-const beforeUnmount = ({ api, state }) => () => {
+const beforeUnmount = ({ api, state, vm }) => () => {
   state.quill.off("selection-change", api.selectionChange);
   state.quill.off("text-change", api.textChange);
   state.quill.root.removeEventListener("click", api.handleClick);
+  state.tooltipI18nHandler && vm.$el.removeEventListener("click", state.tooltipI18nHandler);
+  state.tooltipI18nHandler && vm.$el.removeEventListener("keyup", state.tooltipI18nHandler);
+  state.tooltipResizeHandler && window.removeEventListener("resize", state.tooltipResizeHandler);
+  state.tooltipObserver && state.tooltipObserver.disconnect();
+  state.tooltipObserver = null;
   state.quill = null;
   delete state.quill;
 };
 export {
+  adjustTooltipPosition,
   beforeUnmount,
   getFileUploadUrl,
   handleClick,
@@ -243,5 +331,6 @@ export {
   selectionChange,
   setPlaceholder,
   setToolbarTips,
+  setTooltipI18n,
   textChange
 };

package/rich-text/vue.js

@@ -3,6 +3,8 @@ import {
   initContent,
   initQuill,
   setToolbarTips,
+  setTooltipI18n,
+  adjustTooltipPosition,
   setPlaceholder,
   getFileUploadUrl,
   selectionChange,
@@ -19,6 +21,8 @@ const api = [
   "initContent",
   "initQuill",
   "setToolbarTips",
+  "setTooltipI18n",
+  "adjustTooltipPosition",
   "setPlaceholder",
   "selectionChange",
   "textChange",
@@ -32,7 +36,10 @@ const initState = ({ reactive, props, computed, api: api2 }) => {
     content: props.modelValue || props.content,
     maxLength: computed(() => api2.maxLength()),
     pasteCanceled: false,
-    isDisplayOnly: computed(() => api2.isDisplayOnly())
+    isDisplayOnly: computed(() => api2.isDisplayOnly()),
+    tooltipI18nHandler: null,
+    tooltipResizeHandler: null,
+    tooltipObserver: null
   });
   return state;
 };
@@ -44,12 +51,14 @@ const initApi = (args) => {
     initContent: initContent({ state, props, nextTick }),
     initQuill: initQuill({ service, emit, props, api: api2, state, vm, ImageDrop, FileUpload, ImageUpload, Quill }),
     setToolbarTips: setToolbarTips({ t, vm }),
+    setTooltipI18n: setTooltipI18n({ t, vm }),
+    adjustTooltipPosition: adjustTooltipPosition({ vm }),
     setPlaceholder: setPlaceholder({ state, props }),
     getFileUploadUrl: getFileUploadUrl({ service }),
     selectionChange: selectionChange({ emit, state }),
     textChange: textChange({ emit, vm, state, Modal, t }),
     mounted: mounted({ api: api2, props, state, i18n, watch }),
-    beforeUnmount: beforeUnmount({ api: api2, state }),
+    beforeUnmount: beforeUnmount({ api: api2, state, vm }),
     maxLength: maxLength({ props, constants }),
     handlePaste: handlePaste({ state }),
     isDisplayOnly: isDisplayOnly({ state, props, parent, nextTick }),

package/search/vue.js

@@ -17,6 +17,9 @@ import {
   searchEnterKey,
   emitInput
 } from "./index";
+const generateUniqueId = () => {
+  return `search-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+};
 const api = [
   "state",
   "handleChange",
@@ -68,7 +71,9 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, toR
   }, formatSearchTypes2.state), {
     showClear: computed(() => props.clearable && (state.focus || state.hovering) && state.currentValue),
     formItemSize: computed(() => (parent.formItem || {}).formItemSize),
-    searchSize: computed(() => props.size || state.formItemSize)
+    searchSize: computed(() => props.size || state.formItemSize),
+    instanceId: generateUniqueId()
+    // 生成唯一 ID，用于避免多个组件实例时 id 重复
   }));
   const api2 = __spreadValues({
     state,

package/select/index.js

@@ -1131,6 +1131,11 @@ const watchVisible = ({ api, constants, emit, state, vm, props, isMobileFirstMod
         vm.$refs.scrollbar.handleScroll();
       }
     }
+    if (value && state.device === "mb" && state.breakpoint === "default") {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+    }
   }, props.updateDelay);
   if (!value && props.shape === "filter") {
     state.softFocus = false;
@@ -1498,11 +1503,10 @@ const computedCurrentSizeMap = ({ state, designConfig }) => () => {
   const sizeMap = ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.sizeMap) || defaultSizeMap;
   return sizeMap[state.selectSize || "default"];
 };
-const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
+const mounted = ({ api, parent, state, props, vm, designConfig, nextTick }) => () => {
   state.defaultCheckedKeys = props.multiple ? state.gridCheckedData : props.treeOp.defaultCheckedKeys || [];
   const parentEl = parent.$el;
   const inputEl = parentEl.querySelector('input[data-tag="tiny-input-inner"]');
-  const inputClientRect = inputEl && inputEl.getBoundingClientRect() || {};
   if (inputEl === document.activeElement) {
     document.activeElement.blur();
   }
@@ -1514,10 +1518,14 @@ const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
   if (vm.$refs.tags) {
     addResizeListener(vm.$refs.tags, api.resetInputHeight);
   }
+  nextTick(() => {
+    if (inputEl) {
+      state.inputWidth = inputEl.offsetWidth || 0;
+    }
+  });
   if (props.remote && props.multiple) {
     api.resetInputHeight();
   }
-  state.inputWidth = inputClientRect.width;
   api.initQuery({ init: true }).then(() => {
     api.setSelected(true);
     if (props.modelValue && props.initLabel) {

package/select/vue.js

@@ -116,10 +116,10 @@ import {
   computedCurrentSizeMap,
   watchOptionsWhenAutoSelect
 } from "./index";
-import { debounce, nanoid } from "@opentiny/utils";
+import { debounce } from "@opentiny/utils";
 import { isNumber } from "@opentiny/utils";
 import { useUserAgent } from "@opentiny/vue-hooks";
-import { isServer } from "@opentiny/utils";
+import { isServer, nanoid } from "@opentiny/utils";
 const api = [
   "state",
   "nodeCollapse",
@@ -288,7 +288,8 @@ const initState = ({
     currentSizeMap: computed(() => api2.computedCurrentSizeMap()),
     rootAutoTipConfig: computed(() => __spreadValues({
       content: state.displayOnlyContent,
-      always: !!state.displayOnlyContent
+      always: !!state.displayOnlyContent,
+      popperClass: "tiny-select__popper-maxh-50"
     }, props.tooltipConfig)),
     ariaListId: "tiny-select-" + nanoid.api.nanoid(8)
   }));
@@ -506,7 +507,7 @@ const addApi = ({
     debouncRquest: debouncRquest({ api: api2, state, props }),
     defaultOnQueryChange: defaultOnQueryChange({ props, state, constants, api: api2, nextTick, vm }),
     queryChange: queryChange({ props, state, constants, api: api2, nextTick, vm }),
-    mounted: mounted({ api: api2, parent, state, props, vm, designConfig }),
+    mounted: mounted({ api: api2, parent, state, props, vm, designConfig, nextTick }),
     unMount: unMount({ api: api2, parent, vm, state }),
     watchOptimizeOpts: watchOptimizeOpts({ props, state }),
     handleDropdownClick: handleDropdownClick({ props, vm, state, emit }),

package/statistic/index.js

@@ -8,7 +8,7 @@ const getIntegerAndDecimal = ({ props }) => () => {
   if (isFunction(props.formatter)) {
     return props.formatter(props.value);
   }
-  if (!isNumber(props.value)) {
+  if (typeof props.value !== "number") {
     return props.value;
   }
   let displayValue = String(props.value).split(".");
@@ -26,7 +26,54 @@ const getIntegerAndDecimal = ({ props }) => () => {
   }
   return [integer, decimal].join(decimal ? "." : "");
 };
+const animateValue = ({ props, state }) => () => {
+  if (!props.useAnimation)
+    return;
+  let AnimationId = null;
+  const start = props.startValue;
+  const end = Number(props.value);
+  const duration = props.duration;
+  if (Number.isNaN(end)) {
+    state.animatingValue = props.value;
+    return;
+  }
+  const startTime = performance.now();
+  const cancel = () => {
+    if (AnimationId) {
+      cancelAnimationFrame(AnimationId);
+      AnimationId = null;
+    }
+  };
+  if (AnimationId) {
+    cancel();
+  }
+  const getDecimalPlaces = (num) => {
+    if (Math.floor(num) === num)
+      return 0;
+    const decimalPart = num.toString().split(".")[1];
+    return decimalPart ? decimalPart.length : 0;
+  };
+  const decimalPlaces = getDecimalPlaces(end);
+  const multiplier = 10 ** decimalPlaces;
+  const animate = (currentTime) => {
+    const elapsed = currentTime - startTime;
+    const progress = Math.min(elapsed / duration, 1);
+    const easeOutExpo = (t) => t === 1 ? 1 : 1 - 2 ** (-10 * t);
+    const current = start + (end - start) * easeOutExpo(progress);
+    state.animatingValue = Math.round(current * multiplier) / multiplier;
+    if (progress < 1) {
+      AnimationId = requestAnimationFrame(animate);
+    } else {
+      state.animatingValue = end;
+      AnimationId = null;
+    }
+  };
+  AnimationId = requestAnimationFrame(() => {
+    AnimationId = requestAnimationFrame(animate);
+  });
+};
 export {
+  animateValue,
   getIntegerAndDecimal,
   isNumber
 };