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

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/FluxStack.vue

@@ -9,7 +9,7 @@
             isWrapping && $style.isWrapping
         )"
         :style="{
-            '--gap': gap && `${gap}px`
+            '--gap': gap != null ? `${gap}px` : undefined
         }">
         <slot/>
     </Component>
@@ -20,11 +20,12 @@
     setup>
     import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import $style from '$flux/css/component/Layout.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Layout.module.scss';
 
     const {
         direction = 'vertical',
-        gap = 30
+        gap = 18
     } = defineProps<{
         readonly direction?: FluxDirection;
         readonly gap?: number;
@@ -35,6 +36,6 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        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/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>

package/src/component/FluxTabBar.vue

@@ -1,61 +1,104 @@
 <template>
     <nav
-        :class="$style.tabBar"
+        :class="isPills ? $style.tabBarPills : $style.tabBarDefault"
         role="tablist"
         aria-orientation="horizontal">
-        <button
-            v-if="isStartArrowVisible"
-            :class="$style.tabBarArrowStart"
-            tabindex="-1"
-            type="button"
-            @click="scrollToStart">
-            <FluxIcon name="angle-left"/>
-        </button>
+        <FluxFadeTransition>
+            <button
+                v-if="isStartArrowVisible"
+                :class="$style.tabBarArrowStart"
+                tabindex="-1"
+                type="button"
+                @click="scrollToStart">
+                <FluxIcon name="angle-left"/>
+            </button>
+        </FluxFadeTransition>
 
         <div
             ref="tabBar"
             :class="clsx(
-                $style.tabBarTabs,
+                isPills ? $style.tabBarTabsPills : $style.tabBarTabsDefault,
                 isEndArrowVisible && $style.isEndMasked,
                 isStartArrowVisible && $style.isStartMasked
             )">
+            <div
+                v-if="activeItemWidth > 0"
+                :class="isPills ? $style.tabBarHighlightPills : $style.tabBarHighlightDefault"
+                :style="{
+                    left: `${activeItemX}px`,
+                    width: `${activeItemWidth}px`
+                }"/>
             <slot/>
         </div>
 
-        <button
-            v-if="isEndArrowVisible"
-            :class="$style.tabBarArrowEnd"
-            tabindex="-1"
-            type="button"
-            @click="scrollToEnd">
-            <FluxIcon name="angle-right"/>
-        </button>
+        <FluxFadeTransition>
+            <button
+                v-if="isEndArrowVisible"
+                :class="$style.tabBarArrowEnd"
+                tabindex="-1"
+                type="button"
+                @click="scrollToEnd">
+                <FluxIcon name="angle-right"/>
+            </button>
+        </FluxFadeTransition>
     </nav>
 </template>
 
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useEventListener, useMutationObserver } from '@flux-ui/internals';
+    import { useMutationObserver, useResizeObserver } from '@basmilius/common';
+    import { unrefTemplateElement, useEventListener } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { onMounted, ref, useTemplateRef } from 'vue';
+    import { onMounted, provide, ref, toRef, useTemplateRef, watch, type Ref, type VNode } from 'vue';
+    import { FluxTabBarInjectionKey } from '~flux/components/data';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Tab.module.scss';
+    import $style from '~flux/components/css/component/Tab.module.scss';
+
+    const { isPills } = defineProps<{
+        readonly isPills?: boolean;
+    }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
-    const tabBarRef = useTemplateRef('tabBar');
+    const tabBarRef = useTemplateRef<HTMLElement>('tabBar');
 
     useEventListener(tabBarRef, 'scroll', () => checkScroll());
-    useMutationObserver(tabBarRef, () => checkScroll(), {childList: true});
+    useMutationObserver(tabBarRef, () => {
+        checkScroll();
+        updateHighlight();
+    }, {childList: true});
+    useResizeObserver(tabBarRef, () => updateHighlight());
 
     const isEndArrowVisible = ref(false);
     const isStartArrowVisible = ref(false);
+    const activeItemX = ref(0);
+    const activeItemWidth = ref(0);
+
+    const items = new Map<Element, Ref<boolean>>();
+    const itemUnwatchers = new Map<Element, () => void>();
 
     onMounted(() => checkScroll());
 
+    provide(FluxTabBarInjectionKey, {
+        isPills: toRef(() => isPills ?? false),
+        registerItem(element, isActive) {
+            items.set(element, isActive);
+            const unwatch = watch(isActive, () => updateHighlight(), {flush: 'post', immediate: true});
+            itemUnwatchers.set(element, unwatch);
+        },
+        unregisterItem(element) {
+            const unwatch = itemUnwatchers.get(element);
+            unwatch?.();
+            itemUnwatchers.delete(element);
+            items.delete(element);
+            updateHighlight();
+        }
+    });
+
     function checkScroll(): void {
         const tabBar = unrefTemplateElement(tabBarRef)!;
 
@@ -69,6 +112,37 @@
         isStartArrowVisible.value = tabBar.scrollLeft > 0;
     }
 
+    function updateHighlight(): void {
+        const tabBar = unrefTemplateElement(tabBarRef);
+
+        if (!tabBar) {
+            return;
+        }
+
+        let activeElement: HTMLElement | null = null;
+
+        for (const [element, isActive] of items) {
+            if (isActive.value) {
+                activeElement = element as HTMLElement;
+                break;
+            }
+        }
+
+        if (!activeElement) {
+            activeItemWidth.value = 0;
+            return;
+        }
+
+        const width = activeElement.offsetWidth;
+
+        if (width === 0) {
+            return;
+        }
+
+        activeItemX.value = activeElement.offsetLeft;
+        activeItemWidth.value = width;
+    }
+
     function scrollToEnd(): void {
         const tabBar = unrefTemplateElement(tabBarRef)!;
         tabBar.scrollBy({