@r2digisolutions/ui 0.29.2 → 0.30.0
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.
|
@@ -23,4 +23,5 @@ import NoContent from './ui/NoContent/NoContent.svelte';
|
|
|
23
23
|
import Tag from './ui/Tag/Tag.svelte';
|
|
24
24
|
export * from './ui/Dialog/index.js';
|
|
25
25
|
import Selector from './ui/Selector/Selector.svelte';
|
|
26
|
-
|
|
26
|
+
import SelectTile from './ui/SelectTile/SelectTile.svelte';
|
|
27
|
+
export { SelectTile, Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
|
package/dist/components/index.js
CHANGED
|
@@ -23,4 +23,5 @@ import NoContent from './ui/NoContent/NoContent.svelte';
|
|
|
23
23
|
import Tag from './ui/Tag/Tag.svelte';
|
|
24
24
|
export * from './ui/Dialog/index.js';
|
|
25
25
|
import Selector from './ui/Selector/Selector.svelte';
|
|
26
|
-
|
|
26
|
+
import SelectTile from './ui/SelectTile/SelectTile.svelte';
|
|
27
|
+
export { SelectTile, Selector, Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { i18n } from '../../../settings/index.js';
|
|
3
|
+
import { Check, Plus, ChevronRight } from 'lucide-svelte';
|
|
4
|
+
import type { Snippet } from 'svelte';
|
|
5
|
+
|
|
6
|
+
interface Props {
|
|
7
|
+
label: string;
|
|
8
|
+
description?: string;
|
|
9
|
+
|
|
10
|
+
selected?: boolean;
|
|
11
|
+
hasChildren?: boolean;
|
|
12
|
+
|
|
13
|
+
size?: 'sm' | 'md';
|
|
14
|
+
accent?: 'purple' | 'indigo' | 'sky' | 'neutral';
|
|
15
|
+
|
|
16
|
+
showLeadingCircle?: boolean;
|
|
17
|
+
showSelectedBadge?: boolean;
|
|
18
|
+
showChevronForChildren?: boolean;
|
|
19
|
+
|
|
20
|
+
compact?: boolean;
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
|
|
23
|
+
onclick?: () => void;
|
|
24
|
+
|
|
25
|
+
meta?: Snippet;
|
|
26
|
+
right?: Snippet;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const {
|
|
30
|
+
label,
|
|
31
|
+
description = '',
|
|
32
|
+
selected = false,
|
|
33
|
+
hasChildren = false,
|
|
34
|
+
size = 'md',
|
|
35
|
+
accent = 'purple',
|
|
36
|
+
|
|
37
|
+
showLeadingCircle = true,
|
|
38
|
+
showSelectedBadge = true,
|
|
39
|
+
showChevronForChildren = true,
|
|
40
|
+
|
|
41
|
+
compact = false,
|
|
42
|
+
disabled = false,
|
|
43
|
+
|
|
44
|
+
onclick,
|
|
45
|
+
meta,
|
|
46
|
+
right
|
|
47
|
+
}: Props = $props();
|
|
48
|
+
|
|
49
|
+
const sizeClasses = $derived(
|
|
50
|
+
{
|
|
51
|
+
sm: 'px-2.5 py-1.5 text-[13px]',
|
|
52
|
+
md: 'px-3 py-2 text-sm'
|
|
53
|
+
}[size]
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
const leadingSizeClasses = $derived(
|
|
57
|
+
{
|
|
58
|
+
sm: 'h-6 w-6',
|
|
59
|
+
md: 'h-7 w-7'
|
|
60
|
+
}[size]
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
const labelTextSize = $derived(compact ? 'text-[13px]' : 'text-[13px]');
|
|
64
|
+
const descriptionTextSize = $derived(compact ? 'text-[11px]' : 'text-[11px]');
|
|
65
|
+
|
|
66
|
+
const accentMap = {
|
|
67
|
+
purple: {
|
|
68
|
+
selectedBorder: 'border-purple-400/70 dark:border-purple-500/60',
|
|
69
|
+
selectedBg: 'bg-purple-50 dark:bg-purple-950/40',
|
|
70
|
+
selectedText: 'text-neutral-900 dark:text-neutral-50',
|
|
71
|
+
|
|
72
|
+
badgeBg: 'bg-white/85 dark:bg-purple-200/10',
|
|
73
|
+
badgeText: 'text-purple-700 dark:text-purple-100',
|
|
74
|
+
|
|
75
|
+
leadingSelectedBg: 'bg-purple-500/90 dark:bg-purple-500',
|
|
76
|
+
leadingSelectedBorder: 'border-purple-400/70 dark:border-purple-400/80'
|
|
77
|
+
},
|
|
78
|
+
indigo: {
|
|
79
|
+
selectedBorder: 'border-indigo-400/70 dark:border-indigo-500/60',
|
|
80
|
+
selectedBg: 'bg-indigo-50 dark:bg-indigo-950/40',
|
|
81
|
+
selectedText: 'text-neutral-900 dark:text-neutral-50',
|
|
82
|
+
|
|
83
|
+
badgeBg: 'bg-white/85 dark:bg-indigo-200/10',
|
|
84
|
+
badgeText: 'text-indigo-700 dark:text-indigo-100',
|
|
85
|
+
|
|
86
|
+
leadingSelectedBg: 'bg-indigo-500/90 dark:bg-indigo-500',
|
|
87
|
+
leadingSelectedBorder: 'border-indigo-400/70 dark:border-indigo-400/80'
|
|
88
|
+
},
|
|
89
|
+
sky: {
|
|
90
|
+
selectedBorder: 'border-sky-400/70 dark:border-sky-500/60',
|
|
91
|
+
selectedBg: 'bg-sky-50 dark:bg-sky-950/40',
|
|
92
|
+
selectedText: 'text-neutral-900 dark:text-neutral-50',
|
|
93
|
+
|
|
94
|
+
badgeBg: 'bg-white/85 dark:bg-sky-200/10',
|
|
95
|
+
badgeText: 'text-sky-700 dark:text-sky-100',
|
|
96
|
+
|
|
97
|
+
leadingSelectedBg: 'bg-sky-500/90 dark:bg-sky-500',
|
|
98
|
+
leadingSelectedBorder: 'border-sky-400/70 dark:border-sky-400/80'
|
|
99
|
+
},
|
|
100
|
+
neutral: {
|
|
101
|
+
selectedBorder: 'border-neutral-400/70 dark:border-neutral-500/60',
|
|
102
|
+
selectedBg: 'bg-neutral-100 dark:bg-neutral-900',
|
|
103
|
+
selectedText: 'text-neutral-900 dark:text-neutral-50',
|
|
104
|
+
|
|
105
|
+
badgeBg: 'bg-white/85 dark:bg-neutral-800',
|
|
106
|
+
badgeText: 'text-neutral-800 dark:text-neutral-100',
|
|
107
|
+
|
|
108
|
+
leadingSelectedBg: 'bg-neutral-700 dark:bg-neutral-700',
|
|
109
|
+
leadingSelectedBorder: 'border-neutral-500/70 dark:border-neutral-500/80'
|
|
110
|
+
}
|
|
111
|
+
} as const;
|
|
112
|
+
|
|
113
|
+
const accentClasses = $derived(accentMap[accent]);
|
|
114
|
+
</script>
|
|
115
|
+
|
|
116
|
+
<button
|
|
117
|
+
type="button"
|
|
118
|
+
{disabled}
|
|
119
|
+
onclick={() => onclick?.()}
|
|
120
|
+
class={[
|
|
121
|
+
'flex w-full items-center justify-between gap-3 rounded-lg border text-left transition-colors',
|
|
122
|
+
sizeClasses,
|
|
123
|
+
'focus-visible:ring-2 focus-visible:ring-purple-500/40 focus-visible:outline-none',
|
|
124
|
+
!disabled && 'cursor-pointer',
|
|
125
|
+
'disabled:cursor-not-allowed disabled:opacity-60',
|
|
126
|
+
|
|
127
|
+
selected
|
|
128
|
+
? [
|
|
129
|
+
accentClasses.selectedBorder,
|
|
130
|
+
accentClasses.selectedBg,
|
|
131
|
+
accentClasses.selectedText,
|
|
132
|
+
'shadow-sm',
|
|
133
|
+
'hover:brightness-[0.98] dark:hover:brightness-[1.05]'
|
|
134
|
+
]
|
|
135
|
+
: [
|
|
136
|
+
'border-neutral-200 bg-neutral-50 text-neutral-800',
|
|
137
|
+
'hover:border-neutral-300 hover:bg-neutral-100',
|
|
138
|
+
'dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100',
|
|
139
|
+
'dark:hover:border-neutral-600 dark:hover:bg-neutral-800'
|
|
140
|
+
]
|
|
141
|
+
]}
|
|
142
|
+
>
|
|
143
|
+
<div class="flex min-w-0 flex-1 items-center gap-3">
|
|
144
|
+
{#if showLeadingCircle}
|
|
145
|
+
<div
|
|
146
|
+
class={[
|
|
147
|
+
'flex shrink-0 items-center justify-center rounded-full border text-xs font-medium shadow-sm',
|
|
148
|
+
leadingSizeClasses,
|
|
149
|
+
selected
|
|
150
|
+
? [accentClasses.leadingSelectedBg, accentClasses.leadingSelectedBorder, 'text-white']
|
|
151
|
+
: 'border-neutral-300 bg-white text-neutral-500 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-300'
|
|
152
|
+
]}
|
|
153
|
+
>
|
|
154
|
+
{#if selected}
|
|
155
|
+
<Check class="h-3.5 w-3.5" />
|
|
156
|
+
{:else}
|
|
157
|
+
<Plus class="h-3.5 w-3.5" />
|
|
158
|
+
{/if}
|
|
159
|
+
</div>
|
|
160
|
+
{/if}
|
|
161
|
+
|
|
162
|
+
<div class="flex min-w-0 flex-col">
|
|
163
|
+
<span class={`truncate font-medium ${labelTextSize}`}>
|
|
164
|
+
{label}
|
|
165
|
+
</span>
|
|
166
|
+
|
|
167
|
+
{#if description}
|
|
168
|
+
<span
|
|
169
|
+
class={`mt-0.5 truncate ${descriptionTextSize} ${
|
|
170
|
+
selected
|
|
171
|
+
? 'text-neutral-600 dark:text-neutral-300'
|
|
172
|
+
: 'text-neutral-500 dark:text-neutral-400'
|
|
173
|
+
}`}
|
|
174
|
+
>
|
|
175
|
+
{description}
|
|
176
|
+
</span>
|
|
177
|
+
{/if}
|
|
178
|
+
|
|
179
|
+
{@render meta?.()}
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
|
|
183
|
+
<div class="flex shrink-0 items-center gap-2">
|
|
184
|
+
{#if selected && showSelectedBadge}
|
|
185
|
+
<span
|
|
186
|
+
class={[
|
|
187
|
+
'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium shadow-sm backdrop-blur',
|
|
188
|
+
accentClasses.badgeBg,
|
|
189
|
+
accentClasses.badgeText
|
|
190
|
+
]}
|
|
191
|
+
>
|
|
192
|
+
<Check class="h-3 w-3" />
|
|
193
|
+
<span>{i18n.t('common.selected')}</span>
|
|
194
|
+
</span>
|
|
195
|
+
{/if}
|
|
196
|
+
|
|
197
|
+
{@render right?.()}
|
|
198
|
+
|
|
199
|
+
{#if hasChildren && showChevronForChildren}
|
|
200
|
+
<div
|
|
201
|
+
class="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-900/5 text-neutral-400 dark:bg-neutral-50/5 dark:text-neutral-500"
|
|
202
|
+
>
|
|
203
|
+
<ChevronRight class="h-4 w-4" />
|
|
204
|
+
</div>
|
|
205
|
+
{/if}
|
|
206
|
+
</div>
|
|
207
|
+
</button>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
interface Props {
|
|
3
|
+
label: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
selected?: boolean;
|
|
6
|
+
hasChildren?: boolean;
|
|
7
|
+
size?: 'sm' | 'md';
|
|
8
|
+
accent?: 'purple' | 'indigo' | 'sky' | 'neutral';
|
|
9
|
+
showLeadingCircle?: boolean;
|
|
10
|
+
showSelectedBadge?: boolean;
|
|
11
|
+
showChevronForChildren?: boolean;
|
|
12
|
+
compact?: boolean;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
onclick?: () => void;
|
|
15
|
+
meta?: Snippet;
|
|
16
|
+
right?: Snippet;
|
|
17
|
+
}
|
|
18
|
+
declare const SelectTile: import("svelte").Component<Props, {}, "">;
|
|
19
|
+
type SelectTile = ReturnType<typeof SelectTile>;
|
|
20
|
+
export default SelectTile;
|