@geoffcox/sterling-svelte 0.0.16 → 0.0.17

package/{inputs/Select.svelte → Select.svelte}

@@ -1,50 +1,48 @@
-<script>import { createEventDispatcher, onMount, tick } from "svelte";
+<script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
+import { createEventDispatcher, onMount, tick } from "svelte";
 import { v4 as uuid } from "uuid";
-import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
-import { clickOutside } from "../clickOutside";
-import Label from "../display/Label.svelte";
-import List from "../containers/List.svelte";
-import Input from "./Input.svelte";
+import { clickOutside } from "./actions/clickOutside";
+import Label from "./Label.svelte";
+import List from "./List.svelte";
+const inputId = uuid();
+const popupId = uuid();
 export let disabled = false;
-export let items = [];
 export let open = false;
-export let selectedIndex = 0;
-export let selectedItem = void 0;
-$: {
-  selectedItem = items[selectedIndex];
-}
-const inputId = uuid();
+export let selectedValue = void 0;
 let prevOpen = false;
-let pendingSelectedIndex = selectedIndex;
+let pendingSelectedValue = selectedValue;
 let selectRef;
 let popupRef;
 let listRef;
-const popupId = uuid();
 let popupPosition = {
   x: void 0,
   y: void 0
 };
 const dispatch = createEventDispatcher();
