@element-plus/nightly 0.0.20260406 → 0.0.20260408

package/lib/components/menu/src/utils/menu-item.js

@@ -1,6 +1,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
-const require_aria = require('../../../../utils/dom/aria.js');
-const require_aria$1 = require('../../../../constants/aria.js');
+const require_aria = require('../../../../constants/aria.js');
+const require_aria$1 = require('../../../../utils/dom/aria.js');
 const require_event = require('../../../../utils/dom/event.js');
 const require_submenu = require('./submenu.js');
 
@@ -23,22 +23,22 @@ var MenuItem = class {
 			const code = require_event.getEventCode(event);
 			let prevDef = false;
 			switch (code) {
-				case require_aria$1.EVENT_CODE.down:
-					require_aria.triggerEvent(event.currentTarget, "mouseenter");
+				case require_aria.EVENT_CODE.down:
+					require_aria$1.triggerEvent(event.currentTarget, "mouseenter");
 					this.submenu && this.submenu.gotoSubIndex(0);
 					prevDef = true;
 					break;
-				case require_aria$1.EVENT_CODE.up:
-					require_aria.triggerEvent(event.currentTarget, "mouseenter");
+				case require_aria.EVENT_CODE.up:
+					require_aria$1.triggerEvent(event.currentTarget, "mouseenter");
 					this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
 					prevDef = true;
 					break;
-				case require_aria$1.EVENT_CODE.tab:
-					require_aria.triggerEvent(event.currentTarget, "mouseleave");
+				case require_aria.EVENT_CODE.tab:
+					require_aria$1.triggerEvent(event.currentTarget, "mouseleave");
 					break;
-				case require_aria$1.EVENT_CODE.enter:
-				case require_aria$1.EVENT_CODE.numpadEnter:
-				case require_aria$1.EVENT_CODE.space:
+				case require_aria.EVENT_CODE.enter:
+				case require_aria.EVENT_CODE.numpadEnter:
+				case require_aria.EVENT_CODE.space:
 					prevDef = true;
 					event.currentTarget.click();
 					break;

package/lib/components/menu/src/utils/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","names":["SubMenu","getEventCode","EVENT_CODE"],"sources":["../../../../../../../packages/components/menu/src/utils/menu-item.ts"],"sourcesContent":["// @ts-nocheck\nimport { getEventCode, triggerEvent } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport SubMenu from './submenu'\n\nclass MenuItem {\n  public submenu: SubMenu = null\n  constructor(\n    public domNode: HTMLElement,\n    namespace: string\n  ) {\n    this.submenu = null\n    this.init(namespace)\n  }\n\n  init(namespace: string): void {\n    this.domNode.setAttribute('tabindex', '0')\n    const menuChild = this.domNode.querySelector(`.${namespace}-menu`)\n    if (menuChild) {\n      this.submenu = new SubMenu(this, menuChild)\n    }\n    this.addListeners()\n  }\n\n  addListeners(): void {\n    this.domNode.addEventListener('keydown', (event: KeyboardEvent) => {\n      const code = getEventCode(event)\n      let prevDef = false\n\n      switch (code) {\n        case EVENT_CODE.down: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseenter')\n          this.submenu && this.submenu.gotoSubIndex(0)\n          prevDef = true\n          break\n        }\n        case EVENT_CODE.up: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseenter')\n          this.submenu &&\n            this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1)\n          prevDef = true\n          break\n        }\n        case EVENT_CODE.tab: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseleave')\n          break\n        }\n        case EVENT_CODE.enter:\n        case EVENT_CODE.numpadEnter:\n        case EVENT_CODE.space: {\n          prevDef = true\n          ;(event.currentTarget as HTMLElement).click()\n          break\n        }\n      }\n      if (prevDef) {\n        event.preventDefault()\n      }\n    })\n  }\n}\n\nexport default MenuItem\n"],"mappings":";;;;;;;AAKA,IAAM,WAAN,MAAe;CAEb,YACE,AAAO,SACP,WACA;EAFO;iBAFiB;AAKxB,OAAK,UAAU;AACf,OAAK,KAAK,UAAU;;CAGtB,KAAK,WAAyB;AAC5B,OAAK,QAAQ,aAAa,YAAY,IAAI;EAC1C,MAAM,YAAY,KAAK,QAAQ,cAAc,IAAI,UAAU,OAAO;AAClE,MAAI,UACF,MAAK,UAAU,IAAIA,wBAAQ,MAAM,UAAU;AAE7C,OAAK,cAAc;;CAGrB,eAAqB;AACnB,OAAK,QAAQ,iBAAiB,YAAY,UAAyB;GACjE,MAAM,OAAOC,2BAAa,MAAM;GAChC,IAAI,UAAU;AAEd,WAAQ,MAAR;IACE,KAAKC,0BAAW;AACd,+BAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WAAW,KAAK,QAAQ,aAAa,EAAE;AAC5C,eAAU;AACV;IAEF,KAAKA,0BAAW;AACd,+BAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WACH,KAAK,QAAQ,aAAa,KAAK,QAAQ,aAAa,SAAS,EAAE;AACjE,eAAU;AACV;IAEF,KAAKA,0BAAW;AACd,+BAAa,MAAM,eAA8B,aAAa;AAC9D;IAEF,KAAKA,0BAAW;IAChB,KAAKA,0BAAW;IAChB,KAAKA,0BAAW;AACd,eAAU;AACT,KAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,OAAI,QACF,OAAM,gBAAgB;IAExB"}
+{"version":3,"file":"menu-item.js","names":["SubMenu","getEventCode","EVENT_CODE"],"sources":["../../../../../../../packages/components/menu/src/utils/menu-item.ts"],"sourcesContent":["// @ts-nocheck\nimport { getEventCode, triggerEvent } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport SubMenu from './submenu'\n\nclass MenuItem {\n  public submenu: SubMenu = null\n  constructor(\n    public domNode: HTMLElement,\n    namespace: string\n  ) {\n    this.submenu = null\n    this.init(namespace)\n  }\n\n  init(namespace: string): void {\n    this.domNode.setAttribute('tabindex', '0')\n    const menuChild = this.domNode.querySelector(`.${namespace}-menu`)\n    if (menuChild) {\n      this.submenu = new SubMenu(this, menuChild)\n    }\n    this.addListeners()\n  }\n\n  addListeners(): void {\n    this.domNode.addEventListener('keydown', (event: KeyboardEvent) => {\n      const code = getEventCode(event)\n      let prevDef = false\n\n      switch (code) {\n        case EVENT_CODE.down: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseenter')\n          this.submenu && this.submenu.gotoSubIndex(0)\n          prevDef = true\n          break\n        }\n        case EVENT_CODE.up: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseenter')\n          this.submenu &&\n            this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1)\n          prevDef = true\n          break\n        }\n        case EVENT_CODE.tab: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseleave')\n          break\n        }\n        case EVENT_CODE.enter:\n        case EVENT_CODE.numpadEnter:\n        case EVENT_CODE.space: {\n          prevDef = true\n          ;(event.currentTarget as HTMLElement).click()\n          break\n        }\n      }\n      if (prevDef) {\n        event.preventDefault()\n      }\n    })\n  }\n}\n\nexport default MenuItem\n"],"mappings":";;;;;;;AAKA,IAAM,WAAN,MAAe;CAEb,YACE,AAAO,SACP,WACA;EAFO;iBAFiB;AAKxB,OAAK,UAAU;AACf,OAAK,KAAK,UAAU;;CAGtB,KAAK,WAAyB;AAC5B,OAAK,QAAQ,aAAa,YAAY,IAAI;EAC1C,MAAM,YAAY,KAAK,QAAQ,cAAc,IAAI,UAAU,OAAO;AAClE,MAAI,UACF,MAAK,UAAU,IAAIA,wBAAQ,MAAM,UAAU;AAE7C,OAAK,cAAc;;CAGrB,eAAqB;AACnB,OAAK,QAAQ,iBAAiB,YAAY,UAAyB;GACjE,MAAM,OAAOC,2BAAa,MAAM;GAChC,IAAI,UAAU;AAEd,WAAQ,MAAR;IACE,KAAKC,wBAAW;AACd,iCAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WAAW,KAAK,QAAQ,aAAa,EAAE;AAC5C,eAAU;AACV;IAEF,KAAKA,wBAAW;AACd,iCAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WACH,KAAK,QAAQ,aAAa,KAAK,QAAQ,aAAa,SAAS,EAAE;AACjE,eAAU;AACV;IAEF,KAAKA,wBAAW;AACd,iCAAa,MAAM,eAA8B,aAAa;AAC9D;IAEF,KAAKA,wBAAW;IAChB,KAAKA,wBAAW;IAChB,KAAKA,wBAAW;AACd,eAAU;AACT,KAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,OAAI,QACF,OAAM,gBAAgB;IAExB"}

package/lib/components/menu/src/utils/submenu.js

@@ -1,6 +1,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
-const require_aria = require('../../../../utils/dom/aria.js');
-const require_aria$1 = require('../../../../constants/aria.js');
+const require_aria = require('../../../../constants/aria.js');
+const require_aria$1 = require('../../../../utils/dom/aria.js');
 const require_event = require('../../../../utils/dom/event.js');
 
 //#region ../../packages/components/menu/src/utils/submenu.ts
@@ -29,20 +29,20 @@ var SubMenu = class {
 				const code = require_event.getEventCode(event);
 				let prevDef = false;
 				switch (code) {
-					case require_aria$1.EVENT_CODE.down:
+					case require_aria.EVENT_CODE.down:
 						this.gotoSubIndex(this.subIndex + 1);
 						prevDef = true;
 						break;
-					case require_aria$1.EVENT_CODE.up:
+					case require_aria.EVENT_CODE.up:
 						this.gotoSubIndex(this.subIndex - 1);
 						prevDef = true;
 						break;
-					case require_aria$1.EVENT_CODE.tab:
-						require_aria.triggerEvent(parentNode, "mouseleave");
+					case require_aria.EVENT_CODE.tab:
+						require_aria$1.triggerEvent(parentNode, "mouseleave");
 						break;
-					case require_aria$1.EVENT_CODE.enter:
-					case require_aria$1.EVENT_CODE.numpadEnter:
-					case require_aria$1.EVENT_CODE.space:
+					case require_aria.EVENT_CODE.enter:
+					case require_aria.EVENT_CODE.numpadEnter:
+					case require_aria.EVENT_CODE.space:
 						prevDef = true;
 						event.currentTarget.click();
 						break;

package/lib/components/menu/src/utils/submenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"submenu.js","names":["getEventCode","EVENT_CODE"],"sources":["../../../../../../../packages/components/menu/src/utils/submenu.ts"],"sourcesContent":["// @ts-nocheck\nimport { getEventCode, triggerEvent } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\n\nimport type MenuItem from './menu-item'\n\nclass SubMenu {\n  public subMenuItems: NodeList\n  public subIndex = 0\n  constructor(\n    public parent: MenuItem,\n    public domNode: ParentNode\n  ) {\n    this.subIndex = 0\n    this.init()\n  }\n\n  init(): void {\n    this.subMenuItems = this.domNode.querySelectorAll('li')\n    this.addListeners()\n  }\n\n  gotoSubIndex(idx: number): void {\n    if (idx === this.subMenuItems.length) {\n      idx = 0\n    } else if (idx < 0) {\n      idx = this.subMenuItems.length - 1\n    }\n    ;(this.subMenuItems[idx] as HTMLElement).focus()\n    this.subIndex = idx\n  }\n\n  addListeners(): void {\n    const parentNode = this.parent.domNode\n    Array.prototype.forEach.call(this.subMenuItems, (el: Element) => {\n      el.addEventListener('keydown', (event: KeyboardEvent) => {\n        const code = getEventCode(event)\n        let prevDef = false\n\n        switch (code) {\n          case EVENT_CODE.down: {\n            this.gotoSubIndex(this.subIndex + 1)\n            prevDef = true\n            break\n          }\n          case EVENT_CODE.up: {\n            this.gotoSubIndex(this.subIndex - 1)\n            prevDef = true\n            break\n          }\n          case EVENT_CODE.tab: {\n            triggerEvent(parentNode as HTMLElement, 'mouseleave')\n            break\n          }\n          case EVENT_CODE.enter:\n          case EVENT_CODE.numpadEnter:\n          case EVENT_CODE.space: {\n            prevDef = true\n            ;(event.currentTarget as HTMLElement).click()\n            break\n          }\n        }\n        if (prevDef) {\n          event.preventDefault()\n          event.stopPropagation()\n        }\n        return false\n      })\n    })\n  }\n}\n\nexport default SubMenu\n"],"mappings":";;;;;;AAMA,IAAM,UAAN,MAAc;CAGZ,YACE,AAAO,QACP,AAAO,SACP;EAFO;EACA;kBAHS;AAKhB,OAAK,WAAW;AAChB,OAAK,MAAM;;CAGb,OAAa;AACX,OAAK,eAAe,KAAK,QAAQ,iBAAiB,KAAK;AACvD,OAAK,cAAc;;CAGrB,aAAa,KAAmB;AAC9B,MAAI,QAAQ,KAAK,aAAa,OAC5B,OAAM;WACG,MAAM,EACf,OAAM,KAAK,aAAa,SAAS;AAElC,EAAC,KAAK,aAAa,KAAqB,OAAO;AAChD,OAAK,WAAW;;CAGlB,eAAqB;EACnB,MAAM,aAAa,KAAK,OAAO;AAC/B,QAAM,UAAU,QAAQ,KAAK,KAAK,eAAe,OAAgB;AAC/D,MAAG,iBAAiB,YAAY,UAAyB;IACvD,MAAM,OAAOA,2BAAa,MAAM;IAChC,IAAI,UAAU;AAEd,YAAQ,MAAR;KACE,KAAKC,0BAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAKA,0BAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAKA,0BAAW;AACd,gCAAa,YAA2B,aAAa;AACrD;KAEF,KAAKA,0BAAW;KAChB,KAAKA,0BAAW;KAChB,KAAKA,0BAAW;AACd,gBAAU;AACT,MAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,QAAI,SAAS;AACX,WAAM,gBAAgB;AACtB,WAAM,iBAAiB;;AAEzB,WAAO;KACP;IACF"}
+{"version":3,"file":"submenu.js","names":["getEventCode","EVENT_CODE"],"sources":["../../../../../../../packages/components/menu/src/utils/submenu.ts"],"sourcesContent":["// @ts-nocheck\nimport { getEventCode, triggerEvent } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\n\nimport type MenuItem from './menu-item'\n\nclass SubMenu {\n  public subMenuItems: NodeList\n  public subIndex = 0\n  constructor(\n    public parent: MenuItem,\n    public domNode: ParentNode\n  ) {\n    this.subIndex = 0\n    this.init()\n  }\n\n  init(): void {\n    this.subMenuItems = this.domNode.querySelectorAll('li')\n    this.addListeners()\n  }\n\n  gotoSubIndex(idx: number): void {\n    if (idx === this.subMenuItems.length) {\n      idx = 0\n    } else if (idx < 0) {\n      idx = this.subMenuItems.length - 1\n    }\n    ;(this.subMenuItems[idx] as HTMLElement).focus()\n    this.subIndex = idx\n  }\n\n  addListeners(): void {\n    const parentNode = this.parent.domNode\n    Array.prototype.forEach.call(this.subMenuItems, (el: Element) => {\n      el.addEventListener('keydown', (event: KeyboardEvent) => {\n        const code = getEventCode(event)\n        let prevDef = false\n\n        switch (code) {\n          case EVENT_CODE.down: {\n            this.gotoSubIndex(this.subIndex + 1)\n            prevDef = true\n            break\n          }\n          case EVENT_CODE.up: {\n            this.gotoSubIndex(this.subIndex - 1)\n            prevDef = true\n            break\n          }\n          case EVENT_CODE.tab: {\n            triggerEvent(parentNode as HTMLElement, 'mouseleave')\n            break\n          }\n          case EVENT_CODE.enter:\n          case EVENT_CODE.numpadEnter:\n          case EVENT_CODE.space: {\n            prevDef = true\n            ;(event.currentTarget as HTMLElement).click()\n            break\n          }\n        }\n        if (prevDef) {\n          event.preventDefault()\n          event.stopPropagation()\n        }\n        return false\n      })\n    })\n  }\n}\n\nexport default SubMenu\n"],"mappings":";;;;;;AAMA,IAAM,UAAN,MAAc;CAGZ,YACE,AAAO,QACP,AAAO,SACP;EAFO;EACA;kBAHS;AAKhB,OAAK,WAAW;AAChB,OAAK,MAAM;;CAGb,OAAa;AACX,OAAK,eAAe,KAAK,QAAQ,iBAAiB,KAAK;AACvD,OAAK,cAAc;;CAGrB,aAAa,KAAmB;AAC9B,MAAI,QAAQ,KAAK,aAAa,OAC5B,OAAM;WACG,MAAM,EACf,OAAM,KAAK,aAAa,SAAS;AAElC,EAAC,KAAK,aAAa,KAAqB,OAAO;AAChD,OAAK,WAAW;;CAGlB,eAAqB;EACnB,MAAM,aAAa,KAAK,OAAO;AAC/B,QAAM,UAAU,QAAQ,KAAK,KAAK,eAAe,OAAgB;AAC/D,MAAG,iBAAiB,YAAY,UAAyB;IACvD,MAAM,OAAOA,2BAAa,MAAM;IAChC,IAAI,UAAU;AAEd,YAAQ,MAAR;KACE,KAAKC,wBAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAKA,wBAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAKA,wBAAW;AACd,kCAAa,YAA2B,aAAa;AACrD;KAEF,KAAKA,wBAAW;KAChB,KAAKA,wBAAW;KAChB,KAAKA,wBAAW;AACd,gBAAU;AACT,MAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,QAAI,SAAS;AACX,WAAM,gBAAgB;AACtB,WAAM,iBAAiB;;AAEzB,WAAO;KACP;IACF"}

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

@@ -18,17 +18,17 @@ declare const __VLS_base: vue.DefineComponent<MessageProps, {
 }, string, vue.PublicProps, Readonly<MessageProps> & Readonly<{
   onDestroy?: (() => any) | undefined;
 }>, {
+  zIndex: number;
+  offset: number;
   type: MessageType;
   onClose: () => void;
-  offset: number;
-  duration: number;
-  zIndex: number;
   id: string;
   icon: IconPropType;
   placement: MessagePlacement;
   plain: boolean;
   message: string | vue.VNode | (() => vue.VNode);
   showClose: boolean;
+  duration: number;
   customClass: string;
   dangerouslyUseHTMLString: boolean;
   grouping: boolean;

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

@@ -38,7 +38,7 @@ var message_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vu
 		const placement = (0, vue.computed)(() => props.placement || require_message.MESSAGE_DEFAULT_PLACEMENT);
 		const lastOffset = (0, vue.computed)(() => require_instance.getLastOffset(props.id, placement.value));
 		const offset = (0, vue.computed)(() => {
-			return require_instance.getOffsetOrSpace(props.id, props.offset, placement.value) + lastOffset.value;
+			return Math.max(require_instance.getOffsetOrSpace(props.id, props.offset, placement.value) + lastOffset.value, props.offset);
 		});
 		const bottom = (0, vue.computed)(() => height.value + offset.value);
 		const horizontalClass = (0, vue.computed)(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"message.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../../packages/components/message/src/message.vue"],"sourcesContent":["<template>\n  <transition\n    :name=\"ns.b('fade')\"\n    @before-enter=\"isStartTransition = true\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      ref=\"messageRef\"\n      :class=\"[\n        ns.b(),\n        { [ns.m(type)]: type },\n        ns.is('closable', showClose),\n        ns.is('plain', plain),\n        ns.is('bottom', verticalProperty === 'bottom'),\n        horizontalClass,\n        customClass,\n      ]\"\n      :style=\"customStyle\"\n      role=\"alert\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n    >\n      <el-badge\n        v-if=\"repeatNum > 1\"\n        :value=\"repeatNum\"\n        :type=\"badgeType\"\n        :class=\"ns.e('badge')\"\n      />\n      <el-icon v-if=\"iconComponent\" :class=\"[ns.e('icon'), typeClass]\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <slot>\n        <p v-if=\"!dangerouslyUseHTMLString\" :class=\"ns.e('content')\">\n          {{ message }}\n        </p>\n        <!-- Caution here, message could've been compromised, never use user's input as message -->\n        <p v-else :class=\"ns.e('content')\" v-html=\"message\" />\n      </slot>\n      <el-icon v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n        <Close />\n      </el-icon>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core'\nimport {\n  TypeComponents,\n  TypeComponentsMap,\n  getEventCode,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport ElBadge from '@element-plus/components/badge'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  MESSAGE_DEFAULT_PLACEMENT,\n  messageDefaults,\n  messageEmits,\n} from './message'\nimport { getLastOffset, getOffsetOrSpace } from './instance'\nimport { omit } from 'lodash-unified'\n\nimport type { BadgeProps } from '@element-plus/components/badge'\nimport type { CSSProperties } from 'vue'\nimport type { MessageProps } from './message'\n\nconst { Close } = TypeComponents\n\ndefineOptions({\n  name: 'ElMessage',\n})\n\nconst props = withDefaults(\n  defineProps<MessageProps>(),\n  omit(messageDefaults, 'appendTo')\n)\nconst emit = defineEmits(messageEmits)\n\nconst isStartTransition = ref(false)\n\nconst { ns, zIndex } = useGlobalComponentSettings('message')\nconst { currentZIndex, nextZIndex } = zIndex\n\nconst messageRef = ref<HTMLDivElement>()\nconst visible = ref(false)\nconst height = ref(0)\n\nlet stopTimer: (() => void) | undefined = undefined\n\nconst badgeType = computed<BadgeProps['type']>(() =>\n  props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'\n)\nconst typeClass = computed(() => {\n  const type = props.type\n  return { [ns.bm('icon', type)]: type && TypeComponentsMap[type] }\n})\nconst iconComponent = computed(\n  () => props.icon || TypeComponentsMap[props.type] || ''\n)\n\nconst placement = computed(() => props.placement || MESSAGE_DEFAULT_PLACEMENT)\n\nconst lastOffset = computed(() => getLastOffset(props.id, placement.value))\nconst offset = computed(() => {\n  return (\n    getOffsetOrSpace(props.id, props.offset, placement.value) + lastOffset.value\n  )\n})\nconst bottom = computed(() => height.value + offset.value)\nconst horizontalClass = computed(() => {\n  if (placement.value.includes('left')) return ns.is('left')\n  if (placement.value.includes('right')) return ns.is('right')\n  return ns.is('center')\n})\n\nconst verticalProperty = computed(() =>\n  placement.value.startsWith('top') ? 'top' : 'bottom'\n)\n\nconst customStyle = computed<CSSProperties>(() => ({\n  [verticalProperty.value]: `${offset.value}px`,\n  zIndex: currentZIndex.value,\n}))\n\nfunction startTimer() {\n  if (props.duration === 0) return\n  ;({ stop: stopTimer } = useTimeoutFn(() => {\n    close()\n  }, props.duration))\n}\n\nfunction clearTimer() {\n  stopTimer?.()\n}\n\nfunction close() {\n  visible.value = false\n\n  // if the message has never started a transition, we can destroy it immediately\n  nextTick(() => {\n    if (!isStartTransition.value) {\n      props.onClose?.()\n      emit('destroy')\n    }\n  })\n}\n\nfunction keydown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n  if (code === EVENT_CODE.esc) {\n    // press esc to close the message\n    close()\n  }\n}\n\nonMounted(() => {\n  startTimer()\n  nextZIndex()\n  visible.value = true\n})\n\nwatch(\n  () => props.repeatNum,\n  () => {\n    clearTimer()\n    startTimer()\n  }\n)\n\nuseEventListener(document, 'keydown', keydown)\n\nuseResizeObserver(messageRef, () => {\n  height.value = messageRef.value!.getBoundingClientRect().height\n})\n\ndefineExpose({\n  visible,\n  bottom,\n  close,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"message.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../../packages/components/message/src/message.vue"],"sourcesContent":["<template>\n  <transition\n    :name=\"ns.b('fade')\"\n    @before-enter=\"isStartTransition = true\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      ref=\"messageRef\"\n      :class=\"[\n        ns.b(),\n        { [ns.m(type)]: type },\n        ns.is('closable', showClose),\n        ns.is('plain', plain),\n        ns.is('bottom', verticalProperty === 'bottom'),\n        horizontalClass,\n        customClass,\n      ]\"\n      :style=\"customStyle\"\n      role=\"alert\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n    >\n      <el-badge\n        v-if=\"repeatNum > 1\"\n        :value=\"repeatNum\"\n        :type=\"badgeType\"\n        :class=\"ns.e('badge')\"\n      />\n      <el-icon v-if=\"iconComponent\" :class=\"[ns.e('icon'), typeClass]\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <slot>\n        <p v-if=\"!dangerouslyUseHTMLString\" :class=\"ns.e('content')\">\n          {{ message }}\n        </p>\n        <!-- Caution here, message could've been compromised, never use user's input as message -->\n        <p v-else :class=\"ns.e('content')\" v-html=\"message\" />\n      </slot>\n      <el-icon v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n        <Close />\n      </el-icon>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core'\nimport {\n  TypeComponents,\n  TypeComponentsMap,\n  getEventCode,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport ElBadge from '@element-plus/components/badge'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  MESSAGE_DEFAULT_PLACEMENT,\n  messageDefaults,\n  messageEmits,\n} from './message'\nimport { getLastOffset, getOffsetOrSpace } from './instance'\nimport { omit } from 'lodash-unified'\n\nimport type { BadgeProps } from '@element-plus/components/badge'\nimport type { CSSProperties } from 'vue'\nimport type { MessageProps } from './message'\n\nconst { Close } = TypeComponents\n\ndefineOptions({\n  name: 'ElMessage',\n})\n\nconst props = withDefaults(\n  defineProps<MessageProps>(),\n  omit(messageDefaults, 'appendTo')\n)\nconst emit = defineEmits(messageEmits)\n\nconst isStartTransition = ref(false)\n\nconst { ns, zIndex } = useGlobalComponentSettings('message')\nconst { currentZIndex, nextZIndex } = zIndex\n\nconst messageRef = ref<HTMLDivElement>()\nconst visible = ref(false)\nconst height = ref(0)\n\nlet stopTimer: (() => void) | undefined = undefined\n\nconst badgeType = computed<BadgeProps['type']>(() =>\n  props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'\n)\nconst typeClass = computed(() => {\n  const type = props.type\n  return { [ns.bm('icon', type)]: type && TypeComponentsMap[type] }\n})\nconst iconComponent = computed(\n  () => props.icon || TypeComponentsMap[props.type] || ''\n)\n\nconst placement = computed(() => props.placement || MESSAGE_DEFAULT_PLACEMENT)\n\nconst lastOffset = computed(() => getLastOffset(props.id, placement.value))\nconst offset = computed(() => {\n  return Math.max(\n    getOffsetOrSpace(props.id, props.offset, placement.value) +\n      lastOffset.value,\n    props.offset\n  )\n})\nconst bottom = computed(() => height.value + offset.value)\nconst horizontalClass = computed(() => {\n  if (placement.value.includes('left')) return ns.is('left')\n  if (placement.value.includes('right')) return ns.is('right')\n  return ns.is('center')\n})\n\nconst verticalProperty = computed(() =>\n  placement.value.startsWith('top') ? 'top' : 'bottom'\n)\n\nconst customStyle = computed<CSSProperties>(() => ({\n  [verticalProperty.value]: `${offset.value}px`,\n  zIndex: currentZIndex.value,\n}))\n\nfunction startTimer() {\n  if (props.duration === 0) return\n  ;({ stop: stopTimer } = useTimeoutFn(() => {\n    close()\n  }, props.duration))\n}\n\nfunction clearTimer() {\n  stopTimer?.()\n}\n\nfunction close() {\n  visible.value = false\n\n  // if the message has never started a transition, we can destroy it immediately\n  nextTick(() => {\n    if (!isStartTransition.value) {\n      props.onClose?.()\n      emit('destroy')\n    }\n  })\n}\n\nfunction keydown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n  if (code === EVENT_CODE.esc) {\n    // press esc to close the message\n    close()\n  }\n}\n\nonMounted(() => {\n  startTimer()\n  nextZIndex()\n  visible.value = true\n})\n\nwatch(\n  () => props.repeatNum,\n  () => {\n    clearTimer()\n    startTimer()\n  }\n)\n\nuseEventListener(document, 'keydown', keydown)\n\nuseResizeObserver(messageRef, () => {\n  height.value = messageRef.value!.getBoundingClientRect().height\n})\n\ndefineExpose({\n  visible,\n  bottom,\n  close,\n})\n</script>\n"],"mappings":"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"}

package/lib/components/message/src/message2.js.map

@@ -1 +1 @@
-{"version":3,"file":"message2.js","names":[],"sources":["../../../../../../packages/components/message/src/message.vue"],"sourcesContent":["<template>\n  <transition\n    :name=\"ns.b('fade')\"\n    @before-enter=\"isStartTransition = true\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      ref=\"messageRef\"\n      :class=\"[\n        ns.b(),\n        { [ns.m(type)]: type },\n        ns.is('closable', showClose),\n        ns.is('plain', plain),\n        ns.is('bottom', verticalProperty === 'bottom'),\n        horizontalClass,\n        customClass,\n      ]\"\n      :style=\"customStyle\"\n      role=\"alert\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n    >\n      <el-badge\n        v-if=\"repeatNum > 1\"\n        :value=\"repeatNum\"\n        :type=\"badgeType\"\n        :class=\"ns.e('badge')\"\n      />\n      <el-icon v-if=\"iconComponent\" :class=\"[ns.e('icon'), typeClass]\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <slot>\n        <p v-if=\"!dangerouslyUseHTMLString\" :class=\"ns.e('content')\">\n          {{ message }}\n        </p>\n        <!-- Caution here, message could've been compromised, never use user's input as message -->\n        <p v-else :class=\"ns.e('content')\" v-html=\"message\" />\n      </slot>\n      <el-icon v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n        <Close />\n      </el-icon>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core'\nimport {\n  TypeComponents,\n  TypeComponentsMap,\n  getEventCode,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport ElBadge from '@element-plus/components/badge'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  MESSAGE_DEFAULT_PLACEMENT,\n  messageDefaults,\n  messageEmits,\n} from './message'\nimport { getLastOffset, getOffsetOrSpace } from './instance'\nimport { omit } from 'lodash-unified'\n\nimport type { BadgeProps } from '@element-plus/components/badge'\nimport type { CSSProperties } from 'vue'\nimport type { MessageProps } from './message'\n\nconst { Close } = TypeComponents\n\ndefineOptions({\n  name: 'ElMessage',\n})\n\nconst props = withDefaults(\n  defineProps<MessageProps>(),\n  omit(messageDefaults, 'appendTo')\n)\nconst emit = defineEmits(messageEmits)\n\nconst isStartTransition = ref(false)\n\nconst { ns, zIndex } = useGlobalComponentSettings('message')\nconst { currentZIndex, nextZIndex } = zIndex\n\nconst messageRef = ref<HTMLDivElement>()\nconst visible = ref(false)\nconst height = ref(0)\n\nlet stopTimer: (() => void) | undefined = undefined\n\nconst badgeType = computed<BadgeProps['type']>(() =>\n  props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'\n)\nconst typeClass = computed(() => {\n  const type = props.type\n  return { [ns.bm('icon', type)]: type && TypeComponentsMap[type] }\n})\nconst iconComponent = computed(\n  () => props.icon || TypeComponentsMap[props.type] || ''\n)\n\nconst placement = computed(() => props.placement || MESSAGE_DEFAULT_PLACEMENT)\n\nconst lastOffset = computed(() => getLastOffset(props.id, placement.value))\nconst offset = computed(() => {\n  return (\n    getOffsetOrSpace(props.id, props.offset, placement.value) + lastOffset.value\n  )\n})\nconst bottom = computed(() => height.value + offset.value)\nconst horizontalClass = computed(() => {\n  if (placement.value.includes('left')) return ns.is('left')\n  if (placement.value.includes('right')) return ns.is('right')\n  return ns.is('center')\n})\n\nconst verticalProperty = computed(() =>\n  placement.value.startsWith('top') ? 'top' : 'bottom'\n)\n\nconst customStyle = computed<CSSProperties>(() => ({\n  [verticalProperty.value]: `${offset.value}px`,\n  zIndex: currentZIndex.value,\n}))\n\nfunction startTimer() {\n  if (props.duration === 0) return\n  ;({ stop: stopTimer } = useTimeoutFn(() => {\n    close()\n  }, props.duration))\n}\n\nfunction clearTimer() {\n  stopTimer?.()\n}\n\nfunction close() {\n  visible.value = false\n\n  // if the message has never started a transition, we can destroy it immediately\n  nextTick(() => {\n    if (!isStartTransition.value) {\n      props.onClose?.()\n      emit('destroy')\n    }\n  })\n}\n\nfunction keydown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n  if (code === EVENT_CODE.esc) {\n    // press esc to close the message\n    close()\n  }\n}\n\nonMounted(() => {\n  startTimer()\n  nextZIndex()\n  visible.value = true\n})\n\nwatch(\n  () => props.repeatNum,\n  () => {\n    clearTimer()\n    startTimer()\n  }\n)\n\nuseEventListener(document, 'keydown', keydown)\n\nuseResizeObserver(messageRef, () => {\n  height.value = messageRef.value!.getBoundingClientRect().height\n})\n\ndefineExpose({\n  visible,\n  bottom,\n  close,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"message2.js","names":[],"sources":["../../../../../../packages/components/message/src/message.vue"],"sourcesContent":["<template>\n  <transition\n    :name=\"ns.b('fade')\"\n    @before-enter=\"isStartTransition = true\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      ref=\"messageRef\"\n      :class=\"[\n        ns.b(),\n        { [ns.m(type)]: type },\n        ns.is('closable', showClose),\n        ns.is('plain', plain),\n        ns.is('bottom', verticalProperty === 'bottom'),\n        horizontalClass,\n        customClass,\n      ]\"\n      :style=\"customStyle\"\n      role=\"alert\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n    >\n      <el-badge\n        v-if=\"repeatNum > 1\"\n        :value=\"repeatNum\"\n        :type=\"badgeType\"\n        :class=\"ns.e('badge')\"\n      />\n      <el-icon v-if=\"iconComponent\" :class=\"[ns.e('icon'), typeClass]\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <slot>\n        <p v-if=\"!dangerouslyUseHTMLString\" :class=\"ns.e('content')\">\n          {{ message }}\n        </p>\n        <!-- Caution here, message could've been compromised, never use user's input as message -->\n        <p v-else :class=\"ns.e('content')\" v-html=\"message\" />\n      </slot>\n      <el-icon v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n        <Close />\n      </el-icon>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core'\nimport {\n  TypeComponents,\n  TypeComponentsMap,\n  getEventCode,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport ElBadge from '@element-plus/components/badge'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  MESSAGE_DEFAULT_PLACEMENT,\n  messageDefaults,\n  messageEmits,\n} from './message'\nimport { getLastOffset, getOffsetOrSpace } from './instance'\nimport { omit } from 'lodash-unified'\n\nimport type { BadgeProps } from '@element-plus/components/badge'\nimport type { CSSProperties } from 'vue'\nimport type { MessageProps } from './message'\n\nconst { Close } = TypeComponents\n\ndefineOptions({\n  name: 'ElMessage',\n})\n\nconst props = withDefaults(\n  defineProps<MessageProps>(),\n  omit(messageDefaults, 'appendTo')\n)\nconst emit = defineEmits(messageEmits)\n\nconst isStartTransition = ref(false)\n\nconst { ns, zIndex } = useGlobalComponentSettings('message')\nconst { currentZIndex, nextZIndex } = zIndex\n\nconst messageRef = ref<HTMLDivElement>()\nconst visible = ref(false)\nconst height = ref(0)\n\nlet stopTimer: (() => void) | undefined = undefined\n\nconst badgeType = computed<BadgeProps['type']>(() =>\n  props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'\n)\nconst typeClass = computed(() => {\n  const type = props.type\n  return { [ns.bm('icon', type)]: type && TypeComponentsMap[type] }\n})\nconst iconComponent = computed(\n  () => props.icon || TypeComponentsMap[props.type] || ''\n)\n\nconst placement = computed(() => props.placement || MESSAGE_DEFAULT_PLACEMENT)\n\nconst lastOffset = computed(() => getLastOffset(props.id, placement.value))\nconst offset = computed(() => {\n  return Math.max(\n    getOffsetOrSpace(props.id, props.offset, placement.value) +\n      lastOffset.value,\n    props.offset\n  )\n})\nconst bottom = computed(() => height.value + offset.value)\nconst horizontalClass = computed(() => {\n  if (placement.value.includes('left')) return ns.is('left')\n  if (placement.value.includes('right')) return ns.is('right')\n  return ns.is('center')\n})\n\nconst verticalProperty = computed(() =>\n  placement.value.startsWith('top') ? 'top' : 'bottom'\n)\n\nconst customStyle = computed<CSSProperties>(() => ({\n  [verticalProperty.value]: `${offset.value}px`,\n  zIndex: currentZIndex.value,\n}))\n\nfunction startTimer() {\n  if (props.duration === 0) return\n  ;({ stop: stopTimer } = useTimeoutFn(() => {\n    close()\n  }, props.duration))\n}\n\nfunction clearTimer() {\n  stopTimer?.()\n}\n\nfunction close() {\n  visible.value = false\n\n  // if the message has never started a transition, we can destroy it immediately\n  nextTick(() => {\n    if (!isStartTransition.value) {\n      props.onClose?.()\n      emit('destroy')\n    }\n  })\n}\n\nfunction keydown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n  if (code === EVENT_CODE.esc) {\n    // press esc to close the message\n    close()\n  }\n}\n\nonMounted(() => {\n  startTimer()\n  nextZIndex()\n  visible.value = true\n})\n\nwatch(\n  () => props.repeatNum,\n  () => {\n    clearTimer()\n    startTimer()\n  }\n)\n\nuseEventListener(document, 'keydown', keydown)\n\nuseResizeObserver(messageRef, () => {\n  height.value = messageRef.value!.getBoundingClientRect().height\n})\n\ndefineExpose({\n  visible,\n  bottom,\n  close,\n})\n</script>\n"],"mappings":""}

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

@@ -17,16 +17,16 @@ declare const __VLS_base: vue.DefineComponent<NotificationProps, {
 }, string, vue.PublicProps, Readonly<NotificationProps> & Readonly<{
   onDestroy?: (() => any) | undefined;
 }>, {
-  title: string;
-  type: NotificationType;
   offset: number;
-  duration: number;
-  onClick: () => void;
   position: NotificationPosition;
+  type: NotificationType;
+  title: string;
   id: string;
+  onClick: () => void;
   message: string | vue.VNode | (() => vue.VNode);
   closeIcon: IconPropType;
   showClose: boolean;
+  duration: number;
   customClass: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -27,8 +27,8 @@ declare const __VLS_base: vue.DefineComponent<PopconfirmProps, {
   onCancel?: ((e: MouseEvent) => any) | undefined;
   onConfirm?: ((e: MouseEvent) => any) | undefined;
 }>, {
-  effect: PopperEffect;
   teleported: boolean;
+  effect: PopperEffect;
   icon: IconPropType;
   hideAfter: number;
   width: string | number;

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

@@ -33,9 +33,9 @@ declare const __VLS_base: vue.DefineComponent<PopoverProps, {
   "onAfter-enter"?: (() => any) | undefined;
   "onAfter-leave"?: (() => any) | undefined;
 }>, {
-  effect: PopperEffect;
   offset: number;
   teleported: boolean;
+  effect: PopperEffect;
   tabindex: string | number;
   visible: boolean | null;
   content: string;

package/lib/components/popper/src/composables/use-focus-trap.d.ts

@@ -4,7 +4,7 @@ import { SetupContext } from "vue";
 
 //#region ../../packages/components/popper/src/composables/use-focus-trap.d.ts
 declare const usePopperContentFocusTrap: (props: PopperContentProps, emit: SetupContext<PopperContentEmits>["emit"]) => {
-  focusStartRef: vue.Ref<HTMLElement | "container" | "first" | undefined, HTMLElement | "container" | "first" | undefined>;
+  focusStartRef: vue.Ref<HTMLElement | "first" | "container" | undefined, HTMLElement | "first" | "container" | undefined>;
   trapped: vue.Ref<boolean, boolean>;
   onFocusAfterReleased: (event: CustomEvent) => void;
   onFocusAfterTrapped: () => void;

package/lib/components/popper/src/content.vue.d.ts

@@ -40,8 +40,8 @@ declare const __VLS_base: vue.DefineComponent<PopperContentProps, {
   onMouseenter?: ((evt: MouseEvent) => any) | undefined;
   onMouseleave?: ((evt: MouseEvent) => any) | undefined;
 }>, {
-  effect: PopperEffect;
   offset: number;
+  effect: PopperEffect;
   visible: boolean;
   style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
   enterable: boolean;

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

@@ -14,7 +14,6 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: vue.DefineComponent<ProgressProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ProgressProps> & Readonly<{}>, {
   type: "line" | "circle" | "dashboard";
-  duration: number;
   color: string | ProgressColor[] | ProgressFn;
   strokeLinecap: NonNullable<vue.SVGAttributes["stroke-linecap"]>;
   strokeWidth: number;
@@ -22,6 +21,7 @@ declare const __VLS_base: vue.DefineComponent<ProgressProps, {}, {}, {}, {}, vue
   format: ProgressFn;
   percentage: number;
   status: "" | "success" | "exception" | "warning";
+  duration: number;
   showText: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/lib/components/radio/src/radio-group.vue.d.ts

@@ -13,9 +13,9 @@ declare const __VLS_base: vue.DefineComponent<RadioGroupProps, {}, {}, {}, {}, v
   onChange?: ((val: string | number | boolean | undefined) => any) | undefined;
   "onUpdate:modelValue"?: ((val: string | number | boolean | undefined) => any) | undefined;
 }>, {
-  type: "radio" | "button";
   fill: string;
   props: radioOptionProp;
+  type: "radio" | "button";
   id: string;
   disabled: boolean;
   modelValue: string | number | boolean;

package/lib/components/roving-focus-group/src/roving-focus-group.d.ts

@@ -23,7 +23,7 @@ declare const rovingFocusGroupProps: {
   loop: BooleanConstructor;
   dir: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
   orientation: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "vertical" | "horizontal") | (() => "vertical" | "horizontal" | undefined) | (((new (...args: any[]) => "vertical" | "horizontal") | (() => "vertical" | "horizontal" | undefined)) | null)[], unknown, unknown>>;
+    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined) | (((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined)) | null)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/lib/components/roving-focus-group/src/roving-focus-group.vue.d.ts

@@ -38,7 +38,7 @@ declare const __VLS_export: vue.DefineComponent<{}, {}, {}, {}, {}, vue.Componen
     loop: BooleanConstructor;
     dir: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
     orientation: {
-      readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "vertical" | "horizontal") | (() => "vertical" | "horizontal" | undefined) | (((new (...args: any[]) => "vertical" | "horizontal") | (() => "vertical" | "horizontal" | undefined)) | null)[], unknown, unknown>>;
+      readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined) | (((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined)) | null)[], unknown, unknown>>;
       readonly required: false;
       readonly validator: ((val: unknown) => boolean) | undefined;
       __epPropKey: true;
@@ -63,7 +63,7 @@ declare const __VLS_export: vue.DefineComponent<{}, {}, {}, {}, {}, vue.Componen
     loop: BooleanConstructor;
     dir: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
     orientation: {
-      readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "vertical" | "horizontal") | (() => "vertical" | "horizontal" | undefined) | (((new (...args: any[]) => "vertical" | "horizontal") | (() => "vertical" | "horizontal" | undefined)) | null)[], unknown, unknown>>;
+      readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined) | (((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical" | undefined)) | null)[], unknown, unknown>>;
       readonly required: false;
       readonly validator: ((val: unknown) => boolean) | undefined;
       __epPropKey: true;

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

@@ -62,7 +62,7 @@ interface SegmentedProps<T extends Option = Option> {
  */
 declare const segmentedProps: {
   ariaLabel: StringConstructor;
-  direction: EpPropFinalized<(new (...args: any[]) => "vertical" | "horizontal") | (() => "vertical" | "horizontal") | (((new (...args: any[]) => "vertical" | "horizontal") | (() => "vertical" | "horizontal")) | null)[], unknown, unknown, string, boolean>;
+  direction: EpPropFinalized<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical") | (((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical")) | null)[], unknown, unknown, string, boolean>;
   options: EpPropFinalized<(new (...args: any[]) => Option[]) | (() => Option[]) | (((new (...args: any[]) => Option[]) | (() => Option[])) | null)[], unknown, unknown, () => never[], boolean>;
   modelValue: EpPropFinalized<(BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown, undefined, boolean>;
   props: EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | (((new (...args: any[]) => Props) | (() => Props)) | null)[], unknown, unknown, () => Required<Props>, boolean>;

package/lib/components/select/src/option.vue.d.ts

@@ -54,6 +54,7 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     hover: boolean;
   };
   hoverItem: () => void;
+  handleMousedown: (event: MouseEvent) => void;
   updateOption: (query: string) => void;
   selectOptionClick: () => void;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{

package/lib/components/select/src/option.vue_vue_type_script_lang.js

@@ -1,4 +1,5 @@
 const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
+const require_aria = require('../../../utils/dom/aria.js');
 const require_index = require('../../../hooks/use-namespace/index.js');
 const require_index$1 = require('../../../hooks/use-id/index.js');
 const require_option = require('./option.js');
@@ -43,6 +44,15 @@ var option_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 		function selectOptionClick() {
 			if (!isDisabled.value) select.handleOptionSelect(vm);
 		}
+		const handleMousedown = (event) => {
+			let target = event.target;
+			const currentTarget = event.currentTarget;
+			while (target && target !== currentTarget) {
+				if (require_aria.isFocusable(target)) return;
+				target = target.parentElement;
+			}
+			event.preventDefault();
+		};
 		return {
 			ns,
 			id,
@@ -55,6 +65,7 @@ var option_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 			hover,
 			states,
 			hoverItem,
+			handleMousedown,
 			updateOption,
 			selectOptionClick
 		};

package/lib/components/select/src/option.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.vue_vue_type_script_lang.js","names":[],"sources":["../../../../../../packages/components/select/src/option.vue"],"sourcesContent":["<template>\n  <li\n    v-show=\"visible\"\n    :id=\"id\"\n    :class=\"containerKls\"\n    role=\"option\"\n    :aria-disabled=\"isDisabled || undefined\"\n    :aria-selected=\"itemSelected\"\n    @mousemove=\"hoverItem\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot>\n      <span>{{ currentLabel }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  nextTick,\n  onBeforeUnmount,\n  reactive,\n  toRefs,\n  unref,\n} from 'vue'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { COMPONENT_NAME, optionProps } from './option'\n\nimport type {\n  OptionExposed,\n  OptionInternalInstance,\n  OptionStates,\n} from './type'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  componentName: COMPONENT_NAME,\n\n  props: optionProps,\n\n  setup(props) {\n    const ns = useNamespace('select')\n    const id = useId()\n\n    const containerKls = computed(() => [\n      ns.be('dropdown', 'item'),\n      ns.is('disabled', unref(isDisabled)),\n      ns.is('selected', unref(itemSelected)),\n      ns.is('hovering', unref(hover)),\n    ])\n\n    const states = reactive<OptionStates>({\n      index: -1,\n      groupDisabled: false,\n      visible: true,\n      hover: false,\n    })\n\n    const {\n      currentLabel,\n      itemSelected,\n      isDisabled,\n      select,\n      hoverItem,\n      updateOption,\n    } = useOption(props, states)\n\n    const { visible, hover } = toRefs(states)\n\n    const vm = (getCurrentInstance()! as OptionInternalInstance).proxy\n\n    select.onOptionCreate(vm)\n\n    onBeforeUnmount(() => {\n      const key = vm.value\n\n      // if option is not selected, remove it from cache\n      nextTick(() => {\n        const { selected: selectedOptions } = select.states\n        const doesSelected = selectedOptions.some((item) => {\n          return item.value === vm.value\n        })\n        if (select.states.cachedOptions.get(key) === vm && !doesSelected) {\n          select.states.cachedOptions.delete(key)\n        }\n      })\n      select.onOptionDestroy(key, vm)\n    })\n\n    function selectOptionClick() {\n      if (!isDisabled.value) {\n        select.handleOptionSelect(vm)\n      }\n    }\n\n    return {\n      ns,\n      id,\n      containerKls,\n      currentLabel,\n      itemSelected,\n      isDisabled,\n      select,\n      visible,\n      hover,\n      states,\n\n      hoverItem,\n      updateOption,\n      selectOptionClick,\n    } satisfies OptionExposed\n  },\n})\n</script>\n"],"mappings":";;;;;;;;AAsCA,uEAA+B;CAC7B,MAAM;CACN,eAAe;CAEf,OAAO;CAEP,MAAM,OAAO;EACX,MAAM,KAAK,2BAAa,SAAQ;EAChC,MAAM,KAAK,uBAAM;EAEjB,MAAM,uCAA8B;GAClC,GAAG,GAAG,YAAY,OAAO;GACzB,GAAG,GAAG,2BAAkB,WAAW,CAAC;GACpC,GAAG,GAAG,2BAAkB,aAAa,CAAC;GACtC,GAAG,GAAG,2BAAkB,MAAM,CAAC;GAChC,CAAA;EAED,MAAM,2BAAgC;GACpC,OAAO;GACP,eAAe;GACf,SAAS;GACT,OAAO;GACR,CAAA;EAED,MAAM,EACJ,cACA,cACA,YACA,QACA,WACA,iBACE,4BAAU,OAAO,OAAM;EAE3B,MAAM,EAAE,SAAS,0BAAiB,OAAM;EAExC,MAAM,kCAA0B,CAA6B;AAE7D,SAAO,eAAe,GAAE;AAExB,iCAAsB;GACpB,MAAM,MAAM,GAAG;AAGf,2BAAe;IACb,MAAM,EAAE,UAAU,oBAAoB,OAAO;IAC7C,MAAM,eAAe,gBAAgB,MAAM,SAAS;AAClD,YAAO,KAAK,UAAU,GAAG;MAC1B;AACD,QAAI,OAAO,OAAO,cAAc,IAAI,IAAG,KAAM,MAAM,CAAC,aAClD,QAAO,OAAO,cAAc,OAAO,IAAG;KAEzC;AACD,UAAO,gBAAgB,KAAK,GAAE;IAC/B;EAED,SAAS,oBAAoB;AAC3B,OAAI,CAAC,WAAW,MACd,QAAO,mBAAmB,GAAE;;AAIhC,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACF;;CAEH,CAAA"}
+{"version":3,"file":"option.vue_vue_type_script_lang.js","names":[],"sources":["../../../../../../packages/components/select/src/option.vue"],"sourcesContent":["<template>\n  <li\n    v-show=\"visible\"\n    :id=\"id\"\n    :class=\"containerKls\"\n    role=\"option\"\n    :aria-disabled=\"isDisabled || undefined\"\n    :aria-selected=\"itemSelected\"\n    @mousemove=\"hoverItem\"\n    @mousedown=\"handleMousedown\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot>\n      <span>{{ currentLabel }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  nextTick,\n  onBeforeUnmount,\n  reactive,\n  toRefs,\n  unref,\n} from 'vue'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { COMPONENT_NAME, optionProps } from './option'\nimport { isFocusable } from '@element-plus/utils'\n\nimport type {\n  OptionExposed,\n  OptionInternalInstance,\n  OptionStates,\n} from './type'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  componentName: COMPONENT_NAME,\n\n  props: optionProps,\n\n  setup(props) {\n    const ns = useNamespace('select')\n    const id = useId()\n\n    const containerKls = computed(() => [\n      ns.be('dropdown', 'item'),\n      ns.is('disabled', unref(isDisabled)),\n      ns.is('selected', unref(itemSelected)),\n      ns.is('hovering', unref(hover)),\n    ])\n\n    const states = reactive<OptionStates>({\n      index: -1,\n      groupDisabled: false,\n      visible: true,\n      hover: false,\n    })\n\n    const {\n      currentLabel,\n      itemSelected,\n      isDisabled,\n      select,\n      hoverItem,\n      updateOption,\n    } = useOption(props, states)\n\n    const { visible, hover } = toRefs(states)\n\n    const vm = (getCurrentInstance()! as OptionInternalInstance).proxy\n\n    select.onOptionCreate(vm)\n\n    onBeforeUnmount(() => {\n      const key = vm.value\n\n      // if option is not selected, remove it from cache\n      nextTick(() => {\n        const { selected: selectedOptions } = select.states\n        const doesSelected = selectedOptions.some((item) => {\n          return item.value === vm.value\n        })\n        if (select.states.cachedOptions.get(key) === vm && !doesSelected) {\n          select.states.cachedOptions.delete(key)\n        }\n      })\n      select.onOptionDestroy(key, vm)\n    })\n\n    function selectOptionClick() {\n      if (!isDisabled.value) {\n        select.handleOptionSelect(vm)\n      }\n    }\n\n    const handleMousedown = (event: MouseEvent) => {\n      let target = event.target as HTMLElement | null\n      const currentTarget = event.currentTarget as HTMLElement\n\n      while (target && target !== currentTarget) {\n        if (isFocusable(target)) {\n          return\n        }\n        target = target.parentElement\n      }\n\n      event.preventDefault()\n    }\n\n    return {\n      ns,\n      id,\n      containerKls,\n      currentLabel,\n      itemSelected,\n      isDisabled,\n      select,\n      visible,\n      hover,\n      states,\n\n      hoverItem,\n      handleMousedown,\n      updateOption,\n      selectOptionClick,\n    } satisfies OptionExposed\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;AAwCA,uEAA+B;CAC7B,MAAM;CACN,eAAe;CAEf,OAAO;CAEP,MAAM,OAAO;EACX,MAAM,KAAK,2BAAa,SAAQ;EAChC,MAAM,KAAK,uBAAM;EAEjB,MAAM,uCAA8B;GAClC,GAAG,GAAG,YAAY,OAAO;GACzB,GAAG,GAAG,2BAAkB,WAAW,CAAC;GACpC,GAAG,GAAG,2BAAkB,aAAa,CAAC;GACtC,GAAG,GAAG,2BAAkB,MAAM,CAAC;GAChC,CAAA;EAED,MAAM,2BAAgC;GACpC,OAAO;GACP,eAAe;GACf,SAAS;GACT,OAAO;GACR,CAAA;EAED,MAAM,EACJ,cACA,cACA,YACA,QACA,WACA,iBACE,4BAAU,OAAO,OAAM;EAE3B,MAAM,EAAE,SAAS,0BAAiB,OAAM;EAExC,MAAM,kCAA0B,CAA6B;AAE7D,SAAO,eAAe,GAAE;AAExB,iCAAsB;GACpB,MAAM,MAAM,GAAG;AAGf,2BAAe;IACb,MAAM,EAAE,UAAU,oBAAoB,OAAO;IAC7C,MAAM,eAAe,gBAAgB,MAAM,SAAS;AAClD,YAAO,KAAK,UAAU,GAAG;MAC1B;AACD,QAAI,OAAO,OAAO,cAAc,IAAI,IAAG,KAAM,MAAM,CAAC,aAClD,QAAO,OAAO,cAAc,OAAO,IAAG;KAEzC;AACD,UAAO,gBAAgB,KAAK,GAAE;IAC/B;EAED,SAAS,oBAAoB;AAC3B,OAAI,CAAC,WAAW,MACd,QAAO,mBAAmB,GAAE;;EAIhC,MAAM,mBAAmB,UAAsB;GAC7C,IAAI,SAAS,MAAM;GACnB,MAAM,gBAAgB,MAAM;AAE5B,UAAO,UAAU,WAAW,eAAe;AACzC,QAAI,yBAAY,OAAO,CACrB;AAEF,aAAS,OAAO;;AAGlB,SAAM,gBAAe;;AAGvB,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GACF;;CAEH,CAAA"}

package/lib/components/select/src/option2.js

@@ -18,7 +18,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		"aria-disabled": _ctx.isDisabled || void 0,
 		"aria-selected": _ctx.itemSelected,
 		onMousemove: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)),
-		onClick: _cache[1] || (_cache[1] = (0, vue.withModifiers)((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
+		onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args)),
+		onClick: _cache[2] || (_cache[2] = (0, vue.withModifiers)((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
 	}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(_ctx.currentLabel), 1)])], 42, _hoisted_1)), [[vue.vShow, _ctx.visible]]);
 }
 var option_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_option_vue_vue_type_script_lang.default, [["render", _sfc_render]]);

