@profitliga/ui 1.2.90 → 2.0.0

package/dist/components/v2/ConfirmDialog/useConfirm.js

@@ -0,0 +1,27 @@
+import { computed as u, ref as i, shallowRef as o } from "vue";
+const n = i(null), e = o([]);
+function s() {
+  const l = /* @__PURE__ */ Symbol("ConfirmDialog");
+  return e.value = [...e.value, l], {
+    isActive: u(() => e.value[0] === l),
+    unregister: () => {
+      e.value = e.value.filter((r) => r !== l), e.value.length === 0 && (n.value = null);
+    }
+  };
+}
+const t = {
+  require: (l) => {
+    n.value = l;
+  },
+  close: () => {
+    n.value = null;
+  }
+};
+function c() {
+  return t;
+}
+export {
+  n as confirmState,
+  s as registerConfirmDialog,
+  c as useConfirm
+};

package/dist/components/v2/DataTable/DataTable.columns.d.ts

@@ -0,0 +1,56 @@
+import { CellContext, ColumnDef, ColumnMeta, HeaderContext } from '@tanstack/vue-table';
+import { VNode } from 'vue';
+import { DataTableRow } from './DataTable.types';
+/** Что можно вернуть из рендера ячейки, заголовка или подвала колонки. */
+export type DataTableCellRender = VNode | VNode[] | string | number | null;
+/**
+ * Контекст ячейки. В отличие от контекста TanStack, `row` — это строка модели
+ * без служебной обёртки: `row.name` вместо `row.original.data.name`.
+ */
+export interface DataTableCellContext<T, V> {
+    /** Строка модели. */
+    row: T;
+    /** Значение колонки. При объявлении через `key` тип выводится из поля. */
+    value: V;
+    /** Порядковый номер строки в текущем наборе. */
+    index: number;
+    /** Полный контекст TanStack — когда нужен доступ к таблице или колонке. */
+    context: CellContext<DataTableRow<T>, V>;
+}
+interface DataTableColumnBase<T, V> {
+    header?: string | ((context: HeaderContext<DataTableRow<T>, V>) => DataTableCellRender);
+    footer?: string | ((context: HeaderContext<DataTableRow<T>, V>) => DataTableCellRender);
+    /**
+     * Своя разметка ячейки. Без неё колонка печатает значение как есть —
+     * этого хватает для строк, чисел и дат, уже приведённых к виду.
+     */
+    cell?: (context: DataTableCellContext<T, V>) => DataTableCellRender;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    enableSorting?: boolean;
+    meta?: ColumnMeta<DataTableRow<T>, V>;
+}
+/** Колонка, привязанная к полю модели: значение и `id` берутся из него. */
+export interface DataTableKeyColumn<T, K extends keyof T & string> extends DataTableColumnBase<T, T[K]> {
+    key: K;
+    /** Свой `id` — нужен, когда одно поле выводится в двух колонках. */
+    id?: string;
+}
+/**
+ * Колонка без прямой привязки к полю: значение либо вычисляется `accessor`,
+ * либо его нет вовсе — тогда колонка целиком собирается в `cell`.
+ */
+export interface DataTableCustomColumn<T> extends DataTableColumnBase<T, unknown> {
+    id: string;
+    /** Вычисляемое значение — им сортируется колонка, оно же придёт в `cell`. */
+    accessor?: (row: T) => unknown;
+}
+export interface DataTableColumnsHelper<T> {
+    column: {
+        <K extends keyof T & string>(definition: DataTableKeyColumn<T, K>): ColumnDef<DataTableRow<T>, unknown>;
+        (definition: DataTableCustomColumn<T>): ColumnDef<DataTableRow<T>, unknown>;
+    };
+}
+export declare function createDataTableColumns<T>(): DataTableColumnsHelper<T>;
+export {};

package/dist/components/v2/DataTable/DataTable.columns.js

