element-pe 2.2.22 → 2.2.24

package/lib/components/upload/src/upload-list2.js

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var index$2 = require('../../icon/index.js');
+var index$3 = require('../../icon/index.js');
 var iconsVue = require('@element-plus/icons-vue');
 require('../../../hooks/index.js');
-var index$3 = require('../../progress/index.js');
+var index$4 = require('../../progress/index.js');
 var uploadList = require('./upload-list.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 var index = require('../../../hooks/use-locale/index.js');
 var index$1 = require('../../../hooks/use-namespace/index.js');
+var index$2 = require('../../../hooks/use-common-props/index.js');
 
 const _hoisted_1 = ["onKeydown"];
 const _hoisted_2 = ["src"];
@@ -29,6 +30,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const nsUpload = index$1.useNamespace("upload");
     const nsIcon = index$1.useNamespace("icon");
     const nsList = index$1.useNamespace("list");
+    const disabled = index$2.useDisabled();
     const focusing = vue.ref(false);
     const handleRemove = (file) => {
       emit("remove", file);
@@ -39,7 +41,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass([
           vue.unref(nsUpload).b("list"),
           vue.unref(nsUpload).bm("list", _ctx.listType),
-          vue.unref(nsUpload).is("disabled", _ctx.disabled)
+          vue.unref(nsUpload).is("disabled", vue.unref(disabled))
         ]),
         name: vue.unref(nsList).b()
       }, {
@@ -53,7 +55,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 { focusing: focusing.value }
               ]),
               tabindex: "0",
-              onKeydown: vue.withKeys(($event) => !_ctx.disabled && handleRemove(file), ["delete"]),
+              onKeydown: vue.withKeys(($event) => !vue.unref(disabled) && handleRemove(file), ["delete"]),
               onFocus: _cache[0] || (_cache[0] = ($event) => focusing.value = true),
               onBlur: _cache[1] || (_cache[1] = ($event) => focusing.value = false),
               onClick: _cache[2] || (_cache[2] = ($event) => focusing.value = false)
@@ -73,7 +75,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-name")),
                     onClick: vue.withModifiers(($event) => _ctx.handlePreview(file), ["prevent"])
                   }, [
-                    vue.createVNode(vue.unref(index$2.ElIcon), {
+                    vue.createVNode(vue.unref(index$3.ElIcon), {
                       class: vue.normalizeClass(vue.unref(nsIcon).m("document"))
                     }, {
                       default: vue.withCtx(() => [
@@ -85,7 +87,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-file-name"))
                     }, vue.toDisplayString(file.name), 3)
                   ], 10, _hoisted_3),
-                  file.status === "uploading" ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ElProgress), {
+                  file.status === "uploading" ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.ElProgress), {
                     key: 0,
                     type: _ctx.listType === "picture-card" ? "circle" : "line",
                     "stroke-width": _ctx.listType === "picture-card" ? 6 : 2,
@@ -96,7 +98,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createElementVNode("label", {
                   class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-status-label"))
                 }, [
-                  _ctx.listType === "text" ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ElIcon), {
+                  _ctx.listType === "text" ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ElIcon), {
                     key: 0,
                     class: vue.normalizeClass([vue.unref(nsIcon).m("upload-success"), vue.unref(nsIcon).m("circle-check")])
                   }, {
@@ -104,7 +106,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       vue.createVNode(vue.unref(iconsVue.CircleCheck))
                     ]),
                     _: 1
-                  }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ElIcon), {
+                  }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ElIcon), {
                     key: 1,
                     class: vue.normalizeClass([vue.unref(nsIcon).m("upload-success"), vue.unref(nsIcon).m("check")])
                   }, {
@@ -114,7 +116,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     _: 1
                   }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
                 ], 2),
