@leavepulse/ui 0.86.1 → 0.87.0

package/dist/components/LpTable.vue.js

@@ -1,20 +1,22 @@
-import { defineComponent, computed, useAttrs, ref, shallowRef, watch, onMounted, useSlots, onBeforeUnmount, useId, h, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, renderSlot, createCommentVNode, Fragment, renderList, createBlock, createElementVNode, toDisplayString, createTextVNode, Transition, mergeProps, normalizeStyle, withModifiers, TransitionGroup, unref, nextTick } from "vue";
+import { defineComponent, computed, useAttrs, ref, shallowRef, watch, onMounted, useSlots, onBeforeUnmount, useId, h, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, renderSlot, createCommentVNode, createBlock, createTextVNode, toDisplayString, Fragment, renderList, createElementVNode, Transition, mergeProps, normalizeStyle, withModifiers, TransitionGroup, unref, nextTick } from "vue";
 import { usePaletteScope, suppressPaletteDiscovery, usePaletteCommands } from "../composables/usePaletteCommands.js";
 import { menuPaletteCommands } from "./commandPalette.js";
-import { _ as _sfc_main$1 } from "../chunks/LpDataList-Due909Cy.js";
-import { _ as _sfc_main$9 } from "../chunks/LpCheckbox-DcXC2qd5.js";
-import { _ as _sfc_main$8 } from "../chunks/LpContextMenu-CUFZIQX2.js";
-import { _ as _sfc_main$e } from "../chunks/LpEditable-DCPdDDBb.js";
-import { _ as _sfc_main$d } from "../chunks/LpEmptyState-DT8U4R8L.js";
-import { _ as _sfc_main$3 } from "../chunks/LpBadge-RFp8uHFt.js";
-import { _ as _sfc_main$6 } from "../chunks/LpIcon-DCGhNsCU.js";
-import { _ as _sfc_main$c } from "../chunks/LpSkeleton-BB6XIV-w.js";
-import { _ as _sfc_main$f } from "../chunks/LpPagination-V1wEhu1K.js";
-import { _ as _sfc_main$a } from "../chunks/LpPopover-BQSuxtai.js";
-import { _ as _sfc_main$7 } from "../chunks/LpScrollArea-CqvwfZs2.js";
-import { _ as _sfc_main$4 } from "../chunks/LpRollingText-B54Pje7P.js";
+import { _ as _sfc_main$1 } from "../chunks/LpDataList-DCtF7krm.js";
+import { _ as _sfc_main$d } from "../chunks/LpCheckbox-P7tEw8GO.js";
+import { _ as _sfc_main$c } from "../chunks/LpContextMenu-DYpDm6iI.js";
+import { _ as _sfc_main$g } from "../chunks/LpEditable-CeRAzYMv.js";
+import { _ as _sfc_main$f } from "../chunks/LpEmptyState-DrHBR3yh.js";
+import { _ as _sfc_main$8 } from "../chunks/LpBadge-Bh5roBr_.js";
+import { _ as _sfc_main$5 } from "../chunks/LpIcon-CxHFPwKt.js";
+import { _ as _sfc_main$e } from "../chunks/LpSkeleton-leTl53V9.js";
+import { _ as _sfc_main$h } from "../chunks/LpPagination-DGLntZJN.js";
+import { _ as _sfc_main$6 } from "../chunks/LpPopover-BQSuxtai.js";
+import { _ as _sfc_main$b } from "../chunks/LpScrollArea-CqvwfZs2.js";
+import { _ as _sfc_main$9 } from "../chunks/LpRollingText-B54Pje7P.js";
 import { _ as _sfc_main$2 } from "../chunks/LpShift-DAgS_d2x.js";
-import { _ as _sfc_main$b } from "../chunks/LpTableFilter-B_BFoBqS.js";
+import { _ as _sfc_main$7 } from "../chunks/LpTableFilter-BGFNKyUX.js";
+import { _ as _sfc_main$3 } from "../chunks/LpDropdownMenu-BPEsqZCN.js";
+import { _ as _sfc_main$a } from "../chunks/LpSegmented-DD8MPj4j.js";
 import { useKitStorage } from "../composables/usePersisted.js";
 import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { useTableFacets } from "./tableFacets.js";
