@opentiny/vue-renderless 3.6.8 → 3.8.2

package/tab-nav/vue.js

@@ -18,7 +18,11 @@ import {
   scrollNext,
   changeTab,
   setFocus,
-  removeFocus
+  removeFocus,
+  sortableEvent,
+  handleTabDragStart,
+  handleTabDragEnd,
+  watchCurrentName
 } from "./index";
 const api = [
   "state",
@@ -35,7 +39,7 @@ const api = [
   "computedHeaderStyle",
   "swiperHandle"
 ];
-const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpdated, reactive }, { parent, refs, mode: tinyMode }) => {
+const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpdated, reactive, markRaw }, { parent, vm, nextTick, refs, mode: tinyMode, emit }) => {
   const api2 = { mounted, beforeUnmount, computedNavStyle, computedSizeName };
   const state = reactive({
     navOffset: 0,
@@ -68,7 +72,11 @@ const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpd
     visibilityChangeHandler: visibilityChangeHandler(state),
     scrollToActiveTab: scrollToActiveTab({ props, parent, refs, state }),
     scrollIntoView: scrollIntoView({ props, parent, refs, state }),
-    computedHeaderStyle: computedHeaderStyle({ refs, state })
+    computedHeaderStyle: computedHeaderStyle({ refs, state }),
+    watchCurrentName: watchCurrentName({ nextTick, vm, state }),
+    handleTabDragStart: handleTabDragStart({ state, vm, emit }),
+    handleTabDragEnd: handleTabDragEnd({ state, vm, nextTick }),
+    sortableEvent: sortableEvent({ api: api2, props, state, vm, emit, markRaw })
   });
   Object.assign(api2, { updated: updated({ api: api2, props, refs, state }), changeTab: changeTab(api2) });
   onUpdated(() => api2.updated());

package/tabbar-item/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { isObject, isNull } from "@opentiny/vue-renderless/common/type";
+import { isObject, isNull } from "../common/type";
 const getRouteActive = ({ props, route }) => () => {
   if (props.to && route) {
     const config = isObject(props.to) ? props.to : { path: props.to };

package/tabbar-item/vue.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
 import { getRouteActive, onClick, bindChildren, routeTab } from "./index";
-import { xss } from "@opentiny/vue-renderless/common/xss.js";
+import { xss } from "../common/xss.js";
 const api = ["state", "onClick"];
 const renderless = (props, { computed, onMounted, reactive }, { parent, emit, nextTick, route, router }) => {
   const api2 = {};

package/tabs/index.js

@@ -27,19 +27,19 @@ const calcPaneInstances = ({ constants, parent, state, childrenHandler }) => (is
     state.panes = [];
   }
 };
-const calcMorePanes = ({ parent, props, state }) => () => {
+const calcMorePanes = ({ parent, props, state, refs }) => () => {
   if (!props.showMoreTabs) {
     return;
   }
   const el = parent.$el;
   const tabs = el.querySelectorAll(".tiny-tabs__item");
-  if (tabs && tabs.length) {
-    const tabsHeaderWidth = el.querySelector(".tiny-tabs__nav-scroll").clientWidth + 15;
-    let tabsAllWidth = 0;
-    for (let i = 0, length = tabs.length; i < length; i++) {
-      const width = tabs[i].offsetWidth;
-      tabsAllWidth += width;
-      if (tabsAllWidth > tabsHeaderWidth) {
+  const navRef = refs.nav.$refs;
+  const NavWidth = navRef.nav.offsetWidth || 0;
+  const tabsHeaderWidth = navRef.navScroll.offsetWidth || 0;
+  if (NavWidth > tabsHeaderWidth) {
+    for (let i = 0; i < tabs.length; i++) {
+      const isHiddenWidth = tabs[i].offsetLeft + tabs[i].offsetWidth / 2;
+      if (isHiddenWidth > tabsHeaderWidth) {
         state.showPanesCount = i;
         break;
       }
@@ -60,7 +60,6 @@ const handleTabClick = ({ api, emit, props, refs }) => (pane, tabName, event) =>
   if (pane.disabled) {
     return;
   }
-  event.stopPropagation();
   api.setCurrentName(tabName);
   emit("click", pane, event);
   if (props.showExpandTabs) {

package/tabs/vue.js

@@ -72,7 +72,7 @@ const renderless = (props, { onMounted, onUpdated, provide, reactive, watch }, {
     handleTabRemove: handleTabRemove(emit),
     changeDirection: changeDirection({ props, state }),
     changeCurrentName: changeCurrentName({ emit, state }),
-    calcMorePanes: calcMorePanes({ parent, props, state }),
+    calcMorePanes: calcMorePanes({ parent, props, state, refs }),
     calcExpandPanes: calcExpandPanes({ parent, props, state }),
     calcPaneInstances: calcPaneInstances({ constants, parent, state, childrenHandler }),
     handleTabDragStart: handleTabDragStart({ emit }),

package/tabs-mf/index.js

@@ -0,0 +1,109 @@
+import "../chunk-PKUHTIDK.js";
+import { random } from "../common/string";
+import debounce from "../common/deps/debounce";
+const setActive = ({ emit, state, props }) => (name) => {
+  const current = state.currentItem ? state.currentItem.name : "";
+  if (current && current !== name && props.beforeLeave && !props.beforeLeave(name, current)) {
+    return;
+  }
+  state.items.forEach((item) => item.selected = item.name === name);
+  emit("update:activeName", name);
+  emit("update:modelValue", name);
+};
+const addItem = (state) => (item) => {
+  state.items = [...state.items, item];
+};
+const addNav = (state) => (nav) => {
+  state.navs = [...state.navs, nav];
+};
+const scrollTo = ({ vm, state }) => (name) => {
+  const { navs } = state;
+  const { $refs } = vm;
+  const { tabbar } = $refs;
+  const { scroll } = tabbar.$refs;
+  const { clientWidth, scrollWidth } = scroll;
+  if (name && scrollWidth > clientWidth) {
+    const total = navs.length;
+    const index = navs.findIndex((nav) => nav.name === name);
+    const max = scrollWidth - clientWidth;
+    if (~index) {
+      scroll.scrollLeft = max / (total - 1) * index;
+      tabbar.wheelListener();
+    }
+  }
+};
+const clickMore = (api) => (name) => {
+  api.setActive(name);
+  api.scrollTo(name);
+};
+const removeItem = ({ state, emit }) => (name) => {
+  const itemIndex = state.items.findIndex((item) => item.name === name);
+  const navIndex = state.navs.findIndex((item) => item.name === name);
+  if (~itemIndex) {
+    state.items.splice(itemIndex, 1);
+    state.items = [...state.items];
+    state.navs.splice(navIndex, 1);
+    state.navs = [...state.navs];
+    emit("edit", name, "remove");
+    emit("close", name);
+  }
+};
+const wheelListener = ({ vm, api, tabs, state }) => debounce(10, (e) => {
+  const { $refs } = vm;
+  const { getBoundRect: getBoundRect2 } = api;
+  e && e.stopPropagation();
+  $refs.scroll && ($refs.scroll.scrollLeft += ((e || {}).deltaY || 0) / 3);
+  state.tabMoreWidth = $refs.tabMore && $refs.tabMore.offsetWidth || 0;
+  state.navPaddingRight = state.tabMoreWidth + 1;
+  const { left, width } = getBoundRect2();
+  const barRange = { left, width, reserve: state.tabMoreWidth };
+  let { moreList = [], moreLeft = false, moreRight = false } = {};
+  tabs.state.navs.forEach((nav) => {
+    const { name, rect } = nav.getBoundRect();
+    const { left: left2, width: width2 } = rect;
+    const navRange = { name, left: left2, width: width2 };
+    if (navRange.left < barRange.left || navRange.left + navRange.width > barRange.left + barRange.width - barRange.reserve) {
+      moreList.push(navRange.name);
+    }
+  });
+  if (tabs.state.items.length) {
+    moreLeft = ~moreList.indexOf(tabs.state.items[0].name);
+    moreRight = ~moreList.indexOf(tabs.state.items[tabs.state.items.length - 1].name);
+  }
+  Object.assign(state, { moreList, moreLeft, moreRight });
+});
+const getBoundRect = (vm) => () => vm.$el.getBoundingClientRect();
+const handleClickDropdownItem = (tabs) => (name) => tabs.clickMore(name);
+const key = (opt) => opt.name + "-" + random();
+const emitAdd = (tabs) => () => {
+  tabs.$emit("edit", null, "add");
+  tabs.$emit("add");
+};
+const handleNavItemClick = ({ tabs, props }) => () => {
+  tabs.setActive(props.navItem.name);
+  tabs.$emit("click", props.navItem);
+};
+const getBoundRectNV = ({ vm, props }) => () => ({
+  name: props.navItem.name,
+  rect: vm.$el.getBoundingClientRect()
+});
+const handleNavItemClose = ({ tabs, props }) => (e) => {
+  e.stopPropagation();
+  tabs.removeItem(props.navItem.name);
+};
+export {
+  addItem,
+  addNav,
+  clickMore,
+  emitAdd,
+  getBoundRect,
+  getBoundRectNV,
+  handleClickDropdownItem,
+  handleNavItemClick,
+  handleNavItemClose,
+  key,
+  removeItem,
+  scrollTo,
+  setActive,
+  wheelListener
+};

package/tabs-mf/vue-bar.js

@@ -0,0 +1,49 @@
+import "../chunk-PKUHTIDK.js";
+import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
+import { wheelListener, getBoundRect, handleClickDropdownItem, key, emitAdd } from "./index";
+import { getAddWheelListener } from "./wheel";
+const { addWheelListener, removeWheelListener } = getAddWheelListener(window, document);
+const api = ["state", "wheelListener", "handleClickDropdownItem", "key", "emitAdd"];
+const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject, computed }, { vm }) => {
+  const tabs = inject("tabs", null);
+  const state = reactive({
+    moreList: [],
+    moreLeft: false,
+    moreRight: false,
+    moreOptions: [],
+    tabMoreWidth: 0,
+    navPaddingRight: 0,
+    withAdd: computed(() => tabs.withAdd),
+    slotCustom: tabs.slots.custom
+  });
+  const api2 = {
+    getBoundRect: getBoundRect(vm),
+    handleClickDropdownItem: handleClickDropdownItem(tabs),
+    key,
+    emitAdd: emitAdd(tabs)
+  };
+  Object.assign(api2, {
+    state,
+    wheelListener: wheelListener({ vm, api: api2, tabs, state })
+  });
+  watch(
+    () => state.moreList,
+    () => {
+      state.moreOptions = state.moreList.map((name) => tabs.state.items.find((item) => item.name === name));
+    }
+  );
+  onMounted(() => {
+    addWheelListener(vm.$refs.scroll, api2.wheelListener);
+    addResizeListener(vm.$el, api2.wheelListener);
+    api2.wheelListener();
+  });
+  onBeforeUnmount(() => {
+    removeWheelListener(vm.$refs.scroll, api2.wheelListener);
+    removeResizeListener(vm.$el, api2.wheelListener);
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/tabs-mf/vue-nav-item.js

@@ -0,0 +1,22 @@
+import "../chunk-PKUHTIDK.js";
+import { handleNavItemClick, getBoundRectNV, handleNavItemClose } from "./index";
+const api = ["state", "handleNavItemClick", "getBoundRect", "handleNavItemClose"];
+const renderless = (props, { inject, markRaw, reactive, computed }, { vm }) => {
+  const tabs = inject("tabs", null);
+  tabs.addNav(markRaw(vm));
+  const state = reactive({
+    tabSize: computed(() => tabs.size),
+    withClose: computed(() => tabs.withClose)
+  });
+  const api2 = {
+    state,
+    handleNavItemClick: handleNavItemClick({ tabs, props }),
+    getBoundRect: getBoundRectNV({ vm, props }),
+    handleNavItemClose: handleNavItemClose({ tabs, props })
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/tabs-mf/vue-nav.js

@@ -0,0 +1,13 @@
+import "../chunk-PKUHTIDK.js";
+const api = ["state"];
+const renderless = (props, { reactive, inject, computed }) => {
+  const tabs = inject("tabs", null);
+  const state = reactive({
+    navItems: computed(() => tabs.state.items)
+  });
+  return { state };
+};
+export {
+  api,
+  renderless
+};

package/tabs-mf/vue.js

@@ -0,0 +1,45 @@
+import "../chunk-PKUHTIDK.js";
+import { random } from "../common/string";
+import { setActive, addItem, addNav, scrollTo, clickMore, removeItem } from "./index";
+const api = ["state", "setActive", "addItem", "addNav", "scrollTo", "clickMore", "removeItem"];
+const renderless = (props, { onMounted, onBeforeUnmount, provide, reactive, watch, computed }, { vm, emit }) => {
+  const state = reactive({
+    items: [],
+    navs: [],
+    currentItem: computed(() => state.items.find((item) => item.selected)),
+    key: computed(() => state.currentItem ? state.currentItem.name : random())
+  });
+  const api2 = {
+    setActive: setActive({ emit, state, props }),
+    addItem: addItem(state),
+    addNav: addNav(state),
+    scrollTo: scrollTo({ vm, state }),
+    removeItem: removeItem({ state, emit })
+  };
+  Object.assign(api2, {
+    state,
+    clickMore: clickMore(api2)
+  });
+  provide("tabs", vm);
+  watch(
+    () => props.activeName,
+    (name) => name && api2.setActive(name)
+  );
+  watch(
+    () => props.modelValue,
+    (name) => name && api2.setActive(name)
+  );
+  onMounted(() => {
+    props.activeName && api2.scrollTo(props.activeName);
+    props.modelValue && api2.scrollTo(props.modelValue);
+  });
+  onBeforeUnmount(() => {
+    state.navs.forEach((n, i) => state.navs[i] = null);
+    state.navs.length = 0;
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/tabs-mf/wheel.js

@@ -0,0 +1,71 @@
+import "../chunk-PKUHTIDK.js";
+const getAddWheelListener = (window, document) => {
+  const { addApiName, removeApiName, prefix } = detectEventModel(window);
+  const support = detectAvailableWheelEvent(document);
+  const params = { addApiName, removeApiName, prefix, support, window };
+  const { add, remove } = getWheelListener(params);
+  return {
+    addWheelListener: (elem, callback, useCapture) => {
+      support === "DOMMouseScroll" ? add(elem, "MozMousePixelScroll", callback, useCapture) : add(elem, support, callback, useCapture);
+    },
+    removeWheelListener: (elem, callback, useCapture) => {
+      support === "DOMMouseScroll" ? remove(elem, "MozMousePixelScroll", callback, useCapture) : remove(elem, support, callback, useCapture);
+    }
+  };
+};
+const detectEventModel = (window) => {
+  const flag = window.addEventListener;
+  const addApiName = flag ? "addEventListener" : "attachEvent";
+  const removeApiName = flag ? "removeEventListener" : "detachEvent";
+  const prefix = flag ? "" : "on";
+  return { addApiName, removeApiName, prefix };
+};
+const detectAvailableWheelEvent = (document) => {
+  let support;
+  if ("onwheel" in document.createElement("div")) {
+    support = "wheel";
+  } else if (document.onmousewheel !== void 0) {
+    support = "mousewheel";
+  } else {
+    support = "DOMMouseScroll";
+  }
+  return support;
+};
+const elemCbMap = /* @__PURE__ */ new WeakMap();
+const getWheelListener = ({ addApiName, removeApiName, prefix, support, window }) => ({
+  add: (elem, eventName, callback, useCapture) => {
+    let cb = callback;
+    if (support !== "wheel") {
+      cb = (oEvent) => {
+        !oEvent && (oEvent = window.event);
+        const event = {
+          originalEvent: oEvent,
+          target: oEvent.target || oEvent.srcElement,
+          type: "wheel",
+          deltaMode: oEvent.type === "MozMousePixelScroll" ? 0 : 1,
+          deltaX: 0,
+          deltaZ: 0,
+          preventDefault: () => {
+            oEvent.preventDefault ? oEvent.preventDefault() : oEvent.returnValue = false;
+          }
+        };
+        if (support === "mousewheel") {
+          event.deltaY = -1 / 40 * oEvent.wheelDelta;
+          oEvent.wheelDeltaX && (event.deltaX = -1 / 40 * oEvent.wheelDeltaX);
+        } else {
+          event.deltaY = oEvent.detail;
+        }
+        return callback(event);
+      };
+    }
+    elemCbMap.set(elem, cb);
+    elem[addApiName](prefix + eventName, cb, useCapture || false);
+  },
+  remove: (elem, eventName, callback, useCapture) => {
+    const cb = elemCbMap.get(elem);
+    elem[removeApiName](prefix + eventName, cb, useCapture || false);
+  }
+});
+export {
+  getAddWheelListener
+};

package/tag/index.js

@@ -1,11 +1,17 @@
 import "../chunk-PKUHTIDK.js";
-const handleClose = ({ emit, props }) => (event) => {
+const handleClose = ({ emit, props, state }) => (event) => {
+  if (props.disabled)
+    return;
   event.stopPropagation();
+  state.show = false;
   const close = () => emit("close", event);
   props.beforeDelete ? props.beforeDelete(close) : close();
 };
-const handleClick = ({ emit, parent }) => (event) => {
+const handleClick = ({ emit, props, parent, state }) => (event) => {
+  if (props.selectable || props.disabled)
+    return;
   parent.$parent && parent.$parent.tagSelectable && event.stopPropagation();
+  state.selected = !state.selected;
   emit("click", event);
 };
 export {

package/tag/vue.js

@@ -1,10 +1,18 @@
 import "../chunk-PKUHTIDK.js";
 import { handleClose, handleClick } from "./index";
-const api = ["handleClose", "handleClick"];
-const renderless = (props, hooks, { emit, parent }) => ({
-  handleClose: handleClose({ emit, props }),
-  handleClick: handleClick({ emit, parent })
-});
+const api = ["state", "handleClose", "handleClick"];
+const renderless = (props, { reactive, computed }, { emit, parent }) => {
+  const state = reactive({
+    type: computed(() => props.theme || props.type),
+    show: true,
+    selected: false
+  });
+  const api2 = {
+    handleClose: handleClose({ emit, props, state }),
+    handleClick: handleClick({ emit, props, parent, state })
+  };
+  return Object.assign(api2, { state });
+};
 export {
   api,
   renderless

package/tag-group/index.js

@@ -0,0 +1,24 @@
+import "../chunk-PKUHTIDK.js";
+const getHiddenTags = ({ props, vm, state }) => () => {
+  if (!props.data.length)
+    return;
+  const tagGroup = vm.$refs.tagGroup || {};
+  const tags = tagGroup.children;
+  const moreDom = vm.$refs.more || {};
+  const height = tags[0] && tags[0].getBoundingClientRect().height + "px";
+  tagGroup.style && (tagGroup.style.height = height);
+  moreDom.style && (moreDom.style.height = height);
+  state.hiddenTags = [];
+  Array.from(tags).forEach((el, index) => {
+    if (el.offsetTop > 0) {
+      state.hiddenTags.push({
+        name: el.innerText,
+        type: props.data[index] && props.data[index].type
+      });
+    }
+  });
+  state.showMore = !!state.hiddenTags.length;
+};
+export {
+  getHiddenTags
+};

package/tag-group/vue.js

@@ -0,0 +1,29 @@
+import "../chunk-PKUHTIDK.js";
+import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
+import debounce from "../common/deps/debounce";
+import { getHiddenTags } from "./index";
+const api = ["state"];
+const renderless = (props, { onMounted, onBeforeUnmount, reactive }, { vm }) => {
+  const delay = 100;
+  const state = reactive({
+    showMore: false,
+    hiddenTags: []
+  });
+  const api2 = {
+    state,
+    getHiddenTags: getHiddenTags({ props, vm, state })
+  };
+  onMounted(() => {
+    api2.getHiddenTags();
+    api2.debouncedGetHiddenTags = debounce(delay, api2.getHiddenTags);
+    addResizeListener(vm.$refs.tagGroup, debounce(delay, api2.debouncedGetHiddenTags));
+  });
+  onBeforeUnmount(() => {
+    removeResizeListener(vm.$refs.tagGroup, api2.debouncedGetHiddenTags);
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/tall-storage/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { KEY_CODE } from "@opentiny/vue-renderless/common";
+import { KEY_CODE } from "../common";
 const mousedown = (event) => {
   if (event && event.preventDefault) {
     event.preventDefault();

package/tall-storage/vue.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
 import { mousedown, selectItem, keydown } from "./index";
-import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
+import { on, off } from "../common/deps/dom";
 const api = ["state", "mousedown", "selectItem"];
 const renderless = (props, { onUnmounted, reactive, watch }, { emit }) => {
   const state = reactive({

package/time/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { limitTimeRange, clearMilliseconds, timeWithinRange } from "@opentiny/vue-renderless/common/deps/date-util";
+import { limitTimeRange, clearMilliseconds, timeWithinRange } from "../common/deps/date-util";
 const watchValue = ({ api, nextTick, state }) => (value) => {
   let date;
   if (value instanceof Date) {

package/time/vue.js

@@ -11,8 +11,8 @@ import {
   setSelectionRange,
   handleConfirm
 } from "./index";
-import { compuAmPmMode } from "@opentiny/vue-renderless/time-range";
-import { isDate } from "@opentiny/vue-renderless/common/deps/date-util";
+import { compuAmPmMode } from "../time-range";
+import { isDate } from "../common/deps/date-util";
 const api = ["state", "handleChange", "setSelectionRange", "handleCancel", "handleConfirm", "adjustSpinners"];
 const initState = ({ reactive, props, computed, api: api2 }) => {
   const state = reactive({

package/time-line/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { format } from "@opentiny/vue-renderless/common/date";
+import { format } from "../common/date";
 const getDate = (dateTime) => ({
   date: format(dateTime, "yyyy-MM-dd"),
   time: format(dateTime, "hh:mm")
@@ -9,24 +9,45 @@ const getStatus = ({ state, t }) => (value) => {
   return status > 0 ? t("ui.steps.done") : status === 0 ? t("ui.steps.doing") : t("ui.steps.wait");
 };
 const handleClick = ({ emit, state }) => ({ index, node }) => {
-  emit("click", state.isReverse ? state.nodes.length - index - 1 : index, node);
+  if (!node.disabled) {
+    emit("click", state.isReverse ? state.nodes.length - index - 1 : index, node);
+  }
 };
-const getStatusCls = ({ constants, state }) => (index) => {
-  const { PROCESS_DONE_CLS, PROCESS_CUR_CLS, PROCESS_WAIT_CLS } = constants;
+const getStatusCls = ({ constants, state }) => (index, node) => {
+  const { PROCESS_DONE_CLS, PROCESS_CUR_CLS, PROCESS_WAIT_CLS, PROCESS_DISABLED_CLS, PROCESS_ERROR_CLS } = constants;
   const cls = {};
   const reverse = state.isReverse;
-  cls[PROCESS_DONE_CLS] = reverse ? index > state.current : index < state.current;
-  cls[PROCESS_CUR_CLS] = index === state.current;
-  cls[PROCESS_WAIT_CLS] = reverse ? index < state.current : index > state.current;
+  if (node == null ? void 0 : node.disabled) {
+    cls[PROCESS_DISABLED_CLS] = true;
+  } else if (node == null ? void 0 : node.error) {
+    cls[PROCESS_ERROR_CLS] = true;
+  } else {
+    cls[PROCESS_DONE_CLS] = reverse ? index > state.current : index < state.current;
+    cls[PROCESS_CUR_CLS] = index === state.current;
+    cls[PROCESS_WAIT_CLS] = reverse ? index < state.current : index > state.current;
+  }
   return cls;
 };
 const computedData = ({ props, state }) => () => state.isReverse ? props.data.map((item, i) => props.data[props.data.length - 1 - i]) : props.data;
 const computedCurrent = ({ props, state }) => () => state.isReverse ? state.nodes.length - props.active - 1 : props.active;
 const computedIsReverse = (props) => () => props.reverse && props.vertical;
+const computedStackNodes = ({ state, constants }) => () => {
+  if (state.nodes.length >= constants.STACK_NODES_MAX) {
+    state.showData = true;
+    return state.nodes.slice(0, constants.LIMITED_STACK_NODES);
+  }
+  return state.nodes;
+};
+const changeStatus = ({ state }) => () => {
+  state.showAll = !state.showAll;
+  return state.showAll;
+};
 export {
+  changeStatus,
   computedCurrent,
   computedData,
   computedIsReverse,
+  computedStackNodes,
   getDate,
   getStatus,
   getStatusCls,

package/time-line/vue.js

@@ -1,12 +1,15 @@
 import "../chunk-PKUHTIDK.js";
-import { handleClick, getStatusCls, getStatus, computedData, getDate, computedCurrent, computedIsReverse } from "./index";
-const api = ["state", "handleClick", "getStatusCls", "getStatus", "getDate"];
+import { handleClick, getStatusCls, getStatus, computedData, getDate, computedCurrent, computedIsReverse, changeStatus, computedStackNodes } from "./index";
+const api = ["state", "handleClick", "getStatusCls", "getStatus", "getDate", "changeStatus"];
 const renderless = (props, { computed, reactive }, { t, emit, constants }) => {
   const api2 = {};
   const state = reactive({
     nodes: computed(() => api2.computedData()),
     current: computed(() => api2.computedCurrent()),
-    isReverse: computed(() => api2.computedIsReverse())
+    isReverse: computed(() => api2.computedIsReverse()),
+    stackNodes: computed(() => state.showAll ? state.nodes : api2.computedStackNodes()),
+    showData: false,
+    showAll: false
   });
   Object.assign(api2, {
     state,
@@ -16,7 +19,9 @@ const renderless = (props, { computed, reactive }, { t, emit, constants }) => {
     computedIsReverse: computedIsReverse(props),
     getStatus: getStatus({ state, t }),
     handleClick: handleClick({ emit, state, api: api2 }),
-    getStatusCls: getStatusCls({ constants, props, state })
+    getStatusCls: getStatusCls({ constants, props, state }),
+    computedStackNodes: computedStackNodes({ state, constants }),
+    changeStatus: changeStatus({ state })
   });
   return api2;
 };

package/time-panel/index.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
-import scrollIntoView from "@opentiny/vue-renderless/common/deps/scroll-into-view";
-import { DATEPICKER } from "@opentiny/vue-renderless/common";
+import scrollIntoView from "../common/deps/scroll-into-view";
+import { DATEPICKER } from "../common";
 const parseTime = () => (time) => {
   const values = (time || "").split(":");
   if (values.length >= 2) {

package/time-panel/vue.js

@@ -16,7 +16,7 @@ import {
   emitPick,
   emitDestroy
 } from "./index";
-import { DATEPICKER } from "@opentiny/vue-renderless/common";
+import { DATEPICKER } from "../common";
 const api = ["state", "handleMenuEnter", "handleClick", "handleClear", "emitDestroy"];
 const initState = ({ reactive, computed, api: api2 }) => {
   const { Start, End, Step } = DATEPICKER;