aboutsummaryrefslogtreecommitdiffstats
path: root/code/app/src/routes/book
diff options
context:
space:
mode:
Diffstat (limited to 'code/app/src/routes/book')
-rw-r--r--code/app/src/routes/book/alerts/+page.svelte50
-rw-r--r--code/app/src/routes/book/badges/+page.svelte25
-rw-r--r--code/app/src/routes/book/buttons/+page.svelte16
-rw-r--r--code/app/src/routes/book/inputs/+page.svelte28
-rw-r--r--code/app/src/routes/book/toggles/+page.svelte12
5 files changed, 66 insertions, 65 deletions
diff --git a/code/app/src/routes/book/alerts/+page.svelte b/code/app/src/routes/book/alerts/+page.svelte
index d008d85..ed4c92b 100644
--- a/code/app/src/routes/book/alerts/+page.svelte
+++ b/code/app/src/routes/book/alerts/+page.svelte
@@ -1,31 +1,31 @@
<script>
- import Alert from "$lib/components/alert.svelte";
+ import Alert from "$components/alert.svelte";
</script>
<section>
<h2>Info</h2>
- <Alert type="info" message="This is message" title="This is title" />
+ <Alert type="info" message="This is message" title="This is title"/>
</section>
<section>
<h2>Warning</h2>
- <Alert type="warning" message="This is message" title="This is title" />
+ <Alert type="warning" message="This is message" title="This is title"/>
</section>
<section>
<h2>Error</h2>
- <Alert type="error" message="This is message" title="This is title" />
+ <Alert type="error" message="This is message" title="This is title"/>
</section>
<section>
<h2>Success</h2>
- <Alert type="success" message="This is message" title="This is title" />
+ <Alert type="success" message="This is message" title="This is title"/>
</section>
<section>
<h2>Actions</h2>
<Alert
- type="info"
- message="This is message"
- title="This is title"
- closeable
- actions={[
+ type="info"
+ message="This is message"
+ title="This is title"
+ closeable
+ actions={[
{
id: "confirm",
text: "Yes!",
@@ -41,30 +41,30 @@
<section>
<h2>Right link</h2>
<Alert
- on:rightLinkCliked={() => alert("Right link clicked")}
- rightLinkText="Link or action"
- title="Go here"
- message="Hehe"
- type="error"
+ on:rightLinkCliked={() => alert("Right link clicked")}
+ rightLinkText="Link or action"
+ title="Go here"
+ message="Hehe"
+ type="error"
/>
</section>
<section>
<h2>List</h2>
<Alert
- title="This is title"
- listItems={["Message 1", "Message 2"]}
- type="error"
- message="This is bad dude"
- closeable
- closeableCooldown="60"
- id="alert-1"
- on:actrepeat={() => {
+ title="This is title"
+ listItems={["Message 1", "Message 2"]}
+ type="error"
+ message="This is bad dude"
+ closeable
+ closeableCooldown="60"
+ id="alert-1"
+ on:actrepeat={() => {
alert("Repeat requested");
}}
- actions={[{ id: "repeat", text: "Try again" }]}
+ actions={[{ id: "repeat", text: "Try again" }]}
/>
</section>
<section>
<h2>Closeable</h2>
- <Alert message="This is message" closeable type="info" />
+ <Alert message="This is message" closeable type="info"/>
</section>
diff --git a/code/app/src/routes/book/badges/+page.svelte b/code/app/src/routes/book/badges/+page.svelte
index cd5120a..50ae61e 100644
--- a/code/app/src/routes/book/badges/+page.svelte
+++ b/code/app/src/routes/book/badges/+page.svelte
@@ -1,18 +1,19 @@
<script lang="ts">
- import Badge from "$lib/components/badge.svelte";
+ import Badge from "$components/badge.svelte";
</script>
<section>
<h2>Variants</h2>
- <Badge text="default" />
- <Badge type="blue" text="blue" />
- <Badge type="green" text="green" />
- <Badge type="red" text="red" />
- <Badge type="tame" text="tame" />
- <Badge type="yellow" text="yellow" />
- <Badge size="large" text="large" />
- <Badge text="with dot" withDot type="blue" />
- <Badge text="removable" removable id="badge-1" on:remove={(e) => alert("removed " + e.detail.id)} />
- <Badge text="with dot" size="large" withDot type="blue" />
- <Badge text="removable" removable size="large" id="badge-2" uppercase on:remove={(e) => alert("removed " + e.detail.id)} />
+ <Badge text="default"/>
+ <Badge type="blue" text="blue"/>
+ <Badge type="green" text="green"/>
+ <Badge type="red" text="red"/>
+ <Badge type="tame" text="tame"/>
+ <Badge type="yellow" text="yellow"/>
+ <Badge size="large" text="large"/>
+ <Badge text="with dot" withDot type="blue"/>
+ <Badge text="removable" removable id="badge-1" on:remove={(e) => alert("removed " + e.detail.id)}/>
+ <Badge text="with dot" size="large" withDot type="blue"/>
+ <Badge text="removable" removable size="large" id="badge-2" uppercase
+ on:remove={(e) => alert("removed " + e.detail.id)}/>
</section>
diff --git a/code/app/src/routes/book/buttons/+page.svelte b/code/app/src/routes/book/buttons/+page.svelte
index 19ba163..6668a64 100644
--- a/code/app/src/routes/book/buttons/+page.svelte
+++ b/code/app/src/routes/book/buttons/+page.svelte
@@ -1,23 +1,23 @@
<script>
- import Button from "$lib/components/button.svelte";
+ import Button from "$components/button.svelte";
</script>
<section>
<h2>Primary</h2>
- <Button kind="primary" text="Small" size="sm" />
- <Button kind="primary" text="Medium/Default" />
- <Button kind="primary" text="Large" size="lg" />
- <Button kind="primary" text="Extra large" size="xl" />
+ <Button kind="primary" text="Small" size="sm"/>
+ <Button kind="primary" text="Medium/Default"/>
+ <Button kind="primary" text="Large" size="lg"/>
+ <Button kind="primary" text="Extra large" size="xl"/>
</section>
<section>
<h2>Secondary</h2>
- <Button kind="secondary" text="Click me!" />
+ <Button kind="secondary" text="Click me!"/>
</section>
<section>
<h2>White</h2>
- <Button kind="white" text="Click me!" />
+ <Button kind="white" text="Click me!"/>
</section>
<section>
<h2>Loading</h2>
- <Button kind="primary" loading={true} text="Wait" />
+ <Button kind="primary" loading={true} text="Wait"/>
</section>
diff --git a/code/app/src/routes/book/inputs/+page.svelte b/code/app/src/routes/book/inputs/+page.svelte
index 7ca0d31..d5566ed 100644
--- a/code/app/src/routes/book/inputs/+page.svelte
+++ b/code/app/src/routes/book/inputs/+page.svelte
@@ -1,7 +1,6 @@
<script lang="ts">
- import { TextArea, Input, Combobox } from "$lib/components";
- import { DatabaseIcon } from "$lib/components/icons";
- import LL from "$lib/i18n/i18n-svelte";
+ import {TextArea, Input, Combobox} from "$components";
+ import {DatabaseIcon} from "$components/icons";
let value;
let i = 0;
@@ -16,7 +15,7 @@
i++;
}
- async function add({ name }) {
+ async function add({name}) {
const copy = options;
copy.push({
id: crypto.randomUUID(),
@@ -28,48 +27,49 @@
<section>
<h2>Combobox</h2>
- <Combobox {options} label="Wiii" multiple createable on_create_async={add} />
+ <Combobox {options} label="Wiii" multiple createable on_create_async={add}/>
</section>
<section>
<h2>Default</h2>
- <Input label="Input me" placeholder="Hello" bind:value />
+ <Input label="Input me" placeholder="Hello" bind:value/>
</section>
<section>
<h2>With icon</h2>
- <Input label="Input me" placeholder="Hello" icon={DatabaseIcon} bind:value />
+ <Input label="Input me" placeholder="Hello" icon={DatabaseIcon} bind:value/>
</section>
<section>
<h2>With corner hint</h2>
- <Input label="Input me ->" placeholder="Hello" cornerHint="Hint hint" bind:value />
+ <Input label="Input me ->" placeholder="Hello" cornerHint="Hint hint" bind:value/>
</section>
<section>
<h2>Disabled</h2>
- <Input label="No" placeholder="Sorry" disabled bind:value />
+ <Input label="No" placeholder="Sorry" disabled bind:value/>
</section>
<section>
<h2>Errored</h2>
- <Input label="No" placeholder="Sorry" errorText="That's not right" bind:value icon={DatabaseIcon} />
+ <Input label="No" placeholder="Sorry" errorText="That's not right" bind:value icon={DatabaseIcon}/>
</section>
<section>
<h2>Many errors</h2>
- <Input label="No" placeholder="Sorry" errors={["That's not right", "Call help!", "Get it together"]} bind:value icon={DatabaseIcon} />
+ <Input label="No" placeholder="Sorry" errors={["That's not right", "Call help!", "Get it together"]} bind:value
+ icon={DatabaseIcon}/>
</section>
<section>
<h2>Help</h2>
- <Input label="Go ahead" placeholder="Write here" helpText="Write above" bind:value />
+ <Input label="Go ahead" placeholder="Write here" helpText="Write above" bind:value/>
</section>
<section>
<h2>Addon</h2>
- <Input label="Go ahead" placeholder="Write here" bind:value helpText="Write above" addon="To the right" />
+ <Input label="Go ahead" placeholder="Write here" bind:value helpText="Write above" addon="To the right"/>
</section>
<section>
<h2>Textarea</h2>
- <TextArea bind:value errorText="oh no" label="Hi" />
+ <TextArea bind:value errorText="oh no" label="Hi"/>
</section>
diff --git a/code/app/src/routes/book/toggles/+page.svelte b/code/app/src/routes/book/toggles/+page.svelte
index 730e6f2..71c9298 100644
--- a/code/app/src/routes/book/toggles/+page.svelte
+++ b/code/app/src/routes/book/toggles/+page.svelte
@@ -1,27 +1,27 @@
<script>
- import Switch from "$lib/components/switch.svelte";
+ import Switch from "$components/switch.svelte";
</script>
<section>
<h2>Default</h2>
- <Switch />
+ <Switch/>
</section>
<section>
<h2>Short</h2>
- <Switch type="short" />
+ <Switch type="short"/>
</section>
<section>
<h2>Icon</h2>
- <Switch type="icon" />
+ <Switch type="icon"/>
</section>
<section>
<h2>Label / Description</h2>
<div class="max-w-md">
- <Switch label="Label" description="Some text" />
+ <Switch label="Label" description="Some text"/>
</div>
</section>
<section>
<h2>Label / Description (right aligned)</h2>
- <Switch label="Label" description="Some text" rightAlignedLabelDescription />
+ <Switch label="Label" description="Some text" rightAlignedLabelDescription/>
</section>
generated by cgit v1.3 (git 2.53.0) at 2026-04-02 13:05:28 +0200