@immich/ui 0.18.1 → 0.19.1
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.
|
@@ -138,11 +138,7 @@
|
|
|
138
138
|
{/if}
|
|
139
139
|
|
|
140
140
|
{#if footerChild}
|
|
141
|
-
<div
|
|
142
|
-
class={twMerge(
|
|
143
|
-
cleanClass('flex items-center border-t border-t-subtle p-4', footerChild.class),
|
|
144
|
-
)}
|
|
145
|
-
>
|
|
141
|
+
<div class={twMerge(cleanClass('flex items-center border-t p-4', footerChild.class))}>
|
|
146
142
|
{@render footerChild.snippet()}
|
|
147
143
|
</div>
|
|
148
144
|
{/if}
|
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
import CardHeader from '../Card/CardHeader.svelte';
|
|
7
7
|
import CardTitle from '../Card/CardTitle.svelte';
|
|
8
8
|
import CloseButton from '../CloseButton/CloseButton.svelte';
|
|
9
|
+
import Icon from '../Icon/Icon.svelte';
|
|
10
|
+
import Logo from '../Logo/Logo.svelte';
|
|
9
11
|
import { ChildKey } from '../../constants.js';
|
|
10
12
|
import type { ModalSize } from '../../types.js';
|
|
11
13
|
import { cleanClass } from '../../utils.js';
|
|
@@ -18,6 +20,7 @@
|
|
|
18
20
|
size?: ModalSize;
|
|
19
21
|
class?: string;
|
|
20
22
|
open?: boolean;
|
|
23
|
+
icon?: string | boolean;
|
|
21
24
|
expandable?: boolean;
|
|
22
25
|
children: Snippet;
|
|
23
26
|
onClose?: () => void;
|
|
@@ -27,6 +30,7 @@
|
|
|
27
30
|
title,
|
|
28
31
|
size = 'medium',
|
|
29
32
|
open = true,
|
|
33
|
+
icon = true,
|
|
30
34
|
onClose,
|
|
31
35
|
class: className,
|
|
32
36
|
children,
|
|
@@ -36,8 +40,8 @@
|
|
|
36
40
|
base: 'flex rounded-none border border-subtle bg-subtle sm:rounded-2xl',
|
|
37
41
|
variants: {
|
|
38
42
|
size: {
|
|
39
|
-
tiny: 'h-full sm:h-min md:max-w-
|
|
40
|
-
small: 'h-full sm:h-min md:max-w-
|
|
43
|
+
tiny: 'h-full sm:h-min md:max-w-sm',
|
|
44
|
+
small: 'h-full sm:h-min md:max-w-md',
|
|
41
45
|
medium: 'h-full sm:h-min md:max-w-screen-sm',
|
|
42
46
|
large: 'h-full sm:h-min md:max-w-screen-md',
|
|
43
47
|
giant: 'h-full sm:h-min md:max-w-screen-lg',
|
|
@@ -59,7 +63,7 @@
|
|
|
59
63
|
|
|
60
64
|
<Dialog.Root {open} onOpenChange={onChange}>
|
|
61
65
|
<Dialog.Portal>
|
|
62
|
-
<Dialog.Overlay class="absolute start-0 top-0 flex h-dvh w-screen
|
|
66
|
+
<Dialog.Overlay class="absolute start-0 top-0 flex h-dvh w-screen bg-black/30" />
|
|
63
67
|
<Dialog.Content
|
|
64
68
|
class={cleanClass(
|
|
65
69
|
'absolute start-0 top-0 flex h-dvh w-screen items-center justify-center overflow-hidden sm:p-4',
|
|
@@ -67,21 +71,26 @@
|
|
|
67
71
|
>
|
|
68
72
|
<div class={cleanClass('flex h-full w-full flex-col items-center justify-center ')}>
|
|
69
73
|
<Card class={cleanClass(modalStyles({ size }), className)}>
|
|
70
|
-
<CardHeader class="border-
|
|
71
|
-
<div class="flex items-center justify-between">
|
|
72
|
-
|
|
74
|
+
<CardHeader class="border-b border-gray-400 py-3 dark:border-gray-500">
|
|
75
|
+
<div class="flex items-center justify-between gap-2">
|
|
76
|
+
{#if typeof icon === 'string'}
|
|
77
|
+
<Icon {icon} size="1.5rem" aria-hidden />
|
|
78
|
+
{:else if icon}
|
|
79
|
+
<Logo variant="icon" size="tiny" />
|
|
80
|
+
{/if}
|
|
81
|
+
<CardTitle tag="h1" class="grow">{title}</CardTitle>
|
|
73
82
|
<Dialog.Close>
|
|
74
|
-
<CloseButton
|
|
83
|
+
<CloseButton onclick={() => onChange(false)} class="-me-2" />
|
|
75
84
|
</Dialog.Close>
|
|
76
85
|
</div>
|
|
77
86
|
</CardHeader>
|
|
78
87
|
|
|
79
|
-
<CardBody class="grow
|
|
88
|
+
<CardBody class="grow p-5">
|
|
80
89
|
{@render bodyChildren?.snippet()}
|
|
81
90
|
</CardBody>
|
|
82
91
|
|
|
83
92
|
{#if footerChildren}
|
|
84
|
-
<CardFooter class="
|
|
93
|
+
<CardFooter class="border-t border-gray-400 dark:border-gray-500">
|
|
85
94
|
{@render footerChildren.snippet()}
|
|
86
95
|
</CardFooter>
|
|
87
96
|
{/if}
|