@geoffcox/sterling-svelte 0.0.7 → 0.0.9

package/surfaces/Dialog.svelte

@@ -0,0 +1,241 @@
+<script>import { createEventDispatcher, onMount, tick } from "svelte";
+import Button from "../buttons/Button.svelte";
+import CloseX from "./CloseX.svelte";
+const dialogFadeDuration = 250;
+export let open = false;
+export let returnValue = "";
+export let backdropCloses = false;
+let dialogRef;
+let contentRef;
+let formRef;
+let closing = false;
+const dispatch = createEventDispatcher();
+const onDocumentClick = (event) => {
+  const targetNode = event?.target;
+  if (targetNode && !contentRef.contains(targetNode) && backdropCloses) {
+    open = false;
+  }
+};
+const showDialog = () => {
+  if (dialogRef?.open === false) {
+    document.addEventListener("click", onDocumentClick, true);
+    dialogRef.showModal();
+  }
+  open = true;
+};
+const closeDialog = (returnValue2 = "") => {
+  if (dialogRef?.open === true) {
+    document.removeEventListener("click", onDocumentClick);
+    closing = true;
+    tick();
+    setTimeout(() => {
+      dialogRef.close(returnValue2);
+      open = false;
+      closing = false;
+    }, dialogFadeDuration);
+  } else {
+    open = false;
+  }
+};
+const updateDialog = (open2) => {
+  if (open2) {
+    showDialog();
+  } else {
+    closeDialog();
+  }
+};
+const onCancel = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+  closeDialog();
+  return false;
+};
+const onSubmit = (event) => {
+  console.log(event);
+  const anyEvent = event;
+  if (anyEvent?.submitter.type === "submit") {
+    if (dialogRef.open) {
+      closeDialog(anyEvent?.submitter.value ?? "");
+      setTimeout(() => {
+        formRef.requestSubmit(anyEvent?.submitter);
+      }, dialogFadeDuration);
+      event.preventDefault();
+      return false;
+    }
+  } else {
+    console.log("cancelling");
+    event.preventDefault();
+    return false;
+  }
+};
+const onClose = (event) => {
+  returnValue = dialogRef.returnValue;
+};
+$: {
+  updateDialog(open);
+}
+onMount(() => {
+  updateDialog(open);
+  dialogRef.addEventListener("cancel", onCancel);
+  dialogRef.addEventListener("close", onClose);
+  return () => {
+    dialogRef?.removeEventListener("cancel", onCancel);
+    dialogRef?.removeEventListener("close", onClose);
+  };
+});
+</script>
+
+<!-- @component
+A styled &lt;dialog&gt; element
+
+- Slots for typical dialog content.
+- Props and events to make using &lt;dialog&gt; easier
+-->
+<dialog
+  class="dialog"
+  class:open
+  class:closing
+  bind:this={dialogRef}
+  on:close
+  on:cancel
+  {...$$restProps}
+>
+  <form method="dialog" bind:this={formRef} on:submit={onSubmit}>
+    <div class="content" bind:this={contentRef}>
+      <slot name="content">
+        <div class="header">
+          <slot name="header">
+            <div class="title">
+              <slot name="title" />
+            </div>
+            <div class="close">
+              <Button variant="ghost" shape="circular" on:click={() => closeDialog()}>
+                <div class="close-x">
+                  <CloseX />
+                </div>
+              </Button>
+            </div>
+          </slot>
+        </div>
+        <div class="body">
+          <slot name="body" />
+        </div>
+        <div class="separator" />
+        <div class="footer">
+          <slot name="footer" />
+        </div>
+      </slot>
+    </div>
+  </form>
+</dialog>
+
+<style>
+  .dialog {
+    padding: 0;
+    border: none;
+    background: none;
+  }
+
+  .dialog::backdrop {
+    backdrop-filter: blur(2px);
+    background: rgba(0, 0, 0, 0.3);
+    transition: opacity 250ms;
+    opacity: 0;
+  }
+
+  .dialog.open::backdrop {
+    opacity: 1;
+  }
+
+  .dialog.closing::backdrop {
+    opacity: 0;
+  }
+
+  .header {
+    background-color: var(--Display__background-color);
+  }
+
+  .content {
+    background-color: var(--Common__background-color);
+    border-color: var(--Common__border-color);
+    border-radius: var(--Common__border-radius);
+    border-style: var(--Common__border-style);
+    border-width: var(--Common__border-width);
+    box-sizing: border-box;
+    color: var(--Common__color);
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto auto;
+    justify-content: stretch;
+    justify-items: stretch;
+    align-items: stretch;
+    transition: opacity 250ms;
+    opacity: 0;
+  }
+
+  .dialog.open .content {
+    opacity: 1;
+  }
+
+  .dialog.closing .content {
+    opacity: 0;
+  }
+
+  .header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr;
+    justify-items: stretch;
+    align-items: center;
+    padding: 0.25em 0.5em;
+  }
+
+  .title {
+    font-size: 1.4em;
+  }
+
+  .close {
+    justify-self: flex-end;
+  }
+
+  .close :global(button) {
+    width: 1.75em;
+    height: 1.75em;
+    padding: 0;
+  }
+
+  .close-x {
+    width: 1.5em;
+    height: 1.5em;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    place-content: center;
+    align-content: center;
+  }
+
+  .body {
+    padding: 1em;
+  }
+
+  .separator {
+    background-color: var(--Display__background-color);
+    height: var(--Common__border-width);
+    margin: 0 0.25em;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    justify-items: flex-end;
+    padding: 0.5em 1em;
+    gap: 5px;
+  }
+
+  @media (prefers-reduced-motion) {
+    .dialog::backdrop,
+    .content {
+      transition: none;
+    }
+  }
+</style>

