@opentiny/vue-renderless 3.25.0 → 3.27.0

package/input/vue.js

@@ -41,6 +41,7 @@ import {
 } from "./index";
 import useStorageBox from "../tall-storage/vue-storage-box";
 import { on, off } from "@opentiny/utils";
+import { debounce } from "@opentiny/utils";
 const api = [
   "blur",
   "showBox",
@@ -221,7 +222,7 @@ const mergeApi = ({
     }),
     handleFocus: handleFocus({ api: api2, emit, state }),
     handleInput: handleInput({ api: api2, emit, nextTick, state }),
-    resizeTextarea: resizeTextarea({ api: api2, parent, vm, state, props }),
+    resizeTextarea: debounce(200, resizeTextarea({ api: api2, parent, vm, state, props })),
     updateIconOffset: updateIconOffset(api2),
     calcTextareaHeight: calcTextareaHeight({
       api: api2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.25.0",
+  "version": "3.27.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",
@@ -25,8 +25,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@opentiny/utils": "~3.25.0",
-    "@opentiny/vue-hooks": "~3.25.0",
+    "@opentiny/utils": "~3.27.0",
+    "@opentiny/vue-hooks": "~3.27.0",
     "color": "4.2.3"
   },
   "devDependencies": {

package/pager/vue.js

@@ -135,8 +135,8 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
     watchShowSizes: watchShowSizes({ nextTick, vm }),
     watchInternalPageSize: watchInternalPageSize({ emit, props })
   });
-  state.internalCurrentPage = api2.getValidCurrentPage(props.currentPage);
   state.internalPageSize = api2.getInternalPageSize();
+  state.internalCurrentPage = api2.getValidCurrentPage(props.currentPage);
   watch(() => state.internalCurrentPage, api2.watchInternalCurrentPage);
   watch(() => state.internalPageSize, api2.watchInternalPageSize);
   watch(() => props.currentPage, api2.watchCurrentPage);

package/picker/vue.js

@@ -150,6 +150,10 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent, br
     ),
     showSeconds: computed(
       () => (state.format || props.pickerOptions && props.pickerOptions.format || "ss").includes("ss")
+    ),
+    innerWidth: 0,
+    breakLine: computed(
+      () => (state.innerWidth < 230 && state.type === "daterange" || state.innerWidth < 335 && state.type === "datetimerange") && state.displayValue && state.displayValue[1]
     )
   });
   return state;
