nuxt-ui-tools 0.1.0

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

@@ -0,0 +1,444 @@
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { getFilterLabelText, getFilterTextValue } from "./common.js";
+const DEFAULT_FILTER_TRIGGER_ICONS = {
+  text: "i-lucide-search",
+  option: "i-lucide-filter",
+  boolean: "i-lucide-check",
+  number: "i-lucide-hash",
+  date: "i-lucide-calendar-days"
+};
+export function resolveFilterTriggerIcon(definition) {
+  return definition.display?.icon ?? DEFAULT_FILTER_TRIGGER_ICONS[definition.kind];
+}
+export function resolveTextFilterUi(definition, operator) {
+  const { t } = useUiToolsLocale();
+  const override = operator ? definition.editor?.operators?.[operator] : void 0;
+  return {
+    commitMode: definition.behavior?.commitMode ?? "manual",
+    clearOnOperatorChange: definition.behavior?.clearOnOperatorChange ?? true,
+    reopenOnOperatorChange: definition.behavior?.reopenOnOperatorChange ?? true,
+    actions: resolveActions({ common: definition.actions }),
+    placeholder: getFilterTextValue({
+      value: override?.placeholder ?? definition.editor?.placeholder,
+      fallback: getFilterLabelText({ label: definition.label })
+    }),
+    inputType: definition.editor?.inputType ?? "text",
+    leadingIcon: definition.editor?.leadingIcon ?? "i-lucide-search",
+    autocomplete: definition.editor?.autocomplete ?? "off",
+    input: {
+      autofocus: definition.editor?.input?.autofocus ?? false,
+      highlight: definition.editor?.input?.highlight ?? false,
+      fixed: definition.editor?.input?.fixed ?? false
+    },
+    preview: resolvePreview({
+      base: definition.preview,
+      empty: t("table.filters.preview.empty"),
+      mode: "summary"
+    })
+  };
+}
+export function resolveOptionFilterUi(definition, operator) {
+  const { t } = useUiToolsLocale();
+  const override = operator ? definition.editor?.operators?.[operator] : void 0;
+  const selection = {
+    ...definition.editor?.selection,
+    ...override?.selection
+  };
+  const tree = definition.editor?.presentation === "tree" ? definition.editor.tree : void 0;
+  const row = {
+    ...definition.editor?.row,
+    ...override?.row
+  };
+  const labels = {
+    ...definition.editor?.labels,
+    ...override?.labels
+  };
+  const mode = resolveOptionSelectionMode({
+    configured: selection.mode,
+    operator
+  });
+  return {
+    commitMode: definition.behavior?.commitMode ?? "manual",
+    clearOnOperatorChange: definition.behavior?.clearOnOperatorChange ?? true,
+    reopenOnOperatorChange: definition.behavior?.reopenOnOperatorChange ?? true,
+    actions: resolveActions({
+      common: definition.actions,
+      local: labels
+    }),
+    searchable: definition.editor?.searchable ?? true,
+    closeOnSelect: definition.editor?.closeOnSelect ?? false,
+    presentation: definition.editor?.presentation ?? "list",
+    tree: {
+      selectable: tree?.selectable ?? "all",
+      expandedByDefault: tree?.expandedByDefault ?? false,
+      searchMode: tree?.searchMode ?? "auto",
+      branchSelection: tree?.branchSelection ?? "children"
+    },
+    selection: {
+      mode,
+      allowEmpty: selection.allowEmpty ?? true,
+      max: selection.max
+    },
+    row: {
+      showCounts: row.showCounts ?? true,
+      selectedIcon: row.selectedIcon ?? "i-lucide-check",
+      truncate: row.truncate ?? true,
+      getIcon: row.getIcon
+    },
+    labels: {
+      searchPlaceholder: getFilterTextValue({
+        value: labels.searchPlaceholder,
+        fallback: getFilterLabelText({ label: definition.label })
+      }),
+      empty: getFilterTextValue({
+        value: labels.empty,
+        fallback: t("table.filters.options.empty")
+      })
+    },
+    preview: resolveTagPreview({
+      base: definition.preview,
+      empty: t("table.filters.preview.empty"),
+      mode: "auto",
+      maxTags: 1
+    })
+  };
+}
+export function resolveBooleanFilterUi(definition, operator) {
+  const { t } = useUiToolsLocale();
+  const override = operator ? definition.editor?.operators?.[operator] : void 0;
+  const labels = {
+    ...definition.editor?.labels,
+    ...override?.labels
+  };
+  const icons = {
+    ...definition.editor?.icons,
+    ...override?.icons
+  };
+  const selection = {
+    ...definition.editor?.selection,
+    ...override?.selection
+  };
+  return {
+    commitMode: definition.behavior?.commitMode ?? "manual",
+    clearOnOperatorChange: definition.behavior?.clearOnOperatorChange ?? true,
+    reopenOnOperatorChange: definition.behavior?.reopenOnOperatorChange ?? true,
+    actions: resolveActions({
+      common: definition.actions,
+      local: labels
+    }),
+    labels: {
+      true: getFilterTextValue({
+        value: labels.true,
+        fallback: t("table.filters.booleans.true")
+      }),
+      false: getFilterTextValue({
+        value: labels.false,
+        fallback: t("table.filters.booleans.false")
+      }),
+      empty: getFilterTextValue({
+        value: labels.empty,
+        fallback: t("table.filters.booleans.empty")
+      })
+    },
+    icons: {
+      true: icons.true,
+      false: icons.false
+    },
+    selection: {
+      allowEmpty: selection.allowEmpty ?? true
+    },
+    preview: resolveTagPreview({
+      base: definition.preview,
+      empty: getFilterTextValue({
+        value: labels.empty,
+        fallback: t("table.filters.booleans.empty")
+      }),
+      mode: "summary",
+      maxTags: 1
+    })
+  };
+}
+export function resolveNumberFilterUi(definition, operator) {
+  const { t } = useUiToolsLocale();
+  const scalarOverride = getNumberScalarOperatorOverride(definition.editor, operator);
+  const rangeOverride = getNumberRangeOperatorOverride(definition.editor, operator);
+  const scalar = mergeNumberScalarConfig(definition.editor?.scalar, scalarOverride);
+  const range = mergeNumberRangeConfig(definition.editor?.range, rangeOverride);
+  return {
+    commitMode: definition.behavior?.commitMode ?? "manual",
+    clearOnOperatorChange: definition.behavior?.clearOnOperatorChange ?? true,
+    reopenOnOperatorChange: definition.behavior?.reopenOnOperatorChange ?? true,
+    actions: resolveActions({ common: definition.actions }),
+    min: definition.editor?.min,
+    max: definition.editor?.max,
+    step: definition.editor?.step ?? 1,
+    formatOptions: definition.editor?.formatOptions,
+    preview: resolveNumberPreview({
+      base: definition.preview,
+      empty: t("table.filters.preview.empty"),
+      mode: "summary"
+    }),
+    scalar: {
+      display: scalar.display ?? "input",
+      input: {
+        placeholder: getFilterTextValue({
+          value: scalar.input?.placeholder,
+          fallback: getFilterLabelText({ label: definition.label })
+        }),
+        hideStepper: scalar.input?.hideStepper ?? false,
+        disableWheelChange: scalar.input?.disableWheelChange ?? true
+      },
+      slider: {
+        min: scalar.slider?.min ?? definition.editor?.min,
+        max: scalar.slider?.max ?? definition.editor?.max,
+        step: scalar.slider?.step ?? definition.editor?.step,
+        showTooltip: scalar.slider?.showTooltip ?? true
+      },
+      preview: resolveNumberPreview({
+        base: definition.preview,
+        empty: t("table.filters.preview.empty"),
+        mode: "summary"
+      })
+    },
+    range: {
+      display: range.display ?? "inputs",
+      minGap: range.minGap,
+      inputs: {
+        fromPlaceholder: getFilterTextValue({
+          value: range.inputs?.fromPlaceholder,
+          fallback: "Min"
+        }),
+        toPlaceholder: getFilterTextValue({
+          value: range.inputs?.toPlaceholder,
+          fallback: "Max"
+        }),
+        hideStepper: range.inputs?.hideStepper ?? false,
+        disableWheelChange: range.inputs?.disableWheelChange ?? true
+      },
+      slider: {
+        min: range.slider?.min ?? definition.editor?.min,
+        max: range.slider?.max ?? definition.editor?.max,
+        step: range.slider?.step ?? definition.editor?.step,
+        showTooltip: range.slider?.showTooltip ?? true
+      },
+      preview: resolveNumberPreview({
+        base: definition.preview,
+        empty: t("table.filters.preview.empty"),
+        mode: "summary"
+      })
+    }
+  };
+}
+export function resolveDateFilterUi(definition, operator) {
+  const { t } = useUiToolsLocale();
+  const scalarOverride = getDateScalarOperatorOverride(definition.editor, operator);
+  const rangeOverride = getDateRangeOperatorOverride(definition.editor, operator);
+  const scalar = mergeDateScalarConfig(definition.editor?.scalar, scalarOverride);
+  const range = mergeDateRangeConfig(definition.editor?.range, rangeOverride);
+  return {
+    commitMode: definition.behavior?.commitMode ?? "manual",
+    clearOnOperatorChange: definition.behavior?.clearOnOperatorChange ?? true,
+    reopenOnOperatorChange: definition.behavior?.reopenOnOperatorChange ?? true,
+    actions: resolveActions({ common: definition.actions }),
+    preview: resolveDatePreview({
+      base: definition.preview,
+      empty: t("table.filters.preview.empty"),
+      mode: "summary"
+    }),
+    scalar: {
+      display: scalar.display ?? "calendar",
+      presets: scalar.presets,
+      input: {
+        placeholder: getFilterTextValue({
+          value: scalar.input?.placeholder,
+          fallback: getFilterLabelText({ label: definition.label })
+        }),
+        granularity: scalar.input?.granularity ?? "day",
+        hideTimeZone: scalar.input?.hideTimeZone ?? true,
+        hourCycle: scalar.input?.hourCycle,
+        fixed: scalar.input?.fixed ?? true,
+        highlight: scalar.input?.highlight ?? false
+      },
+      calendar: {
+        months: scalar.calendar?.months,
+        pagedNavigation: scalar.calendar?.pagedNavigation,
+        fixedWeeks: scalar.calendar?.fixedWeeks ?? true,
+        min: scalar.calendar?.min,
+        max: scalar.calendar?.max,
+        maxRangeDays: scalar.calendar?.maxRangeDays
+      },
+      preview: resolveDatePreview({
+        base: definition.preview,
+        empty: t("table.filters.preview.empty"),
+        mode: "summary"
+      })
+    },
+    range: {
+      display: range.display ?? "inputs-calendar",
+      presets: range.presets,
+      presetsPlacement: range.presetsPlacement ?? "side",
+      input: {
+        fromPlaceholder: getFilterTextValue({
+          value: range.input?.fromPlaceholder,
+          fallback: "Start date"
+        }),
+        toPlaceholder: getFilterTextValue({
+          value: range.input?.toPlaceholder,
+          fallback: "End date"
+        }),
+        granularity: range.input?.granularity ?? "day",
+        hideTimeZone: range.input?.hideTimeZone ?? true,
+        hourCycle: range.input?.hourCycle,
+        fixed: range.input?.fixed ?? true,
+        highlight: range.input?.highlight ?? false
+      },
+      calendar: {
+        months: range.calendar?.months,
+        pagedNavigation: range.calendar?.pagedNavigation,
+        fixedWeeks: range.calendar?.fixedWeeks ?? true,
+        min: range.calendar?.min,
+        max: range.calendar?.max,
+        maxRangeDays: range.calendar?.maxRangeDays
+      },
+      preview: resolveDatePreview({
+        base: definition.preview,
+        empty: t("table.filters.preview.empty"),
+        mode: "summary"
+      })
+    }
+  };
+}
+function resolveActions(options) {
+  const { t } = useUiToolsLocale();
+  return {
+    clear: getFilterTextValue({
+      value: options.local?.clear ?? options.common?.clear,
+      fallback: t("table.filters.panel.clearAll")
+    }),
+    apply: getFilterTextValue({
+      value: options.local?.apply ?? options.common?.apply,
+      fallback: t("table.filters.panel.apply")
+    })
+  };
+}
+function resolvePreview(options) {
+  return {
+    mode: options.base?.mode ?? options.mode,
+    label: getFilterTextValue({
+      value: options.base?.label
+    }),
+    empty: getFilterTextValue({
+      value: options.base?.empty,
+      fallback: options.empty
+    })
+  };
+}
+function resolveTagPreview(options) {
+  return {
+    mode: options.base?.mode ?? options.mode,
+    label: getFilterTextValue({
+      value: options.base?.label
+    }),
+    empty: getFilterTextValue({
+      value: options.base?.empty,
+      fallback: options.empty
+    }),
+    maxTags: options.base?.maxTags ?? options.maxTags
+  };
+}
+function resolveNumberPreview(options) {
+  const base = resolvePreview(options);
+  return {
+    ...base,
+    formatter: options.base?.formatter,
+    rangeFormatter: options.base?.rangeFormatter
+  };
+}
+function resolveDatePreview(options) {
+  const base = resolvePreview(options);
+  return {
+    ...base,
+    formatter: options.base?.formatter,
+    rangeFormatter: options.base?.rangeFormatter
+  };
+}
+function resolveOptionSelectionMode(options) {
+  if (options.configured === "single" || options.configured === "multiple")
+    return options.configured;
+  if (options.operator === "isAnyOf") return "multiple";
+  return "single";
+}
+function mergeNumberScalarConfig(base, override) {
+  return {
+    ...base,
+    ...override,
+    input: {
+      ...base?.input,
+      ...override?.input
+    },
+    slider: {
+      ...base?.slider,
+      ...override?.slider
+    }
+  };
+}
+function mergeNumberRangeConfig(base, override) {
+  return {
+    ...base,
+    ...override,
+    inputs: {
+      ...base?.inputs,
+      ...override?.inputs
+    },
+    slider: {
+      ...base?.slider,
+      ...override?.slider
+    }
+  };
+}
+function mergeDateScalarConfig(base, override) {
+  return {
+    ...base,
+    ...override,
+    input: {
+      ...base?.input,
+      ...override?.input
+    },
+    calendar: {
+      ...base?.calendar,
+      ...override?.calendar
+    }
+  };
+}
+function mergeDateRangeConfig(base, override) {
+  return {
+    ...base,
+    ...override,
+    input: {
+      ...base?.input,
+      ...override?.input
+    },
+    calendar: {
+      ...base?.calendar,
+      ...override?.calendar
+    }
+  };
+}
+function getNumberScalarOperatorOverride(editor, operator) {
+  if (operator === "is" || operator === "isNot" || operator === "gt" || operator === "gte" || operator === "lt" || operator === "lte")
+    return editor?.operators?.[operator]?.scalar;
+  return void 0;
+}
+function getNumberRangeOperatorOverride(editor, operator) {
+  if (operator === "between") return editor?.operators?.between?.range;
+  return void 0;
+}
+function getDateScalarOperatorOverride(editor, operator) {
+  if (operator === "is" || operator === "isNot" || operator === "before" || operator === "after")
+    return editor?.operators?.[operator]?.scalar;
+  return void 0;
+}
+function getDateRangeOperatorOverride(editor, operator) {
+  if (operator === "between") return editor?.operators?.between?.range;
+  return void 0;
+}

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

