@flux-ui/components 3.0.0-next.7 → 3.0.0-next.70

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.7",
+    "version": "3.0.0-next.70",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
-    "homepage": "https://flux.bas.dev",
+    "homepage": "https://flux-ui.dev",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/basmilius/flux.git",
@@ -23,8 +23,7 @@
     ],
     "scripts": {
         "build": "vue-tsc && vite build",
-        "dev": "vite build --mode dev --watch",
-        "prepublishOnly": "cp ../../README.md ."
+        "dev": "vite build --watch --mode development"
     },
     "engines": {
         "node": ">=23"
@@ -34,8 +33,11 @@
             "types": "./dist/index.d.ts",
             "default": "./dist/index.js"
         },
-        "./style.css": "./dist/index.css",
-        "./*": "./*"
+        "./vite": {
+            "types": "./dist/vite/index.d.ts",
+            "default": "./dist/vite.js"
+        },
+        "./style.css": "./dist/index.css"
     },
     "publishConfig": {
         "access": "public",
@@ -43,35 +45,39 @@
     },
     "files": [
         "dist",
-        "src",
-        "tsconfig.json"
+        "src"
     ],
     "main": "./dist/index.js",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
-    "typings": "./dist/index.d.ts",
-    "sideEffects": false,
+    "sideEffects": [
+        "**/css/index.scss",
+        "**/dist/index.css"
+    ],
     "dependencies": {
-        "@basmilius/utils": "^2.1.0",
-        "@flux-ui/internals": "3.0.0-next.7",
-        "@flux-ui/types": "3.0.0-next.7",
-        "@fortawesome/fontawesome-common-types": "^6.7.2",
+        "@basmilius/common": "^3.35.0",
+        "@basmilius/utils": "^3.35.0",
+        "@flux-ui/internals": "3.0.0-next.70",
+        "@flux-ui/types": "3.0.0-next.70",
+        "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
-        "lodash-es": "^4.17.21",
-        "luxon": "^3.6.1",
-        "vue": "^3.5.13"
+        "lodash-es": "^4.18.1"
+    },
+    "peerDependencies": {
+        "luxon": "^3.7.2",
+        "vue": "^3.6.0-beta.12"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^2.1.0",
+        "@basmilius/vite-preset": "^3.35.0",
         "@types/lodash-es": "^4.17.12",
-        "@types/luxon": "^3.6.2",
-        "@types/node": "^22.15.3",
-        "@vitejs/plugin-vue": "^5.2.3",
-        "pinia": "^3.0.2",
-        "sass-embedded": "^1.87.0",
-        "typescript": "^5.8.3",
-        "vite": "^6.3.3",
-        "vue-tsc": "^2.2.10"
+        "@types/luxon": "^3.7.1",
+        "@types/node": "^25.9.1",
+        "@vitejs/plugin-vue": "^6.0.7",
+        "@vue/tsconfig": "^0.9.1",
+        "sass-embedded": "^1.100.0",
+        "typescript": "^6.0.3",
+        "vite": "^8.0.14",
+        "vue-tsc": "^3.3.1"
     }
 }

package/src/component/FluxAction.vue

@@ -16,7 +16,7 @@
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxIconName } from '@flux-ui/types';
     import FluxButton from './FluxButton.vue';
-    import $style from '$flux/css/component/Action.module.scss';
+    import $style from '~flux/components/css/component/Action.module.scss';
 
     defineEmits<FluxButtonEmits>();
 

package/src/component/FluxActionBar.vue

@@ -1,12 +1,11 @@
 <template>
-    <FluxStack
+    <FluxFlex
         :class="$style.actionBar"
-        direction="horizontal"
         :gap="9">
         <slot name="primary"/>
         <slot name="actionsStart"/>
 
-        <FluxSpacer/>
+        <FluxSpacer v-if="(slots.primary || slots.actionsStart) && (slots.actionsBeforeSearch || slots.search || slots.actionsAfterSearch || slots.filter || slots.actionsEnd)"/>
 
         <slot name="actionsBeforeSearch"/>
         <slot name="search"/>
@@ -42,21 +41,22 @@
         </FluxFlyout>
 
         <slot name="actionsEnd"/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
     lang="ts"
     setup>
-    import { useTranslate } from '$flux/composable/private';
+    import type { VNode } from 'vue';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxButtonGroup from './FluxButtonGroup.vue';
     import FluxDestructiveButton from './FluxDestructiveButton.vue';
+    import FluxFlex from './FluxFlex.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
     import FluxSpacer from './FluxSpacer.vue';
