@flux-ui/components 3.0.0-next.4 → 3.0.0-next.41

package/src/component/FluxSnackbar.vue

@@ -74,7 +74,7 @@
     setup>
     import type { FluxColor, FluxIconName, FluxSnackbarObject } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { computed, getCurrentInstance, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+    import { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
     import { addSnackbar, removeSnackbar, updateSnackbar } from '$flux/data';
     import FluxAction from './FluxAction.vue';
     import FluxIcon from './FluxIcon.vue';
@@ -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/FluxSplitButton.vue

@@ -27,6 +27,7 @@
 <script
     setup
     lang="ts">
+    import type { VNode } from 'vue';
     import type { FluxDirection, FluxIconName } from '@flux-ui/types';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
@@ -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>
@@ -18,13 +18,14 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import $style from '$flux/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 FluxIcon from './FluxIcon.vue';
     import FluxPane from './FluxPane.vue';
     import $style from '$flux/css/component/Statistic.module.scss';
+    import FluxBoxedIcon from '$flux/component/FluxBoxedIcon.vue';
 
     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,7 +23,7 @@
     lang="ts"
     setup>
     import { flattenVNodeTree } from '@flux-ui/internals';
-    import { computed, ref, unref, VNode, watch } from 'vue';
+    import { computed, ref, unref, type VNode, watch } from 'vue';
     import { FluxWindowTransition } from '$flux/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 type { VNode } from 'vue';
     import $style from '$flux/css/component/Stepper.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxTab.vue

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

package/src/component/FluxTabBar.vue

@@ -3,14 +3,16 @@
         :class="$style.tabBar"
         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"
@@ -22,31 +24,35 @@
             <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 } from '@basmilius/common';
+    import { unrefTemplateElement, useEventListener } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { onMounted, ref, useTemplateRef } from 'vue';
+    import { onMounted, ref, useTemplateRef, type VNode } from 'vue';
+    import { FluxFadeTransition } from '$flux/transition';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Tab.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
-    const tabBarRef = useTemplateRef('tabBar');
+    const tabBarRef = useTemplateRef<HTMLElement>('tabBar');
 
     useEventListener(tabBarRef, 'scroll', () => checkScroll());
     useMutationObserver(tabBarRef, () => checkScroll(), {childList: true});

package/src/component/FluxTabBarItem.vue

@@ -29,7 +29,7 @@
     lang="ts"
     setup>
     import type { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
-    import { ComponentPublicInstance, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { type ComponentPublicInstance, toRef, unref, useTemplateRef, watch } from 'vue';
     import { useDisabled } from '$flux/composable';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';

package/src/component/FluxTable.vue

@@ -1,12 +1,20 @@
 <template>
     <div :class="$style.table">
         <table :class="$style.tableBase">
+            <slot name="colgroups"/>
+
             <thead v-if="slots.header">
             <slot name="header"/>
             </thead>
 
             <tbody v-if="slots.default">
             <slot/>
+
+            <FluxTableRow
+                v-if="fillColumns"
+                :class="$style.tableFill">
+                <FluxTableCell v-for="_ of fillColumns"/>
+            </FluxTableRow>
             </tbody>
 
             <tfoot v-if="slots.footer">
@@ -25,15 +33,25 @@
             :class="$style.tableLoader">
             <FluxSpinner/>
         </div>
+
+        <FluxPaneBody
+            v-if="slots.pagination"
+            :class="$style.tablePagination">
+            <slot name="pagination"/>
+        </FluxPaneBody>
     </div>
 </template>
 
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import { provide } from 'vue';
     import { FluxTableInjectionKey } from '$flux/data';
+    import FluxPaneBody from './FluxPaneBody.vue';
     import FluxSpinner from './FluxSpinner.vue';
+    import FluxTableCell from './FluxTableCell.vue';
+    import FluxTableRow from './FluxTableRow.vue';
     import $style from '$flux/css/component/Table.module.scss';
 
     const {
@@ -45,6 +63,7 @@
         isStriped = false
     } = defineProps<{
         readonly captionSide?: 'top' | 'bottom';
+        readonly fillColumns?: number;
         readonly isBordered?: boolean;
         readonly isHoverable?: boolean;
         readonly isLoading?: boolean;
@@ -53,10 +72,12 @@
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
-        caption?(): any;
-        footer?(): any;
-        header?(): any;
+        default?(): VNode;
+        colgroups?(): VNode;
+        caption?(): VNode;
+        footer?(): VNode;
+        header?(): VNode;
+        pagination?(): VNode;
     }>();
 
     provide(FluxTableInjectionKey, {

package/src/component/FluxTableActions.vue

@@ -1,16 +1,17 @@
 <template>
-    <FluxActions :class="$style.tableActions">
+    <FluxActionStack :class="$style.tableActions">
         <slot/>
-    </FluxActions>
+    </FluxActionStack>
 </template>
 
 <script
     lang="ts"
     setup>
-    import FluxActions from './FluxActions.vue';
+    import type { VNode } from 'vue';
+    import FluxActionStack from './FluxActionStack.vue';
     import $style from '$flux/css/component/Table.module.scss';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxTableBar.vue

@@ -0,0 +1,38 @@
+<template>
+    <tr :class="$style.tableRow">
+        <td
+            :class="clsx(
+                $style.tableBar,
+                isBordered && $style.isBordered,
+                isHoverable && $style.isHoverable,
+                isSeparated && $style.isSeparated,
+                isStriped && $style.isStriped
+            )"
+            colspan="100%"
+            role="cell">
+            <div :class="$style.tableBarContent">
+                <slot/>
+            </div>
+        </td>
+    </tr>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import { useTableInjection } from '$flux/composable';
+    import { clsx } from 'clsx';
+    import $style from '$flux/css/component/Table.module.scss';
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const {
+        isBordered,
+        isHoverable,
+        isSeparated,
+        isStriped
+    } = useTableInjection();
+</script>

package/src/component/FluxTableCell.vue

@@ -12,7 +12,8 @@
             <div
                 :class="$style.tableCellContent"
                 :style="{
-                    flexFlow: contentDirection
+                    flexFlow: contentDirection,
+                    gap: contentGap != null ? `${contentGap}px` : undefined
                 }">
                 <slot/>
             </div>
@@ -23,6 +24,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import { clsx } from 'clsx';
     import { useTableInjection } from '$flux/composable';
     import $style from '$flux/css/component/Table.module.scss';
@@ -31,11 +33,12 @@
         contentDirection = 'row'
     } = defineProps<{
         readonly contentDirection?: 'column' | 'row';
+        readonly contentGap?: number;
     }>();
 
     defineSlots<{
-        default(): any;
-        content(): any;
+        default(): VNode[];
+        content(): VNode[];
     }>();
 
     const {

package/src/component/FluxTableHeader.vue

@@ -6,6 +6,8 @@
             isShrinking && $style.isShrinking,
             isSticky && $style.isSticky
         )"
+        scope="col"
+        :aria-sort="isSortable ? (sort ?? 'none') : undefined"
         :style="{
             minWidth: `${minWidth}px`
         }">
@@ -63,7 +65,7 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import { computed } from 'vue';
+    import { computed, type VNode } from 'vue';
     import { useTableInjection } from '$flux/composable';
     import { useTranslate } from '$flux/composable/private';
     import FluxFlyout from './FluxFlyout.vue';
@@ -90,7 +92,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const {isBordered} = useTableInjection();

package/src/component/FluxTableRow.vue

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

package/src/component/FluxTabs.vue

@@ -8,6 +8,8 @@
                     v-for="(tab, index) of tabs"
                     :key="index">
                     <FluxTabBarItem
+                        :id="`${baseId}-tab-${index}`"
+                        :aria-controls="`${baseId}-panel-${index}`"
                         :icon="tab.icon"
                         :is-active="modelValue === index"
                         :label="tab.label"
@@ -33,7 +35,7 @@
     setup>
     import { flattenVNodeTree, getComponentProps } from '@flux-ui/internals';
     import type { FluxIconName } from '@flux-ui/types';
-    import { computed, ref, unref, VNode, watch } from 'vue';
+    import { cloneVNode, computed, ref, unref, useId, type VNode, watch } from 'vue';
     import { FluxWindowTransition } from '$flux/transition';
     import { VNodeRenderer } from './primitive';
     import FluxTabBar from './FluxTabBar.vue';
@@ -45,7 +47,7 @@
     });
 
     const slots = defineSlots<{
-        default(): any;
+        default(): VNode[];
 
         content(props: {
             activate(index: number): void;
@@ -56,7 +58,7 @@
                 readonly icon?: FluxIconName;
                 readonly label?: string;
             }[];
-        }): any;
+        }): VNode[];
 
         tabs(props: {
             activate(index: number): void;
@@ -67,13 +69,20 @@
                 readonly icon?: FluxIconName;
                 readonly label?: string;
             }[];
-        }): any;
+        }): VNode[];
     }>();
 
