jouw-stem__design-system 0.1.0

package/src/components/Tree/Tree.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="tree" :class="additionalClasses">
+    <div v-if="filter" class="tree__filter">
+      <input
+        v-model="filterValue"
+        type="text"
+        class="tree__filter-input"
+        placeholder="Search..."
+        @input="onFilterInput"
+      />
+    </div>
+    <div class="tree__container" role="tree" aria-label="Tree" :aria-multiselectable="selectionMode === 'multiple'">
+      <TreeNode
+        v-for="node in filteredNodes"
+        :key="getNodeKey(node)"
+        :node="node"
+        :level="0"
+        :selection-mode="selectionMode"
+        :selected-keys="selectedKeysSet"
+        :expanded-keys="expandedKeysInternal"
+        :label-field="labelField"
+        :key-field="keyField"
+        :children-field="childrenField"
+        @select="onNodeSelect"
+        @toggle="onNodeToggle"
+      />
+      <div v-if="filteredNodes.length === 0" class="tree__empty">
+        No results found
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./Tree.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref, watch, h } from "vue";
+import {
+  filterNodes as filterNodesUtil,
+  toggleExpansion,
+  nextSelection,
+  selectedKeysSet as toSelectedKeysSet,
+} from "./treeUtils";
+
+// TreeNode subcomponent
+const TreeNode = {
+  name: "TreeNode",
+  props: {
+    node: Object,
+    level: Number,
+    selectionMode: String,
+    selectedKeys: Set,
+    expandedKeys: Set,
+    labelField: String,
+    keyField: String,
+    childrenField: String,
+  },
+  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 children = [];
+
+      // Node content
+      const nodeContent = h("div", {
+        class: [
+          "tree__node",
+          isSelected.value && "tree__node--state-selected"
+        ],
+        style: { paddingLeft: `${props.level * 24 + 8}px` },
+        role: "treeitem",
+        "aria-selected": isSelected.value,
+        "aria-expanded": hasChildren.value ? isExpanded.value : undefined,
+        tabindex: 0,
+        onClick: onSelect,
+        onKeydown: onKeydown,
+      }, [
+        hasChildren.value ? h("button", {
+          type: "button",
+          class: ["tree__toggler", isExpanded.value && "tree__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"
+            })
+          ])
+        ]) : h("span", { class: "tree__toggler-spacer" }),
+        props.selectionMode === "checkbox" || props.selectionMode === "multiple" ? h("span", {
+          class: ["tree__checkbox", isSelected.value && "tree__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
+        ]) : null,
+        h("span", { class: "tree__node-label" }, props.node[props.labelField])
+      ]);
+
+      children.push(nodeContent);
+
+      // Children nodes
+      if (hasChildren.value && isExpanded.value) {
+        const nodeChildren = props.node[props.childrenField];
+        children.push(h("div", { class: "tree__children", role: "group" },
+          nodeChildren.map((child) =>
+            h(TreeNode, {
+              key: child[props.keyField],
+              node: child,
+              level: props.level + 1,
+              selectionMode: props.selectionMode,
+              selectedKeys: props.selectedKeys,
+              expandedKeys: props.expandedKeys,
+              labelField: props.labelField,
+              keyField: props.keyField,
+              childrenField: props.childrenField,
+              onSelect: (n) => emit("select", n),
+              onToggle: (n) => emit("toggle", n),
+            })
+          )
+        ));
+      }
+
+      return h("div", { class: "tree__node-wrapper" }, children);
+    };
+  }
+};
+
+interface Props {
+  modelValue?: string | number | unknown[];
+  nodes?: unknown[];
+  expandedKeys?: unknown[];
+  selectionMode?: string;
+  filter?: boolean;
+  labelField?: string;
+  keyField?: string;
+  childrenField?: string;
+  isDisabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  nodes: () => [],
+  expandedKeys: () => [],
+  selectionMode: "single",
+  filter: false,
+  labelField: "label",
+  keyField: "key",
+  childrenField: "children",
+  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;
+  (e: "filter", ...args: unknown[]): void;
+}>();
+const filterValue = ref("");
+const expandedKeysInternal = ref(new Set(props.expandedKeys));
+
+watch(() => props.expandedKeys, (newKeys) => {
+  expandedKeysInternal.value = new Set(newKeys);
+}, { deep: true });
+
+const getNodeKey = (node) => node[props.keyField];
+
+const selectedKeysSet = computed(() => toSelectedKeysSet(props.modelValue));
+
+const filteredNodes = computed(() => {
+  if (!filterValue.value) return props.nodes;
+  return filterNodesUtil(props.nodes as Record<string, unknown>[], filterValue.value, {
+    labelField: props.labelField,
+    keyField: props.keyField,
+    childrenField: props.childrenField,
+  });
+});
+
+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 onFilterInput = () => {
+  emit("filter", { value: filterValue.value });
+};
+
+const additionalClasses = computed(() =>
+  [props.isDisabled && "tree--state-disabled"].filter(Boolean).join(" ")
+);
+</script>

