@flux-ui/components 3.0.0-next.31 → 3.0.0-next.33

package/src/component/FluxTreeView.vue

@@ -0,0 +1,116 @@
+<template>
+    <div
+        :class="$style.treeView"
+        role="tree"
+        tabindex="0"
+        @keydown="onKeyDown">
+
+        <div
+            v-for="(node, nodeIndex) in visibleNodes"
+            ref="nodeElements"
+            :key="node.id"
+            :class="clsx(
+                $style.treeNode,
+                nodeIndex === highlightedIndex && $style.isHighlighted
+            )"
+            role="treeitem"
+            tabindex="-1"
+            :aria-expanded="node.children?.length ? expandedIds.has(node.id) : undefined"
+            @click="onNodeClick(node)"
+            @dblclick="onNodeDblClick(node)">
+
+            <div :class="$style.treeNodeLineArea">
+                <span
+                    v-for="(showLine, guideIndex) in node.lineGuides"
+                    :key="`g-${guideIndex}`"
+                    :class="[$style.treeIndent, showLine && $style.hasLine]"/>
+
+                <span
+                    v-if="node.depth > 0"
+                    :class="[$style.treeConnector, node.isLast && $style.isLast]"/>
+
+                <span
+                    :class="$style.treeNodeExpand"
+                    @click="onExpandClick(node, $event)">
+                    <FluxIcon
+                        v-if="node.children?.length"
+                        :name="expandedIds.has(node.id) ? 'angle-down' : 'angle-right'"
+                        :size="12"/>
+                </span>
+            </div>
+
+            <span
+                v-if="getLevelColor(node.depth, levelColors)"
+                :class="$style.treeNodeColorDot"
+                :style="{ background: getLevelColor(node.depth, levelColors) }"/>
+
+            <FluxIcon
+                v-if="node.icon"
+                :class="$style.treeNodeIcon"
+                :name="node.icon"
+                :size="16"/>
+
+            <span :class="$style.treeNodeLabel">{{ node.label }}</span>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxColor, FluxTreeViewOption } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, ref, unref, useTemplateRef } from 'vue';
+    import { flattenVisible, getLevelColor, useTreeView } from '$flux/composable/private';
+    import type { TreeFlatNode } from '$flux/composable/private';
+    import FluxIcon from '$flux/component/FluxIcon.vue';
+    import $style from '$flux/css/component/TreeView.module.scss';
+
+    type FlatNode = TreeFlatNode<FluxTreeViewOption>;
+
+    const emit = defineEmits<{
+        click: [option: FluxTreeViewOption];
+        dblclick: [option: FluxTreeViewOption];
+    }>();
+
+    const {
+        levelColors,
+        options
+    } = defineProps<{
+        readonly levelColors?: (FluxColor | string)[];
+        readonly options: FluxTreeViewOption[];
+    }>();
+
+    const nodeElementRefs = useTemplateRef<HTMLDivElement[]>('nodeElements');
+
+    const expandedIds = ref(new Set<string | number>());
+
+    const visibleNodes = computed(() => flattenVisible(options, 0, unref(expandedIds)));
+
+    const {highlightedIndex, toggleExpand, onExpandClick, onKeyNavigate} = useTreeView({
+        expandedIds,
+        nodeElementRefs,
+        visibleNodes,
+    });
+
+    function onNodeClick(node: FlatNode): void {
+        const index = unref(visibleNodes).findIndex(n => n.id === node.id);
+        highlightedIndex.value = index;
+
+        const {depth: _depth, isLast: _isLast, lineGuides: _lineGuides, ...option} = node;
+        emit('click', option as FluxTreeViewOption);
+    }
+
+    function onNodeDblClick(node: FlatNode): void {
+        if (node.children?.length) {
+            toggleExpand(node.id);
+        }
+
+        const {depth: _depth, isLast: _isLast, lineGuides: _lineGuides, ...option} = node;
+        emit('dblclick', option as FluxTreeViewOption);
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        onKeyNavigate(evt, onNodeClick);
+    }
+</script>

package/src/component/index.ts

@@ -67,6 +67,7 @@ export { default as FluxFormSelectAsync } from './FluxFormSelectAsync.vue';
 export { default as FluxFormSlider } from './FluxFormSlider.vue';
 export { default as FluxFormTextArea } from './FluxFormTextArea.vue';
 export { default as FluxFormTimeZonePicker } from './FluxFormTimeZonePicker.vue';
+export { default as FluxFormTreeViewSelect } from './FluxFormTreeViewSelect.vue';
 export { default as FluxGallery } from './FluxGallery.vue';
 export { default as FluxGalleryItem } from './FluxGalleryItem.vue';
 export { default as FluxGrid } from './FluxGrid.vue';
@@ -151,4 +152,5 @@ export { default as FluxToolbar } from './FluxToolbar.vue';
 export { default as FluxToolbarGroup } from './FluxToolbarGroup.vue';
 export { default as FluxTooltip } from './FluxTooltip.vue';
 export { default as FluxTooltipProvider } from './FluxTooltipProvider.vue';
+export { default as FluxTreeView } from './FluxTreeView.vue';
 export { default as FluxWindow } from './FluxWindow.vue';

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;
+    }
+}