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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.32",
+    "version": "3.0.0-next.34",
     "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.0",
-        "@basmilius/utils": "^3.11.0",
-        "@flux-ui/internals": "3.0.0-next.32",
-        "@flux-ui/types": "3.0.0-next.32",
+        "@basmilius/common": "^3.12.1",
+        "@basmilius/utils": "^3.12.1",
+        "@flux-ui/internals": "3.0.0-next.34",
+        "@flux-ui/types": "3.0.0-next.34",
         "@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.0",
+        "@basmilius/vite-preset": "^3.12.1",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
-        "@types/node": "^25.3.3",
-        "@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.16",
+        "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/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/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/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/reset.scss

@@ -9,11 +9,6 @@
         margin: 0;
     }
 
-    // Keyword animations.
-    //html {
-    //    interpolate-size: allow-keywords;
-    //}
-
     body {
         // Accessible line-height.
         line-height: 1.5;
@@ -71,105 +66,3 @@
         isolation: isolate;
     }
 }
-
-//@layer flux-reset {
-//    *,
-//    *::before,
-//    *::after {
-//        box-sizing: border-box;
-//    }
-//
-//    html {
-//        line-height: 1.6;
-//        -webkit-text-size-adjust: 100%;
-//        -webkit-tap-highlight-color: rgb(0 0 0 / 0);
-//        -moz-tab-size: 4;
-//        tab-size: 4;
-//    }
-//
-//    body {
-//        margin: 0;
-//        padding: 0;
-//        line-height: inherit;
-//    }
-//
-//    blockquote,
-//    dl,
-//    dd,
-//    h1,
-//    h2,
-//    h3,
-//    h4,
-//    h5,
-//    h6,
-//    hr,
-//    figure,
-//    p,
-//    pre {
-//        margin: 0;
-//    }
-//
-//    h1,
-//    h2,
-//    h3,
-//    h4,
-//    h5,
-//    h6 {
-//        font-size: inherit;
-//        font-weight: inherit;
-//    }
-//
-//    ul,
-//    ol {
-//        margin: 0;
-//    }
-//
-//    code,
-//    kbd,
-//    samp,
-//    pre {
-//        font-family: monospace;
-//        font-size: 1em;
-//    }
-//
-//    small {
-//        font-size: 80%;
-//    }
-//
-//    sub,
-//    sup {
-//        position: relative;
-//        font-size: 75%;
-//        line-height: 0;
-//        vertical-align: baseline;
-//    }
-//
-//    sub {
-//        bottom: -0.25em;
-//    }
-//
-//    sup {
-//        top: -0.5em;
-//    }
-//
-//    button,
-//    select {
-//        text-transform: none;
-//    }
-//
-//    button,
-//    input,
-//    textarea {
-//        font: inherit;
-//    }
-//
-//    a {
-//        color: inherit;
-//        text-decoration: none;
-//    }
-//
-//    b,
-//    strong {
-//        font-weight: bolder;
-//    }
-//}

package/src/css/variables.scss

@@ -21,32 +21,6 @@
     --gray-900: #1a1f2d;
     --gray-950: #090c19;
 
-    //--gray-25: #ffffff;
-    //--gray-50: #f9fafb;
-    //--gray-100: #f3f4f6;
-    //--gray-200: #e5e7eb;
-    //--gray-300: #d1d5db;
-    //--gray-400: #9ca3af;
-    //--gray-500: #6b7280;
-    //--gray-600: #4b5563;
-    //--gray-700: #374151;
-    //--gray-800: #1f2937;
-    //--gray-900: #111827;
-    //--gray-950: #030712;
-
-    //--gray-25: #ffffff;
-    //--gray-50: #f9fafb;
-    //--gray-100: #f1f5f9;
-    //--gray-200: #e2e8f0;
-    //--gray-300: #cbd5e1;
-    //--gray-400: #94a3b8;
-    //--gray-500: #64748b;
-    //--gray-600: #475569;
-    //--gray-700: #334155;
-    //--gray-800: #1e293b;
-    //--gray-900: #0f172a;
-    //--gray-950: #020617;
-
     --primary-25: #fcfcfc;
     --primary-50: #ebf2ff;
     --primary-100: #d7e5ff;