@element-plus/nightly 0.0.20260323 → 0.0.20260325

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

@@ -37,7 +37,7 @@ var dialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue
 		const dialogRef = (0, vue.ref)();
 		const headerRef = (0, vue.ref)();
 		const dialogContentRef = (0, vue.ref)();
-		const { visible, titleId, bodyId, style, overlayDialogStyle, rendered, transitionConfig, zIndex, _draggable, _alignCenter, _overflow, handleClose, onModalClick, onOpenAutoFocus, onCloseAutoFocus, onCloseRequested, onFocusoutPrevented, closing } = require_use_dialog.useDialog(props, dialogRef);
+		const { visible, titleId, bodyId, style, overlayDialogStyle, rendered, transitionConfig, zIndex, _draggable, _alignCenter, _overflow, penetrable, handleClose, onModalClick, onOpenAutoFocus, onCloseAutoFocus, onCloseRequested, onFocusoutPrevented, bringToFront, closing } = require_use_dialog.useDialog(props, dialogRef);
 		(0, vue.provide)(require_constants.dialogInjectionKey, {
 			dialogRef,
 			headerRef,
@@ -47,7 +47,6 @@ var dialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue
 			style
 		});
 		const overlayEvent = require_index$3.useSameTarget(onModalClick);
-		const penetrable = (0, vue.computed)(() => props.modalPenetrable && !props.modal && !props.fullscreen);
 		const resetPosition = () => {
 			dialogContentRef.value?.resetPosition();
 		};
