@opentiny/vue-renderless 3.8.4 → 3.9.0

package/alert/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-const close = ({ emit, state }) => () => {
+const handleClose = ({ emit, state }) => () => {
   state.show = false;
   emit("close");
 };
@@ -27,8 +27,8 @@ const handleHeaderClick = ({ state, props, vm }) => () => {
   }
 };
 export {
-  close,
   computedGetIcon,
   computedGetTitle,
+  handleClose,
   handleHeaderClick
 };

package/alert/vue.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
-import { close, computedGetIcon, computedGetTitle, handleHeaderClick } from "./index";
-const api = ["close", "state", "handleHeaderClick"];
+import { handleClose, computedGetIcon, computedGetTitle, handleHeaderClick } from "./index";
+const api = ["handleClose", "state", "handleHeaderClick"];
 const renderless = (props, { computed, reactive }, { t, emit, constants, vm, designConfig }) => {
   const state = reactive({
     show: true,
@@ -16,7 +16,7 @@ const renderless = (props, { computed, reactive }, { t, emit, constants, vm, des
     state,
     computedGetIcon: computedGetIcon({ constants, props, designConfig }),
     computedGetTitle: computedGetTitle({ constants, props, t }),
-    close: close({ state, emit }),
+    handleClose: handleClose({ emit, state }),
     handleHeaderClick: handleHeaderClick({ state, props, vm })
   };
   return api2;

package/anchor/index.js

@@ -85,12 +85,17 @@ const handleScroll = (state) => {
     clearTimeout(state.scrollTimer);
   }, 500);
 };
+const setChildOffsetTop = ({ state, props }) => {
+  var _a;
+  state.offsetTop = ((_a = document.querySelector(props.links[0].link)) == null ? void 0 : _a.offsetTop) || 0;
+};
 const getContainer = ({ props }) => () => props.containerId ? document.querySelector(props.containerId) : document.body;
-const mounted = ({ vm, state, api }) => () => {
+const mounted = ({ vm, state, api, props }) => () => {
   setScrollContainer({ state, api });
   setFixAnchor({ vm });
   api.onItersectionObserver();
   setCurrentHash(state);
+  setChildOffsetTop({ state, props });
 };
 const updated = ({ state, api }) => () => {
   const cb = api.onItersectionObserver;
@@ -103,27 +108,31 @@ const unmounted = ({ state }) => () => {
 };
 const onItersectionObserver = ({ vm, state, props, emit }) => () => {
   const { expandLink, scrollContainer } = state;
-  const containerTop = scrollContainer.getBoundingClientRect().top + 10;
-  state.intersectionObserver = new IntersectionObserver((entries) => {
-    entries.forEach((item) => {
-      const key = item.target.id;
-      state.observerLinks[key] = item;
-    });
-    for (let key in state.observerLinks) {
-      if (Object.prototype.hasOwnProperty.call(state.observerLinks, key)) {
-        const item = state.observerLinks[key];
-        if (item.isIntersecting && item.intersectionRatio >= 0 && item.target.getBoundingClientRect().top < containerTop) {
-          const link = `#${item.target.id}`;
-          if (!expandLink[link].children) {
-            getCurrentAnchor({ vm, state, link, emit });
-            break;
-          } else {
-            getCurrentAnchor({ vm, state, link, emit });
+  state.intersectionObserver = new IntersectionObserver(
+    (entries) => {
+      const { top } = scrollContainer.getBoundingClientRect();
+      const scrollStartTop = top + state.offsetTop;
+      entries.forEach((item) => {
+        const key = item.target.id;
+        state.observerLinks[key] = item;
+      });
+      for (let key in state.observerLinks) {
+        if (Object.prototype.hasOwnProperty.call(state.observerLinks, key)) {
+          const item = state.observerLinks[key];
+          if (item.isIntersecting && item.intersectionRatio >= 0 && item.target.getBoundingClientRect().top < scrollStartTop) {
+            const link = `#${item.target.id}`;
+            if (!expandLink[link].children) {
+              getCurrentAnchor({ vm, state, link, emit });
+              break;
+            } else {
+              getCurrentAnchor({ vm, state, link, emit });
+            }
           }
         }
       }
-    }
-  });
+    },
+    { root: scrollContainer, threshold: [0] }
+  );
   addObserver({ props, state });
 };
 const linkClick = ({ state, vm, emit, props }) => (e, item) => {

package/anchor/vue.js

@@ -11,11 +11,12 @@ const renderless = (props, { onMounted, onUnmounted, onUpdated, reactive }, { vm
     scrollContainer: null,
     currentHash: "",
     isScroll: false,
-    scrollTimer: null
+    scrollTimer: null,
+    offsetTop: 0
   });
   Object.assign(api2, {
     state,
-    mounted: mounted({ vm, state, api: api2 }),
+    mounted: mounted({ vm, state, api: api2, props }),
     updated: updated({ state, api: api2 }),
     unmounted: unmounted({ state }),
     getContainer: getContainer({ props }),

package/button-group/index.js

@@ -1,4 +1,9 @@
 import "../chunk-PKUHTIDK.js";
+const handleChange = ({ emit, state }) => () => {
+  if (!state.disabled) {
+    emit("change", state.value);
+  }
+};
 const handleClick = ({ emit, props, state }) => (node) => {
   if (!state.disabled) {
     state.value = node[props.valueField];
@@ -15,6 +20,7 @@ const moreNodeClick = ({ emit, props, state }) => (node) => {
   }
 };
 export {
+  handleChange,
   handleClick,
   moreNodeClick
 };

package/button-group/vue.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
-import { handleClick, moreNodeClick } from "./index";
-const api = ["state", "handleClick", "moreNodeClick"];
+import { handleClick, moreNodeClick, handleChange } from "./index";
+const api = ["state", "handleClick", "moreNodeClick", "handleChange"];
 const renderless = (props, { computed, reactive, watch, inject }, { emit, parent }) => {
   var _a, _b;
   parent.tinyForm = parent.tinyForm || inject("form", null);
@@ -26,10 +26,15 @@ const renderless = (props, { computed, reactive, watch, inject }, { emit, parent
     },
     { immediate: true }
   );
+  watch(
+    () => state.value,
+    () => api2.handleChange()
+  );
   const api2 = {
     state,
     handleClick: handleClick({ emit, props, state }),
-    moreNodeClick: moreNodeClick({ emit, props, state })
+    moreNodeClick: moreNodeClick({ emit, props, state }),
+    handleChange: handleChange({ emit, state })
   };
   return api2;
 };

package/carousel/index.js

@@ -1,6 +1,20 @@
 import "../chunk-PKUHTIDK.js";
 import throttle from "../common/deps/throttle";
 import { POSITION } from "../common";
+const pauseTimer = (state) => () => clearInterval(state.timer);
+const playSlides = ({ props, state }) => () => {
+  if (state.activeIndex < state.items.length - 1) {
+    state.activeIndex++;
+  } else if (props.loop) {
+    state.activeIndex = 0;
+  }
+};
+const startTimer = ({ api, props, state }) => () => {
+  if (props.interval <= 0 || !props.autoplay) {
+    return;
+  }
+  state.timer = setInterval(api.playSlides, props.interval);
+};
 const handleMouseEnter = ({ api, state }) => () => {
   state.hover = true;
   api.pauseTimer();
@@ -38,26 +52,10 @@ const resetItemPosition = (state) => (oldIndex) => {
     });
   }
 };
-const playSlides = ({ props, state }) => () => {
-  if (state.activeIndex < state.items.length - 1) {
-    state.activeIndex++;
-  } else if (props.loop) {
-    state.activeIndex = 0;
-  }
-};
-const pauseTimer = (state) => () => clearInterval(state.timer);
-const startTimer = ({ api, props, state }) => () => {
-  if (props.interval <= 0 || !props.autoplay) {
-    return;
-  }
-  state.timer = setInterval(api.playSlides, props.interval);
-};
 const setActiveItem = ({ api, props, state }) => (index) => {
   if (typeof index === "string") {
-    const filteredItems = state.items.filter((item) => item.name === index);
-    if (filteredItems.length > 0) {
-      index = state.items.indexOf(filteredItems[0]);
-    }
+    const filteredItems = state.items.findIndex((item) => item.name === index);
+    index = filteredItems === -1 ? index : filteredItems;
   }
   index = Number(index);
   if (isNaN(index) || index !== Math.floor(index)) {
@@ -98,7 +96,7 @@ const watchActiveIndex = ({ emit, api }) => ({ value, oldValue }) => {
 const watchAutoplay = (api) => (value) => value ? api.startTimer() : api.pauseTimer();
 const throttledArrowClick = (api) => throttle(300, true, (index) => api.setActiveItem(index));
 const throttledIndicatorHover = (api) => throttle(300, (index) => api.handleIndicatorHover(index));
-const computedHasLable = (items) => items.some((item) => item.label.toString().length > 0);
+const computedHasLabel = (items) => items.some((item) => item.label.toString().length > 0);
 const computedStyle = ({ props }) => () => {
   if (props.height) {
     return { "height": props.height };
@@ -192,7 +190,7 @@ function resetTouchStatus(state) {
   state.offsetPos.Y = 0;
 }
 export {
-  computedHasLable,
+  computedHasLabel,
   computedStyle,
   handleButtonEnter,
   handleButtonLeave,

package/carousel/vue.js

@@ -20,10 +20,11 @@ import {
   watchAutoplay,
   throttledArrowClick,
   throttledIndicatorHover,
-  computedHasLable,
+  computedHasLabel,
   touchstart,
   touchmove,
-  touchend
+  touchend,
+  computedStyle
 } from "./index";
 import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
 const api = [
@@ -58,19 +59,41 @@ const api = [
 const initState = ({ reactive, computed, api: api2 }) => {
   const state = reactive({
     items: [],
+    itemsTranslate: [],
     timer: null,
     hover: false,
     activeIndex: -1,
     completed: false,
     containerWidth: 0,
-    hasLabel: computed(() => api2.computedHasLable(state.items))
+    delta: 0,
+    startPos: {
+      X: 0,
+      Y: 0
+    },
+    deltaPos: {
+      X: 0,
+      Y: 0
+    },
+    offsetPos: {
+      X: 0,
+      Y: 0
+    },
+    touchTime: 0,
+    direction: "",
+    size: 0,
+    moving: false,
+    moveDisable: false,
+    isCorrectDirection: false,
+    noTouchNode: ["svg", "BUTTON", "path", "g"],
+    style: computed(() => api2.computedStyle()),
+    hasLabel: computed(() => api2.computedHasLabel(state.items))
   });
   return state;
 };
 const initApi = ({ api: api2, state, props, emit, vm }) => {
   Object.assign(api2, {
     state,
-    computedHasLable,
+    computedHasLabel,
     touchstart: touchstart({ state, api: api2 }),
     touchmove: touchmove({ props, state, vm }),
     touchend: touchend({ state, api: api2 }),
@@ -93,7 +116,8 @@ const initApi = ({ api: api2, state, props, emit, vm }) => {
     handleMouseLeave: handleMouseLeave({ api: api2, state }),
     handleButtonEnter: handleButtonEnter({ api: api2, state }),
     throttledArrowClick: throttledArrowClick(api2),
-    throttledIndicatorHover: throttledIndicatorHover(api2)
+    throttledIndicatorHover: throttledIndicatorHover(api2),
+    computedStyle: computedStyle({ props })
   });
 };
 const initWatch = ({ watch, props, api: api2, state }) => {

package/carousel-item/index.js

@@ -28,6 +28,7 @@ const translateItem = ({ api, CARD_SCALE, parent, state }) => ({ activeIndex, in
   if (vnode.type !== TYPE_CARD && oldIndex !== void 0) {
     state.animating = index === activeIndex || index === oldIndex;
   }
+  state.animatingMf = [activeIndex, oldIndex].indexOf(index) < 0;
   if (index !== activeIndex && length > 2 && vnode.loop) {
     index = api.processIndex({ index, activeIndex, length });
   }
@@ -54,7 +55,7 @@ const handleItemClick = (parent) => () => {
   }
 };
 const computedTransform = ({ parent, TYPE_VERTICAL }) => (state) => {
-  const TRANSLATE = parent.$parent.type === TYPE_VERTICAL ? `translateY(${state.translate}px) scale(${state.scale})` : `translateX(${state.translate}px) scale(${state.scale})`;
+  const TRANSLATE = parent.$parent.type === TYPE_VERTICAL ? `translateY(${state.translate + state.delta}px) scale(${state.scale})` : `translateX(${state.translate + state.delta}px) scale(${state.scale})`;
   return {
     msTransform: TRANSLATE,
     webkitTransform: TRANSLATE,

package/carousel-item/vue.js

@@ -1,5 +1,13 @@
 import "../chunk-PKUHTIDK.js";
-import { processIndex, calculateTranslate, translateItem, handleItemClick, computedTransform, resetAnimatingMf, setDelta } from "./index";
+import {
+  processIndex,
+  calculateTranslate,
+  translateItem,
+  handleItemClick,
+  computedTransform,
+  resetAnimatingMf,
+  setDelta
+} from "./index";
 const api = [
   "state",
   "hover",
@@ -31,10 +39,14 @@ const renderless = (props, { computed, onMounted, onUnmounted, reactive }, { par
     active: false,
     inStage: false,
     animating: false,
+    animatingMf: false,
     isOblique: false,
     carouselParent: parent.$parent,
     hasTitle: computed(() => !!props.title),
-    getTransform: computed(() => api2.computedTransform(state))
+    moving: computed(() => parent.$parent.state.moving),
+    animate: computed(() => Math.abs(parent.$parent.state.delta) > 0 ? !state.animatingMf : state.animating),
+    getTransform: computed(() => api2.computedTransform(state)),
+    delta: 0
   });
   Object.assign(api2, {
     state,

package/cascader/index.js

@@ -47,7 +47,7 @@ const computePresentContent = ({ api, state }) => () => {
 const watchValue = ({ api, state }) => (value) => {
   if (!isEqual(value, state.checkedValue)) {
     state.checkedValue = value;
-    api.computePresentContent();
+    setTimeout(api.computePresentContent);
   }
 };
 const watchCheckedValue = ({ api, emit, state }) => (value) => {
@@ -88,7 +88,7 @@ const isEmpty = (val) => {
 const selfMounted = ({ api, parent, props, refs, state }) => () => {
   const { input } = refs;
   const inputSizeMap = { medium: 36, small: 32, mini: 28 };
-  input.$parent.popperElm = refs.popper;
+  input && (input.$parent.popperElm = refs.popper);
   if (input && input.$el) {
     state.inputInitialHeight = input.$el.offsetHeight || inputSizeMap[state.realSize] || 30;
   }
@@ -154,8 +154,13 @@ const handleKeyDown = ({ api }) => (event) => {
 const handleFocus = (emit) => (e) => {
   emit("focus", e);
 };
-const handleBlur = ({ constants, dispatch, emit, state }) => (e) => {
-  dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [state.multiple ? state.presentText : state.inputValue]);
+const handleBlur = ({ constants, dispatch, emit, state, api, props }) => (e) => {
+  if (props.filterable) {
+    api.computePresentContent();
+  }
+  dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [
+    state.multiple ? state.presentText : state.inputValue
+  ]);
   emit("blur", e);
 };
 const handleInput = ({ api, state, refs }) => (val, event) => {
@@ -188,7 +193,9 @@ const handleClear = (state) => () => {
 };
 const handleExpandChange = ({ constants, dispatch, emit, nextTick, state, updatePopper }) => (value) => {
   nextTick(() => {
-    dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [state.multiple ? state.presentText : state.inputValue]);
+    dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [
+      state.multiple ? state.presentText : state.inputValue
+    ]);
     updatePopper(state.panel.$parent);
   });
   emit("expand-change", value);
@@ -241,7 +248,74 @@ const computePresentTags = ({ api, props, state }) => () => {
   }
   state.checkedNodes = checkedNodes;
   state.presentTags = tags;
+  if (props.hoverExpand) {
+    api.calcCollapseTags();
+  }
+};
+const calcCollapseTags = ({ state, refs, nextTick }) => () => {
+  nextTick(() => {
+    const content = refs["tags-content"];
+    if (state.inputHover || state.dropDownVisible) {
+      return state.isHidden = true;
+    }
+    if (content) {
+      const { width: contentWidth, paddingLeft, paddingRight } = content && window.getComputedStyle(content);
+      const contentWidthTotal = content && parseFloat(contentWidth) - parseFloat(paddingLeft) - parseFloat(paddingRight);
+      const tagsLength = content.querySelector(".tiny-cascader__tags-collapse");
+      const {
+        width: collapseTagContentWidth,
+        marginRight,
+        marginLeft
+      } = tagsLength && window.getComputedStyle(tagsLength);
+      const collapseTagWidth = tagsLength && parseFloat(collapseTagContentWidth) + parseFloat(marginRight) + parseFloat(marginLeft);
+      const tags = Array.from(content.querySelectorAll(".tiny-tag"));
+      let { total, dom, idx } = { total: collapseTagWidth, dom: null, idx: 0 };
+      tags.some((tag, index) => {
+        if (tag !== tagsLength) {
+          const { width: tagContentWidth, marginRight: marginRight2, marginLeft: marginLeft2 } = tag && window.getComputedStyle(tag);
+          total += parseFloat(tagContentWidth) + parseFloat(marginRight2) + parseFloat(marginLeft2);
+        }
+        if (tag !== tagsLength && total > contentWidthTotal && !dom) {
+          dom = tag;
+          idx = index;
+        }
+      });
+      let isOneLine = total - collapseTagWidth <= contentWidthTotal;
+      if (isOneLine) {
+        return state.isHidden = true;
+      }
+      if (dom) {
+        dom.before(tagsLength);
+        state.isHidden = false;
+      } else {
+        state.isHidden = true;
+      }
+      state.collapseTagsLength = tags.length - idx;
+    }
+  });
 };
+const watchInputHover = ({ refs }) => (newVal) => {
+  const [inputHover, dropDownVisible] = newVal;
+  if (!inputHover && !dropDownVisible) {
+    const content = refs["tags-content"];
+    content && content.scrollTo({ top: 0, left: 0 });
+  }
+};
+const handleMouseenter = ({ refs, state }) => ($event) => {
+  const dom = $event.target;
+  const textNode = dom && dom.querySelector("span");
+  const { tooltip } = refs;
+  if (textNode && tooltip && textNode.scrollWidth > textNode.offsetWidth) {
+    const text = textNode.textContent;
+    tooltip.state.referenceElm = dom;
+    tooltip.state.popperElm && (tooltip.state.popperElm.style.display = "none");
+    tooltip.doDestroy();
+    state.tooltipVisible = true;
+    state.tooltipContent = text;
+    setTimeout(tooltip.updatePopper, 20);
+  }
+};
+const handleMouseleave = ({ state }) => () => state.tooltipVisible = false;
 const getSuggestions = ({ nextTick, props, state, updatePopper }) => () => {
   let filterMethod = null;
   if (!(props.filterMethod && typeof props.filterMethod === "function")) {
@@ -318,7 +392,7 @@ const deleteTag = ({ emit, state }) => (index) => {
   state.checkedValue = state.checkedValue.filter((n, i) => i !== index);
   emit("remove-tag", val);
 };
-const updateStyle = ({ parent, refs, state, updatePopper }) => () => {
+const updateStyle = ({ parent, refs, state, updatePopper, nextTick, props }) => () => {
   const $el = parent.$el;
   const { suggestionPanel } = refs;
   const inputInner = $el.querySelector(CASCADER.InputClass);
@@ -333,17 +407,32 @@ const updateStyle = ({ parent, refs, state, updatePopper }) => () => {
   }
   if (tags) {
     const offsetHeight = tags.offsetHeight;
-    const height = Math.max(offsetHeight + 6, state.inputInitialHeight) + "px";
+    let height = 0;
+    if (props.hoverExpand && !state.inputHover && !state.dropDownVisible) {
+      height = state.inputInitialHeight + "px";
+    } else {
+      height = Math.max(offsetHeight + 4, state.inputInitialHeight) + "px";
+    }
     inputInner.style.height = height;
     updatePopper();
+  } else {
+    nextTick(() => {
+      if (state.displayOnly) {
+        inputInner.style.height = "auto";
+      }
+    });
   }
 };
 const getCheckedNodes = (state) => (leafOnly) => state.panel.getCheckedNodes(leafOnly, state.checkedValue);
-const setInputHeightToTag = ({ nextTick, parent }) => () => {
+const setInputHeightToTag = ({ nextTick, parent, state }) => () => {
   nextTick(() => {
     const parentEl = parent.$el;
     const height = parentEl.querySelector(CASCADER.TagClass).offsetHeight + 6 + "px";
-    parentEl.querySelector(CASCADER.InputClass).style.height = height;
+    if (!state.isDisplayOnly) {
+      parentEl.querySelector(CASCADER.InputClass).style.height = height;
+    } else {
+      parentEl.querySelector(CASCADER.InputClass).style.height = "auto";
+    }
   });
 };
 const presentTextHandler = ({ state, value }) => {
@@ -357,12 +446,18 @@ const presentTextHandler = ({ state, value }) => {
     }
   }
 };
-const handleBeforeUpdate = ({ props, api }) => () => {
-  if (!isEmpty(props.modelValue)) {
+const handleBeforeUpdate = ({ props, api, state }) => () => {
+  if (!isEmpty(props.modelValue) && !props.filterable || props.hoverExpand && state.multiple) {
     api.computePresentContent();
   }
 };
+const showPlaceholder = ({ props, state, t, constants }) => () => {
+  let placeholder = null;
+  placeholder = state.multiple && state.presentTags.length || state.present ? "" : props.placeholder || t(constants.placeholder);
+  return placeholder;
+};
 export {
+  calcCollapseTags,
   computClearVisible,
   computePresentContent,
   computePresentTags,
@@ -381,14 +476,18 @@ export {
   handleFocus,
   handleInput,
   handleKeyDown,
+  handleMouseenter,
+  handleMouseleave,
   handleSuggestionClick,
   handleSuggestionKeyDown,
   isEmpty,
   presentTextHandler,
   selfMounted,
   setInputHeightToTag,
+  showPlaceholder,
   toggleDropDownVisible,
   updateStyle,
   watchCheckedValue,
+  watchInputHover,
   watchValue
 };

package/cascader/vue.js

@@ -29,7 +29,12 @@ import {
   watchValue,
   setInputHeightToTag,
   presentTextHandler,
-  handleBeforeUpdate
+  handleBeforeUpdate,
+  showPlaceholder,
+  calcCollapseTags,
+  watchInputHover,
+  handleMouseenter,
+  handleMouseleave
 } from "./index";
 import { removeResizeListener } from "../common/deps/resize-event";
 import userPopper from "../common/deps/vue-popper";
@@ -49,10 +54,13 @@ const api = [
   "handleBlur",
   "handleFocus",
   "toggleDropDownVisible",
-  "handleKeyDown"
+  "handleKeyDown",
+  "handleMouseenter",
+  "handleMouseleave"
 ];
-const initState = ({ reactive, props, computed, parent, api: api2, refs, t, constants }) => {
+const initState = ({ reactive, props, computed, parent, api: api2, t, constants, refs, inject }) => {
   const state = reactive({
+    showAutoWidth: inject("showAutoWidth", null),
     dropDownVisible: false,
     checkedValue: props.modelValue || null,
     inputHover: false,
@@ -66,9 +74,11 @@ const initState = ({ reactive, props, computed, parent, api: api2, refs, t, cons
     pressDeleteCount: 0,
     realSize: computed(() => props.size),
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
-    disabled: computed(() => props.disabled || state.formDisabled),
+    displayOnly: computed(() => props.displayOnly),
+    disabled: computed(() => props.disabled || state.isDisplayOnly || state.formDisabled),
     tagSize: computed(() => ~["small", "mini"].indexOf(state.realSize) ? "mini" : "small"),
     isDisabled: computed(() => state.disabled),
+    isDisplayOnly: computed(() => state.displayOnly || (parent.auiForm || {}).displayOnly),
     config: computed(() => api2.getConfig()),
     multiple: computed(() => state.config.multiple),
     leafOnly: computed(() => !state.config.checkStrictly),
@@ -76,14 +86,17 @@ const initState = ({ reactive, props, computed, parent, api: api2, refs, t, cons
     clearBtnVisible: computed(() => api2.computClearVisible()),
     panel: computed(() => refs.panel),
     placeholder: computed(() => props.placeholder || t(constants.placeholder)),
-    inputValues: computed(() => state.multiple ? state.presentText : state.inputValue)
+    inputValues: computed(() => state.multiple ? state.presentText : state.inputValue),
+    collapseTagsLength: 0,
+    isHidden: false,
+    tooltipVisible: false,
+    tooltipContent: ""
   });
   return state;
 };
-const initApi = ({ api: api2, state, constants, dispatch, emit, refs, props, updatePopper, nextTick, parent }) => {
+const initApi = ({ api: api2, state, constants, dispatch, emit, refs, props, updatePopper, nextTick, parent, t }) => {
   Object.assign(api2, {
     state,
-    handleBlur: handleBlur({ constants, dispatch, emit, state }),
     handleFocus: handleFocus(emit),
     handleClear: handleClear(state),
     getCheckedNodes: getCheckedNodes(state),
@@ -91,11 +104,12 @@ const initApi = ({ api: api2, state, constants, dispatch, emit, refs, props, upd
     handleDropdownLeave: handleDropdownLeave(state),
     focusFirstNode: focusFirstNode({ refs, state }),
     computClearVisible: computClearVisible({ props, state }),
-    updateStyle: updateStyle({ parent, refs, state, updatePopper }),
+    showPlaceholder: showPlaceholder({ props, state, t, constants }),
+    updateStyle: updateStyle({ parent, refs, state, updatePopper, nextTick, props }),
     getSuggestions: getSuggestions({ nextTick, props, state, updatePopper }),
     handleExpandChange: handleExpandChange({ constants, emit, dispatch, nextTick, state, updatePopper }),
     getConfig: getConfig({ parent, props }),
-    setInputHeightToTag: setInputHeightToTag({ nextTick, parent }),
+    setInputHeightToTag: setInputHeightToTag({ nextTick, parent, state }),
     handleSuggestionClick: handleSuggestionClick({ api: api2, state }),
     handleDelete: handleDelete({ api: api2, state }),
     computePresentText: computePresentText({ props, state }),
@@ -108,7 +122,12 @@ const initApi = ({ api: api2, state, constants, dispatch, emit, refs, props, upd
     watchCheckedValue: watchCheckedValue({ api: api2, emit, state }),
     toggleDropDownVisible: toggleDropDownVisible({ emit, nextTick, refs, state, updatePopper }),
     selfMounted: selfMounted({ api: api2, parent, props, refs, state }),
-    handleBeforeUpdate: handleBeforeUpdate({ props, api: api2 })
+    handleBeforeUpdate: handleBeforeUpdate({ props, api: api2, state }),
+    handleBlur: handleBlur({ constants, dispatch, emit, state, api: api2, props }),
+    calcCollapseTags: calcCollapseTags({ refs, state, nextTick }),
+    watchInputHover: watchInputHover({ refs }),
+    handleMouseenter: handleMouseenter({ refs, state }),
+    handleMouseleave: handleMouseleave({ state })
   });
 };
 const initWatch = ({ watch, state, api: api2, props, nextTick, updatePopper }) => {
@@ -143,6 +162,7 @@ const initWatch = ({ watch, state, api: api2, props, nextTick, updatePopper }) =
     () => Array.isArray(state.checkedValue) && state.checkedValue.length,
     () => setTimeout(() => updatePopper())
   );
+  watch([() => state.inputHover, () => state.dropDownVisible], api2.watchInputHover);
 };
 const renderless = (props, { computed, onMounted, onBeforeUnmount, onDeactivated, onUpdated, onBeforeUpdate, reactive, toRefs, watch, inject }, { t, refs, emit, nextTick, constants, parent, slots, dispatch }) => {
   parent.tinyForm = parent.tinyForm || inject("form", null);
@@ -166,12 +186,15 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, onDeactivated
     onDeactivated
   });
   const api2 = {};
-  const state = initState({ reactive, props, computed, parent, api: api2, refs, t, constants });
-  initApi({ api: api2, state, constants, dispatch, emit, refs, props, updatePopper, nextTick, parent });
+  const state = initState({ reactive, props, computed, parent, api: api2, t, constants, refs, inject });
+  initApi({ api: api2, state, constants, dispatch, emit, refs, props, updatePopper, nextTick, parent, t });
   initWatch({ watch, state, api: api2, props, nextTick, updatePopper });
   onBeforeUpdate(api2.handleBeforeUpdate);
   onUpdated(api2.updateStyle);
   onMounted(api2.selfMounted);
+  parent.$on("handle-clear", (event) => {
+    api2.handleClear(event);
+  });
   onBeforeUnmount(() => removeResizeListener(parent.$el, api2.updateStyle));
   return api2;
 };