nuxt-ui-tools 0.1.0

package/dist/runtime/table/utils/query-state.js

@@ -0,0 +1,200 @@
+import {
+  booleanCodec,
+  createArrayCodec,
+  createEnumCodec,
+  dateISOCodec,
+  numberCodec,
+  stringCodec
+} from "#ui-tools/query-state";
+import { isObject, isString } from "../../shared/utils/predicate.js";
+import { DEFAULT_FILTER_OPERATOR, PAGINATION_DEFAULTS } from "../constants/query-state.js";
+export function getPaginationMode(schema) {
+  if (schema.pagination === false) return "none";
+  if (schema.pagination?.mode === "cursor") return "cursor";
+  return "offset";
+}
+export function getDefaultPageSize(params) {
+  const paginationConf = params.schema.pagination;
+  if (!paginationConf || typeof paginationConf !== "object")
+    return PAGINATION_DEFAULTS.defaultSize[params.layout];
+  if ("mode" in paginationConf && paginationConf.mode === "cursor") {
+    if (isObject(paginationConf.pageSize))
+      return paginationConf.pageSize[params.layout] ?? PAGINATION_DEFAULTS.defaultSize[params.layout];
+    return paginationConf.pageSize ?? PAGINATION_DEFAULTS.defaultSize[params.layout];
+  }
+  if (isObject(paginationConf.defaultSize))
+    return paginationConf.defaultSize[params.layout] ?? PAGINATION_DEFAULTS.defaultSize[params.layout];
+  return paginationConf.defaultSize ?? PAGINATION_DEFAULTS.defaultSize[params.layout];
+}
+export function getPageSizeOptions(params) {
+  const paginationConf = params.schema.pagination;
+  if (!paginationConf || typeof paginationConf !== "object") {
+    return PAGINATION_DEFAULTS.sizes[params.layout];
+  }
+  if ("mode" in paginationConf && paginationConf.mode === "cursor") {
+    return PAGINATION_DEFAULTS.sizes[params.layout];
+  }
+  if (Array.isArray(paginationConf.sizeOptions)) {
+    return paginationConf.sizeOptions;
+  }
+  if (isObject(paginationConf.sizeOptions)) {
+    return paginationConf.sizeOptions[params.layout] ?? PAGINATION_DEFAULTS.sizes[params.layout];
+  }
+  return PAGINATION_DEFAULTS.sizes[params.layout];
+}
+export function getDefaultSort(params) {
+  const defaultSorting = params.schema[params.layout]?.defaultSorting;
+  if (!defaultSorting) return null;
+  else if (isString(defaultSorting)) return { key: defaultSorting, dir: "asc" };
+  else return defaultSorting;
+}
+export function getSortKeys(params) {
+  const keys = /* @__PURE__ */ new Set();
+  const defaultSort = getDefaultSort(params);
+  if (defaultSort?.key) {
+    keys.add(defaultSort.key);
+  }
+  for (const option of params.schema.grid?.sortOptions ?? []) {
+    keys.add(option.key);
+  }
+  for (const column of params.schema.table?.columns ?? []) {
+    if (column.kind === "field" && column.sortable !== false) {
+      keys.add(column.field);
+    }
+    if (column.kind === "composite" && column.sortableKey) {
+      keys.add(column.sortableKey);
+    }
+  }
+  return [...keys];
+}
+export function createSortKeyCodec(sortKeys) {
+  return createEnumCodec(sortKeys);
+}
+export function createTableFilterValueCodec(definition) {
+  return {
+    parse(rawValue) {
+      if (!rawValue) {
+        return definition.defaultValue;
+      }
+      if (definition.kind === "option" && rawValue.includes(",")) {
+        return createArrayCodec(stringCodec).parse(rawValue);
+      }
+      if (definition.kind === "number" && rawValue.includes("..")) {
+        const [from, to] = rawValue.split("..");
+        return {
+          ...from ? { from: numberCodec.parse(from) } : {},
+          ...to ? { to: numberCodec.parse(to) } : {}
+        };
+      }
+      if (definition.kind === "date" && rawValue.includes("..")) {
+        const [from, to] = rawValue.split("..");
+        return {
+          ...from ? { from: dateISOCodec.parse(from) } : {},
+          ...to ? { to: dateISOCodec.parse(to) } : {}
+        };
+      }
+      return parseScalar(rawValue, definition);
+    },
+    serialize(value) {
+      if (value == null) {
+        return null;
+      }
+      if (Array.isArray(value)) {
+        return value.map((item) => serializeScalar(item)).join(",");
+      }
+      if (isRange(value)) {
+        const from = value.from == null ? "" : serializeScalar(value.from);
+        const to = value.to == null ? "" : serializeScalar(value.to);
+        return `${from}..${to}`;
+      }
+      if (value instanceof Date) {
+        return dateISOCodec.serialize(value);
+      }
+      if (typeof value === "number") {
+        return numberCodec.serialize(value);
+      }
+      if (typeof value === "boolean") {
+        return booleanCodec.serialize(value);
+      }
+      return stringCodec.serialize(String(value));
+    }
+  };
+}
+export function resolveFilterDefaultOperator(definition) {
+  if (definition.defaultOperator) return definition.defaultOperator;
+  return DEFAULT_FILTER_OPERATOR[definition.kind];
+}
+export function resolveFilterSupportedOperators(definition) {
+  const defaultOperator = resolveFilterDefaultOperator(definition);
+  if (!definition.operators?.length) return [defaultOperator];
+  return [.../* @__PURE__ */ new Set([defaultOperator, ...definition.operators])];
+}
+export function normalizeFilterDefinition(definition) {
+  const hasBehavior = "behavior" in definition;
+  const defaultValue = hasBehavior ? definition.behavior?.defaultValue : "defaultValue" in definition ? definition.defaultValue : void 0;
+  const defaultOperator = hasBehavior ? definition.behavior?.defaultOperator : "defaultOperator" in definition ? definition.defaultOperator : void 0;
+  const operators = hasBehavior ? definition.behavior?.operators : "operators" in definition ? definition.operators : void 0;
+  if (definition.kind !== "number") {
+    return {
+      ...definition,
+      defaultOperator,
+      operators,
+      defaultValue
+    };
+  }
+  if (isMinMaxNumberRange(defaultValue)) {
+    return {
+      ...definition,
+      defaultOperator,
+      operators,
+      defaultValue: {
+        ..."min" in defaultValue ? { from: defaultValue.min } : {},
+        ..."max" in defaultValue ? { to: defaultValue.max } : {}
+      }
+    };
+  }
+  return {
+    ...definition,
+    defaultOperator,
+    operators,
+    defaultValue
+  };
+}
+function isRange(value) {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  return "from" in value || "to" in value;
+}
+function isMinMaxNumberRange(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+  if ("from" in value || "to" in value) {
+    return false;
+  }
+  const minValue = "min" in value ? value.min : void 0;
+  const maxValue = "max" in value ? value.max : void 0;
+  return (minValue == null || typeof minValue === "number") && (maxValue == null || typeof maxValue === "number");
+}
+function serializeScalar(value) {
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+  return String(value);
+}
+function parseScalar(rawValue, definition) {
+  if (definition.kind === "boolean") {
+    return booleanCodec.parse(rawValue);
+  }
+  if (definition.kind === "number") {
+    return numberCodec.parse(rawValue);
+  }
+  if (definition.kind === "date") {
+    return dateISOCodec.parse(rawValue);
+  }
+  return stringCodec.parse(rawValue);
+}