@@ -69,7 +68,7 @@ var dialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue
 						"overlay-class": [
 							__props.modalClass ?? "",
 							`${(0, vue.unref)(ns).namespace.value}-modal-dialog`,
-							(0, vue.unref)(ns).is("penetrable", penetrable.value)
+							(0, vue.unref)(ns).is("penetrable", (0, vue.unref)(penetrable))
 						],
 						"z-index": (0, vue.unref)(zIndex)
 					}, {
@@ -110,7 +109,8 @@ var dialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue
 								"show-close": __props.showClose,
 								title: __props.title,
 								"aria-level": __props.headerAriaLevel,
-								onClose: (0, vue.unref)(handleClose)
+								onClose: (0, vue.unref)(handleClose),
+								onMousedown: (0, vue.unref)(bringToFront)
 							}), (0, vue.createSlots)({
 								header: (0, vue.withCtx)(() => [!_ctx.$slots.title ? (0, vue.renderSlot)(_ctx.$slots, "header", {
 									key: 0,
@@ -137,7 +137,8 @@ var dialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue
 								"show-close",
 								"title",
 								"aria-level",
-								"onClose"
+								"onClose",
+								"onMousedown"
 							])) : (0, vue.createCommentVNode)("v-if", true)]),
 							_: 3
 						}, 8, [

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\n    <transition v-bind=\"transitionConfig\">\n      <el-overlay\n        v-show=\"visible\"\n        custom-mask-event\n        :mask=\"modal\"\n        :overlay-class=\"[\n          modalClass ?? '',\n          `${ns.namespace.value}-modal-dialog`,\n          ns.is('penetrable', penetrable),\n        ]\"\n        :z-index=\"zIndex\"\n      >\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"title || undefined\"\n          :aria-labelledby=\"!title ? titleId : undefined\"\n          :aria-describedby=\"bodyId\"\n          :class=\"[\n            `${ns.namespace.value}-overlay-dialog`,\n            ns.is('closing', closing),\n          ]\"\n          :style=\"overlayDialogStyle\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <el-focus-trap\n            loop\n            :trapped=\"visible\"\n            focus-start-el=\"container\"\n            @focus-after-trapped=\"onOpenAutoFocus\"\n            @focus-after-released=\"onCloseAutoFocus\"\n            @focusout-prevented=\"onFocusoutPrevented\"\n            @release-requested=\"onCloseRequested\"\n          >\n            <el-dialog-content\n              v-if=\"rendered\"\n              ref=\"dialogContentRef\"\n              v-bind=\"$attrs\"\n              :center=\"center\"\n              :align-center=\"_alignCenter\"\n              :close-icon=\"closeIcon\"\n              :draggable=\"_draggable\"\n              :overflow=\"_overflow\"\n              :fullscreen=\"fullscreen\"\n              :header-class=\"headerClass\"\n              :body-class=\"bodyClass\"\n              :footer-class=\"footerClass\"\n              :show-close=\"showClose\"\n              :title=\"title\"\n              :aria-level=\"headerAriaLevel\"\n              @close=\"handleClose\"\n            >\n              <template #header>\n                <slot\n                  v-if=\"!$slots.title\"\n                  name=\"header\"\n                  :close=\"handleClose\"\n                  :title-id=\"titleId\"\n                  :title-class=\"ns.e('title')\"\n                />\n                <slot v-else name=\"title\" />\n              </template>\n              <slot />\n              <template v-if=\"$slots.footer\" #footer>\n                <slot name=\"footer\" />\n              </template>\n            </el-dialog-content>\n          </el-focus-trap>\n        </div>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, useSlots } from 'vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useDeprecated, useNamespace, useSameTarget } from '@element-plus/hooks'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElDialogContent from './dialog-content.vue'\nimport { dialogInjectionKey } from './constants'\nimport { dialogEmits, dialogPropsDefaults } from './dialog'\nimport { useDialog } from './use-dialog'\n\nimport type { DialogProps } from './dialog'\n\ndefineOptions({\n  name: 'ElDialog',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<DialogProps>(), dialogPropsDefaults)\ndefineEmits(dialogEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-dialog',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/dialog.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst ns = useNamespace('dialog')\nconst dialogRef = ref<HTMLElement>()\nconst headerRef = ref<HTMLElement>()\nconst dialogContentRef = ref()\n\nconst {\n  visible,\n  titleId,\n  bodyId,\n  style,\n  overlayDialogStyle,\n  rendered,\n  transitionConfig,\n  zIndex,\n  _draggable,\n  _alignCenter,\n  _overflow,\n  handleClose,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onCloseRequested,\n  onFocusoutPrevented,\n  closing,\n} = useDialog(props, dialogRef)\n\nprovide(dialogInjectionKey, {\n  dialogRef,\n  headerRef,\n  bodyId,\n  ns,\n  rendered,\n  style,\n})\n\nconst overlayEvent = useSameTarget(onModalClick)\n\nconst penetrable = computed(\n  () => props.modalPenetrable && !props.modal && !props.fullscreen\n)\n\nconst resetPosition = () => {\n  dialogContentRef.value?.resetPosition()\n}\n\ndefineExpose({\n  /** @description whether the dialog is visible */\n  visible,\n  dialogContentRef,\n  resetPosition,\n  handleClose,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"dialog.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\n    <transition v-bind=\"transitionConfig\">\n      <el-overlay\n        v-show=\"visible\"\n        custom-mask-event\n        :mask=\"modal\"\n        :overlay-class=\"[\n          modalClass ?? '',\n          `${ns.namespace.value}-modal-dialog`,\n          ns.is('penetrable', penetrable),\n        ]\"\n        :z-index=\"zIndex\"\n      >\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"title || undefined\"\n          :aria-labelledby=\"!title ? titleId : undefined\"\n          :aria-describedby=\"bodyId\"\n          :class=\"[\n            `${ns.namespace.value}-overlay-dialog`,\n            ns.is('closing', closing),\n          ]\"\n          :style=\"overlayDialogStyle\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <el-focus-trap\n            loop\n            :trapped=\"visible\"\n            focus-start-el=\"container\"\n            @focus-after-trapped=\"onOpenAutoFocus\"\n            @focus-after-released=\"onCloseAutoFocus\"\n            @focusout-prevented=\"onFocusoutPrevented\"\n            @release-requested=\"onCloseRequested\"\n          >\n            <el-dialog-content\n              v-if=\"rendered\"\n              ref=\"dialogContentRef\"\n              v-bind=\"$attrs\"\n              :center=\"center\"\n              :align-center=\"_alignCenter\"\n              :close-icon=\"closeIcon\"\n              :draggable=\"_draggable\"\n              :overflow=\"_overflow\"\n              :fullscreen=\"fullscreen\"\n              :header-class=\"headerClass\"\n              :body-class=\"bodyClass\"\n              :footer-class=\"footerClass\"\n              :show-close=\"showClose\"\n              :title=\"title\"\n              :aria-level=\"headerAriaLevel\"\n              @close=\"handleClose\"\n              @mousedown=\"bringToFront\"\n            >\n              <template #header>\n                <slot\n                  v-if=\"!$slots.title\"\n                  name=\"header\"\n                  :close=\"handleClose\"\n                  :title-id=\"titleId\"\n                  :title-class=\"ns.e('title')\"\n                />\n                <slot v-else name=\"title\" />\n              </template>\n              <slot />\n              <template v-if=\"$slots.footer\" #footer>\n                <slot name=\"footer\" />\n              </template>\n            </el-dialog-content>\n          </el-focus-trap>\n        </div>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, useSlots } from 'vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useDeprecated, useNamespace, useSameTarget } from '@element-plus/hooks'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElDialogContent from './dialog-content.vue'\nimport { dialogInjectionKey } from './constants'\nimport { dialogEmits, dialogPropsDefaults } from './dialog'\nimport { useDialog } from './use-dialog'\n\nimport type { DialogProps } from './dialog'\n\ndefineOptions({\n  name: 'ElDialog',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<DialogProps>(), dialogPropsDefaults)\ndefineEmits(dialogEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-dialog',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/dialog.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst ns = useNamespace('dialog')\nconst dialogRef = ref<HTMLElement>()\nconst headerRef = ref<HTMLElement>()\nconst dialogContentRef = ref()\n\nconst {\n  visible,\n  titleId,\n  bodyId,\n  style,\n  overlayDialogStyle,\n  rendered,\n  transitionConfig,\n  zIndex,\n  _draggable,\n  _alignCenter,\n  _overflow,\n  penetrable,\n  handleClose,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onCloseRequested,\n  onFocusoutPrevented,\n  bringToFront,\n  closing,\n} = useDialog(props, dialogRef)\n\nprovide(dialogInjectionKey, {\n  dialogRef,\n  headerRef,\n  bodyId,\n  ns,\n  rendered,\n  style,\n})\n\nconst overlayEvent = useSameTarget(onModalClick)\n\nconst resetPosition = () => {\n  dialogContentRef.value?.resetPosition()\n}\n\ndefineExpose({\n  /** @description whether the dialog is visible */\n  visible,\n  dialogContentRef,\n  resetPosition,\n  handleClose,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAoGA,MAAM,QAAQ;EAEd,MAAM,2BAAiB;AAEvB,gCACE;GACE,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS;GACT,KAAK;GACN,0BACc,CAAC,CAAC,MAAM,MAAK,CAC9B;EAEA,MAAM,KAAK,6BAAa,SAAQ;EAChC,MAAM,0BAA6B;EACnC,MAAM,0BAA6B;EACnC,MAAM,iCAAuB;EAE7B,MAAM,EACJ,SACA,SACA,QACA,OACA,oBACA,UACA,kBACA,QACA,YACA,cACA,WACA,YACA,aACA,cACA,iBACA,kBACA,kBACA,qBACA,cACA,YACE,6BAAU,OAAO,UAAS;AAE9B,mBAAQ,sCAAoB;GAC1B;GACA;GACA;GACA;GACA;GACA;GACD,CAAA;EAED,MAAM,eAAe,8BAAc,aAAY;EAE/C,MAAM,sBAAsB;AAC1B,oBAAiB,OAAO,eAAc;;AAGxC,WAAa;GAEX;GACA;GACA;GACA;GACD,CAAA;;oEArFe,yBAAA,EAAA;IA7EX,IAAI,QAAA;IACJ,UAAU,QAAA,aAAQ,SAAA,QAAA,CAAuB,QAAA;;oCA2E7B,sBAAA,mDAAA,iBAzEuB,EAAA,EAApC,WAAA,IAyEa,CAAA,EAAA;qCADE,6DAAA,0BAAA,EAAA;MArEX,qBAAA;MACC,MAAM,QAAA;MACN,iBAAa;OAAc,QAAA,cAAU;yBAAqB,GAAE,CAAC,UAAU,MAAK;sBAA2B,GAAE,CAAC,GAAE,6BAAe,WAAU,CAAA;;MAKrI,0BAAS,OAAA;;sCA6DJ,6BAAA,OAAA;OA1DJ,MAAK;OACL,cAAW;OACV,cAAY,QAAA,SAAS;OACrB,mBAAe,CAAG,QAAA,uBAAQ,QAAO,GAAG;OACpC,mCAAkB,OAAM;OACxB,+BAAK,mBAAmB,GAAE,CAAC,UAAU,MAAK,iCAA+B,GAAE,CAAC,GAAE,0BAAY,QAAO,CAAA;OAIjG,8CAAO,mBAAkB,CAAA;OACzB,SAAK,OAAA,OAAA,OAAA,iCAAE,aAAY,CAAC,0BAAb,aAAY,CAAC,QAAO,GAAA,KAAA;OAC3B,aAAS,OAAA,OAAA,OAAA,iCAAE,aAAY,CAAC,8BAAb,aAAY,CAAC,YAAW,GAAA,KAAA;OACnC,WAAO,OAAA,OAAA,OAAA,iCAAE,aAAY,CAAC,4BAAb,aAAY,CAAC,UAAS,GAAA,KAAA;8CA6ChB,wBAAA,EAAA;OA1Cd,MAAA;OACC,wBAAS,QAAO;OACjB,kBAAe;OACd,oCAAqB,gBAAe;OACpC,qCAAsB,iBAAgB;OACtC,oCAAoB,oBAAmB;OACvC,mCAAmB,iBAAA;;uCAmCA,gBAhCZ,SAAQ,+CAgCI,oDAAA;;iBA/Bd;QAAJ,KAAI;UACIA,KAAAA,QAAM;QACb,QAAQ,QAAA;QACR,+BAAc,aAAY;QAC1B,cAAY,QAAA;QACZ,0BAAW,WAAU;QACrB,yBAAU,UAAS;QACnB,YAAY,QAAA;QACZ,gBAAc,QAAA;QACd,cAAY,QAAA;QACZ,gBAAc,QAAA;QACd,cAAY,QAAA;QACZ,OAAO,QAAA;QACP,cAAY,QAAA;QACZ,wBAAO,YAAW;QAClB,4BAAW,aAAA;;QAED,+BAOP,EALOC,KAAAA,OAAO,4BAKd,KAAA,QAAA,UAAA;;SAHC,sBAAO,YAAW;SAClB,wBAAU,QAAO;SACjB,2BAAa,GAAE,CAAC,EAAC,QAAA;iCAEQ,KAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA;wCAEtB,qBAAA,KAAA,QAAA,UAAA;;WACQA,KAAAA,OAAO;cAAS;mCACR,qBAAA,KAAA,QAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAjEtB,QAAO,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"dialog2.js","names":[],"sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\n    <transition v-bind=\"transitionConfig\">\n      <el-overlay\n        v-show=\"visible\"\n        custom-mask-event\n        :mask=\"modal\"\n        :overlay-class=\"[\n          modalClass ?? '',\n          `${ns.namespace.value}-modal-dialog`,\n          ns.is('penetrable', penetrable),\n        ]\"\n        :z-index=\"zIndex\"\n      >\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"title || undefined\"\n          :aria-labelledby=\"!title ? titleId : undefined\"\n          :aria-describedby=\"bodyId\"\n          :class=\"[\n            `${ns.namespace.value}-overlay-dialog`,\n            ns.is('closing', closing),\n          ]\"\n          :style=\"overlayDialogStyle\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <el-focus-trap\n            loop\n            :trapped=\"visible\"\n            focus-start-el=\"container\"\n            @focus-after-trapped=\"onOpenAutoFocus\"\n            @focus-after-released=\"onCloseAutoFocus\"\n            @focusout-prevented=\"onFocusoutPrevented\"\n            @release-requested=\"onCloseRequested\"\n          >\n            <el-dialog-content\n              v-if=\"rendered\"\n              ref=\"dialogContentRef\"\n              v-bind=\"$attrs\"\n              :center=\"center\"\n              :align-center=\"_alignCenter\"\n              :close-icon=\"closeIcon\"\n              :draggable=\"_draggable\"\n              :overflow=\"_overflow\"\n              :fullscreen=\"fullscreen\"\n              :header-class=\"headerClass\"\n              :body-class=\"bodyClass\"\n              :footer-class=\"footerClass\"\n              :show-close=\"showClose\"\n              :title=\"title\"\n              :aria-level=\"headerAriaLevel\"\n              @close=\"handleClose\"\n            >\n              <template #header>\n                <slot\n                  v-if=\"!$slots.title\"\n                  name=\"header\"\n                  :close=\"handleClose\"\n                  :title-id=\"titleId\"\n                  :title-class=\"ns.e('title')\"\n                />\n                <slot v-else name=\"title\" />\n              </template>\n              <slot />\n              <template v-if=\"$slots.footer\" #footer>\n                <slot name=\"footer\" />\n              </template>\n            </el-dialog-content>\n          </el-focus-trap>\n        </div>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, useSlots } from 'vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useDeprecated, useNamespace, useSameTarget } from '@element-plus/hooks'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElDialogContent from './dialog-content.vue'\nimport { dialogInjectionKey } from './constants'\nimport { dialogEmits, dialogPropsDefaults } from './dialog'\nimport { useDialog } from './use-dialog'\n\nimport type { DialogProps } from './dialog'\n\ndefineOptions({\n  name: 'ElDialog',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<DialogProps>(), dialogPropsDefaults)\ndefineEmits(dialogEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-dialog',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/dialog.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst ns = useNamespace('dialog')\nconst dialogRef = ref<HTMLElement>()\nconst headerRef = ref<HTMLElement>()\nconst dialogContentRef = ref()\n\nconst {\n  visible,\n  titleId,\n  bodyId,\n  style,\n  overlayDialogStyle,\n  rendered,\n  transitionConfig,\n  zIndex,\n  _draggable,\n  _alignCenter,\n  _overflow,\n  handleClose,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onCloseRequested,\n  onFocusoutPrevented,\n  closing,\n} = useDialog(props, dialogRef)\n\nprovide(dialogInjectionKey, {\n  dialogRef,\n  headerRef,\n  bodyId,\n  ns,\n  rendered,\n  style,\n})\n\nconst overlayEvent = useSameTarget(onModalClick)\n\nconst penetrable = computed(\n  () => props.modalPenetrable && !props.modal && !props.fullscreen\n)\n\nconst resetPosition = () => {\n  dialogContentRef.value?.resetPosition()\n}\n\ndefineExpose({\n  /** @description whether the dialog is visible */\n  visible,\n  dialogContentRef,\n  resetPosition,\n  handleClose,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"dialog2.js","names":[],"sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\n    <transition v-bind=\"transitionConfig\">\n      <el-overlay\n        v-show=\"visible\"\n        custom-mask-event\n        :mask=\"modal\"\n        :overlay-class=\"[\n          modalClass ?? '',\n          `${ns.namespace.value}-modal-dialog`,\n          ns.is('penetrable', penetrable),\n        ]\"\n        :z-index=\"zIndex\"\n      >\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"title || undefined\"\n          :aria-labelledby=\"!title ? titleId : undefined\"\n          :aria-describedby=\"bodyId\"\n          :class=\"[\n            `${ns.namespace.value}-overlay-dialog`,\n            ns.is('closing', closing),\n          ]\"\n          :style=\"overlayDialogStyle\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <el-focus-trap\n            loop\n            :trapped=\"visible\"\n            focus-start-el=\"container\"\n            @focus-after-trapped=\"onOpenAutoFocus\"\n            @focus-after-released=\"onCloseAutoFocus\"\n            @focusout-prevented=\"onFocusoutPrevented\"\n            @release-requested=\"onCloseRequested\"\n          >\n            <el-dialog-content\n              v-if=\"rendered\"\n              ref=\"dialogContentRef\"\n              v-bind=\"$attrs\"\n              :center=\"center\"\n              :align-center=\"_alignCenter\"\n              :close-icon=\"closeIcon\"\n              :draggable=\"_draggable\"\n              :overflow=\"_overflow\"\n              :fullscreen=\"fullscreen\"\n              :header-class=\"headerClass\"\n              :body-class=\"bodyClass\"\n              :footer-class=\"footerClass\"\n              :show-close=\"showClose\"\n              :title=\"title\"\n              :aria-level=\"headerAriaLevel\"\n              @close=\"handleClose\"\n              @mousedown=\"bringToFront\"\n            >\n              <template #header>\n                <slot\n                  v-if=\"!$slots.title\"\n                  name=\"header\"\n                  :close=\"handleClose\"\n                  :title-id=\"titleId\"\n                  :title-class=\"ns.e('title')\"\n                />\n                <slot v-else name=\"title\" />\n              </template>\n              <slot />\n              <template v-if=\"$slots.footer\" #footer>\n                <slot name=\"footer\" />\n              </template>\n            </el-dialog-content>\n          </el-focus-trap>\n        </div>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, useSlots } from 'vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useDeprecated, useNamespace, useSameTarget } from '@element-plus/hooks'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElDialogContent from './dialog-content.vue'\nimport { dialogInjectionKey } from './constants'\nimport { dialogEmits, dialogPropsDefaults } from './dialog'\nimport { useDialog } from './use-dialog'\n\nimport type { DialogProps } from './dialog'\n\ndefineOptions({\n  name: 'ElDialog',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<DialogProps>(), dialogPropsDefaults)\ndefineEmits(dialogEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-dialog',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/dialog.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst ns = useNamespace('dialog')\nconst dialogRef = ref<HTMLElement>()\nconst headerRef = ref<HTMLElement>()\nconst dialogContentRef = ref()\n\nconst {\n  visible,\n  titleId,\n  bodyId,\n  style,\n  overlayDialogStyle,\n  rendered,\n  transitionConfig,\n  zIndex,\n  _draggable,\n  _alignCenter,\n  _overflow,\n  penetrable,\n  handleClose,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onCloseRequested,\n  onFocusoutPrevented,\n  bringToFront,\n  closing,\n} = useDialog(props, dialogRef)\n\nprovide(dialogInjectionKey, {\n  dialogRef,\n  headerRef,\n  bodyId,\n  ns,\n  rendered,\n  style,\n})\n\nconst overlayEvent = useSameTarget(onModalClick)\n\nconst resetPosition = () => {\n  dialogContentRef.value?.resetPosition()\n}\n\ndefineExpose({\n  /** @description whether the dialog is visible */\n  visible,\n  dialogContentRef,\n  resetPosition,\n  handleClose,\n})\n</script>\n"],"mappings":""}

