flo-bit.dev
your personal website on atproto - mirror
blento.app
Merge pull request #23 from flo-bit/section-settings
add settings to section card
+210
-4
+6
-1
src/lib/cards/SectionCard/EditingSectionCard.svelte
+6
-1
src/lib/cards/SectionCard/EditingSectionCard.svelte
···
1
1
<script lang="ts">
2
2
import type { Item } from '$lib/types';
3
+
import { textAlignClasses, textSizeClasses, verticalAlignClasses } from '.';
3
4
import type { ContentComponentProps } from '../types';
4
5
import PlainTextEditor from '../utils/PlainTextEditor.svelte';
5
6
···
7
8
</script>
8
9
9
10
<div
10
-
class="line-clamp-1 inline-flex h-full w-full items-center rounded-md p-1 px-2 text-2xl font-semibold"
11
+
class={["line-clamp-1 inline-flex h-full w-full rounded-md p-1 px-2 font-semibold",
12
+
textAlignClasses[item.cardData.textAlign as string],
13
+
verticalAlignClasses[item.cardData.verticalAlign ?? ('center' as string)],
14
+
textSizeClasses[(item.cardData.textSize ?? 1) as number]
15
+
]}
11
16
>
12
17
<PlainTextEditor bind:item key="text" class="line-clamp-1 w-full" />
13
18
</div>
+7
-1
src/lib/cards/SectionCard/SectionCard.svelte
+7
-1
src/lib/cards/SectionCard/SectionCard.svelte
···
1
1
<script lang="ts">
2
2
import { marked } from 'marked';
3
3
import type { ContentComponentProps } from '../types';
4
+
import { textAlignClasses, textSizeClasses, verticalAlignClasses } from '.';
4
5
5
6
let { item }: ContentComponentProps = $props();
6
7
···
10
11
</script>
11
12
12
13
<div
13
-
class="line-clamp-1 inline-flex h-full w-full items-center rounded-md p-1 px-2 text-2xl font-semibold"
14
+
class={[
15
+
'line-clamp-1 inline-flex h-full w-full rounded-md p-1 px-2 font-semibold',
16
+
textAlignClasses[item.cardData.textAlign as string],
17
+
verticalAlignClasses[item.cardData.verticalAlign ?? ('center' as string)],
18
+
textSizeClasses[(item.cardData.textSize ?? 1) as number]
19
+
]}
14
20
>
15
21
{item.cardData.text}
16
22
</div>
+175
src/lib/cards/SectionCard/SectionCardSettings.svelte
+175
src/lib/cards/SectionCard/SectionCardSettings.svelte
···
1
+
<script lang="ts">
2
+
import type { Item } from '$lib/types';
3
+
import { textSizeClasses } from '.';
4
+
import type { ContentComponentProps } from '../types';
5
+
import { ToggleGroup, ToggleGroupItem, Button } from '@foxui/core';
6
+
7
+
let { item = $bindable<Item>() }: ContentComponentProps = $props();
8
+
9
+
const classes = 'size-8 min-w-8 [&_svg]:size-3 cursor-pointer';
10
+
</script>
11
+
12
+
<div class="flex flex-col gap-2">
13
+
<ToggleGroup
14
+
type="single"
15
+
bind:value={
16
+
() => {
17
+
return item.cardData.verticalAlign ?? 'center';
18
+
},
19
+
(value) => {
20
+
if (!value) return;
21
+
item.cardData.verticalAlign = value;
22
+
}
23
+
}
24
+
>
25
+
<ToggleGroupItem size="sm" value="top" class={classes}
26
+
><svg
27
+
xmlns="http://www.w3.org/2000/svg"
28
+
viewBox="0 0 24 24"
29
+
fill="none"
30
+
stroke="currentColor"
31
+
stroke-width="2"
32
+
stroke-linecap="round"
33
+
stroke-linejoin="round"
34
+
><rect width="6" height="16" x="4" y="6" rx="2" /><rect
35
+
width="6"
36
+
height="9"
37
+
x="14"
38
+
y="6"
39
+
rx="2"
40
+
/><path d="M22 2H2" /></svg
41
+
>
42
+
</ToggleGroupItem>
43
+
<ToggleGroupItem size="sm" value="center" class={classes}
44
+
><svg
45
+
xmlns="http://www.w3.org/2000/svg"
46
+
viewBox="0 0 24 24"
47
+
fill="none"
48
+
stroke="currentColor"
49
+
stroke-width="2"
50
+
stroke-linecap="round"
51
+
stroke-linejoin="round"
52
+
><rect width="10" height="6" x="7" y="9" rx="2" /><path d="M22 20H2" /><path
53
+
d="M22 4H2"
54
+
/></svg
55
+
></ToggleGroupItem
56
+
>
57
+
<ToggleGroupItem size="sm" value="bottom" class={classes}
58
+
><svg
59
+
xmlns="http://www.w3.org/2000/svg"
60
+
viewBox="0 0 24 24"
61
+
fill="none"
62
+
stroke="currentColor"
63
+
stroke-width="2"
64
+
stroke-linecap="round"
65
+
stroke-linejoin="round"
66
+
><rect width="14" height="6" x="5" y="12" rx="2" /><rect
67
+
width="10"
68
+
height="6"
69
+
x="7"
70
+
y="2"
71
+
rx="2"
72
+
/><path d="M2 22h20" /></svg
73
+
></ToggleGroupItem
74
+
>
75
+
</ToggleGroup>
76
+
77
+
<ToggleGroup
78
+
type="single"
79
+
bind:value={
80
+
() => {
81
+
return item.cardData.textAlign ?? 'left';
82
+
},
83
+
(value) => {
84
+
if (!value) return;
85
+
item.cardData.textAlign = value;
86
+
}
87
+
}
88
+
>
89
+
<ToggleGroupItem size="sm" value="left" class={classes}
90
+
><svg
91
+
xmlns="http://www.w3.org/2000/svg"
92
+
viewBox="0 0 24 24"
93
+
fill="none"
94
+
stroke="currentColor"
95
+
stroke-width="2"
96
+
stroke-linecap="round"
97
+
stroke-linejoin="round"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg
98
+
></ToggleGroupItem
99
+
>
100
+
<ToggleGroupItem size="sm" value="center" class={classes}
101
+
><svg
102
+
xmlns="http://www.w3.org/2000/svg"
103
+
viewBox="0 0 24 24"
104
+
fill="none"
105
+
stroke="currentColor"
106
+
stroke-width="2"
107
+
stroke-linecap="round"
108
+
stroke-linejoin="round"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg
109
+
></ToggleGroupItem
110
+
>
111
+
<ToggleGroupItem size="sm" value="right" class={classes}
112
+
><svg
113
+
xmlns="http://www.w3.org/2000/svg"
114
+
viewBox="0 0 24 24"
115
+
fill="none"
116
+
stroke="currentColor"
117
+
stroke-width="2"
118
+
stroke-linecap="round"
119
+
stroke-linejoin="round"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg
120
+
></ToggleGroupItem
121
+
>
122
+
</ToggleGroup>
123
+
124
+
<div>
125
+
<Button
126
+
variant="ghost"
127
+
onclick={() => {
128
+
item.cardData.textSize = Math.max((item.cardData.textSize ?? 1) - 1, 0);
129
+
}}
130
+
disabled={(item.cardData.textSize ?? 1) < 1}
131
+
>
132
+
<svg
133
+
xmlns="http://www.w3.org/2000/svg"
134
+
width="24"
135
+
height="24"
136
+
viewBox="0 0 24 24"
137
+
fill="none"
138
+
stroke="currentColor"
139
+
stroke-width="2"
140
+
stroke-linecap="round"
141
+
stroke-linejoin="round"
142
+
class="lucide lucide-aarrow-down-icon lucide-a-arrow-down"
143
+
><path d="m14 12 4 4 4-4" /><path d="M18 16V7" /><path
144
+
d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
145
+
/><path d="M3.304 13h6.392" /></svg
146
+
>
147
+
</Button>
148
+
<Button
149
+
variant="ghost"
150
+
onclick={() => {
151
+
item.cardData.textSize = Math.min(
152
+
(item.cardData.textSize ?? 1) + 1,
153
+
textSizeClasses.length - 1
154
+
);
155
+
}}
156
+
disabled={(item.cardData.textSize ?? 1) >= textSizeClasses.length - 1}
157
+
>
158
+
<svg
159
+
xmlns="http://www.w3.org/2000/svg"
160
+
width="24"
161
+
height="24"
162
+
viewBox="0 0 24 24"
163
+
fill="none"
164
+
stroke="currentColor"
165
+
stroke-width="2"
166
+
stroke-linecap="round"
167
+
stroke-linejoin="round"
168
+
class="lucide lucide-aarrow-up-icon lucide-a-arrow-up"
169
+
><path d="m14 11 4-4 4 4" /><path d="M18 16V7" /><path
170
+
d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
171
+
/><path d="M3.304 13h6.392" /></svg
172
+
>
173
+
</Button>
174
+
</div>
175
+
</div>
+22
-2
src/lib/cards/SectionCard/index.ts
+22
-2
src/lib/cards/SectionCard/index.ts
···
2
2
import type { CardDefinition } from '../types';
3
3
import EditingSectionCard from './EditingSectionCard.svelte';
4
4
import SectionCard from './SectionCard.svelte';
5
+
import SectionCardSettings from './SectionCardSettings.svelte';
5
6
6
7
export const SectionCardDefinition = {
7
8
type: 'section',
···
10
11
createNew: (card) => {
11
12
card.cardType = 'section';
12
13
card.cardData = {
13
-
text: 'hello world'
14
+
text: 'hello world',
15
+
verticalAlign: 'bottom',
16
+
textSize: 1
14
17
};
15
18
16
19
card.h = 1;
···
22
25
23
26
defaultColor: 'transparent',
24
27
maxH: 1,
25
-
canResize: false
28
+
canResize: false,
29
+
settingsComponent: SectionCardSettings
26
30
} as CardDefinition & { type: 'section' };
31
+
32
+
33
+
34
+
export const textAlignClasses: Record<string, string> = {
35
+
left: '',
36
+
center: 'text-center justify-center',
37
+
right: 'text-end justify-end'
38
+
};
39
+
40
+
export const verticalAlignClasses: Record<string, string> = {
41
+
top: 'items-stretch',
42
+
center: 'items-center-safe',
43
+
bottom: 'items-end-safe'
44
+
};
45
+
46
+
export const textSizeClasses = ['text-lg', 'text-2xl', 'text-4xl', 'text-6xl'];