@element-plus/nightly 0.0.20240113 → 0.0.20240115

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20240113 */
+/*! Element Plus v0.0.20240115 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11565,7 +11565,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "0.0.20240113";
+  const version$1 = "0.0.20240115";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -13867,7 +13867,7 @@
 
   const _hoisted_1$14 = ["role"];
   const _hoisted_2$I = ["id", "minlength", "maxlength", "type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus"];
-  const _hoisted_3$i = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus"];
+  const _hoisted_3$i = ["id", "minlength", "maxlength", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus"];
   const __default__$1C = vue.defineComponent({
     name: "ElInput",
     inheritAttrs: false
@@ -14265,6 +14265,8 @@
               ref: textarea,
               class: vue.unref(nsTextarea).e("inner")
             }, vue.unref(attrs), {
+              minlength: _ctx.minlength,
+              maxlength: _ctx.maxlength,
               tabindex: _ctx.tabindex,
               disabled: vue.unref(inputDisabled),
               readonly: _ctx.readonly,
@@ -24652,17 +24654,23 @@
     },
     name: {
       type: definePropType([String, Number]),
-      default: () => generateId()
+      default: void 0
     },
     disabled: Boolean
   });
 
   const useCollapseItem = (props) => {
     const collapse = vue.inject(collapseContextKey);
+    const { namespace } = useNamespace("collapse");
     const focusing = vue.ref(false);
     const isClick = vue.ref(false);
-    const id = vue.ref(generateId());
-    const isActive = vue.computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(props.name));
+    const idInjection = useIdInjection();
+    const id = vue.computed(() => idInjection.current++);
+    const name = vue.computed(() => {
+      var _a;
+      return (_a = props.name) != null ? _a : `${namespace.value}-id-${idInjection.prefix}-${vue.unref(id)}`;
+    });
+    const isActive = vue.computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(vue.unref(name)));
     const handleFocus = () => {
       setTimeout(() => {
         if (!isClick.value) {
@@ -24675,12 +24683,12 @@
     const handleHeaderClick = () => {
       if (props.disabled)
         return;
-      collapse == null ? void 0 : collapse.handleItemClick(props.name);
+      collapse == null ? void 0 : collapse.handleItemClick(vue.unref(name));
       focusing.value = false;
       isClick.value = true;
     };
     const handleEnterClick = () => {
-      collapse == null ? void 0 : collapse.handleItemClick(props.name);
+      collapse == null ? void 0 : collapse.handleItemClick(vue.unref(name));
     };
     return {
       focusing,
@@ -31427,8 +31435,7 @@
       default: 7
     },
     crossorigin: {
-      type: definePropType(String),
-      default: "anonymous"
+      type: definePropType(String)
     }
   });
   const imageViewerEmits = {
@@ -31465,7 +31472,6 @@
       const imgRefs = vue.ref([]);
       const scopeEventListener = vue.effectScope();
       const loading = vue.ref(true);
-      const crossorigin = vue.ref(props.crossorigin);
       const activeIndex = vue.ref(props.initialIndex);
       const mode = vue.shallowRef(modes.CONTAIN);
       const transform = vue.ref({
@@ -31804,7 +31810,7 @@
                       src: url,
                       style: vue.normalizeStyle(vue.unref(imgStyle)),
                       class: vue.normalizeClass(vue.unref(ns).e("img")),
-                      crossorigin: crossorigin.value,
+                      crossorigin: _ctx.crossorigin,
                       onLoad: handleImgLoad,
                       onError: handleImgError,
                       onMousedown: handleMouseDown
@@ -31907,7 +31913,6 @@
       const rawAttrs = vue.useAttrs();
       const attrs = useAttrs();
       const imageSrc = vue.ref();
-      const crossorigin = vue.ref(props.crossorigin);
       const hasLoadError = vue.ref(false);
       const isLoading = vue.ref(true);
       const showViewer = vue.ref(false);
@@ -32059,7 +32064,7 @@
               loading: _ctx.loading,
               style: vue.unref(imageStyle),
               class: vue.unref(imageKls),
-              crossorigin: crossorigin.value,
+              crossorigin: _ctx.crossorigin,
               onClick: clickHandler,
               onLoad: handleLoad,
               onError: handleError
@@ -34011,6 +34016,7 @@
       selected: props.multiple ? [] : {},
       selectionWidth: 0,
       calculatorWidth: 0,
+      collapseItemWidth: 0,
       selectedLabel: "",
       hoveringIndex: -1,
       previousQuery: null,
@@ -34035,6 +34041,7 @@
     const suffixRef = vue.ref(null);
     const menuRef = vue.ref(null);
     const tagMenuRef = vue.ref(null);
+    const collapseItemRef = vue.ref(null);
     const scrollbarRef = vue.ref(null);
     const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {
       afterFocus() {
@@ -34279,6 +34286,9 @@
     const resetCalculatorWidth = () => {
       states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width;
     };
+    const resetCollapseItemWidth = () => {
+      states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
+    };
     const updateTooltip = () => {
       var _a, _b;
       (_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
@@ -34520,7 +34530,18 @@
         vue.nextTick(() => scrollToOption(hoverOption.value));
       }
     };
+    const getGapWidth = () => {
+      if (!selectionRef.value)
+        return 0;
+      const style = window.getComputedStyle(selectionRef.value);
+      return Number.parseFloat(style.gap || "6px");
+    };
     const tagStyle = vue.computed(() => {
+      const gapWidth = getGapWidth();
+      const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth : states.selectionWidth;
+      return { maxWidth: `${maxWidth}px` };
+    });
+    const collapseTagStyle = vue.computed(() => {
       return { maxWidth: `${states.selectionWidth}px` };
     });
     const inputStyle = vue.computed(() => ({
@@ -34535,7 +34556,9 @@
     useResizeObserver(selectionRef, resetSelectionWidth);
     useResizeObserver(calculatorRef, resetCalculatorWidth);
     useResizeObserver(menuRef, updateTooltip);
+    useResizeObserver(wrapperRef, updateTooltip);
     useResizeObserver(tagMenuRef, updateTagTooltip);
+    useResizeObserver(collapseItemRef, resetCollapseItemWidth);
     vue.onMounted(() => {
       setSelected();
     });
@@ -34596,6 +34619,7 @@
       showTagList,
       collapseTagList,
       tagStyle,
+      collapseTagStyle,
       inputStyle,
       popperRef,
       inputRef,
@@ -34609,7 +34633,8 @@
       selectionRef,
       scrollbarRef,
       menuRef,
-      tagMenuRef
+      tagMenuRef,
+      collapseItemRef
     };
   };
 
@@ -34884,6 +34909,7 @@
                   }, {
                     default: vue.withCtx(() => [
                       vue.createElementVNode("div", {
+                        ref: "collapseItemRef",
                         class: vue.normalizeClass(_ctx.nsSelect.e("selected-item"))
                       }, [
                         vue.createVNode(_component_el_tag, {
@@ -34891,7 +34917,7 @@
                           size: _ctx.collapseTagSize,
                           type: _ctx.tagType,
                           "disable-transitions": "",
-                          style: vue.normalizeStyle(_ctx.tagStyle)
+                          style: vue.normalizeStyle(_ctx.collapseTagStyle)
                         }, {
                           default: vue.withCtx(() => [
                             vue.createElementVNode("span", {
@@ -39209,6 +39235,7 @@
       inputHovering: false,
       selectionWidth: 0,
       calculatorWidth: 0,
+      collapseItemWidth: 0,
       previousQuery: null,
       previousValue: void 0,
       selectedLabel: "",
@@ -39227,6 +39254,7 @@
     const suffixRef = vue.ref(null);
     const menuRef = vue.ref(null);
     const tagMenuRef = vue.ref(null);
+    const collapseItemRef = vue.ref(null);
     const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {
       afterFocus() {
         if (props.automaticDropdown && !expanded.value) {
@@ -39325,7 +39353,18 @@
       var _a;
       popperSize.value = ((_a = selectRef.value) == null ? void 0 : _a.offsetWidth) || 200;
     };
+    const getGapWidth = () => {
+      if (!selectionRef.value)
+        return 0;
+      const style = window.getComputedStyle(selectionRef.value);
+      return Number.parseFloat(style.gap || "6px");
+    };
     const tagStyle = vue.computed(() => {
+      const gapWidth = getGapWidth();
+      const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth : states.selectionWidth;
+      return { maxWidth: `${maxWidth}px` };
+    });
+    const collapseTagStyle = vue.computed(() => {
       return { maxWidth: `${states.selectionWidth}px` };
     });
     const inputStyle = vue.computed(() => ({
@@ -39465,6 +39504,9 @@
     const resetCalculatorWidth = () => {
       states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width;
     };
+    const resetCollapseItemWidth = () => {
+      states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
+    };
     const updateTooltip = () => {
       var _a, _b;
       (_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
@@ -39749,7 +39791,9 @@
     useResizeObserver(selectionRef, resetSelectionWidth);
     useResizeObserver(calculatorRef, resetCalculatorWidth);
     useResizeObserver(menuRef, updateTooltip);
+    useResizeObserver(wrapperRef, updateTooltip);
     useResizeObserver(tagMenuRef, updateTagTooltip);
+    useResizeObserver(collapseItemRef, resetCollapseItemWidth);
     return {
       inputId,
       collapseTagSize,
@@ -39763,6 +39807,7 @@
       iconComponent,
       iconReverse,
       tagStyle,
+      collapseTagStyle,
       inputStyle,
       popperSize,
       dropdownMenuVisible,
@@ -39786,6 +39831,7 @@
       selectionRef,
       prefixRef,
       suffixRef,
+      collapseItemRef,
       popperRef,
       validateState,
       validateIcon,
@@ -39968,13 +40014,14 @@
                 }, {
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", {
+                      ref: "collapseItemRef",
                       class: vue.normalizeClass(_ctx.nsSelect.e("selected-item"))
                     }, [
                       vue.createVNode(_component_el_tag, {
                         closable: false,
                         size: _ctx.collapseTagSize,
                         type: _ctx.tagType,
-                        style: vue.normalizeStyle(_ctx.tagStyle),
+                        style: vue.normalizeStyle(_ctx.collapseTagStyle),
                         "disable-transitions": ""
                       }, {
                         default: vue.withCtx(() => [
@@ -42229,54 +42276,6 @@
 
   const ElSwitch = withInstall(Switch);
 
-  var matchHtmlRegExp = /["'&<>]/;
-  var escapeHtml_1 = escapeHtml;
-  function escapeHtml(string) {
-    var str = "" + string;
-    var match = matchHtmlRegExp.exec(str);
-    if (!match) {
-      return str;
-    }
-    var escape;
-    var html = "";
-    var index = 0;
-    var lastIndex = 0;
-    for (index = match.index; index < str.length; index++) {
-      switch (str.charCodeAt(index)) {
-        case 34:
-          escape = "&quot;";
-          break;
-        case 38:
-          escape = "&amp;";
-          break;
-        case 39:
-          escape = "&#39;";
-          break;
-        case 60:
-          escape = "&lt;";
-          break;
-        case 62:
-          escape = "&gt;";
-          break;
-        default:
-          continue;
-      }
-      if (lastIndex !== index) {
-        html += str.substring(lastIndex, index);
-      }
-      lastIndex = index + 1;
-      html += escape;
-    }
-    return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
-  }
-  /*!
-   * escape-html
-   * Copyright(c) 2012-2013 TJ Holowaychuk
-   * Copyright(c) 2015 Andreas Lubbe
-   * Copyright(c) 2015 Tiancheng "Timothy" Gu
-   * MIT Licensed
-   */
-
   const getCell = function(event) {
     var _a;
     return (_a = event.target) == null ? void 0 : _a.closest("td");
@@ -42504,112 +42503,45 @@
       }
     });
   }
