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

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 type { FluxCommandSource, FluxCommandSourceItem } from '@flux-ui/types';
+    import { isSSR, vHeightTransition } from '@flux-ui/internals';
+    import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef } from 'vue';
+    import { useCommandPalette } from '$flux/composable/private/useCommandPalette';
+    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 FluxWindowTransition from '$flux/transition/FluxWindowTransition.vue';
+    import $style from '$flux/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>

package/src/component/FluxCommandPaletteGroup.vue

@@ -0,0 +1,23 @@
+<template>
+    <div :class="$style.commandPaletteGroup">
+        <FluxIcon
+            v-if="icon"
+            :class="$style.commandPaletteGroupIcon"
+            :name="icon"/>
+
+        <span>{{ label }}</span>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '$flux/css/component/CommandPalette.module.scss';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+        readonly label: string;
+    }>();
+</script>

package/src/component/FluxCommandPaletteItem.vue

@@ -0,0 +1,60 @@
+<template>
+    <button
+        :class="isHighlighted ? $style.commandPaletteItemHighlighted : $style.commandPaletteItem"
+        tabindex="-1"
+        type="button"
+        @click="$emit('activate')"
+        @mousedown.prevent
+        @mouseenter="$emit('highlight')">
+        <div
+            v-if="icon"
+            :class="$style.commandPaletteItemIcon">
+            <FluxIcon :name="icon"/>
+        </div>
+
+        <div :class="$style.commandPaletteItemContent">
+            <div :class="$style.commandPaletteItemLabel">
+                {{ label }}
+            </div>
+
+            <div
+                v-if="subLabel"
+                :class="$style.commandPaletteItemSubLabel">
+                {{ subLabel }}
+            </div>
+        </div>
+
+        <FluxTag
+            v-if="command"
+            is-keyboard-shortcut
+            :label="command"/>
+
+        <FluxIcon
+            v-if="hasSubActions"
+            :class="$style.commandPaletteItemSubActionIndicator"
+            name="chevron-right"/>
+    </button>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import FluxIcon from './FluxIcon.vue';
+    import FluxTag from './FluxTag.vue';
+    import $style from '$flux/css/component/CommandPalette.module.scss';
+
+    defineEmits<{
+        activate: [];
+        highlight: [];
+    }>();
+
+    defineProps<{
+        readonly command?: string;
+        readonly hasSubActions?: boolean;
+        readonly icon?: FluxIconName;
+        readonly isHighlighted?: boolean;
+        readonly label: string;
+        readonly subLabel?: string;
+    }>();
+</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; } = {};

package/src/component/FluxFader.vue

@@ -11,7 +11,7 @@
     setup>
     import { useInterval } from '@basmilius/common';
     import { unrefTemplateElement } from '@flux-ui/internals';
-    import { computed, ref, unref, useTemplateRef, watch } from 'vue';
+    import { computed, ref, unref, useTemplateRef, type VNode, watch } from 'vue';
     import $style from '$flux/css/component/Fader.module.scss';
 
     const emit = defineEmits<{
@@ -30,7 +30,7 @@
             previous(): void;
 
             readonly current: number;
-        }): any;
+        }): VNode[];
     }>();
 
     const faderRef = useTemplateRef('fader');

package/src/component/FluxFaderItem.vue

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

package/src/component/FluxFilter.vue

@@ -20,6 +20,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import type { FluxFilterState } from '@flux-ui/types';
     import FluxFilterBase from './FluxFilterBase.vue';
     import FluxFilterWindow from '$flux/component/FluxFilterWindow.vue';
@@ -37,7 +38,7 @@
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     function reset(name: string): void {