@flux-ui/components 3.0.0-next.7 → 3.0.0-next.70

package/src/component/FluxSegmentedControl.vue

@@ -1,7 +1,10 @@
 <template>
-    <nav
+    <div
         ref="control"
-        :class="isFill ? $style.segmentedControlFill : $style.segmentedControlInline">
+        :class="isFill ? $style.segmentedControlFill : $style.segmentedControlInline"
+        role="radiogroup"
+        :aria-label="ariaLabel"
+        @keydown="onKeyDown">
         <div
             v-if="activeItemWidth > 0"
             :class="$style.segmentedControlHighlight"
@@ -25,6 +28,10 @@
                     $style.segmentedControlItem,
                     index === modelValue && $style.isActive
                 )"
+                role="radio"
+                :aria-checked="index === modelValue"
+                :aria-label="item.label"
+                :tabindex="index === modelValue ? 0 : -1"
                 type="button"
                 @click="activate(index)">
                 <FluxIcon
@@ -32,26 +39,28 @@
                     :name="item.icon"
                     :size="15"/>
 
-                <span>{{ item.label }}</span>
+                <span v-if="item.label">{{ item.label }}</span>
             </button>
         </template>
-    </nav>
+    </div>
 </template>
 
 <script
     lang="ts"
     setup>
+    import { useResizeObserver } from '@basmilius/common';
     import type { FluxSegmentedControlItemObject } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { onMounted, onUpdated, ref, unref, useTemplateRef } from 'vue';
+    import { onBeforeUnmount, ref, unref, useTemplateRef, watchEffect } from 'vue';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/SegmentedControl.module.scss';
+    import $style from '~flux/components/css/component/SegmentedControl.module.scss';
 
     const modelValue = defineModel<number>({
         default: 0
     });
 
     defineProps<{
+        readonly ariaLabel?: string;
         readonly isFill?: boolean;
         readonly items: FluxSegmentedControlItemObject[];
     }>();
@@ -61,17 +70,82 @@
 
     const activeItemX = ref(0);
     const activeItemWidth = ref(0);
+    const isAlive = ref(true);
 
-    onMounted(() => activate(unref(modelValue)));
-    onUpdated(() => activate(unref(modelValue)));
+    onBeforeUnmount(() => {
+        isAlive.value = false;
+    });
+
+    watchEffect(() => updateHighlight(unref(modelValue)), {flush: 'post'});
+
+    useResizeObserver(controlRef, () => updateHighlight(unref(modelValue)));
 
     function activate(index: number): void {
-        const itemRef = itemRefs.value![index];
-        const {left: controlX} = controlRef.value!.getBoundingClientRect();
-        const {width, left: x} = itemRef.getBoundingClientRect();
+        modelValue.value = index;
+
+        const itemRef = itemRefs.value?.[index];
+        itemRef?.focus();
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        const items = itemRefs.value;
+
+        if (!items) {
+            return;
+        }
+
+        let newIndex: number | null = null;
+
+        switch (evt.key) {
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                newIndex = Math.max(0, unref(modelValue) - 1);
+                break;
+
+            case 'ArrowRight':
+            case 'ArrowDown':
+                newIndex = Math.min(items.length - 1, unref(modelValue) + 1);
+                break;
+
+            case 'Home':
+                newIndex = 0;
+                break;
 
-        activeItemX.value = x - controlX - 1;
+            case 'End':
+                newIndex = items.length - 1;
+                break;
+
+            default:
+                return;
+        }
+
+        activate(newIndex);
+        evt.preventDefault();
+    }
+
+    function updateHighlight(index: number): void {
+        if (!isAlive.value) {
+            return;
+        }
+
+        const itemRef = itemRefs.value?.[index];
+        const control = controlRef.value;
+
+        if (!itemRef || !control) {
+            return;
+        }
+
+        const width = itemRef.offsetWidth;
+
+        if (width === 0) {
+            return;
+        }
+
+        const controlRect = control.getBoundingClientRect();
+        const itemRect = itemRef.getBoundingClientRect();
+        const scaleX = control.offsetWidth > 0 ? controlRect.width / control.offsetWidth : 1;
+
+        activeItemX.value = (itemRect.left - controlRect.left) / scaleX;
         activeItemWidth.value = width;
-        modelValue.value = index;
     }
 </script>

package/src/component/FluxSeparator.vue

@@ -9,7 +9,7 @@
     lang="ts"
     setup>
     import type { FluxDirection } from '@flux-ui/types';
