@element-plus/nightly 0.0.20260423 → 0.0.20260425

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

@@ -132,6 +132,10 @@ interface CascaderComponentProps extends CascaderCommonProps, UseEmptyValuesProp
    * @description whether to show the radio or checkbox prefix
    */
   showPrefix?: boolean;
+  /**
+   * @description whether the width of the suggestion panel is the same as the input, if the value is `number`, then the width is fixed
+   */
+  fitInputWidth?: boolean | number;
 }
 /**
  * @deprecated Removed after 3.0.0, Use `CascaderComponentProps` instead.
@@ -165,7 +169,7 @@ declare const cascaderProps: {
   maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
   collapseTagsTooltip: BooleanConstructor;
   maxCollapseTagsTooltipHeight: {
-    readonly type: vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
+    readonly type: vue.PropType<EpPropMergeType<(StringConstructor | NumberConstructor)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -180,7 +184,7 @@ declare const cascaderProps: {
     new (): any;
     readonly prototype: any;
   }) | null)[], unknown, unknown, () => true, boolean>;
-  placement: EpPropFinalized<(new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
+  placement: EpPropFinalized<(new (...args: any[]) => "auto" | "top" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "auto" | "top" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
   fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, string[], boolean>;
   popperClass: {
     readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
@@ -311,6 +315,7 @@ declare const cascaderProps: {
   showCheckedStrategy: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
   checkOnClickNode: BooleanConstructor;
   showPrefix: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
+  fitInputWidth: EpPropFinalized<(BooleanConstructor | NumberConstructor)[], unknown, unknown, boolean, boolean>;
   modelValue: {
     readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | number | Record<string, any> | CascaderNodePathValue | (CascaderNodeValue | CascaderNodePathValue)[]) | (() => CascaderValue | null) | (((new (...args: any[]) => string | number | Record<string, any> | CascaderNodePathValue | (CascaderNodeValue | CascaderNodePathValue)[]) | (() => CascaderValue | null)) | null)[], unknown, unknown>>;
     readonly required: false;
@@ -319,6 +324,9 @@ declare const cascaderProps: {
   };
   options: EpPropFinalized<(new (...args: any[]) => CascaderOption[]) | (() => CascaderOption[]) | (((new (...args: any[]) => CascaderOption[]) | (() => CascaderOption[])) | null)[], unknown, unknown, () => CascaderOption[], boolean>;
   props: EpPropFinalized<(new (...args: any[]) => CascaderProps) | (() => CascaderProps) | (((new (...args: any[]) => CascaderProps) | (() => CascaderProps)) | null)[], unknown, unknown, () => CascaderProps, boolean>;
+  virtualScroll: BooleanConstructor;
+  itemSize: EpPropFinalized<NumberConstructor, unknown, unknown, 34, boolean>;
+  height: EpPropFinalized<NumberConstructor, unknown, unknown, 204, boolean>;
 };
 declare const cascaderEmits: {
   "update:modelValue": (value: CascaderValue | null | undefined) => boolean;

package/lib/components/cascader/src/cascader.js

@@ -106,6 +106,10 @@ const cascaderProps = require_runtime$1.buildProps({
 		type: Boolean,
 		default: true
 	},
+	fitInputWidth: {
+		type: [Boolean, Number],
+		default: false
+	},
 	...require_index$1.useEmptyValuesProps
 });
 const emitChangeFn = (value) => true;

package/lib/components/cascader/src/cascader.js.map

@@ -1 +1 @@
-{"version":3,"file":"cascader.js","names":["buildProps","CommonProps","useSizeProp","iconPropType","CircleClose","definePropType","placements","useTooltipContentProps","tagProps","useEmptyValuesProps","UPDATE_MODEL_EVENT","CHANGE_EVENT","isBoolean"],"sources":["../../../../../../packages/components/cascader/src/cascader.ts"],"sourcesContent":["import { placements } from '@popperjs/core'\nimport { CommonProps } from '@element-plus/components/cascader-panel'\nimport {\n  buildProps,\n  definePropType,\n  iconPropType,\n  isBoolean,\n} from '@element-plus/utils'\nimport { useEmptyValuesProps, useSizeProp } from '@element-plus/hooks'\nimport { useTooltipContentProps } from '@element-plus/components/tooltip'\nimport { tagProps } from '@element-plus/components/tag'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { CircleClose } from '@element-plus/icons-vue'\n\nimport type { StyleValue } from 'vue'\nimport type { UseEmptyValuesProps } from '@element-plus/hooks'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { Placement, PopperEffect } from '@element-plus/components/popper'\nimport type {\n  CascaderCommonProps,\n  CascaderNode,\n  CascaderValue,\n} from '@element-plus/components/cascader-panel'\nimport type { TagProps } from '@element-plus/components/tag'\nimport type { IconPropType } from '@element-plus/utils'\n\ntype CascaderClassType = string | Record<string, boolean> | CascaderClassType[]\n\nexport interface CascaderComponentProps\n  extends CascaderCommonProps, UseEmptyValuesProps {\n  /**\n   * @description size of input\n   */\n  size?: ComponentSize\n  /**\n   * @description placeholder of input\n   */\n  placeholder?: string\n  /**\n   * @description whether Cascader is disabled\n   */\n  disabled?: boolean\n  /**\n   * @description whether selected value can be cleared\n   */\n  clearable?: boolean\n  /**\n   * @description custom clear icon component\n   */\n  clearIcon?: IconPropType\n  /**\n   * @description whether the options can be searched\n   */\n  filterable?: boolean\n  /**\n   * @description customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.\n   */\n  filterMethod?: (node: CascaderNode, keyword: string) => boolean\n  /**\n   * @description option label separator\n   */\n  separator?: string\n  /**\n   * @description whether to display all levels of the selected value in the input\n   */\n  showAllLevels?: boolean\n  /**\n   * @description whether to collapse tags in multiple selection mode\n   */\n  collapseTags?: boolean\n  /**\n   * @description The max tags number to be shown. To use this, collapse-tags must be true\n   */\n  maxCollapseTags?: number\n  /**\n   * @description whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be true\n   */\n  collapseTagsTooltip?: boolean\n  /**\n   * @description The max height of collapse tags tooltip, in pixels. To use this, collapse-tags-tooltip must be true\n   */\n  maxCollapseTagsTooltipHeight?: string | number\n  /**\n   * @description debounce delay when typing filter keyword, in milliseconds\n   */\n  debounce?: number\n  /**\n   * @description hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted\n   */\n  beforeFilter?: (value: string) => boolean | Promise<any>\n  /**\n   * @description position of dropdown\n   */\n  placement?: Placement\n  /**\n   * @description list of possible positions for dropdown\n   */\n  fallbackPlacements?: Placement[]\n  /**\n   * @description custom class name for Cascader's dropdown\n   */\n  popperClass?: CascaderClassType\n  /**\n   * @description custom style for Cascader's dropdown\n   */\n  popperStyle?: StyleValue\n  /**\n   * @description whether cascader popup is teleported\n   */\n  teleported?: boolean\n  /**\n   * @description tooltip theme, built-in theme: `dark` / `light`\n   */\n  effect?: PopperEffect\n  /**\n   * @description tag type\n   */\n  tagType?: TagProps['type']\n  /**\n   * @description tag effect\n   */\n  tagEffect?: TagProps['effect']\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\n  /**\n   * @description when dropdown is inactive and `persistent` is `false`, dropdown will be destroyed\n   */\n  persistent?: boolean\n  /**\n   * @description Use `parent` when you want things tidy (like \"Entire Collection\" instead of listing 100 items)\n   * Use `child` when every single item matters (like important settings)\n   */\n  showCheckedStrategy?: 'parent' | 'child'\n  /**\n   * @description whether to check or uncheck node when clicking on the node\n   */\n  checkOnClickNode?: boolean\n  /**\n   * @description whether to show the radio or checkbox prefix\n   */\n  showPrefix?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `CascaderComponentProps` instead.\n */\nexport const cascaderProps = buildProps({\n  ...CommonProps,\n  /**\n   * @description size of input\n   */\n  size: useSizeProp,\n  /**\n   * @description placeholder of input\n   */\n  placeholder: String,\n  /**\n   * @description whether Cascader is disabled\n   */\n  disabled: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description whether selected value can be cleared\n   */\n  clearable: Boolean,\n  /**\n   * @description custom clear icon component\n   */\n  clearIcon: {\n    type: iconPropType,\n    default: CircleClose,\n  },\n  /**\n   * @description whether the options can be searched\n   */\n  filterable: Boolean,\n  /**\n   * @description customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.\n   */\n  filterMethod: {\n    type: definePropType<(node: CascaderNode, keyword: string) => boolean>(\n      Function\n    ),\n    default: (node: CascaderNode, keyword: string) =>\n      node.text.includes(keyword),\n  },\n  /**\n   * @description option label separator\n   */\n  separator: {\n    type: String,\n    default: ' / ',\n  },\n  /**\n   * @description whether to display all levels of the selected value in the input\n   */\n  showAllLevels: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether to collapse tags in multiple selection mode\n   */\n  collapseTags: Boolean,\n  /**\n   * @description The max tags number to be shown. To use this, collapse-tags must be true\n   */\n  maxCollapseTags: {\n    type: Number,\n    default: 1,\n  },\n  /**\n   * @description whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be true\n   */\n  collapseTagsTooltip: Boolean,\n  /**\n   * @description The max height of collapse tags tooltip, in pixels. To use this, collapse-tags-tooltip must be true\n   */\n  maxCollapseTagsTooltipHeight: {\n    type: [String, Number],\n  },\n  /**\n   * @description debounce delay when typing filter keyword, in milliseconds\n   */\n  debounce: {\n    type: Number,\n    default: 300,\n  },\n  /**\n   * @description hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted\n   */\n  beforeFilter: {\n    type: definePropType<(value: string) => boolean | Promise<any>>(Function),\n    default: () => true,\n  },\n  /**\n   * @description position of dropdown\n   */\n  placement: {\n    type: definePropType<Placement>(String),\n    values: placements,\n    default: 'bottom-start',\n  },\n  /**\n   * @description list of possible positions for dropdown\n   */\n  fallbackPlacements: {\n    type: definePropType<Placement[]>(Array),\n    default: ['bottom-start', 'bottom', 'top-start', 'top', 'right', 'left'],\n  },\n  /**\n   * @description custom class name for Cascader's dropdown\n   */\n  popperClass: useTooltipContentProps.popperClass,\n  /**\n   * @description custom style for Cascader's dropdown\n   */\n  popperStyle: useTooltipContentProps.popperStyle,\n  /**\n   * @description whether cascader popup is teleported\n   */\n  teleported: useTooltipContentProps.teleported,\n  /**\n   * @description tooltip theme, built-in theme: `dark` / `light`\n   */\n  effect: {\n    type: definePropType<PopperEffect>(String),\n    default: 'light',\n  },\n  /**\n   * @description tag type\n   */\n\n  tagType: { ...tagProps.type, default: 'info' },\n  /**\n   * @description tag effect\n   */\n  tagEffect: { ...tagProps.effect, default: 'light' },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description when dropdown is inactive and `persistent` is `false`, dropdown will be destroyed\n   */\n  persistent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description Use `parent` when you want things tidy (like \"Entire Collection\" instead of listing 100 items)\n   * Use `child` when every single item matters (like important settings)\n   */\n  showCheckedStrategy: {\n    type: String,\n    values: ['parent', 'child'],\n    default: 'child',\n  },\n  /**\n   * @description whether to check or uncheck node when clicking on the node\n   */\n  checkOnClickNode: Boolean,\n  /**\n   * @description whether to show the radio or checkbox prefix\n   */\n  showPrefix: {\n    type: Boolean,\n    default: true,\n  },\n  ...useEmptyValuesProps,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst emitChangeFn = (value: CascaderValue | null | undefined) => true\n\nexport const cascaderEmits = {\n  [UPDATE_MODEL_EVENT]: emitChangeFn,\n  [CHANGE_EVENT]: emitChangeFn,\n  focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n  blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n  clear: () => true,\n  visibleChange: (val: boolean) => isBoolean(val),\n  expandChange: (val: CascaderValue) => !!val,\n  removeTag: (val: CascaderNode['valueByOption']) => !!val,\n}\n\nexport type CascaderEmits = typeof cascaderEmits\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoJA,MAAa,gBAAgBA,6BAAW;CACtC,GAAGC;CAIH,MAAMC;CAIN,aAAa;CAIb,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,WAAW;CAIX,WAAW;EACT,MAAMC;EACN,SAASC;EACV;CAID,YAAY;CAIZ,cAAc;EACZ,MAAMC,iCACJ,SACD;EACD,UAAU,MAAoB,YAC5B,KAAK,KAAK,SAAS,QAAQ;EAC9B;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,cAAc;CAId,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CAID,qBAAqB;CAIrB,8BAA8B,EAC5B,MAAM,CAAC,QAAQ,OAAO,EACvB;CAID,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,cAAc;EACZ,MAAMA,iCAA0D,SAAS;EACzE,eAAe;EAChB;CAID,WAAW;EACT,MAAMA,iCAA0B,OAAO;EACvC,QAAQC;EACR,SAAS;EACV;CAID,oBAAoB;EAClB,MAAMD,iCAA4B,MAAM;EACxC,SAAS;GAAC;GAAgB;GAAU;GAAa;GAAO;GAAS;GAAO;EACzE;CAID,aAAaE,uCAAuB;CAIpC,aAAaA,uCAAuB;CAIpC,YAAYA,uCAAuB;CAInC,QAAQ;EACN,MAAMF,iCAA6B,OAAO;EAC1C,SAAS;EACV;CAKD,SAAS;EAAE,GAAGG,qBAAS;EAAM,SAAS;EAAQ;CAI9C,WAAW;EAAE,GAAGA,qBAAS;EAAQ,SAAS;EAAS;CAInD,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,YAAY;EACV,MAAM;EACN,SAAS;EACV;CAKD,qBAAqB;EACnB,MAAM;EACN,QAAQ,CAAC,UAAU,QAAQ;EAC3B,SAAS;EACV;CAID,kBAAkB;CAIlB,YAAY;EACV,MAAM;EACN,SAAS;EACV;CACD,GAAGC;CACJ,CAAC;AAGF,MAAM,gBAAgB,UAA4C;AAElE,MAAa,gBAAgB;EAC1BC,mCAAqB;EACrBC,6BAAe;CAChB,QAAQ,QAAoB,eAAe;CAC3C,OAAO,QAAoB,eAAe;CAC1C,aAAa;CACb,gBAAgB,QAAiBC,wBAAU,IAAI;CAC/C,eAAe,QAAuB,CAAC,CAAC;CACxC,YAAY,QAAuC,CAAC,CAAC;CACtD"}
+{"version":3,"file":"cascader.js","names":["buildProps","CommonProps","useSizeProp","iconPropType","CircleClose","definePropType","placements","useTooltipContentProps","tagProps","useEmptyValuesProps","UPDATE_MODEL_EVENT","CHANGE_EVENT","isBoolean"],"sources":["../../../../../../packages/components/cascader/src/cascader.ts"],"sourcesContent":["import { placements } from '@popperjs/core'\nimport { CommonProps } from '@element-plus/components/cascader-panel'\nimport {\n  buildProps,\n  definePropType,\n  iconPropType,\n  isBoolean,\n} from '@element-plus/utils'\nimport { useEmptyValuesProps, useSizeProp } from '@element-plus/hooks'\nimport { useTooltipContentProps } from '@element-plus/components/tooltip'\nimport { tagProps } from '@element-plus/components/tag'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { CircleClose } from '@element-plus/icons-vue'\n\nimport type { StyleValue } from 'vue'\nimport type { UseEmptyValuesProps } from '@element-plus/hooks'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { Placement, PopperEffect } from '@element-plus/components/popper'\nimport type {\n  CascaderCommonProps,\n  CascaderNode,\n  CascaderValue,\n} from '@element-plus/components/cascader-panel'\nimport type { TagProps } from '@element-plus/components/tag'\nimport type { IconPropType } from '@element-plus/utils'\n\ntype CascaderClassType = string | Record<string, boolean> | CascaderClassType[]\n\nexport interface CascaderComponentProps\n  extends CascaderCommonProps, UseEmptyValuesProps {\n  /**\n   * @description size of input\n   */\n  size?: ComponentSize\n  /**\n   * @description placeholder of input\n   */\n  placeholder?: string\n  /**\n   * @description whether Cascader is disabled\n   */\n  disabled?: boolean\n  /**\n   * @description whether selected value can be cleared\n   */\n  clearable?: boolean\n  /**\n   * @description custom clear icon component\n   */\n  clearIcon?: IconPropType\n  /**\n   * @description whether the options can be searched\n   */\n  filterable?: boolean\n  /**\n   * @description customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.\n   */\n  filterMethod?: (node: CascaderNode, keyword: string) => boolean\n  /**\n   * @description option label separator\n   */\n  separator?: string\n  /**\n   * @description whether to display all levels of the selected value in the input\n   */\n  showAllLevels?: boolean\n  /**\n   * @description whether to collapse tags in multiple selection mode\n   */\n  collapseTags?: boolean\n  /**\n   * @description The max tags number to be shown. To use this, collapse-tags must be true\n   */\n  maxCollapseTags?: number\n  /**\n   * @description whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be true\n   */\n  collapseTagsTooltip?: boolean\n  /**\n   * @description The max height of collapse tags tooltip, in pixels. To use this, collapse-tags-tooltip must be true\n   */\n  maxCollapseTagsTooltipHeight?: string | number\n  /**\n   * @description debounce delay when typing filter keyword, in milliseconds\n   */\n  debounce?: number\n  /**\n   * @description hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted\n   */\n  beforeFilter?: (value: string) => boolean | Promise<any>\n  /**\n   * @description position of dropdown\n   */\n  placement?: Placement\n  /**\n   * @description list of possible positions for dropdown\n   */\n  fallbackPlacements?: Placement[]\n  /**\n   * @description custom class name for Cascader's dropdown\n   */\n  popperClass?: CascaderClassType\n  /**\n   * @description custom style for Cascader's dropdown\n   */\n  popperStyle?: StyleValue\n  /**\n   * @description whether cascader popup is teleported\n   */\n  teleported?: boolean\n  /**\n   * @description tooltip theme, built-in theme: `dark` / `light`\n   */\n  effect?: PopperEffect\n  /**\n   * @description tag type\n   */\n  tagType?: TagProps['type']\n  /**\n   * @description tag effect\n   */\n  tagEffect?: TagProps['effect']\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\n  /**\n   * @description when dropdown is inactive and `persistent` is `false`, dropdown will be destroyed\n   */\n  persistent?: boolean\n  /**\n   * @description Use `parent` when you want things tidy (like \"Entire Collection\" instead of listing 100 items)\n   * Use `child` when every single item matters (like important settings)\n   */\n  showCheckedStrategy?: 'parent' | 'child'\n  /**\n   * @description whether to check or uncheck node when clicking on the node\n   */\n  checkOnClickNode?: boolean\n  /**\n   * @description whether to show the radio or checkbox prefix\n   */\n  showPrefix?: boolean\n  /**\n   * @description whether the width of the suggestion panel is the same as the input, if the value is `number`, then the width is fixed\n   */\n  fitInputWidth?: boolean | number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `CascaderComponentProps` instead.\n */\nexport const cascaderProps = buildProps({\n  ...CommonProps,\n  /**\n   * @description size of input\n   */\n  size: useSizeProp,\n  /**\n   * @description placeholder of input\n   */\n  placeholder: String,\n  /**\n   * @description whether Cascader is disabled\n   */\n  disabled: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description whether selected value can be cleared\n   */\n  clearable: Boolean,\n  /**\n   * @description custom clear icon component\n   */\n  clearIcon: {\n    type: iconPropType,\n    default: CircleClose,\n  },\n  /**\n   * @description whether the options can be searched\n   */\n  filterable: Boolean,\n  /**\n   * @description customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.\n   */\n  filterMethod: {\n    type: definePropType<(node: CascaderNode, keyword: string) => boolean>(\n      Function\n    ),\n    default: (node: CascaderNode, keyword: string) =>\n      node.text.includes(keyword),\n  },\n  /**\n   * @description option label separator\n   */\n  separator: {\n    type: String,\n    default: ' / ',\n  },\n  /**\n   * @description whether to display all levels of the selected value in the input\n   */\n  showAllLevels: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether to collapse tags in multiple selection mode\n   */\n  collapseTags: Boolean,\n  /**\n   * @description The max tags number to be shown. To use this, collapse-tags must be true\n   */\n  maxCollapseTags: {\n    type: Number,\n    default: 1,\n  },\n  /**\n   * @description whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be true\n   */\n  collapseTagsTooltip: Boolean,\n  /**\n   * @description The max height of collapse tags tooltip, in pixels. To use this, collapse-tags-tooltip must be true\n   */\n  maxCollapseTagsTooltipHeight: {\n    type: [String, Number],\n  },\n  /**\n   * @description debounce delay when typing filter keyword, in milliseconds\n   */\n  debounce: {\n    type: Number,\n    default: 300,\n  },\n  /**\n   * @description hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted\n   */\n  beforeFilter: {\n    type: definePropType<(value: string) => boolean | Promise<any>>(Function),\n    default: () => true,\n  },\n  /**\n   * @description position of dropdown\n   */\n  placement: {\n    type: definePropType<Placement>(String),\n    values: placements,\n    default: 'bottom-start',\n  },\n  /**\n   * @description list of possible positions for dropdown\n   */\n  fallbackPlacements: {\n    type: definePropType<Placement[]>(Array),\n    default: ['bottom-start', 'bottom', 'top-start', 'top', 'right', 'left'],\n  },\n  /**\n   * @description custom class name for Cascader's dropdown\n   */\n  popperClass: useTooltipContentProps.popperClass,\n  /**\n   * @description custom style for Cascader's dropdown\n   */\n  popperStyle: useTooltipContentProps.popperStyle,\n  /**\n   * @description whether cascader popup is teleported\n   */\n  teleported: useTooltipContentProps.teleported,\n  /**\n   * @description tooltip theme, built-in theme: `dark` / `light`\n   */\n  effect: {\n    type: definePropType<PopperEffect>(String),\n    default: 'light',\n  },\n  /**\n   * @description tag type\n   */\n\n  tagType: { ...tagProps.type, default: 'info' },\n  /**\n   * @description tag effect\n   */\n  tagEffect: { ...tagProps.effect, default: 'light' },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description when dropdown is inactive and `persistent` is `false`, dropdown will be destroyed\n   */\n  persistent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description Use `parent` when you want things tidy (like \"Entire Collection\" instead of listing 100 items)\n   * Use `child` when every single item matters (like important settings)\n   */\n  showCheckedStrategy: {\n    type: String,\n    values: ['parent', 'child'],\n    default: 'child',\n  },\n  /**\n   * @description whether to check or uncheck node when clicking on the node\n   */\n  checkOnClickNode: Boolean,\n  /**\n   * @description whether to show the radio or checkbox prefix\n   */\n  showPrefix: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether the width of the suggestion panel is the same as the input, if the value is `number`, then the width is fixed\n   */\n  fitInputWidth: {\n    type: [Boolean, Number],\n    default: false,\n  },\n  ...useEmptyValuesProps,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst emitChangeFn = (value: CascaderValue | null | undefined) => true\n\nexport const cascaderEmits = {\n  [UPDATE_MODEL_EVENT]: emitChangeFn,\n  [CHANGE_EVENT]: emitChangeFn,\n  focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n  blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n  clear: () => true,\n  visibleChange: (val: boolean) => isBoolean(val),\n  expandChange: (val: CascaderValue) => !!val,\n  removeTag: (val: CascaderNode['valueByOption']) => !!val,\n}\n\nexport type CascaderEmits = typeof cascaderEmits\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwJA,MAAa,gBAAgBA,6BAAW;CACtC,GAAGC;CAIH,MAAMC;CAIN,aAAa;CAIb,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,WAAW;CAIX,WAAW;EACT,MAAMC;EACN,SAASC;EACV;CAID,YAAY;CAIZ,cAAc;EACZ,MAAMC,iCACJ,SACD;EACD,UAAU,MAAoB,YAC5B,KAAK,KAAK,SAAS,QAAQ;EAC9B;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,cAAc;CAId,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CAID,qBAAqB;CAIrB,8BAA8B,EAC5B,MAAM,CAAC,QAAQ,OAAO,EACvB;CAID,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,cAAc;EACZ,MAAMA,iCAA0D,SAAS;EACzE,eAAe;EAChB;CAID,WAAW;EACT,MAAMA,iCAA0B,OAAO;EACvC,QAAQC;EACR,SAAS;EACV;CAID,oBAAoB;EAClB,MAAMD,iCAA4B,MAAM;EACxC,SAAS;GAAC;GAAgB;GAAU;GAAa;GAAO;GAAS;GAAO;EACzE;CAID,aAAaE,uCAAuB;CAIpC,aAAaA,uCAAuB;CAIpC,YAAYA,uCAAuB;CAInC,QAAQ;EACN,MAAMF,iCAA6B,OAAO;EAC1C,SAAS;EACV;CAKD,SAAS;EAAE,GAAGG,qBAAS;EAAM,SAAS;EAAQ;CAI9C,WAAW;EAAE,GAAGA,qBAAS;EAAQ,SAAS;EAAS;CAInD,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,YAAY;EACV,MAAM;EACN,SAAS;EACV;CAKD,qBAAqB;EACnB,MAAM;EACN,QAAQ,CAAC,UAAU,QAAQ;EAC3B,SAAS;EACV;CAID,kBAAkB;CAIlB,YAAY;EACV,MAAM;EACN,SAAS;EACV;CAID,eAAe;EACb,MAAM,CAAC,SAAS,OAAO;EACvB,SAAS;EACV;CACD,GAAGC;CACJ,CAAC;AAGF,MAAM,gBAAgB,UAA4C;AAElE,MAAa,gBAAgB;EAC1BC,mCAAqB;EACrBC,6BAAe;CAChB,QAAQ,QAAoB,eAAe;CAC3C,OAAO,QAAoB,eAAe;CAC1C,aAAa;CACb,gBAAgB,QAAiBC,wBAAU,IAAI;CAC/C,eAAe,QAAuB,CAAC,CAAC;CACxC,YAAY,QAAuC,CAAC,CAAC;CACtD"}

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

@@ -81,7 +81,7 @@ declare var __VLS_26: {}, __VLS_55: {
       closable: boolean;
     }[];
     deleteTag: (tag: Tag) => void;
-  }, __VLS_96: {}, __VLS_110: {}, __VLS_122: {
+  }, __VLS_96: {}, __VLS_110: {}, __VLS_120: {
     item: {
       readonly uid: number;
       readonly level: number;
@@ -143,7 +143,9 @@ declare var __VLS_26: {}, __VLS_55: {
       setCheckState: (checked: boolean) => void;
       doCheck: (checked: boolean) => void;
     };
-  }, __VLS_135: {}, __VLS_137: {};
+  }, __VLS_133: {}, __VLS_144: {
+    item: any;
+  }, __VLS_157: {}, __VLS_159: {};
 type __VLS_Slots = {} & {
   prefix?: (props: typeof __VLS_26) => any;
 } & {
@@ -153,11 +155,15 @@ type __VLS_Slots = {} & {
 } & {
   empty?: (props: typeof __VLS_110) => any;
 } & {
-  'suggestion-item'?: (props: typeof __VLS_122) => any;
+  'suggestion-item'?: (props: typeof __VLS_120) => any;
 } & {
-  empty?: (props: typeof __VLS_135) => any;
+  empty?: (props: typeof __VLS_133) => any;
 } & {
-  footer?: (props: typeof __VLS_137) => any;
+  'suggestion-item'?: (props: typeof __VLS_144) => any;
+} & {
+  empty?: (props: typeof __VLS_157) => any;
+} & {
+  footer?: (props: typeof __VLS_159) => any;
 };
 declare const __VLS_base: vue.DefineComponent<CascaderComponentProps, {
   /**
@@ -183,45 +189,47 @@ declare const __VLS_base: vue.DefineComponent<CascaderComponentProps, {
   focus: () => void; /** @description blur the input element */
   blur: () => void;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  clear: () => void;
-  "update:modelValue": (value: CascaderValue | null | undefined) => void;
   change: (value: CascaderValue | null | undefined) => void;
-  focus: (evt: FocusEvent) => void;
+  "update:modelValue": (value: CascaderValue | null | undefined) => void;
+  clear: () => void;
   blur: (evt: FocusEvent) => void;
+  focus: (evt: FocusEvent) => void;
   visibleChange: (val: boolean) => void;
   expandChange: (val: CascaderValue) => void;
   removeTag: (val: CascaderNodeValue | CascaderNodePathValue) => void;
 }, string, vue.PublicProps, Readonly<CascaderComponentProps> & Readonly<{
-  onClear?: (() => any) | undefined;
-  "onUpdate:modelValue"?: ((value: CascaderValue | null | undefined) => any) | undefined;
   onChange?: ((value: CascaderValue | null | undefined) => any) | undefined;
-  onFocus?: ((evt: FocusEvent) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: CascaderValue | null | undefined) => any) | undefined;
+  onClear?: (() => any) | undefined;
   onBlur?: ((evt: FocusEvent) => any) | undefined;
+  onFocus?: ((evt: FocusEvent) => any) | undefined;
   onVisibleChange?: ((val: boolean) => any) | undefined;
   onExpandChange?: ((val: CascaderValue) => any) | undefined;
   onRemoveTag?: ((val: CascaderNodeValue | CascaderNodePathValue) => any) | undefined;
 }>, {
+  valueOnClear: string | number | boolean | Function | null;
   props: CascaderProps;
-  fallbackPlacements: Placement[];
-  placement: Placement;
+  disabled: boolean;
   effect: PopperEffect;
+  validateEvent: boolean;
+  placement: Placement;
   popperStyle: string | false | vue.CSSProperties | StyleValue[] | null;
+  fallbackPlacements: Placement[];
+  height: number;
+  filterMethod: (node: Node, keyword: string) => boolean;
+  itemSize: number;
+  separator: string;
   teleported: boolean;
   persistent: boolean;
-  disabled: boolean;
-  options: CascaderOption[];
-  valueOnClear: string | number | boolean | Function | null;
   clearIcon: IconPropType;
-  validateEvent: boolean;
-  separator: string;
+  options: CascaderOption[];
   debounce: number;
-  showPrefix: boolean;
-  filterMethod: (node: Node, keyword: string) => boolean;
-  showAllLevels: boolean;
   maxCollapseTags: number;
-  beforeFilter: (value: string) => boolean | Promise<any>;
   tagType: "primary" | "success" | "info" | "warning" | "danger";
   tagEffect: "light" | "dark" | "plain";
+  showPrefix: boolean;
+  showAllLevels: boolean;
+  beforeFilter: (value: string) => boolean | Promise<any>;
   showCheckedStrategy: "parent" | "child";
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -3,6 +3,7 @@ const require_aria = require('../../../utils/dom/aria.js');
 const require_aria$1 = require('../../../constants/aria.js');
 const require_event = require('../../../constants/event.js');
 const require_event$1 = require('../../../utils/dom/event.js');
+const require_types = require('../../../utils/types.js');
 const require_index = require('../../../hooks/use-locale/index.js');
 const require_index$1 = require('../../../hooks/use-namespace/index.js');
 const require_index$2 = require('../../../hooks/use-focus-controller/index.js');
@@ -16,6 +17,7 @@ const require_index$7 = require('../../input/index.js');
 const require_index$8 = require('../../scrollbar/index.js');
 const require_index$9 = require('../../../directives/click-outside/index.js');
 const require_index$10 = require('../../tag/index.js');
+const require_fixed_size_list = require('../../virtual-list/src/components/fixed-size-list.js');
 const require_index$11 = require('../../cascader-panel/index.js');
 const require_cascader = require('./cascader.js');
 let _vueuse_core = require("@vueuse/core");
@@ -27,6 +29,12 @@ let _vue_shared = require("@vue/shared");
 //#region ../../packages/components/cascader/src/cascader.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = ["placeholder"];
 const _hoisted_2 = ["onClick"];
+const _hoisted_3 = [
+	"id",
+	"data-suggestion-index",
+	"onClick"
+];
+const SUGGESTION_ITEM_EXTRA_WIDTH = 34;
 var cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "ElCascader",
 	__name: "cascader",
@@ -76,6 +84,7 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 		const tagWrapper = (0, vue.ref)();
 		const cascaderPanelRef = (0, vue.ref)();
 		const suggestionPanel = (0, vue.ref)();
+		const suggestionVirtualListRef = (0, vue.ref)();
 		const popperVisible = (0, vue.ref)(false);
 		const inputHover = (0, vue.ref)(false);
 		const filtering = (0, vue.ref)(false);
@@ -83,6 +92,9 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 		const searchInputValue = (0, vue.ref)("");
 		const tags = (0, vue.ref)([]);
 		const suggestions = (0, vue.ref)([]);
+		const suggestionListWidth = (0, vue.ref)("100%");
+		const hasCustomSuggestionItemSlot = (0, vue.computed)(() => !!slots["suggestion-item"]);
+		const clampedSuggestionListHeight = (0, vue.computed)(() => (0, lodash_unified.clamp)(suggestions.value.length * props.itemSize, props.itemSize, props.height));
 		const showTagList = (0, vue.computed)(() => {
 			if (!props.props.multiple) return [];
 			return props.collapseTags ? tags.value.slice(0, props.maxCollapseTags) : tags.value;
@@ -222,42 +234,87 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 			});
 			filtering.value = true;
 			suggestions.value = res;
+			(0, vue.nextTick)(() => {
+				if (props.virtualScroll && suggestions.value.length > 0) suggestionVirtualListRef.value?.scrollToItem(0);
+				updateStyle();
+			});
 			updatePopperPosition();
 		};
+		const getSuggestionPanelEl = (selector) => {
+			const el = suggestionPanel.value;
+			return selector ? el?.querySelector(selector) ?? void 0 : el;
+		};
 		const focusFirstNode = () => {
 			let firstNode;
-			if (filtering.value && suggestionPanel.value) firstNode = suggestionPanel.value.$el.querySelector(`.${nsCascader.e("suggestion-item")}`);
+			if (filtering.value && suggestionPanel.value) firstNode = getSuggestionPanelEl(`.${nsCascader.e("suggestion-item")}`);
 			else firstNode = cascaderPanelRef.value?.$el.querySelector(`.${nsCascader.b("node")}[tabindex="-1"]`);
 			if (firstNode) {
 				firstNode.focus();
 				if (!filtering.value && firstNode.getAttribute("aria-haspopup") === "true") firstNode.click();
 			}
 		};
+		const updateSuggestionPanelWidth = (inputWidth) => {
+			const suggestionPanelEl = getSuggestionPanelEl();
+			if (!suggestionPanelEl) return;
+			const panelWidth = require_types.isNumber(props.fitInputWidth) ? `${props.fitInputWidth}px` : `${inputWidth}px`;
+			const setPanelStyle = (el) => {
+				if (props.fitInputWidth !== false) {
+					el.style.width = panelWidth;
+					el.style.minWidth = "";
+				} else {
+					el.style.width = "";
+					el.style.minWidth = panelWidth;
+				}
+			};
+			setPanelStyle(suggestionPanelEl);
+			if (props.virtualScroll) {
+				suggestionListWidth.value = props.fitInputWidth !== false ? panelWidth : hasCustomSuggestionItemSlot.value ? `${inputWidth}px` : `${Math.max(inputWidth, calculateSuggestionMaxWidth())}px`;
+				return;
+			}
+			const suggestionList = getSuggestionPanelEl(`.${nsCascader.e("suggestion-list")}`);
+			if (suggestionList) setPanelStyle(suggestionList);
+		};
+		const getTagWrapperLeft = () => {
+			if (!slots.prefix) return 0;
+			const prefix = inputRef.value?.$el.querySelector(`.${nsInput.e("prefix")}`);
+			if (!prefix) return 0;
+			const prefixWidth = prefix.getBoundingClientRect().width;
+			if (prefixWidth <= 0) return 0;
+			return prefixWidth + sizeMapPadding[realSize.value || "default"];
+		};
 		const updateStyle = () => {
 			const inputInner = inputRef.value?.input;
+			const inputWrapper = inputRef.value?.$el;
+			if (!_vueuse_core.isClient || !inputInner || !inputWrapper) return;
+			if (suggestionPanel.value) updateSuggestionPanelWidth(inputWrapper.getBoundingClientRect().width);
 			const tagWrapperEl = tagWrapper.value;
-			const suggestionPanelEl = suggestionPanel.value?.$el;
-			if (!_vueuse_core.isClient || !inputInner) return;
-			if (suggestionPanelEl) {
-				const suggestionList = suggestionPanelEl.querySelector(`.${nsCascader.e("suggestion-list")}`);
-				suggestionList.style.minWidth = `${inputInner.offsetWidth}px`;
-			}
 			if (tagWrapperEl) {
-				const { offsetHeight } = tagWrapperEl;
-				const height = tags.value.length > 0 ? `${Math.max(offsetHeight, inputInitialHeight) - 2}px` : `${inputInitialHeight}px`;
+				const height = tags.value.length > 0 ? `${Math.max(tagWrapperEl.offsetHeight, inputInitialHeight) - 2}px` : `${inputInitialHeight}px`;
 				inputInner.style.height = height;
-				if (slots.prefix) {
-					const prefix = inputRef.value?.$el.querySelector(`.${nsInput.e("prefix")}`);
-					let left = 0;
-					if (prefix) {
-						left = prefix.offsetWidth;
-						if (left > 0) left += sizeMapPadding[realSize.value || "default"];
-					}
-					tagWrapperEl.style.left = `${left}px`;
-				} else tagWrapperEl.style.left = `0`;
+				tagWrapperEl.style.left = `${getTagWrapperLeft()}px`;
 				updatePopperPosition();
 			}
 		};
+		const calculateSuggestionMaxWidth = () => {
+			if (hasCustomSuggestionItemSlot.value) return 0;
+			if (!suggestions.value.length) return 0;
+			const ctx = document.createElement("canvas").getContext("2d");
+			if (!ctx) return 0;
+			const renderedSuggestion = getSuggestionPanelEl(`.${nsCascader.e("suggestion-item")}`);
+			if (!renderedSuggestion || !_vueuse_core.isClient) return 0;
+			const style = getComputedStyle(renderedSuggestion);
+			const padding = Number.parseFloat(style.paddingLeft) + Number.parseFloat(style.paddingRight);
+			ctx.font = `bold ${style.fontSize} ${style.fontFamily}`;
+			let maxWidth = 0;
+			let hasChecked = false;
+			for (const suggestion of suggestions.value) {
+				const text = suggestion.text || "";
+				const metrics = ctx.measureText(text);
+				maxWidth = Math.max(maxWidth, metrics.width);
+				if (suggestion.checked && !hasChecked) hasChecked = true;
+			}
+			return maxWidth + padding + (hasChecked ? SUGGESTION_ITEM_EXTRA_WIDTH : 0);
+		};
 		const getCheckedNodes = (leafOnly) => {
 			return cascaderPanelRef.value?.getCheckedNodes(leafOnly);
 		};
@@ -308,15 +365,37 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 				togglePopperVisible(false);
 			}
 		};
