@geoffcox/sterling-svelte 0.0.31 → 1.0.1

package/Select.svelte

@@ -1,145 +1,159 @@
-<script>import { createEventDispatcher, tick } from "svelte";
-import { clickOutside } from "./actions/clickOutside";
-import { idGenerator } from "./idGenerator";
-import List from "./List.svelte";
-import Popover from "./Popover.svelte";
-const popupId = idGenerator.nextId("Select-popup");
+<script>import { createEventDispatcher, tick } from 'svelte';
+import { clickOutside } from './actions/clickOutside';
+import { idGenerator } from './idGenerator';
+import List from './List.svelte';
+import Popover from './Popover.svelte';
+const popupId = idGenerator.nextId('Select-popup');
+// ----- Props ----- //
 export let disabled = false;
-export let composed = false;
+/** When true, the select's dropdown is open. */
 export let open = false;
-export let selectedValue = void 0;
+/** The value of the selected item.*/
+export let selectedValue = undefined;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
+// Tracks the previous open state
 let prevOpen = false;
+// Tracks the pending selected index
 let pendingSelectedValue = selectedValue;
 let selectRef;
 let listRef;
+// ----- Events ----- //
 const dispatch = createEventDispatcher();
 const raiseSelect = (value) => {
-  dispatch("select", { value });
+    dispatch('select', { value });
 };
 const raisePending = (value) => {
-  dispatch("pending", { value });
+    dispatch('pending', { value });
 };
+// ----- Reactions ----- //
 $: {
-  pendingSelectedValue = selectedValue;
+    pendingSelectedValue = selectedValue;
 }
 $: {
-  raiseSelect(selectedValue);
+    raiseSelect(selectedValue);
 }
 $: {
-  if (open) {
-    raisePending(pendingSelectedValue);
-  }
+    if (open) {
+        raisePending(pendingSelectedValue);
+    }
 }
 $: {
-  if (open && !prevOpen) {
-    prevOpen = true;
-    tick().then(() => {
-      setTimeout(() => {
-        listRef?.focus();
-        listRef?.scrollToSelectedItem();
-      }, 10);
-    });
-  } else if (prevOpen) {
-    prevOpen = false;
-    tick().then(() => selectRef?.focus());
-  }
+    if (open && !prevOpen) {
+        prevOpen = true;
+        tick().then(() => {
+            setTimeout(() => {
+                listRef?.focus();
+                listRef?.scrollToSelectedItem();
+            }, 10);
+        });
+    }
+    else if (prevOpen) {
+        prevOpen = false;
+        tick().then(() => selectRef?.focus());
+    }
 }
+// ----- Methods ----- //
 export const blur = () => {
-  selectRef?.blur();
+    selectRef?.blur();
 };
 export const click = () => {
-  selectRef?.click();
+    selectRef?.click();
 };
 export const focus = (options) => {
-  selectRef?.focus();
+    selectRef?.focus();
 };
 export const scrollToSelectedItem = () => {
-  if (open) {
-    listRef?.scrollToSelectedItem();
-  }
+    if (open) {
+        listRef?.scrollToSelectedItem();
+    }
 };
