new ui

KTibow · Jan 26, 2025 · 7850b0d · 7850b0d
1 parent c4943a4
commit 7850b0d
Show file tree

Hide file tree

Showing 23 changed files with 370 additions and 313 deletions.
diff --git 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",
+        ),
+      })),
+  )};
 </script>
 
-<InternalCard title="${friendlyName}" on:showCode={() => dispatch("showCode", { name: ${JSON.stringify(friendlyName)} })}>
+<InternalCard title="${friendlyName}" on:showCode={() => dispatch("showCode", { name: ${JSON.stringify(friendlyName)}, minimalDemo, relevantLinks })}>
 ${fullDemoSvelte}
 </InternalCard>
 `;

diff --git 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,16 +33,20 @@ let enabled = true;
   <Switch bind:checked={enabled} />
   {enabled ? "Enabled" : "Disabled"}
 </label>
+<label>
+  <Switch bind:checked={link} />
+  {link ? "Link" : "Button"}
+</label>
 <div slot="demo">
-  <Button {type} disabled={!enabled} {iconType}>
+  <svelte:component this={link ? ButtonLink : Button} {type} disabled={!enabled} {iconType} href="https://example.com">
     {#if iconType == "none"}
       Hello
     {:else if iconType == "left"}
       <Icon icon={iconCircle} /> Hello
     {:else}
       <Icon icon={iconCircle} />
     {/if}
-  </Button>
+  </svelte:component>
 </div>
 ```
 
