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

package/src/component/FluxAspectRatio.vue

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

package/src/component/FluxBadge.vue

@@ -40,7 +40,8 @@
             v-if="type === 'none' && isDeletable"
             :class="$style.badgeClose"
             type="button"
-            @click="onDeleteClick()">
+            :aria-label="translate('flux.delete')"
+            @click.stop="onDeleteClick()">
             <FluxIcon name="xmark"/>
         </button>
     </FluxPressable>
@@ -51,6 +52,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';
@@ -78,6 +80,8 @@
         readonly to?: FluxTo;
     }>();
 
+    const translate = useTranslate();
+
     function onDeleteClick(): void {
         emit('delete');
     }

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

package/src/component/FluxButtonGroup.vue

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

package/src/component/FluxButtonStack.vue

@@ -10,6 +10,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxDirection } from '@flux-ui/types';
     import FluxStack from './FluxStack.vue';
 
@@ -23,6 +24,6 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxCalendar.vue

@@ -9,6 +9,7 @@
                         <template #opener="{open}">
                             <button
                                 :class="$style.calendarCurrentMonth"
+                                :aria-label="translate('flux.selectMonth')"
                                 type="button"
                                 @click="open">
                                 {{ viewMonth }}
@@ -33,6 +34,7 @@
                         <template #opener="{open}">
                             <button
                                 :class="$style.calendarCurrentYear"
+                                :aria-label="translate('flux.selectYear')"
                                 type="button"
                                 @click="open">
                                 {{ viewYear }}
@@ -42,6 +44,7 @@
                         <template #default="{close}">
                             <div :class="$styleDatePicker.datePickerYears">
                                 <FluxSecondaryButton
+                                    :aria-label="translate('flux.previousYears')"
                                     icon-leading="angle-left"
                                     tabindex="-1"
                                     @click="previousYears"/>
@@ -56,6 +59,7 @@
                                 </template>
 
                                 <FluxSecondaryButton
+                                    :aria-label="translate('flux.nextYears')"
                                     icon-leading="angle-right"
                                     tabindex="-1"
                                     @click="nextYears"/>
@@ -67,15 +71,18 @@
 
             <template #actionsEnd>
                 <FluxSecondaryButton
+                    :aria-label="translate('flux.today')"
                     :label="translate('flux.today')"
                     @click="setToday"/>
 
                 <FluxButtonGroup>
                     <FluxSecondaryButton
+                        :aria-label="translate('flux.previousMonth')"
                         icon-leading="angle-left"
                         @click="previousMonth"/>
 
                     <FluxSecondaryButton
+                        :aria-label="translate('flux.nextMonth')"
                         icon-leading="angle-right"
                         @click="nextMonth"/>
                 </FluxButtonGroup>
@@ -168,7 +175,7 @@
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
+        default?(): VNode[];
     }>();
 
     const {

package/src/component/FluxCalendarEvent.vue

@@ -18,6 +18,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { DateTime } from 'luxon';
     import FluxTooltip from './FluxTooltip.vue';
     import $style from '$flux/css/component/Calendar.module.scss';
@@ -32,7 +33,7 @@
     }>();
 
     defineSlots<{
-        tooltip(): any;
+        tooltip(): VNode[];
     }>();
 
     function onClick(evt: MouseEvent): void {

package/src/component/FluxCheckbox.vue

@@ -1,13 +1,23 @@
 <template>
     <label
-        :class="$style.checkbox"
+        :class="clsx(
+            $style.checkbox,
+            disabled && $style.isDisabled,
+            isReadonly && $style.isReadonly,
+            error && $style.isInvalid
+        )"
         :for="id">
         <input
             v-model="modelValue"
             ref="input"
             type="checkbox"
             :class="$style.checkboxNative"
-            :id="id"/>
+            :id="id"
+            :disabled="disabled"
+            :aria-disabled="disabled ? true : undefined"
+            :aria-readonly="isReadonly ? true : undefined"
+            :aria-invalid="error ? true : undefined"
+            @click="onClick"/>
 
         <button
             aria-hidden="true"
@@ -35,8 +45,10 @@
 <script
     lang="ts"
     setup>
-    import { computed, unref, useTemplateRef, watchEffect } from 'vue';
-    import { useFormFieldInjection } from '$flux/composable';
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, toRef, unref, useTemplateRef, watchEffect } from 'vue';
+    import { useDisabled, useFormFieldInjection } from '$flux/composable';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Form.module.scss';
 
@@ -44,17 +56,32 @@
         default: false
     });
 
