windmill-components 1.339.2 → 1.352.0

package/package/components/Range.svelte

@@ -1,306 +1,108 @@
-<script>
-	import { createEventDispatcher, onDestroy } from 'svelte'
-	import { fly, fade } from 'svelte/transition'
-
-	// Props
-	export let min = 0
-	export let max = 100
-	export let initialValue = 0
-	export let id = null
-	export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue
-
-	// Node Bindings
-	let container = null
-	let thumb = null
-	let progressBar = null
-	let element = null
-
-	// Internal State
-	let elementX = null
-	let currentThumb = null
-	let holding = false
-	let thumbHover = false
-	let keydownAcceleration = 0
-	let accelerationTimer = null
-
-	// Dispatch 'change' events
-	const dispatch = createEventDispatcher()
-
-	// Mouse shield used onMouseDown to prevent any mouse events penetrating other elements,
-	// ie. hover events on other elements while dragging. Especially for Safari
-	const mouseEventShield = document.createElement('div')
-	mouseEventShield.setAttribute('class', 'mouse-over-shield')
-	mouseEventShield.addEventListener('mouseover', (e) => {
-		e.preventDefault()
-		e.stopPropagation()
-	})
-
-	function resizeWindow() {
-		elementX = element.getBoundingClientRect().left
-	}
-
-	// Allows both bind:value and on:change for parent value retrieval
-	function setValue(val) {
-		value = val
-		dispatch('change', { value })
-	}
-
-	function onTrackEvent(e) {
-		// Update value immediately before beginning drag
-		updateValueOnEvent(e)
-		onDragStart(e)
-	}
-
-	function onDragStart(e) {
-		// If mouse event add a pointer events shield
-		if (e.type === 'mousedown') document.body.append(mouseEventShield)
-		currentThumb = thumb
-	}
-
-	function onDragEnd(e) {
-		// If using mouse - remove pointer event shield
-		if (e.type === 'mouseup') {
-			if (document.body.contains(mouseEventShield)) document.body.removeChild(mouseEventShield)
-			// Needed to check whether thumb and mouse overlap after shield removed
-			if (isMouseInElement(e, thumb)) thumbHover = true
-		}
-		currentThumb = null
-	}
-
-	onDestroy(() => {
-		if (document.body.contains(mouseEventShield)) document.body.removeChild(mouseEventShield)
-	})
-
-	// Check if mouse event cords overlay with an element's area
-	function isMouseInElement(event, element) {
-		let rect = element.getBoundingClientRect()
-		let { clientX: x, clientY: y } = event
-		if (x < rect.left || x >= rect.right) return false
-		if (y < rect.top || y >= rect.bottom) return false
-		return true
-	}
-
-	// Accessible keypress handling
-	function onKeyPress(e) {
-		// Max out at +/- 10 to value per event (50 events / 5)
-		// 100 below is to increase the amount of events required to reach max velocity
-		if (keydownAcceleration < 50) keydownAcceleration++
-		let throttled = Math.ceil(keydownAcceleration / 5)
-
-		if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
-			if (value + throttled > max || value >= max) {
-				setValue(max)
-			} else {
-				setValue(value + throttled)
-			}
-		}
-		if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
-			if (value - throttled < min || value <= min) {
-				setValue(min)
-			} else {
-				setValue(value - throttled)
-			}
-		}
-
-		// Reset acceleration after 100ms of no events
-		clearTimeout(accelerationTimer)
-		accelerationTimer = setTimeout(() => (keydownAcceleration = 1), 100)
-	}
-
-	function calculateNewValue(clientX) {
-		resizeWindow()
-		// Find distance between cursor and element's left cord (20px / 2 = 10px) - Center of thumb
-		let delta = clientX - (elementX + 10)
-
-		// Use width of the container minus (5px * 2 sides) offset for percent calc
-		let percent = (delta * 100) / (container.clientWidth - 10)
-
-		// Limit percent 0 -> 100
-		percent = percent < 0 ? 0 : percent > 100 ? 100 : percent
-
-		// Limit value min -> max
-		setValue(Math.round((percent * (max - min)) / 100 + min))
-	}
-
-	// Handles both dragging of touch/mouse as well as simple one-off click/touches
-	function updateValueOnEvent(e) {
-		// touchstart && mousedown are one-off updates, otherwise expect a currentPointer node
-		if (!currentThumb && e.type !== 'touchstart' && e.type !== 'mousedown') return false
-
-		if (e.stopPropagation) e.stopPropagation()
-		if (e.preventDefault) e.preventDefault()
-
-		// Get client's x cord either touch or mouse
-		const clientX =
-			e.type === 'touchmove' || e.type === 'touchstart' ? e.touches[0].clientX : e.clientX
-
-		calculateNewValue(clientX)
-	}
-
-	// React to left position of element relative to window
-	$: if (element) elementX = element.getBoundingClientRect().left
-
-	// Set a class based on if dragging
-	$: holding = Boolean(currentThumb)
-
-	// Update progressbar and thumb styles to represent value
-	$: if (progressBar && thumb) {
-		// Limit value min -> max
-		value = value > min ? value : min
-		value = value < max ? value : max
-
-		let percent = ((value - min) * 100) / (max - min)
-		let offsetLeft = (container.clientWidth - 10) * (percent / 100) + 5
-
-		// Update thumb position + active range track width
-		thumb.style.left = `${offsetLeft}px`
-		progressBar.style.width = `${offsetLeft}px`
-	}
+<script>import RangeSlider from 'svelte-range-slider-pips';
+export let min = 0;
+export let max = 100;
+export let initialValue = 0;
+export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue;
+export let disabled = false;
+export let defaultValue = undefined;
+let step = 1;
+let slider;
+function calculateAxisStep(min, max) {
+    const range = max - min;
+    return range < 100 ? 1 : range / 20;
+}
+$: if (value === null) {
+    value = 0;
+}
+$: axisStep = calculateAxisStep(min, max);
+const format = (v, i, p) => {
+    return `${v}`;
+};
+function handleKeyDown(event) {
+    if (disabled)
+        return;
+    switch (event.key) {
+        case 'ArrowLeft':
+            if (value > min) {
+                value = Math.max(value - step, min);
+            }
+            break;
+        case 'ArrowRight':
+            if (value < max) {
+                value = Math.min(value + step, max);
+            }
+            break;
+    }
+    event.preventDefault();
+}
+// Calculate the handle width based on the length of the max value
+$: handleWidth = `${Math.max(max.toString().length ?? 2, 2)}em`;
 </script>
 
