@element-plus/nightly 0.0.20260313 → 0.0.20260315

package/es/components/scrollbar/src/scrollbar.vue.d.ts

@@ -9,48 +9,26 @@ declare var __VLS_9: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<ScrollbarProps>, {
-  distance: number;
-  height: string;
-  maxHeight: string;
-  wrapStyle: string;
-  wrapClass: string;
-  viewStyle: string;
-  viewClass: string;
-  tag: string;
-  minSize: number;
-  tabindex: undefined;
-}>, {
-  /** @description scrollbar wrap ref */wrapRef: vue.Ref<HTMLDivElement | undefined>; /** @description update scrollbar state manually */
+declare const __VLS_base: vue.DefineComponent<ScrollbarProps, {
+  /** @description scrollbar wrap ref */wrapRef: vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>; /** @description update scrollbar state manually */
   update: () => void; /** @description scrolls to a particular set of coordinates */
   scrollTo: typeof scrollTo; /** @description set distance to scroll top */
   setScrollTop: (value: number) => void; /** @description set distance to scroll left */
   setScrollLeft: (value: number) => void; /** @description handle scroll event */
   handleScroll: () => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
   scroll: (args_0: {
     scrollTop: number;
     scrollLeft: number;
   }) => void;
   "end-reached": (direction: ScrollbarDirection) => void;
-}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ScrollbarProps>, {
-  distance: number;
-  height: string;
-  maxHeight: string;
-  wrapStyle: string;
-  wrapClass: string;
-  viewStyle: string;
-  viewClass: string;
-  tag: string;
-  minSize: number;
-  tabindex: undefined;
-}>>> & {
+}, string, vue.PublicProps, Readonly<ScrollbarProps> & Readonly<{
   onScroll?: ((args_0: {
     scrollTop: number;
     scrollLeft: number;
   }) => any) | undefined;
   "onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
-}, {
+}>, {
   tabindex: number | string;
   height: number | string;
   maxHeight: number | string;
@@ -61,23 +39,13 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   viewClass: string | string[];
   viewStyle: string | false | CSSProperties | StyleValue[] | null;
   minSize: number;
-}, {}>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
-type __VLS_TypePropsToOption<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? {
-  type: vue.PropType<Required<T>[K]>;
-} : {
-  type: vue.PropType<T[K]>;
-  required: true;
-} };
-type __VLS_WithDefaults<P, D> = { [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-  default: D[K];
-}> : P[K] };
 type __VLS_WithSlots<T, S> = T & {
   new (): {
     $slots: S;
   };
 };
-type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
 export { _default };

package/es/components/scrollbar/src/thumb.vue.d.ts

@@ -1,7 +1,8 @@
+import { ThumbProps } from "./thumb.js";
 import * as vue from "vue";
 
 //#region ../../packages/components/scrollbar/src/thumb.vue.d.ts
-declare const __VLS_export: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const __VLS_export: vue.DefineComponent<ThumbProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ThumbProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
 export { _default };

package/es/components/segmented/index.d.ts