@@ -0,0 +1,30 @@
+function u(a) {
+  return Object.fromEntries(
+    Object.entries(a).filter(([, e]) => e !== void 0)
+  );
+}
+function b() {
+  function a(e) {
+    const s = "key" in e, m = s ? e.id ?? e.key : e.id, c = e.cell, l = u({
+      id: m,
+      header: e.header,
+      footer: e.footer,
+      size: e.size,
+      minSize: e.minSize,
+      maxSize: e.maxSize,
+      enableSorting: e.enableSorting,
+      meta: e.meta,
+      cell: c && ((r) => c({
+        row: r.row.original.data,
+        value: r.getValue(),
+        index: r.row.index,
+        context: r
+      }))
+    }), o = s ? void 0 : e.accessor, t = s ? (r) => r.data[e.key] : o ? (r) => o(r.data) : void 0;
+    return t ? { ...l, accessorFn: t } : l;
+  }
+  return { column: a };
+}
+export {
+  b as createDataTableColumns
+};

package/dist/components/v2/DataTable/DataTable.css

@@ -0,0 +1 @@
+.data-table-wrapper[data-v-a84489d3]{width:100%;height:max-content}.data-table-wrapper__frame[data-v-a84489d3]{--data-table-radius:1rem}.data-table-wrapper__frame--small[data-v-a84489d3]{--data-table-radius:.75rem}.data-table-wrapper__frame--large[data-v-a84489d3]{--data-table-radius:1.125rem}.data-table-wrapper__frame--border[data-v-a84489d3]{border:1px solid var(--theme-secondary-250);border-radius:var(--data-table-radius);overflow:hidden}.data-table-wrapper__viewport[data-v-a84489d3]{position:relative}.data-table-wrapper__scroll[data-v-a84489d3]{overflow-x:auto}.data-table-wrapper__scroll[data-v-a84489d3]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:-2px}.data-table-wrapper__pagination[data-v-a84489d3]{justify-content:flex-end;margin-top:1rem;display:flex}.data-table[data-v-a84489d3]{--data-table-cell-padding-y:.75rem;--data-table-cell-padding-x:.75rem;--data-table-font-size:.875rem;--data-table-line-height:1.25rem;--data-table-radius:1rem;--data-table-empty-height:18.75rem;grid-template-columns:repeat(6,1fr);width:max-content;min-width:100%;display:grid;position:relative}.data-table--small[data-v-a84489d3]{--data-table-cell-padding-y:.5rem;--data-table-radius:.75rem}.data-table--large[data-v-a84489d3]{--data-table-cell-padding-y:1rem;--data-table-font-size:1rem;--data-table-line-height:1.5rem;--data-table-radius:1.125rem}.data-table-toolbar[data-v-a84489d3]{box-sizing:border-box;color:var(--theme-neutral-text-body);background-color:var(--theme-secondary-150);border-bottom:1px solid var(--theme-secondary-250);justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem;font-size:.875rem;line-height:1rem;display:flex}

package/dist/components/v2/DataTable/DataTable.sizing.d.ts