+    const baseId = useId();
     const isTransitioningBack = ref(false);
 
-    const children = computed(() => flattenVNodeTree(slots.default?.() ?? []));
-    const tabs = computed<{ icon?: FluxIconName; label?: string; }[]>(() => unref(children)
+    const rawChildren = computed(() => flattenVNodeTree(slots.default?.() ?? []));
+
+    const children = computed(() => unref(rawChildren).map((child, index) => cloneVNode(child, {
+        id: `${baseId}-panel-${index}`,
+        'aria-labelledby': `${baseId}-tab-${index}`
+    })));
+
+    const tabs = computed<{ icon?: FluxIconName; label?: string; }[]>(() => unref(rawChildren)
         .filter((child: VNode) => getComponentProps<any>(child).icon || getComponentProps<any>(child).label)
         .map((child: VNode) => ({
             icon: getComponentProps<any>(child).icon,

package/src/component/FluxTag.vue

@@ -6,7 +6,8 @@
             color === 'danger' && $style.tagDanger,
             color === 'info' && $style.tagInfo,
             color === 'success' && $style.tagSuccess,
-            color === 'warning' && $style.tagWarning
+            color === 'warning' && $style.tagWarning,
+            isKeyboardShortcut && $style.tagKeyboardShortcut
         )"
         :component-type="type"
         :tabindex="tabindex"
@@ -40,7 +41,8 @@
             v-if="!isClickable && isDeletable"
             :class="$style.tagClose"
             type="button"
-            @click="onDeleteClick()">
+            :aria-label="translate('flux.delete')"
+            @click.stop="onDeleteClick()">
             <FluxIcon name="xmark"/>
         </button>
     </FluxPressable>
@@ -51,6 +53,7 @@
     setup>
     import type { FluxButtonEmits, FluxColor, FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '$flux/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';
     import FluxSpinner from './FluxSpinner.vue';
@@ -69,6 +72,7 @@
         readonly icon?: FluxIconName;
         readonly isClickable?: boolean;
         readonly isDeletable?: boolean;
+        readonly isKeyboardShortcut?: boolean;
         readonly isLoading?: boolean;
         readonly label: string;
         readonly type?: FluxPressableType;
@@ -79,6 +83,8 @@
         readonly to?: FluxTo;
     }>();
 
+    const translate = useTranslate();
+
     function onDeleteClick(): void {
         emit('delete');
     }

package/src/component/FluxTagStack.vue

@@ -10,9 +10,10 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import FluxStack from './FluxStack.vue';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>