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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.33",
+    "version": "3.0.0-next.35",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,10 +51,10 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/common": "^3.11.1",
-        "@basmilius/utils": "^3.11.1",
-        "@flux-ui/internals": "3.0.0-next.33",
-        "@flux-ui/types": "3.0.0-next.33",
+        "@basmilius/common": "^3.12.1",
+        "@basmilius/utils": "^3.12.1",
+        "@flux-ui/internals": "3.0.0-next.35",
+        "@flux-ui/types": "3.0.0-next.35",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
@@ -63,16 +63,16 @@
         "vue": "^3.6.0-beta.7"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.11.1",
+        "@basmilius/vite-preset": "^3.12.1",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
-        "@types/node": "^25.3.5",
-        "@vitejs/plugin-vue": "^6.0.4",
+        "@types/node": "^25.5.0",
+        "@vitejs/plugin-vue": "^6.0.5",
         "@vue/tsconfig": "^0.9.0",
         "pinia": "^3.0.4",
-        "sass-embedded": "^1.97.3",
+        "sass-embedded": "^1.98.0",
         "typescript": "^5.9.3",
-        "vite": "^8.0.0-beta.18",
+        "vite": "^8.0.0",
         "vue-tsc": "^3.2.5"
     }
 }

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

@@ -103,6 +103,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,
@@ -229,7 +230,7 @@
                     vnode
                 };
             })
-            .filter(e => e !== null);
+            .filter((e): e is Event => e !== null);
     }
 
     function setToday(): void {

package/src/component/FluxChip.vue

@@ -25,7 +25,7 @@
             v-if="iconTrailing"
             :name="iconTrailing"
             :size="16"/>
-    </component>
+    </Component>
 </template>
 
 <script

package/src/component/FluxColorPicker.vue

@@ -205,7 +205,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

@@ -31,11 +31,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>
@@ -68,7 +68,7 @@
         readonly isCustomAllowed?: boolean;
     }>();
 
-    const t = useTranslate();
+    const translate = useTranslate();
 
     const customColor = ref('#000000');
 

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

@@ -136,7 +136,6 @@
     import $style from '$flux/css/component/DatePicker.module.scss';
 
     const modelValue = defineModel<DateTime | DateTime[] | null>({
-        default: null,
         required: true
     });
 

package/src/component/FluxFader.vue

@@ -48,13 +48,13 @@
     }
 
     function previous(): void {
-        current.value = unref(current) - 1 <= -1 ? unref(count) - 1 : unref(current) + 1;
+        current.value = unref(current) - 1 <= -1 ? unref(count) - 1 : unref(current) - 1;
     }
 
     watch(current, current => {
         const fader = unrefTemplateElement(faderRef);
 
-        if (!fader || fader.children.length === 0) {
+        if (!fader || fader.children.length === 0 || current < 0) {
             return;
         }
 

package/src/component/FluxFocalPointEditor.vue

@@ -112,11 +112,11 @@
         }
 
         const {top, left, width, height} = image.getBoundingClientRect();
-        const {pageX, pageY} = evt;
+        const {clientX, clientY} = evt;
 
         dragging.value = [
-            Math.max(0, Math.min(1, (pageX - left) / width)) * 100,
-            Math.max(0, Math.min(1, (pageY - top) / height)) * 100
+            Math.max(0, Math.min(1, (clientX - left) / width)) * 100,
+            Math.max(0, Math.min(1, (clientY - top) / height)) * 100
         ];
     }
 

package/src/component/FluxFormDateRangeInput.vue

@@ -31,7 +31,6 @@
 <script
     lang="ts"
     setup>
-    import type { FluxAutoCompleteType } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import type { DateTime } from 'luxon';
     import { computed, ref, toRef, unref, useTemplateRef, watch } from 'vue';
@@ -51,13 +50,9 @@
         disabled: componentDisabled,
         rangeMode = 'range'
     } = defineProps<{
-        readonly autoComplete?: FluxAutoCompleteType;
-        readonly autoFocus?: boolean;
         readonly disabled?: boolean;
-        readonly isReadonly?: boolean;
         readonly max?: DateTime;
         readonly min?: DateTime;
-        readonly placeholder?: string;
         readonly rangeMode?: 'range' | 'week' | 'month';
     }>();
 

