@opentiny/vue-renderless 3.14.1 → 3.15.1

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) {
@@ -409,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;
@@ -486,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(() => {
@@ -509,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);
     }
@@ -1092,11 +1109,10 @@ const getOptionIndexArr = ({ props, state, api }) => () => {
   });
 };
 const queryVisibleOptions = ({ props, vm, isMobileFirstMode }) => () => {
-  var _a;
   if (props.optimization) {
     return optmzApis.queryVisibleOptions(vm, isMobileFirstMode);
   } else {
-    return Array.from(((_a = vm.$refs.scrollbar) == null ? void 0 : _a.$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 }) => () => {
@@ -1149,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]);
       }
     });
   };
@@ -1306,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);
@@ -1320,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) {
@@ -1342,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;
@@ -1493,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 !== "");
@@ -1511,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;
@@ -1518,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);
     });
@@ -1584,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,
@@ -1600,6 +1666,7 @@ export {
   computedDisabledTooltipContent,
   computedGetIcon,
   computedGetTagType,
+  computedIsExpand,
   computedIsExpandAll,
   computedOptionsAllDisabled,
   computedReadonly,
@@ -1635,6 +1702,7 @@ export {
   handleClose,
   handleComposition,
   handleCopyClick,
+  handleDebouncedQueryChange,
   handleDropdownClick,
   handleEnterTag,
   handleFocus,
@@ -1651,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,7 +171,8 @@ const api = [
   "getLabelSlotValue",
   "loadTreeData",
   "updateModelValue",
-  "clearSearchText"
+  "clearSearchText",
+  "onClickCollapseTag"
 ];
 const initState = ({ reactive, computed, props, api: api2, emitter, parent, constants, useBreakpoint, vm, designConfig }) => {
   const stateAdd = initStateAdd({ computed, props, api: api2, parent });
@@ -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,
@@ -282,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 = ({
@@ -307,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),
@@ -337,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 }),
@@ -358,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),
@@ -367,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 }),
@@ -416,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();
     }),
@@ -430,10 +443,11 @@ const addApi = ({
     watchOptimizeOpts: watchOptimizeOpts({ props, state }),
     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 }) => {

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
+};

package/statistic/vue.js

