jouw-stem__design-system 0.1.0

package/src/components/TreeTable/TreeTable.tokens.theme-high-contrast-solarized-light.json

@@ -0,0 +1,155 @@
+{
+  "treetable": {
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Container border radius"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{border.default}",
+          "type": "color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color"
+      }
+    },
+    "header": {
+      "padding": {
+        "x": {
+          "value": "{inset.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{inset.s}",
+          "type": "dimension"
+        }
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color"
+      },
+      "text": {
+        "value": "{text.default}",
+        "type": "color"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "dimension"
+      },
+      "borderColor": {
+        "value": "{border.default}",
+        "type": "color"
+      }
+    },
+    "row": {
+      "padding": {
+        "x": {
+          "value": "{inset.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{inset.s}",
+          "type": "dimension"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "{surface.canvas}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{intent.secondary.hover}",
+          "type": "color"
+        },
+        "selected": {
+          "value": "{brand.primary}",
+          "type": "color"
+        },
+        "stripe": {
+          "value": "{surface.muted}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "selected": {
+          "value": "{surface.canvas}",
+          "type": "color"
+        }
+      },
+      "borderColor": {
+        "value": "{border.default}",
+        "type": "color"
+      }
+    },
+    "cell": {
+      "padding": {
+        "x": {
+          "value": "{inset.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{inset.s}",
+          "type": "dimension"
+        }
+      }
+    },
+    "toggler": {
+      "size": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color"
+        }
+      },
+      "marginRight": {
+        "value": "{inline.s}",
+        "type": "dimension"
+      }
+    },
+    "indent": {
+      "value": "{inset.l}",
+      "type": "dimension"
+    },
+    "checkbox": {
+      "size": {
+        "value": "18px",
+        "type": "dimension"
+      },
+      "marginRight": {
+        "value": "{inline.s}",
+        "type": "dimension"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{brand.primary}",
+        "type": "color"
+      }
+    }
+  }
+}

package/src/components/TreeTable/TreeTable.tokens.theme-light.json

@@ -0,0 +1,158 @@
+{
+  "treetable": {
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Container border radius"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.300}",
+          "type": "color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color"
+      }
+    },
+    "header": {
+      "padding": {
+        "x": {
+          "value": "{inset.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{inset.s}",
+          "type": "dimension"
+        }
+      },
+      "background": {
+        "value": "{intent.action.default}",
+        "type": "color",
+        "description": "Header bg — navy, ~14:1 vs white canvas (was neutral.50 = 1.04:1, header invisible)"
+      },
+      "text": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Header text — white on navy"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "dimension"
+      },
+      "borderColor": {
+        "value": "{intent.action.default}",
+        "type": "color",
+        "description": "Header border matches fill"
+      }
+    },
+    "row": {
+      "padding": {
+        "x": {
+          "value": "{inset.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{inset.s}",
+          "type": "dimension"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "{surface.canvas}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.50}",
+          "type": "color"
+        },
+        "selected": {
+          "value": "{brand.primary}",
+          "type": "color"
+        },
+        "stripe": {
+          "value": "{surface.muted}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "selected": {
+          "value": "{neutral.0}",
+          "type": "color"
+        }
+      },
+      "borderColor": {
+        "value": "{neutral.200}",
+        "type": "color"
+      }
+    },
+    "cell": {
+      "padding": {
+        "x": {
+          "value": "{inset.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{inset.s}",
+          "type": "dimension"
+        }
+      }
+    },
+    "toggler": {
+      "size": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.700}",
+          "type": "color"
+        }
+      },
+      "marginRight": {
+        "value": "{inline.s}",
+        "type": "dimension"
+      }
+    },
+    "indent": {
+      "value": "{inset.l}",
+      "type": "dimension"
+    },
+    "checkbox": {
+      "size": {
+        "value": "18px",
+        "type": "dimension"
+      },
+      "marginRight": {
+        "value": "{inline.s}",
+        "type": "dimension"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{brand.primary}",
+        "type": "color"
+      }
+    }
+  }
+}

