@geoffcox/sterling-svelte 0.0.8 → 0.0.10

package/inputs/Select.svelte

@@ -1,8 +1,10 @@
 <script>import { createEventDispatcher, onMount, tick } from "svelte";
-import { v4 as uuidv4 } from "uuid";
+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 "../lists/List.svelte";
+import Input from "./Input.svelte";
 export let disabled = false;
 export let items = [];
 export let open = false;
@@ -11,12 +13,13 @@ export let selectedItem = void 0;
 $: {
   selectedItem = items[selectedIndex];
 }
+const inputId = uuid();
 let prevOpen = false;
 let pendingSelectedIndex = selectedIndex;
 let selectRef;
 let popupRef;
 let listRef;
-const popupId = uuidv4();
+const popupId = uuid();
 let popupPosition = {
   x: void 0,
   y: void 0
@@ -36,7 +39,6 @@ $: {
   raiseItemSelected(selectedIndex);
 }
 $: {
-  console.log("raise pendingSelectedIndex changed");
   raiseItemSelectPending(pendingSelectedIndex);
 }
 $: {
@@ -140,193 +142,177 @@ const onPendingItemSelected = (event) => {
 A single item that can be selected from a popup list of items.
   -->
 <div
-	bind:this={selectRef}
-	use:clickOutside
-	aria-controls={popupId}
-	aria-haspopup="listbox"
-	aria-expanded={open}
-	class="sterling-select"
-	class:disabled
-	role="combobox"
-	tabindex="0"
-	on:click_outside={() => (open = false)}
-	on:click={onSelectClick}
-	on:blur
-	on:click
-	on:copy
-	on:cut
-	on:dblclick
-	on:focus
-	on:focusin
-	on:focusout
-	on:keydown={onSelectKeydown}
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mousedown
-	on:mouseenter
-	on:mouseleave
-	on:mousemove
-	on:mouseover
-	on:mouseout
-	on:mouseup
-	on:wheel
-	on:paste
-	{...$$restProps}
+  bind:this={selectRef}
+  use:clickOutside
+  aria-controls={popupId}
+  aria-haspopup="listbox"
+  aria-expanded={open}
+  class="sterling-select"
+  class:disabled
+  role="combobox"
+  tabindex="0"
+  on:click_outside={() => (open = false)}
+  on:click={onSelectClick}
+  on:blur
+  on:click
+  on:copy
+  on:cut
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown={onSelectKeydown}
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:wheel
+  on:paste
+  {...$$restProps}
 >
-	<!-- svelte-ignore a11y-label-has-associated-control -->
-	<label class="sterling-select-label">
-		{#if $$slots.label}
-			<div class="label-content" class:disabled>
-				<slot name="label" />
-			</div>
-		{/if}
-		<div class="input">
-			<div class="value">
-				<slot name="value">
-					{items[selectedIndex]}
-				</slot>
-			</div>
-			<div class="button">
-				<slot name="button" {open}>
-					<div class="chevron" />
-				</slot>
-			</div>
-		</div>
-	</label>
-	<div
-		bind:this={popupRef}
-		class="popup"
-		class:open
-		id={popupId}
-		style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-	>
-		<div class="popup-content">
-			<slot name="list">
-				{#if $$slots.default === true}
-					<List
-						bind:this={listRef}
-						selectedIndex={pendingSelectedIndex}
-						{items}
-						{disabled}
-						let:disabled
-						let:index
-						let:item
-						let:selected
-						on:click={onListClick}
-						on:keydown={onListKeydown}
-						on:itemSelected={onPendingItemSelected}
-					>
-						<slot {disabled} {index} {item} {selected} />
-					</List>
-				{:else}
-					<List
-						bind:this={listRef}
-						selectedIndex={pendingSelectedIndex}
-						{items}
-						{disabled}
-						let:disabled
-						let:index
-						let:item
-						let:selected
-						on:click={onListClick}
-						on:keydown={onListKeydown}
-						on:itemSelected={onPendingItemSelected}
-					/>
-				{/if}
-			</slot>
-		</div>
-	</div>
+  {#if $$slots.label}
+    <div class="label">
+      <Label {disabled} for={inputId}>
+        <slot name="label" />
+      </Label>
+    </div>
+  {/if}
+  <div class="input" id={inputId}>
+    <div class="value">
+      <slot name="value">
+        {items[selectedIndex]}
+      </slot>
+    </div>
+    <div class="button">
+      <slot name="button" {open}>
+        <div class="chevron" />
+      </slot>
+    </div>
+  </div>
+  <div
+    bind:this={popupRef}
+    class="popup"
+    class:open
+    id={popupId}
+    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
+  >
+    <div class="popup-content">
+      <slot name="list">
+        {#if $$slots.default === true}
+          <List
+            bind:this={listRef}
+            selectedIndex={pendingSelectedIndex}
+            {items}
+            {disabled}
+            let:disabled
+            let:index
+            let:item
+            let:selected
+            on:click={onListClick}
+            on:keydown={onListKeydown}
+            on:itemSelected={onPendingItemSelected}
+          >
+            <slot {disabled} {index} {item} {selected} />
+          </List>
+        {:else}
+          <List
+            bind:this={listRef}
+            selectedIndex={pendingSelectedIndex}
+            {items}
+            {disabled}
+            let:disabled
+            let:index
+            let:item
+            let:selected
+            on:click={onListClick}
+            on:keydown={onListKeydown}
+            on:itemSelected={onPendingItemSelected}
+          />
+        {/if}
+      </slot>
+    </div>
+  </div>
 </div>
 
 <style>
-	/* 
-		sterling-select
-			sterling-select-label
-				label-content
-			input
-				value
-				button
-			(popup)
-	 */
-	.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);
-		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);
-	}
+  .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);
+    padding: 0;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
 
-	.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:hover {
+    background-color: var(--Input__background-color--hover);
+    border-color: var(--Input__border-color--hover);
+    color: var(--Input__color--hover);
+  }
 
-	.sterling-select.disabled {
-		background-color: var(--Input__background-color--disabled);
-		border-color: var(---Input__border-color--disabled);
-		color: var(--Input__color--disabled);
-		cursor: not-allowed;
-		outline: none;
-	}
+  .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);
+  }
 
-	.label-content {
-		font-size: 0.7em;
-		margin: 0.5em 0.7em 0 0.7em;
-		color: var(--Display__color--subtle);
-		transition: background-color 250ms, color 250ms, border-color 250ms;
-	}
+  .sterling-select.disabled {
+    background-color: var(--Input__background-color--disabled);
+    border-color: var(---Input__border-color--disabled);
+    color: var(--Input__color--disabled);
+    cursor: not-allowed;
+    outline: none;
+  }
 
-	.label-content.disabled {
-		color: var(--Display__color--disabled);
-	}
+  .label {
+    font-size: 0.7em;
+    margin: 0.5em 0.7em 0 0.7em;
+  }
 
-	.input {
-		display: grid;
-		grid-template-columns: 1fr auto;
-		grid-template-rows: auto;
-		align-content: center;
-		align-items: center;
-	}
+  .input {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    align-content: center;
+    align-items: center;
+  }
 
-	.value {
-		padding: 0.5em;
-	}
+  .value {
+    padding: 0.5em;
+  }
 
-	.chevron {
-		display: block;
-		position: relative;
-		border: none;
-		background: none;
-		margin: 0;
-		height: 100%;
-		width: 32px;
-	}
+  .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;
-		/* 
+  .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.
@@ -339,28 +325,34 @@ A single item that can be selected from a popup list of items.
 			a = sqrt(0.5)
 			a = 0.707
 		*/
-		transform: translate(-50%, calc(-50% / 0.707)) rotate(135deg);
-		transform-origin: 50% 50%;
-	}
+    transform: translate(-50%, calc(-50% / 0.707)) rotate(135deg);
+    transform-origin: 50% 50%;
+  }
+
+  .popup {
+    box-sizing: border-box;
+    display: none;
+    overflow: hidden;
+    position: absolute;
+    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
+    width: fit-content;
+    height: fit-content;
+    z-index: 1;
+  }
 
-	.popup {
-		box-sizing: border-box;
-		display: none;
-		overflow: hidden;
-		position: absolute;
-		box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-		width: fit-content;
-		height: fit-content;
-		z-index: 1;
-	}
+  .popup.open {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
 
-	.popup.open {
-		display: grid;
-		grid-template-columns: 1fr;
-		grid-template-rows: 1fr;
-	}
+  .popup-content {
+    max-height: 15em;
+  }
 
-	.popup-content {
-		max-height: 15em;
-	}
+  @media (prefers-reduced-motion) {
+    .sterling-select {
+      transition: none;
+    }
+  }
 </style>