-    import $style from '$flux/css/component/Divider.module.scss';
+    import $style from '~flux/components/css/component/Divider.module.scss';
 
     const {
         direction = 'horizontal'

package/src/component/FluxSlideOver.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { FluxSlideOverTransition } from '$flux/transition';
-    import { createDialogRenderer } from '$flux/util';
-    import $style from '$flux/css/component/Overlay.module.scss';
+    import { FluxSlideOverTransition } from '~flux/components/transition';
+    import { createDialogRenderer } from '~flux/components/util';
+    import $style from '~flux/components/css/component/Overlay.module.scss';
 
     export default defineComponent({
         emits: ['close'],

package/src/component/FluxSnackbar.vue

@@ -74,13 +74,13 @@
     setup>
     import type { FluxColor, FluxIconName, FluxSnackbarObject } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { computed, getCurrentInstance, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
-    import { addSnackbar, removeSnackbar, updateSnackbar } from '$flux/data';
+    import { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+    import { addSnackbar, removeSnackbar, updateSnackbar } from '~flux/components/data';
     import FluxAction from './FluxAction.vue';
     import FluxIcon from './FluxIcon.vue';
     import FluxProgressBar from './FluxProgressBar.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Snackbar.module.scss';
+    import $style from '~flux/components/css/component/Snackbar.module.scss';
 
     const emit = defineEmits<{
         action: [string];
@@ -90,7 +90,18 @@
     const {
         actions,
         color = 'gray',
-        isRendered
+        icon,
+        isCloseable,
+        isLoading,
+        isRendered,
+        message,
+        progressIndeterminate,
+        progressMax,
+        progressMin,
+        progressStatus,
+        progressValue,
+        subMessage,
+        title
     } = defineProps<{
         readonly actions?: Record<string, string>;
         readonly color?: FluxColor;
@@ -108,8 +119,6 @@
         readonly title?: string;
     }>();
 
-    const instance = getCurrentInstance()!;
-
     const id = ref<number | null>(null);
 
     const hasActions = computed(() => actions && Object.entries(actions).length > 0);
@@ -128,12 +137,33 @@
         emit('close');
     }
 
+    function buildSpec(): Omit<FluxSnackbarObject, 'id'> {
+        return {
+            actions,
+            color,
+            icon,
+            isCloseable,
+            isLoading,
+            isRendered,
+            message,
+            progressIndeterminate,
+            progressMax,
+            progressMin,
+            progressStatus,
+            progressValue,
+            subMessage,
+            title,
+            onAction,
+            onClose
+        };
+    }
+
     watchEffect(() => {
         if (!id.value) {
             return;
         }
 
-        updateSnackbar(id.value, instance.props);
+        updateSnackbar(id.value, buildSpec());
     });
 
     watch(() => isRendered, () => {
@@ -145,10 +175,6 @@
             return;
         }
 
-        let spec: Omit<FluxSnackbarObject, 'id'> = instance.props;
-        spec.onAction = onAction;
-        spec.onClose = onClose;
-
-        id.value = addSnackbar(spec);
+        id.value = addSnackbar(buildSpec());
     }, {immediate: true});
 </script>

package/src/component/FluxSnackbarProvider.vue

@@ -22,9 +22,9 @@
     lang="ts"
     setup>
     import type { FluxSnackbarObject } from '@flux-ui/types';
-    import { useFluxStore } from '$flux/data';
+    import { useFluxStore } from '~flux/components/data';
     import FluxSnackbar from './FluxSnackbar.vue';
-    import $style from '$flux/css/component/Snackbar.module.scss';
+    import $style from '~flux/components/css/component/Snackbar.module.scss';
 
     const {snackbars} = useFluxStore();
 

package/src/component/FluxSpacer.vue

@@ -5,5 +5,5 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Layout.module.scss';
+    import $style from '~flux/components/css/component/Layout.module.scss';
 </script>

package/src/component/FluxSpinner.vue

@@ -40,7 +40,7 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Spinner.module.scss';
+    import $style from '~flux/components/css/component/Spinner.module.scss';
 
     defineProps<{
         readonly size?: number;

package/src/component/FluxSplitButton.vue

@@ -28,9 +28,10 @@
     setup
     lang="ts">
     import type { FluxDirection, FluxIconName } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     const {
         buttonIcon = 'ellipsis-h'
@@ -47,7 +48,7 @@
             close(): void;
             open(): void;
             toggle(): void;
-        }): any;
+        }): VNode[];
 
         flyout(props: {
             close(): void;
@@ -56,6 +57,6 @@
             readonly paneY: number;
             readonly openerWidth: number;
             readonly openerHeight: number;
-        }): any;
+        }): VNode[];
     }>();
 </script>

package/src/component/FluxSplitView.vue