@@ -271,8 +275,13 @@ const renderless = (props, hooks, vnode, others) => {
   initApi({ api: api2, props, hooks, state, vnode, others, utils, parent, isPCMode });
   initWatch({ api: api2, state, props, watch, markRaw });
   api2.initGlobalTimezone();
+  const resizeHandler = () => {
+    state.innerWidth = vm.$refs.reference.offsetWidth;
+  };
   onMounted(() => {
     api2.setInputPaddingLeft();
+    state.innerWidth = vm.$refs.reference.offsetWidth;
+    window.addEventListener("resize", resizeHandler);
   });
   parent.$on("handle-clear", (event) => {
     state.showClose = true;
@@ -280,6 +289,7 @@ const renderless = (props, hooks, vnode, others) => {
   });
   onBeforeUnmount(() => {
     api2.destroyPopper("remove");
+    window.removeEventListener("resize", resizeHandler);
     state.popperElm = null;
     state.picker = null;
   });

package/popeditor/index.js

@@ -106,9 +106,6 @@ const handleConfirm = ({ api, constants, emit, props, state }) => (skipBeforeClo
   if (skipBeforeClose !== true && typeof props.beforeClose === "function" && props.beforeClose("confirm") === false) {
     return;
   }
-  if (props.autoReset) {
-    handleReset({ api, state, props })();
-  }
   if (props.popseletor === constants.TYPE_GRID) {
     props.multi ? api.getMultiSelectedData({ props, state }) : api.getRadioSelectedData();
     if (!isNull(state.commitValue)) {
@@ -130,6 +127,9 @@ const handleConfirm = ({ api, constants, emit, props, state }) => (skipBeforeClo
       emit("change", commitValue, state.treeSelectList);
     }
   }
+  if (props.autoReset) {
+    handleReset({ api, state, props })();
+  }
   state.open = false;
 };
 const handleReset = ({ api, state, props }) => () => {

package/search/index.js

@@ -27,6 +27,7 @@ const searchClick = ({ emit, props, state }) => (event) => {
   event.preventDefault();
   if (props.mini && state.collapse) {
     state.collapse = false;
+    emit("expand");
   } else {
     emit("search", state.searchValue, state.currentValue);
   }
@@ -37,11 +38,14 @@ const searchEnterKey = ({ api, props, vm, nextTick }) => (event) => {
     nextTick(() => vm.$refs.input.blur());
   }
 };
-const clickOutside = ({ parent, props, state }) => (event) => {
+const clickOutside = ({ parent, props, state, emit }) => (event) => {
   const path = (event == null ? void 0 : event.composedPath) && event.composedPath();
   if (path ? !path.includes(parent.$el) : !parent.$el.contains(event.target)) {
     state.show = false;
-    props.mini && !state.currentValue && (state.collapse = true);
+    if (props.mini && !state.currentValue && !state.collapse) {
+      state.collapse = true;
+      emit("collapse");
+    }
   }
 };
 const setDefaultType = (searchTypes, typeValue) => {

package/search/vue.js

@@ -76,7 +76,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, toR
     handleChange: handleChange({ emit, state }),
     showSelector: showSelector({ vm, state }),
     searchClick: searchClick({ emit, props, state }),
-    clickOutside: clickOutside({ parent, props, state }),
+    clickOutside: clickOutside({ parent, props, state, emit }),
     emitInput: emitInput({ emit })
   }, formatSearchTypes2.api);
   Object.assign(api2, {

package/select/index.js

@@ -179,8 +179,8 @@ const handleMenuEnter = ({ api, nextTick, state, props }) => () => {
     nextTick(() => api.scrollToOption(state.selected));
   }
 };
-const emitChange = ({ emit, props, state, constants }) => (value, changed) => {
-  if (state.device === "mb" && props.multiple && !changed)
+const emitChange = ({ emit, props, state, constants, isMobileFirstMode }) => (value, changed) => {
+  if (isMobileFirstMode && state.device === "mb" && props.multiple && !changed)
     return;
   const seekItem = (val, arr, items, flag) => {
     if (constants.TYPE.Tree === flag) {
@@ -220,8 +220,8 @@ const emitChange = ({ emit, props, state, constants }) => (value, changed) => {
     }
   }
 };
-const directEmitChange = ({ emit, props, state }) => (value, key) => {
-  if (state.device === "mb" && props.multiple)
+const directEmitChange = ({ emit, props, state, isMobileFirstMode }) => (value, key) => {
+  if (isMobileFirstMode && state.device === "mb" && props.multiple)
     return;
   emit("change", value, key);
 };
@@ -1101,7 +1101,7 @@ const toHide = ({ constants, state, props, vm, api }) => () => {
     }
   }
 };
-const watchVisible = ({ api, constants, emit, state, vm, props }) => (value) => {
+const watchVisible = ({ api, constants, emit, state, vm, props, isMobileFirstMode }) => (value) => {
   var _a;
   if ((props.filterable || props.searchable || props.remote) && !value) {
     (_a = vm.$refs.reference) == null ? void 0 : _a.blur();
@@ -1109,7 +1109,7 @@ const watchVisible = ({ api, constants, emit, state, vm, props }) => (value) =>
   if (api.onCopying()) {
     return;
   }
-  if (value && props.multiple && state.device === "mb") {
+  if (value && props.multiple && isMobileFirstMode && state.device === "mb") {
     state.selectedCopy = state.selected.slice();
   }
   setTimeout(() => {
@@ -1147,12 +1147,28 @@ const watchOptions = ({ api, constants, nextTick, parent, props, state }) => ()
     api.resetInputHeight();
   }
   nextTick(() => {
-    if (parent.$el.querySelector("input") !== document.activeElement) {
+    var _a;
+    if (parent.$el.querySelector("input") !== document.activeElement && // filterable时， 从 input 框离开了
+    !(((_a = document.activeElement) == null ? void 0 : _a.classList.contains("tiny-input__inner")) && // 并且当前不在下拉面板的searchable 的input中时，  才需要更新一下setSelect
+    document.activeElement.closest(".tiny-select-dropdown__search"))) {
       api.setSelected();
     }
   });
   api.getOptionIndexArr();
 };
+const watchOptionsWhenAutoSelect = ({ nextTick, props, state, api }) => () => {
+  if (props.autoSelect && props.remote) {
+    nextTick(() => {
+      var _a, _b;
+      if (((_a = props.options) == null ? void 0 : _a.length) === 1 || state.options.length === 1) {
+        const { valueField } = props;
+        const option = ((_b = props.options) == null ? void 0 : _b.length) === 1 ? props.options[0] : state.options[0];
+        api.updateModelValue(props.multiple ? [option[props.valueField]] : option[props.valueField]);
+        state.visible = false;
+      }
+    });
+  }
+};
 const getOptionIndexArr = ({ props, state, api }) => () => {
   setTimeout(() => {
     state.optionIndexArr = api.queryVisibleOptions().map((item) => Number(item.getAttribute("data-index")));
@@ -1586,9 +1602,9 @@ const computeMultipleLimit = ({ props, state }) => () => {
   const { optimizeOpts } = state;
   return optmzApis.natural(multiple && optimization ? multipleLimit || optimizeOpts.limit : multipleLimit);
 };
-const updateModelValue = ({ props, emit, state }) => (value, needUpdate) => {
+const updateModelValue = ({ props, emit, state, isMobileFirstMode }) => (value, needUpdate) => {
   state.isClickChoose = true;
-  if (state.device === "mb" && props.multiple && !needUpdate) {
+  if (isMobileFirstMode && state.device === "mb" && props.multiple && !needUpdate) {
     state.modelValue = value;
   } else {
     emit("update:modelValue", value);
@@ -1626,17 +1642,17 @@ const computedTagsStyle = ({ props, parent, state, vm }) => () => {
   }
   return tagsStyle;
 };
-const computedReadonly = ({ props, state }) => () => {
+const computedReadonly = ({ props, state, isMobileFirstMode }) => () => {
   if (state.isIOS && props.filterable) {
     return false;
   } else {
-    return state.device === "mb" || props.readonly || !(props.filterable || props.searchable) || props.multiple || browserInfo.name !== BROWSER_NAME.IE && browserInfo.name !== BROWSER_NAME.Edge && !state.visible;
+    return isMobileFirstMode && state.device === "mb" || props.readonly || !(props.filterable || props.searchable) || 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 !== "");
 const computedCollapseTagSize = (state) => () => state.selectSize;
-const computedShowNewOption = ({ props, state }) => () => {
-  const query = state.device === "mb" ? state.queryValue : state.query;
+const computedShowNewOption = ({ props, state, isMobileFirstMode }) => () => {
+  const query = isMobileFirstMode && state.device === "mb" ? state.queryValue : state.query;
   return (props.filterable || props.searchable) && props.allowCreate && query && !state.options.filter((option) => !option.created).some((option) => option.state.currentLabel === state.query);
 };
 const computedShowCopy = ({ props, state }) => () => props.multiple && props.copyable && state.inputHovering && state.selected.length;
@@ -1845,6 +1861,7 @@ export {
   watchInputHover,
   watchOptimizeOpts,
   watchOptions,
+  watchOptionsWhenAutoSelect,
   watchPropsOption,
   watchShowClose,
   watchValue,

package/select/vue.js

@@ -113,7 +113,8 @@ import {
   computedIsExpand,
   computedShowTagText,
   isTagClosable,
-  computedCurrentSizeMap
+  computedCurrentSizeMap,
+  watchOptionsWhenAutoSelect
 } from "./index";
 import { debounce } from "@opentiny/utils";
 import { isNumber } from "@opentiny/utils";
@@ -183,7 +184,19 @@ const api = [
   "computedShowTagText",
   "isTagClosable"
 ];
-const initState = ({ reactive, computed, props, api: api2, emitter, parent, constants, useBreakpoint, vm, designConfig }) => {
+const initState = ({
+  reactive,
+  computed,
+  props,
+  api: api2,
+  emitter,
+  parent,
+  constants,
+  isMobileFirstMode,
+  useBreakpoint,
+  vm,
+  designConfig
+}) => {
   const stateAdd = initStateAdd({ computed, props, api: api2, parent });
   const state = reactive(__spreadProps(__spreadValues({}, stateAdd), {
     selectEmitter: emitter(),
@@ -224,10 +237,13 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
     selectedCopy: [],
     compareValue: null,
     selectedVal: computed(
-      () => state.device === "mb" && props.multiple && state.visible ? state.selectedCopy : state.selected
+      () => isMobileFirstMode && state.device === "mb" && props.multiple && state.visible ? state.selectedCopy : state.selected
     ),
     displayOnlyContent: computed(() => {
       var _a;
+      if (vm.$slots.reference) {
+        return "";
+      }
       if (props.multiple) {
         if (Array.isArray(state.selected)) {
           if (state.isDisplayOnly && props.options && props.options.length > 0) {
@@ -269,7 +285,11 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
       return true;
     })(),
     designConfig,
-    currentSizeMap: computed(() => api2.computedCurrentSizeMap())
+    currentSizeMap: computed(() => api2.computedCurrentSizeMap()),
+    rootAutoTipConfig: computed(() => __spreadValues({
+      content: state.displayOnlyContent,
+      always: !!state.displayOnlyContent
+    }, props.tooltipConfig))
   }));
   return state;
 };
@@ -368,8 +388,8 @@ const initApi = ({
     getChildValue: getChildValue(),
     getOption: getOption({ props, state, api: api2 }),
     getSelectedOption: getSelectedOption({ props, state }),
-    emitChange: emitChange({ emit, props, state, constants }),
-    directEmitChange: directEmitChange({ emit, props, state, constants }),
+    emitChange: emitChange({ emit, props, state, constants, isMobileFirstMode }),
+    directEmitChange: directEmitChange({ emit, props, state, constants, isMobileFirstMode }),
     toggleMenu: toggleMenu({ vm, state, props, api: api2, isMobileFirstMode }),
     showTip: showTip({ props, state, vm }),
     onOptionDestroy: onOptionDestroy(state),
@@ -410,12 +430,12 @@ const initApi = ({
     computeMultipleLimit: computeMultipleLimit({ props, state }),
     watchInputHover: watchInputHover({ vm }),
     initQuery: initQuery({ props, state, constants, vm }),
-    updateModelValue: updateModelValue({ props, emit, state }),
+    updateModelValue: updateModelValue({ props, emit, state, isMobileFirstMode }),
     computedTagsStyle: computedTagsStyle({ props, parent, state, vm }),
-    computedReadonly: computedReadonly({ props, state }),
+    computedReadonly: computedReadonly({ props, state, isMobileFirstMode }),
     computedShowClose: computedShowClose({ props, state }),
     computedCollapseTagSize: computedCollapseTagSize(state),
-    computedShowNewOption: computedShowNewOption({ props, state }),
+    computedShowNewOption: computedShowNewOption({ props, state, isMobileFirstMode }),
     computedShowCopy: computedShowCopy({ props, state }),
     computedOptionsAllDisabled: computedOptionsAllDisabled(state),
     computedDisabledTooltipContent: computedDisabledTooltipContent({ props, state }),
@@ -431,7 +451,8 @@ const initApi = ({
     clearNoMatchValue: clearNoMatchValue({ props, emit }),
     computedShowTagText: computedShowTagText({ state }),
     isTagClosable: isTagClosable(),
-    computedCurrentSizeMap: computedCurrentSizeMap({ state, designConfig })
+    computedCurrentSizeMap: computedCurrentSizeMap({ state, designConfig }),
+    watchOptionsWhenAutoSelect: watchOptionsWhenAutoSelect({ state, props, nextTick, api: api2 })
   });
   addApi({ api: api2, props, state, emit, constants, parent, nextTick, dispatch, vm, isMobileFirstMode, designConfig });
 };
@@ -567,6 +588,8 @@ const initWatch = ({ watch, props, api: api2, state, nextTick }) => {
 };
 const addWatch = ({ watch, props, api: api2, state, nextTick }) => {
   watch(() => [...state.options], api2.watchOptions);
+  watch(() => state.options, api2.watchOptionsWhenAutoSelect);
+  props.options && watch(() => props.options, api2.watchOptionsWhenAutoSelect);
   if (props.renderType === "grid" && !props.optimization) {
     watch(() => state.gridData, api2.setSelected, { immediate: true });
   }
@@ -593,6 +616,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     emitter,
     parent,
     constants,
+    isMobileFirstMode,
     useBreakpoint,
     vm,
     designConfig

package/slider/vue.js

@@ -172,6 +172,13 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
       api2.setActiveButtonValue(value);
     }
   );
+  watch(
+    () => props.vertical,
+    () => {
+      api2.setBarStyle();
+      api2.setButtonStyle();
+    }
+  );
   watch(
     () => state.leftBtnValue,
     (newVal) => {

package/slider-button/vue.js

@@ -4,6 +4,7 @@ const api = ["state", "handleChange"];
 const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmount, watch }, { emit, parent, dispatch, constants, nextTick, vm }) => {
   const state = reactive({
     disabled: inject("disabled", null) || props.disabled,
+    displayed: inject("displayed", null) || props.displayed,
     type: inject("sliderType", null),
     value: computed({
       get: () => api2.getValue(),

package/slider-button-group/vue.js

@@ -47,6 +47,7 @@ const renderless = (props, { reactive, provide, onMounted, onBeforeUnmount, watc
   provide("sliderType", props.type);
   provide("sliderSize", props.size);
   provide("disabled", props.disabled);
+  provide("displayed", props.displayed);
   onMounted(() => {
     api2.getChangePosition(props.modelValue);
     api2.watchVisible();

package/space/index.js

@@ -0,0 +1,30 @@
+import "../chunk-G2ADBYYC.js";
+const sizeMap = {
+  small: "8px",
+  medium: "16px",
+  large: "24px"
+};
+const parseGap = (gap) => {
+  if (typeof gap === "number")
+    return `${gap}px`;
+  if (gap in sizeMap)
+    return sizeMap[gap];
+  if (typeof gap === "string")
+    return gap;
+  return "0px";
+};
+const getGapStyle = (props) => {
+  const gapProp = props.size;
+  if (Array.isArray(gapProp)) {
+    const [horizontal, vertical] = gapProp;
+    return {
+      gap: `${parseGap(vertical)} ${parseGap(horizontal)}`
+    };
+  }
+  return {
+    gap: parseGap(gapProp)
+  };
+};
+export {
+  getGapStyle
+};

package/space/vue.js

@@ -0,0 +1,39 @@
+import "../chunk-G2ADBYYC.js";
+import { getGapStyle } from "./index";
+const api = ["state", "orderedChildren"];
+function isVNodeFn(node) {
+  return !!(node && (node.__v_isVNode || node.componentOptions));
+}
+const renderless = (props, hooks, { slots }) => {
+  const { reactive, computed } = hooks;
+  const state = reactive({
+    gapStyle: computed(() => getGapStyle(props))
+  });
+  const orderedChildren = computed(() => {
+    var _a, _b;
+    const children = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [];
+    const validChildren = children.filter((v) => {
+      if (!isVNodeFn(v))
+        return false;
+      const type = v.type;
+      return type !== "Comment" && type !== Symbol.for("v-comment");
+    });
+    if (!((_b = props.order) == null ? void 0 : _b.length))
+      return validChildren;
+    const map = {};
+    validChildren.forEach((child) => {
+      var _a2, _b2, _c;
+      const key = (_c = child.key) != null ? _c : Array.isArray((_a2 = child.props) == null ? void 0 : _a2.class) ? child.props.class.join(" ") : (_b2 = child.props) == null ? void 0 : _b2.class;
+      if (key)
+        map[String(key)] = child;
+    });
+    const sorted = props.order.map((k) => map[k]).filter(Boolean);
+    const rest = validChildren.filter((v) => !props.order.includes(String(v.key)));
+    return [...sorted, ...rest];
+  });
+  return { state, orderedChildren };
+};
+export {
+  api,
+  renderless
+};

package/tab-nav/index.js

@@ -301,11 +301,11 @@ const watchCurrentName = ({ nextTick, vm, state }) => () => {
   });
 };
 const handleTitleMouseenter = ({ state, vm, props }) => (e, title) => {
-  const dom = e.target;
-  const el = title == null ? void 0 : title.el;
   if (props.tooltipConfig) {
     return;
   }
+  const dom = e.target;
+  const el = title == null ? void 0 : title.el;
   if (dom && el && el.scrollWidth > el.offsetWidth) {
     const tooltip = vm.$refs.tooltip;
     tooltip.state.referenceElm = dom;

package/tabs/vue.js

@@ -40,7 +40,8 @@ const initState = ({ reactive, props }) => reactive({
   direction: "",
   expandPanesWidth: "",
   activeIndex: 1,
-  separator: props.separator
+  separator: props.separator,
+  headerOnly: props.headerOnly
 });
 const initWatcher = ({
   watch,

package/tabs-mf/index.js

@@ -203,7 +203,10 @@ const wheelListener = ({ vm, api, tabs, state }) => debounce(10, (e) => {
   Object.assign(state, { moreList, moreLeft, moreRight });
 });
 const getBoundRect = (vm) => () => vm.$el.getBoundingClientRect();
-const handleClickDropdownItem = (tabs) => (name) => tabs.clickMore(name);
+const handleClickDropdownItem = (tabs) => (navItem, event) => {
+  tabs.$emit("click", navItem, event);
+  tabs.clickMore(navItem.name);
+};
 const scrollToLeft = (tabs) => () => {
   tabs.scrollTo(tabs.state.navs[0].name);
 };

package/tabs-mf/vue-nav.js

@@ -6,37 +6,28 @@ const renderless = (props, { reactive, inject, computed, onMounted, onBeforeUnmo
     navItems: computed(() => tabs.state.items),
     currentNav: computed(() => tabs.state.navs[state.currentIndex]),
     currentIndex: computed(
-      () => tabs.state.navs.findIndex((item) => tabs.state.currentItem && tabs.state.currentItem.name === item.name)
+      () => tabs.state.navs.findIndex((item) => tabs.state.cacheCurrentItem && tabs.state.cacheCurrentItem.name === item.name)
     ),
     currentWidth: 0,
     currentPosition: 0
   });
-  let rafId, observer;
+  let observer;
   onMounted(() => {
     observer = new MutationObserver((mutationsList) => {
-      for (let mutation of mutationsList) {
-        if (mutation.type === "attributes") {
-          if (rafId) {
-            cancelAnimationFrame(rafId);
-          }
-          rafId = requestAnimationFrame(() => {
-            const nav = state.currentNav;
-            state.currentWidth = nav && nav.$el.offsetWidth || 0;
-            state.currentPosition = nav && nav.$el.offsetLeft || 0;
-          });
-        }
-      }
+      const nav = state.currentNav;
+      state.currentWidth = nav && nav.$el.offsetWidth || 0;
+      state.currentPosition = nav && nav.$el.offsetLeft || 0;
     });
     observer.observe(vm.$el, { attributes: true, subtree: true });
   });
   onBeforeUnmount(() => {
-    if (rafId) {
-      cancelAnimationFrame(rafId);
-    }
     observer.disconnect();
     observer = null;
   });
-  return { state };
+  Object.assign(api, {
+    state
+  });
+  return api;
 };
 export {
   api,

package/tabs-mf/vue-slider-bar.js

@@ -0,0 +1,24 @@
+import "../chunk-G2ADBYYC.js";
+const api = ["state"];
+const renderless = (props, { reactive, inject, computed, onMounted, onUnmounted, onUpdated }, { vm, emit }) => {
+  const tabs = inject("tabs", null);
+  const state = reactive({
+    currentNav: computed(() => props.currentNav || null),
+    currentWidth: computed(() => props.currentWidth + "px"),
+    currentPosition: computed(() => props.currentPosition + "px")
+  });
+  const handleTransitionEnd = () => {
+    tabs.state.currentItem = tabs.state.cacheCurrentItem;
+  };
+  onMounted(() => {
+    vm.$el.addEventListener("transitionend", handleTransitionEnd);
+  });
+  onUnmounted(() => {
+    vm.$el.removeEventListener("transitionend", handleTransitionEnd);
+  });
+  return { state };
+};
+export {
+  api,
+  renderless
+};

package/tabs-mf/vue.js

@@ -37,7 +37,8 @@ const renderless = (props, hooks, { vm, emit, nextTick }) => {
   const state = reactive({
     items: [],
     navs: [],
-    currentItem: computed(() => state.items.find((item) => item.selected)),
+    currentItem: null,
+    cacheCurrentItem: computed(() => state.items.find((item) => item.selected)),
     key: computed(() => state.currentItem ? state.currentItem.name : random()),
     separator: props.separator,
     swipeable: computed(() => api2.computedSwipeable()),
@@ -83,6 +84,7 @@ const renderless = (props, hooks, { vm, emit, nextTick }) => {
   );
   onMounted(() => {
     nextTick(() => api2.observeTabSwipeSize());
+    state.currentItem = state.cacheCurrentItem;
     props.activeName && api2.scrollTo(props.activeName);
     props.modelValue && api2.scrollTo(props.modelValue);
   });

package/tag/index.js

@@ -8,7 +8,7 @@ const handleClose = ({ emit, props, state }) => (event) => {
   props.beforeDelete ? props.beforeDelete(close) : close();
 };
 const handleClick = ({ emit, props, parent, state }) => (event) => {
-  if (props.selectable || props.disabled)
+  if (props.disabled)
     return;
   parent.$parent && parent.$parent.tagSelectable && event.stopPropagation();
   state.selected = !state.selected;

package/tree-menu/index.js

@@ -56,6 +56,9 @@ const watchFilterText = ({ vm }) => (value) => {
 const nodeDragStart = (emit) => (node, event) => {
   emit("node-drag-start", node, event);
 };
+const inputChange = ({ emit, state }) => () => {
+  emit("input-change", state.filterText);
+};
 const nodeDragEnter = (emit) => (dragNode, dropNode, event) => {
   emit("node-drag-enter", dragNode, dropNode, event);
 };
@@ -155,6 +158,7 @@ export {
   getTree,
   handleToggleMenu,
   initData,
+  inputChange,
   nodeClick,
   nodeCollapse,
   nodeDragEnd,

package/tree-menu/vue.js

@@ -6,6 +6,7 @@ import {
   watchFilterText,
   nodeDragStart,
   nodeDragEnter,
+  inputChange,
   nodeDragOver,
   nodeDragEnd,
   nodeDrop,
@@ -35,6 +36,7 @@ const api = [
   "filterNode",
   "nodeDragStart",
   "nodeDragEnter",
+  "inputChange",
   "nodeDragOver",
   "nodeDragEnd",
   "nodeDrop",
@@ -86,6 +88,7 @@ const renderless = (props, { computed, watch, reactive, onMounted }, { t, servic
     nodeDragOver: nodeDragOver(emit),
     nodeDragStart: nodeDragStart(emit),
     nodeDragEnter: nodeDragEnter(emit),
+    inputChange: inputChange({ emit, state }),
     currentChange: currentChange(emit),
     watchFilterText: watchFilterText({ vm }),
     getTitle: getTitle(props),

package/types/button-group.type.d.ts

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { IButtonGroupNode as IButtonGroupNode$1 } from '@opentiny/vue-renderless/types/button-group.type';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';