package/src/components/TreeTable/TreeTable.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="treetable" :class="additionalClasses">
+    <table class="treetable__table" role="treegrid">
+      <thead class="treetable__head">
+        <tr class="treetable__row treetable__row--header">
+          <th
+            v-for="col in columns"
+            :key="col.field"
+            class="treetable__cell treetable__cell--header"
+            :style="col.style"
+          >
+            {{ col.header }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="treetable__body">
+        <TreeTableRow
+          v-for="node in filteredNodes"
+          :key="getNodeKey(node)"
+          :node="node"
+          :level="0"
+          :columns="columns"
+          :selection-mode="selectionMode"
+          :selected-keys="selectedKeysSet"
+          :expanded-keys="expandedKeysInternal"
+          :key-field="keyField"
+          :children-field="childrenField"
+          :striped="striped"
+          @select="onNodeSelect"
+          @toggle="onNodeToggle"
+        />
+        <tr v-if="filteredNodes.length === 0">
+          <td :colspan="columns.length" class="treetable__empty">
+            No records found
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style src="./TreeTable.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref, watch, h } from "vue";
+import {
+  toggleExpansion,
+  nextSelection,
+  selectedKeysSet as toSelectedKeysSet,
+} from "./treeTableUtils";
+
+// TreeTableRow subcomponent
+const TreeTableRow = {
+  name: "TreeTableRow",
+  props: {
+    node: Object,
+    level: Number,
+    columns: Array,
+    selectionMode: String,
+    selectedKeys: Set,
+    expandedKeys: Set,
+    keyField: String,
+    childrenField: String,
+    striped: Boolean,
+    rowIndex: Number,
+  },
+  emits: ["select", "toggle"],
+  setup(props, { emit }) {
+    const hasChildren = computed(() => {
+      const children = props.node[props.childrenField];
+      return children && children.length > 0;
+    });
+
+    const isExpanded = computed(() => {
+      return props.expandedKeys.has(props.node[props.keyField]);
+    });
+
+    const isSelected = computed(() => {
+      return props.selectedKeys.has(props.node[props.keyField]);
+    });
+
+    const onToggle = (event) => {
+      event.stopPropagation();
+      emit("toggle", props.node);
+    };
+
+    const onSelect = () => {
+      emit("select", props.node);
+    };
+
+    const onKeydown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onSelect();
+      }
+    };
+
+    return () => {
+      const rows = [];
+
+      // Main row
+      const cells = props.columns.map((col, colIndex) => {
+        const cellContent = [];
+
+        // First column gets toggle and checkbox
+        if (colIndex === 0) {
+          // Indent spacer
+          if (props.level > 0) {
+            cellContent.push(h("span", {
+              class: "treetable__indent",
+              style: { width: `${props.level * 24}px` }
+            }));
+          }
+
+          // Toggle button
+          if (hasChildren.value) {
+            cellContent.push(h("button", {
+              type: "button",
+              class: ["treetable__toggler", isExpanded.value && "treetable__toggler--state-expanded"],
+              onClick: onToggle,
+              "aria-label": isExpanded.value ? "Collapse" : "Expand",
+            }, [
+              h("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none" }, [
+                h("path", {
+                  d: "M6 4L10 8L6 12",
+                  stroke: "currentColor",
+                  "stroke-width": "1.5",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                })
+              ])
+            ]));
+          } else {
+            cellContent.push(h("span", { class: "treetable__toggler-spacer" }));
+          }
+
+          // Checkbox for selection
+          if (props.selectionMode === "checkbox" || props.selectionMode === "multiple") {
+            cellContent.push(h("span", {
+              class: ["treetable__checkbox", isSelected.value && "treetable__checkbox--state-checked"]
+            }, [
+              isSelected.value ? h("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none" }, [
+                h("path", {
+                  d: "M10 3L4.5 8.5L2 6",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                })
+              ]) : null
+            ]));
+          }
+        }
+
+        // Cell content
+        cellContent.push(h("span", { class: "treetable__cell-content" }, props.node[col.field]));
+
+        return h("td", {
+          class: "treetable__cell",
+          style: col.style,
+        }, cellContent);
+      });
+
+      const row = h("tr", {
+        class: [
+          "treetable__row",
+          isSelected.value && "treetable__row--state-selected"
+        ],
+        role: "row",
+        "aria-selected": isSelected.value,
+        "aria-expanded": hasChildren.value ? isExpanded.value : undefined,
+        "aria-level": props.level + 1,
+        tabindex: 0,
+        onClick: onSelect,
+        onKeydown: onKeydown,
+      }, cells);
+
+      rows.push(row);
+
+      // Children rows
+      if (hasChildren.value && isExpanded.value) {
+        const nodeChildren = props.node[props.childrenField];
+        nodeChildren.forEach((child, index) => {
+          rows.push(h(TreeTableRow, {
+            key: child[props.keyField],
+            node: child,
+            level: props.level + 1,
+            columns: props.columns,
+            selectionMode: props.selectionMode,
+            selectedKeys: props.selectedKeys,
+            expandedKeys: props.expandedKeys,
+            keyField: props.keyField,
+            childrenField: props.childrenField,
+            striped: props.striped,
+            rowIndex: index,
+            onSelect: (n) => emit("select", n),
+            onToggle: (n) => emit("toggle", n),
+          }));
+        });
+      }
+
+      return rows;
+    };
+  }
+};
+
+interface Props {
+  modelValue?: string | number | unknown[];
+  nodes?: unknown[];
+  columns?: unknown[];
+  expandedKeys?: unknown[];
+  selectionMode?: string;
+  keyField?: string;
+  childrenField?: string;
+  striped?: boolean;
+  isDisabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  nodes: () => [],
+  columns: () => [],
+  expandedKeys: () => [],
+  selectionMode: null,
+  keyField: "key",
+  childrenField: "children",
+  striped: false,
+  isDisabled: false,
+});
+const emit = defineEmits<{
+  (e: "update:modelValue", ...args: unknown[]): void;
+  (e: "update:expandedKeys", ...args: unknown[]): void;
+  (e: "node-select", ...args: unknown[]): void;
+  (e: "node-expand", ...args: unknown[]): void;
+  (e: "node-collapse", ...args: unknown[]): void;
+}>();
+// Defensive `?? []`: under defineAsyncComponent + matrix SSR the
+// withDefaults factory occasionally hands setup an undefined value
+// (instead of the declared `() => []`), and `new Set(undefined)` works
+// fine but `new Set({})` throws. Fall back to an empty array when the
+// prop arrives as anything non-iterable.
+function toIterableKeys(v: unknown): Iterable<unknown> {
+  if (Array.isArray(v)) return v
+  if (v instanceof Set) return v
+  return []
+}
+const expandedKeysInternal = ref(new Set(toIterableKeys(props.expandedKeys)));
+
+watch(() => props.expandedKeys, (newKeys) => {
+  expandedKeysInternal.value = new Set(toIterableKeys(newKeys));
+}, { deep: true });
+
+const getNodeKey = (node) => node[props.keyField];
+
+const selectedKeysSet = computed(() => toSelectedKeysSet(props.modelValue));
+
+const filteredNodes = computed(() => props.nodes);
+
+const onNodeSelect = (node) => {
+  if (props.isDisabled || !props.selectionMode) return;
+
+  const key = node[props.keyField];
+
+  if (props.selectionMode === "single") {
+    const next = nextSelection(props.modelValue as unknown, key, "single");
+    emit("update:modelValue", next);
+    emit("node-select", { node, key });
+  } else {
+    const newValue = nextSelection(props.modelValue as unknown, key, "multiple");
+    emit("update:modelValue", newValue);
+    emit("node-select", { node, key, selectedKeys: newValue });
+  }
+};
+
+const onNodeToggle = (node) => {
+  const key = node[props.keyField];
+  const wasExpanded = expandedKeysInternal.value.has(key);
+  const newExpanded = toggleExpansion(expandedKeysInternal.value, key);
+
+  if (wasExpanded) {
+    emit("node-collapse", { node, key });
+  } else {
+    emit("node-expand", { node, key });
+  }
+
+  expandedKeysInternal.value = newExpanded;
+  emit("update:expandedKeys", Array.from(newExpanded));
+};
+
+const additionalClasses = computed(() =>
+  [
+    props.isDisabled && "treetable--state-disabled",
+    props.striped && "treetable--shape-striped",
+  ].filter(Boolean).join(" ")
+);
+</script>

