@element-plus/nightly 0.0.20241118 → 0.0.20241120

package/lib/components/dialog/src/dialog-content.js

@@ -2,98 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var index$2 = require('../../icon/index.js');
-require('../../focus-trap/index.js');
-require('../../../hooks/index.js');
 require('../../../utils/index.js');
-var constants = require('./constants.js');
-var dialogContent = require('./dialog-content2.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-locale/index.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
 var icon = require('../../../utils/vue/icon.js');
-var tokens = require('../../focus-trap/src/tokens.js');
-var refs = require('../../../utils/vue/refs.js');
-var index$1 = require('../../../hooks/use-draggable/index.js');
 
-const __default__ = vue.defineComponent({ name: "ElDialogContent" });
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: dialogContent.dialogContentProps,
-  emits: dialogContent.dialogContentEmits,
-  setup(__props, { expose }) {
-    const props = __props;
-    const { t } = index.useLocale();
-    const { Close } = icon.CloseComponents;
-    const { dialogRef, headerRef, bodyId, ns, style } = vue.inject(constants.dialogInjectionKey);
-    const { focusTrapRef } = vue.inject(tokens.FOCUS_TRAP_INJECTION_KEY);
-    const dialogKls = vue.computed(() => [
-      ns.b(),
-      ns.is("fullscreen", props.fullscreen),
-      ns.is("draggable", props.draggable),
-      ns.is("align-center", props.alignCenter),
-      { [ns.m("center")]: props.center }
-    ]);
-    const composedDialogRef = refs.composeRefs(focusTrapRef, dialogRef);
-    const draggable = vue.computed(() => props.draggable);
-    const overflow = vue.computed(() => props.overflow);
-    const { resetPosition } = index$1.useDraggable(dialogRef, headerRef, draggable, overflow);
-    expose({
-      resetPosition
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        ref: vue.unref(composedDialogRef),
-        class: vue.normalizeClass(vue.unref(dialogKls)),
-        style: vue.normalizeStyle(vue.unref(style)),
-        tabindex: "-1"
-      }, [
-        vue.createElementVNode("header", {
-          ref_key: "headerRef",
-          ref: headerRef,
-          class: vue.normalizeClass([vue.unref(ns).e("header"), { "show-close": _ctx.showClose }])
-        }, [
-          vue.renderSlot(_ctx.$slots, "header", {}, () => [
-            vue.createElementVNode("span", {
-              role: "heading",
-              "aria-level": _ctx.ariaLevel,
-              class: vue.normalizeClass(vue.unref(ns).e("title"))
-            }, vue.toDisplayString(_ctx.title), 11, ["aria-level"])
-          ]),
-          _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
-            key: 0,
-            "aria-label": vue.unref(t)("el.dialog.close"),
-            class: vue.normalizeClass(vue.unref(ns).e("headerbtn")),
-            type: "button",
-            onClick: ($event) => _ctx.$emit("close")
-          }, [
-            vue.createVNode(vue.unref(index$2.ElIcon), {
-              class: vue.normalizeClass(vue.unref(ns).e("close"))
-            }, {
-              default: vue.withCtx(() => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.closeIcon || vue.unref(Close))))
-              ]),
-              _: 1
-            }, 8, ["class"])
-          ], 10, ["aria-label", "onClick"])) : vue.createCommentVNode("v-if", true)
-        ], 2),
-        vue.createElementVNode("div", {
-          id: vue.unref(bodyId),
-          class: vue.normalizeClass(vue.unref(ns).e("body"))
-        }, [
-          vue.renderSlot(_ctx.$slots, "default")
-        ], 10, ["id"]),
-        _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("footer", {
-          key: 0,
-          class: vue.normalizeClass(vue.unref(ns).e("footer"))
-        }, [
-          vue.renderSlot(_ctx.$slots, "footer")
-        ], 2)) : vue.createCommentVNode("v-if", true)
-      ], 6);
-    };
+const dialogContentProps = runtime.buildProps({
+  center: Boolean,
+  alignCenter: Boolean,
+  closeIcon: {
+    type: icon.iconPropType
+  },
+  draggable: Boolean,
+  overflow: Boolean,
+  fullscreen: Boolean,
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  ariaLevel: {
+    type: String,
+    default: "2"
   }
 });
-var ElDialogContent = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "dialog-content.vue"]]);
+const dialogContentEmits = {
+  close: () => true
+};
 
