nuxt-ui-tools 0.1.2 → 1.0.0

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

@@ -1,3 +1,4 @@
+import { useCookie } from "nuxt/app";
 import { computed, ref, watch } from "vue";
 import {
   ROW_ACTIONS_COLUMN_ID,
@@ -17,69 +18,95 @@ import {
   updateColumnPinningState,
   updateColumnVisibilityState
 } from "../utils/index.js";
+import { createColumnDefs } from "../utils/columns/defs.js";
 export function useTableColumns(params) {
   const tableState = ref(createDefaultColumnState());
   const hasRowActions = computed(() => {
-    if (!params.schema.value.rowActions) return false;
+    if (!params.schema.value.rowActions) {
+      return false;
+    }
     const tableApi = params.tableApi.value;
-    if (!tableApi) return false;
+    if (!tableApi) {
+      return false;
+    }
     return hasVisibleTableRowActions({
-      schema: params.schema.value,
-      rows: params.data.data.value.rows,
       context: params.data.contextData.value,
+      layout: params.tableLayout.value,
       pageContext: params.data.pageContextData.value,
-      tableApi,
-      layout: params.tableLayout.value
+      rows: params.data.data.value.rows,
+      schema: params.schema.value,
+      tableApi
     });
   });
   const runtimeColumns = computed(() => [
     ...createRuntimeColumns({
-      schema: params.schema.value,
-      context: params.data.contextData.value
+      context: params.data.contextData.value,
+      schema: params.schema.value
     }),
     ...hasRowActions.value ? [
       {
-        id: ROW_ACTIONS_COLUMN_ID,
-        label: "Actions",
-        icon: "i-lucide-ellipsis",
         canHide: false,
-        defaultVisible: true,
         configurable: false,
+        defaultVisible: true,
+        icon: "i-lucide-ellipsis",
+        id: ROW_ACTIONS_COLUMN_ID,
+        label: "Actions",
         pinned: "right"
       }
     ] : []
   ]);
   const orderedColumns = computed(
     () => createOrderedColumns({
-      runtimeColumns: runtimeColumns.value,
-      columnOrder: tableState.value.columnOrder ?? []
+      columnOrder: tableState.value.columnOrder ?? [],
+      runtimeColumns: runtimeColumns.value
     })
   );
   const visibleOrderedColumns = computed(
     () => createVisibleOrderedColumns({
-      orderedColumns: orderedColumns.value,
-      columnVisibility: tableState.value.columnVisibility ?? {}
+      columnVisibility: tableState.value.columnVisibility ?? {},
+      orderedColumns: orderedColumns.value
     })
   );
   watch(
     runtimeColumns,
     (columns) => {
       tableState.value = syncColumnState({
-        schema: params.schema.value,
+        currentState: tableState.value,
         runtimeColumns: columns,
-        currentState: tableState.value
+        schema: params.schema.value
       });
     },
     { 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);
+  }
+  watch(
+    tableState,
+    (state) => {
+      if (!persistPreferences.value) {
+        return;
+      }
+      const next = toPersistedPreferences(state);
+      if (JSON.stringify(next) !== JSON.stringify(preferencesCookie.value)) {
+        preferencesCookie.value = next;
+      }
+    },
+    { deep: true }
+  );
   watch(
     () => params.state.queryState.sorting.value,
     (sorting) => {
       tableState.value = syncSortingState({
         currentState: tableState.value,
         sorting: sorting ? {
-          sortKey: sorting.key,
-          sortDirection: sorting.dir
+          sortDirection: sorting.dir,
+          sortKey: sorting.key
         } : null
       });
     },
@@ -95,35 +122,35 @@ export function useTableColumns(params) {
   }
   function getPinnedState(options) {
     return resolvePinnedState({
-      currentState: tableState.value,
-      columnId: options.columnId
+      columnId: options.columnId,
+      currentState: tableState.value
     });
   }
   function setVisibility(options) {
     tableState.value = updateColumnVisibilityState({
-      currentState: tableState.value,
       columnId: options.columnId,
+      currentState: tableState.value,
       visible: options.visible
     });
   }
   function setPinning(options) {
     tableState.value = updateColumnPinningState({
-      currentState: tableState.value,
       columnId: options.columnId,
+      currentState: tableState.value,
       pinned: options.pinned
     });
   }
   function setOrder(options) {
     tableState.value = updateColumnOrderState({
-      currentState: tableState.value,
-      columnIds: options.columnIds
+      columnIds: options.columnIds,
+      currentState: tableState.value
     });
   }
   function reset() {
     tableState.value = createResetColumnState({
-      schema: params.schema.value,
+      currentState: tableState.value,
       runtimeColumns: runtimeColumns.value,
-      currentState: tableState.value
+      schema: params.schema.value
     });
   }
   function setSorting(sorting) {
@@ -137,8 +164,8 @@ export function useTableColumns(params) {
       return;
     }
     params.state.queryState.sorting.value = {
-      key,
-      dir: params.state.queryState.sorting.value?.dir ?? "asc"
+      dir: params.state.queryState.sorting.value?.dir ?? "asc",
+      key
     };
   }
   function setSortDirection(direction) {
@@ -148,8 +175,8 @@ export function useTableColumns(params) {
       return;
     }
     params.state.queryState.sorting.value = {
-      key: currentSorting.key,
-      dir: direction
+      dir: direction,
+      key: currentSorting.key
     };
   }
   function clearSorting() {
@@ -158,18 +185,18 @@ export function useTableColumns(params) {
   function toggleSorting(key) {
     const currentSorting = params.state.queryState.sorting.value;
     if (!currentSorting || currentSorting.key !== key) {
-      setSorting({ key, dir: "asc" });
+      setSorting({ dir: "asc", key });
       return;
     }
     setSorting({
-      key,
-      dir: currentSorting.dir === "asc" ? "desc" : "asc"
+      dir: currentSorting.dir === "asc" ? "desc" : "asc",
+      key
     });
   }
   const sortingState = computed(() => ({
-    key: params.state.queryState.sorting.value?.key,
+    active: Boolean(params.state.queryState.sorting.value?.key),
     dir: params.state.queryState.sorting.value?.dir,
-    active: Boolean(params.state.queryState.sorting.value?.key)
+    key: params.state.queryState.sorting.value?.key
   }));
   const sortKeys = computed(
     () => runtimeColumns.value.flatMap((column) => column.sortableKey ? [column.sortableKey] : [])
@@ -177,45 +204,83 @@ export function useTableColumns(params) {
   function getMenuItems(options) {
     return createColumnMenuItems({
       columnId: options.columnId,
-      schema: params.schema.value,
-      orderedColumns: orderedColumns.value,
-      getSortState,
       getPinnedState,
+      getSortState,
+      label: orderedColumns.value.find((column) => column.id === options.columnId)?.label,
+      orderedColumns: orderedColumns.value,
+      schema: params.schema.value,
       setPinning,
-      setVisibility,
-      setSorting
+      setSorting,
+      setVisibility
     });
   }
   const tableColumns = computed(() => {
     const selectionColumn = createSelectionColumn({ params });
     const dataColumns = createDataColumns({
-      params,
-      visibleOrderedColumns: visibleOrderedColumns.value,
       getMenuItems,
       getPinnedState,
-      getSortState
+      getSortState,
+      params,
+      visibleOrderedColumns: visibleOrderedColumns.value
     });
     return params.selection.selectionEnabled.value ? [selectionColumn, ...dataColumns] : dataColumns;
   });
+  const columnDefs = computed(
+    () => createColumnDefs({ params, visibleOrderedColumns: visibleOrderedColumns.value })
+  );
   return {
-    tableState,
-    tableColumns,
-    runtimeColumns,
+    clearSorting,
+    columnDefs,
+    getMenuItems,
+    getPinnedState,
+    getSortState,
     orderedColumns,
-    visibleOrderedColumns,
     reset,
-    setVisibility,
-    setPinning,
+    runtimeColumns,
     setOrder,
-    getSortState,
-    getPinnedState,
-    getMenuItems,
-    sortingState,
-    sortKeys,
-    setSorting,
-    setSortKey,
+    setPinning,
     setSortDirection,
-    clearSorting,
-    toggleSorting
+    setSortKey,
+    setSorting,
+    setVisibility,
+    sortKeys,
+    sortingState,
+    tableColumns,
+    tableState,
+    toggleSorting,
+    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/composables/use-table-controls.d.ts

@@ -1,5 +1,5 @@
-import { type ComputedRef } from 'vue';
-import type { TableLayout, TableSchemaView } from '../types/index.js';
+import type { ComputedRef } from 'vue';
+import type { TableControlsSchema, TableLayout, TableSchemaView } from '../types/index.js';
 import type { useTableLayout } from './use-table-layout.js';
 export interface UseTableControlsParams {
     schema: ComputedRef<TableSchemaView>;
@@ -8,11 +8,39 @@ export interface UseTableControlsParams {
 export declare function useTableControls(options: UseTableControlsParams): {
     columnsPanelOpen: import("vue").Ref<boolean, boolean>;
     columnsPanelSearch: import("vue").Ref<string, string>;
-    tableLayout: import("vue").WritableComputedRef<"table" | "grid", "table" | "grid">;
-    gridEnabled: ComputedRef<string | boolean | (() => boolean | string) | null>;
+    gridEnabled: ComputedRef<boolean>;
+    headerControls: ComputedRef<Record<keyof TableControlsSchema, boolean>>;
     layoutState: ComputedRef<{
-        active: "table" | "grid";
+        active: TableLayout;
         available: TableLayout[];
     }>;
+    rawControls: {
+        actions: {
+            grid: ComputedRef<boolean | null>;
+            table: ComputedRef<boolean | null>;
+        };
+        columns: {
+            grid: ComputedRef<boolean | null>;
+            table: ComputedRef<boolean | null>;
+        };
+        filters: {
+            grid: ComputedRef<boolean | null>;
+            table: ComputedRef<boolean | null>;
+        };
+        layout: {
+            grid: ComputedRef<boolean | null>;
+            table: ComputedRef<boolean | null>;
+        };
+        refresh: {
+            grid: ComputedRef<boolean | null>;
+            table: ComputedRef<boolean | null>;
+        };
+        sort: {
+            grid: ComputedRef<boolean | null>;
+            table: ComputedRef<boolean | null>;
+        };
+    };
     setTableLayout: (layout: TableLayout) => void;
+    tableEnabled: ComputedRef<boolean>;
+    tableLayout: import("vue").WritableComputedRef<TableLayout, TableLayout>;
 };

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

@@ -1,25 +1,67 @@
 import { computed, ref } from "vue";
+import { useResponsiveValue } from "#ui-tools/shared";
+import { isBoolean, isFunction, isObject, isString } from "../../shared/utils/predicate.js";
 export function useTableControls(options) {
   const columnsPanelOpen = ref(false);
   const columnsPanelSearch = ref("");
   const tableLayout = options.layout.activeLayout;
-  const gridEnabled = options.layout.gridEnabled;
-  const layoutState = computed(() => ({
-    active: tableLayout.value,
-    available: [
-      ...options.layout.tableEnabled.value ? ["table"] : [],
-      ...options.layout.gridEnabled.value ? ["grid"] : []
-    ]
+  const { gridEnabled } = options.layout;
+  const { tableEnabled } = options.layout;
+  const rawControls = {
+    actions: responsiveControl("actions"),
+    columns: responsiveControl("columns"),
+    filters: responsiveControl("filters"),
+    layout: responsiveControl("layout"),
+    refresh: responsiveControl("refresh"),
+    sort: responsiveControl("sort")
+  };
+  const headerControls = computed(() => ({
+    actions: Boolean(rawControls.actions[tableLayout.value].value) && Boolean(options.schema.value.toolbarActions?.length),
+    columns: Boolean(rawControls.columns[tableLayout.value].value) && tableLayout.value === "table",
+    filters: Boolean(rawControls.filters[tableLayout.value].value) && Boolean(options.schema.value.filters?.ui?.length),
+    layout: Boolean(rawControls.layout[tableLayout.value].value) && gridEnabled.value && tableEnabled.value,
+    refresh: Boolean(rawControls.refresh[tableLayout.value].value),
+    sort: Boolean(rawControls.sort[tableLayout.value].value) && tableLayout.value === "grid" && Boolean(options.schema.value.grid?.sortOptions?.length)
   }));
+  const layoutState = computed(() => {
+    const available = [];
+    if (options.layout.tableEnabled.value) {
+      available.push("table");
+    }
+    if (options.layout.gridEnabled.value) {
+      available.push("grid");
+    }
+    return { active: tableLayout.value, available };
+  });
   function setTableLayout(layout) {
     options.layout.activeLayout.value = layout;
   }
+  function responsiveControl(key) {
+    return {
+      grid: useResponsiveValue(() => resolveControl(key, "grid"), "boolean"),
+      table: useResponsiveValue(() => resolveControl(key, "table"), "boolean")
+    };
+  }
+  function resolveControl(key, layout) {
+    const configured = options.schema.value.controls?.[key];
+    const value = isFunction(configured) ? configured() : configured;
+    if (value === void 0) return "true";
+    if (isBoolean(value) || isString(value)) return String(value);
+    if (!isLayoutControlMap(value)) return "true";
+    return String(value[layout] ?? true);
+  }
   return {
     columnsPanelOpen,
     columnsPanelSearch,
-    tableLayout,
     gridEnabled,
+    headerControls,
     layoutState,
-    setTableLayout
+    rawControls,
+    setTableLayout,
+    tableEnabled,
+    tableLayout
   };
 }
+function isLayoutControlMap(value) {
+  return isObject(value);
+}

package/dist/runtime/table/composables/use-table-data.d.ts

@@ -1,6 +1,6 @@
 import { useInfiniteQuery, useQueries, useQuery } from '@tanstack/vue-query';
-import { type ComputedRef } from 'vue';
-import type { GenericObject, TableExternalState, TableFacetExecutionResult, TableSchemaView, TableSourceRequestContext } from '../types/index.js';
+import type { ComputedRef } from 'vue';
+import type { GenericObject, TableExternalState, TableFacetExecutionResult, TableSchemaView, TableSourceRequestContext, TableRefreshResult, TableRuntimeRecord } from '../types/index.js';
 import type { UseTableStartupReturn } from './use-table-startup.js';
 import type { useTableState } from './use-table-state.js';
 export interface UseTableDataParams {
@@ -10,13 +10,13 @@ export interface UseTableDataParams {
 }
 export interface UseTableDataReturn {
     context: ReturnType<typeof useQueries>;
-    contextData: ComputedRef<Record<string, unknown>>;
+    contextData: ComputedRef<TableRuntimeRecord>;
     pageContext: ReturnType<typeof useQueries>;
-    pageContextData: ComputedRef<Record<string, unknown>>;
+    pageContextData: ComputedRef<TableRuntimeRecord>;
     facetsBaseContext: ComputedRef<{
         filters: TableSourceRequestContext['filters'];
         search: TableSourceRequestContext['search'];
-        context: Record<string, unknown>;
+        context: TableRuntimeRecord;
     }>;
     requestContext: ComputedRef<TableSourceRequestContext>;
     searchParams: ComputedRef<TableSourceRequestContext>;
@@ -42,9 +42,9 @@ export interface UseTableDataReturn {
         isPageContextPending: boolean;
         isPageContextFetching: boolean;
     }>;
-    refreshContext: () => Promise<unknown[]>;
-    refreshData: () => (...args: Parameters<ReturnType<typeof useQuery>['refetch']>) => Promise<unknown>;
-    refreshPageContext: () => Promise<unknown[]>;
+    refreshContext: () => Promise<TableRefreshResult[]>;
+    refreshData: () => (...args: Parameters<ReturnType<typeof useQuery>['refetch']>) => Promise<TableRefreshResult>;
+    refreshPageContext: () => Promise<TableRefreshResult[]>;
     updateRows: (rows: GenericObject[]) => void;
 }
 export declare function useTableData(params: UseTableDataParams): UseTableDataReturn;