@element-plus/nightly 0.0.20261109 → 0.0.20261111

package/es/components/table/src/filter-panel.vue.d.ts

@@ -106,17 +106,17 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
 }, {}, {
   ElCheckbox: {
     new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<CheckboxProps> & Readonly<{
-      onChange?: ((val: CheckboxValueType) => any) | undefined;
       "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+      onChange?: ((val: CheckboxValueType) => any) | undefined;
     }>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-      change: (val: CheckboxValueType) => void;
       "update:modelValue": (val: CheckboxValueType) => void;
+      change: (val: CheckboxValueType) => void;
     }, _$vue.PublicProps, {
-      name: string;
       disabled: boolean;
       id: string;
       modelValue: string | number | boolean;
       validateEvent: boolean;
+      name: string;
       value: string | number | boolean | object;
       label: string | number | boolean | object;
       trueValue: string | number;
@@ -131,14 +131,14 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       M: {};
       Defaults: {};
     }, Readonly<CheckboxProps> & Readonly<{
-      onChange?: ((val: CheckboxValueType) => any) | undefined;
       "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+      onChange?: ((val: CheckboxValueType) => any) | undefined;
     }>, {}, {}, {}, {}, {
-      name: string;
       disabled: boolean;
       id: string;
       modelValue: string | number | boolean;
       validateEvent: boolean;
+      name: string;
       value: string | number | boolean | object;
       label: string | number | boolean | object;
       trueValue: string | number;
@@ -150,17 +150,17 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     __isTeleport?: never;
     __isSuspense?: never;
   } & _$vue.ComponentOptionsBase<Readonly<CheckboxProps> & Readonly<{
-    onChange?: ((val: CheckboxValueType) => any) | undefined;
     "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+    onChange?: ((val: CheckboxValueType) => any) | undefined;
   }>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-    change: (val: CheckboxValueType) => void;
     "update:modelValue": (val: CheckboxValueType) => void;
+    change: (val: CheckboxValueType) => void;
   }, string, {
-    name: string;
     disabled: boolean;
     id: string;
     modelValue: string | number | boolean;
     validateEvent: boolean;
+    name: string;
     value: string | number | boolean | object;
     label: string | number | boolean | object;
     trueValue: string | number;
@@ -186,7 +186,7 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       readonly falseLabel?: string | number | (() => string | number) | undefined;
       readonly id?: string | (() => string) | undefined;
       readonly border?: boolean | (() => boolean) | undefined;
-      readonly size?: "" | "default" | "large" | "small" | (() => "" | "default" | "large" | "small") | undefined;
+      readonly size?: "" | "default" | "small" | "large" | (() => "" | "default" | "small" | "large") | undefined;
       readonly tabindex?: string | number | (() => string | number) | undefined;
       readonly validateEvent?: boolean | (() => boolean) | undefined;
       readonly ariaLabel?: string | (() => string) | undefined;
@@ -198,19 +198,19 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   };
   ElCheckboxGroup: SFCWithInstall<{
     new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<CheckboxGroupProps> & Readonly<{
-      onChange?: ((val: CheckboxValueType[]) => any) | undefined;
       "onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
+      onChange?: ((val: CheckboxValueType[]) => any) | undefined;
     }>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-      change: (val: CheckboxValueType[]) => void;
       "update:modelValue": (val: CheckboxGroupValueType) => void;
+      change: (val: CheckboxValueType[]) => void;
     }, _$vue.PublicProps, {
+      type: "button" | "checkbox";
+      disabled: boolean;
       props: {
         value?: string;
         label?: string;
         disabled?: string;
       };
-      type: "button" | "checkbox";
-      disabled: boolean;
       modelValue: CheckboxGroupValueType;
       validateEvent: boolean;
       tag: string;
@@ -222,16 +222,16 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       M: {};
       Defaults: {};
     }, Readonly<CheckboxGroupProps> & Readonly<{
-      onChange?: ((val: CheckboxValueType[]) => any) | undefined;
       "onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
+      onChange?: ((val: CheckboxValueType[]) => any) | undefined;
     }>, {}, {}, {}, {}, {
+      type: "button" | "checkbox";
+      disabled: boolean;
       props: {
         value?: string;
         label?: string;
         disabled?: string;
       };
-      type: "button" | "checkbox";
-      disabled: boolean;
       modelValue: CheckboxGroupValueType;
       validateEvent: boolean;
       tag: string;
@@ -240,19 +240,19 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     __isTeleport?: never;
     __isSuspense?: never;
   } & _$vue.ComponentOptionsBase<Readonly<CheckboxGroupProps> & Readonly<{
-    onChange?: ((val: CheckboxValueType[]) => any) | undefined;
     "onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
+    onChange?: ((val: CheckboxValueType[]) => any) | undefined;
   }>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-    change: (val: CheckboxValueType[]) => void;
     "update:modelValue": (val: CheckboxGroupValueType) => void;