package/dist/runtime/table/utils/resolved-filters.d.ts

@@ -0,0 +1,7 @@
+import type { GenericObject, TableFilterState, TableResolvedFilterGroup, TableStaticFilterNode, TableUiFilterDefinition } from '../types/index.js';
+export declare function createResolvedFilterState(params: {
+    definitions: Array<TableUiFilterDefinition<GenericObject, GenericObject, string>>;
+    filters: TableFilterState<string>;
+    staticFilters?: Array<TableStaticFilterNode<GenericObject, GenericObject, string>>;
+    context?: GenericObject;
+}): TableResolvedFilterGroup<string>;

package/dist/runtime/table/utils/resolved-filters.js

@@ -0,0 +1,68 @@
+import { normalizeFilterDefinition, resolveFilterDefaultOperator } from "./query-state.js";
+export function createResolvedFilterState(params) {
+  const children = [];
+  for (const filter of params.staticFilters ?? []) {
+    children.push(normalizeStaticFilterNode(filter));
+  }
+  for (const rule of params.filters.ui) {
+    const definition = params.definitions.find((filter) => filter.key === rule.key);
+    const normalizedDefinition = definition ? normalizeFilterDefinition(definition) : null;
+    const operator = rule.operator ?? (normalizedDefinition ? resolveFilterDefaultOperator(normalizedDefinition) : "is");
+    if (!definition) {
+      children.push({
+        type: "condition",
+        key: rule.key,
+        operator,
+        value: rule.value
+      });
+      continue;
+    }
+    const resolvedNode = definition.resolve?.({
+      rule: {
+        ...rule,
+        operator
+      },
+      definition,
+      context: params.context
+    }) ?? {
+      type: "condition",
+      key: rule.key,
+      operator,
+      value: rule.value
+    };
+    if (resolvedNode) {
+      children.push(resolvedNode);
+    }
+  }
+  return {
+    type: "group",
+    combinator: "and",
+    children
+  };
+}
+function normalizeStaticFilterNode(filter) {
+  if (isResolvedFilterGroup(filter)) {
+    return {
+      ...filter,
+      children: filter.children.map((child) => normalizeResolvedFilterNode(child))
+    };
+  }
+  return {
+    type: "condition",
+    key: filter.key,
+    operator: filter.operator,
+    value: filter.value
+  };
+}
+function normalizeResolvedFilterNode(node) {
+  if (node.type === "group") {
+    return {
+      ...node,
+      children: node.children.map((child) => normalizeResolvedFilterNode(child))
+    };
+  }
+  return node;
+}
+function isResolvedFilterGroup(value) {
+  return !!value && typeof value === "object" && "type" in value && value.type === "group" && "children" in value && Array.isArray(value.children);
+}

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

