@flux-ui/components 3.0.0-next.9 → 3.0.0

package/src/composable/private/useSplitView.ts

@@ -0,0 +1,260 @@
+import { useRemembered } from '@flux-ui/internals';
+import type { FluxDirection } from '@flux-ui/types';
+import { computed, type ComputedRef, nextTick, onMounted, ref, type Ref, watch } from 'vue';
+
+export type SplitViewPane = {
+    readonly id: number;
+    readonly defaultSize: number | string | undefined;
+    readonly minSize: number;
+    readonly maxSize: number | undefined;
+    readonly isResizable: boolean;
+};
+
+export type UseSplitViewOptions = {
+    readonly containerRef: Readonly<Ref<HTMLElement | null>>;
+    readonly direction: Readonly<Ref<FluxDirection>>;
+    readonly panes: Readonly<Ref<readonly SplitViewPane[]>>;
+    readonly rememberKey: string | undefined;
+};
+
+export type UseSplitViewReturn = {
+    readonly sizes: Readonly<Ref<readonly number[]>>;
+    readonly templateStyle: ComputedRef<Record<string, string>>;
+    readonly isDragging: Readonly<Ref<boolean>>;
+
+    onHandleKeyDown(evt: KeyboardEvent, handleIndex: number): void;
+    onHandlePointerDown(evt: PointerEvent, handleIndex: number): void;
+};
+
+const HANDLE_SIZE = 6;
+const KEY_STEP = 16;
+const KEY_STEP_LARGE = 64;
+
+export function useSplitView(options: UseSplitViewOptions): UseSplitViewReturn {
+    const sizes = ref<number[]>([]);
+    const isDragging = ref(false);
+    const persisted = options.rememberKey
+        ? useRemembered<number[] | null>(`split-view/${options.rememberKey}`, null)
+        : null;
+
+    const containerSize = (): number => {
+        const el = options.containerRef.value;
+
+        if (!el) {
+            return 0;
+        }
+
+        return options.direction.value === 'horizontal' ? el.clientWidth : el.clientHeight;
+    };
+
+    const computeInitialSizes = (): number[] => {
+        const persistedValue = persisted?.value;
+
+        if (persistedValue && persistedValue.length === options.panes.value.length) {
+            return [...persistedValue];
+        }
+
+        const total = containerSize();
+        const handleSpace = Math.max(0, options.panes.value.length - 1) * HANDLE_SIZE;
+        const available = Math.max(0, total - handleSpace);
+        const result: number[] = [];
+
+        let claimed = 0;
+        let flexCount = 0;
+
+        for (const pane of options.panes.value) {
+            if (typeof pane.defaultSize === 'number') {
+                result.push(pane.defaultSize);
+                claimed += pane.defaultSize;
+            } else if (typeof pane.defaultSize === 'string' && pane.defaultSize.endsWith('%')) {
+                const percentage = parseFloat(pane.defaultSize) / 100;
+                const size = available * percentage;
+                result.push(size);
+                claimed += size;
+            } else {
+                result.push(-1);
+                flexCount++;
+            }
+        }
+
+        const flexShare = flexCount > 0 ? Math.max(0, (available - claimed) / flexCount) : 0;
+
+        return result.map(size => size === -1 ? flexShare : size);
+    };
+
+    const clampSizes = (next: number[]): number[] => {
+        return next.map((size, i) => {
+            const pane = options.panes.value[i];
+            const min = pane.minSize;
+            const max = pane.maxSize ?? Infinity;
+            return Math.min(Math.max(size, min), max);
+        });
+    };
+
+    onMounted(async () => {
+        await nextTick();
+        sizes.value = computeInitialSizes();
+    });
+
+    watch(() => options.panes.value.length, () => {
+        sizes.value = computeInitialSizes();
+    });
+
+    watch(sizes, value => {
+        if (persisted && !isDragging.value) {
+            persisted.value = [...value];
+        }
+    }, {deep: true});
+
+    const templateStyle = computed(() => {
+        const direction = options.direction.value;
+        const property = direction === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows';
+        const tracks: string[] = [];
+
+        for (let i = 0; i < sizes.value.length; i++) {
+            tracks.push(`${sizes.value[i]}px`);
+
+            if (i < sizes.value.length - 1) {
+                tracks.push(`${HANDLE_SIZE}px`);
+            }
+        }
+
+        return {[property]: tracks.join(' ')};
+    });
+
+    function isHandleResizable(handleIndex: number): boolean {
+        const leftPane = options.panes.value[handleIndex];
+        const rightPane = options.panes.value[handleIndex + 1];
+
+        return !!leftPane?.isResizable && !!rightPane?.isResizable;
+    }
+
+    function applyDelta(handleIndex: number, delta: number): void {
+        const next = [...sizes.value];
+        const leftIndex = handleIndex;
+        const rightIndex = handleIndex + 1;
+        const leftPane = options.panes.value[leftIndex];
+        const rightPane = options.panes.value[rightIndex];
+
+        const leftMin = leftPane.minSize;
+        const leftMax = leftPane.maxSize ?? Infinity;
+        const rightMin = rightPane.minSize;
+        const rightMax = rightPane.maxSize ?? Infinity;
+
+        let newLeft = next[leftIndex] + delta;
+        let newRight = next[rightIndex] - delta;
+
+        if (newLeft < leftMin) {
+            const overshoot = leftMin - newLeft;
+            newLeft = leftMin;
+            newRight -= overshoot;
+        } else if (newLeft > leftMax) {
+            const overshoot = newLeft - leftMax;
+            newLeft = leftMax;
+            newRight += overshoot;
+        }
+
+        if (newRight < rightMin) {
+            const overshoot = rightMin - newRight;
+            newRight = rightMin;
+            newLeft -= overshoot;
+        } else if (newRight > rightMax) {
+            const overshoot = newRight - rightMax;
+            newRight = rightMax;
+            newLeft += overshoot;
+        }
+
+        next[leftIndex] = newLeft;
+        next[rightIndex] = newRight;
+
+        sizes.value = clampSizes(next);
+    }
+
+    function onHandlePointerDown(evt: PointerEvent, handleIndex: number): void {
+        if (evt.button !== 0 || !isHandleResizable(handleIndex)) {
+            return;
+        }
+
+        evt.preventDefault();
+        const target = evt.currentTarget as HTMLElement;
+        target.setPointerCapture(evt.pointerId);
+
+        isDragging.value = true;
+
+        const isHorizontal = options.direction.value === 'horizontal';
+        const startCoord = isHorizontal ? evt.clientX : evt.clientY;
+        const startSizes = [...sizes.value];
+
+        const onMove = (moveEvt: PointerEvent): void => {
+            const currentCoord = isHorizontal ? moveEvt.clientX : moveEvt.clientY;
+            const delta = currentCoord - startCoord;
+
+            sizes.value = clampSizes(startSizes.map((size, i) => {
+                if (i === handleIndex) {
+                    return size + delta;
+                }
+
+                if (i === handleIndex + 1) {
+                    return size - delta;
+                }
+
+                return size;
+            }));
+        };
+
+        const onUp = (upEvt: PointerEvent): void => {
+            target.releasePointerCapture(upEvt.pointerId);
+            target.removeEventListener('pointermove', onMove);
+            target.removeEventListener('pointerup', onUp);
+            target.removeEventListener('pointercancel', onUp);
+
+            isDragging.value = false;
+
+            if (persisted) {
+                persisted.value = [...sizes.value];
+            }
+        };
+
+        target.addEventListener('pointermove', onMove);
+        target.addEventListener('pointerup', onUp);
+        target.addEventListener('pointercancel', onUp);
+    }
+
+    function onHandleKeyDown(evt: KeyboardEvent, handleIndex: number): void {
+        if (!isHandleResizable(handleIndex)) {
+            return;
+        }
+
+        const isHorizontal = options.direction.value === 'horizontal';
+        const decreaseKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+        const increaseKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+        const step = evt.shiftKey ? KEY_STEP_LARGE : KEY_STEP;
+
+        if (evt.key === decreaseKey) {
+            evt.preventDefault();
+            applyDelta(handleIndex, -step);
+        } else if (evt.key === increaseKey) {
+            evt.preventDefault();
+            applyDelta(handleIndex, step);
+        } else if (evt.key === 'Home') {
+            evt.preventDefault();
+            const leftPane = options.panes.value[handleIndex];
+            const delta = leftPane.minSize - sizes.value[handleIndex];
+            applyDelta(handleIndex, delta);
+        } else if (evt.key === 'End') {
+            evt.preventDefault();
+            const leftPane = options.panes.value[handleIndex];
+            const max = leftPane.maxSize ?? sizes.value[handleIndex] + sizes.value[handleIndex + 1] - options.panes.value[handleIndex + 1].minSize;
+            const delta = max - sizes.value[handleIndex];
+            applyDelta(handleIndex, delta);
+        }
+    }
+
+    return {
+        sizes,
+        templateStyle,
+        isDragging,
+        onHandleKeyDown,
+        onHandlePointerDown
+    };
+}

