@opentiny/vue-renderless 3.17.6 → 3.18.0-beta.1

package/select/index.js

@@ -277,7 +277,7 @@ const getOptionOfSetSelected = ({ api, props }) => {
   } else {
     option.createdSelected = false;
   }
-  if (!option.currentLabel) {
+  if (!option.state.currentLabel) {
     api.clearNoMatchValue("");
   }
   return option;
@@ -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(() => {
@@ -640,9 +640,6 @@ const toggleMenu = ({ vm, state, props, api }) => (e) => {
   const enterCode = 13;
   const nodeName = event.target && event.target.nodeName;
   const toggleVisible = props.ignoreEnter ? event.keyCode !== enterCode && nodeName === "INPUT" : true;
-  if (!props.displayOnly) {
-    event.stopPropagation();
-  }
   if (!state.selectDisabled) {
     toggleVisible && !state.softFocus && (state.visible = !state.visible);
     state.softFocus = false;
@@ -1434,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 = "";
@@ -1490,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;
@@ -1588,7 +1585,7 @@ const computedDisabledTooltipContent = ({ props, state }) => () => {
     return state.selected.state ? state.selected.state.currentLabel : state.selected.currentLabel;
   }
 };
-const computedSelectDisabled = ({ props, parent }) => () => props.disabled || (parent.form || {}).disabled || props.displayOnly || (parent.form || {}).displayOnly;
+const computedSelectDisabled = ({ state }) => () => state.isDisabled || state.isDisplayOnly;
 const computedIsExpand = ({ props, state }) => () => {
   const hoverExpanded = (state.selectHover || state.visible) && props.hoverExpand && !props.disabled;
   const clickExpanded = props.clickExpand && state.exceedMaxVisibleRow && state.showCollapseTag;
@@ -1641,9 +1638,11 @@ const watchShowClose = ({ nextTick, state, parent }) => () => {
     }
   });
 };
+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
   };
 };
@@ -1701,6 +1700,7 @@ export {
   computedShowClose,
   computedShowCopy,
   computedShowNewOption,
+  computedShowTagText,
   computedTagsStyle,
   debouncRquest,
   defaultOnQueryChange,
@@ -1739,6 +1739,7 @@ export {
   handleResize,
   initQuery,
   initValue,
+  isTagClosable,
   loadTreeData,
   managePlaceholder,
   mounted,

package/select/vue.js

@@ -109,7 +109,9 @@ import {
   clearNoMatchValue,
   handleDebouncedQueryChange,
   onClickCollapseTag,
-  computedIsExpand
+  computedIsExpand,
+  computedShowTagText,
+  isTagClosable
 } from "./index";
 import debounce from "../common/deps/debounce";
 import { isNumber } from "../common/type";
@@ -172,7 +174,9 @@ const api = [
   "loadTreeData",
   "updateModelValue",
   "clearSearchText",
-  "onClickCollapseTag"
+  "onClickCollapseTag",
+  "computedShowTagText",
+  "isTagClosable"
 ];
 const initState = ({ reactive, computed, props, api: api2, emitter, parent, constants, useBreakpoint, vm, designConfig }) => {
   const stateAdd = initStateAdd({ computed, props, api: api2, parent });
@@ -234,7 +238,8 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
         return designConfig.state.autoHideDownIcon;
       }
       return true;
-    })()
+    })(),
+    designConfig
   }));
   return state;
 };
