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

package/src/component/index.ts

@@ -1,7 +1,7 @@
 export { default as FluxAction } from './FluxAction.vue';
 export { default as FluxActionBar } from './FluxActionBar.vue';
 export { default as FluxActionPane } from './FluxActionPane.vue';
-export { default as FluxActions } from './FluxActions.vue';
+export { default as FluxActionStack } from './FluxActionStack.vue';
 export { default as FluxAnimatedColors } from './FluxAnimatedColors.vue';
 export { default as FluxAspectRatio } from './FluxAspectRatio.vue';
 export { default as FluxAutoGrid } from './FluxAutoGrid.vue';
@@ -18,6 +18,9 @@ export { default as FluxCalendarEvent } from './FluxCalendarEvent.vue';
 export { default as FluxCheckbox } from './FluxCheckbox.vue';
 export { default as FluxChip } from './FluxChip.vue';
 export { default as FluxClickablePane } from './FluxClickablePane.vue';
+export { default as FluxCommandPalette } from './FluxCommandPalette.vue';
+export { default as FluxCommandPaletteGroup } from './FluxCommandPaletteGroup.vue';
+export { default as FluxCommandPaletteItem } from './FluxCommandPaletteItem.vue';
 export { default as FluxComment } from './FluxComment.vue';
 export { default as FluxColorPicker } from './FluxColorPicker.vue';
 export { default as FluxColorSelect } from './FluxColorSelect.vue';

package/src/component/primitive/CoordinatePicker.vue

@@ -19,7 +19,7 @@
     setup>
     import { roundStep } from '@basmilius/utils';
     import { unrefTemplateElement } from '@flux-ui/internals';
-    import { computed, onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { computed, onUnmounted, ref, toRef, unref, useTemplateRef, watch } from 'vue';
     import { useDisabled } from '$flux/composable';
     import CoordinatePickerThumb from './CoordinatePickerThumb.vue';
     import $style from '$flux/css/component/primitive/CoordinatePicker.module.scss';
@@ -58,16 +58,6 @@
         (unref(modelValue)[1] - unref(min)[1]) / (unref(max)[1] - unref(min)[1])
     ]);
 
-    onMounted(() => {
-        document.addEventListener('pointermove', onPointerMove);
-        document.addEventListener('pointerup', onPointerUp, {passive: true});
-    });
-
-    onUnmounted(() => {
-        document.removeEventListener('pointermove', onPointerMove);
-        document.removeEventListener('pointerup', onPointerUp);
-    });
-
     function onDecrement(x: boolean, y: boolean): void {
         if (unref(disabled)) {
             return;
@@ -116,6 +106,8 @@
         }
 
         isDragging.value = true;
+        document.addEventListener('pointermove', onPointerMove);
+        document.addEventListener('pointerup', onPointerUp, {passive: true});
         requestAnimationFrame(() => onPointerMove(evt));
     }
 
@@ -149,7 +141,14 @@
 
     function onPointerUp(): void {
         isDragging.value = false;
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
     }
 
     watch(isDragging, isDragging => emit('dragging', isDragging));
+
+    onUnmounted(() => {
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+    });
 </script>

package/src/component/primitive/FilterItem.vue

@@ -38,7 +38,16 @@
         emit('click', evt);
     }
 
