@uzum-tech/ui 1.5.2 → 1.5.4

package/es/collapse/src/Collapse.d.ts

@@ -9,7 +9,7 @@ export declare const collapseProps: {
     readonly expandedNames: PropType<string | number | Array<string | number> | null>;
     readonly arrowPlacement: {
         readonly type: PropType<ArrowPlacement>;
-        readonly default: "left";
+        readonly default: "right-edge";
     };
     readonly accordion: {
         readonly type: BooleanConstructor;
@@ -40,8 +40,11 @@ export declare const collapseProps: {
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -56,8 +59,11 @@ export declare const collapseProps: {
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -72,8 +78,11 @@ export declare const collapseProps: {
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
 };
 export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>;
@@ -93,7 +102,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly expandedNames: PropType<string | number | Array<string | number> | null>;
     readonly arrowPlacement: {
         readonly type: PropType<ArrowPlacement>;
-        readonly default: "left";
+        readonly default: "right-edge";
     };
     readonly accordion: {
         readonly type: BooleanConstructor;
@@ -124,8 +133,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -140,8 +152,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -156,8 +171,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
 }, {
     rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
@@ -176,8 +194,11 @@ declare const _default: import("vue").DefineComponent<{
             arrowSize: string;
             arrowColor: string;
             arrowColorDisabled: string;
-            itemMargin: string;
             titlePadding: string;
+            backgroundColor: string;
+            borderRadius: string;
+            padding: string;
+            boxSizing: string;
         };
         peers: any;
         peerOverrides: {
@@ -200,7 +221,10 @@ declare const _default: import("vue").DefineComponent<{
         '--u-arrow-size': string;
         '--u-arrow-color': string;
         '--u-arrow-color-disabled': string;
-        '--u-item-margin': string;
+        '--u-background-color': string;
+        '--u-border-radius': string;
+        '--u-padding': string;
+        '--u-box-sizing': string;
     }> | undefined;
     themeClass: Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -212,7 +236,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly expandedNames: PropType<string | number | Array<string | number> | null>;
     readonly arrowPlacement: {
         readonly type: PropType<ArrowPlacement>;
-        readonly default: "left";
+        readonly default: "right-edge";
     };
     readonly accordion: {
         readonly type: BooleanConstructor;
@@ -243,8 +267,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -259,8 +286,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -275,8 +305,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
 }>>, {
     readonly displayDirective: "show" | "if";

package/es/collapse/src/Collapse.js

@@ -10,7 +10,7 @@ export const collapseProps = Object.assign(Object.assign({}, useTheme.props), {
         default: null
     }, expandedNames: [Array, String], arrowPlacement: {
         type: String,
-        default: 'left'
+        default: 'right-edge'
     }, accordion: {
         type: Boolean,
         default: false
@@ -101,7 +101,7 @@ export default defineComponent({
         });
         const rtlEnabledRef = useRtl('Collapse', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
-            const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titlePadding, titleTextColor, titleTextColorDisabled, textColor, arrowColor, fontSize, titleFontSize, arrowColorDisabled, itemMargin, lineHeight, titleLineHeight, arrowSize } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titlePadding, titleTextColor, titleTextColorDisabled, textColor, arrowColor, fontSize, titleFontSize, arrowColorDisabled, lineHeight, titleLineHeight, arrowSize, backgroundColor, borderRadius, padding, boxSizing } } = themeRef.value;
             return {
                 '--u-font-size': fontSize,
                 '--u-bezier': cubicBezierEaseInOut,
@@ -117,7 +117,10 @@ export default defineComponent({
                 '--u-arrow-size': arrowSize,
                 '--u-arrow-color': arrowColor,
                 '--u-arrow-color-disabled': arrowColorDisabled,
-                '--u-item-margin': itemMargin
+                '--u-background-color': backgroundColor,
+                '--u-border-radius': borderRadius,
+                '--u-padding': padding,
+                '--u-box-sizing': boxSizing
             };
         });
         const themeClassHandle = inlineThemeDisabled

package/es/collapse/src/CollapseItem.js

@@ -61,6 +61,7 @@ export default defineComponent({
                 return collapseProps.arrowPlacement;
             }),
             handleClick(e) {
+                e.stopPropagation();
                 if (UCollapse && !props.disabled) {
                     UCollapse.toggleItem(collapsedRef.value, mergedNameRef.value, e);
                 }
@@ -85,12 +86,12 @@ export default defineComponent({
                 `${mergedClsPrefix}-collapse-item--${arrowPlacement}-arrow-placement`,
                 disabled && `${mergedClsPrefix}-collapse-item--disabled`,
                 !collapsed && `${mergedClsPrefix}-collapse-item--active`
-            ] },
+            ], onClick: this.handleClick },
             h("div", { class: [
                     `${mergedClsPrefix}-collapse-item__header`,
                     !collapsed && `${mergedClsPrefix}-collapse-item__header--active`
                 ] },
-                h("div", { class: `${mergedClsPrefix}-collapse-item__header-main`, onClick: this.handleClick },
+                h("div", { class: `${mergedClsPrefix}-collapse-item__header-main` },
                     arrowPlacement !== 'right-edge' && arrowNode,
                     headerNode),
                 resolveWrappedSlotWithProps(headerExtraSlot, { collapsed }, (children) => (h("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, onClick: this.handleClick }, children))),

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

@@ -12,15 +12,24 @@ import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade-
 // --u-arrow-color
 // --u-arrow-color-disabled
 // --u-title-text-color-disabled
-// --u-item-margin
-export default cB('collapse', 'width: 100%;', [cB('collapse-item', `
+// --u-background-color
+// --u-border-radius
+// --u-padding
+// --u-box-sizing
+export default cB('collapse', `
+ width: 100%;
+ background-color: var(--u-background-color);
+ border-radius: var(--u-border-radius);
+ box-sizing: var(--u-box-sizing);
+ `, [cB('collapse-item', `
  font-size: var(--u-font-size);
  line-height: var(--u-line-height);
  color: var(--u-text-color);
  transition:
  color .3s var(--u-bezier),
  border-color .3s var(--u-bezier);
- margin: var(--u-item-margin);
+ padding: var(--u-padding);
+ cursor: pointer;
  `, [cM('disabled', [cE('header', 'cursor: not-allowed;', [cE('header-main', `
  color: var(--u-title-text-color-disabled);
  `), cB('collapse-item-arrow', `
@@ -28,9 +37,22 @@ export default cB('collapse', 'width: 100%;', [cB('collapse-item', `
  `)])]), cB('collapse-item', 'margin-left: 32px;'), c('&:first-child', 'margin-top: 0;'), c('&:first-child >', [cE('header', 'padding-top: 0;')]), cM('left-arrow-placement', [cE('header', [cB('collapse-item-arrow', 'margin-right: 4px;')])]), cM('right-arrow-placement', [cE('header', [cB('collapse-item-arrow', `
  margin-left: 4px;
  order: 1;
- `)])]), cM('right-edge-arrow-placement', [cE('header', [cB('collapse-item-arrow', 'margin-left: auto;')])]), cE('content-wrapper', [cE('content-inner', 'padding-top: 16px;'), fadeInHeightExpandTransition({
+ `)])]), cM('right-edge-arrow-placement', [cE('header', [cB('collapse-item-arrow', `
+ margin-left: auto;
+ display: flex;
+ width: 28px;
+ height: 28px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 100px;
+ background: #F3F4F6;
+ `, [cB('base-icon', `
+ transform: scaleY(1) rotate(90deg);
+ transition:
+ transform .15s var(--u-bezier)
+ `)])])]), cE('content-wrapper', [cE('content-inner', 'padding-top: 16px;'), fadeInHeightExpandTransition({
   duration: '0.15s'
-})]), cM('active', [cE('header', [cM('active', [cB('collapse-item-arrow', 'transform: rotate(90deg);')])])]), c('&:not(:first-child)', 'border-top: 1px solid var(--u-divider-color);'), cE('header', `
+})]), cM('active', [cE('header', [cM('active', [cB('collapse-item-arrow', [cB('base-icon', 'transform: scaleY(-1) rotate(90deg)')])])])]), cE('header', `
  font-size: var(--u-title-font-size);
  line-height: var(--u-title-line-height);
  display: flex;
@@ -38,9 +60,7 @@ export default cB('collapse', 'width: 100%;', [cB('collapse-item', `
  align-items: center;
  transition: color .3s var(--u-bezier);
  position: relative;
- padding: var(--u-title-padding);
  color: var(--u-title-text-color);
- cursor: pointer;
  `, [cE('header-main', `
  display: flex;
  flex-wrap: nowrap;

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

@@ -13,8 +13,11 @@ export declare const self: (vars: ThemeCommonVars) => {
     arrowSize: string;
     arrowColor: string;
     arrowColorDisabled: string;
-    itemMargin: string;
     titlePadding: string;
+    backgroundColor: string;
+    borderRadius: string;
+    padding: string;
+    boxSizing: string;
 };
 export type CollapseThemeVars = ReturnType<typeof self>;
 declare const collapseLight: Theme<'Collapse', CollapseThemeVars>;

package/es/collapse/styles/light.js

@@ -1,6 +1,6 @@
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { fontWeight, fontBodyLarge, lineHeightBodyLarge, elementsQuaternary, textPrimary, textSecondary, fontBodyMedium, lineHeightBodyMedium, iconSmall } = vars;
+    const { fontWeight, fontBodyLarge, lineHeightBodyLarge, elementsQuaternary, textPrimary, textSecondary, fontBodyMedium, lineHeightBodyMedium, iconSmall, containerPrimary } = vars;
     return {
         titleFontSize: fontBodyLarge,
         titleLineHeight: lineHeightBodyLarge,
@@ -14,8 +14,11 @@ export const self = (vars) => {
         arrowSize: iconSmall,
         arrowColor: textPrimary,
         arrowColorDisabled: textSecondary,
-        itemMargin: '16px 0 0 0',
-        titlePadding: '16px 0 0 0'
+        titlePadding: '16px 0 0 0',
+        backgroundColor: containerPrimary,
+        borderRadius: '20px',
+        padding: '24px',
+        boxSizing: 'border-box'
     };
 };
 const collapseLight = {

package/es/color-picker/src/ColorPicker.js

@@ -255,14 +255,14 @@ export default defineComponent({
             else {
                 upcomingValue = null;
             }
-            const { nTriggerFormChange, nTriggerFormInput } = formItem;
+            const { triggerFormChange, triggerFormInput } = formItem;
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props;
             if (onUpdateValue)
                 call(onUpdateValue, value);
             if (_onUpdateValue)
                 call(_onUpdateValue, value);
-            nTriggerFormChange();
-            nTriggerFormInput();
+            triggerFormChange();
+            triggerFormInput();
             uncontrolledValueRef.value = value;
         }
         function handleInputUpdateValue(value) {
@@ -273,7 +273,7 @@ export default defineComponent({
             const { value } = mergedValueRef;
             // no value & only hue changes will complete with no value
             if (value) {
-                const { nTriggerFormChange, nTriggerFormInput } = formItem;
+                const { triggerFormChange, triggerFormInput } = formItem;
                 const { onComplete } = props;
                 if (onComplete) {
                     ;
@@ -285,8 +285,8 @@ export default defineComponent({
                     undoStack.splice(valueIndex + 1, undoStack.length, value);
                     valueIndexRef.value = valueIndex + 1;
                 }
-                nTriggerFormChange();
-                nTriggerFormInput();
+                triggerFormChange();
+                triggerFormInput();
             }
         }
         function undo() {

package/es/components.d.ts

@@ -44,6 +44,7 @@ export * from './icon-wrapper';
 export * from './image';
 export * from './input';
 export * from './input-number';
+export * from './input-otp';
 export * from './layout';
 export * from './legacy-grid';
 export * from './legacy-transfer';

package/es/components.js

@@ -44,6 +44,7 @@ export * from './icon-wrapper';
 export * from './image';
 export * from './input';
 export * from './input-number';
+export * from './input-otp';
 export * from './layout';
 export * from './legacy-grid';
 export * from './legacy-transfer';

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

@@ -37,6 +37,7 @@ import type { IconWrapperTheme } from '../../icon-wrapper/styles';
 import type { ImageTheme } from '../../image/styles';
 import type { InputTheme } from '../../input/styles';
 import type { InputNumberTheme } from '../../input-number/styles';
+import type { InputOtpTheme } from '../../input-otp/styles';
 import type { LayoutTheme } from '../../layout/styles';
 import type { LegacyTransferTheme } from '../../legacy-transfer/styles';
 import type { ListTheme } from '../../list/styles';
@@ -190,6 +191,7 @@ export interface GlobalThemeWithoutCommon {
     InternalSelectMenu?: InternalSelectMenuTheme;
     InternalSelection?: InternalSelectionTheme;
     AccountOption?: AccountOptionTheme;
+    InputOtp?: InputOtpTheme;
 }
 export interface GlobalComponentConfig {
     Pagination?: {

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

@@ -91,6 +91,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
         readonly default: {};
     };
+    readonly emptyProps: import("vue").PropType<Partial<import("../..").EmptyProps>>;
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
     readonly onUpdatePage: import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
@@ -2872,6 +2873,11 @@ declare const _default: import("vue").DefineComponent<{
     page: (page: number) => void;
     sort: (columnKey: import("./interface").ColumnKey, order: import("./interface").SortOrder) => void;
     scrollTo: import("../../scrollbar/src/Scrollbar").ScrollTo;
+    getData: () => {
+        data: import("./interface").InternalRowData[];
+        totalRows: import("./interface").InternalRowData | null;
+    };
+    getTotalRowData: () => import("./interface").InternalRowData | null;
     clearFilter: () => void;
     mainTableInstRef: import("vue").Ref<{
         getHeaderElement: () => HTMLElement | null;
@@ -4363,6 +4369,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
         readonly default: {};
     };
+    readonly emptyProps: import("vue").PropType<Partial<import("../..").EmptyProps>>;
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
     readonly onUpdatePage: import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;

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

@@ -13,7 +13,6 @@ import { useResizable } from './use-resizable';
 import { dataTableInjectionKey, dataTableProps } from './interface';
 import { useGroupHeader } from './use-group-header';
 import { useExpand } from './use-expand';
-import { processMaskedValue } from './use-mask';
 import style from './styles/index.cssr';
 export default defineComponent({
     name: 'DataTable',
@@ -93,7 +92,7 @@ export default defineComponent({
                         return;
                     if (!('totalRow' in col) || !col.totalRow)
                         return;
-                    const { key, totalRow, render, mask } = col;
+                    const { key, totalRow, render } = col;
                     if (!totalRow)
                         return;
                     if (totalRow.type === 'default') {
@@ -106,18 +105,12 @@ export default defineComponent({
                                 return Number(renderedValue) || 0;
                             });
                             const sum = values.reduce((sum, val) => sum + val, 0);
-                            const finalValue = mask
-                                ? processMaskedValue(String(sum), mask)
-                                : sum;
-                            summaryRow[key] = { value: finalValue };
+                            summaryRow[key] = { value: sum };
                         }
                         else {
                             const values = pageData.map((row) => Number(row[key]) || 0);
                             const sum = values.reduce((sum, val) => sum + val, 0);
-                            const finalValue = mask
-                                ? processMaskedValue(String(sum), mask)
-                                : sum;
-                            summaryRow[key] = { value: finalValue };
+                            summaryRow[key] = { value: sum };
                         }
                     }
                     else {
@@ -307,6 +300,7 @@ export default defineComponent({
             handleTableBodyScroll,
             setHeaderScrollLeft,
             renderCell: toRef(props, 'renderCell'),
+            emptyPropsRef: toRef(props, 'emptyProps'),
             handleEdit
         });
         const exposedMethods = {
@@ -320,6 +314,23 @@ export default defineComponent({
             scrollTo: (arg0, arg1) => {
                 var _a;
                 (_a = mainTableInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
+            },
+            getData: () => {
+                const originalData = props.data || [];
+                const totalRowData = autoSummaryRef.value && rawPaginatedDataRef.value
+                    ? autoSummaryRef.value(rawPaginatedDataRef.value)
+                    : null;
+                return {
+                    data: originalData,
+                    totalRows: totalRowData
+                };
+            },
+            getTotalRowData: () => {
+                if (autoSummaryRef.value && rawPaginatedDataRef.value) {
+                    const summaryResult = autoSummaryRef.value(rawPaginatedDataRef.value);
+                    return summaryResult;
+                }
+                return null;
             }
         };
         const cssVarsRef = computed(() => {

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

@@ -1430,6 +1430,7 @@ declare const _default: import("vue").DefineComponent<{
     }) => void;
     handleUpdateExpanded: (key: RowKey, tmNode: TmNode | null) => void;
     renderCell: import("vue").Ref<((value: any, rowData: object, column: import("../interface").TableBaseColumn) => import("vue").VNodeChild) | undefined>;
+    emptyPropsRef: import("vue").Ref<Partial<import("../../../empty").EmptyProps> | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "edit"[], "edit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     onEdit: PropType<(value: string, row: string, key: string) => void>;
     onResize: PropType<(e: ResizeObserverEntry) => void>;

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

@@ -94,7 +94,7 @@ export default defineComponent({
         bodyStyle: Object
     },
     setup(props) {
-        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
+        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell, emptyPropsRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(dataTableInjectionKey);
         const scrollbarInstRef = ref(null);
@@ -342,10 +342,11 @@ export default defineComponent({
             handleCheckboxUpdateChecked,
             handleRadioUpdateChecked,
             handleUpdateExpanded,
-            renderCell }, exposedMethods);
+            renderCell,
+            emptyPropsRef }, exposedMethods);
     },
     render() {
-        const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft } = this;
+        const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft, emptyPropsRef } = this;
         const scrollable = scrollX !== undefined || maxHeight !== undefined || flexHeight;
         // For a basic table with auto layout whose content may overflow we will
         // make it scrollable, which differs from browser's native behavior.
@@ -560,6 +561,7 @@ export default defineComponent({
                                     `${mergedClsPrefix}-data-table-td--last-row`,
                                 'editable' in column &&
                                     column.editable &&
+                                    !isSummary &&
                                     `${mergedClsPrefix}-data-table-td--editable`
                             ] }),
                             column.fixed && (h("div", { class: `${mergedClsPrefix}-data-table-td__shadow-holder` })),
@@ -596,7 +598,7 @@ export default defineComponent({
                         }))) : null));
                 }
                 else {
-                    if (this.loading) {
+                    if (this.loading || this.loadingSkeleton) {
                         return (h("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, style: {
                                 tableLayout: this.mergedTableLayout
                             } },
@@ -615,12 +617,12 @@ export default defineComponent({
                 }
             }
         }));
-        if (this.empty) {
+        if (this.empty && !this.loadingSkeleton) {
             const createEmptyNode = () => (h("div", { class: [
                     `${mergedClsPrefix}-data-table-empty`,
                     this.loading && `${mergedClsPrefix}-data-table-empty--hide`
                 ], style: this.bodyStyle, ref: "emptyElRef" }, resolveSlot(this.dataTableSlots.empty, () => [
-                h(UEmpty, { size: "large", theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
+                h(UEmpty, Object.assign({ size: "large", theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty }, emptyPropsRef))
             ])));
             if (this.shouldDisplaySomeTablePart) {
                 return (h(Fragment, null,