@classic-homes/theme-svelte 1.19.1 → 1.19.2
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.
|
@@ -28,6 +28,11 @@
|
|
|
28
28
|
headerActions?: Snippet;
|
|
29
29
|
/** Whether to show the close button (default: true) */
|
|
30
30
|
showClose?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Called before focus returns to the trigger on close; `preventDefault()`
|
|
33
|
+
* keeps focus where the caller put it (e.g. a field it just revealed).
|
|
34
|
+
*/
|
|
35
|
+
onCloseAutoFocus?: (event: Event) => void;
|
|
31
36
|
}
|
|
32
37
|
|
|
33
38
|
// Every size is clamped to the viewport minus a 1rem gutter on phones; the
|
|
@@ -54,6 +59,7 @@
|
|
|
54
59
|
header,
|
|
55
60
|
headerActions,
|
|
56
61
|
showClose = true,
|
|
62
|
+
onCloseAutoFocus,
|
|
57
63
|
}: Props = $props();
|
|
58
64
|
|
|
59
65
|
function handleOpenChange(newOpen: boolean) {
|
|
@@ -83,6 +89,7 @@
|
|
|
83
89
|
class="fixed inset-0 z-50 bg-foreground/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
|
|
84
90
|
/>
|
|
85
91
|
<DialogPrimitive.Content
|
|
92
|
+
{onCloseAutoFocus}
|
|
86
93
|
class={cn(
|
|
87
94
|
'fixed left-[50%] top-[50%] z-50 flex max-h-[calc(100dvh-2rem)] w-full translate-x-[-50%] translate-y-[-50%] flex-col gap-4 border border-border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden',
|
|
88
95
|
sizeClasses[size],
|
|
@@ -24,6 +24,11 @@ interface Props {
|
|
|
24
24
|
headerActions?: Snippet;
|
|
25
25
|
/** Whether to show the close button (default: true) */
|
|
26
26
|
showClose?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Called before focus returns to the trigger on close; `preventDefault()`
|
|
29
|
+
* keeps focus where the caller put it (e.g. a field it just revealed).
|
|
30
|
+
*/
|
|
31
|
+
onCloseAutoFocus?: (event: Event) => void;
|
|
27
32
|
}
|
|
28
33
|
declare const Dialog: import("svelte").Component<Props, {}, "open">;
|
|
29
34
|
type Dialog = ReturnType<typeof Dialog>;
|
|
@@ -56,6 +56,9 @@
|
|
|
56
56
|
}: Props = $props();
|
|
57
57
|
|
|
58
58
|
let query = $state('');
|
|
59
|
+
// Picking an item hands focus to whatever the caller opens next (the new
|
|
60
|
+
// item's first field); only Escape / close returns focus to the trigger.
|
|
61
|
+
let picked = false;
|
|
59
62
|
let listEl: HTMLDivElement | undefined = $state();
|
|
60
63
|
let searchEl: HTMLInputElement | undefined = $state();
|
|
61
64
|
|
|
@@ -79,11 +82,13 @@
|
|
|
79
82
|
$effect(() => {
|
|
80
83
|
if (!open) return;
|
|
81
84
|
query = '';
|
|
85
|
+
picked = false;
|
|
82
86
|
void tick().then(() => searchEl?.focus());
|
|
83
87
|
});
|
|
84
88
|
|
|
85
89
|
function choose(item: InsertPaletteItem) {
|
|
86
90
|
if (item.disabled) return;
|
|
91
|
+
picked = true;
|
|
87
92
|
open = false;
|
|
88
93
|
onSelect(item.id);
|
|
89
94
|
}
|
|
@@ -115,7 +120,15 @@
|
|
|
115
120
|
}
|
|
116
121
|
</script>
|
|
117
122
|
|
|
118
|
-
<Dialog
|
|
123
|
+
<Dialog
|
|
124
|
+
bind:open
|
|
125
|
+
{title}
|
|
126
|
+
{description}
|
|
127
|
+
size={thumbnail ? '2xl' : 'xl'}
|
|
128
|
+
onCloseAutoFocus={(e) => {
|
|
129
|
+
if (picked) e.preventDefault();
|
|
130
|
+
}}
|
|
131
|
+
>
|
|
119
132
|
<div class="space-y-4 pb-4">
|
|
120
133
|
<div class="relative">
|
|
121
134
|
<Icon
|