@flux-ui/components 3.0.0-next.30 → 3.0.0-next.32

package/src/composable/private/index.ts

@@ -1,2 +1,4 @@
 export { default as useFormSelect } from './useFormSelect';
 export { default as useTranslate } from './useTranslate';
+export { flattenAll, flattenVisible, getLevelColor, INITIAL_HIGHLIGHTED_INDEX, useTreeView } from './useTreeView';
+export type { TreeBaseOption, TreeFlatNode } from './useTreeView';

package/src/composable/private/useTreeView.ts

@@ -0,0 +1,186 @@
+import type { FluxColor, FluxIconName } from '@flux-ui/types';
+import { type ComputedRef, nextTick, ref, type Ref, unref, watch } from 'vue';
+
+export type TreeBaseOption = {
+    readonly id: string | number;
+    readonly label: string;
+    readonly icon?: FluxIconName;
+    readonly children?: TreeBaseOption[];
+};
+
+export type TreeFlatNode<TOption extends TreeBaseOption = TreeBaseOption> = TOption & {
+    readonly depth: number;
+    readonly isLast: boolean;
+    readonly lineGuides: boolean[];
+};
+
+export const FLUX_COLORS: FluxColor[] = ['gray', 'primary', 'danger', 'info', 'success', 'warning'];
+export const INITIAL_HIGHLIGHTED_INDEX = -1;
+
+export function flattenVisible<TOption extends TreeBaseOption>(
+    nodes: TOption[],
+    depth: number,
+    expanded: Set<string | number>,
+    parentGuides: boolean[] = []
+): TreeFlatNode<TOption>[] {
+    return nodes.flatMap((node, index) => {
+        const isLast = index === nodes.length - 1;
+        const flatNode = {...node, depth, isLast, lineGuides: parentGuides} as TreeFlatNode<TOption>;
+
+        if (node.children?.length && expanded.has(node.id)) {
+            const childGuides = [...parentGuides, !isLast];
+            return [flatNode, ...flattenVisible(node.children as TOption[], depth + 1, expanded, childGuides)];
+        }
+
+        return [flatNode];
+    });
+}
+
+export function flattenAll<TOption extends TreeBaseOption>(
+    nodes: TOption[],
+    depth = 0
+): TreeFlatNode<TOption>[] {
+    return nodes.flatMap(node => [
+        {...node, depth, isLast: false, lineGuides: [] as boolean[]} as TreeFlatNode<TOption>,
+        ...(node.children ? flattenAll(node.children as TOption[], depth + 1) : [])
+    ]);
+}
+
+export function getLevelColor(depth: number, levelColors?: (FluxColor | string)[]): string | undefined {
+    if (!levelColors || depth >= levelColors.length) {
+        return undefined;
+    }
+
+    const color = levelColors[depth];
+
+    if (FLUX_COLORS.includes(color as FluxColor)) {
+        return `var(--${color}-600)`;
+    }
+
+    return color;
+}
+
+export function useTreeView<TNode extends TreeFlatNode>(params: {
+    readonly expandedIds: Ref<Set<string | number>>;
+    readonly nodeElementRefs: Readonly<Ref<HTMLDivElement[] | null | undefined>>;
+    readonly visibleNodes: ComputedRef<TNode[]>;
+}): {
+    readonly highlightedIndex: Ref<number>;
+    toggleExpand: (nodeId: string | number) => void;
+    onExpandClick: (node: TNode, evt: MouseEvent) => void;
+    onKeyNavigate: (evt: KeyboardEvent, onActivate: (node: TNode) => void) => boolean;
+} {
+    const highlightedIndex = ref(INITIAL_HIGHLIGHTED_INDEX);
+
+    function toggleExpand(nodeId: string | number): void {
+        const ids = new Set(unref(params.expandedIds));
+
+        if (ids.has(nodeId)) {
+            ids.delete(nodeId);
+        } else {
+            ids.add(nodeId);
+        }
+
+        params.expandedIds.value = ids;
+    }
+
+    function onExpandClick(node: TNode, evt: MouseEvent): void {
+        if (!node.children?.length) {
+            return;
+        }
+
+        evt.stopPropagation();
+        toggleExpand(node.id);
+    }
+
+    function onKeyNavigate(evt: KeyboardEvent, onActivate: (node: TNode) => void): boolean {
+        const nodes = unref(params.visibleNodes);
+        const current = unref(highlightedIndex);
+
+        switch (evt.key) {
+            case 'ArrowDown':
+                evt.preventDefault();
+                highlightedIndex.value = current === INITIAL_HIGHLIGHTED_INDEX
+                    ? 0
+                    : Math.min(nodes.length - 1, current + 1);
+                return true;
+
+            case 'ArrowUp':
+                evt.preventDefault();
+                highlightedIndex.value = current === INITIAL_HIGHLIGHTED_INDEX
+                    ? nodes.length - 1
+                    : Math.max(0, current - 1);
+                return true;
+
+            case 'ArrowRight':
+                evt.preventDefault();
+                if (current >= 0) {
+                    const node = nodes[current];
+                    if (node.children?.length) {
+                        if (!unref(params.expandedIds).has(node.id)) {
+                            toggleExpand(node.id);
+                        } else if (current + 1 < nodes.length && nodes[current + 1].depth > node.depth) {
+                            highlightedIndex.value = current + 1;
+                        }
+                    }
+                }
+                return true;
+
+            case 'ArrowLeft':
+                evt.preventDefault();
+                if (current >= 0) {
+                    const node = nodes[current];
+                    if (node.children?.length && unref(params.expandedIds).has(node.id)) {
+                        toggleExpand(node.id);
+                    } else if (node.depth > 0) {
+                        for (let i = current - 1; i >= 0; i--) {
+                            if (nodes[i].depth === node.depth - 1) {
+                                highlightedIndex.value = i;
+                                break;
+                            }
+                        }
+                    }
+                }
+                return true;
+
+            case 'Enter':
+            case ' ':
+                evt.preventDefault();
+                if (current >= 0) {
+                    onActivate(nodes[current]);
+                }
+                return true;
+
+            default:
+                if (evt.key.length === 1) {
+                    const lowerKey = evt.key.toLowerCase();
+                    let matchIndex = nodes.findIndex((n, i) => i > current && n.label.toLowerCase().startsWith(lowerKey));
+                    if (matchIndex < 0) {
+                        matchIndex = nodes.findIndex(n => n.label.toLowerCase().startsWith(lowerKey));
+                    }
+                    if (matchIndex >= 0) {
+                        highlightedIndex.value = matchIndex;
+                        return true;
+                    }
+                }
+                return false;
+        }
+    }
+
+    watch(highlightedIndex, index => {
+        if (index < 0) {
+            return;
+        }
+
+        nextTick(() => unref(params.nodeElementRefs)?.[index]?.scrollIntoView({block: 'nearest'}));
+    });
+
+    watch(params.visibleNodes, nodes => {
+        const current = unref(highlightedIndex);
+        if (current >= nodes.length) {
+            highlightedIndex.value = Math.max(INITIAL_HIGHLIGHTED_INDEX, nodes.length - 1);
+        }
+    });
+
+    return {highlightedIndex, toggleExpand, onExpandClick, onKeyNavigate};
+}