-    defineProps<{
+    const {
+        disabled: componentDisabled,
+        isReadonly
+    } = defineProps<Pick<FluxFormInputBaseProps, 'disabled' | 'error' | 'isReadonly'> & {
         readonly label?: string;
     }>();
 
     const inputRef = useTemplateRef('input');
     const {id} = useFormFieldInjection();
 
+    const disabled = useDisabled(toRef(() => componentDisabled));
     const isIndeterminate = computed(() => unref(modelValue) === null);
 
+    function onClick(evt: MouseEvent): void {
+        if (isReadonly) {
+            evt.preventDefault();
+        }
+    }
+
     watchEffect(() => {
         const input = unref(inputRef);
-        input && (input.indeterminate = unref(isIndeterminate));
+
+        if (!input) {
+            return;
+        }
+
+        input.indeterminate = unref(isIndeterminate);
     });
 </script>

package/src/component/FluxChip.vue

@@ -6,6 +6,7 @@
             isSelectable && $style.isSelectable,
             isSelected && $style.isSelected
         )"
+        :aria-pressed="isSelectable ? isSelected : undefined"
         @click="$emit('click', $event)">
         <FluxFadeTransition v-if="isSelectable">
             <FluxIcon

package/src/component/FluxClickablePane.vue

@@ -29,6 +29,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxPressableType, FluxTo } from '@flux-ui/types';
     import FluxPressable from './FluxPressable.vue';
     import FluxSpinner from './FluxSpinner.vue';
@@ -55,7 +56,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
-        loader(): any;
+        default(): VNode[];
+        loader(): VNode[];
     }>();
 </script>

package/src/component/FluxColorPicker.vue

@@ -6,6 +6,7 @@
         }">
         <CoordinatePicker
             v-model="saturationValue"
+            :aria-label="translate('flux.colorSaturationBrightness')"
             :class="$style.colorPickerSaturation"
             :max="1"
             :min="0"
@@ -14,6 +15,7 @@
 
         <FluxFormSlider
             v-model="hue"
+            :aria-label="translate('flux.hue')"
             :class="$style.colorPickerHueSlider"
             is-tooltip-disabled
             :max="360"
@@ -23,6 +25,7 @@
         <FluxFormSlider
             v-if="isAlphaEnabled"
             v-model="alpha"
+            :aria-label="translate('flux.opacity')"
             :class="$style.colorPickerAlphaSlider"
             is-tooltip-disabled
             :max="1"
@@ -34,7 +37,8 @@
                 :class="$style.colorPickerPreview"
                 :style="{
                 '--color': rgb
-            }"/>
+            }"
+                aria-hidden="true"/>
 
             <FluxFormField
                 v-if="type === 'hex'"
@@ -129,6 +133,7 @@
     import { hexToRGB, hslToHSV, hslToRGB, hsvToHSL, hsvToRGB, rgbToHEX, rgbToHSL, rgbToHSV } from '@basmilius/utils';
     import { blue500 } from '@flux-ui/internals';
     import { computed, type ComputedRef, ref, unref, watch } from 'vue';
+    import { useTranslate } from '$flux/composable/private';
     import CoordinatePicker from './primitive/CoordinatePicker.vue';
     import FluxFormField from './FluxFormField.vue';
     import FluxFormInput from './FluxFormInput.vue';
@@ -146,6 +151,8 @@
         readonly type?: 'hex' | 'rgb' | 'hsl' | 'hsv';
     }>();
 
+    const translate = useTranslate();
+
     const alpha = ref(1);
     const hsv = ref<[number, number, number]>([0, 0, 0]);
     const isDragging = ref(false);

package/src/component/FluxColorSelect.vue

@@ -1,22 +1,35 @@
 <template>
-    <div :class="$style.colorSelect">
+    <div
+        :class="$style.colorSelect"
+        role="radiogroup">
         <button
             v-for="color of colors"
+            :key="color"
             :class="modelValue === color ? $style.colorSelectColorSelected : $style.colorSelectColorDeselected"
             :style="{
                 '--color': color
             }"
+            type="button"
+            role="radio"
+            :aria-checked="modelValue === color"
+            :aria-label="color"
+            :disabled="disabled"
+            :tabindex="disabled ? -1 : 0"
             @click="select(color)">
             <FluxIcon
                 :class="$style.colorSelectCheck"
                 name="check"
-                :size="16"/>
+                :size="14"/>
         </button>
 
         <FluxFlyout v-if="isCustomAllowed">
             <template #opener="{open}">
                 <button
                     :class="$style.colorSelectCustom"
+                    type="button"
+                    :disabled="disabled"
+                    :tabindex="disabled ? -1 : 0"
+                    :aria-label="translate('flux.customColor')"
                     @click="open()">
                     <FluxIcon
                         name="ellipsis-h"