+		const getSuggestionIndexFromTarget = (target) => {
+			const indexStr = target.closest("[data-suggestion-index]")?.dataset.suggestionIndex;
+			if (!indexStr) return -1;
+			const index = Number.parseInt(indexStr, 10);
+			if (Number.isNaN(index) || index < 0 || index >= suggestions.value.length) return -1;
+			return index;
+		};
 		const handleSuggestionKeyDown = (e) => {
 			const target = e.target;
 			const code = require_event$1.getEventCode(e);
 			switch (code) {
 				case require_aria$1.EVENT_CODE.up:
-				case require_aria$1.EVENT_CODE.down:
+				case require_aria$1.EVENT_CODE.down: {
 					e.preventDefault();
-					require_aria.focusNode(require_aria.getSibling(target, code === require_aria$1.EVENT_CODE.up ? -1 : 1, `.${nsCascader.e("suggestion-item")}[tabindex="-1"]`));
+					const distance = code === require_aria$1.EVENT_CODE.up ? -1 : 1;
+					if (props.virtualScroll && suggestionVirtualListRef.value) {
+						const currentIndex = getSuggestionIndexFromTarget(target);
+						if (currentIndex >= 0) {
+							const length = suggestions.value.length;
+							const targetIndex = (currentIndex + distance + length) % length;
+							suggestionVirtualListRef.value.scrollToItem(targetIndex);
+							(0, vue.nextTick)(() => {
+								const targetItem = getSuggestionPanelEl(`#suggestion-${suggestions.value[targetIndex].uid}`);
+								targetItem && require_aria.focusNode(targetItem);
+							});
+							return;
+						}
+					}
+					require_aria.focusNode(require_aria.getSibling(target, distance, `.${nsCascader.e("suggestion-item")}[tabindex="-1"]`));
 					break;
+				}
 				case require_aria$1.EVENT_CODE.enter:
 				case require_aria$1.EVENT_CODE.numpadEnter:
 					target.click();
@@ -377,9 +456,10 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 		});
 		(0, vue.onMounted)(() => {
 			const inputInner = inputRef.value.input;
+			const inputWrapper = inputRef.value.$el;
 			const inputInnerHeight = getInputInnerHeight(inputInner);
 			inputInitialHeight = inputInner.offsetHeight || inputInnerHeight;
-			(0, _vueuse_core.useResizeObserver)(inputInner, updateStyle);
+			(0, _vueuse_core.useResizeObserver)(inputWrapper, updateStyle);
 		});
 		__expose({
 			getCheckedNodes,
@@ -598,6 +678,9 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 						props: props.props,
 						border: false,
 						"render-label": _ctx.$slots.default,
+						"virtual-scroll": __props.virtualScroll,
+						"item-size": __props.itemSize,
+						height: __props.height,
 						onExpandChange: handleExpandChange,
 						onClose: _cache[13] || (_cache[13] = ($event) => _ctx.$nextTick(() => togglePopperVisible(false)))
 					}, {
@@ -607,14 +690,17 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 						"modelValue",
 						"options",
 						"props",
-						"render-label"
+						"render-label",
+						"virtual-scroll",
+						"item-size",
+						"height"
 					]), [[vue.vShow, !filtering.value]]),