@@ -0,0 +1,101 @@
+<template>
+    <Component
+        :is="tag ?? 'div'"
+        ref="container"
+        :class="clsx(
+            direction === 'horizontal' && $style.splitViewHorizontal,
+            direction === 'vertical' && $style.splitViewVertical,
+            isDragging && $style.splitViewDragging
+        )"
+        :style="templateStyle">
+        <template v-for="(pane, index) in panes" :key="pane.id">
+            <component :is="pane.vnode"/>
+
+            <button
+                v-if="index < panes.length - 1"
+                :class="direction === 'horizontal' ? $style.splitViewHandle : $style.splitViewHandleVertical"
+                type="button"
+                role="separator"
+                :aria-orientation="direction === 'horizontal' ? 'vertical' : 'horizontal'"
+                :aria-valuemin="0"
+                :aria-valuenow="Math.round(sizes[index] ?? 0)"
+                :tabindex="pane.isResizable ? 0 : -1"
+                @pointerdown="onHandlePointerDown($event, index)"
+                @keydown="onHandleKeyDown($event, index)"/>
+        </template>
+    </Component>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { flattenVNodeTree } from '@flux-ui/internals';
+    import type { FluxDirection } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, toRef, useTemplateRef, type VNode } from 'vue';
+    import { type SplitViewPane, useSplitView } from '~flux/components/composable/private';
+    import FluxSplitViewPane from './FluxSplitViewPane.vue';
+    import $style from '~flux/components/css/component/SplitView.module.scss';
+
+    type ParsedPane = SplitViewPane & {
+        readonly vnode: VNode;
+    };
+
+    const {
+        direction = 'horizontal',
+        rememberKey
+    } = defineProps<{
+        readonly direction?: FluxDirection;
+        readonly rememberKey?: string;
+        readonly tag?: keyof HTMLElementTagNameMap;
+    }>();
+
+    const slots = defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const containerRef = useTemplateRef<HTMLElement>('container');
+
+    const panes = computed<readonly ParsedPane[]>(() => {
+        const vnodes = flattenVNodeTree(slots.default?.() ?? []);
+        const out: ParsedPane[] = [];
+
+        for (const vnode of vnodes) {
+            if (vnode.type !== FluxSplitViewPane) {
+                continue;
+            }
+
+            const props = vnode.props ?? {};
+            const defaultSize = props.defaultSize ?? props['default-size'];
+            const minSize = props.minSize ?? props['min-size'];
+            const maxSize = props.maxSize ?? props['max-size'];
+            const isResizable = props.isResizable ?? props['is-resizable'];
+
+            out.push({
+                id: out.length,
+                vnode,
+                defaultSize: defaultSize as number | string | undefined,
+                minSize: typeof minSize === 'number' ? minSize : 64,
+                maxSize: typeof maxSize === 'number' ? maxSize : undefined,
+                isResizable: isResizable !== false && isResizable !== 'false'
+            });
+        }
+
+        return out;
+    });
+
+    const paneSpecs = computed<readonly SplitViewPane[]>(() => panes.value);
+
+    const {
+        sizes,
+        templateStyle,
+        isDragging,
+        onHandlePointerDown,
+        onHandleKeyDown
+    } = useSplitView({
+        containerRef,
+        direction: toRef(() => direction),
+        panes: paneSpecs,
+        rememberKey
+    });
+</script>

package/src/component/FluxSplitViewPane.vue

@@ -0,0 +1,23 @@
+<template>
+    <div :class="$style.splitViewPane">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/SplitView.module.scss';
+
+    defineProps<{
+        readonly defaultSize?: number | string;
+        readonly minSize?: number;
+        readonly maxSize?: number;
+        readonly isResizable?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

package/src/component/FluxStatistic.vue

@@ -9,16 +9,25 @@
             color === 'info' && $style.isInfo,
             color === 'success' && $style.isSuccess,
             color === 'warning' && $style.isWarning
-        )">
-        <div :class="$style.statisticIcon">
-            <FluxIcon
-                :name="icon"
-                :size="24"/>
+        )"
+        :is-loading="isLoading">
+        <FluxBoxedIcon
+            v-if="icon"
+            :class="$style.statisticIcon"
+            :color="color"
+            :name="icon"
+            :size="48"/>
+
+        <div v-else-if="imageSrc">
+            <img
+                :class="$style.statisticImage"
+                :src="imageSrc"
+                :alt="imageAlt"/>
         </div>
 
         <div :class="$style.statisticData">
             <span>{{ label }}</span>
-            <strong>{{ value }}</strong>
+            <strong>{{ value ?? MDASH }}</strong>
         </div>
 
         <div
@@ -45,11 +54,13 @@
 <script
     lang="ts"
     setup>
