nuxt-ui-tools 0.1.2 → 1.0.0

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

@@ -1,49 +1,224 @@
 import { twMerge } from "tailwind-merge";
+const dataListPopoverContentClass = "overflow-hidden [&>div]:w-full [&>div]:min-w-0 [&>div]:max-w-full [&>div>div]:w-full [&>div>div]:min-w-0 [&>div>div]:max-w-full [&_[data-filter-stage-content]>div]:!w-full [&_[data-filter-stage-content]>div]:!min-w-0 [&_[data-filter-stage-content]>div]:!max-w-full";
+const dataListPopoverSizingClasses = {
+  fit: "w-fit min-w-[min(12rem,calc(100vw-1rem))] max-w-[calc(100vw-1rem)]",
+  independent: "w-[min(20rem,calc(100vw-1rem))] min-w-[min(16rem,calc(100vw-1rem))] max-w-[calc(100vw-1rem)]",
+  trigger: "w-[var(--reka-popover-trigger-width)] min-w-[var(--reka-popover-trigger-width)] max-w-[var(--reka-popover-trigger-width)]"
+};
+const dataListControlGeometryClasses = {
+  lg: {
+    caption: "text-xs",
+    fieldGap: "gap-6",
+    floating: "gap-2.5 px-4 py-2.5 text-sm",
+    footer: "gap-3.5 px-5 py-3.5 text-sm",
+    icon: "size-4.5",
+    listPadding: "p-2.5",
+    panelGap: "gap-6",
+    panelPadding: "p-4",
+    row: "gap-2.5 px-3 py-2 text-sm",
+    smallIcon: "size-4",
+    text: "text-sm",
+    toolbarGap: "gap-2.5"
+  },
+  md: {
+    caption: "text-[11px]",
+    fieldGap: "gap-5",
+    floating: "gap-2 px-3 py-2 text-sm",
+    footer: "gap-3 px-4 py-3 text-sm",
+    icon: "size-4",
+    listPadding: "p-2",
+    panelGap: "gap-5",
+    panelPadding: "p-3",
+    row: "gap-2 px-2 py-1.5 text-sm",
+    smallIcon: "size-3.5",
+    text: "text-sm",
+    toolbarGap: "gap-2"
+  },
+  sm: {
+    caption: "text-[10px]",
+    fieldGap: "gap-4",
+    floating: "gap-2 px-3 py-2 text-xs",
+    footer: "gap-2.5 px-3 py-2.5 text-xs",
+    icon: "size-3.5",
+    listPadding: "p-2",
+    panelGap: "gap-4",
+    panelPadding: "p-2.5",
+    row: "gap-2 px-2 py-1.5 text-xs",
+    smallIcon: "size-3",
+    text: "text-xs",
+    toolbarGap: "gap-2"
+  },
+  xl: {
+    caption: "text-xs",
+    fieldGap: "gap-7",
+    floating: "gap-3 px-5 py-3 text-base",
+    footer: "gap-4 px-6 py-4 text-base",
+    icon: "size-5",
+    listPadding: "p-3",
+    panelGap: "gap-7",
+    panelPadding: "p-5",
+    row: "gap-3 px-4 py-2.5 text-base",
+    smallIcon: "size-4.5",
+    text: "text-base",
+    toolbarGap: "gap-3"
+  },
+  xs: {
+    caption: "text-[10px]",
+    fieldGap: "gap-3",
+    floating: "gap-1.5 px-2.5 py-1.5 text-xs",
+    footer: "gap-2 px-3 py-2 text-xs",
+    icon: "size-3.5",
+    listPadding: "p-1.5",
+    panelGap: "gap-3",
+    panelPadding: "p-2",
+    row: "gap-1.5 px-2 py-1 text-xs",
+    smallIcon: "size-3",
+    text: "text-xs",
+    toolbarGap: "gap-1.5"
+  }
+};
+const dataListTableSizeClasses = {
+  lg: {
+    cell: "h-14 px-5 py-3 text-sm",
+    header: "h-14 px-5 py-2.5 text-sm",
+    row: "h-14 min-h-14",
+    rowHeight: 56
+  },
+  md: {
+    cell: "h-12 px-4 py-2.5 text-sm",
+    header: "h-12 px-4 py-2 text-sm",
+    row: "h-12 min-h-12",
+    rowHeight: 48
+  },
+  sm: {
+    cell: "h-10 px-3 py-2 text-xs",
+    header: "h-10 px-3 py-1.5 text-xs",
+    row: "h-10 min-h-10",
+    rowHeight: 40
+  },
+  xl: {
+    cell: "h-16 px-6 py-3.5 text-sm",
+    header: "h-16 px-6 py-3 text-sm",
+    row: "h-16 min-h-16",
+    rowHeight: 64
+  },
+  xs: {
+    cell: "h-9 px-2.5 py-1.5 text-xs",
+    header: "h-9 px-2.5 py-1 text-xs",
+    row: "h-9 min-h-9",
+    rowHeight: 36
+  }
+};
+const dataListDensitySizes = {
+  comfortable: "lg",
+  compact: "sm",
+  default: "md"
+};
+function isPlainRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+export function mergeDataListProps(...layers) {
+  const out = {};
+  for (const layer of layers) {
+    if (!layer) {
+      continue;
+    }
+    for (const [key, value] of Object.entries(layer)) {
+      if (value === void 0) {
+        continue;
+      }
+      const current = out[key];
+      out[key] = isPlainRecord(current) && isPlainRecord(value) ? { ...current, ...value } : value;
+    }
+  }
+  return out;
+}
 export function mergeDataListUiClass(defaults, root, local) {
   return twMerge(defaults, root, local);
 }