package/src/component/FluxFormDateTimeInput.vue

@@ -100,8 +100,8 @@
         const value: DateTime = (localValue.value ?? DateTime.now());
         localValue.value = value.set({
             hour: dateTime.hour,
-            minute: unref(isHourOnly) ? 0 : dateTime.minute,
-            second: unref(isHourOnly) ? 0 : dateTime.second
+            minute: isHourOnly ? 0 : dateTime.minute,
+            second: isHourOnly ? 0 : dateTime.second
         });
     }
 

package/src/component/FluxFormSelect.vue

@@ -44,13 +44,13 @@
     const {groups, selected, values} = useFormSelect(modelValue, isMultiple, toRef(() => options), modelSearch);
 
     function onDeselect(id: string | number | null): void {
-        if (unref(isMultiple)) {
+        if (isMultiple) {
             modelValue.value = unref(values).filter(v => v !== id);
         }
     }
 
     function onSelect(id: string | number | null): void {
-        if (unref(isMultiple)) {
+        if (isMultiple) {
             modelValue.value = [...unref(values), id];
         } else {
             modelValue.value = id;

package/src/component/FluxFormTextArea.vue

@@ -7,6 +7,7 @@
         :autocomplete="autoComplete"
         :autofocus="autoFocus"
         :disabled="disabled"
+        :readonly="isReadonly"
         :maxlength="maxLength"
         :placeholder="placeholder"
         :style="{

package/src/component/FluxQuantitySelector.vue

@@ -94,13 +94,10 @@
     }
 
     watchEffect(() => {
-        if (unref(modelValue) > max) {
-            increment();
-            return;
-        }
+        const value = unref(modelValue);
 
-        if (unref(modelValue) < min) {
-            decrement();
+        if (value > max || value < min) {
+            modelValue.value = Math.min(max, Math.max(min, value));
             return;
         }
 

package/src/component/FluxSnackbar.vue

@@ -145,9 +145,11 @@
             return;
         }
 
-        let spec: Omit<FluxSnackbarObject, 'id'> = instance.props;
-        spec.onAction = onAction;
-        spec.onClose = onClose;
+        const spec: Omit<FluxSnackbarObject, 'id'> = {
+            ...instance.props,
+            onAction,
+            onClose
+        };
 
         id.value = addSnackbar(spec);
     }, {immediate: true});

package/src/component/FluxTableActions.vue

@@ -1,13 +1,13 @@
 <template>
-    <FluxActions :class="$style.tableActions">
+    <FluxActionStack :class="$style.tableActions">
         <slot/>
-    </FluxActions>
+    </FluxActionStack>
 </template>
 
 <script
     lang="ts"
     setup>
-    import FluxActions from './FluxActions.vue';
+    import FluxActionStack from './FluxActionStack.vue';
     import $style from '$flux/css/component/Table.module.scss';
 
     defineSlots<{

package/src/component/FluxTag.vue

@@ -6,7 +6,8 @@
             color === 'danger' && $style.tagDanger,
             color === 'info' && $style.tagInfo,
             color === 'success' && $style.tagSuccess,
-            color === 'warning' && $style.tagWarning
+            color === 'warning' && $style.tagWarning,
+            isKeyboardShortcut && $style.tagKeyboardShortcut
         )"
         :component-type="type"
         :tabindex="tabindex"
@@ -69,6 +70,7 @@
         readonly icon?: FluxIconName;
         readonly isClickable?: boolean;
         readonly isDeletable?: boolean;
+        readonly isKeyboardShortcut?: boolean;
         readonly isLoading?: boolean;
         readonly label: string;
         readonly type?: FluxPressableType;