nuxt-ui-tools 0.1.2 → 1.0.0

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

@@ -1,8 +1,16 @@
-import { isArray, isDate, isObject, isString } from "../../shared/utils/predicate.js";
+import {
+  isArray,
+  isBoolean,
+  isDate,
+  isNumber,
+  isObject,
+  isString,
+  isNullish
+} from "../../shared/utils/predicate.js";
 export function executeClientQuery(params) {
   const filteredRows = filterClientRows({
-    rows: params.rows,
     filters: params.request.filters,
+    rows: params.rows,
     search: params.request.search
   });
   const sortedRows = sortClientRows({
@@ -10,17 +18,17 @@ export function executeClientQuery(params) {
     sorting: params.request.sorting
   });
   return paginateClientRows({
-    rows: sortedRows,
-    pagination: params.request.pagination
+    pagination: params.request.pagination,
+    rows: sortedRows
   });
 }
 export function executeClientFacets(params) {
   return {
     facets: params.facets.map(
       (facet) => resolveClientFacet({
-        rows: params.rows,
+        facet,
         request: params.request,
-        facet
+        rows: params.rows
       })
     )
   };
@@ -55,16 +63,16 @@ function resolveClientFacet(options) {
     search: options.request.search
   });
   const counts = countFacetOptions({
-    rows: matchingRows,
     key: options.facet.key,
+    rows: matchingRows,
     search: options.facet.search
   });
   const start = resolveFacetOffset(options.facet.cursor);
   const limited = options.facet.limit ? counts.slice(start, start + options.facet.limit) : counts.slice(start);
   return {
     key: options.facet.key,
-    options: limited,
     nextCursor: options.facet.limit && start + options.facet.limit < counts.length ? String(start + options.facet.limit) : null,
+    options: limited,
     total: counts.length
   };
 }
