@flux-ui/components 3.0.0-next.14 → 3.0.0-next.16

package/dist/util/createDialogRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDialogRenderer.d.ts","sourceRoot":"","sources":["../../src/util/createDialogRenderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,EAAS,MAAM,KAAK,CAAC;AAIjF,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5C,KAAK,KAAK,GAAG;IACT,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,CAAC,OAAO,WAAW,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,GAAG,cAAc,CAiExI"}
+{"version":3,"file":"createDialogRenderer.d.ts","sourceRoot":"","sources":["../../src/util/createDialogRenderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,EAAS,MAAM,KAAK,CAAC;AAKjF,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5C,KAAK,KAAK,GAAG;IACT,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAIF,MAAM,CAAC,OAAO,WAAW,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,GAAG,cAAc,CAiExI"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.14",
+    "version": "3.0.0-next.16",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,9 +51,9 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/utils": "^2.5.2",
-        "@flux-ui/internals": "3.0.0-next.14",
-        "@flux-ui/types": "3.0.0-next.14",
+        "@basmilius/utils": "^2.5.4",
+        "@flux-ui/internals": "3.0.0-next.16",
+        "@flux-ui/types": "3.0.0-next.16",
         "@fortawesome/fontawesome-common-types": "^7.0.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
@@ -62,15 +62,15 @@
         "vue": "^3.5.18"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^2.5.2",
+        "@basmilius/vite-preset": "^2.5.4",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.6.2",
         "@types/node": "^24.1.0",
-        "@vitejs/plugin-vue": "^6.0.0",
+        "@vitejs/plugin-vue": "^6.0.1",
         "pinia": "^3.0.3",
         "sass-embedded": "^1.89.2",
         "typescript": "^5.8.3",
-        "vite": "^7.0.5",
-        "vue-tsc": "^3.0.3"
+        "vite": "^7.0.6",
+        "vue-tsc": "^3.0.4"
     }
 }

package/src/component/FluxMenuItem.vue

@@ -14,6 +14,7 @@
             [$style.menuItemSelected]: isSelectable && isSelected
         }"
         :aria-checked="isSelectable ? isSelected : undefined"
+        :tabindex="tabindex"
         @click="$emit('click', $event)">
         <template
             v-if="isSelectable && (!iconLeading || isSelected)"

package/src/component/FluxOverlayProvider.vue

@@ -0,0 +1,39 @@
+<template>
+    <div :class="$style.overlayProvider">
+        <div :class="$style.overlayShade"/>
+    </div>
+
+    <FluxOverlay size="medium">
+        <FluxAlert
+            v-for="alert of alerts"
+            :key="alert.id"
+            :alert="alert"/>
+    </FluxOverlay>
+
+    <FluxOverlay size="medium">
+        <FluxConfirm
+            v-for="confirm of confirms"
+            :key="confirm.id"
+            :confirm="confirm"/>
+    </FluxOverlay>
+
+    <FluxOverlay size="medium">
+        <FluxPrompt
+            v-for="prompt of prompts"
+            :key="prompt.id"
+            :prompt="prompt"/>
+    </FluxOverlay>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { useFluxStore } from '$flux/data';
+    import FluxAlert from './FluxAlert.vue';
+    import FluxConfirm from './FluxConfirm.vue';
+    import FluxOverlay from './FluxOverlay.vue';
+    import FluxPrompt from './FluxPrompt.vue';
+    import $style from '$flux/css/component/Overlay.module.scss';
+
+    const {alerts, confirms, prompts} = useFluxStore();
+</script>

package/src/component/FluxRoot.vue

@@ -6,27 +6,7 @@
         <slot/>
     </div>
 
