@geoffcox/sterling-svelte 0.0.30 → 1.0.0

package/Dialog.svelte

@@ -1,83 +1,114 @@
-<script>import { onMount, tick } from "svelte";
-import Button from "./Button.svelte";
+<script>import '$lib/css/sterling.css';
+import { onMount, tick } from 'svelte';
+import Button from './Button.svelte';
 const dialogFadeDuration = 250;
-export let open = false;
-export let returnValue = "";
+// ----- Props ----- //
+/** When true, clicking outside the dialog causes the dialog close. */
 export let backdropCloses = false;
+/** When true, the dialog is open; otherwise the dialog is closed. */
+export let open = false;
+/**
+ * The return value from the dialog:
+ * - an empty string indicates cancellation
+ * - a value indicates form submission.
+ */
+export let returnValue = '';
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let dialogRef;
 let contentRef;
 let formRef;
 let closing = false;
+// ----- Event Handlers ----- //
 const onDocumentClick = (event) => {
-  const targetNode = event?.target;
-  if (targetNode && !contentRef?.contains(targetNode) && backdropCloses) {
-    open = false;
-  }
+    // as tracking clicks outside the dialog is only active while the dialog is open
+    // the clickOutside action is not used and reimplemented here.
+    const targetNode = event?.target;
+    // the content must be used as the container because dialog::backdrop is considered
+    // part of the HTMLDialogElement
+    if (targetNode && !contentRef?.contains(targetNode) && backdropCloses) {
+        open = false;
+    }
 };
 const showDialog = () => {
-  if (dialogRef?.open === false) {
-    document.addEventListener("click", onDocumentClick, true);
-    dialogRef.showModal();
-  }
-  open = true;
+    if (dialogRef?.open === false) {
+        // when open, track clicks outside the dialog (use capture = true)
+        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 closeDialog = (returnValue = '') => {
+    if (dialogRef?.open === true) {
+        // when closed, stop tracking clicks outside the dialog
+        document.removeEventListener('click', onDocumentClick);
+        // to allow time for the CSS transition animation, closing the dialog is delayed
+        closing = true;
+        tick();
+        setTimeout(() => {
+            dialogRef.close(returnValue);
+            open = false;
+            closing = false;
+        }, dialogFadeDuration);
+    }
+    else {
+        open = false;
+    }
 };
-const updateDialog = (open2) => {
-  if (open2) {
-    showDialog();
-  } else {
-    closeDialog();
-  }
+const updateDialog = (open) => {
+    if (open) {
+        showDialog();
+    }
+    else {
+        closeDialog();
+    }
 };
 const onCancel = (event) => {
-  event.preventDefault();
-  event.stopPropagation();
-  closeDialog();
-  return false;
+    // Cancelling a dialog instantly hides the dialog.
+    // To allow animation with closeDialog, this event is canceled.
+    event.preventDefault();
+    event.stopPropagation();
+    closeDialog();
+    return false;
 };
 const onSubmit = (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;
+    // Submitting a form instantly hides the dialog.
+    // The dialog.close event is not cancellable, but form.submit is.
+    // To allow animation with closeDialog, this event is canceled.
+    // The form is resubmitted after the dialog closes to ensure the form is in the correct state.
+    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 {
+        event.preventDefault();
+        return false;
     }
-  } else {
-    event.preventDefault();
-    return false;
-  }
 };
 const onClose = (event) => {
-  returnValue = dialogRef.returnValue;
+    // This event is not cancelable.
+    // Update the returnValue whenever the dialog closes.
+    returnValue = dialogRef.returnValue;
 };
 $: {
-  updateDialog(open);
+    updateDialog(open);
 }
 onMount(() => {
-  updateDialog(open);
-  dialogRef.addEventListener("cancel", onCancel);
-  dialogRef.addEventListener("close", onClose);
-  return () => {
-    dialogRef?.removeEventListener("cancel", onCancel);
-    dialogRef?.removeEventListener("close", onClose);
-  };
+    updateDialog(open);
+    dialogRef.addEventListener('cancel', onCancel);
+    dialogRef.addEventListener('close', onClose);
+    return () => {
+        dialogRef?.removeEventListener('cancel', onCancel);
+        dialogRef?.removeEventListener('close', onClose);
+    };
 });
 </script>
 
@@ -89,7 +120,7 @@ A styled &lt;dialog&gt; element
 -->
 <dialog
   bind:this={dialogRef}
-  class="dialog"
+  class={`sterling-dialog ${variant}`}
   class:open
   class:closing
   on:close
@@ -105,7 +136,7 @@ A styled &lt;dialog&gt; element
               <slot name="title" />
             </div>
             <div class="close">
-              <Button variant="ghost" shape="circular" on:click={() => closeDialog()}>
+              <Button variant={`circular tool ${variant}`} on:click={() => closeDialog()}>
                 <div class="close-x" />
               </Button>
             </div>
@@ -122,130 +153,3 @@ A styled &lt;dialog&gt; element
     </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(--stsv-common__background-color--secondary);
-  }
-
-  .content {
-    background-color: var(--stsv-common__background-color);
-    border-color: var(--stsv-common__border-color);
-    border-radius: var(--stsv-common__border-radius);
-    border-style: var(--stsv-common__border-style);
-    border-width: var(--stsv-common__border-width);
-    box-sizing: border-box;
-    color: var(--stsv-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: 1em;
-    height: 1em;
-    position: relative;
-  }
-
-  .close-x:before,
-  .close-x:after {
-    content: '';
-    position: absolute;
-    width: 0.75em;
-    height: 0.125em;
-    background-color: currentColor;
-    top: 0.45em;
-  }
-
-  .close-x:before {
-    transform: rotate(45deg);
-    left: 0.125em;
-  }
-
-  .close-x:after {
-    transform: rotate(-45deg);
-    right: 0.125em;
-  }
-
-  .body {
-    padding: 1em;
-  }
-
-  .separator {
-    background-color: var(--stsv-common__background-color--secondary);
-    height: var(--stsv-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/Dialog.svelte.d.ts

@@ -1,10 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import '$lib/css/sterling.css';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        backdropCloses?: boolean | undefined;
         open?: boolean | undefined;
         returnValue?: string | undefined;
-        backdropCloses?: boolean | undefined;
+        variant?: string | undefined;
     };
     events: {
         close: Event;

package/Dropdown.svelte

@@ -1,66 +1,75 @@
-<script>import { createEventDispatcher } from "svelte";
-import Popover from "./Popover.svelte";
-import { clickOutside } from "./actions/clickOutside";
-import { idGenerator } from "./idGenerator";
-import { prefersReducedMotion } from "./stores/prefersReducedMotion";
-import { slide } from "svelte/transition";
-const popupId = idGenerator.nextId("Dropdown-popup");
-export let colorful = false;
-export let composed = false;
+<script>import { createEventDispatcher } from 'svelte';
+import Popover from './Popover.svelte';
+import { clickOutside } from './actions/clickOutside';
+import { idGenerator } from './idGenerator';
+import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+import { slide } from 'svelte/transition';
+const popupId = idGenerator.nextId('Dropdown-popup');
+// ----- Props ----- //
+/** Disables the dropdown. */
 export let disabled = false;
+/** When true, the dropdown is open. */
 export let open = false;
+/** When the user clicks away from the dropdown, it remains open. */
 export let stayOpenOnClickAway = false;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let dropdownRef;
 let popupContentRef;
+// ----- Events ----- //
 const dispatch = createEventDispatcher();
-const raiseOpen = (open2) => {
-  dispatch("open", { open: open2 });
+const raiseOpen = (open) => {
+    dispatch('open', { open });
 };
+// ----- Reactions ----- //
 $: {
-  raiseOpen(open);
+    raiseOpen(open);
 }
+// ----- Methods ----- //
 export const click = () => {
-  dropdownRef?.click();
+    dropdownRef?.click();
 };
 export const blur = () => {
-  dropdownRef?.blur();
+    dropdownRef?.blur();
 };
 export const focus = (options) => {
-  dropdownRef?.focus(options);
+    dropdownRef?.focus(options);
 };
+// ----- Event Handlers ----- //
 const onClick = (event) => {
-  if (!disabled) {
-    open = !open;
-    event.preventDefault();
-    event.stopPropagation();
-  }
-};
-const onKeydown = (event) => {
-  if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
-    switch (event.key) {
-      case " ":
+    if (!disabled) {
         open = !open;
         event.preventDefault();
         event.stopPropagation();
-        return false;
-      case "Escape":
-        open = false;
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
     }
-  }
+};
+const onKeydown = (event) => {
+    if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
+        switch (event.key) {
+            case ' ':
+                open = !open;
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            case 'Escape':
+                open = false;
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+        }
+    }
 };
 const onClickOutside = (event) => {
-  if (!stayOpenOnClickAway) {
-    open = false;
-  }
+    if (!stayOpenOnClickAway) {
+        open = false;
+    }
 };
+// ----- Animation ----- //
 const slideNoOp = (node, params) => {
-  return { delay: 0, duration: 0 };
+    return { delay: 0, duration: 0 };
 };
-$:
-  slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
+$: slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
 </script>
 
 <div
@@ -68,9 +77,7 @@ $:
   aria-controls={popupId}
   aria-haspopup={true}
   aria-expanded={open}
-  class="sterling-dropdown"
-  class:colorful
-  class:composed
+  class={`sterling-dropdown ${variant}`}
   class:disabled
   role="combobox"
   tabindex="0"
@@ -107,9 +114,9 @@ $:
   {...$$restProps}
 >
   <div class="value">
-    <slot name="value" {colorful} {composed} {disabled} {open} />
+    <slot name="value" {disabled} {open} {variant} />
   </div>
-  <slot name="button" {colorful} {composed} {disabled} {open}>
+  <slot name="button" {disabled} {open} {variant}>
     <div class="button">
       <div class="chevron" />
     </div>
@@ -117,185 +124,11 @@ $:
 
   <Popover reference={dropdownRef} open={!disabled && open}>
     <div
-      class="popup-content"
+      class={`sterling-dropdown-popup-content ${variant}`}
       transition:slideMotion|global={{ duration: 200 }}
-      class:colorful
       bind:this={popupContentRef}
     >
-      <slot {colorful} {composed} {disabled} {open} />
+      <slot {disabled} {open} {variant} />
     </div>
   </Popover>
 </div>
-
-<style>
-  .sterling-dropdown {
-    align-content: stretch;
-    align-items: stretch;
-    background-color: var(--stsv-input__background-color);
-    border-color: var(--stsv-input__border-color);
-    border-radius: var(--stsv-button__border-radius);
-    border-style: var(--stsv-input__border-style);
-    border-width: var(--stsv-input__border-width);
-    color: var(--stsv-input__color);
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    grid-template-rows: auto;
-    outline: none;
-    overflow: hidden;
-    padding: 0;
-    position: relative;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-dropdown:hover {
-    background-color: var(--stsv-input__background-color--hover);
-    border-color: var(--stsv-input__border-color--hover);
-    color: var(--stsv-input__color--hover);
-  }
-
-  .sterling-dropdown:focus {
-    background-color: var(--stsv-input__background-color--focus);
-    border-color: var(--stsv-input__border-color--focus);
-    color: var(--stsv-input__color--focus);
-    outline-color: var(--stsv-common__outline-color);
-    outline-offset: var(--stsv-common__outline-offset);
-    outline-style: var(--stsv-common__outline-style);
-    outline-width: var(--stsv-common__outline-width);
-  }
-
-  .sterling-dropdown.colorful {
-    background-color: var(--stsv-input--colorful__background-color);
-    border-color: var(--stsv-input--colorful__border-color);
-    color: var(--stsv-input--colorful__color);
-  }
-
-  .sterling-dropdown.colorful:hover {
-    background-color: var(--stsv-input--colorful__background-color--hover);
-    border-color: var(--stsv-input--colorful__border-color--hover);
-    color: var(--stsv-input--colorful__color--hover);
-  }
-
-  .sterling-dropdown.colorful:focus {
-    background-color: var(--stsv-input--colorful__background-color--focus);
-    border-color: var(--stsv-input--colorful__border-color--focus);
-    color: var(--stsv-input--colorful__color--focus);
-  }
-
-  .sterling-dropdown.disabled {
-    cursor: not-allowed;
-    outline: none;
-  }
-
-  .sterling-dropdown.disabled .button {
-    cursor: not-allowed;
-  }
-
-  .sterling-dropdown::after {
-    background: repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
-      var(--stsv-common--disabled__stripe-color),
-      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt)
-        calc(2 * var(--stsv-common--disabled__stripe-width))
-    );
-    bottom: 0;
-    content: '';
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    pointer-events: none;
-    transition: opacity 250ms;
-  }
-
-  .sterling-dropdown.disabled::after {
-    opacity: 1;
-  }
-
-  .sterling-dropdown.composed,
-  .sterling-dropdown.composed:hover,
-  .sterling-dropdown.composed.focus {
-    background: none;
-    border: none;
-    outline: none;
-  }
-
-  .sterling-dropdown.composed.disabled::after {
-    opacity: 0;
-  }
-
-  .value {
-    overflow: hidden;
-  }
-
-  .button {
-    align-self: center;
-    cursor: pointer;
-  }
-
-  .chevron {
-    display: block;
-    position: relative;
-    border: none;
-    background: none;
-    margin: 0;
-    height: 100%;
-    min-width: 2em;
-    min-height: 2em;
-  }
-
-  .chevron::after {
-    position: absolute;
-    content: '';
-    top: 50%;
-    left: 50%;
-    width: 7px;
-    height: 7px;
-    border-right: 3px solid currentColor;
-    border-top: 3px solid currentColor;
-    /* 
-			The chevron is a right triangle, rotated to face down.
-			It should be moved up so it is centered vertically after rotation.
-			The amount to move is the hypotenuse of the right triangle of the chevron.
-		    For a right triangle with equal a and b where c=1
-			a^2 + b^2 = c^2 	
-		    a^2 + a^2 = c^2 
-		    2a^2 = c^2
-			2a^2 = 1
-			a^2 = 0.5
-			a = sqrt(0.5)
-			a = 0.707
-		*/
-    transform: translate(-50%, calc(-50% / 0.707)) rotate(135deg);
-    transform-origin: 50% 50%;
-  }
-
-  .popup-content {
-    background-color: var(--stsv-common__background-color);
-    border-color: var(--stsv-common__border-color);
-    border-radius: var(--stsv-common__border-radius);
-    border-style: var(--stsv-common__border-style);
-    border-width: var(--stsv-common__border-width);
-    color: var(--stsv-common__color);
-    padding: 0.25em;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    overflow: hidden;
-  }
-
-  .popup-content.colorful {
-    background-color: var(--stsv-common--colorful__background-color);
-    border-color: var(--stsv-common--colorful__border-color);
-    color: var(--stsv-common--colorful__color);
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-dropdown,
-    .sterling-dropdown::after {
-      transition: none;
-    }
-  }
-</style>

package/Dropdown.svelte.d.ts

@@ -2,11 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        colorful?: boolean | undefined;
-        composed?: boolean | undefined;
         disabled?: boolean | undefined;
         open?: boolean | undefined;
         stayOpenOnClickAway?: boolean | undefined;
+        variant?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -44,22 +43,19 @@ declare const __propDef: {
     };
     slots: {
         value: {
-            colorful: boolean;
-            composed: boolean;
             disabled: boolean;
             open: boolean;
+            variant: string;
         };
         button: {
-            colorful: boolean;
-            composed: boolean;
             disabled: boolean;
             open: boolean;
+            variant: string;
         };
         default: {
-            colorful: boolean;
-            composed: boolean;
             disabled: boolean;
             open: boolean;
+            variant: string;
         };
     };
 };