nuxt-ui-tools 1.27.5 → 1.29.0

package/dist/runtime/table/composables/use-table-selection.js

@@ -61,6 +61,12 @@ export function useTableSelection(options) {
   function isRowSelected(params) {
     return selectedKeys.value.includes(params.rowId);
   }
+  function getRowsSelectionState(params) {
+    const selected = new Set(selectedKeys.value);
+    const count = params.rowIds.filter((rowId) => selected.has(rowId)).length;
+    if (count === 0) return false;
+    return count === params.rowIds.length ? true : "indeterminate";
+  }
   function selectRows(params) {
     if (!selectionEnabled.value) {
       return;
@@ -117,9 +123,12 @@ export function useTableSelection(options) {
     }
     lastTouchedRowId.value = params.rowId;
   }
-  const rangeRowIds = computed(
-    () => options.tree.enabled.value ? options.tree.visibleNodes.value.filter((node) => options.tree.isSelectable(node)).map((node) => node.id) : scopeRowIds.value
-  );
+  const rangeRowIds = computed(() => {
+    if (options.tree.enabled.value) {
+      return options.tree.visibleNodes.value.filter((node) => options.tree.isSelectable(node)).map((node) => node.id);
+    }
+    return options.groups.enabled.value ? options.groups.visibleRowIds.value : scopeRowIds.value;
+  });
   function getRangeRowIds(params) {
     const anchorIndex = rangeRowIds.value.indexOf(params.anchorRowId);
     const targetIndex = rangeRowIds.value.indexOf(params.targetRowId);
@@ -157,6 +166,7 @@ export function useTableSelection(options) {
     bulkScope,
     clearSelection,
     getRowId,
+    getRowsSelectionState,
     isRowSelected,
     lastTouchedRowId,
     partiallySelected,

package/dist/runtime/table/composables/use-table-tree.js

@@ -1,5 +1,12 @@
 import { usePreferredReducedMotion } from "@vueuse/core";
 import { computed, onScopeDispose, reactive, ref, shallowRef } from "vue";
+import {
+  ROW_CONCEAL_MS as CONCEAL_MS,
+  ROW_MOTION_LIMIT as MOTION_ROW_LIMIT,
+  ROW_REVEAL_MS as REVEAL_MS,
+  ROW_STAGGER_LIMIT as STAGGER_ROW_LIMIT,
+  ROW_STAGGER_MS as STAGGER_MS
+} from "../constants/row-motion.js";
 import { resolveTableRowId } from "../utils/rows.js";
 import {
   buildTableTree,
@@ -8,11 +15,6 @@ import {
   getVisibleDescendants,
   isOpenByDefault
 } from "../utils/tree.js";
-const CONCEAL_MS = 120;
-const REVEAL_MS = 190;
-const STAGGER_MS = 24;
-const MOTION_ROW_LIMIT = 24;
-const STAGGER_ROW_LIMIT = 8;
 const EMPTY_INDEX = {
   branches: [],
   byId: /* @__PURE__ */ new Map(),

package/dist/runtime/table/constants/row-motion.d.ts

@@ -0,0 +1,8 @@
+/** How long a closing branch or group plays out before its rows leave the list. */
+export declare const ROW_CONCEAL_MS = 120;
+/** How long the last revealed row takes to settle; the row's CSS owns the actual timing. */
+export declare const ROW_REVEAL_MS = 190;
+export declare const ROW_STAGGER_MS = 24;
+/** Rows beyond these start or stop without a transition: they are mostly off screen anyway. */
+export declare const ROW_MOTION_LIMIT = 24;
+export declare const ROW_STAGGER_LIMIT = 8;

package/dist/runtime/table/constants/row-motion.js

@@ -0,0 +1,5 @@
+export const ROW_CONCEAL_MS = 120;
+export const ROW_REVEAL_MS = 190;
+export const ROW_STAGGER_MS = 24;
+export const ROW_MOTION_LIMIT = 24;
+export const ROW_STAGGER_LIMIT = 8;

package/dist/runtime/table/types/groups.d.ts

@@ -0,0 +1,44 @@
+import type { GenericObject, RenderableType, TableKnownFieldPath } from './utils.js';
+/** What a group's `label`, `summary` and `collapsed` receive. */
+export interface TableGroupParams<TRow extends GenericObject = GenericObject> {
+    /** The value its rows share; `undefined` for rows that have none. */
+    value: unknown;
+    /** Its rows among those loaded, in display order. */
+    rows: TRow[];
+}
+/**
+ * Gathers rows that share a value under a header row that folds them.
+ *
+ * Groups exist only on screen: the data stays flat, so filters, pagination and bulk actions keep
+ * working on rows. They cover the rows that are loaded, so a remote source needs a page large
+ * enough to hold a whole group. A column sort applies inside each group.
+ *
+ * @example
+ * ```ts
+ * table: {
+ *   groupBy: {
+ *     key: 'country',
+ *     label: ({ value }) => countryName(value),
+ *   },
+ * }
+ * ```
+ */
+export interface TableGroupBySchema<TRow extends GenericObject = GenericObject> {
+    /** The row field to group on, or a function for a value the row does not hold as a field. */
+    key: TableKnownFieldPath<TRow> | ((row: TRow) => unknown);
+    /** The header's text. Defaults to the value, or the locale's "Other" for rows with none. */
+    label?: (params: TableGroupParams<TRow>) => RenderableType;
+    /** Shown next to the label. Defaults to the number of rows. */
+    summary?: (params: TableGroupParams<TRow>) => RenderableType;
+    /** Values listed here come first, in this order. The rest follow by value, empty ones last. */
+    order?: readonly unknown[];
+    /** Whether a group starts folded. A group the reader has toggled keeps that state. */
+    collapsed?: boolean | ((params: TableGroupParams<TRow>) => boolean);
+}
+/** One group of the loaded rows, resolved once per data change. */
+export interface TableGroup<TRow extends GenericObject = GenericObject> {
+    readonly key: string;
+    readonly value: unknown;
+    readonly rows: TRow[];
+    readonly rowIds: string[];
+}

package/dist/runtime/table/types/index.d.ts

@@ -3,6 +3,7 @@ export type * from './columns';
 export type * from './context';
 export type * from './data-list';
 export type * from './filters';
+export type * from './groups';
 export type * from './layout';
 export type * from './query-state';
 export type * from './remote-options';

package/dist/runtime/table/types/layout.d.ts

@@ -1,6 +1,7 @@
 import type { ButtonProps } from '@nuxt/ui/components/Button.vue';
 import type { LinkProps } from '@nuxt/ui/components/Link.vue';
 import type { TableColumnCollection, TableSummaryRequest, TableSummaryScope, TableSummaryValue } from './columns.js';
+import type { TableGroupBySchema } from './groups.js';
 import type { TableTreeSchema } from './tree.js';
 import type { GenericObject, TableDefaultSort, TableGridSortOption, TableLayout, TableRowRenderParams, RenderableType, TableSortKey, TableTextValue } from './utils.js';
 export interface TablePersistenceOptions {
@@ -75,12 +76,16 @@ export interface TableGridSchema<TRow extends GenericObject = GenericObject, TCo
     itemSize?: number | string | (() => number | string);
     sortOptions?: TableGridSortOption<TSortKey>[];
     defaultSorting?: TableDefaultSort<TSortKey>;
+    /** Gathers the cards that share a value under a header that folds them. See `TableGroupBySchema`. */
+    groupBy?: TableGroupBySchema<TRow>;
 }
 export interface TableTableSchema<TRow extends GenericObject = GenericObject, TContext extends GenericObject = GenericObject, TPageContext extends GenericObject = GenericObject, TSortKey extends string = TableSortKey<TRow>, TData = unknown> {
     enabled?: boolean | string | (() => boolean | string);
     columns?: TableColumnCollection<TRow, TContext, TPageContext, string, TSortKey, TData>;
     /** Lets rows hold child rows that open beneath them. See `TableTreeSchema`. */
     tree?: TableTreeSchema<TRow>;
+    /** Gathers rows that share a value under a header row that folds them. Ignored with `tree`. See `TableGroupBySchema`. */
+    groupBy?: TableGroupBySchema<TRow>;
     defaultSorting?: TableDefaultSort<TSortKey>;
     selection?: boolean | 'auto';
     summaries?: TableSummariesSchema<TRow>;

package/dist/runtime/table/utils/groups.d.ts

@@ -0,0 +1,14 @@
+import type { GenericObject, TableGroup, TableGroupBySchema } from '../types/index.js';
+/**
+ * Brings the rows sharing a value together. Rows keep their order inside a group, so the sort the
+ * source applied survives in each one.
+ */
+export declare function buildTableGroups<TRow extends GenericObject>(options: {
+    rows: TRow[];
+    groupBy: TableGroupBySchema<TRow>;
+    getRowId: (row: TRow, index: number) => string;
+}): TableGroup<TRow>[];
+export declare function tableGroupRow(group: TableGroup): GenericObject;
+export declare function tableGroupOf(row: GenericObject): TableGroup | undefined;
+export declare function tableGroupsStorageKey(tableKey: string): string;
+export declare function parseStoredGroupKeys(raw: string | null): string[];

package/dist/runtime/table/utils/groups.js

@@ -0,0 +1,55 @@
+import { getTableRowValue } from "./rows.js";
+const GROUP_ROW_KEY = "__nutTableGroup";
+function groupValueOf(row, groupBy) {
+  const { key } = groupBy;
+  const value = typeof key === "function" ? key(row) : getTableRowValue({ path: String(key), row });
+  return value === null || value === void 0 || value === "" ? void 0 : value;
+}
+function compareGroupValues(order, left, right) {
+  const leftRank = order.indexOf(left);
+  const rightRank = order.indexOf(right);
+  if (leftRank !== -1 && rightRank !== -1) return leftRank - rightRank;
+  if (leftRank !== -1) return -1;
+  if (rightRank !== -1) return 1;
+  if (left === void 0) return 1;
+  if (right === void 0) return -1;
+  return String(left).localeCompare(String(right), void 0, { numeric: true });
+}
+export function buildTableGroups(options) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const [index, row] of options.rows.entries()) {
+    const value = groupValueOf(row, options.groupBy);
+    const group = groups.get(value) ?? { rowIds: [], rows: [] };
+    group.rows.push(row);
+    group.rowIds.push(options.getRowId(row, index));
+    groups.set(value, group);
+  }
+  const order = options.groupBy.order ?? [];
+  return [...groups.entries()].sort(([left], [right]) => compareGroupValues(order, left, right)).map(([value, group]) => ({
+    key: `group:${JSON.stringify(value ?? null)}`,
+    rowIds: group.rowIds,
+    rows: group.rows,
+    value
+  }));
+}
+export function tableGroupRow(group) {
+  return { [GROUP_ROW_KEY]: group };
+}
+function isTableGroupRow(row) {
+  return GROUP_ROW_KEY in row;
+}
+export function tableGroupOf(row) {
+  return isTableGroupRow(row) ? row[GROUP_ROW_KEY] : void 0;
+}
+export function tableGroupsStorageKey(tableKey) {
+  return `nuxt-ui-tools:table-groups:${tableKey}`;
+}
+export function parseStoredGroupKeys(raw) {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.filter((key) => typeof key === "string") : [];
+  } catch {
+    return [];
+  }
+}

package/dist/runtime/table/utils/index.d.ts

@@ -6,6 +6,7 @@ export * from './data-list-ui.js';
 export * from './facets.js';
 export * from './filter-persistence.js';
 export * from './filters/index.js';
+export * from './groups.js';
 export * from './pagination.js';
 export * from './prefetch.js';
 export * from './query-state.js';

package/dist/runtime/table/utils/index.js

@@ -6,6 +6,7 @@ export * from "./data-list-ui.js";
 export * from "./facets.js";
 export * from "./filter-persistence.js";
 export * from "./filters/index.js";
+export * from "./groups.js";
 export * from "./pagination.js";
 export * from "./prefetch.js";
 export * from "./query-state.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.27.5",
+  "version": "1.29.0",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",
@@ -35,6 +35,9 @@
       "i18n": [
         "./dist/runtime/i18n/index.d.ts"
       ],
+      "media": [
+        "./dist/runtime/media/index.d.ts"
+      ],
       "query-state": [
         "./dist/runtime/query-state/index.d.ts"
       ],
@@ -93,6 +96,14 @@
       "types": "./dist/runtime/i18n/*.d.ts",
       "default": "./dist/runtime/i18n/*.js"
     },
+    "#ui-tools/media": {
+      "types": "./dist/runtime/media/index.d.ts",
+      "default": "./dist/runtime/media/index.js"
+    },
+    "#ui-tools/media/*": {
+      "types": "./dist/runtime/media/*.d.ts",
+      "default": "./dist/runtime/media/*.js"
+    },
     "#ui-tools/query-state": {
       "types": "./dist/runtime/query-state/index.d.ts",
       "default": "./dist/runtime/query-state/index.js"
@@ -159,6 +170,10 @@
       "types": "./dist/runtime/i18n/index.d.ts",
       "import": "./dist/runtime/i18n/index.js"
     },
+    "./media": {
+      "types": "./dist/runtime/media/index.d.ts",
+      "import": "./dist/runtime/media/index.js"
+    },
     "./query-state": {
       "types": "./dist/runtime/query-state/index.d.ts",
       "import": "./dist/runtime/query-state/index.js"