From 7850b0dee5f560c201419f79254d008f493a39ad Mon Sep 17 00:00:00 2001 From: KTibow Date: Sat, 25 Jan 2025 17:10:08 -0800 Subject: [PATCH] new ui --- scripts/generate-demos.ts | 20 ++++- src/demos.md | 153 +++++++++++++++++++------------------- src/routes/+page.svelte | 32 ++++---- src/routes/0.svelte | 12 ++- src/routes/1.svelte | 3 +- src/routes/10.svelte | 3 +- src/routes/11.svelte | 3 +- src/routes/12.svelte | 3 +- src/routes/13.svelte | 3 +- src/routes/14.svelte | 3 +- src/routes/15.svelte | 3 +- src/routes/16.svelte | 3 +- src/routes/17.svelte | 3 +- src/routes/2.svelte | 3 +- src/routes/3.svelte | 30 +++++--- src/routes/4.svelte | 84 ++++++++++++++++----- src/routes/5.svelte | 39 +++++----- src/routes/6.svelte | 91 ++++------------------- src/routes/7.svelte | 39 +++++----- src/routes/8.svelte | 3 +- src/routes/9.svelte | 3 +- src/routes/_doc.svelte | 36 +++++++++ static/llms.txt | 111 ++++++++++++++------------- 23 files changed, 370 insertions(+), 313 deletions(-) create mode 100644 src/routes/_doc.svelte diff --git a/scripts/generate-demos.ts b/scripts/generate-demos.ts index 4ab2cfd..59f8fe8 100644 --- a/scripts/generate-demos.ts +++ b/scripts/generate-demos.ts @@ -35,6 +35,7 @@ import InternalCard from "./_card.svelte"; ${components .split("\n") .filter(Boolean) + .filter((c) => !["Switch"].includes(c)) .map((c) => c == "Snackbar" ? `import Snackbar, { type SnackbarIn } from "$lib/containers/Snackbar.svelte";` @@ -45,9 +46,26 @@ ${fullDemoTs} const dispatch = createEventDispatcher(); const minimalDemo = \`${minimalDemo.replaceAll("$", '${"$"}').replaceAll("<", '${"<"}')}\`; +const relevantLinks = ${JSON.stringify( + components + .split("\n") + .filter(Boolean) + .filter((c) => + c.toLowerCase() == friendlyName.toLowerCase() + ? true + : !["Checkbox", "Divider", "Button"].includes(c), + ) + .map((c) => ({ + title: `${c}.sv`, + link: getFile(c).replace( + "src/lib", + "https://github.com/KTibow/m3-svelte/blob/main/src/lib", + ), + })), + )}; - dispatch("showCode", { name: ${JSON.stringify(friendlyName)} })}> + dispatch("showCode", { name: ${JSON.stringify(friendlyName)}, minimalDemo, relevantLinks })}> ${fullDemoSvelte} `; diff --git a/src/demos.md b/src/demos.md index 3a5ab94..433cce6 100644 --- a/src/demos.md +++ b/src/demos.md @@ -17,6 +17,7 @@ ButtonLink let type: "elevated" | "filled" | "tonal" | "outlined" | "text" = "elevated"; let iconType: "none" | "left" | "full" = "none"; let enabled = true; +let link = false; ``` ```svelte @@ -32,8 +33,12 @@ let enabled = true; {enabled ? "Enabled" : "Disabled"} +
- +
``` @@ -135,36 +140,6 @@ let size: "small" | "normal" | "large" | "extended" = "normal"; ``` -## Bottom Sheet - -Minimal demo: - -```svelte -{#if open} - (open = false)}>Hello -{/if} -``` - -Full demo: - -```use -Button -BottomSheet -``` - -```ts -let open = false; -``` - -```svelte -
- - {#if open} - (open = false)}>Hello - {/if} -
-``` - ## Card Minimal demo: @@ -204,43 +179,6 @@ let clickable = false; ``` -## Dialog - -Minimal demo: - -```svelte - - I'm alive - - - - -``` - -Full demo: - -```use -Button -Dialog -``` - -```ts -let open = false; -``` - -```svelte -
- - - Anything is possible at ZomboCom! You can do anything at ZomboCom! The infinite is possible at - ZomboCom! The unattainable is unknown at ZomboCom! - - - - -
-``` - ## List Minimal demo: @@ -250,14 +188,6 @@ Minimal demo: - - ``` Full demo: @@ -372,6 +302,73 @@ let icons = false; ``` +## Bottom Sheet + +Minimal demo: + +```svelte +{#if open} + (open = false)}>Hello +{/if} +``` + +Full demo: + +```use +Button +BottomSheet +``` + +```ts +let open = false; +``` + +```svelte +
+ + {#if open} + (open = false)}>Hello + {/if} +
+``` + +## Dialog + +Minimal demo: + +```svelte + + I'm alive + + + + +``` + +Full demo: + +```use +Button +Dialog +``` + +```ts +let open = false; +``` + +```svelte +
+ + + Anything is possible at ZomboCom! You can do anything at ZomboCom! The infinite is possible at + ZomboCom! The unattainable is unknown at ZomboCom! + + + + +
+``` + ## Snackbar Minimal demo: @@ -660,7 +657,7 @@ Minimal demo: Full demo: ```use - +Switch ``` ```ts diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 44796fa..5e23c3f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,6 +2,9 @@ import { slide } from "svelte/transition"; import { easeEmphasized } from "$lib/misc/easing"; import StandardSideSheet from "$lib/containers/StandardSideSheet.svelte"; + import BottomSheet from "$lib/containers/BottomSheet.svelte"; + + import Doc from "./_doc.svelte"; import Hero from "./Hero.svelte"; import Demo0 from "./0.svelte"; import Demo1 from "./1.svelte"; @@ -21,12 +24,16 @@ import Demo15 from "./15.svelte"; import Demo16 from "./16.svelte"; import Demo17 from "./17.svelte"; - import BottomSheet from "$lib/containers/BottomSheet.svelte"; let innerWidth: number; - let doc: { name: string } | undefined; - const showCode = (e: { detail: { name: string } }) => { + type DocData = { + name: string; + minimalDemo: string; + relevantLinks: { title: string; link: string }[]; + }; + let doc: DocData | undefined; + const showCode = (e: { detail: DocData }) => { doc = e.detail; }; @@ -41,22 +48,9 @@ {#snippet docs()} - Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi culpa ipsum, possimus laudantium - dignissimos impedit at, unde officia doloribus asperiores quia aperiam et ducimus error ex magni - quam? Tempore, est. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae placeat - fuga voluptas sit tempora soluta quia totam optio. Laudantium, in! Porro ut fuga ratione eius - cupiditate nihil perspiciatis quos sed! Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Molestias illo, numquam mollitia deserunt et est dicta modi ratione fuga culpa dolor voluptatibus - veniam aspernatur quibusdam nostrum neque, fugiat consectetur sunt. Lorem, ipsum dolor sit amet - consectetur adipisicing elit. Quaerat rerum voluptas perferendis, officiis, eius, unde quia magni - laborum blanditiis vero id maiores cum vel natus. Nostrum voluptatibus magni magnam eligendi! - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias officiis at sint assumenda, - deserunt nihil eaque, cupiditate nisi beatae eum blanditiis soluta vel, sequi nulla porro dolorum - accusamus ad quas? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis natus - molestias, ratione, ducimus, optio facilis porro molestiae omnis obcaecati similique officia - cupiditate iste recusandae nesciunt quidem saepe alias laborum doloremque? Lorem ipsum dolor sit - amet consectetur adipisicing elit. Atque veniam repellendus sed magni a saepe numquam pariatur - inventore ea. Nobis aspernatur iste in tempora corporis porro cumque accusamus quod at. + {#if doc} + + {/if} {/snippet}
diff --git a/src/routes/0.svelte b/src/routes/0.svelte index f2b92df..6c6cf7a 100644 --- a/src/routes/0.svelte +++ b/src/routes/0.svelte @@ -12,12 +12,14 @@ import ButtonLink from "$lib/buttons/ButtonLink.svelte"; let type: "elevated" | "filled" | "tonal" | "outlined" | "text" = "elevated"; let iconType: "none" | "left" | "full" = "none"; let enabled = true; +let link = false; const dispatch = createEventDispatcher(); const minimalDemo = `${"<"}Button type="elevated" on:click={() => alert("!")}>Hello${"<"}/Button>`; +const relevantLinks = [{"title":"Button.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/buttons/Button.svelte"},{"title":"ButtonLink.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/buttons/ButtonLink.svelte"}]; - dispatch("showCode", { name: "Button" })}> + dispatch("showCode", { name: "Button", minimalDemo, relevantLinks })}> +
- +
diff --git a/src/routes/1.svelte b/src/routes/1.svelte index 49d9b70..23e15fc 100644 --- a/src/routes/1.svelte +++ b/src/routes/1.svelte @@ -18,9 +18,10 @@ const minimalDemo = `${"<"}SegmentedButtonContainer> ${"<"}input type="checkbox" id="segmented-1" bind:checked={itemB} /> ${"<"}SegmentedButtonItem input="segmented-1">B${"<"}/SegmentedButtonItem> ${"<"}/SegmentedButtonContainer>`; +const relevantLinks = [{"title":"SegmentedButtonContainer.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/buttons/SegmentedButtonContainer.svelte"},{"title":"SegmentedButtonItem.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/buttons/SegmentedButtonItem.svelte"}]; - dispatch("showCode", { name: "Segmented Button" })}> + dispatch("showCode", { name: "Segmented Button", minimalDemo, relevantLinks })}>
- - ``` The M3 Svelte interactive demo for this component uses ListItem, ListItemButton, ListItemLabel, Checkbox, Divider with the TS `let lines: "1" | "2" | "3" = "1"; @@ -845,6 +797,51 @@ The M3 Svelte interactive demo for this component uses Menu, MenuItem with the T ``` +### Bottom Sheet + +Minimal demo: +```svelte +{#if open} + (open = false)}>Hello +{/if} +``` + +The M3 Svelte interactive demo for this component uses Button, BottomSheet with the TS `let open = false;` to make this demo: +```svelte +
+ + {#if open} + (open = false)}>Hello + {/if} +
+``` + +### Dialog + +Minimal demo: +```svelte + + I'm alive + + + + +``` + +The M3 Svelte interactive demo for this component uses Button, Dialog with the TS `let open = false;` to make this demo: +```svelte +
+ + + Anything is possible at ZomboCom! You can do anything at ZomboCom! The infinite is possible at + ZomboCom! The unattainable is unknown at ZomboCom! + + + + +
+``` + ### Snackbar Minimal demo: @@ -1060,7 +1057,7 @@ Minimal demo: ``` -The M3 Svelte interactive demo for this component uses with the TS `let enabled = true;` to make this demo: +The M3 Svelte interactive demo for this component uses Switch with the TS `let enabled = true;` to make this demo: ```svelte