From f8ae7740f4a79d1374e136aba58b4c75f09b1396 Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Sun, 25 Sep 2022 19:25:17 +0800 Subject: feat: More complete alert --- apps/kit/src/lib/components/alert.svelte | 220 +++++++++++++++++++-------- apps/kit/src/routes/book/+page.svelte | 1 + apps/kit/src/routes/book/alerts/+page.svelte | 13 +- 3 files changed, 166 insertions(+), 68 deletions(-) diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte index 53aa783..6cc0e63 100644 --- a/apps/kit/src/lib/components/alert.svelte +++ b/apps/kit/src/lib/components/alert.svelte @@ -11,30 +11,74 @@ XMark, } from "./icons"; + const dispatch = createEventDispatcher(); const noCooldownSetting = "no-cooldown"; + + 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. + */ export let id = "alert--" + noCooldownSetting + "--" + random_string(4); + /** + * The title to communicate, value is optional + */ export let title = ""; + /** + * The message to communicate, value is optional + */ export let message = ""; + /** + * Changes the alerts color and icon. + */ export let type: "info" | "success" | "warning" | "error" = "info"; + /** + * If true the alert can be removed from the DOM by clicking on a X icon on the upper right hand courner + */ 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). + **/ export let closeableCooldown = "-1"; + /** + * The text that is displayed on the right link + */ export let rightLinkText = ""; + /** + * An array of list items displayed under the message or title + */ export let listItems: Array = []; + /** + * An array of {id:string;text:string;color?:string}, where id is dispatched back as an svelte event with this syntax act$id (ex: on:actcancel). + * Text is the button text + * Color is the optional tailwind color to used, the value is used in classes like bg-$color-50. + */ 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 rightLinkClick if you want to intercept the click without navigating + /** + * This value is set on a plain anchor tag without any svelte routing, + * listen to the on:rightLinkClick if you want to intercept the click without navigating + */ export let rightLinkHref = "javascript:void(0)"; - export let visible = true; + $: cooldownEnabled = + id.indexOf(noCooldownSetting) === -1 && + closeable && + (closeableCooldown === "~" || parseInt(closeableCooldown) > 0); + /** + * Sets this alerts visibility state, when this is false it is removed from the dom using svelte a {#if} block. + */ + export let visible = + closeableCooldown === "~" || parseInt(closeableCooldown) > 0 + ? false + : true; - const dispatch = createEventDispatcher(); const cooldownStorageKey = "lastseen--" + id; - let iconComponent: any; - let colorClassPart = ""; - $: switch (type) { case "info": { colorClassPart = "blue"; @@ -58,11 +102,6 @@ } } - $: cooldownEnabled = - id.indexOf(noCooldownSetting) === -1 && - closeable && - (closeableCooldown === "~" || parseInt(closeableCooldown) > 0); - function close() { visible = false; if (cooldownEnabled) { @@ -83,7 +122,7 @@ } function actionClicked(name: string) { - dispatch("act-" + name); + dispatch("act" + name); } // Manages the state of the alert if cooldown is enabled @@ -97,12 +136,12 @@ visible = true; return; } - if (!visible) { - console.log( - "Alert " + id + " is not visible, stopping cooldown change" - ); - return; - } + // if (!visible) { + // console.log( + // "Alert " + id + " is not visible, stopping cooldown change" + // ); + // return; + // } if (closeableCooldown === "~") { console.log("Alert " + id + " has an infinite cooldown, hiding"); visible = false; @@ -137,6 +176,19 @@ if (cooldownEnabled) { run_cooldown(); } + + if ( + closeable && + closeableCooldown && + id.indexOf(noCooldownSetting) !== -1 + ) { + // TODO: This prints twice before shutting up as it should, in this example look at the only alert with closeableCooldown in alertsbook. + // Looks like svelte mounts three times and that my id is only set on the third. Not sure it does at all after logging the id onMount. + console.error( + "Alert cooldown does not work without specifying a unique id, related id: " + + id + ); + } }); @@ -149,52 +201,85 @@ class="text-{colorClassPart}-400" /> -
- {#if title} -

- {title} -

- {/if} - {#if message} -
-

- {@html message} - {#if rightLinkText} -

- rightLinkClicked()} - class="whitespace-nowrap font-medium text-{colorClassPart}-700 hover:text-{colorClassPart}-600" - > - {rightLinkText} - - -

+
+ {#if !rightLinkText} + {#if title} +

+ {title} +

+ {/if} + {#if message} +
+

+ {@html message} +

+
+ {/if} + {#if listItems?.length ?? 0} +
    + {#each listItems as listItem} +
  • {listItem}
    • + {/each} +
+ {/if} + {:else} +
+
+ {#if title} +

+ {title} +

{/if} + {#if message} +
+

+ {@html message} +

+
+ {/if} + {#if listItems?.length ?? 0} +
    + {#each listItems as listItem} +
  • {listItem}
    • + {/each} +
+ {/if} +
+

+ rightLinkClicked()} + class="whitespace-nowrap font-medium text-{colorClassPart}-700 hover:text-{colorClassPart}-600" + > + {rightLinkText} + +

- {#if listItems?.length ?? 0} -
    - {#each listItems as listItem} -
  • {listItem}
    • - {/each} -
- {/if}
{/if} -
- {#if actions?.length ?? 0} -
-
- {#each actions as action} - {@const color = action?.color ?? colorClassPart} - - {/each} + > + {action.text} + + {/each} +
-
- {/if} + {/if} +
{#if closeable}
diff --git a/apps/kit/src/routes/book/+page.svelte b/apps/kit/src/routes/book/+page.svelte index e69de29..635b3c2 100644 --- a/apps/kit/src/routes/book/+page.svelte +++ b/apps/kit/src/routes/book/+page.svelte @@ -0,0 +1 @@ +

A showcase of greatoffices components

diff --git a/apps/kit/src/routes/book/alerts/+page.svelte b/apps/kit/src/routes/book/alerts/+page.svelte index 93b4850..566ccca 100644 --- a/apps/kit/src/routes/book/alerts/+page.svelte +++ b/apps/kit/src/routes/book/alerts/+page.svelte @@ -26,6 +26,7 @@ type="info" message="This is message" title="This is title" + closeable actions={[ { id: "confirm", @@ -45,6 +46,8 @@ alert("Right link clicked")} rightLinkText="Link or action" + title="Go here" + message="Hehe" type="info" /> @@ -53,7 +56,15 @@ { + alert("Repeat requested"); + }} + actions={[{ id: "repeat", text: "Try again" }]} />
-- cgit v1.3