@flux-ui/components 3.0.0-next.7 → 3.0.0-next.70

package/src/component/FluxCalendarItem.vue

@@ -0,0 +1,79 @@
+<script
+    lang="ts"
+    setup>
+    import type { DateTime } from 'luxon';
+    import { computed, getCurrentInstance, onBeforeUnmount, onMounted, type VNode, watch } from 'vue';
+    import { useCalendarInjection } from '~flux/components/composable';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const props = defineProps<{
+        readonly date: DateTime;
+        readonly id?: string | number;
+        readonly duration?: number;
+        readonly allDay?: boolean;
+    }>();
+
+    const slots = defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const dragContext = useCalendarInjection();
+    const instance = getCurrentInstance();
+    const isClickable = computed(() => !!instance?.vnode?.props?.onClick);
+
+    function buildData() {
+        return {
+            id: props.id as string | number,
+            date: props.date,
+            duration: props.duration,
+            allDay: props.allDay ?? false,
+            isClickable: isClickable.value,
+            renderContent: () => slots.default?.() ?? [],
+            handleClick: (evt: MouseEvent) => emit('click', evt)
+        };
+    }
+
+    onMounted(() => {
+        if (dragContext && props.id != null) {
+            dragContext.registerItem(props.id, buildData());
+        }
+    });
+
+    onBeforeUnmount(() => {
+        if (dragContext && props.id != null) {
+            dragContext.unregisterItem(props.id);
+        }
+    });
+
+    watch(() => props.id, (newId, oldId) => {
+        if (!dragContext) {
+            return;
+        }
+
+        if (oldId != null) {
+            dragContext.unregisterItem(oldId);
+        }
+
+        if (newId != null) {
+            dragContext.registerItem(newId, buildData());
+        }
+    });
+
+    watch(
+        () => [props.date, props.duration, props.allDay, isClickable.value],
+        () => {
+            if (dragContext && props.id != null) {
+                dragContext.registerItem(props.id, buildData());
+            }
+        }
+    );
+</script>
+
+<template>
+    <span
+        aria-hidden="true"
+        style="display: none"/>
+</template>

package/src/component/FluxCheckbox.vue

@@ -1,27 +1,37 @@
 <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"
-                :size="16"/>
+                :size="12"/>
 
             <FluxIcon
                 v-else
                 name="check"
-                :size="16"/>
+                :size="12"/>
         </button>
 
         <span
@@ -35,26 +45,43 @@
 <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/components/composable';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const modelValue = defineModel<boolean | null>({
         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
@@ -34,9 +35,9 @@
     import type { FluxIconName } from '@flux-ui/types';
     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/Chip.module.scss';
