@lavalogic/scoria 0.0.1

package/dist/Components/Dial.svelte

@@ -0,0 +1,219 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { DateChange } from '../Types/Internal/DateChange.js';
+	import type { DatePickerType } from '../Types/Internal/DatePickerType.js';
+
+	export interface DialProps<T> {
+		selected: T;
+		values: T[];
+		labels: any[];
+		type: DatePickerType;
+		onsubmit: () => void;
+		onPrevious: (type: DatePickerType) => void;
+		onNext: (type: DatePickerType) => void;
+		onchange: (change: DateChange<T>) => void;
+		ref?: HTMLDivElement | undefined;
+	}
+</script>
+
+<script lang="ts" generics="T">
+	import { onMount } from 'svelte';
+
+	const optionHeight = 50;
+
+	let {
+		selected,
+		values,
+		labels,
+		type,
+		ref = $bindable(),
+		onsubmit,
+		onPrevious,
+		onNext,
+		onchange
+	}: DialProps<T> = $props();
+
+	let position = selected != null ? -values.indexOf(selected) * optionHeight : 0;
+	let offset = 0;
+	let dragging = false;
+
+	let itemWrapper: HTMLUListElement | undefined = $state();
+	let previousY: number;
+
+	onMount(() => {
+		setPosition();
+	});
+
+	$effect(() => {
+		if (!dragging) {
+			const selectedPosition = selected != null ? -values.indexOf(selected) * optionHeight : 0;
+			if (position !== selectedPosition) {
+				position = selectedPosition;
+				setPosition();
+			}
+		}
+	});
+
+	function onChange(changedData: T) {
+		onchange({
+			type,
+			changedData
+		});
+	}
+
+	function setPosition() {
+		const itemPosition = `
+		transition: transform ${Math.abs(offset) / 100 + 0.1}s;
+        transform: translateY(${position}px)
+      `;
+		if (itemWrapper) {
+			itemWrapper.style.cssText = itemPosition;
+		} else {
+			console.warn('item wrapper is undefined');
+		}
+	}
+
+	const onmousedown = (event: MouseEvent | TouchEvent) => {
+		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		dragging = true;
+
+		window.addEventListener('mousemove', onMouseMove);
+		window.addEventListener('mouseup', onMouseUp);
+		window.addEventListener('touchmove', onMouseMove);
+		window.addEventListener('touchend', onMouseUp);
+	};
+
+	const onMouseMove = (event: MouseEvent | TouchEvent) => {
+		const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		offset = clientY - previousY;
+
+		const maxPosition = -values.length * optionHeight;
+		const _position = position + offset;
+		position = Math.max(maxPosition, Math.min(optionHeight, _position));
+		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		setPosition();
+	};
+
+	const onMouseUp = () => {
+		const maxPosition = -(values.length - 1) * optionHeight;
+		const rounderPosition = Math.round((position + offset * 5) / optionHeight) * optionHeight;
+		const finalPosition = Math.max(maxPosition, Math.min(0, rounderPosition));
+
+		dragging = false;
+		position = finalPosition;
+
+		window.removeEventListener('mousemove', onMouseMove);
+		window.removeEventListener('mouseup', onMouseUp);
+		window.removeEventListener('touchmove', onMouseMove);
+		window.removeEventListener('touchend', onMouseUp);
+
+		setPosition();
+		onChange(values[-finalPosition / optionHeight]);
+	};
+
+	const onwheel = (e: WheelEvent) => {
+		if (e.deltaY > 0) {
+			position = position - optionHeight;
+		}
+		if (e.deltaY < 0) {
+			position = position + optionHeight;
+		}
+		onMouseUp();
+	};
+
+	function onkeydown(e: KeyboardEvent) {
+		const handledKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter'];
+		if (handledKeys.includes(e.key)) {
+			e.preventDefault();
+
+			if (e.key === 'ArrowLeft') {
+				onPrevious(type);
+			} else if (e.key === 'ArrowRight') {
+				onNext(type);
+			} else if (e.key === 'ArrowUp') {
+				position = position + optionHeight;
+				onMouseUp();
+			} else if (e.key === 'ArrowDown') {
+				position = position - optionHeight;
+				onMouseUp();
+			} else if (e.key === 'Enter') {
+				onsubmit();
+			}
+		}
+	}
+</script>
+
+<div
+	style="--option-height: {optionHeight}px"
+	class="select-wrapper"
+	role="listbox"
+	tabindex="0"
+	bind:this={ref}
+	{onmousedown}
+	ontouchstart={onmousedown}
+	{onwheel}
+	{onkeydown}
+>
+	<div class="selected-wrapper">
+		<ul bind:this={itemWrapper} class="touch-date-container">
+			{#each labels as item (item)}
+				<li>{item}</li>
+			{/each}
+		</ul>
+	</div>
+</div>
+
+<style>.select-wrapper {
+  height: calc(var(--option-height));
+  padding: 50px 0;
+  margin: 10px 0;
+  overflow: hidden;
+}
+.select-wrapper:focus-within {
+  outline: solid 1px #1f81a0;
+  border-radius: 4px;
+  z-index: 2;
+}
+
+.selected-wrapper {
+  position: relative;
+  height: var(--option-height);
+  border-top: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+  border-radius: 0;
+}
+
+.touch-date-container {
+  margin: 0;
+  padding: 0;
+}
+
+.selected-wrapper:before,
+.selected-wrapper:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 80px;
+  height: var(--option-height);
+  background-color: #fff;
+  opacity: 0.8;
+  z-index: 1;
+}
+
+.selected-wrapper:before {
+  top: -51px;
+}
+
+.selected-wrapper:after {
+  bottom: -51px;
+}
+
+.touch-date-container li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80px;
+  height: var(--option-height);
+  user-select: none;
+}</style>

package/dist/Components/Dial.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { DateChange } from '../Types/Internal/DateChange.js';
+import type { DatePickerType } from '../Types/Internal/DatePickerType.js';
+export interface DialProps<T> {
+    selected: T;
+    values: T[];
+    labels: any[];
+    type: DatePickerType;
+    onsubmit: () => void;
+    onPrevious: (type: DatePickerType) => void;
+    onNext: (type: DatePickerType) => void;
+    onchange: (change: DateChange<T>) => void;
+    ref?: HTMLDivElement | undefined;
+}
+declare function $$render<T>(): {
+    props: DialProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Dial: $$IsomorphicComponent;
+type Dial<T> = InstanceType<typeof Dial<T>>;
+export default Dial;