@@ -0,0 +1,10 @@
+export * from './actions.js';
+export * from './client-query.js';
+export * from './columns/index.js';
+export * from './data-list-ui.js';
+export * from './filters/index.js';
+export * from './pagination.js';
+export * from './query-state.js';
+export * from './resolved-filters.js';
+export * from './rows.js';
+export * from './schema.js';

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

@@ -0,0 +1,10 @@
+export * from "./actions.js";
+export * from "./client-query.js";
+export * from "./columns/index.js";
+export * from "./data-list-ui.js";
+export * from "./filters/index.js";
+export * from "./pagination.js";
+export * from "./query-state.js";
+export * from "./resolved-filters.js";
+export * from "./rows.js";
+export * from "./schema.js";

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

@@ -0,0 +1,6 @@
+import type { TableCursorPageResult, TableExternalState, TableSchemaView } from '../types/index.js';
+export declare function isTableCursorPageResult(value: unknown): value is TableCursorPageResult;
+export declare function flattenTableCursorPages(options: {
+    pages: readonly unknown[];
+    rowKey: TableSchemaView['rowKey'];
+}): TableExternalState;

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

@@ -0,0 +1,20 @@
+import { resolveTableRowId } from "./rows.js";
+export function isTableCursorPageResult(value) {
+  if (!value || typeof value !== "object") return false;
+  if (!("rows" in value) || !("pageInfo" in value)) return false;
+  if (!Array.isArray(value.rows) || !value.pageInfo || typeof value.pageInfo !== "object")
+    return false;
+  if (!("mode" in value.pageInfo)) return false;
+  return value.pageInfo.mode === "cursor";
+}
+export function flattenTableCursorPages(options) {
+  const rows = /* @__PURE__ */ new Map();
+  let rowCount = null;
+  for (const page of options.pages) {
+    if (!isTableCursorPageResult(page)) continue;
+    for (const [index, row] of page.rows.entries())
+      rows.set(resolveTableRowId({ rowKey: options.rowKey, row, index }), row);
+    rowCount = page.pageInfo.rowCount;
+  }
+  return { rows: [...rows.values()], rowCount };
+}