@@ -0,0 +1,36 @@
+import { Column } from '@tanstack/vue-table';
+import { CSSProperties } from 'vue';
+import { DataTableRow } from './DataTable.types';
+type DataTableColumn<T> = Column<DataTableRow<T>, unknown>;
+/**
+ * Нижняя граница колонки навешивается на саму ячейку, а не на трек грида.
+ *
+ * Трек с числовым минимумом (`minmax(140px, 1fr)`) задаёт базу, но под
+ * содержимое не растёт: всё, что шире, просто вылезает за границу колонки.
+ * `min-width` на ячейке работает иначе — он поднимает автоматический минимум
+ * трека, и колонка расширяется вместо того, чтобы обрезать содержимое.
+ *
+ * Верхняя граница здесь не выставляется: `max-width` ограничил бы ячейку, но
+ * не трек — колонка всё равно растянулась бы, оставив ячейку узкой посреди
+ * пустоты. За верх отвечает `getColumnTracks`.
+ */
+export declare function getColumnStyle<T>(column: DataTableColumn<T>): CSSProperties;
+/**
+ * Треки грида. Нижняя граница у всех — `auto`: она учитывает и содержимое, и
+ * `min-width` ячейки, поэтому колонка никогда не становится уже того, что в
+ * ней лежит. Различается только верхняя граница:
+ *
+ * - `size` — точная ширина;
+ * - `maxSize` — потолок, выше которого колонка не растягивается;
+ * - `meta.autoSize` — колонка забирает свободное место (`1fr`);
+ * - без всего этого — ширина по содержимому.
+ *
+ * Если `autoSize` не отмечен нигде, свободное место делят все колонки без
+ * своего потолка — иначе таблица не растянулась бы на ширину родителя.
+ *
+ * Потолок мягкий: когда содержимое шире него, нижняя граница `auto`
+ * перевешивает и колонка всё-таки расширяется. Иначе содержимое пришлось бы
+ * обрезать — а это ровно то, от чего избавляет `auto`.
+ */
+export declare function getColumnTracks<T>(columns: DataTableColumn<T>[]): string;
+export {};

package/dist/components/v2/DataTable/DataTable.sizing.js

@@ -0,0 +1,25 @@
+import { defaultColumnSizing as t } from "@tanstack/vue-table";
+function m(i, n) {
+  return i !== void 0 && i !== n ? i : void 0;
+}
+function z(i) {
+  const n = m(
+    i.columnDef.minSize,
+    t.minSize
+  );
+  return n === void 0 ? {} : { minWidth: `${n}px` };
+}
+function c(i) {
+  const n = i.some((e) => e.columnDef.meta?.autoSize);
+  return i.map((e) => {
+    const { columnDef: o } = e, u = m(o.size, t.size), r = m(
+      o.maxSize,
+      t.maxSize
+    );
+    return u !== void 0 ? `minmax(auto, ${u}px)` : r !== void 0 ? `minmax(auto, ${r}px)` : !n || o.meta?.autoSize ? "minmax(auto, 1fr)" : "auto";
+  }).join(" ");
+}
+export {
+  z as getColumnStyle,
+  c as getColumnTracks
+};

package/dist/components/v2/DataTable/DataTable.types.d.ts

