ropav 0.1.7 → 0.1.8

package/dist/slider.js

@@ -11,8 +11,8 @@ import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./
 import { n as mergeAriaIdRefs } from "./aria.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as toCssLength } from "./css.js";
-import { n as isMatchingPointer, t as getPointerId } from "./pointer.js";
 import { t as createRafScheduler } from "./rafScheduler.js";
+import { t as createPointerSession } from "./pointerSession.js";
 import { t as getFloatingOffsetStyle } from "./floatingOffset.js";
 import { n as resolveTooltipColorStyleWithContrast, r as useDelayedOpen, t as tooltip_default } from "./tooltip.js";
 import { applyVShow, child, computed, createComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setText, template, toDisplayString, toRef, txt, unref, useId, useSlots, watch } from "vue";
@@ -122,9 +122,7 @@ function useSliderPointerPreview(options) {
 	const dragging = ref(false);
 	const previewAvailable = ref(false);
 	const previewValue = ref(options.initialValue);
-	let dragView = null;
-	let dragPointerId;
-	let dragTrack = null;
+	let disposing = false;
 	let pendingPreview;
 	const previewScheduler = createRafScheduler(applyScheduledPreview, () => pendingPreview?.track.ownerDocument.defaultView);
 	function updateFromPointer(pointer, track) {
@@ -158,43 +156,36 @@ function useSliderPointerPreview(options) {
 		previewScheduler.cancel();
 		pendingPreview = void 0;
 	}
-	function removeDragListeners() {
-		dragView?.removeEventListener("pointermove", onWindowPointerMove);
-		dragView?.removeEventListener("pointerup", onPointerEnd);
-		dragView?.removeEventListener("pointercancel", onPointerEnd);
-		dragView = null;
-		dragPointerId = void 0;
-		dragTrack = null;
-	}
+	const pointerSession = createPointerSession({
+		endUpdate: "event",
+		onStart(event, track) {
+			cancelScheduledPreview();
+			dragging.value = true;
+			updateFromPointer(event, track);
+		},
+		onStop() {
+			dragging.value = false;
+			if (!disposing) options.onStateChange();
+		},
+		onUpdate(event, track) {
+			if (updateFromPointer(event, track) && event.type === "pointermove") options.onStateChange();
+		}
+	});
 	function onPointerMove(event) {
-		if (dragging.value && !isMatchingPointer(event, dragPointerId)) return;
+		if (dragging.value) return;
 		const track = event.currentTarget;
 		if (track) schedulePreview(event, track);
 	}
-	function onWindowPointerMove(event) {
-		if (!isMatchingPointer(event, dragPointerId)) return;
-		if (dragTrack) schedulePreview(event, dragTrack);
-	}
-	function onPointerEnd(event) {
-		if (!isMatchingPointer(event, dragPointerId)) return;
-		cancelScheduledPreview();
-		if (dragTrack) updateFromPointer(event, dragTrack);
-		dragging.value = false;
-		removeDragListeners();
-		options.onStateChange();
-	}
 	function onPointerDown(event) {
-		if (options.disabled() || event.button !== 0 || event.isPrimary === false) return false;
-		removeDragListeners();
-		dragging.value = true;
-		dragPointerId = getPointerId(event);
-		dragTrack = event.currentTarget;
-		if (dragTrack) updateFromPointer(event, dragTrack);
-		dragView = dragTrack?.ownerDocument.defaultView ?? null;
-		dragView?.addEventListener("pointermove", onWindowPointerMove);
-		dragView?.addEventListener("pointerup", onPointerEnd);
-		dragView?.addEventListener("pointercancel", onPointerEnd);
-		return true;
+		return pointerSession.start(event, () => {
+			if (options.disabled()) return;
+			const track = event.currentTarget;
+			if (!track) return;
+			return {
+				state: track,
+				target: track
+			};
+		});
 	}
 	function onTrackEnter(event) {
 		if (!options.enabled()) return;
@@ -207,7 +198,8 @@ function useSliderPointerPreview(options) {
 		if (!dragging.value && options.enabled()) cancelScheduledPreview();
 	}
 	onBeforeUnmount(() => {
-		removeDragListeners();
+		disposing = true;
+		pointerSession.stop();
 		cancelScheduledPreview();
 	});
 	return {
@@ -1240,113 +1232,62 @@ function getRangeSliderPointerValue(pointer, geometry, bounds) {
 //#endregion
 //#region src/components/slider/useRangeSliderPointer.ts
 function useRangeSliderPointer(options) {
-	let session;
-	let pendingPointerEvent;
-	let geometryDirty = false;
-	function refreshGeometry() {
-		const currentSession = session;
-		if (!currentSession) return false;
-		if (!geometryDirty) return true;
+	function refreshGeometry(currentSession) {
 		const geometry = options.getPointerGeometry(currentSession.track);
 		if (geometry === void 0) return false;
-		geometryDirty = false;
 		currentSession.geometry = geometry;
 		return true;
 	}
-	function applyScheduledUpdate() {
-		if (!refreshGeometry()) return;
-		const event = pendingPointerEvent;
-		pendingPointerEvent = void 0;
-		if (event && isCurrentPointer(event)) updateFromPointer(event);
-	}
-	const updateScheduler = createRafScheduler(applyScheduledUpdate, () => session?.view);
-	function flushScheduledUpdate() {
-		updateScheduler.cancel();
-		applyScheduledUpdate();
-	}
-	function scheduleUpdate() {
-		if (session) updateScheduler.schedule();
-	}
-	function onGeometryChange() {
-		if (!session) return;
-		geometryDirty = true;
-		scheduleUpdate();
-	}
-	function stopDragging() {
-		const stoppedSession = session;
-		if (!stoppedSession) return;
-		stoppedSession.view?.removeEventListener("pointermove", onPointerMove);
-		stoppedSession.view?.removeEventListener("pointerup", onPointerEnd);
-		stoppedSession.view?.removeEventListener("pointercancel", onPointerEnd);
-		stoppedSession.view?.removeEventListener("resize", onGeometryChange);
-		stoppedSession.view?.removeEventListener("scroll", onGeometryChange, true);
-		updateScheduler.cancel();
-		pendingPointerEvent = void 0;
-		geometryDirty = false;
-		session = void 0;
-		options.endDrag(stoppedSession.thumb);
-	}
-	function switchDraggingThumb(nextThumb) {
-		const currentSession = session;
-		if (!currentSession || currentSession.thumb === nextThumb) return;
+	function switchDraggingThumb(currentSession, nextThumb) {
+		if (currentSession.thumb === nextThumb) return;
 		const previousThumb = currentSession.thumb;
 		currentSession.thumb = nextThumb;
 		options.transferDrag(previousThumb, nextThumb);
 		options.setActiveThumb(nextThumb);
 		options.transferFocusedThumb(currentSession.track, previousThumb, nextThumb);
 	}
-	function updateFromPointer(event) {
-		const currentSession = session;
-		if (!currentSession) return;
+	function updateFromPointer(event, currentSession) {
 		const value = options.getPointerValue(event, currentSession.geometry);
 		if (value == null) return;
-		switchDraggingThumb(options.updateThumb(currentSession.thumb, value, currentSession.anchorValue));
-	}
-	function isCurrentPointer(event) {
-		return isMatchingPointer(event, session?.pointerId);
-	}
-	function onPointerMove(event) {
-		if (!isCurrentPointer(event)) return;
-		if (!session) return;
-		pendingPointerEvent = event;
-		scheduleUpdate();
-	}
-	function onPointerEnd(event) {
-		if (!isCurrentPointer(event)) return;
-		if (event.type === "pointerup") flushScheduledUpdate();
-		stopDragging();
-	}
+		switchDraggingThumb(currentSession, options.updateThumb(currentSession.thumb, value, currentSession.anchorValue));
+	}
+	const pointerSession = createPointerSession({
+		onStart(event, currentSession) {
+			event.preventDefault();
+			options.setActiveThumb(currentSession.thumb);
+			options.focusThumb(currentSession.track, currentSession.thumb);
+			options.startDrag(currentSession.thumb);
+			switchDraggingThumb(currentSession, options.updateThumb(currentSession.thumb, currentSession.initialValue, currentSession.anchorValue));
+		},
+		onStop(currentSession) {
+			options.endDrag(currentSession.thumb);
+		},
+		onUpdate: updateFromPointer,
+		refreshGeometry
+	});
 	function onTrackPointerDown(event) {
-		if (options.disabled() || event.button !== 0 || event.isPrimary === false) return;
-		const track = event.currentTarget;
-		if (!track) return;
-		const geometry = options.getPointerGeometry(track);
-		if (geometry === void 0) return;
-		const pointerValue = options.getPointerValue(event, geometry);
-		if (pointerValue == null) return;
-		const thumb = options.getThumb(event, pointerValue);
-		event.preventDefault();
-		stopDragging();
-		options.setActiveThumb(thumb);
-		options.focusThumb(track, thumb);
-		session = {
-			view: track.ownerDocument.defaultView,
-			track,
-			geometry,
-			thumb,
-			anchorValue: options.getAnchorValue(thumb),
-			pointerId: getPointerId(event)
-		};
-		options.startDrag(thumb);
-		switchDraggingThumb(options.updateThumb(thumb, pointerValue, session.anchorValue));
-		const view = session?.view;
-		view?.addEventListener("pointermove", onPointerMove);
-		view?.addEventListener("pointerup", onPointerEnd);
-		view?.addEventListener("pointercancel", onPointerEnd);
-		view?.addEventListener("resize", onGeometryChange);
-		view?.addEventListener("scroll", onGeometryChange, true);
+		return pointerSession.start(event, () => {
+			if (options.disabled()) return;
+			const track = event.currentTarget;
+			if (!track) return;
+			const geometry = options.getPointerGeometry(track);
+			if (geometry === void 0) return;
+			const initialValue = options.getPointerValue(event, geometry);
+			if (initialValue == null) return;
+			const thumb = options.getThumb(event, initialValue);
+			return {
+				state: {
+					anchorValue: options.getAnchorValue(thumb),
+					geometry,
+					initialValue,
+					thumb,
+					track
+				},
+				target: track
+			};
+		});
 	}
-	onBeforeUnmount(stopDragging);
+	onBeforeUnmount(pointerSession.stop);
 	return { onTrackPointerDown };
 }
 //#endregion

package/dist/tags-input.css

@@ -0,0 +1,197 @@
+@layer ropav.components {
+.rp-tags-input[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-md);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-md);
+    --_rp-tags-input-radius: var(--rp-radius-sm);
+    --_rp-tags-input-invalid-border: var(--rp-color-red-outline);
+    --_rp-tags-input-invalid-ring: color-mix(in srgb, var(--rp-color-red-outline) 32%, transparent);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-width: 180px;
+    min-height: var(--_rp-tags-input-height);
+    padding: var(--rp-spacing-1) var(--_rp-tags-input-padding-x);
+    gap: var(--rp-spacing-2);
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-tags-input-font-size);
+    font-weight: var(--rp-font-weight-normal);
+    line-height: 1;
+    background-color: var(--rp-color-control-bg);
+    border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+    border-radius: var(--_rp-tags-input-radius);
+    cursor: text;
+    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-tags-input[data-v-9fbac28f]:hover:not(.rp-tags-input--disabled):not(.rp-tags-input--invalid) {
+    border-color: var(--rp-color-control-border-hover);
+}
+.rp-tags-input[data-v-9fbac28f]:focus-within:not(.rp-tags-input--disabled):not(.rp-tags-input--invalid) {
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-tags-input__native[data-v-9fbac28f] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+.rp-tags-input--size-xs[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-xs);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-xs) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-xs);
+}
+.rp-tags-input--size-sm[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-sm);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-sm) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-sm);
+}
+.rp-tags-input--size-md[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-md);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-md);
+}
+.rp-tags-input--size-lg[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-lg);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-lg) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-lg);
+}
+.rp-tags-input--size-xl[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-xl);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-xl) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-xl);
+}
+.rp-tags-input--radius-xs[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-xs);
+}
+.rp-tags-input--radius-sm[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-sm);
+}
+.rp-tags-input--radius-md[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-md);
+}
+.rp-tags-input--radius-lg[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-lg);
+}
+.rp-tags-input--radius-xl[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-xl);
+}
+.rp-tags-input--disabled[data-v-9fbac28f] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-tags-input--readonly[data-v-9fbac28f] {
+    background-color: var(--rp-color-control-readonly-bg);
+}
+.rp-tags-input--invalid[data-v-9fbac28f] {
+    border-color: var(--_rp-tags-input-invalid-border);
+}
+.rp-tags-input--invalid[data-v-9fbac28f]:focus-within:not(.rp-tags-input--disabled) {
+    border-color: var(--_rp-tags-input-invalid-border);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-tags-input-invalid-ring);
+}
+.rp-tags-input__tags[data-v-9fbac28f] {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 0;
+    gap: var(--rp-spacing-1);
+}
+.rp-tags-input__tag[data-v-9fbac28f] {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    max-width: 100%;
+    min-height: calc(var(--_rp-tags-input-height) - var(--rp-spacing-3));
+    padding-inline: var(--rp-spacing-2) var(--rp-spacing-1);
+    gap: var(--rp-spacing-1);
+    color: var(--rp-color-control-fg);
+    background-color: var(--rp-color-default-hover);
+    border-radius: var(--_rp-tags-input-radius);
+}
+.rp-tags-input__tag-label[data-v-9fbac28f] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.6;
+    flex-shrink: 0;
+    transition: opacity var(--rp-transition-fast);
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f]:hover {
+    opacity: 1;
+}
+.rp-tags-input__tag-remove svg[data-v-9fbac28f] {
+    width: 100%;
+    height: 100%;
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f] {
+    width: 1em;
+    height: 1em;
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f]:disabled {
+    cursor: not-allowed;
+}
+.rp-tags-input__input[data-v-9fbac28f] {
+    box-sizing: border-box;
+    flex: 1 0 4rem;
+    width: 4rem;
+    min-width: 4rem;
+    min-height: calc(var(--_rp-tags-input-height) - var(--rp-spacing-2));
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: var(--rp-color-control-fg);
+    line-height: 1;
+}
+.rp-tags-input__input[data-v-9fbac28f]::placeholder {
+    color: var(--rp-color-control-placeholder);
+}
+.rp-tags-input__input[data-v-9fbac28f]:disabled {
+    cursor: not-allowed;
+}
+.rp-tags-input__clear[data-v-9fbac28f] {
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+.rp-tags-input__clear svg[data-v-9fbac28f] {
+    width: 100%;
+    height: 100%;
+}
+.rp-tags-input__clear[data-v-9fbac28f] {
+    flex-shrink: 0;
+    color: var(--rp-color-control-icon);
+    transform: translateX(var(--rp-spacing-1));
+    transition: color var(--rp-transition-fast);
+}
+.rp-tags-input__clear[data-v-9fbac28f]:hover {
+    color: var(--rp-color-control-fg);
+}
+}