-                !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ElIcon), {
+                !vue.unref(disabled) ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ElIcon), {
                   key: 2,
                   class: vue.normalizeClass(vue.unref(nsIcon).m("close")),
                   onClick: ($event) => handleRemove(file)
@@ -127,7 +129,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"),
                 vue.createCommentVNode(" This is a bug which needs to be fixed "),
                 vue.createCommentVNode(" TODO: Fix the incorrect navigation interaction "),
-                !_ctx.disabled ? (vue.openBlock(), vue.createElementBlock("i", {
+                !vue.unref(disabled) ? (vue.openBlock(), vue.createElementBlock("i", {
                   key: 3,
                   class: vue.normalizeClass(vue.unref(nsIcon).m("close-tip"))
                 }, vue.toDisplayString(vue.unref(t)("el.upload.deleteTip")), 3)) : vue.createCommentVNode("v-if", true),
@@ -139,7 +141,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-preview")),
                     onClick: ($event) => _ctx.handlePreview(file)
                   }, [
-                    vue.createVNode(vue.unref(index$2.ElIcon), {
+                    vue.createVNode(vue.unref(index$3.ElIcon), {
                       class: vue.normalizeClass(vue.unref(nsIcon).m("zoom-in"))
                     }, {
                       default: vue.withCtx(() => [
@@ -148,12 +150,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       _: 1
                     }, 8, ["class"])
                   ], 10, _hoisted_4),
-                  !_ctx.disabled ? (vue.openBlock(), vue.createElementBlock("span", {
+                  !vue.unref(disabled) ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-delete")),
                     onClick: ($event) => handleRemove(file)
                   }, [
-                    vue.createVNode(vue.unref(index$2.ElIcon), {
+                    vue.createVNode(vue.unref(index$3.ElIcon), {
                       class: vue.normalizeClass(vue.unref(nsIcon).m("delete"))
                     }, {
                       default: vue.withCtx(() => [

package/lib/components/upload/src/upload-list2.js.map

@@ -1 +1 @@
-{"version":3,"file":"upload-list2.js","sources":["../../../../../../packages/components/upload/src/upload-list.vue"],"sourcesContent":["<template>\n  <transition-group\n    tag=\"ul\"\n    :class=\"[\n      nsUpload.b('list'),\n      nsUpload.bm('list', listType),\n      nsUpload.is('disabled', disabled),\n    ]\"\n    :name=\"nsList.b()\"\n  >\n    <li\n      v-for=\"file in files\"\n      :key=\"file.uid || file.name\"\n      :class=\"[\n        nsUpload.be('list', 'item'),\n        nsUpload.is(file.status),\n        { focusing },\n      ]\"\n      tabindex=\"0\"\n      @keydown.delete=\"!disabled && handleRemove(file)\"\n      @focus=\"focusing = true\"\n      @blur=\"focusing = false\"\n      @click=\"focusing = false\"\n    >\n      <slot :file=\"file\">\n        <img\n          v-if=\"\n            listType === 'picture' ||\n            (file.status !== 'uploading' && listType === 'picture-card')\n          \"\n          :class=\"nsUpload.be('list', 'item-thumbnail')\"\n          :src=\"file.url\"\n          alt=\"\"\n        />\n        <div\n          v-if=\"file.status === 'uploading' || listType !== 'picture-card'\"\n          :class=\"nsUpload.be('list', 'item-info')\"\n        >\n          <a\n            :class=\"nsUpload.be('list', 'item-name')\"\n            @click.prevent=\"handlePreview(file)\"\n          >\n            <el-icon :class=\"nsIcon.m('document')\"><Document /></el-icon>\n            <span :class=\"nsUpload.be('list', 'item-file-name')\">\n              {{ file.name }}\n            </span>\n          </a>\n          <el-progress\n            v-if=\"file.status === 'uploading'\"\n            :type=\"listType === 'picture-card' ? 'circle' : 'line'\"\n            :stroke-width=\"listType === 'picture-card' ? 6 : 2\"\n            :percentage=\"Number(file.percentage)\"\n            :style=\"listType === 'picture-card' ? '' : 'margin-top: 0.5rem'\"\n          />\n        </div>\n\n        <label :class=\"nsUpload.be('list', 'item-status-label')\">\n          <el-icon\n            v-if=\"listType === 'text'\"\n            :class=\"[nsIcon.m('upload-success'), nsIcon.m('circle-check')]\"\n          >\n            <circle-check />\n          </el-icon>\n          <el-icon\n            v-else-if=\"['picture-card', 'picture'].includes(listType)\"\n            :class=\"[nsIcon.m('upload-success'), nsIcon.m('check')]\"\n          >\n            <Check />\n          </el-icon>\n        </label>\n        <el-icon\n          v-if=\"!disabled\"\n          :class=\"nsIcon.m('close')\"\n          @click=\"handleRemove(file)\"\n        >\n          <Close />\n        </el-icon>\n        <!-- Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn-->\n        <!-- This is a bug which needs to be fixed -->\n        <!-- TODO: Fix the incorrect navigation interaction -->\n        <i v-if=\"!disabled\" :class=\"nsIcon.m('close-tip')\">{{\n          t('el.upload.deleteTip')\n        }}</i>\n        <span\n          v-if=\"listType === 'picture-card'\"\n          :class=\"nsUpload.be('list', 'item-actions')\"\n        >\n          <span\n            :class=\"nsUpload.be('list', 'item-preview')\"\n            @click=\"handlePreview(file)\"\n          >\n            <el-icon :class=\"nsIcon.m('zoom-in')\"><zoom-in /></el-icon>\n          </span>\n          <span\n            v-if=\"!disabled\"\n            :class=\"nsUpload.be('list', 'item-delete')\"\n            @click=\"handleRemove(file)\"\n          >\n            <el-icon :class=\"nsIcon.m('delete')\"><Delete /></el-icon>\n          </span>\n        </span>\n      </slot>\n    </li>\n    <slot name=\"append\" />\n  </transition-group>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  Check,\n  CircleCheck,\n  Close,\n  Delete,\n  Document,\n  ZoomIn,\n} from '@element-plus/icons-vue'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport ElProgress from '@element-plus/components/progress'\n\nimport { uploadListEmits, uploadListProps } from './upload-list'\nimport type { UploadFile } from './upload'\n\ndefineOptions({\n  name: 'ElUploadList',\n})\n\ndefineProps(uploadListProps)\nconst emit = defineEmits(uploadListEmits)\n\nconst { t } = useLocale()\nconst nsUpload = useNamespace('upload')\nconst nsIcon = useNamespace('icon')\nconst nsList = useNamespace('list')\n\nconst focusing = ref(false)\n\nconst handleRemove = (file: UploadFile) => {\n  emit('remove', file)\n}\n</script>\n"],"names":["useLocale","useNamespace","ref"],"mappings":";;;;;;;;;;;;;;;;;;;uCA2Hc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAKA,IAAM,MAAA,EAAE,MAAMA,eAAU,EAAA,CAAA;AACxB,IAAM,MAAA,QAAA,GAAWC,qBAAa,QAAQ,CAAA,CAAA;AACtC,IAAM,MAAA,MAAA,GAASA,qBAAa,MAAM,CAAA,CAAA;AAClC,IAAM,MAAA,MAAA,GAASA,qBAAa,MAAM,CAAA,CAAA;AAElC,IAAM,MAAA,QAAA,GAAWC,QAAI,KAAK,CAAA,CAAA;AAE1B,IAAM,MAAA,YAAA,GAAe,CAAC,IAAqB,KAAA;AACzC,MAAA,IAAA,CAAK,UAAU,IAAI,CAAA,CAAA;AAAA,KACrB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"upload-list2.js","sources":["../../../../../../packages/components/upload/src/upload-list.vue"],"sourcesContent":["<template>\n  <transition-group\n    tag=\"ul\"\n    :class=\"[\n      nsUpload.b('list'),\n      nsUpload.bm('list', listType),\n      nsUpload.is('disabled', disabled),\n    ]\"\n    :name=\"nsList.b()\"\n  >\n    <li\n      v-for=\"file in files\"\n      :key=\"file.uid || file.name\"\n      :class=\"[\n        nsUpload.be('list', 'item'),\n        nsUpload.is(file.status),\n        { focusing },\n      ]\"\n      tabindex=\"0\"\n      @keydown.delete=\"!disabled && handleRemove(file)\"\n      @focus=\"focusing = true\"\n      @blur=\"focusing = false\"\n      @click=\"focusing = false\"\n    >\n      <slot :file=\"file\">\n        <img\n          v-if=\"\n            listType === 'picture' ||\n            (file.status !== 'uploading' && listType === 'picture-card')\n          \"\n          :class=\"nsUpload.be('list', 'item-thumbnail')\"\n          :src=\"file.url\"\n          alt=\"\"\n        />\n        <div\n          v-if=\"file.status === 'uploading' || listType !== 'picture-card'\"\n          :class=\"nsUpload.be('list', 'item-info')\"\n        >\n          <a\n            :class=\"nsUpload.be('list', 'item-name')\"\n            @click.prevent=\"handlePreview(file)\"\n          >\n            <el-icon :class=\"nsIcon.m('document')\"><Document /></el-icon>\n            <span :class=\"nsUpload.be('list', 'item-file-name')\">\n              {{ file.name }}\n            </span>\n          </a>\n          <el-progress\n            v-if=\"file.status === 'uploading'\"\n            :type=\"listType === 'picture-card' ? 'circle' : 'line'\"\n            :stroke-width=\"listType === 'picture-card' ? 6 : 2\"\n            :percentage=\"Number(file.percentage)\"\n            :style=\"listType === 'picture-card' ? '' : 'margin-top: 0.5rem'\"\n          />\n        </div>\n\n        <label :class=\"nsUpload.be('list', 'item-status-label')\">\n          <el-icon\n            v-if=\"listType === 'text'\"\n            :class=\"[nsIcon.m('upload-success'), nsIcon.m('circle-check')]\"\n          >\n            <circle-check />\n          </el-icon>\n          <el-icon\n            v-else-if=\"['picture-card', 'picture'].includes(listType)\"\n            :class=\"[nsIcon.m('upload-success'), nsIcon.m('check')]\"\n          >\n            <Check />\n          </el-icon>\n        </label>\n        <el-icon\n          v-if=\"!disabled\"\n          :class=\"nsIcon.m('close')\"\n          @click=\"handleRemove(file)\"\n        >\n          <Close />\n        </el-icon>\n        <!-- Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn-->\n        <!-- This is a bug which needs to be fixed -->\n        <!-- TODO: Fix the incorrect navigation interaction -->\n        <i v-if=\"!disabled\" :class=\"nsIcon.m('close-tip')\">{{\n          t('el.upload.deleteTip')\n        }}</i>\n        <span\n          v-if=\"listType === 'picture-card'\"\n          :class=\"nsUpload.be('list', 'item-actions')\"\n        >\n          <span\n            :class=\"nsUpload.be('list', 'item-preview')\"\n            @click=\"handlePreview(file)\"\n          >\n            <el-icon :class=\"nsIcon.m('zoom-in')\"><zoom-in /></el-icon>\n          </span>\n          <span\n            v-if=\"!disabled\"\n            :class=\"nsUpload.be('list', 'item-delete')\"\n            @click=\"handleRemove(file)\"\n          >\n            <el-icon :class=\"nsIcon.m('delete')\"><Delete /></el-icon>\n          </span>\n        </span>\n      </slot>\n    </li>\n    <slot name=\"append\" />\n  </transition-group>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  Check,\n  CircleCheck,\n  Close,\n  Delete,\n  Document,\n  ZoomIn,\n} from '@element-plus/icons-vue'\nimport { useDisabled, useLocale, useNamespace } from '@element-plus/hooks'\nimport ElProgress from '@element-plus/components/progress'\n\nimport { uploadListEmits, uploadListProps } from './upload-list'\nimport type { UploadFile } from './upload'\n\ndefineOptions({\n  name: 'ElUploadList',\n})\n\ndefineProps(uploadListProps)\nconst emit = defineEmits(uploadListEmits)\n\nconst { t } = useLocale()\nconst nsUpload = useNamespace('upload')\nconst nsIcon = useNamespace('icon')\nconst nsList = useNamespace('list')\nconst disabled = useDisabled()\n\nconst focusing = ref(false)\n\nconst handleRemove = (file: UploadFile) => {\n  emit('remove', file)\n}\n</script>\n"],"names":["useLocale","useNamespace","useDisabled","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;uCA2Hc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAKA,IAAM,MAAA,EAAE,MAAMA,eAAU,EAAA,CAAA;AACxB,IAAM,MAAA,QAAA,GAAWC,qBAAa,QAAQ,CAAA,CAAA;AACtC,IAAM,MAAA,MAAA,GAASA,qBAAa,MAAM,CAAA,CAAA;AAClC,IAAM,MAAA,MAAA,GAASA,qBAAa,MAAM,CAAA,CAAA;AAClC,IAAA,MAAM,WAAWC,mBAAY,EAAA,CAAA;AAE7B,IAAM,MAAA,QAAA,GAAWC,QAAI,KAAK,CAAA,CAAA;AAE1B,IAAM,MAAA,YAAA,GAAe,CAAC,IAAqB,KAAA;AACzC,MAAA,IAAA,CAAK,UAAU,IAAI,CAAA,CAAA;AAAA,KACrB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/upload/src/upload.vue.d.ts

@@ -569,6 +569,7 @@ declare const _default: import("vue").DefineComponent<{
                 cssVarBlock: (object: Record<string, string>) => Record<string, string>;
                 cssVarBlockName: (name: string) => string;
             };
+            disabled: import("vue").ComputedRef<boolean>;
             requests: import("vue").ShallowRef<Record<string, XMLHttpRequest | Promise<unknown>>>;
             inputRef: import("vue").ShallowRef<HTMLInputElement | undefined>;
             uploadFiles: (files: File[]) => void;
@@ -582,11 +583,6 @@ declare const _default: import("vue").DefineComponent<{
                 readonly disabled: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
             }, {
                 COMPONENT_NAME: string;
-                props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-                    readonly disabled: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-                }>> & {
-                    onFile?: ((file: File[]) => any) | undefined;
-                }>>;
                 emit: (event: "file", file: File[]) => void;
                 uploaderContext: import("element-pe/es/tokens").UploadContext;
                 ns: {
@@ -608,6 +604,7 @@ declare const _default: import("vue").DefineComponent<{
                     cssVarBlockName: (name: string) => string;
                 };
                 dragover: import("vue").Ref<boolean>;
+                disabled: import("vue").ComputedRef<boolean>;
                 onDrop: (e: DragEvent) => void;
                 onDragover: () => void;
             }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -872,6 +869,7 @@ declare const _default: import("vue").DefineComponent<{
             cssVarBlock: (object: Record<string, string>) => Record<string, string>;
             cssVarBlockName: (name: string) => string;
         };
+        disabled: import("vue").ComputedRef<boolean>;
         requests: import("vue").ShallowRef<Record<string, XMLHttpRequest | Promise<unknown>>>;
         inputRef: import("vue").ShallowRef<HTMLInputElement | undefined>;
         uploadFiles: (files: File[]) => void;
@@ -885,11 +883,6 @@ declare const _default: import("vue").DefineComponent<{
             readonly disabled: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
         }, {
             COMPONENT_NAME: string;
-            props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-                readonly disabled: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-            }>> & {
-                onFile?: ((file: File[]) => any) | undefined;
-            }>>;
             emit: (event: "file", file: File[]) => void;
             uploaderContext: import("element-pe/es/tokens").UploadContext;
             ns: {
@@ -911,6 +904,7 @@ declare const _default: import("vue").DefineComponent<{
                 cssVarBlockName: (name: string) => string;
             };
             dragover: import("vue").Ref<boolean>;
+            disabled: import("vue").ComputedRef<boolean>;
             onDrop: (e: DragEvent) => void;
             onDragover: () => void;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -1024,6 +1018,7 @@ declare const _default: import("vue").DefineComponent<{
             cssVarBlock: (object: Record<string, string>) => Record<string, string>;
             cssVarBlockName: (name: string) => string;
         };
+        disabled: import("vue").ComputedRef<boolean>;
         focusing: import("vue").Ref<boolean>;
         handleRemove: (file: import("./upload").UploadFile) => void;
         ElIcon: import("../../../utils").SFCWithInstall<import("vue").DefineComponent<{
@@ -1506,6 +1501,7 @@ declare const _default: import("vue").DefineComponent<{
             cssVarBlock: (object: Record<string, string>) => Record<string, string>;
             cssVarBlockName: (name: string) => string;
         };
+        disabled: import("vue").ComputedRef<boolean>;
         requests: import("vue").ShallowRef<Record<string, XMLHttpRequest | Promise<unknown>>>;
         inputRef: import("vue").ShallowRef<HTMLInputElement | undefined>;
         uploadFiles: (files: File[]) => void;
@@ -1519,11 +1515,6 @@ declare const _default: import("vue").DefineComponent<{
             readonly disabled: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
         }, {
             COMPONENT_NAME: string;
-            props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-                readonly disabled: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-            }>> & {
-                onFile?: ((file: File[]) => any) | undefined;
-            }>>;
             emit: (event: "file", file: File[]) => void;
             uploaderContext: import("element-pe/es/tokens").UploadContext;
             ns: {
@@ -1545,6 +1536,7 @@ declare const _default: import("vue").DefineComponent<{
                 cssVarBlockName: (name: string) => string;
             };
             dragover: import("vue").Ref<boolean>;
+            disabled: import("vue").ComputedRef<boolean>;
             onDrop: (e: DragEvent) => void;
             onDragover: () => void;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/lib/components/upload/src/upload2.js

@@ -6,7 +6,7 @@ var vue = require('vue');
 require('../../../tokens/index.js');
 require('../../../hooks/index.js');
 var uploadList = require('./upload-list2.js');
-var uploadContent = require('./upload-content2.js');
+var uploadContent = require('./upload-content.js');
 var useHandlers = require('./use-handlers.js');
 var upload = require('./upload.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

package/lib/components/visual-hidden/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var visualHidden = require('./src/visual-hidden2.js');
-var visualHidden$1 = require('./src/visual-hidden.js');
+var visualHidden = require('./src/visual-hidden.js');
+var visualHidden$1 = require('./src/visual-hidden2.js');
 
 
 

package/lib/components/visual-hidden/src/visual-hidden.js

@@ -2,15 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../../utils/index.js');
-var runtime = require('../../../utils/vue/props/runtime.js');
+var vue = require('vue');
+var visualHidden = require('./visual-hidden2.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 
-const visualHiddenProps = runtime.buildProps({
-  style: {
-    type: runtime.definePropType([String, Object, Array]),
-    default: () => ({})
+const __default__ = vue.defineComponent({
+  name: "ElVisuallyHidden"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: visualHidden.visualHiddenProps,
+  setup(__props) {
+    const props = __props;
+    const computedStyle = vue.computed(() => {
+      return [
+        props.style,
+        {
+          position: "absolute",
+          border: 0,
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clip: "rect(0, 0, 0, 0)",
+          whiteSpace: "nowrap",
+          wordWrap: "normal"
+        }
+      ];
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("span", vue.mergeProps(_ctx.$attrs, { style: vue.unref(computedStyle) }), [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
   }
 });
+var ElVisuallyHidden = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/meng/workspace/element-pe/packages/components/visual-hidden/src/visual-hidden.vue"]]);
 
-exports.visualHiddenProps = visualHiddenProps;
+exports["default"] = ElVisuallyHidden;
 //# sourceMappingURL=visual-hidden.js.map

package/lib/components/visual-hidden/src/visual-hidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"visual-hidden.js","sources":["../../../../../../packages/components/visual-hidden/src/visual-hidden.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport type { StyleValue } from 'vue'\n\nexport const visualHiddenProps = buildProps({\n  style: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: () => ({}),\n  },\n} as const)\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,iBAAiB,GAAGA,kBAAU,CAAC;AAC5C,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,OAAO,EAAE,CAAC;AACvB,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"visual-hidden.js","sources":["../../../../../../packages/components/visual-hidden/src/visual-hidden.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\" :style=\"computedStyle\">\n    <slot />\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { visualHiddenProps } from './visual-hidden'\nimport type { StyleValue } from 'vue'\nconst props = defineProps(visualHiddenProps)\n\ndefineOptions({\n  name: 'ElVisuallyHidden',\n})\n\nconst computedStyle = computed<StyleValue>(() => {\n  return [\n    props.style,\n    {\n      position: 'absolute',\n      border: 0,\n      width: 1,\n      height: 1,\n      padding: 0,\n      margin: -1,\n      overflow: 'hidden',\n      clip: 'rect(0, 0, 0, 0)',\n      whiteSpace: 'nowrap',\n      wordWrap: 'normal',\n    },\n  ]\n})\n</script>\n"],"names":["computed"],"mappings":";;;;;;;;uCAYc,CAAA;AAAA,EACZ,IAAM,EAAA,kBAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAEA,IAAM,MAAA,aAAA,GAAgBA,aAAqB,MAAM;AAC/C,MAAO,OAAA;AAAA,QACL,KAAM,CAAA,KAAA;AAAA,QACN;AAAA,UACE,QAAU,EAAA,UAAA;AAAA,UACV,MAAQ,EAAA,CAAA;AAAA,UACR,KAAO,EAAA,CAAA;AAAA,UACP,MAAQ,EAAA,CAAA;AAAA,UACR,OAAS,EAAA,CAAA;AAAA,UACT,MAAQ,EAAA,CAAA,CAAA;AAAA,UACR,QAAU,EAAA,QAAA;AAAA,UACV,IAAM,EAAA,kBAAA;AAAA,UACN,UAAY,EAAA,QAAA;AAAA,UACZ,QAAU,EAAA,QAAA;AAAA,SACZ;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;"}

package/lib/components/visual-hidden/src/visual-hidden2.js

@@ -2,43 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var visualHidden = require('./visual-hidden.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+require('../../../utils/index.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
 
-const __default__ = vue.defineComponent({
-  name: "ElVisuallyHidden"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: visualHidden.visualHiddenProps,
-  setup(__props) {
-    const props = __props;
-    const computedStyle = vue.computed(() => {
-      return [
-        props.style,
-        {
-          position: "absolute",
-          border: 0,
-          width: 1,
-          height: 1,
-          padding: 0,
-          margin: -1,
-          overflow: "hidden",
-          clip: "rect(0, 0, 0, 0)",
-          whiteSpace: "nowrap",
-          wordWrap: "normal"
-        }
-      ];
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("span", vue.mergeProps(_ctx.$attrs, { style: vue.unref(computedStyle) }), [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 16);
-    };
+const visualHiddenProps = runtime.buildProps({
+  style: {
+    type: runtime.definePropType([String, Object, Array]),
+    default: () => ({})
   }
 });
-var ElVisuallyHidden = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/meng/workspace/element-pe/packages/components/visual-hidden/src/visual-hidden.vue"]]);
 
-exports["default"] = ElVisuallyHidden;
+exports.visualHiddenProps = visualHiddenProps;
 //# sourceMappingURL=visual-hidden2.js.map

package/lib/components/visual-hidden/src/visual-hidden2.js.map

@@ -1 +1 @@
-{"version":3,"file":"visual-hidden2.js","sources":["../../../../../../packages/components/visual-hidden/src/visual-hidden.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\" :style=\"computedStyle\">\n    <slot />\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { visualHiddenProps } from './visual-hidden'\nimport type { StyleValue } from 'vue'\nconst props = defineProps(visualHiddenProps)\n\ndefineOptions({\n  name: 'ElVisuallyHidden',\n})\n\nconst computedStyle = computed<StyleValue>(() => {\n  return [\n    props.style,\n    {\n      position: 'absolute',\n      border: 0,\n      width: 1,\n      height: 1,\n      padding: 0,\n      margin: -1,\n      overflow: 'hidden',\n      clip: 'rect(0, 0, 0, 0)',\n      whiteSpace: 'nowrap',\n      wordWrap: 'normal',\n    },\n  ]\n})\n</script>\n"],"names":["computed"],"mappings":";;;;;;;;uCAYc,CAAA;AAAA,EACZ,IAAM,EAAA,kBAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAEA,IAAM,MAAA,aAAA,GAAgBA,aAAqB,MAAM;AAC/C,MAAO,OAAA;AAAA,QACL,KAAM,CAAA,KAAA;AAAA,QACN;AAAA,UACE,QAAU,EAAA,UAAA;AAAA,UACV,MAAQ,EAAA,CAAA;AAAA,UACR,KAAO,EAAA,CAAA;AAAA,UACP,MAAQ,EAAA,CAAA;AAAA,UACR,OAAS,EAAA,CAAA;AAAA,UACT,MAAQ,EAAA,CAAA,CAAA;AAAA,UACR,QAAU,EAAA,QAAA;AAAA,UACV,IAAM,EAAA,kBAAA;AAAA,UACN,UAAY,EAAA,QAAA;AAAA,UACZ,QAAU,EAAA,QAAA;AAAA,SACZ;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;"}
+{"version":3,"file":"visual-hidden2.js","sources":["../../../../../../packages/components/visual-hidden/src/visual-hidden.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport type { StyleValue } from 'vue'\n\nexport const visualHiddenProps = buildProps({\n  style: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: () => ({}),\n  },\n} as const)\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,iBAAiB,GAAGA,kBAAU,CAAC;AAC5C,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,OAAO,EAAE,CAAC;AACvB,GAAG;AACH,CAAC;;;;"}

package/lib/hooks/index.js

@@ -67,10 +67,10 @@ exports.useTransitionFallthrough = index$i.useTransitionFallthrough;
 exports.useTransitionFallthroughEmits = index$i.useTransitionFallthroughEmits;
 exports.ID_INJECTION_KEY = index$j.ID_INJECTION_KEY;
 exports.useId = index$j.useId;
+exports.useIdInjection = index$j.useIdInjection;
 exports.useEscapeKeydown = index$k.useEscapeKeydown;
-exports.POPPER_CONTAINER_ID = index$l.POPPER_CONTAINER_ID;
-exports.POPPER_CONTAINER_SELECTOR = index$l.POPPER_CONTAINER_SELECTOR;
 exports.usePopperContainer = index$l.usePopperContainer;
+exports.usePopperContainerId = index$l.usePopperContainerId;
 exports.useDelayedRender = index$m.useDelayedRender;
 exports.useDelayedToggle = index$n.useDelayedToggle;
 exports.useDelayedToggleProps = index$n.useDelayedToggleProps;

package/lib/hooks/use-id/index.d.ts

@@ -5,4 +5,5 @@ export declare type ElIdInjectionContext = {
     current: number;
 };
 export declare const ID_INJECTION_KEY: InjectionKey<ElIdInjectionContext>;
+export declare const useIdInjection: () => ElIdInjectionContext;
 export declare const useId: (deterministicId?: MaybeRef<string> | undefined) => Ref<string>;

package/lib/hooks/use-id/index.js

@@ -14,8 +14,11 @@ const defaultIdInjection = {
   current: 0
 };
 const ID_INJECTION_KEY = Symbol("elIdInjection");
+const useIdInjection = () => {
+  return vue.getCurrentInstance() ? vue.inject(ID_INJECTION_KEY, defaultIdInjection) : defaultIdInjection;
+};
 const useId = (deterministicId) => {
-  const idInjection = vue.inject(ID_INJECTION_KEY, defaultIdInjection);
+  const idInjection = useIdInjection();
   if (!core.isClient && idInjection === defaultIdInjection) {
     error.debugWarn("IdInjection", `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
 usage: app.provide(ID_INJECTION_KEY, {
@@ -30,4 +33,5 @@ usage: app.provide(ID_INJECTION_KEY, {
 
 exports.ID_INJECTION_KEY = ID_INJECTION_KEY;
 exports.useId = useId;
+exports.useIdInjection = useIdInjection;
 //# sourceMappingURL=index.js.map

package/lib/hooks/use-id/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-id/index.ts"],"sourcesContent":["import { computed, inject, unref } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { debugWarn } from '@element-plus/utils'\nimport { useGlobalConfig } from '../use-global-config'\nimport { defaultNamespace } from '../use-namespace'\n\nimport type { InjectionKey, Ref } from 'vue'\nimport type { MaybeRef } from '@vueuse/core'\n\nexport type ElIdInjectionContext = {\n  prefix: number\n  current: number\n}\n\nconst defaultIdInjection = {\n  prefix: Math.floor(Math.random() * 10000),\n  current: 0,\n}\n\nexport const ID_INJECTION_KEY: InjectionKey<ElIdInjectionContext> =\n  Symbol('elIdInjection')\n\nexport const useId = (deterministicId?: MaybeRef<string>): Ref<string> => {\n  const idInjection = inject(ID_INJECTION_KEY, defaultIdInjection)\n\n  if (!isClient && idInjection === defaultIdInjection) {\n    debugWarn(\n      'IdInjection',\n      `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed\nusage: app.provide(ID_INJECTION_KEY, {\n  prefix: number,\n  current: number,\n})`\n    )\n  }\n\n  const namespace = useGlobalConfig('namespace', defaultNamespace)\n  const idRef = computed(\n    () =>\n      unref(deterministicId) ||\n      `${namespace.value}-id-${idInjection.prefix}-${idInjection.current++}`\n  )\n\n  return idRef\n}\n"],"names":["inject","isClient","debugWarn","useGlobalConfig","defaultNamespace","computed","unref"],"mappings":";;;;;;;;;;;AAKA,MAAM,kBAAkB,GAAG;AAC3B,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC;AACzC,EAAE,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AACU,MAAC,gBAAgB,GAAG,MAAM,CAAC,eAAe,EAAE;AAC5C,MAAC,KAAK,GAAG,CAAC,eAAe,KAAK;AAC1C,EAAE,MAAM,WAAW,GAAGA,UAAM,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;AACnE,EAAE,IAAI,CAACC,aAAQ,IAAI,WAAW,KAAK,kBAAkB,EAAE;AACvD,IAAIC,eAAS,CAAC,aAAa,EAAE,CAAC;AAC9B;AACA;AACA;AACA,EAAE,CAAC,CAAC,CAAC;AACL,GAAG;AACH,EAAE,MAAM,SAAS,GAAGC,qBAAe,CAAC,WAAW,EAAEC,wBAAgB,CAAC,CAAC;AACnE,EAAE,MAAM,KAAK,GAAGC,YAAQ,CAAC,MAAMC,SAAK,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;AACjI,EAAE,OAAO,KAAK,CAAC;AACf;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-id/index.ts"],"sourcesContent":["import { computed, getCurrentInstance, inject, unref } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { debugWarn } from '@element-plus/utils'\nimport { useGlobalConfig } from '../use-global-config'\nimport { defaultNamespace } from '../use-namespace'\n\nimport type { InjectionKey, Ref } from 'vue'\nimport type { MaybeRef } from '@vueuse/core'\n\nexport type ElIdInjectionContext = {\n  prefix: number\n  current: number\n}\n\nconst defaultIdInjection = {\n  prefix: Math.floor(Math.random() * 10000),\n  current: 0,\n}\n\nexport const ID_INJECTION_KEY: InjectionKey<ElIdInjectionContext> =\n  Symbol('elIdInjection')\n\nexport const useIdInjection = (): ElIdInjectionContext => {\n  return getCurrentInstance()\n    ? inject(ID_INJECTION_KEY, defaultIdInjection)\n    : defaultIdInjection\n}\n\nexport const useId = (deterministicId?: MaybeRef<string>): Ref<string> => {\n  const idInjection = useIdInjection()\n  if (!isClient && idInjection === defaultIdInjection) {\n    debugWarn(\n      'IdInjection',\n      `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed\nusage: app.provide(ID_INJECTION_KEY, {\n  prefix: number,\n  current: number,\n})`\n    )\n  }\n\n  const namespace = useGlobalConfig('namespace', defaultNamespace)\n  const idRef = computed(\n    () =>\n      unref(deterministicId) ||\n      `${namespace.value}-id-${idInjection.prefix}-${idInjection.current++}`\n  )\n\n  return idRef\n}\n"],"names":["getCurrentInstance","inject","isClient","debugWarn","useGlobalConfig","defaultNamespace","computed","unref"],"mappings":";;;;;;;;;;;AAKA,MAAM,kBAAkB,GAAG;AAC3B,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC;AACzC,EAAE,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AACU,MAAC,gBAAgB,GAAG,MAAM,CAAC,eAAe,EAAE;AAC5C,MAAC,cAAc,GAAG,MAAM;AACpC,EAAE,OAAOA,sBAAkB,EAAE,GAAGC,UAAM,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,GAAG,kBAAkB,CAAC;AAClG,EAAE;AACU,MAAC,KAAK,GAAG,CAAC,eAAe,KAAK;AAC1C,EAAE,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;AACvC,EAAE,IAAI,CAACC,aAAQ,IAAI,WAAW,KAAK,kBAAkB,EAAE;AACvD,IAAIC,eAAS,CAAC,aAAa,EAAE,CAAC;AAC9B;AACA;AACA;AACA,EAAE,CAAC,CAAC,CAAC;AACL,GAAG;AACH,EAAE,MAAM,SAAS,GAAGC,qBAAe,CAAC,WAAW,EAAEC,wBAAgB,CAAC,CAAC;AACnE,EAAE,MAAM,KAAK,GAAGC,YAAQ,CAAC,MAAMC,SAAK,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;AACjI,EAAE,OAAO,KAAK,CAAC;AACf;;;;;;"}

package/lib/hooks/use-popper-container/index.d.ts

@@ -1,3 +1,5 @@
-export declare const POPPER_CONTAINER_ID: string;
-export declare const POPPER_CONTAINER_SELECTOR: string;
+export declare const usePopperContainerId: () => {
+    id: import("vue").ComputedRef<string>;
+    selector: import("vue").ComputedRef<string>;
+};
 export declare const usePopperContainer: () => void;

package/lib/hooks/use-popper-container/index.js

@@ -4,18 +4,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var core = require('@vueuse/core');
-require('../../utils/index.js');
 var index = require('../use-global-config/index.js');
 var index$1 = require('../use-namespace/index.js');
-var rand = require('../../utils/rand.js');
+var index$2 = require('../use-id/index.js');
 
 let cachedContainer;
-const namespace = index.useGlobalConfig("namespace", index$1.defaultNamespace);
-const POPPER_CONTAINER_ID = `${namespace.value}-popper-container-${rand.generateId()}`;
-const POPPER_CONTAINER_SELECTOR = `#${POPPER_CONTAINER_ID}`;
-const createContainer = () => {
+const usePopperContainerId = () => {
+  const namespace = index.useGlobalConfig("namespace", index$1.defaultNamespace);
+  const idInjection = index$2.useIdInjection();
+  const id = vue.computed(() => {
+    return `${namespace.value}-popper-container-${idInjection.prefix}`;
+  });
+  const selector = vue.computed(() => `#${id.value}`);
+  return {
+    id,
+    selector
+  };
+};
+const createContainer = (id) => {
   const container = document.createElement("div");
-  container.id = POPPER_CONTAINER_ID;
+  container.id = id;
   document.body.appendChild(container);
   return container;
 };
@@ -23,13 +31,13 @@ const usePopperContainer = () => {
   vue.onBeforeMount(() => {
     if (!core.isClient)
       return;
-    if (process.env.NODE_ENV === "test" || !cachedContainer || !document.body.querySelector(POPPER_CONTAINER_SELECTOR)) {
-      cachedContainer = createContainer();
+    const { id, selector } = usePopperContainerId();
+    if (process.env.NODE_ENV === "test" || !cachedContainer && !document.body.querySelector(selector.value)) {
+      cachedContainer = createContainer(id.value);
     }
   });
 };
 
-exports.POPPER_CONTAINER_ID = POPPER_CONTAINER_ID;
-exports.POPPER_CONTAINER_SELECTOR = POPPER_CONTAINER_SELECTOR;
 exports.usePopperContainer = usePopperContainer;
+exports.usePopperContainerId = usePopperContainerId;
 //# sourceMappingURL=index.js.map

package/lib/hooks/use-popper-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-popper-container/index.ts"],"sourcesContent":["import { onBeforeMount } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { generateId } from '@element-plus/utils'\nimport { useGlobalConfig } from '../use-global-config'\nimport { defaultNamespace } from '../use-namespace'\n\nlet cachedContainer: HTMLElement\n\nconst namespace = useGlobalConfig('namespace', defaultNamespace)\n\nexport const POPPER_CONTAINER_ID = `${\n  namespace.value\n}-popper-container-${generateId()}`\n\nexport const POPPER_CONTAINER_SELECTOR = `#${POPPER_CONTAINER_ID}`\n\nconst createContainer = () => {\n  const container = document.createElement('div')\n  container.id = POPPER_CONTAINER_ID\n  document.body.appendChild(container)\n  return container\n}\n\nexport const usePopperContainer = () => {\n  onBeforeMount(() => {\n    if (!isClient) return\n\n    // This is for bypassing the error that when under testing env, we often encounter\n    // document.body.innerHTML = '' situation\n    // for this we need to disable the caching since it's not really needed\n    if (\n      process.env.NODE_ENV === 'test' ||\n      !cachedContainer ||\n      !document.body.querySelector(POPPER_CONTAINER_SELECTOR)\n    ) {\n      cachedContainer = createContainer()\n    }\n  })\n}\n"],"names":["useGlobalConfig","defaultNamespace","generateId","onBeforeMount","isClient"],"mappings":";;;;;;;;;;;AAKA,IAAI,eAAe,CAAC;AACpB,MAAM,SAAS,GAAGA,qBAAe,CAAC,WAAW,EAAEC,wBAAgB,CAAC,CAAC;AACrD,MAAC,mBAAmB,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,kBAAkB,EAAEC,eAAU,EAAE,CAAC,EAAE;AAC7E,MAAC,yBAAyB,GAAG,CAAC,CAAC,EAAE,mBAAmB,CAAC,EAAE;AACnE,MAAM,eAAe,GAAG,MAAM;AAC9B,EAAE,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAClD,EAAE,SAAS,CAAC,EAAE,GAAG,mBAAmB,CAAC;AACrC,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;AACvC,EAAE,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AACU,MAAC,kBAAkB,GAAG,MAAM;AACxC,EAAEC,iBAAa,CAAC,MAAM;AACtB,IAAI,IAAI,CAACC,aAAQ;AACjB,MAAM,OAAO;AACb,IAAI,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,IAAI,CAAC,eAAe,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAAC,EAAE;AACxH,MAAM,eAAe,GAAG,eAAe,EAAE,CAAC;AAC1C,KAAK;AACL,GAAG,CAAC,CAAC;AACL;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-popper-container/index.ts"],"sourcesContent":["import { computed, onBeforeMount } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { useGlobalConfig } from '../use-global-config'\nimport { defaultNamespace } from '../use-namespace'\nimport { useIdInjection } from '../use-id'\n\nlet cachedContainer: HTMLElement\n\nexport const usePopperContainerId = () => {\n  const namespace = useGlobalConfig('namespace', defaultNamespace)\n  const idInjection = useIdInjection()\n\n  const id = computed(() => {\n    return `${namespace.value}-popper-container-${idInjection.prefix}`\n  })\n  const selector = computed(() => `#${id.value}`)\n\n  return {\n    id,\n    selector,\n  }\n}\n\nconst createContainer = (id: string) => {\n  const container = document.createElement('div')\n  container.id = id\n  document.body.appendChild(container)\n  return container\n}\n\nexport const usePopperContainer = () => {\n  onBeforeMount(() => {\n    if (!isClient) return\n\n    const { id, selector } = usePopperContainerId()\n    // This is for bypassing the error that when under testing env, we often encounter\n    // document.body.innerHTML = '' situation\n    // for this we need to disable the caching since it's not really needed\n    if (\n      process.env.NODE_ENV === 'test' ||\n      (!cachedContainer && !document.body.querySelector(selector.value))\n    ) {\n      cachedContainer = createContainer(id.value)\n    }\n  })\n}\n"],"names":["useGlobalConfig","defaultNamespace","useIdInjection","computed","onBeforeMount","isClient"],"mappings":";;;;;;;;;;AAKA,IAAI,eAAe,CAAC;AACR,MAAC,oBAAoB,GAAG,MAAM;AAC1C,EAAE,MAAM,SAAS,GAAGA,qBAAe,CAAC,WAAW,EAAEC,wBAAgB,CAAC,CAAC;AACnE,EAAE,MAAM,WAAW,GAAGC,sBAAc,EAAE,CAAC;AACvC,EAAE,MAAM,EAAE,GAAGC,YAAQ,CAAC,MAAM;AAC5B,IAAI,OAAO,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,kBAAkB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;AACvE,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,QAAQ,GAAGA,YAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAClD,EAAE,OAAO;AACT,IAAI,EAAE;AACN,IAAI,QAAQ;AACZ,GAAG,CAAC;AACJ,EAAE;AACF,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK;AAChC,EAAE,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAClD,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;AACpB,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;AACvC,EAAE,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AACU,MAAC,kBAAkB,GAAG,MAAM;AACxC,EAAEC,iBAAa,CAAC,MAAM;AACtB,IAAI,IAAI,CAACC,aAAQ;AACjB,MAAM,OAAO;AACb,IAAI,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,oBAAoB,EAAE,CAAC;AACpD,IAAI,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,IAAI,CAAC,eAAe,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;AAC7G,MAAM,eAAe,GAAG,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAClD,KAAK;AACL,GAAG,CAAC,CAAC;AACL;;;;;"}