@groupteknology/vuno 3.0.0 → 4.0.0

package/dist/runtime/app/components/Table/Table.vue

@@ -1,211 +1,46 @@
 <script setup>
-import { computed } from "vue";
-import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
-import { getPath } from "#vuno/utils/path";
-import { cn } from "#vuno/utils/theme";
-import Button from "#vuno/components/Button/Button.vue";
-import Checkbox from "#vuno/components/FieldCheckbox/internal/Checkbox/Checkbox.vue";
-import Menu from "#vuno/components/Menu/Menu.vue";
-import Text from "#vuno/components/Text/Text.vue";
-import { resolveColumns, resolveColumnValue } from "./internal/column";
-import TableCell from "./internal/TableCell/TableCell.vue";
-import { useVunoTableSelection } from "./internal/useVunoTableSelection";
-defineOptions({ name: "VunoTable" });
-const selection = defineModel("selection", { type: Array, ...{ default: () => [] } });
-const sort = defineModel("sort", { type: [null, Object], ...{ default: null } });
+import { computed, inject, provide, toRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { normalizeTableSize, tableContainerKey, tableKey } from "#vuno/components/DataTable/DataTable.context";
+defineOptions({ name: "Table" });
 const props = defineProps({
-  data: { type: Array, required: true },
-  definition: { type: Object, required: true },
-  radius: { type: String, required: false },
-  ui: { type: Object, required: false }
+  isSortable: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "lg" },
+  stickyHeader: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 },
+  useStaticWidth: { type: Boolean, required: false, default: false },
+  useZebraStyles: { type: Boolean, required: false, default: false }
 });
-const emit = defineEmits(["rowClick"]);
 defineSlots();
-const icons = useIcons();
-const messages = useMessages();
+const container = inject(tableContainerKey, void 0);
+const size = computed(() => normalizeTableSize(props.size));
+provide(tableKey, {
+  isSortable: toRef(props, "isSortable"),
+  size,
+  stickyHeader: toRef(props, "stickyHeader"),
+  useZebraStyles: toRef(props, "useZebraStyles")
+});
 const ui = useTheme(
-  "table",
+  "dataTable",
   () => props.ui,
-  () => ({ density: props.definition.density, radius: props.radius })
+  () => ({
+    size: size.value,
+    sortable: String(props.isSortable),
+    static: String(props.useStaticWidth),
+    sticky: String(props.stickyHeader),
+    zebra: String(props.useZebraStyles)
+  })
 );
-const columns = computed(() => resolveColumns(props.definition.columns));
-const columnCount = computed(() => Math.max(columns.value.length + (props.definition.selectable ? 1 : 0), 1));
-const getRowId = (row) => String(getPath(row, props.definition.rowKey ?? "id") ?? "");
-const { allSelected, isSelected, rowLabel, someSelected, toggleAll, toggleRow } = useVunoTableSelection({
-  columns,
-  getRowId,
-  selection,
-  definition: () => props.definition,
-  rowName: () => messages.value.row,
-  rows: () => props.data
-});
-function sortDirectionFor(key) {
-  return sort.value?.column === key ? sort.value.direction : null;
-}
-function toggleSort(key) {
-  const current = sortDirectionFor(key);
-  if (current === null) {
-    sort.value = { column: key, direction: "asc" };
-  } else if (current === "asc") {
-    sort.value = { column: key, direction: "desc" };
-  } else {
-    sort.value = null;
-  }
-}
-function ariaSortFor(key) {
-  if (!columns.value.find((item) => item.key === key)?.sortable) return void 0;
-  const direction = sortDirectionFor(key);
-  if (direction === "asc") return "ascending";
-  if (direction === "desc") return "descending";
-  return "none";
-}
-function sortIcon(key) {
-  const direction = sortDirectionFor(key);
-  if (direction === "asc") return icons.value.sortAsc;
-  if (direction === "desc") return icons.value.sortDesc;
-  return icons.value.sort;
-}
-function activateRow(row) {
-  if (props.definition.interactive) emit("rowClick", row);
-}
 </script>
 
 <template>
-    <div
-        :class="ui.tableRoot"
-        tabindex="0"
-    >
+    <div :class="[ui.content, props.stickyHeader && ui.innerContainer]">
         <table