package/surfaces/Dialog.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        open?: boolean | undefined;
+        returnValue?: string | undefined;
+        backdropCloses?: boolean | undefined;
+    };
+    events: {
+        close: Event;
+        cancel: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        content: {};
+        header: {};
+        title: {};
+        body: {};
+        footer: {};
+    };
+};
+export type DialogProps = typeof __propDef.props;
+export type DialogEvents = typeof __propDef.events;
+export type DialogSlots = typeof __propDef.slots;
+/**
+ * A styled &lt;dialog&gt; element
+ *
+ * - Slots for typical dialog content.
+ * - Props and events to make using &lt;dialog&gt; easier
+ */
+export default class Dialog extends SvelteComponentTyped<DialogProps, DialogEvents, DialogSlots> {
+}
+export {};

package/theme/colors.js

@@ -1,6 +1,8 @@
 export const neutrals = {
     neutral0: 'hsl(0, 0%, 0%)',
+    neutral10: 'hsl(0, 0%, 12%)',
     neutral15: 'hsl(0, 0%, 15%)',
+    neutral20: 'hsl(0, 0%, 20%)',
     neutral30: 'hsl(0, 0%, 30%)',
     neutral45: 'hsl(0, 0%, 45%)',
     neutral60: 'hsl(0, 0%, 60%)',

package/theme/darkTheme.js

@@ -25,11 +25,11 @@ export const darkTheme = {
     '--Common__border-color--disabled': neutrals.neutral92,
     '--Common__color--disabled': neutrals.neutral92,
     // ----- Layer ---- //
-    '--Layer__background-color--1': neutrals.neutral30,
+    '--Layer__background-color--1': neutrals.neutral20,
     '--Layer__color--1': neutrals.neutral100,
-    '--Layer__background-color--2': neutrals.neutral45,
+    '--Layer__background-color--2': neutrals.neutral10,
     '--Layer__color--2': neutrals.neutral100,
-    '--Layer__background-color--3': neutrals.neutral60,
+    '--Layer__background-color--3': neutrals.neutral45,
     '--Layer__color--3': neutrals.neutral100,
     // ----- Button ----- //
     '--Button__background-color': neutrals.neutral45,

package/theme/lightTheme.js

@@ -22,8 +22,8 @@ export const lightTheme = {
     '--Common__outline-width': '2px',
     // disabled
     '--Common__background-color--disabled': neutrals.neutral96,
-    '--Common__border-color--disabled': neutrals.neutral60,
-    '--Common__color--disabled': neutrals.neutral60,
+    '--Common__border-color--disabled': neutrals.neutral75,
+    '--Common__color--disabled': neutrals.neutral75,
     // ----- Layer ---- //
     '--Layer__background-color--1': neutrals.neutral98,
     '--Layer__color--1': neutrals.neutral15,