@uzum-tech/ui 1.4.2 → 1.5.0

package/es/avatar/src/Avatar.d.ts

@@ -12,7 +12,7 @@ export declare const avatarProps: {
     readonly objectFit: PropType<ObjectFit>;
     readonly round: {
         readonly type: BooleanConstructor;
-        readonly default: true;
+        readonly default: false;
     };
     readonly bordered: {
         readonly type: BooleanConstructor;
@@ -40,6 +40,7 @@ export declare const avatarProps: {
         textColor: string;
         iconColor: string;
         color: string;
+        iconSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -53,6 +54,7 @@ export declare const avatarProps: {
         textColor: string;
         iconColor: string;
         color: string;
+        iconSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -66,6 +68,7 @@ export declare const avatarProps: {
         textColor: string;
         iconColor: string;
         color: string;
+        iconSize: string;
     }, any>>>;
 };
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>;
@@ -79,7 +82,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly objectFit: PropType<ObjectFit>;
     readonly round: {
         readonly type: BooleanConstructor;
-        readonly default: true;
+        readonly default: false;
     };
     readonly bordered: {
         readonly type: BooleanConstructor;
@@ -107,6 +110,7 @@ declare const _default: import("vue").DefineComponent<{
         textColor: string;
         iconColor: string;
         color: string;
+        iconSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -120,6 +124,7 @@ declare const _default: import("vue").DefineComponent<{
         textColor: string;
         iconColor: string;
         color: string;
+        iconSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -133,6 +138,7 @@ declare const _default: import("vue").DefineComponent<{
         textColor: string;
         iconColor: string;
         color: string;
+        iconSize: string;
     }, any>>>;
 }, {
     textRef: import("vue").Ref<HTMLElement | null>;
@@ -150,6 +156,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-icon-color': string;
         '--u-bezier': string;
         '--u-merged-size': string;
+        '--u-icon-size': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -168,7 +175,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly objectFit: PropType<ObjectFit>;
     readonly round: {
         readonly type: BooleanConstructor;
-        readonly default: true;
+        readonly default: false;
     };
     readonly bordered: {
         readonly type: BooleanConstructor;
@@ -196,6 +203,7 @@ declare const _default: import("vue").DefineComponent<{
         textColor: string;
         iconColor: string;
         color: string;
+        iconSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -209,6 +217,7 @@ declare const _default: import("vue").DefineComponent<{
         textColor: string;
         iconColor: string;
         color: string;
+        iconSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -222,6 +231,7 @@ declare const _default: import("vue").DefineComponent<{
         textColor: string;
         iconColor: string;
         color: string;
+        iconSize: string;
     }, any>>>;
 }>>, {
     readonly disabled: boolean;

package/es/avatar/src/Avatar.js

@@ -14,7 +14,7 @@ export const avatarProps = Object.assign(Object.assign({}, useTheme.props), { si
         default: undefined
     }, objectFit: String, round: {
         type: Boolean,
-        default: true
+        default: false
     }, bordered: {
         type: Boolean,
         default: undefined
@@ -92,7 +92,7 @@ export default defineComponent({
             const size = mergedSizeRef.value;
             const round = mergedRoundRef.value;
             const bordered = mergedBorderedRef.value;
-            const { self: { borderRadius, fontSize, fontWeight, color, border, textColor, iconColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { self: { borderRadius, fontSize, fontWeight, color, border, textColor, iconColor, iconSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             let height;
             if (typeof size === 'number') {
                 height = `${size}px`;
@@ -112,7 +112,8 @@ export default defineComponent({
                 '--u-text-color': textColor,
                 '--u-icon-color': iconColor,
                 '--u-bezier': cubicBezierEaseInOut,
-                '--u-merged-size': `var(--u-avatar-size-override, ${height})`
+                '--u-merged-size': `var(--u-avatar-size-override, ${height})`,
+                '--u-icon-size': iconSize
             };
         });
         const themeClassHandle = inlineThemeDisabled

package/es/avatar/src/styles/index.cssr.js

@@ -5,6 +5,7 @@ import { c, cE, cB } from '../../../_utils/cssr';
 // --u-color
 // --u-bezier
 // --u-merged-size
+// --u-icon-size
 export default cB('avatar', `
  width: var(--u-merged-size);
  height: var(--u-merged-size);
@@ -35,7 +36,7 @@ export default cB('avatar', `
  `), cB('icon', `
  color: var(--u-icon-color);
  vertical-align: bottom;
- width: 24px;
- height: 24px;
+ width: var(--u-icon-size);
+ height: var(--u-icon-size);
  display: block;
  `), cE('text', 'line-height: 1.25')]);

package/es/avatar/styles/light.d.ts

@@ -12,6 +12,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     textColor: string;
     iconColor: string;
     color: string;
+    iconSize: string;
 };
 export type AvatarThemeVars = ReturnType<typeof self>;
 declare const avatarLight: Theme<'Avatar', AvatarThemeVars>;

package/es/avatar/styles/light.js

@@ -1,18 +1,19 @@
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { borderRadius, heightTiny, heightSmall, heightMedium, heightLarge, fontBodyLarge, fontWeight, elementsSecondary, textSecondary, elementsPrimary, elementsTertiary } = vars;
+    const { borderRadius, heightSmall, heightMedium, heightLarge, fontBodyLarge, fontWeight, elementsSecondary, textSecondary, elementsPrimary, elementsTertiary, fontTitleMedium } = vars;
     return {
         borderRadius,
         fontSize: fontBodyLarge,
         fontWeight,
         border: `2px solid ${elementsSecondary}`,
-        heightTiny,
+        heightTiny: '36px',
         heightSmall,
         heightMedium,
         heightLarge,
         textColor: textSecondary,
         iconColor: elementsPrimary,
-        color: elementsTertiary
+        color: elementsTertiary,
+        iconSize: fontTitleMedium
     };
 };
 const avatarLight = {

package/es/avatar-group/src/AvatarGroup.d.ts

@@ -32,6 +32,7 @@ export declare const avatarGroupProps: {
             textColor: string;
             iconColor: string;
             color: string;
+            iconSize: string;
         }, any>;
     }>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -49,6 +50,7 @@ export declare const avatarGroupProps: {
             textColor: string;
             iconColor: string;
             color: string;
+            iconSize: string;
         }, any>;
     }>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -66,6 +68,7 @@ export declare const avatarGroupProps: {
             textColor: string;
             iconColor: string;
             color: string;
+            iconSize: string;
         }, any>;
     }>>>;
 };
@@ -95,6 +98,7 @@ declare const _default: import("vue").DefineComponent<{
             textColor: string;
             iconColor: string;
             color: string;
+            iconSize: string;
         }, any>;
     }>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -112,6 +116,7 @@ declare const _default: import("vue").DefineComponent<{
             textColor: string;
             iconColor: string;
             color: string;
+            iconSize: string;
         }, any>;
     }>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -129,6 +134,7 @@ declare const _default: import("vue").DefineComponent<{
             textColor: string;
             iconColor: string;
             color: string;
+            iconSize: string;
         }, any>;
     }>>>;
 }, {
@@ -150,6 +156,7 @@ declare const _default: import("vue").DefineComponent<{
                 textColor: string;
                 iconColor: string;
                 color: string;
+                iconSize: string;
             }, any>;
         };
         peerOverrides: {
@@ -192,6 +199,7 @@ declare const _default: import("vue").DefineComponent<{
             textColor: string;
             iconColor: string;
             color: string;
+            iconSize: string;
         }, any>;
     }>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -209,6 +217,7 @@ declare const _default: import("vue").DefineComponent<{
             textColor: string;
             iconColor: string;
             color: string;
+            iconSize: string;
         }, any>;
     }>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -226,6 +235,7 @@ declare const _default: import("vue").DefineComponent<{
             textColor: string;
             iconColor: string;
             color: string;
+            iconSize: string;
         }, any>;
     }>>>;
 }>>, {

package/es/avatar-group/styles/light.d.ts

@@ -17,6 +17,7 @@ declare const avatarGroupLight: import("../../_mixins").Theme<"AvatarGroup", {
         textColor: string;
         iconColor: string;
         color: string;
+        iconSize: string;
     }, any>;
 }>;
 export default avatarGroupLight;

package/es/badge/src/Badge.d.ts

@@ -31,6 +31,7 @@ export declare const badgeProps: {
         textColorSuccess: string;
         textColorError: string;
         textColorWarning: string;
+        borderColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -46,6 +47,7 @@ export declare const badgeProps: {
         textColorSuccess: string;
         textColorError: string;
         textColorWarning: string;
+        borderColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -61,6 +63,7 @@ export declare const badgeProps: {
         textColorSuccess: string;
         textColorError: string;
         textColorWarning: string;
+        borderColor: string;
     }, any>>>;
 };
 export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>;
@@ -95,6 +98,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorSuccess: string;
         textColorError: string;
         textColorWarning: string;
+        borderColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -110,6 +114,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorSuccess: string;
         textColorError: string;
         textColorWarning: string;
+        borderColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -125,6 +130,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorSuccess: string;
         textColorError: string;
         textColorWarning: string;
+        borderColor: string;
     }, any>>>;
 }, {
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
@@ -140,6 +146,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-bezier': string;
         '--u-ripple-bezier': string;
         '--u-text-color': string;
+        '--u-border-color': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -177,6 +184,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorSuccess: string;
         textColorError: string;
         textColorWarning: string;
+        borderColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -192,6 +200,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorSuccess: string;
         textColorError: string;
         textColorWarning: string;
+        borderColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -207,6 +216,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorSuccess: string;
         textColorError: string;
         textColorWarning: string;
+        borderColor: string;
     }, any>>>;
 }>>, {
     readonly type: "default" | "info" | "success" | "warning" | "error" | "prime";

package/es/badge/src/Badge.js

@@ -39,14 +39,15 @@ export default defineComponent({
         const rtlEnabledRef = useRtl('Badge', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { type, color: propColor, textColor: propTextColor } = props;
-            const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [createKey('color', type)]: color, [createKey('textColor', type)]: textColor, fontSize } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [createKey('color', type)]: color, [createKey('textColor', type)]: textColor, fontSize, borderColor } } = themeRef.value;
             return {
                 '--u-font-size': fontSize,
                 '--u-color': propColor || color,
                 '--u-ripple-color': propColor || color,
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-ripple-bezier': cubicBezierEaseOut,
-                '--u-text-color': propTextColor || textColor
+                '--u-text-color': propTextColor || textColor,
+                '--u-border-color': borderColor
             };
         });
         const themeClassHandle = inlineThemeDisabled

package/es/badge/src/styles/index.cssr.js

@@ -6,6 +6,7 @@ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-sc
 // --u-bezier
 // --u-ripple-bezier
 // --u-font-size
+// --u-border-color
 export default c([c('@keyframes badge-wave-spread', {
   from: {
     boxShadow: '0 0 0.5px 0px var(--u-ripple-color)',
@@ -74,4 +75,21 @@ export default c([c('@keyframes badge-wave-spread', {
  right: 0;
  top: 0;
  bottom: 0;
- `)])])]);
+ `)]), c('&:has(span)', '', [cB('badge-sup', `
+ border: 2px solid var(--u-border-color);
+ top: -5px;
+ transform: translateX(-18px);
+ bottom: 0;
+ height: 20px;
+ padding: 2px 12px;
+ box-sizing: border-box;
+ border-radius: 100px;
+ `), cM('dot', [cB('badge-sup', `
+ transform: none;
+ width: 12px;
+ height: 12px;
+ transform: none;
+ left: auto;
+ right: 0;
+ top: 0;
+ `)])])])]);

package/es/badge/styles/light.d.ts

@@ -14,6 +14,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     textColorSuccess: string;
     textColorError: string;
     textColorWarning: string;
+    borderColor: string;
 };
 export type BadgeThemeVars = ReturnType<typeof self>;
 declare const badgeLight: Theme<'Badge', BadgeThemeVars>;

package/es/badge/styles/light.js

@@ -1,6 +1,6 @@
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { brandQuaternary500, elementsPrimary, staticGreen, staticRed, staticOrange, fontBodySmall, textPrimary, textQuaternary } = vars;
+    const { brandQuaternary500, elementsPrimary, staticGreen, staticRed, staticOrange, fontBodySmall, textPrimary, textQuaternary, staticWhite } = vars;
     return {
         color: staticRed,
         colorPrime: elementsPrimary,
@@ -9,12 +9,13 @@ export const self = (vars) => {
         colorError: staticRed,
         colorWarning: staticOrange,
         fontSize: fontBodySmall,
-        textColor: textPrimary,
+        textColor: staticWhite,
         textColorPrime: textQuaternary,
         textColorInfo: textPrimary,
         textColorSuccess: textQuaternary,
         textColorError: textQuaternary,
-        textColorWarning: textQuaternary
+        textColorWarning: textQuaternary,
+        borderColor: staticWhite
     };
 };
 const badgeLight = {

package/es/components.d.ts

@@ -12,6 +12,7 @@ export * from './button-group';
 export * from './calendar';
 export * from './color-picker';
 export * from './card';
+export * from './action-card';
 export * from './card-list';
 export * from './carousel';
 export * from './cascader';

package/es/components.js

@@ -12,6 +12,7 @@ export * from './button-group';
 export * from './calendar';
 export * from './color-picker';
 export * from './card';
+export * from './action-card';
 export * from './card-list';
 export * from './carousel';
 export * from './cascader';

package/es/config-provider/src/internal-interface.d.ts

@@ -99,6 +99,7 @@ import type { ToggleButtonTheme } from '../../toggle-button/styles';
 import type { AccountOptionTheme } from '../../_internal/account-option/styles';
 import type { FlexTheme } from '../../flex/styles';
 import { CardListTheme } from '../../card-list/styles';
+import { ActionCardTheme } from '../../action-card';
 export interface GlobalThemeWithoutCommon {
     Alert?: AlertTheme;
     Anchor?: AnchorTheme;
@@ -111,6 +112,7 @@ export interface GlobalThemeWithoutCommon {
     Button?: ButtonTheme;
     ButtonGroup?: ButtonGroupTheme;
     Calendar?: CalendarTheme;
+    ActionCard?: ActionCardTheme;
     Card?: CardTheme;
     Carousel?: CarouselTheme;
     Cascader?: CascaderTheme;

package/es/data-table/src/DataTable.d.ts

@@ -555,6 +555,8 @@ declare const _default: import("vue").DefineComponent<{
             jumperFontSizeLarge: string;
             jumperTextColor: string;
             jumperTextColorDisabled: string;
+            paginationSizePickerBackground: string;
+            paginationSizePickerBorder: string;
         }, {
             Select: import("../../_mixins").Theme<"Select", {
                 menuBoxShadow: string;
@@ -1471,6 +1473,8 @@ declare const _default: import("vue").DefineComponent<{
             jumperFontSizeLarge: string;
             jumperTextColor: string;
             jumperTextColorDisabled: string;
+            paginationSizePickerBackground: string;
+            paginationSizePickerBorder: string;
         }, {
             Select: import("../../_mixins").Theme<"Select", {
                 menuBoxShadow: string;
@@ -2387,6 +2391,8 @@ declare const _default: import("vue").DefineComponent<{
             jumperFontSizeLarge: string;
             jumperTextColor: string;
             jumperTextColorDisabled: string;
+            paginationSizePickerBackground: string;
+            paginationSizePickerBorder: string;
         }, {
             Select: import("../../_mixins").Theme<"Select", {
                 menuBoxShadow: string;
@@ -3321,6 +3327,8 @@ declare const _default: import("vue").DefineComponent<{
                 jumperFontSizeLarge: string;
                 jumperTextColor: string;
                 jumperTextColorDisabled: string;
+                paginationSizePickerBackground: string;
+                paginationSizePickerBorder: string;
             }, {
                 Select: import("../../_mixins").Theme<"Select", {
                     menuBoxShadow: string;
@@ -4818,6 +4826,8 @@ declare const _default: import("vue").DefineComponent<{
             jumperFontSizeLarge: string;
             jumperTextColor: string;
             jumperTextColorDisabled: string;
+            paginationSizePickerBackground: string;
+            paginationSizePickerBorder: string;
         }, {
             Select: import("../../_mixins").Theme<"Select", {
                 menuBoxShadow: string;
@@ -5734,6 +5744,8 @@ declare const _default: import("vue").DefineComponent<{
             jumperFontSizeLarge: string;
             jumperTextColor: string;
             jumperTextColorDisabled: string;
+            paginationSizePickerBackground: string;
+            paginationSizePickerBorder: string;
         }, {
             Select: import("../../_mixins").Theme<"Select", {
                 menuBoxShadow: string;
@@ -6650,6 +6662,8 @@ declare const _default: import("vue").DefineComponent<{
             jumperFontSizeLarge: string;
             jumperTextColor: string;
             jumperTextColorDisabled: string;
+            paginationSizePickerBackground: string;
+            paginationSizePickerBorder: string;
         }, {
             Select: import("../../_mixins").Theme<"Select", {
                 menuBoxShadow: string;

package/es/data-table/src/DataTable.js

@@ -323,7 +323,7 @@ export default defineComponent({
         };
         const cssVarsRef = computed(() => {
             const { size } = props;
-            const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, fixedBoxShadow, sorterSize, resizableContainerSize, resizableSize, loadingColor, loadingSize, opacityLoading, opacityDisabled, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, thSubFontSize, thSubColor, thSubFontWeight, [createKey('fontSize', size)]: fontSize, [createKey('thPadding', size)]: thPadding, [createKey('tdPadding', size)]: tdPadding, [createKey('thHeight', size)]: thHeight, [createKey('tdHeight', size)]: tdHeight } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, fixedBoxShadow, sorterSize, resizableContainerSize, resizableSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, thSubFontSize, thSubColor, thSubFontWeight, [createKey('fontSize', size)]: fontSize, [createKey('thPadding', size)]: thPadding, [createKey('tdPadding', size)]: tdPadding, [createKey('thHeight', size)]: thHeight, [createKey('tdHeight', size)]: tdHeight } } = themeRef.value;
             return {
                 '--u-th-height': thHeight,
                 '--u-td-height': tdHeight,
@@ -367,7 +367,7 @@ export default defineComponent({
                 '--u-loading-size': loadingSize,
                 '--u-loading-color': loadingColor,
                 '--u-opacity-loading': opacityLoading,
-                '--u-td-opacity-disabled': opacityDisabled,
+                '--u-td-opacity-disabled': tdTextColor,
                 '--u-td-color-striped': tdColorStriped,
                 '--u-td-color-striped-modal': tdColorStripedModal,
                 '--u-td-color-striped-popover': tdColorStripedPopover
@@ -410,7 +410,7 @@ export default defineComponent({
                 h(MainTable, { ref: "mainTableInstRef", onEdit: (...args) => {
                         this.$emit('edit', ...args);
                     } })),
-            this.mergedShowPagination ? (h("div", { class: `${mergedClsPrefix}-data-table__pagination` },
+            !this.loading && this.mergedShowPagination ? (h("div", { class: `${mergedClsPrefix}-data-table__pagination` },
                 h(UPagination, Object.assign({ theme: this.mergedTheme.peers.Pagination, themeOverrides: this.mergedTheme.peerOverrides.Pagination, disabled: this.loading }, this.mergedPagination)))) : null,
             h(Transition, { name: "fade-in-scale-up-transition" }, {
                 default: () => {

package/es/data-table/src/HeaderButton/FilterButton.d.ts

@@ -459,6 +459,8 @@ declare const _default: import("vue").DefineComponent<{
                 jumperFontSizeLarge: string;
                 jumperTextColor: string;
                 jumperTextColorDisabled: string;
+                paginationSizePickerBackground: string;
+                paginationSizePickerBorder: string;
             }, {
                 Select: import("../../../_mixins").Theme<"Select", {
                     menuBoxShadow: string;

package/es/data-table/src/HeaderButton/FilterMenu.d.ts

@@ -484,6 +484,8 @@ declare const _default: import("vue").DefineComponent<{
                 jumperFontSizeLarge: string;
                 jumperTextColor: string;
                 jumperTextColorDisabled: string;
+                paginationSizePickerBackground: string;
+                paginationSizePickerBorder: string;
             }, {
                 Select: import("../../../_mixins").Theme<"Select", {
                     menuBoxShadow: string;

package/es/data-table/src/TableParts/Body.d.ts

@@ -485,6 +485,8 @@ declare const _default: import("vue").DefineComponent<{
                 jumperFontSizeLarge: string;
                 jumperTextColor: string;
                 jumperTextColorDisabled: string;
+                paginationSizePickerBackground: string;
+                paginationSizePickerBorder: string;
             }, {
                 Select: import("../../../_mixins").Theme<"Select", {
                     menuBoxShadow: string;

package/es/data-table/src/TableParts/Body.js

@@ -26,6 +26,7 @@ import ExpandTrigger from './ExpandTrigger';
 import RenderSafeCheckbox from './BodyCheckbox';
 import RenderSafeRadio from './BodyRadio';
 import TableHeader from './Header';
+import BodySkeleton from './BodySkeleton';
 function flatten(rowInfos, expandedRowKeys) {
     const fRows = [];
     function traverse(rs, rootIndex) {
@@ -590,11 +591,19 @@ export default defineComponent({
                         } },
                         h("colgroup", null, cols.map((col) => (h("col", { key: col.key, style: col.style })))),
                         this.showHeader ? h(TableHeader, { discrete: false }) : null,
-                        !this.empty ? (h("tbody", { "data-u-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
+                        this.loading ? (h(BodySkeleton, null)) : !this.empty ? (h("tbody", { "data-u-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
                             return renderRow(rowInfo, displayedRowIndex, false);
                         }))) : null));
                 }
                 else {
+                    if (this.loading) {
+                        return (h("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, style: {
+                                tableLayout: this.mergedTableLayout
+                            } },
+                            h("colgroup", null, cols.map((col) => (h("col", { key: col.key, style: col.style })))),
+                            this.showHeader ? h(TableHeader, { discrete: false }) : null,
+                            h(BodySkeleton, null)));
+                    }
                     return (h(VirtualList, { ref: "virtualListRef", items: displayedData, itemSize: 28, visibleItemsTag: VirtualListItemWrapper, visibleItemsProps: {
                             clsPrefix: mergedClsPrefix,
                             id: componentId,

package/es/data-table/src/TableParts/BodySkeleton.d.ts

@@ -0,0 +1,18 @@
+declare const _default: import("vue").DefineComponent<{
+    rowCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    cols: import("vue").Ref<import("../use-group-header").ColItem[]>;
+    skeletonRowCount: import("vue").ComputedRef<number>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    rowCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    rowCount: number;
+}, {}>;
+export default _default;