Skip to content

Commit 7283321

Browse files
shinokadashinokada
committed
docs: fix: list page
1 parent 614f42f commit 7283321

File tree

8 files changed

+49
-29
lines changed

8 files changed

+49
-29
lines changed

‎src/lib/typography/list/List.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
55
let {
66
children,
7-
tag = 'disc',
7+
tag = 'ul',
88
position = 'inside',
99
ctxclass = '',
1010
class: className,

‎src/lib/typography/list/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ const listVariants = tv({
88
base: '',
99
variants: {
1010
tag: {
11-
disc: 'list-disc',
12-
none: 'list-none',
13-
decimal: 'list-decimal'
11+
ul: 'list-disc',
12+
dl: 'list-none',
13+
ol: 'list-decimal'
1414
},
1515
position: {
1616
inside: 'list-inside',
@@ -19,7 +19,7 @@ const listVariants = tv({
1919
},
2020
defaultVariants: {
2121
position: 'inside',
22-
tag: 'disc'
22+
tag: 'ul'
2323
}
2424
// tag: {
2525
// ul: 'list-disc',

‎src/routes/typography/list/+page.svelte‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { List, Li, Heading, Span, DescriptionList, A } from '$lib';
2+
import { List, Li, Heading, Span, DescriptionList, A, Label, Radio } from '$lib';
33
import {
44
CheckCircleSolid,
55
CloseCircleOutline,
@@ -15,26 +15,44 @@
1515
import: 'default',
1616
eager: true
1717
});
18+
19+
const tags = ['ul', 'ol', 'dl'];
20+
let listTag: List['tag'] = $state('ul');
21+
const positions = ['inside', 'outside'];
22+
let listPosition: List['position'] = $state('inside');
1823
</script>
1924

2025
<H1>List</H1>
21-
2226
<H2>Setup</H2>
2327

2428
<HighlightCompo code={modules['./md/setup.md'] as string} />
2529

26-
<H2>Unordored list</H2>
30+
<H2>List position and tag</H2>
2731
<CodeWrapper>
2832
<Heading
2933
tag="h2"
30-
class="mb-2 text-lg text-lg font-semibold font-semibold text-gray-900 dark:text-white"
34+
class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
3135
>Password requirements</Heading
3236
>
33-
<List class="space-y-1 text-gray-500 dark:text-gray-400">
37+
<List tag={listTag} position={listPosition} class="space-y-1 text-gray-500 dark:text-gray-400">
3438
<Li>At least 10 characters (and up to 100 characters)</Li>
3539
<Li>At least one lowercase character</Li>
3640
<Li>Inclusion of at least one special character, e.g., ! @ # ?</Li>
3741
</List>
42+
43+
<div class="flex flex-wrap space-x-4 mt-4">
44+
<Label class="w-full mb-4 font-bold">Tag:</Label>
45+
{#each tags as tag}
46+
<Radio labelClass="w-24 my-1" name="list_tag" bind:group={listTag} value={tag}>{tag}</Radio>
47+
{/each}
48+
</div>
49+
<div class="flex flex-wrap space-x-4 mt-4">
50+
<Label class="w-full mb-4 font-bold">Position:</Label>
51+
{#each positions as position}
52+
<Radio labelClass="w-24 my-1" name="list_position" bind:group={listPosition} value={position}>{position}</Radio>
53+
{/each}
54+
</div>
55+
3856
</CodeWrapper>
3957

4058
<HighlightCompo code={modules['./md/unordered-list.md'] as string} />
@@ -43,7 +61,7 @@
4361
<CodeWrapper>
4462
<Heading
4563
tag="h2"
46-
class="mb-2 text-lg text-lg font-semibold font-semibold text-gray-900 dark:text-white"
64+
class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
4765
>Password requirements</Heading
4866
>
4967
<List class="space-y-1 text-gray-500 dark:text-gray-400">
@@ -73,7 +91,7 @@
7391
<List class="space-y-4 text-gray-500 dark:text-gray-400">
7492
<Li>
7593
List item one
76-
<List tag="decimal" ctxclass="mt-2 space-y-1 ps-5">
94+
<List tag="ol" ctxclass="mt-2 space-y-1 ps-5">
7795
<Li>You might feel like you are being really "organized" o</Li>
7896
<Li
7997
>Nested navigation in UIs is a bad idea too, keep things as flat as
@@ -85,15 +103,15 @@
85103
</Li>
86104
<Li>
87105
List item two
88-
<List tag="decimal" ctxclass="mt-2 space-y-1 ps-5">
106+
<List tag="ol" ctxclass="mt-2 space-y-1 ps-5">
89107
<Li>I'm not sure if we'll bother styling more than two levels deep.</Li>
90108
<Li>Two is already too much, three is guaranteed to be a bad idea.</Li>
91109
<Li>If you nest four levels deep you belong in prison.</Li>
92110
</List>
93111
</Li>
94112
<Li>
95113
List item three
96-
<List tag="decimal" ctxclass="mt-2 space-y-1 ps-5">
114+
<List tag="ol" ctxclass="mt-2 space-y-1 ps-5">
97115
<Li>Again please don't nest lists if you want</Li>
98116
<Li>Nobody wants to look at this.</Li>
99117
<Li>I'm upset that we even have to bother styling this.</Li>
@@ -109,7 +127,7 @@
109127
<CodeWrapper>
110128
<Heading
111129
tag="h2"
112-
class="mb-2 text-lg text-lg font-semibold font-semibold text-gray-900 dark:text-white"
130+
class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
113131
>Password requirements</Heading
114132
>
115133
<List class="space-y-1 text-gray-500 dark:text-gray-400">
@@ -125,10 +143,10 @@
125143
<CodeWrapper>
126144
<Heading
127145
tag="h2"
128-
class="mb-2 text-lg text-lg font-semibold font-semibold text-gray-900 dark:text-white"
146+
class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
129147
>Top students:</Heading
130148
>
131-
<List tag="decimal" class="space-y-1 text-gray-500 dark:text-gray-400">
149+
<List tag="ol" class="space-y-1 text-gray-500 dark:text-gray-400">
132150
<Li><Span>Bonnie Green</Span> with <Span>70</Span> points</Li>
133151
<Li><Span>Jese Leos</Span> with <Span>63</Span> points</Li>
134152
<Li><Span>Leslie Livingston</Span> with <Span>57</Span> points</Li>
@@ -140,7 +158,7 @@
140158
<H2>Description list</H2>
141159
<CodeWrapper>
142160
<List
143-
tag="none"
161+
tag="dl"
144162
class="divide-y divide-gray-200 text-gray-900 dark:divide-gray-700 dark:text-white"
145163
>
146164
<div class="flex flex-col pb-3">
@@ -166,7 +184,7 @@
166184

167185
<CodeWrapper>
168186
<List
169-
tag="disc"
187+
tag="ul"
170188
class="mb-8 space-y-4 text-gray-500 dark:text-gray-400"
171189
>
172190
<Li icon class="gap-3">
@@ -197,7 +215,7 @@
197215
<H2>Advanced layout</H2>
198216
<CodeWrapper>
199217
<List
200-
tag="none"
218+
tag="dl"
201219
class="max-w-md divide-y divide-gray-200 dark:divide-gray-700"
202220
>
203221
<Li class="pb-3 sm:pb-4">
@@ -328,7 +346,7 @@
328346
<H2>Horizontal list</H2>
329347
<CodeWrapper>
330348
<List
331-
tag="disc"
349+
tag="ul"
332350
class="mb-6 flex flex-wrap items-center justify-center"
333351
>
334352
<Li>

‎src/routes/typography/list/md/horizontal-list.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<List
2-
tag="disc"
2+
tag="ul"
33
class="mb-6 flex flex-wrap items-center justify-center"
44
>
55
<Li>

‎src/routes/typography/list/md/list-with-icon.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</script>
55

66
<List
7-
tag="disc"
7+
tag="ul"
88
class="mb-8 space-y-4 text-gray-500 dark:text-gray-400"
99
>
1010
<Li icon class="gap-3">

‎src/routes/typography/list/md/nested.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<List class="space-y-4 text-gray-500 dark:text-gray-400">
22
<Li>
33
List item one
4-
<List tag="decimal" ctxclass="mt-2 space-y-1 ps-5">
4+
<List tag="ol" ctxclass="mt-2 space-y-1 ps-5">
55
<Li>You might feel like you are being really "organized" o</Li>
66
<Li
77
>Nested navigation in UIs is a bad idea too, keep things as flat as
@@ -13,15 +13,15 @@
1313
</Li>
1414
<Li>
1515
List item two
16-
<List tag="decimal" ctxclass="mt-2 space-y-1 ps-5">
16+
<List tag="ol" ctxclass="mt-2 space-y-1 ps-5">
1717
<Li>I'm not sure if we'll bother styling more than two levels deep.</Li>
1818
<Li>Two is already too much, three is guaranteed to be a bad idea.</Li>
1919
<Li>If you nest four levels deep you belong in prison.</Li>
2020
</List>
2121
</Li>
2222
<Li>
2323
List item three
24-
<List tag="decimal" ctxclass="mt-2 space-y-1 ps-5">
24+
<List tag="ol" ctxclass="mt-2 space-y-1 ps-5">
2525
<Li>Again please don't nest lists if you want</Li>
2626
<Li>Nobody wants to look at this.</Li>
2727
<Li>I'm upset that we even have to bother styling this.</Li>

‎src/routes/typography/list/md/ordered-list.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
class="mb-2 text-lg text-lg font-semibold font-semibold text-gray-900 dark:text-white"
44
>Top students:</Heading
55
>
6-
<List tag="decimal" class="space-y-1 text-gray-500 dark:text-gray-400">
6+
<List tag="ol" class="space-y-1 text-gray-500 dark:text-gray-400">
77
<Li><Span>Bonnie Green</Span> with <Span>70</Span> points</Li>
88
<Li><Span>Jese Leos</Span> with <Span>63</Span> points</Li>
99
<Li><Span>Leslie Livingston</Span> with <Span>57</Span> points</Li>

‎src/routes/typography/list/md/unordered-list.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
// tag: 'ul', 'ol', 'dl', default: ul
2+
// position: 'inside', 'outside', default: inside
13
<Heading
24
tag="h2"
3-
class="mb-2 text-lg text-lg font-semibold font-semibold text-gray-900 dark:text-white"
5+
class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
46
>Password requirements</Heading
57
>
6-
<List class="space-y-1 text-gray-500 dark:text-gray-400">
8+
<List tag="ol" position="outside" class="space-y-1 text-gray-500 dark:text-gray-400">
79
<Li>At least 10 characters (and up to 100 characters)</Li>
810
<Li>At least one lowercase character</Li>
911
<Li>Inclusion of at least one special character, e.g., ! @ # ?</Li>

0 commit comments

Comments
 (0)