+    change: (val: CheckboxValueType[]) => void;
   }, string, {
+    type: "button" | "checkbox";
+    disabled: boolean;
     props: {
       value?: string;
       label?: string;
       disabled?: string;
     };
-    type: "button" | "checkbox";
-    disabled: boolean;
     modelValue: CheckboxGroupValueType;
     validateEvent: boolean;
     tag: string;
@@ -285,8 +285,8 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       }) => void;
       "end-reached": (direction: ScrollbarDirection) => void;
     }, _$vue.PublicProps, {
-      height: string | number;
       tabindex: string | number;
+      height: string | number;
       mask: boolean | ScrollbarDirection;
       maxHeight: string | number;
       tag: (string & {}) | keyof HTMLElementTagNameMap;
@@ -320,8 +320,8 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       setScrollLeft: (value: number) => void;
       handleScroll: () => void;
     }, {}, {}, {}, {
-      height: string | number;
       tabindex: string | number;
+      height: string | number;
       mask: boolean | ScrollbarDirection;
       maxHeight: string | number;
       tag: (string & {}) | keyof HTMLElementTagNameMap;
@@ -358,8 +358,8 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     }) => void;
     "end-reached": (direction: ScrollbarDirection) => void;
   }, string, {
-    height: string | number;
     tabindex: string | number;
+    height: string | number;
     mask: boolean | ScrollbarDirection;
     maxHeight: string | number;
     tag: (string & {}) | keyof HTMLElementTagNameMap;
@@ -376,10 +376,10 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   })>;
   ElTooltip: SFCWithInstall<{
     new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<UseTooltipProps> & Readonly<{
+      onClose?: ((...args: any[]) => any) | undefined;
       onHide?: ((...args: any[]) => any) | undefined;
       onShow?: ((...args: any[]) => any) | undefined;
       onOpen?: ((...args: any[]) => any) | undefined;
-      onClose?: ((...args: any[]) => any) | undefined;
       "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
       "onBefore-show"?: ((...args: any[]) => any) | undefined;
       "onBefore-hide"?: ((...args: any[]) => any) | undefined;
@@ -392,20 +392,20 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       onClose: (event?: Event, delay?: number) => void;
       hide: (event?: Event) => void;
     }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+      close: (...args: any[]) => void;
       hide: (...args: any[]) => void;
       show: (...args: any[]) => void;
       open: (...args: any[]) => void;
-      close: (...args: any[]) => void;
       "update:visible": (...args: any[]) => void;
       "before-show": (...args: any[]) => void;
       "before-hide": (...args: any[]) => void;
     }, _$vue.PublicProps, {
-      style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
-      visible: boolean | null;
-      content: string;
       offset: number;
       teleported: boolean;
       effect: PopperEffect;
+      visible: boolean | null;
+      content: string;
+      style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
       enterable: boolean;
       pure: boolean;
       focusOnShow: boolean;
@@ -419,10 +419,10 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       gpuAcceleration: boolean;
       placement: Placement;
       popperOptions: Partial<Options>;
-      strategy: "absolute" | "fixed";
+      strategy: "fixed" | "absolute";
       arrowOffset: number;
       showArrow: boolean;
-      role: "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree";
+      role: "dialog" | "listbox" | "grid" | "menu" | "tooltip" | "group" | "navigation" | "tree";
       showAfter: number;
       hideAfter: number;
       autoClose: number;
@@ -436,10 +436,10 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       M: {};
       Defaults: {};
     }, Readonly<UseTooltipProps> & Readonly<{
+      onClose?: ((...args: any[]) => any) | undefined;
       onHide?: ((...args: any[]) => any) | undefined;
       onShow?: ((...args: any[]) => any) | undefined;
       onOpen?: ((...args: any[]) => any) | undefined;
-      onClose?: ((...args: any[]) => any) | undefined;
       "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
       "onBefore-show"?: ((...args: any[]) => any) | undefined;
       "onBefore-hide"?: ((...args: any[]) => any) | undefined;
@@ -452,12 +452,12 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       onClose: (event?: Event, delay?: number) => void;
       hide: (event?: Event) => void;
     }, {}, {}, {}, {
-      style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
-      visible: boolean | null;
-      content: string;
       offset: number;
       teleported: boolean;
       effect: PopperEffect;
+      visible: boolean | null;
+      content: string;
+      style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
       enterable: boolean;
       pure: boolean;
       focusOnShow: boolean;
@@ -471,10 +471,10 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       gpuAcceleration: boolean;
       placement: Placement;
       popperOptions: Partial<Options>;
-      strategy: "absolute" | "fixed";
+      strategy: "fixed" | "absolute";
       arrowOffset: number;
       showArrow: boolean;
-      role: "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree";
+      role: "dialog" | "listbox" | "grid" | "menu" | "tooltip" | "group" | "navigation" | "tree";
       showAfter: number;
       hideAfter: number;
       autoClose: number;
@@ -485,10 +485,10 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     __isTeleport?: never;
     __isSuspense?: never;
   } & _$vue.ComponentOptionsBase<Readonly<UseTooltipProps> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
     onHide?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
     "onBefore-show"?: ((...args: any[]) => any) | undefined;
     "onBefore-hide"?: ((...args: any[]) => any) | undefined;
@@ -501,20 +501,20 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     onClose: (event?: Event, delay?: number) => void;
     hide: (event?: Event) => void;
   }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
     hide: (...args: any[]) => void;
     show: (...args: any[]) => void;
     open: (...args: any[]) => void;
