@flux-ui/components 3.0.0-next.73 → 3.0.0-next.75

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.73",
+    "version": "3.0.0-next.75",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -55,10 +55,10 @@
         "**/dist/index.css"
     ],
     "dependencies": {
-        "@basmilius/common": "^3.37.0",
-        "@basmilius/utils": "^3.37.0",
-        "@flux-ui/internals": "3.0.0-next.73",
-        "@flux-ui/types": "3.0.0-next.73",
+        "@basmilius/common": "^3.40.0",
+        "@basmilius/utils": "^3.40.0",
+        "@flux-ui/internals": "3.0.0-next.75",
+        "@flux-ui/types": "3.0.0-next.75",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
@@ -66,10 +66,10 @@
     },
     "peerDependencies": {
         "luxon": "^3.7.2",
-        "vue": "^3.6.0-beta.12"
+        "vue": "^3.6.0-beta.13"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.37.0",
+        "@basmilius/vite-preset": "^3.40.0",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
         "@types/node": "^25.9.1",
@@ -77,7 +77,7 @@
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",
         "typescript": "^6.0.3",
-        "vite": "^8.0.14",
-        "vue-tsc": "^3.3.2"
+        "vite": "^8.0.16",
+        "vue-tsc": "^3.3.3"
     }
 }

package/src/component/FluxBoxedIcon.vue

@@ -7,7 +7,7 @@
             color === 'danger' && $style.iconBoxedDanger,
             color === 'info' && $style.iconBoxedInfo,
             color === 'success' && $style.iconBoxedSuccess,
-            color === 'warning' && $style.iconBoxedWarning,
+            color === 'warning' && $style.iconBoxedWarning
         )"
         :style="{
             fontSize: size && `${size}px`

package/src/component/FluxCalendar.vue