package/src/components/Tree/treeUtils.ts

@@ -0,0 +1,128 @@
+/**
+ * Pure tree-walking helpers for the standalone Tree component.
+ *
+ * Lives next to the component (same convention as MultiSelect/options.ts vs.
+ * Dropdown/options.ts — siblings per component, not a shared module — so a
+ * change to Tree's data shape can't accidentally break TreeSelect, and
+ * vice versa).
+ *
+ * All functions are field-agnostic: caller passes `labelField`, `keyField`,
+ * `childrenField` so the helpers work with default `label/key/children`
+ * or any custom shape (e.g. `name/id/items`).
+ *
+ * No Vue, no DOM, no refs — pure data in / data out.
+ */
+
+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] ?? '')
+}
+
+/**
+ * Filter the tree by `searchTerm`, keeping any node whose label matches
+ * (case-insensitive) AND every node on the path to a matching descendant.
+ * Empty term returns the original list unchanged (not a copy).
+ *
+ * Does not mutate. Parents kept only because of descendants get a fresh
+ * `children` array containing 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
+}
+
+/**
+ * Toggle expansion for a single key.
+ *   - key already in set → remove (collapse)
+ *   - key absent          → add (expand)
+ * Returns a new Set; the 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': selects `key`. (Click on the same key keeps it selected;
+ *     re-click does NOT clear — Tree's contract differs from Rating.)
+ *   - mode 'multiple' / 'checkbox' (toggle behaviour): toggles `key` in the
+ *     array. Returns a new array — input is not mutated.
+ *
+ * `current` may be:
+ *   - null / undefined  → starts a fresh selection
+ *   - single value      → wrapped in an array as needed
+ *   - array of keys     → toggled
+ */
+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.
+ *   - null / undefined → empty set
+ *   - single value     → set of one
+ *   - array of values  → set
+ */
+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])
+}

package/src/components/TreeSelect/TreeSelect.matrix.ts

@@ -0,0 +1,17 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.tree-select',
+  // TreeSelect closed-state — trigger button. Open tree popup uses
+  // position:fixed teleport (behavioural spec covers open interaction).
+  baseQuery: {
+    options: '[{"key":"0","label":"Documents","children":[{"key":"0-0","label":"Work"}]},{"key":"1","label":"Pictures"}]',
+    placeholder: 'Select a node'
+  },
+  variants: [],
+  states: [
+    { name: 'hover',          attr: 'hover' },
+    { name: 'focus-visible',  attr: 'focus-visible' },
+    { name: 'disabled',       props: { isDisabled: 'true' } }
+  ]
+}

package/src/components/TreeSelect/TreeSelect.scss