@@ -6,156 +6,33 @@ import * as vue from "vue";
 
 //#region ../../packages/components/segmented/index.d.ts
 declare const ElSegmented: {
-  new (...args: any[]): vue.CreateComponentPublicInstance<Readonly<vue.ExtractPropTypes<{
-    props: {
-      type: vue.PropType<Props>;
-      default: () => Required<Props>;
-    };
-    size: {
-      type: vue.PropType<"" | "default" | "small" | "large">;
-    };
-    id: {
-      type: vue.PropType<string>;
-    };
-    disabled: {
-      type: vue.PropType<boolean>;
-      default: undefined;
-    };
-    modelValue: {
-      type: vue.PropType<string | number | boolean>;
-      default: undefined;
-    };
-    validateEvent: {
-      type: vue.PropType<boolean>;
-      default: boolean;
-    };
-    ariaLabel: {
-      type: vue.PropType<string>;
-    };
-    name: {
-      type: vue.PropType<string>;
-    };
-    block: {
-      type: vue.PropType<boolean>;
-    };
-    direction: {
-      type: vue.PropType<"horizontal" | "vertical">;
-      default: string;
-    };
-    options: {
-      type: vue.PropType<Option[]>;
-      default: () => never[];
-    };
-  }>> & {
+  new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<SegmentedProps> & Readonly<{
     onChange?: ((val: any) => any) | undefined;
     "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-  }, unknown, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    "update:modelValue": (val: any) => void;
+  }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     change: (val: any) => void;
-  }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & Readonly<vue.ExtractPropTypes<{
-    props: {
-      type: vue.PropType<Props>;
-      default: () => Required<Props>;
-    };
-    size: {
-      type: vue.PropType<"" | "default" | "small" | "large">;
-    };
-    id: {
-      type: vue.PropType<string>;
-    };
-    disabled: {
-      type: vue.PropType<boolean>;
-      default: undefined;
-    };
-    modelValue: {
-      type: vue.PropType<string | number | boolean>;
-      default: undefined;
-    };
-    validateEvent: {
-      type: vue.PropType<boolean>;
-      default: boolean;
-    };
-    ariaLabel: {
-      type: vue.PropType<string>;
-    };
-    name: {
-      type: vue.PropType<string>;
-    };
-    block: {
-      type: vue.PropType<boolean>;
-    };
-    direction: {
-      type: vue.PropType<"horizontal" | "vertical">;
-      default: string;
-    };
-    options: {
-      type: vue.PropType<Option[]>;
-      default: () => never[];
-    };
-  }>> & {
-    onChange?: ((val: any) => any) | undefined;
-    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-  }, {
+    "update:modelValue": (val: any) => void;
+  }, vue.PublicProps, {
     props: Props;
-    disabled: boolean;
     modelValue: string | number | boolean;
+    disabled: boolean;
     validateEvent: boolean;
     direction: "vertical" | "horizontal";
     options: Option[];
-  }, true, {}, {}, {
+  }, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
     P: {};
     B: {};
     D: {};
     C: {};
     M: {};
     Defaults: {};
-  }, Readonly<vue.ExtractPropTypes<{
-    props: {
-      type: vue.PropType<Props>;
-      default: () => Required<Props>;
-    };
-    size: {
-      type: vue.PropType<"" | "default" | "small" | "large">;
-    };
-    id: {
-      type: vue.PropType<string>;
-    };
-    disabled: {
-      type: vue.PropType<boolean>;
-      default: undefined;
-    };
-    modelValue: {
-      type: vue.PropType<string | number | boolean>;
-      default: undefined;
-    };
-    validateEvent: {
-      type: vue.PropType<boolean>;
-      default: boolean;
-    };
-    ariaLabel: {
-      type: vue.PropType<string>;
-    };
-    name: {
-      type: vue.PropType<string>;
-    };
-    block: {
-      type: vue.PropType<boolean>;
-    };
-    direction: {
-      type: vue.PropType<"horizontal" | "vertical">;
-      default: string;
-    };
-    options: {
-      type: vue.PropType<Option[]>;
-      default: () => never[];
-    };
-  }>> & {
+  }, Readonly<SegmentedProps> & Readonly<{
     onChange?: ((val: any) => any) | undefined;
     "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-  }, {}, {}, {}, {}, {
+  }>, {}, {}, {}, {}, {
     props: Props;
-    disabled: boolean;
     modelValue: string | number | boolean;
+    disabled: boolean;
     validateEvent: boolean;
     direction: "vertical" | "horizontal";
     options: Option[];
@@ -163,131 +40,41 @@ declare const ElSegmented: {
   __isFragment?: never;
   __isTeleport?: never;
   __isSuspense?: never;
-} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
-  props: {
-    type: vue.PropType<Props>;
-    default: () => Required<Props>;
-  };
-  size: {
-    type: vue.PropType<"" | "default" | "small" | "large">;
-  };
-  id: {
-    type: vue.PropType<string>;
-  };
-  disabled: {
-    type: vue.PropType<boolean>;
-    default: undefined;
-  };
-  modelValue: {
-    type: vue.PropType<string | number | boolean>;
-    default: undefined;
-  };
-  validateEvent: {
-    type: vue.PropType<boolean>;
-    default: boolean;
-  };
-  ariaLabel: {
-    type: vue.PropType<string>;
-  };
-  name: {
-    type: vue.PropType<string>;
-  };
-  block: {
-    type: vue.PropType<boolean>;
-  };
-  direction: {
-    type: vue.PropType<"horizontal" | "vertical">;
-    default: string;
-  };
-  options: {
-    type: vue.PropType<Option[]>;
-    default: () => never[];
-  };
-}>> & {
+} & vue.ComponentOptionsBase<Readonly<SegmentedProps> & Readonly<{
   onChange?: ((val: any) => any) | undefined;
   "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-}, unknown, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  "update:modelValue": (val: any) => void;
+}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
   change: (val: any) => void;
