@flux-ui/components 3.0.0-next.13 → 3.0.0-next.15

package/dist/util/createDialogRenderer.d.ts

@@ -1,4 +1,4 @@
-import { Component, RenderFunction, Slots, SetupContext } from 'vue';
+import { Component, RenderFunction, SetupContext, Slots } from 'vue';
 type Emit = SetupContext<['close']>['emit'];
 type Props = {
     readonly isCloseable?: boolean;

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,EAAE,SAAS,EAAsB,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAC3E,OAAO,EAAsC,YAAY,EAAmB,MAAM,KAAK,CAAC;AAGxF,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,CAqDxI"}
+{"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.13",
+    "version": "3.0.0-next.15",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -52,8 +52,8 @@
     "sideEffects": false,
     "dependencies": {
         "@basmilius/utils": "^2.5.2",
-        "@flux-ui/internals": "3.0.0-next.13",
-        "@flux-ui/types": "3.0.0-next.13",
+        "@flux-ui/internals": "3.0.0-next.15",
+        "@flux-ui/types": "3.0.0-next.15",
         "@fortawesome/fontawesome-common-types": "^7.0.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",

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/base.scss

@@ -12,6 +12,7 @@
     }
 
     [dark] {
+        @include variables.defaults-dark;
         @include variables.color-dark;
         @include variables.shadow-dark;
     }

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,12 +1,37 @@
+.overlayView {
+    position: fixed;
+    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;
-    background: oklch(from var(--gray-11) l c h / .6);
-    backdrop-filter: blur(3px) saturate(180%);
-    z-index: 10000;
+    outline: 0;
 
     > .basePaneStructure {
         display: flex;
@@ -16,17 +41,40 @@
         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;
     }
-}
 
-[dark] .overlay {
-    background: rgb(0 0 0 / .6);
+    &:not(.isCurrent) > .basePaneStructure {
+        filter: blur(3px);
+        scale: .95;
+
+        &::after {
+            opacity: 1;
+        }
+    }
 }
 
 .overlaySmall {

package/src/css/variables.scss

@@ -178,6 +178,14 @@
     --foreground: var(--gray-8);
     --foreground-prominent: var(--gray-10);
     --foreground-secondary: var(--gray-5);
+
+    --overlay: oklch(from var(--gray-11) l c h / .6);
+    --overlay-secondary: oklch(from var(--gray-11) l c h / .4);
+}
+
+@mixin defaults-dark {
+    --overlay: rgb(0 0 0 / .6);
+    --overlay-secondary: rgb(0 0 0 / .4);
 }
 
 @mixin shadow-light {

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 } from '@flux-ui/internals';
-import { Component, getCurrentInstance, RenderFunction, Slots } from 'vue';
-import { Comment, h, onMounted, onUnmounted, SetupContext, Teleport, VNode } from 'vue';
+import { flattenVNodeTree, useFocusTrap } from '@flux-ui/internals';
+import type { Component, RenderFunction, SetupContext, Slots, VNode } 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,27 +10,38 @@ 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;
 
-    onMounted(() => {
-        window.addEventListener('keydown', onKeyDown);
-    });
+    const dialogRef = ref<HTMLElement>();
+
+    useFocusTrap(dialogRef);
 
     onUnmounted(() => {
-        window.removeEventListener('keydown', onKeyDown);
         unregister?.();
     });
 
+    watch(dialogRef, (dialog, _, onCleanup) => {
+        if (!dialog) {
+            return;
+        }
+
+        dialog.addEventListener('keydown', onKeyDown, {passive: true});
+        dialog.focus();
+
+        onCleanup(() => {
+            dialog.removeEventListener('keydown', onKeyDown);
+        });
+    });
+
     function onKeyDown(evt: KeyboardEvent): void {
         if (evt.key !== 'Escape' || !unregister || !props.isCloseable) {
             return;
         }
 
-        evt.preventDefault();
-        evt.stopPropagation();
         emit('close');
     }
 
@@ -38,25 +50,28 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
 
         const children = flattenVNodeTree(slots.default?.() ?? []);
         const isVisible = children.length > 0 && children.some(child => child.type !== Comment);
-        const content: VNode[] = [];
+        let content: VNode | undefined;
 
         if (isVisible) {
             if (!unregister) {
-                unregister = registerDialog();
-                zIndex = dialogCount + 1000;
+                [zIndex, unregister] = registerDialog();
             }
 
-            content.push(h('div', {
+            content = h('div', {
                 key: props.viewKey,
-                class: className,
-                style: {zIndex}
-            }, children));
+                ref: dialogRef,
+                class: [className, zIndex === dialogCount && $style.isCurrent],
+                style: {
+                    zIndex: zIndex + 1000
+                },
+                tabindex: 0
+            }, children);
         } else {
             unregister?.();
             unregister = null;
         }
 
-        return h(Teleport, {disabled: content.length === 0, to: instance?.appContext.app._container}, [
+        return h(Teleport, {defer: true, disabled: !content, to: TARGET_SELECTOR}, [
             h(transition, attrs, {
                 default: () => content
             })