@@ -0,0 +1,20 @@
+import "../chunk-G2ADBYYC.js";
+import { getIntegerAndDecimal } from "./index";
+const api = ["state", "getIntegerAndDecimal"];
+const renderless = (props, hooks) => {
+  const api2 = {
+    getIntegerAndDecimal: getIntegerAndDecimal({ props })
+  };
+  const { reactive, computed } = hooks;
+  const state = reactive({
+    value: computed(() => api2.getIntegerAndDecimal(props))
+  });
+  Object.assign(api2, {
+    state
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/tabs/index.js

@@ -1,4 +1,40 @@
 import "../chunk-G2ADBYYC.js";
+const getOrderedPanes = (parent, panes) => {
+  const slotDefault = parent.$slots.default;
+  let orders;
+  if (typeof slotDefault === "function") {
+    orders = [];
+    const tabVnodes = slotDefault();
+    const handler = ({ type, componentOptions, props }) => {
+      let componentName = type && type.componentName;
+      if (!componentName)
+        componentName = componentOptions && componentOptions.Ctor.extendOptions.componentName;
+      if (componentName === "TabItem") {
+        const paneName = props && props.name || componentOptions && componentOptions.propsData.name;
+        orders.push(paneName);
+      }
+    };
+    tabVnodes.forEach(({ type, componentOptions, props, children }) => {
+      if (type && (type.toString() === "Symbol(Fragment)" || // vue@3.3之前的开发模式
+      type.toString() === "Symbol(v-fgt)" || //   vue@3.3.1 的变更
+      type.toString() === "Symbol()")) {
+        Array.isArray(children) && children.forEach(({ type: type2, componentOptions: componentOptions2, props: props2 }) => handler({ type: type2, componentOptions: componentOptions2, props: props2 }));
+      } else {
+        handler({ type, componentOptions, props });
+      }
+    });
+  }
+  if (orders.length > 0) {
+    let tmpPanes = [];
+    orders.forEach((paneName) => {
+      let pane = panes.find((pane2) => pane2.name === paneName);
+      if (pane)
+        tmpPanes.push(pane);
+    });
+    panes = tmpPanes;
+  }
+  return panes;
+};
 const calcPaneInstances = ({
   constants,
   parent,
@@ -7,23 +43,28 @@ const calcPaneInstances = ({
 }) => (isForceUpdate = false) => {
   const tabItemVNodes = parent.$slots.default;
   if (tabItemVNodes) {
+    const orderPanes = [];
+    tabItemVNodes().forEach((vnode) => {
+      var _a;
+      if (Array.isArray(vnode.children)) {
+        vnode.children.forEach((child) => {
+          var _a2;
+          const name = (_a2 = child.props) == null ? void 0 : _a2.name;
+          name && orderPanes.push(name);
+        });
+      } else {
+        const name = (_a = vnode.props) == null ? void 0 : _a.name;
+        name && orderPanes.push(name);
+      }
+    });
     const currentPanes = [];
     childrenHandler(({ vm, isLevel1 }) => {
-      isLevel1 && vm.$options.componentName === constants.TAB_ITEM && currentPanes.push(vm);
-    });
-    const currentPaneStates = currentPanes.map((pane) => pane.state);
-    const paneStates = state.panes.map((pane) => pane.state);
-    let newPanes = [];
-    for (let i = 0; i < paneStates.length; i++) {
-      const paneState = paneStates[i];
-      const index = currentPaneStates.indexOf(paneState);
-      if (index > -1) {
-        newPanes.push(state.panes[i]);
-        currentPanes.splice(index, 1);
-        currentPaneStates.splice(index, 1);
+      if (isLevel1 && vm.$options.componentName === constants.TAB_ITEM) {
+        const index = orderPanes.findIndex((name) => name === vm.name);
+        index > -1 ? currentPanes[index] = vm : currentPanes.push(vm);
       }
-    }
-    newPanes = newPanes.concat(currentPanes);
+    });
+    const newPanes = getOrderedPanes(parent, currentPanes);
     const panesChanged = !(newPanes.length === state.panes.length && newPanes.every((pane, index) => pane.state === state.panes[index].state));
     if (isForceUpdate || panesChanged) {
       state.panes = newPanes;

package/tall-storage/index.js

@@ -84,7 +84,7 @@ const setLocalStorageage = (name, value, memorySpace = 5) => {
       oldArray = sortDeduplication(oldArray, memorySpace);
       newValue = JSON.stringify(oldArray);
     } else if (oldValue === null || oldValue === value) {
-      newValue = value;
+      newValue = JSON.stringify([value]);
     } else {
       newValue = JSON.stringify([value, oldValue]);
     }

package/time-picker-mobile/index.js

@@ -9,7 +9,7 @@ const watchModelValue = ({ props, state }) => () => {
   if (!showSeconds && modelValue.length === 3) {
     state.seconds = modelValue[2];
   }
-  state.dateArr = modelValue ? modelValue.slice(0, num) : [];
+  state.dateArr = modelValue && state.dateArr.toString() !== "NaN,NaN,NaN" ? modelValue.slice(0, num) : [];
 };
 const watchVisible = ({ api, state }) => (value) => {
   state.visible = value;
@@ -25,6 +25,14 @@ const confirm = ({ emit, state }) => (value) => {
   emit("update:modelValue", state.value);
   emit("confirm", state.value);
 };
+const clear = ({ state, emit, api, vm, dispatch }) => ($event) => {
+  state.dateArr = [];
+  vm.$refs.cascaderSelect.clear(state.dateArr);
+  emit("update:modelValue", state.dateArr);
+  emit("clear", state.dateArr);
+  dispatch("Picker", "handle-clear", $event);
+  api.updateVisible(false);
+};
 const getTimePeriod = ({ state, props }) => (unit, length) => {
   const step = props.step || {};
   const value = step[unit] || 1;
@@ -39,6 +47,7 @@ const computedOptions = ({ state, api, props }) => () => {
   return options;
 };
 export {
+  clear,
   computedOptions,
   confirm,
   getTimePeriod,

package/time-picker-mobile/vue.js

@@ -6,10 +6,11 @@ import {
   confirm,
   updateVisible,
   getTimePeriod,
-  computedOptions
+  computedOptions,
+  clear
 } from "./index";
-const api = ["state", "confirm", "updateVisible"];
-const renderless = (props, { reactive, watch, computed }, { emit }) => {
+const api = ["state", "confirm", "updateVisible", "clear"];
+const renderless = (props, { reactive, watch, computed }, { emit, vm, dispatch }) => {
   const api2 = {};
   const state = reactive({
     visible: false,
@@ -25,6 +26,7 @@ const renderless = (props, { reactive, watch, computed }, { emit }) => {
     watchModelValue: watchModelValue({ props, state }),
     watchVisible: watchVisible({ api: api2, state }),
     confirm: confirm({ emit, state }),
+    clear: clear({ state, emit, api: api2, vm, dispatch }),
     updateVisible: updateVisible({ emit, state }),
     getTimePeriod: getTimePeriod({ state, props }),
     computedOptions: computedOptions({ state, api: api2, props }),

package/time-spinner/index.js

@@ -70,9 +70,59 @@ const handleScroll = ({ api, vm, state }) => (type) => {
   const step = state.step[type];
   const limitVal = { hours: 23, minutes: 59, seconds: 59 };
   Object.keys(limitVal).forEach((key) => limitVal[key] = Math.floor(limitVal[key] / step) * step);
-  value = Math.min(value * step, limitVal[type]);
+  value = api.selectDateScroll(type, Math.min(value * step, limitVal[type]));
   api.modifyDateField(type, value);
 };
+const selectDateScroll = ({ state, props }) => (type, value) => {
+  if (Object.keys(props.endDate).length !== 0) {
+    const endHours = props.endDate.getHours();
+    const endMinutes = props.endDate.getMinutes();
+    const endSeconds = props.endDate.getSeconds();
+    if (type === "hours") {
+      value = value > endHours ? state.hours : value;
+    } else if (type === "minutes") {
+      value = state.hours === endHours && value > endMinutes ? state.minutes : value;
+    } else {
+      value = state.hours === endHours && state.minutes === endMinutes && value > endSeconds ? state.seconds : value;
+    }
+  } else if (Object.keys(props.startDate).length !== 0) {
+    const startHours = props.startDate.getHours();
+    const startMinutes = props.startDate.getMinutes();
+    const startSeconds = props.startDate.getSeconds();
+    if (type === "hours") {
+      value = value < startHours ? state.hours : value;
+    } else if (type === "minutes") {
+      value = state.hours === startHours && value < startMinutes ? state.minutes : value;
+    } else {
+      value = state.hours === startHours && state.minutes === startMinutes && value < startSeconds ? state.seconds : value;
+    }
+  } else if (state.selectableRange.length > 0) {
+    const [startRange, endRange] = state.selectableRange[0];
+    const startRangeHours = startRange.getHours();
+    const endRangeHours = endRange.getHours();
+    const startRangeMinutes = startRange.getMinutes();
+    const endRangeMinutes = endRange.getMinutes();
+    const startRangeSeconds = startRange.getSeconds();
+    const endRangeSeconds = endRange.getSeconds();
+    if (type === "hours") {
+      value = value < startRangeHours || value > endRangeHours ? state.hours : value;
+    } else if (type === "minutes") {
+      if (state.hours === startRangeHours) {
+        value = value < startRangeMinutes ? startRangeMinutes : value;
+      } else if (state.hours === endRangeHours) {
+        value = value > endRangeMinutes ? endRangeMinutes : value;
+      }
+    } else {
+      if (state.hours === startRangeHours && state.minutes === startRangeMinutes) {
+        value = value < startRangeSeconds ? startRangeSeconds : value;
+      } else if (state.hours === endRangeHours && state.minutes === endRangeMinutes) {
+        value = value > endRangeSeconds ? endRangeSeconds : value;
+      }
+      value = startRangeSeconds === 0 && value < 1 ? 0 : value;
+    }
+  }
+  return value;
+};
 const adjustSpinners = ({ api, state }) => () => {
   api.adjustSpinner("hours", state.hours);
   api.adjustSpinner("minutes", state.minutes);
@@ -152,5 +202,6 @@ export {
   modifyDateField,
   scrollBarHeight,
   scrollDown,
+  selectDateScroll,
   typeItemHeight
 };