@uzum-tech/ui 1.3.1 → 1.4.0

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

@@ -1,8 +1,10 @@
-import { defineComponent, h } from 'vue';
-import { get } from 'lodash';
+import { h, defineComponent } from 'vue';
+import { get } from 'lodash-es';
 import { UEllipsis } from '../../../ellipsis';
+import { processMaskedValue, processInputWithMask } from '../use-mask';
 export default defineComponent({
     name: 'DataTableCell',
+    emits: ['edit'],
     props: {
         clsPrefix: {
             type: String,
@@ -28,20 +30,76 @@ export default defineComponent({
         renderCell: Function
     },
     render() {
+        var _a;
         const { isSummary, column, row, renderCell } = this;
         let cell;
-        const { render, key, ellipsis } = column;
+        const { render, key, ellipsis, editable, mask } = column;
         if (render && !isSummary) {
-            cell = render(row, this.index);
+            let cellValue = render(row, this.index);
+            if (mask && cellValue !== null && cellValue !== undefined) {
+                if (typeof cellValue === 'string' || typeof cellValue === 'number') {
+                    cellValue = processMaskedValue(cellValue, mask);
+                }
+            }
+            cell = cellValue;
+        }
+        else if (editable && !isSummary) {
+            const { placeholder } = column;
+            let initialValue = String(row[key] || '');
+            if (mask && initialValue) {
+                initialValue = processMaskedValue(initialValue, mask);
+            }
+            const inputProps = {
+                class: `${this.clsPrefix}-data-table-editable-input`,
+                value: initialValue,
+                placeholder: placeholder || '',
+                onInput: (e) => {
+                    const value = e.target.value;
+                    if (mask) {
+                        const { processedValue, displayValue } = processInputWithMask(value, mask);
+                        setTimeout(() => {
+                            const input = e.target;
+                            if (input.value !== displayValue) {
+                                const cursorPos = input.selectionStart || 0;
+                                input.value = displayValue;
+                                input.setSelectionRange(cursorPos, cursorPos);
+                            }
+                        });
+                        this.$emit('edit', processedValue, row, key);
+                    }
+                    else {
+                        this.$emit('edit', value, row, key);
+                    }
+                }
+            };
+            if (mask) {
+                inputProps['data-mask'] =
+                    typeof mask === 'string' ? mask : JSON.stringify(mask);
+            }
+            cell = h('input', inputProps);
         }
         else {
             if (isSummary) {
-                cell = row[key].value;
+                const summaryCell = row[key];
+                let cellValue = (_a = summaryCell === null || summaryCell === void 0 ? void 0 : summaryCell.value) !== null && _a !== void 0 ? _a : '';
+                if (mask && cellValue !== null && cellValue !== undefined) {
+                    cellValue = processMaskedValue(String(cellValue), mask);
+                }
+                cell = String(cellValue);
             }
             else {
-                cell = renderCell
+                let cellValue = renderCell
                     ? renderCell(get(row, key), row, column)
                     : get(row, key);
+                if (cellValue && typeof cellValue === 'object' && 'type' in cellValue) {
+                    cell = cellValue;
+                }
+                else {
+                    if (mask && cellValue !== null && cellValue !== undefined) {
+                        cellValue = processMaskedValue(cellValue, mask);
+                    }
+                    cell = String(cellValue);
+                }
             }
         }
         if (ellipsis) {

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

@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<RenderExpandIcon>;
     };
 }>>, {
-    expanded: boolean;
     loading: boolean;
+    expanded: boolean;
 }, {}>;
 export default _default;

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

@@ -24,118 +24,7 @@ declare const _default: import("vue").DefineComponent<{
     rows: import("vue").Ref<import("../use-group-header").RowItem[][]>;
     cols: import("vue").Ref<import("../use-group-header").ColItem[]>;
     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;
@@ -172,6 +61,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;
@@ -751,12 +643,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>;
                     }>;
@@ -884,12 +782,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>;
                     }>;
@@ -904,12 +808,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", {
@@ -1220,12 +1130,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>;
                         }>;
@@ -1353,12 +1269,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>;
                         }>;
@@ -1437,7 +1359,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     checkOptions: import("vue").Ref<import("../interface").DataTableSelectionOptions<import("../interface").InternalRowData> | undefined>;
-    mergedTableLayout: import("vue").Ref<"fixed" | "auto">;
+    mergedTableLayout: import("vue").Ref<"auto" | "fixed">;
     headerCheckboxDisabled: import("vue").Ref<boolean>;
     handleCheckboxUpdateChecked: () => void;
     handleColHeaderClick: (e: MouseEvent, column: TableBaseColumn) => void;

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

@@ -107,11 +107,13 @@ export default defineComponent({
                     }
                     return (h(Fragment, null,
                         h("div", { class: `${mergedClsPrefix}-data-table-th__title-wrapper` },
-                            h("div", { class: `${mergedClsPrefix}-data-table-th__title` }, ellipsis === true ||
-                                (ellipsis && !ellipsis.tooltip) ? (h("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-                                : ellipsis && typeof ellipsis === 'object' ? (h(UEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
-                                    default: () => renderTitle(column)
-                                })) : (renderTitle(column))),
+                            h("div", { class: `${mergedClsPrefix}-data-table-th__title` },
+                                ellipsis === true ||
+                                    (ellipsis && !ellipsis.tooltip) ? (h("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+                                    : ellipsis && typeof ellipsis === 'object' ? (h(UEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
+                                        default: () => renderTitle(column)
+                                    })) : (renderTitle(column)),
+                                column.subtitle && (h("div", { class: `${mergedClsPrefix}-data-table-th__subtitle` }, column.subtitle))),
                             isColumnSortable(column) ? (h(SortButton, { column: column })) : null),
                         isColumnFilterable(column) ? (h(FilterButton, { column: column, options: column.filterOptions })) : null,
                         isColumnResizable(column) ? (h(ResizeButton, { onResizeStart: () => {