@@ -0,0 +1,163 @@
+import { ColumnDef, RowData, RowSelectionState, SortingState } from '@tanstack/vue-table';
+import { Component } from 'vue';
+/** Высоты строк из макета: 32px (`small`), 40px (`medium`), 52px (`large`). */
+export type DataTableSize = 'small' | 'medium' | 'large';
+/**
+ * `default` — шапка без заливки, заголовки капслоком.
+ * `filled` — шапка на подложке `secondary-50`, заголовки как есть.
+ */
+export type DataTableHeaderVariant = 'default' | 'filled';
+export type DataTableAlign = 'start' | 'center' | 'end';
+export type DataTableVerticalAlign = 'top' | 'middle' | 'bottom';
+/** То же, что возвращает `column.getIsSorted()` у TanStack Table. */
+export type DataTableSortDirection = false | 'asc' | 'desc';
+/**
+ * Обёртка над строкой: сами данные лежат в `data`, вокруг них — то, что
+ * относится к строке как к элементу таблицы, а не к предметной области.
+ */
+export interface DataTableRow<T> {
+    /** Показать спиннер поверх одной строки, не блокируя остальные. */
+    isLoading?: boolean;
+    /** Скрыть флажок выбора у конкретной строки. По умолчанию флажок есть. */
+    isViewCheckbox?: boolean;
+    /** Включает подсветку `bgColor` — без него цвет не применяется. */
+    viewBgColor?: boolean;
+    bgColor?: string;
+    /** Строку нельзя выбрать, клик по ней не срабатывает. */
+    disabledRow?: boolean;
+    onClick?: () => void;
+    rowClass?: string;
+    data: T;
+}
+export interface DataTableProps<T = unknown> {
+    data: DataTableRow<T>[];
+    columns: ColumnDef<DataTableRow<T>, unknown>[];
+    size?: DataTableSize;
+    headerVariant?: DataTableHeaderVariant;
+    /** Рамка вокруг таблицы со скруглением. */
+    border?: boolean;
+    hideHeader?: boolean;
+    /** Блок пагинации под таблицей. */
+    paginator?: boolean;
+    page?: number;
+    rows?: number;
+    rowsPerPageOptions?: number[];
+    /**
+     * Всего записей на сервере. Без него пагинация считает страницы по длине
+     * `data`, что верно только когда весь набор пришёл целиком.
+     */
+    total?: number;
+    /** Показывать пагинацию, даже когда страница всего одна. */
+    alwaysShowPaginator?: boolean;
+    /** Блок «Показывать по N» справа от страниц. */
+    showPageSize?: boolean;
+    loading?: boolean;
+    enableSorting?: boolean;
+    enableRowSelection?: boolean;
+    /**
+     * Убрать флажок «выбрать все» из шапки. Нужен, когда он вынесен в слот
+     * `toolbar` — иначе на экране окажется два одинаковых переключателя.
+     * Сама колонка с флажками строк остаётся.
+     */
+    hideSelectAll?: boolean;
+    /**
+     * Не заливать выбранную строку фоном. Нужен, когда строки и так раскрашены
+     * по смыслу (`bgColor`) и вторая заливка поверх только путает: о выборе
+     * говорит сам флажок.
+     *
+     * На разметку это не влияет — состояние по-прежнему видно в атрибуте
+     * `data-selected`, так что своё оформление навесить можно.
+     */
+    hideSelectedHighlight?: boolean;
+    /**
+     * Поле строки, которое служит идентификатором. Без него ключом становится
+     * индекс — выбор строк «съедет» при любой пересортировке набора.
+     */
+    rowId?: string;
+    /** Текст на месте таблицы, когда данных нет. */
+    emptyText?: string;
+    /**
+     * Доступное имя таблицы. Нужно, когда рядом нет видимого заголовка — иначе
+     * скринридер объявит безымянную таблицу.
+     */
+    ariaLabel?: string;
+    /** Базовый `data-testid`; внутренние части получают суффикс имени части. */
+    testId?: string;
+}
+/**
+ * Что слот `toolbar` получает о выборе строк. Наружу отдаётся своя выжимка, а
+ * не объект таблицы TanStack: панель над таблицей должна собираться из
+ * понятных значений, не завязываясь на внутреннее устройство.
+ */
+export interface DataTableToolbarSlotProps<T = unknown> {
+    /** Выбраны все строки, доступные для выбора. */
+    isAllSelected: boolean;
+    /** Выбрана часть строк — промежуточное состояние флажка. */
+    isSomeSelected: boolean;
+    /** Переключить все строки. Без аргумента — инвертирует текущее состояние. */
+    toggleAll: (value?: boolean) => void;
+    selectedCount: number;
+    totalCount: number;
+    /** Выбранные строки моделью, без служебной обёртки. */
+    selectedRows: T[];
+}
+export interface DataTableEmits {
+    (e: 'update:sort', value: SortingState): void;
+    (e: 'update:selected', value: RowSelectionState): void;
+    (e: 'update:page', value: number): void;
+    (e: 'update:rows', value: number): void;
+    (e: 'row-click', row: DataTableRow<unknown>): void;
+}
+export interface DataTableHeaderCellProps {
+    /** Текст заголовка. Можно передать слотом по умолчанию. */
+    label?: string;
+    size?: DataTableSize;
+    variant?: DataTableHeaderVariant;
+    align?: DataTableAlign;
+    /**
+     * Иконка-подсказка справа от текста. `true` — стандартный «?» из макета,
+     * компонент — своя иконка.
+     */
+    icon?: Component | boolean;
+    sortable?: boolean;
+    sortDirection?: DataTableSortDirection;
+    /** Вертикальный разделитель слева, отделяющий колонку от предыдущей. */
+    divider?: boolean;
+    /**
+     * Подпись, видимая только скринридеру. Нужна колонкам без заголовка —
+     * с кнопками или флажками: безымянный столбец при обходе шапки ни о чём
+     * не говорит.
+     */
+    hiddenLabel?: string;
+    testId?: string;
+}
+export interface DataTableHeaderCellEmits {
+    (e: 'sort', event: MouseEvent): void;
+}
+export interface DataTableSorterProps {
+    direction?: DataTableSortDirection;
+    size?: DataTableSize;
+}
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        align?: DataTableAlign;
+        verticalAlign?: DataTableVerticalAlign;
+        autoSize?: boolean;
+        /** Иконка-подсказка справа от заголовка колонки. */
+        headerIcon?: Component | boolean;
+        /**
+         * Подпись колонки для скринридера, когда видимого заголовка нет —
+         * так устроены колонки с кнопками и флажками.
+         */
+        headerLabel?: string;
+        /**
+         * Сколько колонок занимает ячейка подвала. Подписи вроде
+         * «Экспресс-доставка» тянутся на всю левую часть таблицы, а значение
+         * стоит в своей колонке — как в макете заказов.
+         *
+         * Колонки, накрытые спаном, свою ячейку подвала не рисуют.
+         */
+        footerColSpan?: number;
+    }
+}
+export {};

