nuxt-ui-tools 1.18.0 → 1.20.0

package/dist/runtime/form/utils/options.js

@@ -3,7 +3,32 @@ import { isRecord } from "./path.js";
 import { isBoolean, isFunction, isNumber, isString, isUndefined } from "./predicate.js";
 import { resolveFormText } from "./text.js";
 const DEFAULT_GROUP_KEY = "group";
+const CHIP_COLORS = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+];
+export function resolveOptionLeading(option) {
+  if (option.icon) return "icon";
+  if (option.avatar) return "avatar";
+  if (option.chip) return "chip";
+  return void 0;
+}
+const DESCRIPTION_INDENT = {
+  avatar: "ps-8",
+  chip: "ps-6",
+  icon: "ps-6"
+};
+export function resolveOptionDescriptionIndent(option) {
+  const leading = resolveOptionLeading(option);
+  return leading ? DESCRIPTION_INDENT[leading] : void 0;
+}
 export function normalizeOptionItem(option, keys = {}) {
+  const item = isFormOptionItem(option) ? option : void 0;
   if (isRecord(option)) {
     const rawValue = readOptionProperty(option, keys.value ?? "value");
     const fallbackValue = isUndefined(rawValue) ? option.key : rawValue;
@@ -14,12 +39,17 @@ export function normalizeOptionItem(option, keys = {}) {
     const lazy = option.isLeaf === false || option.hasChildren === true;
     const value = normalizeOptionValue(fallbackValue);
     const rawIcon = readOptionProperty(option, "icon");
+    const rawSuffix = readOptionProperty(option, "suffix");
     const normalized = {
+      avatar: normalizeOptionAvatar(readOptionProperty(option, "avatar")),
+      chip: normalizeOptionChip(readOptionProperty(option, "chip")),
       description: isFormText(rawDescription) ? resolveFormText(rawDescription) : void 0,
       disabled: option.disabled === true,
       group: isFormText(rawGroup) ? resolveFormText(rawGroup) : void 0,
       icon: isString(rawIcon) ? rawIcon : void 0,
+      item,
       label: resolveFormText(readOptionProperty(option, keys.label ?? "label")) ?? String(value),
+      suffix: isFormText(rawSuffix) ? resolveFormText(rawSuffix) : void 0,
       value
     };
     if (children) {
@@ -33,10 +63,27 @@ export function normalizeOptionItem(option, keys = {}) {
     return normalized;
   }
   return {
+    item,
     label: String(option),
     value: normalizeOptionValue(option)
   };
 }
+function isFormOptionItem(value) {
+  return isOptionValue(value) || isRecord(value);
+}
+function normalizeOptionAvatar(raw) {
+  if (!isRecord(raw)) return void 0;
+  const { alt, src, text } = raw;
+  return {
+    alt: isString(alt) ? alt : void 0,
+    src: isString(src) ? src : void 0,
+    text: isString(text) ? text : void 0
+  };
+}
+function normalizeOptionChip(raw) {
+  if (!isRecord(raw)) return void 0;
+  return { color: CHIP_COLORS.find((color) => color === raw.color) };
+}
 export function normalizeOptionItems(options, keys = {}) {
   return (options ?? []).map((option) => normalizeOptionItem(option, keys));
 }
@@ -51,6 +98,17 @@ export function resolveOptionGroupKey(field) {
   if (isString(mapped) && mapped) return mapped;
   return Array.isArray(readOptionSource(field)) ? DEFAULT_GROUP_KEY : void 0;
 }
+export function groupOptions(items) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = item.group?.trim() ?? "";
+    const members = groups.get(key);
+    if (members) members.push(item);
+    else groups.set(key, [item]);
+  }
+  if (groups.size === 0) return [{ items: [], key: "" }];
+  return [...groups].map(([key, members]) => ({ heading: key || void 0, items: members, key }));
+}
 export const LOAD_MORE_OPTION_VALUE = "__nut:load-more__";
 export function isLoadMoreOption(item) {
   return isRecord(item) && item.value === LOAD_MORE_OPTION_VALUE;
@@ -61,6 +119,19 @@ export function appendLoadMoreOption(items, show, label) {
   }
   return [...items, { disabled: true, label, value: LOAD_MORE_OPTION_VALUE }];
 }
+function menuHeading(heading) {
+  return { label: heading, type: "label", value: "" };
+}
+export function toMenuItems(options, loadMore) {
+  const groups = groupOptions(options);
+  if (!groups.some((group) => group.heading)) {
+    return [...appendLoadMoreOption(options, loadMore.show, loadMore.label)];
+  }
+  const nested = groups.map(
+    (group) => group.heading ? [menuHeading(group.heading), ...group.items] : group.items
+  );
+  return loadMore.show ? [...nested, [...appendLoadMoreOption([], true, loadMore.label)]] : nested;
+}
 export function formOptionKey(value) {
   const type = isString(value) ? "string" : isNumber(value) ? "number" : isBoolean(value) ? "boolean" : "unknown";
   return `${type}:${String(value)}`;

package/dist/runtime/form/utils/page-surface.d.ts

@@ -15,6 +15,11 @@ export interface FormPageSurfaceClasses {
     /** Placeholder shown while the schema context loads. */
     sectionSkeleton: string;
 }
+/**
+ * The centered column of a page without a navigation. The body and the row of the header share
+ * it, so both start and end on the same edges, padding included.
+ */
+export declare const FORM_PAGE_COLUMN = "mx-auto w-full max-w-[816px]";
 export declare const DEFAULT_FORM_PAGE_SURFACE: FormPageSurface;
 /** The surface a page draws its sections with, `card` unless the config names a known one. */
 export declare function resolveFormPageSurface(value: FormValue): FormPageSurface;

package/dist/runtime/form/utils/page-surface.js

@@ -1,4 +1,5 @@
 import { isString } from "./predicate.js";
+export const FORM_PAGE_COLUMN = "mx-auto w-full max-w-[816px]";
 export const DEFAULT_FORM_PAGE_SURFACE = "card";
 const FORM_PAGE_SURFACES = {
   card: {

package/dist/runtime/form/utils/page.js

@@ -69,6 +69,7 @@ export function resolveFormPageSectionState(params) {
   return {
     description: resolveFormText(entry.section.description),
     dirty: dirtyPaths.length > 0,
+    icon: entry.section.icon,
     dirtyPaths,
     index: params.index,
     key: entry.section.key,

package/dist/runtime/table/types/remote-options.d.ts

@@ -39,7 +39,10 @@ export interface RemoteTableOptionsConfig<TRow extends GenericObject, TOption ex
      * values the loaded pages do not contain. Defaults to `'id'`.
      */
     valueKey?: TableKnownFieldPath<TRow> | 'id';
-    /** Filters applied to every request, e.g. active accounts only. */
+    /**
+     * Filters applied to every page request, e.g. active accounts only. The lookup of selected
+     * values ignores them, so a value the filters now exclude still shows its label.
+     */
     filters?: readonly TableResolvedFilterGroup<TableKnownFieldPath<TRow> | string>[];
     /** Page type and size. Must match what the endpoint pages by. Defaults to cursor pages of 25. */
     pagination?: RemoteOptionsPagination;

package/dist/runtime/table/utils/remote-table-options.js

@@ -8,7 +8,7 @@ export function remoteTableOptions(query, config) {
   function request(params) {
     const { page } = params;
     return {
-      filters: [...config.filters ?? [], ...params.filters ?? []],
+      filters: params.filters ?? [...config.filters ?? []],
       pagination: pagination.type === "cursor" ? { count: "none", cursor: page.cursor, mode: "cursor", pageSize: page.size } : { count: "exact", mode: "offset", pageIndex: page.index - 1, pageSize: page.size },
       search: { fields: [...fields], value: params.search },
       sorting: params.filters ? [] : [...sorting]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.18.0",
+  "version": "1.20.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",