@@ -0,0 +1,245 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: tree-select;
+
+.#{$c} {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+}
+
+.#{$c}__trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: var(--tree-select-background-default, $tree-select-background-default);
+  border: var(--tree-select-border-width, $tree-select-border-width) solid var(--tree-select-border-color-default, $tree-select-border-color-default);
+  border-radius: var(--tree-select-radius, $tree-select-radius);
+  padding: var(--tree-select-padding-y, $tree-select-padding-y) var(--tree-select-padding-x, $tree-select-padding-x);
+  padding-right: calc(var(--tree-select-padding-x, $tree-select-padding-x) + 24px);
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover:not([aria-disabled="true"]),
+  &[data-state~="hover"]:not([aria-disabled="true"]) {
+    border-color: var(--tree-select-border-color-hover, $tree-select-border-color-hover);
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: var(--tree-select-focus-ringWidth, $tree-select-focus-ringWidth) solid var(--tree-select-focus-ringColor, $tree-select-focus-ringColor);
+    outline-offset: var(--tree-select-focus-ringOffset, $tree-select-focus-ringOffset);
+    border-color: var(--tree-select-border-color-focus, $tree-select-border-color-focus);
+  }
+}
+
+.#{$c}__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.#{$c}__placeholder {
+  color: var(--tree-select-text-placeholder, $tree-select-text-placeholder);
+}
+
+.#{$c}__label {
+  color: var(--tree-select-text-default, $tree-select-text-default);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.#{$c}__icon {
+  position: absolute;
+  right: var(--tree-select-padding-x, $tree-select-padding-x);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--tree-select-icon-color-default, $tree-select-icon-color-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease;
+
+  &--state-open {
+    transform: translateY(-50%) rotate(180deg);
+  }
+}
+
+.#{$c}__dropdown {
+  background-color: var(--tree-select-dropdown-background, $tree-select-dropdown-background);
+  border: 1px solid var(--tree-select-dropdown-border, $tree-select-dropdown-border);
+  border-radius: var(--tree-select-dropdown-radius, $tree-select-dropdown-radius);
+  box-shadow: var(--tree-select-dropdown-shadow, $tree-select-dropdown-shadow);
+  overflow: hidden;
+}
+
+.#{$c}__filter {
+  padding: var(--tree-select-filter-padding, $tree-select-filter-padding);
+  border-bottom: 1px solid var(--tree-select-filter-borderColor, $tree-select-filter-borderColor);
+}
+
+.#{$c}__filter-input {
+  width: 100%;
+  padding: var(--tree-select-padding-y, $tree-select-padding-y) var(--tree-select-padding-x, $tree-select-padding-x);
+  border: var(--tree-select-border-width, $tree-select-border-width) solid var(--tree-select-border-color-default, $tree-select-border-color-default);
+  border-radius: var(--tree-select-radius, $tree-select-radius);
+  font-size: inherit;
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+    border-color: var(--tree-select-border-color-focus, $tree-select-border-color-focus);
+  }
+}
+
+.#{$c}__tree {
+  max-height: var(--tree-select-dropdown-maxHeight, $tree-select-dropdown-maxHeight);
+  overflow-y: auto;
+  padding: var(--tree-select-node-padding-y, $tree-select-node-padding-y) 0;
+}
+
+.#{$c}__node-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.#{$c}__node {
+  display: flex;
+  align-items: center;
+  gap: var(--tree-select-node-gap, $tree-select-node-gap);
+  padding: var(--tree-select-node-padding-y, $tree-select-node-padding-y) var(--tree-select-node-padding-x, $tree-select-node-padding-x);
+  background-color: var(--tree-select-node-background-default, $tree-select-node-background-default);
+  color: var(--tree-select-node-text-default, $tree-select-node-text-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--tree-select-node-background-hover, $tree-select-node-background-hover);
+  }
+
+  &--state-selected {
+    background-color: var(--tree-select-node-background-selected, $tree-select-node-background-selected);
+    color: var(--tree-select-node-text-selected, $tree-select-node-text-selected);
+
+    &:hover,
+    &[data-state~="hover"] {
+      background-color: var(--tree-select-node-background-selected, $tree-select-node-background-selected);
+    }
+  }
+}
+
+.#{$c}__toggler {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tree-select-toggler-size, $tree-select-toggler-size);
+  height: var(--tree-select-toggler-size, $tree-select-toggler-size);
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--tree-select-toggler-color-default, $tree-select-toggler-color-default);
+  cursor: pointer;
+  transition: transform 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover,
+  &[data-state~="hover"] {
+    color: var(--tree-select-toggler-color-hover, $tree-select-toggler-color-hover);
+  }
+
+  &--state-expanded {
+    transform: rotate(90deg);
+  }
+}
+
+.#{$c}__toggler-spacer {
+  width: var(--tree-select-toggler-size, $tree-select-toggler-size);
+  flex-shrink: 0;
+}
+
+.#{$c}__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--tree-select-border-color-default, $tree-select-border-color-default);
+  border-radius: 3px;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+
+  svg {
+    width: 12px;
+    height: 12px;
+    color: white;
+  }
+
+  &--state-checked {
+    background-color: var(--tree-select-focus-ringColor, $tree-select-focus-ringColor);
+    border-color: var(--tree-select-focus-ringColor, $tree-select-focus-ringColor);
+  }
+}
+
+.#{$c}__node-label {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.#{$c}__empty {
+  padding: var(--tree-select-node-padding-y, $tree-select-node-padding-y) var(--tree-select-node-padding-x, $tree-select-node-padding-x);
+  color: var(--tree-select-text-placeholder, $tree-select-text-placeholder);
+  text-align: center;
+}
+
+// Disabled state
+.#{$c}--state-disabled {
+  .#{$c}__trigger {
+    cursor: not-allowed;
+    background-color: var(--tree-select-background-disabled, $tree-select-background-disabled);
+    border-color: var(--tree-select-border-color-disabled, $tree-select-border-color-disabled);
+    color: var(--tree-select-text-disabled, $tree-select-text-disabled);
+  }
+
+  .#{$c}__icon {
+    color: var(--tree-select-icon-color-disabled, $tree-select-icon-color-disabled);
+  }
+}
+
+// Invalid state
+.#{$c}--state-invalid {
+  .#{$c}__trigger {
+    border-color: var(--tree-select-border-color-error, $tree-select-border-color-error);
+
+    &:focus,
+    &[data-state~="focus"] {
+      border-color: var(--tree-select-border-color-error, $tree-select-border-color-error);
+    }
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__trigger {
+    height: var(--tree-select-height-sm, $tree-select-height-sm);
+    font-size: var(--tree-select-fontSize-sm, $tree-select-fontSize-sm);
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__trigger {
+    height: var(--tree-select-height-md, $tree-select-height-md);
+    font-size: var(--tree-select-fontSize-md, $tree-select-fontSize-md);
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__trigger {
+    height: var(--tree-select-height-lg, $tree-select-height-lg);
+    font-size: var(--tree-select-fontSize-lg, $tree-select-fontSize-lg);
+  }
+}