@@ -27,12 +29,12 @@ import { orderPinned, pinOffsets, groupRows, rowWindow, presetHidden, sortByKeys
 import { devWarn } from "../composables/devWarn.js";
 import { startPointerDrag } from "../composables/pointerDrag.js";
 import { isHTMLElement, nodeWindow } from "../composables/realm.js";
-import { _ as _sfc_main$5 } from "../chunks/LpButton-DSHioIfD.js";
+import { _ as _sfc_main$4 } from "../chunks/LpButton-DSHioIfD.js";
 import { toCsv, downloadFile, fileStem } from "./exportData.js";
 import { toHiddenSets, sameHidden, summarizeShown, parseTableState, mergeRestored, serializeTableState, fromHiddenSets } from "./tableFilter.js";
 import { resolveRowMenu } from "./tableRowMenu.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-CEFsRz5J.css';const _hoisted_1 = {
+import '../assets/LpTable-ClBFQeTd.css';const _hoisted_1 = {
   key: 0,
   class: "flex min-h-8 flex-wrap items-center gap-x-3 gap-y-2 pb-3 text-xs"
 };
@@ -42,61 +44,101 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = {
   key: 1,
+  class: "flex flex-wrap items-center gap-1 text-sm"
+};
+const _hoisted_4 = {
+  key: 2,
   class: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5"
 };
-const _hoisted_4 = { class: "truncate" };
-const _hoisted_5 = { class: "text-muted" };
-const _hoisted_6 = { class: "flex items-center gap-2 whitespace-nowrap text-muted" };
-const _hoisted_7 = {
+const _hoisted_5 = { class: "truncate" };
+const _hoisted_6 = { class: "text-muted" };
+const _hoisted_7 = { class: "flex items-center gap-2 whitespace-nowrap text-muted" };
+const _hoisted_8 = {
   key: 0,
   class: "flex items-center gap-2"
 };
-const _hoisted_8 = {
+const _hoisted_9 = {
   key: 0,
   class: "flex items-center gap-2"
 };
-const _hoisted_9 = { class: "hidden sm:inline" };
-const _hoisted_10 = ["aria-rowcount"];
-const _hoisted_11 = { class: "border-b border-line bg-surface-soft" };
-const _hoisted_12 = ["inert"];
-const _hoisted_13 = ["data-lp-col", "aria-sort"];
-const _hoisted_14 = ["onClick"];
-const _hoisted_15 = {
+const _hoisted_10 = { class: "hidden sm:inline" };
+const _hoisted_11 = ["aria-rowcount"];
+const _hoisted_12 = { class: "border-b border-line bg-surface-soft" };
+const _hoisted_13 = ["inert"];
+const _hoisted_14 = ["data-lp-col", "aria-sort"];
+const _hoisted_15 = ["onClick"];
+const _hoisted_16 = {
   key: 1,
   class: "tabular-nums text-brand"
 };
-const _hoisted_16 = ["aria-label", "data-lp-filter"];
-const _hoisted_17 = ["aria-label", "aria-valuenow", "data-lp-resize", "onPointerdown", "onDblclick", "onKeydown"];
-const _hoisted_18 = {
+const _hoisted_17 = ["aria-label", "data-lp-filter"];
+const _hoisted_18 = ["aria-label", "aria-valuenow", "data-lp-resize", "onPointerdown", "onDblclick", "onKeydown"];
+const _hoisted_19 = {
   key: 0,
   class: "sr-only"
 };
-const _hoisted_19 = {
+const _hoisted_20 = {
   key: "lp-table-empty",
   class: "lp-row-empty"
 };
-const _hoisted_20 = ["colspan"];
-const _hoisted_21 = {
+const _hoisted_21 = ["colspan"];
+const _hoisted_22 = {
   key: "lp-virtual-before",
   "aria-hidden": "true"
 };
-const _hoisted_22 = ["colspan"];
 const _hoisted_23 = ["colspan"];
-const _hoisted_24 = ["aria-expanded", "aria-label", "onClick"];
-const _hoisted_25 = {
+const _hoisted_24 = ["colspan"];
+const _hoisted_25 = ["aria-expanded", "aria-label", "onClick"];
+const _hoisted_26 = {
   key: 1,
   class: "border-b border-line/60 last:border-0",
   "data-lp-row-detail": ""
 };
-const _hoisted_26 = ["colspan"];
-const _hoisted_27 = ["onContextmenu", "aria-rowindex", "data-paint-key", "data-lp-context-row", "onClick", "onPointerdown"];
-const _hoisted_28 = ["aria-expanded", "aria-label", "onClick"];
-const _hoisted_29 = ["onPointerdown"];
-const _hoisted_30 = {
+const _hoisted_27 = ["colspan"];
+const _hoisted_28 = ["onContextmenu", "aria-rowindex", "data-paint-key", "data-lp-context-row", "onClick", "onPointerdown"];
+const _hoisted_29 = ["aria-expanded", "aria-label", "onClick"];
+const _hoisted_30 = ["onPointerdown"];
+const _hoisted_31 = {
   key: "lp-virtual-after",
   "aria-hidden": "true"
 };
-const _hoisted_31 = ["colspan"];
+const _hoisted_32 = ["colspan"];
+const _hoisted_33 = {
+  key: 1,
+  class: "sr-only"
+};
+const _hoisted_34 = ["aria-expanded", "aria-label", "onClick"];
+const _hoisted_35 = ["data-paint-key", "data-lp-context-row", "onContextmenu", "onClick", "onPointerdown"];
+const _hoisted_36 = ["onPointerdown"];
+const _hoisted_37 = ["data-cue", "inert"];
+const _hoisted_38 = { class: "flex min-w-0 flex-col gap-2 p-4" };
+const _hoisted_39 = {
+  key: 0,
+  class: "min-w-0 truncate pr-6 font-medium text-ink"
+};
+const _hoisted_40 = {
+  key: 1,
+  class: "grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-3 gap-y-1 text-sm"
+};
+const _hoisted_41 = { class: "text-xs text-muted" };
+const _hoisted_42 = { class: "min-w-0 truncate text-ink" };
+const _hoisted_43 = {
+  key: 2,
+  class: "min-w-0 flex-1"
+};
+const _hoisted_44 = {
+  key: 0,
+  class: "min-w-0 truncate font-medium text-ink"
+};
+const _hoisted_45 = {
+  key: 1,
+  class: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted"
+};
+const _hoisted_46 = {
+  key: 0,
+  "aria-hidden": "true"
+};
+const _hoisted_47 = ["title"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -148,9 +190,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     expandable: { type: [Boolean, Function] },
     expanded: { default: void 0 },
     virtualRowHeight: { default: void 0 },
-    virtualOverscan: { default: 6 }
+    virtualOverscan: { default: 6 },
+    layout: { default: void 0 },
+    layouts: { default: void 0 },
+    layoutBelow: { default: void 0 },
+    variant: { default: "framed" },
+    cardWidth: { default: "16rem" }
   },
-  emits: ["update:selected", "update:sort", "update:filters", "resetFilters", "update:allMatching", "update:selectionToken", "update:sorts", "update:columnWidths", "update:columnPreset", "update:collapsedGroups", "update:expanded", "cellEdit", "rowClick"],
+  emits: ["update:selected", "update:sort", "update:filters", "resetFilters", "update:allMatching", "update:selectionToken", "update:sorts", "update:columnWidths", "update:columnPreset", "update:collapsedGroups", "update:expanded", "cellEdit", "rowClick", "update:layout"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const labelSet = useLabels(
@@ -195,7 +242,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         collapseRow: "Collapse row",
         groupCount: "{label} ({count})",
         expandGroup: "Expand {label}",
-        collapseGroup: "Collapse {label}"
+        collapseGroup: "Collapse {label}",
+        layoutTable: "Table",
+        layoutCards: "Cards",
+        layoutList: "List",
+        layoutSwitch: "View",
+        sortBy: "Sort"
       },
       () => props.labels
     );
@@ -647,6 +699,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (state.hidden) writeHidden(mergeRestored(hiddenValues.value, state.hidden));
           if (state.columns) hiddenColumns.value = new Set(state.columns);
         }
+        const layout = store.get(`${storageKey.value}:layout`);
+        if ((layout === "table" || layout === "cards" || layout === "list") && (!props.layouts || props.layouts.includes(layout))) {
+          ownLayout.value = layout;
+          if (props.layout !== void 0 && props.layout !== layout) emit("update:layout", layout);
+        }
       }
       restored.value = true;
     });
@@ -801,7 +858,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const slots = useSlots();
     const showBar = computed(
-      () => props.summary || props.exportable || !!slots.toolbar || !!props.selectable && props.selected.length > 0 || activeFilters.value.length > 0
+      () => props.summary || props.exportable || !!slots.toolbar || layoutChoices.value.length > 0 || !!props.selectable && props.selected.length > 0 || activeFilters.value.length > 0
     );
     const filteredOut = computed(() => {
       if (busy.value || failed.value || displayRows.value.length) return false;
@@ -810,6 +867,75 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return props.rows.length > 0;
     });
     const cellY = computed(() => props.density === "compact" ? "py-1.5" : "py-3");
+    const ownLayout = ref("table");
+    const chosenLayout = computed(() => props.layout ?? ownLayout.value);
+    const frameWidth = ref(Number.POSITIVE_INFINITY);
+    useResizeObserver(frameEl, (_, el) => frameWidth.value = el.clientWidth, { immediate: true });
+    const activeLayout = computed(
+      () => chosenLayout.value === "table" && props.layoutBelow && frameWidth.value < props.layoutBelow ? "list" : chosenLayout.value
+    );
+    const layoutChoices = computed(() => props.layouts && props.layouts.length > 1 ? props.layouts : []);
+    const LAYOUT_ICONS = {
+      table: "lucide:table-2",
+      cards: "lucide:layout-grid",
+      list: "lucide:list"
+    };
+    const layoutOptions = computed(
+      () => layoutChoices.value.map((value) => {
+        const label = text.value[`layout${value[0].toUpperCase()}${value.slice(1)}`] ?? value;
+        return { value, icon: LAYOUT_ICONS[value], ariaLabel: label };
+      })
+    );
+    function chooseLayout(next) {
+      const layout = next;
+      if (layout === chosenLayout.value) return;
+      ownLayout.value = layout;
+      emit("update:layout", layout);
+    }
+    const headerless = computed(() => activeLayout.value !== "table");
+    const sortableColumns = computed(() => props.columns.filter((col) => col.sortable && col.label));
+    const filterableColumns = computed(() => props.columns.filter((col) => col.filterable && col.label));
+    function sortMenu() {
+      const current = activeSort.value;
+      const dir = current?.dir ?? "asc";
+      return [
+        // The columns, the one sorted by ticked; picking one keeps the direction.
+        ...sortableColumns.value.map((col) => ({
+          label: col.label,
+          selected: current?.key === col.key,
+          onSelect: () => writeSorts([{ key: col.key, dir }])
+        })),
+        {
+          label: text.value.sortAsc,
+          icon: "lucide:arrow-up",
+          separatorBefore: true,
+          disabled: !current,
+          selected: current?.dir === "asc",
+          onSelect: () => current && writeSorts([{ key: current.key, dir: "asc" }])
+        },
+        {
+          label: text.value.sortDesc,
+          icon: "lucide:arrow-down",
+          disabled: !current,
+          selected: current?.dir === "desc",
+          onSelect: () => current && writeSorts([{ key: current.key, dir: "desc" }])
+        },
+        { label: text.value.sortClear, icon: "lucide:x", separatorBefore: true, disabled: !current, onSelect: () => writeSorts([]) }
+      ];
+    }
+    const sortSummary = computed(() => {
+      const current = activeSort.value;
+      const col = current && props.columns.find((c) => c.key === current.key);
+      return col ? col.label : text.value.sortBy;
+    });
+    const cardColumns = computed(
+      () => orderPinned(props.columns.filter((col) => !hiddenColumns.value.has(col.key)))
+    );
+    const titleColumn = computed(() => cardColumns.value[0]);
+    const fieldColumns = computed(() => cardColumns.value.slice(1).filter((col) => col.label));
+    watch(chosenLayout, (layout) => {
+      if (storageKey.value && restored.value) store.set(`${storageKey.value}:layout`, layout);
+    });
     const SKELETON_WIDTHS = [72, 48, 88, 60, 40, 80, 56];
     function skeletonWidth(row, col) {
       return `${SKELETON_WIDTHS[(row * 3 + col * 2) % SKELETON_WIDTHS.length]}%`;
@@ -874,7 +1000,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     useResizeObserver(viewportEl, (_, el) => viewportHeight.value = el.clientHeight, { immediate: true });
     const rowWindowed = computed(
-      () => props.virtualRowHeight ? rowWindow(scrollTop.value, viewportHeight.value, props.virtualRowHeight, allEntries.value.length, props.virtualOverscan) : null
+      () => props.virtualRowHeight && !headerless.value ? rowWindow(scrollTop.value, viewportHeight.value, props.virtualRowHeight, allEntries.value.length, props.virtualOverscan) : null
     );
     const viewEntries = computed(
       () => rowWindowed.value ? allEntries.value.slice(rowWindowed.value.start, rowWindowed.value.end) : allEntries.value
@@ -987,9 +1113,69 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _ctx.$slots.toolbar ? (openBlock(), createElementBlock("div", _hoisted_2, [
                 renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
               ])) : createCommentVNode("", true),
-              activeFilters.value.length ? (openBlock(), createElementBlock("div", _hoisted_3, [
+              headerless.value && (sortableColumns.value.length || filterableColumns.value.length) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                sortableColumns.value.length ? (openBlock(), createBlock(_sfc_main$3, {
+                  key: 0,
+                  items: sortMenu()
+                }, {
+                  trigger: withCtx(() => [
+                    createVNode(_sfc_main$4, {
+                      variant: "ghost",
+                      size: "sm",
+                      "aria-label": text.value.sortBy
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_sfc_main$5, {
+                          name: activeSort.value ? activeSort.value.dir === "asc" ? "lucide:arrow-up" : "lucide:arrow-down" : "lucide:arrow-up-down",
+                          size: 14
+                        }, null, 8, ["name"]),
+                        createTextVNode(" " + toDisplayString(sortSummary.value), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["aria-label"])
+                  ]),
+                  _: 1
+                }, 8, ["items"])) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(filterableColumns.value, (col) => {
+                  return openBlock(), createBlock(_sfc_main$6, {
+                    key: col.key,
+                    align: "start",
+                    "panel-class": "w-72",
+                    "aria-label": text.value.filterColumn.replace("{column}", col.label)
+                  }, {
+                    trigger: withCtx(() => [
+                      createVNode(_sfc_main$4, {
+                        variant: "ghost",
+                        size: "sm",
+                        class: normalizeClass(hiddenValues.value[col.key]?.size ? "text-brand" : ""),
+                        "aria-label": text.value.filterColumn.replace("{column}", col.label),
+                        "data-lp-filter": col.key
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$5, {
+                            name: hiddenValues.value[col.key]?.size ? "lucide:filter-x" : "lucide:filter",
+                            size: 14
+                          }, null, 8, ["name"]),
+                          createTextVNode(" " + toDisplayString(col.label), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["class", "aria-label", "data-lp-filter"])
+                    ]),
+                    default: withCtx(() => [
+                      createVNode(_sfc_main$7, {
+                        options: facetOptions.value.get(col.key)?.value ?? [],
+                        hidden: hiddenValues.value[col.key] ?? /* @__PURE__ */ new Set(),
+                        labels: filterLabels(),
+                        "onUpdate:hidden": (next) => setHidden(col.key, next)
+                      }, null, 8, ["options", "hidden", "labels", "onUpdate:hidden"])
+                    ]),
+                    _: 2
+                  }, 1032, ["aria-label"]);
+                }), 128))
+              ])) : createCommentVNode("", true),
+              activeFilters.value.length ? (openBlock(), createElementBlock("div", _hoisted_4, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(activeFilters.value, (f) => {
-                  return openBlock(), createBlock(_sfc_main$3, {
+                  return openBlock(), createBlock(_sfc_main$8, {
                     key: f.col.key,
                     tone: "brand",
                     removable: "",
@@ -998,8 +1184,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     onRemove: ($event) => showAllValues(f.col.key)
                   }, {
                     default: withCtx(() => [
-                      createElementVNode("span", _hoisted_4, [
-                        createElementVNode("span", _hoisted_5, toDisplayString(f.col.label) + ":", 1),
+                      createElementVNode("span", _hoisted_5, [
+                        createElementVNode("span", _hoisted_6, toDisplayString(f.col.label) + ":", 1),
                         createTextVNode(" " + toDisplayString(f.text), 1)
                       ])
                     ]),
@@ -1018,8 +1204,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: "ml-auto shrink-0"
               }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_6, [
-                    createVNode(_sfc_main$4, {
+                  createElementVNode("div", _hoisted_7, [
+                    createVNode(_sfc_main$9, {
                       value: statusText.value,
                       align: "end",
                       class: normalizeClass(["tabular-nums", __props.selectable && __props.selected.length ? "font-medium text-ink" : ""]),
@@ -1032,7 +1218,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       "leave-to-class": "opacity-0"
                     }, {
                       default: withCtx(() => [
-                        __props.selectable && __props.selected.length ? (openBlock(), createElementBlock("span", _hoisted_7, [
+                        __props.selectable && __props.selected.length ? (openBlock(), createElementBlock("span", _hoisted_8, [
                           createVNode(Transition, {
                             "enter-active-class": "transition-opacity duration-fast motion-reduce:transition-none",
                             "leave-active-class": "transition-opacity duration-fast motion-reduce:transition-none",
@@ -1040,8 +1226,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             "leave-to-class": "opacity-0"
                           }, {
                             default: withCtx(() => [
-                              __props.load && pageAllSelected.value && !__props.allMatching && total.value > pageKeys.value.length ? (openBlock(), createElementBlock("span", _hoisted_8, [
-                                createElementVNode("span", _hoisted_9, toDisplayString(text.value.pageSelected.replace("{count}", String(pageKeys.value.length))), 1),
+                              __props.load && pageAllSelected.value && !__props.allMatching && total.value > pageKeys.value.length ? (openBlock(), createElementBlock("span", _hoisted_9, [
+                                createElementVNode("span", _hoisted_10, toDisplayString(text.value.pageSelected.replace("{count}", String(pageKeys.value.length))), 1),
                                 createElementVNode("button", {
                                   type: "button",
                                   class: "rounded-control px-1.5 py-0.5 font-medium text-brand outline-none transition-colors duration-fast hover:bg-brand-soft focus-visible:ring-2 focus-visible:ring-ring",
@@ -1065,14 +1251,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 3
                     }),
-                    __props.exportable ? (openBlock(), createBlock(_sfc_main$5, {
+                    layoutOptions.value.length ? (openBlock(), createBlock(_sfc_main$a, {
                       key: 0,
+                      "model-value": chosenLayout.value,
+                      options: layoutOptions.value,
+                      size: "sm",
+                      "aria-label": text.value.layoutSwitch,
+                      "onUpdate:modelValue": chooseLayout
+                    }, null, 8, ["model-value", "options", "aria-label"])) : createCommentVNode("", true),
+                    __props.exportable ? (openBlock(), createBlock(_sfc_main$4, {
+                      key: 1,
                       variant: "ghost",
                       size: "sm",
                       onClick: _cache[1] || (_cache[1] = ($event) => exportCsv())
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$6, {
+                        createVNode(_sfc_main$5, {
                           name: "lucide:download",
                           size: 14
                         }),
@@ -1093,14 +1287,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: "flex min-h-0 flex-auto flex-col"
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$7, mergeProps(scrollAttrs.value, {
+            !headerless.value ? (openBlock(), createBlock(_sfc_main$b, mergeProps({ key: 0 }, scrollAttrs.value, {
               fade: false,
-              class: "min-h-0 flex-1 rounded-card border border-line bg-surface",
+              class: ["min-h-0 flex-1", __props.variant === "framed" ? "rounded-card border border-line bg-surface" : ""],
               style: __props.load && floor.value ? { minHeight: `${floor.value + 2}px` } : void 0,
               "bar-inset-top": barInsetTop.value
             }), {
               default: withCtx(() => [
-                createVNode(_sfc_main$8, {
+                createVNode(_sfc_main$c, {
                   items: contextMenu.value,
                   always: "",
                   "no-hint": !__props.rowMenu,
@@ -1122,7 +1316,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         ref: headEl,
                         class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10 bg-surface-soft" : "")
                       }, [
-                        createElementVNode("tr", _hoisted_11, [
+                        createElementVNode("tr", _hoisted_12, [
                           expansionOn.value ? (openBlock(), createElementBlock("th", {
                             key: 0,
                             class: normalizeClass(["w-px p-0", cellY.value]),
@@ -1137,12 +1331,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               class: normalizeClass(["lp-tick lp-tick-open", ticksShown.value ? "" : "lp-tick-hidden"]),
                               inert: !ticksShown.value
                             }, [
-                              createVNode(_sfc_main$9, {
+                              createVNode(_sfc_main$d, {
                                 "model-value": allChecked.value,
                                 indeterminate: someChecked.value,
                                 "onUpdate:modelValue": toggleAll
                               }, null, 8, ["model-value", "indeterminate"])
-                            ], 10, _hoisted_12)
+                            ], 10, _hoisted_13)
                           ], 6)) : createCommentVNode("", true),
                           (openBlock(true), createElementBlock(Fragment, null, renderList(shownColumns.value, (col) => {
                             return openBlock(), createElementBlock("th", {
@@ -1152,21 +1346,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               "data-lp-col": measuredCol(col),
                               "aria-sort": sortOf(col) ? sortOf(col).dir === "asc" ? "ascending" : "descending" : void 0
                             }, [
-                              col.sortable || col.filterable ? (openBlock(), createBlock(_sfc_main$8, {
+                              col.sortable || col.filterable ? (openBlock(), createBlock(_sfc_main$c, {
                                 key: 0,
                                 items: headerMenu(col)
                               }, {
                                 default: withCtx(() => [
                                   createElementVNode("button", {
                                     type: "button",
-                                    class: normalizeClass(["group/sort -mx-1 inline-flex items-center gap-1 rounded-small px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", [
+                                    class: normalizeClass(["group/sort -mx-1 inline-flex items-center gap-1 rounded-small px-1 uppercase outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", [
                                       col.align === "right" ? "flex-row-reverse" : "",
                                       sortOf(col) ? "text-ink" : ""
                                     ]]),
                                     onClick: ($event) => toggleSort(col, $event)
                                   }, [
                                     createTextVNode(toDisplayString(col.label) + " ", 1),
-                                    col.sortable ? (openBlock(), createBlock(_sfc_main$6, {
+                                    col.sortable ? (openBlock(), createBlock(_sfc_main$5, {
                                       key: 0,
                                       name: sortIcon(col),
                                       size: 13,
@@ -1175,14 +1369,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                         sortOf(col) ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
                                       ])
                                     }, null, 8, ["name", "class"])) : createCommentVNode("", true),
-                                    sortPosition(col) ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(sortPosition(col)), 1)) : createCommentVNode("", true)
-                                  ], 10, _hoisted_14)
+                                    sortPosition(col) ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(sortPosition(col)), 1)) : createCommentVNode("", true)
+                                  ], 10, _hoisted_15)
                                 ]),
                                 _: 2
                               }, 1032, ["items"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                 createTextVNode(toDisplayString(col.label), 1)
                               ], 64)),
-                              col.filterable ? (openBlock(), createBlock(_sfc_main$a, {
+                              col.filterable ? (openBlock(), createBlock(_sfc_main$6, {
                                 key: 2,
                                 align: "start",
                                 "panel-class": "w-72",
@@ -1195,14 +1389,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     "aria-label": text.value.filterColumn.replace("{column}", col.label),
                                     "data-lp-filter": col.key
                                   }, [
-                                    createVNode(_sfc_main$6, {
+                                    createVNode(_sfc_main$5, {
                                       name: hiddenValues.value[col.key]?.size ? "lucide:filter-x" : "lucide:filter",
                                       size: 12
                                     }, null, 8, ["name"])
-                                  ], 10, _hoisted_16)
+                                  ], 10, _hoisted_17)
                                 ]),
                                 default: withCtx(() => [
-                                  createVNode(_sfc_main$b, {
+                                  createVNode(_sfc_main$7, {
                                     options: facetOptions.value.get(col.key)?.value ?? [],
                                     hidden: hiddenValues.value[col.key] ?? /* @__PURE__ */ new Set(),
                                     labels: filterLabels(),
@@ -1225,8 +1419,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 }, ["stop"])),
                                 onDblclick: withModifiers(($event) => clearWidth(col), ["stop"]),
                                 onKeydown: ($event) => onResizeKey($event, col)
-                              }, null, 40, _hoisted_17)) : createCommentVNode("", true)
-                            ], 14, _hoisted_13);
+                              }, null, 40, _hoisted_18)) : createCommentVNode("", true)
+                            ], 14, _hoisted_14);
                           }), 128))
                         ])
                       ], 2),
@@ -1257,26 +1451,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   key: col.key,
                                   class: normalizeClass(["px-4", [alignClass(col.align), cellY.value]])
                                 }, [
-                                  createVNode(_sfc_main$c, {
+                                  createVNode(_sfc_main$e, {
                                     class: "inline-block h-3 align-middle",
                                     style: normalizeStyle({ width: skeletonWidth(n, ci) })
                                   }, null, 8, ["style"]),
-                                  n === 1 && ci === 0 ? (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(text.value.loading), 1)) : createCommentVNode("", true)
+                                  n === 1 && ci === 0 ? (openBlock(), createElementBlock("span", _hoisted_19, toDisplayString(text.value.loading), 1)) : createCommentVNode("", true)
                                 ], 2);
                               }), 128))
                             ]);
-                          }), 128)) : displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_19, [
+                          }), 128)) : displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_20, [
                             createElementVNode("td", {
                               colspan: colSpan.value,
                               class: "p-0"
                             }, [
-                              createVNode(_sfc_main$d, {
+                              createVNode(_sfc_main$f, {
                                 compact: "",
                                 icon: failed.value ? "lucide:circle-alert" : filteredOut.value ? "lucide:filter-x" : __props.emptyIcon,
                                 title: failed.value ? text.value.error : filteredOut.value ? text.value.noMatches : text.value.empty
                               }, {
                                 default: withCtx(() => [
-                                  filteredOut.value ? (openBlock(), createBlock(_sfc_main$5, {
+                                  filteredOut.value ? (openBlock(), createBlock(_sfc_main$4, {
                                     key: 0,
                                     variant: "outline",
                                     size: "sm",
@@ -1290,14 +1484,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 ]),
                                 _: 1
                               }, 8, ["icon", "title"])
-                            ], 8, _hoisted_20)
+                            ], 8, _hoisted_21)
                           ])) : createCommentVNode("", true),
-                          rowWindowed.value?.before ? (openBlock(), createElementBlock("tr", _hoisted_21, [
+                          rowWindowed.value?.before ? (openBlock(), createElementBlock("tr", _hoisted_22, [
                             createElementVNode("td", {
                               colspan: colSpan.value,
                               class: "p-0",
                               style: normalizeStyle({ height: `${rowWindowed.value.before}px` })
-                            }, null, 12, _hoisted_22)
+                            }, null, 12, _hoisted_23)
                           ])) : createCommentVNode("", true),
                           (openBlock(true), createElementBlock(Fragment, null, renderList(viewEntries.value, (entry) => {
                             return openBlock(), createElementBlock(Fragment, {
@@ -1326,16 +1520,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       "aria-label": (entry.collapsed ? text.value.expandGroup : text.value.collapseGroup).replace("{label}", entry.label),
                                       onClick: ($event) => toggleGroup(entry.group)
                                     }, [
-                                      createVNode(_sfc_main$6, {
+                                      createVNode(_sfc_main$5, {
                                         name: "lucide:chevron-right",
                                         size: 14,
                                         class: normalizeClass(["transition-transform duration-fast motion-reduce:transition-none", entry.collapsed ? "" : "rotate-90"])
                                       }, null, 8, ["class"]),
                                       createTextVNode(" " + toDisplayString(entry.label), 1)
-                                    ], 8, _hoisted_24)
+                                    ], 8, _hoisted_25)
                                   ], true)
-                                ], 10, _hoisted_23)
-                              ], 4)) : entry.kind === "detail" ? (openBlock(), createElementBlock("tr", _hoisted_25, [
+                                ], 10, _hoisted_24)
+                              ], 4)) : entry.kind === "detail" ? (openBlock(), createElementBlock("tr", _hoisted_26, [
                                 createElementVNode("td", {
                                   colspan: colSpan.value,
                                   class: "px-4 py-3"
@@ -1344,7 +1538,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     row: entry.row,
                                     close: () => toggleExpanded(keyFor(entry.row, entry.index))
                                   }, void 0, true)
-                                ], 8, _hoisted_26)
+                                ], 8, _hoisted_27)
                               ])) : (openBlock(), createElementBlock("tr", mergeProps({
                                 key: 2,
                                 onContextmenu: ($event) => onRowContextMenu(entry.row),
@@ -1374,12 +1568,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     "aria-label": expandedKeys.value.has(keyFor(entry.row, entry.index)) ? text.value.collapseRow : text.value.expandRow,
                                     onClick: ($event) => toggleExpanded(keyFor(entry.row, entry.index))
                                   }, [
-                                    createVNode(_sfc_main$6, {
+                                    createVNode(_sfc_main$5, {
                                       name: "lucide:chevron-right",
                                       size: 14,
                                       class: normalizeClass(["transition-transform duration-fast motion-reduce:transition-none", expandedKeys.value.has(keyFor(entry.row, entry.index)) ? "rotate-90" : ""])
                                     }, null, 8, ["class"])
-                                  ], 8, _hoisted_28)) : createCommentVNode("", true)
+                                  ], 8, _hoisted_29)) : createCommentVNode("", true)
                                 ], 34)) : createCommentVNode("", true),
                                 __props.selectable ? (openBlock(), createElementBlock("td", {
                                   key: 1,
@@ -1391,12 +1585,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   createElementVNode("div", {
                                     class: normalizeClass(["lp-tick lp-tick-open", ticksShown.value ? "" : "lp-tick-cue"])
                                   }, [
-                                    createVNode(_sfc_main$9, {
+                                    createVNode(_sfc_main$d, {
                                       "model-value": isSelected(keyFor(entry.row, entry.index)),
                                       "onUpdate:modelValue": (v) => toggleRow(keyFor(entry.row, entry.index), v)
                                     }, null, 8, ["model-value", "onUpdate:modelValue"])
                                   ], 2)
-                                ], 42, _hoisted_29)) : createCommentVNode("", true),
+                                ], 42, _hoisted_30)) : createCommentVNode("", true),
                                 (openBlock(true), createElementBlock(Fragment, null, renderList(shownColumns.value, (col) => {
                                   return openBlock(), createElementBlock("td", {
                                     key: col.key,
@@ -1418,7 +1612,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                         onKeydown: _cache[8] || (_cache[8] = withModifiers(() => {
                                         }, ["stop"]))
                                       }, [
-                                        createVNode(_sfc_main$e, {
+                                        createVNode(_sfc_main$g, {
                                           "model-value": String(entry.row[col.key] ?? ""),
                                           label: col.label,
                                           size: "sm",
@@ -1431,33 +1625,250 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     ], true)
                                   ], 6);
                                 }), 128))
-                              ], 16, _hoisted_27))
+                              ], 16, _hoisted_28))
                             ], 64);
                           }), 128)),
-                          rowWindowed.value?.after ? (openBlock(), createElementBlock("tr", _hoisted_30, [
+                          rowWindowed.value?.after ? (openBlock(), createElementBlock("tr", _hoisted_31, [
                             createElementVNode("td", {
                               colspan: colSpan.value,
                               class: "p-0",
                               style: normalizeStyle({ height: `${rowWindowed.value.after}px` })
-                            }, null, 12, _hoisted_31)
+                            }, null, 12, _hoisted_32)
                           ])) : createCommentVNode("", true)
                         ]),
                         _: 3
                       }, 8, ["css", "class", "aria-busy"])
-                    ], 14, _hoisted_10)
+                    ], 14, _hoisted_11)
                   ]),
                   _: 3
                 }, 8, ["items", "no-hint", "title", "subtitle", "title-icon", "title-image"])
               ]),
               _: 3
-            }, 16, ["style", "bar-inset-top"])
+            }, 16, ["class", "style", "bar-inset-top"])) : (openBlock(), createBlock(_sfc_main$c, {
+              key: 1,
+              items: contextMenu.value,
+              always: "",
+              "no-hint": !__props.rowMenu,
+              title: menuHead.value?.title,
+              subtitle: menuHead.value?.subtitle,
+              "title-icon": menuHead.value?.icon,
+              "title-image": menuHead.value?.image
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(TransitionGroup, mergeProps({
+                  key: activeLayout.value,
+                  tag: "div",
+                  name: "lp-row",
+                  css: animating.value
+                }, scrollAttrs.value, {
+                  class: ["min-h-0 transition-opacity", [
+                    busy.value && displayRows.value.length ? "opacity-60" : "",
+                    activeLayout.value === "cards" ? "grid gap-3" : __props.variant === "framed" ? "overflow-hidden rounded-card border border-line bg-surface" : ""
+                  ]],
+                  style: activeLayout.value === "cards" ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(${__props.cardWidth}, 100%), 1fr))` } : void 0,
+                  "aria-busy": busy.value || void 0,
+                  ref: (el) => unref(roving).setContainer(el?.$el ?? null)
+                }), {
+                  default: withCtx(() => [
+                    displayRows.value.length === 0 && busy.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.skeletonRows, (n) => {
+                      return openBlock(), createElementBlock("div", {
+                        key: `lp-table-skeleton-${n}`,
+                        class: normalizeClass(["lp-row-empty", activeLayout.value === "cards" ? "flex flex-col gap-3 rounded-card border border-line bg-surface p-4" : ["flex flex-col gap-2 border-b border-line/60 px-4 last:border-0", cellY.value]])
+                      }, [
+                        createVNode(_sfc_main$e, {
+                          class: "h-3.5",
+                          style: normalizeStyle({ width: skeletonWidth(n, 0) })
+                        }, null, 8, ["style"]),
+                        createVNode(_sfc_main$e, {
+                          class: "h-3",
+                          style: normalizeStyle({ width: skeletonWidth(n, 1) })
+                        }, null, 8, ["style"]),
+                        activeLayout.value === "cards" ? (openBlock(), createBlock(_sfc_main$e, {
+                          key: 0,
+                          class: "h-3",
+                          style: normalizeStyle({ width: skeletonWidth(n, 2) })
+                        }, null, 8, ["style"])) : createCommentVNode("", true),
+                        n === 1 ? (openBlock(), createElementBlock("span", _hoisted_33, toDisplayString(text.value.loading), 1)) : createCommentVNode("", true)
+                      ], 2);
+                    }), 128)) : displayRows.value.length === 0 ? (openBlock(), createElementBlock("div", {
+                      key: "lp-table-empty",
+                      class: normalizeClass(["lp-row-empty", activeLayout.value === "cards" ? "col-span-full rounded-card border border-line bg-surface" : ""])
+                    }, [
+                      createVNode(_sfc_main$f, {
+                        compact: "",
+                        icon: failed.value ? "lucide:circle-alert" : filteredOut.value ? "lucide:filter-x" : __props.emptyIcon,
+                        title: failed.value ? text.value.error : filteredOut.value ? text.value.noMatches : text.value.empty
+                      }, {
+                        default: withCtx(() => [
+                          filteredOut.value ? (openBlock(), createBlock(_sfc_main$4, {
+                            key: 0,
+                            variant: "outline",
+                            size: "sm",
+                            onClick: resetFilters
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(text.value.resetFilters), 1)
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true)
+                        ]),
+                        _: 1
+                      }, 8, ["icon", "title"])
+                    ], 2)) : createCommentVNode("", true),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(allEntries.value, (entry) => {
+                      return openBlock(), createElementBlock(Fragment, {
+                        key: entry.id
+                      }, [
+                        entry.kind === "group" ? (openBlock(), createElementBlock("div", {
+                          key: 0,
+                          class: normalizeClass(["text-xs font-medium text-muted", activeLayout.value === "cards" ? "col-span-full pt-2" : ["border-b border-line/60 bg-surface-soft/60 px-4", cellY.value]])
+                        }, [
+                          renderSlot(_ctx.$slots, "group", {
+                            value: entry.value,
+                            rows: entry.rows,
+                            label: entry.label,
+                            collapsed: entry.collapsed,
+                            toggle: () => toggleGroup(entry.group)
+                          }, () => [
+                            createElementVNode("button", {
+                              type: "button",
+                              class: "inline-flex items-center gap-1 rounded-small outline-none transition-colors duration-fast hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                              "aria-expanded": !entry.collapsed,
+                              "aria-label": (entry.collapsed ? text.value.expandGroup : text.value.collapseGroup).replace("{label}", entry.label),
+                              onClick: ($event) => toggleGroup(entry.group)
+                            }, [
+                              createVNode(_sfc_main$5, {
+                                name: "lucide:chevron-right",
+                                size: 14,
+                                class: normalizeClass(["transition-transform duration-fast motion-reduce:transition-none", entry.collapsed ? "" : "rotate-90"])
+                              }, null, 8, ["class"]),
+                              createTextVNode(" " + toDisplayString(entry.label), 1)
+                            ], 8, _hoisted_34)
+                          ], true)
+                        ], 2)) : entry.kind === "detail" ? (openBlock(), createElementBlock("div", {
+                          key: 1,
+                          class: normalizeClass(["px-4 py-3", activeLayout.value === "cards" ? "col-span-full" : "border-b border-line/60 last:border-0"]),
+                          "data-lp-row-detail": ""
+                        }, [
+                          renderSlot(_ctx.$slots, "expanded", {
+                            row: entry.row,
+                            close: () => toggleExpanded(keyFor(entry.row, entry.index))
+                          }, void 0, true)
+                        ], 2)) : (openBlock(), createElementBlock("div", mergeProps({
+                          key: 2,
+                          class: ["lp-item group relative outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring", [
+                            activeLayout.value === "cards" ? ["flex min-w-0 flex-col overflow-hidden rounded-card border bg-surface hover:border-line-strong focus-visible:ring-offset-0", isSelected(keyFor(entry.row, entry.index)) ? "border-brand bg-brand-soft/30" : "border-line"] : ["flex min-w-0 items-center gap-3 border-b border-line/60 px-4 last:border-0 hover:bg-surface-soft/60 focus-visible:ring-inset data-[active]:bg-surface-soft/40", cellY.value, isSelected(keyFor(entry.row, entry.index)) ? "bg-brand-soft/40" : ""]
+                          ]]
+                        }, { ref_for: true }, unref(roving).itemProps(String(keyFor(entry.row, entry.index))), {
+                          "data-paint-key": __props.selectable ? String(keyFor(entry.row, entry.index)) : void 0,
+                          "data-lp-context-row": __props.rowMenu ? "" : void 0,
+                          onContextmenu: ($event) => onRowContextMenu(entry.row),
+                          onClick: ($event) => onRowClick(entry.row, keyFor(entry.row, entry.index)),
+                          onPointerdown: ($event) => onRowPointerDown($event, keyFor(entry.row, entry.index)),
+                          onKeydown: onRowKeydown
+                        }), [
+                          __props.selectable ? (openBlock(), createElementBlock("div", {
+                            key: 0,
+                            class: normalizeClass(["cursor-pointer select-none", activeLayout.value === "cards" ? "absolute top-2 right-2 z-[1]" : ["shrink-0 transition-[margin] duration-medium ease-[var(--ease-emphasized)] motion-reduce:transition-none", ticksShown.value ? "" : "-mr-3"]]),
+                            onClick: _cache[9] || (_cache[9] = withModifiers(() => {
+                            }, ["stop"])),
+                            onPointerdown: withModifiers(($event) => unref(paint).onPointerDown($event, keyFor(entry.row, entry.index)), ["stop"])
+                          }, [
+                            createElementVNode("div", {
+                              class: normalizeClass(["lp-tick", activeLayout.value === "cards" ? "lp-tick-card" : ticksShown.value ? "lp-tick-line" : ""]),
+                              "data-cue": activeLayout.value === "cards" && !ticksShown.value ? "" : void 0,
+                              inert: activeLayout.value !== "cards" && !ticksShown.value
+                            }, [
+                              createVNode(_sfc_main$d, {
+                                "model-value": isSelected(keyFor(entry.row, entry.index)),
+                                "onUpdate:modelValue": (v) => toggleRow(keyFor(entry.row, entry.index), v)
+                              }, null, 8, ["model-value", "onUpdate:modelValue"])
+                            ], 10, _hoisted_37)
+                          ], 42, _hoisted_36)) : createCommentVNode("", true),
+                          activeLayout.value === "cards" ? renderSlot(_ctx.$slots, "card", {
+                            key: 1,
+                            row: entry.row,
+                            selected: isSelected(keyFor(entry.row, entry.index)),
+                            toggle: () => toggleRow(keyFor(entry.row, entry.index), !isSelected(keyFor(entry.row, entry.index))),
+                            openMenu: openRowMenu
+                          }, () => [
+                            createElementVNode("div", _hoisted_38, [
+                              titleColumn.value ? (openBlock(), createElementBlock("div", _hoisted_39, [
+                                renderSlot(_ctx.$slots, `cell-${titleColumn.value.key}`, {
+                                  row: entry.row,
+                                  value: entry.row[titleColumn.value.key],
+                                  openMenu: openRowMenu
+                                }, () => [
+                                  createTextVNode(toDisplayString(entry.row[titleColumn.value.key]), 1)
+                                ], true)
+                              ])) : createCommentVNode("", true),
+                              fieldColumns.value.length ? (openBlock(), createElementBlock("dl", _hoisted_40, [
+                                (openBlock(true), createElementBlock(Fragment, null, renderList(fieldColumns.value, (col) => {
+                                  return openBlock(), createElementBlock(Fragment, {
+                                    key: col.key
+                                  }, [
+                                    createElementVNode("dt", _hoisted_41, toDisplayString(col.label), 1),
+                                    createElementVNode("dd", _hoisted_42, [
+                                      renderSlot(_ctx.$slots, `cell-${col.key}`, {
+                                        row: entry.row,
+                                        value: entry.row[col.key],
+                                        openMenu: openRowMenu
+                                      }, () => [
+                                        createTextVNode(toDisplayString(entry.row[col.key]), 1)
+                                      ], true)
+                                    ])
+                                  ], 64);
+                                }), 128))
+                              ])) : createCommentVNode("", true)
+                            ])
+                          ], true) : (openBlock(), createElementBlock("div", _hoisted_43, [
+                            titleColumn.value ? (openBlock(), createElementBlock("div", _hoisted_44, [
+                              renderSlot(_ctx.$slots, `cell-${titleColumn.value.key}`, {
+                                row: entry.row,
+                                value: entry.row[titleColumn.value.key],
+                                openMenu: openRowMenu
+                              }, () => [
+                                createTextVNode(toDisplayString(entry.row[titleColumn.value.key]), 1)
+                              ], true)
+                            ])) : createCommentVNode("", true),
+                            fieldColumns.value.length ? (openBlock(), createElementBlock("div", _hoisted_45, [
+                              (openBlock(true), createElementBlock(Fragment, null, renderList(fieldColumns.value, (col, ci) => {
+                                return openBlock(), createElementBlock(Fragment, {
+                                  key: col.key
+                                }, [
+                                  ci > 0 ? (openBlock(), createElementBlock("span", _hoisted_46, "·")) : createCommentVNode("", true),
+                                  createElementVNode("span", {
+                                    class: "min-w-0 truncate",
+                                    title: col.label
+                                  }, [
+                                    renderSlot(_ctx.$slots, `cell-${col.key}`, {
+                                      row: entry.row,
+                                      value: entry.row[col.key],
+                                      openMenu: openRowMenu
+                                    }, () => [
+                                      createTextVNode(toDisplayString(entry.row[col.key]), 1)
+                                    ], true)
+                                  ], 8, _hoisted_47)
+                                ], 64);
+                              }), 128))
+                            ])) : createCommentVNode("", true)
+                          ]))
+                        ], 16, _hoisted_35))
+                      ], 64);
+                    }), 128))
+                  ]),
+                  _: 3
+                }, 16, ["css", "class", "style", "aria-busy"]))
+              ]),
+              _: 3
+            }, 8, ["items", "no-hint", "title", "subtitle", "title-icon", "title-image"]))
           ]),
           _: 3
         }, 8, ["disabled"]),
-        __props.load && total.value > __props.pageSize ? (openBlock(), createBlock(_sfc_main$f, {
+        __props.load && total.value > __props.pageSize ? (openBlock(), createBlock(_sfc_main$h, {
           key: 0,
           page: page.value,
-          "onUpdate:page": _cache[9] || (_cache[9] = ($event) => page.value = $event),
+          "onUpdate:page": _cache[10] || (_cache[10] = ($event) => page.value = $event),
           total: total.value,
           "page-size": __props.pageSize,
           disabled: busy.value
@@ -1466,7 +1877,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3fb24315"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2dac799f"]]);
 export {
   LpTable as default
 };