@@ -135,36 +140,6 @@ let size: "small" | "normal" | "large" | "extended" = "normal";
 </div>
 ```
 
-## Bottom Sheet
-
-Minimal demo:
-
-```svelte
-{#if open}
-  <BottomSheet on:close={() => (open = false)}>Hello</BottomSheet>
-{/if}
-```
-
-Full demo:
-
-```use
-Button
-BottomSheet
-```
-
-```ts
-let open = false;
-```
-
-```svelte
-<div slot="demo">
-  <Button type="tonal" on:click={() => (open = true)}>Open</Button>
-  {#if open}
-    <BottomSheet on:close={() => (open = false)}>Hello</BottomSheet>
-  {/if}
-</div>
-```
-
 ## Card
 
 Minimal demo:
@@ -204,43 +179,6 @@ let clickable = false;
 </div>
 ```
 
-## Dialog
-
-Minimal demo:
-
-```svelte
-<Dialog headline="Hello" bind:open>
-  I'm alive
-  <svelte:fragment slot="buttons">
-    <Button type="tonal" on:click={() => (open = false)}>OK</Button>
-  </svelte:fragment>
-</Dialog>
-```
-
-Full demo:
-
-```use
-Button
-Dialog
-```
-
-```ts
-let open = false;
-```
-
-```svelte
-<div slot="demo">
-  <Button type="tonal" on:click={() => (open = true)}>Open</Button>
-  <Dialog icon={iconCircle} headline="Hello" bind:open>
-    Anything is possible at ZomboCom! You can do anything at ZomboCom! The infinite is possible at
-    ZomboCom! The unattainable is unknown at ZomboCom!
-    <svelte:fragment slot="buttons">
-      <Button type="tonal" on:click={() => (open = false)}>OK</Button>
-    </svelte:fragment>
-  </Dialog>
-</div>
-```
-
 ## List
 
 Minimal demo:
@@ -250,14 +188,6 @@ Minimal demo:
   <ListItem headline="Hello" />
   <ListItem headline="Hello" />
 </div>
-
-<style>
-  .box-wrapper {
-    display: flex;
-    width: 1.5rem;
-    justify-content: center;
-  }
-</style>
 ```
 
 Full demo:
@@ -372,6 +302,73 @@ let icons = false;
 </Menu>
 ```
 
+## Bottom Sheet
+
+Minimal demo:
+
+```svelte
+{#if open}
+  <BottomSheet on:close={() => (open = false)}>Hello</BottomSheet>
+{/if}
+```
+
+Full demo:
+
+```use
+Button
+BottomSheet
+```
+
+```ts
+let open = false;
+```
+
+```svelte
+<div slot="demo">
+  <Button type="tonal" on:click={() => (open = true)}>Open</Button>
+  {#if open}
+    <BottomSheet on:close={() => (open = false)}>Hello</BottomSheet>
+  {/if}
+</div>
+```
+
+## Dialog
+
+Minimal demo:
+
+```svelte
+<Dialog headline="Hello" bind:open>
+  I'm alive
+  <svelte:fragment slot="buttons">
+    <Button type="tonal" on:click={() => (open = false)}>OK</Button>
+  </svelte:fragment>
+</Dialog>
+```
+
+Full demo:
+
+```use
+Button
+Dialog
+```
+
+```ts
+let open = false;
+```
+
+```svelte
+<div slot="demo">
+  <Button type="tonal" on:click={() => (open = true)}>Open</Button>
+  <Dialog icon={iconCircle} headline="Hello" bind:open>
+    Anything is possible at ZomboCom! You can do anything at ZomboCom! The infinite is possible at
+    ZomboCom! The unattainable is unknown at ZomboCom!
+    <svelte:fragment slot="buttons">
+      <Button type="tonal" on:click={() => (open = false)}>OK</Button>
+    </svelte:fragment>
+  </Dialog>
+</div>
+```
+
 ## 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
@@ -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;
   };
 </script>
@@ -41,22 +48,9 @@
 </svelte:head>
 
 {#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}
+    <Doc {...doc} />
+  {/if}
 {/snippet}
 <div class="side-wrapper">
   <Hero />

diff --git 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"}];
 </script>
 
-<InternalCard title="Button" on:showCode={() => dispatch("showCode", { name: "Button" })}>
+<InternalCard title="Button" on:showCode={() => dispatch("showCode", { name: "Button", minimalDemo, relevantLinks })}>
 <label>
   <Arrows list={["elevated", "filled", "tonal", "outlined", "text"]} bind:value={type} />
   {type[0].toUpperCase() + type.slice(1)}
@@ -30,15 +32,19 @@ const minimalDemo = `${"<"}Button type="elevated" on:click={() => alert("!")}>He
   <Switch bind:checked={enabled} />
   {enabled ? "Enabled" : "Disabled"}
 </label>
+<label>
+  <Switch bind:checked={link} />
+  {link ? "Link" : "Button"}
+</label>
 <div slot="demo">
-  <Button {type} disabled={!enabled} {iconType}>
+  <svelte:component this={link ? ButtonLink : Button} {type} disabled={!enabled} {iconType} href="https://example.com">
     {#if iconType == "none"}
       Hello
     {:else if iconType == "left"}
       <Icon icon={iconCircle} /> Hello
     {:else}
       <Icon icon={iconCircle} />
     {/if}
-  </Button>
+  </svelte:component>
 </div>
 </InternalCard>
diff --git 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"}];
 </script>
 
-<InternalCard title="Segmented Button" on:showCode={() => dispatch("showCode", { name: "Segmented Button" })}>
+<InternalCard title="Segmented Button" on:showCode={() => dispatch("showCode", { name: "Segmented Button", minimalDemo, relevantLinks })}>
 <label>
   <Switch bind:checked={multiselect} />
   {multiselect ? "Multi-select" : "Single-select"}

diff --git a/src/routes/10.svelte b/src/routes/10.svelte
@@ -15,9 +15,10 @@ let selected = false;
 
 const dispatch = createEventDispatcher();
 const minimalDemo = `${"<"}Chip type="general" icon={iconCircle} on:click={() => alert("!")}>Hello${"<"}/Chip>`;
+const relevantLinks = [{"title":"Chip.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/Chip.svelte"}];
 </script>
 
-<InternalCard title="Chip" on:showCode={() => dispatch("showCode", { name: "Chip" })}>
+<InternalCard title="Chip" on:showCode={() => dispatch("showCode", { name: "Chip", minimalDemo, relevantLinks })}>
 <label>
   <Arrows
     list={["input", "assist", "assist elevated", "general", "general elevated"]}

diff --git a/src/routes/11.svelte b/src/routes/11.svelte
@@ -19,9 +19,10 @@ const minimalDemo = `${"<"}LinearProgress percent={60} />
 ${"<"}LinearProgressIndeterminate />
 ${"<"}CircularProgress percent={60} />
 ${"<"}CircularProgressIndeterminate />`;
+const relevantLinks = [{"title":"LinearProgress.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/LinearProgress.svelte"},{"title":"LinearProgressIndeterminate.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/LinearProgressIndeterminate.svelte"},{"title":"CircularProgress.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/CircularProgress.svelte"},{"title":"CircularProgressIndeterminate.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/CircularProgressIndeterminate.svelte"}];
 </script>
 
-<InternalCard title="Progress" on:showCode={() => dispatch("showCode", { name: "Progress" })}>
+<InternalCard title="Progress" on:showCode={() => dispatch("showCode", { name: "Progress", minimalDemo, relevantLinks })}>
 <label>
   <Arrows list={["linear", "circular"]} bind:value={type} />
   {type[0].toUpperCase() + type.slice(1)}

diff --git a/src/routes/12.svelte b/src/routes/12.svelte
@@ -18,9 +18,10 @@ const dispatch = createEventDispatcher();
 const minimalDemo = `${"<"}RadioAnim1>${"<"}input type="radio" name="stuff" value="one" bind:group={stuff} />${"<"}/RadioAnim1>
 ${"<"}RadioAnim1>${"<"}input type="radio" name="stuff" value="two" bind:group={stuff} />${"<"}/RadioAnim1>
 ${"<"}RadioAnim1>${"<"}input type="radio" name="stuff" value="three" bind:group={stuff} />${"<"}/RadioAnim1>`;
+const relevantLinks = [{"title":"RadioAnim1.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/RadioAnim1.svelte"},{"title":"RadioAnim2.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/RadioAnim2.svelte"},{"title":"RadioAnim3.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/RadioAnim3.svelte"}];
 </script>
 
-<InternalCard title="Radio" on:showCode={() => dispatch("showCode", { name: "Radio" })}>
+<InternalCard title="Radio" on:showCode={() => dispatch("showCode", { name: "Radio", minimalDemo, relevantLinks })}>
 <label>
   <Arrows list={["1", "2", "3"]} bind:value={animation} />
   Animation {animation}

diff --git a/src/routes/13.svelte b/src/routes/13.svelte
@@ -15,9 +15,10 @@ let value = 0;
 
 const dispatch = createEventDispatcher();
 const minimalDemo = `${"<"}Slider bind:value={n} />`;
+const relevantLinks = [{"title":"Slider.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/Slider.svelte"},{"title":"SliderTicks.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/SliderTicks.svelte"}];
 </script>
 
-<InternalCard title="Slider" on:showCode={() => dispatch("showCode", { name: "Slider" })}>
+<InternalCard title="Slider" on:showCode={() => dispatch("showCode", { name: "Slider", minimalDemo, relevantLinks })}>
 <label>
   <Arrows list={["continuous", "discrete", "discrete-ticks"]} bind:value={precision} />
   {precision == "continuous"