diff options
18 files changed, 97 insertions, 37 deletions
diff --git a/apps/kit/src/app.pcss b/apps/kit/src/app.pcss index 78a8e0b..d256fea 100644 --- a/apps/kit/src/app.pcss +++ b/apps/kit/src/app.pcss @@ -20,3 +20,15 @@ pre { .c-disabled.loading { cursor: wait !important; } + +.link { + @apply text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out mb-4; + + &.danger { + @apply text-red-600 hover:text-red-700; + } + + &.active { + @apply underline + } +}
\ No newline at end of file diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte index 6cc0e63..5bcb3ae 100644 --- a/apps/kit/src/lib/components/alert.svelte +++ b/apps/kit/src/lib/components/alert.svelte @@ -17,12 +17,12 @@ let iconComponent: any; let colorClassPart = ""; - // if no unique id is supplied, cooldown will not work between page loads. - // Therefore we are disabling it with noCooldownSetting in the fallback id. /** * An optional id for this alert, a default is set if not specified. * This value is necessary for closeable cooldown to work. */ + // if no unique id is supplied, cooldown will not work between page loads. + // Therefore we are disabling it with noCooldownSetting in the fallback id. export let id = "alert--" + noCooldownSetting + "--" + random_string(4); /** * The title to communicate, value is optional @@ -42,7 +42,7 @@ export let closeable = false; /** * The amount of seconds that should go by before this alert is shown again, only works when a unique id is set. - * Set to ~ if it should be only shown once per client (State stored in localestorage). + * Set to ~ if it should only be shown once per client (State stored in localestorage). **/ export let closeableCooldown = "-1"; /** diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte index 5550e5e..6566cec 100644 --- a/apps/kit/src/lib/components/button.svelte +++ b/apps/kit/src/lib/components/button.svelte @@ -1,19 +1,23 @@ -<script lang="ts"> - export type ButtonKind = "primary" | "secondary" | "white" +<script context="module" lang="ts"> + export type ButtonKind = "primary" | "secondary" | "white"; export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl"; +</script> + +<script lang="ts"> export let kind = "primary" as ButtonKind; export let size = "sm" as ButtonSize; export let type: "button" | "submit" | "reset" = "button"; - export let id = undefined; - export let tabindex = undefined; - export let style = undefined; - export let title = undefined; + export let id: string | undefined = undefined; + export let tabindex: string | undefined = undefined; + export let style: string | undefined = undefined; + export let title: string | undefined = undefined; export let disabled = false; - export let href = undefined; - export let text; + export let href: string | undefined = undefined; + export let text: string; let sizeClasses = "px-3 py-2 text-xs"; - let kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500"; + let kindClasses = + "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500"; $: shared_props = { type: type, @@ -22,7 +26,7 @@ disabled: disabled || null, tabindex: tabindex || null, style: style || null, - }; + } as any; $: switch (size) { case "xs": @@ -44,29 +48,38 @@ $: switch (kind) { case "secondary": - kindClasses = "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200"; + kindClasses = + "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500"; break; case "primary": - kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700"; + kindClasses = + "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500"; break; case "white": - kindClasses = "border-gray-300 text-gray-700 bg-white hover:bg-gray-50"; + kindClasses = + "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-500"; break; } </script> + {#if href && !disabled} - <a {...shared_props} - {href} - on:click - {type} - class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> + <!--@ts-ignore--> + <a + {...shared_props} + {href} + on:click + {type} + class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2" + > {text} </a> {:else} - <button {...shared_props} - on:click - {type} - class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> + <button + {...shared_props} + on:click + {type} + class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2" + > {text} </button> -{/if}
\ No newline at end of file +{/if} diff --git a/apps/kit/src/lib/helpers.ts b/apps/kit/src/lib/helpers.ts index c2a811e..c4e2e51 100644 --- a/apps/kit/src/lib/helpers.ts +++ b/apps/kit/src/lib/helpers.ts @@ -123,7 +123,9 @@ export function set_favicon(url: string) { document.head.appendChild(link); } } - +export function no_type_check(x: any) { + return x; +} export function capitalise(value: string): string { return value.charAt(0).toUpperCase() + value.slice(1); } diff --git a/apps/kit/src/routes/(app)/+layout.svelte b/apps/kit/src/routes/(main)/(app)/+layout.svelte index 3f60af3..3f60af3 100644 --- a/apps/kit/src/routes/(app)/+layout.svelte +++ b/apps/kit/src/routes/(main)/(app)/+layout.svelte diff --git a/apps/kit/src/routes/(app)/home/+page.svelte b/apps/kit/src/routes/(main)/(app)/home/+page.svelte index 247ee47..247ee47 100644 --- a/apps/kit/src/routes/(app)/home/+page.svelte +++ b/apps/kit/src/routes/(main)/(app)/home/+page.svelte diff --git a/apps/kit/src/routes/(main)/(public)/+layout.svelte b/apps/kit/src/routes/(main)/(public)/+layout.svelte new file mode 100644 index 0000000..49aeb95 --- /dev/null +++ b/apps/kit/src/routes/(main)/(public)/+layout.svelte @@ -0,0 +1 @@ +<slot></slot>
\ No newline at end of file diff --git a/apps/kit/src/routes/(public)/login/+page.svelte b/apps/kit/src/routes/(main)/(public)/login/+page.svelte index 9e2f6e7..9e2f6e7 100644 --- a/apps/kit/src/routes/(public)/login/+page.svelte +++ b/apps/kit/src/routes/(main)/(public)/login/+page.svelte diff --git a/apps/kit/src/routes/(public)/reset/+page.svelte b/apps/kit/src/routes/(main)/(public)/reset/+page.svelte index 5092b4b..5092b4b 100644 --- a/apps/kit/src/routes/(public)/reset/+page.svelte +++ b/apps/kit/src/routes/(main)/(public)/reset/+page.svelte diff --git a/apps/kit/src/routes/(public)/signup/+page.svelte b/apps/kit/src/routes/(main)/(public)/signup/+page.svelte index d4a1bda..d4a1bda 100644 --- a/apps/kit/src/routes/(public)/signup/+page.svelte +++ b/apps/kit/src/routes/(main)/(public)/signup/+page.svelte diff --git a/apps/kit/src/routes/+layout.server.ts b/apps/kit/src/routes/(main)/+layout.server.ts index 01aae89..01aae89 100644 --- a/apps/kit/src/routes/+layout.server.ts +++ b/apps/kit/src/routes/(main)/+layout.server.ts diff --git a/apps/kit/src/routes/+layout.svelte b/apps/kit/src/routes/(main)/+layout.svelte index f8cdf83..e5b177e 100644 --- a/apps/kit/src/routes/+layout.svelte +++ b/apps/kit/src/routes/(main)/+layout.svelte @@ -1,5 +1,5 @@ <script lang="ts"> - import "../app.pcss"; + import "../../app.pcss"; import { afterNavigate, beforeNavigate, goto } from "$app/navigation"; import { is_active } from "$lib/session"; import type { Navigation } from "@sveltejs/kit"; @@ -17,7 +17,7 @@ const isPublicRoute = (ticket.to?.routeId?.startsWith("(public)") ?? true) || ticket.to?.routeId?.startsWith("book"); - console.log(ticket); + console.log("redir: ", { isPublicRoute, sessionIsValid, diff --git a/apps/kit/src/routes/+layout.ts b/apps/kit/src/routes/(main)/+layout.ts index de8a5c0..de8a5c0 100644 --- a/apps/kit/src/routes/+layout.ts +++ b/apps/kit/src/routes/(main)/+layout.ts diff --git a/apps/kit/src/routes/+page.svelte b/apps/kit/src/routes/(main)/+page.svelte index 85a4d2d..85a4d2d 100644 --- a/apps/kit/src/routes/+page.svelte +++ b/apps/kit/src/routes/(main)/+page.svelte diff --git a/apps/kit/src/routes/(public)/+layout.svelte b/apps/kit/src/routes/(public)/+layout.svelte deleted file mode 100644 index 84cd442..0000000 --- a/apps/kit/src/routes/(public)/+layout.svelte +++ /dev/null @@ -1,3 +0,0 @@ -<script> -</script> -<slot></slot>
\ No newline at end of file diff --git a/apps/kit/src/routes/book/+layout.svelte b/apps/kit/src/routes/book/+layout.svelte index 0fcbd51..85ba907 100644 --- a/apps/kit/src/routes/book/+layout.svelte +++ b/apps/kit/src/routes/book/+layout.svelte @@ -1,9 +1,22 @@ <script> + import { page } from "$app/stores"; + import "../../app.pcss"; </script> <div id="wrapper"> - <nav> - <a href="/book/alerts" class="link">Alerts</a> + <nav class="flex flex-col"> + <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/alerts")} + >Buttons</a + > </nav> <main> <slot /> diff --git a/apps/kit/src/routes/book/alerts/+page.svelte b/apps/kit/src/routes/book/alerts/+page.svelte index 566ccca..15084ca 100644 --- a/apps/kit/src/routes/book/alerts/+page.svelte +++ b/apps/kit/src/routes/book/alerts/+page.svelte @@ -7,7 +7,6 @@ <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" /> @@ -31,7 +30,6 @@ { id: "confirm", text: "Yes!", - color: "green", }, { id: "cancel", @@ -48,7 +46,7 @@ rightLinkText="Link or action" title="Go here" message="Hehe" - type="info" + type="error" /> </section> <section> diff --git a/apps/kit/src/routes/book/buttons/+page.svelte b/apps/kit/src/routes/book/buttons/+page.svelte new file mode 100644 index 0000000..c8e8c93 --- /dev/null +++ b/apps/kit/src/routes/book/buttons/+page.svelte @@ -0,0 +1,24 @@ +<script> + import Button from "$lib/components/button.svelte"; +</script> + +<h1>Buttons</h1> +<section> + <h2>Primary</h2> + <div class=""> + <Button kind="primary" text="Normal" /> + <Button kind="primary" text="Large" size="lg" /> + <Button kind="primary" text="Medium" size="md" /> + <Button kind="primary" text="Small" size="sm" /> + <Button kind="primary" text="Extra large" size="xl" /> + <Button kind="primary" text="Extra small" size="xs" /> + </div> +</section> +<section> + <h2>Secondary</h2> + <Button kind="secondary" text="Click me!" /> +</section> +<section> + <h2>White</h2> + <Button kind="white" text="Click me!" /> +</section> |