-    watch(() => item, async () => {
-        valueLabel.value = await unref(getValueLabel)(value) ?? undefined;
+    watch([() => item, () => value], async ([, nextValue], _prev, onCleanup) => {
+        let cancelled = false;
+        onCleanup(() => {
+            cancelled = true;
+        });
+
+        const nextLabel = await unref(getValueLabel)(nextValue);
+
+        if (!cancelled) {
+            valueLabel.value = nextLabel ?? undefined;
+        }
     }, {deep: true, immediate: true});
 </script>

package/src/component/primitive/SelectBase.vue

@@ -286,8 +286,8 @@
                 return;
 
             default:
-                if (evt.key.match(/[a-z]/)) {
-                    highlightedIndex.value = unref(rawOptions).findIndex(o => o.label.toLowerCase().startsWith(evt.key));
+                if (evt.key.length === 1) {
+                    highlightedIndex.value = unref(rawOptions).findIndex(o => o.label.toLowerCase().startsWith(evt.key.toLowerCase()));
                 } else {
                     highlightedIndex.value = -1;
                 }

package/src/component/primitive/SliderBase.vue

@@ -22,7 +22,7 @@
     setup>
     import { unrefTemplateElement } from '@flux-ui/internals';
     import { clsx } from 'clsx';
-    import { onMounted, onUnmounted, toRef, unref, useTemplateRef, watch } from 'vue';
+    import { onUnmounted, toRef, unref, useTemplateRef } from 'vue';
     import { useDisabled } from '$flux/composable';
     import FluxTicks from '$flux/component/FluxTicks.vue';
     import $style from '$flux/css/component/primitive/Slider.module.scss';
@@ -47,22 +47,14 @@
     const disabled = useDisabled(toRef(() => componentDisabled));
     const rootRef = useTemplateRef('root');
 
-    onMounted(() => {
-        document.addEventListener('pointermove', onPointerMove);
-        document.addEventListener('pointerup', onPointerUp, {passive: true});
-    });
-
-    onUnmounted(() => {
-        document.removeEventListener('pointermove', onPointerMove);
-        document.removeEventListener('pointerup', onPointerUp);
-    });
-
     function onPointerDown(evt: PointerEvent): void {
         if (unref(disabled)) {
             return;
         }
 
         emit('dragging', true);
+        document.addEventListener('pointermove', onPointerMove);
+        document.addEventListener('pointerup', onPointerUp, {passive: true});
         requestAnimationFrame(() => onPointerMove(evt));
     }
 
@@ -77,13 +69,18 @@
         left += 6; // margin.
         width -= 12; // margin times two.
 
-        emit('update', Math.max(0, Math.min(1, (evt.pageX - left) / width)));
+        emit('update', Math.max(0, Math.min(1, (evt.clientX - left) / width)));
         evt.preventDefault();
     }
 
     function onPointerUp(): void {
         emit('dragging', false);
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
     }
 
-    watch(() => isDragging, () => emit('dragging', isDragging));
+    onUnmounted(() => {
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+    });
 </script>

package/src/composable/private/useCommandPalette.ts

@@ -0,0 +1,405 @@
+import type { FluxCommandSource, FluxCommandSourceItem, FluxCommandSubAction } from '@flux-ui/types';
+import { useDebouncedRef } from '@basmilius/common';
+import { computed, nextTick, type Ref, ref, unref, watch } from 'vue';
+
+export type CommandPaletteResultItem = {
+    readonly globalIndex: number;
+    readonly sourceKey: string;
+    readonly sourceLabel: string;
+    readonly item: FluxCommandSourceItem;
+};
+
+export type CommandPaletteGroup = {
+    readonly sourceKey: string;
+    readonly sourceLabel: string;
+    readonly startIndex: number;
+    readonly items: CommandPaletteResultItem[];
+};
+
+export function useCommandPalette(params: {
+    readonly sources: Ref<FluxCommandSource[]>;
+    readonly itemRefs: Readonly<Ref<Array<{ readonly $el: HTMLElement; }> | null | undefined>>;
+}): {
+    readonly search: Ref<string>;
+    readonly activeTab: Ref<string | null>;
+    readonly highlightedIndex: Ref<number>;
+    readonly isLoading: Ref<boolean>;
+    readonly isTransitioningBack: Ref<boolean>;
+    readonly subActionTarget: Ref<FluxCommandSourceItem | null>;
+    readonly filteredItems: Ref<CommandPaletteResultItem[]>;
+    readonly groupedItems: Ref<CommandPaletteGroup[]>;
+    readonly subActions: Ref<FluxCommandSubAction[]>;
+    readonly activeTabSource: Ref<FluxCommandSource | null>;
+    readonly tabs: Ref<FluxCommandSource[]>;
+    readonly totalItems: Ref<number>;
+    setSearch: (value: string) => void;
+    setActiveTab: (key: string | null) => void;
+    enterSubActions: (item: FluxCommandSourceItem) => void;
+    onKeyNavigate: (evt: KeyboardEvent, onClose: () => void, onActivate: (item: FluxCommandSourceItem) => void) => void;
+    reset: () => void;
+} {
+    const search = ref('');
+    const activeTab = ref<string | null>(null);
+    const highlightedIndex = ref(-1);
+    const subActionTarget = ref<FluxCommandSourceItem | null>(null);
+    const isKeyboardNav = ref(false);
+    const isLoading = ref(false);
+    const isTransitioningBack = ref(false);
+    const savedState = ref<{ readonly search: string; readonly highlightedIndex: number; } | null>(null);
+    const asyncResults = ref<Map<string, FluxCommandSourceItem[]>>(new Map());
+    const debouncedSearch = useDebouncedRef(search, 300);
+    let fetchGeneration = 0;
+
+    const filteredItems = computed<CommandPaletteResultItem[]>(() => {
+        const query = unref(search).toLowerCase().trim();
+        const tab = unref(activeTab);
+        const sources = unref(params.sources);
+        const asyncMap = unref(asyncResults);
+        const results: CommandPaletteResultItem[] = [];
+
+        for (const source of sources) {
+            if (tab && source.key !== tab) {
+                continue;
+            }
+
+            if (source.fetchSearch) {
+                const items = query ? asyncMap.get(source.key) : source.items;
+
+                if (items) {
+                    for (const item of items) {
+                        results.push({
+                            globalIndex: results.length,
+                            sourceKey: source.key,
+                            sourceLabel: source.label,
+                            item
+                        });
+                    }
+                }
+
+                continue;
+            }
+
+            for (const item of source.items) {
+                if (query && !item.label.toLowerCase().includes(query) && !(item.subLabel?.toLowerCase().includes(query) ?? false)) {
+                    continue;
+                }
+
+                results.push({
+                    globalIndex: results.length,
+                    sourceKey: source.key,
+                    sourceLabel: source.label,
+                    item
+                });
+            }
+        }
+
+        return results;
+    });
+
+    const groupedItems = computed<CommandPaletteGroup[]>(() => {
+        const items = unref(filteredItems);
+        const groups = new Map<string, CommandPaletteGroup>();
+
+        for (const result of items) {
+            if (!groups.has(result.sourceKey)) {
+                groups.set(result.sourceKey, {
+                    sourceKey: result.sourceKey,
+                    sourceLabel: result.sourceLabel,
+                    startIndex: result.globalIndex,
+                    items: []
+                });
+            }
+
+            (groups.get(result.sourceKey)!.items as CommandPaletteResultItem[]).push(result);
+        }
+
+        return Array.from(groups.values());
+    });
+
+    const tabs = computed(() => unref(params.sources).filter(source => source.tab));
+
+    const activeTabSource = computed<FluxCommandSource | null>(() => {
+        const tab = unref(activeTab);
+
+        if (!tab) {
+            return null;
+        }
+
+        return unref(tabs).find(source => source.key === tab) ?? null;
+    });
+
+    const subActions = computed(() => {
+        const actions = unref(subActionTarget)?.subActions ?? [];
+        const query = unref(search).toLowerCase().trim();
+
+        if (!query) {
+            return actions;
+        }
+
+        return actions.filter(action => action.label.toLowerCase().includes(query));
+    });
+
+    const totalItems = computed(() => {
+        if (unref(subActionTarget)) {
+            return unref(subActions).length;
+        }
+
+        return unref(filteredItems).length;
+    });
+
+    function setSearch(value: string): void {
+        search.value = value;
+        highlightedIndex.value = value.trim() ? 0 : -1;
+
+        if (value.trim() && !unref(subActionTarget) && unref(params.sources).some(s => s.fetchSearch)) {
+            isLoading.value = true;
+        } else {
+            isLoading.value = false;
+        }
+    }
+
+    function setActiveTab(key: string | null): void {
+        const allTabs = unref(tabs);
+        const tabKeys: (string | null)[] = [null, ...allTabs.map(t => t.key)];
+
+        isTransitioningBack.value = tabKeys.indexOf(key) < tabKeys.indexOf(unref(activeTab));
+        activeTab.value = key;
+        search.value = '';
+        highlightedIndex.value = -1;
+        subActionTarget.value = null;
+    }
+
+    function selectHighlighted(onClose: () => void, onActivate: (item: FluxCommandSourceItem) => void): void {
+        const index = unref(highlightedIndex);
+        const target = unref(subActionTarget);
+
+        if (target) {
+            const action = unref(subActions)[index];
+
+            if (action) {
+                action.onActivate();
+                onClose();
+            }
+
+            return;
+        }
+
+        const result = unref(filteredItems)[index];
+
+        if (!result) {
+            return;
+        }
+
+        if (result.item.subActions?.length) {
+            enterSubActions(result.item);
+        } else {
+            result.item.onActivate();
+            onActivate(result.item);
+        }
+    }
+
+    function enterSubActions(item: FluxCommandSourceItem): void {
+        savedState.value = {search: unref(search), highlightedIndex: unref(highlightedIndex)};
+        subActionTarget.value = item;
+        search.value = '';
+        highlightedIndex.value = 0;
+    }
+
+    function navigateTab(direction: number): void {
+        const allTabs = unref(tabs);
+
+        if (allTabs.length === 0) {
+            return;
+        }
+
+        const tabKeys: (string | null)[] = [null, ...allTabs.map(tab => tab.key)];
+        const currentIndex = tabKeys.indexOf(unref(activeTab));
+        const nextIndex = (currentIndex + direction + tabKeys.length) % tabKeys.length;
+
+        setActiveTab(tabKeys[nextIndex]);
+    }
+
+    function restoreState(): void {
+        subActionTarget.value = null;
+        const state = unref(savedState);
+
+        if (state) {
+            search.value = state.search;
+            isKeyboardNav.value = true;
+            highlightedIndex.value = state.highlightedIndex;
+            savedState.value = null;
+        } else {
+            highlightedIndex.value = -1;
+        }
+    }
+
+    function onKeyNavigate(evt: KeyboardEvent, onClose: () => void, onActivate: (item: FluxCommandSourceItem) => void): void {
+        const total = unref(totalItems);
+        const current = unref(highlightedIndex);
+
+        switch (evt.key) {
+            case 'ArrowDown':
+                evt.preventDefault();
+                isKeyboardNav.value = true;
+                highlightedIndex.value = Math.min(total - 1, current + 1);
+                break;
+
+            case 'ArrowUp':
+                evt.preventDefault();
+                isKeyboardNav.value = true;
+                highlightedIndex.value = total === 0 ? -1 : Math.max(0, current - 1);
+                break;
+
+            case 'ArrowLeft':
+                if (!unref(search) && !unref(subActionTarget)) {
+                    evt.preventDefault();
+                    navigateTab(-1);
+                }
+
+                break;
+
+            case 'ArrowRight':
+                if (!unref(search) && !unref(subActionTarget)) {
+                    evt.preventDefault();
+                    navigateTab(1);
+                }
+
+                break;
+
+            case 'Enter':
+                evt.preventDefault();
+                selectHighlighted(onClose, onActivate);
+                break;
+
+            case 'Escape':
+                evt.preventDefault();
+
+                if (unref(subActionTarget)) {
+                    restoreState();
+                } else {
+                    onClose();
+                }
+
+                break;
+
+            case 'Backspace':
+                if (!unref(search)) {
+                    if (unref(subActionTarget)) {
+                        evt.preventDefault();
+                        restoreState();
+                    } else if (unref(activeTab)) {
+                        evt.preventDefault();
+                        activeTab.value = null;
+                        highlightedIndex.value = -1;
+                    }
+                }
+
+                break;
+        }
+    }
+
+    function reset(): void {
+        search.value = '';
+        activeTab.value = null;
+        highlightedIndex.value = -1;
+        subActionTarget.value = null;
+        asyncResults.value = new Map();
+        isLoading.value = false;
+        fetchGeneration++;
+    }
+
+    watch(debouncedSearch, async (query) => {
+        if (unref(subActionTarget)) {
+            return;
+        }
+
+        const trimmed = query.trim();
+
+        if (!trimmed) {
+            asyncResults.value = new Map();
+            isLoading.value = false;
+            return;
+        }
+
+        const tab = unref(activeTab);
+        const sources = unref(params.sources);
+        const asyncSources = sources.filter(s => {
+            if (!s.fetchSearch) {
+                return false;
+            }
+
+            return !tab || s.key === tab;
+        });
+
+        if (asyncSources.length === 0) {
+            isLoading.value = false;
+            return;
+        }
+
+        const generation = ++fetchGeneration;
+        isLoading.value = true;
+
+        try {
+            const fetched = await Promise.all(
+                asyncSources.map(async (source) => ({
+                    key: source.key,
+                    items: await source.fetchSearch!(trimmed)
+                }))
+            );
+
+            if (generation !== fetchGeneration) {
+                return;
+            }
+
+            const map = new Map<string, FluxCommandSourceItem[]>();
+
+            for (const {key, items} of fetched) {
+                map.set(key, items);
+            }
+
+            asyncResults.value = map;
+        } finally {
+            if (generation === fetchGeneration) {
+                isLoading.value = false;
+            }
+        }
+    });
+
+    watch(highlightedIndex, (index) => {
+        if (index < 0 || !unref(isKeyboardNav)) {
+            return;
+        }
+
+        isKeyboardNav.value = false;
+
+        nextTick(() => unref(params.itemRefs)?.[index]?.$el?.scrollIntoView({block: 'nearest'}));
+    });
+
+    watch(totalItems, (total) => {
+        const current = unref(highlightedIndex);
+
+        if (current >= total) {
+            highlightedIndex.value = Math.max(-1, total - 1);
+        }
+    });
+
+    return {
+        search,
+        activeTab,
+        activeTabSource,
+        highlightedIndex,
+        isLoading,
+        isTransitioningBack,
+        subActionTarget,
+        filteredItems,
+        groupedItems,
+        subActions,
+        tabs,
+        totalItems,
+        setSearch,
+        setActiveTab,
+        enterSubActions,
+        onKeyNavigate,
+        reset
+    };
+}

package/src/composable/private/useFormSelect.ts

@@ -14,8 +14,8 @@ export default function (modelValue: Ref<FluxFormSelectValue>, isMultiple: boole
         const search = unref(searchQuery)?.trim().toLowerCase();
 
         const available = unref(options)
-            .filter(o => !('value' in o) || (!search || o.label.toLowerCase().includes(search)))
-            .filter(o => !('value' in o) || !isMultiple || !unref(selected).find(s => s.value === o.value));
+            .filter(o => isFluxFormSelectGroup(o) || (!search || o.label.toLowerCase().includes(search)))
+            .filter(o => isFluxFormSelectGroup(o) || !isMultiple || !unref(selected).find(s => s.value === o.value));
 
         if (available.length === 0) {
             return [];

package/src/css/component/Badge.module.scss

@@ -142,6 +142,13 @@
     font-weight: 400;
 }
 
+.tagKeyboardShortcut {
+    composes: tag;
+
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
 .tagClose {
     composes: badgeClose;