-					__props.filterable ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$8.ElScrollbar), {
-						key: 1,
-						ref_key: "suggestionPanel",
-						ref: suggestionPanel,
+					__props.filterable ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [!__props.virtualScroll ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$8.ElScrollbar), {
+						key: 0,
+						ref: (ref) => suggestionPanel.value = ref?.$el,
 						tag: "ul",
 						class: (0, vue.normalizeClass)((0, vue.unref)(nsCascader).e("suggestion-panel")),
+						"wrap-class": (0, vue.unref)(nsCascader).e("suggestion-wrap"),
 						"view-class": (0, vue.unref)(nsCascader).e("suggestion-list"),
 						onKeydown: handleSuggestionKeyDown
 					}, {
@@ -630,7 +716,48 @@ var cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 							})) : (0, vue.createCommentVNode)("v-if", true)])], 10, _hoisted_2);
 						}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "empty", { key: 1 }, () => [(0, vue.createElementVNode)("li", { class: (0, vue.normalizeClass)((0, vue.unref)(nsCascader).e("empty-text")) }, (0, vue.toDisplayString)((0, vue.unref)(t)("el.cascader.noMatch")), 3)])]),
 						_: 3
-					}, 8, ["class", "view-class"])), [[vue.vShow, filtering.value]]) : (0, vue.createCommentVNode)("v-if", true),
+					}, 8, [
+						"class",
+						"wrap-class",
+						"view-class"
+					])), [[vue.vShow, filtering.value]]) : (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: 1,
+						ref_key: "suggestionPanel",
+						ref: suggestionPanel,
+						class: (0, vue.normalizeClass)((0, vue.unref)(nsCascader).e("suggestion-panel")),
+						onKeydown: handleSuggestionKeyDown
+					}, [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(require_fixed_size_list.default), {
+						ref_key: "suggestionVirtualListRef",
+						ref: suggestionVirtualListRef,
+						height: clampedSuggestionListHeight.value,
+						"item-size": __props.itemSize,
+						data: suggestions.value,
+						total: suggestions.value.length,
+						"class-name": (0, vue.unref)(nsCascader).e("suggestion-list"),
+						"inner-element": "ul",
+						"inner-width": suggestionListWidth.value
+					}, {
+						default: (0, vue.withCtx)(({ data, index, style }) => [((0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
+							id: `suggestion-${data[index].uid}`,
+							key: data[index].uid,
+							"data-suggestion-index": index,
+							class: (0, vue.normalizeClass)([(0, vue.unref)(nsCascader).e("suggestion-item"), (0, vue.unref)(nsCascader).is("checked", data[index].checked)]),
+							tabindex: -1,
+							style: (0, vue.normalizeStyle)(style),
+							onClick: ($event) => handleSuggestionClick(data[index])
+						}, [(0, vue.renderSlot)(_ctx.$slots, "suggestion-item", { item: data[index] }, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(data[index].text), 1), data[index].checked ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$5.ElIcon), { key: 0 }, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.Check))]),
+							_: 1
+						})) : (0, vue.createCommentVNode)("v-if", true)])], 14, _hoisted_3))]),
+						_: 3
+					}, 8, [
+						"height",
+						"item-size",
+						"data",
+						"total",
+						"class-name",
+						"inner-width"
+					]), [[vue.vShow, suggestions.value.length]]), !suggestions.value.length ? (0, vue.renderSlot)(_ctx.$slots, "empty", { key: 0 }, () => [(0, vue.createElementVNode)("ul", { class: (0, vue.normalizeClass)((0, vue.unref)(nsCascader).e("suggestion-list")) }, [(0, vue.createElementVNode)("li", { class: (0, vue.normalizeClass)((0, vue.unref)(nsCascader).e("empty-text")) }, (0, vue.toDisplayString)((0, vue.unref)(t)("el.cascader.noMatch")), 3)], 2)]) : (0, vue.createCommentVNode)("v-if", true)], 34)), [[vue.vShow, filtering.value]])], 64)) : (0, vue.createCommentVNode)("v-if", true),
 					_ctx.$slots.footer ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 						key: 2,
 						class: (0, vue.normalizeClass)((0, vue.unref)(nsCascader).e("footer")),