@opentiny/vue-renderless 3.8.3 → 3.9.0

package/action-sheet/index.js

@@ -22,7 +22,7 @@ const setSheetStyle = ({ state, props }) => () => {
 const initScrollMenu = ({ state, nextTick, refs, BScroll }) => () => {
   nextTick(() => {
     const { scrollMenu } = refs;
-    if (state.scroll) {
+    if (!state.scroll) {
       state.scroll = new BScroll(scrollMenu, {
         probeType: 3,
         tap: "tap"

package/action-sheet/vue.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
 import { setSheetStyle, initScrollMenu, visibleHandle, watchVisible, menuHandle, close, selectOption, confirm, actionSelectOption, hide } from "./index";
-const api = ["state", "setSheetStyle", "initScrollMenu", "visibleHandle", "menuHandle", "close", "selectOption", "confirm", "actionSelectOption", "hide"];
+const api = ["state", "setSheetStyle", "initScrollMenu", "visibleHandle", "watchVisible", "menuHandle", "close", "selectOption", "confirm", "actionSelectOption", "hide"];
 const renderless = (props, { reactive, watch }, { emit, nextTick, refs, vm }, { BScroll }) => {
   const api2 = {};
   const state = reactive({
@@ -10,17 +10,6 @@ const renderless = (props, { reactive, watch }, { emit, nextTick, refs, vm }, {
     sheetContentStyle: {},
     scroll: null
   });
-  watch(
-    () => props.visible,
-    (value) => {
-      if (value) {
-        api2.setSheetStyle({ state, props });
-        api2.initScrollMenu({ state, nextTick, refs, BScroll });
-      }
-      api2.watchVisible(value);
-    }
-  );
-  watch(() => props.visible, api2.watchVisible, { immediate: true });
   Object.assign(api2, {
     state,
     setSheetStyle: setSheetStyle({ state, props }),
@@ -34,6 +23,17 @@ const renderless = (props, { reactive, watch }, { emit, nextTick, refs, vm }, {
     close: close({ emit, vm }),
     hide: hide(emit)
   });
+  watch(
+    () => props.visible,
+    (value) => {
+      if (value) {
+        api2.setSheetStyle({ state, props });
+        api2.initScrollMenu({ state, nextTick, refs, BScroll });
+      }
+      api2.watchVisible(value);
+    }
+  );
+  watch(() => props.visible, api2.watchVisible, { immediate: true });
   return api2;
 };
 export {

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

@@ -22,9 +22,7 @@ const setScrollContainer = ({ state, api, cb = null }) => {
   const currentContainer = api.getContainer();
   const { scrollContainer } = state;
   if (scrollContainer !== currentContainer) {
-    removeClass(scrollContainer, "tiny-anchor-scroll-container");
     state.scrollContainer = currentContainer;
-    addClass(currentContainer, "tiny-anchor-scroll-container");
     cb && cb();
   }
 };
@@ -51,7 +49,7 @@ const updateSkidPosition = ({ vm, state, emit }) => {
   }
 };
 const getCurrentAnchor = ({ vm, state, link, emit }) => {
-  if (state.currentLink === link) {
+  if (state.currentLink === link || state.isScroll) {
     return;
   }
   state.currentLink = link;
@@ -80,12 +78,24 @@ const setCurrentHash = (state) => {
   }
   return false;
 };
+const handleScroll = (state) => {
+  clearTimeout(state.scrollTimer);
+  state.scrollTimer = setTimeout(() => {
+    state.isScroll = false;
+    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;
@@ -94,33 +104,39 @@ const updated = ({ state, api }) => () => {
 const unmounted = ({ state }) => () => {
   const { intersectionObserver } = state;
   intersectionObserver.disconnect();
+  state.scrollContainer.removeEventListener("scroll", handleScroll(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) => {
+  state.isScroll = true;
   const { link, title } = item;
   const emitLink = { link, title };
   emit("linkClick", e, emitLink);
@@ -131,9 +147,10 @@ const linkClick = ({ state, vm, emit, props }) => (e, item) => {
   setMarkClass({ state, props });
   if (scrollContainer !== document.body && !isChangeHash) {
     const linkEl = scrollContainer.querySelector(item.link);
-    const top = linkEl.offsetTop;
+    const top = linkEl.offsetTop - scrollContainer.offsetTop;
     const param = { top, left: 0, behavior: "smooth" };
     scrollContainer.scrollTo(param);
+    scrollContainer.addEventListener("scroll", handleScroll(state));
   }
 };
 export {

package/anchor/vue.js

@@ -9,11 +9,14 @@ const renderless = (props, { onMounted, onUnmounted, onUpdated, reactive }, { vm
     expandLink: {},
     intersectionObserver: null,
     scrollContainer: null,
-    currentHash: ""
+    currentHash: "",
+    isScroll: false,
+    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,7 +1,7 @@
 import "../chunk-PKUHTIDK.js";
-import { handleClick, moreNodeClick } from "./index";
-const api = ["state", "handleClick", "moreNodeClick"];
-function renderless(props, { computed, reactive, watch, inject }, { emit, parent }) {
+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);
   const state = reactive({
@@ -26,13 +26,18 @@ function 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;
-}
+};
 export {
   api,
   renderless

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
 };