-const raiseItemSelected = (index) => {
-  dispatch("itemSelected", { index, item: items[index] });
+const raiseSelect = (value) => {
+  dispatch("select", { value });
 };
-const raiseItemSelectPending = (index) => {
-  dispatch("itemSelectPending", { index, item: items[index] });
+const raisePending = (value) => {
+  dispatch("pending", { value });
 };
-$:
-  selectedIndex, () => {
-    pendingSelectedIndex = selectedIndex;
-  };
 $: {
-  raiseItemSelected(selectedIndex);
+  pendingSelectedValue = selectedValue;
 }
 $: {
-  raiseItemSelectPending(pendingSelectedIndex);
+  raiseSelect(selectedValue);
+}
+$: {
+  if (open) {
+    raisePending(pendingSelectedValue);
+  }
 }
 $: {
   if (open && !prevOpen) {
     prevOpen = true;
-    tick().then(() => listRef?.focusSelectedItem());
+    tick().then(() => {
+      listRef?.focus();
+      listRef?.scrollToSelectedItem();
+    });
   } else if (prevOpen) {
     prevOpen = false;
     tick().then(() => selectRef?.focus());
@@ -76,23 +74,36 @@ const onSelectKeydown = (event) => {
     switch (event.key) {
       case " ":
         {
-          open = !open;
+          if (!open) {
+            open = true;
+          }
           event.preventDefault();
           event.stopPropagation();
+          return false;
         }
         break;
       case "ArrowUp":
         {
-          listRef.selectPreviousItem();
+          if (selectedValue) {
+            listRef.selectPreviousItem();
+          } else {
+            listRef.selectLastItem();
+          }
           event.preventDefault();
           event.stopPropagation();
+          return false;
         }
         break;
       case "ArrowDown":
         {
-          listRef.selectNextItem();
+          if (selectedValue) {
+            listRef.selectNextItem();
+          } else {
+            listRef.selectFirstItem();
+          }
           event.preventDefault();
           event.stopPropagation();
+          return false;
         }
         break;
     }
@@ -103,35 +114,35 @@ const onListKeydown = (event) => {
     switch (event.key) {
       case "Enter":
         {
-          selectedIndex = pendingSelectedIndex;
+          selectedValue = pendingSelectedValue;
           open = !open;
           event.preventDefault();
           event.stopPropagation();
+          return false;
         }
         break;
       case "Escape":
         {
-          pendingSelectedIndex = selectedIndex;
+          pendingSelectedValue = selectedValue;
           open = !open;
           event.preventDefault();
           event.stopPropagation();
+          return false;
         }
         break;
     }
   }
 };
 const onListClick = (event) => {
-  if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-    selectedIndex = pendingSelectedIndex;
-    open = false;
-    event.preventDefault();
-    event.stopPropagation();
-  }
+  open = false;
+  event.preventDefault();
+  event.stopPropagation();
+  return false;
 };
-const onPendingItemSelected = (event) => {
-  pendingSelectedIndex = event.detail.index;
+const onListSelect = (event) => {
+  pendingSelectedValue = event.detail.value;
   if (!open) {
-    selectedIndex = pendingSelectedIndex;
+    selectedValue = pendingSelectedValue;
   }
 };
 </script>
@@ -177,20 +188,17 @@ A single item that can be selected from a popup list of items.
 >
   {#if $$slots.label}
     <Label {disabled} for={inputId}>
-      <!-- BUGBUG: Problem with slot let params conflict
-        It seems that when a default slot is used multiple times in a module,
-        the first time sets the possible let params.
-        If we don't define the same let params on this label slot that 
-        is the default slot for label, then using the default slot for list
-        will error saying the property is not defined.
-      -->
-      <slot name="label" index={0} item={undefined} selected={false} />
+      <slot name="label" {disabled} {selectedValue} />
     </Label>
   {/if}
   <div class="input" id={inputId}>
     <div class="value">
-      <slot name="value">
-        {items[selectedIndex]}
+      <slot name="value" {disabled} {open} {selectedValue}>
+        {#if selectedValue}
+          {selectedValue}
+        {:else}
+          <span>&nbsp;</span>
+        {/if}
       </slot>
     </div>
     <div class="button">
@@ -207,69 +215,54 @@ A single item that can be selected from a popup list of items.
     style="left:{popupPosition.x}px; top:{popupPosition.y}px"
   >
     <div class="popup-content">
-      <slot name="list">
-        {#if $$slots.default}
-          <List
-            bind:this={listRef}
-            selectedIndex={pendingSelectedIndex}
-            {items}
-            {disabled}
-            on:click={onListClick}
-            on:keydown={onListKeydown}
-            on:itemSelected={onPendingItemSelected}
-          >
-            <svelte:fragment let:disabled let:index let:item let:selected>
-              <slot {disabled} {index} {item} {selected} />
-            </svelte:fragment>
-          </List>
-        {:else}
-          <List
-            bind:this={listRef}
-            selectedIndex={pendingSelectedIndex}
-            {items}
-            {disabled}
-            on:click={onListClick}
-            on:keydown={onListKeydown}
-            on:itemSelected={onPendingItemSelected}
-          />
-        {/if}
-      </slot>
+      <List
+        bind:this={listRef}
+        {disabled}
+        selectedValue={pendingSelectedValue}
+        on:click={onListClick}
+        on:keydown={onListKeydown}
+        on:select={onListSelect}
+        tabIndex={open ? 0 : -1}
+      >
+        <slot />
+      </List>
     </div>
   </div>
 </div>
 
 <style>
   .sterling-select {
-    background-color: var(--Input__background-color);
-    border-color: var(--Input__border-color);
-    border-radius: var(--Input__border-radius);
-    border-style: var(--Input__border-style);
-    border-width: var(--Input__border-width);
-    color: var(--Input__color);
+    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;
     padding: 0;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   .sterling-select:hover {
-    background-color: var(--Input__background-color--hover);
-    border-color: var(--Input__border-color--hover);
-    color: var(--Input__color--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-within {
-    background-color: var(--Input__background-color--focus);
-    border-color: var(--Input__border-color--focus);
-    color: var(--Input__color--focus);
-    outline-color: var(--Common__outline-color);
-    outline-offset: var(--Common__outline-offset);
-    outline-style: var(--Common__outline-style);
-    outline-width: var(--Common__outline-width);
+  .sterling-select:focus-visible {
+    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 {
-    background-color: var(--Input__background-color--disabled);
-    border-color: var(---Input__border-color--disabled);
-    color: var(--Input__color--disabled);
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
     outline: none;
   }
@@ -332,9 +325,10 @@ A single item that can be selected from a popup list of items.
   }
 
   .popup {
+    background-color: var(--stsv-Common__background-color);
     box-sizing: border-box;
     display: none;
-    overflow: hidden;
+    overflow: visible;
     position: absolute;
     box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
     width: fit-content;

package/{inputs/Select.svelte.d.ts → Select.svelte.d.ts}

@@ -1,14 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-declare class __sveltets_Render<T> {
-    props(): {
+declare const __propDef: {
+    props: {
         [x: string]: any;
         disabled?: boolean | undefined;
-        items?: T[] | undefined;
         open?: boolean | undefined;
-        selectedIndex?: number | undefined;
-        selectedItem?: T | undefined;
+        selectedValue?: string | undefined;
     };
-    events(): {
+    events: {
         blur: FocusEvent;
         click: MouseEvent;
         copy: ClipboardEvent;
@@ -29,34 +27,31 @@ declare class __sveltets_Render<T> {
         mouseup: MouseEvent;
         wheel: WheelEvent;
         paste: ClipboardEvent;
-        itemSelected: CustomEvent<any>;
-        itemSelectPending: CustomEvent<any>;
+        select: CustomEvent<any>;
+        pending: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {
+    slots: {
         label: {
-            index: number;
-            item: undefined;
-            selected: boolean;
+            disabled: boolean;
+            selectedValue: string | undefined;
         };
-        value: {};
-        button: {
+        value: {
+            disabled: boolean;
             open: boolean;
+            selectedValue: string | undefined;
         };
-        list: {};
-        default: {
-            disabled: boolean;
-            index: any;
-            item: any;
-            selected: any;
+        button: {
+            open: boolean;
         };
+        default: {};
     };
-}
-export type SelectProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type SelectEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type SelectSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+};
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
 /** A single item that can be selected from a popup list of items. */
-export default class Select<T> extends SvelteComponentTyped<SelectProps<T>, SelectEvents<T>, SelectSlots<T>> {
+export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
 }
 export {};

package/{inputs/Slider.svelte → Slider.svelte}

@@ -1,7 +1,7 @@
 <script>import { createEventDispatcher } from "svelte";
 import { round } from "lodash-es";
 import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
+import Label from "./Label.svelte";
 export let value = 0;
 export let min = 0;
 export let max = 100;
@@ -141,11 +141,36 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     aria-valuenow={value}
     aria-valuemax={max}
     tabindex={!disabled ? 0 : undefined}
-    {...$$restProps}
+    on:blur
+    on:click
+    on:dblclick
+    on:focus
+    on:focusin
+    on:focusout
+    on:keydown
     on:keydown={onKeyDown}
+    on:keypress
+    on:keyup
+    on:mousedown
+    on:mouseenter
+    on:mouseleave
+    on:mousemove
+    on:mouseover
+    on:mouseout
+    on:mouseup
+    on:pointercancel
+    on:pointerdown
     on:pointerdown={onPointerDown}
+    on:pointerenter
+    on:pointerleave
+    on:pointermove
     on:pointermove={onPointerMove}
+    on:pointerover
+    on:pointerout
+    on:pointerup
     on:pointerup={onPointerUp}
+    on:wheel
+    {...$$restProps}
   >
     <div
       class="container"
@@ -191,24 +216,24 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
 
   .track {
     position: absolute;
-    background: var(--Display__background-color);
+    background: var(--stsv-Display__background-color);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   .fill {
-    background: var(--Display__color);
+    background: var(--stsv-Display__color);
     position: absolute;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   .thumb {
-    background-color: var(--Button__background-color);
-    border-color: var(--Button__border-color);
+    background-color: var(--stsv-Button__background-color);
+    border-color: var(--stsv-Button__border-color);
     border-radius: 10000px;
-    border-style: var(--Button__border-style);
-    border-width: var(--Button__border-width);
+    border-style: var(--stsv-Button__border-style);
+    border-width: var(--stsv-Button__border-width);
     box-sizing: border-box;
-    color: var(--Button__color);
+    color: var(--stsv-Button__color);
     cursor: pointer;
     display: block;
     font: inherit;
@@ -283,40 +308,40 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   /* ----- hover ----- */
 
   .thumb:hover {
-    background-color: var(--Button__background-color--hover);
-    border-color: var(--Button__border-color--hover);
-    color: var(--Button__color--hover);
+    background-color: var(--stsv-Button__background-color--hover);
+    border-color: var(--stsv-Button__border-color--hover);
+    color: var(--stsv-Button__color--hover);
   }
 
   /* ----- active ----- */
 
   .thumb:active {
-    background-color: var(--Button__background-color--active);
-    border-color: var(--Button__border-color--active);
-    color: var(--Button__color--active);
+    background-color: var(--stsv-Button__background-color--active);
+    border-color: var(--stsv-Button__border-color--active);
+    color: var(--stsv-Button__color--active);
   }
 
   /* ----- focus ----- */
   .slider:focus-visible {
-    outline-color: var(--Common__outline-color);
-    outline-offset: var(--Common__outline-offset);
-    outline-style: var(--Common__outline-style);
-    outline-width: var(--Common__outline-width);
+    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);
   }
   /* ----- disabled ----- */
 
   .slider.disabled .track {
-    background: var(--Common__background-color--disabled);
+    background: var(--stsv-Common__background-color--disabled);
   }
 
   .slider.disabled .fill {
-    background: var(--Common__color--disabled);
+    background: var(--stsv-Common__color--disabled);
   }
 
   .slider.disabled .thumb {
-    background-color: var(--Common__background-color--disabled);
-    border-color: var(--Common__border-color--disabled);
-    color: var(--Common__color--disabled);
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
   }
 

package/Slider.svelte.d.ts

@@ -0,0 +1,53 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        step?: number | undefined;
+        precision?: number | undefined;
+        vertical?: boolean | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
+        wheel: WheelEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {};
+    };
+};
+export type SliderProps = typeof __propDef.props;
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+/** Slider lets the user chose a value within a min/max range by dragging a thumb button. */
+export default class Slider extends SvelteComponentTyped<SliderProps, SliderEvents, SliderSlots> {
+}
+export {};