@flux-ui/components 3.0.0-next.6 → 3.0.0-next.60

package/src/composable/private/useTreeView.ts

@@ -0,0 +1,186 @@
+import type { FluxColor, FluxIconName } from '@flux-ui/types';
+import { nextTick, ref, unref, watch, type ComputedRef, type Ref } 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/components/data';
+
+export default function () {
+    return inject(FluxAdaptiveGroupInjectionKey, null);
+}

package/src/composable/useBreakpoints.ts

@@ -1,5 +1,4 @@
-import type { Ref } from 'vue';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, type Ref } from 'vue';
 
 const BREAKPOINTS = {
     xs: 0,

package/src/composable/useCalendarInjection.ts

@@ -0,0 +1,6 @@
+import { inject } from 'vue';
+import { FluxCalendarInjectionKey, type FluxCalendarInjection } from '~flux/components/data';
+
+export default function (): FluxCalendarInjection | null {
+    return inject(FluxCalendarInjectionKey, null);
+}

package/src/composable/useDisabled.ts

@@ -1,5 +1,4 @@
-import type { Ref } from 'vue';
-import { computed, unref } from 'vue';
+import { computed, unref, type Ref } from 'vue';
 import useDisabledInjection from './useDisabledInjection';
 
 export default function (componentDisabled: Ref<boolean>) {

package/src/composable/useDisabledInjection.ts

@@ -1,5 +1,5 @@
 import { inject, ref } from 'vue';
-import { FluxDisabledInjectionKey } from '$flux/data';
+import { FluxDisabledInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxDisabledInjectionKey, ref(false));

package/src/composable/useExpandableGroupInjection.ts

@@ -1,5 +1,5 @@
 import { inject } from 'vue';
-import { FluxExpandableGroupInjectionKey } from '$flux/data';
+import { FluxExpandableGroupInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxExpandableGroupInjectionKey, {

package/src/composable/useFilterInjection.ts

@@ -1,18 +1,11 @@
 import { inject, ref } from 'vue';
-import { FluxFilterInjectionKey } from '$flux/data';
+import { FluxFilterInjectionKey } from '~flux/components/data';
 
 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/useFlyoutInjection.ts

@@ -1,5 +1,5 @@
 import { inject, ref } from 'vue';
-import { FluxFlyoutInjectionKey } from '$flux/data';
+import { FluxFlyoutInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxFlyoutInjectionKey, {

package/src/composable/useFormFieldInjection.ts

@@ -1,5 +1,5 @@
 import { inject, useId } from 'vue';
-import { FluxFormFieldInjectionKey } from '$flux/data';
+import { FluxFormFieldInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxFormFieldInjectionKey, {

package/src/composable/useKanbanInjection.ts

@@ -0,0 +1,12 @@
+import { inject } from 'vue';
+import { FluxKanbanInjectionKey, type FluxKanbanInjection } from '~flux/components/data';
+
+export default function (): FluxKanbanInjection {
+    const injection = inject(FluxKanbanInjectionKey);
+
+    if (!injection) {
+        throw new Error('useFluxKanbanInjection must be used inside a FluxKanban.');
+    }
+
+    return injection;
+}

package/src/composable/useTabBarInjection.ts

@@ -0,0 +1,10 @@
+import { inject, ref } from 'vue';
+import { FluxTabBarInjectionKey } from '~flux/components/data';
+
+export default function () {
+    return inject(FluxTabBarInjectionKey, {
+        isPills: ref(false),
+        registerItem: () => undefined,
+        unregisterItem: () => undefined
+    });
+}

package/src/composable/useTableInjection.ts

@@ -1,5 +1,5 @@
 import { inject } from 'vue';
-import { FluxTableInjectionKey } from '$flux/data';
+import { FluxTableInjectionKey } from '~flux/components/data';
 
 export default function () {
     return inject(FluxTableInjectionKey, {

package/src/composable/useTooltipInjection.ts

@@ -0,0 +1,8 @@
+import { inject } from 'vue';
+import { FluxTooltipInjectionKey } from '~flux/components/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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .action {
     composes: button from './base/Button.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,23 @@
+.adaptiveGroup {
+    display: flex;
+    min-width: 0;
+    flex-flow: row nowrap;
+    gap: var(--gap, 9px);
+}
+
+.adaptiveSlot {
+    display: flex;
+    min-width: 0;
+    flex-flow: row nowrap;
+}
+
+.adaptiveSlotMeasurer {
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    width: max-content;
+    flex-flow: row nowrap;
+    pointer-events: none;
+    visibility: hidden;
+}

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .avatar {
     position: relative;
@@ -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);
     }
 }