@@ -74,33 +82,33 @@ function matchesSearch(row, search) {
   }
   return search.fields.some(
     (field) => pathMatchesSearchValue({
-      value: row,
       path: String(field),
-      search: search.value
+      search: search.value,
+      value: row
     })
   );
 }
 function pathMatchesSearchValue(options) {
   const segments = options.path.split(".");
   return matchSearchPathSegments({
-    value: options.value,
+    search: options.search,
     segments,
-    search: options.search
+    value: options.value
   });
 }
 function matchSearchPathSegments(options) {
   if (options.segments.length === 0) {
     return valueMatchesSearch({
-      value: options.value,
-      search: options.search
+      search: options.search,
+      value: options.value
     });
   }
   if (isArray(options.value)) {
     return options.value.some(
       (item) => matchSearchPathSegments({
-        value: item,
+        search: options.search,
         segments: options.segments,
-        search: options.search
+        value: item
       })
     );
   }
@@ -112,9 +120,9 @@ function matchSearchPathSegments(options) {
     return false;
   }
   return matchSearchPathSegments({
-    value: options.value[head],
+    search: options.search,
     segments: tail,
-    search: options.search
+    value: options.value[head]
   });
 }
 function valueMatchesSearch(options) {
@@ -122,8 +130,8 @@ function valueMatchesSearch(options) {
   if (isArray(options.value)) {
     return options.value.some(
       (item) => valueMatchesSearch({
-        value: item,
-        search: normalizedSearch
+        search: normalizedSearch,
+        value: item
       })
     );
   }
@@ -139,21 +147,29 @@ function* lazySortRows(rows, sorting = []) {
   const compare = createRowComparator(sorting);
   while (buffer.length < 1e3) {
     const next = iterator.next();
-    if (next.done) break;
+    if (next.done) {
+      break;
+    }
     buffer.push(next.value);
   }
   buffer.sort(compare);
   let cursor = 0;
   while (cursor < buffer.length) {
-    yield buffer[cursor++];
+    const item = buffer[cursor];
+    cursor += 1;
+    if (item !== void 0) {
+      yield item;
+    }
     while (buffer.length < cursor + 1e3) {
       const next = iterator.next();
-      if (next.done) break;
+      if (next.done) {
+        break;
+      }
       const insertIndex = findInsertIndex({
-        rows: buffer,
-        value: next.value,
         compare,
-        offset: cursor
+        offset: cursor,
+        rows: buffer,
+        value: next.value
       });
       buffer.splice(insertIndex, 0, next.value);
     }
@@ -164,10 +180,12 @@ function createRowComparator(sorting) {
     for (const rule of sorting) {
       const direction = rule.dir === "desc" ? -1 : 1;
       const comparison = compareUnknownValues({
-        left: getFilterTargetValue({ source: left, key: rule.key }),
-        right: getFilterTargetValue({ source: right, key: rule.key })
+        left: getFilterTargetValue({ key: rule.key, source: left }),
+        right: getFilterTargetValue({ key: rule.key, source: right })
       });
-      if (comparison !== 0) return comparison * direction;
+      if (comparison !== 0) {
+        return comparison * direction;
+      }
     }
     return 0;
   };
@@ -178,7 +196,11 @@ function findInsertIndex(options) {
   let high = options.rows.length;
   while (low < high) {
     const mid = Math.floor((low + high) / 2);
-    if (options.compare(options.value, options.rows[mid]) < 0) {
+    const row = options.rows[mid];
+    if (row === void 0) {
+      throw new RangeError(`Missing row at sorted insert index ${mid}.`);
+    }
+    if (options.compare(options.value, row) < 0) {
       high = mid;
       continue;
     }
@@ -189,7 +211,7 @@ function findInsertIndex(options) {
 function paginateRows(rows, pagination) {
   if (pagination.mode !== "offset") {
     const collected2 = [...rows];
-    return { rows: collected2, rowCount: collected2.length };
+    return { rowCount: collected2.length, rows: collected2 };
   }
   const pageIndex = Math.max(1, pagination.pageIndex || 1);
   const pageSize = Math.max(1, pagination.pageSize || 1);
@@ -199,33 +221,37 @@ function paginateRows(rows, pagination) {
   let remaining = 0;
   for (const row of rows) {
     if (index < start) {
-      index++;
+      index += 1;
       continue;
     }
     if (collected.length < pageSize) {
       collected.push(row);
-      index++;
+      index += 1;
       continue;
     }
-    remaining++;
+    remaining += 1;
   }
   return {
-    rows: collected,
-    rowCount: index + remaining
+    rowCount: index + remaining,
+    rows: collected
   };
 }
 function removeFilterKeyFromGroup(options) {
   const children = [];
   for (const child of options.group.children) {
     if (child.type === "condition") {
-      if (child.key !== options.key) children.push(child);
+      if (child.key !== options.key) {
+        children.push(child);
+      }
       continue;
     }
     const nextGroup = removeFilterKeyFromGroup({
       group: child,
       key: options.key
     });
-    if (nextGroup.children.length) children.push(nextGroup);
+    if (nextGroup.children.length) {
+      children.push(nextGroup);
+    }
   }
   return {
     ...options.group,
@@ -237,13 +263,18 @@ function countFacetOptions(options) {
   const normalizedSearch = options.search?.trim().toLocaleLowerCase() ?? "";
   for (const row of options.rows) {
     const seenInRow = /* @__PURE__ */ new Set();
-    for (const value of toValueList(getFilterTargetValue({ source: row, key: options.key }))) {
-      if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean")
+    for (const value of toValueList(getFilterTargetValue({ key: options.key, source: row }))) {
+      if (!isString(value) && !isNumber(value) && !isBoolean(value)) {
         continue;
+      }
       const searchValue = String(value).toLocaleLowerCase();
-      if (normalizedSearch.length && !searchValue.includes(normalizedSearch)) continue;
-      const mapKey = `${typeof value}:${String(value)}`;
-      if (seenInRow.has(mapKey)) continue;
+      if (normalizedSearch.length && !searchValue.includes(normalizedSearch)) {
+        continue;
+      }
+      const mapKey = `${resolvePrimitiveValueKind(value)}:${String(value)}`;
+      if (seenInRow.has(mapKey)) {
+        continue;
+      }
       seenInRow.add(mapKey);
       const current = countByValue.get(mapKey);
       if (current) {
@@ -251,19 +282,23 @@ function countFacetOptions(options) {
         continue;
       }
       countByValue.set(mapKey, {
-        value,
-        count: 1
+        count: 1,
+        value
       });
     }
   }
   return [...countByValue.values()].sort(compareFacetOptions);
 }
 function compareFacetOptions(left, right) {
-  if (left.count !== right.count) return right.count - left.count;
+  if (left.count !== right.count) {
+    return right.count - left.count;
+  }
   return compareUnknownValues({ left: left.value, right: right.value });
 }
 function resolveFacetOffset(cursor) {
-  if (!cursor) return 0;
+  if (!cursor) {
+    return 0;
+  }
   const value = Number(cursor);
   return Number.isFinite(value) && value > 0 ? value : 0;
 }
@@ -278,45 +313,55 @@ function matchesFilterNode(row, node) {
 }
 function matchesFilterCondition(row, condition) {
   const value = getFilterTargetValue({
-    source: row,
-    key: condition.key
+    key: condition.key,
+    source: row
   });
   switch (condition.operator) {
-    case "contains":
-      return matchContains({ value, filter: condition.value });
-    case "is":
-      return matchIs({ value, filter: condition.value });
-    case "isAnyOf":
-      return matchIsAnyOf({ value, filter: condition.value });
-    case "isNot":
-      return !matchIs({ value, filter: condition.value });
-    case "gt":
-      return matchComparison({ value, filter: condition.value, operator: "gt" });
-    case "gte":
-      return matchComparison({ value, filter: condition.value, operator: "gte" });
-    case "lt":
-      return matchComparison({ value, filter: condition.value, operator: "lt" });
-    case "lte":
-      return matchComparison({ value, filter: condition.value, operator: "lte" });
-    case "between":
-      return matchBetween({ value, filter: condition.value });
-    case "before":
-      return matchComparison({ value, filter: condition.value, operator: "lt" });
-    case "after":
-      return matchComparison({ value, filter: condition.value, operator: "gt" });
-    default:
+    case "contains": {
+      return matchContains({ filter: condition.value, value });
+    }
+    case "is": {
+      return matchIs({ filter: condition.value, value });
+    }
+    case "isAnyOf": {
+      return matchIsAnyOf({ filter: condition.value, value });
+    }
+    case "isNot": {
+      return !matchIsAnyOf({ filter: condition.value, value });
+    }
+    case "gt": {
+      return matchComparison({ filter: condition.value, operator: "gt", value });
+    }
+    case "gte": {
+      return matchComparison({ filter: condition.value, operator: "gte", value });
+    }
+    case "lt": {
+      return matchComparison({ filter: condition.value, operator: "lt", value });
+    }
+    case "lte": {
+      return matchComparison({ filter: condition.value, operator: "lte", value });
+    }
+    case "between": {
+      return matchBetween({ filter: condition.value, value });
+    }
+    case "before": {
+      return matchComparison({ filter: condition.value, operator: "lt", value });
+    }
+    case "after": {
+      return matchComparison({ filter: condition.value, operator: "gt", value });
+    }
+    default: {
       return false;
+    }
   }
 }
 function getFilterTargetValue(options) {
   return options.key.split(".").reduce((current, segment) => {
     if (isArray(current)) {
-      return current.map(
-        (item) => item != null && typeof item === "object" ? item[segment] : void 0
-      );
+      return current.map((item) => isObject(item) ? item[segment] : void 0);
     }
-    if (!current || typeof current !== "object") {
-      return void 0;
+    if (!isObject(current)) {
+      return;
     }
     return current[segment];
   }, options.source);
@@ -342,8 +387,8 @@ function matchIsAnyOf(options) {
   }
   return options.filter.some(
     (candidate) => matchIs({
-      value: options.value,
-      filter: candidate
+      filter: candidate,
+      value: options.value
     })
   );
 }
@@ -355,13 +400,13 @@ function matchBetween(options) {
   const to = "to" in options.filter ? normalizeComparable(options.filter.to) : null;
   return toValueList(options.value).some((item) => {
     const comparable = normalizeComparable(item);
-    if (comparable == null) {
+    if (isNullish(comparable)) {
       return false;
     }
-    if (from != null && comparable < from) {
+    if (!isNullish(from) && comparable < from) {
       return false;
     }
-    if (to != null && comparable > to) {
+    if (!isNullish(to) && comparable > to) {
       return false;
     }
     return true;
@@ -369,23 +414,27 @@ function matchBetween(options) {
 }
 function matchComparison(options) {
   const expected = normalizeComparable(options.filter);
-  if (expected == null) {
+  if (isNullish(expected)) {
     return false;
   }
   return toValueList(options.value).some((item) => {
     const comparable = normalizeComparable(item);
-    if (comparable == null) {
+    if (isNullish(comparable)) {
       return false;
     }
     switch (options.operator) {
-      case "gt":
+      case "gt": {
         return comparable > expected;
-      case "gte":
+      }
+      case "gte": {
         return comparable >= expected;
-      case "lt":
+      }
+      case "lt": {
         return comparable < expected;
-      case "lte":
+      }
+      case "lte": {
         return comparable <= expected;
+      }
     }
   });
 }
@@ -399,23 +448,23 @@ function areEqual(options) {
   if (isDate(options.left) || isDate(options.right)) {
     const leftValue = normalizeComparable(options.left);
     const rightValue = normalizeComparable(options.right);
-    return leftValue != null && leftValue === rightValue;
+    return !isNullish(leftValue) && leftValue === rightValue;
   }
   return options.left === options.right;
 }
 function compareUnknownValues(options) {
   const leftComparable = normalizeComparableForSort(options.left);
   const rightComparable = normalizeComparableForSort(options.right);
-  if (leftComparable == null && rightComparable == null) {
+  if (isNullish(leftComparable) && isNullish(rightComparable)) {
     return 0;
   }
-  if (leftComparable == null) {
+  if (isNullish(leftComparable)) {
     return 1;
   }
-  if (rightComparable == null) {
+  if (isNullish(rightComparable)) {
     return -1;
   }
-  if (typeof leftComparable === "string" && typeof rightComparable === "string") {
+  if (isString(leftComparable) && isString(rightComparable)) {
     return leftComparable.localeCompare(rightComparable, void 0, {
       numeric: true,
       sensitivity: "base"
@@ -433,16 +482,16 @@ function normalizeComparableForSort(value) {
   if (isDate(value)) {
     return value.getTime();
   }
-  if (typeof value === "number") {
-    return Number.isNaN(value) ? null : value;
+  if (isNumber(value)) {
+    return value;
   }
-  if (typeof value === "boolean") {
+  if (isBoolean(value)) {
     return value ? 1 : 0;
   }
   if (isString(value)) {
     return value.toLocaleLowerCase();
   }
-  if (value == null) {
+  if (isNullish(value)) {
     return null;
   }
   return String(value).toLocaleLowerCase();
@@ -451,24 +500,33 @@ function normalizeComparable(value) {
   if (isDate(value)) {
     return value.getTime();
   }
-  if (typeof value === "number") {
-    return Number.isNaN(value) ? null : value;
+  if (isNumber(value)) {
+    return value;
   }
-  if (typeof value === "string") {
+  if (isString(value)) {
     const maybeTimestamp = Date.parse(value);
-    if (!Number.isNaN(maybeTimestamp) && /\d{4}-\d{2}-\d{2}/.test(value)) {
+    if (!Number.isNaN(maybeTimestamp) && /\d{4}-\d{2}-\d{2}/u.test(value)) {
       return maybeTimestamp;
     }
     return value.toLocaleLowerCase();
   }
-  if (typeof value === "boolean") {
+  if (isBoolean(value)) {
     return value ? 1 : 0;
   }
   return null;
 }
 function normalizeString(value) {
-  if (value == null) {
+  if (isNullish(value)) {
     return "";
   }
   return String(value).toLocaleLowerCase();
 }
+function resolvePrimitiveValueKind(value) {
+  if (isString(value)) {
+    return "string";
+  }
+  if (isNumber(value)) {
+    return "number";
+  }
+  return "boolean";
+}

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

@@ -0,0 +1,6 @@
+/** @jsxImportSource vue */
+import type { DataListColumnDef, TableRuntimeColumn, UseTableColumnsParams } from './types.js';
+export declare function createColumnDefs(options: {
+    params: UseTableColumnsParams;
+    visibleOrderedColumns: TableRuntimeColumn[];
+}): DataListColumnDef[];

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

@@ -0,0 +1,94 @@
+import {
+  createRowActionsColumn,
+  createSelectionColumn,
+  normalizeColumnSize,
+  renderColumnCell
+} from "./render.js";
+import { findSchemaColumn } from "./schema.js";
+import {
+  DEFAULT_COLUMN_SIZE,
+  MAX_COLUMN_SIZE,
+  MIN_COLUMN_SIZE,
+  ROW_ACTIONS_COLUMN_ID,
+  ROW_ACTIONS_COLUMN_WIDTH,
+  SELECT_COLUMN_ID,
+  SELECT_COLUMN_WIDTH
+} from "./types.js";
+const LABEL_CHAR_WIDTH = 7.2;
+const LABEL_CHROME_WIDTH = 64;
+function headerFloor(label, sortable) {
+  return Math.ceil(label.length * LABEL_CHAR_WIDTH + LABEL_CHROME_WIDTH + (sortable ? 18 : 0));
+}
+export function createColumnDefs(options) {
+  const defs = [];
+  if (options.params.selection.selectionEnabled.value) {
+    const selection = createSelectionColumn({ params: options.params });
+    defs.push({
+      enableResizing: false,
+      id: SELECT_COLUMN_ID,
+      maxSize: MAX_COLUMN_SIZE,
+      meta: {
+        canHide: false,
+        internal: "selection",
+        label: "",
+        render: ({ row, index }) => selection.cell({ row: { id: options.params.selection.getRowId({ index, row }) } }),
+        renderHeader: () => selection.header(),
+        sortable: false
+      },
+      minSize: SELECT_COLUMN_WIDTH,
+      size: SELECT_COLUMN_WIDTH
+    });
+  }
+  for (const runtimeColumn of options.visibleOrderedColumns) {
+    if (runtimeColumn.id === ROW_ACTIONS_COLUMN_ID) {
+      const actions = createRowActionsColumn({ params: options.params });
+      defs.push({
+        enableResizing: false,
+        id: ROW_ACTIONS_COLUMN_ID,
+        maxSize: MAX_COLUMN_SIZE,
+        meta: {
+          align: "right",
+          canHide: false,
+          internal: "actions",
+          label: runtimeColumn.label,
+          render: ({ row, index }) => actions.cell({ row: { index, original: row } }),
+          sortable: false
+        },
+        minSize: ROW_ACTIONS_COLUMN_WIDTH,
+        size: ROW_ACTIONS_COLUMN_WIDTH
+      });
+      continue;
+    }
+    const column = findSchemaColumn({
+      columnId: runtimeColumn.id,
+      schema: options.params.schema.value
+    });
+    if (!column) {
+      continue;
+    }
+    const sortable = Boolean(runtimeColumn.sortableKey);
+    const authored = normalizeColumnSize({ size: runtimeColumn.width });
+    const min = normalizeColumnSize({ size: runtimeColumn.minWidth }) ?? MIN_COLUMN_SIZE;
+    const floor = headerFloor(runtimeColumn.label, sortable);
+    defs.push({
+      enableResizing: column.resizable !== false,
+      id: runtimeColumn.id,
+      maxSize: normalizeColumnSize({ size: runtimeColumn.maxWidth }) ?? MAX_COLUMN_SIZE,
+      meta: {
+        align: runtimeColumn.align,
+        canHide: runtimeColumn.canHide,
+        ellipsis: runtimeColumn.ellipsis,
+        icon: runtimeColumn.icon,
+        label: runtimeColumn.label,
+        lines: runtimeColumn.lines,
+        render: ({ row, index }) => renderColumnCell({ column, params: options.params, row, rowIndex: index }),
+        skeleton: runtimeColumn.skeleton ?? (runtimeColumn.align === "right" ? "number" : "text"),
+        sortable,
+        sortableKey: runtimeColumn.sortableKey
+      },
+      minSize: min,
+      size: Math.max(authored ?? DEFAULT_COLUMN_SIZE, Math.min(floor, 260), min)
+    });
+  }
+  return defs;
+}

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

@@ -2,11 +2,12 @@ import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue';
 import type { TableSchemaView } from '../../types/index.js';
 export declare function createColumnMenuItems(options: {
     columnId: string;
+    label?: string;
     schema: TableSchemaView;
-    orderedColumns: Array<{
+    orderedColumns: {
         id: string;
         sortableKey?: string;
-    }>;
+    }[];
     getSortState: (options: {
         columnId: string;
     }) => 'asc' | 'desc' | null;