@@ -265,13 +265,13 @@
     });
 
     const timeGridDayCount = computed<1 | 2 | 7>(() => {
-        const v = unref(resolvedView);
+        const resolved = unref(resolvedView);
 
-        if (v === 'week') {
+        if (resolved === 'week') {
             return 7;
         }
 
-        if (v === 'two-days') {
+        if (resolved === 'two-days') {
             return 2;
         }
 
@@ -521,13 +521,13 @@
             return;
         }
 
-        const v = unref(resolvedView);
-        const delta = (v === 'month' ? MONTH_KEY_DELTAS : TIME_GRID_KEY_DELTAS)[direction];
+        const resolved = unref(resolvedView);
+        const delta = (resolved === 'month' ? MONTH_KEY_DELTAS : TIME_GRID_KEY_DELTAS)[direction];
         const newDate = currentDate.plus(delta);
 
         emit('reschedule', {id, fromDate: currentDate, toDate: newDate});
 
-        if (v === 'month') {
+        if (resolved === 'month') {
             monthFocusedDate.value = newDate.startOf('day');
 
             if (newDate.month !== unref(monthViewDate).month) {

package/src/component/FluxColorPicker.vue

@@ -36,8 +36,8 @@
             <div
                 :class="$style.colorPickerPreview"
                 :style="{
-                '--color': rgb
-            }"
+                    '--color': rgb
+                }"
                 aria-hidden="true"/>
 
             <FluxFormField
@@ -180,9 +180,9 @@
 
     const saturationValue = computed({
         get: (): [number, number] => [unref(saturation), unref(value)],
-        set: ([s, v]: [number, number]) => {
-            saturation.value = s;
-            value.value = v;
+        set: ([nextSaturation, nextValue]: [number, number]) => {
+            saturation.value = nextSaturation;
+            value.value = nextValue;
         }
     });
 

package/src/component/FluxDropZone.vue

@@ -213,4 +213,3 @@
         pathLength.value = roundStep(width * 2 + height * 2, 6);
     }, {immediate: true});
 </script>
-

package/src/component/FluxDynamicView.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { VNode } from 'vue';
     import { VNodeRenderer } from './primitive';
 

package/src/component/FluxExpandableGroup.vue

@@ -18,7 +18,6 @@
         readonly isControlled?: boolean;
     }>();
 
-
     defineSlots<{
         default(): VNode[];
     }>();

package/src/component/FluxFilterBase.vue

@@ -41,7 +41,7 @@
     const flattenedFilters = computed(() => flattenVNodeTree(slots.filters?.() ?? []));
 
     const buttons = computed(() => {
-        const buttons: Record<string, FluxFilterDefinition> = {};
+        const result: Record<string, FluxFilterDefinition> = {};
         const items = unref(flattenedFilters);
 
         for (const item of items) {
@@ -51,14 +51,14 @@
                 continue;
             }
 
-            buttons[definition.name] = definition;
+            result[definition.name] = definition;
         }
 
-        return buttons;
+        return result;
     });
 
     const filters = computed<Record<string, VNode>>(() => {
-        const filters: { [key: string]: VNode; } = {};
+        const result: { [key: string]: VNode; } = {};
         const items = unref(flattenedFilters);
 
         for (const item of items) {
@@ -68,33 +68,33 @@
                 continue;
             }
 
-            filters[definition.name] = item;
+            result[definition.name] = item;
         }
 
-        return filters;
+        return result;
     });
 
     const menuItems = computed<(FluxFilterDefinition | VNode)[][]>(() => {
-        const menuItems: (FluxFilterDefinition | VNode)[][] = [[]];
+        const result: (FluxFilterDefinition | VNode)[][] = [[]];
         const items = unref(flattenedFilters);
 
         for (const item of items) {
             if (getComponentName(item) === 'FluxSeparator') {
-                menuItems.push([]);
+                result.push([]);
                 continue;
             }
 
             const definition = resolveDefinition(item);
 
             if (definition) {
-                menuItems[menuItems.length - 1].push(definition);
+                result[result.length - 1].push(definition);
                 continue;
             }
 
-            menuItems[menuItems.length - 1].push(item);
+            result[result.length - 1].push(item);
         }
 
-        return menuItems;
+        return result;
     });
 
     watchEffect(() => {

package/src/component/FluxFormFieldAddition.vue

@@ -20,8 +20,8 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import FluxIcon from './FluxIcon.vue';

package/src/component/FluxInfo.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { FluxIconName } from '@flux-ui/types';
     import type { VNode } from 'vue';
     import FluxIcon from './FluxIcon.vue';

package/src/component/FluxInfoStack.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { VNode } from 'vue';
     import FluxFlex from './FluxFlex.vue';
 

package/src/component/FluxKanbanColumn.vue

@@ -65,9 +65,7 @@
         <footer
             v-if="hasFooter"
             :class="$style.kanbanColumnFooter">
-            <slot
-                v-if="hasFooter"
-                name="footer"/>
+            <slot name="footer"/>
         </footer>
     </div>
 </template>
@@ -90,7 +88,7 @@
         label
     } = defineProps<{
         readonly columnId: string | number;
-        readonly count: string | number;
+        readonly count?: string | number;
         readonly disabled?: boolean;
         readonly icon?: FluxIconName;
         readonly label: string;

package/src/component/FluxLayerPane.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         :class="clsx(
-        color === 'gray' && $style.layerPaneGray,
+            color === 'gray' && $style.layerPaneGray,
             color === 'primary' && $style.layerPanePrimary,
             color === 'danger' && $style.layerPaneDanger,
             color === 'info' && $style.layerPaneInfo,

package/src/component/FluxPagination.vue

@@ -35,7 +35,7 @@
 
         <template v-else>
             <FluxPaginationButton
-                :class="$style.paginationCurrentZZ"
+                is-current
                 @click="prompt"
                 #before>
                 <strong>{{ page }}</strong>
@@ -140,12 +140,12 @@
             fieldLabel: translate('flux.paginationNavigatePage')
         });
 
-        const page = Number(pageStr);
+        const target = Number(pageStr);
 
-        if (isNaN(page) || page > unref(pages) || page <= 0) {
+        if (isNaN(target) || target > unref(pages) || target <= 0) {
             return;
         }
 
-        navigate(page);
+        navigate(target);
     }
 </script>

package/src/component/FluxSegmentedControl.vue

@@ -13,98 +13,90 @@
                 width: `${activeItemWidth}px`
             }"/>
 
-        <template v-for="(item, index) of items">
-            <div
-                v-if="index > 0"
-                :class="clsx(
-                    $style.segmentedControlSeparator,
-                    (index === modelValue || index === modelValue + 1) && $style.isActive
-                )"
-                role="separator"/>
-
-            <button
-                ref="items"
-                :class="clsx(
-                    $style.segmentedControlItem,
-                    index === modelValue && $style.isActive
-                )"
-                role="radio"
-                :aria-checked="index === modelValue"
-                :aria-label="item.label"
-                :tabindex="index === modelValue ? 0 : -1"
-                type="button"
-                @click="activate(index)">
-                <FluxIcon
-                    v-if="item.icon"
-                    :name="item.icon"
-                    :size="15"/>
-
-                <span v-if="item.label">{{ item.label }}</span>
-            </button>
-        </template>
+        <slot/>
     </div>
 </template>
 
 <script
     lang="ts"
     setup>