package/dist/components/v2/DataTable/DataTable.vue.d.ts

@@ -0,0 +1,37 @@
+import { RowSelectionState, SortingState } from '@tanstack/vue-table';
+import { DataTableEmits, DataTableProps, DataTableRow } from './DataTable.types';
+import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:sort"?: ((value: SortingState) => any) | undefined;
+        readonly "onUpdate:selected"?: ((value: RowSelectionState) => any) | undefined;
+        readonly "onUpdate:page"?: ((value: number) => any) | undefined;
+        readonly "onUpdate:rows"?: ((value: number) => any) | undefined;
+        readonly "onUpdate:rowSelection"?: ((value: RowSelectionState) => any) | undefined;
+        readonly "onRow-click"?: ((row: DataTableRow<unknown>) => any) | undefined;
+    } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onUpdate:page" | "onUpdate:rows" | "onUpdate:sort" | "onUpdate:selected" | "onUpdate:rowSelection" | "onRow-click"> & ({
+        page?: number;
+        rows?: number;
+        rowSelection?: RowSelectionState;
+    } & DataTableProps<T>) & Partial<{}>> & PublicProps;
+    expose(exposed: ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        toolbar?(_: {
+            isAllSelected: boolean;
+            isSomeSelected: boolean;
+            toggleAll: (value?: boolean) => void;
+            selectedCount: number;
+            totalCount: number;
+            selectedRows: T[];
+        }): any;
+        empty?(_: {}): any;
+    };
+    emit: DataTableEmits & (((evt: "update:page", value: number) => void) & ((evt: "update:rows", value: number) => void) & ((evt: "update:rowSelection", value: RowSelectionState) => void));
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/v2/DataTable/DataTable.vue.js

@@ -0,0 +1,8 @@
+import './DataTable.css';
+import a from "./DataTable.vue2.js";
+/* empty css               */
+import o from "../../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ o(a, [["__scopeId", "data-v-a84489d3"]]);
+export {
+  p as default
+};

package/dist/components/v2/DataTable/DataTable.vue2.js