-            :aria-labelledby="props.definition.labelledBy"
+            :aria-describedby="container?.descriptionId.value"
+            :aria-labelledby="container?.titleId.value"
             :class="ui.table"
         >
-            <caption
-                v-if="props.definition.caption"
-                :class="ui.caption"
-            >
-                {{
-                    props.definition.caption
-                }}
-            </caption>
-
-            <thead :class="ui.thead">
-                <tr :class="ui.headRow">
-                    <th
-                        v-if="props.definition.selectable"
-                        :class="cn(ui.th, ui.selectCell, props.definition.stickyHeader && ui.stickyHeader)"
-                        scope="col"
-                    >
-                        <Checkbox
-                            :aria-label="messages.selectAll"
-                            :indeterminate="someSelected"
-                            :modelValue="allSelected"
-                            @update:model-value="(checked) => toggleAll(checked === true)"
-                        />
-                    </th>
-
-                    <th
-                        v-for="item in columns"
-                        :key="item.key"
-                        :aria-sort="ariaSortFor(item.key)"
-                        :class="cn(ui.th, item.headerClass, props.definition.stickyHeader && ui.stickyHeader, item.column.sticky && ui.stickyColumn, item.column.sticky === 'start' && ui.stickyColumnStart, item.column.sticky === 'end' && ui.stickyColumnEnd, props.definition.stickyHeader && item.column.sticky && ui.stickyIntersection)"
-                        scope="col"
-                    >
-                        <Button
-                            v-if="item.sortable"
-                            color="neutral"
-                            :icon="sortIcon(item.key)"
-                            :label="item.label"
-                            size="xs"
-                            trailing
-                            :ui="{ base: ui.sortButton }"
-                            variant="ghost"
-                            @click="toggleSort(item.key)"
-                        />
-                        <Text
-                            v-else
-                            tag="span"
-                            tone="inherit"
-                            variant="inherit"
-                            >{{ item.label }}</Text
-                        >
-                    </th>
-                </tr>
-            </thead>
-
-            <tbody :class="ui.tbody">
-                <tr
-                    v-for="(row, index) in props.data"
-                    :key="getRowId(row)"
-                    :aria-label="props.definition.interactive ? `${messages.openRow} ${rowLabel(row, index)}` : void 0"
-                    :class="cn(ui.tr, props.definition.interactive && ui.interactiveRow)"
-                    :data-selected="isSelected(row) ? 'true' : void 0"
-                    :tabindex="props.definition.interactive ? 0 : void 0"
-                    @click="emit('rowClick', row)"
-                    @keydown.enter.self="activateRow(row)"
-                    @keydown.space.self.prevent="activateRow(row)"
-                >
-                    <td
-                        v-if="props.definition.selectable"
-                        :class="[ui.td, ui.selectCell]"
-                        @click.stop
-                    >
-                        <Checkbox
-                            :aria-label="`${messages.selectRow} ${rowLabel(row, index)}`"
-                            :modelValue="isSelected(row)"
-                            @update:model-value="(checked) => toggleRow(row, checked === true)"
-                        />
-                    </td>
-
-                    <td
-                        v-for="item in columns"
-                        :key="item.key"
-                        :class="cn(ui.td, item.cellClass, item.column.sticky && ui.stickyColumn, item.column.sticky === 'start' && ui.stickyColumnStart, item.column.sticky === 'end' && ui.stickyColumnEnd)"
-                    >
-                        <Menu
-                            v-if="item.column.type === 'actions'"
-                            :items="
-  item.column.actions.filter((action) => !action.hidden?.(row)).map((action) => ({
-    onSelect: () => action.onSelect(row),
-    color: action.color,
-    disabled: action.disabled?.(row) ?? false,
-    icon: action.icon,
-    label: action.label,
-    separator: action.separator
-  }))
-"
-                        >
-                            <Button
-                                :aria-label="`${messages.rowActions} ${rowLabel(row, index)}`"
-                                color="neutral"
-                                :icon="icons.actions"
-                                size="xs"
-                                variant="ghost"
-                            />
-                        </Menu>
-
-                        <slot
-                            v-else
-                            :name="`cell-${item.key}`"
-                            :row="row"
-                            :value="resolveColumnValue(item.column, row)"
-                        >
-                            <TableCell
-                                :column="item.column"
-                                :row="row"
-                            />
-                        </slot>
-                    </td>
-                </tr>
-
-                <tr v-if="props.data.length === 0">
-                    <td
-                        :class="ui.emptyCell"
-                        :colspan="columnCount"
-                    >
-                        <slot name="empty" />
-                    </td>
-                </tr>
-            </tbody>
+            <slot />
         </table>
     </div>
 </template>

