diff options
Diffstat (limited to 'code/app/src/routes/book')
| -rw-r--r-- | code/app/src/routes/book/+layout.svelte | 46 | ||||
| -rw-r--r-- | code/app/src/routes/book/+layout.ts | 3 | ||||
| -rw-r--r-- | code/app/src/routes/book/+page.svelte | 1 | ||||
| -rw-r--r-- | code/app/src/routes/book/alerts/+page.svelte | 70 | ||||
| -rw-r--r-- | code/app/src/routes/book/badges/+page.svelte | 19 | ||||
| -rw-r--r-- | code/app/src/routes/book/buttons/+page.svelte | 23 | ||||
| -rw-r--r-- | code/app/src/routes/book/inputs/+page.svelte | 75 | ||||
| -rw-r--r-- | code/app/src/routes/book/notifications/+page.svelte | 50 | ||||
| -rw-r--r-- | code/app/src/routes/book/toggles/+page.svelte | 27 |
9 files changed, 314 insertions, 0 deletions
diff --git a/code/app/src/routes/book/+layout.svelte b/code/app/src/routes/book/+layout.svelte new file mode 100644 index 0000000..385d0a6 --- /dev/null +++ b/code/app/src/routes/book/+layout.svelte @@ -0,0 +1,46 @@ +<script> + import { page } from "$app/stores"; + import "../../app.pcss"; +</script> + +<div id="wrapper"> + <nav> + <a href="/book/alerts" class="link" class:active={$page.url.pathname.startsWith("/book/alerts")}>Alerts</a> + <a href="/book/buttons" class="link" class:active={$page.url.pathname.startsWith("/book/buttons")}>Buttons</a> + <a href="/book/toggles" class="link" class:active={$page.url.pathname.startsWith("/book/toggles")}>Toggles</a> + <a href="/book/inputs" class="link" class:active={$page.url.pathname.startsWith("/book/inputs")}>Inputs</a> + <a href="/book/badges" class="link" class:active={$page.url.pathname.startsWith("/book/badges")}>Badges</a> + <a href="/book/notifications" class="link" class:active={$page.url.pathname.startsWith("/book/notifications")}>Notifications</a> + </nav> + <main> + <slot /> + </main> +</div> + +<style global lang="postcss"> + #wrapper { + display: flex; + flex-direction: row; + } + nav { + min-width: 120px; + padding: 10px; + display: flex; + flex-direction: column; + position: sticky; + position: -webkit-sticky; + top: 0; + height: fit-content; + } + main { + width: 100%; + padding: 10px; + } + section { + margin-bottom: 25px; + + h2 { + margin-bottom: 5px; + } + } +</style> diff --git a/code/app/src/routes/book/+layout.ts b/code/app/src/routes/book/+layout.ts new file mode 100644 index 0000000..d297dfd --- /dev/null +++ b/code/app/src/routes/book/+layout.ts @@ -0,0 +1,3 @@ +export const ssr = import.meta.env.DEV; +export const csr = import.meta.env.DEV; +export const prerender = import.meta.env.DEV;
\ No newline at end of file diff --git a/code/app/src/routes/book/+page.svelte b/code/app/src/routes/book/+page.svelte new file mode 100644 index 0000000..635b3c2 --- /dev/null +++ b/code/app/src/routes/book/+page.svelte @@ -0,0 +1 @@ +<p>A showcase of greatoffices components</p> diff --git a/code/app/src/routes/book/alerts/+page.svelte b/code/app/src/routes/book/alerts/+page.svelte new file mode 100644 index 0000000..ed4c92b --- /dev/null +++ b/code/app/src/routes/book/alerts/+page.svelte @@ -0,0 +1,70 @@ +<script> + import Alert from "$components/alert.svelte"; +</script> + +<section> + <h2>Info</h2> + <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"/> +</section> +<section> + <h2>Error</h2> + <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"/> +</section> +<section> + <h2>Actions</h2> + <Alert + type="info" + message="This is message" + title="This is title" + closeable + actions={[ + { + id: "confirm", + text: "Yes!", + }, + { + id: "cancel", + text: "No!", + color: "red", + }, + ]} + /> +</section> +<section> + <h2>Right link</h2> + <Alert + 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={() => { + alert("Repeat requested"); + }} + actions={[{ id: "repeat", text: "Try again" }]} + /> +</section> +<section> + <h2>Closeable</h2> + <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 new file mode 100644 index 0000000..50ae61e --- /dev/null +++ b/code/app/src/routes/book/badges/+page.svelte @@ -0,0 +1,19 @@ +<script lang="ts"> + 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)}/> +</section> diff --git a/code/app/src/routes/book/buttons/+page.svelte b/code/app/src/routes/book/buttons/+page.svelte new file mode 100644 index 0000000..6668a64 --- /dev/null +++ b/code/app/src/routes/book/buttons/+page.svelte @@ -0,0 +1,23 @@ +<script> + 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"/> +</section> +<section> + <h2>Secondary</h2> + <Button kind="secondary" text="Click me!"/> +</section> +<section> + <h2>White</h2> + <Button kind="white" text="Click me!"/> +</section> +<section> + <h2>Loading</h2> + <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 new file mode 100644 index 0000000..433607b --- /dev/null +++ b/code/app/src/routes/book/inputs/+page.svelte @@ -0,0 +1,75 @@ +<script lang="ts"> + import {TextArea, Input, Combobox} from "$components"; + import {DatabaseIcon} from "$components/icons"; + + let value; + let i = 0; + let options = []; + let tempOptions = []; + while (i < 101) { + tempOptions.push({ + id: crypto.randomUUID(), + name: "Option " + i, + }); + options = tempOptions; + i++; + } + + async function add({name}) { + const copy = options; + copy.push({ + id: crypto.randomUUID(), + name: name, + }); + options = copy; + } +</script> + +<section> + <h2>Combobox</h2> + <Combobox {options} label="Wiii" multiple createable on_create_async={add}/> +</section> + +<section> + <h2>Default</h2> + <Input label="Input me" placeholder="Hello" bind:value/> +</section> + +<section> + <h2>With icon</h2> + <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/> +</section> + +<section> + <h2>Disabled</h2> + <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}/> +</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}/> +</section> + +<section> + <h2>Help</h2> + <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"/> +</section> +<section> + <h2>Textarea</h2> + <TextArea bind:value label="Hi"/> +</section> diff --git a/code/app/src/routes/book/notifications/+page.svelte b/code/app/src/routes/book/notifications/+page.svelte new file mode 100644 index 0000000..1a6144d --- /dev/null +++ b/code/app/src/routes/book/notifications/+page.svelte @@ -0,0 +1,50 @@ +<script lang="ts"> + import { Notification } from "$components"; + import type { NotificationType } from "$components/notification.svelte"; + + let type = "info" as NotificationType; + let nonClosable = false; + let title = "Title"; + let subtitle = "Subtitle"; + let hideAfterSeconds = -1; + let timeout; + + function open(newtype: NotificationType) { + console.log(newtype); + type = newtype; + } +</script> + +<section style="display: flex;flex-direction: column; max-width:200px;gap:5px"> + <h2>Type:</h2> + <select + on:change={(e) => { + //@ts-ignore + open(e.target.selectedOptions[0].value); + }} + > + <option value="info">info</option> + <option value="warning">warning</option> + <option value="error">error</option> + <option value="success">success</option> + <option value="subtle">subtle</option> + </select> + <label for="nonClosable"> + <input type="checkbox" id="nonClosable" bind:checked={nonClosable} /> + nonClosable + </label> + <input type="text" bind:value={title} /> + <input type="text" bind:value={subtitle} /> + <input type="number" bind:value={timeout} placeholder="hideAfterSeconds" /> + <small class="text-sm justify-end"> + <span class="link" on:click={() => (hideAfterSeconds = timeout ?? -1)}>Apply</span> + <span + class="link" + on:click={() => { + hideAfterSeconds = -1; + timeout = 0; + }}>Reset</span + > + </small> + <Notification {title} {subtitle} show={true} {type} {nonClosable} {hideAfterSeconds} /> +</section> diff --git a/code/app/src/routes/book/toggles/+page.svelte b/code/app/src/routes/book/toggles/+page.svelte new file mode 100644 index 0000000..cb0adec --- /dev/null +++ b/code/app/src/routes/book/toggles/+page.svelte @@ -0,0 +1,27 @@ +<script> + import Switch from "$components/switch.svelte"; +</script> + +<section> + <h2>Default</h2> + <Switch /> +</section> +<section> + <h2>Short</h2> + <Switch type="short" /> +</section> +<section> + <h2>Icon</h2> + <Switch type="icon" /> +</section> +<section> + <h2>Label / Description</h2> + <div class="max-w-md"> + <Switch label="Label" description="Some text" /> + </div> +</section> + +<section> + <h2>Label / Description (right aligned)</h2> + <Switch label="Label" description="Some text" rightAlignedLabelDescription /> +</section> |