@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/admin/list/data-table-context.d.ts

@@ -0,0 +1,88 @@
+/**
+ * DataTable render-pass plumbing — the Vue mechanism that lets ONE set of
+ * `<DataTableCol>` children render BOTH the header cells and the per-row body
+ * cells (the Vue analog of `@chelone/react`'s `DataTableRenderContext`
+ * header/data double pass in `list/data-table.tsx`).
+ *
+ * Vue has no React re-render pass, so the double render is done structurally:
+ * `<DataTable>` renders its default slot once inside a `PassProvider pass="header"`
+ * (Cols emit `<th>`) and once PER RECORD inside a `<DataTableRow>` that provides
+ * `pass="data"` + the row's record (Cols emit `<td>` reading the record). Each
+ * outlet re-instantiates the Col children, and provide/inject resolves each Col
+ * against its own outlet's provider — the standard "renderless provider wrapping
+ * slot content" pattern.
+ */
+import type { CreatePathType, Identifier, LooseRecord } from "@chelone/core";
+import { type InjectionKey, type PropType, type Ref, type VNode } from "vue";
+/** Which pass a `<DataTableCol>` is rendering in. */
+export type DataTablePass = "header" | "data";
+/** The provide/inject key for the current render pass (default `"data"`). */
+export declare const DataTablePassKey: InjectionKey<DataTablePass>;
+/** Read the ambient render pass (`"data"` when no provider is above). */
+export declare function useDataTablePass(): DataTablePass;
+/**
+ * A renderless provider that stamps a render pass onto its slot content. Used by
+ * `<DataTable>` to wrap the header render of the columns in `pass="header"`.
+ */
+export declare const PassProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    pass: {
+        type: () => DataTablePass;
+        required: true;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    pass: {
+        type: () => DataTablePass;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Renders the columns `<DataTable>` chose to show. A slot is called inside the
+ * component that renders it, so the filter and reorder run in `render` here,
+ * and a column added or a store write re-renders only this outlet.
+ *
+ * `report` runs after the outlet mounts and after each update, never during
+ * render, so the header outlet can publish the declared columns without a
+ * write in the render path.
+ */
+export declare const ColumnsOutlet: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    render: {
+        type: PropType<() => VNode[]>;
+        required: true;
+    };
+    report: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    render: {
+        type: PropType<() => VNode[]>;
+        required: true;
+    };
+    report: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    report: () => void;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** What a row click does: a link type, `"expand"`, `"toggleSelection"` or nothing. */
+export type DataTableRowClick = "edit" | "show" | "expand" | "toggleSelection" | false | ((record: LooseRecord, id: Identifier) => CreatePathType | "expand" | "toggleSelection" | false);
+/**
+ * Row behaviour `<DataTable>` shares with its `<DataTableRow>`s. The expanded
+ * ids live in `<DataTable>` so the header's expand-all button and every row's
+ * toggle act on the same state.
+ */
+export interface DataTableRowsContext {
+    rowClick: Ref<DataTableRowClick>;
+    /** True when the `#expand` slot is passed. */
+    expandEnabled: Ref<boolean>;
+    expandedIds: Ref<Identifier[]>;
+    toggleExpand: (id: Identifier) => void;
+    /** Whether the record can expand (true when no `isRowExpandable` is set). */
+    canExpand: (record: LooseRecord) => boolean;
+}
+export declare const DataTableRowsKey: InjectionKey<DataTableRowsContext>;

package/dist/components/admin/list/data-table-context.js

@@ -0,0 +1,39 @@
+import { defineComponent, provide, onMounted, onUpdated, inject } from "vue";
+const DataTablePassKey = /* @__PURE__ */ Symbol(
+  "chelone-data-table-pass"
+);
+function useDataTablePass() {
+  return inject(DataTablePassKey, "data");
+}
+const PassProvider = defineComponent({
+  name: "DataTablePassProvider",
+  props: {
+    pass: { type: String, required: true }
+  },
+  setup(props, { slots }) {
+    provide(DataTablePassKey, props.pass);
+    return () => slots.default?.();
+  }
+});
+const ColumnsOutlet = defineComponent({
+  name: "DataTableColumnsOutlet",
+  props: {
+    render: { type: Function, required: true },
+    report: { type: Function, default: void 0 }
+  },
+  setup(props) {
+    onMounted(() => props.report?.());
+    onUpdated(() => props.report?.());
+    return () => props.render();
+  }
+});
+const DataTableRowsKey = /* @__PURE__ */ Symbol(
+  "chelone-data-table-rows"
+);
+export {
+  ColumnsOutlet,
+  DataTablePassKey,
+  DataTableRowsKey,
+  PassProvider,
+  useDataTablePass
+};

package/dist/components/admin/list/data-table-number-col.vue.d.ts

@@ -0,0 +1,11 @@
+import type { DataTableColProps } from "./data-table-col.vue.js";
+/** Props for {@link DataTableNumberCol}. */
+export interface DataTableNumberColProps extends Omit<DataTableColProps, "source"> {
+    source: string;
+    /** BCP 47 locale(s) for `Intl.NumberFormat`. */
+    locales?: string | string[];
+    /** `Intl.NumberFormatOptions` (currency, percent, fraction digits…). */
+    options?: Intl.NumberFormatOptions;
+}
+declare const _default: import("vue").DefineComponent<DataTableNumberColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DataTableNumberColProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/list/data-table-number-col.vue.js

@@ -0,0 +1,46 @@
+import { defineComponent, openBlock, createBlock, unref, normalizeClass, withCtx, createVNode } from "vue";
+import { cn } from "../../../lib/utils.js";
+import _sfc_main$2 from "../fields/number-field.vue.js";
+import _sfc_main$1 from "./data-table-col.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "data-table-number-col",
+  props: {
+    source: {},
+    locales: {},
+    options: {},
+    label: {},
+    class: {},
+    disableSort: { type: Boolean },
+    sortByOrder: {},
+    headerClass: {},
+    cellClass: {},
+    conditionalClass: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        source: __props.source,
+        label: __props.label,
+        class: normalizeClass(props.class),
+        "disable-sort": __props.disableSort,
+        "sort-by-order": __props.sortByOrder,
+        "header-class": unref(cn)("text-right", __props.headerClass),
+        "cell-class": unref(cn)("text-right", __props.cellClass),
+        "conditional-class": __props.conditionalClass
+      }, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$2, {
+            source: __props.source,
+            locales: __props.locales,
+            options: __props.options
+          }, null, 8, ["source", "locales", "options"])
+        ]),
+        _: 1
+      }, 8, ["source", "label", "class", "disable-sort", "sort-by-order", "header-class", "cell-class", "conditional-class"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/data-table-number-col2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./data-table-number-col.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/data-table-row.vue.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<DataTableRow>` — one body row of a `<DataTable>`, the Vue analog of
+ * `@chelone/react`'s `DataTableRow`. It provides the row's record (so slotted
+ * field/`<DataTableCol>` children resolve it via `RecordContext`) and stamps the
+ * `"data"` render pass, then renders the columns inside a `<TableRow>`.
+ *
+ * Row-click navigation to the record's edit page is wired when a router adapter
+ * is present (mirrors the React twin's `rowClick="edit"` default); without one
+ * the row is inert (unit tests, no router).
+ *
+ * Selection (V3-b): when `hasBulkActions` is set the row renders a leading
+ * checkbox bound to the ambient list selection (`selectedIds` / `toggleItem`);
+ * toggling it stops propagation so it never triggers the row-click navigation.
+ */
+import type { LooseRecord } from "@chelone/core";
+type __VLS_Props = {
+    record: LooseRecord;
+    hasBulkActions?: boolean;
+};
+declare var __VLS_44: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_44) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/list/data-table-row.vue.js

@@ -0,0 +1,125 @@
+import { defineComponent, ref, watch, provide, computed, inject, openBlock, createBlock, unref, normalizeClass, withCtx, withModifiers, createVNode, createCommentVNode, renderSlot } from "vue";
+import { useListContext } from "../../../list/list-context.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import { useRouterAdapterOptional } from "../../../router/adapter.js";
+import { useCreatePath } from "../../../router/nav-composables.js";
+import _sfc_main$2 from "../../ui/button.vue.js";
+import _sfc_main$1 from "../../ui/checkbox.vue.js";
+import { TableRow, TableCell } from "../../ui/table.js";
+import { DataTablePassKey, DataTableRowsKey } from "./data-table-context.js";
+import { ChevronDownIcon } from "../buttons/icons.js";
+import { ChevronRightIcon } from "./list-icons.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "data-table-row",
+  props: {
+    record: {},
+    hasBulkActions: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const recordRef = ref(props.record);
+    watch(
+      () => props.record,
+      (next) => {
+        recordRef.value = next;
+      }
+    );
+    provide(RecordContextKey, recordRef);
+    provide(DataTablePassKey, "data");
+    const list = useListContext();
+    const recordId = computed(
+      () => props.record.id
+    );
+    const isSelected = computed(
+      () => list.selectedIds?.includes(recordId.value) ?? false
+    );
+    function onToggleSelect() {
+      if (recordId.value == null) return;
+      list.toggleItem(recordId.value);
+    }
+    const adapter = useRouterAdapterOptional();
+    const resource = useResourceContext();
+    const navigate = adapter?.useNavigate();
+    const createPath = adapter ? useCreatePath() : void 0;
+    const rows = inject(DataTableRowsKey, null);
+    const link = computed(() => {
+      const rowClick = rows?.rowClick.value ?? "edit";
+      return typeof rowClick === "function" ? rowClick(props.record, recordId.value) : rowClick;
+    });
+    const expandable = computed(
+      () => !!rows?.expandEnabled.value && rows.canExpand(props.record)
+    );
+    const isExpanded = computed(
+      () => rows?.expandedIds.value.includes(recordId.value) ?? false
+    );
+    const clickable = computed(() => {
+      if (link.value === false) return false;
+      if (link.value === "expand") return expandable.value;
+      if (link.value === "toggleSelection") return true;
+      return !!adapter;
+    });
+    function onRowClick() {
+      if (!clickable.value || recordId.value == null) return;
+      if (link.value === "expand") return rows?.toggleExpand(recordId.value);
+      if (link.value === "toggleSelection") return onToggleSelect();
+      if (!navigate || !createPath || !resource || !link.value) return;
+      navigate(createPath({ type: link.value, resource, id: recordId.value }));
+    }
+    function onToggleExpand() {
+      if (recordId.value != null) rows?.toggleExpand(recordId.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TableRow), {
+        class: normalizeClass(clickable.value ? "cursor-pointer" : ""),
+        "data-slot": "data-table-row",
+        onClick: onRowClick
+      }, {
+        default: withCtx(() => [
+          __props.hasBulkActions ? (openBlock(), createBlock(unref(TableCell), {
+            key: 0,
+            class: "w-8",
+            onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+            }, ["stop"]))
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                "model-value": isSelected.value,
+                "aria-label": "Select row",
+                "onUpdate:modelValue": onToggleSelect
+              }, null, 8, ["model-value"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          unref(rows)?.expandEnabled.value ? (openBlock(), createBlock(unref(TableCell), {
+            key: 1,
+            class: "w-8 p-0"
+          }, {
+            default: withCtx(() => [
+              expandable.value ? (openBlock(), createBlock(_sfc_main$2, {
+                key: 0,
+                variant: "ghost",
+                size: "icon",
+                class: "size-7",
+                "aria-label": isExpanded.value ? "Collapse row" : "Expand row",
+                "aria-expanded": isExpanded.value,
+                onClick: withModifiers(onToggleExpand, ["stop"])
+              }, {
+                default: withCtx(() => [
+                  isExpanded.value ? (openBlock(), createBlock(unref(ChevronDownIcon), { key: 0 })) : (openBlock(), createBlock(unref(ChevronRightIcon), { key: 1 }))
+                ]),
+                _: 1
+              }, 8, ["aria-label", "aria-expanded"])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/data-table-row2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./data-table-row.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/data-table.vue.d.ts

@@ -0,0 +1,50 @@
+import type { Identifier, LooseRecord } from "@chelone/core";
+import type { DataTableRowClick } from "./data-table-context.js";
+/** Props for {@link DataTable}. */
+export interface DataTableProps {
+    class?: string;
+    /** Enable row selection + the bulk-actions toolbar (also on if a `#bulkActions` slot is passed). */
+    bulkActions?: boolean;
+    /** Render `<ListPagination>` below the table (default true). */
+    pagination?: boolean;
+    /**
+     * What a row click does: `"edit"` (default), `"show"`, `"expand"`,
+     * `"toggleSelection"`, `false` (inert), or a function of `(record, id)`
+     * returning one of those or any other link type (`false` = do nothing).
+     */
+    rowClick?: DataTableRowClick;
+    /** Allow only one expanded row at a time (also hides the expand-all button). */
+    expandSingle?: boolean;
+    /** Which records can expand; a rejected row gets no toggle. All can by default. */
+    isRowExpandable?: (record: LooseRecord) => boolean;
+    /** A class for a body row, computed from its record and index. */
+    rowClass?: (record: LooseRecord, rowIndex: number) => string | false | undefined;
+    /**
+     * The store key of the hidden column ids; the order and the published
+     * columns are kept under keys derived from it. Defaults to
+     * `"<resource>.datatable"`.
+     */
+    storeKey?: string;
+    /** Column ids hidden until a choice is stored. */
+    defaultHiddenColumns?: string[];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DataTableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DataTableProps> & Readonly<{}>, {
+    pagination: boolean;
+    bulkActions: boolean;
+    rowClick: DataTableRowClick;
+    expandSingle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    expand?: (props: {
+        id: Identifier;
+        record: LooseRecord;
+        resource: string;
+    }) => any;
+} & {
+    bulkActions?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/list/data-table.vue.js

@@ -0,0 +1,269 @@
+import { defineComponent, useSlots, computed, ref, provide, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createBlock, createCommentVNode, withModifiers, createTextVNode, Fragment, renderList, renderSlot, cloneVNode, Comment } from "vue";
+import { defaultDataTableStoreKey, getDataTableColumnId, arrangeColumns } from "@chelone/core";
+import { useListContext } from "../../../list/list-context.js";
+import { useDataTableColumns } from "../../../list/use-data-table-columns.js";
+import { useResourceContext } from "../../../resource-context.js";
+import _sfc_main$1 from "../../ui/checkbox.vue.js";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../ui/table.js";
+import _sfc_main$5 from "./bulk-actions-toolbar.vue.js";
+import _sfc_main$2 from "../../ui/button.vue.js";
+import { DataTableRowsKey, PassProvider, ColumnsOutlet } from "./data-table-context.js";
+import _sfc_main$3 from "./data-table-row.vue.js";
+import { ChevronsUpDownIcon } from "./list-icons.js";
+import _sfc_main$4 from "./list-pagination.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "data-table",
+  props: {
+    class: {},
+    bulkActions: { type: Boolean, default: false },
+    pagination: { type: Boolean, default: true },
+    rowClick: { type: [String, Boolean, Function], default: "edit" },
+    expandSingle: { type: Boolean, default: false },
+    isRowExpandable: {},
+    rowClass: {},
+    storeKey: {},
+    defaultHiddenColumns: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const list = useListContext();
+    const hasBulkActions = computed(
+      () => props.bulkActions || slots.bulkActions != null
+    );
+    const resource = useResourceContext();
+    const expandEnabled = computed(() => slots.expand != null);
+    const expandedIds = ref([]);
+    const canExpand = (record) => props.isRowExpandable?.(record) ?? true;
+    function toggleExpand(id) {
+      if (expandedIds.value.includes(id)) {
+        expandedIds.value = expandedIds.value.filter((x) => x !== id);
+      } else {
+        expandedIds.value = props.expandSingle ? [id] : [...expandedIds.value, id];
+      }
+    }
+    provide(DataTableRowsKey, {
+      rowClick: computed(() => props.rowClick),
+      expandEnabled,
+      expandedIds,
+      toggleExpand,
+      canExpand
+    });
+    const rows = computed(() => list.data ?? []);
+    const isEmpty = computed(() => !list.isPending && rows.value.length === 0);
+    const rowId = (record) => record.id;
+    const rowKey = (record) => String(record.id);
+    const selectableIds = computed(
+      () => rows.value.map((r) => r.id)
+    );
+    const allSelected = computed(() => {
+      const selected = list.selectedIds ?? [];
+      return selected.length > 0 && selectableIds.value.length > 0 && selectableIds.value.every((id) => selected.includes(id));
+    });
+    const anyExpanded = computed(
+      () => rows.value.some((r) => expandedIds.value.includes(rowId(r)))
+    );
+    function handleToggleExpandAll() {
+      expandedIds.value = anyExpanded.value ? [] : rows.value.filter(canExpand).map(rowId);
+    }
+    const flattenVNodes = (nodes) => nodes.flatMap(
+      (node) => node.type === Comment ? [] : node.type === Fragment ? flattenVNodes(node.children ?? []) : [node]
+    );
+    const columnProps = (node) => node.props ?? {};
+    const { hidden, order, publish } = useDataTableColumns({
+      storeKey: () => props.storeKey ?? defaultDataTableStoreKey(resource ?? ""),
+      defaultHiddenColumns: () => props.defaultHiddenColumns
+    });
+    const declare = (nodes, ids) => {
+      const defaults = props.defaultHiddenColumns ?? [];
+      const seen = /* @__PURE__ */ new Set();
+      const declared = [];
+      nodes.forEach((node, index) => {
+        const id = ids[index];
+        if (id === void 0 || seen.has(id)) return;
+        seen.add(id);
+        const { source, label } = columnProps(node);
+        declared.push({
+          id,
+          ...typeof source === "string" && { source },
+          ...typeof label === "string" && { label },
+          defaultHidden: defaults.includes(id)
+        });
+      });
+      return declared;
+    };
+    let declaredColumns = [];
+    function arrangedColumns() {
+      const nodes = flattenVNodes(slots.default?.() ?? []);
+      const ids = nodes.map((node) => getDataTableColumnId(columnProps(node)));
+      declaredColumns = declare(nodes, ids);
+      const shown = arrangeColumns(ids, {
+        hidden: hidden.value,
+        order: order.value
+      });
+      const taken = /* @__PURE__ */ new Map();
+      return shown.map((index) => {
+        const node = nodes[index];
+        if (node.key != null) return node;
+        const id = ids[index];
+        const base = id === void 0 ? `index:${index}` : `id:${id}`;
+        const count = taken.get(base) ?? 0;
+        taken.set(base, count + 1);
+        return cloneVNode(node, { key: count === 0 ? base : `${base}:${count}` });
+      });
+    }
+    const reportColumns = () => publish(declaredColumns);
+    const columnCount = () => arrangedColumns().length + (hasBulkActions.value ? 1 : 0) + (expandEnabled.value ? 1 : 0);
+    function handleToggleSelectAll(checked) {
+      const selected = list.selectedIds ?? [];
+      if (checked) {
+        list.select(
+          selected.concat(selectableIds.value.filter((id) => !selected.includes(id)))
+        );
+      } else {
+        list.select(selected.filter((id) => !selectableIds.value.includes(id)));
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(props.class),
+        "data-slot": "data-table"
+      }, [
+        createVNode(unref(Table), null, {
+          default: withCtx(() => [
+            createVNode(unref(TableHeader), null, {
+              default: withCtx(() => [
+                createVNode(unref(TableRow), null, {
+                  default: withCtx(() => [
+                    hasBulkActions.value ? (openBlock(), createBlock(unref(TableHead), {
+                      key: 0,
+                      class: "w-8"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_sfc_main$1, {
+                          "model-value": allSelected.value,
+                          "aria-label": "Select all rows on this page",
+                          "onUpdate:modelValue": handleToggleSelectAll
+                        }, null, 8, ["model-value"])
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("", true),
+                    expandEnabled.value ? (openBlock(), createBlock(unref(TableHead), {
+                      key: 1,
+                      class: "w-8"
+                    }, {
+                      default: withCtx(() => [
+                        !__props.expandSingle ? (openBlock(), createBlock(_sfc_main$2, {
+                          key: 0,
+                          variant: "ghost",
+                          size: "icon",
+                          class: "size-7",
+                          "aria-label": anyExpanded.value ? "Collapse all rows" : "Expand all rows",
+                          onClick: withModifiers(handleToggleExpandAll, ["stop"])
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(ChevronsUpDownIcon))
+                          ]),
+                          _: 1
+                        }, 8, ["aria-label"])) : createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("", true),
+                    createVNode(unref(PassProvider), { pass: "header" }, {
+                      default: withCtx(() => [
+                        createVNode(unref(ColumnsOutlet), {
+                          render: () => arrangedColumns(),
+                          report: reportColumns
+                        }, null, 8, ["render"])
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            createVNode(unref(TableBody), null, {
+              default: withCtx(() => [
+                unref(list).isPending ? (openBlock(), createBlock(unref(TableRow), { key: 0 }, {
+                  default: withCtx(() => [
+                    createVNode(unref(TableCell), { "data-slot": "data-table-loading" }, {
+                      default: withCtx(() => [..._cache[0] || (_cache[0] = [
+                        createTextVNode("Loading…", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })) : isEmpty.value ? (openBlock(), createBlock(unref(TableRow), { key: 1 }, {
+                  default: withCtx(() => [
+                    createVNode(unref(TableCell), { "data-slot": "data-table-empty" }, {
+                      default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                        createTextVNode("No results found.", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(rows.value, (record, index) => {
+                  return openBlock(), createElementBlock(Fragment, {
+                    key: rowKey(record)
+                  }, [
+                    createVNode(_sfc_main$3, {
+                      record,
+                      "has-bulk-actions": hasBulkActions.value,
+                      class: normalizeClass(__props.rowClass?.(record, index) || void 0)
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(ColumnsOutlet), {
+                          render: () => arrangedColumns()
+                        }, null, 8, ["render"])
+                      ]),
+                      _: 1
+                    }, 8, ["record", "has-bulk-actions", "class"]),
+                    expandEnabled.value && canExpand(record) && expandedIds.value.includes(rowId(record)) ? (openBlock(), createBlock(unref(TableRow), {
+                      key: 0,
+                      "data-slot": "data-table-expand-panel"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(TableCell), {
+                          colspan: columnCount()
+                        }, {
+                          default: withCtx(() => [
+                            renderSlot(_ctx.$slots, "expand", {
+                              id: rowId(record),
+                              record,
+                              resource: unref(resource) ?? ""
+                            })
+                          ]),
+                          _: 2
+                        }, 1032, ["colspan"])
+                      ]),
+                      _: 2
+                    }, 1024)) : createCommentVNode("", true)
+                  ], 64);
+                }), 128))
+              ]),
+              _: 3
+            })
+          ]),
+          _: 3
+        }),
+        __props.pagination ? (openBlock(), createBlock(_sfc_main$4, {
+          key: 0,
+          class: "mt-2"
+        })) : createCommentVNode("", true),
+        hasBulkActions.value ? (openBlock(), createBlock(_sfc_main$5, { key: 1 }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "bulkActions")
+          ]),
+          _: 3
+        })) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};