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

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;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"}

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.14",
     "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.14",
+        "@flux-ui/types": "3.0.0-next.14",
         "@fortawesome/fontawesome-common-types": "^7.0.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",

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/Overlay.module.scss

@@ -4,8 +4,9 @@
     inset: 0;
     height: 100dvh;
     width: 100dvw;
-    background: oklch(from var(--gray-11) l c h / .6);
+    background: var(--overlay);
     backdrop-filter: blur(3px) saturate(180%);
+    outline: 0;
     z-index: 10000;
 
     > .basePaneStructure {
@@ -25,10 +26,6 @@
     }
 }
 
-[dark] .overlay {
-    background: rgb(0 0 0 / .6);
-}
-
 .overlaySmall {
     composes: overlay;
 
@@ -151,3 +148,34 @@
         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/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/util/createDialogRenderer.ts

@@ -1,6 +1,6 @@
-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, getCurrentInstance, h, onUnmounted, ref, Teleport, watch } from 'vue';
 import { registerDialog, useFluxStore } from '$flux/data';
 
 type Emit = SetupContext<['close']>['emit'];
@@ -14,22 +14,32 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
     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,7 +48,7 @@ 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) {
@@ -46,17 +56,19 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
                 zIndex = dialogCount + 1000;
             }
 
-            content.push(h('div', {
+            content = h('div', {
                 key: props.viewKey,
+                ref: dialogRef,
                 class: className,
-                style: {zIndex}
-            }, children));
+                style: {zIndex},
+                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: instance?.appContext.app._container}, [
             h(transition, attrs, {
                 default: () => content
             })