@flux-ui/components 3.0.0-next.34 → 3.0.0-next.38

package/src/component/FluxNotice.vue

@@ -40,6 +40,7 @@
             v-if="isCloseable"
             :class="$style.noticeClose"
             type="button"
+            :aria-label="translate('flux.close')"
             @click="emit('close')">
             <FluxIcon name="xmark"/>
         </button>
@@ -49,8 +50,10 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxColor, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '$flux/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import FluxSpinner from './FluxSpinner.vue';
     import $style from '$flux/css/component/Notice.module.scss';
@@ -73,7 +76,9 @@
     }>();
 
     defineSlots<{
-        default(): any;
-        end(): any;
+        default(): VNode[];
+        end(): VNode[];
     }>();
+
+    const translate = useTranslate();
 </script>

package/src/component/FluxNoticeStack.vue

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

package/src/component/FluxOverflowBar.vue

@@ -37,7 +37,7 @@
     setup>
     import { animationFrameDebounce, flattenVNodeTree, unrefTemplateElement } from '@flux-ui/internals';
     import type { FluxAlignment, FluxDirection } from '@flux-ui/types';
-    import { computed, ref, unref, useTemplateRef, watch, type VNode } from 'vue';
+    import { computed, ref, unref, useTemplateRef, type VNode, watch } from 'vue';
     import FluxDynamicView from './FluxDynamicView.vue';
     import $style from '$flux/css/component/OverflowBar.module.scss';
 
@@ -52,8 +52,8 @@
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
-        overflow?(props: { hasOverflow: boolean; items: VNode[] }): any;
+        default?(): VNode[];
+        overflow?(props: { hasOverflow: boolean; items: VNode[] }): VNode[];
     }>();
 
     const barRef = useTemplateRef('bar');

package/src/component/FluxPagination.vue

@@ -28,6 +28,7 @@
 
             <FluxPaginationButton
                 v-else
+                :aria-label="translate('flux.goToPage', {page: p})"
                 :label="`${p}`"
                 @click="navigate(p)"/>
         </template>

package/src/component/FluxPane.vue

@@ -21,6 +21,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import FluxSpinner from './FluxSpinner.vue';
     import $style from '$flux/css/component/Pane.module.scss';
 
@@ -39,7 +40,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
-        loader(): any;
+        default(): VNode[];
+        loader(): VNode[];
     }>();
 </script>

package/src/component/FluxPaneBody.vue

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

package/src/component/FluxPaneFooter.vue

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

package/src/component/FluxPaneGroup.vue

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

package/src/component/FluxPaneHeader.vue

@@ -9,14 +9,14 @@
             :name="icon"/>
 
         <div
-            v-if="title || subTitle"
+            v-if="title || subtitle"
             :class="$style.paneHeaderCaption">
             <strong v-if="title">
                 {{ title }}
             </strong>
 
-            <span v-if="subTitle">
-                {{ subTitle }}
+            <span v-if="subtitle">
+                {{ subtitle }}
             </span>
         </div>
 
@@ -27,18 +27,19 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxIconName } from '@flux-ui/types';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Pane.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;
-        readonly subTitle?: string;
+        readonly subtitle?: string;
         readonly title?: string;
     }>();
 
     defineSlots<{
-        after(): any;
-        before(): any;
+        after(): VNode[];
+        before(): VNode[];
     }>();
 </script>

package/src/component/FluxPaneIllustration.vue

@@ -35,7 +35,7 @@
     lang="ts"
     setup>
     import { hexToRGB } from '@basmilius/utils';
-    import { computed } from 'vue';
+    import { computed, type VNode } from 'vue';
     import FluxAnimatedColors from './FluxAnimatedColors.vue';
     import FluxGridPattern from './FluxGridPattern.vue';
     import $style from '$flux/css/component/Pane.module.scss';