@@ -47,7 +60,8 @@
     lang="ts"
     setup>
     import { amber500, blue500, cyan500, emerald500, fuchsia500, green500, indigo500, lime500, orange500, pink500, purple500, red500, rose500, sky500, teal500, violet500, yellow500 } from '@flux-ui/internals';
-    import { ref, watch } from 'vue';
+    import { ref, toRef, unref, watch } from 'vue';
+    import { useDisabled } from '$flux/composable';
     import { useTranslate } from '$flux/composable/private';
     import FluxColorPicker from './FluxColorPicker.vue';
     import FluxFlyout from './FluxFlyout.vue';
@@ -62,17 +76,24 @@
     });
 
     const {
-        colors = [red500, orange500, amber500, yellow500, lime500, green500, emerald500, teal500, cyan500, sky500, blue500, indigo500, violet500, purple500, fuchsia500, pink500, rose500]
+        colors = [red500, orange500, amber500, yellow500, lime500, green500, emerald500, teal500, cyan500, sky500, blue500, indigo500, violet500, purple500, fuchsia500, pink500, rose500],
+        disabled: componentDisabled
     } = defineProps<{
         readonly colors?: string[];
+        readonly disabled?: boolean;
         readonly isCustomAllowed?: boolean;
     }>();
 
+    const disabled = useDisabled(toRef(() => componentDisabled));
     const translate = useTranslate();
 
     const customColor = ref('#000000');
 
     function select(color: string, close?: () => void): void {
+        if (unref(disabled)) {
+            return;
+        }
+
         modelValue.value = color;
         close?.();
     }

package/src/component/{FluxAutoGrid.vue → FluxColumn.vue}

@@ -1,10 +1,7 @@
 <template>
     <div
-        :class="$style.autoGrid"
-        :style="{
-            gap: `${gap}px`,
-            '--min-column-width': minColumnWidth
-        }">
+        :class="$style.column"
+        :style="{'--gap': `${gap}px`}">
         <slot/>
     </div>
 </template>
@@ -12,16 +9,16 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import $style from '$flux/css/component/Layout.module.scss';
 
     const {
-        gap = 21
+        gap = 18
     } = defineProps<{
         readonly gap?: number;
-        readonly minColumnWidth: number;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxComment.vue

@@ -38,7 +38,7 @@
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import type { DateTime } from 'luxon';
-    import { computed } from 'vue';
+    import { computed, type VNode } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import FluxAvatar from './FluxAvatar.vue';
     import $style from '$flux/css/component/Comment.module.scss';
@@ -60,7 +60,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const translate = useTranslate();

package/src/component/FluxConfirm.vue

@@ -1,14 +1,9 @@
 <template>
-    <FluxPane>
-        <FluxPaneHeader
-            :icon="confirm.icon"
-            :title="confirm.title"/>
-
-        <FluxPaneBody v-html="confirm.message"/>
-
-        <FluxPaneFooter>
-            <FluxSpacer/>
-
+    <DialogLayout
+        :icon="confirm.icon"
+        :message="confirm.message"
+        :title="confirm.title">
+        <template #footer>
             <FluxSecondaryButton
                 :label="translate('flux.cancel')"
                 @click="confirm.onCancel()"/>
@@ -17,8 +12,8 @@
                 icon-leading="circle-check"
                 :label="translate('flux.ok')"
                 @click="confirm.onConfirm()"/>
-        </FluxPaneFooter>
-    </FluxPane>
+        </template>
+    </DialogLayout>
 </template>
 
 <script
@@ -26,13 +21,9 @@
     setup>
     import type { FluxConfirmObject } from '@flux-ui/types';
     import { useTranslate } from '$flux/composable/private';
-    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';
 
     defineProps<{
         readonly confirm: FluxConfirmObject;

package/src/component/FluxContainer.vue

@@ -9,15 +9,16 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import $style from '$flux/css/component/Layout.module.scss';
 
     const {
-        gutter = 21
+        gutter = 18
     } = defineProps<{
         readonly gutter?: number;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxDataTable.vue

@@ -15,7 +15,9 @@
         <template
             v-if="'header' in slots"
             #header>
-            <slot name="filter" v-bind="{page, perPage, items: limitedItems, total}"/>
+            <slot
+                name="filter"
+                v-bind="{page, perPage, items: limitedItems, total}"/>
 
             <FluxTableRow>
                 <slot

package/src/component/FluxDivider.vue

@@ -6,7 +6,7 @@
             contentPlacement === 'end' && $style.dividerContentEnd
         )"
         role="separator"
-        aria-orientation="horizontal">
+        :aria-orientation="direction">
         <div
             v-if="slots.default"
             :class="$style.dividerContent">
@@ -22,16 +22,20 @@
 <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/Divider.module.scss';
 
     const {
-        contentPlacement = 'center'
+        contentPlacement = 'center',
+        direction = 'horizontal'
     } = defineProps<{
         readonly contentPlacement?: 'start' | 'center' | 'end';
+        readonly direction?: FluxDirection;
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
+        default?(): VNode[];
     }>();
 </script>

package/src/component/FluxDropZone.vue

@@ -5,7 +5,10 @@
             isDragging && $style.isDragging,
             isDraggingOver && $style.isDraggingOver
         ]"
-        :aria-disabled="disabled ? true : undefined">
+        :aria-disabled="disabled ? true : undefined"
+        :aria-label="ariaLabel ?? translate('flux.dropFilesOrClick')"
+        :tabindex="disabled ? -1 : 0"
+        @keydown.self="onKeyDown">
         <div
             :class="$style.dropZoneContent"
             @dragleave.capture="onDragLeave"
@@ -52,8 +55,9 @@
     lang="ts"
     setup>
     import { roundStep } from '@basmilius/utils';
-    import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, type VNode, watch } from 'vue';
     import { useDisabled } from '$flux/composable';
