@flux-ui/components 3.0.0-next.5 → 3.0.0-next.52

package/src/component/FluxAdaptiveSlot.vue

@@ -0,0 +1,159 @@
+<template>
+    <div
+        ref="element"
+        :class="$style.adaptiveSlot"
+        :style="group ? 'flex-shrink: 0' : undefined">
+        <slot v-if="isDefaultVisible"/>
+        <slot
+            v-else
+            name="fallback"/>
+    </div>
+
+    <div
+        ref="defaultMeasurer"
+        :class="$style.adaptiveSlotMeasurer"
+        aria-hidden="true">
+        <slot/>
+    </div>
+
+    <div
+        ref="fallbackMeasurer"
+        :class="$style.adaptiveSlotMeasurer"
+        aria-hidden="true">
+        <slot name="fallback"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { animationFrameDebounce, unrefTemplateElement } from '@flux-ui/internals';
+    import { getCurrentInstance, onMounted, onUnmounted, ref, toRef, useTemplateRef, watch } from 'vue';
+    import { useAdaptiveGroupInjection } from '$flux/composable';
+    import $style from '$flux/css/component/AdaptiveSlot.module.scss';
+
+    const props = withDefaults(defineProps<{
+        readonly priority?: number;
+    }>(), {
+        priority: 1
+    });
+
+    defineSlots<{
+        default(): any;
+        fallback?(): any;
+    }>();
+
+    const group = useAdaptiveGroupInjection();
+    const instance = getCurrentInstance()!;
+
+    const elementRef = useTemplateRef('element');
+    const defaultMeasurerRef = useTemplateRef('defaultMeasurer');
+    const fallbackMeasurerRef = useTemplateRef('fallbackMeasurer');
+
+    const isDefaultVisible = ref(true);
+    const desiredDefaultWidth = ref(0);
+    const desiredFallbackWidth = ref(0);
+
+    const priorityRef = toRef(props, 'priority');
+
+    // Keep both desired widths in sync with the hidden measurers.
+    watch([defaultMeasurerRef, fallbackMeasurerRef], ([def, fb], _, onCleanup) => {
+        if (!def) {
+            return;
+        }
+
+        const update = () => {
+            desiredDefaultWidth.value = def.offsetWidth;
+            desiredFallbackWidth.value = fb?.offsetWidth ?? 0;
+        };
+
+        const observer = new ResizeObserver(update);
+        observer.observe(def);
+
+        if (fb) {
+            observer.observe(fb);
+        }
+
+        observer.observe(document.documentElement);
+
+        update();
+
+        onCleanup(() => {
+            observer.disconnect();
+        });
+    }, {immediate: true});
+
+    if (group) {
+        onMounted(() => {
+            group.register(instance.uid, {
+                priority: priorityRef,
+                desiredDefaultWidth,
+                desiredFallbackWidth,
+                isDefaultVisible
+            });
+        });
+
+        onUnmounted(() => {
+            group.unregister(instance.uid);
+        });
+    } else {
+        // Standalone: self-measurement with parent-observer hysteresis.
+        let lastFailedParentWidth = -1;
+
+        const reflow = animationFrameDebounce(() => {
+            const element = unrefTemplateElement(elementRef);
+
+            if (!element || !isDefaultVisible.value) {
+                return;
+            }
+
+            const desired = desiredDefaultWidth.value;
+            const available = element.clientWidth;
+
+            if (desired > available) {
+                lastFailedParentWidth = element.parentElement?.clientWidth ?? -1;
+                isDefaultVisible.value = false;
+            } else {
+                lastFailedParentWidth = -1;
+            }
+        });
+
+        watch(elementRef, (element, _, onCleanup) => {
+            if (!element) {
+                return;
+            }
+
+            const parent = element.parentElement;
+
+            const observer = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    if (entry.target === parent && !isDefaultVisible.value) {
+                        if (parent.clientWidth > lastFailedParentWidth) {
+                            isDefaultVisible.value = true;
+                        }
+                    }
+                }
+
+                reflow();
+            });
+
+            observer.observe(element);
+
+            if (parent) {
+                observer.observe(parent);
+            }
+
+            observer.observe(document.documentElement);
+
+            onCleanup(() => {
+                observer.disconnect();
+            });
+        }, {immediate: true});
+
+        // Default content size changed: forget failure history and retry.
+        watch(desiredDefaultWidth, () => {
+            lastFailedParentWidth = -1;
+            isDefaultVisible.value = true;
+        });
+    }
+</script>

package/src/component/FluxAlert.vue

@@ -1,20 +1,15 @@
 <template>
-    <FluxPane>
-        <FluxPaneHeader
-            :icon="alert.icon"
-            :title="alert.title"/>
-
-        <FluxPaneBody v-html="alert.message"/>
-
-        <FluxPaneFooter>
-            <FluxSpacer/>
-
+    <DialogLayout
+        :icon="alert.icon"
+        :message="alert.message"
+        :title="alert.title">
+        <template #footer>
             <FluxPrimaryButton
                 icon-leading="circle-check"
                 :label="translate('flux.ok')"
                 @click="alert.onClose()"/>
-        </FluxPaneFooter>
-    </FluxPane>
+        </template>
+    </DialogLayout>
 </template>
 
 <script
@@ -22,12 +17,8 @@
     setup>
     import type { FluxAlertObject } 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 FluxSpacer from './FluxSpacer.vue';
