@leavepulse/ui 0.43.4 → 0.45.0

package/dist/components/LpTable.vue.js

@@ -1,25 +1,61 @@
-import { defineComponent, useAttrs, computed, ref, shallowRef, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createVNode, mergeProps, withCtx, createElementVNode, createCommentVNode, Fragment, renderList, normalizeStyle, createBlock, createTextVNode, toDisplayString, TransitionGroup, unref, withModifiers, renderSlot, nextTick } from "vue";
-import { _ as _sfc_main$3 } from "../chunks/LpCheckbox-CVccKYaH.js";
-import { _ as _sfc_main$2 } from "../chunks/LpContextMenu-CwW1QXe_.js";
-import { _ as _sfc_main$4 } from "../chunks/LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$5 } from "../chunks/LpPagination-5FxjmmB5.js";
-import { _ as _sfc_main$1 } from "../chunks/LpScrollArea-D8xyKXcF.js";
+import { defineComponent, computed, useAttrs, ref, shallowRef, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createElementVNode, Transition, renderSlot, mergeProps, normalizeStyle, createBlock, TransitionGroup, unref, withModifiers, nextTick } from "vue";
+import { _ as _sfc_main$7 } from "../chunks/LpCheckbox-Bkj13CbW.js";
+import { _ as _sfc_main$6 } from "../chunks/LpContextMenu-BqkAYa9X.js";
+import { _ as _sfc_main$2 } from "../chunks/LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$a } from "../chunks/LpPagination-BcDlo3r_.js";
+import { _ as _sfc_main$8 } from "../chunks/LpPopover-DCKeqiVn.js";
+import { _ as _sfc_main$5 } from "../chunks/LpScrollArea-Bry1fdOM.js";
+import { _ as _sfc_main$4 } from "../chunks/LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$3 } from "../chunks/LpShift-DXNsauQZ.js";
+import { _ as _sfc_main$9 } from "../chunks/LpTableFilter-BV8PpLM9.js";
 import { useAsyncTask } from "../composables/useAsyncTask.js";
+import { useHotkeys } from "../composables/useHotkeys.js";
+import { usePaintSelect } from "../composables/usePaintSelect.js";
 import { useRovingFocus } from "../composables/useRovingFocus.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { compareValues } from "./tableSort.js";