+// ----- Event Handlers ----- //
 const onSelectClick = (event) => {
-  if (!disabled) {
-    open = !open;
-    event.preventDefault();
-    event.stopPropagation();
-  }
+    if (!disabled) {
+        open = !open;
+        event.preventDefault();
+        event.stopPropagation();
+    }
 };
 const onSelectKeydown = (event) => {
-  if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-    switch (event.key) {
-      case " ":
-        {
-          if (!open) {
-            open = true;
-          }
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        break;
-      case "ArrowUp":
-        {
-          if (selectedValue) {
-            listRef.selectPreviousItem();
-          } else {
-            listRef.selectLastItem();
-          }
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
+    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+        switch (event.key) {
+            case ' ':
+                {
+                    if (!open) {
+                        open = true;
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return false;
+                }
+                break;
+            case 'ArrowUp':
+                {
+                    if (selectedValue) {
+                        listRef.selectPreviousItem();
+                    }
+                    else {
+                        listRef.selectLastItem();
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return false;
+                }
+                break;
+            case 'ArrowDown':
+                {
+                    if (selectedValue) {
+                        listRef.selectNextItem();
+                    }
+                    else {
+                        listRef.selectFirstItem();
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return false;
+                }
+                break;
         }
-        break;
-      case "ArrowDown":
-        {
-          if (selectedValue) {
-            listRef.selectNextItem();
-          } else {
-            listRef.selectFirstItem();
-          }
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        break;
     }
-  }
 };
 const onListKeydown = (event) => {
-  if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-    switch (event.key) {
-      case "Enter":
-        {
-          selectedValue = pendingSelectedValue;
-          open = !open;
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        break;
-      case "Escape":
-        {
-          pendingSelectedValue = selectedValue;
-          open = !open;
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
+    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+        switch (event.key) {
+            case 'Enter':
+                {
+                    selectedValue = pendingSelectedValue;
+                    open = !open;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return false;
+                }
+                break;
+            case 'Escape':
+                {
+                    pendingSelectedValue = selectedValue;
+                    open = !open;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return false;
+                }
+                break;
         }
-        break;
     }
-  }
 };
 const onListClick = (event) => {
-  open = false;
-  event.preventDefault();
-  event.stopPropagation();
-  return false;
+    open = false;
+    event.preventDefault();
+    event.stopPropagation();
+    return false;
 };
 const onListSelect = (event) => {
-  pendingSelectedValue = event.detail.value;
-  if (!open) {
-    selectedValue = pendingSelectedValue;
-  }
+    pendingSelectedValue = event.detail.value;
+    if (!open) {
+        selectedValue = pendingSelectedValue;
+    }
 };
 </script>
 
@@ -148,8 +162,7 @@ const onListSelect = (event) => {
   aria-controls={popupId}
   aria-haspopup="listbox"
   aria-expanded={open}
-  class="sterling-select"
-  class:composed
+  class={`sterling-select ${variant}`}
   class:disabled
   role="combobox"
   tabindex="0"
@@ -186,7 +199,7 @@ const onListSelect = (event) => {
   {...$$restProps}
 >
   <div class="value">
-    <slot name="value" {disabled} {open} {selectedValue}>
+    <slot name="value" {disabled} {open} {selectedValue} {variant}>
       {#if selectedValue}
         {selectedValue}
       {:else}
@@ -195,165 +208,24 @@ const onListSelect = (event) => {
     </slot>
   </div>
   <div class="button">
-    <slot name="button" {disabled} {open} {selectedValue}>
+    <slot name="button" {disabled} {open} {selectedValue} {variant}>
       <div class="chevron" />
     </slot>
   </div>
   <Popover reference={selectRef} bind:open id={popupId} conditionalRender={false}>
-    <div class="popup-content">
+    <div class={`sterling-select-popup-content ${variant}`}>
       <List
         bind:this={listRef}
-        composed
         {disabled}
         selectedValue={pendingSelectedValue}
         on:click={onListClick}
         on:keydown={onListKeydown}
         on:select={onListSelect}
         tabIndex={open ? 0 : -1}
+        variant={`composed ${variant}`}
       >
-        <slot />
+        <slot {variant} />
       </List>
     </div>
   </Popover>
 </div>
-
-<style>
-  .sterling-select {
-    align-content: center;
-    align-items: center;
-    background-color: var(--stsv-input__background-color);
-    border-color: var(--stsv-input__border-color);
-    border-radius: var(--stsv-input__border-radius);
-    border-style: var(--stsv-input__border-style);
-    border-width: var(--stsv-input__border-width);
-    color: var(--stsv-input__color);
-    cursor: pointer;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: auto;
-    outline: none;
-    padding: 0;
-    position: relative;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-select:hover {
-    background-color: var(--stsv-input__background-color--hover);
-    border-color: var(--stsv-input__border-color--hover);
-    color: var(--stsv-input__color--hover);
-  }
-
-  .sterling-select: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-select.disabled {
-    cursor: not-allowed;
-    outline: none;
-  }
-
-  .sterling-select::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-select.disabled::after {
-    opacity: 1;
-  }
-
-  .sterling-select.composed,
-  .sterling-select.composed:hover,
-  .sterling-select.composed.focus,
-  .sterling-select.composed.disabled {
-    background: none;
-    border: none;
-    outline: none;
-  }
-
-  .sterling-select.composed.disabled::after {
-    opacity: 0;
-  }
-
-  .value {
-    padding: 0.5em;
-  }
-
-  .chevron {
-    display: block;
-    position: relative;
-    border: none;
-    background: none;
-    margin: 0;
-    height: 100%;
-    width: 32px;
-  }
-
-  .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);
-    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-    padding: 0.25em;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    overflow: hidden;
-    max-height: 20em;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-select,
-    .sterling-select::after {
-      transition: none;
-    }
-  }
-</style>

package/Select.svelte.d.ts

@@ -3,9 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         disabled?: boolean | undefined;
-        composed?: boolean | undefined;
         open?: boolean | undefined;
         selectedValue?: string | undefined;
+        variant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -48,13 +48,17 @@ declare const __propDef: {
             disabled: boolean;
             open: boolean;
             selectedValue: string | undefined;
+            variant: string;
         };
         button: {
             disabled: boolean;
             open: boolean;
             selectedValue: string | undefined;
+            variant: string;
+        };
+        default: {
+            variant: string;
         };
-        default: {};
     };
 };
 export type SelectProps = typeof __propDef.props;