+    import { DialogLayout } from './primitive';
 
     defineProps<{
         readonly alert: FluxAlertObject;

package/src/component/FluxAnimatedColors.vue

@@ -7,8 +7,8 @@
 <script
     lang="ts"
     setup>
+    import { useComponentId } from '@basmilius/common';
     import { mulberry32 } from '@basmilius/utils';
-    import { useComponentId } from '@flux-ui/internals';
     import { computed, onBeforeUnmount, onMounted, ref, unref, useTemplateRef, watch } from 'vue';
     import $style from '$flux/css/component/Visual.module.scss';
 
@@ -19,12 +19,14 @@
         colors,
         incrementor = 1,
         opacity = .5,
-        seed
+        seed,
+        static: isStatic
     } = defineProps<{
         readonly colors?: string[];
         readonly incrementor?: number;
         readonly opacity?: number;
         readonly seed?: number;
+        readonly static?: boolean;
     }>();
 
     const canvasRef = useTemplateRef('canvas');
@@ -39,7 +41,7 @@
             return [];
         }
 
-        const mulberry = mulberry32(seed ?? unref(componentId));
+        const mulberry = mulberry32(seed ?? componentId.value);
         const polygons: Polygon[] = [];
 
         for (const color of colors) {
@@ -119,7 +121,7 @@
             context.restore();
         }
 
-        schedule();
+        !isStatic && schedule();
     }
 
     watch(canvasRef, canvas => {
@@ -136,6 +138,6 @@
 
     watch(polygons, () => {
         cancel();
-        schedule();
+        !isStatic && schedule();
     });
 </script>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { flattenVNodeTree, orange600, pink600, purple600 } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { cloneVNode, defineComponent, Fragment, h, PropType } from 'vue';
+    import { cloneVNode, defineComponent, Fragment, h, type PropType } from 'vue';
     import $style from '$flux/css/component/Visual.module.scss';
 
     export default defineComponent({

package/src/component/FluxBoxedIcon.vue

@@ -24,10 +24,6 @@
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Icon.module.scss';
 
-    defineEmits<{
-        click: [MouseEvent];
-    }>();
-
     defineProps<{
         readonly color?: FluxColor;
         readonly name: FluxIconName;

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 }}
@@ -19,7 +20,7 @@
                             <div :class="$styleDatePicker.datePickerMonths">
                                 <template
                                     v-for="month of months"
-                                    :key="month">
+                                    :key="month.label">
                                     <FluxSecondaryButton
                                         :label="month.label"
                                         tabindex="-1"
@@ -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>
@@ -103,6 +110,7 @@
                         <div :class="$style.calendarEvents">
                             <VNodeRenderer
                                 v-for="event of getEventsForDate(date)"
+                                :key="event.index"
                                 :class="clsx(
                                     event.type === 'single' && $style.isSingle,
                                     event.type === 'start' && $style.isStart,
@@ -137,7 +145,7 @@
     import { flattenVNodeTree, getComponentName, getComponentProps, useCalendar, useCalendarMonthSwitcher, useCalendarYearSwitcher } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { DateTime } from 'luxon';
-    import { computed, unref, VNode, watch } from 'vue';
+    import { computed, type ComputedRef, unref, type VNode, watch } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { FluxWindowTransition } from '$flux/transition';
     import { VNodeRenderer } from './primitive';
@@ -167,7 +175,7 @@
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
+        default?(): VNode[];
     }>();
 
     const {
@@ -198,7 +206,7 @@
 
     const eventNodes = computed(() => flattenVNodeTree(slots.default?.() ?? []));
     const events = computed(() => unref(eventNodes)
-        .filter(en => getComponentName(en) === 'FluxCalendarEvent'));
+        .filter(en => getComponentName(en) === 'FluxCalendarEvent')) as ComputedRef<VNode[]>;
 
     function getEventsForDate(forDate: DateTime): Event[] {
         const forDateStr = forDate.toSQLDate();
@@ -229,7 +237,7 @@
                     vnode
                 };
             })
-            .filter(e => e !== null);
+            .filter((e): e is Event => e !== null);
     }
 
     function setToday(): void {

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,18 +1,28 @@
 <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"
             :class="$style.checkboxElement"
-            role="checkbox"
-            :aria-checked="modelValue ?? false">
+            tabindex="-1">
             <FluxIcon
                 v-if="isIndeterminate"
                 name="minus"
@@ -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
@@ -25,7 +26,7 @@
             v-if="iconTrailing"
             :name="iconTrailing"
             :size="16"/>
-    </component>
+    </Component>
 </template>
 
 <script

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'"
@@ -128,7 +132,8 @@
     setup>
     import { hexToRGB, hslToHSV, hslToRGB, hsvToHSL, hsvToRGB, rgbToHEX, rgbToHSL, rgbToHSV } from '@basmilius/utils';
     import { blue500 } from '@flux-ui/internals';
-    import { computed, ComputedRef, ref, unref, watch } from 'vue';
+    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);
@@ -205,7 +212,7 @@
         return computed({
             get: () => fromHSV?.(...unref(hsv))[index] ?? unref(hsv)[index],
             set: value => {
-                const values = fromHSV?.(...unref(hsv)) ?? unref(hsv);
+                const values: [number, number, number] = [...(fromHSV?.(...unref(hsv)) ?? unref(hsv))];
                 values[index] = value;
                 hsv.value = toHSV?.(...values) ?? values;
             }