+    import $style from '~flux/components/css/component/Chip.module.scss';
 
     defineEmits<{
         click: [MouseEvent];

package/src/component/FluxClickablePane.vue

@@ -30,9 +30,10 @@
     lang="ts"
     setup>
     import type { FluxPressableType, FluxTo } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxPressable from './FluxPressable.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Pane.module.scss';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     const CLASS_MAP = {
         default: $style.paneDefault,
@@ -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,12 +132,13 @@
     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/components/composable/private';
     import CoordinatePicker from './primitive/CoordinatePicker.vue';
     import FluxFormField from './FluxFormField.vue';
     import FluxFormInput from './FluxFormInput.vue';
     import FluxFormSlider from './FluxFormSlider.vue';
-    import $style from '$flux/css/component/Color.module.scss';
+    import $style from '~flux/components/css/component/Color.module.scss';
 
     const modelValue = defineModel<string | [number, number, number]>({
         default: blue500
@@ -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;
             }

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"
@@ -31,11 +44,11 @@
 
                 <FluxPaneBody :class="$style.colorSelectButtons">
                     <FluxSecondaryButton
-                        :label="t('flux.cancel')"
+                        :label="translate('flux.cancel')"
                         @click="close()"/>
 
                     <FluxPrimaryButton
-                        :label="t('flux.ok')"
+                        :label="translate('flux.ok')"
                         @click="select(customColor, close)"/>
                 </FluxPaneBody>
             </template>
@@ -47,32 +60,40 @@
     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 { useTranslate } from '$flux/composable/private';
+    import { ref, toRef, unref, watch } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxColorPicker from './FluxColorPicker.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxIcon from './FluxIcon.vue';
     import FluxPaneBody from './FluxPaneBody.vue';
     import FluxPrimaryButton from './FluxPrimaryButton.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import $style from '$flux/css/component/Color.module.scss';
+    import $style from '~flux/components/css/component/Color.module.scss';
 
     const modelValue = defineModel<string>({
         default: '#000000'
     });
 
     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 t = useTranslate();
+    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/FluxCommandPalette.vue

@@ -0,0 +1,290 @@
+<template>
+    <Teleport to="body">
+        <div
+            v-if="isOpen || isClosing"
+            :class="[$style.commandPaletteBackdrop, isClosing && $style.isClosing]"
+            @click="close"/>
+
+        <div
+            v-if="isOpen || isClosing"
+            ref="dialogRef"
+            :class="[$style.commandPaletteDialog, isClosing && $style.isClosing]"
+            @click.self="close"
+            @keydown="onKeyDown">
+            <div
+                v-height-transition
+                :class="$style.commandPalette"
+                @mousedown.prevent>
+                <div :class="$style.commandPaletteSearch">
+                    <FluxIcon
+                        :class="$style.commandPaletteSearchIcon"
+                        name="magnifying-glass"/>
+
+                    <template v-if="activeTabSource">
+                        <button
+                            :class="$style.commandPaletteBreadcrumb"
+                            tabindex="-1"
+                            type="button"
+                            @click="clearSubActionTarget"
+                            @mousedown.prevent>
+                            {{ activeTabSource.label }}
+                        </button>
+
+                        <span :class="$style.commandPaletteBreadcrumbSeparator">/</span>
+                    </template>
+
+                    <template v-if="subActionTarget">
+                        <button
+                            :class="$style.commandPaletteBreadcrumb"
+                            tabindex="-1"
+                            type="button"
+                            @mousedown.prevent>
+                            {{ subActionTarget.label }}
+                        </button>
+
+                        <span :class="$style.commandPaletteBreadcrumbSeparator">/</span>
+                    </template>
+
+                    <input
+                        ref="inputRef"
+                        :class="$style.commandPaletteSearchInput"
+                        :placeholder="placeholder ?? 'Search...'"
+                        :value="search"
+                        type="text"
+                        @input="setSearch(($event.target as HTMLInputElement).value)"/>
+
+                    <FluxTag
+                        is-keyboard-shortcut
+                        label="Esc"/>
+                </div>
+
+                <div
+                    v-if="tabs.length > 0 && !subActionTarget"
+                    :class="$style.commandPaletteTabs">
+                    <button
+                        :class="activeTab === null ? $style.commandPaletteTabActive : $style.commandPaletteTab"
+                        tabindex="-1"
+                        type="button"
+                        @click="setActiveTab(null)"
+                        @mousedown.prevent>
+                        All
+                    </button>
+
+                    <button
+                        v-for="tab of tabs"
+                        :key="tab.key"
+                        :class="activeTab === tab.key ? $style.commandPaletteTabActive : $style.commandPaletteTab"
+                        tabindex="-1"
+                        type="button"
+                        @click="setActiveTab(tab.key)"
+                        @mousedown.prevent>
+                        <FluxIcon
+                            v-if="tab.icon"
+                            :class="$style.commandPaletteTabIcon"
+                            :name="tab.icon"/>
+
+                        {{ tab.label }}
+                    </button>
+                </div>
+
+                <FluxWindowTransition :is-back="isTransitioningBack">
+                    <div
+                        :key="activeTab"
+                        :class="$style.commandPaletteResults">
+                        <template v-if="subActionTarget">
+                            <FluxCommandPaletteItem
+                                v-for="(action, index) of subActions"
+                                :key="index"
+                                ref="itemRefs"
+                                :icon="action.icon"
+                                :is-highlighted="highlightedIndex === index"
+                                :label="action.label"
+                                @activate="activateSubAction(action)"
+                                @highlight="highlightedIndex = index"/>
+                        </template>
+
+                        <template v-else-if="groupedItems.length > 0">
+                            <template
+                                v-for="group of groupedItems"
+                                :key="group.sourceKey">
+                                <FluxCommandPaletteGroup
+                                    v-if="group.sourceLabel"
+                                    :label="group.sourceLabel"/>
+
+                                <FluxCommandPaletteItem
+                                    v-for="result of group.items"
+                                    :key="result.item.id"
+                                    ref="itemRefs"
+                                    :command="result.item.command"
+                                    :has-sub-actions="!!result.item.subActions?.length"
+                                    :icon="result.item.icon"
+                                    :is-highlighted="highlightedIndex === result.globalIndex"
+                                    :label="result.item.label"
+                                    :sub-label="result.item.subLabel"
+                                    @activate="activateItem(result.item)"
+                                    @highlight="highlightedIndex = result.globalIndex"/>
+                            </template>
+                        </template>
+
+                        <div
+                            v-else-if="isLoading"
+                            :class="$style.commandPaletteLoading">
+                            <FluxSpinner :size="22"/>
+                        </div>
+
+                        <div
+                            v-else
+                            :class="$style.commandPaletteEmpty">
+                            No results found.
+                        </div>
+                    </div>
+                </FluxWindowTransition>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { isSSR, vHeightTransition } from '@flux-ui/internals';
+    import type { FluxCommandSource, FluxCommandSourceItem } from '@flux-ui/types';
+    import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef } from 'vue';
+    import { useCommandPalette } from '~flux/components/composable/private';
+    import { FluxWindowTransition } from '~flux/components/transition';
+    import FluxCommandPaletteGroup from './FluxCommandPaletteGroup.vue';
+    import FluxCommandPaletteItem from './FluxCommandPaletteItem.vue';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxSpinner from './FluxSpinner.vue';
+    import FluxTag from './FluxTag.vue';
+    import $style from '~flux/components/css/component/CommandPalette.module.scss';
+
+    const props = defineProps<{
+        readonly hasKeyboardShortcut?: boolean;
+        readonly placeholder?: string;
+        readonly sources: FluxCommandSource[];
+    }>();
+
+    const emit = defineEmits<{
+        select: [item: FluxCommandSourceItem];
+    }>();
+
+    const dialogRef = useTemplateRef<HTMLDivElement>('dialogRef');
+    const inputRef = useTemplateRef<HTMLInputElement>('inputRef');
+    const itemRefs = ref<InstanceType<typeof FluxCommandPaletteItem>[]>();
+
+    const isOpen = ref(false);
+    const isClosing = ref(false);
+
+    const {
+        search,
+        activeTab,
+        activeTabSource,
+        highlightedIndex,
+        isLoading,
+        isTransitioningBack,
+        subActionTarget,
+        groupedItems,
+        subActions,
+        tabs,
+        setSearch,
+        setActiveTab,
+        enterSubActions,
+        onKeyNavigate,
+        reset
+    } = useCommandPalette({
+        sources: toRef(() => props.sources),
+        itemRefs
+    });
+
+    function open(): void {
+        if (unref(isOpen)) {
+            return;
+        }
+
+        isOpen.value = true;
+
+        requestAnimationFrame(() => unref(inputRef)?.focus());
+    }
+
+    function close(): void {
+        if (!unref(isOpen)) {
+            return;
+        }
+
+        const dialog = unref(dialogRef);
+
+        if (!dialog) {
+            return;
+        }
+
+        isClosing.value = true;
+
+        const finishClose = () => {
+            isClosing.value = false;
+            isOpen.value = false;
+            reset();
+        };
+
+        const fallbackTimeout = setTimeout(finishClose, 250);
+
+        dialog.addEventListener('animationend', () => {
+            clearTimeout(fallbackTimeout);
+            finishClose();
+        }, {once: true});
+    }
+
+    function clearSubActionTarget(): void {
+        subActionTarget.value = null;
+        highlightedIndex.value = -1;
+    }
+
+    function activateItem(item: FluxCommandSourceItem): void {
+        if (item.subActions?.length) {
+            enterSubActions(item);
+        } else {
+            item.onActivate();
+            emit('select', item);
+            close();
+        }
+    }
+
+    function activateSubAction(action: { readonly onActivate: () => void; }): void {
+        action.onActivate();
+        close();
+    }
+
+    function onKeyDown(evt: KeyboardEvent): void {
+        onKeyNavigate(evt, close, (item) => {
+            emit('select', item);
+            close();
+        });
+    }
+
+    function onGlobalKeyDown(evt: KeyboardEvent): void {
+        if (evt.key === 'k' && (evt.metaKey || evt.ctrlKey)) {
+            evt.preventDefault();
+
+            if (unref(isOpen)) {
+                close();
+            } else {
+                open();
+            }
+        }
+    }
+
+    if (!isSSR && props.hasKeyboardShortcut) {
+        onMounted(() => {
+            window.addEventListener('keydown', onGlobalKeyDown);
+        });
+
+        onUnmounted(() => {
+            window.removeEventListener('keydown', onGlobalKeyDown);
+        });
+    }
+
+    defineExpose({
+        close,
+        open
+    });
+</script>