@uzum-tech/ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,56 @@
+import { useTheme } from '../../_mixins';
+import { createInjectionKey } from '../../_utils';
+export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), { onUnstableColumnResize: Function, pagination: {
+        type: [Object, Boolean],
+        default: false
+    }, paginateSinglePage: {
+        type: Boolean,
+        default: true
+    }, minHeight: [Number, String], maxHeight: [Number, String], 
+    // Use any type as row data to make prop data acceptable
+    columns: {
+        type: Array,
+        default: () => []
+    }, rowClassName: [String, Function], rowProps: Function, rowKey: Function, summary: [Function], data: {
+        type: Array,
+        default: () => []
+    }, loading: Boolean, bordered: {
+        type: Boolean,
+        default: undefined
+    }, bottomBordered: {
+        type: Boolean,
+        default: undefined
+    }, striped: Boolean, scrollX: [Number, String], defaultCheckedRowKeys: {
+        type: Array,
+        default: () => []
+    }, checkedRowKeys: Array, singleLine: {
+        type: Boolean,
+        default: true
+    }, singleColumn: Boolean, size: {
+        type: String,
+        default: 'medium'
+    }, remote: Boolean, defaultExpandedRowKeys: {
+        type: Array,
+        default: []
+    }, defaultExpandAll: Boolean, expandedRowKeys: Array, stickyExpandedRows: Boolean, virtualScroll: Boolean, tableLayout: {
+        type: String,
+        default: 'auto'
+    }, allowCheckingNotLoaded: Boolean, cascade: {
+        type: Boolean,
+        default: true
+    }, childrenKey: {
+        type: String,
+        default: 'children'
+    }, indent: {
+        type: Number,
+        default: 16
+    }, flexHeight: Boolean, summaryPlacement: {
+        type: String,
+        default: 'bottom'
+    }, paginationBehaviorOnFilter: {
+        type: String,
+        default: 'current'
+    }, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: { type: Object, default: {} }, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
+    // deprecated
+    onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
+export const dataTableInjectionKey = createInjectionKey('u-data-table');

package/es/data-table/src/styles/index.cssr.d.ts

@@ -0,0 +1,3 @@
+import type { CNode } from 'css-render';
+declare const _default: CNode;
+export default _default;

package/es/data-table/src/styles/index.cssr.js

@@ -0,0 +1,439 @@
+import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr';
+import { iconSwitchTransition } from '../../../_styles/transitions/icon-switch.cssr';
+import { c, cB, cE, cM, cNotM, insideModal, insidePopover } from '../../../_utils/cssr';
+const fixedColumnStyle = createFixedColumnStyle();
+// vars:
+// --u-font-size
+// --u-th-padding
+// --u-td-padding
+// --u-bezier
+// --u-border-radius
+// --u-line-height
+// --u-border-color
+// --u-border-color-modal
+// --u-border-color-popover
+// --u-th-color
+// --u-th-color-hover
+// --u-th-color-modal
+// --u-th-color-hover-modal
+// --u-th-color-popover
+// --u-th-color-hover-popover
+// --u-td-color
+// --u-td-color-hover
+// --u-td-color-modal
+// --u-td-color-hover-modal
+// --u-td-color-popover
+// --u-td-color-hover-popover
+// --u-th-text-color
+// --u-td-text-color
+// --u-th-font-weight
+// --u-th-button-color-hover
+// --u-th-icon-color
+// --u-th-icon-color-active
+// --u-filter-size
+// --u-action-divider-color
+// --u-action-padding
+// --u-action-button-margin
+// --u-pagination-margin
+// --u-empty-padding
+// --u-sorter-size
+// --u-resizable-container-size
+// --u-resizable-size
+// --u-loading-size
+// --u-loading-color
+// --u-opacity-loading
+// --u-box-shadow-before used in Body.tsx
+// --u-box-shadow-after used in Body.tsx
+// --indent-offset for ellipsis & expand trigger
+export default c([cB('data-table', `
+ width: 100%;
+ font-size: var(--u-font-size);
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ --u-merged-th-color: var(--u-th-color);
+ --u-merged-td-color: var(--u-td-color);
+ --u-merged-border-color: var(--u-border-color);
+ --u-merged-th-color-hover: var(--u-th-color-hover);
+ --u-merged-td-color-hover: var(--u-td-color-hover);
+ --u-merged-td-color-striped: var(--u-td-color-striped);
+ `, [cB('data-table-wrapper', `
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ `), cM('flex-height', [c('>', [cB('data-table-wrapper', [c('>', [cB('data-table-base-table', `
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ `, [c('>', [cB('data-table-base-table-body', 'flex-basis: 0;', [
+// last-child means there is no empty icon
+// body is a scrollbar, we need to override height 100%
+c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('data-table-loading-wrapper', `
+ color: var(--u-loading-color);
+ font-size: var(--u-loading-size);
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ transition: color .3s var(--u-bezier);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ `, [fadeInScaleUpTransition({
+  originalTransform: 'translateX(-50%) translateY(-50%)'
+})])]), cB('data-table-expand-placeholder', `
+ margin-right: 8px;
+ display: inline-block;
+ width: 16px;
+ height: 1px;
+ `), cB('data-table-indent', `
+ display: inline-block;
+ height: 1px;
+ `), cB('data-table-expand-trigger', `
+ display: inline-flex;
+ margin-right: 8px;
+ cursor: pointer;
+ font-size: 16px;
+ vertical-align: -0.2em;
+ position: relative;
+ width: 16px;
+ height: 16px;
+ color: var(--u-td-text-color);
+ transition: color .3s var(--u-bezier);
+ `, [cM('expanded', [cB('icon', 'transform: rotate(90deg);', [iconSwitchTransition({
+  originalTransform: 'rotate(90deg)'
+})]), cB('base-icon', 'transform: rotate(90deg);', [iconSwitchTransition({
+  originalTransform: 'rotate(90deg)'
+})])]), cB('base-loading', `
+ color: var(--u-loading-color);
+ transition: color .3s var(--u-bezier);
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ `, [iconSwitchTransition()]), cB('icon', `
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ `, [iconSwitchTransition()]), cB('base-icon', `
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ `, [iconSwitchTransition()])]), cB('data-table-thead', `
+ transition: background-color .3s var(--u-bezier);
+ background-color: var(--u-merged-th-color);
+ `), cB('data-table-tr', `
+ box-sizing: border-box;
+ background-clip: padding-box;
+ transition: background-color .3s var(--u-bezier);
+ `, [cB('data-table-expand', `
+ position: sticky;
+ left: 0;
+ overflow: hidden;
+ margin: calc(var(--u-th-padding) * -1);
+ padding: var(--u-th-padding);
+ box-sizing: border-box;
+ `), cM('disabled', null, [cB('data-table-td', 'color: var(--u-td-opacity-disabled);')]), cM('striped', 'background-color: var(--u-merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--u-merged-td-color-striped);')]), cNotM('summary', [c('&:hover', 'background-color: var(--u-merged-td-color-hover);', [c('>', [cB('data-table-td', 'background-color: var(--u-merged-td-color-hover);')])])])]), cB('data-table-th', `
+ padding: var(--u-th-padding);
+ position: relative;
+ height: var(--u-th-height);
+ text-align: start;
+ box-sizing: border-box;
+ background-color: var(--u-merged-th-color);
+ border-color: var(--u-merged-border-color);
+ border-bottom: 1px solid var(--u-merged-border-color);
+ color: var(--u-th-text-color);
+ transition:
+ border-color .3s var(--u-bezier),
+ color .3s var(--u-bezier),
+ background-color .3s var(--u-bezier);
+ font-weight: var(--u-th-font-weight);
+ `, [cM('filterable', `
+ padding-right: 36px;
+ `, [cM('sortable', `
+ padding-right: calc(var(--u-th-padding) + 36px);
+ `)]), fixedColumnStyle, cM('selection', `
+ text-align: center;
+ line-height: 0;
+ z-index: 3;
+ `), cE('title-wrapper', `
+ display: flex;
+ align-items: center;
+ flex-wrap: nowrap;
+ max-width: 100%;
+ `, [cE('title', `
+ flex: 1;
+ min-width: 0;
+ `)]), cE('ellipsis', `
+ display: inline-block;
+ vertical-align: bottom;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ max-width: 100%;
+ `), c('&:hover', `
+ color: var(--u-th-icon-color-active);
+ `), cM('hover', `
+ background-color: var(--u-merged-th-color-hover);
+ color: var(--u-th-icon-color-active);
+ `), cM('sortable', `
+ cursor: pointer;
+ `, [cE('ellipsis', `
+ max-width: calc(100% - 18px);
+ `), c('&:hover', `
+ background-color: var(--u-merged-th-color-hover);
+ `)]), cB('data-table-sorter', `
+ height: var(--u-sorter-size);
+ width: var(--u-sorter-size);
+ margin-left: 4px;
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ vertical-align: -0.2em;
+ color: var(--u-th-icon-color);
+ transition: color .3s var(--u-bezier);
+ `, [cB('base-icon', `
+ transition: transform .3s var(--u-bezier); 
+ font-size: var(--u-sorter-size)
+ `), cM('desc', [cB('base-icon', `
+ transform: rotate(0deg);
+ `)]), cM('asc', [cB('base-icon', `
+ transform: rotate(-180deg);
+ `)]), cM('asc, desc', `
+ color: var(--u-th-icon-color-active);
+ `)]), cB('data-table-resize-button', `
+ width: var(--u-resizable-container-size);
+ position: absolute;
+ top: 0;
+ right: calc(var(--u-resizable-container-size) / 2);
+ bottom: 0;
+ cursor: col-resize;
+ user-select: none;
+ `, [c('&::after', `
+ width: var(--u-resizable-size);
+ height: 50%;
+ position: absolute;
+ top: 50%;
+ left: calc(var(--u-resizable-container-size) / 2);
+ bottom: 0;
+ background-color: var(--u-merged-border-color);
+ transform: translateY(-50%);
+ transition: background-color .3s var(--u-bezier);
+ z-index: 1;
+ content: '';
+ `), cM('active', [c('&::after', ` 
+ background-color: var(--u-th-icon-color-active);
+ `)]), c('&:hover::after', `
+ background-color: var(--u-th-icon-color-active);
+ `)]), cB('data-table-filter', `
+ position: absolute;
+ z-index: auto;
+ right: 0;
+ width: 36px;
+ top: 0;
+ bottom: 0;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition:
+ background-color .3s var(--u-bezier),
+ color .3s var(--u-bezier);
+ font-size: var(--u-filter-size);
+ color: var(--u-th-icon-color);
+ `, [c('&:hover', `
+ background-color: var(--u-th-button-color-hover);
+ `), cM('show', `
+ background-color: var(--u-th-button-color-hover);
+ `), cM('active', `
+ background-color: var(--u-th-button-color-hover);
+ color: var(--u-th-icon-color-active);
+ `)])]), cB('data-table-td', `
+ padding: var(--u-td-padding);
+ text-align: start;
+ box-sizing: border-box;
+ border: none;
+ height: var(--u-td-height);
+ background-color: var(--u-merged-td-color);
+ color: var(--u-td-text-color);
+ border-bottom: 1px solid var(--u-merged-border-color);
+ transition:
+ box-shadow .3s var(--u-bezier),
+ background-color .3s var(--u-bezier),
+ border-color .3s var(--u-bezier),
+ color .3s var(--u-bezier);
+ `, [cM('expand', [cB('data-table-expand-trigger', `
+ margin-right: 0;
+ `)]), cM('last-row', `
+ border-bottom: 0 solid var(--u-merged-border-color);
+ `, [
+// make sure there is no overlap between bottom border and
+// fixed column box shadow
+c('&::after', `
+ bottom: 0 !important;
+ `), c('&::before', `
+ bottom: 0 !important;
+ `)]), cM('summary', `
+ background-color: var(--u-merged-th-color);
+ `), cM('hover', `
+ background-color: var(--u-merged-td-color-hover);
+ `), cE('ellipsis', `
+ display: inline-block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ max-width: 100%;
+ vertical-align: bottom;
+ max-width: calc(100% - var(--indent-offset, -1.5) * 16px - 24px);
+ `), cM('selection, expand', `
+ text-align: center;
+ line-height: 0;
+ `), fixedColumnStyle]), cB('data-table-empty', `
+ box-sizing: border-box;
+ padding: var(--u-empty-padding);
+ flex-grow: 1;
+ flex-shrink: 0;
+ opacity: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: opacity .3s var(--u-bezier);
+ `, [cM('hide', `
+ opacity: 0;
+ `)]), cE('pagination', `
+ margin: var(--u-pagination-margin);
+ display: flex;
+ justify-content: flex-end;
+ `), cB('data-table-wrapper', `
+ position: relative;
+ opacity: 1;
+ transition: opacity .3s var(--u-bezier), border-color .3s var(--u-bezier);
+ border-top-left-radius: var(--u-border-radius);
+ border-top-right-radius: var(--u-border-radius);
+ line-height: var(--u-line-height);
+ `), cM('loading', [cB('data-table-wrapper', `
+ opacity: var(--u-opacity-loading);
+ pointer-events: none;
+ `)]), cM('single-column', [cB('data-table-td', `
+ border-bottom: 0 solid var(--u-merged-border-color);
+ `, [c('&::after, &::before', `
+ bottom: 0 !important;
+ `)])]), cNotM('single-line', [cB('data-table-th', `
+ border-right: 1px solid var(--u-merged-border-color);
+ `, [cM('last', `
+ border-right: 0 solid var(--u-merged-border-color);
+ `)]), cB('data-table-td', `
+ border-right: 1px solid var(--u-merged-border-color);
+ `, [cM('last-col', `
+ border-right: 0 solid var(--u-merged-border-color);
+ `)])]), cM('bordered', [cB('data-table-wrapper', `
+ border: 1px solid var(--u-merged-border-color);
+ border-bottom-left-radius: var(--u-border-radius);
+ border-bottom-right-radius: var(--u-border-radius);
+ overflow: hidden;
+ `)]), cB('data-table-base-table', [cM('transition-disabled', [cB('data-table-th', [c('&::after, &::before', 'transition: none;')]), cB('data-table-td', [c('&::after, &::before', 'transition: none;')])])]), cM('bottom-bordered', [cB('data-table-td', [cM('last-row', `
+ border-bottom: 1px solid var(--u-merged-border-color);
+ `)])]), cB('data-table-table', `
+ font-variant-numeric: tabular-nums;
+ width: 100%;
+ word-break: keep-all;
+ transition: background-color .3s var(--u-bezier);
+ border-collapse: separate;
+ border-spacing: 0;
+ background-color: var(--u-merged-td-color);
+ `), cB('data-table-base-table-header', `
+ border-top-left-radius: calc(var(--u-border-radius) - 1px);
+ border-top-right-radius: calc(var(--u-border-radius) - 1px);
+ z-index: 3;
+ overflow: scroll;
+ flex-shrink: 0;
+ transition: border-color .3s var(--u-bezier);
+ scrollbar-width: none;
+ `, [c('&::-webkit-scrollbar', `
+ width: 0;
+ height: 0;
+ `)]), cB('data-table-check-extra', `
+ transition: color .3s var(--u-bezier);
+ color: var(--u-th-icon-color);
+ position: absolute;
+ font-size: 14px;
+ right: -4px;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 1;
+ `)]), cB('data-table-filter-menu', [cB('scrollbar', `
+ max-height: 240px;
+ `), cE('group', `
+ display: flex;
+ flex-direction: column;
+ padding: 12px 12px 0 12px;
+ `, [cB('checkbox', `
+ margin-bottom: 12px;
+ margin-right: 0;
+ `), cB('radio', `
+ margin-bottom: 12px;
+ margin-right: 0;
+ `)]), cE('action', `
+ padding: var(--u-action-padding);
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: space-evenly;
+ border-top: 1px solid var(--u-action-divider-color);
+ `, [cB('button', [c('&:not(:last-child)', `
+ margin: var(--u-action-button-margin);
+ `), c('&:last-child', `
+ margin-right: 0;
+ `)])]), cB('divider', `
+ margin: 0 !important;
+ `)]), insideModal(cB('data-table', `
+ --u-merged-th-color: var(--u-th-color-modal);
+ --u-merged-td-color: var(--u-td-color-modal);
+ --u-merged-border-color: var(--u-border-color-modal);
+ --u-merged-th-color-hover: var(--u-th-color-hover-modal);
+ --u-merged-td-color-hover: var(--u-td-color-hover-modal);
+ --u-merged-td-color-striped: var(--u-td-color-striped-modal);
+ `)), insidePopover(cB('data-table', `
+ --u-merged-th-color: var(--u-th-color-popover);
+ --u-merged-td-color: var(--u-td-color-popover);
+ --u-merged-border-color: var(--u-border-color-popover);
+ --u-merged-th-color-hover: var(--u-th-color-hover-popover);
+ --u-merged-td-color-hover: var(--u-td-color-hover-popover);
+ --u-merged-td-color-striped: var(--u-td-color-striped-popover);
+ `))]);
+function createFixedColumnStyle() {
+  return [cM('fixed-left', `
+ left: 0;
+ position: sticky;
+ z-index: 2;
+ `, [c('&::after', `
+ pointer-events: none;
+ content: "";
+ width: 36px;
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ bottom: -1px;
+ transition: box-shadow .2s var(--u-bezier);
+ right: -36px;
+ `)]), cM('fixed-right', `
+ right: 0;
+ position: sticky;
+ z-index: 1;
+ `, [c('&::before', `
+ pointer-events: none;
+ content: "";
+ width: 36px;
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ bottom: -1px;
+ transition: box-shadow .2s var(--u-bezier);
+ left: -36px;
+ `)])];
+}

package/es/data-table/src/use-check.d.ts

@@ -0,0 +1,20 @@
+import { type ComputedRef } from 'vue';
+import type { DataTableSetupProps, RowKey, RowData, TableSelectionColumn, InternalRowData, TmNode } from './interface';
+import type { TreeMate } from 'treemate';
+export declare function useCheck(props: DataTableSetupProps, data: {
+    selectionColumnRef: ComputedRef<TableSelectionColumn | null>;
+    paginatedDataRef: ComputedRef<TmNode[]>;
+    treeMateRef: ComputedRef<TreeMate<InternalRowData>>;
+}): {
+    mergedCheckedRowKeySetRef: ComputedRef<Set<import("treemate").Key>>;
+    mergedCheckedRowKeysRef: ComputedRef<import("treemate").Key[]>;
+    mergedInderminateRowKeySetRef: ComputedRef<Set<import("treemate").Key>>;
+    someRowsCheckedRef: ComputedRef<boolean>;
+    allRowsCheckedRef: ComputedRef<boolean>;
+    headerCheckboxDisabledRef: ComputedRef<boolean>;
+    doUpdateCheckedRowKeys: (keys: RowKey[], row: RowData | undefined, action: 'check' | 'uncheck' | 'checkAll' | 'uncheckAll') => void;
+    doCheckAll: (checkWholeTable?: boolean) => void;
+    doUncheckAll: (checkWholeTable?: boolean) => void;
+    doCheck: (rowKey: RowKey | RowKey[], single: boolean | undefined, rowInfo: RowData) => void;
+    doUncheck: (rowKey: RowKey | RowKey[], rowInfo: RowData) => void;
+};

package/es/data-table/src/use-check.js

@@ -0,0 +1,149 @@
+import { computed, ref } from 'vue';
+import { call } from '../../_utils';
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function useCheck(props, data) {
+    const { paginatedDataRef, treeMateRef, selectionColumnRef } = data;
+    const uncontrolledCheckedRowKeysRef = ref(props.defaultCheckedRowKeys);
+    const mergedCheckState = computed(() => {
+        var _a;
+        const { checkedRowKeys } = props;
+        const sourceKeys = checkedRowKeys === undefined
+            ? uncontrolledCheckedRowKeysRef.value
+            : checkedRowKeys;
+        if (((_a = selectionColumnRef.value) === null || _a === void 0 ? void 0 : _a.multiple) === false) {
+            return {
+                checkedKeys: sourceKeys.slice(0, 1),
+                indeterminateKeys: []
+            };
+        }
+        return treeMateRef.value.getCheckedKeys(sourceKeys, {
+            cascade: props.cascade,
+            allowNotLoaded: props.allowCheckingNotLoaded
+        });
+    });
+    const mergedCheckedRowKeysRef = computed(() => mergedCheckState.value.checkedKeys);
+    const mergedInderminateRowKeysRef = computed(() => mergedCheckState.value.indeterminateKeys);
+    const mergedCheckedRowKeySetRef = computed(() => {
+        return new Set(mergedCheckedRowKeysRef.value);
+    });
+    const mergedInderminateRowKeySetRef = computed(() => {
+        return new Set(mergedInderminateRowKeysRef.value);
+    });
+    const countOfCurrentPageCheckedRowsRef = computed(() => {
+        const { value: mergedCheckedRowKeySet } = mergedCheckedRowKeySetRef;
+        return paginatedDataRef.value.reduce((total, tmNode) => {
+            const { key, disabled } = tmNode;
+            return total + (!disabled && mergedCheckedRowKeySet.has(key) ? 1 : 0);
+        }, 0);
+    });
+    const countOfCurrentPageDisabledRowsRef = computed(() => {
+        return paginatedDataRef.value.filter((item) => item.disabled).length;
+    });
+    const someRowsCheckedRef = computed(() => {
+        const { length } = paginatedDataRef.value;
+        const { value: mergedInderminateRowKeySet } = mergedInderminateRowKeySetRef;
+        return ((countOfCurrentPageCheckedRowsRef.value > 0 &&
+            countOfCurrentPageCheckedRowsRef.value <
+                length - countOfCurrentPageDisabledRowsRef.value) ||
+            paginatedDataRef.value.some((rowData) => mergedInderminateRowKeySet.has(rowData.key)));
+    });
+    const allRowsCheckedRef = computed(() => {
+        const { length } = paginatedDataRef.value;
+        return (countOfCurrentPageCheckedRowsRef.value !== 0 &&
+            countOfCurrentPageCheckedRowsRef.value ===
+                length - countOfCurrentPageDisabledRowsRef.value);
+    });
+    const headerCheckboxDisabledRef = computed(() => {
+        return paginatedDataRef.value.length === 0;
+    });
+    function doUpdateCheckedRowKeys(keys, row, action) {
+        const { 'onUpdate:checkedRowKeys': _onUpdateCheckedRowKeys, onUpdateCheckedRowKeys, onCheckedRowKeysChange } = props;
+        const rows = [];
+        const { value: { getNode } } = treeMateRef;
+        keys.forEach((key) => {
+            var _a;
+            const row = (_a = getNode(key)) === null || _a === void 0 ? void 0 : _a.rawNode;
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            rows.push(row);
+        });
+        if (_onUpdateCheckedRowKeys) {
+            call(_onUpdateCheckedRowKeys, keys, rows, { row, action });
+        }
+        if (onUpdateCheckedRowKeys) {
+            call(onUpdateCheckedRowKeys, keys, rows, { row, action });
+        }
+        if (onCheckedRowKeysChange) {
+            call(onCheckedRowKeysChange, keys, rows, { row, action });
+        }
+        uncontrolledCheckedRowKeysRef.value = keys;
+    }
+    function doCheck(rowKey, single = false, rowInfo) {
+        if (props.loading)
+            return;
+        if (single) {
+            doUpdateCheckedRowKeys(Array.isArray(rowKey) ? rowKey.slice(0, 1) : [rowKey], rowInfo, 'check');
+            return;
+        }
+        doUpdateCheckedRowKeys(treeMateRef.value.check(rowKey, mergedCheckedRowKeysRef.value, {
+            cascade: props.cascade,
+            allowNotLoaded: props.allowCheckingNotLoaded
+        }).checkedKeys, rowInfo, 'check');
+    }
+    function doUncheck(rowKey, rowInfo) {
+        if (props.loading)
+            return;
+        doUpdateCheckedRowKeys(treeMateRef.value.uncheck(rowKey, mergedCheckedRowKeysRef.value, {
+            cascade: props.cascade,
+            allowNotLoaded: props.allowCheckingNotLoaded
+        }).checkedKeys, rowInfo, 'uncheck');
+    }
+    function doCheckAll(checkWholeTable = false) {
+        const { value: column } = selectionColumnRef;
+        if (!column || props.loading)
+            return;
+        const rowKeysToCheck = [];
+        (checkWholeTable
+            ? treeMateRef.value.treeNodes
+            : paginatedDataRef.value).forEach((tmNode) => {
+            if (!tmNode.disabled) {
+                rowKeysToCheck.push(tmNode.key);
+            }
+        });
+        // alway cascade, to emit correct row keys
+        doUpdateCheckedRowKeys(treeMateRef.value.check(rowKeysToCheck, mergedCheckedRowKeysRef.value, {
+            cascade: true,
+            allowNotLoaded: props.allowCheckingNotLoaded
+        }).checkedKeys, undefined, 'checkAll');
+    }
+    function doUncheckAll(checkWholeTable = false) {
+        const { value: column } = selectionColumnRef;
+        if (!column || props.loading)
+            return;
+        const rowKeysToUncheck = [];
+        (checkWholeTable
+            ? treeMateRef.value.treeNodes
+            : paginatedDataRef.value).forEach((tmNode) => {
+            if (!tmNode.disabled) {
+                rowKeysToUncheck.push(tmNode.key);
+            }
+        });
+        // alway cascade, to emit correct row keys
+        doUpdateCheckedRowKeys(treeMateRef.value.uncheck(rowKeysToUncheck, mergedCheckedRowKeysRef.value, {
+            cascade: true,
+            allowNotLoaded: props.allowCheckingNotLoaded
+        }).checkedKeys, undefined, 'uncheckAll');
+    }
+    return {
+        mergedCheckedRowKeySetRef,
+        mergedCheckedRowKeysRef,
+        mergedInderminateRowKeySetRef,
+        someRowsCheckedRef,
+        allRowsCheckedRef,
+        headerCheckboxDisabledRef,
+        doUpdateCheckedRowKeys,
+        doCheckAll,
+        doUncheckAll,
+        doCheck,
+        doUncheck
+    };
+}

package/es/data-table/src/use-expand.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'vue';
+import type { TreeMate } from 'treemate';
+import type { Expandable, InternalRowData, RowKey, DataTableSetupProps } from './interface';
+export declare function useExpand(props: DataTableSetupProps, treeMateRef: Ref<TreeMate<InternalRowData, InternalRowData, InternalRowData>>): {
+    stickyExpandedRowsRef: Ref<boolean>;
+    mergedExpandedRowKeysRef: import("vue").ComputedRef<import("treemate").Key[]>;
+    renderExpandRef: import("vue").ComputedRef<import("./interface").RenderExpand<any> | undefined>;
+    expandableRef: import("vue").ComputedRef<Expandable<any> | undefined>;
+    doUpdateExpandedRowKeys: (expandedKeys: RowKey[]) => void;
+};