@opentiny/vue-renderless 3.14.0 → 3.15.0

package/quarter-panel/index.js

@@ -0,0 +1,61 @@
+import "../chunk-G2ADBYYC.js";
+import { modifyDate, nextYear, prevYear } from "../common/deps/date-util";
+import { DATEPICKER } from "../common";
+const getTarget = (event) => {
+  let target = event.target;
+  const tagName = target.tagName;
+  if (tagName === "A") {
+    target = target.parentNode.parentNode;
+  }
+  if (tagName === "DIV") {
+    target = target.parentNode;
+  }
+  if (target.tagName !== "TD") {
+    return;
+  }
+  return target;
+};
+const handleQuarterTableClick = ({ state, emit }) => (event) => {
+  const target = getTarget(event);
+  const currentDate = new Date(state.date.getFullYear(), DATEPICKER.QuarterMap[target.cellIndex], 1);
+  state.value = currentDate;
+  emit("pick", currentDate);
+};
+const showYearPicker = ({ state }) => () => state.currentView = DATEPICKER.Year;
+const cusPrevYear = ({ state }) => () => {
+  if (state.currentView === DATEPICKER.Year) {
+    state.startYear = state.startYear - DATEPICKER.PanelYearNum;
+  } else {
+    state.date = prevYear(state.date);
+  }
+};
+const cusNextYear = ({ state }) => () => {
+  if (state.currentView === DATEPICKER.Year) {
+    state.startYear = state.startYear + DATEPICKER.PanelYearNum;
+  } else {
+    state.date = nextYear(state.date);
+  }
+};
+const handleYearPick = ({ state }) => (value) => {
+  state.currentView = DATEPICKER.Quarter;
+  state.date = modifyDate(state.date, value, state.date.getMonth(), state.date.getDate());
+};
+const getYearLabel = ({ state, t }) => () => {
+  return state.date.getFullYear();
+};
+const getCellStyle = ({ api, props, state }) => (cell) => {
+  const year = state.date.getFullYear();
+  const quarter = cell.text.slice(1) - 1;
+  const style = {};
+  style.current = state.value && state.value.getFullYear() === year && state.value.getMonth() === DATEPICKER.QuarterMap[quarter];
+  return style;
+};
+export {
+  cusNextYear,
+  cusPrevYear,
+  getCellStyle,
+  getYearLabel,
+  handleQuarterTableClick,
+  handleYearPick,
+  showYearPicker
+};

package/quarter-panel/vue.js

