aboutsummaryrefslogtreecommitdiffstats
path: root/apps/kit
diff options
context:
space:
mode:
Diffstat (limited to 'apps/kit')
-rw-r--r--apps/kit/src/lib/components/alert.svelte188
-rw-r--r--apps/kit/src/lib/components/icons/adjustments.svelte19
-rw-r--r--apps/kit/src/lib/components/icons/check-circle.svelte13
-rw-r--r--apps/kit/src/lib/components/icons/database.svelte17
-rw-r--r--apps/kit/src/lib/components/icons/exclamation-triangle.svelte13
-rw-r--r--apps/kit/src/lib/components/icons/home.svelte19
-rw-r--r--apps/kit/src/lib/components/icons/index.ts13
-rw-r--r--apps/kit/src/lib/components/icons/information-circle.svelte13
-rw-r--r--apps/kit/src/lib/components/icons/menu.svelte16
-rw-r--r--apps/kit/src/lib/components/icons/x-circle.svelte13
-rw-r--r--apps/kit/src/lib/components/icons/x-mark.svelte11
-rw-r--r--apps/kit/src/lib/components/icons/x.svelte18
12 files changed, 274 insertions, 79 deletions
diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte
index 4a5c7ea..87962cf 100644
--- a/apps/kit/src/lib/components/alert.svelte
+++ b/apps/kit/src/lib/components/alert.svelte
@@ -1,7 +1,15 @@
<script lang="ts">
- import { random_string } from "$shared/lib/helpers";
- import { afterUpdate, onMount } from "svelte";
+ import { random_string } from "$lib/helpers";
+ import { createEventDispatcher } from "svelte";
+ import { onMount } from "svelte";
import { Temporal } from "temporal-polyfill";
+ import {
+ ExclamationTriangle,
+ CheckCircle,
+ InformationCircle,
+ XCircle,
+ XMark,
+ } from "./icons";
const noCooldownSetting = "no-cooldown";
// if no unique id is supplied, cooldown will not work between page loads.
@@ -9,12 +17,48 @@
export let id = "alert--" + noCooldownSetting + "--" + random_string(4);
export let title = "";
export let message = "";
- export let type = "info";
+ export let type: "info" | "success" | "warning" | "error" = "info";
export let closeable = false;
export let closeableCooldown = "-1";
+ export let rightLinkText = "";
+ export let listItems: Array<string> = [];
+ export let actions: Array<{ id: string; text: string; color?: string }> =
+ [];
+ // This value is set on a plain anchor tag without any svelte routing,
+ // listen to the right-link-click if you want to intercept the click without navigating
+ export let rightLinkHref = "javascript:void(0)";
export let visible = true;
+ const dispatch = createEventDispatcher();
+
const cooldownStorageKey = "lastseen--" + id;
+
+ let iconComponent: any;
+ let colorClassPart = "";
+
+ $: switch (type) {
+ case "info": {
+ colorClassPart = "blue";
+ iconComponent = InformationCircle;
+ break;
+ }
+ case "warning": {
+ colorClassPart = "yellow";
+ iconComponent = ExclamationTriangle;
+ break;
+ }
+ case "error": {
+ colorClassPart = "red";
+ iconComponent = XCircle;
+ break;
+ }
+ case "success": {
+ colorClassPart = "green";
+ iconComponent = CheckCircle;
+ break;
+ }
+ }
+
$: cooldownEnabled =
id.indexOf(noCooldownSetting) === -1 &&
closeable &&
@@ -59,7 +103,7 @@
}
const lastSeen = Temporal.Instant.fromEpochSeconds(
- localStorage.getItem(cooldownStorageKey) as number
+ parseInt(localStorage.getItem(cooldownStorageKey) ?? "-1")
);
if (
Temporal.Instant.compare(
@@ -87,63 +131,93 @@
run_cooldown();
}
});
-
- afterUpdate(() => {
- if (type === "default") {
- type = "primary";
- }
- });
</script>
-<div
- class="alert alert--{type} padding-sm radius-md"
- {id}
- class:alert--is-visible={visible}
- role="alert"
->
- <div class="flex justify-between">
- <div class="flex flex-row items-center">
- <svg
- class="icon icon--sm alert__icon margin-right-xxs"
- viewBox="0 0 24 24"
- aria-hidden="true"
- >
- <path
- d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M14.658,18.284 c-0.661,0.26-2.952,1.354-4.272,0.191c-0.394-0.346-0.59-0.785-0.59-1.318c0-0.998,0.328-1.868,0.919-3.957 c0.104-0.395,0.231-0.907,0.231-1.313c0-0.701-0.266-0.887-0.987-0.887c-0.352,0-0.742,0.125-1.095,0.257l0.195-0.799 c0.787-0.32,1.775-0.71,2.621-0.71c1.269,0,2.203,0.633,2.203,1.837c0,0.347-0.06,0.955-0.186,1.375l-0.73,2.582 c-0.151,0.522-0.424,1.673-0.001,2.014c0.416,0.337,1.401,0.158,1.887-0.071L14.658,18.284z M13.452,8c-0.828,0-1.5-0.672-1.5-1.5 s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S14.28,8,13.452,8z"
+{#if visible}
+ <div class="rounded-md bg-{colorClassPart}-50 p-4 ">
+ <div class="flex">
+ <div class="flex-shrink-0">
+ <svelte:component
+ this={iconComponent}
+ class="text-{colorClassPart}-400"
/>
- </svg>
- {#if title}
- <p class="text-sm">
- <strong class="error-title">{title}</strong>
- </p>
- {:else if message}
- <div class="text-component text-sm break-word">
- {@html message}
+ </div>
+ <div class="ml-3">
+ {#if title}
+ <h3 class="text-sm font-medium text-{colorClassPart}-800">
+ {title}
+ </h3>
+ {/if}
+ {#if message}
+ <div
+ class="{title
+ ? 'mt-2 text-sm'
+ : ''} text-{colorClassPart}-700"
+ >
+ <p>
+ {@html message}
+ {#if rightLinkText}
+ <p class="mt-3 text-sm md:mt-0 md:ml-6">
+ <a
+ href={rightLinkHref}
+ on:click={() =>
+ dispatch("right-link-click")}
+ class="whitespace-nowrap font-medium text-{colorClassPart}-700 hover:text-{colorClassPart}-600"
+ >
+ {rightLinkText}
+ <span aria-hidden="true"> &rarr;</span>
+ </a>
+ </p>
+ {/if}
+ </p>
+ {#if listItems?.length ?? 0}
+ <ul class="list-disc space-y-1 pl-5">
+ {#each listItems as listItem}
+ <li>{listItem}</li>
+ {/each}
+ </ul>
+ {/if}
+ </div>
+ {/if}
+ </div>
+ {#if actions?.length ?? 0}
+ <div class="mt-4">
+ <div class="-mx-2 -my-1.5 flex">
+ {#each actions as action}
+ {@const color = action?.color ?? colorClassPart}
+ <button
+ type="button"
+ on:click={() => dispatch("act-" + action.id)}
+ class="rounded-md
+ bg-{color}-50
+ px-2 py-1.5 text-sm font-medium
+ text-{color}-800
+ hover:bg-{color}-100
+ focus:outline-none focus:ring-2
+ focus:ring-{color}-600
+ focus:ring-offset-2
+ focus:ring-offset-{color}-50"
+ >
+ {action.text}
+ </button>
+ {/each}
+ </div>
+ </div>
+ {/if}
+ {#if closeable}
+ <div class="ml-auto pl-3">
+ <div class="-mx-1.5 -my-1.5">
+ <button
+ type="button"
+ on:click={() => close()}
+ class="inline-flex rounded-md bg-{colorClassPart}-50 p-1.5 text-{colorClassPart}-500 hover:bg-{colorClassPart}-100 focus:outline-none focus:ring-2 focus:ring-{colorClassPart}-600 focus:ring-offset-2 focus:ring-offset-{colorClassPart}-50"
+ >
+ <span class="sr-only">Dismiss</span>
+ <XMark />
+ </button>
+ </div>
</div>
{/if}
</div>
- {#if closeable}
- <button class="reset alert__close-btn" on:click={close}>
- <svg
- class="icon"
- viewBox="0 0 20 20"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- >
- <title>Close alert</title>
- <line x1="3" y1="3" x2="17" y2="17" />
- <line x1="17" y1="3" x2="3" y2="17" />
- </svg>
- </button>
- {/if}
</div>
-
- {#if message && title}
- <div class="text-component text-sm break-word padding-top-xs">
- {@html message}
- </div>
- {/if}
-</div>
+{/if}
diff --git a/apps/kit/src/lib/components/icons/adjustments.svelte b/apps/kit/src/lib/components/icons/adjustments.svelte
index b6d3f4d..83bda27 100644
--- a/apps/kit/src/lib/components/icons/adjustments.svelte
+++ b/apps/kit/src/lib/components/icons/adjustments.svelte
@@ -1,5 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 {$$restProps.class??''}" fill="none" viewBox="0 0 24 24"
- stroke="currentColor" stroke-width="2">
- <path stroke-linecap="round" stroke-linejoin="round"
- d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
-</svg> \ No newline at end of file
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6 {$$restProps.class ?? ''}"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ stroke-width="2"
+>
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+ />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/check-circle.svelte b/apps/kit/src/lib/components/icons/check-circle.svelte
new file mode 100644
index 0000000..e30778e
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/check-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+ class="h-5 w-5 {$$restProps.class ?? ''}"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ aria-hidden="true"
+>
+ <path
+ fill-rule="evenodd"
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+ clip-rule="evenodd"
+ />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/database.svelte b/apps/kit/src/lib/components/icons/database.svelte
index 05c70ed..6ffdadb 100644
--- a/apps/kit/src/lib/components/icons/database.svelte
+++ b/apps/kit/src/lib/components/icons/database.svelte
@@ -1,3 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 {$$restProps.class ?? ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
- <path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-</svg> \ No newline at end of file
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6 {$$restProps.class ?? ''}"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ stroke-width="2"
+>
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
+ />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/exclamation-triangle.svelte b/apps/kit/src/lib/components/icons/exclamation-triangle.svelte
new file mode 100644
index 0000000..8d807db
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/exclamation-triangle.svelte
@@ -0,0 +1,13 @@
+<svg
+ class="h-5 w-5 {$$restProps.class ?? ''}"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ aria-hidden="true"
+>
+ <path
+ fill-rule="evenodd"
+ d="M8.485 3.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 3.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z"
+ clip-rule="evenodd"
+ />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/home.svelte b/apps/kit/src/lib/components/icons/home.svelte
index cc49c4d..ee8305d 100644
--- a/apps/kit/src/lib/components/icons/home.svelte
+++ b/apps/kit/src/lib/components/icons/home.svelte
@@ -1,5 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 {$$restProps.class ?? ''}" fill="none" viewBox="0 0 24 24"
- stroke="currentColor" stroke-width="2">
- <path stroke-linecap="round" stroke-linejoin="round"
- d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
-</svg> \ No newline at end of file
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6 {$$restProps.class ?? ''}"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ stroke-width="2"
+>
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+ />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/index.ts b/apps/kit/src/lib/components/icons/index.ts
index d3abf24..9b0fb7e 100644
--- a/apps/kit/src/lib/components/icons/index.ts
+++ b/apps/kit/src/lib/components/icons/index.ts
@@ -3,11 +3,20 @@ import MenuIcon from "./menu.svelte";
import AdjustmentsIcon from "./adjustments.svelte";
import DatabaseIcon from "./database.svelte";
import HomeIcon from "./home.svelte";
-
+import InformationCircle from "./information-circle.svelte";
+import ExclamationTriangle from "./exclamation-triangle.svelte";
+import XCircle from "./x-circle.svelte";
+import CheckCircle from "./check-circle.svelte";
+import XMark from "./x-mark.svelte";
export {
XIcon,
MenuIcon,
HomeIcon,
DatabaseIcon,
- AdjustmentsIcon
+ AdjustmentsIcon,
+ InformationCircle,
+ ExclamationTriangle,
+ XCircle,
+ CheckCircle,
+ XMark
} \ No newline at end of file
diff --git a/apps/kit/src/lib/components/icons/information-circle.svelte b/apps/kit/src/lib/components/icons/information-circle.svelte
new file mode 100644
index 0000000..68dbc60
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/information-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+ class="h-5 w-5 {$$restProps.class ?? ''}"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ aria-hidden="true"
+>
+ <path
+ fill-rule="evenodd"
+ d="M19 10.5a8.5 8.5 0 11-17 0 8.5 8.5 0 0117 0zM8.25 9.75A.75.75 0 019 9h.253a1.75 1.75 0 011.709 2.13l-.46 2.066a.25.25 0 00.245.304H11a.75.75 0 010 1.5h-.253a1.75 1.75 0 01-1.709-2.13l.46-2.066a.25.25 0 00-.245-.304H9a.75.75 0 01-.75-.75zM10 7a1 1 0 100-2 1 1 0 000 2z"
+ clip-rule="evenodd"
+ />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/menu.svelte b/apps/kit/src/lib/components/icons/menu.svelte
index 12a68a5..471d85f 100644
--- a/apps/kit/src/lib/components/icons/menu.svelte
+++ b/apps/kit/src/lib/components/icons/menu.svelte
@@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 {$$restProps.class ?? ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor"
- stroke-width="2">
- <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6 {$$restProps.class ?? ''}"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ stroke-width="2"
+>
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="M4 6h16M4 12h16M4 18h16"
+ />
</svg>
diff --git a/apps/kit/src/lib/components/icons/x-circle.svelte b/apps/kit/src/lib/components/icons/x-circle.svelte
new file mode 100644
index 0000000..3793b5a
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/x-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+ class="h-5 w-5 {$$restProps.class ?? ''}"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ aria-hidden="true"
+>
+ <path
+ fill-rule="evenodd"
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+ clip-rule="evenodd"
+ />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/x-mark.svelte b/apps/kit/src/lib/components/icons/x-mark.svelte
new file mode 100644
index 0000000..fd1c6a1
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/x-mark.svelte
@@ -0,0 +1,11 @@
+<svg
+ class="h-5 w-5 {$$restProps.class ?? ''}"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ aria-hidden="true"
+>
+ <path
+ d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+ />
+</svg>
diff --git a/apps/kit/src/lib/components/icons/x.svelte b/apps/kit/src/lib/components/icons/x.svelte
index c7e05a8..6125ab8 100644
--- a/apps/kit/src/lib/components/icons/x.svelte
+++ b/apps/kit/src/lib/components/icons/x.svelte
@@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 {$$restProps.class ?? ''}" fill="none" viewBox="0 0 24 24"
- stroke="currentColor" stroke-width="2">
- <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
-</svg> \ No newline at end of file
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6 {$$restProps.class ?? ''}"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ stroke-width="2"
+>
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="M6 18L18 6M6 6l12 12"
+ />
+</svg>
generated by cgit v1.3 (git 2.53.0) at 2026-04-02 18:09:46 +0200