-    import FluxStack from './FluxStack.vue';
     import FluxTooltip from './FluxTooltip.vue';
-    import $style from '$flux/css/component/Action.module.scss';
+    import $style from '~flux/components/css/component/Action.module.scss';
 
     defineEmits<{
         reset: [];
@@ -67,12 +67,12 @@
     }>();
 
     const slots = defineSlots<{
-        primary?(): any;
-        actionsEnd?(): any;
-        actionsStart?(): any;
-        actionsAfterSearch?(): any;
-        actionsBeforeSearch?(): any;
-        search?(): any;
+        primary?(): VNode[];
+        actionsEnd?(): VNode[];
+        actionsStart?(): VNode[];
+        actionsAfterSearch?(): VNode[];
+        actionsBeforeSearch?(): VNode[];
+        search?(): VNode[];
 
         filter?(props: {
             close(): void;
@@ -81,13 +81,13 @@
             readonly paneY: number;
             readonly openerWidth: number;
             readonly openerHeight: number;
-        }): any;
+        }): VNode[];
 
         filterOpener?(props: {
             close(): void;
             open(): void;
             toggle(): void;
-        }): any;
+        }): VNode[];
     }>();
 
     const translate = useTranslate();

package/src/component/FluxActionPane.vue

@@ -23,18 +23,19 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import FluxButtonStack from './FluxButtonStack.vue';
     import FluxPane from './FluxPane.vue';
     import FluxPaneBody from './FluxPaneBody.vue';
-    import $style from '$flux/css/component/Action.module.scss';
+    import $style from '~flux/components/css/component/Action.module.scss';
 
     defineProps<{
         readonly paneVariant?: 'default' | 'flat' | 'well';
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
-        buttons?(): any;
-        base?(): any;
+        default?(): VNode[];
+        buttons?(): VNode[];
+        base?(): VNode[];
     }>();
 </script>

package/src/component/{FluxActions.vue → FluxActionStack.vue}

@@ -1,22 +1,22 @@
 <template>
-    <FluxStack
+    <FluxFlex
         ref="element"
         direction="horizontal"
         :gap="1"
         tag="nav">
         <slot/>
-    </FluxStack>
+    </FluxFlex>
 </template>
 
 <script
     lang="ts"
     setup>
     import { useFocusZone } from '@flux-ui/internals';
-    import { useTemplateRef } from 'vue';
-    import FluxStack from './FluxStack.vue';
+    import { useTemplateRef, type VNode } from 'vue';
+    import FluxFlex from './FluxFlex.vue';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const elementRef = useTemplateRef('element');

package/src/component/FluxAdaptiveGroup.vue

