jouw-stem__design-system 0.1.0

package/src/components/TreeSelect/treeUtils.ts

@@ -0,0 +1,143 @@
+/**
+ * Pure tree-walking helpers extracted from TreeSelect.
+ *
+ * All functions are field-agnostic — caller passes `labelField`,
+ * `keyField`, `childrenField` so the same helpers work whether the
+ * consumer's tree uses `name/id/items` or the default `label/key/children`.
+ *
+ * No Vue, no DOM, no refs — pure data in / data out so the unit tests run
+ * in milliseconds without mounting.
+ */
+
+export type TreeNode = Record<string, unknown>
+
+export interface FieldConfig {
+  labelField: string
+  keyField: string
+  childrenField: string
+}
+
+const DEFAULT_FIELDS: FieldConfig = {
+  labelField: 'label',
+  keyField: 'key',
+  childrenField: 'children',
+}
+
+function children(node: TreeNode, f: FieldConfig): TreeNode[] | undefined {
+  const c = node[f.childrenField]
+  return Array.isArray(c) ? (c as TreeNode[]) : undefined
+}
+
+function label(node: TreeNode, f: FieldConfig): string {
+  return String(node[f.labelField] ?? '')
+}
+
+/**
+ * Flatten a tree depth-first into a single list, preserving traversal
+ * order. Used for label lookup and "find by key" queries.
+ */
+export function flattenNodes(
+  nodes: TreeNode[],
+  fields: Partial<FieldConfig> = {}
+): TreeNode[] {
+  const f = { ...DEFAULT_FIELDS, ...fields }
+  const out: TreeNode[] = []
+  const walk = (list: TreeNode[]) => {
+    for (const n of list) {
+      out.push(n)
+      const kids = children(n, f)
+      if (kids && kids.length > 0) walk(kids)
+    }
+  }
+  walk(nodes)
+  return out
+}
+
+/**
+ * Find the first node whose keyField equals `key`. Returns `undefined`
+ * if none match. Walks the whole tree depth-first.
+ */
+export function findNodeByKey(
+  nodes: TreeNode[],
+  key: unknown,
+  fields: Partial<FieldConfig> = {}
+): TreeNode | undefined {
+  const f = { ...DEFAULT_FIELDS, ...fields }
+  return flattenNodes(nodes, f).find(n => n[f.keyField] === key)
+}
+
+/**
+ * Filter the tree by `searchTerm`, keeping any node whose label matches
+ * (case-insensitive) AND every node on the path to a matching descendant.
+ * Empty search term returns the original list unchanged.
+ *
+ * Returns a new tree — original nodes are not mutated. When a parent is
+ * kept only because of its descendants, its `children` array is replaced
+ * with the filtered subset.
+ */
+export function filterNodes(
+  nodes: TreeNode[],
+  searchTerm: string,
+  fields: Partial<FieldConfig> = {}
+): TreeNode[] {
+  const f = { ...DEFAULT_FIELDS, ...fields }
+  const term = searchTerm.toLowerCase()
+  if (term === '') return nodes
+
+  const out: TreeNode[] = []
+  for (const node of nodes) {
+    const matchesSelf = label(node, f).toLowerCase().includes(term)
+    const kids = children(node, f)
+    if (matchesSelf) {
+      out.push(node)
+    } else if (kids && kids.length > 0) {
+      const filteredChildren = filterNodes(kids, searchTerm, fields)
+      if (filteredChildren.length > 0) {
+        out.push({ ...node, [f.childrenField]: filteredChildren })
+      }
+    }
+  }
+  return out
+}
+
+/**
+ * Compute the visible display label for a TreeSelect modelValue.
+ *   - null / undefined → empty string
+ *   - single key → label of the matching node, or the key itself if not found
+ *   - array of keys → comma-joined labels, or empty string for an empty array
+ */
+export function computeDisplayLabel(
+  modelValue: unknown,
+  options: TreeNode[],
+  fields: Partial<FieldConfig> = {}
+): string {
+  const f = { ...DEFAULT_FIELDS, ...fields }
+  if (modelValue === null || modelValue === undefined) return ''
+  if (Array.isArray(modelValue)) {
+    if (modelValue.length === 0) return ''
+    return modelValue
+      .map(key => {
+        const node = findNodeByKey(options, key, f)
+        return node ? label(node, f) : String(key)
+      })
+      .join(', ')
+  }
+  const node = findNodeByKey(options, modelValue, f)
+  return node ? label(node, f) : ''
+}
+
+/**
+ * Toggle a single key in a multi-select selection.
+ *   - existing array + key present → remove
+ *   - existing array + key absent  → append
+ *   - non-array existing           → start a fresh single-element array
+ */
+export function toggleSelection(
+  current: unknown,
+  key: unknown
+): unknown[] {
+  if (Array.isArray(current)) {
+    return current.includes(key) ? current.filter(k => k !== key) : [...current, key]
+  }
+  return [key]
+}

