nuxt-ui-tools 1.14.0 → 1.16.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/form/fields/matrix/component.vue

@@ -91,13 +91,16 @@ function controlClass(field) {
   mergeFormUiClass(
     [
       rowPadding,
+      'text-left font-medium',
       bordered ? 'border-b border-r border-default' : 'border-b border-default'
     ].join(' '),
     formUi.ui.value.matrix?.ui?.corner
   )
 "
               :style="{ width: rowHeaderWidth, minWidth: rowHeaderWidth }"
-            />
+            >
+              {{ resolveFormText(fieldProps.rowHeaderLabel) }}
+            </th>
             <th
               v-for="column in visibleFields"
               :id="columnLabelId(column)"

package/dist/runtime/form/fields/matrix/types.d.ts

@@ -17,6 +17,8 @@ export type FormMatrixEntry = FormMatrixRow | FormMatrixSection;
 export interface FormMatrixProps {
     minWidth?: number | string;
     rowHeaderWidth?: number | string;
+    /** Heading of the row label column, shown in the header corner. */
+    rowHeaderLabel?: FormText;
     bordered?: boolean;
     striped?: boolean;
     hoverable?: boolean;

package/dist/runtime/table/components/actions/row-actions.d.vue.ts

@@ -1,4 +1,4 @@
-import type { DropdownMenuProps } from '@nuxt/ui/components/DropdownMenu.vue';
+import type { DropdownMenuItem, DropdownMenuProps } from '@nuxt/ui/components/DropdownMenu.vue';
 import type { DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
     content?: DropdownMenuProps['content'];
@@ -10,10 +10,10 @@ type __VLS_Props = {
     ui?: DropdownMenuProps['ui'];
 };
 declare var __VLS_8: {
-    items: import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[];
+    items: DropdownMenuItem[][];
     open: boolean;
 }, __VLS_24: {
-    items: import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[];
+    items: DropdownMenuItem[][];
     open: boolean;
 };
 type __VLS_Slots = {} & {

package/dist/runtime/table/components/actions/row-actions.vue

@@ -6,7 +6,7 @@ import { computed, ref, useAttrs } from "vue";
 import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
 import { useTableInternals } from "../../composables/use-table-internals";
 import { useTableRowActionScope } from "../../composables/use-table-row-actions";
-import { createRowActionDropdownItems, resolveVisibleTableRowActions } from "../../utils";
+import { createRowActionDropdownGroups, resolveVisibleTableRowActions } from "../../utils";
 defineOptions({
   inheritAttrs: false
 });
@@ -23,12 +23,18 @@ const attrs = useAttrs();
 const internals = useTableInternals();
 const { isMobile } = useDataListBreakpoint();
 const sheetOpen = ref(false);
-const sheetItems = computed(() => {
-  const groups = Array.isArray(items.value[0]) ? items.value : [items.value];
-  return groups.flatMap(
-    (group, index) => group.map((item, itemIndex) => ({ ...item, dividerBefore: index > 0 && itemIndex === 0 }))
-  );
-});
+const sheetItems = computed(
+  () => items.value.flatMap(
+    (group, index) => group.map((item, itemIndex) => ({
+      color: item.color,
+      disabled: item.disabled,
+      dividerBefore: index > 0 && itemIndex === 0,
+      icon: item.icon,
+      label: item.label,
+      onSelect: item.onSelect
+    }))
+  )
+);
 function runSheetItem(item) {
   sheetOpen.value = false;
   item.onSelect?.(new Event("select"));
@@ -48,7 +54,7 @@ const items = computed(() => {
   if (!scope?.value) {
     return [];
   }
-  return createRowActionDropdownItems({
+  return createRowActionDropdownGroups({
     actions: visibleActions.value,
     scope: scope.value
   });

package/dist/runtime/table/components/actions/row-actions.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DropdownMenuProps } from '@nuxt/ui/components/DropdownMenu.vue';
+import type { DropdownMenuItem, DropdownMenuProps } from '@nuxt/ui/components/DropdownMenu.vue';
 import type { DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
     content?: DropdownMenuProps['content'];
@@ -10,10 +10,10 @@ type __VLS_Props = {
     ui?: DropdownMenuProps['ui'];
 };
 declare var __VLS_8: {
-    items: import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[];
+    items: DropdownMenuItem[][];
     open: boolean;
 }, __VLS_24: {
-    items: import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[];
+    items: DropdownMenuItem[][];
     open: boolean;
 };
 type __VLS_Slots = {} & {

package/dist/runtime/table/components/table/table-empty-state.vue

@@ -18,17 +18,18 @@ const emptyProps = computed(() => dataListUi.ui.value.table?.props?.empty);
 const filtered = computed(
   () => internals.filters.hasActiveUiFilters.value || Boolean(internals.filters.searchQuery.value)
 );
+const custom = computed(() => filtered.value ? void 0 : emptyProps.value);
 const icon = computed(
-  () => emptyProps.value?.icon ?? (filtered.value ? "i-lucide-search-x" : "i-lucide-inbox")
+  () => custom.value?.icon ?? (filtered.value ? "i-lucide-search-x" : "i-lucide-inbox")
 );
 const title = computed(
-  () => emptyProps.value?.title ?? (filtered.value ? t("table.states.empty.filteredTitle") : t("table.states.empty.title"))
+  () => custom.value?.title ?? (filtered.value ? t("table.states.empty.filteredTitle") : t("table.states.empty.title"))
 );
 const description = computed(() => {
-  if (emptyProps.value?.description === false) {
+  if (custom.value?.description === false) {
     return "";
   }
-  return emptyProps.value?.description || (filtered.value ? t("table.states.empty.filteredDescription") : t("table.states.empty.description"));
+  return custom.value?.description || (filtered.value ? t("table.states.empty.filteredDescription") : t("table.states.empty.description"));
 });
 function reset() {
   internals.filters.clearAllFilters();

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

@@ -2,6 +2,9 @@ import { useCookie } from "nuxt/app";
 import { computed, ref, watch } from "vue";
 import {
   ROW_ACTIONS_COLUMN_ID,
+  applyColumnPreferences,
+  decodeColumnPreferences,
+  encodeColumnPreferences,
   hasVisibleTableRowActions,
   createColumnMenuItems,
   createDefaultColumnState,
@@ -79,12 +82,18 @@ export function useTableColumns(params) {
     { immediate: true }
   );
   const persistPreferences = computed(() => params.schema.value.persistence?.preferences !== false);
-  const preferencesCookie = useCookie(
-    `${params.schema.value.tableKey}::columns`,
-    { default: () => null, maxAge: 60 * 60 * 24 * 365 }
-  );
-  if (persistPreferences.value && preferencesCookie.value) {
-    tableState.value = applyPersistedPreferences(tableState.value, preferencesCookie.value);
+  const preferencesCookie = useCookie(`${params.schema.value.tableKey}::columns`, {
+    decode: (value) => value ?? null,
+    default: () => null,
+    encode: (value) => value ?? "",
+    maxAge: 60 * 60 * 24 * 365
+  });
+  const storedPreferences = persistPreferences.value ? decodeColumnPreferences(preferencesCookie.value) : null;
+  if (storedPreferences) {
+    tableState.value = applyColumnPreferences({
+      preferences: storedPreferences,
+      state: tableState.value
+    });
   }
   watch(
     tableState,
@@ -92,12 +101,19 @@ export function useTableColumns(params) {
       if (!persistPreferences.value) {
         return;
       }
-      const next = toPersistedPreferences(state);
-      if (JSON.stringify(next) !== JSON.stringify(preferencesCookie.value)) {
+      const next = encodeColumnPreferences({
+        defaults: createResetColumnState({
+          currentState: state,
+          runtimeColumns: runtimeColumns.value,
+          schema: params.schema.value
+        }),
+        state
+      });
+      if (next !== preferencesCookie.value) {
         preferencesCookie.value = next;
       }
     },
-    { deep: true }
+    { deep: true, immediate: true }
   );
   watch(
     () => params.state.queryState.sorting.value,
@@ -251,36 +267,3 @@ export function useTableColumns(params) {
     visibleOrderedColumns
   };
 }
-function toPersistedPreferences(state) {
-  return {
-    order: state.columnOrder,
-    pinning: state.columnPinning,
-    sizing: state.columnSizing,
-    visibility: state.columnVisibility
-  };
-}
-function applyPersistedPreferences(state, persisted) {
-  const known = new Set(state.columnOrder);
-  return {
-    ...state,
-    columnOrder: [
-      ...persisted.order.filter((id) => known.has(id)),
-      ...state.columnOrder.filter((id) => !persisted.order.includes(id))
-    ],
-    columnPinning: {
-      left: (persisted.pinning.left ?? state.columnPinning.left ?? []).filter(
-        (id) => known.has(id)
-      ),
-      right: (persisted.pinning.right ?? state.columnPinning.right ?? []).filter(
-        (id) => known.has(id)
-      )
-    },
-    columnSizing: Object.fromEntries(
-      Object.entries(persisted.sizing).filter(([id]) => known.has(id))
-    ),
-    columnVisibility: {
-      ...state.columnVisibility,
-      ...Object.fromEntries(Object.entries(persisted.visibility).filter(([id]) => known.has(id)))
-    }
-  };
-}

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

@@ -57,6 +57,11 @@ export interface TableRowActionContext<TRow extends GenericObject = GenericObjec
 export interface TableRowAction<TRow extends GenericObject = GenericObject, TContext extends GenericObject = GenericObject, TPageContext extends GenericObject = GenericObject> extends Omit<DropdownMenuItem, 'children' | 'disabled' | 'loading' | 'label' | 'onSelect'> {
     key: string;
     label?: TableTextValue;
+    /**
+     * Actions sharing a group render together, separated from the other groups by a divider.
+     * Groups follow the order of their first visible action; actions without a group share one.
+     */
+    group?: string;
     condition?: boolean | ((context: TableRowActionContext<TRow, TContext, TPageContext>) => boolean);
     disabled?: boolean | ((context: TableRowActionContext<TRow, TContext, TPageContext>) => boolean);
     loading?: boolean | ((context: TableRowActionContext<TRow, TContext, TPageContext>) => boolean);

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

@@ -38,5 +38,9 @@ export declare function createRowActionDropdownItems(options: {
     actions: ResolvedRowAction[];
     scope: TableInjectedRowActionScope;
 }): DropdownMenuItem[];
+export declare function createRowActionDropdownGroups(options: {
+    actions: ResolvedRowAction[];
+    scope: TableInjectedRowActionScope;
+}): DropdownMenuItem[][];
 export declare function resolveTableActionLabel(label: TableTextValue | undefined): string | undefined;
 export {};

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

@@ -44,6 +44,16 @@ export function createRowActionDropdownItems(options) {
     (action) => mapRowActionToDropdownItem({ action, scope: options.scope })
   );
 }
+export function createRowActionDropdownGroups(options) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const action of options.actions) {
+    const key = action.group ?? "";
+    const items = groups.get(key) ?? [];
+    items.push(mapRowActionToDropdownItem({ action, scope: options.scope }));
+    groups.set(key, items);
+  }
+  return [...groups.values()];
+}
 function mapRowActionToDropdownItem(options) {
   const children = options.action.children ? createRowActionDropdownItems({
     actions: options.action.children,
@@ -67,6 +77,7 @@ function mapRowActionToDropdownItem(options) {
   };
   delete item.condition;
   delete item.action;
+  delete item.group;
   return item;
 }
 function resolveActionLabel(action) {

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

@@ -1,4 +1,5 @@
 export * from './menu.js';
+export * from './preferences.js';
 export * from './render.js';
 export * from './schema.js';
 export * from './state.js';

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

@@ -1,4 +1,5 @@
 export * from "./menu.js";
+export * from "./preferences.js";
 export * from "./render.js";
 export * from "./schema.js";
 export * from "./state.js";

package/dist/runtime/table/utils/columns/preferences.d.ts

@@ -0,0 +1,40 @@
+import type { TableColumnState } from './types.js';
+export interface ColumnPreferences {
+    order?: string[];
+    hidden?: string[];
+    shown?: string[];
+    left?: string[];
+    right?: string[];
+    widths?: Record<string, number>;
+}
+export declare function encodeColumnPreferences(options: {
+    state: TableColumnState;
+    defaults: TableColumnState;
+}): string | null;
+export declare function decodeColumnPreferences(value: string | null | undefined): ColumnPreferences | null;
+export declare function applyColumnPreferences(options: {
+    state: TableColumnState;
+    preferences: ColumnPreferences;
+}): {
+    columnOrder: string[];
+    columnPinning: {
+        left: string[];
+        right: string[];
+    };
+    columnSizing: Record<string, number>;
+    columnVisibility: {
+        [x: string]: boolean;
+    };
+    columnSizingInfo: {
+        startOffset: number | null;
+        startSize: number | null;
+        deltaOffset: number | null;
+        deltaPercentage: number | null;
+        isResizingColumn: false | string;
+        columnSizingStart: [string, number][];
+    };
+    sorting: {
+        id: string;
+        desc: boolean;
+    }[];
+};

package/dist/runtime/table/utils/columns/preferences.js

@@ -0,0 +1,145 @@
+import { isArray, isFiniteNumber, isPlainObject, isString } from "../../../shared/utils/predicate.js";
+import { uniqueColumnIds } from "./schema.js";
+import { ROW_ACTIONS_COLUMN_ID, SELECT_COLUMN_ID } from "./types.js";
+const FORMAT_VERSION = "1";
+const SECTION_SEPARATOR = "!";
+const ITEM_SEPARATOR = "~";
+const WIDTH_SEPARATOR = "*";
+const INTERNAL_COLUMN_IDS = /* @__PURE__ */ new Set([SELECT_COLUMN_ID, ROW_ACTIONS_COLUMN_ID]);
+export function encodeColumnPreferences(options) {
+  const sections = [];
+  const order = userColumnIds(options.state.columnOrder);
+  const defaultOrder = userColumnIds(options.defaults.columnOrder);
+  const visibilityChanges = defaultOrder.filter(
+    (id) => (options.state.columnVisibility[id] ?? options.defaults.columnVisibility[id]) !== options.defaults.columnVisibility[id]
+  );
+  const left = userColumnIds(options.state.columnPinning.left ?? []);
+  const right = userColumnIds(options.state.columnPinning.right ?? []);
+  const widths = Object.entries(options.state.columnSizing).filter(
+    ([, width]) => Number.isFinite(width)
+  );
+  if (!sameIds(order, defaultOrder)) {
+    sections.push(`o${joinIds(order)}`);
+  }
+  const hidden = visibilityChanges.filter((id) => options.state.columnVisibility[id] === false);
+  const shown = visibilityChanges.filter((id) => options.state.columnVisibility[id] === true);
+  if (hidden.length) {
+    sections.push(`h${joinIds(hidden)}`);
+  }
+  if (shown.length) {
+    sections.push(`v${joinIds(shown)}`);
+  }
+  if (!sameIds(left, userColumnIds(options.defaults.columnPinning.left ?? []))) {
+    sections.push(`l${joinIds(left)}`);
+  }
+  if (!sameIds(right, userColumnIds(options.defaults.columnPinning.right ?? []))) {
+    sections.push(`r${joinIds(right)}`);
+  }
+  if (widths.length) {
+    sections.push(
+      `w${widths.map(([id, width]) => `${escapeId(id)}${WIDTH_SEPARATOR}${Math.round(width)}`).join(ITEM_SEPARATOR)}`
+    );
+  }
+  return sections.length ? [FORMAT_VERSION, ...sections].join(SECTION_SEPARATOR) : null;
+}
+export function decodeColumnPreferences(value) {
+  if (!value) {
+    return null;
+  }
+  if (value.startsWith("{") || value.startsWith("%7B")) {
+    return decodeLegacyPreferences(value);
+  }
+  const [version, ...sections] = value.split(SECTION_SEPARATOR);
+  if (version !== FORMAT_VERSION) {
+    return null;
+  }
+  const preferences = {};
+  for (const section of sections) {
+    const key = section.charAt(0);
+    const ids = splitIds(section.slice(1));
+    if (key === "o") preferences.order = ids;
+    else if (key === "h") preferences.hidden = ids;
+    else if (key === "v") preferences.shown = ids;
+    else if (key === "l") preferences.left = ids;
+    else if (key === "r") preferences.right = ids;
+    else if (key === "w") preferences.widths = decodeWidths(section.slice(1));
+  }
+  return preferences;
+}
+export function applyColumnPreferences(options) {
+  const known = new Set(options.state.columnOrder);
+  const keep = (ids) => (ids ?? []).filter((id) => known.has(id));
+  const { preferences, state } = options;
+  const order = keep(preferences.order);
+  return {
+    ...state,
+    columnOrder: preferences.order ? uniqueColumnIds({ columnIds: [...order, ...state.columnOrder] }) : state.columnOrder,
+    columnPinning: {
+      left: preferences.left ? uniqueColumnIds({ columnIds: [SELECT_COLUMN_ID, ...keep(preferences.left)] }) : state.columnPinning.left ?? [],
+      right: preferences.right ? withRowActionsLast({
+        ids: keep(preferences.right),
+        hadRowActions: (state.columnPinning.right ?? []).includes(ROW_ACTIONS_COLUMN_ID)
+      }) : state.columnPinning.right ?? []
+    },
+    columnSizing: preferences.widths ? Object.fromEntries(Object.entries(preferences.widths).filter(([id]) => known.has(id))) : state.columnSizing,
+    columnVisibility: {
+      ...state.columnVisibility,
+      ...Object.fromEntries(keep(preferences.hidden).map((id) => [id, false])),
+      ...Object.fromEntries(keep(preferences.shown).map((id) => [id, true]))
+    }
+  };
+}
+function decodeLegacyPreferences(value) {
+  let legacy;
+  try {
+    legacy = JSON.parse(value.startsWith("{") ? value : decodeURIComponent(value));
+  } catch {
+    return null;
+  }
+  if (!isPlainObject(legacy)) {
+    return null;
+  }
+  const visibility = isPlainObject(legacy.visibility) ? Object.entries(legacy.visibility) : [];
+  const pinning = isPlainObject(legacy.pinning) ? legacy.pinning : {};
+  return {
+    hidden: visibility.filter(([, visible]) => visible === false).map(([id]) => id),
+    left: isArray(pinning.left) ? pinning.left.filter((id) => isString(id)) : void 0,
+    order: isArray(legacy.order) ? legacy.order.filter((id) => isString(id)) : void 0,
+    right: isArray(pinning.right) ? pinning.right.filter((id) => isString(id)) : void 0,
+    widths: isPlainObject(legacy.sizing) ? Object.fromEntries(
+      Object.entries(legacy.sizing).filter(
+        (entry) => isFiniteNumber(entry[1])
+      )
+    ) : void 0
+  };
+}
+function decodeWidths(value) {
+  return Object.fromEntries(
+    value.split(ITEM_SEPARATOR).flatMap((entry) => {
+      const separator = entry.lastIndexOf(WIDTH_SEPARATOR);
+      const width = Number(entry.slice(separator + 1));
+      return separator > 0 && Number.isFinite(width) ? [[decodeURIComponent(entry.slice(0, separator)), width]] : [];
+    })
+  );
+}
+function userColumnIds(ids) {
+  return ids.filter((id) => !INTERNAL_COLUMN_IDS.has(id));
+}
+function sameIds(first, second) {
+  return first.length === second.length && first.every((id, index) => id === second[index]);
+}
+function joinIds(ids) {
+  return ids.map(escapeId).join(ITEM_SEPARATOR);
+}
+function splitIds(value) {
+  return value ? value.split(ITEM_SEPARATOR).map((id) => decodeURIComponent(id)) : [];
+}
+function escapeId(id) {
+  return encodeURIComponent(id).replace(
+    /[!'()*~]/gu,
+    (character) => `%${character.charCodeAt(0).toString(16).toUpperCase()}`
+  );
+}
+function withRowActionsLast(options) {
+  return options.hadRowActions ? [...options.ids, ROW_ACTIONS_COLUMN_ID] : options.ids;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.14.0",
+  "version": "1.16.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",