@element-plus/nightly 0.0.20221031 → 0.0.20221101

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20221031 */
+/*! Element Plus v0.0.20221101 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11076,7 +11076,7 @@
     };
   };
 
-  const version$1 = "0.0.20221031";
+  const version$1 = "0.0.20221101";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -11160,7 +11160,7 @@
       const affixStyle = vue.computed(() => {
         if (!fixed.value)
           return {};
-        const offset = props.offset ? `${props.offset}px` : 0;
+        const offset = props.offset ? addUnit(props.offset) : 0;
         return {
           height: `${rootHeight.value}px`,
           width: `${rootWidth.value}px`,
@@ -21890,6 +21890,46 @@
     [CHANGE_EVENT]: emitChangeFn
   };
 
+  const useCollapse = (props, emit) => {
+    const activeNames = vue.ref(castArray$1(props.modelValue));
+    const setActiveNames = (_activeNames) => {
+      activeNames.value = _activeNames;
+      const value = props.accordion ? activeNames.value[0] : activeNames.value;
+      emit(UPDATE_MODEL_EVENT, value);
+      emit(CHANGE_EVENT, value);
+    };
+    const handleItemClick = (name) => {
+      if (props.accordion) {
+        setActiveNames([activeNames.value[0] === name ? "" : name]);
+      } else {
+        const _activeNames = [...activeNames.value];
+        const index = _activeNames.indexOf(name);
+        if (index > -1) {
+          _activeNames.splice(index, 1);
+        } else {
+          _activeNames.push(name);
+        }
+        setActiveNames(_activeNames);
+      }
+    };
+    vue.watch(() => props.modelValue, () => activeNames.value = castArray$1(props.modelValue), { deep: true });
+    vue.provide(collapseContextKey, {
+      activeNames,
+      handleItemClick
+    });
+    return {
+      activeNames,
+      setActiveNames
+    };
+  };
+  const useCollapseDOM = () => {
+    const ns = useNamespace("collapse");
+    const rootKls = vue.computed(() => ns.b());
+    return {
+      rootKls
+    };
+  };
+
   const __default__$Z = vue.defineComponent({
     name: "ElCollapse"
   });
@@ -21899,42 +21939,15 @@
     emits: collapseEmits,
     setup(__props, { expose, emit }) {
       const props = __props;
-      const ns = useNamespace("collapse");
-      const activeNames = vue.ref(castArray$1(props.modelValue));
-      const setActiveNames = (_activeNames) => {
-        activeNames.value = _activeNames;
-        const value = props.accordion ? activeNames.value[0] : activeNames.value;
-        emit(UPDATE_MODEL_EVENT, value);
-        emit(CHANGE_EVENT, value);
-      };
-      const handleItemClick = (name) => {
-        if (props.accordion) {
-          setActiveNames([
-            (activeNames.value[0] || activeNames.value[0] === 0) && activeNames.value[0] === name ? "" : name
-          ]);
-        } else {
-          const _activeNames = [...activeNames.value];
-          const index = _activeNames.indexOf(name);
-          if (index > -1) {
-            _activeNames.splice(index, 1);
-          } else {
-            _activeNames.push(name);
-          }
-          setActiveNames(_activeNames);
-        }
-      };
-      vue.watch(() => props.modelValue, () => activeNames.value = castArray$1(props.modelValue), { deep: true });
-      vue.provide(collapseContextKey, {
-        activeNames,
-        handleItemClick
-      });
+      const { activeNames, setActiveNames } = useCollapse(props, emit);
+      const { rootKls } = useCollapseDOM();
       expose({
         activeNames,
         setActiveNames
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(vue.unref(ns).b()),
+          class: vue.normalizeClass(vue.unref(rootKls)),
           role: "tablist",
           "aria-multiselectable": "true"
         }, [
@@ -22034,8 +22047,73 @@
     disabled: Boolean
   });
 
+  const useCollapseItem = (props) => {
+    const collapse = vue.inject(collapseContextKey);
+    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 handleFocus = () => {
+      setTimeout(() => {
+        if (!isClick.value) {
+          focusing.value = true;
+        } else {
+          isClick.value = false;
+        }
+      }, 50);
+    };
+    const handleHeaderClick = () => {
+      if (props.disabled)
+        return;
+      collapse == null ? void 0 : collapse.handleItemClick(props.name);
+      focusing.value = false;
+      isClick.value = true;
+    };
+    const handleEnterClick = () => {
+      collapse == null ? void 0 : collapse.handleItemClick(props.name);
+    };
+    return {
+      focusing,
+      id,
+      isActive,
+      handleFocus,
+      handleHeaderClick,
+      handleEnterClick
+    };
+  };
+  const useCollapseItemDOM = (props, { focusing, isActive, id }) => {
+    const ns = useNamespace("collapse");
+    const rootKls = vue.computed(() => [
+      ns.b("item"),
+      ns.is("active", vue.unref(isActive)),
+      ns.is("disabled", props.disabled)
+    ]);
+    const headKls = vue.computed(() => [
+      ns.be("item", "header"),
+      ns.is("active", vue.unref(isActive)),
+      { focusing: vue.unref(focusing) && !props.disabled }
+    ]);
+    const arrowKls = vue.computed(() => [
+      ns.be("item", "arrow"),
+      ns.is("active", vue.unref(isActive))
+    ]);
+    const itemWrapperKls = vue.computed(() => ns.be("item", "wrap"));
+    const itemContentKls = vue.computed(() => ns.be("item", "content"));
+    const scopedContentId = vue.computed(() => ns.b(`content-${vue.unref(id)}`));
+    const scopedHeadId = vue.computed(() => ns.b(`head-${vue.unref(id)}`));
+    return {
+      arrowKls,
+      headKls,
+      rootKls,
+      itemWrapperKls,
+      itemContentKls,
+      scopedContentId,
+      scopedHeadId
+    };
+  };
+
   const _hoisted_1$N = ["aria-expanded", "aria-controls", "aria-describedby"];
-  const _hoisted_2$v = ["id", "tabindex", "onKeypress"];
+  const _hoisted_2$v = ["id", "tabindex"];
   const _hoisted_3$g = ["id", "aria-hidden", "aria-labelledby"];
   const __default__$X = vue.defineComponent({
     name: "ElCollapseItem"
@@ -22045,67 +22123,51 @@
     props: collapseItemProps,
     setup(__props, { expose }) {
       const props = __props;
-      const collapse = vue.inject(collapseContextKey);
-      const ns = 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 handleFocus = () => {
-        setTimeout(() => {
-          if (!isClick.value) {
-            focusing.value = true;
-          } else {
-            isClick.value = false;
-          }
-        }, 50);
-      };
-      const handleHeaderClick = () => {
-        if (props.disabled)
-          return;
-        collapse == null ? void 0 : collapse.handleItemClick(props.name);
-        focusing.value = false;
-        isClick.value = true;
-      };
-      const handleEnterClick = () => {
-        collapse == null ? void 0 : collapse.handleItemClick(props.name);
-      };
+      const {
+        focusing,
+        id,
+        isActive,
+        handleFocus,
+        handleHeaderClick,
+        handleEnterClick
+      } = useCollapseItem(props);
+      const {
+        arrowKls,
+        headKls,
+        rootKls,
+        itemWrapperKls,
+        itemContentKls,
+        scopedContentId,
+        scopedHeadId
+      } = useCollapseItemDOM(props, { focusing, isActive, id });
       expose({
         isActive
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass([
-            vue.unref(ns).b("item"),
-            vue.unref(ns).is("active", vue.unref(isActive)),
-            vue.unref(ns).is("disabled", _ctx.disabled)
-          ])
+          class: vue.normalizeClass(vue.unref(rootKls))
         }, [
           vue.createElementVNode("div", {
             role: "tab",
             "aria-expanded": vue.unref(isActive),
-            "aria-controls": vue.unref(ns).b(`content-${id.value}`),
-            "aria-describedby": vue.unref(ns).b(`content-${id.value}`)
+            "aria-controls": vue.unref(scopedContentId),
+            "aria-describedby": vue.unref(scopedContentId)
           }, [
             vue.createElementVNode("div", {
-              id: vue.unref(ns).b(`head-${id.value}`),
-              class: vue.normalizeClass([
-                vue.unref(ns).be("item", "header"),
-                vue.unref(ns).is("active", vue.unref(isActive)),
-                { focusing: focusing.value && !_ctx.disabled }
-              ]),
+              id: vue.unref(scopedHeadId),
+              class: vue.normalizeClass(vue.unref(headKls)),
               role: "button",
               tabindex: _ctx.disabled ? -1 : 0,
-              onClick: handleHeaderClick,
-              onKeypress: vue.withKeys(vue.withModifiers(handleEnterClick, ["stop", "prevent"]), ["space", "enter"]),
-              onFocus: handleFocus,
-              onBlur: _cache[0] || (_cache[0] = ($event) => focusing.value = false)
+              onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleHeaderClick) && vue.unref(handleHeaderClick)(...args)),
+              onKeypress: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers((...args) => vue.unref(handleEnterClick) && vue.unref(handleEnterClick)(...args), ["stop", "prevent"]), ["space", "enter"])),
+              onFocus: _cache[2] || (_cache[2] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
+              onBlur: _cache[3] || (_cache[3] = ($event) => focusing.value = false)
             }, [
               vue.renderSlot(_ctx.$slots, "title", {}, () => [
                 vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
               ]),
               vue.createVNode(vue.unref(ElIcon), {
-                class: vue.normalizeClass([vue.unref(ns).be("item", "arrow"), vue.unref(ns).is("active", vue.unref(isActive))])
+                class: vue.normalizeClass(vue.unref(arrowKls))
               }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(vue.unref(arrow_right_default))
@@ -22117,14 +22179,14 @@
           vue.createVNode(vue.unref(_CollapseTransition), null, {
             default: vue.withCtx(() => [
               vue.withDirectives(vue.createElementVNode("div", {
-                id: vue.unref(ns).b(`content-${id.value}`),
-                class: vue.normalizeClass(vue.unref(ns).be("item", "wrap")),
+                id: vue.unref(scopedContentId),
+                class: vue.normalizeClass(vue.unref(itemWrapperKls)),
                 role: "tabpanel",
                 "aria-hidden": !vue.unref(isActive),
-                "aria-labelledby": vue.unref(ns).b(`head-${id.value}`)
+                "aria-labelledby": vue.unref(scopedHeadId)
               }, [
                 vue.createElementVNode("div", {
-                  class: vue.normalizeClass(vue.unref(ns).be("item", "content"))
+                  class: vue.normalizeClass(vue.unref(itemContentKls))
                 }, [
                   vue.renderSlot(_ctx.$slots, "default")
                 ], 2)
@@ -51997,7 +52059,6 @@
   });
 
   const _hoisted_1$6 = ["aria-expanded", "aria-disabled", "aria-checked", "data-key", "onClick"];
-  const DEFAULT_ICON = "caret-right";
   const __default__$7 = vue.defineComponent({
     name: "ElTreeNode"
   });
@@ -52015,7 +52076,7 @@
       });
       const icon = vue.computed(() => {
         var _a;
-        return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : DEFAULT_ICON;
+        return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : caret_right_default;
       });
       const handleClick = (e) => {
         emit("click", props.node, e);