package/dist/runtime/app/components/Table/Table.vue.d.ts

@@ -1,33 +1,20 @@
-import type { VunoTableSort } from '#vuno/types/table';
-import type { VunoTableProps } from './Table.types.js';
-declare const __VLS_export: <TRow extends import("#vuno/types/table").VunoTableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(VunoTableProps<TRow> & {
-        selection?: (number | string)[];
-        sort?: null | VunoTableSort;
-    }) & {
-        onRowClick?: ((row: TRow) => any) | undefined;
-        "onUpdate:selection"?: ((value: (string | number)[]) => any) | undefined;
-        "onUpdate:sort"?: ((value: VunoTableSort | null) => any) | undefined;
-    }> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {
-        [key: `cell-${string}`]: (props: {
-            row: TRow;
-            value: unknown;
-        }) => unknown;
-        empty?: () => unknown;
-    };
-    emit: ((evt: "rowClick", row: TRow) => void) & (((event: "update:selection", value: (string | number)[]) => void) & ((event: "update:sort", value: VunoTableSort | null) => void));
-}>) => import("vue").VNode & {
-    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+import type { TableProps } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Slots = {
+    default?: () => unknown;
 };
+declare const __VLS_base: import("vue").DefineComponent<TableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableProps> & Readonly<{}>, {
+    size: import("#vuno/components/DataTable/DataTable.types").DataTableLegacySize | import("#vuno/components/DataTable/DataTable.types").DataTableSize;
+    ui: import("#vuno/components/DataTable/DataTable.types").DataTableUi;
+    isSortable: boolean;
+    stickyHeader: boolean;
+    useStaticWidth: boolean;
+    useZebraStyles: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableActionList/TableActionList.d.vue.ts

@@ -0,0 +1,18 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    ui?: DataTableUi;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: DataTableUi;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableActionList/TableActionList.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "TableActionList" });
+const props = defineProps({
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const ui = useTheme("dataTable", () => props.ui);
+</script>
+
+<template>
+    <div :class="ui.actionList">
+        <slot />
+    </div>
+</template>

package/dist/runtime/app/components/TableActionList/TableActionList.vue.d.ts

@@ -0,0 +1,18 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    ui?: DataTableUi;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: DataTableUi;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableBatchAction/TableBatchAction.d.vue.ts

@@ -0,0 +1,30 @@
+import type { ButtonProps } from '#vuno/components/Button/Button.types';
+type __VLS_Props = {
+    disabled?: boolean;
+    icon?: string;
+    iconDescription?: string;
+    label?: string;
+    ui?: ButtonProps['ui'];
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    icon: string;
+    label: string;
+    ui: Partial<Record<"base" | "icon" | "assistive" | "label" | "spinner", string | string[] | undefined>>;
+    iconDescription: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableBatchAction/TableBatchAction.vue

@@ -0,0 +1,28 @@
+<script setup>
+import Button from "#vuno/components/Button/Button.vue";
+defineOptions({ name: "TableBatchAction" });
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  icon: { type: String, required: false, default: void 0 },
+  iconDescription: { type: String, required: false, default: void 0 },
+  label: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["click"]);
+defineSlots();
+</script>
+
+<template>
+    <Button
+        :disabled="props.disabled"
+        :icon="props.icon"
+        :iconDescription="props.iconDescription"
+        kind="primary"
+        :label="props.label"
+        size="lg"
+        :ui="props.ui"
+        @click="emit('click', $event)"
+    >
+        <slot />
+    </Button>
+</template>

package/dist/runtime/app/components/TableBatchAction/TableBatchAction.vue.d.ts

@@ -0,0 +1,30 @@
+import type { ButtonProps } from '#vuno/components/Button/Button.types';
+type __VLS_Props = {
+    disabled?: boolean;
+    icon?: string;
+    iconDescription?: string;
+    label?: string;
+    ui?: ButtonProps['ui'];
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    icon: string;
+    label: string;
+    ui: Partial<Record<"base" | "icon" | "assistive" | "label" | "spinner", string | string[] | undefined>>;
+    iconDescription: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableBatchActions/TableBatchActions.d.vue.ts

@@ -0,0 +1,23 @@
+import type { TableBatchActionsProps } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<TableBatchActionsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: (event: MouseEvent) => any;
+    selectAll: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TableBatchActionsProps> & Readonly<{
+    onCancel?: ((event: MouseEvent) => any) | undefined;
+    onSelectAll?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    ui: import("#vuno/components/DataTable/DataTable.types").DataTableUi;
+    shouldShowBatchActions: boolean;
+    totalCount: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableBatchActions/TableBatchActions.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from "vue";
+import { useMessages, useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+import Button from "#vuno/components/Button/Button.vue";
+import TableActionList from "#vuno/components/TableActionList/TableActionList.vue";
+defineOptions({ name: "TableBatchActions" });
+const props = defineProps({
+  shouldShowBatchActions: { type: Boolean, required: false, default: false },
+  totalCount: { type: Number, required: false, default: void 0 },
+  totalSelected: { type: Number, required: true },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["cancel", "selectAll"]);
+const slots = defineSlots();
+const messages = useMessages();
+const active = computed(() => props.shouldShowBatchActions);
+const summary = computed(() => `${props.totalSelected} ${props.totalSelected === 1 ? messages.value.rowSelected : messages.value.rowsSelected}`);
+const hasSelectAll = computed(() => props.totalCount !== void 0);
+const hasActions = computed(() => filled(slots.default));
+const ui = useTheme(
+  "dataTable",
+  () => props.ui,
+  () => ({ batch: String(active.value) })
+);
+</script>
+
+<template>
+    <div
+        :aria-hidden="!active"
+        :class="ui.batchActions"
+        :data-batch-active="active || void 0"
+        :inert="!active || void 0"
+    >
+        <div :class="ui.batchSummary">
+            <p :class="ui.batchText">{{ summary }}</p>
+
+            <template v-if="hasSelectAll">
+                <span
+                    aria-hidden="true"
+                    :class="ui.batchDivider"
+                >
+                    |
+                </span>
+                <Button
+                    kind="primary"
+                    :label="`${messages.selectAll} (${props.totalCount})`"
+                    size="lg"
+                    @click="emit('selectAll', $event)"
+                />
+            </template>
+        </div>
+
+        <TableActionList>
+            <slot v-if="hasActions" />
+            <Button
+                kind="primary"
+                :label="messages.cancel"
+                size="lg"
+                :ui="{ base: ui.batchCancel }"
+                @click="emit('cancel', $event)"
+            />
+        </TableActionList>
+    </div>
+</template>

package/dist/runtime/app/components/TableBatchActions/TableBatchActions.vue.d.ts

@@ -0,0 +1,23 @@
+import type { TableBatchActionsProps } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<TableBatchActionsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: (event: MouseEvent) => any;
+    selectAll: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TableBatchActionsProps> & Readonly<{
+    onCancel?: ((event: MouseEvent) => any) | undefined;
+    onSelectAll?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    ui: import("#vuno/components/DataTable/DataTable.types").DataTableUi;
+    shouldShowBatchActions: boolean;
+    totalCount: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableBody/TableBody.d.vue.ts

@@ -0,0 +1,20 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    ariaLive?: 'assertive' | 'off' | 'polite';
+    ui?: DataTableUi;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: DataTableUi;
+    ariaLive: "assertive" | "off" | "polite";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableBody/TableBody.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "TableBody" });
+const props = defineProps({
+  ariaLive: { type: String, required: false, default: "polite" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const ui = useTheme("dataTable", () => props.ui);
+</script>
+
+<template>
+    <tbody
+        :aria-live="props.ariaLive"
+        :class="ui.body"
+    >
+        <slot />
+    </tbody>
+</template>

package/dist/runtime/app/components/TableBody/TableBody.vue.d.ts

@@ -0,0 +1,20 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    ariaLive?: 'assertive' | 'off' | 'polite';
+    ui?: DataTableUi;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: DataTableUi;
+    ariaLive: "assertive" | "off" | "polite";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableCell/TableCell.d.vue.ts

@@ -0,0 +1,22 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    colspan?: number;
+    headers?: string;
+    ui?: DataTableUi;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    headers: string;
+    ui: DataTableUi;
+    colspan: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};