package/src/css/component/TreeView.module.scss

@@ -0,0 +1,34 @@
+@use '$flux/css/mixin';
+
+.treeView {
+    display: flex;
+    flex-flow: column;
+    outline: 0;
+}
+
+.treeNode {
+    display: flex;
+    width: 100%;
+    min-height: 36px;
+    padding: 0 8px;
+    align-items: center;
+    border-radius: var(--radius-half);
+    color: var(--foreground);
+    cursor: pointer;
+    font-size: 14px;
+    gap: 8px;
+    outline: 0;
+    transition: 150ms var(--swift-out);
+    transition-property: background, color;
+    user-select: none;
+
+    @include mixin.hover {
+        background: var(--surface-hover);
+    }
+
+    &.isHighlighted {
+        background: var(--surface-hover);
+    }
+}
+
+@include mixin.tree-node-classes();

package/src/css/component/TreeViewSelect.module.scss

@@ -0,0 +1,73 @@
+@use '$flux/css/mixin';
+
+.treeViewSelectValue {
+    margin-left: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.treeViewSelectList {
+    display: flex;
+    flex-flow: column;
+    padding: 9px;
+}
+
+.treeViewSelectEmpty {
+    padding: 12px 6px;
+    color: var(--foreground-secondary);
+    font-size: 14px;
+    text-align: center;
+}
+
+.treeNode {
+    display: flex;
+    width: 100%;
+    min-height: 36px;
+    padding: 0 8px;
+    align-items: center;
+    border-radius: var(--radius-half);
+    color: var(--foreground);
+    font-size: 14px;
+    gap: 8px;
+    outline: 0;
+    transition: 150ms var(--swift-out);
+    transition-property: background, color;
+    user-select: none;
+
+    &.isSelectable,
+    &.isExpandable {
+        cursor: pointer;
+
+        @include mixin.hover {
+            background: var(--surface-hover);
+        }
+    }
+
+    &.isSelected {
+        background: var(--primary-50);
+        color: var(--primary-700);
+        font-weight: 600;
+    }
+
+    &.isSelected.isSelectable {
+        @include mixin.hover {
+            background: var(--primary-100);
+        }
+    }
+
+    &.isHighlighted:not(.isSelected) {
+        background: var(--surface-hover);
+    }
+
+    &.isHighlighted.isSelected {
+        background: var(--primary-100);
+    }
+}
+
+.treeNodeCheck {
+    color: var(--primary-600);
+    flex-shrink: 0;
+}
+
+@include mixin.tree-node-classes();

package/src/css/mixin/index.scss

@@ -1,3 +1,4 @@
 @forward 'breakpoints';
 @forward 'focus-ring';
 @forward 'hover';
+@forward 'tree-node';

package/src/css/mixin/tree-node.scss

@@ -0,0 +1,94 @@
+@mixin tree-node-classes() {
+    // Wrapper for guide lines + expand button — no internal gap so lines align perfectly
+    .treeNodeLineArea {
+        display: flex;
+        align-self: stretch;
+        flex-shrink: 0;
+    }
+
+    // Vertical guide line for each ancestor level
+    .treeIndent {
+        position: relative;
+        width: 20px;
+        align-self: stretch;
+        flex-shrink: 0;
+        pointer-events: none;
+
+        &.hasLine::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 9px;
+            width: 1px;
+            background: var(--surface-stroke);
+        }
+    }
+
+    // Connector from parent to current node, with rounded elbow
+    .treeConnector {
+        position: relative;
+        width: 20px;
+        align-self: stretch;
+        flex-shrink: 0;
+        pointer-events: none;
+
+        // Non-last siblings: full-height vertical continuation line
+        &:not(.isLast)::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 9px;
+            width: 1px;
+            background: var(--surface-stroke);
+        }
+
+        // Rounded elbow: vertical segment from top to midpoint, curves right to expand area
+        // Overlaps the ::before vertical line for non-last nodes (same position, same color)
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 50%;
+            left: 9px;
+            right: 0;
+            border-left: 1px solid var(--surface-stroke);
+            border-bottom: 1px solid var(--surface-stroke);
+            border-bottom-left-radius: 6px;
+        }
+    }
+
+    .treeNodeExpand {
+        display: flex;
+        width: 16px;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        color: var(--foreground-secondary);
+
+        &:not(:empty) {
+            cursor: pointer;
+        }
+    }
+
+    .treeNodeColorDot {
+        display: block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    .treeNodeIcon {
+        color: var(--foreground-secondary);
+        flex-shrink: 0;
+    }
+
+    .treeNodeLabel {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}