-exports["default"] = ElDialogContent;
+exports.dialogContentEmits = dialogContentEmits;
+exports.dialogContentProps = dialogContentProps;
 //# sourceMappingURL=dialog-content.js.map

package/lib/components/dialog/src/dialog-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-content.js","sources":["../../../../../../packages/components/dialog/src/dialog-content.vue"],"sourcesContent":["<template>\n  <div :ref=\"composedDialogRef\" :class=\"dialogKls\" :style=\"style\" tabindex=\"-1\">\n    <header\n      ref=\"headerRef\"\n      :class=\"[ns.e('header'), { 'show-close': showClose }]\"\n    >\n      <slot name=\"header\">\n        <span role=\"heading\" :aria-level=\"ariaLevel\" :class=\"ns.e('title')\">\n          {{ title }}\n        </span>\n      </slot>\n      <button\n        v-if=\"showClose\"\n        :aria-label=\"t('el.dialog.close')\"\n        :class=\"ns.e('headerbtn')\"\n        type=\"button\"\n        @click=\"$emit('close')\"\n      >\n        <el-icon :class=\"ns.e('close')\">\n          <component :is=\"closeIcon || Close\" />\n        </el-icon>\n      </button>\n    </header>\n    <div :id=\"bodyId\" :class=\"ns.e('body')\">\n      <slot />\n    </div>\n    <footer v-if=\"$slots.footer\" :class=\"ns.e('footer')\">\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { FOCUS_TRAP_INJECTION_KEY } from '@element-plus/components/focus-trap'\nimport { useDraggable, useLocale } from '@element-plus/hooks'\nimport { CloseComponents, composeRefs } from '@element-plus/utils'\nimport { dialogInjectionKey } from './constants'\nimport { dialogContentEmits, dialogContentProps } from './dialog-content'\n\nconst { t } = useLocale()\nconst { Close } = CloseComponents\n\ndefineOptions({ name: 'ElDialogContent' })\nconst props = defineProps(dialogContentProps)\ndefineEmits(dialogContentEmits)\n\nconst { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey)!\nconst { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY)!\n\nconst dialogKls = computed(() => [\n  ns.b(),\n  ns.is('fullscreen', props.fullscreen),\n  ns.is('draggable', props.draggable),\n  ns.is('align-center', props.alignCenter),\n  { [ns.m('center')]: props.center },\n])\n\nconst composedDialogRef = composeRefs(focusTrapRef, dialogRef)\n\nconst draggable = computed(() => props.draggable)\nconst overflow = computed(() => props.overflow)\nconst { resetPosition } = useDraggable(\n  dialogRef,\n  headerRef,\n  draggable,\n  overflow\n)\n\ndefineExpose({\n  resetPosition,\n})\n</script>\n"],"names":["useLocale","CloseComponents","inject","dialogInjectionKey","FOCUS_TRAP_INJECTION_KEY","computed","composeRefs","useDraggable","_openBlock","_createElementBlock","_unref","_normalizeClass","_normalizeStyle"],"mappings":";;;;;;;;;;;;;;;;;;uCA4Cc,CAAA,EAAE,IAAM,EAAA,iBAAA,EAAkB,CAAA,CAAA;;;;;;;AAHxC,IAAM,MAAA,EAAE,CAAE,EAAA,GAAIA,eAAU,EAAA,CAAA;AACxB,IAAM,MAAA,EAAE,OAAU,GAAAC,oBAAA,CAAA;AAMlB,IAAM,MAAA,EAAE,WAAW,SAAW,EAAA,MAAA,EAAQ,IAAI,KAAM,EAAA,GAAIC,WAAOC,4BAAkB,CAAA,CAAA;AAC7E,IAAA,MAAM,EAAE,YAAA,EAAiB,GAAAD,UAAA,CAAOE,+BAAwB,CAAA,CAAA;AAExD,IAAM,MAAA,SAAA,GAAYC,aAAS,MAAM;AAAA,MAC/B,GAAG,CAAE,EAAA;AAAA,MACL,EAAG,CAAA,EAAA,CAAG,YAAc,EAAA,KAAA,CAAM,UAAU,CAAA;AAAA,MACpC,EAAG,CAAA,EAAA,CAAG,WAAa,EAAA,KAAA,CAAM,SAAS,CAAA;AAAA,MAClC,EAAG,CAAA,EAAA,CAAG,cAAgB,EAAA,KAAA,CAAM,WAAW,CAAA;AAAA,MACvC,EAAE,CAAC,EAAG,CAAA,CAAA,CAAE,QAAQ,CAAC,GAAG,MAAM,MAAO,EAAA;AAAA,KAClC,CAAA,CAAA;AAED,IAAM,MAAA,iBAAA,GAAoBC,gBAAY,CAAA,YAAA,EAAc,SAAS,CAAA,CAAA;AAE7D,IAAA,MAAM,SAAY,GAAAD,YAAA,CAAS,MAAM,KAAA,CAAM,SAAS,CAAA,CAAA;AAChD,IAAA,MAAM,QAAW,GAAAA,YAAA,CAAS,MAAM,KAAA,CAAM,QAAQ,CAAA,CAAA;AAC9C,IAAM,MAAA,EAAE,eAAkB,GAAAE,oBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,SAAA,EAAA,QAAA,CAAA,CAAA;AAAA,IACxB,MAAA,CAAA;AAAA,MACA,aAAA;AAAA,KACA,CAAA,CAAA;AAAA,IACA,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MACF,OAAAC,aAAA,EAAA,EAAAC,sBAAA,CAAA,KAAA,EAAA;AAEA,QAAa,GAAA,EAAAC,SAAA,CAAA,iBAAA,CAAA;AAAA,QACX,KAAA,EAAAC,kBAAA,CAAAD,SAAA,CAAA,SAAA,CAAA,CAAA;AAAA,QACD,KAAA,EAAAE,kBAAA,CAAAF,SAAA,CAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialog-content.js","sources":["../../../../../../packages/components/dialog/src/dialog-content.ts"],"sourcesContent":["import { buildProps, iconPropType } from '@element-plus/utils'\n\nexport const dialogContentProps = buildProps({\n  /**\n   * @description whether to align the header and footer in center\n   */\n  center: Boolean,\n  /**\n   * @description whether to align the dialog both horizontally and vertically\n   */\n  alignCenter: Boolean,\n  /**\n   * @description custom close icon, default is Close\n   */\n  closeIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description enable dragging feature for Dialog\n   */\n  draggable: Boolean,\n  /**\n   * @description draggable Dialog can overflow the viewport\n   */\n  overflow: Boolean,\n  /**\n   * @description whether the Dialog takes up full screen\n   */\n  fullscreen: Boolean,\n  /**\n   * @description whether to show a close button\n   */\n  showClose: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description title of Dialog. Can also be passed with a named slot (see the following table)\n   */\n  title: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description header's aria-level attribute\n   */\n  ariaLevel: {\n    type: String,\n    default: '2',\n  },\n} as const)\n\nexport const dialogContentEmits = {\n  close: () => true,\n}\n"],"names":["buildProps","iconPropType"],"mappings":";;;;;;;;AACY,MAAC,kBAAkB,GAAGA,kBAAU,CAAC;AAC7C,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,WAAW,EAAE,OAAO;AACtB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,iBAAY;AACtB,GAAG;AACH,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,UAAU,EAAE,OAAO;AACrB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,kBAAkB,GAAG;AAClC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB;;;;;"}