@@ -0,0 +1,112 @@
+<template>
+    <div
+        ref="element"
+        :class="$style.adaptiveGroup"
+        :style="{'--gap': `${gap}px`}">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { animationFrameDebounce, unrefTemplateElement } from '@flux-ui/internals';
+    import { provide, shallowReactive, useTemplateRef, watch, watchEffect } from 'vue';
+    import { type FluxAdaptiveGroupChild, FluxAdaptiveGroupInjectionKey } from '~flux/components/data';
+    import $style from '~flux/components/css/component/AdaptiveSlot.module.scss';
+
+    const {
+        gap = 9
+    } = defineProps<{
+        readonly gap?: number;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const elementRef = useTemplateRef('element');
+    const children = shallowReactive(new Map<number, FluxAdaptiveGroupChild>());
+
+    const reflow = animationFrameDebounce(() => {
+        const element = unrefTemplateElement(elementRef);
+
+        if (!element) {
+            return;
+        }
+
+        const available = element.clientWidth;
+        const entries = Array.from(children.entries());
+        const states = new Map<number, boolean>(entries.map(([uid]) => [uid, true]));
+
+        const sorted = [...entries].sort(([, a], [, b]) => a.priority.value - b.priority.value);
+
+        const currentTotal = () => {
+            let total = 0;
+            let visible = 0;
+
+            for (const [uid, child] of entries) {
+                const width = states.get(uid)
+                    ? child.desiredDefaultWidth.value
+                    : child.desiredFallbackWidth.value;
+
+                if (width === 0) {
+                    continue;
+                }
+
+                total += width;
+                visible++;
+            }
+
+            return total + Math.max(0, visible - 1) * gap;
+        };
+
+        while (currentTotal() > available) {
+            const victim = sorted.find(([uid]) => states.get(uid));
+
+            if (!victim) {
+                break;
+            }
+
+            states.set(victim[0], false);
+        }
+
+        for (const [uid, child] of entries) {
+            child.isDefaultVisible.value = !!states.get(uid);
+        }
+    });
+
+    watchEffect(() => {
+        for (const child of children.values()) {
+            // Touch reactive refs so this effect tracks them.
+            void child.priority.value;
+            void child.desiredDefaultWidth.value;
+            void child.desiredFallbackWidth.value;
+        }
+
+        reflow();
+    });
+
+    provide(FluxAdaptiveGroupInjectionKey, {
+        register(uid, child) {
+            children.set(uid, child);
+        },
+        unregister(uid) {
+            children.delete(uid);
+        }
+    });
+
+    watch(elementRef, (element, _, onCleanup) => {
+        if (!element) {
+            return;
+        }
+
+        const observer = new ResizeObserver(reflow);
+        observer.observe(element);
+        observer.observe(document.documentElement);
+
+        onCleanup(() => {
+            observer.disconnect();
+        });
+    }, {immediate: true});
+</script>

package/src/component/FluxAdaptiveSlot.vue

@@ -0,0 +1,159 @@
+<template>
+    <div
+        ref="element"
+        :class="$style.adaptiveSlot"
+        :style="group ? 'flex-shrink: 0' : undefined">
+        <slot v-if="isDefaultVisible"/>
+        <slot
+            v-else
+            name="fallback"/>
+    </div>
+
+    <div
+        ref="defaultMeasurer"
+        :class="$style.adaptiveSlotMeasurer"
+        aria-hidden="true">
+        <slot/>
+    </div>
+
+    <div
+        ref="fallbackMeasurer"
+        :class="$style.adaptiveSlotMeasurer"
+        aria-hidden="true">
+        <slot name="fallback"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { animationFrameDebounce, unrefTemplateElement } from '@flux-ui/internals';
+    import { getCurrentInstance, onMounted, onUnmounted, ref, toRef, useTemplateRef, watch } from 'vue';
+    import { useAdaptiveGroupInjection } from '~flux/components/composable';
+    import $style from '~flux/components/css/component/AdaptiveSlot.module.scss';
+
+    const props = withDefaults(defineProps<{
+        readonly priority?: number;
+    }>(), {
+        priority: 1
+    });
+
+    defineSlots<{
+        default(): any;
+        fallback?(): any;
+    }>();
+
+    const group = useAdaptiveGroupInjection();
+    const instance = getCurrentInstance()!;
+
+    const elementRef = useTemplateRef('element');
+    const defaultMeasurerRef = useTemplateRef('defaultMeasurer');
+    const fallbackMeasurerRef = useTemplateRef('fallbackMeasurer');
+
+    const isDefaultVisible = ref(true);
+    const desiredDefaultWidth = ref(0);
+    const desiredFallbackWidth = ref(0);
+
+    const priorityRef = toRef(props, 'priority');
+
+    // Keep both desired widths in sync with the hidden measurers.
+    watch([defaultMeasurerRef, fallbackMeasurerRef], ([def, fb], _, onCleanup) => {
+        if (!def) {
+            return;
+        }
+
+        const update = () => {
+            desiredDefaultWidth.value = def.offsetWidth;
+            desiredFallbackWidth.value = fb?.offsetWidth ?? 0;
+        };
+
+        const observer = new ResizeObserver(update);
+        observer.observe(def);
+
+        if (fb) {
+            observer.observe(fb);
+        }
+
+        observer.observe(document.documentElement);
+
+        update();
+
+        onCleanup(() => {
+            observer.disconnect();
+        });
+    }, {immediate: true});
+
+    if (group) {
+        onMounted(() => {
+            group.register(instance.uid, {
+                priority: priorityRef,
+                desiredDefaultWidth,
+                desiredFallbackWidth,
+                isDefaultVisible
+            });
+        });
+
+        onUnmounted(() => {
+            group.unregister(instance.uid);
+        });
+    } else {
+        // Standalone: self-measurement with parent-observer hysteresis.
+        let lastFailedParentWidth = -1;
+
+        const reflow = animationFrameDebounce(() => {
+            const element = unrefTemplateElement(elementRef);
+
+            if (!element || !isDefaultVisible.value) {
+                return;
+            }
+
+            const desired = desiredDefaultWidth.value;
+            const available = element.clientWidth;
+
+            if (desired > available) {
+                lastFailedParentWidth = element.parentElement?.clientWidth ?? -1;
+                isDefaultVisible.value = false;
+            } else {
+                lastFailedParentWidth = -1;
+            }
+        });
+
+        watch(elementRef, (element, _, onCleanup) => {
+            if (!element) {
+                return;
+            }
+
+            const parent = element.parentElement;
+
+            const observer = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    if (entry.target === parent && !isDefaultVisible.value) {
+                        if (parent.clientWidth > lastFailedParentWidth) {
+                            isDefaultVisible.value = true;
+                        }
+                    }
+                }
+
+                reflow();
+            });
+
+            observer.observe(element);
+
+            if (parent) {
+                observer.observe(parent);
+            }
+
+            observer.observe(document.documentElement);
+
+            onCleanup(() => {
+                observer.disconnect();
+            });
+        }, {immediate: true});
+
+        // Default content size changed: forget failure history and retry.
+        watch(desiredDefaultWidth, () => {
+            lastFailedParentWidth = -1;
+            isDefaultVisible.value = true;
+        });
+    }
+</script>