@@ -0,0 +1,10 @@
+import type { GenericObject, TableRowKey } from '../types/index.js';
+export declare function resolveTableRowId(options: {
+    rowKey: TableRowKey<GenericObject>;
+    row: unknown;
+    index?: number;
+}): string;
+export declare function getTableRowValue(options: {
+    row: unknown;
+    path: string;
+}): unknown;

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

@@ -0,0 +1,17 @@
+export function resolveTableRowId(options) {
+  if (Array.isArray(options.rowKey)) {
+    return options.rowKey.map((key) => String(getTableRowValue({ row: options.row, path: key }) ?? "")).join("::") || String(options.index ?? 0);
+  }
+  return String(getTableRowValue({ row: options.row, path: options.rowKey }) ?? options.index ?? 0);
+}
+export function getTableRowValue(options) {
+  return options.path.split(".").reduce((value, key) => {
+    if (!isPathReadableRecord(value)) {
+      return void 0;
+    }
+    return value[key];
+  }, options.row);
+}
+function isPathReadableRecord(value) {
+  return value !== null && typeof value === "object";
+}

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

@@ -0,0 +1,14 @@
+import { type ComputedRef } from 'vue';
+import type { useTableState } from '../composables/use-table-state.js';
+import type { MaybeComputedRef, PublicTableQueryState, TableLayout } from '../types/index.js';
+export declare function resolveSchemaSource<TSchema>(options: {
+    schema: MaybeComputedRef<TSchema>;
+}): TSchema;
+export declare function mapPublicQueryState(options: {
+    queryState: ReturnType<typeof useTableState>['queryState'];
+    activeLayout: TableLayout;
+}): PublicTableQueryState;
+export declare function createPublicQueryState(options: {
+    queryState: ReturnType<typeof useTableState>['queryState'];
+    activeLayout: ComputedRef<TableLayout>;
+}): ComputedRef<PublicTableQueryState>;

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

