@uzum-tech/ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,276 @@
+import { h, computed, defineComponent, ref, provide, toRef, Transition, watchEffect } from 'vue';
+import { createId } from 'seemly';
+import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
+import { UBaseLoading } from '../../_internal';
+import { UPagination } from '../../pagination';
+import { createKey, resolveSlot, warnOnce } from '../../_utils';
+import { dataTableLight } from '../styles';
+import MainTable from './MainTable';
+import { useCheck } from './use-check';
+import { useTableData } from './use-table-data';
+import { useScroll } from './use-scroll';
+import { useResizable } from './use-resizable';
+import { dataTableInjectionKey, dataTableProps } from './interface';
+import { useGroupHeader } from './use-group-header';
+import { useExpand } from './use-expand';
+import style from './styles/index.cssr';
+export default defineComponent({
+    name: 'DataTable',
+    alias: ['AdvancedTable'],
+    props: dataTableProps,
+    setup(props, { slots }) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.onPageChange !== undefined) {
+                    warnOnce('data-table', '`on-page-change` is deprecated, please use `on-update:page` instead.');
+                }
+                if (props.onPageSizeChange !== undefined) {
+                    warnOnce('data-table', '`on-page-size-change` is deprecated, please use `on-update:page-size` instead.');
+                }
+                if (props.onSorterChange !== undefined) {
+                    warnOnce('data-table', '`on-sorter-change` is deprecated, please use `on-update:sorter` instead.');
+                }
+                if (props.onFiltersChange !== undefined) {
+                    warnOnce('data-table', '`on-filters-change` is deprecated, please use `on-update:filters` instead.');
+                }
+                if (props.onCheckedRowKeysChange !== undefined) {
+                    warnOnce('data-table', '`on-checked-row-keys-change` is deprecated, please use `on-update:checked-row-keys` instead.');
+                }
+            });
+        }
+        const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const mergedBottomBorderedRef = computed(() => {
+            const { bottomBordered } = props;
+            // do not add bottom bordered class if bordered is true
+            // since border is displayed on wrapper
+            if (mergedBorderedRef.value)
+                return false;
+            if (bottomBordered !== undefined)
+                return bottomBordered;
+            return true;
+        });
+        const themeRef = useTheme('DataTable', '-data-table', style, dataTableLight, props, mergedClsPrefixRef);
+        const bodyWidthRef = ref(null);
+        const mainTableInstRef = ref(null);
+        const { getResizableWidth, clearResizableWidth, doUpdateResizableWidth } = useResizable();
+        const { rowsRef, colsRef, dataRelatedColsRef, hasEllipsisRef } = useGroupHeader(props, getResizableWidth);
+        const { treeMateRef, mergedCurrentPageRef, paginatedDataRef, rawPaginatedDataRef, selectionColumnRef, hoverKeyRef, mergedPaginationRef, mergedFilterStateRef, mergedSortStateRef, childTriggerColIndexRef, doUpdatePage, doUpdateFilters, onUnstableColumnResize, deriveNextSorter, filter, filters, clearFilter, clearFilters, clearSorter, page, sort } = useTableData(props, { dataRelatedColsRef });
+        const { doCheckAll, doUncheckAll, doCheck, doUncheck, headerCheckboxDisabledRef, someRowsCheckedRef, allRowsCheckedRef, mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef } = useCheck(props, {
+            selectionColumnRef,
+            treeMateRef,
+            paginatedDataRef
+        });
+        const { stickyExpandedRowsRef, mergedExpandedRowKeysRef, renderExpandRef, expandableRef, doUpdateExpandedRowKeys } = useExpand(props, treeMateRef);
+        const { handleTableBodyScroll, handleTableHeaderScroll, syncScrollState, setHeaderScrollLeft, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, leftFixedColumnsRef, rightFixedColumnsRef, fixedColumnLeftMapRef, fixedColumnRightMapRef } = useScroll(props, {
+            bodyWidthRef,
+            mainTableInstRef,
+            mergedCurrentPageRef
+        });
+        const { localeRef } = useLocale('DataTable');
+        const mergedTableLayoutRef = computed(() => {
+            // Layout
+            // virtual |descrete header | ellpisis => fixed
+            //    = virtual | maxHeight | ellpisis => fixed
+            if (props.virtualScroll ||
+                props.flexHeight ||
+                props.maxHeight !== undefined ||
+                hasEllipsisRef.value) {
+                return 'fixed';
+            }
+            return props.tableLayout;
+        });
+        provide(dataTableInjectionKey, {
+            props,
+            sizeRef: toRef(props, 'size'),
+            treeMateRef,
+            renderExpandIconRef: toRef(props, 'renderExpandIcon'),
+            loadingKeySetRef: ref(new Set()),
+            slots,
+            indentRef: toRef(props, 'indent'),
+            childTriggerColIndexRef,
+            bodyWidthRef,
+            componentId: createId(),
+            hoverKeyRef,
+            mergedClsPrefixRef,
+            mergedThemeRef: themeRef,
+            scrollXRef: computed(() => props.scrollX),
+            rowsRef,
+            colsRef,
+            paginatedDataRef,
+            leftActiveFixedColKeyRef,
+            leftActiveFixedChildrenColKeysRef,
+            rightActiveFixedColKeyRef,
+            rightActiveFixedChildrenColKeysRef,
+            leftFixedColumnsRef,
+            rightFixedColumnsRef,
+            fixedColumnLeftMapRef,
+            fixedColumnRightMapRef,
+            mergedCurrentPageRef,
+            someRowsCheckedRef,
+            allRowsCheckedRef,
+            mergedSortStateRef,
+            mergedFilterStateRef,
+            loadingRef: toRef(props, 'loading'),
+            rowClassNameRef: toRef(props, 'rowClassName'),
+            mergedCheckedRowKeySetRef,
+            mergedExpandedRowKeysRef,
+            mergedInderminateRowKeySetRef,
+            localeRef,
+            expandableRef,
+            stickyExpandedRowsRef,
+            rowKeyRef: toRef(props, 'rowKey'),
+            renderExpandRef,
+            summaryRef: toRef(props, 'summary'),
+            virtualScrollRef: toRef(props, 'virtualScroll'),
+            rowPropsRef: toRef(props, 'rowProps'),
+            stripedRef: toRef(props, 'striped'),
+            checkOptionsRef: computed(() => {
+                const { value: selectionColumn } = selectionColumnRef;
+                return selectionColumn === null || selectionColumn === void 0 ? void 0 : selectionColumn.options;
+            }),
+            rawPaginatedDataRef,
+            filterMenuCssVarsRef: computed(() => {
+                const { self: { actionDividerColor, actionPadding, actionButtonMargin } } = themeRef.value;
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                return {
+                    '--u-action-padding': actionPadding,
+                    '--u-action-button-margin': actionButtonMargin,
+                    '--u-action-divider-color': actionDividerColor
+                };
+            }),
+            onLoadRef: toRef(props, 'onLoad'),
+            mergedTableLayoutRef,
+            maxHeightRef: toRef(props, 'maxHeight'),
+            minHeightRef: toRef(props, 'minHeight'),
+            flexHeightRef: toRef(props, 'flexHeight'),
+            headerCheckboxDisabledRef,
+            paginationBehaviorOnFilterRef: toRef(props, 'paginationBehaviorOnFilter'),
+            summaryPlacementRef: toRef(props, 'summaryPlacement'),
+            scrollbarPropsRef: toRef(props, 'scrollbarProps'),
+            syncScrollState,
+            doUpdatePage,
+            doUpdateFilters,
+            getResizableWidth,
+            onUnstableColumnResize,
+            clearResizableWidth,
+            doUpdateResizableWidth,
+            deriveNextSorter,
+            doCheck,
+            doUncheck,
+            doCheckAll,
+            doUncheckAll,
+            doUpdateExpandedRowKeys,
+            handleTableHeaderScroll,
+            handleTableBodyScroll,
+            setHeaderScrollLeft,
+            renderCell: toRef(props, 'renderCell')
+        });
+        const exposedMethods = {
+            filter,
+            filters,
+            clearFilters,
+            clearSorter,
+            page,
+            sort,
+            clearFilter,
+            scrollTo: (arg0, arg1) => {
+                var _a;
+                (_a = mainTableInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
+            }
+        };
+        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, boxShadowAfter, boxShadowBefore, 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;
+            return {
+                '--u-th-height': thHeight,
+                '--u-td-height': tdHeight,
+                '--u-font-size': fontSize,
+                '--u-th-padding': thPadding,
+                '--u-td-padding': tdPadding,
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-border-radius': borderRadius,
+                '--u-line-height': lineHeight,
+                '--u-border-color': borderColor,
+                '--u-border-color-modal': borderColorModal,
+                '--u-border-color-popover': borderColorPopover,
+                '--u-th-color': thColor,
+                '--u-th-color-hover': thColorHover,
+                '--u-th-color-modal': thColorModal,
+                '--u-th-color-hover-modal': thColorHoverModal,
+                '--u-th-color-popover': thColorPopover,
+                '--u-th-color-hover-popover': thColorHoverPopover,
+                '--u-td-color': tdColor,
+                '--u-td-color-hover': tdColorHover,
+                '--u-td-color-modal': tdColorModal,
+                '--u-td-color-hover-modal': tdColorHoverModal,
+                '--u-td-color-popover': tdColorPopover,
+                '--u-td-color-hover-popover': tdColorHoverPopover,
+                '--u-th-text-color': thTextColor,
+                '--u-td-text-color': tdTextColor,
+                '--u-th-font-weight': thFontWeight,
+                '--u-th-button-color-hover': thButtonColorHover,
+                '--u-th-icon-color': thIconColor,
+                '--u-th-icon-color-active': thIconColorActive,
+                '--u-filter-size': filterSize,
+                '--u-pagination-margin': paginationMargin,
+                '--u-empty-padding': emptyPadding,
+                '--u-box-shadow-before': boxShadowBefore,
+                '--u-box-shadow-after': boxShadowAfter,
+                '--u-sorter-size': sorterSize,
+                '--u-resizable-container-size': resizableContainerSize,
+                '--u-resizable-size': resizableSize,
+                '--u-loading-size': loadingSize,
+                '--u-loading-color': loadingColor,
+                '--u-opacity-loading': opacityLoading,
+                '--u-td-opacity-disabled': opacityDisabled,
+                '--u-td-color-striped': tdColorStriped,
+                '--u-td-color-striped-modal': tdColorStripedModal,
+                '--u-td-color-striped-popover': tdColorStripedPopover
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('data-table', computed(() => props.size[0]), cssVarsRef, props)
+            : undefined;
+        const mergedShowPaginationRef = computed(() => {
+            if (!props.pagination)
+                return false;
+            if (props.paginateSinglePage)
+                return true;
+            const mergedPagination = mergedPaginationRef.value;
+            const { pageCount } = mergedPagination;
+            if (pageCount !== undefined)
+                return pageCount > 1;
+            return (mergedPagination.itemCount &&
+                mergedPagination.pageSize &&
+                mergedPagination.itemCount > mergedPagination.pageSize);
+        });
+        return Object.assign({ mainTableInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, paginatedData: paginatedDataRef, mergedBordered: mergedBorderedRef, mergedBottomBordered: mergedBottomBorderedRef, mergedPagination: mergedPaginationRef, mergedShowPagination: mergedShowPaginationRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
+    },
+    render() {
+        const { mergedClsPrefix, themeClass, onRender, $slots, spinProps } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h("div", { class: [
+                `${mergedClsPrefix}-data-table`,
+                themeClass,
+                {
+                    [`${mergedClsPrefix}-data-table--bordered`]: this.mergedBordered,
+                    [`${mergedClsPrefix}-data-table--bottom-bordered`]: this.mergedBottomBordered,
+                    [`${mergedClsPrefix}-data-table--single-line`]: this.singleLine,
+                    [`${mergedClsPrefix}-data-table--single-column`]: this.singleColumn,
+                    [`${mergedClsPrefix}-data-table--loading`]: this.loading,
+                    [`${mergedClsPrefix}-data-table--flex-height`]: this.flexHeight
+                }
+            ], style: this.cssVars },
+            h("div", { class: `${mergedClsPrefix}-data-table-wrapper` },
+                h(MainTable, { ref: "mainTableInstRef" })),
+            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: () => {
+                    return this.loading ? (h("div", { class: `${mergedClsPrefix}-data-table-loading-wrapper` }, resolveSlot($slots.loading, () => [
+                        h(UBaseLoading, Object.assign({ clsPrefix: mergedClsPrefix, strokeWidth: 20 }, spinProps))
+                    ]))) : null;
+                }
+            })));
+    }
+});