package/src/components/TreeTable/TreeTable.matrix.ts

@@ -0,0 +1,24 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.treetable',
+  // TreeTable takes `nodes` (flat data per node — no `data` wrapper),
+  // `columns` as a prop array, and `expandedKeys` as a string[] of
+  // pre-expanded keys. First column with `expander: true` gets the
+  // tree-node chevron.
+  baseQuery: {
+    nodes: '[{"key":"0","name":"Documents","size":"4MB","type":"Folder","children":[{"key":"0-0","name":"Work","size":"3MB","type":"Folder","children":[{"key":"0-0-0","name":"Notes.txt","size":"12KB","type":"File"}]},{"key":"0-1","name":"Personal","size":"1MB","type":"Folder"}]},{"key":"1","name":"Pictures","size":"120MB","type":"Folder"}]',
+    columns: '[{"field":"name","header":"Name","expander":true},{"field":"size","header":"Size"},{"field":"type","header":"Type"}]',
+    expandedKeys: '["0"]'
+  },
+  variants: [
+    {
+      name: 'Selection',
+      subvariants: [
+        { name: 'none',     query: { selectionMode: 'none' } },
+        { name: 'single',   query: { selectionMode: 'single' } },
+        { name: 'multiple', query: { selectionMode: 'multiple' } }
+      ]
+    }
+  ]
+}

package/src/components/TreeTable/TreeTable.scss

