@geoffcox/sterling-svelte 0.0.2 → 0.0.4

package/inputs/Select.svelte

@@ -0,0 +1,360 @@
+<script>import { createEventDispatcher, onMount, tick } from "svelte";
+import { v4 as uuidv4 } from "uuid";
+import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
+import { clickOutside } from "../clickOutside";
+import List from "../lists/List.svelte";
+export let disabled = false;
+export let items = [];
+export let open = false;
+export let selectedIndex = 0;
+export let selectedItem = void 0;
+$: {
+  selectedItem = items[selectedIndex];
+}
+let prevOpen = false;
+let pendingSelectedIndex = selectedIndex;
+let selectRef;
+let popupRef;
+let listRef;
+const popupId = uuidv4();
+let popupPosition = {
+  x: void 0,
+  y: void 0
+};
+const dispatch = createEventDispatcher();
+const raiseItemSelected = (index) => {
+  dispatch("itemSelected", { index, item: items[index] });
+};
+const raiseItemSelectPending = (index) => {
+  dispatch("itemSelectPending", { index, item: items[index] });
+};
+$:
+  selectedIndex, () => {
+    pendingSelectedIndex = selectedIndex;
+  };
+$: {
+  raiseItemSelected(selectedIndex);
+}
+$: {
+  console.log("raise pendingSelectedIndex changed");
+  raiseItemSelectPending(pendingSelectedIndex);
+}
+$: {
+  if (open && !prevOpen) {
+    prevOpen = true;
+    tick().then(() => listRef?.focusSelectedItem());
+  } else if (prevOpen) {
+    prevOpen = false;
+    tick().then(() => selectRef?.focus());
+  }
+}
+let mounted = false;
+onMount(() => {
+  mounted = true;
+  const cleanup = autoUpdate(selectRef, popupRef, async () => {
+    const { x, y } = await computePosition(selectRef, popupRef, {
+      placement: "bottom-end",
+      middleware: [offset({ mainAxis: 2 }), flip(), shift({ padding: 0 })]
+    });
+    if (open) {
+      popupPosition = { x, y };
+    }
+  });
+  return cleanup;
+});
+const onSelectClick = (event) => {
+  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 " ":
+        {
+          open = !open;
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        break;
+      case "ArrowUp":
+        {
+          listRef.selectPreviousItem();
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        break;
+      case "ArrowDown":
+        {
+          listRef.selectNextItem();
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        break;
+    }
+  }
+};
+const onListKeydown = (event) => {
+  if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+    switch (event.key) {
+      case "Enter":
+        {
+          selectedIndex = pendingSelectedIndex;
+          open = !open;
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        break;
+      case "Escape":
+        {
+          pendingSelectedIndex = selectedIndex;
+          open = !open;
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        break;
+    }
+  }
+};
+const onListClick = (event) => {
+  if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+    selectedIndex = pendingSelectedIndex;
+    open = false;
+    event.preventDefault();
+    event.stopPropagation();
+  }
+};
+const onPendingItemSelected = (event) => {
+  pendingSelectedIndex = event.detail.index;
+  console.log("pendingSelectedIndex changed");
+  if (!open) {
+    selectedIndex = pendingSelectedIndex;
+  }
+};
+</script>
+
+<!--
+@component
+Pops up a list of items when clicked. 
+A single item can be selected and is displayed as the value.
+  -->
+<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}
+>
+	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<label class="sterling-select-label">
+		{#if $$slots.label}
+			<div class="label-content">
+				<slot name="label" />
+			</div>
+		{/if}
+		<div class="input">
+			<div class="value">
+				<slot name="value">
+					{items[selectedIndex]}
+				</slot>
+			</div>
+			<div class="button">
+				<slot name="button">
+					<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>
+</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);
+		display: flex;
+		flex-direction: row;
+		padding: 0;
+		position: relative;
+		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: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.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 {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.label-content {
+		font-size: 0.7em;
+		margin: 0.5em 0.7em 0 0.7em;
+		color: var(--Display__color--subtle);
+	}
+
+	.input {
+		display: flex;
+		flex-direction: row;
+		align-items: stretch;
+	}
+
+	.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 {
+		box-sizing: border-box;
+		display: none;
+		overflow: hidden;
+		position: absolute;
+		box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
+			rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+		width: fit-content;
+		height: fit-content;
+		z-index: 1;
+	}
+
+	.popup.open {
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr;
+	}
+
+	.popup-content {
+		max-height: 15em;
+	}
+</style>

package/inputs/Select.svelte.d.ts

@@ -0,0 +1,59 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        disabled?: boolean | undefined;
+        items?: any[] | undefined;
+        open?: boolean | undefined;
+        selectedIndex?: number | undefined;
+        selectedItem?: any;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        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;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+        itemSelected: CustomEvent<any>;
+        itemSelectPending: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {};
+        value: {};
+        button: {};
+        list: {};
+        default: {
+            disabled: boolean;
+            index: any;
+            item: any;
+            selected: any;
+        };
+    };
+};
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+/**
+ * Pops up a list of items when clicked.
+ * A single item can be selected and is displayed as the value.
+ */
+export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/inputs/Slider.svelte