package/lib/components/select/src/option2.js.map

@@ -1 +1 @@
-{"version":3,"file":"option2.js","names":[],"sources":["../../../../../../packages/components/select/src/option.vue"],"sourcesContent":["<template>\n  <li\n    v-show=\"visible\"\n    :id=\"id\"\n    :class=\"containerKls\"\n    role=\"option\"\n    :aria-disabled=\"isDisabled || undefined\"\n    :aria-selected=\"itemSelected\"\n    @mousemove=\"hoverItem\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot>\n      <span>{{ currentLabel }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  nextTick,\n  onBeforeUnmount,\n  reactive,\n  toRefs,\n  unref,\n} from 'vue'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { COMPONENT_NAME, optionProps } from './option'\n\nimport type {\n  OptionExposed,\n  OptionInternalInstance,\n  OptionStates,\n} from './type'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  componentName: COMPONENT_NAME,\n\n  props: optionProps,\n\n  setup(props) {\n    const ns = useNamespace('select')\n    const id = useId()\n\n    const containerKls = computed(() => [\n      ns.be('dropdown', 'item'),\n      ns.is('disabled', unref(isDisabled)),\n      ns.is('selected', unref(itemSelected)),\n      ns.is('hovering', unref(hover)),\n    ])\n\n    const states = reactive<OptionStates>({\n      index: -1,\n      groupDisabled: false,\n      visible: true,\n      hover: false,\n    })\n\n    const {\n      currentLabel,\n      itemSelected,\n      isDisabled,\n      select,\n      hoverItem,\n      updateOption,\n    } = useOption(props, states)\n\n    const { visible, hover } = toRefs(states)\n\n    const vm = (getCurrentInstance()! as OptionInternalInstance).proxy\n\n    select.onOptionCreate(vm)\n\n    onBeforeUnmount(() => {\n      const key = vm.value\n\n      // if option is not selected, remove it from cache\n      nextTick(() => {\n        const { selected: selectedOptions } = select.states\n        const doesSelected = selectedOptions.some((item) => {\n          return item.value === vm.value\n        })\n        if (select.states.cachedOptions.get(key) === vm && !doesSelected) {\n          select.states.cachedOptions.delete(key)\n        }\n      })\n      select.onOptionDestroy(key, vm)\n    })\n\n    function selectOptionClick() {\n      if (!isDisabled.value) {\n        select.handleOptionSelect(vm)\n      }\n    }\n\n    return {\n      ns,\n      id,\n      containerKls,\n      currentLabel,\n      itemSelected,\n      isDisabled,\n      select,\n      visible,\n      hover,\n      states,\n\n      hoverItem,\n      updateOption,\n      selectOptionClick,\n    } satisfies OptionExposed\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;mFAcO,MAAA;EAXF,IAAI,KAAA;EACJ,+BAAO,KAAA,aAAY;EACpB,MAAK;EACJ,iBAAe,KAAA,cAAc,KAAA;EAC7B,iBAAe,KAAA;EACf,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,aAAA,KAAA,UAAA,GAAA,KAAA;EACX,SAAK,OAAA,OAAA,OAAA,6BAAA,GAAA,SAAO,KAAA,qBAAA,KAAA,kBAAA,GAAA,KAAA,EAAiB,CAAA,OAAA,CAAA;EAAA,EAAA,qBAIvB,KAAA,QAAA,WAAA,EAAA,QAAA,6BAD0B,QAAA,+BAAtB,KAAA,aAAY,EAAA,EAAA,CAAA,CAAA,kCAVf,KAAA,QAAO,CAAA,CAAA"}
+{"version":3,"file":"option2.js","names":[],"sources":["../../../../../../packages/components/select/src/option.vue"],"sourcesContent":["<template>\n  <li\n    v-show=\"visible\"\n    :id=\"id\"\n    :class=\"containerKls\"\n    role=\"option\"\n    :aria-disabled=\"isDisabled || undefined\"\n    :aria-selected=\"itemSelected\"\n    @mousemove=\"hoverItem\"\n    @mousedown=\"handleMousedown\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot>\n      <span>{{ currentLabel }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  nextTick,\n  onBeforeUnmount,\n  reactive,\n  toRefs,\n  unref,\n} from 'vue'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { COMPONENT_NAME, optionProps } from './option'\nimport { isFocusable } from '@element-plus/utils'\n\nimport type {\n  OptionExposed,\n  OptionInternalInstance,\n  OptionStates,\n} from './type'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  componentName: COMPONENT_NAME,\n\n  props: optionProps,\n\n  setup(props) {\n    const ns = useNamespace('select')\n    const id = useId()\n\n    const containerKls = computed(() => [\n      ns.be('dropdown', 'item'),\n      ns.is('disabled', unref(isDisabled)),\n      ns.is('selected', unref(itemSelected)),\n      ns.is('hovering', unref(hover)),\n    ])\n\n    const states = reactive<OptionStates>({\n      index: -1,\n      groupDisabled: false,\n      visible: true,\n      hover: false,\n    })\n\n    const {\n      currentLabel,\n      itemSelected,\n      isDisabled,\n      select,\n      hoverItem,\n      updateOption,\n    } = useOption(props, states)\n\n    const { visible, hover } = toRefs(states)\n\n    const vm = (getCurrentInstance()! as OptionInternalInstance).proxy\n\n    select.onOptionCreate(vm)\n\n    onBeforeUnmount(() => {\n      const key = vm.value\n\n      // if option is not selected, remove it from cache\n      nextTick(() => {\n        const { selected: selectedOptions } = select.states\n        const doesSelected = selectedOptions.some((item) => {\n          return item.value === vm.value\n        })\n        if (select.states.cachedOptions.get(key) === vm && !doesSelected) {\n          select.states.cachedOptions.delete(key)\n        }\n      })\n      select.onOptionDestroy(key, vm)\n    })\n\n    function selectOptionClick() {\n      if (!isDisabled.value) {\n        select.handleOptionSelect(vm)\n      }\n    }\n\n    const handleMousedown = (event: MouseEvent) => {\n      let target = event.target as HTMLElement | null\n      const currentTarget = event.currentTarget as HTMLElement\n\n      while (target && target !== currentTarget) {\n        if (isFocusable(target)) {\n          return\n        }\n        target = target.parentElement\n      }\n\n      event.preventDefault()\n    }\n\n    return {\n      ns,\n      id,\n      containerKls,\n      currentLabel,\n      itemSelected,\n      isDisabled,\n      select,\n      visible,\n      hover,\n      states,\n\n      hoverItem,\n      handleMousedown,\n      updateOption,\n      selectOptionClick,\n    } satisfies OptionExposed\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;mFAeO,MAAA;EAZF,IAAI,KAAA;EACJ,+BAAO,KAAA,aAAY;EACpB,MAAK;EACJ,iBAAe,KAAA,cAAc,KAAA;EAC7B,iBAAe,KAAA;EACf,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,aAAA,KAAA,UAAA,GAAA,KAAA;EACX,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,mBAAA,KAAA,gBAAA,GAAA,KAAA;EACX,SAAK,OAAA,OAAA,OAAA,6BAAA,GAAA,SAAO,KAAA,qBAAA,KAAA,kBAAA,GAAA,KAAA,EAAiB,CAAA,OAAA,CAAA;EAAA,EAAA,qBAIvB,KAAA,QAAA,WAAA,EAAA,QAAA,6BAD0B,QAAA,+BAAtB,KAAA,aAAY,EAAA,EAAA,CAAA,CAAA,kCAXf,KAAA,QAAO,CAAA,CAAA"}

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

@@ -402,10 +402,10 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   "onRemove-tag"?: ((...args: any[]) => any) | undefined;
   "onPopup-scroll"?: ((...args: any[]) => any) | undefined;
 }>, {
-  effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
-  props: Props;
   offset: number;
   teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  props: Props;
+  effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
   disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   modelValue: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown>;
   autocomplete: string;
@@ -514,6 +514,7 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
       hover: boolean;
     };
     hoverItem: () => void;
+    handleMousedown: (event: MouseEvent) => void;
     updateOption: (query: string) => void;
     selectOptionClick: () => void;
   }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -747,9 +748,9 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
       "before-show": (...args: any[]) => void;
       "before-hide": (...args: any[]) => void;
     }, vue.PublicProps, {
-      effect: PopperEffect;
       offset: number;
       teleported: boolean;
+      effect: PopperEffect;
       visible: boolean | null;
       content: string;
       style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
@@ -798,9 +799,9 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
       onClose: (event?: Event, delay?: number) => void;
       hide: (event?: Event) => void;
     }, {}, {}, {}, {
-      effect: PopperEffect;
       offset: number;
       teleported: boolean;
+      effect: PopperEffect;
       visible: boolean | null;
       content: string;
       style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
@@ -854,9 +855,9 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     "before-show": (...args: any[]) => void;
     "before-hide": (...args: any[]) => void;
   }, string, {
-    effect: PopperEffect;
     offset: number;
     teleported: boolean;
+    effect: PopperEffect;
     visible: boolean | null;
     content: string;
     style: string | false | vue.CSSProperties | vue.StyleValue[] | null;

package/lib/components/select/src/type.d.ts

@@ -50,6 +50,7 @@ interface OptionExposed {
   states: OptionStates;
   select: SelectContext;
   hoverItem: () => void;
+  handleMousedown: (event: MouseEvent) => void;
   updateOption: (query: string) => void;
   selectOptionClick: () => void;
 }

package/lib/components/select-v2/src/option-item.js

@@ -25,7 +25,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 			_ctx.ns.is("hovering", _ctx.hovering)
 		]),
 		onMousemove: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)),