-    <FluxOverlay size="medium">
-        <FluxAlert
-            v-for="alert of alerts"
-            :key="alert.id"
-            :alert="alert"/>
-    </FluxOverlay>
-
-    <FluxOverlay size="medium">
-        <FluxConfirm
-            v-for="confirm of confirms"
-            :key="confirm.id"
-            :confirm="confirm"/>
-    </FluxOverlay>
-
-    <FluxOverlay size="medium">
-        <FluxPrompt
-            v-for="prompt of prompts"
-            :key="prompt.id"
-            :prompt="prompt"/>
-    </FluxOverlay>
-
+    <FluxOverlayProvider/>
     <FluxSnackbarProvider/>
     <FluxTooltipProvider/>
 </template>
@@ -36,10 +16,7 @@
     setup>
     import { watch } from 'vue';
     import { useFluxStore } from '$flux/data';
-    import FluxAlert from './FluxAlert.vue';
-    import FluxConfirm from './FluxConfirm.vue';
-    import FluxPrompt from './FluxPrompt.vue';
-    import FluxOverlay from './FluxOverlay.vue';
+    import FluxOverlayProvider from './FluxOverlayProvider.vue';
     import FluxSnackbarProvider from './FluxSnackbarProvider.vue';
     import FluxTooltipProvider from './FluxTooltipProvider.vue';
     import $style from '$flux/css/component/Root.module.scss';
@@ -52,7 +29,7 @@
         default(): any;
     }>();
 