package/lib/components/dialog/src/dialog-content2.js

@@ -2,36 +2,98 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vue = require('vue');
+var index$2 = require('../../icon/index.js');
+require('../../focus-trap/index.js');
+require('../../../hooks/index.js');
 require('../../../utils/index.js');
-var runtime = require('../../../utils/vue/props/runtime.js');
+var constants = require('./constants.js');
+var dialogContent = require('./dialog-content.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../hooks/use-locale/index.js');
 var icon = require('../../../utils/vue/icon.js');
+var tokens = require('../../focus-trap/src/tokens.js');
+var refs = require('../../../utils/vue/refs.js');
+var index$1 = require('../../../hooks/use-draggable/index.js');
 
-const dialogContentProps = runtime.buildProps({
-  center: Boolean,
-  alignCenter: Boolean,
-  closeIcon: {
-    type: icon.iconPropType
-  },
-  draggable: Boolean,
-  overflow: Boolean,
-  fullscreen: Boolean,
-  showClose: {
-    type: Boolean,
-    default: true
-  },
-  title: {
-    type: String,
-    default: ""
-  },
-  ariaLevel: {
-    type: String,
-    default: "2"
+const __default__ = vue.defineComponent({ name: "ElDialogContent" });
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: dialogContent.dialogContentProps,
+  emits: dialogContent.dialogContentEmits,
+  setup(__props, { expose }) {
+    const props = __props;
+    const { t } = index.useLocale();
+    const { Close } = icon.CloseComponents;
+    const { dialogRef, headerRef, bodyId, ns, style } = vue.inject(constants.dialogInjectionKey);
+    const { focusTrapRef } = vue.inject(tokens.FOCUS_TRAP_INJECTION_KEY);
+    const dialogKls = vue.computed(() => [
+      ns.b(),
+      ns.is("fullscreen", props.fullscreen),
+      ns.is("draggable", props.draggable),
+      ns.is("align-center", props.alignCenter),
+      { [ns.m("center")]: props.center }
+    ]);
+    const composedDialogRef = refs.composeRefs(focusTrapRef, dialogRef);
+    const draggable = vue.computed(() => props.draggable);
+    const overflow = vue.computed(() => props.overflow);
+    const { resetPosition } = index$1.useDraggable(dialogRef, headerRef, draggable, overflow);
+    expose({
+      resetPosition
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref: vue.unref(composedDialogRef),
+        class: vue.normalizeClass(vue.unref(dialogKls)),
+        style: vue.normalizeStyle(vue.unref(style)),
+        tabindex: "-1"
+      }, [
+        vue.createElementVNode("header", {
+          ref_key: "headerRef",
+          ref: headerRef,
+          class: vue.normalizeClass([vue.unref(ns).e("header"), { "show-close": _ctx.showClose }])
+        }, [
+          vue.renderSlot(_ctx.$slots, "header", {}, () => [
+            vue.createElementVNode("span", {
+              role: "heading",
+              "aria-level": _ctx.ariaLevel,
+              class: vue.normalizeClass(vue.unref(ns).e("title"))
+            }, vue.toDisplayString(_ctx.title), 11, ["aria-level"])
+          ]),
+          _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
+            key: 0,
+            "aria-label": vue.unref(t)("el.dialog.close"),
+            class: vue.normalizeClass(vue.unref(ns).e("headerbtn")),
+            type: "button",
+            onClick: ($event) => _ctx.$emit("close")
+          }, [
+            vue.createVNode(vue.unref(index$2.ElIcon), {
+              class: vue.normalizeClass(vue.unref(ns).e("close"))
+            }, {
+              default: vue.withCtx(() => [
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.closeIcon || vue.unref(Close))))
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ], 10, ["aria-label", "onClick"])) : vue.createCommentVNode("v-if", true)
+        ], 2),
+        vue.createElementVNode("div", {
+          id: vue.unref(bodyId),
+          class: vue.normalizeClass(vue.unref(ns).e("body"))
+        }, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ], 10, ["id"]),
+        _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("footer", {
+          key: 0,
+          class: vue.normalizeClass(vue.unref(ns).e("footer"))
+        }, [
+          vue.renderSlot(_ctx.$slots, "footer")
+        ], 2)) : vue.createCommentVNode("v-if", true)
+      ], 6);
+    };
   }
 });