package/dist/runtime/table/utils/query-state.d.ts

@@ -0,0 +1,29 @@
+import type { QueryCodec } from '#ui-tools/query-state';
+import type { TableFilterOperator, TableLayout, TableUiFilterDefinition, TableQueryStateFilterDefinition, TableQueryStateFilterValue, TableSchemaView, TableSortingDirection, TablePaginationState, TablePaginationSchema } from '../types/index.js';
+export declare function getPaginationMode(schema: {
+    pagination?: TablePaginationSchema;
+}): TablePaginationState['mode'];
+export declare function getDefaultPageSize(params: {
+    schema: TableSchemaView;
+    layout: TableLayout;
+}): number;
+export declare function getPageSizeOptions(params: {
+    schema: TableSchemaView;
+    layout: TableLayout;
+}): number[];
+export declare function getDefaultSort(params: {
+    schema: TableSchemaView;
+    layout: TableLayout;
+}): {
+    key: string;
+    dir: TableSortingDirection;
+} | null;
+export declare function getSortKeys(params: {
+    schema: TableSchemaView;
+    layout: TableLayout;
+}): string[];
+export declare function createSortKeyCodec(sortKeys: string[]): QueryCodec<string | undefined>;
+export declare function createTableFilterValueCodec(definition: TableQueryStateFilterDefinition): QueryCodec<TableQueryStateFilterValue | undefined>;
+export declare function resolveFilterDefaultOperator(definition: TableQueryStateFilterDefinition): TableFilterOperator;
+export declare function resolveFilterSupportedOperators(definition: TableQueryStateFilterDefinition): TableFilterOperator[];
+export declare function normalizeFilterDefinition(definition: TableQueryStateFilterDefinition | TableUiFilterDefinition): TableQueryStateFilterDefinition;