package/src/composable/private/useTranslate.ts

@@ -1,6 +1,5 @@
 import { getCurrentInstance } from 'vue';
-import type { FluxTranslate, FluxTranslation } from '$flux/data';
-import { english } from '$flux/data';
+import { english, type FluxTranslate, type FluxTranslation } from '~flux/components/data';
 
 const fallback: FluxTranslate = (key, params) => {
     if (!(key in english)) {

package/src/composable/private/useTreeView.ts

@@ -0,0 +1,190 @@
+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);
+
+        if (nodes.length === 0) {
+            return false;
+        }
+
+        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 && nodes[current]) {
+                    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,
@@ -21,21 +20,19 @@ export default function () {
         const width = window.innerWidth;
         let activeBreakpoint: Breakpoint | null = null;
 
-        for (const [key, value] of Object.entries(BREAKPOINTS).reverse() as [
+        for (const [key, value] of Object.entries(BREAKPOINTS) as [
             Breakpoint,
             number
         ][]) {
-            if (width >= value) {
+            const isActive = width >= value;
+            breakpointRefs[key].value = isActive;
+
+            if (isActive) {
                 activeBreakpoint = key;
-                break;
             }
         }
 
         currentBreakpoint.value = activeBreakpoint;
-
-        for (const key of Object.keys(BREAKPOINTS) as Breakpoint[]) {
-            breakpointRefs[key].value = key === activeBreakpoint;
-        }
     };
 
     onMounted(() => {

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,22 +1,17 @@
 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,
+        clear: () => void 0,
+        getDefinition: () => undefined,
         getValue: () => void 0,
         hasValue: () => false,
+        reset: () => void 0,
         setValue: () => 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/useSegmentedControlInjection.ts

@@ -0,0 +1,13 @@
+import type { FluxSize } from '@flux-ui/types';
+import { inject, ref } from 'vue';
+import { FluxSegmentedControlInjectionKey, type FluxSegmentedControlValue } from '~flux/components/data';
+
+export default function () {
+    return inject(FluxSegmentedControlInjectionKey, {
+        modelValue: ref<FluxSegmentedControlValue | undefined>(undefined),
+        size: ref<FluxSize>('medium'),
+        select: () => undefined,
+        registerItem: () => undefined,
+        unregisterItem: () => undefined
+    });
+}

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,11 +1,11 @@
-import { inject } from 'vue';
-import { FluxTableInjectionKey } from '$flux/data';
+import { inject, ref } from 'vue';
+import { FluxTableInjectionKey } from '~flux/components/data';
 
 export default function () {
-    return inject(FluxTableInjectionKey, {
-        isBordered: false,
-        isHoverable: false,
-        isSeparated: false,
-        isStriped: false
-    });
+    return inject(FluxTableInjectionKey, () => ({
+        isBordered: ref(false),
+        isHoverable: ref(false),
+        isSeparated: ref(false),
+        isStriped: ref(false)
+    }), true);
 }

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