-<svelte:window
-	on:touchmove|nonpassive={updateValueOnEvent}
-	on:touchcancel={onDragEnd}
-	on:touchend={onDragEnd}
-	on:mousemove={updateValueOnEvent}
-	on:mouseup={onDragEnd}
-	on:resize={resizeWindow}
-/>
-<div class="range">
+<div class="flex flex-row w-full mx-2 items-center gap-8">
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+
 	<div
-		class="range__wrapper"
-		tabindex="0"
-		on:keydown={onKeyPress}
-		bind:this={element}
-		role="slider"
-		aria-valuemin={min}
-		aria-valuemax={max}
-		aria-valuenow={value}
-		{id}
+		class={'grow'}
+		style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; --handle-width: {handleWidth}; --handle-border: 4px;"
 		on:pointerdown|stopPropagation
-		on:mousedown|stopPropagation={onTrackEvent}
-		on:touchstart|stopPropagation={onTrackEvent}
-	>
-		<div class="range__track" bind:this={container}>
-			<div class="range__track--highlighted" bind:this={progressBar} />
-			<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-			<div
-				class="range__thumb"
-				class:range__thumb--holding={holding}
-				bind:this={thumb}
-				on:touchstart={onDragStart}
-				on:mousedown={onDragStart}
-				on:mouseover={() => (thumbHover = true)}
-				on:mouseout={() => (thumbHover = false)}
+		on:keydown={handleKeyDown}
+		>{#if max <= min}
+			<div class="text-secondary text-sm"
+				>Impossible to display range: {`max (${max}) <= min (${min})`}</div
 			>
-				{#if holding || thumbHover}
-					<div class="range__tooltip" in:fly={{ y: 7, duration: 200 }} out:fade={{ duration: 100 }}>
-						{value}
-					</div>
-				{/if}
-			</div>
-		</div>
+		{:else}
+			<RangeSlider
+				id="range-slider-form"
+				springValues={{ stiffness: 1, damping: 1 }}
+				bind:slider
+				min={min == undefined ? 0 : +min}
+				max={max == undefined ? 1 : +max}
+				on:change={(e) => {
+					value = e.detail.value
+				}}
+				{defaultValue}
+				{disabled}
+				values={[value]}
+				pips
+				float
+				first="label"
+				last="label"
+				step={step ?? 1}
+				pipstep={(axisStep ?? 1) / (step ?? 1)}
+				formatter={format}
+			/>
+		{/if}
 	</div>
-</div>
 
-<svelte:head>
-	<style>
-		.mouse-over-shield {
-			position: fixed;
-			top: 0px;
-			left: 0px;
-			height: 100%;
-			width: 100%;
-			background-color: rgba(255, 0, 0, 0);
-			z-index: 10000;
-			cursor: grabbing;
-		}</style>
-</svelte:head>
+	<input bind:value type="number" class="!w-16 h-8 !text-xs mb-6" {max} {min} {disabled} />
+</div>
 
 <style>
-	.range {
-		position: relative;
-		flex: 1;
-	}
-
-	.range__wrapper {
-		min-width: 100%;
-		position: relative;
-		padding: 0.5rem;
-		box-sizing: border-box;
-		outline: none;
+	:global(#range-slider-form.rangeSlider) {
+		font-size: 12px;
+		text-transform: uppercase;
 	}
 
-	.range__wrapper:focus-visible > .range__track {
-		box-shadow: 0 0 0 2px white, 0 0 0 3px var(--track-focus, #6185ff);
+	:global(.dark #range-slider-form.rangeSlider) {
+		background-color: #3b4252;
 	}
 
-	.range__track {
-		height: 6px;
-		background-color: var(--track-bgcolor, #d0d0d0);
-		border-radius: 999px;
-	}
-
-	.range__track--highlighted {
-		background-color: var(--track-highlight-bgcolor, #6185ff);
-		background: var(--track-highlight-bg, linear-gradient(90deg, #6185ff, #9c65ff));
-		width: 0;
-		height: 6px;
-		position: absolute;
-		border-radius: 999px;
-	}
-
-	.range__thumb {
+	:global(#range-slider-form.rangeSlider .rangeHandle) {
+		width: var(--handle-width, 2em) !important;
+		height: 2em;
 		display: flex;
-		align-items: center;
+		justify-items: center;
 		justify-content: center;
-		position: absolute;
-		width: 20px;
-		height: 20px;
-		background-color: var(--thumb-bgcolor, white);
-		cursor: pointer;
-		border-radius: 999px;
-		margin-top: -8px;
-		transition: box-shadow 100ms;
-		-webkit-user-select: none;
-		   -moz-user-select: none;
-		        user-select: none;
-		box-shadow: var(
-			--thumb-boxshadow,
-			0 1px 1px 0 rgba(0, 0, 0, 0.14),
-			0 0px 2px 1px rgba(0, 0, 0, 0.2)
-		);
-	}
-
-	.range__thumb--holding {
-		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 1px rgba(0, 0, 0, 0.2),
-			0 0 0 6px var(--thumb-holding-outline, rgba(113, 119, 250, 0.3));
 	}
 
-	.range__tooltip {
-		pointer-events: none;
-		position: absolute;
-		top: -33px;
-		color: var(--tooltip-text, white);
-		width: 38px;
-		padding: 4px 0;
-		border-radius: 4px;
-		text-align: center;
-		background-color: var(--tooltip-bgcolor, #6185ff);
-		background: var(--tooltip-bg, linear-gradient(45deg, #6185ff, #9c65ff));
+	:global(#range-slider-form.rangeSlider .rangeFloat) {
+		opacity: 1;
+		background: transparent;
+		top: 50%;
+		transform: translate(-50%, -50%);
 	}
 
-	.range__tooltip::after {
-		content: '';
-		display: block;
-		position: absolute;
-		height: 7px;
-		width: 7px;
-		background-color: var(--tooltip-bgcolor, #6185ff);
-		bottom: -3px;
-		left: calc(50% - 3px);
-		-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
-		        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
-		transform: rotate(-45deg);
-		border-radius: 0 0 0 3px;
+	:global(.dark #range-slider-form.rangeSlider > .rangePips > .pip) {
+		color: #eeeeee;
 	}</style>

package/package/components/Range.svelte.d.ts

@@ -1,37 +1,23 @@
-/** @typedef {typeof __propDef.props}  RangeProps */
-/** @typedef {typeof __propDef.events}  RangeEvents */
-/** @typedef {typeof __propDef.slots}  RangeSlots */
-export default class Range extends SvelteComponent<{
-    value?: number | undefined;
-    id?: null | undefined;
-    max?: number | undefined;
-    min?: number | undefined;
-    initialValue?: number | undefined;
-}, {
-    pointerdown: PointerEvent;
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type RangeProps = typeof __propDef.props;
-export type RangeEvents = typeof __propDef.events;
-export type RangeSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        value?: number | undefined;
-        id?: null | undefined;
-        max?: number | undefined;
         min?: number | undefined;
+        max?: number | undefined;
         initialValue?: number | undefined;
+        value?: number | undefined;
+        disabled?: boolean | undefined;
+        defaultValue?: number | undefined;
     };
     events: {
         pointerdown: PointerEvent;
-        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export type RangeProps = typeof __propDef.props;
+export type RangeEvents = typeof __propDef.events;
+export type RangeSlots = typeof __propDef.slots;
+export default class Range extends SvelteComponent<RangeProps, RangeEvents, RangeSlots> {
+}
 export {};