diff options
Diffstat (limited to 'old-apps/web-shared/src/components/modal.svelte')
| -rw-r--r-- | old-apps/web-shared/src/components/modal.svelte | 66 |
1 files changed, 0 insertions, 66 deletions
diff --git a/old-apps/web-shared/src/components/modal.svelte b/old-apps/web-shared/src/components/modal.svelte deleted file mode 100644 index f3b633c..0000000 --- a/old-apps/web-shared/src/components/modal.svelte +++ /dev/null @@ -1,66 +0,0 @@ -<script> - import {random_string} from "$shared/lib/helpers"; - - export let title = ""; - let isVisible = false; - const modal_id = "modal_" + random_string(5); - - function handle_keyup(e) { - if (e.key === "Escape") { - isVisible = false; - } - } - - export const functions = { - open() { - isVisible = true; - window.addEventListener("keyup", handle_keyup); - }, - close() { - isVisible = false; - window.removeEventListener("keyup", handle_keyup); - }, - }; -</script> - -<div class="modal modal--animate-scale flex flex-center padding-md bg-dark bg-opacity-40% {isVisible ? 'modal--is-visible' : ''}" - id={modal_id} -> - <div class="modal__content width-100% max-width-xs max-height-100% overflow-auto radius-md shadow-md bg" - role="alertdialog" - > - <header class="padding-y-sm padding-x-md flex items-center justify-between" - > - <h4 class="text-truncate">{title}</h4> - - <button class="reset modal__close-btn modal__close-btn--inner" - on:click={functions.close} - > - <svg class="icon" - viewBox="0 0 20 20"> - <title>Close modal window</title> - <g fill="none" - stroke="currentColor" - stroke-miterlimit="10" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - > - <line x1="3" - y1="3" - x2="17" - y2="17"/> - <line x1="17" - y1="3" - x2="3" - y2="17"/> - </g> - </svg> - </button> - </header> - - <div class="padding-bottom-md padding-x-md"> - <slot/> - </div> - </div> -</div> |