@@ -0,0 +1,280 @@
+<script>import { round } from "lodash-es";
+import { createEventDispatcher } from "svelte";
+export let value = 0;
+export let min = 0;
+export let max = 100;
+export let step = void 0;
+export let precision = 0;
+export let vertical = false;
+export let disabled = false;
+let sliderRef;
+const dispatch = createEventDispatcher();
+const raiseChange = (newValue) => {
+  dispatch("change", { value: newValue });
+};
+const getPrecision = (value2) => {
+  if (value2 !== void 0 && Number !== null && !Number.isNaN(value2)) {
+    const text = value2.toString();
+    const position = text.indexOf(".");
+    if (position !== -1) {
+      const fraction = text.substring(position + 1);
+      if (fraction) {
+        return fraction.length;
+      }
+    }
+  }
+  return 0;
+};
+$:
+  highestPrecision = Math.max(
+    precision,
+    getPrecision(min),
+    getPrecision(max),
+    getPrecision(step)
+  );
+const setValue = (newValue) => {
+  value = round(Math.max(min, Math.min(max, newValue)), highestPrecision);
+};
+$: {
+  if (min > max) {
+    min = max;
+  }
+}
+$: {
+  if (value < min || value > max || value !== round(value, highestPrecision)) {
+    setValue(value);
+  }
+}
+$: {
+  if (step) {
+    let stepValue = Math.max(min, Math.min(value, max));
+    stepValue = Math.round(stepValue / step) * step + min;
+    if (stepValue !== value) {
+      setValue(stepValue);
+    }
+  }
+}
+$:
+  ratio = (value - min) / (max - min);
+$:
+  changeBy = step ? step : 1;
+const setValueByOffset = (offset) => {
+  if (sliderSize > 0) {
+    const positionRatio = Math.max(0, Math.min(1, offset / sliderSize));
+    const newValue = min + positionRatio * (max - min);
+    setValue(newValue);
+  }
+};
+$: {
+  raiseChange(value);
+}
+let sliderWidth;
+let sliderHeight;
+$:
+  sliderSize = vertical ? sliderHeight : sliderWidth;
+$:
+  valueOffset = sliderSize * ratio;
+const onPointerDown = (event) => {
+  if (!disabled) {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    if (vertical) {
+      setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+    } else {
+      setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+    }
+  }
+};
+const onPointerMove = (event) => {
+  if (!disabled && event.currentTarget.hasPointerCapture(event.pointerId)) {
+    if (vertical) {
+      setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+    } else {
+      setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+    }
+  }
+};
+const onPointerUp = (event) => {
+  if (!disabled) {
+    event.currentTarget.releasePointerCapture(event.pointerId);
+  }
+};
+const onKeyDown = (event) => {
+  if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey) {
+    switch (event.code) {
+      case "ArrowDown":
+      case "ArrowLeft":
+        setValue(value - changeBy);
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      case "ArrowRight":
+      case "ArrowUp":
+        setValue(value + changeBy);
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+    }
+  }
+};
+</script>
+
+<!-- @component
+Slider lets the user chose a value within a min/max range by dragging a thumb button.
+-->
+<div
+	class="sterling-slider"
+	class:disabled
+	class:horizontal={!vertical}
+	class:vertical
+	tabindex={!disabled ? 0 : undefined}
+	{...$$restProps}
+	on:keydown={onKeyDown}
+	on:pointerdown={onPointerDown}
+	on:pointermove={onPointerMove}
+	on:pointerup={onPointerUp}
+>
+	<div
+		class="container"
+		bind:this={sliderRef}
+		bind:clientWidth={sliderWidth}
+		bind:clientHeight={sliderHeight}
+	>
+		<div class="track" />
+		<div class="fill" style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`} />
+		<div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
+	</div>
+</div>
+
+<style>
+	.sterling-slider {
+		box-sizing: border-box;
+		outline: none;
+		padding: 0;
+		overflow: visible;
+		display: grid;
+	}
+
+	.sterling-slider.horizontal {
+		height: 2em;
+	}
+
+	.sterling-slider.vertical {
+		width: 2em;
+	}
+
+	.sterling-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);
+	}
+
+	.container {
+		position: relative;
+	}
+
+	.sterling-slider.horizontal .container {
+		margin: 0 0.75em;
+	}
+
+	.sterling-slider.vertical .container {
+		margin: 0.75em 0;
+	}
+
+	.track {
+		position: absolute;
+		background: var(--Display__background-color);
+	}
+
+	.sterling-slider.horizontal .track {
+		left: 0;
+		right: 0;
+		top: 50%;
+		height: 3px;
+		transform: translate(0, -50%);
+	}
+
+	.sterling-slider.vertical .track {
+		bottom: 0;
+		left: 50%;
+		top: 0;
+		transform: translate(-50%, 0);
+		width: 3px;
+	}
+
+	.sterling-slider.disabled .track {
+		background: var(--Common__background-color--disabled);
+	}
+
+	.fill {
+		background: var(--Display__color);
+		position: absolute;
+	}
+
+	.sterling-slider.horizontal .fill {
+		height: 3px;
+		top: 50%;
+		transform: translate(0, -50%);
+	}
+
+	.sterling-slider.vertical .fill {
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%, 0);
+		width: 3px;
+	}
+
+	.sterling-slider.disabled .fill {
+		background: var(--Common__color--disabled);
+	}
+
+	.thumb {
+		background-color: var(--Button__background-color);
+		border-color: var(--Button__border-color);
+		border-radius: 10000px;
+		border-style: var(--Button__border-style);
+		border-width: var(--Button__border-width);
+		box-sizing: border-box;
+		color: var(--Button__color);
+		cursor: pointer;
+		display: block;
+		font: inherit;
+		height: 1.5em;
+		overflow: hidden;
+		padding: 0;
+		text-decoration: none;
+		transition: background-color 250ms, color 250ms, border-color 250ms;
+		white-space: nowrap;
+		position: absolute;
+		width: 1.5em;
+	}
+
+	.sterling-slider.horizontal .thumb {
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.sterling-slider.vertical .thumb {
+		left: 50%;
+		transform: translate(-50%, 50%);
+	}
+
+	.thumb:hover {
+		background-color: var(--Button__background-color--hover);
+		border-color: var(--Button__border-color--hover);
+		color: var(--Button__color--hover);
+	}
+
+	.thumb:active {
+		background-color: var(--Button__background-color--active);
+		border-color: var(--Button__border-color--active);
+		color: var(--Button__color--active);
+	}
+
+	.sterling-slider.disabled .thumb {
+		background-color: var(--Common__background-color--disabled);
+		border-color: var(--Common__border-color--disabled);
+		color: var(--Common__color--disabled);
+		cursor: not-allowed;
+	}
+</style>

package/inputs/Slider.svelte.d.ts

@@ -0,0 +1,26 @@
+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: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 {};