-    const {alerts, confirms, inertMain, prompts} = useFluxStore();
+    const {inertMain} = useFluxStore();
 
     watch(inertMain, (inert, _, onCleanup): void => {
         if (!inert) {

package/src/component/index.ts

@@ -84,6 +84,7 @@ export { default as FluxMenuTitle } from './FluxMenuTitle.vue';
 export { default as FluxNotice } from './FluxNotice.vue';
 export { default as FluxNoticeStack } from './FluxNoticeStack.vue';
 export { default as FluxOverlay } from './FluxOverlay.vue';
+export { default as FluxOverlayProvider } from './FluxOverlayProvider.vue';
 export { default as FluxPagination } from './FluxPagination.vue';
 export { default as FluxPaginationBar } from './FluxPaginationBar.vue';
 export { default as FluxPane } from './FluxPane.vue';

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

@@ -459,7 +459,7 @@
 }
 
 .formSelectPopup {
-    composes: basePaneStructure from './base/Pane.module.scss';
+    composes: basePane from './base/Pane.module.scss';
 
     position: fixed;
     display: block;

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

@@ -1,13 +1,37 @@
-.overlay {
+.overlayView {
     position: fixed;
-    display: flex;
     inset: 0;
     height: 100dvh;
     width: 100dvw;
+}
+
+.overlayProvider {
+    composes: overlayView;
+
+    pointer-events: none;
+    z-index: 10000;
+}
+
+.overlayShade {
+    composes: overlayView;
+
     background: var(--overlay);
     backdrop-filter: blur(3px) saturate(180%);
+    pointer-events: none;
+    transition: opacity 600ms var(--swift-out);
+}
+
+.overlayProvider:not(:has(.overlay:not(.overlayTransitionLeaveActive))) .overlayShade {
+    opacity: 0;
+}
+
+.overlay {
+    position: fixed;
+    display: flex;
+    inset: 0;
+    height: 100dvh;
+    width: 100dvw;
     outline: 0;
-    z-index: 10000;
 
     > .basePaneStructure {
         display: flex;
@@ -17,12 +41,39 @@
         flex-flow: column nowrap;
         box-shadow: var(--shadow-lg);
         overflow: auto;
+        transition: 420ms var(--swift-out);
+        transition-property: filter, scale;
 
         .paneFooter {
             position: sticky;
             bottom: 0;
             margin-top: auto;
         }
+
+        &::after {
+            position: absolute;
+            display: block;
+            inset: 0;
+            content: '';
+            background: var(--overlay-secondary);
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 420ms var(--swift-out);
+            z-index: 1;
+        }
+    }
+
+    &.isCurrent > .basePaneStructure {
+        pointer-events: auto;
+    }
+
+    &:not(.isCurrent) > .basePaneStructure {
+        filter: blur(3px);
+        scale: .95;
+
+        &::after {
+            opacity: 1;
+        }
     }
 }
 
@@ -148,34 +199,3 @@
         transform: translate3d(100%, 0, 0);
     }
 }
-
-.overlay + .overlay {
-    background: transparent;
-    backdrop-filter: none;
-}
-
-.overlay > .basePaneStructure::after {
-    position: absolute;
-    display: block;
-    inset: 0;
-    content: '';
-    background: var(--overlay-secondary);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 420ms var(--swift-out);
-    z-index: 1;
-}
-
-.overlay:has(+ .overlay) > .basePaneStructure {
-    transition: 420ms var(--swift-out);
-    transition-property: filter, scale;
-}
-
-.overlay:has(+ .overlay:not(.overlayTransitionLeaveActive)) > .pane {
-    filter: blur(3px);
-    scale: .95;
-
-    &::after {
-        opacity: 1;
-    }
-}

package/src/data/store.ts

@@ -20,7 +20,7 @@ export type FluxStore = FluxState & {
     addPrompt(spec: Omit<FluxPromptObject, 'id'>): number;
     addSnackbar(spec: Omit<FluxSnackbarObject, 'id'>): number;
     addTooltip(spec: Omit<FluxTooltipObject, 'id'>): number;
-    registerDialog(): VoidFunction;
+    registerDialog(): [number, VoidFunction];
     removeAlert(id: number): void;
     removeConfirm(id: number): void;
     removePrompt(id: number): void;
@@ -104,9 +104,11 @@ export function addTooltip(spec: Omit<FluxTooltipObject, 'id'>): number {
     return id;
 }
 
-export function registerDialog(): VoidFunction {
-    ++state.dialogCount;
-    return () => --state.dialogCount;
+export function registerDialog(): [number, VoidFunction] {
+    return [
+        ++state.dialogCount,
+        () => --state.dialogCount
+    ];
 }
 
 export function removeAlert(id: number): void {

package/src/util/createDialogRenderer.ts

@@ -1,7 +1,8 @@
 import { flattenVNodeTree, useFocusTrap } from '@flux-ui/internals';
 import type { Component, RenderFunction, SetupContext, Slots, VNode } from 'vue';
-import { Comment, getCurrentInstance, h, onUnmounted, ref, Teleport, watch } from 'vue';
+import { Comment, h, onUnmounted, ref, Teleport, watch } from 'vue';
 import { registerDialog, useFluxStore } from '$flux/data';
+import $style from '$flux/css/component/Overlay.module.scss';
 
 type Emit = SetupContext<['close']>['emit'];
 type Props = {
@@ -9,8 +10,9 @@ type Props = {
     readonly viewKey?: string;
 };
 
+const TARGET_SELECTOR = `.${$style.overlayProvider.replaceAll(' ', '.')}`;
+
 export default function (attrs: object, props: Props, emit: Emit, slots: Slots, className: string, transition: Component): RenderFunction {
-    const instance = getCurrentInstance();
     let unregister: Function | null = null;
     let zIndex = 0;
 
@@ -52,15 +54,16 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
 
         if (isVisible) {
             if (!unregister) {
-                unregister = registerDialog();
-                zIndex = dialogCount + 1000;
+                [zIndex, unregister] = registerDialog();
             }
 
             content = h('div', {
                 key: props.viewKey,
                 ref: dialogRef,
-                class: className,
-                style: {zIndex},
+                class: [className, zIndex === dialogCount && $style.isCurrent],
+                style: {
+                    zIndex: zIndex + 1000
+                },
                 tabindex: 0
             }, children);
         } else {
@@ -68,7 +71,7 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
             unregister = null;
         }
 
-        return h(Teleport, {defer: true, disabled: !content, to: instance?.appContext.app._container}, [
+        return h(Teleport, {defer: true, disabled: !content, to: TARGET_SELECTOR}, [
             h(transition, attrs, {
                 default: () => content
             })