forked from
flo-bit.dev/blento
your personal website on atproto - mirror
add colors to cards
+422
-8
+1
package.json
+1
package.json
+23
pnpm-lock.yaml
+23
pnpm-lock.yaml
···
20
20
'@atproto/common-web':
21
21
specifier: ^0.4.2
22
22
version: 0.4.2
23
+
'@foxui/colors':
24
+
specifier: ^0.4.7
25
+
version: 0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)
23
26
'@foxui/core':
24
27
specifier: ^0.4.7
25
28
version: 0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)
···
601
604
'@floating-ui/utils@0.2.10':
602
605
resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==, tarball: https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz}
603
606
607
+
'@foxui/colors@0.4.7':
608
+
resolution: {integrity: sha512-P40GBuwerikysWctVL1KSUrjxzlAf5j1jZ0z6+pzkWdfTv8wGxXlJcvJCkA1MkTeatLkyBrHLrIF17u2iRrMkw==, tarball: https://registry.npmjs.org/@foxui/colors/-/colors-0.4.7.tgz}
609
+
peerDependencies:
610
+
svelte: '>=5'
611
+
tailwindcss: '>=3'
612
+
604
613
'@foxui/core@0.4.7':
605
614
resolution: {integrity: sha512-/J31Zra1Jlfn2HeLqKj7q2LmZoDc5pPEZU1SMrLYpJuv3QN+rl9qzAal0gwjGbhgNA/jAk7P2jqTgF4adngMkw==, tarball: https://registry.npmjs.org/@foxui/core/-/core-0.4.7.tgz}
606
615
peerDependencies:
···
1062
1071
resolution: {integrity: sha512-FE1stRoqdHSb7RxesMfCXE8icwI1W6zGE/512ae3ZDrpkQYTTYeSyUJPRCjZd8CwVAhpDUbi1YR8pcZioFJQ/w==, tarball: https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.5.tgz}
1063
1072
peerDependencies:
1064
1073
vite: ^5.2.0 || ^6
1074
+
1075
+
'@texel/color@1.1.11':
1076
+
resolution: {integrity: sha512-/3kKgfBqzrRfLl4RsEccx+Yfj1kVL6Bh6DejVWZ+DPg/jJdcfdYZ5fpD1nXFwWd8OQNATjz+WqsfQfUynSsgRg==, tarball: https://registry.npmjs.org/@texel/color/-/color-1.1.11.tgz}
1065
1077
1066
1078
'@tiptap/core@2.12.0':
1067
1079
resolution: {integrity: sha512-3qX8oGVKFFZzQ0vit+ZolR6AJIATBzmEmjAA0llFhWk4vf3v64p1YcXcJsOBsr5scizJu5L6RYWEFatFwqckRg==, tarball: https://registry.npmjs.org/@tiptap/core/-/core-2.12.0.tgz}
···
3075
3087
3076
3088
'@floating-ui/utils@0.2.10': {}
3077
3089
3090
+
'@foxui/colors@0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)':
3091
+
dependencies:
3092
+
'@foxui/core': 0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)
3093
+
'@texel/color': 1.1.11
3094
+
'@use-gesture/vanilla': 10.3.1
3095
+
bits-ui: 1.8.0(svelte@5.45.8)
3096
+
svelte: 5.45.8
3097
+
tailwindcss: 4.1.5
3098
+
3078
3099
'@foxui/core@0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)':
3079
3100
dependencies:
3080
3101
'@number-flow/svelte': 0.3.9(svelte@5.45.8)
···
3485
3506
'@tailwindcss/oxide': 4.1.5
3486
3507
tailwindcss: 4.1.5
3487
3508
vite: 6.3.5(jiti@2.4.2)(lightningcss@1.29.2)
3509
+
3510
+
'@texel/color@1.1.11': {}
3488
3511
3489
3512
'@tiptap/core@2.12.0(@tiptap/pm@2.12.0)':
3490
3513
dependencies:
+307
src/app.css
+307
src/app.css
···
59
59
--base-900: var(--color-neutral-900);
60
60
--base-950: var(--color-neutral-950);
61
61
}
62
+
63
+
.red {
64
+
--accent-50: var(--color-red-50);
65
+
--accent-100: var(--color-red-100);
66
+
--accent-200: var(--color-red-200);
67
+
--accent-300: var(--color-red-300);
68
+
--accent-400: var(--color-red-400);
69
+
--accent-500: var(--color-red-500);
70
+
--accent-600: var(--color-red-600);
71
+
--accent-700: var(--color-red-700);
72
+
--accent-800: var(--color-red-800);
73
+
--accent-900: var(--color-red-900);
74
+
--accent-950: var(--color-red-950);
75
+
}
76
+
77
+
.orange {
78
+
--accent-50: var(--color-orange-50);
79
+
--accent-100: var(--color-orange-100);
80
+
--accent-200: var(--color-orange-200);
81
+
--accent-300: var(--color-orange-300);
82
+
--accent-400: var(--color-orange-400);
83
+
--accent-500: var(--color-orange-500);
84
+
--accent-600: var(--color-orange-600);
85
+
--accent-700: var(--color-orange-700);
86
+
--accent-800: var(--color-orange-800);
87
+
--accent-900: var(--color-orange-900);
88
+
--accent-950: var(--color-orange-950);
89
+
}
90
+
91
+
.amber {
92
+
--accent-50: var(--color-amber-50);
93
+
--accent-100: var(--color-amber-100);
94
+
--accent-200: var(--color-amber-200);
95
+
--accent-300: var(--color-amber-300);
96
+
--accent-400: var(--color-amber-400);
97
+
--accent-500: var(--color-amber-500);
98
+
--accent-600: var(--color-amber-600);
99
+
--accent-700: var(--color-amber-700);
100
+
--accent-800: var(--color-amber-800);
101
+
--accent-900: var(--color-amber-900);
102
+
--accent-950: var(--color-amber-950);
103
+
}
104
+
105
+
.yellow {
106
+
--accent-50: var(--color-yellow-50);
107
+
--accent-100: var(--color-yellow-100);
108
+
--accent-200: var(--color-yellow-200);
109
+
--accent-300: var(--color-yellow-300);
110
+
--accent-400: var(--color-yellow-400);
111
+
--accent-500: var(--color-yellow-500);
112
+
--accent-600: var(--color-yellow-600);
113
+
--accent-700: var(--color-yellow-700);
114
+
--accent-800: var(--color-yellow-800);
115
+
--accent-900: var(--color-yellow-900);
116
+
--accent-950: var(--color-yellow-950);
117
+
}
118
+
119
+
.lime {
120
+
--accent-50: var(--color-lime-50);
121
+
--accent-100: var(--color-lime-100);
122
+
--accent-200: var(--color-lime-200);
123
+
--accent-300: var(--color-lime-300);
124
+
--accent-400: var(--color-lime-400);
125
+
--accent-500: var(--color-lime-500);
126
+
--accent-600: var(--color-lime-600);
127
+
--accent-700: var(--color-lime-700);
128
+
--accent-800: var(--color-lime-800);
129
+
--accent-900: var(--color-lime-900);
130
+
--accent-950: var(--color-lime-950);
131
+
}
132
+
133
+
.green {
134
+
--accent-50: var(--color-green-50);
135
+
--accent-100: var(--color-green-100);
136
+
--accent-200: var(--color-green-200);
137
+
--accent-300: var(--color-green-300);
138
+
--accent-400: var(--color-green-400);
139
+
--accent-500: var(--color-green-500);
140
+
--accent-600: var(--color-green-600);
141
+
--accent-700: var(--color-green-700);
142
+
--accent-800: var(--color-green-800);
143
+
--accent-900: var(--color-green-900);
144
+
--accent-950: var(--color-green-950);
145
+
}
146
+
147
+
.emerald {
148
+
--accent-50: var(--color-emerald-50);
149
+
--accent-100: var(--color-emerald-100);
150
+
--accent-200: var(--color-emerald-200);
151
+
--accent-300: var(--color-emerald-300);
152
+
--accent-400: var(--color-emerald-400);
153
+
--accent-500: var(--color-emerald-500);
154
+
--accent-600: var(--color-emerald-600);
155
+
--accent-700: var(--color-emerald-700);
156
+
--accent-800: var(--color-emerald-800);
157
+
--accent-900: var(--color-emerald-900);
158
+
--accent-950: var(--color-emerald-950);
159
+
}
160
+
161
+
.teal {
162
+
--accent-50: var(--color-teal-50);
163
+
--accent-100: var(--color-teal-100);
164
+
--accent-200: var(--color-teal-200);
165
+
--accent-300: var(--color-teal-300);
166
+
--accent-400: var(--color-teal-400);
167
+
--accent-500: var(--color-teal-500);
168
+
--accent-600: var(--color-teal-600);
169
+
--accent-700: var(--color-teal-700);
170
+
--accent-800: var(--color-teal-800);
171
+
--accent-900: var(--color-teal-900);
172
+
--accent-950: var(--color-teal-950);
173
+
}
174
+
175
+
.cyan {
176
+
--accent-50: var(--color-cyan-50);
177
+
--accent-100: var(--color-cyan-100);
178
+
--accent-200: var(--color-cyan-200);
179
+
--accent-300: var(--color-cyan-300);
180
+
--accent-400: var(--color-cyan-400);
181
+
--accent-500: var(--color-cyan-500);
182
+
--accent-600: var(--color-cyan-600);
183
+
--accent-700: var(--color-cyan-700);
184
+
--accent-800: var(--color-cyan-800);
185
+
--accent-900: var(--color-cyan-900);
186
+
--accent-950: var(--color-cyan-950);
187
+
}
188
+
189
+
.sky {
190
+
--accent-50: var(--color-sky-50);
191
+
--accent-100: var(--color-sky-100);
192
+
--accent-200: var(--color-sky-200);
193
+
--accent-300: var(--color-sky-300);
194
+
--accent-400: var(--color-sky-400);
195
+
--accent-500: var(--color-sky-500);
196
+
--accent-600: var(--color-sky-600);
197
+
--accent-700: var(--color-sky-700);
198
+
--accent-800: var(--color-sky-800);
199
+
--accent-900: var(--color-sky-900);
200
+
--accent-950: var(--color-sky-950);
201
+
}
202
+
.blue {
203
+
--accent-50: var(--color-blue-50);
204
+
--accent-100: var(--color-blue-100);
205
+
--accent-200: var(--color-blue-200);
206
+
--accent-300: var(--color-blue-300);
207
+
--accent-400: var(--color-blue-400);
208
+
--accent-500: var(--color-blue-500);
209
+
--accent-600: var(--color-blue-600);
210
+
--accent-700: var(--color-blue-700);
211
+
--accent-800: var(--color-blue-800);
212
+
--accent-900: var(--color-blue-900);
213
+
--accent-950: var(--color-blue-950);
214
+
}
215
+
216
+
.indigo {
217
+
--accent-50: var(--color-indigo-50);
218
+
--accent-100: var(--color-indigo-100);
219
+
--accent-200: var(--color-indigo-200);
220
+
--accent-300: var(--color-indigo-300);
221
+
--accent-400: var(--color-indigo-400);
222
+
--accent-500: var(--color-indigo-500);
223
+
--accent-600: var(--color-indigo-600);
224
+
--accent-700: var(--color-indigo-700);
225
+
--accent-800: var(--color-indigo-800);
226
+
--accent-900: var(--color-indigo-900);
227
+
--accent-950: var(--color-indigo-950);
228
+
}
229
+
230
+
.violet {
231
+
--accent-50: var(--color-violet-50);
232
+
--accent-100: var(--color-violet-100);
233
+
--accent-200: var(--color-violet-200);
234
+
--accent-300: var(--color-violet-300);
235
+
--accent-400: var(--color-violet-400);
236
+
--accent-500: var(--color-violet-500);
237
+
--accent-600: var(--color-violet-600);
238
+
--accent-700: var(--color-violet-700);
239
+
--accent-800: var(--color-violet-800);
240
+
--accent-900: var(--color-violet-900);
241
+
--accent-950: var(--color-violet-950);
242
+
}
243
+
244
+
.purple {
245
+
--accent-50: var(--color-purple-50);
246
+
--accent-100: var(--color-purple-100);
247
+
--accent-200: var(--color-purple-200);
248
+
--accent-300: var(--color-purple-300);
249
+
--accent-400: var(--color-purple-400);
250
+
--accent-500: var(--color-purple-500);
251
+
--accent-600: var(--color-purple-600);
252
+
--accent-700: var(--color-purple-700);
253
+
--accent-800: var(--color-purple-800);
254
+
--accent-900: var(--color-purple-900);
255
+
--accent-950: var(--color-purple-950);
256
+
}
257
+
258
+
.fuchsia {
259
+
--accent-50: var(--color-fuchsia-50);
260
+
--accent-100: var(--color-fuchsia-100);
261
+
--accent-200: var(--color-fuchsia-200);
262
+
--accent-300: var(--color-fuchsia-300);
263
+
--accent-400: var(--color-fuchsia-400);
264
+
--accent-500: var(--color-fuchsia-500);
265
+
--accent-600: var(--color-fuchsia-600);
266
+
--accent-700: var(--color-fuchsia-700);
267
+
--accent-800: var(--color-fuchsia-800);
268
+
--accent-900: var(--color-fuchsia-900);
269
+
--accent-950: var(--color-fuchsia-950);
270
+
}
271
+
272
+
.pink {
273
+
--accent-50: var(--color-pink-50);
274
+
--accent-100: var(--color-pink-100);
275
+
--accent-200: var(--color-pink-200);
276
+
--accent-300: var(--color-pink-300);
277
+
--accent-400: var(--color-pink-400);
278
+
--accent-500: var(--color-pink-500);
279
+
--accent-600: var(--color-pink-600);
280
+
--accent-700: var(--color-pink-700);
281
+
--accent-800: var(--color-pink-800);
282
+
--accent-900: var(--color-pink-900);
283
+
--accent-950: var(--color-pink-950);
284
+
}
285
+
286
+
.rose {
287
+
--accent-50: var(--color-rose-50);
288
+
--accent-100: var(--color-rose-100);
289
+
--accent-200: var(--color-rose-200);
290
+
--accent-300: var(--color-rose-300);
291
+
--accent-400: var(--color-rose-400);
292
+
--accent-500: var(--color-rose-500);
293
+
--accent-600: var(--color-rose-600);
294
+
--accent-700: var(--color-rose-700);
295
+
--accent-800: var(--color-rose-800);
296
+
--accent-900: var(--color-rose-900);
297
+
--accent-950: var(--color-rose-950);
298
+
}
299
+
300
+
.gray {
301
+
--base-50: var(--color-gray-50);
302
+
--base-100: var(--color-gray-100);
303
+
--base-200: var(--color-gray-200);
304
+
--base-300: var(--color-gray-300);
305
+
--base-400: var(--color-gray-400);
306
+
--base-500: var(--color-gray-500);
307
+
--base-600: var(--color-gray-600);
308
+
--base-700: var(--color-gray-700);
309
+
--base-800: var(--color-gray-800);
310
+
--base-900: var(--color-gray-900);
311
+
--base-950: var(--color-gray-950);
312
+
}
313
+
314
+
.zinc {
315
+
--base-50: var(--color-zinc-50);
316
+
--base-100: var(--color-zinc-100);
317
+
--base-200: var(--color-zinc-200);
318
+
--base-300: var(--color-zinc-300);
319
+
--base-400: var(--color-zinc-400);
320
+
--base-500: var(--color-zinc-500);
321
+
--base-600: var(--color-zinc-600);
322
+
--base-700: var(--color-zinc-700);
323
+
--base-800: var(--color-zinc-800);
324
+
--base-900: var(--color-zinc-900);
325
+
--base-950: var(--color-zinc-950);
326
+
}
327
+
328
+
.neutral {
329
+
--base-50: var(--color-neutral-50);
330
+
--base-100: var(--color-neutral-100);
331
+
--base-200: var(--color-neutral-200);
332
+
--base-300: var(--color-neutral-300);
333
+
--base-400: var(--color-neutral-400);
334
+
--base-500: var(--color-neutral-500);
335
+
--base-600: var(--color-neutral-600);
336
+
--base-700: var(--color-neutral-700);
337
+
--base-800: var(--color-neutral-800);
338
+
--base-900: var(--color-neutral-900);
339
+
--base-950: var(--color-neutral-950);
340
+
}
341
+
342
+
.stone {
343
+
--base-50: var(--color-stone-50);
344
+
--base-100: var(--color-stone-100);
345
+
--base-200: var(--color-stone-200);
346
+
--base-300: var(--color-stone-300);
347
+
--base-400: var(--color-stone-400);
348
+
--base-500: var(--color-stone-500);
349
+
--base-600: var(--color-stone-600);
350
+
--base-700: var(--color-stone-700);
351
+
--base-800: var(--color-stone-800);
352
+
--base-900: var(--color-stone-900);
353
+
--base-950: var(--color-stone-950);
354
+
}
355
+
356
+
.slate {
357
+
--base-50: var(--color-slate-50);
358
+
--base-100: var(--color-slate-100);
359
+
--base-200: var(--color-slate-200);
360
+
--base-300: var(--color-slate-300);
361
+
--base-400: var(--color-slate-400);
362
+
--base-500: var(--color-slate-500);
363
+
--base-600: var(--color-slate-600);
364
+
--base-700: var(--color-slate-700);
365
+
--base-800: var(--color-slate-800);
366
+
--base-900: var(--color-slate-900);
367
+
--base-950: var(--color-slate-950);
368
+
}
62
369
}
+9
-1
src/lib/cards/BaseCard/BaseCard.svelte
+9
-1
src/lib/cards/BaseCard/BaseCard.svelte
···
5
5
import type { Snippet } from 'svelte';
6
6
import type { HTMLAttributes } from 'svelte/elements';
7
7
8
+
const colors = {
9
+
'base': 'border-base-200 bg-base-50 dark:border-base-800 dark:bg-base-900 border',
10
+
'accent': 'border-accent-200 bg-accent-50 dark:border-accent-900/50 dark:bg-accent-950/50 border',
11
+
'transparent': ''
12
+
} as Record<string, string>;
13
+
8
14
export type BaseCardProps = {
9
15
item: Item;
10
16
controls?: Snippet<[]>;
···
27
33
bind:this={ref}
28
34
draggable={isEditing}
29
35
class={[
30
-
'card border-base-200 bg-base-50 group dark:border-base-800 dark:bg-base-900 focus-within:outline-accent-500 absolute z-0 rounded-2xl border outline-offset-2 focus-within:outline-2'
36
+
'card group focus-within:outline-accent-500 absolute z-0 rounded-2xl outline-offset-2 focus-within:outline-2',
37
+
item.color ? colors[item.color] ?? colors.accent : colors.base,
38
+
item.color !== 'accent' && item.color !== 'base' && item.color !== 'transparent' ? item.color : ''
31
39
]}
32
40
style={`
33
41
--mx: ${item.mobileX};
+78
-6
src/lib/cards/BaseCard/BaseEditingCard.svelte
+78
-6
src/lib/cards/BaseCard/BaseEditingCard.svelte
···
1
1
<script lang="ts">
2
2
import type { WithElementRef } from 'bits-ui';
3
3
import type { HTMLAttributes } from 'svelte/elements';
4
-
import Card from './BaseCard.svelte';
4
+
import BaseCard from './BaseCard.svelte';
5
5
import type { Item } from '$lib/types';
6
-
import { Button } from '@foxui/core';
6
+
import { Button, Popover } from '@foxui/core';
7
7
import { getCanEdit } from '$lib/helper';
8
+
import { ColorSelect } from '@foxui/colors';
9
+
10
+
let colorsChoices = [
11
+
{ class: 'text-base-500', label: 'base' },
12
+
{ class: 'text-accent-500', label: 'accent' },
13
+
{ class: 'text-base-300 dark:text-base-700', label: 'transparent' },
14
+
{ class: 'text-red-500', label: 'red' },
15
+
{ class: 'text-orange-500', label: 'orange' },
16
+
{ class: 'text-amber-500', label: 'amber' },
17
+
{ class: 'text-yellow-500', label: 'yellow' },
18
+
{ class: 'text-lime-500', label: 'lime' },
19
+
{ class: 'text-green-500', label: 'green' },
20
+
{ class: 'text-emerald-500', label: 'emerald' },
21
+
{ class: 'text-teal-500', label: 'teal' },
22
+
{ class: 'text-cyan-500', label: 'cyan' },
23
+
{ class: 'text-sky-500', label: 'sky' },
24
+
{ class: 'text-blue-500', label: 'blue' },
25
+
{ class: 'text-indigo-500', label: 'indigo' },
26
+
{ class: 'text-violet-500', label: 'violet' },
27
+
{ class: 'text-purple-500', label: 'purple' },
28
+
{ class: 'text-fuchsia-500', label: 'fuchsia' },
29
+
{ class: 'text-pink-500', label: 'pink' },
30
+
{ class: 'text-rose-500', label: 'rose' }
31
+
];
8
32
9
33
export type BaseEditingCardProps = {
10
34
item: Item;
···
22
46
ondelete,
23
47
...rest
24
48
}: BaseEditingCardProps = $props();
49
+
50
+
let selectedColor = $derived(
51
+
!item.color ? colorsChoices[0] : colorsChoices.find((c) => item.color === c.label)
52
+
);
25
53
26
54
let canEdit = getCanEdit();
55
+
56
+
let colorPopoverOpen = $state(false);
27
57
</script>
28
58
29
-
<Card {item} {...rest} isEditing={true} bind:ref>
59
+
<BaseCard {item} {...rest} isEditing={true} bind:ref>
30
60
{@render children?.()}
31
61
32
62
{#snippet controls()}
···
58
88
</Button>
59
89
60
90
<div
61
-
class="absolute -bottom-7 z-50 hidden w-full items-center justify-center text-xs group-focus-within:inline-flex group-hover:inline-flex"
91
+
class={[
92
+
'absolute -bottom-7 z-50 w-full items-center justify-center text-xs group-focus-within:inline-flex group-hover:inline-flex',
93
+
colorPopoverOpen ? 'inline-flex' : 'hidden'
94
+
]}
62
95
>
63
96
<div
64
-
class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 inline-flex gap-0.5 rounded-2xl border p-1 px-2 shadow-lg"
97
+
class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 inline-flex items-center gap-0.5 rounded-2xl border p-1 px-2 shadow-lg"
65
98
>
99
+
<Popover bind:open={colorPopoverOpen}>
100
+
{#snippet child({ props })}
101
+
<button
102
+
{...props}
103
+
class={[
104
+
'm-2 size-4 cursor-pointer rounded-full',
105
+
!item.color || item.color === 'base' || item.color === 'transparent'
106
+
? 'text-base-800 dark:text-base-200'
107
+
: 'text-accent-500'
108
+
]}
109
+
>
110
+
<svg
111
+
xmlns="http://www.w3.org/2000/svg"
112
+
viewBox="0 0 24 24"
113
+
fill="currentColor"
114
+
class="size-4"
115
+
>
116
+
<path
117
+
fill-rule="evenodd"
118
+
d="M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.502-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.123 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z"
119
+
clip-rule="evenodd"
120
+
/>
121
+
</svg>
122
+
</button>
123
+
{/snippet}
124
+
<ColorSelect
125
+
selected={selectedColor}
126
+
colors={colorsChoices}
127
+
onselected={(color, previous) => {
128
+
if (typeof previous === 'string' || typeof color === 'string') {
129
+
return;
130
+
}
131
+
132
+
item.color = color.label;
133
+
}}
134
+
class="w-64"
135
+
/>
136
+
</Popover>
137
+
66
138
<button
67
139
onclick={() => {
68
140
onsetsize?.(1, 1);
···
138
210
</div>
139
211
{/if}
140
212
{/snippet}
141
-
</Card>
213
+
</BaseCard>
+2
-1
src/lib/helper.ts
+2
-1
src/lib/helper.ts