package/src/component/FluxAlert.vue

@@ -1,33 +1,24 @@
 <template>
-    <FluxPane>
-        <FluxPaneHeader
-            :icon="alert.icon"
-            :title="alert.title"/>
-
-        <FluxPaneBody v-html="alert.message"/>
-
-        <FluxPaneFooter>
-            <FluxSpacer/>
-
+    <DialogLayout
+        :icon="alert.icon"
+        :message="alert.message"
+        :title="alert.title">
+        <template #footer>
             <FluxPrimaryButton
                 icon-leading="circle-check"
                 :label="translate('flux.ok')"
                 @click="alert.onClose()"/>
-        </FluxPaneFooter>
-    </FluxPane>
+        </template>
+    </DialogLayout>
 </template>
 
 <script
     lang="ts"
     setup>
     import type { FluxAlertObject } 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 { useTranslate } from '~flux/components/composable/private';
     import FluxPrimaryButton from './FluxPrimaryButton.vue';
-    import FluxSpacer from './FluxSpacer.vue';
+    import { DialogLayout } from './primitive';
 
     defineProps<{
         readonly alert: FluxAlertObject;

package/src/component/FluxAnimatedColors.vue

@@ -7,10 +7,10 @@
 <script
     lang="ts"
     setup>
+    import { useComponentId } from '@basmilius/common';
     import { mulberry32 } from '@basmilius/utils';
-    import { useComponentId } from '@flux-ui/internals';
     import { computed, onBeforeUnmount, onMounted, ref, unref, useTemplateRef, watch } from 'vue';
-    import $style from '$flux/css/component/Visual.module.scss';
+    import $style from '~flux/components/css/component/Visual.module.scss';
 
     type Polygon = [number, number, string, PolygonPoint[]];
     type PolygonPoint = [number, number, number];
@@ -19,12 +19,14 @@
         colors,
         incrementor = 1,
         opacity = .5,
-        seed
+        seed,
+        static: isStatic
     } = defineProps<{
         readonly colors?: string[];
         readonly incrementor?: number;
         readonly opacity?: number;
         readonly seed?: number;
+        readonly static?: boolean;
     }>();
 
     const canvasRef = useTemplateRef('canvas');
@@ -39,7 +41,7 @@
             return [];
         }
 
-        const mulberry = mulberry32(seed ?? unref(componentId));
+        const mulberry = mulberry32(seed ?? componentId.value);
         const polygons: Polygon[] = [];
 
         for (const color of colors) {
@@ -119,7 +121,7 @@
             context.restore();
         }
 
-        schedule();
+        !isStatic && schedule();
     }
 
     watch(canvasRef, canvas => {
@@ -136,6 +138,6 @@
 
     watch(polygons, () => {
         cancel();
-        schedule();
+        !isStatic && schedule();
     });
 </script>

package/src/component/FluxAspectRatio.vue

@@ -1,21 +1,24 @@
 <template>
-    <div
+    <Component
+        :is="tag ?? 'div'"
         :class="$style.aspectRatio"
         :style="{aspectRatio}">
         <slot/>
-    </div>
+    </Component>
 </template>
 
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/Layout.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Layout.module.scss';
 
     defineProps<{
-        aspectRatio: number;
+        readonly aspectRatio: number;
+        readonly tag?: keyof HTMLElementTagNameMap;
     }>();
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 </script>

package/src/component/FluxAvatar.vue

@@ -59,11 +59,11 @@
     import type { FluxButtonEmits, FluxColor, FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { computed, unref } from 'vue';
-    import { FluxFadeTransition } from '$flux/transition';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Avatar.module.scss';
+    import $style from '~flux/components/css/component/Avatar.module.scss';
 
     const STATUS_CLASS_MAP = {
         gray: $style.avatarStatusGray,