@opentiny/vue-renderless 3.18.5 → 3.19.0

package/popeditor/index.js

@@ -254,7 +254,7 @@ const initDisplay = ({ api, constants, props, state, nextTick }) => (value) => {
     });
   }
 };
-const openDialog = ({ api, props, state, emit }) => () => {
+const openDialog = ({ api, props, state, emit, nextTick }) => () => {
   if (state.disabled) {
     return;
   }
@@ -264,6 +264,9 @@ const openDialog = ({ api, props, state, emit }) => () => {
   state.showContent = true;
   emit("popup");
   props.autoLookup && props.alwaysLoad && api.query();
+  nextTick(() => {
+    api.computedTreeMaxHeight();
+  });
 };
 const localFilter = ({ props, state }) => {
   const keys = Object.keys(state.search);
@@ -651,10 +654,18 @@ const selectedBoxDrag = ({ props, state }) => ({ state: { select } }) => {
     state.selectedValues = values;
   }
 };
+const computedTreeMaxHeight = ({ vm, state }) => () => {
+  var _a;
+  const dialogBoxEl = vm.$refs.popeditorDialogBox.$el;
+  const searchInputBottom = 20;
+  const searchInputHeight = ((_a = dialogBoxEl.querySelector(".tiny-popeditor__filter-input")) == null ? void 0 : _a.clientHeight) || 0;
+  state.treeWrapperMaxHeight = `${dialogBoxEl.querySelector(".tiny-dialog-box__body").clientHeight - searchInputHeight - searchInputBottom}px`;
+};
 export {
   closeSuggestPanel,
   computedGetTitle,
   computedModalWidth,
+  computedTreeMaxHeight,
   computedTreeOp,
   createSearchForm,
   doClear,

package/popeditor/vue.js

@@ -46,7 +46,8 @@ import {
   selectedBoxClear,
   selectedBoxDelete,
   selectedBoxDrag,
-  radioChangeFn
+  radioChangeFn,
+  computedTreeMaxHeight
 } from "./index";
 const api = [
   "state",
@@ -76,7 +77,8 @@ const api = [
   "selectedBoxClear",
   "selectedBoxDelete",
   "selectedBoxDrag",
-  "radioChangeFn"
+  "radioChangeFn",
+  "computedTreeMaxHeight"
 ];
 const initState = ({ reactive, computed, props, api: api2, constants, t, parent, vm }) => {
   const state = reactive({
@@ -117,7 +119,8 @@ const initState = ({ reactive, computed, props, api: api2, constants, t, parent,
     showSuggestPanel: false,
     inputHover: false,
     search: null,
-    closeSuggestPanelInvoker: null
+    closeSuggestPanelInvoker: null,
+    treeWrapperMaxHeight: "auto"
   });
   return state;
 };
@@ -140,7 +143,7 @@ const initApi = ({ api: api2, props, state, parent, vm, emit, popper, constants,
     selectedGridSelectAll: selectedGridSelectAll({ constants, props, vm, state }),
     selectedGridSelectChange: selectedGridSelectChange({ constants, props, vm, state }),
     handleReset: handleReset({ api: api2, state, props }),
-    openDialog: openDialog({ api: api2, emit, props, state }),
+    openDialog: openDialog({ api: api2, emit, props, state, nextTick }),
     initDisplay: initDisplay({ api: api2, constants, props, state, nextTick }),
     handleSearch: handleSearch({ api: api2, props, state, vm, constants }),
     computedTreeOp: computedTreeOp({ api: api2, constants }),
@@ -167,7 +170,8 @@ const initApi = ({ api: api2, props, state, parent, vm, emit, popper, constants,
     selectedBoxClear: selectedBoxClear(api2),
     selectedBoxDelete: selectedBoxDelete(api2),
     selectedBoxDrag: selectedBoxDrag({ props, state }),
-    radioChangeFn: radioChangeFn({ props, api: api2 })
+    radioChangeFn: radioChangeFn({ props, api: api2 }),
+    computedTreeMaxHeight: computedTreeMaxHeight({ vm, state })
   });
   state.search = api2.createSearchForm(false);
 };

package/rich-text/table-module.js

@@ -18,8 +18,8 @@ function addMatcherTr({ _quill, oper }) {
     return delta;
   });
 }
-function addMatcherTd({ _quill, oper, Delta }) {
-  _quill.clipboard.addMatcher("TD", function(node, delta) {
+function addMatcherTdOrTh({ _quill, oper, Delta, tagName }) {
+  _quill.clipboard.addMatcher(tagName, function(node, delta) {
     const tableId = oper.getTableId();
     const rowId = oper.getRowId();
     const cellId = cellName();
@@ -84,7 +84,8 @@ function addMatcher({ qil: _quill, Delta }) {
   };
   addMatcherTable({ _quill, oper });
   addMatcherTr({ _quill, oper });
-  addMatcherTd({ _quill, oper, Delta });
+  addMatcherTdOrTh({ _quill, oper, Delta, tagName: "TD" });
+  addMatcherTdOrTh({ _quill, oper, Delta, tagName: "TH" });
   addMatcher3(_quill);
   addMatcherFont(_quill);
 }

package/roles/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { xss } from "../common";
+import { xss } from "../common/xss";
 const showList = (state) => () => state.showPopover = true;
 const show = (state) => () => state.showIcon = false;
 const hide = (state) => () => state.showIcon = true;

package/select/index.js

@@ -495,7 +495,7 @@ const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designCo
     return;
   }
   nextTick(() => {
-    var _a;
+    var _a, _b;
     if (!vm.$refs.reference) {
       return;
     }
@@ -508,9 +508,9 @@ const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designCo
     if (!state.isDisplayOnly && (props.hoverExpand || props.clickExpand) && !props.disabled) {
       api.calcCollapseTags();
     }
-    const sizeInMap = (designConfig == null ? void 0 : designConfig.state.initialInputHeight) || Math.round(state.initialInputHeight) || (state.isSaaSTheme ? 28 : 30);
+    const sizeInMap = (designConfig == null ? void 0 : designConfig.state.initialInputHeight) || Math.round(state.initialInputHeight) || 32;
     const noSelected = state.selected.length === 0;
-    const spacingHeight = designConfig ? (_a = designConfig.state) == null ? void 0 : _a.spacingHeight : constants.SPACING_HEIGHT;
+    const spacingHeight = (_b = (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.spacingHeight) != null ? _b : constants.SPACING_HEIGHT;
     if (!state.isDisplayOnly) {
       if (!noSelected && tags) {
         fastdom.measure(() => {
@@ -1431,7 +1431,7 @@ const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
     document.activeElement.blur();
   }
   state.completed = true;
-  const defaultSizeMap = { default: 28, mini: 24, small: 32, medium: 40 };
+  const defaultSizeMap = { default: 32, mini: 24, small: 36, medium: 40 };
   const sizeMap = ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.sizeMap) || defaultSizeMap;
   if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
     state.currentPlaceholder = "";
@@ -1487,7 +1487,7 @@ const optmzApis = {
       vm.$refs.scrollbar.$el.querySelectorAll(
         '.tiny-recycle-scroller__slot, .tiny-recycle-scroller__item-view:not([style*="transform: translateY(-9999px) translateX(0px)"])'
       )
-    ).map((item) => item.querySelector(`[data-tag="tiny-select-dropdown-item"]:not(${querySelectKey})`)).filter((v) => v);
+    ).map((item) => item.querySelector(`[data-tag="tiny-option"]:not(${querySelectKey})`)).filter((v) => v);
   },
   setScrollTop: ({ refs, state }) => {
     const { optimizeStore } = state;
@@ -1642,7 +1642,7 @@ const computedShowTagText = ({ state }) => () => state.isDisplayOnly;
 const isTagClosable = () => (item) => !item.required;
 const computedGetIcon = ({ designConfig, props }) => () => {
   return props.dropdownIcon ? { icon: props.dropdownIcon } : {
-    icon: (designConfig == null ? void 0 : designConfig.icons.dropdownIcon) || "icon-delta-down",
+    icon: (designConfig == null ? void 0 : designConfig.icons.dropdownIcon) || "icon-down-ward",
     isDefault: true
   };
 };

package/select/vue.js

@@ -238,7 +238,8 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
         return designConfig.state.autoHideDownIcon;
       }
       return true;
-    })()
+    })(),
+    designConfig
   }));
   return state;
 };

package/selected-box/vue.js

@@ -52,7 +52,8 @@ const renderless = (props, { reactive, computed, onBeforeMount, onMounted, onBef
     popoverContent: "",
     dragInstance: null,
     slotParams: computed(() => ({ inverse: state.inverse, total: state.total, select: state.select })),
-    showClear: computed(() => api2.computedShowClear())
+    showClear: computed(() => api2.computedShowClear()),
+    theme: vm.theme
   });
   const api2 = {
     state,

package/slider/index.js

@@ -478,9 +478,9 @@ const handleSlotInput = ({ state, api }) => (event, isLeftInput = true) => {
   state.activeValue = Number(inputValue);
   api.updateSlotValue();
 };
-const inputOnChange = ({ api, emit, props, state }) => (event) => {
+const inputOnChange = ({ api, emit, props, state }) => (currentValue) => {
   if (!props.changeCompat) {
-    if (!/^\d+$/.test(event.target.value)) {
+    if (!/^\d+$/.test(currentValue)) {
       state.activeValue = state.leftBtnValue;
       return;
     }

package/slider-button-group/vue.js

@@ -53,8 +53,9 @@ const renderless = (props, { reactive, provide, onMounted, onBeforeUnmount, watc
     api2.watchSliderButtonChange();
   });
   onBeforeUnmount(() => {
-    mutationObserver == null ? void 0 : mutationObserver.disconnect();
-    intersectionObserver == null ? void 0 : intersectionObserver.disconnect();
+    var _a, _b;
+    (_a = state.mutationObserver) == null ? void 0 : _a.disconnect();
+    (_b = state.intersectionObserver) == null ? void 0 : _b.disconnect();
   });
   watch(
     () => props.modelValue,

package/split/vue.js

@@ -18,7 +18,8 @@ import {
 } from "./index";
 import { on, off } from "../common/deps/dom";
 const api = ["state", "handleMousedown", "buttonMousedown", "buttonLeftTopClick", "buttonRightBottomClick"];
-const renderless = (props, hooks, { vm, nextTick, emit, constants }) => {
+const renderless = (props, hooks, { vm, nextTick, emit, constants, designConfig }) => {
+  var _a;
   const api2 = {};
   const { computed, reactive } = hooks;
   const getUseOffset = useOffset({ nextTick, props, vm, constants, hooks });
@@ -39,7 +40,8 @@ const renderless = (props, hooks, { vm, nextTick, emit, constants }) => {
     paneClasses: computed(() => [
       `${state.prefix}-pane ${props.scrollable ? "tiny-split-scroll" : ""}`,
       { [`${state.prefix}-pane-moving`]: state.isMoving }
-    ])
+    ]),
+    triggerBarConWithLine: (_a = designConfig == null ? void 0 : designConfig.triggerBarConWithLine) != null ? _a : true
   }, getUseOffset.state));
   Object.assign(api2, __spreadProps(__spreadValues({
     state,

package/sticky/index.js

@@ -0,0 +1,89 @@
+import "../chunk-G2ADBYYC.js";
+const computedRootStyle = ({ props, state }) => () => {
+  return {
+    height: state.isFixed ? `${state.rootHeight}px` : "",
+    width: state.isFixed ? `${state.rootWidth}px` : ""
+  };
+};
+const computedStickyStyle = ({ props, state }) => () => {
+  if (!state.isFixed)
+    return {};
+  const offset = props.offset ? typeof props.offset === "number" ? props.offset + "px" : props.offset : 0;
+  return {
+    height: `${state.rootHeight}px`,
+    width: `${state.rootWidth}px`,
+    top: props.position === "top" ? offset : "",
+    bottom: props.position === "bottom" ? offset : "",
+    transform: state.transform ? `translateY(${state.transform}px)` : "",
+    zIndex: props.zIndex
+  };
+};
+const updateRoot = ({ props, state, emit, api }) => () => {
+  if (!state.scrollParent || !state.target)
+    return;
+  api.getRootRect();
+  state.scrollTop = state.scrollParent instanceof Window ? document.documentElement.scrollTop : state.scrollParent.scrollTop || 0;
+  if (props.target) {
+    state.targetRect = api.useRect(state.target);
+  }
+  if (props.position === "top") {
+    if (props.target) {
+      const difference = state.targetRect.bottom - state.offset - state.rootHeight;
+      state.isFixed = state.offset > state.rootTop && state.targetRect.bottom > 0;
+      state.transform = difference < 0 ? difference : 0;
+    } else {
+      state.isFixed = state.offset > state.rootTop;
+    }
+  } else if (props.target) {
+    const difference = state.windowHeight - state.targetRect.top - state.offset - state.rootHeight;
+    state.isFixed = state.windowHeight - state.offset < state.rootBottom && state.windowHeight > state.targetRect.top;
+    state.transform = difference < 0 ? -difference : 0;
+  } else {
+    state.isFixed = state.windowHeight - state.offset < state.rootBottom;
+  }
+  emit("scroll", { scrollTop: state.scrollTop, isFixed: state.isFixed });
+};
+const getRootRect = ({ state, vm, api }) => () => {
+  const rootRect = api.useRect(vm.$refs.root);
+  state.rootHeight = rootRect.height;
+  state.rootWidth = rootRect.width;
+  state.rootTop = rootRect.top;
+  state.rootBottom = rootRect.bottom;
+};
+const getTarget = ({ state, props, api }) => () => {
+  var _a;
+  if (props.target) {
+    state.target = (_a = document.querySelector(props.target)) != null ? _a : void 0;
+    if (state.target) {
+      state.targetRect = api.useRect(state.target);
+    } else {
+      throw new Error(`[AUI Error][aui-sticky] Target does not exist: ${props.target}`);
+    }
+  } else {
+    state.target = document.documentElement;
+  }
+};
+const unitToPx = () => (value) => {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (value.endsWith("rem")) {
+    const rootFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+    return parseFloat(value) * rootFontSize;
+  }
+  if (value.endsWith("vh")) {
+    return parseFloat(value) / 100 * window.innerHeight;
+  }
+  if (value.endsWith("vw")) {
+    return parseFloat(value) / 100 * window.innerWidth;
+  }
+  return parseFloat(value);
+};
+export {
+  computedRootStyle,
+  computedStickyStyle,
+  getRootRect,
+  getTarget,
+  unitToPx,
+  updateRoot
+};

package/sticky/vue.js

@@ -0,0 +1,74 @@
+import "../chunk-G2ADBYYC.js";
+import { useRect } from "../common/deps/useRect";
+import { useWindowSize } from "../common/deps/useWindowSize";
+import { useEventListener } from "../common/deps/useEventListener";
+import { useScrollParent } from "../common/deps/dom";
+import { computedRootStyle, computedStickyStyle, updateRoot, unitToPx, getRootRect, getTarget } from "./index";
+const api = ["state"];
+const renderless = (props, hooks, { vm, emit }) => {
+  const { reactive, computed, unref, ref, toRef, onMounted, watch } = hooks;
+  const state = reactive({
+    root: null,
+    target: null,
+    windowHeight: 0,
+    windowWidth: 0,
+    rootHeight: 0,
+    rootWidth: 0,
+    rootTop: 0,
+    rootBottom: 0,
+    isFixed: false,
+    scrollTop: 0,
+    transform: 0,
+    scrollParent: null,
+    targetRect: null,
+    offset: 0,
+    rootStyle: computed(() => api2.computedRootStyle()),
+    stickyStyle: computed(() => api2.computedStickyStyle())
+  });
+  const api2 = {};
+  Object.assign(api2, {
+    state,
+    computedRootStyle: computedRootStyle({ props, state }),
+    computedStickyStyle: computedStickyStyle({ props, state }),
+    updateRoot: updateRoot({ props, state, emit, api: api2 }),
+    getRootRect: getRootRect({ vm, state, api: api2 }),
+    getTarget: getTarget({ props, state, api: api2 }),
+    useEventListener: useEventListener(hooks),
+    useScrollParent: useScrollParent(hooks),
+    useWindowSize: useWindowSize(ref),
+    useRect: useRect(unref),
+    unitToPx: unitToPx()
+  });
+  watch(
+    () => state.isFixed,
+    (value) => {
+      emit("change", value);
+    }
+  );
+  watch(
+    () => props.offset,
+    (value) => {
+      state.offset = api2.unitToPx(value);
+      api2.updateRoot();
+    },
+    { immediate: true }
+  );
+  const { width, height } = api2.useWindowSize();
+  state.windowHeight = height;
+  state.windowWidth = width;
+  state.scrollParent = api2.useScrollParent(toRef(state, "root"));
+  api2.useEventListener("scroll", api2.updateRoot, { target: toRef(state, "scrollParent"), passive: true });
+  onMounted(() => {
+    state.root = vm.$refs.root;
+    setTimeout(() => {
+      api2.getTarget();
+      api2.getRootRect();
+      api2.updateRoot();
+    });
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/tabbar-item/vue.js

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

package/tall-storage/index.js

@@ -92,7 +92,7 @@ const setLocalStorageage = (name, value, memorySpace = 5) => {
   }
 };
 const addMemory = (props) => (value) => {
-  if (props.name && value) {
+  if (props.name && (value == null ? void 0 : value.trim())) {
     setLocalStorageage(props.name, value, props.memorySpace);
   }
 };

package/time/vue.js

@@ -38,10 +38,11 @@ const initState = ({ reactive, props, computed, api: api2 }) => {
   return state;
 };
 const renderless = (props, { computed, onMounted, reactive, watch, nextTick }, { t, emit: $emit, vm, designConfig }) => {
+  var _a;
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
   const state = initState({ reactive, props, computed, api: api2 });
-  state.showTimePickerButton = designConfig == null ? void 0 : designConfig.showTimePickerButton;
+  state.showTimePickerButton = (_a = designConfig == null ? void 0 : designConfig.showTimePickerButton) != null ? _a : true;
   Object.assign(api2, {
     t,
     state,

package/time-range/vue.js

@@ -41,6 +41,7 @@ const initState = ({ reactive, computed, vm, api: api2 }) => {
     arrowControl: false,
     maxDate: /* @__PURE__ */ new Date(),
     minDate: /* @__PURE__ */ new Date(),
+    showTimePickerRangeButton: false,
     showSeconds: computed(() => (state.format || "").includes("ss")),
     offset: computed(() => state.showSeconds ? 11 : 8),
     spinner: computed(() => state.selectionRange[0] < state.offset ? vm.$refs.minSpinner : vm.$refs.maxSpinner),
@@ -49,12 +50,14 @@ const initState = ({ reactive, computed, vm, api: api2 }) => {
   });
   return state;
 };
-const renderless = (props, { computed, reactive, watch, nextTick }, { t, vm, emit: $emit }) => {
+const renderless = (props, { computed, reactive, watch, nextTick }, { t, vm, emit: $emit, designConfig }) => {
+  var _a;
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
   const MIN_TIME = parseDate("00:00:00", "HH:mm:ss", t);
   const MAX_TIME = parseDate("23:59:59", "HH:mm:ss", t);
   const state = initState({ reactive, computed, vm, api: api2 });
+  state.showTimePickerRangeButton = (_a = designConfig == null ? void 0 : designConfig.showTimePickerRangeButton) != null ? _a : true;
   Object.assign(api2, {
     t,
     state,

package/time-spinner/index.js

@@ -193,7 +193,10 @@ const amPm = (props) => (hour) => {
   }
   return content;
 };
-const typeItemHeight = ({ vm, designConfig }) => (type) => vm.$refs[type].$el.querySelector(DATEPICKER.Qurtyli).offsetHeight + ((designConfig == null ? void 0 : designConfig.itemMarginSpace) || 0);
+const typeItemHeight = ({ vm, designConfig }) => (type) => {
+  var _a;
+  return vm.$refs[type].$el.querySelector(DATEPICKER.Qurtyli).offsetHeight + ((_a = designConfig == null ? void 0 : designConfig.itemMarginSpace) != null ? _a : 12);
+};
 const scrollBarHeight = (vm) => (type) => vm.$refs[type].$el.offsetHeight;
 export {
   adjustCurrentSpinner,

package/toggle-menu/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { xss } from "../common/xss.js";
+import { xss } from "../common/xss";
 import { isObject } from "../common/type";
 const filterNode = (props) => (value, data) => {
   const node = data[props.props.label || "label"] || "";

package/transfer-panel/vue.js

@@ -36,12 +36,12 @@ const api = [
   "selectChange",
   "handlePageChange"
 ];
-const initState = ({ reactive, props, parent, computed, api: api2, slots }) => {
+const initState = ({ reactive, props, parent, computed, api: api2, slots, designConfig }) => {
+  var _a;
   const state = reactive({
     query: "",
     checked: [],
     allChecked: false,
-    inputHover: false,
     internalPage: props.pagerOp.pageVO.currentPage || 1,
     pagerTotal: 0,
     pageChangeData: parent.state.isToLeft,
@@ -54,14 +54,15 @@ const initState = ({ reactive, props, parent, computed, api: api2, slots }) => {
     checkedSummary: computed(() => api2.getCheckedSummary()),
     isIndeterminate: computed(() => api2.getDeteminate()),
     hasNoMatch: computed(() => state.query.length > 0 && state.filteredData.length === 0),
-    inputIcon: computed(() => state.query.length > 0 && state.inputHover ? "circle-close" : "search"),
     labelProp: computed(() => props.props.label || "label"),
     keyProp: computed(() => props.props.key || "key"),
     disabledProp: computed(() => props.props.disabled || "disabled"),
     childrenProp: computed(() => props.treeOp && props.treeOp.props && props.treeOp.props.childern || "children"),
     hasFooter: computed(() => (!!parent.slots["left-footer"] || !!parent.slots["right-footer"]) && !!slots.default),
     renderType: computed(() => props.render && props.render.plugin.name),
-    expanded: []
+    expanded: [],
+    inputBoxType: (designConfig == null ? void 0 : designConfig.inputBoxType) || "underline",
+    showInputSearch: (_a = designConfig == null ? void 0 : designConfig.showInputSearch) != null ? _a : true
   });
   return state;
 };
@@ -113,11 +114,11 @@ const initWatcher = ({ watch, state, api: api2, props, Table }) => {
     }
   );
 };
-const renderless = (props, { computed, reactive, watch, toRaw }, { $prefix, emit, parent, vm, slots }) => {
+const renderless = (props, { computed, reactive, watch, toRaw }, { $prefix, emit, parent, vm, slots, designConfig }) => {
   const api2 = {};
   const Table = $prefix + "Table";
   const Tree = $prefix + "Tree";
-  const state = initState({ reactive, props, parent, computed, api: api2, slots });
+  const state = initState({ reactive, props, parent, computed, api: api2, slots, designConfig });
   Object.assign(api2, {
     state,
     toRaw,

package/tree/index.js

@@ -86,7 +86,7 @@ const setDropIndicatorTop = (dropNode, parent, dropType) => {
   }
   dropType === "inner" ? addClass(dropNode.$el, "is-drop-inner") : removeClass(dropNode.$el, "is-drop-inner");
 };
-const getDragDir = ({ draggingNode, dropNode, allowDrop, emit, dragState }) => {
+const getDragDir = ({ draggingNode, dropNode, allowDrop, emit, dragState, event: event2 }) => {
   let dropPrev = true;
   let dropInner = true;
   let dropNext = true;
@@ -97,10 +97,10 @@ const getDragDir = ({ draggingNode, dropNode, allowDrop, emit, dragState }) => {
     userAllowDropInner = dropInner = allowDrop(draggingNode.node, dropNode.node, "inner");
     dropNext = allowDrop(draggingNode.node, dropNode.node, "next");
   }
-  event.dataTransfer.dropEffect = dropInner ? "copy" : "none";
+  event2.dataTransfer.dropEffect = dropInner ? "copy" : "none";
   if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) {
-    oldDropNode && emit("node-drag-leave", draggingNode.node, oldDropNode.node, event);
-    emit("node-drag-enter", draggingNode.node, dropNode.node, event);
+    oldDropNode && emit("node-drag-leave", draggingNode.node, oldDropNode.node, event2);
+    emit("node-drag-enter", draggingNode.node, dropNode.node, event2);
   }
   if (dropPrev || dropInner || dropNext) {
     dragState.dropNode = dropNode;
@@ -136,7 +136,8 @@ const dragOver = ({ state, emit, props, vm }) => (event2, dropNode) => {
     dropNode,
     allowDrop: props.allowDrop,
     emit,
-    dragState
+    dragState,
+    event: event2
   });
   const dropType = getDropType(dropPrev, dropInner, dropNext, dropNode);
   setDropIndicatorTop(dropNode, vm, dropType);
@@ -397,7 +398,7 @@ const initTabIndex = ({ vm, state }) => () => {
   }
   state.treeItems[0] && state.treeItems[0].setAttribute("tabindex", 0);
 };
-const handleKeydown = ({ vm, state }) => (event2) => {
+const handleKeydown = ({ vm, state, TreeAdapter }) => (event2) => {
   const currentItem = event2.target;
   if (!JSON.stringify(currentItem.className).includes("tiny-tree-node")) {
     return;
@@ -413,7 +414,16 @@ const handleKeydown = ({ vm, state }) => (event2) => {
     } else {
       nextIndex = currentIndex < state.treeItemArray.length - 1 ? currentIndex + 1 : 0;
     }
-    state.treeItemArray[nextIndex].focus();
+    const treeNode = state.treeItemArray[nextIndex];
+    if (TreeAdapter) {
+      const nodeContent = treeNode.querySelector("div.tiny-tree-node__content");
+      treeNode.focus({ preventScroll: true });
+      if (nodeContent && nodeContent.scrollIntoView) {
+        nodeContent.scrollIntoView({ behavior: "instant", block: "nearest", inline: "nearest" });
+      }
+    } else {
+      treeNode.focus();
+    }
   } else if ([KEY_CODE.ArrowLeft, KEY_CODE.ArrowRight].includes(keyCode)) {
     event2.preventDefault();
     currentItem.click();

package/tree/vue.js

@@ -118,7 +118,7 @@ const api = [
   "handleClickPlainNode",
   "setCheckedByNodeKey"
 ];
-const initState = ({ reactive, emitter, props, computed, api: api2 }) => {
+const initState = ({ reactive, emitter, props, computed, api: api2, TreeAdapter }) => {
   const state = reactive({
     loaded: !props.lazy,
     checkEasily: false,
@@ -164,13 +164,16 @@ const initState = ({ reactive, emitter, props, computed, api: api2 }) => {
     newNodeId: Math.floor(random() * 1e4),
     plainNodeStore: {},
     allNodeKeys: [],
+    renderedChildNodes: computed(() => {
+      return state.root.childNodes.filter((childNode) => TreeAdapter ? TreeAdapter.shouldRender(childNode) : true);
+    }),
     // tiny 新增
     filterText: ""
     // 记录当前过滤的内容
   });
   return state;
 };
-const initApi = ({ state, dispatch, broadcast, props, vm, constants, t, emit, api: api2 }) => ({
+const initApi = ({ state, dispatch, broadcast, props, vm, constants, t, emit, api: api2, TreeAdapter }) => ({
   state,
   dispatch,
   broadcast,
@@ -203,7 +206,7 @@ const initApi = ({ state, dispatch, broadcast, props, vm, constants, t, emit, ap
   insertAfter: insertAfter(state),
   updateKeyChildren: updateKeyChildren({ props, state }),
   initTabIndex: initTabIndex({ vm, state }),
-  handleKeydown: handleKeydown({ vm, state }),
+  handleKeydown: handleKeydown({ vm, state, TreeAdapter }),
   computedShowEmptyText: computedShowEmptyText({ constants, t }),
   setCurrentRadio: setCurrentRadio({ props, state }),
   expandAllNodes: expandAllNodes({ state }),
@@ -238,11 +241,12 @@ const initWatcher = ({ watch, props, api: api2, state, isVue2 }) => {
     { immediate: true }
   );
 };
-const renderless = (props, { computed, onMounted, onUpdated, reactive, watch, provide, onBeforeUnmount }, { vm, t, emit, constants, broadcast, dispatch, service, emitter, nextTick }, { isVue2 }) => {
+const renderless = (props, { computed, onMounted, onUpdated, reactive, watch, provide, onBeforeUnmount, inject }, { vm, t, emit, constants, broadcast, dispatch, service, emitter, nextTick }, { isVue2 }) => {
   const api2 = {};
-  const state = initState({ reactive, emitter, props, computed, api: api2 });
+  const TreeAdapter = inject("TreeAdapter", null);
+  const state = initState({ reactive, emitter, props, computed, api: api2, TreeAdapter });
   provide("parentEmitter", state.emitter);
-  Object.assign(api2, initApi({ state, dispatch, broadcast, props, vm, constants, t, emit, api: api2 }), {
+  Object.assign(api2, initApi({ state, dispatch, broadcast, props, vm, constants, t, emit, api: api2, TreeAdapter }), {
     closeMenu: closeMenu(state),
     mounted: mounted({ api: api2, vm }),
     created: created({ api: api2, props, state }),

package/tree-node/index.js

@@ -234,8 +234,8 @@ const computedExpandIcon = ({ designConfig }) => (treeRoot, state) => {
     return state.tree.icon;
   }
   if (treeRoot.showLine) {
-    const expandIcon = ((_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a.expanded) || "icon-minus-square";
-    const collapseIcon = ((_b = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _b.collapse) || "icon-plus-square";
+    const expandIcon = ((_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a.expanded) || "icon-expand";
+    const collapseIcon = ((_b = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _b.collapse) || "icon-put-away";
     return state.expanded ? expandIcon : collapseIcon;
   }
   return "icon-chevron-right";