@@ -0,0 +1,46 @@
+import "../chunk-G2ADBYYC.js";
+import { DATEPICKER } from "../common";
+import {
+  handleQuarterTableClick,
+  showYearPicker,
+  handleYearPick,
+  cusPrevYear,
+  cusNextYear,
+  getYearLabel,
+  getCellStyle
+} from "./index";
+const api = [
+  "state",
+  "handleQuarterTableClick",
+  "showYearPicker",
+  "handleYearPick",
+  "cusPrevYear",
+  "cusNextYear",
+  "getCellStyle"
+];
+const renderless = (props, { reactive, computed }, { emit, t }) => {
+  const api2 = {};
+  const state = reactive({
+    date: /* @__PURE__ */ new Date(),
+    visible: false,
+    currentView: DATEPICKER.Quarter,
+    yearLabel: computed(() => api2.getYearLabel()),
+    startYear: Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 10) * 10,
+    rows: [{ text: "Q1" }, { text: "Q2" }, { text: "Q3" }, { text: "Q4" }]
+  });
+  Object.assign(api2, {
+    state,
+    handleQuarterTableClick: handleQuarterTableClick({ state, emit }),
+    showYearPicker: showYearPicker({ state }),
+    handleYearPick: handleYearPick({ state }),
+    cusPrevYear: cusPrevYear({ state }),
+    cusNextYear: cusNextYear({ state }),
+    getYearLabel: getYearLabel({ state, t }),
+    getCellStyle: getCellStyle({ api: api2, props, state })
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/select/index.js

@@ -180,7 +180,7 @@ const emitChange = ({ emit, props, state, constants }) => (value, changed) => {
     if (constants.TYPE.Tree === flag) {
       const recurNode = (node) => {
         val === node[props.valueField] && items.push(node);
-        val !== node[props.valueField] && Array.isArray(node.children) && node.children.forEach(recurNode);
+        val !== node[props.valueField] && Array.isArray(node[state.childrenName]) && node[state.childrenName].forEach(recurNode);
       };
       arr.forEach(recurNode);
     } else if (constants.TYPE.Grid === flag) {
@@ -360,26 +360,8 @@ const getPluginOption = ({ api, props, state }) => (value, isTree) => {
   return items;
 };
 const toggleCheckAll = ({ api, state, props }) => (filtered) => {
-  const getEnabledValues = (options) => {
-    let values = [];
-    for (let i = 0; i < options.length; i++) {
-      const isEnabled = !options[i].state.disabled && !options[i].state.groupDisabled;
-      const isRequired = options[i].required;
-      const isDisabledAndChecked = !isEnabled && options[i].state.selectCls === "checked-sur";
-      if (state.isSelectAll) {
-        if (isRequired || isDisabledAndChecked) {
-          values.push(options[i].value);
-        }
-      } else {
-        if (isEnabled || isRequired || isDisabledAndChecked) {
-          values.push(options[i].value);
-        }
-      }
-    }
-    return values;
-  };
-  let value;
-  const enabledValues = getEnabledValues(state.options);
+  let value = [];
+  const enabledValues = state.options.filter((op) => !op.state.disabled && !op.state.groupDisabled && !op.required && op.state.visible).map((op) => op.value);
   if (filtered) {
     if (state.filteredSelectCls === "check" || state.filteredSelectCls === "halfselect") {
       value = [.../* @__PURE__ */ new Set([...state.modelValue, ...enabledValues])];
@@ -393,9 +375,12 @@ const toggleCheckAll = ({ api, state, props }) => (filtered) => {
       const unchecked = state.options.filter((item) => !item.state.disabled && item.state.selectCls === "check");
       unchecked.length ? value = enabledValues : value = [];
     } else if (state.selectCls === "checked-sur") {
-      value = getEnabledValues(state.options);
+      value = [];
     }
   }
+  const requiredValue = state.options.filter((op) => op.required).map((op) => op.value);
+  const disabledSelectedValues = state.options.filter((op) => (op.state.disabled || op.state.groupDisabled) && op.state.selectCls === "checked-sur").map((op) => op.value);
+  value = [...value, ...requiredValue, ...disabledSelectedValues];
   api.setSoftFocus();
   state.isSilentBlur = true;
   api.updateModelValue(value);
@@ -424,23 +409,33 @@ const blur = ({ vm, state }) => () => {
   state.visible = false;
   vm.$refs.reference.blur();
 };
-const handleBlur = ({ constants, dispatch, emit, state }) => (event) => {
+const handleBlur = ({ constants, dispatch, emit, state, designConfig }) => (event) => {
+  var _a;
   clearTimeout(state.timer);
   state.timer = setTimeout(() => {
+    var _a2;
     if (state.isSilentBlur) {
       state.isSilentBlur = false;
     } else {
       emit("blur", event);
     }
+    if ((_a2 = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a2.delayBlur) {
+      dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, event.target.value);
+    }
   }, 200);
-  dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, event.target.value);
+  if (!((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.delayBlur)) {
+    dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, event.target.value);
+  }
   state.softFocus = false;
 };
 const handleClearClick = (api) => (event) => {
   api.deleteSelected(event);
 };
 const doDestroy = (vm) => () => {
-  vm.$refs.popper && vm.$refs.popper.doDestroy();
+  var _a;
+  if ((_a = vm == null ? void 0 : vm.$refs) == null ? void 0 : _a.popper) {
+    vm.$refs.popper.doDestroy();
+  }
 };
 const handleClose = (state) => () => {
   state.visible = false;
@@ -501,15 +496,16 @@ const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designCo
     }
     let input = vm.$refs.reference.type === "text" && vm.$refs.reference.$el.querySelector("input");
     const tags = vm.$refs.tags;
+    const limitText = vm.$refs.reference.$el.querySelector("span.tiny-select__limit-txt");
     if (!input) {
       return;
     }
-    if (!state.isDisplayOnly && props.hoverExpand && !props.disabled) {
+    if (!state.isDisplayOnly && (props.hoverExpand || props.clickExpand) && !props.disabled) {
       api.calcCollapseTags();
     }
-    const sizeInMap = state.initialInputHeight || (state.isSaaSTheme ? 28 : 30);
+    const sizeInMap = (designConfig == null ? void 0 : designConfig.state.initialInputHeight) || state.initialInputHeight || (state.isSaaSTheme ? 28 : 30);
     const noSelected = state.selected.length === 0;
-    const spacingHeight = designConfig ? (_a = designConfig.state) == null ? void 0 : _a.spacingHeight : 2;
+    const spacingHeight = designConfig ? (_a = designConfig.state) == null ? void 0 : _a.spacingHeight : constants.SPACING_HEIGHT;
     if (!state.isDisplayOnly) {
       if (!noSelected && tags) {
         fastdom.measure(() => {
@@ -524,6 +520,12 @@ const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designCo
     } else {
       input.style.height = "auto";
     }
+    if (limitText && props.multipleLimit) {
+      const { width, marginLeft, marginRight } = getComputedStyle(limitText);
+      vm.$refs.tags.style.paddingRight = `${Math.ceil(
+        parseFloat(width) + parseFloat(marginLeft) + parseFloat(marginRight)
+      )}px`;
+    }
     if (state.visible && state.emptyText !== false) {
       state.selectEmitter.emit(constants.EVENT_NAME.updatePopper, true);
     }
@@ -909,10 +911,7 @@ const watchValue = ({ api, constants, dispatch, props, vm, state }) => (value, o
       state.currentPlaceholder = state.cachedPlaceHolder;
     }
     if (props.filterable && !props.reserveKeyword) {
-      const isChange = false;
-      const isInput = true;
-      props.renderType !== constants.TYPE.Grid && (state.query = "");
-      api.handleQueryChange(state.query, isChange, isInput);
+      props.renderType !== constants.TYPE.Grid && !props.searchable && (state.query = "");
     }
   }
   api.setSelected();
@@ -1113,7 +1112,7 @@ const queryVisibleOptions = ({ props, vm, isMobileFirstMode }) => () => {
   if (props.optimization) {
     return optmzApis.queryVisibleOptions(vm, isMobileFirstMode);
   } else {
-    return Array.from(vm.$refs.scrollbar.$el.querySelectorAll('[data-index]:not([style*="display: none"])'));
+    return vm.$refs.scrollbar ? Array.from(vm.$refs.scrollbar.$el.querySelectorAll('[data-index]:not([style*="display: none"])')) : [];
   }
 };
 const handleCopyClick = ({ parent, props, state }) => () => {
@@ -1166,14 +1165,14 @@ const radioChange = ({ props, state, api, vm }) => ({ row }) => {
   api.updateModelValue(row.value);
   api.directEmitChange(row);
 };
-const getTreeData = (props) => (data) => {
+const getTreeData = (props, state) => (data) => {
   const nodes = [];
   const getChild = (data2, pId) => {
     data2.forEach((node) => {
       node.pId = pId;
       nodes.push(node);
-      if (node.children && node.children.length > 0) {
-        getChild(node.children, node[props.valueField]);
+      if (node[state.childrenName] && node[state.childrenName].length > 0) {
+        getChild(node[state.childrenName], node[props.valueField]);
       }
     });
   };
@@ -1310,7 +1309,11 @@ const watchHoverIndex = ({ state }) => (value) => {
     state.hoverValue = state.optionIndexArr[value];
   }
 };
-const handleDropdownClick = ({ emit }) => ($event) => {
+const handleDropdownClick = ({ vm, state, props, emit }) => ($event) => {
+  if (props.allowCopy && vm.$refs.reference) {
+    vm.$refs.reference.$el.querySelector("input").selectionEnd = 0;
+  }
+  state.softFocus = false;
   emit("dropdown-click", $event);
 };
 const handleEnterTag = ({ state }) => ($event, key) => {
@@ -1319,13 +1322,13 @@ const handleEnterTag = ({ state }) => ($event, key) => {
     state.tooltipContent = __spreadProps(__spreadValues({}, state.tooltipContent), { [key]: target.innerText });
   }
 };
-const calcCollapseTags = ({ state, vm }) => () => {
-  if (state.inputHovering) {
+const calcCollapseTags = ({ state, vm, props }) => () => {
+  if (state.inputHovering && !props.clickExpand) {
     return state.isHidden = true;
   }
   const tags = vm.$refs.tags;
   const collapseTag = tags && tags.querySelector('[data-tag="tags-collapse"]');
-  if (!tags || !collapseTag) {
+  if (!collapseTag || !tags) {
     return;
   }
   const { width: tagsContentWidth, paddingLeft, paddingRight } = window.getComputedStyle(tags);
@@ -1333,19 +1336,37 @@ const calcCollapseTags = ({ state, vm }) => () => {
   const { width: collapseTagContentWidth, marginRight } = collapseTag && window.getComputedStyle(collapseTag);
   const collapseTagWidth = collapseTag && parseFloat(collapseTagContentWidth) + parseFloat(marginRight);
   const tagList = Array.from(tags.querySelectorAll('[data-tag="tiny-tag"]'));
-  let { total, dom, idx } = { total: collapseTagWidth, dom: null, idx: 0 };
-  tagList.forEach((tag, index) => {
-    if (tag !== collapseTag) {
-      const { width: tagContentWidth, marginRight: marginRight2 } = tag && window.getComputedStyle(tag);
-      total += parseFloat(tagContentWidth) + parseFloat(marginRight2);
+  let [dom, idx, currentRowWidth, currentTagIndex] = [null, 0, 0, 0];
+  for (let rowNum = 0; rowNum < props.maxVisibleRows; rowNum++) {
+    currentRowWidth = 0;
+    let currentTagWidth = 0;
+    for (currentTagIndex; currentTagIndex < tagList.length; currentTagIndex++) {
+      const tag = tagList[currentTagIndex];
+      if (tag !== collapseTag) {
+        const { width: tagContentWidth, marginRight: marginRight2, marginLeft } = tag && window.getComputedStyle(tag);
+        currentTagWidth = parseFloat(tagContentWidth) + parseFloat(marginRight2) + parseFloat(marginLeft);
+        currentRowWidth += currentTagWidth;
+      }
+      if (tag !== collapseTag && currentRowWidth > tagsWidth) {
+        if (!dom && rowNum === props.maxVisibleRows - 1) {
+          if (currentRowWidth - currentTagWidth + collapseTagWidth < tagsWidth) {
+            dom = tag;
+            idx = currentTagIndex;
+          } else {
+            dom = tagList[currentTagIndex - 1];
+            idx = currentTagIndex - 1;
+          }
+        }
+        break;
+      }
     }
-    if (tag !== collapseTag && total > tagsWidth && !dom) {
-      dom = tag;
-      idx = index;
+    if (currentTagIndex === tagList.length - 1) {
+      break;
     }
-  });
-  let isOneLine = total - collapseTagWidth <= tagsWidth;
-  if (isOneLine) {
+  }
+  if (idx === 0) {
+    state.exceedMaxVisibleRow = false;
+    state.showCollapseTag = false;
     return state.isHidden = true;
   }
   if (dom) {
@@ -1355,6 +1376,8 @@ const calcCollapseTags = ({ state, vm }) => () => {
     state.isHidden = true;
   }
   state.collapseTagsLength = tagList.length - idx;
+  state.exceedMaxVisibleRow = true;
+  state.toHideIndex = idx;
 };
 const watchInputHover = ({ vm }) => (newVal) => {
   const [inputHovering, visible] = newVal;
@@ -1506,12 +1529,27 @@ const getLabelSlotValue = ({ props, state }) => (item) => {
   });
   return ["grid", "tree"].includes(props.renderType) ? item : obj;
 };
-const computedTagsStyle = ({ props, parent, state }) => () => {
+const computedTagsStyle = ({ props, parent, state, vm }) => () => {
   const isReadonly = props.disabled || (parent.form || {}).disabled || props.displayOnly;
-  return {
+  let tagsStyle = {
     "max-width": isReadonly ? "" : state.inputWidth - state.inputPaddingRight + "px",
     width: "100%"
   };
+  if (props.clickExpand && !state.exceedMaxVisibleRow || state.visible) {
+    Object.assign(tagsStyle, { height: "auto" });
+  }
+  if (props.clickExpand && state.exceedMaxVisibleRow && !state.showCollapseTag) {
+    const tags = vm.$refs.tags;
+    const { paddingTop: tagsPaddingTop, paddingBottom: tagsPaddingBottom } = window.getComputedStyle(tags);
+    const tagsPaddingVertical = parseFloat(tagsPaddingTop) + parseFloat(tagsPaddingBottom);
+    const tag = tags == null ? void 0 : tags.querySelector('[data-tag="tiny-tag"]');
+    if (tag) {
+      const { height: tagHeight, marginTop, marginBottom } = window.getComputedStyle(tag);
+      const rowHeight = (parseFloat(tagHeight) + parseFloat(marginTop) + parseFloat(marginBottom)) * props.maxVisibleRows;
+      Object.assign(tagsStyle, { "height": `${rowHeight + tagsPaddingVertical}px` });
+    }
+  }
+  return tagsStyle;
 };
 const computedReadonly = ({ props, state }) => () => state.device === "mb" || props.readonly || !props.filterable || props.multiple || browserInfo.name !== BROWSER_NAME.IE && browserInfo.name !== BROWSER_NAME.Edge && !state.visible;
 const computedShowClose = ({ props, state }) => () => props.clearable && !state.selectDisabled && (state.inputHovering || props.multiple && state.visible) && (props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : !isNull(props.modelValue) && props.modelValue !== "");
@@ -1524,6 +1562,11 @@ const computedShowCopy = ({ props, state }) => () => props.multiple && props.cop
 const computedOptionsAllDisabled = (state) => () => state.options.filter((option) => option.visible).every((option) => option.disabled);
 const computedDisabledTooltipContent = (state) => () => state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join("\uFF1B");
 const computedSelectDisabled = ({ props, parent }) => () => props.disabled || (parent.form || {}).disabled || props.displayOnly || (parent.form || {}).displayOnly;
+const computedIsExpand = ({ props, state }) => () => {
+  const hoverExpanded = (state.selectHover || state.visible) && props.hoverExpand && !props.disabled;
+  const clickExpanded = props.clickExpand && state.exceedMaxVisibleRow && state.showCollapseTag;
+  return hoverExpanded || clickExpanded;
+};
 const computedIsExpandAll = (props) => () => {
   const { defaultExpandAll, lazy } = props.treeOp;
   return !lazy && defaultExpandAll !== false;
@@ -1531,9 +1574,9 @@ const computedIsExpandAll = (props) => () => {
 const loadTreeData = ({ state, vm, props, api }) => ({ data = [], init = false }) => {
   const getTreeDatas = (datas, newDatas = []) => {
     datas.forEach(({ data: data2, childNodes }) => {
-      let temData = __spreadProps(__spreadValues({}, data2), { children: [] });
+      let temData = __spreadProps(__spreadValues({}, data2), { [state.childrenName]: [] });
       if (childNodes && childNodes.length) {
-        getTreeDatas(childNodes, temData.children);
+        getTreeDatas(childNodes, temData[state.childrenName]);
       }
       newDatas.push(temData);
     });
@@ -1597,6 +1640,16 @@ const clearNoMatchValue = ({ props, emit }) => (newModelValue) => {
     emit("update:modelValue", newModelValue);
   }
 };
+const handleDebouncedQueryChange = ({ state, api }) => debounce(state.debounce, (value) => {
+  api.handleQueryChange(value);
+});
+const onClickCollapseTag = ({ state, props, nextTick, api }) => (event) => {
+  event.stopPropagation();
+  if (props.clickExpand && !props.disabled && !state.isDisplayOnly) {
+    state.showCollapseTag = !state.showCollapseTag;
+    nextTick(api.resetInputHeight);
+  }
+};
 export {
   blur,
   buildRadioConfig,
@@ -1613,6 +1666,7 @@ export {
   computedDisabledTooltipContent,
   computedGetIcon,
   computedGetTagType,
+  computedIsExpand,
   computedIsExpandAll,
   computedOptionsAllDisabled,
   computedReadonly,
@@ -1648,6 +1702,7 @@ export {
   handleClose,
   handleComposition,
   handleCopyClick,
+  handleDebouncedQueryChange,
   handleDropdownClick,
   handleEnterTag,
   handleFocus,
@@ -1664,6 +1719,7 @@ export {
   nodeCheckClick,
   nodeCollapse,
   nodeExpand,
+  onClickCollapseTag,
   onCopying,
   onInputChange,
   onMouseenterNative,

package/select/vue.js

@@ -106,7 +106,10 @@ import {
   computedGetIcon,
   computedGetTagType,
   clearSearchText,
-  clearNoMatchValue
+  clearNoMatchValue,
+  handleDebouncedQueryChange,
+  onClickCollapseTag,
+  computedIsExpand
 } from "./index";
 import debounce from "../common/deps/debounce";
 import { isNumber } from "../common/type";
@@ -168,9 +171,10 @@ const api = [
   "getLabelSlotValue",
   "loadTreeData",
   "updateModelValue",
-  "clearSearchText"
+  "clearSearchText",
+  "onClickCollapseTag"
 ];
-const initState = ({ reactive, computed, props, api: api2, emitter, parent, constants, useBreakpoint, vm }) => {
+const initState = ({ reactive, computed, props, api: api2, emitter, parent, constants, useBreakpoint, vm, designConfig }) => {
   const stateAdd = initStateAdd({ computed, props, api: api2, parent });
   const state = reactive(__spreadProps(__spreadValues({}, stateAdd), {
     selectEmitter: emitter(),
@@ -201,7 +205,7 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
     collapseTags: computed(() => api2.computeCollapseTags()),
     multipleLimit: computed(() => api2.computeMultipleLimit()),
     disabledTooltipContent: computed(() => api2.computedDisabledTooltipContent()),
-    isExpand: computed(() => (state.selectHover || state.visible) && props.hoverExpand && !props.disabled),
+    isExpand: computed(() => api2.computedIsExpand()),
     collapseTagsLength: 0,
     initValue: [],
     key: 0,
@@ -224,7 +228,13 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
     // tiny 新增
     getIcon: computed(() => api2.computedGetIcon()),
     getTagType: computed(() => api2.computedGetTagType()),
-    isSelectAll: computed(() => state.selectCls === "checked-sur")
+    isSelectAll: computed(() => state.selectCls === "checked-sur"),
+    autoHideDownIcon: (() => {
+      if ((designConfig == null ? void 0 : designConfig.state) && "autoHideDownIcon" in designConfig.state) {
+        return designConfig.state.autoHideDownIcon;
+      }
+      return true;
+    })()
   }));
   return state;
 };
@@ -276,10 +286,16 @@ const initStateAdd = ({ computed, props, api: api2, parent }) => {
     gridCheckedData: computed(() => api2.getcheckedData()),
     isExpandAll: computed(() => api2.computedIsExpandAll()),
     searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
+    childrenName: computed(() => props.treeOp.props && props.treeOp.props.children || "children"),
     tooltipContent: {},
     isHidden: false,
     defaultCheckedKeys: [],
-    optionIndexArr: []
+    optionIndexArr: [],
+    showCollapseTag: false,
+    exceedMaxVisibleRow: false,
+    // 是否超出默认最大显示行数
+    toHideIndex: Infinity
+    // 第一个超出被隐藏的索引
   };
 };
 const initApi = ({
@@ -301,7 +317,7 @@ const initApi = ({
     state,
     maskState,
     doDestroy: doDestroy(vm),
-    getTreeData: getTreeData(props),
+    getTreeData: getTreeData(props, state),
     blur: blur({ vm, state }),
     focus: focus({ vm, state }),
     getValueKey: getValueKey(props),
@@ -331,7 +347,7 @@ const initApi = ({
     setOptionHighlight: setOptionHighlight(state),
     nodeExpand: nodeExpand({ state, constants, nextTick }),
     nodeCollapse: nodeCollapse({ state, constants, nextTick }),
-    handleBlur: handleBlur({ constants, dispatch, emit, state }),
+    handleBlur: handleBlur({ constants, dispatch, emit, state, designConfig }),
     toggleLastOptionHitState: toggleLastOptionHitState({ state }),
     emptyText: emptyText({ I18N: constants.I18N, props, state, t, isMobileFirstMode }),
     emptyFlag: emptyFlag({ props, state }),
@@ -352,7 +368,7 @@ const initApi = ({
     watchInputHover: watchInputHover({ vm }),
     initQuery: initQuery({ props, state, constants, vm }),
     updateModelValue: updateModelValue({ props, emit, state }),
-    computedTagsStyle: computedTagsStyle({ props, parent, state }),
+    computedTagsStyle: computedTagsStyle({ props, parent, state, vm }),
     computedReadonly: computedReadonly({ props, state }),
     computedShowClose: computedShowClose({ props, state }),
     computedCollapseTagSize: computedCollapseTagSize(state),
@@ -361,6 +377,7 @@ const initApi = ({
     computedOptionsAllDisabled: computedOptionsAllDisabled(state),
     computedDisabledTooltipContent: computedDisabledTooltipContent(state),
     computedSelectDisabled: computedSelectDisabled({ props, parent }),
+    computedIsExpand: computedIsExpand({ props, state }),
     computedIsExpandAll: computedIsExpandAll(props),
     watchInitValue: watchInitValue({ props, emit }),
     watchShowClose: watchShowClose({ nextTick, state, parent }),
@@ -410,9 +427,11 @@ const addApi = ({
     handleOptionSelect: handleOptionSelect({ api: api2, nextTick, props, vm, state }),
     getPluginOption: getPluginOption({ api: api2, props, state }),
     toggleCheckAll: toggleCheckAll({ api: api2, emit, state, props }),
-    debouncedQueryChange: debounce(state.debounce, (event) => {
-      api2.handleQueryChange(props.shape ? event : event.target.value, false, true);
-    }),
+    handleDebouncedQueryChange: handleDebouncedQueryChange({ state, api: api2 }),
+    debouncedQueryChange: (event) => {
+      const value = props.shape ? event : event.target.value;
+      api2.handleDebouncedQueryChange(value);
+    },
     debouncedOnInputChange: debounce(state.debounce, () => {
       api2.onInputChange();
     }),
@@ -422,12 +441,13 @@ const addApi = ({
     mounted: mounted({ api: api2, parent, state, props, vm, designConfig }),
     unMount: unMount({ api: api2, parent, vm, state }),
     watchOptimizeOpts: watchOptimizeOpts({ props, state }),
-    handleDropdownClick: handleDropdownClick({ emit }),
+    handleDropdownClick: handleDropdownClick({ props, vm, state, emit }),
     handleEnterTag: handleEnterTag({ state }),
-    calcCollapseTags: calcCollapseTags({ state, vm }),
+    calcCollapseTags: calcCollapseTags({ state, vm, props }),
     initValue: initValue({ state }),
     getLabelSlotValue: getLabelSlotValue({ props, state }),
-    loadTreeData: loadTreeData({ state, vm, props, api: api2 })
+    loadTreeData: loadTreeData({ state, vm, props, api: api2 }),
+    onClickCollapseTag: onClickCollapseTag({ state, props, nextTick, api: api2 })
   });
 };
 const initWatch = ({ watch, props, api: api2, state, nextTick }) => {
@@ -519,7 +539,18 @@ const addWatch = ({ watch, props, api: api2, state, nextTick }) => {
 };
 const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, provide, inject }, { vm, parent, emit, constants, nextTick, dispatch, t, emitter, isMobileFirstMode, useBreakpoint, designConfig }) => {
   const api2 = {};
-  const state = initState({ reactive, computed, props, api: api2, emitter, parent, constants, useBreakpoint, vm });
+  const state = initState({
+    reactive,
+    computed,
+    props,
+    api: api2,
+    emitter,
+    parent,
+    constants,
+    useBreakpoint,
+    vm,
+    designConfig
+  });
   const dialog = inject("dialog", null);
   provide("selectEmitter", state.selectEmitter);
   provide("selectVm", vm);
@@ -539,9 +570,6 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     isMobileFirstMode,
     designConfig
   });
-  initWatch({ watch, props, api: api2, state, nextTick });
-  onMounted(api2.mounted);
-  onBeforeUnmount(api2.unMount);
   parent.$on("handle-clear", (event) => {
     api2.handleClearClick(event);
   });
@@ -555,6 +583,12 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
   state.selectEmitter.on(constants.EVENT_NAME.handleOptionClick, api2.handleOptionSelect);
   state.selectEmitter.on(constants.EVENT_NAME.setSelected, api2.setSelected);
   state.selectEmitter.on(constants.EVENT_NAME.initValue, api2.initValue);
+  initWatch({ watch, props, api: api2, state, nextTick });
+  onMounted(api2.mounted);
+  onBeforeUnmount(() => {
+    api2.unMount();
+    dialog && dialog.state.emitter.off("handleSelectClose", api2.handleClose);
+  });
   return api2;
 };
 export {

package/skeleton/vue.js

@@ -2,8 +2,8 @@ import "../chunk-G2ADBYYC.js";
 import { toPxStyle } from "./index";
 const api = ["toPxStyle"];
 const renderless = (props, { toRefs, provide }) => {
-  const { active } = toRefs(props);
-  provide("active", active);
+  const { animated } = toRefs(props);
+  provide("animated", animated);
   const api2 = {
     toPxStyle
   };

package/skeleton-item/vue.js

@@ -2,7 +2,7 @@ import "../chunk-G2ADBYYC.js";
 const api = ["state"];
 const renderless = (props, { reactive, inject }) => {
   const state = reactive({
-    isActive: inject("active", false)
+    isActive: inject("animated", false)
   });
   const api2 = {
     state

package/statistic/index.js

@@ -0,0 +1,22 @@
+import "../chunk-G2ADBYYC.js";
+import { isFunction } from "../common/type";
+const isNumber = ({ props }) => () => {
+  return typeof props.value === "number";
+};
+const getIntegerAndDecimal = ({ props }) => () => {
+  var _a, _b;
+  if (isFunction(props.formatter)) {
+    return props.formatter(props.value);
+  }
+  if (!isNumber(props.value)) {
+    return props.value;
+  }
+  let displayValue = props.value ? String(props.value).split(".") : "";
+  let integer = (_a = displayValue[0]) == null ? void 0 : _a.replace(/\B(?=(\d{3})+(?!\d))/g, props.groupSeparator);
+  let decimal = (_b = displayValue[1]) == null ? void 0 : _b.padEnd(props.precision, "0").slice(0, props.precision > 0 ? props.precision : 0);
+  return [integer, decimal].join(decimal ? "." : "");
+};
+export {
+  getIntegerAndDecimal,
+  isNumber
+};