+  "update:modelValue": (val: any) => void;
 }, string, {
   props: Props;
-  disabled: boolean;
   modelValue: string | number | boolean;
+  disabled: boolean;
   validateEvent: boolean;
   direction: "vertical" | "horizontal";
   options: Option[];
-}, {}, string, {}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
   $slots: {
     default?: (props: {
       item: any;
     }) => any;
   };
 }) & vue.ObjectPlugin & {
-  setPropsDefaults: (defaults: Partial<Partial<{
-    props: Props;
-    disabled: boolean;
-    modelValue: string | number | boolean;
-    validateEvent: boolean;
-    direction: "vertical" | "horizontal";
-    options: Option[];
-  }> & Omit<{
-    readonly props: Props;
-    readonly validateEvent: boolean;
-    readonly direction: "vertical" | "horizontal";
-    readonly options: Option[];
+  setPropsDefaults: (defaults: Partial<{
+    readonly direction?: ("vertical" | "horizontal") | undefined;
+    readonly options?: Option[] | undefined;
+    readonly modelValue?: (string | number | boolean) | undefined;
+    readonly props?: Props | undefined;
+    readonly block?: boolean | undefined;
     readonly size?: ComponentSize | undefined;
-    readonly id?: string | undefined;
     readonly disabled?: boolean | undefined;
-    readonly modelValue?: (string | number | boolean) | undefined;
-    readonly ariaLabel?: string | undefined;
+    readonly validateEvent?: boolean | undefined;
+    readonly id?: string | undefined;
     readonly name?: string | undefined;
-    readonly block?: boolean | undefined;
-    onChange?: ((val: any) => any) | undefined;
-    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-  } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & Readonly<vue.ExtractPropTypes<{
-    props: {
-      type: vue.PropType<Props>;
-      default: () => Required<Props>;
-    };
-    size: {
-      type: vue.PropType<"" | "default" | "small" | "large">;
-    };
-    id: {
-      type: vue.PropType<string>;
-    };
-    disabled: {
-      type: vue.PropType<boolean>;
-      default: undefined;
-    };
-    modelValue: {
-      type: vue.PropType<string | number | boolean>;
-      default: undefined;
-    };
-    validateEvent: {
-      type: vue.PropType<boolean>;
-      default: boolean;
-    };
-    ariaLabel: {
-      type: vue.PropType<string>;
-    };
-    name: {
-      type: vue.PropType<string>;
-    };
-    block: {
-      type: vue.PropType<boolean>;
-    };
-    direction: {
-      type: vue.PropType<"horizontal" | "vertical">;
-      default: string;
-    };
-    options: {
-      type: vue.PropType<Option[]>;
-      default: () => never[];
-    };
-  }>> & {
-    onChange?: ((val: any) => any) | undefined;
-    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-  }, "props" | "disabled" | "modelValue" | "validateEvent" | "direction" | "options">>) => void;
+    readonly ariaLabel?: string | undefined;
+    readonly onChange?: ((val: any) => any) | undefined;
+    readonly "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+  } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps>) => void;
 } & Record<string, any>;
 //#endregion
 export { ElSegmented, ElSegmented as default, Props, SegmentedEmits, SegmentedInstance, SegmentedProps, SegmentedPropsPublic, defaultProps, segmentedEmits, segmentedProps };

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

@@ -61,10 +61,10 @@ interface SegmentedProps {
  */
 declare const segmentedProps: {
   ariaLabel: StringConstructor;
-  direction: EpPropFinalized<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical") | ((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical"))[], unknown, unknown, string, boolean>;
-  options: EpPropFinalized<(new (...args: any[]) => Option[]) | (() => Option[]) | ((new (...args: any[]) => Option[]) | (() => Option[]))[], unknown, unknown, () => never[], 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))[], unknown, unknown, () => Required<Props>, boolean>;
+  props: EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | (((new (...args: any[]) => Props) | (() => Props)) | null)[], unknown, unknown, () => Required<Props>, boolean>;
   block: BooleanConstructor;
   size: {
     readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;

package/es/components/segmented/src/segmented.vue.d.ts

@@ -9,50 +9,26 @@ declare var __VLS_1: {
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<SegmentedProps>, {
-  direction: string;
-  options: () => never[];
-  props: () => Required<Props>;
-  validateEvent: boolean;
-  modelValue: undefined;
-  disabled: undefined;
-}>, unknown, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  "update:modelValue": (val: any) => void;
+declare const __VLS_base: vue.DefineComponent<SegmentedProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
   change: (val: any) => void;
-}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<SegmentedProps>, {
-  direction: string;
-  options: () => never[];
-  props: () => Required<Props>;
-  validateEvent: boolean;
-  modelValue: undefined;
-  disabled: undefined;
-}>>> & {
+  "update:modelValue": (val: any) => void;
+}, string, vue.PublicProps, Readonly<SegmentedProps> & Readonly<{
   onChange?: ((val: any) => any) | undefined;
   "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-}, {
+}>, {
   props: Props;
-  disabled: boolean;
   modelValue: string | number | boolean;
+  disabled: boolean;
   validateEvent: boolean;
   direction: "vertical" | "horizontal";
   options: Option[];
-}, {}>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
-type __VLS_TypePropsToOption<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? {
-  type: vue.PropType<Required<T>[K]>;
-} : {
-  type: vue.PropType<T[K]>;
-  required: true;
-} };
-type __VLS_WithDefaults<P, D> = { [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-  default: D[K];
-}> : P[K] };
 type __VLS_WithSlots<T, S> = T & {
   new (): {
     $slots: S;
   };
 };