package/lib/components/dialog/src/use-dialog.d.ts

@@ -15,6 +15,7 @@ declare const useDialog: (props: DialogProps, targetRef: Ref<HTMLElement | undef
   onCloseAutoFocus: () => void;
   onCloseRequested: () => void;
   onFocusoutPrevented: (event: CustomEvent) => void;
+  bringToFront: () => void;
   titleId: Ref<string, string>;
   bodyId: Ref<string, string>;
   closed: Ref<boolean, boolean>;
@@ -33,6 +34,7 @@ declare const useDialog: (props: DialogProps, targetRef: Ref<HTMLElement | undef
   _alignCenter: vue.ComputedRef<boolean>;
   _overflow: vue.ComputedRef<boolean>;
   closing: Ref<boolean, boolean>;
+  penetrable: vue.ComputedRef<boolean | undefined>;
 };
 //#endregion
 export { useDialog };

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

@@ -44,6 +44,7 @@ const useDialog = (props, targetRef) => {
 	const _draggable = (0, vue.computed)(() => (props.draggable ?? globalConfig.value?.draggable ?? false) && !props.fullscreen);
 	const _alignCenter = (0, vue.computed)(() => props.alignCenter ?? globalConfig.value?.alignCenter ?? false);
 	const _overflow = (0, vue.computed)(() => props.overflow ?? globalConfig.value?.overflow ?? false);
+	const penetrable = (0, vue.computed)(() => props.modalPenetrable && !props.modal && !props.fullscreen);
 	const overlayDialogStyle = (0, vue.computed)(() => {
 		if (_alignCenter.value) return { display: "flex" };
 		return {};
@@ -135,6 +136,10 @@ const useDialog = (props, targetRef) => {
 	function onCloseRequested() {
 		if (props.closeOnPressEscape) handleClose();
 	}
+	function bringToFront() {
+		if (!visible.value || !penetrable.value || props.zIndex !== void 0) return;
+		zIndex.value = nextZIndex();
+	}
 	(0, vue.watch)(() => props.zIndex, () => {
 		zIndex.value = props.zIndex ?? nextZIndex();
 	});
@@ -181,6 +186,7 @@ const useDialog = (props, targetRef) => {
 		onCloseAutoFocus,
 		onCloseRequested,
 		onFocusoutPrevented,
+		bringToFront,
 		titleId,
 		bodyId,
 		closed,
@@ -193,7 +199,8 @@ const useDialog = (props, targetRef) => {
 		_draggable,
 		_alignCenter,
 		_overflow,
-		closing
+		closing,
+		penetrable
 	};
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"use-dialog.js","names":["useZIndex","useId","useGlobalConfig","defaultNamespace","addUnit","DEFAULT_DIALOG_TRANSITION","UPDATE_MODEL_EVENT","isClient"],"sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport {\n  defaultNamespace,\n  useId,\n  useLockscreen,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport {\n  addUnit,\n  debugWarn,\n  isArray,\n  isClient,\n  isFunction,\n  isObject,\n} from '@element-plus/utils'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\nimport { DEFAULT_DIALOG_TRANSITION } from './constants'\n\nimport type { CSSProperties, Ref, SetupContext, TransitionProps } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nconst COMPONENT_NAME = 'ElDialog'\n\nexport const useDialog = (\n  props: DialogProps,\n  targetRef: Ref<HTMLElement | undefined>\n) => {\n  const instance = getCurrentInstance()!\n  const emit = instance.emit as SetupContext<DialogEmits>['emit']\n  const { nextZIndex } = useZIndex()\n\n  let lastPosition = ''\n  const titleId = useId()\n  const bodyId = useId()\n  const visible = ref(false)\n  const closed = ref(false)\n  const rendered = ref(false) // when destroyOnClose is true, we initialize it as false vise versa\n  const zIndex = ref(props.zIndex ?? nextZIndex())\n  const closing = ref(false)\n\n  let openTimer: (() => void) | undefined = undefined\n  let closeTimer: (() => void) | undefined = undefined\n\n  const config = useGlobalConfig()\n\n  const namespace = computed(() => config.value?.namespace ?? defaultNamespace)\n  const globalConfig = computed(() => config.value?.dialog)\n\n  const style = computed<CSSProperties>(() => {\n    const style: CSSProperties = {}\n    const varPrefix = `--${namespace.value}-dialog` as const\n    if (!props.fullscreen) {\n      if (props.top) {\n        style[`${varPrefix}-margin-top`] = props.top\n      }\n      const width = addUnit(props.width)\n      if (width) {\n        style[`${varPrefix}-width`] = width\n      }\n    }\n    return style\n  })\n\n  const _draggable = computed(\n    () =>\n      (props.draggable ?? globalConfig.value?.draggable ?? false) &&\n      !props.fullscreen\n  )\n\n  const _alignCenter = computed(\n    () => props.alignCenter ?? globalConfig.value?.alignCenter ?? false\n  )\n\n  const _overflow = computed(\n    () => props.overflow ?? globalConfig.value?.overflow ?? false\n  )\n\n  const overlayDialogStyle = computed<CSSProperties>(() => {\n    if (_alignCenter.value) {\n      return { display: 'flex' }\n    }\n    return {}\n  })\n\n  const transitionConfig = computed(() => {\n    const transition =\n      props.transition ??\n      globalConfig.value?.transition ??\n      DEFAULT_DIALOG_TRANSITION\n    const baseConfig = {\n      name: transition,\n      onAfterEnter: afterEnter,\n      onBeforeLeave: beforeLeave,\n      onAfterLeave: afterLeave,\n    }\n    if (isObject(transition)) {\n      const config = { ...transition } as TransitionProps\n      const _mergeHook = (\n        userHook: Arrayable<(el: Element) => void> | undefined,\n        defaultHook: () => void\n      ) => {\n        return (el: Element) => {\n          if (isArray(userHook)) {\n            userHook.forEach((fn) => {\n              if (isFunction(fn)) fn(el)\n            })\n          } else if (isFunction(userHook)) {\n            userHook(el)\n          }\n          defaultHook()\n        }\n      }\n      config.onAfterEnter = _mergeHook(config.onAfterEnter, afterEnter)\n      config.onBeforeLeave = _mergeHook(config.onBeforeLeave, beforeLeave)\n      config.onAfterLeave = _mergeHook(config.onAfterLeave, afterLeave)\n      if (!config.name) {\n        config.name = DEFAULT_DIALOG_TRANSITION\n        debugWarn(\n          COMPONENT_NAME,\n          `transition.name is missing when using object syntax, fallback to '${DEFAULT_DIALOG_TRANSITION}'`\n        )\n      }\n      return config\n    }\n\n    return baseConfig\n  })\n\n  function afterEnter() {\n    emit('opened')\n  }\n\n  function afterLeave() {\n    emit('closed')\n    emit(UPDATE_MODEL_EVENT, false)\n    if (props.destroyOnClose) {\n      rendered.value = false\n    }\n    closing.value = false\n  }\n\n  function beforeLeave() {\n    closing.value = true\n    emit('close')\n  }\n\n  function open() {\n    closeTimer?.()\n    openTimer?.()\n\n    if (props.openDelay && props.openDelay > 0) {\n      ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n    } else {\n      doOpen()\n    }\n  }\n\n  function close() {\n    openTimer?.()\n    closeTimer?.()\n\n    if (props.closeDelay && props.closeDelay > 0) {\n      ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n    } else {\n      doClose()\n    }\n  }\n\n  function handleClose() {\n    function hide(shouldCancel?: boolean) {\n      if (shouldCancel) return\n      closed.value = true\n      visible.value = false\n    }\n\n    if (props.beforeClose) {\n      props.beforeClose(hide)\n    } else {\n      close()\n    }\n  }\n\n  function onModalClick() {\n    if (props.closeOnClickModal) {\n      handleClose()\n    }\n  }\n\n  function doOpen() {\n    if (!isClient) return\n    visible.value = true\n  }\n\n  function doClose() {\n    visible.value = false\n  }\n\n  function onOpenAutoFocus() {\n    emit('openAutoFocus')\n  }\n\n  function onCloseAutoFocus() {\n    emit('closeAutoFocus')\n  }\n\n  function onFocusoutPrevented(event: CustomEvent) {\n    if (event.detail?.focusReason === 'pointer') {\n      event.preventDefault()\n    }\n  }\n\n  if (props.lockScroll) {\n    useLockscreen(visible)\n  }\n\n  function onCloseRequested() {\n    if (props.closeOnPressEscape) {\n      handleClose()\n    }\n  }\n\n  watch(\n    () => props.zIndex,\n    () => {\n      zIndex.value = props.zIndex ?? nextZIndex()\n    }\n  )\n\n  watch(\n    () => props.modelValue,\n    (val) => {\n      if (val) {\n        closed.value = false\n        closing.value = false\n        open()\n        rendered.value = true // enables lazy rendering\n        zIndex.value = props.zIndex ?? nextZIndex()\n        // this.$el.addEventListener('scroll', this.updatePopper)\n        nextTick(() => {\n          emit('open')\n          if (targetRef.value) {\n            targetRef.value.parentElement!.scrollTop = 0\n            targetRef.value.parentElement!.scrollLeft = 0\n            targetRef.value.scrollTop = 0\n          }\n        })\n      } else {\n        // this.$el.removeEventListener('scroll', this.updatePopper\n        if (visible.value) {\n          close()\n        }\n      }\n    }\n  )\n\n  watch(\n    () => props.fullscreen,\n    (val) => {\n      if (!targetRef.value) return\n      if (val) {\n        lastPosition = targetRef.value.style.transform\n        targetRef.value.style.transform = ''\n      } else {\n        targetRef.value.style.transform = lastPosition\n      }\n    }\n  )\n\n  onMounted(() => {\n    if (props.modelValue) {\n      visible.value = true\n      rendered.value = true // enables lazy rendering\n      open()\n    }\n  })\n\n  return {\n    afterEnter,\n    afterLeave,\n    beforeLeave,\n    handleClose,\n    onModalClick,\n    close,\n    doClose,\n    onOpenAutoFocus,\n    onCloseAutoFocus,\n    onCloseRequested,\n    onFocusoutPrevented,\n    titleId,\n    bodyId,\n    closed,\n    style,\n    overlayDialogStyle,\n    rendered,\n    visible,\n    zIndex,\n    transitionConfig,\n    _draggable,\n    _alignCenter,\n    _overflow,\n    closing,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-dialog.js","names":["useZIndex","useId","useGlobalConfig","defaultNamespace","addUnit","DEFAULT_DIALOG_TRANSITION","UPDATE_MODEL_EVENT","isClient"],"sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport {\n  defaultNamespace,\n  useId,\n  useLockscreen,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport {\n  addUnit,\n  debugWarn,\n  isArray,\n  isClient,\n  isFunction,\n  isObject,\n} from '@element-plus/utils'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\nimport { DEFAULT_DIALOG_TRANSITION } from './constants'\n\nimport type { CSSProperties, Ref, SetupContext, TransitionProps } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nconst COMPONENT_NAME = 'ElDialog'\n\nexport const useDialog = (\n  props: DialogProps,\n  targetRef: Ref<HTMLElement | undefined>\n) => {\n  const instance = getCurrentInstance()!\n  const emit = instance.emit as SetupContext<DialogEmits>['emit']\n  const { nextZIndex } = useZIndex()\n\n  let lastPosition = ''\n  const titleId = useId()\n  const bodyId = useId()\n  const visible = ref(false)\n  const closed = ref(false)\n  const rendered = ref(false) // when destroyOnClose is true, we initialize it as false vise versa\n  const zIndex = ref(props.zIndex ?? nextZIndex())\n  const closing = ref(false)\n\n  let openTimer: (() => void) | undefined = undefined\n  let closeTimer: (() => void) | undefined = undefined\n\n  const config = useGlobalConfig()\n\n  const namespace = computed(() => config.value?.namespace ?? defaultNamespace)\n  const globalConfig = computed(() => config.value?.dialog)\n\n  const style = computed<CSSProperties>(() => {\n    const style: CSSProperties = {}\n    const varPrefix = `--${namespace.value}-dialog` as const\n    if (!props.fullscreen) {\n      if (props.top) {\n        style[`${varPrefix}-margin-top`] = props.top\n      }\n      const width = addUnit(props.width)\n      if (width) {\n        style[`${varPrefix}-width`] = width\n      }\n    }\n    return style\n  })\n\n  const _draggable = computed(\n    () =>\n      (props.draggable ?? globalConfig.value?.draggable ?? false) &&\n      !props.fullscreen\n  )\n\n  const _alignCenter = computed(\n    () => props.alignCenter ?? globalConfig.value?.alignCenter ?? false\n  )\n\n  const _overflow = computed(\n    () => props.overflow ?? globalConfig.value?.overflow ?? false\n  )\n\n  const penetrable = computed(\n    () => props.modalPenetrable && !props.modal && !props.fullscreen\n  )\n\n  const overlayDialogStyle = computed<CSSProperties>(() => {\n    if (_alignCenter.value) {\n      return { display: 'flex' }\n    }\n    return {}\n  })\n\n  const transitionConfig = computed(() => {\n    const transition =\n      props.transition ??\n      globalConfig.value?.transition ??\n      DEFAULT_DIALOG_TRANSITION\n    const baseConfig = {\n      name: transition,\n      onAfterEnter: afterEnter,\n      onBeforeLeave: beforeLeave,\n      onAfterLeave: afterLeave,\n    }\n    if (isObject(transition)) {\n      const config = { ...transition } as TransitionProps\n      const _mergeHook = (\n        userHook: Arrayable<(el: Element) => void> | undefined,\n        defaultHook: () => void\n      ) => {\n        return (el: Element) => {\n          if (isArray(userHook)) {\n            userHook.forEach((fn) => {\n              if (isFunction(fn)) fn(el)\n            })\n          } else if (isFunction(userHook)) {\n            userHook(el)\n          }\n          defaultHook()\n        }\n      }\n      config.onAfterEnter = _mergeHook(config.onAfterEnter, afterEnter)\n      config.onBeforeLeave = _mergeHook(config.onBeforeLeave, beforeLeave)\n      config.onAfterLeave = _mergeHook(config.onAfterLeave, afterLeave)\n      if (!config.name) {\n        config.name = DEFAULT_DIALOG_TRANSITION\n        debugWarn(\n          COMPONENT_NAME,\n          `transition.name is missing when using object syntax, fallback to '${DEFAULT_DIALOG_TRANSITION}'`\n        )\n      }\n      return config\n    }\n\n    return baseConfig\n  })\n\n  function afterEnter() {\n    emit('opened')\n  }\n\n  function afterLeave() {\n    emit('closed')\n    emit(UPDATE_MODEL_EVENT, false)\n    if (props.destroyOnClose) {\n      rendered.value = false\n    }\n    closing.value = false\n  }\n\n  function beforeLeave() {\n    closing.value = true\n    emit('close')\n  }\n\n  function open() {\n    closeTimer?.()\n    openTimer?.()\n\n    if (props.openDelay && props.openDelay > 0) {\n      ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n    } else {\n      doOpen()\n    }\n  }\n\n  function close() {\n    openTimer?.()\n    closeTimer?.()\n\n    if (props.closeDelay && props.closeDelay > 0) {\n      ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n    } else {\n      doClose()\n    }\n  }\n\n  function handleClose() {\n    function hide(shouldCancel?: boolean) {\n      if (shouldCancel) return\n      closed.value = true\n      visible.value = false\n    }\n\n    if (props.beforeClose) {\n      props.beforeClose(hide)\n    } else {\n      close()\n    }\n  }\n\n  function onModalClick() {\n    if (props.closeOnClickModal) {\n      handleClose()\n    }\n  }\n\n  function doOpen() {\n    if (!isClient) return\n    visible.value = true\n  }\n\n  function doClose() {\n    visible.value = false\n  }\n\n  function onOpenAutoFocus() {\n    emit('openAutoFocus')\n  }\n\n  function onCloseAutoFocus() {\n    emit('closeAutoFocus')\n  }\n\n  function onFocusoutPrevented(event: CustomEvent) {\n    if (event.detail?.focusReason === 'pointer') {\n      event.preventDefault()\n    }\n  }\n\n  if (props.lockScroll) {\n    useLockscreen(visible)\n  }\n\n  function onCloseRequested() {\n    if (props.closeOnPressEscape) {\n      handleClose()\n    }\n  }\n\n  function bringToFront() {\n    if (!visible.value || !penetrable.value || props.zIndex !== undefined) {\n      return\n    }\n\n    zIndex.value = nextZIndex()\n  }\n\n  watch(\n    () => props.zIndex,\n    () => {\n      zIndex.value = props.zIndex ?? nextZIndex()\n    }\n  )\n\n  watch(\n    () => props.modelValue,\n    (val) => {\n      if (val) {\n        closed.value = false\n        closing.value = false\n        open()\n        rendered.value = true // enables lazy rendering\n        zIndex.value = props.zIndex ?? nextZIndex()\n        // this.$el.addEventListener('scroll', this.updatePopper)\n        nextTick(() => {\n          emit('open')\n          if (targetRef.value) {\n            targetRef.value.parentElement!.scrollTop = 0\n            targetRef.value.parentElement!.scrollLeft = 0\n            targetRef.value.scrollTop = 0\n          }\n        })\n      } else {\n        // this.$el.removeEventListener('scroll', this.updatePopper\n        if (visible.value) {\n          close()\n        }\n      }\n    }\n  )\n\n  watch(\n    () => props.fullscreen,\n    (val) => {\n      if (!targetRef.value) return\n      if (val) {\n        lastPosition = targetRef.value.style.transform\n        targetRef.value.style.transform = ''\n      } else {\n        targetRef.value.style.transform = lastPosition\n      }\n    }\n  )\n\n  onMounted(() => {\n    if (props.modelValue) {\n      visible.value = true\n      rendered.value = true // enables lazy rendering\n      open()\n    }\n  })\n\n  return {\n    afterEnter,\n    afterLeave,\n    beforeLeave,\n    handleClose,\n    onModalClick,\n    close,\n    doClose,\n    onOpenAutoFocus,\n    onCloseAutoFocus,\n    onCloseRequested,\n    onFocusoutPrevented,\n    bringToFront,\n    titleId,\n    bodyId,\n    closed,\n    style,\n    overlayDialogStyle,\n    rendered,\n    visible,\n    zIndex,\n    transitionConfig,\n    _draggable,\n    _alignCenter,\n    _overflow,\n    closing,\n    penetrable,\n  }\n}\n"],"mappings":"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"}

package/lib/components/divider/src/divider.d.ts

@@ -24,7 +24,7 @@ interface DividerProps {
  */
 declare const dividerProps: {
   readonly direction: EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
-  readonly contentPosition: EpPropFinalized<StringConstructor, "center" | "left" | "right", unknown, "center", boolean>;
+  readonly contentPosition: EpPropFinalized<StringConstructor, "right" | "left" | "center", unknown, "center", boolean>;
   readonly borderStyle: EpPropFinalized<(new (...args: any[]) => string) | (() => string) | (((new (...args: any[]) => string) | (() => string)) | null)[], unknown, unknown, "solid", boolean>;
 };
 /**

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

@@ -7,8 +7,8 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: vue.DefineComponent<DividerProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<DividerProps> & Readonly<{}>, {
-  borderStyle: BorderStyle;
   direction: "horizontal" | "vertical";
+  borderStyle: BorderStyle;
   contentPosition: "left" | "center" | "right";
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -45,22 +45,22 @@ declare const __VLS_base: vue.DefineComponent<DrawerProps, {
   "onResize-start"?: ((evt: MouseEvent, size: number) => any) | undefined;
   "onResize-end"?: ((evt: MouseEvent, size: number) => any) | undefined;
 }>, {
-  appendTo: string | HTMLElement;
-  title: string;
   size: string | number;
-  transition: DialogTransition;
   direction: "ltr" | "rtl" | "ttb" | "btt";
+  alignCenter: boolean;
+  title: string;
+  appendTo: string | HTMLElement;
+  transition: DialogTransition;
   overflow: boolean;
-  closeOnClickModal: boolean;
+  showClose: boolean;
   closeOnPressEscape: boolean;
+  draggable: boolean;
+  closeOnClickModal: boolean;
   lockScroll: boolean;
   modal: boolean;
   openDelay: number;
   closeDelay: number;
   headerAriaLevel: string;
-  alignCenter: boolean;
-  draggable: boolean;
-  showClose: boolean;
   ariaLevel: string;
   withHeader: boolean;
   modalFade: boolean;

package/lib/components/dropdown/src/dropdown-item.vue.d.ts

@@ -29,8 +29,8 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     icon: EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown> | undefined;
     textValue: string | undefined;
     onClick: ((...args: any[]) => any) | undefined;
-    onPointermove: ((...args: any[]) => any) | undefined;
     onPointerleave: ((...args: any[]) => any) | undefined;
+    onPointermove: ((...args: any[]) => any) | undefined;
   }>;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "pointerleave" | "pointermove")[], "click" | "pointerleave" | "pointermove", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
   readonly command: EpPropFinalized<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown, () => {}, boolean>;
@@ -45,8 +45,8 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   };
 }>> & Readonly<{
   onClick?: ((...args: any[]) => any) | undefined;
-  onPointermove?: ((...args: any[]) => any) | undefined;
   onPointerleave?: ((...args: any[]) => any) | undefined;
+  onPointermove?: ((...args: any[]) => any) | undefined;
 }>, {
   readonly disabled: boolean;
   readonly command: EpPropMergeType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
@@ -148,8 +148,8 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     };
   }>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
-    onPointermove?: ((...args: any[]) => any) | undefined;
     onPointerleave?: ((...args: any[]) => any) | undefined;
+    onPointermove?: ((...args: any[]) => any) | undefined;
     onClickimpl?: ((...args: any[]) => any) | undefined;
   }>, {
     readonly disabled: boolean;

package/lib/components/dropdown/src/dropdown-menu.vue.d.ts

@@ -13,7 +13,7 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   size: vue.ComputedRef<string> | undefined;
   rovingFocusGroupRootStyle: vue.Ref<vue.StyleValue, vue.StyleValue>;
   dropdownKls: vue.ComputedRef<string[]>;
-  role: vue.ComputedRef<"listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree" | undefined>;
+  role: vue.ComputedRef<"dialog" | "tree" | "menu" | "tooltip" | "grid" | "group" | "listbox" | "navigation" | undefined>;
   triggerId: vue.ComputedRef<string>;
   dropdownListWrapperRef: (el: Element | vue.ComponentPublicInstance | null) => void;
   handleKeydown: (event: KeyboardEvent) => void;

package/lib/components/dropdown/src/dropdown.d.ts

@@ -46,12 +46,12 @@ declare const dropdownProps: {
     readonly __epPropKey: true;
   };
   readonly type: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (((new (...args: any[]) => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger") | (() => "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger")) | null)[], unknown, unknown>>;
+    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "" | "default" | "success" | "primary" | "info" | "warning" | "danger" | "text") | (() => "" | "default" | "success" | "primary" | "info" | "warning" | "danger" | "text") | (((new (...args: any[]) => "" | "default" | "success" | "primary" | "info" | "warning" | "danger" | "text") | (() => "" | "default" | "success" | "primary" | "info" | "warning" | "danger" | "text")) | null)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "bottom-start" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement$1) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "bottom-start" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement$1)) | null)[], unknown, unknown, "bottom", boolean>;
+  readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "right" | "bottom" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement$1) | (((new (...args: any[]) => "top" | "right" | "bottom" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement$1)) | null)[], unknown, unknown, "bottom", boolean>;
   readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
   readonly id: StringConstructor;
   readonly size: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
@@ -172,7 +172,7 @@ declare const dropdownProps: {
     __epPropKey: true;
   };
   readonly disabled: BooleanConstructor;
-  readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "menu", boolean>;
+  readonly role: EpPropFinalized<StringConstructor, "dialog" | "tree" | "menu" | "tooltip" | "grid" | "group" | "listbox" | "navigation", unknown, "menu", boolean>;
   readonly buttonProps: {
     readonly type: vue.PropType<Partial<ButtonProps>>;
     readonly required: false;