-		onClick: _cache[1] || (_cache[1] = (0, vue.withModifiers)((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
+		onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args)),
+		onClick: _cache[2] || (_cache[2] = (0, vue.withModifiers)((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
 	}, [(0, vue.renderSlot)(_ctx.$slots, "default", {
 		item: _ctx.item,
 		index: _ctx.index,

package/lib/components/select-v2/src/option-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-item.js","names":[],"sources":["../../../../../../packages/components/select-v2/src/option-item.vue"],"sourcesContent":["<template>\n  <li\n    :id=\"`${contentId}-${index}`\"\n    role=\"option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled || undefined\"\n    :style=\"style\"\n    :class=\"[\n      ns.be('dropdown', 'item'),\n      ns.is('selected', selected),\n      ns.is('disabled', disabled),\n      ns.is('created', created),\n      ns.is('hovering', hovering),\n    ]\"\n    @mousemove=\"hoverItem\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot :item=\"item\" :index=\"index\" :disabled=\"disabled\">\n      <span>{{ getLabel(item) }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { useProps } from './useProps'\nimport { optionV2Emits, optionV2Props } from './defaults'\nimport { selectV2InjectionKey } from './token'\n\nexport default defineComponent({\n  props: optionV2Props,\n  emits: optionV2Emits,\n  setup(props, { emit }) {\n    const select = inject(selectV2InjectionKey)!\n    const ns = useNamespace('select')\n    const { hoverItem, selectOptionClick } = useOption(props, { emit })\n    const { getLabel } = useProps(select.props)\n    const contentId = select.contentId\n\n    return {\n      ns,\n      contentId,\n      hoverItem,\n      selectOptionClick,\n      getLabel,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;0DAoBO,MAAA;EAlBF,IAAE,GAAK,KAAA,UAAS,GAAI,KAAA;EACrB,MAAK;EACJ,iBAAe,KAAA;EACf,iBAAe,KAAA,YAAY,KAAA;EAC3B,+BAAO,KAAA,MAAK;EACZ,+BAAK;GAAU,KAAA,GAAG,GAAE,YAAA,OAAA;GAA4B,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ;GAAS,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ;GAAS,KAAA,GAAG,GAAE,WAAY,KAAA,QAAO;GAAS,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ;GAAA,CAAA;EAOjL,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,aAAA,KAAA,UAAA,GAAA,KAAA;EACX,SAAK,OAAA,OAAA,OAAA,6BAAA,GAAA,SAAO,KAAA,qBAAA,KAAA,kBAAA,GAAA,KAAA,EAAiB,CAAA,OAAA,CAAA;EAAA,EAAA,qBAIvB,KAAA,QAAA,WAAA;EAFA,MAAM,KAAA;EAAO,OAAO,KAAA;EAAQ,UAAU,KAAA;EAAA,QAEtC,6BAD4B,QAAA,+BAAxB,KAAA,SAAS,KAAA,KAAI,CAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"option-item.js","names":[],"sources":["../../../../../../packages/components/select-v2/src/option-item.vue"],"sourcesContent":["<template>\n  <li\n    :id=\"`${contentId}-${index}`\"\n    role=\"option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled || undefined\"\n    :style=\"style\"\n    :class=\"[\n      ns.be('dropdown', 'item'),\n      ns.is('selected', selected),\n      ns.is('disabled', disabled),\n      ns.is('created', created),\n      ns.is('hovering', hovering),\n    ]\"\n    @mousemove=\"hoverItem\"\n    @mousedown=\"handleMousedown\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot :item=\"item\" :index=\"index\" :disabled=\"disabled\">\n      <span>{{ getLabel(item) }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { useProps } from './useProps'\nimport { optionV2Emits, optionV2Props } from './defaults'\nimport { selectV2InjectionKey } from './token'\nimport { isFocusable } from '@element-plus/utils'\n\nexport default defineComponent({\n  props: optionV2Props,\n  emits: optionV2Emits,\n  setup(props, { emit }) {\n    const select = inject(selectV2InjectionKey)!\n    const ns = useNamespace('select')\n    const { hoverItem, selectOptionClick } = useOption(props, { emit })\n    const { getLabel } = useProps(select.props)\n    const contentId = select.contentId\n\n    const handleMousedown = (event: MouseEvent) => {\n      let target = event.target as HTMLElement | null\n      const currentTarget = event.currentTarget as HTMLElement\n\n      while (target && target !== currentTarget) {\n        if (isFocusable(target)) {\n          return\n        }\n        target = target.parentElement\n      }\n\n      event.preventDefault()\n    }\n\n    return {\n      ns,\n      contentId,\n      hoverItem,\n      handleMousedown,\n      selectOptionClick,\n      getLabel,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;0DAqBO,MAAA;EAnBF,IAAE,GAAK,KAAA,UAAS,GAAI,KAAA;EACrB,MAAK;EACJ,iBAAe,KAAA;EACf,iBAAe,KAAA,YAAY,KAAA;EAC3B,+BAAO,KAAA,MAAK;EACZ,+BAAK;GAAU,KAAA,GAAG,GAAE,YAAA,OAAA;GAA4B,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ;GAAS,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ;GAAS,KAAA,GAAG,GAAE,WAAY,KAAA,QAAO;GAAS,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ;GAAA,CAAA;EAOjL,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,aAAA,KAAA,UAAA,GAAA,KAAA;EACX,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,mBAAA,KAAA,gBAAA,GAAA,KAAA;EACX,SAAK,OAAA,OAAA,OAAA,6BAAA,GAAA,SAAO,KAAA,qBAAA,KAAA,kBAAA,GAAA,KAAA,EAAiB,CAAA,OAAA,CAAA;EAAA,EAAA,qBAIvB,KAAA,QAAA,WAAA;EAFA,MAAM,KAAA;EAAO,OAAO,KAAA;EAAQ,UAAU,KAAA;EAAA,QAEtC,6BAD4B,QAAA,+BAAxB,KAAA,SAAS,KAAA,KAAI,CAAA,EAAA,EAAA,CAAA,CAAA"}

package/lib/components/select-v2/src/option-item.vue_vue_type_script_lang.js

@@ -1,4 +1,5 @@
 const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
+const require_aria = require('../../../utils/dom/aria.js');
 const require_index = require('../../../hooks/use-namespace/index.js');
 const require_useProps = require('./useProps.js');
 const require_useOption = require('./useOption.js');
@@ -15,10 +16,21 @@ var option_item_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 		const ns = require_index.useNamespace("select");
 		const { hoverItem, selectOptionClick } = require_useOption.useOption(props, { emit });
 		const { getLabel } = require_useProps.useProps(select.props);
+		const contentId = select.contentId;
+		const handleMousedown = (event) => {
+			let target = event.target;
+			const currentTarget = event.currentTarget;
+			while (target && target !== currentTarget) {
+				if (require_aria.isFocusable(target)) return;
+				target = target.parentElement;
+			}
+			event.preventDefault();
+		};
 		return {
 			ns,
-			contentId: select.contentId,
+			contentId,
 			hoverItem,
+			handleMousedown,
 			selectOptionClick,
 			getLabel
 		};

package/lib/components/select-v2/src/option-item.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-item.vue_vue_type_script_lang.js","names":[],"sources":["../../../../../../packages/components/select-v2/src/option-item.vue"],"sourcesContent":["<template>\n  <li\n    :id=\"`${contentId}-${index}`\"\n    role=\"option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled || undefined\"\n    :style=\"style\"\n    :class=\"[\n      ns.be('dropdown', 'item'),\n      ns.is('selected', selected),\n      ns.is('disabled', disabled),\n      ns.is('created', created),\n      ns.is('hovering', hovering),\n    ]\"\n    @mousemove=\"hoverItem\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot :item=\"item\" :index=\"index\" :disabled=\"disabled\">\n      <span>{{ getLabel(item) }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { useProps } from './useProps'\nimport { optionV2Emits, optionV2Props } from './defaults'\nimport { selectV2InjectionKey } from './token'\n\nexport default defineComponent({\n  props: optionV2Props,\n  emits: optionV2Emits,\n  setup(props, { emit }) {\n    const select = inject(selectV2InjectionKey)!\n    const ns = useNamespace('select')\n    const { hoverItem, selectOptionClick } = useOption(props, { emit })\n    const { getLabel } = useProps(select.props)\n    const contentId = select.contentId\n\n    return {\n      ns,\n      contentId,\n      hoverItem,\n      selectOptionClick,\n      getLabel,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;AA+BA,4EAA+B;CAC7B,OAAO;CACP,OAAO;CACP,MAAM,OAAO,EAAE,QAAQ;EACrB,MAAM,yBAAgB,mCAAqB;EAC3C,MAAM,KAAK,2BAAa,SAAQ;EAChC,MAAM,EAAE,WAAW,sBAAsB,4BAAU,OAAO,EAAE,MAAM,CAAA;EAClE,MAAM,EAAE,aAAa,0BAAS,OAAO,MAAK;AAG1C,SAAO;GACL;GACA,WAJgB,OAAO;GAKvB;GACA;GACA;GACF;;CAEH,CAAA"}
+{"version":3,"file":"option-item.vue_vue_type_script_lang.js","names":[],"sources":["../../../../../../packages/components/select-v2/src/option-item.vue"],"sourcesContent":["<template>\n  <li\n    :id=\"`${contentId}-${index}`\"\n    role=\"option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled || undefined\"\n    :style=\"style\"\n    :class=\"[\n      ns.be('dropdown', 'item'),\n      ns.is('selected', selected),\n      ns.is('disabled', disabled),\n      ns.is('created', created),\n      ns.is('hovering', hovering),\n    ]\"\n    @mousemove=\"hoverItem\"\n    @mousedown=\"handleMousedown\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot :item=\"item\" :index=\"index\" :disabled=\"disabled\">\n      <span>{{ getLabel(item) }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { useProps } from './useProps'\nimport { optionV2Emits, optionV2Props } from './defaults'\nimport { selectV2InjectionKey } from './token'\nimport { isFocusable } from '@element-plus/utils'\n\nexport default defineComponent({\n  props: optionV2Props,\n  emits: optionV2Emits,\n  setup(props, { emit }) {\n    const select = inject(selectV2InjectionKey)!\n    const ns = useNamespace('select')\n    const { hoverItem, selectOptionClick } = useOption(props, { emit })\n    const { getLabel } = useProps(select.props)\n    const contentId = select.contentId\n\n    const handleMousedown = (event: MouseEvent) => {\n      let target = event.target as HTMLElement | null\n      const currentTarget = event.currentTarget as HTMLElement\n\n      while (target && target !== currentTarget) {\n        if (isFocusable(target)) {\n          return\n        }\n        target = target.parentElement\n      }\n\n      event.preventDefault()\n    }\n\n    return {\n      ns,\n      contentId,\n      hoverItem,\n      handleMousedown,\n      selectOptionClick,\n      getLabel,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;;AAiCA,4EAA+B;CAC7B,OAAO;CACP,OAAO;CACP,MAAM,OAAO,EAAE,QAAQ;EACrB,MAAM,yBAAgB,mCAAqB;EAC3C,MAAM,KAAK,2BAAa,SAAQ;EAChC,MAAM,EAAE,WAAW,sBAAsB,4BAAU,OAAO,EAAE,MAAM,CAAA;EAClE,MAAM,EAAE,aAAa,0BAAS,OAAO,MAAK;EAC1C,MAAM,YAAY,OAAO;EAEzB,MAAM,mBAAmB,UAAsB;GAC7C,IAAI,SAAS,MAAM;GACnB,MAAM,gBAAgB,MAAM;AAE5B,UAAO,UAAU,WAAW,eAAe;AACzC,QAAI,yBAAY,OAAO,CACrB;AAEF,aAAS,OAAO;;AAGlB,SAAM,gBAAe;;AAGvB,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACF;;CAEH,CAAA"}