package/src/components/TreeTable/treeTableUtils.ts

@@ -0,0 +1,95 @@
+/**
+ * Pure helpers for TreeTable.
+ *
+ * Sibling per component (same rationale as Tree/treeUtils — sharing
+ * across components would create coupling we don't want yet). The
+ * function shapes mirror Tree's, but we keep this duplication explicit:
+ * if TreeTable's selection semantics ever diverge from Tree, this file
+ * is the place to drift.
+ *
+ * No Vue, no DOM — pure data in / data out.
+ */
+
+export type TreeNode = Record<string, unknown>
+
+export interface FieldConfig {
+  keyField: string
+  childrenField: string
+}
+
+const DEFAULT_FIELDS: FieldConfig = {
+  keyField: 'key',
+  childrenField: 'children',
+}
+
+/**
+ * Toggle expansion for a single key. Returns a new Set; input is not
+ * mutated.
+ */
+export function toggleExpansion<K = unknown>(
+  current: Set<K>,
+  key: K
+): Set<K> {
+  const next = new Set(current)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  return next
+}
+
+/**
+ * Compute the next selection given a click on `key`.
+ *
+ *   - mode 'single': replaces with `key`.
+ *   - mode 'multiple' / 'checkbox': toggles `key` in/out of the array.
+ *
+ * `current` may be null/undefined (start fresh), a single value, or
+ * an array. Returns a new array — input is not mutated.
+ */
+export function nextSelection<K = unknown>(
+  current: K | K[] | null | undefined,
+  key: K,
+  mode: 'single' | 'multiple' | 'checkbox'
+): K | K[] {
+  if (mode === 'single') return key
+  if (Array.isArray(current)) {
+    return current.includes(key)
+      ? current.filter(k => k !== key)
+      : [...current, key]
+  }
+  return [key]
+}
+
+/**
+ * Normalise modelValue to a Set of selected keys for fast `has(key)`
+ * lookups during render.
+ */
+export function selectedKeysSet<K = unknown>(
+  modelValue: K | K[] | null | undefined
+): Set<K> {
+  if (modelValue === null || modelValue === undefined) return new Set()
+  if (Array.isArray(modelValue)) return new Set(modelValue)
+  return new Set([modelValue])
+}
+
+/**
+ * Flatten a tree into a single list of `{ node, level }` entries in
+ * the order they would appear when fully expanded. Used to enumerate
+ * rows for testing or for keyboard nav. Walks depth-first, parent
+ * before children.
+ */
+export function flattenWithLevel(
+  nodes: TreeNode[],
+  fields: Partial<FieldConfig> = {},
+  level = 0
+): { node: TreeNode; level: number }[] {
+  const f = { ...DEFAULT_FIELDS, ...fields }
+  const out: { node: TreeNode; level: number }[] = []
+  for (const node of nodes) {
+    out.push({ node, level })
+    const children = node[f.childrenField]
+    if (Array.isArray(children) && children.length > 0) {
+      out.push(...flattenWithLevel(children as TreeNode[], fields, level + 1))
+    }
+  }
+  return out
+}