@lavalogic/scoria 0.40.27 → 0.40.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,29 +1,40 @@
|
|
|
1
|
-
<svelte:options runes />
|
|
2
|
-
|
|
3
|
-
<!--
|
|
4
|
-
BaseModal.svelte - internal primitive that owns the `<dialog>`
|
|
5
|
-
open/close + Escape/backdrop dismissal + autofocus plumbing
|
|
6
|
-
shared between `Modal`, `DesktopModal`, and `TouchModal`. See
|
|
7
|
-
`BaseModalProps.ts` for the contract.
|
|
8
|
-
|
|
9
|
-
Cosmetic-free for inner content by design: each consumer renders
|
|
10
|
-
its own header / main / footer / button-row markup as
|
|
11
|
-
`{@render children()}`. The consumer also keeps its own
|
|
12
|
-
footer-text rules, scanner shortcut wiring, colourSet button
|
|
13
|
-
styling, etc. - those concerns intentionally do not live in
|
|
14
|
-
BaseModal.
|
|
15
|
-
|
|
16
|
-
The shared dialog SHELL styling (border, backdrop, zoom-in
|
|
17
|
-
animation, the `--dialog-*` size variables and the static-height
|
|
18
|
-
/ static-width / noscroll modifier classes) is included here via
|
|
19
|
-
the `@mixin dialog` SCSS so it is shared across all three
|
|
20
|
-
consumer modals.
|
|
21
|
-
-->
|
|
22
|
-
|
|
23
|
-
<script lang="ts">import {
|
|
24
|
-
import {
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<!--
|
|
4
|
+
BaseModal.svelte - internal primitive that owns the `<dialog>`
|
|
5
|
+
open/close + Escape/backdrop dismissal + autofocus plumbing
|
|
6
|
+
shared between `Modal`, `DesktopModal`, and `TouchModal`. See
|
|
7
|
+
`BaseModalProps.ts` for the contract.
|
|
8
|
+
|
|
9
|
+
Cosmetic-free for inner content by design: each consumer renders
|
|
10
|
+
its own header / main / footer / button-row markup as
|
|
11
|
+
`{@render children()}`. The consumer also keeps its own
|
|
12
|
+
footer-text rules, scanner shortcut wiring, colourSet button
|
|
13
|
+
styling, etc. - those concerns intentionally do not live in
|
|
14
|
+
BaseModal.
|
|
15
|
+
|
|
16
|
+
The shared dialog SHELL styling (border, backdrop, zoom-in
|
|
17
|
+
animation, the `--dialog-*` size variables and the static-height
|
|
18
|
+
/ static-width / noscroll modifier classes) is included here via
|
|
19
|
+
the `@mixin dialog` SCSS so it is shared across all three
|
|
20
|
+
consumer modals.
|
|
21
|
+
-->
|
|
22
|
+
|
|
23
|
+
<script lang="ts">import { TooltipContext } from "../../Contexts/TooltipContext.svelte.js";
|
|
24
|
+
import { devCatch } from "../../Helpers/Helpers.svelte.js";
|
|
25
|
+
import { getContext, onMount, tick } from "svelte";
|
|
26
|
+
import Tooltip from "../Contexts/Tooltip.svelte";
|
|
25
27
|
let { value = $bindable(true), children, onclose, mandatory = false, autofocusSelector, ariaLabelledby, ariaDescribedby, closeOnEscape = true, closeOnBackdropClick = true, dialogClass, dialogStyle } = $props();
|
|
26
28
|
let dialog = $state();
|
|
29
|
+
// A dialog opened with showModal() paints in the browser top layer,
|
|
30
|
+
// above every z-index on the page, including the app-root Tooltip host
|
|
31
|
+
// mounted by ContextWrapper. Hovering a Button / Action inside a modal
|
|
32
|
+
// therefore shows its tooltip BEHIND the modal. Rendering a second
|
|
33
|
+
// Tooltip host inside the dialog puts one in the top layer too; both
|
|
34
|
+
// hosts read the same app-level context, so whichever is visible paints
|
|
35
|
+
// the active tooltip. Skipped when no context is mounted (tests,
|
|
36
|
+
// context-free harnesses).
|
|
37
|
+
const tooltipContext = getContext(TooltipContext.identifier);
|
|
27
38
|
function tryFocusSelector() {
|
|
28
39
|
if (dialog && autofocusSelector != null && autofocusSelector.length > 0) {
|
|
29
40
|
const target = dialog.querySelector(autofocusSelector);
|
|
@@ -80,22 +91,25 @@ function handleBackdropClick(e) {
|
|
|
80
91
|
}
|
|
81
92
|
}
|
|
82
93
|
}
|
|
83
|
-
</script>
|
|
84
|
-
|
|
85
|
-
<dialog
|
|
86
|
-
bind:this={dialog}
|
|
87
|
-
class={dialogClass}
|
|
88
|
-
style={dialogStyle}
|
|
89
|
-
aria-modal="true"
|
|
90
|
-
aria-labelledby={ariaLabelledby}
|
|
91
|
-
aria-describedby={ariaDescribedby}
|
|
92
|
-
onclose={handleNativeClose}
|
|
93
|
-
onkeydown={handleKeydown}
|
|
94
|
-
onclick={handleBackdropClick}
|
|
95
|
-
>
|
|
96
|
-
{@render children()}
|
|
97
|
-
|
|
98
|
-
|
|
94
|
+
</script>
|
|
95
|
+
|
|
96
|
+
<dialog
|
|
97
|
+
bind:this={dialog}
|
|
98
|
+
class={dialogClass}
|
|
99
|
+
style={dialogStyle}
|
|
100
|
+
aria-modal="true"
|
|
101
|
+
aria-labelledby={ariaLabelledby}
|
|
102
|
+
aria-describedby={ariaDescribedby}
|
|
103
|
+
onclose={handleNativeClose}
|
|
104
|
+
onkeydown={handleKeydown}
|
|
105
|
+
onclick={handleBackdropClick}
|
|
106
|
+
>
|
|
107
|
+
{@render children()}
|
|
108
|
+
{#if tooltipContext}
|
|
109
|
+
<Tooltip />
|
|
110
|
+
{/if}
|
|
111
|
+
</dialog>
|
|
112
|
+
|
|
99
113
|
<style>dialog {
|
|
100
114
|
overflow: clip;
|
|
101
115
|
background-color: #e9ecf1;
|
|
@@ -149,4 +163,4 @@ dialog .modal-main.noscroll {
|
|
|
149
163
|
}
|
|
150
164
|
dialog .footer {
|
|
151
165
|
flex-shrink: 0;
|
|
152
|
-
}</style>
|
|
166
|
+
}</style>
|