@@ -0,0 +1,197 @@
+import { defineComponent as $, useModel as w, ref as N, computed as o, h as z, openBlock as n, createElementBlock as S, mergeProps as f, unref as d, createElementVNode as g, normalizeClass as U, renderSlot as C, normalizeProps as E, guardReactiveProps as F, createCommentVNode as s, createBlock as h, createVNode as R, withCtx as G, createTextVNode as j, toDisplayString as q, mergeModels as p } from "vue";
+import { createColumnHelper as J, useVueTable as K, getCoreRowModel as Q } from "@tanstack/vue-table";
+import I from "../Checkbox/Checkbox.vue.js";
+import W from "../Pagination/Pagination.vue.js";
+import { useTestId as X } from "../shared/useTestId.util.js";
+import { getColumnTracks as Y } from "./DataTable.sizing.js";
+import Z from "./DataTableBody.vue.js";
+import O from "./DataTableFooter.vue.js";
+import _ from "./DataTableHeader.vue.js";
+import ee from "./DataTableLoader.vue.js";
+const te = { class: "data-table-wrapper__viewport" }, ae = {
+  class: "data-table-wrapper__scroll",
+  tabindex: "0"
+}, le = ["aria-label", "aria-busy"], oe = {
+  key: 0,
+  class: "data-table-wrapper__pagination"
+}, we = /* @__PURE__ */ $({
+  name: "DataTable",
+  inheritAttrs: !1,
+  __name: "DataTable",
+  props: /* @__PURE__ */ p({
+    data: {},
+    columns: {},
+    size: { default: "medium" },
+    headerVariant: { default: "default" },
+    border: { type: Boolean },
+    hideHeader: { type: Boolean },
+    paginator: { type: Boolean },
+    page: {},
+    rows: {},
+    rowsPerPageOptions: { default: () => [10, 25, 50, 100] },
+    total: {},
+    alwaysShowPaginator: { type: Boolean, default: !0 },
+    showPageSize: { type: Boolean },
+    loading: { type: Boolean },
+    enableSorting: { type: Boolean },
+    enableRowSelection: { type: Boolean },
+    hideSelectAll: { type: Boolean },
+    hideSelectedHighlight: { type: Boolean },
+    rowId: {},
+    emptyText: { default: "Данные отсутствуют" },
+    ariaLabel: {},
+    testId: {}
+  }, {
+    page: { default: 1 },
+    pageModifiers: {},
+    rows: { default: 25 },
+    rowsModifiers: {},
+    rowSelection: {
+      default: () => ({})
+    },
+    rowSelectionModifiers: {}
+  }),
+  emits: /* @__PURE__ */ p(["update:sort", "update:selected", "update:page", "update:rows", "row-click"], ["update:page", "update:rows", "update:rowSelection"]),
+  setup(e, { emit: k }) {
+    const c = k, m = X(() => e.testId), v = w(e, "page"), b = w(e, "rows"), r = w(e, "rowSelection"), u = N([]), B = J(), y = o(() => e.total ?? e.data.length), P = o(() => e.paginator ? e.alwaysShowPaginator || y.value > b.value : !1), T = o(
+      () => e.size === "small" ? "small" : "medium"
+    ), V = o(() => e.columns.some((t) => !!t.footer)), M = o(() => e.enableRowSelection ? [B.display({
+      id: "select",
+      size: 48,
+      // Видимого заголовка нет — подпись для скринридера идёт через `meta`.
+      meta: { headerLabel: "Выбор строк" },
+      /*
+       * С `hideSelectAll` шапка колонки пустеет: «выбрать все» переехал в
+       * слот `toolbar`, и два одинаковых переключателя рядом только сбивают.
+       */
+      header: ({ table: a }) => e.hideSelectAll ? null : z(I, {
+        modelValue: a.getIsAllRowsSelected(),
+        indeterminate: a.getIsSomeRowsSelected(),
+        ariaLabel: "Выбрать все строки",
+        "onUpdate:modelValue": (i) => a.toggleAllRowsSelected(i)
+      }),
+      cell: ({ row: a }) => a.original.isViewCheckbox !== !1 ? z(I, {
+        modelValue: a.getIsSelected(),
+        disabled: !a.getCanSelect(),
+        ariaLabel: "Выбрать строку",
+        "onUpdate:modelValue": (L) => a.toggleSelected(L)
+      }) : null
+    }), ...e.columns] : e.columns), l = K({
+      get data() {
+        return e.data;
+      },
+      get columns() {
+        return M.value;
+      },
+      state: {
+        get sorting() {
+          return u.value;
+        },
+        get rowSelection() {
+          return r.value;
+        }
+      },
+      columnResizeMode: "onChange",
+      getRowId: (t, a) => e.rowId ? String(t.data[e.rowId]) : String(a),
+      getCoreRowModel: Q(),
+      enableSorting: e.enableSorting,
+      onSortingChange: (t) => {
+        u.value = typeof t == "function" ? t(u.value) : t, c("update:sort", u.value);
+      },
+      enableRowSelection: (t) => !!e.enableRowSelection && t.original.isViewCheckbox !== !1 && !t.original.disabledRow,
+      onRowSelectionChange: (t) => {
+        r.value = typeof t == "function" ? t(r.value) : t, c("update:selected", r.value);
+      }
+    }), x = o(
+      () => Y(
+        l.getHeaderGroups()[0].headers.map((t) => t.column)
+      )
+    ), A = o(() => ({
+      isAllSelected: l.getIsAllRowsSelected(),
+      isSomeSelected: l.getIsSomeRowsSelected(),
+      toggleAll: (t) => l.toggleAllRowsSelected(t),
+      selectedCount: l.getSelectedRowModel().rows.length,
+      totalCount: e.data.length,
+      selectedRows: l.getSelectedRowModel().rows.map((t) => t.original.data)
+    })), H = o(() => [
+      "data-table-wrapper__frame",
+      `data-table-wrapper__frame--${e.size}`,
+      { "data-table-wrapper__frame--border": e.border }
+    ]), D = o(() => [
+      "data-table",
+      `data-table--${e.size}`,
+      {
+        "data-table--empty": e.data.length === 0,
+        "data-table--loading": e.loading
+      }
+    ]);
+    return (t, a) => (n(), S("div", f({ class: "data-table-wrapper" }, { ...t.$attrs, ...d(m)() }), [
+      g("div", {
+        class: U(H.value)
+      }, [
+        t.$slots.toolbar ? (n(), S("div", f({
+          key: 0,
+          class: "data-table-toolbar"
+        }, d(m)("toolbar")), [
+          C(t.$slots, "toolbar", E(F(A.value)), void 0, !0)
+        ], 16)) : s("", !0),
+        g("div", te, [
+          g("div", ae, [
+            g("div", f({
+              role: "table",
+              class: D.value,
+              style: { gridTemplateColumns: x.value },
+              "aria-label": e.ariaLabel,
+              "aria-busy": e.loading || void 0
+            }, d(m)("table")), [
+              e.hideHeader ? s("", !0) : (n(), h(_, {
+                key: 0,
+                table: d(l),
+                size: e.size,
+                variant: e.headerVariant,
+                "test-id": e.testId
+              }, null, 8, ["table", "size", "variant", "test-id"])),
+              R(Z, {
+                table: d(l),
+                loading: e.loading,
+                "empty-text": e.emptyText,
+                "hide-selected-highlight": e.hideSelectedHighlight,
+                "test-id": e.testId,
+                onRowClick: a[0] || (a[0] = (i) => c("row-click", i))
+              }, {
+                empty: G(() => [
+                  C(t.$slots, "empty", {}, () => [
+                    j(q(e.emptyText), 1)
+                  ], !0)
+                ]),
+                _: 3
+              }, 8, ["table", "loading", "empty-text", "hide-selected-highlight", "test-id"]),
+              V.value ? (n(), h(O, {
+                key: 1,
+                table: d(l),
+                "test-id": e.testId
+              }, null, 8, ["table", "test-id"])) : s("", !0)
+            ], 16, le)
+          ]),
+          e.loading ? (n(), h(ee, { key: 0 })) : s("", !0)
+        ])
+      ], 2),
+      P.value ? (n(), S("div", oe, [
+        R(W, {
+          page: v.value,
+          "onUpdate:page": a[1] || (a[1] = (i) => v.value = i),
+          "page-size": b.value,
+          "onUpdate:pageSize": a[2] || (a[2] = (i) => b.value = i),
+          total: y.value,
+          size: T.value,
+          "show-page-size": e.showPageSize,
+          "page-size-options": e.rowsPerPageOptions,
+          "test-id": e.testId
+        }, null, 8, ["page", "page-size", "total", "size", "show-page-size", "page-size-options", "test-id"])
+      ])) : s("", !0)
+    ], 16));
+  }
+});
+export {
+  we as default
+};

