@uzum-tech/ui 1.3.1 → 1.4.1

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

@@ -13,12 +13,14 @@ 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',
     alias: ['AdvancedTable'],
+    emits: ['edit'],
     props: dataTableProps,
-    setup(props, { slots }) {
+    setup(props, { slots, emit }) {
         if (process.env.NODE_ENV !== 'production') {
             watchEffect(() => {
                 if (props.onPageChange !== undefined) {
@@ -79,6 +81,146 @@ export default defineComponent({
             }
             return props.tableLayout;
         });
+        const autoSummaryRef = computed(() => {
+            const columns = props.columns;
+            const hasTotalRow = columns.some((col) => !('children' in col) && 'totalRow' in col && col.totalRow);
+            if (!hasTotalRow)
+                return null;
+            return (pageData) => {
+                const summaryRow = {};
+                columns.forEach((col) => {
+                    if ('children' in col)
+                        return;
+                    if (!('totalRow' in col) || !col.totalRow)
+                        return;
+                    const { key, totalRow, render, mask } = col;
+                    if (!totalRow)
+                        return;
+                    if (totalRow.type === 'default') {
+                        summaryRow[key] = { value: totalRow.value || '' };
+                    }
+                    else if (totalRow.type === 'sum') {
+                        if (render) {
+                            const values = pageData.map((row) => {
+                                const renderedValue = render(row, 0);
+                                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 };
+                        }
+                        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 };
+                        }
+                    }
+                    else {
+                        const config = {
+                            type: totalRow.type,
+                            fields: totalRow.fields || [String(key)],
+                            function: totalRow.function
+                        };
+                        const result = calculateTotalRowValue(pageData, config);
+                        summaryRow[key] = { value: result };
+                    }
+                });
+                columns.forEach((col) => {
+                    if ('children' in col)
+                        return;
+                    const { key } = col;
+                    if (!(key in summaryRow)) {
+                        summaryRow[key] = { value: '' };
+                    }
+                });
+                return summaryRow;
+            };
+        });
+        const mergedSummaryRef = computed(() => {
+            const userSummary = toRef(props, 'summary').value;
+            const autoSummary = autoSummaryRef.value;
+            if (!autoSummary)
+                return userSummary;
+            if (!userSummary)
+                return autoSummary;
+            return (pageData) => {
+                const userResult = userSummary(pageData);
+                const autoResult = autoSummary(pageData);
+                if (Array.isArray(userResult)) {
+                    return [...userResult, autoResult];
+                }
+                else {
+                    return Object.assign(Object.assign({}, userResult), autoResult);
+                }
+            };
+        });
+        const calculateTotalRowValue = (pageData, config) => {
+            const { type, fields, function: customFn } = config;
+            switch (type) {
+                case 'sum':
+                    return pageData.reduce((acc, row) => {
+                        const values = fields.map((field) => Number(row[field]) || 0);
+                        return (Number(acc) +
+                            values.reduce((sum, val) => Number(sum) + Number(val), 0));
+                    }, 0);
+                case 'diff': {
+                    if (fields.length < 2)
+                        return 0;
+                    const firstField = fields[0];
+                    const secondField = fields[1];
+                    const firstSum = pageData.reduce((acc, row) => Number(acc) + (Number(row[firstField]) || 0), 0);
+                    const secondSum = pageData.reduce((acc, row) => Number(acc) + (Number(row[secondField]) || 0), 0);
+                    return firstSum - secondSum;
+                }
+                case 'multiply':
+                    return pageData.reduce((acc, row) => {
+                        const values = fields.map((field) => Number(row[field]) || 1);
+                        return acc * values.reduce((product, val) => product * val, 1);
+                    }, 1);
+                case 'divide': {
+                    if (fields.length < 2)
+                        return 0;
+                    const dividendField = fields[0];
+                    const divisorField = fields[1];
+                    const dividendSum = pageData.reduce((acc, row) => Number(acc) + (Number(row[dividendField]) || 0), 0);
+                    const divisorSum = pageData.reduce((acc, row) => Number(acc) + (Number(row[divisorField]) || 1), 0);
+                    return divisorSum !== 0 ? dividendSum / divisorSum : 0;
+                }
+                case 'percentage': {
+                    if (fields.length < 2)
+                        return 0;
+                    const startField = fields[0];
+                    const endField = fields[1];
+                    const startSum = pageData.reduce((acc, row) => Number(acc) + (Number(row[startField]) || 0), 0);
+                    const endSum = pageData.reduce((acc, row) => Number(acc) + (Number(row[endField]) || 0), 0);
+                    const result = startSum !== 0 ? ((endSum - startSum) / startSum) * 100 : 0;
+                    return result;
+                }
+                case 'function':
+                    if (customFn) {
+                        try {
+                            const fieldValues = fields.map((field) => pageData.map((row) => Number(row[field]) || 0));
+                            const allValues = fieldValues.flat();
+                            return customFn(allValues);
+                        }
+                        catch (error) {
+                            return 0;
+                        }
+                    }
+                    return 0;
+                default:
+                    return 0;
+            }
+        };
+        const handleEdit = (value, row, key) => {
+            row[key] = value;
+            emit('edit', value, row, key);
+        };
         provide(dataTableInjectionKey, {
             props,
             sizeRef: toRef(props, 'size'),
@@ -120,7 +262,7 @@ export default defineComponent({
             stickyExpandedRowsRef,
             rowKeyRef: toRef(props, 'rowKey'),
             renderExpandRef,
-            summaryRef: toRef(props, 'summary'),
+            summaryRef: mergedSummaryRef,
             virtualScrollRef: toRef(props, 'virtualScroll'),
             rowPropsRef: toRef(props, 'rowProps'),
             stripedRef: toRef(props, 'striped'),
@@ -163,7 +305,8 @@ export default defineComponent({
             handleTableHeaderScroll,
             handleTableBodyScroll,
             setHeaderScrollLeft,
-            renderCell: toRef(props, 'renderCell')
+            renderCell: toRef(props, 'renderCell'),
+            handleEdit
         });
         const exposedMethods = {
             filter,
@@ -180,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, [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, 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;
             return {
                 '--u-th-height': thHeight,
                 '--u-td-height': tdHeight,
@@ -206,6 +349,9 @@ export default defineComponent({
                 '--u-td-color-popover': tdColorPopover,
                 '--u-td-color-hover-popover': tdColorHoverPopover,
                 '--u-th-text-color': thTextColor,
+                '--u-th-sub-color': thSubColor,
+                '--u-th-sub-font-weight': thSubFontWeight,
+                '--u-th-sub-font-size': thSubFontSize,
                 '--u-td-text-color': tdTextColor,
                 '--u-th-font-weight': thFontWeight,
                 '--u-th-button-color-hover': thButtonColorHover,
@@ -261,7 +407,9 @@ export default defineComponent({
                 }
             ], style: this.cssVars },
             h("div", { class: `${mergedClsPrefix}-data-table-wrapper` },
-                h(MainTable, { ref: "mainTableInstRef" })),
+                h(MainTable, { ref: "mainTableInstRef", onEdit: (...args) => {
+                        this.$emit('edit', ...args);
+                    } })),
             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" }, {

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

@@ -11,118 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     mergedTheme: import("vue").Ref<{
-        common: {
-            scrollbarColor: string;
-            scrollbarColorHover: string;
-            scrollbarWidth: string;
-            scrollbarHeight: string;
-            scrollbarBorderRadius: string;
-            opacityDisabled: string;
-            brandPrimary50: string;
-            brandPrimary100: string;
-            brandPrimary200: string;
-            brandPrimary300: string;
-            brandPrimary400: string;
-            brandPrimary500: string;
-            brandPrimary550: string;
-            brandPrimary600: string;
-            brandSecondary500: string;
-            brandSecondary300: string;
-            brandSecondary600: string;
-            brandTertiary500: string;
-            brandTertiary300: string;
-            brandTertiary600: string;
-            brandQuaternary500: string;
-            brandQuaternary300: string;
-            brandQuaternary600: string;
-            brandQuinary500: string;
-            brandQuinary300: string;
-            brandQuinary600: string;
-            brandQuinary100: string;
-            surfacePrimary: string;
-            surfaceSecondary: string;
-            containerPrimary: string;
-            containerSecondary: string;
-            textPrimary: string;
-            textSecondary: string;
-            textTertiary: string;
-            textQuaternary: string;
-            textBrand: string;
-            elementsPrimary: string;
-            elementsSecondary: string;
-            elementsTertiary: string;
-            elementsQuaternary: string;
-            elementsQuinary: string;
-            elementsDarkQuinary: string;
-            elementsSenary: string;
-            elementsOnContainer: string;
-            transparencyPrimary: string;
-            transparencySecondary: string;
-            transparencyTertiary: string;
-            transparencyQuinary: string;
-            transparencyModal: string;
-            staticBlack: string;
-            staticDarkGrey: string;
-            staticWhite: string;
-            staticRed: string;
-            staticOrange: string;
-            staticGreen: string;
-            staticDeepBlue: string;
-            staticErrorAccent: string;
-            shadowDepth2: string;
-            shadowDepth: string;
-            fontFamily: string;
-            fontFamilyMono: string;
-            cubicBezierEaseInOut: string;
-            cubicBezierEaseOut: string;
-            cubicBezierEaseIn: string;
-            borderRadiusLarge: string;
-            borderRadius: string;
-            borderRadiusMedium: string;
-            borderRadiusSmall: string;
-            borderRadiusTiny: string;
-            heightMini: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            heightHuge: string;
-            fontDisplayLarge: string;
-            fontDisplaySmall: string;
-            fontHeadingLarge: string;
-            fontHeadingMedium: string;
-            fontHeadingSmall: string;
-            fontTitleLarge: string;
-            fontTitleMedium: string;
-            fontTitleSmall: string;
-            fontBodyLarge: string;
-            fontBodyMedium: string;
-            fontBodySmall: string;
-            lineHeightDisplayLarge: string;
-            lineHeightDisplaySmall: string;
-            lineHeightHeadingLarge: string;
-            lineHeightHeadingMedium: string;
-            lineHeightHeadingSmall: string;
-            lineHeightTitleLarge: string;
-            lineHeightTitleMedium: string;
-            lineHeightTitleSmall: string;
-            lineHeightBodyLarge: string;
-            lineHeightBodyMedium: string;
-            lineHeightBodySmall: string;
-            fontWeight: string;
-            fontWeightStrong: string;
-            fontWeightBold: string;
-            iconSmall: string;
-            iconMedium: string;
-            iconLarge: string;
-            iconHuge: string;
-            closeSmall: string;
-            closeMedium: string;
-            closeLarge: string;
-            closeHuge: string;
-            closeBorderRadius: string;
-            name: "common";
-        };
+        common: import("../../..").ThemeCommonVars;
         self: {
             thPaddingSmall: string;
             thPaddingMedium: string;
@@ -159,6 +48,9 @@ declare const _default: import("vue").DefineComponent<{
             tdTextColor: string;
             thTextColor: string;
             thFontWeight: string;
+            thSubColor: string;
+            thSubFontWeight: string;
+            thSubFontSize: string;
             thButtonColorHover: string;
             thIconColor: string;
             thIconColorActive: string;
@@ -738,12 +630,18 @@ declare const _default: import("vue").DefineComponent<{
                             iconSizeMedium: string;
                             iconSizeLarge: string;
                             iconSizeHuge: string;
-                            fontSizeSmall: string;
-                            fontSizeMedium: string;
-                            fontSizeLarge: string;
-                            fontSizeHuge: string;
-                            textColor: string;
+                            titleFontSizeSmall: string;
+                            titleFontSizeMedium: string;
+                            titleFontSizeLarge: string;
+                            titleFontSizeHuge: string;
+                            descriptionFontSizeSmall: string;
+                            descriptionFontSizeMedium: string;
+                            descriptionFontSizeLarge: string;
+                            descriptionFontSizeHuge: string;
+                            titleColor: string;
+                            descriptionColor: string;
                             iconColor: string;
+                            iconBgColor: string;
                             extraTextColor: string;
                         }, any>;
                     }>;
@@ -871,12 +769,18 @@ declare const _default: import("vue").DefineComponent<{
                             iconSizeMedium: string;
                             iconSizeLarge: string;
                             iconSizeHuge: string;
-                            fontSizeSmall: string;
-                            fontSizeMedium: string;
-                            fontSizeLarge: string;
-                            fontSizeHuge: string;
-                            textColor: string;
+                            titleFontSizeSmall: string;
+                            titleFontSizeMedium: string;
+                            titleFontSizeLarge: string;
+                            titleFontSizeHuge: string;
+                            descriptionFontSizeSmall: string;
+                            descriptionFontSizeMedium: string;
+                            descriptionFontSizeLarge: string;
+                            descriptionFontSizeHuge: string;
+                            titleColor: string;
+                            descriptionColor: string;
                             iconColor: string;
+                            iconBgColor: string;
                             extraTextColor: string;
                         }, any>;
                     }>;
@@ -891,12 +795,18 @@ declare const _default: import("vue").DefineComponent<{
                 iconSizeMedium: string;
                 iconSizeLarge: string;
                 iconSizeHuge: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
-                fontSizeHuge: string;
-                textColor: string;
+                titleFontSizeSmall: string;
+                titleFontSizeMedium: string;
+                titleFontSizeLarge: string;
+                titleFontSizeHuge: string;
+                descriptionFontSizeSmall: string;
+                descriptionFontSizeMedium: string;
+                descriptionFontSizeLarge: string;
+                descriptionFontSizeHuge: string;
+                titleColor: string;
+                descriptionColor: string;
                 iconColor: string;
+                iconBgColor: string;
                 extraTextColor: string;
             }, any>;
             Popover: import("../../../_mixins").Theme<"Popover", {
@@ -1207,12 +1117,18 @@ declare const _default: import("vue").DefineComponent<{
                                 iconSizeMedium: string;
                                 iconSizeLarge: string;
                                 iconSizeHuge: string;
-                                fontSizeSmall: string;
-                                fontSizeMedium: string;
-                                fontSizeLarge: string;
-                                fontSizeHuge: string;
-                                textColor: string;
+                                titleFontSizeSmall: string;
+                                titleFontSizeMedium: string;
+                                titleFontSizeLarge: string;
+                                titleFontSizeHuge: string;
+                                descriptionFontSizeSmall: string;
+                                descriptionFontSizeMedium: string;
+                                descriptionFontSizeLarge: string;
+                                descriptionFontSizeHuge: string;
+                                titleColor: string;
+                                descriptionColor: string;
                                 iconColor: string;
+                                iconBgColor: string;
                                 extraTextColor: string;
                             }, any>;
                         }>;
@@ -1340,12 +1256,18 @@ declare const _default: import("vue").DefineComponent<{
                                 iconSizeMedium: string;
                                 iconSizeLarge: string;
                                 iconSizeHuge: string;
-                                fontSizeSmall: string;
-                                fontSizeMedium: string;
-                                fontSizeLarge: string;
-                                fontSizeHuge: string;
-                                textColor: string;
+                                titleFontSizeSmall: string;
+                                titleFontSizeMedium: string;
+                                titleFontSizeLarge: string;
+                                titleFontSizeHuge: string;
+                                descriptionFontSizeSmall: string;
+                                descriptionFontSizeMedium: string;
+                                descriptionFontSizeLarge: string;
+                                descriptionFontSizeHuge: string;
+                                titleColor: string;
+                                descriptionColor: string;
                                 iconColor: string;
+                                iconBgColor: string;
                                 extraTextColor: string;
                             }, any>;
                         }>;