nuxt-ui-tools 0.1.3 → 1.0.0

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

@@ -1,28 +1,33 @@
 import { resolveTextValue } from "#ui-tools/shared/utils/render";
+import { isFunction, isNullish } from "../../../shared/utils/predicate.js";
 import { resolveDateFilterUi } from "./ui.js";
 export function resolveDateFilterScalarPresets(options) {
   const presetDefinitions = getScalarPresetDefinitions(options);
   const now = options.now ?? /* @__PURE__ */ new Date();
-  return presetDefinitions.map((preset) => ({
-    label: resolveTextValue(preset.label),
-    ...preset.description ? { description: resolveTextValue(preset.description) } : {},
-    value: resolveScalarPresetValue({
-      preset,
-      now
-    })
-  }));
+  return presetDefinitions.map((preset) => {
+    const resolved = {
+      label: resolveTextValue(preset.label),
+      value: resolveScalarPresetValue({ now, preset })
+    };
+    if (preset.description) {
+      resolved.description = resolveTextValue(preset.description);
+    }
+    return resolved;
+  });
 }
 export function resolveDateFilterRangePresets(options) {
   const presetDefinitions = getRangePresetDefinitions(options.definition);
   const now = options.now ?? /* @__PURE__ */ new Date();
-  return presetDefinitions.map((preset) => ({
-    label: resolveTextValue(preset.label),
-    ...preset.description ? { description: resolveTextValue(preset.description) } : {},
-    value: resolveRangePresetValue({
-      preset,
-      now
-    })
-  }));
+  return presetDefinitions.map((preset) => {
+    const resolved = {
+      label: resolveTextValue(preset.label),
+      value: resolveRangePresetValue({ now, preset })
+    };
+    if (preset.description) {
+      resolved.description = resolveTextValue(preset.description);
+    }
+    return resolved;
+  });
 }
 export function resolveDateFilterRangeCalendarPanels(options) {
   const panels = resolveDateFilterUi(options.definition, "between").range.calendar.months;
@@ -39,33 +44,52 @@ export function resolveDateFilterRangeCalendarPanels(options) {
 }
 export function resolveDateFilterOperatorDescription(operator) {
   switch (operator) {
-    case "between":
+    case "between": {
       return "Match rows inside a date window.";
-    case "before":
+    }
+    case "before": {
       return "Match rows before the selected date.";
-    case "after":
+    }
+    case "after": {
       return "Match rows after the selected date.";
-    case "isNot":
+    }
+    case "isNot": {
       return "Exclude rows matching the selected date.";
-    default:
+    }
+    default: {
       return "Match rows on the selected date.";
+    }
   }
 }
 function getScalarPresetDefinitions(options) {
-  const presets = resolveDateFilterUi(options.definition, options.operator).scalar.presets;
-  if (presets === false) return [];
-  if (presets == null) return DEFAULT_SCALAR_PRESETS[options.operator];
-  if (presets === true) return DEFAULT_SCALAR_PRESETS[options.operator];
+  const { presets } = resolveDateFilterUi(options.definition, options.operator).scalar;
+  if (presets === false) {
+    return [];
+  }
+  if (isNullish(presets)) {
+    return DEFAULT_SCALAR_PRESETS[options.operator];
+  }
+  if (presets === true) {
+    return DEFAULT_SCALAR_PRESETS[options.operator];
+  }
   return presets.filter((preset) => {
-    if (!preset.operators?.length) return true;
+    if (!preset.operators?.length) {
+      return true;
+    }
     return preset.operators.includes(options.operator);
   });
 }
 function getRangePresetDefinitions(definition) {
-  const presets = resolveDateFilterUi(definition, "between").range.presets;
-  if (presets === false) return [];
-  if (presets == null) return DEFAULT_RANGE_PRESETS;
-  if (presets === true) return DEFAULT_RANGE_PRESETS;
+  const { presets } = resolveDateFilterUi(definition, "between").range;
+  if (presets === false) {
+    return [];
+  }
+  if (isNullish(presets)) {
+    return DEFAULT_RANGE_PRESETS;
+  }
+  if (presets === true) {
+    return DEFAULT_RANGE_PRESETS;
+  }
   return presets;
 }
 function resolveScalarPresetValue(options) {
@@ -77,13 +101,16 @@ function resolveScalarPresetValue(options) {
   });
 }
 function resolveRangePresetValue(options) {
-  if (typeof options.preset.value === "function") {
+  if (isRangePresetResolver(options.preset.value)) {
     return options.preset.value({
       now: options.now
     });
   }
   return options.preset.value;
 }
+function isRangePresetResolver(value) {
+  return isFunction(value);
+}
 function startOfDay(value) {
   const result = new Date(value);
   result.setHours(0, 0, 0, 0);
@@ -109,111 +136,111 @@ function startOfYear(value) {
   return new Date(value.getFullYear(), 0, 1);
 }
 const DEFAULT_SCALAR_PRESETS = {
-  is: [
+  after: [
     {
+      description: "Everything after today.",
       label: "Today",
-      description: "Use the current day.",
       value: ({ now }) => startOfDay(now)
     },
     {
-      label: "Yesterday",
-      description: "Use the previous day.",
-      value: ({ now }) => startOfDay(addDays(now, -1))
+      description: "Everything after the last 7 days.",
+      label: "7 days ago",
+      value: ({ now }) => startOfDay(addDays(now, -7))
     },
     {
-      label: "Start of month",
-      description: "Jump to the first day of this month.",
-      value: ({ now }) => startOfMonth(now)
+      description: "Everything after the first day of this year.",
+      label: "Start of year",
+      value: ({ now }) => startOfYear(now)
     }
   ],
-  isNot: [
+  before: [
     {
+      description: "Everything earlier than today.",
       label: "Today",
-      description: "Exclude the current day.",
       value: ({ now }) => startOfDay(now)
     },
     {
-      label: "Yesterday",
-      description: "Exclude the previous day.",
-      value: ({ now }) => startOfDay(addDays(now, -1))
+      description: "Everything earlier than the last 7 days.",
+      label: "7 days ago",
+      value: ({ now }) => startOfDay(addDays(now, -7))
     },
     {
+      description: "Everything before this month.",
       label: "Start of month",
-      description: "Exclude the first day of this month.",
       value: ({ now }) => startOfMonth(now)
     }
   ],
-  before: [
+  is: [
     {
+      description: "Use the current day.",
       label: "Today",
-      description: "Everything earlier than today.",
       value: ({ now }) => startOfDay(now)
     },
     {
-      label: "7 days ago",
-      description: "Everything earlier than the last 7 days.",
-      value: ({ now }) => startOfDay(addDays(now, -7))
+      description: "Use the previous day.",
+      label: "Yesterday",
+      value: ({ now }) => startOfDay(addDays(now, -1))
     },
     {
+      description: "Jump to the first day of this month.",
       label: "Start of month",
-      description: "Everything before this month.",
       value: ({ now }) => startOfMonth(now)
     }
   ],
-  after: [
+  isNot: [
     {
+      description: "Exclude the current day.",
       label: "Today",
-      description: "Everything after today.",
       value: ({ now }) => startOfDay(now)
     },
     {
-      label: "7 days ago",
-      description: "Everything after the last 7 days.",
-      value: ({ now }) => startOfDay(addDays(now, -7))
+      description: "Exclude the previous day.",
+      label: "Yesterday",
+      value: ({ now }) => startOfDay(addDays(now, -1))
     },
     {
-      label: "Start of year",
-      description: "Everything after the first day of this year.",
-      value: ({ now }) => startOfYear(now)
+      description: "Exclude the first day of this month.",
+      label: "Start of month",
+      value: ({ now }) => startOfMonth(now)
     }
   ]
 };
 const DEFAULT_RANGE_PRESETS = [
   {
-    label: "Today",
     description: "Only the current day.",
+    label: "Today",
     value: ({ now }) => ({
       from: startOfDay(now),
       to: endOfDay(now)
     })
   },
   {
-    label: "Last 7 days",
     description: "The previous 7 calendar days.",
+    label: "Last 7 days",
     value: ({ now }) => ({
       from: startOfDay(addDays(now, -6)),
       to: endOfDay(now)
     })
   },
   {
-    label: "Last 30 days",
     description: "The previous 30 calendar days.",
+    label: "Last 30 days",
     value: ({ now }) => ({
       from: startOfDay(addDays(now, -29)),
       to: endOfDay(now)
     })
   },
   {
-    label: "This month",
     description: "From the first day of this month until today.",
+    label: "This month",
     value: ({ now }) => ({
       from: startOfMonth(now),
       to: endOfDay(now)
     })
   },
   {
-    label: "Last month",
     description: "The full previous month.",
+    label: "Last month",
     value: ({ now }) => {
       const previousMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
       return {
@@ -223,8 +250,8 @@ const DEFAULT_RANGE_PRESETS = [
     }
   },
   {
-    label: "Year to date",
     description: "From the first day of the year until today.",
+    label: "Year to date",
     value: ({ now }) => ({
       from: startOfYear(now),
       to: endOfDay(now)

package/dist/runtime/table/utils/filters/editor-size.d.ts

@@ -1,11 +1,62 @@
 import type { DataListControlSize } from '../../types/index.js';
 export declare function resolveFilterEditorSizeClasses(size: DataListControlSize | undefined): {
     editor: string;
+    empty: string;
+    footer: string;
+    option: string;
+    optionIcon: string;
+    optionLabel: string;
+    scrollArea: string;
     searchHeader: string;
+    skeletonCount: string;
+    skeletonLine: string;
+    wideEditor: string;
+} | {
+    editor: string;
+    empty: string;
+    footer: string;
+    option: string;
+    optionIcon: string;
+    optionLabel: string;
     scrollArea: string;
+    searchHeader: string;
+    skeletonCount: string;
+    skeletonLine: string;
+    wideEditor: string;
+} | {
+    editor: string;
+    empty: string;
+    footer: string;
     option: string;
     optionIcon: string;
     optionLabel: string;
+    scrollArea: string;
+    searchHeader: string;
+    skeletonCount: string;
+    skeletonLine: string;
+    wideEditor: string;
+} | {
+    editor: string;
+    empty: string;
     footer: string;
+    option: string;
+    optionIcon: string;
+    optionLabel: string;
+    scrollArea: string;
+    searchHeader: string;
+    skeletonCount: string;
+    skeletonLine: string;
+    wideEditor: string;
+} | {
+    editor: string;
     empty: string;
+    footer: string;
+    option: string;
+    optionIcon: string;
+    optionLabel: string;
+    scrollArea: string;
+    searchHeader: string;
+    skeletonCount: string;
+    skeletonLine: string;
+    wideEditor: string;
 };

package/dist/runtime/table/utils/filters/editor-size.js

@@ -1,43 +1,68 @@
 const filterEditorSizeClasses = {
-  xs: {
-    editor: "w-[min(13rem,calc(100vw-1rem))] min-w-44 max-w-52",
-    searchHeader: "p-1",
-    scrollArea: "p-1",
-    option: "gap-1.5 px-1.5 py-1 text-xs",
-    optionIcon: "size-3.5",
-    optionLabel: "text-xs",
-    footer: "p-1",
-    empty: "px-2 py-4 text-xs"
+  lg: {
+    editor: "w-[min(17rem,calc(100vw-1rem))] min-w-52 max-w-68",
+    empty: "px-3 py-8 text-sm",
+    footer: "p-2",
+    option: "gap-3 px-3 py-2 text-sm",
+    optionIcon: "size-4",
+    optionLabel: "text-sm",
+    scrollArea: "p-2",
+    searchHeader: "p-2",
+    skeletonCount: "h-3.5 w-6",
+    skeletonLine: "h-3.5",
+    wideEditor: "w-[min(42rem,calc(100vw-1rem))] min-w-[min(21rem,calc(100vw-1rem))] max-w-[calc(100vw-1rem)]"
   },
-  sm: {
+  md: {
     editor: "w-[min(15rem,calc(100vw-1rem))] min-w-48 max-w-60",
+    empty: "px-2.5 py-6 text-[13px]",
+    footer: "p-1.5",
+    option: "gap-2.5 px-2.5 py-1.5 text-[13px]",
+    optionIcon: "size-3.5",
+    optionLabel: "text-[13px]",
+    scrollArea: "p-1.5",
     searchHeader: "p-1.5",
-    scrollArea: "p-1",
-    option: "gap-2 px-2 py-1.5 text-xs",
+    skeletonCount: "h-3 w-5",
+    skeletonLine: "h-3",
+    wideEditor: "w-[min(38rem,calc(100vw-1rem))] min-w-[min(20rem,calc(100vw-1rem))] max-w-[calc(100vw-1rem)]"
+  },
+  sm: {
+    editor: "w-[min(14rem,calc(100vw-1rem))] min-w-44 max-w-56",
+    empty: "px-2.5 py-5 text-xs",
+    footer: "p-1.5",
+    option: "gap-2 px-2 py-1 text-xs",
     optionIcon: "size-3.5",
     optionLabel: "text-xs",
-    footer: "p-1.5",
-    empty: "px-2.5 py-5 text-xs"
+    scrollArea: "p-1",
+    searchHeader: "p-1.5",
+    skeletonCount: "h-3 w-5",
+    skeletonLine: "h-3",
+    wideEditor: "w-[min(34rem,calc(100vw-1rem))] min-w-[min(19rem,calc(100vw-1rem))] max-w-[calc(100vw-1rem)]"
   },
-  md: {
-    editor: "w-[min(17rem,calc(100vw-1rem))] min-w-52 max-w-68",
-    searchHeader: "p-2",
-    scrollArea: "p-2",
-    option: "gap-3 px-3 py-2 text-sm",
-    optionIcon: "size-4",
-    optionLabel: "text-sm",
-    footer: "p-2",
-    empty: "px-3 py-8 text-sm"
+  xl: {
+    editor: "w-[min(21rem,calc(100vw-1rem))] min-w-60 max-w-84",
+    empty: "px-4 py-10 text-base",
+    footer: "p-3",
+    option: "gap-3.5 px-4 py-3 text-base",
+    optionIcon: "size-5",
+    optionLabel: "text-base",
+    scrollArea: "p-3",
+    searchHeader: "p-3",
+    skeletonCount: "h-4 w-7",
+    skeletonLine: "h-4",
+    wideEditor: "w-[min(46rem,calc(100vw-1rem))] min-w-[min(22rem,calc(100vw-1rem))] max-w-[calc(100vw-1rem)]"
   },
-  lg: {
-    editor: "w-[min(19rem,calc(100vw-1rem))] min-w-56 max-w-76",
-    searchHeader: "p-2.5",
-    scrollArea: "p-2.5",
-    option: "gap-3 px-3.5 py-2.5 text-sm",
-    optionIcon: "size-4.5",
-    optionLabel: "text-sm",
-    footer: "p-2.5",
-    empty: "px-3.5 py-9 text-sm"
+  xs: {
+    editor: "w-[min(13rem,calc(100vw-1rem))] min-w-44 max-w-52",
+    empty: "px-2 py-4 text-xs",
+    footer: "p-1",
+    option: "gap-1.5 px-1.5 py-1 text-xs",
+    optionIcon: "size-3.5",
+    optionLabel: "text-xs",
+    scrollArea: "p-1",
+    searchHeader: "p-1",
+    skeletonCount: "h-3 w-5",
+    skeletonLine: "h-3",
+    wideEditor: "w-[min(30rem,calc(100vw-1rem))] min-w-[min(18rem,calc(100vw-1rem))] max-w-[calc(100vw-1rem)]"
   }
 };
 export function resolveFilterEditorSizeClasses(size) {

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

@@ -2,19 +2,19 @@ import type { TableFilterOptionEntry, TableResolvedFilterOptionEntry, TableUiFil
 export declare function resolveFilterOptionEntries(options: {
     definition: TableUiFilterDefinition;
     rows: unknown[];
-    options?: ReadonlyArray<TableFilterOptionEntry>;
+    options?: readonly TableFilterOptionEntry[];
     selectedValues?: unknown[];
     deriveCounts?: boolean;
-    facetCounts?: Array<{
+    facetCounts?: {
         value: string | number | boolean;
         count: number;
-    }>;
+    }[];
     missingCountFallback?: number;
 }): TableResolvedFilterOptionEntry<import("../../types/index.js").TableFilterPrimitiveValue>[] | {
+    children: never[];
+    count: number | undefined;
     id: string;
     label: string;
-    value: boolean;
-    count: number | undefined;
     selected: boolean;
-    children: never[];
+    value: boolean;
 }[];

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

@@ -1,13 +1,20 @@
-import { getFilterLabelText, getFilterPathValues, isFilterValueSelected } from "./common.js";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNumber, isNullish } from "../../../shared/utils/predicate.js";
+import {
+  getFilterLabelText,
+  getFilterPathValues,
+  getFilterTextValue,
+  isFilterValueSelected
+} from "./common.js";
 export function resolveFilterOptionEntries(options) {
   if (options.definition.kind === "boolean") {
     return createBooleanEntries({
       definition: options.definition,
-      rows: options.rows,
-      selectedValues: options.selectedValues ?? [],
       deriveCounts: options.deriveCounts ?? true,
       facetCounts: options.facetCounts ?? [],
-      missingCountFallback: options.missingCountFallback
+      missingCountFallback: options.missingCountFallback,
+      rows: options.rows,
+      selectedValues: options.selectedValues ?? []
     });
   }
   if (options.definition.kind !== "option") {
@@ -19,12 +26,12 @@ export function resolveFilterOptionEntries(options) {
   );
   return resolveOptionEntryTree({
     entries: sourceOptions,
-    selectedValues: options.selectedValues ?? [],
-    getCount: (value) => countByValue.get(String(value)) ?? (options.deriveCounts === false || value == null ? options.missingCountFallback : countOptionMatches({
-      rows: options.rows,
+    getCount: (value) => countByValue.get(String(value)) ?? (options.deriveCounts === false || isNullish(value) ? options.missingCountFallback : countOptionMatches({
+      candidate: value,
       key: options.definition.key,
-      candidate: value
-    }))
+      rows: options.rows
+    })),
+    selectedValues: options.selectedValues ?? []
   });
 }
 function createBooleanEntries(options) {
@@ -32,81 +39,92 @@ function createBooleanEntries(options) {
   const falseCount = options.facetCounts.find((entry) => entry.value === false)?.count;
   return [
     {
-      id: "0:true",
-      label: "Yes",
-      value: true,
+      children: [],
       count: trueCount ?? (options.deriveCounts ? countOptionMatches({
-        rows: options.rows,
+        candidate: true,
         key: options.definition.key,
-        candidate: true
+        rows: options.rows
       }) : options.missingCountFallback),
+      id: "0:true",
+      label: booleanLabel(options.definition, true),
       selected: isFilterValueSelected({
-        values: options.selectedValues,
-        candidate: true
+        candidate: true,
+        values: options.selectedValues
       }),
-      children: []
+      value: true
     },
     {
-      id: "1:false",
-      label: "No",
-      value: false,
+      children: [],
       count: falseCount ?? (options.deriveCounts ? countOptionMatches({
-        rows: options.rows,
+        candidate: false,
         key: options.definition.key,
-        candidate: false
+        rows: options.rows
       }) : options.missingCountFallback),
+      id: "1:false",
+      label: booleanLabel(options.definition, false),
       selected: isFilterValueSelected({
-        values: options.selectedValues,
-        candidate: false
+        candidate: false,
+        values: options.selectedValues
       }),
-      children: []
+      value: false
     }
   ];
 }
 function resolveOptionEntryTree(options) {
   return options.entries.map((entry, index) => {
-    const idPart = entry.value == null ? `group-${index}` : `${index}:${String(entry.value)}`;
+    const idPart = isNullish(entry.value) ? `group-${index}` : `${index}:${String(entry.value)}`;
     const id = options.parentId ? `${options.parentId}/${idPart}` : idPart;
     const children = resolveOptionEntryTree({
       entries: entry.children ?? [],
-      selectedValues: options.selectedValues,
       getCount: options.getCount,
-      parentId: id
+      parentId: id,
+      selectedValues: options.selectedValues
     });
     const derivedCount = options.getCount(entry.value);
-    const selected = entry.value == null ? false : isFilterValueSelected({
-      values: options.selectedValues,
-      candidate: entry.value
+    const selected = isNullish(entry.value) ? false : isFilterValueSelected({
+      candidate: entry.value,
+      values: options.selectedValues
     });
     return {
+      children,
+      color: entry.color,
+      count: entry.count ?? sumChildCounts(children) ?? derivedCount,
+      icon: entry.icon,
       id,
       label: getFilterLabelText({
         label: entry.label
       }),
-      value: entry.value,
-      icon: entry.icon,
-      count: entry.count ?? sumChildCounts(children) ?? derivedCount,
       selected,
-      children
+      value: entry.value
     };
   });
 }
 function sumChildCounts(entries) {
-  const counts = entries.map((entry) => entry.count).filter((count) => typeof count === "number");
-  if (!counts.length) return void 0;
+  const counts = entries.map((entry) => entry.count).filter(isNumber);
+  if (!counts.length) {
+    return;
+  }
   return counts.reduce((total, count) => total + count, 0);
 }
 function countOptionMatches(options) {
   return options.rows.reduce((count, row) => {
     const values = getFilterPathValues({
-      source: row,
-      key: options.key
+      key: options.key,
+      source: row
     });
     return count + (values.some(
       (value) => isFilterValueSelected({
-        values: [value],
-        candidate: options.candidate
+        candidate: options.candidate,
+        values: [value]
       })
     ) ? 1 : 0);
   }, 0);
 }
+function booleanLabel(definition, value) {
+  const { t } = useUiToolsLocale();
+  const custom = value ? definition.editor?.labels?.true : definition.editor?.labels?.false;
+  return getFilterTextValue({
+    fallback: t(value ? "table.filters.booleans.true" : "table.filters.booleans.false"),
+    value: custom
+  });
+}

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

@@ -1,3 +1,3 @@
 import type { TableFilterDisplayLocation, TableFilterDisplayLocationValue, TableUiFilterDefinition } from '../../types/index.js';
-export declare function resolveFilterDisplayLocation(value: TableFilterDisplayLocationValue | undefined): TableFilterDisplayLocation;
+export declare function resolveFilterDisplayLocation(value?: TableFilterDisplayLocationValue): TableFilterDisplayLocation;
 export declare function resolveFilterDisplayOrder(definition: TableUiFilterDefinition): number;