@@ -0,0 +1,29 @@
+import { computed } from "vue";
+export function resolveSchemaSource(options) {
+  if (typeof options.schema === "function") {
+    return options.schema();
+  }
+  if (options.schema && typeof options.schema === "object" && "value" in options.schema) {
+    return options.schema.value;
+  }
+  return options.schema;
+}
+export function mapPublicQueryState(options) {
+  return {
+    layout: options.activeLayout,
+    pagination: options.queryState.pagination.value,
+    sorting: options.queryState.sorting.value ? {
+      sortKey: options.queryState.sorting.value.key,
+      sortDirection: options.queryState.sorting.value.dir
+    } : null,
+    filters: options.queryState.filters.value
+  };
+}
+export function createPublicQueryState(options) {
+  return computed(
+    () => mapPublicQueryState({
+      queryState: options.queryState,
+      activeLayout: options.activeLayout.value
+    })
+  );
+}

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,163 @@
+{
+  "name": "nuxt-ui-tools",
+  "version": "0.1.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",
+  "license": "MIT",
+  "repository": "github:ChronicStone/nuxt-ui-tools",
+  "workspaces": [
+    "playground"
+  ],
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ],
+      "form": [
+        "./dist/runtime/form/index.d.ts"
+      ],
+      "i18n": [
+        "./dist/runtime/i18n/index.d.ts"
+      ],
+      "query-state": [
+        "./dist/runtime/query-state/index.d.ts"
+      ],
+      "shared": [
+        "./dist/runtime/shared/index.d.ts"
+      ],
+      "table": [
+        "./dist/runtime/table/index.d.ts"
+      ]
+    }
+  },
+  "imports": {
+    "#ui-tools/form": {
+      "types": "./dist/runtime/form/index.d.ts",
+      "default": "./dist/runtime/form/index.js"
+    },
+    "#ui-tools/form/*": {
+      "types": "./dist/runtime/form/*.d.ts",
+      "default": "./dist/runtime/form/*.js"
+    },
+    "#ui-tools/i18n": {
+      "types": "./dist/runtime/i18n/index.d.ts",
+      "default": "./dist/runtime/i18n/index.js"
+    },
+    "#ui-tools/i18n/*": {
+      "types": "./dist/runtime/i18n/*.d.ts",
+      "default": "./dist/runtime/i18n/*.js"
+    },
+    "#ui-tools/query-state": {
+      "types": "./dist/runtime/query-state/index.d.ts",
+      "default": "./dist/runtime/query-state/index.js"
+    },
+    "#ui-tools/query-state/*": {
+      "types": "./dist/runtime/query-state/*.d.ts",
+      "default": "./dist/runtime/query-state/*.js"
+    },
+    "#ui-tools/shared": {
+      "types": "./dist/runtime/shared/index.d.ts",
+      "default": "./dist/runtime/shared/index.js"
+    },
+    "#ui-tools/shared/*": {
+      "types": "./dist/runtime/shared/*.d.ts",
+      "default": "./dist/runtime/shared/*.js"
+    },
+    "#ui-tools/table": {
+      "types": "./dist/runtime/table/index.d.ts",
+      "default": "./dist/runtime/table/index.js"
+    },
+    "#ui-tools/table/*": {
+      "types": "./dist/runtime/table/*.d.ts",
+      "default": "./dist/runtime/table/*.js"
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    },
+    "./form": {
+      "types": "./dist/runtime/form/index.d.ts",
+      "import": "./dist/runtime/form/index.js"
+    },
+    "./i18n": {
+      "types": "./dist/runtime/i18n/index.d.ts",
+      "import": "./dist/runtime/i18n/index.js"
+    },
+    "./query-state": {
+      "types": "./dist/runtime/query-state/index.d.ts",
+      "import": "./dist/runtime/query-state/index.js"
+    },
+    "./shared": {
+      "types": "./dist/runtime/shared/index.d.ts",
+      "import": "./dist/runtime/shared/index.js"
+    },
+    "./table": {
+      "types": "./dist/runtime/table/index.d.ts",
+      "import": "./dist/runtime/table/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "build": "nuxt-module-build build",
+    "dev": "npm run dev:prepare && nuxt dev playground",
+    "dev:build": "nuxt build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
+    "check": "npm run format:check && npm run lint && npm run typecheck && npm run test",
+    "release": "npm run check && npm run build && changelogen --release",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint --fix .",
+    "format": "oxfmt .",
+    "format:check": "oxfmt --check .",
+    "typecheck": "NODE_OPTIONS=\"--max-old-space-size=4096\" vue-tsc --noEmit",
+    "typecheck:playground": "cd playground && npm run typecheck",
+    "test": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:watch": "vitest watch",
+    "clean": "rm -rf dist .nuxt node_modules playground/.nuxt playground/.output playground/node_modules"
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.12.0",
+    "@nuxt/kit": "^4.4.2",
+    "@nuxt/ui": "^4.5.1",
+    "@tanstack/pacer": "0.19.0",
+    "@tanstack/vue-virtual": "3.13.23",
+    "@vueuse/core": "14.2.1",
+    "libphonenumber-js": "1.13.1",
+    "motion-v": "2.0.1",
+    "nuxt-viewport": "2.4.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.4.2",
+    "@types/node": "25.4.0",
+    "changelogen": "^0.6.2",
+    "nuxt": "^4.4.2",
+    "oxfmt": "0.38.0",
+    "oxlint": "1.53.0",
+    "typescript": "~5.9.3",
+    "vitest": "^4.1.0",
+    "vue-tsc": "^3.2.5",
+    "xlsx": "0.18.5"
+  },
+  "peerDependencies": {
+    "@tanstack/vue-query": ">=5.0.0",
+    "nuxt": ">=4.4.0",
+    "tailwindcss": ">=4.0.0",
+    "vue": ">=3.5.0",
+    "vue-draggable-plus": ">=0.6.0",
+    "vue-router": ">=4.5.0"
+  }
+}