Skip to content

Commit 482fa2a

Browse files
shinokadashinokada
committed
docs: list-group page
1 parent 43403ad commit 482fa2a

File tree

6 files changed

+121
-77
lines changed

6 files changed

+121
-77
lines changed

‎src/routes/components/list-group/+page.svelte‎

Lines changed: 43 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,67 @@
11
<script lang="ts">
2-
import { Listgroup } from '$lib';
3-
import { AdjustmentsHorizontalSolid, DownloadSolid, MessagesSolid, UserCircleSolid } from 'flowbite-svelte-icons';
4-
import type { ListGroupItemType } from '$lib/types';
5-
import HighlightCompo from '../../utils/HighlightCompo.svelte';
2+
import { type Component } from 'svelte';
3+
import { Label, Radio, uiHelpers } from '$lib';
4+
import DynamicCodeBlockHighlight from '../../utils/DynamicCodeBlockHighlight.svelte';
65
import CodeWrapper from '../../utils/CodeWrapper.svelte';
76
import H1 from '../../utils/H1.svelte';
87
import H2 from '../../utils/H2.svelte';
8+
import { isSvelteOverflow, getExampleFileName } from '../../utils/helpers';
99
// for Props table
1010
import CompoAttributesViewer from '../../utils/CompoAttributesViewer.svelte';
1111
const dirName = 'list-group';
12-
const modules = import.meta.glob('./md/*.md', {
12+
13+
// for examples section that dynamically changes the svelte component and markdown content
14+
import * as ExampleComponents from './examples';
15+
const exampleModules = import.meta.glob('./examples/*.svelte', {
1316
query: '?raw',
1417
import: 'default',
1518
eager: true
1619
});
17-
let simpleList = ['Profile', 'Settings', 'Messages', 'Download'];
18-
let links: ListGroupItemType[] = [
19-
{ name: 'Avatar', href: '/components/avatar' },
20-
{ name: 'List group', href: '/components/list-group', current: true },
21-
{ name: 'Banner', href: '/components/banner' },
22-
{ name: 'Breadcrumbs', href: '/components/breadcrumb', target: '_blank' }
23-
];
24-
let buttons = [
25-
{ name: 'Profile', mycustomfield: 'data1', current: true },
26-
{ name: 'Settings', mycustomfield: 'data2' },
27-
{ name: 'Messages', mycustomfield: 'data3' },
28-
{
29-
name: 'Download',
30-
mycustomfield: 'data4',
31-
disabled: true,
32-
attrs: { type: 'submit' }
33-
}
34-
];
3520
36-
let iconList = [
37-
{ name: 'Profile', Icon: UserCircleSolid, mycustomfield: 'data1' },
38-
{
39-
name: 'Settings',
40-
Icon: AdjustmentsHorizontalSolid,
41-
mycustomfield: 'data2'
42-
},
43-
{ name: 'Messages', Icon: MessagesSolid, mycustomfield: 'data3' },
44-
{ name: 'Download', Icon: DownloadSolid, mycustomfield: 'data4' }
21+
const exampleArr = [
22+
{ name: 'Default', component: ExampleComponents.Default },
23+
{ name: 'With links', component: ExampleComponents.WithLinks },
24+
{ name: 'With buttons', component: ExampleComponents.WithButtons },
25+
{ name: 'With icons', component: ExampleComponents.WithIcons }
4526
];
46-
const handleClick = (e?: MouseEvent) => {
47-
if (e?.target instanceof HTMLElement) {
48-
alert('mycustomfield: ' + e.target.attributes.getNamedItem('mycustomfield')?.value);
49-
} else {
50-
console.warn('Unexpected event target type. Cannot access attributes.');
51-
}
52-
};
53-
const handleClick2 = (e?: MouseEvent) => {
54-
if (e?.target instanceof HTMLElement) {
55-
console.log(e.target.attributes.getNamedItem('mycustomfield')?.value);
56-
} else {
57-
console.warn('Unexpected event target type. Cannot access attributes.');
58-
}
27+
let selectedExample = $state(exampleArr[0].name);
28+
let markdown = $derived(getExampleFileName(selectedExample, exampleArr));
29+
30+
function findObject(arr: { name: string; component: Component }[], name: string) {
31+
const matchingObject = arr.find((obj) => obj.name === name);
32+
return matchingObject ? matchingObject.component : null;
33+
}
34+
const SelectedComponent = $derived(findObject(exampleArr, selectedExample));
35+
// end of dynamic svelte component
36+
37+
// for examples DynamicCodeBlockHighlight
38+
let codeBlock = uiHelpers();
39+
let exampleExpand = $state(false);
40+
let showExpandButton = $derived(isSvelteOverflow(markdown, exampleModules));
41+
const handleExpandClick = () => {
42+
exampleExpand = !exampleExpand;
5943
};
44+
// end of DynamicCodeBlock setup
45+
$effect(() => {
46+
exampleExpand = codeBlock.isOpen;
47+
});
6048
</script>
6149

6250
<H1>List group</H1>
6351

64-
<H2>Setup</H2>
65-
66-
<HighlightCompo code={modules['./md/setup.md'] as string} />
67-
68-
<H2>Default list group</H2>
6952

70-
<CodeWrapper innerClass="flex justify-center">
71-
<Listgroup items={simpleList} class="w-48" />
72-
{#snippet codeblock()}
73-
<HighlightCompo code={modules['./md/default-list-group.md'] as string} />
74-
{/snippet}
75-
</CodeWrapper>
76-
77-
<H2>List group with links</H2>
78-
79-
<CodeWrapper innerClass="flex justify-center">
80-
<Listgroup active items={links} class="w-48" />
81-
{#snippet codeblock()}
82-
<HighlightCompo code={modules['./md/list-group-with-links.md'] as string} />
83-
{/snippet}
84-
</CodeWrapper>
85-
86-
<H2>List group with buttons</H2>
87-
<CodeWrapper innerClass="flex justify-center">
88-
<Listgroup active items={buttons} class="w-48" onclick={handleClick} />
89-
{#snippet codeblock()}
90-
<HighlightCompo code={modules['./md/list-group-with-buttons.md'] as string} />
91-
{/snippet}
92-
</CodeWrapper>
53+
<H2>Examples</H2>
9354

94-
<H2>List group with icons</H2>
95-
<CodeWrapper innerClass="flex justify-center">
96-
<Listgroup active items={iconList} class="w-48" onclick={handleClick2} />
55+
<CodeWrapper>
56+
<div class="mb-12 flex flex-wrap">
57+
<Label class="mb-4 w-full font-bold">Example:</Label>
58+
{#each exampleArr as style}
59+
<Radio labelClass="w-32 my-1" onclick={() => (exampleExpand = false)} name="block_style" bind:group={selectedExample} value={style.name}>{style.name}</Radio>
60+
{/each}
61+
</div>
62+
<SelectedComponent />
9763
{#snippet codeblock()}
98-
<HighlightCompo code={modules['./md/list-group-with-icons.md'] as string} />
64+
<DynamicCodeBlockHighlight replaceLib {handleExpandClick} expand={exampleExpand} {showExpandButton} code={exampleModules[`./examples/${markdown}`] as string} />
9965
{/snippet}
10066
</CodeWrapper>
10167

‎src/routes/components/list-group/examples/Default.svelte‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script lang="ts">
2+
import { Listgroup } from '$lib';
3+
let simpleList = ['Profile', 'Settings', 'Messages', 'Download'];
4+
</script>
5+
6+
<div class="flex justify-center">
7+
<Listgroup items={simpleList} class="w-48" />
8+
</div>

‎src/routes/components/list-group/examples/WithButtons.svelte‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts">
2+
import { Listgroup } from '$lib';
3+
let buttons = [
4+
{ name: 'Profile', mycustomfield: 'data1', current: true },
5+
{ name: 'Settings', mycustomfield: 'data2' },
6+
{ name: 'Messages', mycustomfield: 'data3' },
7+
{
8+
name: 'Download',
9+
mycustomfield: 'data4',
10+
disabled: true,
11+
attrs: { type: 'submit' }
12+
}
13+
];
14+
15+
const handleClick = (e?: MouseEvent) => {
16+
if (e?.target instanceof HTMLElement) {
17+
alert('mycustomfield: ' + e.target.attributes.getNamedItem('mycustomfield')?.value);
18+
} else {
19+
console.warn('Unexpected event target type. Cannot access attributes.');
20+
}
21+
};
22+
</script>
23+
24+
<div class="flex justify-center">
25+
<Listgroup active items={buttons} class="w-48" onclick={handleClick} />
26+
</div>

‎src/routes/components/list-group/examples/WithIcons.svelte‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts">
2+
import { Listgroup } from '$lib';
3+
import { AdjustmentsHorizontalSolid, DownloadSolid, MessagesSolid, UserCircleSolid } from 'flowbite-svelte-icons';
4+
let iconList = [
5+
{ name: 'Profile', Icon: UserCircleSolid, mycustomfield: 'data1' },
6+
{
7+
name: 'Settings',
8+
Icon: AdjustmentsHorizontalSolid,
9+
mycustomfield: 'data2'
10+
},
11+
{ name: 'Messages', Icon: MessagesSolid, mycustomfield: 'data3' },
12+
{ name: 'Download', Icon: DownloadSolid, mycustomfield: 'data4' }
13+
];
14+
15+
const handleClick = (e?: MouseEvent) => {
16+
if (e?.target instanceof HTMLElement) {
17+
console.log(e.target.attributes.getNamedItem('mycustomfield')?.value);
18+
} else {
19+
console.warn('Unexpected event target type. Cannot access attributes.');
20+
}
21+
};
22+
</script>
23+
24+
<div class="flex justify-center">
25+
<Listgroup active items={iconList} class="w-48" onclick={handleClick} />
26+
</div>

‎src/routes/components/list-group/examples/WithLinks.svelte‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script lang="ts">
2+
import { Listgroup } from '$lib';
3+
import type { ListGroupItemType } from '$lib/types';
4+
let links: ListGroupItemType[] = [
5+
{ name: 'Avatar', href: '/components/avatar' },
6+
{ name: 'List group', href: '/components/list-group', current: true },
7+
{ name: 'Banner', href: '/components/banner' },
8+
{ name: 'Breadcrumbs', href: '/components/breadcrumb', target: '_blank' }
9+
];
10+
</script>
11+
12+
<div class="flex justify-center">
13+
<Listgroup active items={links} class="w-48" />
14+
</div>

‎src/routes/components/list-group/examples/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { default as Default } from './Default.svelte';
2+
export { default as WithButtons } from './WithButtons.svelte';
3+
export { default as WithIcons } from './WithIcons.svelte';
4+
export { default as WithLinks } from './WithLinks.svelte';

0 commit comments

Comments
 (0)