+import { _ as _sfc_main$1 } from "../chunks/LpButton-CKSwC6Mu.js";
+import { toCsv, downloadFile, fileStem } from "./exportData.js";
+import { summarizeShown, parseTableState, serializeTableState, countValues } from "./tableFilter.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-BgPLJOXa.css';const _hoisted_1 = { class: "border-b border-line bg-surface-soft" };
+import '../assets/LpTable-CPwWxTJS.css';const _hoisted_1 = {
+  key: 0,
+  class: "flex justify-end"
+};
 const _hoisted_2 = {
   key: 0,
-  class: "w-px px-4 py-3"
+  class: "flex min-h-8 items-center gap-x-3 pb-3 text-xs"
+};
+const _hoisted_3 = {
+  key: 0,
+  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 = ["aria-label", "onClick"];
+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_3 = ["aria-sort"];
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = {
+const _hoisted_9 = {
+  key: 0,
+  class: "flex items-center gap-2"
+};
+const _hoisted_10 = { class: "hidden sm:inline" };
+const _hoisted_11 = { class: "w-full border-collapse text-sm" };
+const _hoisted_12 = { class: "border-b border-line bg-surface-soft" };
+const _hoisted_13 = ["inert"];
+const _hoisted_14 = ["aria-sort"];
+const _hoisted_15 = ["onClick"];
+const _hoisted_16 = ["aria-label", "data-lp-filter"];
+const _hoisted_17 = {
   key: "lp-table-empty",
   class: "lp-row-empty"
 };
-const _hoisted_6 = ["colspan"];
-const _hoisted_7 = ["onContextmenu", "onClick"];
+const _hoisted_18 = ["colspan"];
+const _hoisted_19 = ["onContextmenu", "data-paint-key", "onClick", "onPointerdown"];
+const _hoisted_20 = ["onPointerdown"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -30,26 +66,84 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     load: {},
     pageSize: { default: 25 },
     debounce: { default: 150 },
-    loadingLabel: { default: "Loading…" },
-    errorLabel: { default: "Could not load" },
+    loadingLabel: {},
+    errorLabel: {},
     rowKey: {},
-    emptyLabel: { default: "Nothing here yet" },
+    emptyLabel: {},
     emptyIcon: { default: "lucide:inbox" },
-    selectable: { type: Boolean, default: false },
+    selectable: { type: [Boolean, String], default: false },
     selected: { default: () => [] },
-    sort: { default: null },
+    sort: { default: void 0 },
     stickyHeader: { type: Boolean },
     rowMenu: {},
-    sortAscLabel: { default: "Sort ascending" },
-    sortDescLabel: { default: "Sort descending" },
-    sortClearLabel: { default: "Clear sorting" },
-    filterLabel: { default: "Show only" },
-    showAllLabel: { default: "Show all" },
-    columnsLabel: { default: "Columns" }
+    sortAscLabel: {},
+    sortDescLabel: {},
+    sortClearLabel: {},
+    filterLabel: {},
+    showAllLabel: {},
+    columnsLabel: {},
+    exportable: { type: Boolean },
+    exportFilename: {},
+    labels: {},
+    density: { default: "comfortable" },
+    summary: { type: Boolean, default: false },
+    persist: {},
+    allMatching: { type: Boolean, default: false }
   },
-  emits: ["update:selected", "update:sort", "rowClick"],
+  emits: ["update:selected", "update:sort", "update:allMatching", "rowClick"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const labelSet = useLabels(
+      "table",
+      {
+        loading: "Loading…",
+        error: "Could not load",
+        empty: "Nothing here yet",
+        sortAsc: "Sort ascending",
+        sortDesc: "Sort descending",
+        sortClear: "Clear sorting",
+        filter: "Show only",
+        showAll: "Show all",
+        columns: "Columns",
+        exportCsv: "Export CSV",
+        selectAll: "Select every row",
+        shortcutsGroup: "Table",
+        filterColumn: "Filter {column}",
+        filterSearch: "Search values",
+        filterAll: "All",
+        filterNone: "None",
+        filterInvert: "Invert",
+        filterOnly: "Only",
+        filterOnlyShown: "Only these {count}",
+        filterAddShown: "Add these {count}",
+        filterNoValues: "No values match",
+        filterNothingShown: "none",
+        clearFilter: "Clear the {column} filter",
+        clearFilters: "Clear all",
+        noMatches: "No rows match the filters",
+        resetFilters: "Reset filters",
+        rowCount: "{shown} of {total}",
+        rowsTotal: "{total} rows",
+        selectedCount: "{count} selected",
+        clearSelection: "Clear selection",
+        pageSelected: "All {count} on this page are selected.",
+        selectAllMatching: "Select all {total}",
+        allMatchingSelected: "All {total} are selected."
+      },
+      () => props.labels
+    );
+    const text = computed(() => ({
+      ...labelSet.value,
+      loading: props.loadingLabel ?? labelSet.value.loading,
+      error: props.errorLabel ?? labelSet.value.error,
+      empty: props.emptyLabel ?? labelSet.value.empty,
+      sortAsc: props.sortAscLabel ?? labelSet.value.sortAsc,
+      sortDesc: props.sortDescLabel ?? labelSet.value.sortDesc,
+      sortClear: props.sortClearLabel ?? labelSet.value.sortClear,
+      filter: props.filterLabel ?? labelSet.value.filter,
+      showAll: props.showAllLabel ?? labelSet.value.showAll,
+      columns: props.columnsLabel ?? labelSet.value.columns
+    }));
     const attrs = useAttrs();
     const rootClass = computed(() => attrs.class);
     const scrollAttrs = computed(() => {
@@ -60,7 +154,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function keyFor(row, index) {
       if (typeof props.rowKey === "function") return props.rowKey(row);
       if (props.rowKey) return row[props.rowKey];
-      return index;
+      return sourceIndex.value.get(row) ?? index;
     }
     function alignClass(align) {
       if (align === "right") return "text-right";
@@ -72,6 +166,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       menuRow.value = row;
     }
     const contextMenu = computed(() => {
+      if (paint.painting.value) return [];
       const table = tableMenu();
       const row = menuRow.value ? props.rowMenu?.(menuRow.value) ?? [] : [];
       if (!row.length) return table;
@@ -79,7 +174,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return [...row, { ...table[0], separatorBefore: true }, ...table.slice(1)];
     });
     const ownSort = ref(null);
-    const activeSort = computed(() => props.sort ?? ownSort.value);
+    const activeSort = computed(() => props.sort !== void 0 ? props.sort : ownSort.value);
     const loaded = shallowRef([]);
     const total = ref(0);
     const facets = ref({});
@@ -88,11 +183,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const task = useAsyncTask();
     const loading = task.pending;
     const sourceRows = computed(() => props.load ? loaded.value : props.rows);
-    const tableEl = ref(null);
+    const sourceIndex = computed(() => new Map(sourceRows.value.map((row, i) => [row, i])));
+    const frameEl = ref(null);
     const floor = ref(0);
     async function holdHeight() {
       await nextTick();
-      const height = tableEl.value?.offsetHeight ?? 0;
+      const height = frameEl.value?.querySelector("table")?.offsetHeight ?? 0;
       if (height > floor.value) floor.value = height;
     }
     const hiddenValues = ref({});
@@ -119,20 +215,46 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return seen;
     }
-    function isValueHidden(key, value) {
-      return hiddenValues.value[key]?.has(value) ?? false;
+    function showAllValues(key) {
+      withMotion(() => hiddenValues.value = { ...hiddenValues.value, [key]: /* @__PURE__ */ new Set() });
     }
-    function toggleValue(key, value) {
-      withMotion(() => applyToggle(key, value));
+    function setHidden(key, next) {
+      withMotion(() => hiddenValues.value = { ...hiddenValues.value, [key]: next });
     }
-    function applyToggle(key, value) {
-      const next = new Set(hiddenValues.value[key] ?? []);
-      if (next.has(value)) next.delete(value);
-      else next.add(value);
-      hiddenValues.value = { ...hiddenValues.value, [key]: next };
+    function labelOf(col, value) {
+      return col.valueLabel?.(value) ?? String(value ?? "—");
     }
-    function showAllValues(key) {
-      withMotion(() => hiddenValues.value = { ...hiddenValues.value, [key]: /* @__PURE__ */ new Set() });
+    function filterOptions(col) {
+      let counts;
+      if (!props.load) {
+        const others = Object.entries(hiddenValues.value).filter(([key, set]) => key !== col.key && set.size);
+        const rows = others.length ? props.rows.filter((row) => others.every(([key, hidden]) => !hidden.has(row[key]))) : props.rows;
+        counts = countValues(rows, col.key);
+      }
+      return valuesOf(col).map((value) => ({ value, label: labelOf(col, value), count: counts?.get(value) ?? (counts ? 0 : void 0) }));
+    }
+    const activeFilters = computed(
+      () => props.columns.filter((col) => col.filterable && hiddenValues.value[col.key]?.size).map((col) => {
+        const hidden = hiddenValues.value[col.key];
+        const shown = valuesOf(col).filter((v) => !hidden.has(v)).map((v) => labelOf(col, v));
+        return { col, text: shown.length ? summarizeShown(shown) : text.value.filterNothingShown };
+      })
+    );
+    function clearAllFilters() {
+      withMotion(() => hiddenValues.value = {});
+    }
+    function filterLabels() {
+      const t = text.value;
+      return {
+        search: t.filterSearch,
+        all: t.filterAll,
+        none: t.filterNone,
+        invert: t.filterInvert,
+        only: t.filterOnly,
+        onlyShown: t.filterOnlyShown,
+        addShown: t.filterAddShown,
+        noValues: t.filterNoValues
+      };
     }
     function toggleColumn(key) {
       const next = new Set(hiddenColumns.value);
@@ -148,21 +270,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (row) => active.every(([key, hidden]) => !hidden.has(row[key]))
       );
     });
-    const displayRows = computed(() => {
+    function sortRows(rows) {
       const s = activeSort.value;
-      if (!s || props.load) return filteredRows.value;
+      if (!s || props.load) return rows;
       const col = props.columns.find((c) => c.key === s.key);
-      if (!col?.sortable) return filteredRows.value;
+      if (!col?.sortable) return rows;
       const factor = s.dir === "asc" ? 1 : -1;
-      return [...filteredRows.value].sort((a, b) => compare(a[s.key], b[s.key]) * factor);
-    });
-    function compare(a, b) {
-      if (a == null && b == null) return 0;
-      if (a == null) return -1;
-      if (b == null) return 1;
-      if (typeof a === "number" && typeof b === "number") return a - b;
-      return String(a).localeCompare(String(b), void 0, { numeric: true });
+      const own = col.compare;
+      const value = col.sortValue ?? ((row) => row[s.key]);
+      return [...rows].sort((a, b) => (own ? own(a, b) : compareValues(value(a), value(b))) * factor);
     }
+    const displayRows = computed(() => sortRows(filteredRows.value));
     function toggleSort(col) {
       if (!col.sortable) return;
       const s = activeSort.value;
@@ -180,6 +298,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (s?.key !== col.key) return "lucide:chevrons-up-down";
       return s.dir === "asc" ? "lucide:arrow-up" : "lucide:arrow-down";
     }
+    function openFilter(key) {
+      const open = () => frameEl.value?.querySelector(`[data-lp-filter="${CSS.escape(key)}"]`)?.click();
+      const started = performance.now();
+      const wait = () => {
+        if (!document.querySelector("[data-reka-menu-content]") || performance.now() - started > 600) setTimeout(open, 30);
+        else requestAnimationFrame(wait);
+      };
+      requestAnimationFrame(wait);
+    }
     function headerMenu(col) {
       const s = activeSort.value;
       const set = (next) => () => withMotion(() => {
@@ -190,19 +317,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (col.sortable) {
         items.push(
           {
-            label: props.sortAscLabel,
+            label: text.value.sortAsc,
             icon: "lucide:arrow-up",
             disabled: s?.key === col.key && s.dir === "asc",
             onSelect: set({ key: col.key, dir: "asc" })
           },
           {
-            label: props.sortDescLabel,
+            label: text.value.sortDesc,
             icon: "lucide:arrow-down",
             disabled: s?.key === col.key && s.dir === "desc",
             onSelect: set({ key: col.key, dir: "desc" })
           },
           {
-            label: props.sortClearLabel,
+            label: text.value.sortClear,
             icon: "lucide:x",
             disabled: !s,
             onSelect: set(null)
@@ -211,34 +338,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       if (col.filterable) {
         const hidden = hiddenValues.value[col.key];
-        items.push({
-          label: props.filterLabel,
-          icon: "lucide:filter",
-          separatorBefore: items.length > 0,
-          children: [
-            ...valuesOf(col).map((value) => ({
-              label: col.valueLabel?.(value) ?? String(value ?? "—"),
-              checked: !isValueHidden(col.key, value),
-              onSelect: () => toggleValue(col.key, value)
-            })),
-            {
-              label: props.showAllLabel,
-              icon: "lucide:list",
-              separatorBefore: true,
-              disabled: !hidden?.size,
-              onSelect: () => showAllValues(col.key)
-            }
-          ]
-        });
+        items.push(
+          {
+            label: text.value.filterColumn.replace("{column}", col.label),
+            icon: "lucide:filter",
+            separatorBefore: items.length > 0,
+            onSelect: () => openFilter(col.key)
+          },
+          {
+            label: text.value.showAll,
+            icon: "lucide:list",
+            disabled: !hidden?.size,
+            onSelect: () => showAllValues(col.key)
+          }
+        );
       }
       return items;
     }
     function tableMenu() {
       const offered = props.columns.filter((c) => !c.alwaysVisible && c.label);
-      if (!offered.length) return [];
+      const exportItem = props.exportable ? [{ label: text.value.exportCsv, icon: "lucide:download", onSelect: () => exportCsv() }] : [];
+      if (!offered.length) return exportItem;
       return [
+        ...exportItem,
         {
-          label: props.columnsLabel,
+          label: text.value.columns,
           icon: "lucide:columns-3",
           children: offered.map((col) => ({
             label: col.label,
@@ -261,6 +385,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       task.run((signal) => load(query, signal), {
         delay,
         apply: (result) => {
+          const last = Math.max(1, Math.ceil(result.total / props.pageSize));
+          if (page.value > last) {
+            page.value = last;
+            return;
+          }
           loaded.value = result.rows;
           total.value = result.total;
           facets.value = result.facets ?? {};
@@ -278,10 +407,64 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       else fetchPage(props.debounce);
     });
     watch(page, () => fetchPage());
+    const storageKey = computed(() => props.persist ? `lp-table:${props.persist}` : "");
+    const restored = ref(false);
+    onMounted(() => {
+      if (storageKey.value) {
+        let raw = null;
+        try {
+          raw = localStorage.getItem(storageKey.value);
+        } catch {
+        }
+        const state = parseTableState(raw, props.columns.map((c) => c.key));
+        if (state) {
+          if (state.sort !== void 0) {
+            ownSort.value = state.sort;
+            emit("update:sort", state.sort);
+          }
+          if (state.hidden) {
+            hiddenValues.value = Object.fromEntries(Object.entries(state.hidden).map(([k, v]) => [k, new Set(v)]));
+          }
+          if (state.columns) hiddenColumns.value = new Set(state.columns);
+        }
+      }
+      restored.value = true;
+    });
+    watch([activeSort, hiddenValues, hiddenColumns], () => {
+      if (!storageKey.value || !restored.value) return;
+      const state = serializeTableState({
+        sort: activeSort.value,
+        hidden: Object.fromEntries(Object.entries(hiddenValues.value).map(([k, v]) => [k, [...v]])),
+        columns: [...hiddenColumns.value]
+      });
+      try {
+        localStorage.setItem(storageKey.value, state);
+      } catch {
+      }
+    });
     watch(() => props.load, () => fetchPage(), { immediate: true });
-    __expose({ reload: () => fetchPage() });
+    function exportCsv(options = {}) {
+      const scope = options.scope ?? "filtered";
+      let rows;
+      if (scope === "all") rows = sortRows(sourceRows.value);
+      else if (scope === "selected") {
+        const keys = new Set(props.selected);
+        rows = sortRows(sourceRows.value).filter((row, i) => keys.has(keyFor(row, i)));
+      } else rows = displayRows.value;
+      const columns = visibleColumns.value.filter((col) => col.label).map((col) => ({
+        key: col.key,
+        label: col.label,
+        value: col.exportValue ?? ((row) => row[col.key])
+      }));
+      const csv = toCsv(rows, columns, options);
+      if (options.download !== false) {
+        downloadFile(`${fileStem(options.filename ?? props.exportFilename, "table")}.csv`, csv, "text/csv;charset=utf-8");
+      }
+      return csv;
+    }
+    __expose({ reload: () => fetchPage(), exportCsv });
     const selectedSet = computed(() => new Set(props.selected));
-    const allKeys = computed(() => sourceRows.value.map((r, i) => keyFor(r, i)));
+    const allKeys = computed(() => filteredRows.value.map((r, i) => keyFor(r, i)));
     const allChecked = computed(
       () => allKeys.value.length > 0 && allKeys.value.every((k) => selectedSet.value.has(k))
     );
@@ -289,7 +472,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => !allChecked.value && allKeys.value.some((k) => selectedSet.value.has(k))
     );
     function toggleAll(checked) {
-      emit("update:selected", checked ? [...allKeys.value] : []);
+      const next = new Set(selectedSet.value);
+      for (const key of allKeys.value) {
+        if (checked) next.add(key);
+        else next.delete(key);
+      }
+      emit("update:selected", [...next]);
     }
     function toggleRow(key, checked) {
       const next = new Set(selectedSet.value);
@@ -297,7 +485,73 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       else next.delete(key);
       emit("update:selected", [...next]);
     }
-    const colSpan = computed(() => props.columns.length + (props.selectable ? 1 : 0));
+    const keyByText = computed(
+      () => new Map(displayRows.value.map((row, index) => [String(keyFor(row, index)), keyFor(row, index)]))
+    );
+    const paint = usePaintSelect({
+      root: frameEl,
+      enabled: () => !!props.selectable,
+      selection: () => props.selected,
+      set: (keys) => emit("update:selected", keys),
+      resolve: (raw) => keyByText.value.get(raw),
+      selectAll: () => [.../* @__PURE__ */ new Set([...props.selected, ...allKeys.value])],
+      help: () => ({ group: text.value.shortcutsGroup, label: text.value.selectAll })
+    });
+    const holdMode = computed(() => props.selectable === "hold");
+    const ticksShown = computed(
+      () => props.selectable === true || props.selected.length > 0 || paint.painting.value
+    );
+    function clearSelection() {
+      emit("update:selected", []);
+      if (props.allMatching) emit("update:allMatching", false);
+    }
+    const OWN_CLICKS = "a,button,input,select,textarea,label,[role=button],[role=checkbox],[contenteditable=true]";
+    function onRowPointerDown(event, key) {
+      if (!holdMode.value) return;
+      if (event.target?.closest(OWN_CLICKS)) return;
+      paint.onPointerDown(event, key, { hold: 420 });
+    }
+    function onRowClick(row, key) {
+      if (holdMode.value && props.selected.length) toggleRow(key, !selectedSet.value.has(key));
+      else emit("rowClick", row);
+    }
+    useHotkeys(
+      () => props.selectable && props.selected.length ? [
+        {
+          key: "escape",
+          help: { group: text.value.shortcutsGroup, label: text.value.clearSelection },
+          handler: () => clearSelection()
+        }
+      ] : [],
+      { scope: frameEl }
+    );
+    const pageKeys = computed(() => displayRows.value.map((row, i) => keyFor(row, i)));
+    const pageAllSelected = computed(
+      () => pageKeys.value.length > 0 && pageKeys.value.every((k) => selectedSet.value.has(k))
+    );
+    watch(pageAllSelected, (all) => {
+      if (!all && props.allMatching) emit("update:allMatching", false);
+    });
+    const statusText = computed(() => {
+      if (!(props.selectable && props.selected.length)) return countText.value;
+      return props.allMatching ? text.value.allMatchingSelected.replace("{total}", String(total.value)) : text.value.selectedCount.replace("{count}", String(props.selected.length));
+    });
+    const countText = computed(() => {
+      const t = text.value;
+      if (props.load) return t.rowsTotal.replace("{total}", String(total.value));
+      if (displayRows.value.length !== props.rows.length) {
+        return t.rowCount.replace("{shown}", String(displayRows.value.length)).replace("{total}", String(props.rows.length));
+      }
+      return t.rowsTotal.replace("{total}", String(props.rows.length));
+    });
+    const showBar = computed(() => props.summary || !!props.selectable || activeFilters.value.length > 0);
+    const filteredOut = computed(() => {
+      if (loading.value || failed.value || displayRows.value.length) return false;
+      if (props.load) return Object.values(hiddenValues.value).some((set) => set.size);
+      return props.rows.length > 0;
+    });
+    const cellY = computed(() => props.density === "compact" ? "py-1.5" : "py-3");
+    const colSpan = computed(() => visibleColumns.value.length + (props.selectable ? 1 : 0));
     const rovingItems = computed(
       () => displayRows.value.map((row, index) => ({
         id: String(keyFor(row, index)),
@@ -357,46 +611,161 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
+        ref_key: "frameEl",
+        ref: frameEl,
         class: normalizeClass(["flex flex-col gap-3", rootClass.value])
       }, [
-        createVNode(_sfc_main$1, mergeProps(scrollAttrs.value, {
+        __props.exportable ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(_sfc_main$1, {
+            variant: "ghost",
+            size: "sm",
+            onClick: _cache[0] || (_cache[0] = ($event) => exportCsv())
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                name: "lucide:download",
+                size: 14
+              }),
+              createTextVNode(" " + toDisplayString(text.value.exportCsv), 1)
+            ]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true),
+        createVNode(_sfc_main$3, { class: "-mb-3" }, {
+          default: withCtx(() => [
+            showBar.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              activeFilters.value.length ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(activeFilters.value, (f) => {
+                  return openBlock(), createElementBlock("span", {
+                    key: f.col.key,
+                    class: "inline-flex max-w-72 animate-[chip-in_var(--duration-fast)_var(--ease-emphasized)] items-center gap-1 rounded-pill bg-brand-soft py-0.5 pr-1 pl-2.5 text-ink motion-reduce:animate-none"
+                  }, [
+                    createElementVNode("span", _hoisted_4, [
+                      createElementVNode("span", _hoisted_5, toDisplayString(f.col.label) + ":", 1),
+                      createTextVNode(" " + toDisplayString(f.text), 1)
+                    ]),
+                    createElementVNode("button", {
+                      type: "button",
+                      class: "grid size-4 shrink-0 place-items-center rounded-pill text-muted outline-none transition-colors duration-fast hover:bg-ink/10 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                      "aria-label": text.value.clearFilter.replace("{column}", f.col.label),
+                      onClick: ($event) => showAllValues(f.col.key)
+                    }, [
+                      createVNode(_sfc_main$2, {
+                        name: "lucide:x",
+                        size: 12
+                      })
+                    ], 8, _hoisted_6)
+                  ]);
+                }), 128)),
+                activeFilters.value.length > 1 ? (openBlock(), createElementBlock("button", {
+                  key: 0,
+                  type: "button",
+                  class: "rounded-control px-1.5 py-0.5 font-medium text-muted outline-none transition-colors duration-fast hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                  onClick: clearAllFilters
+                }, toDisplayString(text.value.clearFilters), 1)) : createCommentVNode("", true)
+              ])) : createCommentVNode("", true),
+              createVNode(_sfc_main$3, {
+                axis: "width",
+                class: "ml-auto shrink-0"
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_7, [
+                    createVNode(_sfc_main$4, {
+                      value: statusText.value,
+                      align: "end",
+                      class: normalizeClass(["tabular-nums", __props.selectable && __props.selected.length ? "font-medium text-ink" : ""]),
+                      "aria-live": "polite"
+                    }, null, 8, ["value", "class"]),
+                    createVNode(Transition, {
+                      "enter-active-class": "transition-opacity duration-fast motion-reduce:transition-none",
+                      "leave-active-class": "transition-opacity duration-fast motion-reduce:transition-none",
+                      "enter-from-class": "opacity-0",
+                      "leave-to-class": "opacity-0"
+                    }, {
+                      default: withCtx(() => [
+                        __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",
+                            "enter-from-class": "opacity-0",
+                            "leave-to-class": "opacity-0"
+                          }, {
+                            default: withCtx(() => [
+                              __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",
+                                  onClick: _cache[1] || (_cache[1] = ($event) => emit("update:allMatching", true))
+                                }, toDisplayString(text.value.selectAllMatching.replace("{total}", String(total.value))), 1)
+                              ])) : createCommentVNode("", true)
+                            ]),
+                            _: 1
+                          }),
+                          createElementVNode("button", {
+                            type: "button",
+                            class: "rounded-control px-1.5 py-0.5 font-medium outline-none transition-colors duration-fast hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                            onClick: clearSelection
+                          }, toDisplayString(text.value.clearSelection), 1),
+                          renderSlot(_ctx.$slots, "bulk", {
+                            selected: __props.selected,
+                            allMatching: __props.allMatching,
+                            clear: clearSelection
+                          }, void 0, true)
+                        ])) : createCommentVNode("", true)
+                      ]),
+                      _: 3
+                    })
+                  ])
+                ]),
+                _: 3
+              })
+            ])) : createCommentVNode("", true)
+          ]),
+          _: 3
+        }),
+        createVNode(_sfc_main$5, mergeProps(scrollAttrs.value, {
           fade: false,
           class: "min-h-0 flex-1 rounded-card border border-line",
           style: __props.load && floor.value ? { minHeight: `${floor.value + 2}px` } : void 0,
           "bar-inset-top": barInsetTop.value
         }), {
           default: withCtx(() => [
-            createVNode(_sfc_main$2, {
+            createVNode(_sfc_main$6, {
               items: contextMenu.value,
               always: ""
             }, {
               default: withCtx(() => [
-                createElementVNode("table", {
-                  ref_key: "tableEl",
-                  ref: tableEl,
-                  class: "w-full border-collapse text-sm"
-                }, [
+                createElementVNode("table", _hoisted_11, [
                   createElementVNode("thead", {
                     ref_key: "headEl",
                     ref: headEl,
                     class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10 bg-surface-soft" : "")
                   }, [
-                    createElementVNode("tr", _hoisted_1, [
-                      __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_2, [
-                        createVNode(_sfc_main$3, {
-                          "model-value": allChecked.value,
-                          indeterminate: someChecked.value,
-                          "onUpdate:modelValue": toggleAll
-                        }, null, 8, ["model-value", "indeterminate"])
-                      ])) : createCommentVNode("", true),
+                    createElementVNode("tr", _hoisted_12, [
+                      __props.selectable ? (openBlock(), createElementBlock("th", {
+                        key: 0,
+                        class: normalizeClass(["w-px p-0", cellY.value])
+                      }, [
+                        createElementVNode("div", {
+                          class: normalizeClass(["lp-tick lp-tick-open", ticksShown.value ? "" : "lp-tick-hidden"]),
+                          inert: !ticksShown.value
+                        }, [
+                          createVNode(_sfc_main$7, {
+                            "model-value": allChecked.value,
+                            indeterminate: someChecked.value,
+                            "onUpdate:modelValue": toggleAll
+                          }, null, 8, ["model-value", "indeterminate"])
+                        ], 10, _hoisted_13)
+                      ], 2)) : createCommentVNode("", true),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col) => {
                         return openBlock(), createElementBlock("th", {
                           key: col.key,
                           style: normalizeStyle(col.width ? { width: col.width } : void 0),
-                          class: normalizeClass(["px-4 py-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted", alignClass(col.align)]),
+                          class: normalizeClass(["px-4 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted", [alignClass(col.align), cellY.value]]),
                           "aria-sort": activeSort.value?.key === col.key ? activeSort.value.dir === "asc" ? "ascending" : "descending" : void 0
                         }, [
-                          col.sortable || col.filterable ? (openBlock(), createBlock(_sfc_main$2, {
+                          col.sortable || col.filterable ? (openBlock(), createBlock(_sfc_main$6, {
                             key: 0,
                             items: headerMenu(col)
                           }, {
@@ -410,27 +779,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 onClick: ($event) => toggleSort(col)
                               }, [
                                 createTextVNode(toDisplayString(col.label) + " ", 1),
-                                !col.sortable ? (openBlock(), createBlock(_sfc_main$4, {
+                                col.sortable ? (openBlock(), createBlock(_sfc_main$2, {
                                   key: 0,
-                                  name: "lucide:filter",
-                                  size: 12,
-                                  class: normalizeClass(["shrink-0", hiddenValues.value[col.key]?.size ? "text-brand opacity-100" : "opacity-40 group-hover/sort:opacity-70"])
-                                }, null, 8, ["class"])) : (openBlock(), createBlock(_sfc_main$4, {
-                                  key: 1,
                                   name: sortIcon(col),
                                   size: 13,
                                   class: normalizeClass([
                                     "shrink-0 transition-[transform,opacity] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]",
                                     activeSort.value?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
                                   ])
-                                }, null, 8, ["name", "class"]))
-                              ], 10, _hoisted_4)
+                                }, null, 8, ["name", "class"])) : createCommentVNode("", true)
+                              ], 10, _hoisted_15)
                             ]),
                             _: 2
                           }, 1032, ["items"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                             createTextVNode(toDisplayString(col.label), 1)
-                          ], 64))
-                        ], 14, _hoisted_3);
+                          ], 64)),
+                          col.filterable ? (openBlock(), createBlock(_sfc_main$8, {
+                            key: 2,
+                            align: "start",
+                            "panel-class": "w-72",
+                            "aria-label": text.value.filterColumn.replace("{column}", col.label)
+                          }, {
+                            trigger: withCtx(() => [
+                              createElementVNode("button", {
+                                type: "button",
+                                class: normalizeClass(["ml-0.5 inline-grid size-5 place-items-center rounded align-middle outline-none transition-colors duration-fast hover:bg-surface-raised hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", hiddenValues.value[col.key]?.size ? "text-brand" : "opacity-60"]),
+                                "aria-label": text.value.filterColumn.replace("{column}", col.label),
+                                "data-lp-filter": col.key
+                              }, [
+                                createVNode(_sfc_main$2, {
+                                  name: hiddenValues.value[col.key]?.size ? "lucide:filter-x" : "lucide:filter",
+                                  size: 12
+                                }, null, 8, ["name"])
+                              ], 10, _hoisted_16)
+                            ]),
+                            default: withCtx(() => [
+                              createVNode(_sfc_main$9, {
+                                options: filterOptions(col),
+                                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"])) : createCommentVNode("", true)
+                        ], 14, _hoisted_14);
                       }), 128))
                     ])
                   ], 2),
@@ -442,18 +835,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ref: (el) => unref(roving).setContainer(el?.$el ?? null)
                   }, {
                     default: withCtx(() => [
-                      displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_5, [
+                      displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_17, [
                         createElementVNode("td", {
                           colspan: colSpan.value,
                           class: "px-4 py-10 text-center text-muted"
                         }, [
-                          createVNode(_sfc_main$4, {
-                            name: unref(loading) ? "lucide:loader-circle" : failed.value ? "lucide:circle-alert" : __props.emptyIcon,
+                          createVNode(_sfc_main$2, {
+                            name: unref(loading) ? "lucide:loader-circle" : failed.value ? "lucide:circle-alert" : filteredOut.value ? "lucide:filter-x" : __props.emptyIcon,
                             size: 22,
                             class: normalizeClass(["mx-auto mb-2 opacity-60", unref(loading) ? "animate-spin" : ""])
                           }, null, 8, ["name", "class"]),
-                          createElementVNode("div", null, toDisplayString(unref(loading) ? __props.loadingLabel : failed.value ? __props.errorLabel : __props.emptyLabel), 1)
-                        ], 8, _hoisted_6)
+                          createElementVNode("div", null, toDisplayString(unref(loading) ? text.value.loading : failed.value ? text.value.error : filteredOut.value ? text.value.noMatches : text.value.empty), 1),
+                          filteredOut.value ? (openBlock(), createBlock(_sfc_main$1, {
+                            key: 0,
+                            variant: "outline",
+                            size: "sm",
+                            class: "mt-3",
+                            onClick: clearAllFilters
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(text.value.resetFilters), 1)
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true)
+                        ], 8, _hoisted_18)
                       ])) : createCommentVNode("", true),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
                         return openBlock(), createElementBlock("tr", mergeProps({
@@ -461,24 +866,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           onContextmenu: ($event) => onRowContextMenu(row),
                           class: ["group border-b border-line/60 outline-none transition-colors last:border-0 hover:bg-surface-soft/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[active]:bg-surface-soft/40", selectedSet.value.has(keyFor(row, index)) ? "bg-brand-soft/40" : ""]
                         }, { ref_for: true }, unref(roving).itemProps(String(keyFor(row, index))), {
-                          onClick: ($event) => emit("rowClick", row),
+                          "data-paint-key": __props.selectable ? String(keyFor(row, index)) : void 0,
+                          onClick: ($event) => onRowClick(row, keyFor(row, index)),
+                          onPointerdown: ($event) => onRowPointerDown($event, keyFor(row, index)),
                           onKeydown: onRowKeydown
                         }), [
                           __props.selectable ? (openBlock(), createElementBlock("td", {
                             key: 0,
-                            class: "w-px px-4 py-3",
-                            onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-                            }, ["stop"]))
+                            class: normalizeClass(["w-px cursor-pointer p-0 select-none", cellY.value]),
+                            onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+                            }, ["stop"])),
+                            onPointerdown: withModifiers(($event) => unref(paint).onPointerDown($event, keyFor(row, index)), ["stop"])
                           }, [
-                            createVNode(_sfc_main$3, {
-                              "model-value": selectedSet.value.has(keyFor(row, index)),
-                              "onUpdate:modelValue": (v) => toggleRow(keyFor(row, index), v)
-                            }, null, 8, ["model-value", "onUpdate:modelValue"])
-                          ])) : createCommentVNode("", true),
-                          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col) => {
+                            createElementVNode("div", {
+                              class: normalizeClass(["lp-tick lp-tick-open", ticksShown.value ? "" : "lp-tick-cue"])
+                            }, [
+                              createVNode(_sfc_main$7, {
+                                "model-value": selectedSet.value.has(keyFor(row, index)),
+                                "onUpdate:modelValue": (v) => toggleRow(keyFor(row, index), v)
+                              }, null, 8, ["model-value", "onUpdate:modelValue"])
+                            ], 2)
+                          ], 42, _hoisted_20)) : createCommentVNode("", true),
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col, ci) => {
                             return openBlock(), createElementBlock("td", {
                               key: col.key,
-                              class: normalizeClass(["px-4 py-3 text-ink", alignClass(col.align)])
+                              class: normalizeClass(["px-4 text-ink", [alignClass(col.align), cellY.value, col.nowrap ? "whitespace-nowrap" : ""]])
                             }, [
                               renderSlot(_ctx.$slots, `cell-${col.key}`, {
                                 row,
@@ -488,22 +900,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               ], true)
                             ], 2);
                           }), 128))
-                        ], 16, _hoisted_7);
+                        ], 16, _hoisted_19);
                       }), 128))
                     ]),
                     _: 3
                   }, 8, ["css", "class"])
-                ], 512)
+                ])
               ]),
               _: 3
             }, 8, ["items"])
           ]),
           _: 3
         }, 16, ["style", "bar-inset-top"]),
-        __props.load && total.value > __props.pageSize ? (openBlock(), createBlock(_sfc_main$5, {
-          key: 0,
+        __props.load && total.value > __props.pageSize ? (openBlock(), createBlock(_sfc_main$a, {
+          key: 1,
           page: page.value,
-          "onUpdate:page": _cache[1] || (_cache[1] = ($event) => page.value = $event),
+          "onUpdate:page": _cache[3] || (_cache[3] = ($event) => page.value = $event),
           total: total.value,
           "page-size": __props.pageSize,
           disabled: unref(loading)
@@ -512,7 +924,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e0bb036b"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fff7ed10"]]);
 export {
   LpTable as default
 };