-    import { useResizeObserver } from '@basmilius/common';
-    import type { FluxSegmentedControlItemObject } from '@flux-ui/types';
-    import { clsx } from 'clsx';
-    import { onBeforeUnmount, ref, unref, useTemplateRef, watchEffect } from 'vue';
-    import FluxIcon from './FluxIcon.vue';
+    import { useMutationObserver, useResizeObserver } from '@basmilius/common';
+    import type { FluxSize } from '@flux-ui/types';
+    import { onMounted, provide, ref, toRef, useTemplateRef, watch, type VNode } from 'vue';
+    import { FluxSegmentedControlInjectionKey, type FluxSegmentedControlValue } from '~flux/components/data';
     import $style from '~flux/components/css/component/SegmentedControl.module.scss';
 
-    const modelValue = defineModel<number>({
-        default: 0
-    });
+    const modelValue = defineModel<FluxSegmentedControlValue>();
 
-    defineProps<{
+    const { size = 'medium' } = defineProps<{
         readonly ariaLabel?: string;
         readonly isFill?: boolean;
-        readonly items: FluxSegmentedControlItemObject[];
+        readonly size?: FluxSize;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
     }>();
 
     const controlRef = useTemplateRef<HTMLElement>('control');
-    const itemRefs = useTemplateRef<HTMLButtonElement[]>('items');
 
     const activeItemX = ref(0);
     const activeItemWidth = ref(0);
-    const isAlive = ref(true);
 
-    onBeforeUnmount(() => {
-        isAlive.value = false;
+    const items = new Map<HTMLElement, FluxSegmentedControlValue>();
+
+    provide(FluxSegmentedControlInjectionKey, {
+        modelValue,
+        size: toRef(() => size),
+        select,
+        registerItem(element, value) {
+            items.set(element, value);
+            updateHighlight();
+        },
+        unregisterItem(element) {
+            items.delete(element);
+            updateHighlight();
+        }
     });
 
-    watchEffect(() => updateHighlight(unref(modelValue)), {flush: 'post'});
+    onMounted(() => updateHighlight());
 
-    useResizeObserver(controlRef, () => updateHighlight(unref(modelValue)));
+    watch(modelValue, () => updateHighlight(), {flush: 'post'});
 
-    function activate(index: number): void {
-        modelValue.value = index;
+    useMutationObserver(controlRef, () => updateHighlight(), {childList: true, subtree: true});
+    useResizeObserver(controlRef, () => updateHighlight());
 
-        const itemRef = itemRefs.value?.[index];
-        itemRef?.focus();
+    function select(value: FluxSegmentedControlValue): void {
+        modelValue.value = value;
     }
 
     function onKeyDown(evt: KeyboardEvent): void {
-        const items = itemRefs.value;
+        const control = controlRef.value;
+
+        if (!control) {
+            return;
+        }
+
+        const radios = Array.from(control.querySelectorAll<HTMLButtonElement>('[role=radio]:not([disabled])'));
 
-        if (!items) {
+        if (radios.length === 0) {
             return;
         }
 
-        let newIndex: number | null = null;
+        const activeElement = control.querySelector<HTMLButtonElement>('[role=radio][aria-checked=true]');
+        const currentIndex = activeElement ? radios.indexOf(activeElement) : -1;
+
+        let newIndex: number;
 
         switch (evt.key) {
             case 'ArrowLeft':
             case 'ArrowUp':
-                newIndex = Math.max(0, unref(modelValue) - 1);
+                newIndex = Math.max(0, currentIndex - 1);
                 break;
 
             case 'ArrowRight':
             case 'ArrowDown':
-                newIndex = Math.min(items.length - 1, unref(modelValue) + 1);
+                newIndex = Math.min(radios.length - 1, currentIndex + 1);
                 break;
 
             case 'Home':
@@ -112,40 +104,45 @@
                 break;
 
             case 'End':
-                newIndex = items.length - 1;
+                newIndex = radios.length - 1;
                 break;
 
             default:
                 return;
         }
 
-        activate(newIndex);
+        const target = radios[newIndex];
+        const value = items.get(target);
+
+        if (value !== undefined) {
+            select(value);
+        }
+
+        target.focus();
         evt.preventDefault();
     }
 
-    function updateHighlight(index: number): void {
-        if (!isAlive.value) {
+    function updateHighlight(): void {
+        const control = controlRef.value;
+
+        if (!control) {
             return;
         }
 
-        const itemRef = itemRefs.value?.[index];
-        const control = controlRef.value;
+        const activeElement = control.querySelector<HTMLElement>('[role=radio][aria-checked=true]');
 
-        if (!itemRef || !control) {
+        if (!activeElement) {
+            activeItemWidth.value = 0;
             return;
         }
 
-        const width = itemRef.offsetWidth;
+        const width = activeElement.offsetWidth;
 
         if (width === 0) {
             return;
         }
 
-        const controlRect = control.getBoundingClientRect();
-        const itemRect = itemRef.getBoundingClientRect();
-        const scaleX = control.offsetWidth > 0 ? controlRect.width / control.offsetWidth : 1;
-
-        activeItemX.value = (itemRect.left - controlRect.left) / scaleX;
+        activeItemX.value = activeElement.offsetLeft;
         activeItemWidth.value = width;
     }
 </script>

package/src/component/FluxSegmentedControlItem.vue

@@ -0,0 +1,98 @@
+<template>
+    <button
+        ref="item"
+        :class="itemClass"
+        role="radio"
+        :aria-checked="isActive"
+        :aria-disabled="disabled ? true : undefined"
+        :disabled="disabled ? true : undefined"
+        :tabindex="isActive ? 0 : -1"
+        type="button"
+        @click="onClick">
+        <slot>
+            <FluxIcon
+                v-if="icon"
+                :name="icon"
+                :size="iconSize"/>
+
+            <span v-if="label">{{ label }}</span>
+        </slot>
+    </button>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxIconName } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, onBeforeUnmount, onMounted, toRef, unref, useTemplateRef } from 'vue';
+    import { useDisabled, useSegmentedControlInjection } from '~flux/components/composable';
+    import type { FluxSegmentedControlValue } from '~flux/components/data';
+    import FluxIcon from './FluxIcon.vue';
+    import $style from '~flux/components/css/component/SegmentedControl.module.scss';
+
+    const { value, disabled: componentDisabled } = defineProps<{
+        readonly value: FluxSegmentedControlValue;
+        readonly disabled?: boolean;
+        readonly icon?: FluxIconName;
+        readonly label?: string;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const control = useSegmentedControlInjection();
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const itemRef = useTemplateRef<HTMLButtonElement>('item');
+
+    const sizeClasses = {
+        small: $style.isSmall,
+        medium: $style.isMedium,
+        large: $style.isLarge
+    };
+    const iconSizes = {
+        small: 14,
+        medium: 16,
+        large: 18
+    };
+
+    const isActive = computed(() => control.modelValue.value === value);
+    const iconSize = computed(() => iconSizes[unref(control.size)]);
+    const itemClass = computed(() => clsx(
+        $style.segmentedControlItem,
+        sizeClasses[unref(control.size)],
+        isActive.value && $style.isActive
+    ));
+
+    onMounted(() => {
+        const element = unref(itemRef);
+
+        if (!element) {
+            return;
+        }
+
+        control.registerItem(element, value);
+
+        if (control.modelValue.value === undefined && !unref(disabled)) {
+            control.select(value);
+        }
+    });
+
+    onBeforeUnmount(() => {
+        const element = unref(itemRef);
+
+        if (element) {
+            control.unregisterItem(element);
+        }
+    });
+
+    function onClick(evt: MouseEvent): void {
+        if (unref(disabled)) {
+            evt.preventDefault();
+            return;
+        }
+
+        control.select(value);
+    }
+</script>

package/src/component/FluxSpacing.vue

@@ -26,7 +26,11 @@
         120
     ] as const;
 
+    type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
+        ? Acc[number]
+        : Enumerate<N, [...Acc, Acc['length']]>;
+
     defineProps<{
-        readonly size: keyof typeof spacings;
+        readonly size: Enumerate<typeof spacings['length']>;
     }>();
 </script>

package/src/component/FluxSplitButton.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script
-    setup
-    lang="ts">
+    lang="ts"
+    setup>
     import type { FluxDirection, FluxIconName } from '@flux-ui/types';
     import type { VNode } from 'vue';
     import FluxFlyout from './FluxFlyout.vue';

package/src/component/FluxTable.vue

@@ -18,7 +18,9 @@
             <FluxTableRow
                 v-if="fillColumns"
                 :class="$style.tableFill">
-                <FluxTableCell v-for="_ of fillColumns"/>
+                <FluxTableCell
+                    v-for="n of fillColumns"
+                    :key="n"/>
             </FluxTableRow>
             </tbody>
 

package/src/component/FluxToolbar.vue

@@ -6,7 +6,7 @@
             floatingMode === 'top-end' && $style.isTopEnd,
             floatingMode === 'top-start' && $style.isTopStart,
             floatingMode === 'bottom-end' && $style.isBottomEnd,
-            floatingMode === 'bottom-start' && $style.isBottomStart,
+            floatingMode === 'bottom-start' && $style.isBottomStart
         )"
         :gap="6"
         tag="nav">