@class-kit/vue 0.1.0

package/dist/components/virtual-table.js

@@ -0,0 +1,694 @@
+import { defineComponent, ref, watch, h, nextTick, onMounted, onBeforeUnmount, Teleport } from 'vue';
+import { TableController, VirtualListController, getClassComponentsLocale, configureClassComponents } from '@class-kit/core';
+
+const classIconPaths = {
+    chevronDown: ["M6 9l6 6 6-6"],
+    chevronLeft: ["M15 18l-6-6 6-6"],
+    chevronRight: ["M9 18l6-6-6-6"],
+    chevronUp: ["M18 15l-6-6-6 6"],
+    check: ["M20 6 9 17l-5-5"],
+    settings: [
+        "M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z",
+        "M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2.18 2.18 0 0 1-3.08 3.08l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1 1.62V21a2.2 2.2 0 0 1-4.4 0v-.06a1.8 1.8 0 0 0-1-1.62 1.8 1.8 0 0 0-1.98.36l-.04.04A2.18 2.18 0 0 1 3.2 16.64l.04-.04A1.8 1.8 0 0 0 3.6 14.6a1.8 1.8 0 0 0-1.62-1H2a2.2 2.2 0 0 1 0-4.4h.06a1.8 1.8 0 0 0 1.62-1 1.8 1.8 0 0 0-.36-1.98l-.04-.04A2.18 2.18 0 0 1 6.36 3.1l.04.04a1.8 1.8 0 0 0 1.98.36h.08A1.8 1.8 0 0 0 9.4 1.88V1.8a2.2 2.2 0 0 1 4.4 0v.06a1.8 1.8 0 0 0 1 1.62 1.8 1.8 0 0 0 1.98-.36l.04-.04A2.18 2.18 0 0 1 19.9 6.16l-.04.04a1.8 1.8 0 0 0-.36 1.98v.08a1.8 1.8 0 0 0 1.62.94h.08a2.2 2.2 0 0 1 0 4.4h-.06A1.8 1.8 0 0 0 19.4 15Z",
+    ],
+    star: [
+        "M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.77 5.82 21 7 14.13l-5-4.87 6.91-1L12 2Z",
+    ],
+    x: ["M18 6 6 18", "M6 6l12 12"],
+};
+function classIcon(name, className = "cc-icon") {
+    return h("svg", {
+        "aria-hidden": "true",
+        class: className,
+        fill: name === "star" ? "currentColor" : "none",
+        focusable: "false",
+        viewBox: "0 0 24 24",
+    }, classIconPaths[name].map((d) => h("path", {
+        d,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": name === "star" ? 0 : 2,
+        stroke: "currentColor",
+    })));
+}
+function resolveClassKitThemeName(theme) {
+    if (typeof theme === "string")
+        return theme;
+    return theme?.name ?? "minimal";
+}
+defineComponent({
+    name: "ClassConfigProvider",
+    props: {
+        class: {
+            type: String,
+            default: "",
+        },
+        locale: {
+            type: Object,
+            default: undefined,
+        },
+        style: {
+            type: [String, Object, Array],
+            default: undefined,
+        },
+        theme: {
+            type: [String, Object],
+            default: "minimal",
+        },
+    },
+    setup(props, { slots }) {
+        const version = ref(0);
+        const applyConfig = () => {
+            configureClassComponents({
+                locale: props.locale,
+                theme: props.theme,
+            });
+            version.value += 1;
+        };
+        watch(() => [props.locale, props.theme], applyConfig, {
+            deep: true,
+            immediate: true,
+        });
+        return () => h("div", {
+            class: ["cc-config-provider", props.class].filter(Boolean),
+            "data-cc-theme": resolveClassKitThemeName(props.theme),
+            style: props.style,
+        }, [
+            h("div", { key: version.value, class: "cc-config-provider__content" }, slots.default?.()),
+        ]);
+    },
+});
+function renderDefaultLoadingIndicator() {
+    return h("svg", {
+        class: "cc-loading__bolt",
+        focusable: "false",
+        viewBox: "0 0 96 96",
+    }, [
+        h("ellipse", {
+            class: "cc-loading__bolt-shadow",
+            cx: "51",
+            cy: "74",
+            rx: "28",
+            ry: "8",
+        }),
+        h("path", {
+            class: "cc-loading__bolt-side",
+            d: "M54 8 26 48h20L34 82l39-46H51L65 8Z",
+        }),
+        h("path", {
+            class: "cc-loading__bolt-face",
+            d: "M48 6 20 46h20L28 80l39-46H45L59 6Z",
+        }),
+        h("path", {
+            class: "cc-loading__bolt-highlight",
+            d: "M48 14 31 39h17L39 62l18-24H43l10-24Z",
+        }),
+    ]);
+}
+const ClassLoading = /*#__PURE__*/ defineComponent({
+    name: "ClassLoading",
+    props: {
+        className: String,
+        text: {
+            type: String,
+            default: () => getClassComponentsLocale().loadingText,
+        },
+    },
+    setup(props, { attrs, slots }) {
+        return () => h("div", {
+            ...attrs,
+            "aria-live": "polite",
+            class: ["cc-loading", props.className],
+            role: "status",
+        }, [
+            h("span", { "aria-hidden": "true", class: "cc-loading__indicator" }, slots.indicator?.() ?? renderDefaultLoadingIndicator()),
+            props.text
+                ? h("span", { class: "cc-loading__text" }, props.text)
+                : null,
+        ]);
+    },
+});
+function renderDefaultEmptyIcon() {
+    return h("svg", {
+        class: "cc-empty__illustration",
+        focusable: "false",
+        viewBox: "0 0 96 96",
+    }, [
+        h("ellipse", {
+            class: "cc-empty__illustration-shadow",
+            cx: "48",
+            cy: "76",
+            rx: "31",
+            ry: "8",
+        }),
+        h("path", {
+            class: "cc-empty__tray-back",
+            d: "M24 48h48l9 18H15l9-18Z",
+        }),
+        h("path", {
+            class: "cc-empty__tray-front",
+            d: "M15 66h66l-8 16H23l-8-16Z",
+        }),
+        h("path", {
+            class: "cc-empty__tray-lip",
+            d: "M27 58h42",
+        }),
+        h("path", {
+            class: "cc-empty__tray-glow",
+            d: "M32 70h32",
+        }),
+        h("path", {
+            class: "cc-empty__mini-bolt-side",
+            d: "M54 10 36 38h13l-7 26 27-36H55l9-18Z",
+        }),
+        h("path", {
+            class: "cc-empty__mini-bolt-face",
+            d: "M49 8 31 36h13l-7 26 27-36H50l9-18Z",
+        }),
+        h("path", {
+            class: "cc-empty__mini-bolt-highlight",
+            d: "M49 16 39 32h10l-5 15 11-17h-9l7-14Z",
+        }),
+        h("path", {
+            class: "cc-empty__spark",
+            d: "M23 32h8M27 28v8",
+        }),
+        h("path", {
+            class: "cc-empty__spark cc-empty__spark--small",
+            d: "M71 44h6M74 41v6",
+        }),
+    ]);
+}
+const ClassEmpty = /*#__PURE__*/ defineComponent({
+    name: "ClassEmpty",
+    props: {
+        className: String,
+        description: {
+            type: String,
+            default: () => getClassComponentsLocale().emptyText,
+        },
+    },
+    setup(props, { attrs, slots }) {
+        return () => h("div", { ...attrs, class: ["cc-empty", props.className], role: "status" }, [
+            h("span", { "aria-hidden": "true", class: "cc-empty__icon" }, slots.icon?.() ?? renderDefaultEmptyIcon()),
+            props.description
+                ? h("span", { class: "cc-empty__description" }, props.description)
+                : null,
+        ]);
+    },
+});
+const ClassTable = /*#__PURE__*/ defineComponent({
+    name: "ClassTable",
+    props: {
+        columns: {
+            type: Array,
+            required: true,
+        },
+        dataSource: {
+            type: Array,
+            default: () => [],
+        },
+        emptyText: {
+            type: String,
+            default: () => getClassComponentsLocale().tableEmptyText,
+        },
+        loading: Boolean,
+        loadingCoverHeader: Boolean,
+        loadingText: {
+            type: String,
+            default: () => getClassComponentsLocale().tableLoadingText,
+        },
+        overscan: { type: Number, default: 6 },
+        rowSelection: Boolean,
+        rowHeight: { type: Number, default: 44 },
+        selectedKeys: {
+            type: Array,
+            default: () => [],
+        },
+        columnSettingsSelectedIcon: {
+            type: null,
+            default: () => classIcon("check"),
+        },
+        settingsIcon: {
+            type: null,
+            default: () => classIcon("settings"),
+        },
+        virtual: Boolean,
+        virtualHeight: { type: Number, default: 320 },
+        className: { type: String, default: "cc-table" },
+    },
+    emits: ["selectionChange"],
+    setup(props, { attrs, slots, emit }) {
+        const rootRef = ref(null);
+        const bodyRef = ref(null);
+        const settingsRef = ref(null);
+        const settingsButtonRef = ref(null);
+        const settingsMenuRef = ref(null);
+        const containerWidth = ref(0);
+        const controller = new TableController({
+            columns: props.columns,
+            containerWidth: 0,
+            rows: props.dataSource,
+            selectedKeys: props.selectedKeys,
+        });
+        const virtualController = new VirtualListController({
+            count: props.dataSource.length,
+            estimateSize: props.rowHeight,
+            overscan: props.overscan,
+        });
+        const state = ref(controller.getState());
+        const settingsOpen = ref(false);
+        const settingsVisible = ref(false);
+        const settingsPhase = ref("exit");
+        const settingsMenuStyle = ref({});
+        const scrollTop = ref(0);
+        const bodyScrollbarWidth = ref(0);
+        let resizeObserver;
+        let bodyResizeObserver;
+        let settingsTimer;
+        const getContentWidth = () => Math.max(0, (rootRef.value?.clientWidth ?? 0) -
+            (props.rowSelection ? 44 : 0) -
+            (props.virtual ? bodyScrollbarWidth.value : 0));
+        const updateContainerWidth = () => {
+            containerWidth.value = getContentWidth();
+        };
+        const updateTable = () => {
+            state.value = controller.update({
+                columns: props.columns,
+                containerWidth: containerWidth.value,
+                rows: props.dataSource,
+                selectedKeys: props.selectedKeys,
+            });
+            virtualController.updateOptions({
+                count: state.value.rows.length,
+                estimateSize: props.rowHeight,
+                overscan: props.overscan,
+            });
+        };
+        const updateSettingsPosition = () => {
+            const trigger = settingsButtonRef.value;
+            if (!trigger || typeof window === "undefined")
+                return;
+            const rect = trigger.getBoundingClientRect();
+            const width = 220;
+            const gap = 6;
+            const padding = 8;
+            const preferredHeight = Math.min(320, Math.max(160, state.value.allColumns.length * 42 + 12));
+            const below = window.innerHeight - rect.bottom - padding;
+            const above = rect.top - padding;
+            const placement = below >= preferredHeight || below >= above ? "bottom" : "top";
+            const maxHeight = Math.min(preferredHeight, Math.max(120, (placement === "bottom" ? below : above) - gap));
+            settingsMenuStyle.value = {
+                left: `${Math.min(Math.max(padding, rect.right - width), Math.max(padding, window.innerWidth - width - padding))}px`,
+                maxHeight: `${maxHeight}px`,
+                top: `${placement === "bottom" ? rect.bottom + gap : Math.max(padding, rect.top - gap - maxHeight)}px`,
+                width: `${width}px`,
+            };
+        };
+        const showSettings = () => {
+            if (settingsTimer)
+                clearTimeout(settingsTimer);
+            settingsOpen.value = true;
+            settingsVisible.value = true;
+            settingsPhase.value = "exit";
+            updateSettingsPosition();
+            requestAnimationFrame(() => {
+                settingsPhase.value = "enter";
+            });
+        };
+        const hideSettings = () => {
+            settingsOpen.value = false;
+            settingsPhase.value = "exit";
+            if (settingsTimer)
+                clearTimeout(settingsTimer);
+            settingsTimer = setTimeout(() => {
+                settingsVisible.value = false;
+            }, 180);
+        };
+        const toggleSettings = () => {
+            if (settingsOpen.value)
+                hideSettings();
+            else
+                showSettings();
+        };
+        const closeSettingsOnOutside = (event) => {
+            const target = event.target;
+            if (!settingsOpen.value ||
+                settingsRef.value?.contains(target) ||
+                settingsMenuRef.value?.contains(target))
+                return;
+            hideSettings();
+        };
+        const syncVirtualBodyScroll = () => {
+            if (!props.virtual || !rootRef.value || !bodyRef.value)
+                return;
+            bodyRef.value.scrollLeft = rootRef.value.scrollLeft;
+        };
+        const updateBodyScrollbarWidth = () => {
+            if (!props.virtual || !bodyRef.value) {
+                bodyScrollbarWidth.value = 0;
+                updateContainerWidth();
+                return;
+            }
+            const nextWidth = Math.max(0, bodyRef.value.offsetWidth - bodyRef.value.clientWidth);
+            if (bodyScrollbarWidth.value !== nextWidth) {
+                bodyScrollbarWidth.value = nextWidth;
+                updateContainerWidth();
+            }
+        };
+        watch(() => [
+            props.columns,
+            props.dataSource,
+            props.rowSelection,
+            props.selectedKeys,
+            containerWidth.value,
+        ], updateTable);
+        watch(() => props.rowSelection, updateContainerWidth);
+        watch(() => [props.rowHeight, props.overscan], () => {
+            virtualController.updateOptions({
+                count: state.value.rows.length,
+                estimateSize: props.rowHeight,
+                overscan: props.overscan,
+            });
+        });
+        watch(() => [
+            props.virtual,
+            props.virtualHeight,
+            state.value.rows.length,
+            containerWidth.value,
+        ], () => void nextTick(updateBodyScrollbarWidth));
+        onMounted(() => {
+            updateContainerWidth();
+            updateBodyScrollbarWidth();
+            document.addEventListener("mousedown", closeSettingsOnOutside);
+            window.addEventListener("resize", updateSettingsPosition);
+            window.addEventListener("scroll", updateSettingsPosition, true);
+            if (typeof ResizeObserver === "undefined") {
+                window.addEventListener("resize", updateContainerWidth);
+                return;
+            }
+            if (rootRef.value) {
+                resizeObserver = new ResizeObserver(updateContainerWidth);
+                resizeObserver.observe(rootRef.value);
+            }
+            if (bodyRef.value) {
+                bodyResizeObserver = new ResizeObserver(updateBodyScrollbarWidth);
+                bodyResizeObserver.observe(bodyRef.value);
+            }
+        });
+        onBeforeUnmount(() => {
+            resizeObserver?.disconnect();
+            bodyResizeObserver?.disconnect();
+            document.removeEventListener("mousedown", closeSettingsOnOutside);
+            window.removeEventListener("resize", updateSettingsPosition);
+            window.removeEventListener("scroll", updateSettingsPosition, true);
+            if (settingsTimer)
+                clearTimeout(settingsTimer);
+            if (typeof ResizeObserver === "undefined")
+                window.removeEventListener("resize", updateContainerWidth);
+        });
+        return () => {
+            const tableViewportWidth = rootRef.value?.clientWidth ??
+                containerWidth.value + (props.rowSelection ? 44 : 0);
+            const displayColumns = state.value.columns;
+            const dataGridTemplateColumns = `${props.rowSelection ? "44px " : ""}${displayColumns.map((column) => `${column.width}px`).join(" ")}`;
+            const headerScrollbarWidth = props.virtual ? bodyScrollbarWidth.value : 0;
+            const dataViewportWidth = Math.max(0, tableViewportWidth - headerScrollbarWidth);
+            const headerGridTemplateColumns = `${props.rowSelection ? "44px " : ""}${displayColumns.map((column) => `${column.width}px`).join(" ")}${headerScrollbarWidth > 0 ? ` ${headerScrollbarWidth}px` : ""}`;
+            const range = props.virtual
+                ? virtualController.getRange(scrollTop.value, props.virtualHeight)
+                : null;
+            const toggle = (key, checked) => {
+                state.value = controller.toggleRow(key, checked);
+                emit("selectionChange", state.value.selectedKeys);
+            };
+            const renderCheckbox = (checked, indeterminate, label, onChange, disabled = false) => h("label", { "aria-label": label, class: "cc-choice cc-table__checkbox" }, [
+                h("input", {
+                    checked,
+                    disabled,
+                    ref: ((element) => {
+                        if (element)
+                            element.indeterminate = indeterminate;
+                    }),
+                    type: "checkbox",
+                    onChange: (event) => onChange(event.target.checked),
+                }),
+                h("span", { class: "cc-table__checkbox-label" }),
+            ]);
+            const visibleColumnCount = state.value.columns.length;
+            const tableContentWidth = () => (props.rowSelection ? 44 : 0) +
+                displayColumns.reduce((sum, column) => sum + column.width, 0);
+            const tableWidthStyle = {
+                width: `${Math.max(tableContentWidth(), dataViewportWidth)}px`,
+            };
+            const headerWidthStyle = {
+                width: `${Math.max(tableContentWidth() + headerScrollbarWidth, tableViewportWidth)}px`,
+            };
+            const bodyWidthStyle = props.virtual
+                ? { width: `${tableViewportWidth}px` }
+                : tableWidthStyle;
+            const hasHorizontalOverflow = tableContentWidth() + headerScrollbarWidth > tableViewportWidth + 1;
+            const getFixedEdge = (column) => {
+                if (!hasHorizontalOverflow)
+                    return undefined;
+                if (column.fixed === "left") {
+                    const leftFixed = displayColumns.filter((item) => item.fixed === "left");
+                    return leftFixed[leftFixed.length - 1]?.key === column.key
+                        ? "left"
+                        : undefined;
+                }
+                if (column.fixed === "right") {
+                    const rightFixed = displayColumns.filter((item) => item.fixed === "right");
+                    return rightFixed[0]?.key === column.key ? "right" : undefined;
+                }
+                return undefined;
+            };
+            const hasLeftFixedColumns = state.value.columns.some((column) => column.fixed === "left");
+            const getColumnStickyStyle = (column, area = "body") => {
+                const visibleColumns = displayColumns;
+                const index = visibleColumns.findIndex((item) => item.key === column.key);
+                if (index < 0 || !column.fixed)
+                    return {};
+                if (!hasHorizontalOverflow)
+                    return {};
+                if (column.fixed === "left") {
+                    const left = visibleColumns
+                        .slice(0, index)
+                        .filter((item) => item.fixed === "left")
+                        .reduce((sum, item) => sum + item.width, props.rowSelection ? 44 : 0);
+                    return {
+                        left: `${left}px`,
+                        position: "sticky",
+                        zIndex: 3,
+                    };
+                }
+                const right = visibleColumns
+                    .slice(index + 1)
+                    .filter((item) => item.fixed === "right")
+                    .reduce((sum, item) => sum + item.width, area === "head" ? headerScrollbarWidth : 0);
+                return {
+                    position: "sticky",
+                    right: `${right}px`,
+                    zIndex: 3,
+                };
+            };
+            const renderRow = (row, rowIndex) => {
+                const key = controller.getRowKey(row, rowIndex);
+                return h("div", {
+                    class: "cc-table__row",
+                    key,
+                    style: {
+                        ...tableWidthStyle,
+                        gridTemplateColumns: dataGridTemplateColumns,
+                        minHeight: `${props.rowHeight}px`,
+                    },
+                }, [
+                    props.rowSelection
+                        ? h("div", {
+                            class: "cc-table__selection cc-table__selection--fixed",
+                            "data-fixed-edge": hasHorizontalOverflow && !hasLeftFixedColumns
+                                ? "left"
+                                : undefined,
+                        }, renderCheckbox(state.value.selectedKeys.includes(key), false, `${getClassComponentsLocale().tableSelectRowLabel} ${String(key)}`, (checked) => toggle(key, checked)))
+                        : null,
+                    ...displayColumns.map((column) => h("div", {
+                        class: "cc-table__cell",
+                        "data-fixed": hasHorizontalOverflow
+                            ? column.fixed
+                            : undefined,
+                        "data-fixed-edge": getFixedEdge(column),
+                        key: column.key,
+                        style: getColumnStickyStyle(column),
+                    }, slots.cell?.({ column, row, rowIndex }) ??
+                        String(row[column.dataIndex] ?? ""))),
+                ]);
+            };
+            return h("div", {
+                ...attrs,
+                class: props.className,
+                ref: rootRef,
+                style: attrs.style,
+                onScroll: syncVirtualBodyScroll,
+            }, [
+                h("div", {
+                    class: "cc-table__row cc-table__row--head",
+                    style: {
+                        ...headerWidthStyle,
+                        gridTemplateColumns: headerGridTemplateColumns,
+                    },
+                }, [
+                    props.rowSelection
+                        ? h("div", {
+                            class: "cc-table__selection cc-table__selection--head cc-table__selection--fixed",
+                            "data-fixed-edge": hasHorizontalOverflow && !hasLeftFixedColumns
+                                ? "left"
+                                : undefined,
+                        }, renderCheckbox(state.value.selectionStatus === "all", state.value.selectionStatus === "partial", getClassComponentsLocale().tableSelectAllLabel, (checked) => {
+                            state.value = controller.toggleAllRows(checked);
+                            emit("selectionChange", state.value.selectedKeys);
+                        }))
+                        : null,
+                    ...displayColumns.map((column, index) => h("div", {
+                        class: "cc-table__cell cc-table__cell--head",
+                        "data-fixed": hasHorizontalOverflow
+                            ? column.fixed
+                            : undefined,
+                        "data-fixed-edge": getFixedEdge(column),
+                        key: column.key,
+                        style: getColumnStickyStyle(column, "head"),
+                    }, [
+                        column.title,
+                        h("span", {
+                            class: "cc-table__resize",
+                            onPointerdown: (event) => {
+                                const availableWidth = getContentWidth();
+                                let lastX = event.clientX;
+                                const move = (moveEvent) => {
+                                    const delta = moveEvent.clientX - lastX;
+                                    lastX = moveEvent.clientX;
+                                    state.value = controller.resizeColumn(column.key, delta, availableWidth);
+                                };
+                                const end = () => {
+                                    window.removeEventListener("pointermove", move);
+                                    window.removeEventListener("pointerup", end);
+                                };
+                                window.addEventListener("pointermove", move);
+                                window.addEventListener("pointerup", end);
+                            },
+                        }),
+                        index === displayColumns.length - 1
+                            ? h("div", {
+                                class: "cc-table__column-settings",
+                                ref: settingsRef,
+                            }, [
+                                h("button", {
+                                    "aria-expanded": settingsOpen.value,
+                                    "aria-label": getClassComponentsLocale()
+                                        .tableColumnSettingsLabel,
+                                    ref: settingsButtonRef,
+                                    type: "button",
+                                    onClick: toggleSettings,
+                                }, props.settingsIcon),
+                                settingsVisible.value
+                                    ? h(Teleport, { to: "body" }, h("div", {
+                                        "aria-multiselectable": "true",
+                                        class: "cc-select__menu cc-table__column-menu",
+                                        "data-state": settingsPhase.value,
+                                        ref: settingsMenuRef,
+                                        role: "listbox",
+                                        style: settingsMenuStyle.value,
+                                    }, state.value.allColumns.map((column) => h("label", {
+                                        class: "cc-select__option cc-table__column-option",
+                                        "data-disabled": !column.hidden &&
+                                            visibleColumnCount <= 1,
+                                        "data-selected": !column.hidden,
+                                        key: column.key,
+                                        role: "option",
+                                    }, [
+                                        renderCheckbox(!column.hidden, false, column.title, (checked) => {
+                                            state.value =
+                                                controller.toggleColumn(column.key, checked, getContentWidth());
+                                        }, !column.hidden &&
+                                            visibleColumnCount <= 1),
+                                        h("span", null, column.title),
+                                        !column.hidden
+                                            ? h("span", {
+                                                "aria-hidden": "true",
+                                                class: "cc-select__check",
+                                            }, props.columnSettingsSelectedIcon)
+                                            : null,
+                                    ]))))
+                                    : null,
+                            ])
+                            : null,
+                    ])),
+                    headerScrollbarWidth > 0
+                        ? h("div", {
+                            class: "cc-table__scrollbar-spacer cc-table__scrollbar-spacer--head",
+                        })
+                        : null,
+                ]),
+                h("div", {
+                    class: props.virtual
+                        ? "cc-table__body cc-table__body--virtual"
+                        : "cc-table__body",
+                    ref: bodyRef,
+                    onScroll: (event) => {
+                        const target = event.currentTarget;
+                        if (!props.virtual)
+                            return;
+                        scrollTop.value = target.scrollTop;
+                        if (rootRef.value &&
+                            rootRef.value.scrollLeft !== target.scrollLeft) {
+                            rootRef.value.scrollLeft = target.scrollLeft;
+                        }
+                    },
+                    style: props.virtual
+                        ? {
+                            ...bodyWidthStyle,
+                            maxHeight: `${props.virtualHeight}px`,
+                            overflowX: "hidden",
+                            overflowY: "auto",
+                        }
+                        : bodyWidthStyle,
+                }, !props.loading && state.value.rows.length === 0
+                    ? [
+                        h("div", { class: "cc-table__state" }, slots.empty?.() ??
+                            h(ClassEmpty, {
+                                className: "cc-table__empty",
+                                description: props.emptyText,
+                            })),
+                    ]
+                    : props.virtual && range
+                        ? [
+                            range.offsetBefore > 0
+                                ? h("div", {
+                                    style: { height: `${range.offsetBefore}px` },
+                                })
+                                : null,
+                            ...range.items.map((item) => {
+                                const row = state.value.rows[item.index];
+                                return row ? renderRow(row, item.index) : null;
+                            }),
+                            range.offsetAfter > 0
+                                ? h("div", {
+                                    style: { height: `${range.offsetAfter}px` },
+                                })
+                                : null,
+                        ]
+                        : state.value.rows.map(renderRow)),
+                props.loading
+                    ? h("div", {
+                        class: "cc-table__loading",
+                        "data-cover-header": props.loadingCoverHeader,
+                    }, slots.loading?.() ??
+                        h(ClassLoading, { text: props.loadingText }))
+                    : null,
+            ]);
+        };
+    },
+});
+const ClassVirtualTable = ClassTable;
+
+export { ClassVirtualTable };
+//# sourceMappingURL=virtual-table.js.map