+    import { useTranslate } from '$flux/composable/private';
     import { FluxFadeTransition } from '$flux/transition';
     import FluxSpinner from './FluxSpinner.vue';
     import $style from '$flux/css/component/DropZone.module.scss';
@@ -65,10 +69,12 @@
 
     const {
         accept,
+        ariaLabel,
         disabled: componentDisabled,
         isMultiple
     } = defineProps<{
         readonly accept?: string;
+        readonly ariaLabel?: string;
         readonly disabled?: boolean;
         readonly isLoading?: boolean;
         readonly isMultiple?: boolean;
@@ -80,25 +86,26 @@
             readonly isDraggingOver: boolean;
 
             showPicker(): void;
-        }): any;
+        }): VNode[];
 
         actions?(props: {
             readonly isDragging: boolean;
             readonly isDraggingOver: boolean;
 
             showPicker(): void;
-        }): any;
+        }): VNode[];
 
         extra?(props: {
             readonly isDragging: boolean;
             readonly isDraggingOver: boolean;
 
             showPicker(): void;
-        }): any;
+        }): VNode[];
     }>();
 
     const contentRef = useTemplateRef('content');
     const disabled = useDisabled(toRef(() => componentDisabled));
+    const translate = useTranslate();
 
     const isDragging = ref(false);
     const isDraggingOver = ref(false);
@@ -111,11 +118,18 @@
     });
 
     onUnmounted(() => {
-        window.removeEventListener('dragleave', onWindowDragEnd);
-        window.removeEventListener('dragover', onWindowDragStart);
-        window.removeEventListener('drop', onWindowDrop);
+        window.removeEventListener('dragleave', onWindowDragEnd, {capture: true});
+        window.removeEventListener('dragover', onWindowDragStart, {capture: true});
+        window.removeEventListener('drop', onWindowDrop, {capture: true});
     });
 
+    function onKeyDown(evt: KeyboardEvent): void {
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            showPicker();
+            evt.preventDefault();
+        }
+    }
+
     function onDragEnter(evt: DragEvent): void {
         isDraggingOver.value = true;
         evt.preventDefault();

package/src/component/FluxExpandable.vue

@@ -34,6 +34,7 @@
                 v-if="isOpen"
                 :class="$style.expandableBody"
                 :id="contentId"
+                role="region"
                 :aria-labelledby="headerId">
                 <slot
                     v-bind="{label, close}"
@@ -80,8 +81,8 @@
 
     const expandIcon = computed<FluxIconName>(() => unref(isOpen) ? 'minus' : 'plus');
 
-    onBeforeMount(() => register?.(unref(componentId), instance));
-    onUnmounted(() => unregister?.(unref(componentId)));
+    onBeforeMount(() => register?.(componentId.value, instance));
+    onUnmounted(() => unregister?.(componentId.value));
 
     function close(): void {
         isOpen.value = false;

package/src/component/FluxExpandableGroup.vue

@@ -8,7 +8,7 @@
     lang="ts"
     setup>
     import { getExposedRef } from '@flux-ui/internals';
-    import { type ComponentInternalInstance, provide } from 'vue';
+    import { type ComponentInternalInstance, provide, type VNode } from 'vue';
     import { FluxExpandableGroupInjectionKey } from '$flux/data';
     import $style from '$flux/css/component/Expandable.module.scss';
 
@@ -20,7 +20,7 @@
 
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const expandables: { [key: number]: ComponentInternalInstance; } = {};