-const dialogContentEmits = {
-  close: () => true
-};
+var ElDialogContent = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "dialog-content.vue"]]);
 
-exports.dialogContentEmits = dialogContentEmits;
-exports.dialogContentProps = dialogContentProps;
+exports["default"] = ElDialogContent;
 //# sourceMappingURL=dialog-content2.js.map

package/lib/components/dialog/src/dialog-content2.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-content2.js","sources":["../../../../../../packages/components/dialog/src/dialog-content.ts"],"sourcesContent":["import { buildProps, iconPropType } from '@element-plus/utils'\n\nexport const dialogContentProps = buildProps({\n  /**\n   * @description whether to align the header and footer in center\n   */\n  center: Boolean,\n  /**\n   * @description whether to align the dialog both horizontally and vertically\n   */\n  alignCenter: Boolean,\n  /**\n   * @description custom close icon, default is Close\n   */\n  closeIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description enable dragging feature for Dialog\n   */\n  draggable: Boolean,\n  /**\n   * @description draggable Dialog can overflow the viewport\n   */\n  overflow: Boolean,\n  /**\n   * @description whether the Dialog takes up full screen\n   */\n  fullscreen: Boolean,\n  /**\n   * @description whether to show a close button\n   */\n  showClose: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description title of Dialog. Can also be passed with a named slot (see the following table)\n   */\n  title: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description header's aria-level attribute\n   */\n  ariaLevel: {\n    type: String,\n    default: '2',\n  },\n} as const)\n\nexport const dialogContentEmits = {\n  close: () => true,\n}\n"],"names":["buildProps","iconPropType"],"mappings":";;;;;;;;AACY,MAAC,kBAAkB,GAAGA,kBAAU,CAAC;AAC7C,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,WAAW,EAAE,OAAO;AACtB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,iBAAY;AACtB,GAAG;AACH,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,UAAU,EAAE,OAAO;AACrB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,kBAAkB,GAAG;AAClC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB;;;;;"}
+{"version":3,"file":"dialog-content2.js","sources":["../../../../../../packages/components/dialog/src/dialog-content.vue"],"sourcesContent":["<template>\n  <div :ref=\"composedDialogRef\" :class=\"dialogKls\" :style=\"style\" tabindex=\"-1\">\n    <header\n      ref=\"headerRef\"\n      :class=\"[ns.e('header'), { 'show-close': showClose }]\"\n    >\n      <slot name=\"header\">\n        <span role=\"heading\" :aria-level=\"ariaLevel\" :class=\"ns.e('title')\">\n          {{ title }}\n        </span>\n      </slot>\n      <button\n        v-if=\"showClose\"\n        :aria-label=\"t('el.dialog.close')\"\n        :class=\"ns.e('headerbtn')\"\n        type=\"button\"\n        @click=\"$emit('close')\"\n      >\n        <el-icon :class=\"ns.e('close')\">\n          <component :is=\"closeIcon || Close\" />\n        </el-icon>\n      </button>\n    </header>\n    <div :id=\"bodyId\" :class=\"ns.e('body')\">\n      <slot />\n    </div>\n    <footer v-if=\"$slots.footer\" :class=\"ns.e('footer')\">\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { FOCUS_TRAP_INJECTION_KEY } from '@element-plus/components/focus-trap'\nimport { useDraggable, useLocale } from '@element-plus/hooks'\nimport { CloseComponents, composeRefs } from '@element-plus/utils'\nimport { dialogInjectionKey } from './constants'\nimport { dialogContentEmits, dialogContentProps } from './dialog-content'\n\nconst { t } = useLocale()\nconst { Close } = CloseComponents\n\ndefineOptions({ name: 'ElDialogContent' })\nconst props = defineProps(dialogContentProps)\ndefineEmits(dialogContentEmits)\n\nconst { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey)!\nconst { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY)!\n\nconst dialogKls = computed(() => [\n  ns.b(),\n  ns.is('fullscreen', props.fullscreen),\n  ns.is('draggable', props.draggable),\n  ns.is('align-center', props.alignCenter),\n  { [ns.m('center')]: props.center },\n])\n\nconst composedDialogRef = composeRefs(focusTrapRef, dialogRef)\n\nconst draggable = computed(() => props.draggable)\nconst overflow = computed(() => props.overflow)\nconst { resetPosition } = useDraggable(\n  dialogRef,\n  headerRef,\n  draggable,\n  overflow\n)\n\ndefineExpose({\n  resetPosition,\n})\n</script>\n"],"names":["useLocale","CloseComponents","inject","dialogInjectionKey","FOCUS_TRAP_INJECTION_KEY","computed","composeRefs","useDraggable","_openBlock","_createElementBlock","_unref","_normalizeClass","_normalizeStyle"],"mappings":";;;;;;;;;;;;;;;;;;uCA4Cc,CAAA,EAAE,IAAM,EAAA,iBAAA,EAAkB,CAAA,CAAA;;;;;;;AAHxC,IAAM,MAAA,EAAE,CAAE,EAAA,GAAIA,eAAU,EAAA,CAAA;AACxB,IAAM,MAAA,EAAE,OAAU,GAAAC,oBAAA,CAAA;AAMlB,IAAM,MAAA,EAAE,WAAW,SAAW,EAAA,MAAA,EAAQ,IAAI,KAAM,EAAA,GAAIC,WAAOC,4BAAkB,CAAA,CAAA;AAC7E,IAAA,MAAM,EAAE,YAAA,EAAiB,GAAAD,UAAA,CAAOE,+BAAwB,CAAA,CAAA;AAExD,IAAM,MAAA,SAAA,GAAYC,aAAS,MAAM;AAAA,MAC/B,GAAG,CAAE,EAAA;AAAA,MACL,EAAG,CAAA,EAAA,CAAG,YAAc,EAAA,KAAA,CAAM,UAAU,CAAA;AAAA,MACpC,EAAG,CAAA,EAAA,CAAG,WAAa,EAAA,KAAA,CAAM,SAAS,CAAA;AAAA,MAClC,EAAG,CAAA,EAAA,CAAG,cAAgB,EAAA,KAAA,CAAM,WAAW,CAAA;AAAA,MACvC,EAAE,CAAC,EAAG,CAAA,CAAA,CAAE,QAAQ,CAAC,GAAG,MAAM,MAAO,EAAA;AAAA,KAClC,CAAA,CAAA;AAED,IAAM,MAAA,iBAAA,GAAoBC,gBAAY,CAAA,YAAA,EAAc,SAAS,CAAA,CAAA;AAE7D,IAAA,MAAM,SAAY,GAAAD,YAAA,CAAS,MAAM,KAAA,CAAM,SAAS,CAAA,CAAA;AAChD,IAAA,MAAM,QAAW,GAAAA,YAAA,CAAS,MAAM,KAAA,CAAM,QAAQ,CAAA,CAAA;AAC9C,IAAM,MAAA,EAAE,eAAkB,GAAAE,oBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,SAAA,EAAA,QAAA,CAAA,CAAA;AAAA,IACxB,MAAA,CAAA;AAAA,MACA,aAAA;AAAA,KACA,CAAA,CAAA;AAAA,IACA,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MACF,OAAAC,aAAA,EAAA,EAAAC,sBAAA,CAAA,KAAA,EAAA;AAEA,QAAa,GAAA,EAAAC,SAAA,CAAA,iBAAA,CAAA;AAAA,QACX,KAAA,EAAAC,kBAAA,CAAAD,SAAA,CAAA,SAAA,CAAA,CAAA;AAAA,QACD,KAAA,EAAAE,kBAAA,CAAAF,SAAA,CAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/dialog/src/dialog.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('../../../utils/index.js');
 require('../../../constants/index.js');
-var dialogContent = require('./dialog-content2.js');
+var dialogContent = require('./dialog-content.js');
 var runtime = require('../../../utils/vue/props/runtime.js');
 var event = require('../../../constants/event.js');
 var types = require('../../../utils/types.js');

package/lib/components/dialog/src/dialog2.js

@@ -7,7 +7,7 @@ var index$4 = require('../../overlay/index.js');
 require('../../../hooks/index.js');
 require('../../focus-trap/index.js');
 var index$3 = require('../../teleport/index.js');
-var dialogContent = require('./dialog-content.js');
+var dialogContent = require('./dialog-content2.js');
 var constants = require('./constants.js');
 var dialog = require('./dialog.js');
 var useDialog = require('./use-dialog.js');

package/lib/components/image-viewer/src/image-viewer2.js

@@ -8,6 +8,7 @@ var lodashUnified = require('lodash-unified');
 require('../../../hooks/index.js');
 require('../../../constants/index.js');
 require('../../../utils/index.js');
+require('../../focus-trap/index.js');
 var index$3 = require('../../teleport/index.js');
 var index$4 = require('../../icon/index.js');
 var iconsVue = require('@element-plus/icons-vue');
@@ -18,6 +19,7 @@ var index$1 = require('../../../hooks/use-namespace/index.js');
 var index$2 = require('../../../hooks/use-z-index/index.js');
 var aria = require('../../../constants/aria.js');
 var objects = require('../../../utils/objects.js');
+var focusTrap = require('../../focus-trap/src/focus-trap.js');
 
 const __default__ = vue.defineComponent({
   name: "ElImageViewer"
@@ -232,6 +234,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       transform.value.enableTransition = enableTransition;
     }
+    function onFocusoutPrevented(event) {
+      var _a2;
+      if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
+        event.preventDefault();
+      }
+    }
+    function onCloseRequested() {
+      if (props.closeOnPressEscape) {
+        hide();
+      }
+    }
     vue.watch(currentImg, () => {
       vue.nextTick(() => {
         const $img = imgRefs.value[0];
@@ -245,9 +258,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       emit("switch", val);
     });
     vue.onMounted(() => {
-      var _a2, _b;
       registerEventListener();
-      (_b = (_a2 = wrapper.value) == null ? void 0 : _a2.focus) == null ? void 0 : _b.call(_a2);
     });
     expose({
       setActiveItem
@@ -270,122 +281,134 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 class: vue.normalizeClass(vue.unref(ns).e("wrapper")),
                 style: vue.normalizeStyle({ zIndex: zIndex.value })
               }, [
-                vue.createElementVNode("div", {
-                  class: vue.normalizeClass(vue.unref(ns).e("mask")),
-                  onClick: vue.withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"])
-                }, null, 10, ["onClick"]),
-                vue.createCommentVNode(" CLOSE "),
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("close")]),
-                  onClick: hide
-                }, [
-                  vue.createVNode(vue.unref(index$4.ElIcon), null, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.Close))
-                    ]),
-                    _: 1
-                  })
-                ], 2),
-                vue.createCommentVNode(" ARROW "),
-                !vue.unref(isSingle) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  vue.createElementVNode("span", {
-                    class: vue.normalizeClass(vue.unref(arrowPrevKls)),
-                    onClick: prev
-                  }, [
-                    vue.createVNode(vue.unref(index$4.ElIcon), null, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(iconsVue.ArrowLeft))
-                      ]),
-                      _: 1
-                    })
-                  ], 2),
-                  vue.createElementVNode("span", {
-                    class: vue.normalizeClass(vue.unref(arrowNextKls)),
-                    onClick: next
-                  }, [
-                    vue.createVNode(vue.unref(index$4.ElIcon), null, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(iconsVue.ArrowRight))
-                      ]),
-                      _: 1
-                    })
-                  ], 2)
-                ], 64)) : vue.createCommentVNode("v-if", true),
-                vue.createCommentVNode(" ACTIONS "),
-                vue.createElementVNode("div", {
-                  class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("actions")])
-                }, [
-                  vue.createElementVNode("div", {
-                    class: vue.normalizeClass(vue.unref(ns).e("actions__inner"))
-                  }, [
-                    vue.createVNode(vue.unref(index$4.ElIcon), {
-                      onClick: ($event) => handleActions("zoomOut")
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(iconsVue.ZoomOut))
-                      ]),
-                      _: 1
-                    }, 8, ["onClick"]),
-                    vue.createVNode(vue.unref(index$4.ElIcon), {
-                      onClick: ($event) => handleActions("zoomIn")
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(iconsVue.ZoomIn))
-                      ]),
-                      _: 1
-                    }, 8, ["onClick"]),
-                    vue.createElementVNode("i", {
-                      class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
-                    }, null, 2),
-                    vue.createVNode(vue.unref(index$4.ElIcon), { onClick: toggleMode }, {
-                      default: vue.withCtx(() => [
-                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(mode).icon)))
-                      ]),
-                      _: 1
-                    }),
-                    vue.createElementVNode("i", {
-                      class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
-                    }, null, 2),
-                    vue.createVNode(vue.unref(index$4.ElIcon), {
-                      onClick: ($event) => handleActions("anticlockwise")
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(iconsVue.RefreshLeft))
-                      ]),
-                      _: 1
-                    }, 8, ["onClick"]),
-                    vue.createVNode(vue.unref(index$4.ElIcon), {
-                      onClick: ($event) => handleActions("clockwise")
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(iconsVue.RefreshRight))
-                      ]),
-                      _: 1
-                    }, 8, ["onClick"])
-                  ], 2)
-                ], 2),
-                vue.createCommentVNode(" CANVAS "),
-                vue.createElementVNode("div", {
-                  class: vue.normalizeClass(vue.unref(ns).e("canvas"))
-                }, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
-                    return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
-                      ref_for: true,
-                      ref: (el) => imgRefs.value[i] = el,
-                      key: url,
-                      src: url,
-                      style: vue.normalizeStyle(vue.unref(imgStyle)),
-                      class: vue.normalizeClass(vue.unref(ns).e("img")),
-                      crossorigin: _ctx.crossorigin,
-                      onLoad: handleImgLoad,
-                      onError: handleImgError,
-                      onMousedown: handleMouseDown
-                    }, null, 46, ["src", "crossorigin"])), [
-                      [vue.vShow, i === activeIndex.value]
-                    ]);
-                  }), 128))
-                ], 2),
-                vue.renderSlot(_ctx.$slots, "default")
+                vue.createVNode(vue.unref(focusTrap["default"]), {
+                  loop: "",
+                  trapped: "",
+                  "focus-trap-el": wrapper.value,
+                  "focus-start-el": "container",
+                  onFocusoutPrevented,
+                  onReleaseRequested: onCloseRequested
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(vue.unref(ns).e("mask")),
+                      onClick: vue.withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"])
+                    }, null, 10, ["onClick"]),
+                    vue.createCommentVNode(" CLOSE "),
+                    vue.createElementVNode("span", {
+                      class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("close")]),
+                      onClick: hide
+                    }, [
+                      vue.createVNode(vue.unref(index$4.ElIcon), null, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(iconsVue.Close))
+                        ]),
+                        _: 1
+                      })
+                    ], 2),
+                    vue.createCommentVNode(" ARROW "),
+                    !vue.unref(isSingle) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                      vue.createElementVNode("span", {
+                        class: vue.normalizeClass(vue.unref(arrowPrevKls)),
+                        onClick: prev
+                      }, [
+                        vue.createVNode(vue.unref(index$4.ElIcon), null, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(iconsVue.ArrowLeft))
+                          ]),
+                          _: 1
+                        })
+                      ], 2),
+                      vue.createElementVNode("span", {
+                        class: vue.normalizeClass(vue.unref(arrowNextKls)),
+                        onClick: next
+                      }, [
+                        vue.createVNode(vue.unref(index$4.ElIcon), null, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(iconsVue.ArrowRight))
+                          ]),
+                          _: 1
+                        })
+                      ], 2)
+                    ], 64)) : vue.createCommentVNode("v-if", true),
+                    vue.createCommentVNode(" ACTIONS "),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("actions")])
+                    }, [
+                      vue.createElementVNode("div", {
+                        class: vue.normalizeClass(vue.unref(ns).e("actions__inner"))
+                      }, [
+                        vue.createVNode(vue.unref(index$4.ElIcon), {
+                          onClick: ($event) => handleActions("zoomOut")
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(iconsVue.ZoomOut))
+                          ]),
+                          _: 1
+                        }, 8, ["onClick"]),
+                        vue.createVNode(vue.unref(index$4.ElIcon), {
+                          onClick: ($event) => handleActions("zoomIn")
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(iconsVue.ZoomIn))
+                          ]),
+                          _: 1
+                        }, 8, ["onClick"]),
+                        vue.createElementVNode("i", {
+                          class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
+                        }, null, 2),
+                        vue.createVNode(vue.unref(index$4.ElIcon), { onClick: toggleMode }, {
+                          default: vue.withCtx(() => [
+                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(mode).icon)))
+                          ]),
+                          _: 1
+                        }),
+                        vue.createElementVNode("i", {
+                          class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
+                        }, null, 2),
+                        vue.createVNode(vue.unref(index$4.ElIcon), {
+                          onClick: ($event) => handleActions("anticlockwise")
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(iconsVue.RefreshLeft))
+                          ]),
+                          _: 1
+                        }, 8, ["onClick"]),
+                        vue.createVNode(vue.unref(index$4.ElIcon), {
+                          onClick: ($event) => handleActions("clockwise")
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(iconsVue.RefreshRight))
+                          ]),
+                          _: 1
+                        }, 8, ["onClick"])
+                      ], 2)
+                    ], 2),
+                    vue.createCommentVNode(" CANVAS "),
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(vue.unref(ns).e("canvas"))
+                    }, [
+                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
+                        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
+                          ref_for: true,
+                          ref: (el) => imgRefs.value[i] = el,
+                          key: url,
+                          src: url,
+                          style: vue.normalizeStyle(vue.unref(imgStyle)),
+                          class: vue.normalizeClass(vue.unref(ns).e("img")),
+                          crossorigin: _ctx.crossorigin,
+                          onLoad: handleImgLoad,
+                          onError: handleImgError,
+                          onMousedown: handleMouseDown
+                        }, null, 46, ["src", "crossorigin"])), [
+                          [vue.vShow, i === activeIndex.value]
+                        ]);
+                      }), 128))
+                    ], 2),
+                    vue.renderSlot(_ctx.$slots, "default")
+                  ]),
+                  _: 3
+                }, 8, ["focus-trap-el"])
               ], 6)
             ]),
             _: 3