@for-the-people-initiative/design-system 1.3.1

package/src/components/Tree/Tree.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="tree" :class="additionalClasses" role="tree" :aria-multiselectable="selectionMode === 'multiple'">
+    <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">
+      <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 type { TreeProps, TreeEmits } from '../../types';
+import { computed, ref, watch, h } from "vue";
+
+defineOptions({ name: 'FtpTree' });
+
+// 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: any, { emit }: { emit: any }) {
+    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) => {
+      event.stopPropagation();
+      emit("toggle", props.node);
+    };
+
+    const onSelect = () => {
+      emit("select", props.node);
+    };
+
+    const onKeydown = (event: KeyboardEvent) => {
+      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--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--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--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: any) =>
+            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: any) => emit("select", n),
+              onToggle: (n: any) => emit("toggle", n),
+            })
+          )
+        ));
+      }
+
+      return h("div", { class: "tree__node-wrapper" }, children);
+    };
+  }
+};
+
+const props = withDefaults(defineProps<TreeProps>(), {
+  modelValue: null,
+  nodes: () => [],
+  expandedKeys: () => [],
+  selectionMode: "single",
+  filter: false,
+  labelField: "label",
+  keyField: "key",
+  childrenField: "children",
+  isDisabled: false,
+});
+
+const emit = defineEmits(["update:modelValue", "update:expandedKeys", "node-select", "node-expand", "node-collapse", "filter"]);
+
+const filterValue = ref("");
+const expandedKeysInternal = ref(new Set(props.expandedKeys));
+
+watch(() => props.expandedKeys, (newKeys) => {
+  expandedKeysInternal.value = new Set(newKeys);
+}, { deep: true });
+
+const getNodeKey = (node: any) => node[props.keyField];
+
+const selectedKeysSet = computed(() => {
+  if (props.modelValue === null || props.modelValue === undefined) {
+    return new Set();
+  }
+  if (Array.isArray(props.modelValue)) {
+    return new Set(props.modelValue);
+  }
+  return new Set([props.modelValue]);
+});
+
+const filterNodes = (nodes: any, searchTerm: any) => {
+  const result: any[] = [];
+  const search = searchTerm.toLowerCase();
+
+  nodes.forEach((node: any) => {
+    const label = String(node[props.labelField]).toLowerCase();
+    const children = node[props.childrenField];
+
+    if (label.includes(search)) {
+      result.push(node);
+    } else if (children && children.length > 0) {
+      const filteredChildren = filterNodes(children, searchTerm);
+      if (filteredChildren.length > 0) {
+        result.push({
+          ...node,
+          [props.childrenField]: filteredChildren,
+        });
+      }
+    }
+  });
+
+  return result;
+};
+
+const filteredNodes = computed(() => {
+  if (!filterValue.value) return props.nodes;
+  return filterNodes(props.nodes, filterValue.value);
+});
+
+const onNodeSelect = (node: any) => {
+  if (props.isDisabled || !props.selectionMode) return;
+
+  const key = node[props.keyField];
+
+  if (props.selectionMode === "single") {
+    emit("update:modelValue", key);
+    emit("node-select", { node, key });
+  } else {
+    let newValue;
+    if (selectedKeysSet.value.has(key)) {
+      newValue = Array.isArray(props.modelValue)
+        ? props.modelValue.filter((k) => k !== key)
+        : [];
+    } else {
+      newValue = Array.isArray(props.modelValue)
+        ? [...props.modelValue, key]
+        : [key];
+    }
+    emit("update:modelValue", newValue);
+    emit("node-select", { node, key, selectedKeys: newValue });
+  }
+};
+
+const onNodeToggle = (node: any) => {
+  const key = node[props.keyField];
+  const newExpanded = new Set(expandedKeysInternal.value);
+
+  if (newExpanded.has(key)) {
+    newExpanded.delete(key);
+    emit("node-collapse", { node, key });
+  } else {
+    newExpanded.add(key);
+    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--disabled"].filter(Boolean).join(" ")
+);
+</script>

package/src/components/TreeSelect/TreeSelect.scss

@@ -0,0 +1,238 @@
+@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"]) {
+    border-color: var(--tree-select-border-color-hover, $tree-select-border-color-hover);
+  }
+
+  &: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;
+
+  &--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 {
+    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 {
+    background-color: var(--tree-select-node-background-hover, $tree-select-node-background-hover);
+  }
+
+  &--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 {
+      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 {
+    color: var(--tree-select-toggler-color-hover, $tree-select-toggler-color-hover);
+  }
+
+  &--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;
+  }
+
+  &--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}--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}--invalid {
+  .#{$c}__trigger {
+    border-color: var(--tree-select-border-color-error, $tree-select-border-color-error);
+
+    &: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);
+  }
+}