-  let removePopper;
-  function createTablePopper(parentNode, trigger, popperContent, nextZIndex, tooltipOptions) {
-    tooltipOptions = merge({
-      enterable: true,
-      showArrow: true
-    }, tooltipOptions);
-    const ns = parentNode == null ? void 0 : parentNode.dataset.prefix;
-    const scrollContainer = parentNode == null ? void 0 : parentNode.querySelector(`.${ns}-scrollbar__wrap`);
-    function renderContent() {
-      const isLight = tooltipOptions.effect === "light";
-      const content2 = document.createElement("div");
-      content2.className = [
-        `${ns}-popper`,
-        isLight ? "is-light" : "is-dark",
-        tooltipOptions.popperClass || ""
-      ].join(" ");
-      popperContent = escapeHtml_1(popperContent);
-      content2.innerHTML = popperContent;
-      content2.style.zIndex = String(nextZIndex());
-      parentNode == null ? void 0 : parentNode.appendChild(content2);
-      return content2;
-    }
-    function renderArrow() {
-      const arrow = document.createElement("div");
-      arrow.className = `${ns}-popper__arrow`;
-      return arrow;
-    }
-    function togglePopperVisible(display) {
-      return {
-        name: "updateState",
-        enabled: true,
-        phase: "beforeWrite",
-        fn: ({ state }) => {
-          state.styles.popper.display = display;
-        },
-        requires: ["computeStyles"]
-      };
-    }
-    function showPopper() {
-      if (tooltipOptions.showAfter) {
-        popperInstance == null ? void 0 : popperInstance.setOptions({
-          modifiers: [togglePopperVisible("block")]
-        });
-      }
-      popperInstance == null ? void 0 : popperInstance.update();
+  let removePopper = null;
+  function createTablePopper(props, popperContent, trigger, table) {
+    if ((removePopper == null ? void 0 : removePopper.trigger) === trigger) {
+      return;
     }
-    const triggerChanged = (removePopper == null ? void 0 : removePopper.trigger) !== trigger;
     removePopper == null ? void 0 : removePopper();
-    removePopper = () => {
-      try {
-        popperInstance && popperInstance.destroy();
-        content && (parentNode == null ? void 0 : parentNode.removeChild(content));
-        trigger.removeEventListener("mouseenter", onOpen);
-        trigger.removeEventListener("mouseleave", onClose);
-        scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", removePopper);
-        removePopper = void 0;
-      } catch (e) {
+    const parentNode = table == null ? void 0 : table.refs.tableWrapper;
+    const ns = parentNode == null ? void 0 : parentNode.dataset.prefix;
+    const popperOptions = {
+      strategy: "fixed",
+      ...props.popperOptions
+    };
+    const vm = vue.createVNode(ElTooltip, {
+      content: popperContent,
+      virtualTriggering: true,
+      virtualRef: trigger,
+      appendTo: parentNode,
+      placement: "top",
+      transition: "none",
+      offset: 0,
+      hideAfter: 0,
+      ...props,
+      popperOptions,
+      onHide: () => {
+        removePopper == null ? void 0 : removePopper();
       }
+    });
+    vm.appContext = table.appContext;
+    const container = document.createElement("div");
+    vue.render(vm, container);
+    vm.component.exposed.onOpen();
+    const scrollContainer = parentNode == null ? void 0 : parentNode.querySelector(`.${ns}-scrollbar__wrap`);
+    removePopper = () => {
+      vue.render(null, container);
+      scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", removePopper);
+      removePopper = null;
     };
     removePopper.trigger = trigger;
-    let popperInstance = null;
-    const { onOpen, onClose } = useDelayedToggle({
-      showAfter: tooltipOptions.showAfter,
-      hideAfter: tooltipOptions.hideAfter,
-      open: showPopper,
-      close: removePopper
-    });
-    const content = renderContent();
-    if (tooltipOptions.enterable) {
-      content.onmouseenter = onOpen;
-      content.onmouseleave = onClose;
-    }
-    const modifiers = [];
-    if (tooltipOptions.offset) {
-      modifiers.push({
-        name: "offset",
-        options: {
-          offset: [0, tooltipOptions.offset]
-        }
-      });
-    }
-    if (tooltipOptions.showArrow) {
-      const arrow = content.appendChild(renderArrow());
-      modifiers.push({
-        name: "arrow",
-        options: {
-          element: arrow,
-          padding: 10
-        }
-      });
-    }
-    if (tooltipOptions.showAfter && triggerChanged) {
-      modifiers.push(togglePopperVisible("none"));
-    }
-    const popperOptions = tooltipOptions.popperOptions || {};
-    popperInstance = yn(trigger, content, {
-      placement: tooltipOptions.placement || "top",
-      strategy: "fixed",
-      ...popperOptions,
-      modifiers: popperOptions.modifiers ? modifiers.concat(popperOptions.modifiers) : modifiers
-    });
-    trigger.addEventListener("mouseenter", onOpen);
-    trigger.addEventListener("mouseleave", onClose);
     scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", removePopper);
-    onOpen();
-    return popperInstance;
   }
   function getCurrentColumns(column) {
     if (column.children) {
@@ -44695,7 +44627,6 @@
     const parent = vue.inject(TABLE_INJECTION_KEY);
     const tooltipContent = vue.ref("");
     const tooltipTrigger = vue.ref(vue.h("div"));
-    const { nextZIndex } = useZIndex();
     const handleEvent = (event, row, name) => {
       var _a;
       const table = parent;
@@ -44777,7 +44708,7 @@
       const horizontalPadding = left + right;
       const verticalPadding = top + bottom;
       if (rangeWidth + horizontalPadding > cellChild.offsetWidth || rangeHeight + verticalPadding > cellChild.offsetHeight || cellChild.scrollWidth > cellChild.offsetWidth) {
-        createTablePopper(parent == null ? void 0 : parent.refs.tableWrapper, cell, cell.innerText || cell.textContent, nextZIndex, tooltipOptions);
+        createTablePopper(tooltipOptions, cell.innerText || cell.textContent, cell, table);
       }
     };
     const handleCellMouseLeave = (event) => {