@flux-ui/components 3.0.0-next.5 → 3.0.0-next.52

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/composable/useAdaptiveGroupInjection.ts

@@ -0,0 +1,6 @@
+import { inject } from 'vue';
+import { FluxAdaptiveGroupInjectionKey } from '$flux/data';
+
+export default function () {
+    return inject(FluxAdaptiveGroupInjectionKey, null);
+}

package/src/composable/useFilterInjection.ts

@@ -5,14 +5,7 @@ export default function () {
     return inject(FluxFilterInjectionKey, {
         // note(Bas): The default value is never used, but required by
         //  Vue, so that explains the empty getter and function below.
-        state: ref({
-            get resettable() {
-                return [];
-            },
-
-            reset(): void {
-            }
-        }),
+        state: ref({}),
         back: () => void 0,
         reset: () => void 0,
         getValue: () => void 0,

package/src/composable/useTooltipInjection.ts

@@ -0,0 +1,8 @@
+import { inject } from 'vue';
+import { FluxTooltipInjectionKey } from '$flux/data';
+
+export default function () {
+    return inject(FluxTooltipInjectionKey, {
+        calculate: () => void 0
+    });
+}

package/src/css/base.scss

@@ -1,16 +1,19 @@
 @use 'variables';
 
 @layer flux-base {
-    :root, [light] {
+    :root {
         @include variables.animation;
+        @include variables.defaults;
+    }
+
+    :root, [light] {
         @include variables.color-light;
-        @include variables.default-light;
         @include variables.shadow-light;
     }
 
     [dark] {
+        @include variables.defaults-dark;
         @include variables.color-dark;
-        @include variables.default-dark;
         @include variables.shadow-dark;
     }
 

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

@@ -8,15 +8,15 @@
     padding-left: 6px;
     padding-right: 6px;
     border: 0;
-    border-radius: calc(var(--radius) / 2);
+    border-radius: var(--radius-half);
     box-shadow: none;
 
     @include mixin.hover {
-        background: rgb(var(--gray-3));
+        background: var(--gray-100);
     }
 
     &:active {
-        background: rgb(var(--gray-2));
+        background: var(--gray-200);
     }
 
     .spinner {
@@ -32,7 +32,7 @@
 }
 
 .action.isDestructive .actionIcon {
-    color: rgb(var(--danger-7));
+    color: var(--danger-600);
 }
 
 .actionLabel {
@@ -57,9 +57,9 @@
 }
 
 .basePaneStructure > .actionBar {
-    padding: 15px 21px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-2));
+    padding: 12px 18px;
+    background: var(--gray-50);
+    border: 1px solid var(--gray-100);
     border-left: 0;
     border-right: 0;
 
@@ -76,10 +76,6 @@
     }
 }
 
-.paneHeader + .actionBar {
-    margin-top: 21px;
-}
-
 .actionPane {
     container: actionPane / inline-size;
 
@@ -99,6 +95,9 @@
 
 .actionPaneBody {
     position: relative;
-    padding: 0;
     text-wrap: pretty;
+
+    &:local(.paneBody) {
+        padding: 0;
+    }
 }

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

@@ -0,0 +1,25 @@
+.adaptiveGroup {
+    display: flex;
+    overflow: hidden;
+    flex-flow: row nowrap;
+    gap: var(--gap, 9px);
+    min-width: 0;
+}
+
+.adaptiveSlot {
+    display: flex;
+    overflow: hidden;
+    flex-flow: row nowrap;
+    min-width: 0;
+}
+
+.adaptiveSlotMeasurer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    visibility: hidden;
+    flex-flow: row nowrap;
+    width: max-content;
+    pointer-events: none;
+}

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

@@ -6,7 +6,7 @@
     height: 1em;
     width: 1em;
     flex: 0 0 1em;
-    border-radius: .5em;
+    border-radius: .3em;
     user-select: none;
 }
 
@@ -14,9 +14,9 @@
     display: block;
     height: inherit;
     width: inherit;
-    background: rgb(var(--gray-1));
+    background: var(--gray-50);
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-2));
+    box-shadow: inset 0 0 0 1px var(--gray-100);
 }
 
 .avatarFallback {
@@ -41,18 +41,18 @@
 .avatarFallbackColorized {
     composes: avatarFallback;
 
-    background: color-mix(in srgb, var(--color), rgb(var(--gray-0)) 80%);
+    background: color-mix(in srgb, var(--color), var(--gray-25) 80%);
     color: var(--color);
 }
 
 [dark] .avatarFallbackColorized {
-    background: color-mix(in srgb, var(--color), rgb(var(--gray-0)) 70%);
+    background: color-mix(in srgb, var(--color), var(--gray-25) 70%);
 }
 
 .avatarFallbackNeutral {
     composes: avatarFallback;
 
-    background: rgb(var(--gray-3));
+    background: var(--gray-100);
     color: var(--foreground-secondary);
 }
 
@@ -62,61 +62,60 @@
     inset: 0;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-1) / .84);
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-2));
+    background: rgb(from var(--gray-50) r g b / .84);
+    box-shadow: inset 0 0 0 1px var(--gray-100);
     border-radius: inherit;
     backdrop-filter: blur(3px) saturate(180%);
 
     :local(.spinner) {
-        --track: rgb(0 0 0 / .12);
+        --track: rgb(from var(--gray-950) r g b / .12);
     }
 }
 
 .avatarStatus {
     position: absolute;
     display: block;
-    right: 0.0238095238em;
-    bottom: 0.0238095238em;
-    height: 0.285714286em;
-    width: 0.285714286em;
-    background: black;
-    border-radius: 99px;
+    right: .021em;
+    bottom: .021em;
+    height: .27em;
+    width: .27em;
+    border-radius: var(--radius-full);
 }
 
 .avatarStatusGray {
     composes: avatarStatus;
 
-    background: rgb(var(--gray-6));
+    background: var(--gray-500);
 }
 
 .avatarStatusPrimary {
     composes: avatarStatus;
 
-    background: rgb(var(--primary-7));
+    background: var(--primary-600);
 }
 
 .avatarStatusDanger {
     composes: avatarStatus;
 
-    background: rgb(var(--danger-7));
+    background: var(--danger-600);
 }
 
 .avatarStatusInfo {
     composes: avatarStatus;
 
-    background: rgb(var(--info-7));
+    background: var(--info-600);
 }
 
 .avatarStatusSuccess {
     composes: avatarStatus;
 
-    background: rgb(var(--success-7));
+    background: var(--success-600);
 }
 
 .avatarStatusWarning {
     composes: avatarStatus;
 
-    background: rgb(var(--warning-7));
+    background: var(--warning-600);
 }
 
 .avatarClickable {
@@ -134,8 +133,8 @@
 
 .statusAvatar .avatarFallback,
 .statusAvatar .avatarImage {
-    mask: url('$flux/image/avatar-mask.svg') no-repeat center center / cover;
-    -webkit-mask: url('$flux/image/avatar-mask.svg') no-repeat center center / cover;
+    mask: radial-gradient(circle .18em at calc(100% - 0.16em) calc(100% - 0.16em), transparent 100%, #000 100%);
+    -webkit-mask: radial-gradient(circle .18em at calc(100% - 0.16em) calc(100% - 0.16em), transparent 100%, #000 100%);
 }
 
 .persona {
@@ -148,13 +147,13 @@
     border-radius: var(--radius);
     cursor: pointer;
     text-align: left;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: background, mixin.focus-ring-transition-properties();
 
     @include mixin.focus-ring(2px);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
     }
 }
 

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

@@ -10,21 +10,22 @@
     padding-right: 9px;
     align-items: center;
     gap: 6px;
-    background: rgb(var(--gray-0));
-    border: 1px solid rgb(var(--gray-3));
-    border-radius: 99px;
+    background: var(--surface);
+    border: 1px solid var(--surface-stroke);
+    border-radius: var(--radius-full);
     color: var(--foreground-prominent);
     font-size: 13px;
     font-weight: 500;
+    font-variant-numeric: tabular-nums;
 
-    &:is(a) {
+    &:is(a, button) {
         color: var(--foreground-prominent);
         cursor: pointer;
         text-decoration: none;
-        transition: background 180ms var(--swift-out);
+        transition: background var(--transition-default);
 
         @include mixin.hover {
-            background: rgb(var(--gray-1));
+            background: var(--gray-50);
             color: var(--foreground-prominent);
         }
     }
@@ -44,17 +45,17 @@
     justify-content: center;
     background: unset;
     border: 0;
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground-secondary);
     cursor: pointer;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
         color: var(--foreground);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
+        background: var(--gray-200);
         color: var(--foreground);
     }
 
@@ -68,7 +69,7 @@
     height: 9px;
     width: 9px;
     background: var(--color);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
 }
 
 .badgeIcon {
@@ -91,60 +92,67 @@
 .badgeGray {
     composes: badge;
 
-    --color: rgb(var(--gray-8));
+    --color: var(--foreground);
 
     .badgeLabel {
         color: var(--foreground-prominent);
     }
 
     .spinner {
-        --value: rgb(var(--primary-7));
+        --value: var(--primary-600);
     }
 }
 
 .badgePrimary {
     composes: badge;
 
-    --color: rgb(var(--primary-7));
+    --color: var(--primary-600);
 }
 
 .badgeDanger {
     composes: badge;
 
-    --color: rgb(var(--danger-7));
+    --color: var(--danger-600);
 }
 
 .badgeInfo {
     composes: badge;
 
-    --color: rgb(var(--info-7));
+    --color: var(--info-600);
 }
 
 .badgeSuccess {
     composes: badge;
 
-    --color: rgb(var(--success-7));
+    --color: var(--success-600);
 }
 
 .badgeWarning {
     composes: badge;
 
-    --color: rgb(var(--warning-7));
+    --color: var(--warning-600);
 }
 
 .tag {
     composes: badge;
 
-    background: rgb(var(--gray-1));
-    border-color: rgb(var(--gray-3));
-    border-radius: calc(var(--radius) / 2);
+    background: var(--gray-50);
+    border-color: var(--gray-200);
+    border-radius: var(--radius-half);
     font-weight: 400;
 }
 
+.tagKeyboardShortcut {
+    composes: tag;
+
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
 .tagClose {
     composes: badgeClose;
 
-    border-radius: calc(var(--radius) / 3);
+    border-radius: var(--radius-half);
 }
 
 .tagDot {