+    import { MDASH } from '@basmilius/utils';
     import type { FluxColor, FluxDirection, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import FluxBoxedIcon from './FluxBoxedIcon.vue';
     import FluxIcon from './FluxIcon.vue';
     import FluxPane from './FluxPane.vue';
-    import $style from '$flux/css/component/Statistic.module.scss';
+    import $style from '~flux/components/css/component/Statistic.module.scss';
 
     const {
         changeColor = 'gray',
@@ -58,11 +69,14 @@
     } = defineProps<{
         readonly changeColor?: FluxColor;
         readonly changeIcon?: FluxIconName;
-        readonly changeValue?: string;
+        readonly changeValue?: string | number | null;
         readonly color?: FluxColor;
         readonly direction?: FluxDirection;
-        readonly icon: FluxIconName;
+        readonly icon?: FluxIconName;
+        readonly imageSrc?: string;
+        readonly imageAlt?: string;
+        readonly isLoading?: boolean;
         readonly label: string;
-        readonly value: string;
+        readonly value?: string | number | null;
     }>();
 </script>

package/src/component/FluxStepper.vue

@@ -23,8 +23,8 @@
     lang="ts"
     setup>
     import { flattenVNodeTree } from '@flux-ui/internals';
-    import { computed, ref, unref, VNode, watch } from 'vue';
-    import { FluxWindowTransition } from '$flux/transition';
+    import { computed, ref, unref, type VNode, watch } from 'vue';
+    import { FluxWindowTransition } from '~flux/components/transition';
     import FluxDynamicView from './FluxDynamicView.vue';
     import FluxStepperSteps from './FluxStepperSteps.vue';
 
@@ -33,7 +33,7 @@
     });
 
     const slots = defineSlots<{
-        default(): any;
+        default(): VNode[];
 
         content(props: {
             activate(index: number): void;
@@ -43,14 +43,14 @@
             readonly modelValue: number;
             readonly steps: number;
             readonly view: VNode;
-        }): any;
+        }): VNode[];
 
         steps(props: {
             activate(index: number): void;
 
             readonly modelValue: number;
             readonly steps: number;
-        }): any;
+        }): VNode[];
     }>();
 
     const isTransitioningBack = ref(false);

package/src/component/FluxStepperStep.vue

@@ -7,9 +7,10 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Stepper.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Stepper.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxStepperSteps.vue

@@ -38,9 +38,9 @@
     setup>
     import { clsx } from 'clsx';
     import { computed } from 'vue';
-    import { FluxFadeTransition } from '$flux/transition';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Stepper.module.scss';
+    import $style from '~flux/components/css/component/Stepper.module.scss';
 
     const emit = defineEmits<{
         activate: [number];

package/src/component/FluxSticky.vue

@@ -0,0 +1,67 @@
+<template>
+    <div
+        v-if="position === 'top'"
+        ref="sentinel"
+        :class="$style.stickySentinel"
+        aria-hidden="true"/>
+
+    <Component
+        :is="tag ?? 'div'"
+        :class="clsx(
+            position === 'top' ? $style.stickyTop : $style.stickyBottom,
+            hasShadowOnStick && $style.hasShadow
+        )"
+        :data-stuck="isStuck"
+        :style="{'--offset': `${offset}px`}">
+        <slot v-bind="{isStuck}"/>
+    </Component>
+
+    <div
+        v-if="position === 'bottom'"
+        ref="sentinel"
+        :class="$style.stickySentinel"
+        aria-hidden="true"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import { ref, useTemplateRef, type VNode, watch } from 'vue';
+    import $style from '~flux/components/css/component/Sticky.module.scss';
+
+    const {
+        offset = 0,
+        position = 'top'
+    } = defineProps<{
+        readonly hasShadowOnStick?: boolean;
+        readonly offset?: number;
+        readonly position?: 'top' | 'bottom';
+        readonly tag?: keyof HTMLElementTagNameMap;
+    }>();
+
+    defineSlots<{
+        default(props: { isStuck: boolean }): VNode[];
+    }>();
+
+    const sentinelRef = useTemplateRef<HTMLElement>('sentinel');
+    const isStuck = ref(false);
+
+    watch(sentinelRef, (sentinel, _, onCleanup) => {
+        if (!sentinel) {
+            return;
+        }
+
+        const observer = new IntersectionObserver(([entry]) => {
+            isStuck.value = !entry.isIntersecting;
+        }, {
+            threshold: 0
+        });
+
+        observer.observe(sentinel);
+
+        onCleanup(() => {
+            observer.disconnect();
+        });
+    }, {immediate: true});
+</script>

package/src/component/FluxTab.vue

@@ -10,7 +10,8 @@
     lang="ts"
     setup>
     import type { FluxIconName } from '@flux-ui/types';
-    import $style from '$flux/css/component/Tab.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Tab.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;
@@ -18,6 +19,6 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>