-export function mergeDataListUiConfig(appUi, componentUi, density) {
+export function resolveDataListPopoverContentClass(sizing, local) {
+  return mergeDataListUiClass(
+    `${dataListPopoverSizingClasses[sizing]} ${dataListPopoverContentClass}`,
+    void 0,
+    local
+  );
+}
+export function resolveDataListControlGeometry(size) {
+  return dataListControlGeometryClasses[size];
+}
+const nestedControlSizes = {
+  lg: "md",
+  md: "sm",
+  sm: "xs",
+  xl: "lg",
+  xs: "xs"
+};
+export function resolveDataListNestedControlSize(size) {
+  return nestedControlSizes[size];
+}
+export function resolveDataListTableSize(size) {
+  return dataListTableSizeClasses[size];
+}
+export function resolveDataListTableDensity(density) {
+  return dataListTableSizeClasses[dataListDensitySizes[density]];
+}
+export function resolveDataListContentShellClass(options) {
+  if (options.layout === "grid") {
+    if (options.surface === "contained") {
+      return "grid gap-5 overflow-hidden rounded-md border border-default bg-default";
+    }
+    return "grid gap-5";
+  }
+  if (options.surface === "contained") {
+    return "overflow-hidden rounded-md border border-default bg-default";
+  }
+  return "overflow-hidden";
+}
+export function mergeDataListUiConfig(appUi, componentUi, density, size) {
   return {
     ...appUi,
     ...componentUi,
-    density: density ?? componentUi?.density ?? appUi?.density,
-    control: { ...appUi?.control, ...componentUi?.control },
-    default: mergeUiConfig(appUi?.default, componentUi?.default),
-    search: mergeSearchConfig(appUi?.search, componentUi?.search),
-    filterTags: mergePartConfig(appUi?.filterTags, componentUi?.filterTags),
     addFilter: mergePartConfig(appUi?.addFilter, componentUi?.addFilter),
-    filterPanel: mergePartConfig(appUi?.filterPanel, componentUi?.filterPanel),
     clearFilters: mergePartConfig(appUi?.clearFilters, componentUi?.clearFilters),
-    resultCount: mergeUiConfig(appUi?.resultCount, componentUi?.resultCount),
     columnPanel: mergePartConfig(appUi?.columnPanel, componentUi?.columnPanel),
-    sortMenu: mergePartConfig(appUi?.sortMenu, componentUi?.sortMenu),
-    layoutSwitch: mergePartConfig(appUi?.layoutSwitch, componentUi?.layoutSwitch),
-    refresh: mergePartConfig(appUi?.refresh, componentUi?.refresh),
     content: mergeUiConfig(appUi?.content, componentUi?.content),
-    table: mergeUiConfig(appUi?.table, componentUi?.table),
+    control: (() => {
+      const control = {
+        ...appUi?.control,
+        ...componentUi?.control
+      };
+      if (size !== void 0) {
+        control.size = size;
+      }
+      return control;
+    })(),
+    default: mergeUiConfig(appUi?.default, componentUi?.default),
+    density: density ?? componentUi?.density ?? appUi?.density,
+    filterPanel: mergePartConfig(appUi?.filterPanel, componentUi?.filterPanel),
+    filterTags: mergePartConfig(appUi?.filterTags, componentUi?.filterTags),
     grid: mergeUiConfig(appUi?.grid, componentUi?.grid),
+    infiniteLoader: mergePartConfig(appUi?.infiniteLoader, componentUi?.infiniteLoader),
+    layoutSwitch: mergePartConfig(appUi?.layoutSwitch, componentUi?.layoutSwitch),
     pagination: mergePartConfig(appUi?.pagination, componentUi?.pagination),
-    infiniteLoader: mergePartConfig(appUi?.infiniteLoader, componentUi?.infiniteLoader)
+    refresh: mergePartConfig(appUi?.refresh, componentUi?.refresh),
+    resultCount: mergeUiConfig(appUi?.resultCount, componentUi?.resultCount),
+    search: mergeSearchConfig(appUi?.search, componentUi?.search),
+    selectionActions: mergePartConfig(appUi?.selectionActions, componentUi?.selectionActions),
+    sortMenu: mergePartConfig(appUi?.sortMenu, componentUi?.sortMenu),
+    table: mergeUiConfig(appUi?.table, componentUi?.table)
   };
 }
 function mergeUiConfig(appDefaults, componentConfig) {
   return {
     ...appDefaults,
     ...componentConfig,
+    props: mergeDataListProps(appDefaults?.props, componentConfig?.props),
     ui: { ...appDefaults?.ui, ...componentConfig?.ui }
   };
 }
 function mergePartConfig(appDefaults, componentConfig) {
-  return {
-    ...appDefaults,
-    ...componentConfig,
-    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
-  };
+  return mergeUiConfig(appDefaults, componentConfig);
 }
 function mergeSearchConfig(appDefaults, componentConfig) {
-  return {
-    ...appDefaults,
-    ...componentConfig,
-    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
-  };
+  return mergeUiConfig(appDefaults, componentConfig);
 }

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

@@ -0,0 +1,4 @@
+import type { TableFilterFacetConfig, TableFilterFacetSpec, TableGlobalFacetDescriptor, TableUiFilterDefinition } from '../types/index.js';
+export declare function hasPerFilterFacetQuery(facet: TableFilterFacetSpec | undefined): facet is TableFilterFacetConfig & Required<Pick<TableFilterFacetConfig, 'query'>>;
+export declare function resolveTableFacetMode(facet: TableFilterFacetSpec | undefined): 'exclude-self' | 'include-self';
+export declare function resolveTableGlobalFacetDescriptors(definitions: TableUiFilterDefinition[]): TableGlobalFacetDescriptor<string>[];

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

@@ -0,0 +1,34 @@
+import { isFunction, isNumber, isObject } from "../../shared/utils/predicate.js";
+export function hasPerFilterFacetQuery(facet) {
+  return isObject(facet) && isFunction(facet.query);
+}
+export function resolveTableFacetMode(facet) {
+  if (facet === "include-self") {
+    return "include-self";
+  }
+  if (isObject(facet) && facet.mode === "include-self") {
+    return "include-self";
+  }
+  return "exclude-self";
+}
+export function resolveTableGlobalFacetDescriptors(definitions) {
+  return definitions.flatMap((definition) => {
+    if (definition.kind !== "option" && definition.kind !== "boolean") {
+      return [];
+    }
+    const facet = definition.source?.facet;
+    if (!facet || hasPerFilterFacetQuery(facet)) {
+      return [];
+    }
+    return [
+      {
+        key: definition.key,
+        limit: isFacetLimit(facet) ? facet.limit : void 0,
+        mode: resolveTableFacetMode(facet)
+      }
+    ];
+  });
+}
+function isFacetLimit(value) {
+  return isObject(value) && (value.limit === void 0 || isNumber(value.limit));
+}

package/dist/runtime/table/utils/filter-presentation.d.ts

@@ -0,0 +1,16 @@
+import type { TableQueryStateFilterRule } from '../types/index.js';
+export declare function resolvePanelDefaultRules(options: {
+    definitions: {
+        key: string;
+    }[];
+    getDefault: (key: string) => TableQueryStateFilterRule | undefined;
+}): {
+    key: string;
+    operator?: import("../types/index.js").TableFilterOperator | undefined;
+    value: import("../types/index.js").TableQueryStateFilterValue;
+}[];
+export declare function resolvePanelCommitRules(options: {
+    currentRules: TableQueryStateFilterRule[];
+    panelKeys: string[];
+    panelRules: TableQueryStateFilterRule[];
+}): TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[];

package/dist/runtime/table/utils/filter-presentation.js

@@ -0,0 +1,11 @@
+export function resolvePanelDefaultRules(options) {
+  return options.definitions.flatMap((definition) => {
+    const defaultRule = options.getDefault(definition.key);
+    return defaultRule ? [{ ...defaultRule }] : [];
+  });
+}
+export function resolvePanelCommitRules(options) {
+  const panelKeySet = new Set(options.panelKeys);
+  const preservedRules = options.currentRules.filter((rule) => !panelKeySet.has(rule.key));
+  return [...preservedRules, ...options.panelRules.map((rule) => ({ ...rule }))];
+}

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

@@ -1,11 +1,11 @@
-import type { TableDateFilterDefinition, TableQueryStateFilterRule, TableTextValue, TableUiFilterDefinition } from '../../types/index.js';
-type DateRangeLike = {
+import type { TableDateFilterDefinition, TableQueryStateFilterRule, TableTextValue, RenderableType, TableUiFilterDefinition } from '../../types/index.js';
+interface DateRangeLike {
     from?: unknown;
     to?: unknown;
-};
+}
 export declare function getFilterLabelText(options: {
-    label: TableTextValue | TableUiFilterDefinition['label'] | (() => unknown);
-}): string;
+    label: TableTextValue | TableUiFilterDefinition['label'] | (() => RenderableType);
+}): (string | (() => string | number) | (() => RenderableType) | (() => RenderableType)) & string;
 export declare function getFilterTextValue(options: {
     value: TableTextValue | undefined;
     fallback?: string;
@@ -17,17 +17,17 @@ export declare function getFilterPathValues(options: {
     source: unknown;
     key: string;
 }): unknown[];
-export declare function readFilterPathValue(options: {
-    source: unknown;
+export declare function readFilterPathValue<TSource>(options: {
+    source: TSource;
     key: string;
 }): unknown;
 export declare function flattenFilterValues(options: {
     value: unknown;
 }): unknown[];
-export declare function isDateRangeValue(options: {
-    value: unknown;
+export declare function isDateRangeValue<TValue>(options: {
+    value: TValue;
 }): options is {
-    value: DateRangeLike;
+    value: TValue & DateRangeLike;
 };
 export declare function toDateFilterValue(options: {
     definition: TableDateFilterDefinition;
@@ -40,16 +40,16 @@ export declare function isFilterValueSelected(options: {
     values: unknown[];
     candidate: unknown;
 }): boolean;
-export declare function getDateRangeValue(options: {
-    value: unknown;
-}): DateRangeLike | undefined;
-type NumberRangeLike = {
+export declare function getDateRangeValue<TValue>(options: {
+    value: TValue;
+}): (TValue & DateRangeLike) | undefined;
+interface NumberRangeLike {
     from?: number;
     to?: number;
-};
-export declare function getNumberRangeValue(options: {
-    value: unknown;
-}): NumberRangeLike | undefined;
+}
+export declare function getNumberRangeValue<TValue>(options: {
+    value: TValue;
+}): (TValue & NumberRangeLike) | undefined;
 export declare function formatFilterNumber(options: {
     value: number;
 }): string;

package/dist/runtime/table/utils/filters/common.js

@@ -1,11 +1,15 @@
 import { useUiToolsLocale } from "#ui-tools/i18n";
-import { isArray, isObject } from "../../../shared/utils/predicate.js";
+import { isArray, isNumber, isObject, isString, isNullish } from "../../../shared/utils/predicate.js";
 import { resolveTextValue } from "../../../shared/utils/render.js";
 export function getFilterLabelText(options) {
-  if (typeof options.label === "number") return String(options.label);
-  if (typeof options.label === "string") return options.label;
+  if (isNumber(options.label)) {
+    return String(options.label);
+  }
+  if (isString(options.label)) {
+    return options.label;
+  }
   const resolved = options.label();
-  return typeof resolved === "string" || typeof resolved === "number" ? String(resolved) : "";
+  return isString(resolved) || isNumber(resolved) ? String(resolved) : "";
 }
 export function getFilterTextValue(options) {
   return resolveTextValue(options.value, options.fallback);
@@ -16,20 +20,18 @@ export function getFilterRuleValue(options) {
 export function getFilterPathValues(options) {
   return flattenFilterValues({
     value: readFilterPathValue({
-      source: options.source,
-      key: options.key
+      key: options.key,
+      source: options.source
     })
   });
 }
 export function readFilterPathValue(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);
@@ -42,13 +44,13 @@ export function flattenFilterValues(options) {
       })
     );
   }
-  if (options.value == null) {
+  if (isNullish(options.value)) {
     return [];
   }
   return [options.value];
 }
 export function isDateRangeValue(options) {
-  if (!options.value || !isObject(options.value) || isArray(options.value)) {
+  if (!isObject(options.value) || isArray(options.value)) {
     return false;
   }
   return "from" in options.value || "to" in options.value;
@@ -57,7 +59,7 @@ export function toDateFilterValue(options) {
   if (options.value instanceof Date) {
     return options.value;
   }
-  if (typeof options.value === "string" || typeof options.value === "number") {
+  if (isString(options.value) || isNumber(options.value)) {
     const date = new Date(options.value);
     return Number.isNaN(date.getTime()) ? void 0 : date;
   }
@@ -70,13 +72,12 @@ export function toDateFilterValue(options) {
     });
     return from && !Number.isNaN(from.getTime()) ? from : void 0;
   }
-  return void 0;
 }
 export function formatFilterDate(options) {
   const { locale } = useUiToolsLocale();
   return new Intl.DateTimeFormat(locale.value.code, {
-    month: "short",
     day: "numeric",
+    month: "short",
     year: "numeric"
   }).format(options.value);
 }
@@ -86,26 +87,26 @@ export function isFilterValueSelected(options) {
   );
 }
 export function getDateRangeValue(options) {
-  return isDateRangeValue({ value: options.value }) ? options.value : void 0;
+  return isDateRangeValue(options) ? options.value : void 0;
 }
 function isNumberRangeValue(options) {
-  if (!options.value || !isObject(options.value) || isArray(options.value)) {
+  if (!isObject(options.value) || isArray(options.value)) {
     return false;
   }
-  return "from" in options.value || "to" in options.value;
+  return (!("from" in options.value) || isNumber(options.value.from)) && (!("to" in options.value) || isNumber(options.value.to));
 }
 export function getNumberRangeValue(options) {
-  return isNumberRangeValue({ value: options.value }) ? options.value : void 0;
+  return isNumberRangeValue(options) ? options.value : void 0;
 }
 export function formatFilterNumber(options) {
   const { locale } = useUiToolsLocale();
   return new Intl.NumberFormat(locale.value.code).format(options.value);
 }
 export function toMaybeNumber(options) {
-  if (typeof options.value === "number") {
+  if (isNumber(options.value)) {
     return options.value;
   }
-  if (typeof options.value === "string") {
+  if (isString(options.value)) {
     const n = Number(options.value);
     return Number.isNaN(n) ? void 0 : n;
   }
@@ -115,16 +116,15 @@ export function toMaybeDate(options) {
   if (options.value instanceof Date) {
     return options.value;
   }
-  if (typeof options.value === "string" || typeof options.value === "number") {
+  if (isString(options.value) || isNumber(options.value)) {
     const date = new Date(options.value);
     return Number.isNaN(date.getTime()) ? void 0 : date;
   }
-  return void 0;
 }
 function areFilterValuesEqual(options) {
   if (options.left instanceof Date || options.right instanceof Date) {
-    const left = options.left instanceof Date ? options.left : options.left != null ? new Date(String(options.left)) : void 0;
-    const right = options.right instanceof Date ? options.right : options.right != null ? new Date(String(options.right)) : void 0;
+    const left = options.left instanceof Date ? options.left : isNullish(options.left) ? void 0 : new Date(String(options.left));
+    const right = options.right instanceof Date ? options.right : isNullish(options.right) ? void 0 : new Date(String(options.right));
     return left?.getTime() === right?.getTime();
   }
   return String(options.left) === String(options.right);