nuxt-ui-tools 0.1.0

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

@@ -0,0 +1,57 @@
+import { resolveTextValue } from "#ui-tools/shared/utils/render";
+export function findSchemaColumn(options) {
+  return (options.schema.table?.columns ?? []).find((column) => column.key === options.columnId);
+}
+export function createRuntimeColumns(options) {
+  return (options.schema.table?.columns ?? []).filter((column) => (column.condition?.() ?? true) && (column.enabled ?? true)).map(
+    (column) => ({
+      id: column.key,
+      label: resolveColumnLabel({ column }),
+      icon: column.icon,
+      sortableKey: getSortableKey({ column }),
+      canHide: !column.required,
+      defaultVisible: resolveColumnVisibility({
+        column,
+        context: options.context
+      }),
+      configurable: true,
+      pinned: column.pinned
+    })
+  );
+}
+export function createOrderedColumns(options) {
+  const lookup = new Map(options.runtimeColumns.map((column) => [column.id, column]));
+  const orderedIds = [...options.columnOrder, ...options.runtimeColumns.map((column) => column.id)];
+  return uniqueColumnIds({ columnIds: orderedIds }).map((id) => lookup.get(id)).filter((column) => Boolean(column));
+}
+export function createVisibleOrderedColumns(options) {
+  return options.orderedColumns.filter((column) => options.columnVisibility?.[column.id] !== false);
+}
+export function resolveColumnLabel(options) {
+  if (typeof options.column.label === "function") {
+    const resolved = options.column.label();
+    return typeof resolved === "string" || typeof resolved === "number" ? String(resolved) : humanizeKey({ value: options.column.key });
+  }
+  return resolveTextValue(options.column.label, humanizeKey({ value: options.column.key }));
+}
+export function resolveColumnVisibility(options) {
+  if (typeof options.column.visible === "function") {
+    return options.column.visible(options.context);
+  }
+  return options.column.visible ?? true;
+}
+export function getSortableKey(options) {
+  if (options.column.kind === "field" && options.column.sortable !== false) {
+    return options.column.field;
+  }
+  if (options.column.kind === "composite") {
+    return options.column.sortableKey;
+  }
+  return void 0;
+}
+export function uniqueColumnIds(options) {
+  return Array.from(new Set(options.columnIds));
+}
+function humanizeKey(options) {
+  return options.value.replace(/[_-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\s+/g, " ").trim().replace(/^./, (char) => char.toUpperCase());
+}

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

@@ -0,0 +1,189 @@
+import type { TableSchemaView } from '../../types/index.js';
+import { type TableColumnState } from './types.js';
+export declare function createDefaultColumnState(): {
+    columnOrder: never[];
+    columnVisibility: {};
+    columnPinning: {
+        left: string[];
+        right: never[];
+    };
+    columnSizing: {};
+    columnSizingInfo: {
+        startOffset: null;
+        startSize: null;
+        deltaOffset: null;
+        deltaPercentage: null;
+        isResizingColumn: false;
+        columnSizingStart: Array<[string, number]>;
+    };
+    sorting: never[];
+};
+export declare function syncColumnState(options: {
+    schema: TableSchemaView;
+    runtimeColumns: Array<{
+        id: string;
+        defaultVisible: boolean;
+        pinned?: 'left' | 'right';
+    }>;
+    currentState: TableColumnState;
+}): {
+    columnOrder: string[];
+    columnVisibility: {
+        [k: string]: boolean;
+    };
+    columnPinning: {
+        left: string[];
+        right: string[];
+    };
+    columnSizing: Record<string, number>;
+    columnSizingInfo: {
+        startOffset: number | null;
+        startSize: number | null;
+        deltaOffset: number | null;
+        deltaPercentage: number | null;
+        isResizingColumn: false | string;
+        columnSizingStart: Array<[string, number]>;
+    };
+    sorting: Array<{
+        id: string;
+        desc: boolean;
+    }>;
+};
+export declare function syncSortingState(options: {
+    currentState: TableColumnState;
+    sorting: {
+        sortKey?: string;
+        sortDirection?: 'asc' | 'desc';
+    } | null | undefined;
+}): {
+    sorting: {
+        id: string;
+        desc: boolean;
+    }[];
+    columnOrder: string[];
+    columnVisibility: Record<string, boolean>;
+    columnPinning: {
+        left?: string[];
+        right?: string[];
+    };
+    columnSizing: Record<string, number>;
+    columnSizingInfo: {
+        startOffset: number | null;
+        startSize: number | null;
+        deltaOffset: number | null;
+        deltaPercentage: number | null;
+        isResizingColumn: false | string;
+        columnSizingStart: Array<[string, number]>;
+    };
+};
+export declare function updateColumnVisibilityState(options: {
+    currentState: TableColumnState;
+    columnId: string;
+    visible: boolean;
+}): {
+    columnVisibility: {
+        [x: string]: boolean;
+    };
+    columnPinning: {
+        left: string[];
+        right: string[];
+    };
+    columnOrder: string[];
+    columnSizing: Record<string, number>;
+    columnSizingInfo: {
+        startOffset: number | null;
+        startSize: number | null;
+        deltaOffset: number | null;
+        deltaPercentage: number | null;
+        isResizingColumn: false | string;
+        columnSizingStart: Array<[string, number]>;
+    };
+    sorting: Array<{
+        id: string;
+        desc: boolean;
+    }>;
+};
+export declare function updateColumnPinningState(options: {
+    currentState: TableColumnState;
+    columnId: string;
+    pinned?: 'left' | 'right';
+}): {
+    columnPinning: {
+        left: string[];
+        right: string[];
+    };
+    columnOrder: string[];
+    columnVisibility: Record<string, boolean>;
+    columnSizing: Record<string, number>;
+    columnSizingInfo: {
+        startOffset: number | null;
+        startSize: number | null;
+        deltaOffset: number | null;
+        deltaPercentage: number | null;
+        isResizingColumn: false | string;
+        columnSizingStart: Array<[string, number]>;
+    };
+    sorting: Array<{
+        id: string;
+        desc: boolean;
+    }>;
+};
+export declare function updateColumnOrderState(options: {
+    currentState: TableColumnState;
+    columnIds: string[];
+}): {
+    columnOrder: string[];
+    columnVisibility: Record<string, boolean>;
+    columnPinning: {
+        left?: string[];
+        right?: string[];
+    };
+    columnSizing: Record<string, number>;
+    columnSizingInfo: {
+        startOffset: number | null;
+        startSize: number | null;
+        deltaOffset: number | null;
+        deltaPercentage: number | null;
+        isResizingColumn: false | string;
+        columnSizingStart: Array<[string, number]>;
+    };
+    sorting: Array<{
+        id: string;
+        desc: boolean;
+    }>;
+};
+export declare function createResetColumnState(options: {
+    schema: TableSchemaView;
+    runtimeColumns: Array<{
+        id: string;
+        defaultVisible: boolean;
+        pinned?: 'left' | 'right';
+    }>;
+    currentState: TableColumnState;
+}): {
+    columnOrder: string[];
+    columnVisibility: {
+        [k: string]: boolean;
+    };
+    columnPinning: {
+        left: string[];
+        right: string[];
+    };
+    columnSizing: {};
+    columnSizingInfo: {
+        startOffset: null;
+        startSize: null;
+        deltaOffset: null;
+        deltaPercentage: null;
+        isResizingColumn: false;
+        columnSizingStart: Array<[string, number]>;
+    };
+    sorting: Array<{
+        id: string;
+        desc: boolean;
+    }>;
+};
+export declare function getPinnedState(options: {
+    currentState: TableColumnState;
+    columnId: string;
+}): "right" | "left" | null;

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

@@ -0,0 +1,204 @@
+import { findSchemaColumn, uniqueColumnIds } from "./schema.js";
+import { ROW_ACTIONS_COLUMN_ID, SELECT_COLUMN_ID } from "./types.js";
+export function createDefaultColumnState() {
+  return {
+    columnOrder: [],
+    columnVisibility: {},
+    columnPinning: { left: [SELECT_COLUMN_ID], right: [] },
+    columnSizing: {},
+    columnSizingInfo: {
+      startOffset: null,
+      startSize: null,
+      deltaOffset: null,
+      deltaPercentage: null,
+      isResizingColumn: false,
+      columnSizingStart: []
+    },
+    sorting: []
+  };
+}
+export function syncColumnState(options) {
+  const columnIds = options.runtimeColumns.map((column) => column.id);
+  const nextVisibility = Object.fromEntries(
+    options.runtimeColumns.map((column) => [
+      column.id,
+      options.currentState.columnVisibility?.[column.id] ?? column.defaultVisible
+    ])
+  );
+  const visibleColumnIds = options.runtimeColumns.filter((column) => nextVisibility[column.id] !== false).map((column) => column.id);
+  const nextColumnOrder = uniqueColumnIds({
+    columnIds: [
+      ...(options.currentState.columnOrder ?? []).filter(
+        (columnId) => columnIds.includes(columnId)
+      ),
+      ...columnIds
+    ]
+  });
+  return {
+    ...options.currentState,
+    columnOrder: nextColumnOrder,
+    columnVisibility: nextVisibility,
+    columnPinning: sanitizeColumnPinning({
+      schema: options.schema,
+      runtimeColumns: options.runtimeColumns,
+      visibleColumnIds,
+      currentPinning: options.currentState.columnPinning
+    })
+  };
+}
+export function syncSortingState(options) {
+  return {
+    ...options.currentState,
+    sorting: options.sorting?.sortKey ? [{ id: options.sorting.sortKey, desc: options.sorting.sortDirection === "desc" }] : []
+  };
+}
+export function updateColumnVisibilityState(options) {
+  const left = (options.currentState.columnPinning?.left ?? []).filter(
+    (id) => options.visible || id !== options.columnId
+  );
+  const right = (options.currentState.columnPinning?.right ?? []).filter(
+    (id) => options.visible || id !== options.columnId
+  );
+  return {
+    ...options.currentState,
+    columnVisibility: {
+      ...options.currentState.columnVisibility,
+      [options.columnId]: options.visible
+    },
+    columnPinning: {
+      left: uniqueColumnIds({
+        columnIds: [SELECT_COLUMN_ID, ...left.filter((id) => id !== SELECT_COLUMN_ID)]
+      }),
+      right: normalizeRightPinnedIds({
+        columnIds: right.filter((id) => id !== SELECT_COLUMN_ID)
+      })
+    }
+  };
+}
+export function updateColumnPinningState(options) {
+  const left = (options.currentState.columnPinning?.left ?? []).filter(
+    (id) => id !== options.columnId
+  );
+  const right = (options.currentState.columnPinning?.right ?? []).filter(
+    (id) => id !== options.columnId
+  );
+  if (options.pinned === "left") {
+    left.push(options.columnId);
+  } else if (options.pinned === "right") {
+    right.push(options.columnId);
+  }
+  return {
+    ...options.currentState,
+    columnPinning: {
+      left: uniqueColumnIds({
+        columnIds: [SELECT_COLUMN_ID, ...left]
+      }),
+      right: normalizeRightPinnedIds({
+        columnIds: right.filter((id) => id !== SELECT_COLUMN_ID)
+      })
+    }
+  };
+}
+export function updateColumnOrderState(options) {
+  return {
+    ...options.currentState,
+    columnOrder: uniqueColumnIds({
+      columnIds: options.columnIds
+    })
+  };
+}
+export function createResetColumnState(options) {
+  return {
+    ...options.currentState,
+    columnOrder: options.runtimeColumns.map((column) => column.id),
+    columnVisibility: Object.fromEntries(
+      options.runtimeColumns.map((column) => [column.id, column.defaultVisible])
+    ),
+    columnPinning: {
+      left: uniqueColumnIds({
+        columnIds: [
+          SELECT_COLUMN_ID,
+          ...options.runtimeColumns.filter(
+            (column) => resolvePinnedSide({
+              schema: options.schema,
+              columnId: column.id,
+              pinned: column.pinned
+            }) === "left"
+          ).map((column) => column.id)
+        ]
+      }),
+      right: normalizeRightPinnedIds({
+        columnIds: options.runtimeColumns.filter(
+          (column) => resolvePinnedSide({
+            schema: options.schema,
+            columnId: column.id,
+            pinned: column.pinned
+          }) === "right"
+        ).map((column) => column.id)
+      })
+    },
+    columnSizing: {},
+    columnSizingInfo: createDefaultColumnState().columnSizingInfo
+  };
+}
+export function getPinnedState(options) {
+  if (options.currentState.columnPinning?.left?.includes(options.columnId)) {
+    return "left";
+  }
+  if (options.currentState.columnPinning?.right?.includes(options.columnId)) {
+    return "right";
+  }
+  return null;
+}
+function sanitizeColumnPinning(options) {
+  const columnIds = options.runtimeColumns.map((column) => column.id);
+  const pinnedLeft = uniqueColumnIds({
+    columnIds: [
+      SELECT_COLUMN_ID,
+      ...options.runtimeColumns.filter(
+        (column) => resolvePinnedSide({
+          schema: options.schema,
+          columnId: column.id,
+          pinned: column.pinned
+        }) === "left"
+      ).map((column) => column.id),
+      ...(options.currentPinning?.left ?? []).filter(
+        (columnId) => columnIds.includes(columnId)
+      )
+    ]
+  }).filter(
+    (columnId) => columnId === SELECT_COLUMN_ID || options.visibleColumnIds.includes(columnId)
+  );
+  const pinnedRight = normalizeRightPinnedIds({
+    columnIds: uniqueColumnIds({
+      columnIds: [
+        ...options.runtimeColumns.filter(
+          (column) => resolvePinnedSide({
+            schema: options.schema,
+            columnId: column.id,
+            pinned: column.pinned
+          }) === "right"
+        ).map((column) => column.id),
+        ...(options.currentPinning?.right ?? []).filter(
+          (columnId) => columnIds.includes(columnId)
+        )
+      ]
+    }).filter(
+      (columnId) => options.visibleColumnIds.includes(columnId) && !pinnedLeft.includes(columnId)
+    )
+  });
+  return {
+    left: pinnedLeft,
+    right: pinnedRight
+  };
+}
+function resolvePinnedSide(options) {
+  return options.pinned ?? findSchemaColumn({ schema: options.schema, columnId: options.columnId })?.pinned;
+}
+function normalizeRightPinnedIds(options) {
+  const ids = uniqueColumnIds({
+    columnIds: options.columnIds.filter((id) => id !== SELECT_COLUMN_ID)
+  });
+  if (!ids.includes(ROW_ACTIONS_COLUMN_ID)) return ids;
+  return [...ids.filter((id) => id !== ROW_ACTIONS_COLUMN_ID), ROW_ACTIONS_COLUMN_ID];
+}

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

@@ -0,0 +1,79 @@
+import type { ComputedRef, ShallowRef } from 'vue';
+import type { UseTableDataReturn } from '../../composables/use-table-data.js';
+import type { useTableState } from '../../composables/use-table-state.js';
+import type { TableApi, TableColumnPinned, GenericObject, TableLayout, TableSchemaView } from '../../types/index.js';
+export declare const SELECT_COLUMN_ID = "__select";
+export declare const SELECT_COLUMN_WIDTH = 56;
+export declare const ROW_ACTIONS_COLUMN_ID = "__row-actions";
+export declare const ROW_ACTIONS_COLUMN_WIDTH = 52;
+export type SchemaTableColumn = NonNullable<NonNullable<TableSchemaView['table']>['columns']>[number];
+export interface TableRuntimeColumn {
+    id: string;
+    label: string;
+    icon?: string;
+    sortableKey?: string;
+    canHide: boolean;
+    defaultVisible: boolean;
+    configurable?: boolean;
+    pinned?: TableColumnPinned;
+}
+export interface TableColumnState {
+    columnOrder: string[];
+    columnVisibility: Record<string, boolean>;
+    columnPinning: {
+        left?: string[];
+        right?: string[];
+    };
+    columnSizing: Record<string, number>;
+    columnSizingInfo: {
+        startOffset: number | null;
+        startSize: number | null;
+        deltaOffset: number | null;
+        deltaPercentage: number | null;
+        isResizingColumn: false | string;
+        columnSizingStart: Array<[string, number]>;
+    };
+    sorting: Array<{
+        id: string;
+        desc: boolean;
+    }>;
+}
+export interface TableColumnsSelectionState {
+    selectionEnabled: ComputedRef<boolean>;
+    allSelected: ComputedRef<boolean>;
+    partiallySelected: ComputedRef<boolean>;
+    rowSelection: ComputedRef<Record<string, boolean>>;
+    toggleAllRows: (params: {
+        selected: boolean;
+    }) => void;
+    toggleRowSelection: (params: {
+        rowId: string;
+        selected?: boolean;
+        shiftKey?: boolean;
+    }) => void;
+    isRowSelected: (params: {
+        rowId: string;
+    }) => boolean;
+}
+export interface UseTableColumnsParams {
+    schema: ComputedRef<TableSchemaView>;
+    state: ReturnType<typeof useTableState>;
+    data: Pick<UseTableDataReturn, 'contextData' | 'pageContextData' | 'data'>;
+    selection: TableColumnsSelectionState;
+    tableLayout: ComputedRef<TableLayout>;
+    tableApi: ShallowRef<TableApi<unknown> | null>;
+}
+export interface TableColumnRenderParams {
+    column: SchemaTableColumn;
+    row: GenericObject;
+    rowIndex: number;
+    params: UseTableColumnsParams;
+}
+export interface TableCellRenderContext {
+    row: GenericObject;
+    index: number;
+    context: Record<string, unknown>;
+    pageContext: Record<string, unknown>;
+    tableApi: TableApi<unknown>;
+    layout: TableLayout;
+}

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

@@ -0,0 +1,4 @@
+export const SELECT_COLUMN_ID = "__select";
+export const SELECT_COLUMN_WIDTH = 56;
+export const ROW_ACTIONS_COLUMN_ID = "__row-actions";
+export const ROW_ACTIONS_COLUMN_WIDTH = 52;

package/dist/runtime/table/utils/data-list-ui.d.ts

@@ -0,0 +1,3 @@
+import type { DataListUiClass } from '../types/index.js';
+/** Merges DataList slot classes with the same conflict resolution used by Nuxt UI. */
+export declare function mergeDataListUiClass(defaults?: DataListUiClass, root?: DataListUiClass, local?: DataListUiClass): string;

package/dist/runtime/table/utils/data-list-ui.js

@@ -0,0 +1,4 @@
+import { twMerge } from "tailwind-merge";
+export function mergeDataListUiClass(defaults, root, local) {
+  return twMerge(defaults, root, local);
+}

package/dist/runtime/table/utils/filters/common.d.ts

@@ -0,0 +1,62 @@
+import type { TableDateFilterDefinition, TableQueryStateFilterRule, TableTextValue, TableUiFilterDefinition } from '../../types/index.js';
+type DateRangeLike = {
+    from?: unknown;
+    to?: unknown;
+};
+export declare function getFilterLabelText(options: {
+    label: TableTextValue | TableUiFilterDefinition['label'] | (() => unknown);
+}): string;
+export declare function getFilterTextValue(options: {
+    value: TableTextValue | undefined;
+    fallback?: string;
+}): string;
+export declare function getFilterRuleValue(options: {
+    rule?: TableQueryStateFilterRule;
+}): import("../../types/index.js").TableQueryStateFilterValue | undefined;
+export declare function getFilterPathValues(options: {
+    source: unknown;
+    key: string;
+}): unknown[];
+export declare function readFilterPathValue(options: {
+    source: unknown;
+    key: string;
+}): unknown;
+export declare function flattenFilterValues(options: {
+    value: unknown;
+}): unknown[];
+export declare function isDateRangeValue(options: {
+    value: unknown;
+}): options is {
+    value: DateRangeLike;
+};
+export declare function toDateFilterValue(options: {
+    definition: TableDateFilterDefinition;
+    value: unknown;
+}): Date | undefined;
+export declare function formatFilterDate(options: {
+    value: Date;
+}): string;
+export declare function isFilterValueSelected(options: {
+    values: unknown[];
+    candidate: unknown;
+}): boolean;
+export declare function getDateRangeValue(options: {
+    value: unknown;
+}): DateRangeLike | undefined;
+type NumberRangeLike = {
+    from?: number;
+    to?: number;
+};
+export declare function getNumberRangeValue(options: {
+    value: unknown;
+}): NumberRangeLike | undefined;
+export declare function formatFilterNumber(options: {
+    value: number;
+}): string;
+export declare function toMaybeNumber(options: {
+    value: unknown;
+}): number | undefined;
+export declare function toMaybeDate(options: {
+    value: unknown;
+}): Date | undefined;
+export {};