-type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
 export { _default };

package/es/components/select/src/option-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"option-group.mjs","names":[],"sources":["../../../../../../packages/components/select/src/option-group.vue"],"sourcesContent":["<template>\n  <ul v-show=\"visible\" ref=\"groupRef\" :class=\"ns.be('group', 'wrap')\">\n    <li :class=\"ns.be('group', 'title')\">{{ label }}</li>\n    <li>\n      <ul :class=\"ns.b('group')\">\n        <slot />\n      </ul>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  isVNode,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue'\nimport { useMutationObserver } from '@vueuse/core'\nimport { ensureArray, isArray } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectGroupKey } from './token'\n\nimport type { Component, VNode, VNodeArrayChildren } from 'vue'\nimport type { OptionInternalInstance, OptionPublicInstance } from './type'\n\nexport default defineComponent({\n  name: 'ElOptionGroup',\n  componentName: 'ElOptionGroup',\n\n  props: {\n    /**\n     * @description name of the group\n     */\n    label: String,\n    /**\n     * @description whether to disable all options in this group\n     */\n    disabled: Boolean,\n  },\n  setup(props) {\n    const ns = useNamespace('select')\n    const groupRef = ref<HTMLElement>()\n    const instance = getCurrentInstance()!\n    const children = ref<OptionPublicInstance[]>([])\n\n    provide(\n      selectGroupKey,\n      reactive({\n        ...toRefs(props),\n      })\n    )\n\n    const visible = computed(() =>\n      children.value.some((option) => option.visible === true)\n    )\n\n    const isOption = (\n      node: VNode\n    ): node is VNode & { component: OptionInternalInstance } =>\n      (node.type as Component).name === 'ElOption' && !!node.component?.proxy\n\n    // get all instances of options\n    const flattedChildren = (node: VNode | VNodeArrayChildren) => {\n      const nodes = ensureArray(node) as VNode[] | VNodeArrayChildren\n      const children: OptionPublicInstance[] = []\n\n      nodes.forEach((child) => {\n        if (!isVNode(child)) return\n\n        if (isOption(child)) {\n          children.push(child.component.proxy)\n        } else if (isArray(child.children) && child.children.length) {\n          children.push(...flattedChildren(child.children))\n        } else if (child.component?.subTree) {\n          children.push(...flattedChildren(child.component.subTree))\n        }\n      })\n\n      return children\n    }\n\n    const updateChildren = () => {\n      children.value = flattedChildren(instance.subTree)\n    }\n\n    onMounted(() => {\n      updateChildren()\n    })\n\n    useMutationObserver(groupRef, updateChildren, {\n      attributes: true,\n      subtree: true,\n      childList: true,\n    })\n\n    return {\n      groupRef,\n      visible,\n      ns,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;qCACE,mBAOK,MAAA;EAPgB,KAAI;EAAY,OAAK,eAAE,KAAA,GAAG,GAAE,SAAA,OAAA,CAAA;KAC/C,mBAAqD,MAAA,EAAhD,OAAK,eAAE,KAAA,GAAG,GAAE,SAAA,QAAA,CAAA,EAAA,kBAAuB,KAAA,MAAK,EAAA,EAAA,EAC7C,mBAIK,MAAA,MAAA,CAHH,mBAEK,MAAA,EAFA,OAAK,eAAE,KAAA,GAAG,EAAC,QAAA,CAAA,EAAA,GACd,WAAQ,KAAA,QAAA,UAAA,CAAA,uBAJF,KAAA,QAAO,CAAA,CAAA"}
+{"version":3,"file":"option-group.mjs","names":[],"sources":["../../../../../../packages/components/select/src/option-group.vue"],"sourcesContent":["<template>\n  <ul v-show=\"visible\" ref=\"groupRef\" :class=\"ns.be('group', 'wrap')\">\n    <li :class=\"ns.be('group', 'title')\">{{ label }}</li>\n    <li>\n      <ul :class=\"ns.b('group')\">\n        <slot />\n      </ul>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  isVNode,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue'\nimport { useMutationObserver } from '@vueuse/core'\nimport { ensureArray, isArray } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectGroupKey } from './token'\n\nimport type { Component, VNode, VNodeArrayChildren } from 'vue'\nimport type { OptionInternalInstance, OptionPublicInstance } from './type'\n\nexport default defineComponent({\n  name: 'ElOptionGroup',\n  componentName: 'ElOptionGroup',\n\n  props: {\n    /**\n     * @description name of the group\n     */\n    label: String,\n    /**\n     * @description whether to disable all options in this group\n     */\n    disabled: Boolean,\n  },\n  setup(props) {\n    const ns = useNamespace('select')\n    const groupRef = ref<HTMLElement>()\n    const instance = getCurrentInstance()!\n    const children = ref<OptionPublicInstance[]>([])\n\n    provide(\n      selectGroupKey,\n      reactive({\n        ...toRefs(props),\n      })\n    )\n\n    const visible = computed(() =>\n      children.value.some((option) => option.visible === true)\n    )\n\n    const isOption = (\n      node: VNode\n    ): node is VNode & { component: OptionInternalInstance } =>\n      (node.type as Component).name === 'ElOption' && !!node.component?.proxy\n\n    // get all instances of options\n    const flattedChildren = (node: VNode | VNodeArrayChildren) => {\n      const nodes = ensureArray(node) as VNode[] | VNodeArrayChildren\n      const children: OptionPublicInstance[] = []\n\n      nodes.forEach((child) => {\n        if (!isVNode(child)) return\n\n        if (isOption(child)) {\n          children.push(child.component.proxy)\n        } else if (isArray(child.children) && child.children.length) {\n          children.push(...flattedChildren(child.children))\n        } else if (child.component?.subTree) {\n          children.push(...flattedChildren(child.component.subTree))\n        }\n      })\n\n      return children\n    }\n\n    const updateChildren = () => {\n      children.value = flattedChildren(instance.subTree)\n    }\n\n    onMounted(() => {\n      updateChildren()\n    })\n\n    useMutationObserver(groupRef, updateChildren, {\n      attributes: true,\n      subtree: true,\n      childList: true,\n    })\n\n    return {\n      groupRef,\n      visible,\n      ns,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;qCACE,mBAOK,MAAA;EAPgB,KAAI;EAAY,OAAK,eAAE,KAAA,GAAG,GAAE,SAAA,OAAA,CAAA;EAAA,GAC/C,mBAAqD,MAAA,EAAhD,OAAK,eAAE,KAAA,GAAG,GAAE,SAAA,QAAA,CAAA,EAAA,kBAAuB,KAAA,MAAK,EAAA,EAAA,EAC7C,mBAIK,MAAA,MAAA,CAHH,mBAEK,MAAA,EAFA,OAAK,eAAE,KAAA,GAAG,EAAC,QAAA,CAAA,EAAA,GACd,WAAQ,KAAA,QAAA,UAAA,CAAA,uBAJF,KAAA,QAAO,CAAA,CAAA"}

package/es/components/select/src/option-group.vue.d.ts

@@ -2,7 +2,7 @@ import * as vue from "vue";
 
 //#region ../../packages/components/select/src/option-group.vue.d.ts
 declare const _default: typeof __VLS_export;
-declare const __VLS_export: vue.DefineComponent<{
+declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   /**
    * @description name of the group
    */
@@ -11,8 +11,8 @@ declare const __VLS_export: vue.DefineComponent<{
    * @description whether to disable all options in this group
    */
   disabled: BooleanConstructor;
-}, {
-  groupRef: vue.Ref<HTMLElement | undefined>;
+}>, {
+  groupRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
   visible: vue.ComputedRef<boolean>;
   ns: {
     namespace: vue.ComputedRef<string>;
@@ -32,7 +32,7 @@ declare const __VLS_export: vue.DefineComponent<{
     cssVarBlock: (object: Record<string, string>) => Record<string, string>;
     cssVarBlockName: (name: string) => string;
   };
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
   /**
    * @description name of the group
    */
@@ -41,8 +41,8 @@ declare const __VLS_export: vue.DefineComponent<{
    * @description whether to disable all options in this group
    */
   disabled: BooleanConstructor;
-}>>, {
+}>> & Readonly<{}>, {
   disabled: boolean;
-}, {}>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { _default };

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

@@ -5,7 +5,7 @@ import * as vue from "vue";
 
 //#region ../../packages/components/select/src/option.vue.d.ts
 declare const _default: typeof __VLS_export;
-declare const __VLS_export: vue.DefineComponent<{
+declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   value: {
     readonly type: vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>>;
     readonly required: true;
@@ -20,7 +20,7 @@ declare const __VLS_export: vue.DefineComponent<{
   };
   created: BooleanConstructor;
   disabled: BooleanConstructor;
-}, {
+}>, {
   ns: {
     namespace: vue.ComputedRef<string>;
     b: (blockSuffix?: string) => string;
@@ -39,14 +39,14 @@ declare const __VLS_export: vue.DefineComponent<{
     cssVarBlock: (object: Record<string, string>) => Record<string, string>;
     cssVarBlockName: (name: string) => string;
   };
-  id: vue.Ref<string>;
+  id: vue.Ref<string, string>;
   containerKls: vue.ComputedRef<string[]>;
   currentLabel: vue.ComputedRef<boolean | EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
   itemSelected: vue.ComputedRef<boolean>;
   isDisabled: vue.ComputedRef<boolean>;
   select: SelectContext;
-  visible: vue.Ref<boolean>;
-  hover: vue.Ref<boolean>;
+  visible: vue.Ref<boolean, boolean>;
+  hover: vue.Ref<boolean, boolean>;
   states: {
     index: number;
     groupDisabled: boolean;
@@ -56,7 +56,7 @@ declare const __VLS_export: vue.DefineComponent<{
   hoverItem: () => void;
   updateOption: (query: string) => void;
   selectOptionClick: () => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
   value: {
     readonly type: vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>>;
     readonly required: true;
@@ -71,9 +71,9 @@ declare const __VLS_export: vue.DefineComponent<{
   };
   created: BooleanConstructor;
   disabled: BooleanConstructor;
-}>>, {
+}>> & Readonly<{}>, {
   disabled: boolean;
   created: boolean;
-}, {}>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { _default };

package/es/components/select/src/option2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"option2.mjs","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":";;;;;;;;;;;qCACE,mBAaK,MAAA;EAXF,IAAI,KAAA;EACJ,OAAK,eAAE,KAAA,aAAY;EACpB,MAAK;EACJ,iBAAe,KAAA,cAAc;EAC7B,iBAAe,KAAA;EACf,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,aAAA,KAAA,UAAA,GAAA,KAAS;EACpB,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,GAAA,SAAO,KAAA,qBAAA,KAAA,kBAAA,GAAA,KAAiB,EAAA,CAAA,OAAA,CAAA;KAE9B,WAEO,KAAA,QAAA,WAAA,EAAA,QAAA,CADL,mBAA+B,QAAA,MAAA,gBAAtB,KAAA,aAAY,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,IAAA,WAAA,GAAA,CAAA,CAAA,OAVf,KAAA,QAAO,CAAA,CAAA"}
+{"version":3,"file":"option2.mjs","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":";;;;;;;;;;;qCACE,mBAaK,MAAA;EAXF,IAAI,KAAA;EACJ,OAAK,eAAE,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,KAAA,eAAA,GAAA,SAAO,KAAA,qBAAA,KAAA,kBAAA,GAAA,KAAA,EAAiB,CAAA,OAAA,CAAA;EAAA,EAAA,CAE9B,WAEO,KAAA,QAAA,WAAA,EAAA,QAAA,CADL,mBAA+B,QAAA,MAAA,gBAAtB,KAAA,aAAY,EAAA,EAAA,CAAA,CAAA,8BAVf,KAAA,QAAO,CAAA,CAAA"}

package/es/components/select/src/select-dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-dropdown.mjs","names":[],"sources":["../../../../../../packages/components/select/src/select-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b('dropdown'), ns.is('multiple', isMultiple), popperClass]\"\n    :style=\"{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }\"\n  >\n    <div v-if=\"$slots.header\" :class=\"ns.be('dropdown', 'header')\">\n      <slot name=\"header\" />\n    </div>\n    <slot />\n    <div v-if=\"$slots.footer\" :class=\"ns.be('dropdown', 'footer')\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, onMounted, ref } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectKey } from './token'\nimport { BORDER_HORIZONTAL_WIDTH } from '@element-plus/constants'\n\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n\n  componentName: 'ElSelectDropdown',\n\n  setup() {\n    const select = inject(selectKey)!\n    const ns = useNamespace('select')\n\n    // computed\n    const popperClass = computed(() => select.props.popperClass)\n    const isMultiple = computed(() => select.props.multiple)\n    const isFitInputWidth = computed(() => select.props.fitInputWidth)\n    const minWidth = ref('')\n\n    function updateMinWidth() {\n      const offsetWidth = select.selectRef?.offsetWidth\n      if (offsetWidth) {\n        minWidth.value = `${offsetWidth - BORDER_HORIZONTAL_WIDTH}px`\n      } else {\n        minWidth.value = ''\n      }\n    }\n\n    onMounted(() => {\n      // TODO: updatePopper\n      // popper.value.update()\n      updateMinWidth()\n      useResizeObserver(select.selectRef, updateMinWidth)\n    })\n\n    return {\n      ns,\n      minWidth,\n      popperClass,\n      isMultiple,\n      isFitInputWidth,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;qBACE,mBAWM,OAAA;EAVH,OAAK,eAAA;GAAG,KAAA,GAAG,EAAC,WAAA;GAAc,KAAA,GAAG,GAAE,YAAa,KAAA,WAAU;GAAG,KAAA;GAAW,CAAA;EACpE,OAAK,eAAA,GAAK,KAAA,kBAAe,UAAA,aAA0B,KAAA,UAAQ,CAAA;;EAEjD,KAAA,OAAO,UAAA,WAAA,EAAlB,mBAEM,OAAA;;GAFqB,OAAK,eAAE,KAAA,GAAG,GAAE,YAAA,SAAA,CAAA;MACrC,WAAsB,KAAA,QAAA,SAAA,CAAA;EAExB,WAAQ,KAAA,QAAA,UAAA;EACG,KAAA,OAAO,UAAA,WAAA,EAAlB,mBAEM,OAAA;;GAFqB,OAAK,eAAE,KAAA,GAAG,GAAE,YAAA,SAAA,CAAA;MACrC,WAAsB,KAAA,QAAA,SAAA,CAAA"}
+{"version":3,"file":"select-dropdown.mjs","names":[],"sources":["../../../../../../packages/components/select/src/select-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b('dropdown'), ns.is('multiple', isMultiple), popperClass]\"\n    :style=\"{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }\"\n  >\n    <div v-if=\"$slots.header\" :class=\"ns.be('dropdown', 'header')\">\n      <slot name=\"header\" />\n    </div>\n    <slot />\n    <div v-if=\"$slots.footer\" :class=\"ns.be('dropdown', 'footer')\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, onMounted, ref } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectKey } from './token'\nimport { BORDER_HORIZONTAL_WIDTH } from '@element-plus/constants'\n\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n\n  componentName: 'ElSelectDropdown',\n\n  setup() {\n    const select = inject(selectKey)!\n    const ns = useNamespace('select')\n\n    // computed\n    const popperClass = computed(() => select.props.popperClass)\n    const isMultiple = computed(() => select.props.multiple)\n    const isFitInputWidth = computed(() => select.props.fitInputWidth)\n    const minWidth = ref('')\n\n    function updateMinWidth() {\n      const offsetWidth = select.selectRef?.offsetWidth\n      if (offsetWidth) {\n        minWidth.value = `${offsetWidth - BORDER_HORIZONTAL_WIDTH}px`\n      } else {\n        minWidth.value = ''\n      }\n    }\n\n    onMounted(() => {\n      // TODO: updatePopper\n      // popper.value.update()\n      updateMinWidth()\n      useResizeObserver(select.selectRef, updateMinWidth)\n    })\n\n    return {\n      ns,\n      minWidth,\n      popperClass,\n      isMultiple,\n      isFitInputWidth,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;qBACE,mBAWM,OAAA;EAVH,OAAK,eAAA;GAAG,KAAA,GAAG,EAAC,WAAA;GAAc,KAAA,GAAG,GAAE,YAAa,KAAA,WAAU;GAAG,KAAA;GAAW,CAAA;EACpE,OAAK,eAAA,GAAK,KAAA,kBAAe,UAAA,aAA0B,KAAA,UAAQ,CAAA;EAAA;EAEjD,KAAA,OAAO,UAAA,WAAA,EAAlB,mBAEM,OAAA;GAAA,KAAA;GAFqB,OAAK,eAAE,KAAA,GAAG,GAAE,YAAA,SAAA,CAAA;GAAA,GACrC,WAAsB,KAAA,QAAA,SAAA,CAAA;EAExB,WAAQ,KAAA,QAAA,UAAA;EACG,KAAA,OAAO,UAAA,WAAA,EAAlB,mBAEM,OAAA;GAAA,KAAA;GAFqB,OAAK,eAAE,KAAA,GAAG,GAAE,YAAA,SAAA,CAAA;GAAA,GACrC,WAAsB,KAAA,QAAA,SAAA,CAAA"}