package/dist/components/v2/DataTable/DataTableBody.css

@@ -0,0 +1 @@
+.data-table__body[data-v-927b8c09]{grid-column:-1/1;grid-template-columns:subgrid;display:grid}.data-table__row[data-v-927b8c09]{grid-column:-1/1;grid-template-columns:subgrid;background-color:var(--data-table-row-bg,transparent);transition:background-color var(--animation-duration-fast) ease-in-out;display:grid;position:relative}.data-table__row--clickable[data-v-927b8c09]{cursor:pointer}.data-table__row--clickable[data-v-927b8c09]:hover{background-color:var(--theme-secondary-25)}.data-table__row--selected[data-v-927b8c09]{background-color:var(--theme-primary-50)}.data-table__row--disabled[data-v-927b8c09]{cursor:not-allowed;background-color:var(--theme-neutral-surface-disabled)}.data-table__row--disabled .data-table__cell[data-v-927b8c09]{opacity:.55}.data-table__row:last-child .data-table__cell[data-v-927b8c09]{border-bottom:none}.data-table__cell[data-v-927b8c09]{box-sizing:border-box;padding:var(--data-table-cell-padding-y) var(--data-table-cell-padding-x);font-size:var(--data-table-font-size);line-height:var(--data-table-line-height);color:var(--theme-neutral-text-body);word-break:break-word;border-bottom:1px solid var(--theme-neutral-border-divider);align-items:center;display:flex}.data-table__cell--align-center[data-v-927b8c09]{text-align:center;justify-content:center}.data-table__cell--align-end[data-v-927b8c09]{text-align:end;justify-content:flex-end}.data-table__cell--valign-top[data-v-927b8c09]{align-items:flex-start}.data-table__cell--valign-bottom[data-v-927b8c09]{align-items:flex-end}.data-table__empty[data-v-927b8c09]{min-height:var(--data-table-empty-height);padding:var(--data-table-cell-padding-y) var(--data-table-cell-padding-x);grid-column:-1/1;justify-content:center;align-items:center;display:flex}.data-table__empty-text[data-v-927b8c09]{font-size:var(--data-table-font-size);line-height:var(--data-table-line-height);color:var(--theme-neutral-text-caption);text-align:center}

package/dist/components/v2/DataTable/DataTableBody.vue.d.ts

@@ -0,0 +1,26 @@
+import { Table } from '@tanstack/vue-table';
+import { DataTableRow } from './DataTable.types';
+import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onRow-click"?: ((row: DataTableRow<T>) => any) | undefined;
+    } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onRow-click"> & {
+        table: Table<DataTableRow<T>>;
+        loading?: boolean;
+        emptyText?: string;
+        hideSelectedHighlight?: boolean;
+        testId?: string;
+    } & Partial<{}>> & PublicProps;
+    expose(exposed: ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        empty?(_: {}): any;
+    };
+    emit: (e: "row-click", row: DataTableRow<T>) => void;
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/v2/DataTable/DataTableBody.vue.js

@@ -0,0 +1,8 @@
+import './DataTableBody.css';
+import o from "./DataTableBody.vue2.js";
+/* empty css                   */
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-927b8c09"]]);
+export {
+  p as default
+};