@@ -52,8 +52,8 @@
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
-        controlled?(): any;
+        default?(): VNode[];
+        controlled?(): VNode[];
     }>();
 
     const borderColor = computed(() => {

package/src/component/FluxPaneMedia.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="isInset ? $style.paneMediaInset : $style.paneMedia">
+    <div :class="isInset ? $style.paneMediaInset : $style.paneMediaDefault">
         <img
             v-if="imageUrl"
             :class="$style.paneMediaImage"

package/src/component/FluxPercentageBar.vue

@@ -1,7 +1,9 @@
 <template>
     <div :class="$style.percentageBar">
         <div :class="$style.percentageBarTrack">
-            <FluxTooltip v-for="item of items">
+            <FluxTooltip
+                v-for="(item, index) of items"
+                :key="index">
                 <template #content>
                     <div :class="$style.percentageBarTooltip">
                         <FluxIcon

package/src/component/FluxPressable.vue

@@ -41,6 +41,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxPressableType, FluxTo } from '@flux-ui/types';
 
     const emit = defineEmits<{
@@ -58,7 +59,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const hoverListeners = {

package/src/component/FluxProgressBar.vue

@@ -5,7 +5,8 @@
         role="progressbar"
         :aria-valuenow="value"
         :aria-valuemax="max"
-        :aria-valuemin="min">
+        :aria-valuemin="min"
+        :aria-valuetext="status ? `${status}: ${progress}` : undefined">
         <div :class="isIndeterminate ? $style.progressBarTrackIndeterminate : $style.progressBarTrack">
             <div
                 :class="position >= 1 ? $style.progressBarValueComplete : $style.progressBarValueIncomplete"

package/src/component/FluxPrompt.vue

@@ -1,25 +1,18 @@
 <template>
-    <FluxPane>
-        <FluxPaneHeader
-            :icon="prompt.icon"
-            :title="prompt.title"/>
-
-        <FluxPaneBody v-html="prompt.message"/>
-
-        <FluxPaneBody>
-            <FluxFormField :label="prompt.fieldLabel">
-                <FluxFormInput
-                    ref="input"
-                    v-model="value"
-                    :placeholder="prompt.fieldPlaceholder"
-                    :type="prompt.fieldType ?? 'text'"
-                    @keydown="onKeyDown"/>
-            </FluxFormField>
-        </FluxPaneBody>
-
-        <FluxPaneFooter>
-            <FluxSpacer/>
+    <DialogLayout
+        :icon="prompt.icon"
+        :message="prompt.message"
+        :title="prompt.title">
+        <FluxFormField :label="prompt.fieldLabel">
+            <FluxFormInput
+                ref="input"
+                v-model="value"
+                :placeholder="prompt.fieldPlaceholder"
+                :type="prompt.fieldType ?? 'text'"
+                @keydown="onKeyDown"/>
+        </FluxFormField>
 
+        <template #footer>
             <FluxSecondaryButton
                 :label="translate('flux.cancel')"
                 @click="prompt.onCancel()"/>
@@ -29,8 +22,8 @@
                 icon-leading="circle-check"
                 :label="translate('flux.ok')"
                 @click="prompt.onConfirm(value)"/>
-        </FluxPaneFooter>
-    </FluxPane>
+        </template>
+    </DialogLayout>
 </template>
 
 <script
@@ -41,13 +34,9 @@
     import { useTranslate } from '$flux/composable/private';
     import FluxFormField from './FluxFormField.vue';
     import FluxFormInput from './FluxFormInput.vue';
-    import FluxPane from './FluxPane.vue';
-    import FluxPaneBody from './FluxPaneBody.vue';
-    import FluxPaneFooter from './FluxPaneFooter.vue';
-    import FluxPaneHeader from './FluxPaneHeader.vue';
     import FluxPrimaryButton from './FluxPrimaryButton.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import FluxSpacer from './FluxSpacer.vue';
+    import { DialogLayout } from './primitive';
 
     const {
         prompt

package/src/component/FluxRemove.vue

@@ -5,6 +5,7 @@
             isHidden && $style.isHidden
         )"
         type="button"
+        :aria-label="translate('flux.delete')"
         @click="emit('click', $event)">
         <FluxIcon
             v-if="icon"
@@ -18,6 +19,7 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '$flux/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Remove.module.scss';
 
@@ -31,4 +33,6 @@
         readonly icon?: FluxIconName;
         readonly isHidden?: boolean;
     }>();
+
+    const translate = useTranslate();
 </script>

package/src/component/FluxRoot.vue

@@ -14,7 +14,7 @@
 <script
     lang="ts"
     setup>
-    import { watch } from 'vue';
+    import { type VNode, watch } from 'vue';
     import { useFluxStore } from '$flux/data';
     import FluxOverlayProvider from './FluxOverlayProvider.vue';
     import FluxSnackbarProvider from './FluxSnackbarProvider.vue';
@@ -26,7 +26,7 @@
     });
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const {inertMain} = useFluxStore();

package/src/component/FluxRow.vue

@@ -0,0 +1,24 @@
+<template>
+    <div
+        :class="$style.row"
+        :style="{'--gap': `${gap}px`}">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '$flux/css/component/Layout.module.scss';
+
+    const {
+        gap = 18
+    } = defineProps<{
+        readonly gap?: number;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+</script>

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,10 +39,10 @@
                     :name="item.icon"
                     :size="15"/>
 
-                <span>{{ item.label }}</span>
+                <span v-if="item.label">{{ item.label }}</span>
             </button>
         </template>
-    </nav>
+    </div>
 </template>
 
 <script
@@ -53,6 +60,7 @@
     });
 
     defineProps<{
+        readonly ariaLabel?: string;
         readonly isFill?: boolean;
         readonly items: FluxSegmentedControlItemObject[];
     }>();
@@ -74,6 +82,45 @@
 
     function activate(index: number): void {
         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;
+
+            case 'End':
+                newIndex = items.length - 1;
+                break;
+
+            default:
+                return;
+        }
+
+        activate(newIndex);
+        evt.preventDefault();
     }
 
     function updateHighlight(index: number): void {

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,12 +175,6 @@
             return;
         }
 
-        const spec: Omit<FluxSnackbarObject, 'id'> = {
-            ...instance.props,
-            onAction,
-            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 = 21
+        gap = 18
     } = defineProps<{
         readonly direction?: FluxDirection;
         readonly gap?: number;
@@ -35,6 +36,6 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxStepper.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>