@@ -283,6 +288,8 @@ const initStateAdd = ({ computed, props, api: api2, parent }) => {
     formItemSize: computed(() => (parent.formItem || { state: {} }).state.formItemSize),
     selectDisabled: computed(() => api2.computedSelectDisabled()),
     isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
+    isDisabled: computed(() => props.disabled || (parent.form || {}).disabled),
+    isShowTagText: computed(() => api2.computedShowTagText()),
     gridCheckedData: computed(() => api2.getcheckedData()),
     isExpandAll: computed(() => api2.computedIsExpandAll()),
     searchSingleCopy: computed(() => props.allowCopy && !props.multiple && (props.filterable || props.searchable)),
@@ -376,7 +383,7 @@ const initApi = ({
     computedShowCopy: computedShowCopy({ props, state }),
     computedOptionsAllDisabled: computedOptionsAllDisabled(state),
     computedDisabledTooltipContent: computedDisabledTooltipContent({ props, state }),
-    computedSelectDisabled: computedSelectDisabled({ props, parent }),
+    computedSelectDisabled: computedSelectDisabled({ state }),
     computedIsExpand: computedIsExpand({ props, state }),
     computedIsExpandAll: computedIsExpandAll(props),
     watchInitValue: watchInitValue({ props, emit }),
@@ -385,7 +392,9 @@ const initApi = ({
     computedGetIcon: computedGetIcon({ designConfig, props }),
     computedGetTagType: computedGetTagType({ designConfig, props }),
     clearSearchText: clearSearchText({ state, api: api2 }),
-    clearNoMatchValue: clearNoMatchValue({ props, emit })
+    clearNoMatchValue: clearNoMatchValue({ props, emit }),
+    computedShowTagText: computedShowTagText({ state }),
+    isTagClosable: isTagClosable()
   });
   addApi({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, isMobileFirstMode, designConfig });
 };

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/index.js

@@ -22,13 +22,17 @@ const getGroup = ({ constants, parent: $parent }) => () => {
   return parent;
 };
 const mounted = ({ vm, props, dispatch, constants }) => () => {
-  dispatch(constants.SLIDER_BUTTON_GROUP, "labelValue", [props.label || props.text]);
   dispatch(constants.SLIDER_BUTTON_GROUP, "eachBlock", [
     vm.$refs.sliderButton.offsetLeft,
     vm.$refs.sliderButton.offsetWidth,
-    vm.$refs.sliderButton.offsetHeight
+    vm.$refs.sliderButton.offsetHeight,
+    props.label || props.text,
+    vm.$refs.sliderButton
   ]);
 };
+const unMounted = ({ props, dispatch, constants }) => () => {
+  dispatch(constants.SLIDER_BUTTON_GROUP, "delBlock", [props.label || props.text]);
+};
 const customEvents = ({ props, vm, type }) => {
   const sliderInput = vm.$refs.sliderInput;
   for (let ev in props.events) {
@@ -41,5 +45,6 @@ export {
   getValue,
   handleChange,
   mounted,
-  setValue
+  setValue,
+  unMounted
 };

package/slider-button/vue.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
-import { handleChange, getValue, setValue, getGroup, mounted, customEvents } from "./index";
+import { handleChange, getValue, setValue, getGroup, mounted, unMounted, customEvents } from "./index";
 const api = ["state", "handleChange"];
-const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmount }, { emit, parent, dispatch, constants, nextTick, vm }) => {
+const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmount, watch }, { emit, parent, dispatch, constants, nextTick, vm }) => {
   const state = reactive({
     disabled: inject("disabled", null) || props.disabled,
     type: inject("sliderType", null),
@@ -9,6 +9,7 @@ const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmo
       get: () => api2.getValue(),
       set: (val) => api2.setValue(val)
     }),
+    label: computed(() => props.label || props.text),
     sliderButtonGroup: computed(() => api2.getGroup()),
     size: inject("sliderSize", null),
     tabIndex: computed(() => state.sliderButtonGroup && state.value !== (props.label || props.text) ? -1 : 0)
@@ -17,6 +18,7 @@ const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmo
   Object.assign(api2, {
     state,
     mounted: mounted({ vm, props, dispatch, constants, state, nextTick }),
+    unMounted: unMounted({ props, dispatch, constants }),
     getValue: getValue(state),
     setValue: setValue({ emit, state }),
     getGroup: getGroup({ constants, parent }),
@@ -27,8 +29,10 @@ const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmo
     customEvents({ props, vm, type: "add" });
   });
   onBeforeUnmount(() => {
+    api2.unMounted();
     customEvents({ props, vm, type: "remove" });
   });
+  watch(() => state.label, api2.mounted);
   return api2;
 };
 export {

package/slider-button-group/index.js

@@ -1,15 +1,52 @@
 import "../chunk-G2ADBYYC.js";
-const getChangePosition = (state) => (value) => {
-  state.eachBlockIndex.find((e, index) => {
-    if (e.index === value) {
-      state.currentIndex = index;
+const getChangePosition = ({ state }) => (value) => {
+  const sliderItem = state.sliderInfo.find((item) => item.value === value);
+  if (sliderItem) {
+    const { buttonVm, width, left, height } = sliderItem;
+    if (!width || !height) {
+      sliderItem.left = buttonVm.offsetLeft;
+      sliderItem.width = buttonVm.offsetWidth;
+      sliderItem.height = buttonVm.offsetHeight;
     }
+    state.sliderSpace = sliderItem.left;
+    state.sliderWidth = sliderItem.width;
+    state.sliderHeight = sliderItem.height;
+  }
+};
+const watchSliderButtonChange = ({ vm, state, api, props }) => (value) => {
+  var _a;
+  const observer = new MutationObserver(() => {
+    state.sliderInfo.forEach((sliderItem) => {
+      const { buttonVm } = sliderItem;
+      sliderItem.left = buttonVm.offsetLeft;
+      sliderItem.width = buttonVm.offsetWidth;
+      sliderItem.height = buttonVm.offsetHeight;
+    });
+    api.getChangePosition(props.modelValue);
+  });
+  state.mutationObserver = observer;
+  const buttonBox = (_a = vm.$refs) == null ? void 0 : _a.sliderButtonBox;
+  if (buttonBox) {
+    observer.observe(vm.$refs.sliderButtonBox, { childList: true, subtree: true, characterData: true });
+  }
+};
+const watchVisible = ({ vm, api, props, state }) => () => {
+  var _a;
+  const group = (_a = vm.$refs) == null ? void 0 : _a.sliderButtonGroup;
+  if (!group) {
+    return;
+  }
+  const observer = new IntersectionObserver(() => {
+    if (!(group == null ? void 0 : group.offsetParent)) {
+      return;
+    }
+    api.getChangePosition(props.modelValue);
   });
-  state.sliderSpace = state.eachBlock[state.currentIndex];
-  state.sliderWidth = state.sliderWidthData[state.currentIndex];
-  state.sliderHeight = state.sliderHeightData[state.currentIndex];
-  state.sliderCount += 1;
+  state.intersectionObserver = observer;
+  observer.observe(group);
 };
 export {
-  getChangePosition
+  getChangePosition,
+  watchSliderButtonChange,
+  watchVisible
 };

package/slider-button-group/vue.js

@@ -1,46 +1,68 @@
-import "../chunk-G2ADBYYC.js";
-import { getChangePosition } from "./index";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import { getChangePosition, watchVisible, watchSliderButtonChange } from "./index";
 const api = ["state"];
-const renderless = (props, { reactive, provide, onMounted }, { parent }) => {
+const renderless = (props, { reactive, provide, onMounted, onBeforeUnmount, watch }, { parent, vm }) => {
   const state = reactive({
     tag: "div",
     isActive: false,
-    eachBlock: [],
     sliderWidth: 0,
     sliderHeight: 0,
     sliderSpace: props.size === "large" ? 4 : 2,
-    sliderWidthData: [],
-    sliderHeightData: [],
-    eachBlockIndex: [],
-    eachBlockData: {},
+    sliderInfo: [],
     currentIndex: 0,
-    sliderCount: 0
+    mutationObserver: null,
+    intersectionObserver: null
   });
   parent.$on("handleChange", (value) => {
     api2.getChangePosition(value);
     parent.$emit("change", value);
   });
-  parent.$on("labelValue", (value) => {
-    state.eachBlockIndex.push({ index: value });
+  parent.$on("eachBlock", (left, width, height, value, buttonVm) => {
+    const sliderItem = state.sliderInfo.find((item) => item.buttonVm === buttonVm);
     if (props.modelValue === value) {
       state.isActive = true;
     }
+    if (sliderItem) {
+      state.sliderInfo[state.sliderInfo.indexOf(sliderItem)] = __spreadProps(__spreadValues({}, sliderItem), { left, width, value, height });
+    } else {
+      state.sliderInfo.push({ buttonVm, left, width, value, height });
+    }
   });
-  parent.$on("eachBlock", (left, width, height) => {
-    state.eachBlock.push(left);
-    state.sliderWidthData.push(width);
-    state.sliderHeightData.push(height);
-    state.sliderWidth = state.sliderWidthData[0];
-    state.sliderHeight = state.sliderHeightData[0];
+  parent.$on("delBlock", (value) => {
+    let sliderItem = state.sliderInfo.find((item) => item.value === value);
+    if (sliderItem) {
+      state.sliderInfo.splice(state.sliderInfo.indexOf(sliderItem), 1);
+    }
   });
   const api2 = {};
-  Object.assign(api2, { state, getChangePosition: getChangePosition(state) });
+  Object.assign(api2, {
+    state,
+    getChangePosition: getChangePosition({ state }),
+    watchVisible: watchVisible({ vm, api: api2, props, state }),
+    watchSliderButtonChange: watchSliderButtonChange({ vm, state, api: api2, props })
+  });
   provide("sliderType", props.type);
   provide("sliderSize", props.size);
   provide("disabled", props.disabled);
   onMounted(() => {
     api2.getChangePosition(props.modelValue);
+    api2.watchVisible();
+    api2.watchSliderButtonChange();
   });
+  onBeforeUnmount(() => {
+    var _a, _b;
+    (_a = state.mutationObserver) == null ? void 0 : _a.disconnect();
+    (_b = state.intersectionObserver) == null ? void 0 : _b.disconnect();
+  });
+  watch(
+    () => props.modelValue,
+    (value) => {
+      api2.getChangePosition(value);
+    }
+  );
   return api2;
 };
 export {

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/tab-item-mf/vue.js

@@ -1,6 +1,10 @@
 import "../chunk-G2ADBYYC.js";
-const renderless = (props, { inject, onBeforeUnmount, reactive, toRef, markRaw }, { slots, vm }) => {
+import { useRelation as createUseRelation } from "../common/deps/useRelation";
+const renderless = (props, hooks, { slots, vm }) => {
+  const { inject, onBeforeUnmount, reactive, toRef, markRaw } = hooks;
   const tabs = inject("tabs", null);
+  const tabsId = inject("tabsId", null);
+  const useRelation = createUseRelation(hooks);
   const { lazy } = props;
   const item = reactive({
     title: toRef(props, "title"),
@@ -15,6 +19,7 @@ const renderless = (props, { inject, onBeforeUnmount, reactive, toRef, markRaw }
   item.selected = (tabs.activeName || tabs.modelValue) === item.name;
   tabs.addItem(item);
   onBeforeUnmount(() => tabs.removeItem(item.name, true));
+  useRelation({ relationKey: `tabs-${tabsId}` });
   return {};
 };
 export {