@sukramj/fabric-ui 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sukramj/fabric-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "The web interface of go-fabric nodes: Svelte 5 pages, UI kit, design tokens with a Home Assistant theme bridge, and the generated API client.",
   "license": "Apache-2.0",
   "author": "SukramJ",

package/src/lib/api/schema.gen.ts

@@ -681,7 +681,7 @@ export interface components {
             label: string;
             /** @description Offer a value filter built from the listed values. */
             filter: boolean;
-            /** @description Default false. The field is a comma-separated list: shown as chips, filtered by membership, the filter's options built from the individual values. */
+            /** @description Default false. The field is list-valued: its values are the item's lists entry for the key (or, deprecated until v0.2.0, the comma split of its fields entry when lists has no such key); shown as chips, filtered by membership, the filter's options built from the individual values. */
             multi?: boolean;
         };
         FilterOption: {
@@ -692,7 +692,7 @@ export interface components {
             field: string;
             label: string;
             options: components["schemas"]["FilterOption"][];
-            /** @description Default false. Match by membership in the field's comma-separated list (values trimmed; an empty value never matches) instead of equality. */
+            /** @description Default false. Match by membership in the item's list for the field (its lists entry, or, deprecated until v0.2.0, the comma split of its fields entry, values trimmed; an empty value never matches) instead of equality. */
             multi?: boolean;
         };
         ExposureSchema: {
@@ -715,6 +715,10 @@ export interface components {
             fields: {
                 [key: string]: string;
             };
+            /** @description Optional. The values of list-valued (multi) fields, by field key: one entry per value, no separator semantics, so a value may contain a comma. Wins over the comma-separated fields entry of the same key. */
+            lists?: {
+                [key: string]: string[];
+            };
             verdict: components["schemas"]["Verdict"];
             enabled: boolean;
             /** @description Where the verdict comes from */

package/src/lib/pages/node/Selection.svelte

@@ -27,7 +27,7 @@
   import LoadingState from "../../kit/LoadingState.svelte";
   import Select from "../../kit/Select.svelte";
   import HostWarnings from "./HostWarnings.svelte";
-  import { distinctValues, fieldMatches, listValues } from "./fields";
+  import { distinctValues, fieldMatches, itemValues } from "./fields";
 
   const { t, toast, node } = useFabricUI();
 
@@ -64,7 +64,7 @@
     const out: ValueFilter[] = schema.filters.map((f) => ({ field: f.field, label: f.label, multi: !!f.multi, options: f.options }));
     for (const col of schema.columns) {
       if (!col.filter || out.some((f) => f.field === col.key)) continue;
-      const values = distinctValues(node.items.map((i) => i.fields[col.key]), !!col.multi);
+      const values = distinctValues(node.items, col.key, !!col.multi);
       out.push({ field: col.key, label: col.label, multi: !!col.multi, options: values.map((v) => ({ value: v, label: v })) });
     }
     return out;
@@ -83,11 +83,11 @@
     const match = makeTextMatcher(search);
     return node.items.filter((item) => {
       for (const [field, value] of Object.entries(filterValues)) {
-        if (value !== ALL && !fieldMatches(item.fields[field], value, multiField.has(field))) return false;
+        if (value !== ALL && !fieldMatches(item, field, value, multiField.has(field))) return false;
       }
       if (!search.trim()) return true;
       const it = current(item);
-      return [it.name, it.group, it.verdict.device_type_name, ...Object.values(it.fields)].some((v) => v && match(v));
+      return [it.name, it.group, it.verdict.device_type_name, ...Object.values(it.fields), ...Object.values(it.lists ?? {}).flat()].some((v) => v && match(v));
     });
   });
 
@@ -184,7 +184,12 @@
     { key: "select", label: t("node.selection.col_select") },
     { key: "state", label: t("node.selection.col_state"), align: "center", get: (i) => stateInfo(i).label },
     { key: "name", label: t("node.selection.col_name"), sortable: true, title: true, get: (i) => current(i).name },
-    ...(schema?.columns ?? []).map((c) => ({ key: "field:" + c.key, label: c.label, sortable: true, get: (i: Item) => i.fields[c.key] ?? "" })),
+    ...(schema?.columns ?? []).map((c) => ({
+      key: "field:" + c.key,
+      label: c.label,
+      sortable: true,
+      get: (i: Item) => (c.multi ? itemValues(i, c.key).join(", ") : (i.fields[c.key] ?? "")),
+    })),
     { key: "device_type", label: t("node.selection.col_device_type"), sortable: true, get: (i) => i.verdict.device_type_name || "—" },
   ]);
 </script>