@@ -0,0 +1,179 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: treetable;
+
+.#{$c} {
+  width: 100%;
+  background-color: var(--treetable-background-default, $treetable-background-default);
+  border: var(--treetable-border-width, $treetable-border-width) solid var(--treetable-border-color-default, $treetable-border-color-default);
+  border-radius: var(--treetable-radius, $treetable-radius);
+  overflow: hidden;
+}
+
+.#{$c}--state-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.#{$c}__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+// Header
+.#{$c}__head {
+  background-color: var(--treetable-header-background, $treetable-header-background);
+}
+
+.#{$c}__row--header {
+  .#{$c}__cell {
+    padding: var(--treetable-header-padding-y, $treetable-header-padding-y) var(--treetable-header-padding-x, $treetable-header-padding-x);
+    color: var(--treetable-header-text, $treetable-header-text);
+    font-weight: var(--treetable-header-fontWeight, $treetable-header-fontWeight);
+    text-align: left;
+    border-bottom: 1px solid var(--treetable-header-borderColor, $treetable-header-borderColor);
+  }
+}
+
+// Body
+.#{$c}__body {
+  .#{$c}__row {
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover,
+    &[data-state~="hover"] {
+      background-color: var(--treetable-row-background-hover, $treetable-row-background-hover);
+    }
+
+    &:focus,
+    &[data-state~="focus"] {
+      outline: none;
+      background-color: var(--treetable-row-background-hover, $treetable-row-background-hover);
+    }
+
+    &:focus-visible,
+    &[data-state~="focus-visible"] {
+      outline: var(--treetable-focus-ringWidth, $treetable-focus-ringWidth) solid var(--treetable-focus-ringColor, $treetable-focus-ringColor);
+      outline-offset: -2px;
+    }
+  }
+}
+
+// Row
+.#{$c}__row {
+  background-color: var(--treetable-row-background-default, $treetable-row-background-default);
+
+  &:not(:last-child) {
+    .#{$c}__cell {
+      border-bottom: 1px solid var(--treetable-row-borderColor, $treetable-row-borderColor);
+    }
+  }
+}
+
+.#{$c}__row--state-selected {
+  background-color: var(--treetable-row-background-selected, $treetable-row-background-selected);
+  color: var(--treetable-row-text-selected, $treetable-row-text-selected);
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--treetable-row-background-selected, $treetable-row-background-selected);
+    filter: brightness(0.95);
+  }
+}
+
+// Striped
+.#{$c}--shape-striped {
+  .#{$c}__body .#{$c}__row:nth-child(even):not(.#{$c}__row--state-selected) {
+    background-color: var(--treetable-row-background-stripe, $treetable-row-background-stripe);
+  }
+}
+
+// Cell
+.#{$c}__cell {
+  padding: var(--treetable-cell-padding-y, $treetable-cell-padding-y) var(--treetable-cell-padding-x, $treetable-cell-padding-x);
+  color: var(--treetable-row-text-default, $treetable-row-text-default);
+  vertical-align: middle;
+
+  &:first-child {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.#{$c}__cell-content {
+  flex: 1;
+  min-width: 0;
+}
+
+// Indent
+.#{$c}__indent {
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+// Toggler
+.#{$c}__toggler {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--treetable-toggler-size, $treetable-toggler-size);
+  height: var(--treetable-toggler-size, $treetable-toggler-size);
+  margin-right: var(--treetable-toggler-marginRight, $treetable-toggler-marginRight);
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--treetable-toggler-color-default, $treetable-toggler-color-default);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: transform 0.15s ease, color 0.15s ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    color: var(--treetable-toggler-color-hover, $treetable-toggler-color-hover);
+  }
+
+  &--state-expanded {
+    transform: rotate(90deg);
+  }
+}
+
+.#{$c}__toggler-spacer {
+  display: inline-block;
+  width: var(--treetable-toggler-size, $treetable-toggler-size);
+  margin-right: var(--treetable-toggler-marginRight, $treetable-toggler-marginRight);
+  flex-shrink: 0;
+}
+
+// Checkbox
+.#{$c}__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--treetable-checkbox-size, $treetable-checkbox-size);
+  height: var(--treetable-checkbox-size, $treetable-checkbox-size);
+  margin-right: var(--treetable-checkbox-marginRight, $treetable-checkbox-marginRight);
+  border: 2px solid var(--treetable-border-color-default, $treetable-border-color-default);
+  border-radius: 3px;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+
+  svg {
+    color: white;
+  }
+
+  &--state-checked {
+    background-color: var(--treetable-focus-ringColor, $treetable-focus-ringColor);
+    border-color: var(--treetable-focus-ringColor, $treetable-focus-ringColor);
+  }
+}
+
+// Empty
+.#{$c}__empty {
+  padding: var(--treetable-cell-padding-y, $treetable-cell-padding-y) var(--treetable-cell-padding-x, $treetable-cell-padding-x);
+  // No opacity — opacity 0.6 dropped computed text contrast below 4.5:1.
+  // Use the muted text token directly so the empty-state still reads
+  // as secondary content without violating WCAG 1.4.3.
+  color: var(--text-muted, #5e6481);
+  text-align: center;
+}

package/src/components/TreeTable/TreeTable.tokens.theme-dark.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": "{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": "{neutral.50}",
+        "type": "color"
+      },
+      "text": {
+        "value": "{text.default}",
+        "type": "color"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "dimension"
+      },
+      "borderColor": {
+        "value": "{neutral.200}",
+        "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": "{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.tokens.theme-high-contrast-solarized-dark.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"
+      }
+    }
+  }
+}