element-plus 2.13.6 → 2.13.7

package/es/components/dialog/src/dialog.vue_vue_type_script_setup_true_lang.mjs

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

package/es/components/dialog/src/dialog.vue_vue_type_script_setup_true_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.vue_vue_type_script_setup_true_lang.mjs","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.mjs","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":"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"}

package/es/components/dialog/src/dialog2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog2.mjs","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.mjs","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/es/components/dialog/src/use-dialog.d.ts

@@ -1,4 +1,4 @@
-import { DialogProps, DialogTransition } from "./dialog.js";
+import { DialogProps } from "./dialog.js";
 import * as vue from "vue";
 import { CSSProperties, Ref, TransitionProps } from "vue";
 
@@ -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>;
@@ -24,7 +25,7 @@ declare const useDialog: (props: DialogProps, targetRef: Ref<HTMLElement | undef
   visible: Ref<boolean, boolean>;
   zIndex: Ref<number, number>;
   transitionConfig: vue.ComputedRef<TransitionProps | {
-    name: DialogTransition;
+    name: string;
     onAfterEnter: () => void;
     onBeforeLeave: () => void;
     onAfterLeave: () => void;
@@ -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/es/components/dialog/src/use-dialog.mjs

@@ -43,6 +43,7 @@ const useDialog = (props, targetRef) => {
 	const _draggable = computed(() => (props.draggable ?? globalConfig.value?.draggable ?? false) && !props.fullscreen);
 	const _alignCenter = computed(() => props.alignCenter ?? globalConfig.value?.alignCenter ?? false);
 	const _overflow = computed(() => props.overflow ?? globalConfig.value?.overflow ?? false);
+	const penetrable = computed(() => props.modalPenetrable && !props.modal && !props.fullscreen);
 	const overlayDialogStyle = computed(() => {
 		if (_alignCenter.value) return { display: "flex" };
 		return {};
@@ -134,6 +135,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();
+	}
 	watch(() => props.zIndex, () => {
 		zIndex.value = props.zIndex ?? nextZIndex();
 	});
@@ -180,6 +185,7 @@ const useDialog = (props, targetRef) => {
 		onCloseAutoFocus,
 		onCloseRequested,
 		onFocusoutPrevented,
+		bringToFront,
 		titleId,
 		bodyId,
 		closed,
@@ -192,7 +198,8 @@ const useDialog = (props, targetRef) => {
 		_draggable,
 		_alignCenter,
 		_overflow,
-		closing
+		closing,
+		penetrable
 	};
 };
 

package/es/components/dialog/src/use-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-dialog.mjs","names":["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.mjs","names":["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 as string,\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/es/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" | "right" | "left", unknown, "center", boolean>;
+  readonly contentPosition: EpPropFinalized<StringConstructor, "center" | "left" | "right", unknown, "center", boolean>;
   readonly borderStyle: EpPropFinalized<(new (...args: any[]) => string) | (() => string) | (((new (...args: any[]) => string) | (() => string)) | null)[], unknown, unknown, "solid", boolean>;
 };
 /**

package/es/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;
-  appendTo: string | HTMLElement;
   transition: DialogTransition;
   direction: "ltr" | "rtl" | "ttb" | "btt";
   overflow: boolean;
-  draggable: boolean;
-  alignCenter: boolean;
-  showClose: boolean;
-  closeOnPressEscape: boolean;
   closeOnClickModal: boolean;
+  closeOnPressEscape: boolean;
   lockScroll: boolean;
   modal: boolean;
   openDelay: number;
   closeDelay: number;
   headerAriaLevel: string;
+  alignCenter: boolean;
+  draggable: boolean;
+  showClose: boolean;
   ariaLevel: string;
   withHeader: boolean;
   modalFade: boolean;

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

@@ -70,8 +70,8 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     };
     active: BooleanConstructor;
   }>> & Readonly<{
-    onKeydown?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
+    onKeydown?: ((...args: any[]) => any) | undefined;
     onMousedown?: ((...args: any[]) => any) | undefined;
   }>, {
     active: boolean;
@@ -157,24 +157,18 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly divided: boolean;
   }, {}, {
     ElIcon: SFCWithInstall<{
-      new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {
-        size: number | string;
-      }, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+      new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-      }, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, {
-        size: number | string;
-      }>;
+      }, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
       __isFragment?: never;
       __isTeleport?: never;
       __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {
-      size: number | string;
-    }, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    } & vue.ComponentOptionsBase<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
       $slots: {
         default?: (props: {}) => any;
       };

package/es/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<"tooltip" | "dialog" | "grid" | "group" | "listbox" | "menu" | "navigation" | "tree" | undefined>;
+  role: vue.ComputedRef<"listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree" | undefined>;
   triggerId: vue.ComputedRef<string>;
   dropdownListWrapperRef: (el: Element | vue.ComponentPublicInstance | null) => void;
   handleKeydown: (event: KeyboardEvent) => void;

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

@@ -51,7 +51,7 @@ declare const dropdownProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly placement: EpPropFinalized<(new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement$1) | (((new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "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" | "auto" | "bottom" | "left" | "right" | "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" | "auto" | "bottom" | "left" | "right" | "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, "tooltip" | "dialog" | "grid" | "group" | "listbox" | "menu" | "navigation" | "tree", unknown, "menu", boolean>;
+  readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "menu", boolean>;
   readonly buttonProps: {
     readonly type: vue.PropType<Partial<ButtonProps>>;
     readonly required: false;