@classic-homes/theme-svelte 0.1.1 → 0.1.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.
|
@@ -20,6 +20,10 @@
|
|
|
20
20
|
trigger?: Snippet;
|
|
21
21
|
/** Optional footer element */
|
|
22
22
|
footer?: Snippet;
|
|
23
|
+
/** Optional header actions (rendered before the close button) */
|
|
24
|
+
headerActions?: Snippet;
|
|
25
|
+
/** Whether to show the close button (default: true) */
|
|
26
|
+
showClose?: boolean;
|
|
23
27
|
}
|
|
24
28
|
|
|
25
29
|
let {
|
|
@@ -31,12 +35,19 @@
|
|
|
31
35
|
children,
|
|
32
36
|
trigger,
|
|
33
37
|
footer,
|
|
38
|
+
headerActions,
|
|
39
|
+
showClose = true,
|
|
34
40
|
}: Props = $props();
|
|
35
41
|
|
|
36
42
|
function handleOpenChange(newOpen: boolean) {
|
|
37
43
|
open = newOpen;
|
|
38
44
|
onOpenChange?.(newOpen);
|
|
39
45
|
}
|
|
46
|
+
|
|
47
|
+
function handleClose() {
|
|
48
|
+
open = false;
|
|
49
|
+
onOpenChange?.(false);
|
|
50
|
+
}
|
|
40
51
|
</script>
|
|
41
52
|
|
|
42
53
|
<DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
|
|
@@ -56,56 +67,74 @@
|
|
|
56
67
|
/>
|
|
57
68
|
<DialogPrimitive.Content
|
|
58
69
|
class={cn(
|
|
59
|
-
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background
|
|
70
|
+
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 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',
|
|
60
71
|
className
|
|
61
72
|
)}
|
|
62
73
|
>
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
74
|
+
<!-- Header section with title and actions -->
|
|
75
|
+
{#if title || description || headerActions || showClose}
|
|
76
|
+
<div
|
|
77
|
+
class="flex items-start justify-between gap-4 border-b border-border bg-muted/30 px-6 py-4"
|
|
78
|
+
>
|
|
79
|
+
<!-- Title section -->
|
|
80
|
+
<div class="flex flex-col space-y-1.5 min-w-0 flex-1">
|
|
81
|
+
{#if title}
|
|
82
|
+
<DialogPrimitive.Title class="text-lg font-semibold leading-none tracking-tight">
|
|
83
|
+
{title}
|
|
84
|
+
</DialogPrimitive.Title>
|
|
85
|
+
{/if}
|
|
86
|
+
{#if description}
|
|
87
|
+
<DialogPrimitive.Description class="text-sm text-muted-foreground">
|
|
88
|
+
{description}
|
|
89
|
+
</DialogPrimitive.Description>
|
|
90
|
+
{/if}
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<!-- Actions section -->
|
|
94
|
+
<div class="flex items-center gap-1 shrink-0 -mr-2 -mt-1">
|
|
95
|
+
{#if headerActions}
|
|
96
|
+
{@render headerActions()}
|
|
97
|
+
{/if}
|
|
98
|
+
{#if showClose}
|
|
99
|
+
<DialogPrimitive.Close
|
|
100
|
+
class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground transition-[background-color,color] duration-150 ease-in-out hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none"
|
|
101
|
+
aria-label="Close dialog"
|
|
102
|
+
>
|
|
103
|
+
<svg
|
|
104
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
105
|
+
width="20"
|
|
106
|
+
height="20"
|
|
107
|
+
viewBox="0 0 24 24"
|
|
108
|
+
fill="none"
|
|
109
|
+
stroke="currentColor"
|
|
110
|
+
stroke-width="2"
|
|
111
|
+
stroke-linecap="round"
|
|
112
|
+
stroke-linejoin="round"
|
|
113
|
+
class="h-5 w-5"
|
|
114
|
+
>
|
|
115
|
+
<path d="M18 6 6 18" />
|
|
116
|
+
<path d="m6 6 12 12" />
|
|
117
|
+
</svg>
|
|
118
|
+
<span class="sr-only">Close</span>
|
|
119
|
+
</DialogPrimitive.Close>
|
|
120
|
+
{/if}
|
|
121
|
+
</div>
|
|
75
122
|
</div>
|
|
76
123
|
{/if}
|
|
77
124
|
|
|
78
|
-
|
|
125
|
+
<!-- Content section -->
|
|
126
|
+
<div class="dialog-content px-6 py-2">
|
|
79
127
|
{@render children()}
|
|
80
128
|
</div>
|
|
81
129
|
|
|
130
|
+
<!-- Footer section -->
|
|
82
131
|
{#if footer}
|
|
83
|
-
<div
|
|
132
|
+
<div
|
|
133
|
+
class="flex flex-col-reverse border-t border-border bg-muted/30 px-6 py-4 sm:flex-row sm:justify-end sm:space-x-2"
|
|
134
|
+
>
|
|
84
135
|
{@render footer()}
|
|
85
136
|
</div>
|
|
86
137
|
{/if}
|
|
87
|
-
|
|
88
|
-
<DialogPrimitive.Close
|
|
89
|
-
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
|
90
|
-
aria-label="Close dialog"
|
|
91
|
-
>
|
|
92
|
-
<svg
|
|
93
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
94
|
-
width="24"
|
|
95
|
-
height="24"
|
|
96
|
-
viewBox="0 0 24 24"
|
|
97
|
-
fill="none"
|
|
98
|
-
stroke="currentColor"
|
|
99
|
-
stroke-width="2"
|
|
100
|
-
stroke-linecap="round"
|
|
101
|
-
stroke-linejoin="round"
|
|
102
|
-
class="h-4 w-4"
|
|
103
|
-
>
|
|
104
|
-
<path d="M18 6 6 18" />
|
|
105
|
-
<path d="m6 6 12 12" />
|
|
106
|
-
</svg>
|
|
107
|
-
<span class="sr-only">Close</span>
|
|
108
|
-
</DialogPrimitive.Close>
|
|
109
138
|
</DialogPrimitive.Content>
|
|
110
139
|
</DialogPrimitive.Portal>
|
|
111
140
|
</DialogPrimitive.Root>
|
|
@@ -16,6 +16,10 @@ interface Props {
|
|
|
16
16
|
trigger?: Snippet;
|
|
17
17
|
/** Optional footer element */
|
|
18
18
|
footer?: Snippet;
|
|
19
|
+
/** Optional header actions (rendered before the close button) */
|
|
20
|
+
headerActions?: Snippet;
|
|
21
|
+
/** Whether to show the close button (default: true) */
|
|
22
|
+
showClose?: boolean;
|
|
19
23
|
}
|
|
20
24
|
declare const Dialog: import("svelte").Component<Props, {}, "open">;
|
|
21
25
|
type Dialog = ReturnType<typeof Dialog>;
|
|
@@ -93,8 +93,9 @@
|
|
|
93
93
|
disabled={subItem.disabled}
|
|
94
94
|
onSelect={() => subItem.onSelect?.()}
|
|
95
95
|
class={cn(
|
|
96
|
-
'relative flex cursor-
|
|
97
|
-
subItem.destructive &&
|
|
96
|
+
'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default',
|
|
97
|
+
subItem.destructive &&
|
|
98
|
+
'text-destructive hover:text-destructive focus:text-destructive data-[highlighted]:text-destructive'
|
|
98
99
|
)}
|
|
99
100
|
>
|
|
100
101
|
{subItem.label}
|
|
@@ -118,8 +119,9 @@
|
|
|
118
119
|
disabled={item.disabled}
|
|
119
120
|
onSelect={() => item.onSelect?.()}
|
|
120
121
|
class={cn(
|
|
121
|
-
'relative flex cursor-
|
|
122
|
-
item.destructive &&
|
|
122
|
+
'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default',
|
|
123
|
+
item.destructive &&
|
|
124
|
+
'text-destructive hover:text-destructive focus:text-destructive data-[highlighted]:text-destructive'
|
|
123
125
|
)}
|
|
124
126
|
>
|
|
125
127
|
{item.label}
|
|
@@ -161,8 +161,26 @@
|
|
|
161
161
|
value={option.value}
|
|
162
162
|
label={option.label}
|
|
163
163
|
disabled={option.disabled}
|
|
164
|
-
class="relative flex w-full cursor-
|
|
164
|
+
class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
|
|
165
165
|
>
|
|
166
|
+
{#if option.value === value}
|
|
167
|
+
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
168
|
+
<svg
|
|
169
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
170
|
+
width="16"
|
|
171
|
+
height="16"
|
|
172
|
+
viewBox="0 0 24 24"
|
|
173
|
+
fill="none"
|
|
174
|
+
stroke="currentColor"
|
|
175
|
+
stroke-width="2"
|
|
176
|
+
stroke-linecap="round"
|
|
177
|
+
stroke-linejoin="round"
|
|
178
|
+
class="h-4 w-4"
|
|
179
|
+
>
|
|
180
|
+
<polyline points="20 6 9 17 4 12" />
|
|
181
|
+
</svg>
|
|
182
|
+
</span>
|
|
183
|
+
{/if}
|
|
166
184
|
{option.label}
|
|
167
185
|
</SelectPrimitive.Item>
|
|
168
186
|
{/each}
|
|
@@ -172,8 +190,26 @@
|
|
|
172
190
|
value={item.value}
|
|
173
191
|
label={item.label}
|
|
174
192
|
disabled={item.disabled}
|
|
175
|
-
class="relative flex w-full cursor-
|
|
193
|
+
class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
|
|
176
194
|
>
|
|
195
|
+
{#if item.value === value}
|
|
196
|
+
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
197
|
+
<svg
|
|
198
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
199
|
+
width="16"
|
|
200
|
+
height="16"
|
|
201
|
+
viewBox="0 0 24 24"
|
|
202
|
+
fill="none"
|
|
203
|
+
stroke="currentColor"
|
|
204
|
+
stroke-width="2"
|
|
205
|
+
stroke-linecap="round"
|
|
206
|
+
stroke-linejoin="round"
|
|
207
|
+
class="h-4 w-4"
|
|
208
|
+
>
|
|
209
|
+
<polyline points="20 6 9 17 4 12" />
|
|
210
|
+
</svg>
|
|
211
|
+
</span>
|
|
212
|
+
{/if}
|
|
177
213
|
{item.label}
|
|
178
214
|
</SelectPrimitive.Item>
|
|
179
215
|
{/if}
|