@@ -228,7 +233,7 @@
   {:else if col.key === "device_type"}
     <span class="text-[var(--ha-secondary-text-color)]">{item.verdict.device_type_name || "—"}</span>
   {:else if multiColumn.has(col.key)}
-    {@const values = listValues(item.fields[col.key.slice("field:".length)])}
+    {@const values = itemValues(item, col.key.slice("field:".length))}
     {#if values.length === 0}
       <span class="text-[var(--ha-secondary-text-color)]">—</span>
     {:else}

package/src/lib/pages/node/fields.ts

@@ -1,7 +1,20 @@
 // List-valued item fields (Column.multi, Filter.multi): the provider
-// carries several values as one comma-separated string.
+// carries the values in `lists[key]`, one entry per value, so a value may
+// contain a comma. The comma-separated `fields[key]` is the deprecated
+// fallback (until v0.2.0), read only when `lists` has no such key.
 
-/** The values of a comma-separated field, trimmed, without empty ones. */
+/** The part of an item the list helpers read. */
+export type ListSource = {
+  fields: Record<string, string>;
+  lists?: Record<string, string[]>;
+};
+
+/**
+ * The values of a comma-separated field, trimmed, without empty ones.
+ *
+ * @deprecated The comma form is accepted until v0.2.0; read
+ * {@link itemValues}, which prefers `lists`.
+ */
 export function listValues(field: string | undefined): string[] {
   if (!field) return [];
   return field
@@ -11,22 +24,44 @@ export function listValues(field: string | undefined): string[] {
 }
 
 /**
- * Whether an item's field matches a filter value: by equality, or, for a
- * list-valued field, by membership in its list. An empty value never
+ * The values of an item's list-valued field: `lists[key]` when the key is
+ * present there (empty entries dropped, the rest as given), otherwise the
+ * comma split of `fields[key]`.
+ */
+export function itemValues(item: ListSource, key: string): string[] {
+  const list = item.lists?.[key];
+  if (list) return list.filter((v) => v !== "");
+  return listValues(item.fields[key]);
+}
+
+/**
+ * Whether an item matches a filter value on a field: by equality, or, for
+ * a list-valued field, by membership in its list. An empty value never
  * matches a list.
  */
-export function fieldMatches(field: string | undefined, value: string, multi: boolean): boolean {
-  if (!multi) return field === value;
+export function fieldMatches(
+  item: ListSource,
+  key: string,
+  value: string,
+  multi: boolean,
+): boolean {
+  if (!multi) return item.fields[key] === value;
   const v = value.trim();
-  return v !== "" && listValues(field).includes(v);
+  return v !== "" && itemValues(item, key).includes(v);
 }
 
 /** The distinct filter values of a field across items, sorted for display. */
-export function distinctValues(fields: (string | undefined)[], multi: boolean): string[] {
+export function distinctValues(
+  items: ListSource[],
+  key: string,
+  multi: boolean,
+): string[] {
   const values = new Set<string>();
-  for (const f of fields) {
-    if (multi) for (const v of listValues(f)) values.add(v);
-    else if (f) values.add(f);
+  for (const item of items) {
+    if (multi) for (const v of itemValues(item, key)) values.add(v);
+    else if (item.fields[key]) values.add(item.fields[key]);
   }
-  return [...values].sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base", numeric: true }));
+  return [...values].sort((a, b) =>
+    a.localeCompare(b, undefined, { sensitivity: "base", numeric: true }),
+  );
 }