-    close: (...args: any[]) => void;
     "update:visible": (...args: any[]) => void;
     "before-show": (...args: any[]) => void;
     "before-hide": (...args: any[]) => void;
   }, string, {
-    style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
-    visible: boolean | null;
-    content: string;
     offset: number;
     teleported: boolean;
     effect: PopperEffect;
+    visible: boolean | null;
+    content: string;
+    style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
     enterable: boolean;
     pure: boolean;
     focusOnShow: boolean;
@@ -528,10 +528,10 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     gpuAcceleration: boolean;
     placement: Placement;
     popperOptions: Partial<Options>;
-    strategy: "absolute" | "fixed";
+    strategy: "fixed" | "absolute";
     arrowOffset: number;
     showArrow: boolean;
-    role: "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree";
+    role: "dialog" | "listbox" | "grid" | "menu" | "tooltip" | "group" | "navigation" | "tree";
     showAfter: number;
     hideAfter: number;
     autoClose: number;

package/es/components/table/src/table/defaults.d.ts

@@ -350,20 +350,20 @@ declare const tableProps: {
    * @description size of Table
    */
   size: {
-    readonly type: PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  width: (NumberConstructor | StringConstructor)[];
+  width: (StringConstructor | NumberConstructor)[];
   /**
    * @description table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles
    */
-  height: (NumberConstructor | StringConstructor)[];
+  height: (StringConstructor | NumberConstructor)[];
   /**
    * @description table's max-height. The legal value is a number or the height in px
    */
-  maxHeight: (NumberConstructor | StringConstructor)[];
+  maxHeight: (StringConstructor | NumberConstructor)[];
   /**
    * @description whether width of column automatically fits its container
    */
@@ -441,7 +441,7 @@ declare const tableProps: {
   /**
    * @description key of current row, a set only prop
    */
-  currentRowKey: (NumberConstructor | StringConstructor)[];
+  currentRowKey: (StringConstructor | NumberConstructor)[];
   /**
    * @description displayed text when data is empty. You can customize this area with `#empty`
    */
@@ -545,7 +545,7 @@ declare const tableProps: {
   tooltipFormatter: PropType<TableProps<any>["tooltipFormatter"]>;
   appendFilterPanelTo: StringConstructor;
   scrollbarTabindex: {
-    type: (NumberConstructor | StringConstructor)[];
+    type: (StringConstructor | NumberConstructor)[];
     default: undefined;
   };
   /**

package/es/components/table/src/table/style-helper.d.ts

@@ -11,7 +11,7 @@ declare function useStyle<T extends DefaultRow>(props: TableProps<T>, layout: Ta
   isGroup: _$vue.Ref<boolean, boolean>;
   handleMouseLeave: () => void;
   handleHeaderFooterMousewheel: (_event: WheelEvent, data: any) => void;
-  tableSize: _$vue.ComputedRef<"" | "default" | "large" | "small">;
+  tableSize: _$vue.ComputedRef<"" | "default" | "small" | "large">;
   emptyBlockStyle: _$vue.ComputedRef<{
     width: string;
     height: string;
@@ -35,7 +35,7 @@ declare function useStyle<T extends DefaultRow>(props: TableProps<T>, layout: Ta
   tableBodyStyles: _$vue.ComputedRef<{
     width: string;
   }>;
-  tableLayout: _$vue.ComputedRef<"auto" | "fixed">;
+  tableLayout: _$vue.ComputedRef<"fixed" | "auto">;
   scrollbarViewStyle: {
     display: string;
     verticalAlign: string;

package/es/components/table/src/table/style-helper.mjs

@@ -1,6 +1,6 @@
 import { useFormSize } from "../../../form/src/hooks/use-form-common-props.mjs";
 import { useEventListener, useResizeObserver } from "@vueuse/core";
-import { computed, nextTick, onMounted, ref, unref, watch, watchEffect } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, unref, watch, watchEffect } from "vue";
 //#region ../../packages/components/table/src/table/style-helper.ts
 function useStyle(props, layout, store, table) {
 	const isHidden = ref(false);
@@ -25,6 +25,10 @@ function useStyle(props, layout, store, table) {
 	const headerScrollHeight = ref(0);
 	const footerScrollHeight = ref(0);
 	const appendScrollHeight = ref(0);
+	let isUnmounted = false;
+	let layoutFrame = null;
+	let syncFrame = null;
+	const stopFns = [];
 	watch(() => props.height, (value) => {
 		layout.setHeight(value ?? null);
 	}, { immediate: true });
@@ -59,16 +63,24 @@ function useStyle(props, layout, store, table) {
 		return { width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : "" };
 	});
 	const doLayout = () => {
+		if (isUnmounted) return;
 		if (shouldUpdateHeight.value) layout.updateElsHeight();
 		layout.updateColumnsWidth();
 		if (typeof window === "undefined") return;
-		requestAnimationFrame(syncPosition);
+		if (syncFrame === null) syncFrame = requestAnimationFrame(() => {
+			syncFrame = null;
+			if (!isUnmounted) syncPosition();
+		});
 	};
 	onMounted(async () => {
 		await nextTick();
+		if (isUnmounted) return;
 		store.updateColumns();
 		bindEvents();
-		requestAnimationFrame(doLayout);
+		layoutFrame = requestAnimationFrame(() => {
+			layoutFrame = null;
+			doLayout();
+		});
 		const el = table.vnode.el;
 		const tableHeader = table.refs.headerWrapper;
 		if (props.flexible && el && el.parentElement) el.parentElement.style.minWidth = "0";
@@ -118,18 +130,21 @@ function useStyle(props, layout, store, table) {
 		else setScrollClass("is-scrolling-middle");
 	};
 	const bindEvents = () => {
-		if (!table.refs.scrollBarRef) return;
-		if (table.refs.scrollBarRef.wrapRef) useEventListener(table.refs.scrollBarRef.wrapRef, "scroll", syncPosition, { passive: true });
-		if (props.fit) useResizeObserver(table.vnode.el, resizeListener);
-		else useEventListener(window, "resize", resizeListener);
-		useResizeObserver(table.refs.tableInnerWrapper, () => {
+		if (isUnmounted || !table.refs.scrollBarRef) return;
+		if (table.refs.scrollBarRef.wrapRef) stopFns.push(useEventListener(table.refs.scrollBarRef.wrapRef, "scroll", syncPosition, { passive: true }));
+		if (props.fit) {
+			const { stop } = useResizeObserver(table.vnode.el, resizeListener);
+			stopFns.push(stop);
+		} else stopFns.push(useEventListener(window, "resize", resizeListener));
+		const { stop } = useResizeObserver(table.refs.tableInnerWrapper, () => {
 			resizeListener();
 			table.refs?.scrollBarRef?.update();
 		});
+		stopFns.push(stop);
 	};
 	const resizeListener = () => {
 		const el = table.vnode.el;
-		if (!table.$ready || !el) return;
+		if (isUnmounted || !table.$ready || !el) return;
 		let shouldUpdateLayout = false;
 		const { width: oldWidth, height: oldHeight, headerHeight: oldHeaderHeight } = resizeState.value;
 		const width = tableWidth.value = el.offsetWidth;
@@ -161,6 +176,28 @@ function useStyle(props, layout, store, table) {
 		if (props.maxHeight) return "fixed";
 		return props.tableLayout;
 	});
+	const emptyBlockStyle = computed(() => {
+		if (props.data && props.data.length) return;
+		let height = "100%";
+		if (props.height && bodyScrollHeight.value) height = `${bodyScrollHeight.value}px`;
+		const width = tableWidth.value;
+		return {
+			width: width ? `${width}px` : "",
+			height
+		};
+	});
+	onBeforeUnmount(() => {
+		isUnmounted = true;
+		if (layoutFrame !== null) {
+			cancelAnimationFrame(layoutFrame);
+			layoutFrame = null;
+		}
+		if (syncFrame !== null) {
+			cancelAnimationFrame(syncFrame);
+			syncFrame = null;
+		}
+		stopFns.forEach((stop) => stop());
+	});
 	return {
 		isHidden,
 		renderExpanded,
@@ -169,16 +206,7 @@ function useStyle(props, layout, store, table) {
 		handleMouseLeave,
 		handleHeaderFooterMousewheel,
 		tableSize,
-		emptyBlockStyle: computed(() => {
-			if (props.data && props.data.length) return;
-			let height = "100%";
-			if (props.height && bodyScrollHeight.value) height = `${bodyScrollHeight.value}px`;
-			const width = tableWidth.value;
-			return {
-				width: width ? `${width}px` : "",
-				height
-			};
-		}),
+		emptyBlockStyle,
 		resizeProxyVisible,
 		bodyWidth,
 		resizeState,

package/es/components/table/src/table/style-helper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style-helper.mjs","names":[],"sources":["../../../../../../../packages/components/table/src/table/style-helper.ts"],"sourcesContent":["import {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  unref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { useFormSize } from '@element-plus/components/form'\n\nimport type { DefaultRow, RenderExpanded, Table, TableProps } from './defaults'\nimport type { Store } from '../store'\nimport type TableLayout from '../table-layout'\nimport type { TableColumnCtx } from '../table-column/defaults'\n\nfunction useStyle<T extends DefaultRow>(\n  props: TableProps<T>,\n  layout: TableLayout<T>,\n  store: Store<T>,\n  table: Table<T>\n) {\n  const isHidden = ref(false)\n  const renderExpanded = ref<RenderExpanded<T> | null>(null)\n  const resizeProxyVisible = ref(false)\n  const setDragVisible = (visible: boolean) => {\n    resizeProxyVisible.value = visible\n  }\n  const resizeState = ref<{\n    width: null | number\n    height: null | number\n    headerHeight: null | number\n  }>({\n    width: null,\n    height: null,\n    headerHeight: null,\n  })\n  const isGroup = ref(false)\n  const scrollbarViewStyle = {\n    display: 'inline-block',\n    verticalAlign: 'middle',\n  }\n  const tableWidth = ref()\n  const tableScrollHeight = ref(0)\n  const bodyScrollHeight = ref(0)\n  const headerScrollHeight = ref(0)\n  const footerScrollHeight = ref(0)\n  const appendScrollHeight = ref(0)\n\n  watch(\n    () => props.height,\n    (value) => {\n      layout.setHeight(value ?? null)\n    },\n    { immediate: true }\n  )\n  watch(\n    () => props.maxHeight,\n    (value) => {\n      layout.setMaxHeight(value ?? null)\n    },\n    { immediate: true }\n  )\n  watch(\n    () => [props.currentRowKey, store.states.rowKey],\n    ([currentRowKey, rowKey]) => {\n      if (!unref(rowKey) || !unref(currentRowKey)) return\n      store.setCurrentRowKey(`${currentRowKey}`)\n    },\n    {\n      immediate: true,\n    }\n  )\n  watch(\n    () => props.data,\n    (data) => {\n      table.store.commit('setData', data)\n    },\n    {\n      immediate: true,\n      deep: true,\n    }\n  )\n  watchEffect(() => {\n    if (props.expandRowKeys) {\n      store.setExpandRowKeysAdapter(props.expandRowKeys)\n    }\n  })\n\n  const handleMouseLeave = () => {\n    table.store.commit('setHoverRow', null)\n    if (table.hoverState) table.hoverState = null\n  }\n\n  const handleHeaderFooterMousewheel = (_event: WheelEvent, data: any) => {\n    const { pixelX, pixelY } = data\n    if (Math.abs(pixelX) >= Math.abs(pixelY)) {\n      table.refs.bodyWrapper.scrollLeft += data.pixelX / 5\n    }\n  }\n\n  const shouldUpdateHeight = computed(() => {\n    return (\n      props.height ||\n      props.maxHeight ||\n      store.states.fixedColumns.value.length > 0 ||\n      store.states.rightFixedColumns.value.length > 0\n    )\n  })\n\n  const tableBodyStyles = computed(() => {\n    return {\n      width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : '',\n    }\n  })\n\n  const doLayout = () => {\n    if (shouldUpdateHeight.value) {\n      layout.updateElsHeight()\n    }\n    layout.updateColumnsWidth()\n\n    // When the test case is running, the context environment simulated by jsdom may have been destroyed,\n    // and window.requestAnimationFrame does not exist at this time.\n    if (typeof window === 'undefined') return\n    requestAnimationFrame(syncPosition)\n  }\n  onMounted(async () => {\n    await nextTick()\n    store.updateColumns()\n    bindEvents()\n    requestAnimationFrame(doLayout)\n\n    const el: HTMLElement = table.vnode.el as HTMLElement\n    const tableHeader: HTMLElement = table.refs.headerWrapper\n    if (props.flexible && el && el.parentElement) {\n      // Automatic minimum size of flex-items\n      // Ensure that the main axis does not follow the width of the items\n      el.parentElement.style.minWidth = '0'\n    }\n\n    resizeState.value = {\n      width: (tableWidth.value = el.offsetWidth),\n      height: el.offsetHeight,\n      headerHeight:\n        props.showHeader && tableHeader ? tableHeader.offsetHeight : null,\n    }\n\n    // init filters\n    store.states.columns.value.forEach((column: TableColumnCtx<T>) => {\n      if (column.filteredValue && column.filteredValue.length) {\n        table.store.commit('filterChange', {\n          column,\n          values: column.filteredValue,\n          silent: true,\n        })\n      }\n    })\n    table.$ready = true\n  })\n  const setScrollClassByEl = (el: HTMLElement, className: string) => {\n    if (!el) return\n    const classList = Array.from(el.classList).filter(\n      (item) => !item.startsWith('is-scrolling-')\n    )\n    classList.push(layout.scrollX.value ? className : 'is-scrolling-none')\n    el.className = classList.join(' ')\n  }\n  const setScrollClass = (className: string) => {\n    const { tableWrapper } = table.refs\n    setScrollClassByEl(tableWrapper, className)\n  }\n  const hasScrollClass = (className: string) => {\n    const { tableWrapper } = table.refs\n    return !!(tableWrapper && tableWrapper.classList.contains(className))\n  }\n  const syncPosition = function () {\n    if (!table.refs.scrollBarRef) return\n    if (!layout.scrollX.value) {\n      const scrollingNoneClass = 'is-scrolling-none'\n      if (!hasScrollClass(scrollingNoneClass)) {\n        setScrollClass(scrollingNoneClass)\n      }\n      return\n    }\n    const scrollContainer = table.refs.scrollBarRef.wrapRef\n    if (!scrollContainer) return\n    const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer\n    const { headerWrapper, footerWrapper } = table.refs\n    if (headerWrapper) headerWrapper.scrollLeft = scrollLeft\n    if (footerWrapper) footerWrapper.scrollLeft = scrollLeft\n    const maxScrollLeftPosition = scrollWidth - offsetWidth - 1\n    if (scrollLeft >= maxScrollLeftPosition) {\n      setScrollClass('is-scrolling-right')\n    } else if (scrollLeft === 0) {\n      setScrollClass('is-scrolling-left')\n    } else {\n      setScrollClass('is-scrolling-middle')\n    }\n  }\n\n  const bindEvents = () => {\n    if (!table.refs.scrollBarRef) return\n    if (table.refs.scrollBarRef.wrapRef) {\n      useEventListener(\n        table.refs.scrollBarRef.wrapRef,\n        'scroll',\n        syncPosition,\n        {\n          passive: true,\n        }\n      )\n    }\n    if (props.fit) {\n      useResizeObserver(table.vnode.el as HTMLElement, resizeListener)\n    } else {\n      useEventListener(window, 'resize', resizeListener)\n    }\n\n    useResizeObserver(table.refs.tableInnerWrapper, () => {\n      resizeListener()\n      table.refs?.scrollBarRef?.update()\n    })\n  }\n  const resizeListener = () => {\n    const el = table.vnode.el\n    if (!table.$ready || !el) return\n\n    let shouldUpdateLayout = false\n    const {\n      width: oldWidth,\n      height: oldHeight,\n      headerHeight: oldHeaderHeight,\n    } = resizeState.value\n\n    const width = (tableWidth.value = el.offsetWidth)\n    if (oldWidth !== width) {\n      shouldUpdateLayout = true\n    }\n\n    const height = el.offsetHeight\n    if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {\n      shouldUpdateLayout = true\n    }\n\n    const tableHeader: HTMLElement =\n      props.tableLayout === 'fixed'\n        ? table.refs.headerWrapper\n        : table.refs.tableHeaderRef?.$el\n    if (props.showHeader && tableHeader?.offsetHeight !== oldHeaderHeight) {\n      shouldUpdateLayout = true\n    }\n\n    tableScrollHeight.value = table.refs.tableWrapper?.scrollHeight || 0\n    headerScrollHeight.value = tableHeader?.scrollHeight || 0\n    footerScrollHeight.value = table.refs.footerWrapper?.offsetHeight || 0\n    appendScrollHeight.value = table.refs.appendWrapper?.offsetHeight || 0\n    bodyScrollHeight.value =\n      tableScrollHeight.value -\n      headerScrollHeight.value -\n      footerScrollHeight.value -\n      appendScrollHeight.value\n\n    if (shouldUpdateLayout) {\n      resizeState.value = {\n        width,\n        height,\n        headerHeight: (props.showHeader && tableHeader?.offsetHeight) || 0,\n      }\n      doLayout()\n    }\n  }\n  const tableSize = useFormSize()\n  const bodyWidth = computed(() => {\n    const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout\n    return bodyWidth_.value\n      ? `${(bodyWidth_.value as number) - (scrollY.value ? gutterWidth : 0)}px`\n      : ''\n  })\n\n  const tableLayout = computed(() => {\n    if (props.maxHeight) return 'fixed'\n    return props.tableLayout!\n  })\n\n  const emptyBlockStyle = computed(() => {\n    if (props.data && props.data.length) return\n    let height = '100%'\n    if (props.height && bodyScrollHeight.value) {\n      height = `${bodyScrollHeight.value}px`\n    }\n    const width = tableWidth.value\n    return {\n      width: width ? `${width}px` : '',\n      height,\n    }\n  })\n\n  const scrollbarStyle = computed(() => {\n    if (props.height) {\n      return {\n        height: '100%',\n      }\n    }\n    if (props.maxHeight) {\n      if (!Number.isNaN(Number(props.maxHeight))) {\n        return {\n          maxHeight: `${\n            +props.maxHeight -\n            headerScrollHeight.value -\n            footerScrollHeight.value\n          }px`,\n        }\n      } else {\n        return {\n          maxHeight: `calc(${props.maxHeight} - ${\n            headerScrollHeight.value + footerScrollHeight.value\n          }px)`,\n        }\n      }\n    }\n\n    return {}\n  })\n\n  return {\n    isHidden,\n    renderExpanded,\n    setDragVisible,\n    isGroup,\n    handleMouseLeave,\n    handleHeaderFooterMousewheel,\n    tableSize,\n    emptyBlockStyle,\n    resizeProxyVisible,\n    bodyWidth,\n    resizeState,\n    doLayout,\n    tableBodyStyles,\n    tableLayout,\n    scrollbarViewStyle,\n    scrollbarStyle,\n  }\n}\n\nexport default useStyle\n"],"mappings":"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"}
+{"version":3,"file":"style-helper.mjs","names":[],"sources":["../../../../../../../packages/components/table/src/table/style-helper.ts"],"sourcesContent":["import {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  unref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { useFormSize } from '@element-plus/components/form'\n\nimport type { DefaultRow, RenderExpanded, Table, TableProps } from './defaults'\nimport type { Store } from '../store'\nimport type TableLayout from '../table-layout'\nimport type { TableColumnCtx } from '../table-column/defaults'\n\nfunction useStyle<T extends DefaultRow>(\n  props: TableProps<T>,\n  layout: TableLayout<T>,\n  store: Store<T>,\n  table: Table<T>\n) {\n  const isHidden = ref(false)\n  const renderExpanded = ref<RenderExpanded<T> | null>(null)\n  const resizeProxyVisible = ref(false)\n  const setDragVisible = (visible: boolean) => {\n    resizeProxyVisible.value = visible\n  }\n  const resizeState = ref<{\n    width: null | number\n    height: null | number\n    headerHeight: null | number\n  }>({\n    width: null,\n    height: null,\n    headerHeight: null,\n  })\n  const isGroup = ref(false)\n  const scrollbarViewStyle = {\n    display: 'inline-block',\n    verticalAlign: 'middle',\n  }\n  const tableWidth = ref()\n  const tableScrollHeight = ref(0)\n  const bodyScrollHeight = ref(0)\n  const headerScrollHeight = ref(0)\n  const footerScrollHeight = ref(0)\n  const appendScrollHeight = ref(0)\n  let isUnmounted = false\n  let layoutFrame: number | null = null\n  let syncFrame: number | null = null\n  const stopFns: Array<() => void> = []\n\n  watch(\n    () => props.height,\n    (value) => {\n      layout.setHeight(value ?? null)\n    },\n    { immediate: true }\n  )\n  watch(\n    () => props.maxHeight,\n    (value) => {\n      layout.setMaxHeight(value ?? null)\n    },\n    { immediate: true }\n  )\n  watch(\n    () => [props.currentRowKey, store.states.rowKey],\n    ([currentRowKey, rowKey]) => {\n      if (!unref(rowKey) || !unref(currentRowKey)) return\n      store.setCurrentRowKey(`${currentRowKey}`)\n    },\n    {\n      immediate: true,\n    }\n  )\n  watch(\n    () => props.data,\n    (data) => {\n      table.store.commit('setData', data)\n    },\n    {\n      immediate: true,\n      deep: true,\n    }\n  )\n  watchEffect(() => {\n    if (props.expandRowKeys) {\n      store.setExpandRowKeysAdapter(props.expandRowKeys)\n    }\n  })\n\n  const handleMouseLeave = () => {\n    table.store.commit('setHoverRow', null)\n    if (table.hoverState) table.hoverState = null\n  }\n\n  const handleHeaderFooterMousewheel = (_event: WheelEvent, data: any) => {\n    const { pixelX, pixelY } = data\n    if (Math.abs(pixelX) >= Math.abs(pixelY)) {\n      table.refs.bodyWrapper.scrollLeft += data.pixelX / 5\n    }\n  }\n\n  const shouldUpdateHeight = computed(() => {\n    return (\n      props.height ||\n      props.maxHeight ||\n      store.states.fixedColumns.value.length > 0 ||\n      store.states.rightFixedColumns.value.length > 0\n    )\n  })\n\n  const tableBodyStyles = computed(() => {\n    return {\n      width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : '',\n    }\n  })\n\n  const doLayout = () => {\n    if (isUnmounted) return\n    if (shouldUpdateHeight.value) {\n      layout.updateElsHeight()\n    }\n    layout.updateColumnsWidth()\n\n    // When the test case is running, the context environment simulated by jsdom may have been destroyed,\n    // and window.requestAnimationFrame does not exist at this time.\n    if (typeof window === 'undefined') return\n    if (syncFrame === null) {\n      syncFrame = requestAnimationFrame(() => {\n        syncFrame = null\n        if (!isUnmounted) syncPosition()\n      })\n    }\n  }\n  onMounted(async () => {\n    await nextTick()\n    if (isUnmounted) return\n    store.updateColumns()\n    bindEvents()\n    layoutFrame = requestAnimationFrame(() => {\n      layoutFrame = null\n      doLayout()\n    })\n\n    const el: HTMLElement = table.vnode.el as HTMLElement\n    const tableHeader: HTMLElement = table.refs.headerWrapper\n    if (props.flexible && el && el.parentElement) {\n      // Automatic minimum size of flex-items\n      // Ensure that the main axis does not follow the width of the items\n      el.parentElement.style.minWidth = '0'\n    }\n\n    resizeState.value = {\n      width: (tableWidth.value = el.offsetWidth),\n      height: el.offsetHeight,\n      headerHeight:\n        props.showHeader && tableHeader ? tableHeader.offsetHeight : null,\n    }\n\n    // init filters\n    store.states.columns.value.forEach((column: TableColumnCtx<T>) => {\n      if (column.filteredValue && column.filteredValue.length) {\n        table.store.commit('filterChange', {\n          column,\n          values: column.filteredValue,\n          silent: true,\n        })\n      }\n    })\n    table.$ready = true\n  })\n  const setScrollClassByEl = (el: HTMLElement, className: string) => {\n    if (!el) return\n    const classList = Array.from(el.classList).filter(\n      (item) => !item.startsWith('is-scrolling-')\n    )\n    classList.push(layout.scrollX.value ? className : 'is-scrolling-none')\n    el.className = classList.join(' ')\n  }\n  const setScrollClass = (className: string) => {\n    const { tableWrapper } = table.refs\n    setScrollClassByEl(tableWrapper, className)\n  }\n  const hasScrollClass = (className: string) => {\n    const { tableWrapper } = table.refs\n    return !!(tableWrapper && tableWrapper.classList.contains(className))\n  }\n  const syncPosition = function () {\n    if (!table.refs.scrollBarRef) return\n    if (!layout.scrollX.value) {\n      const scrollingNoneClass = 'is-scrolling-none'\n      if (!hasScrollClass(scrollingNoneClass)) {\n        setScrollClass(scrollingNoneClass)\n      }\n      return\n    }\n    const scrollContainer = table.refs.scrollBarRef.wrapRef\n    if (!scrollContainer) return\n    const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer\n    const { headerWrapper, footerWrapper } = table.refs\n    if (headerWrapper) headerWrapper.scrollLeft = scrollLeft\n    if (footerWrapper) footerWrapper.scrollLeft = scrollLeft\n    const maxScrollLeftPosition = scrollWidth - offsetWidth - 1\n    if (scrollLeft >= maxScrollLeftPosition) {\n      setScrollClass('is-scrolling-right')\n    } else if (scrollLeft === 0) {\n      setScrollClass('is-scrolling-left')\n    } else {\n      setScrollClass('is-scrolling-middle')\n    }\n  }\n\n  const bindEvents = () => {\n    if (isUnmounted || !table.refs.scrollBarRef) return\n    if (table.refs.scrollBarRef.wrapRef) {\n      stopFns.push(\n        useEventListener(\n          table.refs.scrollBarRef.wrapRef,\n          'scroll',\n          syncPosition,\n          {\n            passive: true,\n          }\n        )\n      )\n    }\n    if (props.fit) {\n      const { stop } = useResizeObserver(\n        table.vnode.el as HTMLElement,\n        resizeListener\n      )\n      stopFns.push(stop)\n    } else {\n      stopFns.push(useEventListener(window, 'resize', resizeListener))\n    }\n\n    const { stop } = useResizeObserver(table.refs.tableInnerWrapper, () => {\n      resizeListener()\n      table.refs?.scrollBarRef?.update()\n    })\n    stopFns.push(stop)\n  }\n  const resizeListener = () => {\n    const el = table.vnode.el\n    if (isUnmounted || !table.$ready || !el) return\n\n    let shouldUpdateLayout = false\n    const {\n      width: oldWidth,\n      height: oldHeight,\n      headerHeight: oldHeaderHeight,\n    } = resizeState.value\n\n    const width = (tableWidth.value = el.offsetWidth)\n    if (oldWidth !== width) {\n      shouldUpdateLayout = true\n    }\n\n    const height = el.offsetHeight\n    if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {\n      shouldUpdateLayout = true\n    }\n\n    const tableHeader: HTMLElement =\n      props.tableLayout === 'fixed'\n        ? table.refs.headerWrapper\n        : table.refs.tableHeaderRef?.$el\n    if (props.showHeader && tableHeader?.offsetHeight !== oldHeaderHeight) {\n      shouldUpdateLayout = true\n    }\n\n    tableScrollHeight.value = table.refs.tableWrapper?.scrollHeight || 0\n    headerScrollHeight.value = tableHeader?.scrollHeight || 0\n    footerScrollHeight.value = table.refs.footerWrapper?.offsetHeight || 0\n    appendScrollHeight.value = table.refs.appendWrapper?.offsetHeight || 0\n    bodyScrollHeight.value =\n      tableScrollHeight.value -\n      headerScrollHeight.value -\n      footerScrollHeight.value -\n      appendScrollHeight.value\n\n    if (shouldUpdateLayout) {\n      resizeState.value = {\n        width,\n        height,\n        headerHeight: (props.showHeader && tableHeader?.offsetHeight) || 0,\n      }\n      doLayout()\n    }\n  }\n  const tableSize = useFormSize()\n  const bodyWidth = computed(() => {\n    const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout\n    return bodyWidth_.value\n      ? `${(bodyWidth_.value as number) - (scrollY.value ? gutterWidth : 0)}px`\n      : ''\n  })\n\n  const tableLayout = computed(() => {\n    if (props.maxHeight) return 'fixed'\n    return props.tableLayout!\n  })\n\n  const emptyBlockStyle = computed(() => {\n    if (props.data && props.data.length) return\n    let height = '100%'\n    if (props.height && bodyScrollHeight.value) {\n      height = `${bodyScrollHeight.value}px`\n    }\n    const width = tableWidth.value\n    return {\n      width: width ? `${width}px` : '',\n      height,\n    }\n  })\n\n  onBeforeUnmount(() => {\n    isUnmounted = true\n    if (layoutFrame !== null) {\n      cancelAnimationFrame(layoutFrame)\n      layoutFrame = null\n    }\n    if (syncFrame !== null) {\n      cancelAnimationFrame(syncFrame)\n      syncFrame = null\n    }\n    stopFns.forEach((stop) => stop())\n  })\n\n  const scrollbarStyle = computed(() => {\n    if (props.height) {\n      return {\n        height: '100%',\n      }\n    }\n    if (props.maxHeight) {\n      if (!Number.isNaN(Number(props.maxHeight))) {\n        return {\n          maxHeight: `${\n            +props.maxHeight -\n            headerScrollHeight.value -\n            footerScrollHeight.value\n          }px`,\n        }\n      } else {\n        return {\n          maxHeight: `calc(${props.maxHeight} - ${\n            headerScrollHeight.value + footerScrollHeight.value\n          }px)`,\n        }\n      }\n    }\n\n    return {}\n  })\n\n  return {\n    isHidden,\n    renderExpanded,\n    setDragVisible,\n    isGroup,\n    handleMouseLeave,\n    handleHeaderFooterMousewheel,\n    tableSize,\n    emptyBlockStyle,\n    resizeProxyVisible,\n    bodyWidth,\n    resizeState,\n    doLayout,\n    tableBodyStyles,\n    tableLayout,\n    scrollbarViewStyle,\n    scrollbarStyle,\n  }\n}\n\nexport default useStyle\n"],"mappings":"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"}

package/es/components/table/src/table-column/defaults.d.ts

@@ -231,14 +231,14 @@ declare const tableColumnProps: {
    * @description column width
    */
   width: {
-    type: (NumberConstructor | StringConstructor)[];
+    type: (StringConstructor | NumberConstructor)[];
     default: string;
   };
   /**
    * @description column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion
    */
   minWidth: {
-    type: (NumberConstructor | StringConstructor)[];
+    type: (StringConstructor | NumberConstructor)[];
     default: string;
   };
   /**

package/es/components/table/src/table-header/index.d.ts

@@ -119,17 +119,17 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
 }, {}, {
   ElCheckbox: {
     new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<CheckboxProps> & Readonly<{
-      onChange?: ((val: CheckboxValueType) => any) | undefined;
       "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+      onChange?: ((val: CheckboxValueType) => any) | undefined;
     }>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-      change: (val: CheckboxValueType) => void;
       "update:modelValue": (val: CheckboxValueType) => void;
+      change: (val: CheckboxValueType) => void;
     }, _$vue.PublicProps, {
-      name: string;
       disabled: boolean;
       id: string;
       modelValue: string | number | boolean;
       validateEvent: boolean;
+      name: string;
       value: string | number | boolean | object;
       label: string | number | boolean | object;
       trueValue: string | number;
@@ -144,14 +144,14 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       M: {};
       Defaults: {};
     }, Readonly<CheckboxProps> & Readonly<{
-      onChange?: ((val: CheckboxValueType) => any) | undefined;
       "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+      onChange?: ((val: CheckboxValueType) => any) | undefined;
     }>, {}, {}, {}, {}, {
-      name: string;
       disabled: boolean;
       id: string;
       modelValue: string | number | boolean;
       validateEvent: boolean;
+      name: string;
       value: string | number | boolean | object;
       label: string | number | boolean | object;
       trueValue: string | number;
@@ -163,17 +163,17 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     __isTeleport?: never;
     __isSuspense?: never;
   } & _$vue.ComponentOptionsBase<Readonly<CheckboxProps> & Readonly<{
-    onChange?: ((val: CheckboxValueType) => any) | undefined;
     "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+    onChange?: ((val: CheckboxValueType) => any) | undefined;
   }>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-    change: (val: CheckboxValueType) => void;
     "update:modelValue": (val: CheckboxValueType) => void;
+    change: (val: CheckboxValueType) => void;
   }, string, {
-    name: string;
     disabled: boolean;
     id: string;
     modelValue: string | number | boolean;
     validateEvent: boolean;
+    name: string;
     value: string | number | boolean | object;
     label: string | number | boolean | object;
     trueValue: string | number;
@@ -199,7 +199,7 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       readonly falseLabel?: string | number | (() => string | number) | undefined;
       readonly id?: string | (() => string) | undefined;
       readonly border?: boolean | (() => boolean) | undefined;
-      readonly size?: "" | "default" | "large" | "small" | (() => "" | "default" | "large" | "small") | undefined;
+      readonly size?: "" | "default" | "small" | "large" | (() => "" | "default" | "small" | "large") | undefined;
       readonly tabindex?: string | number | (() => string | number) | undefined;
       readonly validateEvent?: boolean | (() => boolean) | undefined;
       readonly ariaLabel?: string | (() => string) | undefined;