ropav 0.1.7 → 0.1.8

package/dist/scroll-area.js

@@ -5,13 +5,14 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
 import { r as normalizeDelay, t as clamp } from "./number.js";
 import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
 import { n as toPositiveCssLength } 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 { i as isNodeWithinElement } from "./events.js";
+import { t as getElementDirection } from "./direction.js";
 import { child, computed, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, nextTick, on, onBeforeUnmount, onMounted, reactive, ref, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, useId, watch } from "vue";
 //#region src/utils/dom/scroll.ts
 function getScrollDirection(element) {
-	return element.ownerDocument.defaultView?.getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
+	return getElementDirection(element);
 }
 function getLogicalHorizontalScrollPosition(scrollLeft, maxPosition, direction) {
 	return clamp(direction === "rtl" ? -scrollLeft : scrollLeft, 0, maxPosition);
@@ -385,7 +386,6 @@ function useScrollAreaMeasurement({ elements, isAxisEnabled, minimumThumbSize })
 //#endregion
 //#region src/components/scroll-area/useScrollAreaPointer.ts
 function useScrollAreaPointer(options) {
-	let dragSession;
 	function onScrollbarPointerdown(axis, event) {
 		if (event.target !== event.currentTarget || event.button !== 0) return;
 		const state = options.refreshAxis(axis);
@@ -409,69 +409,59 @@ function useScrollAreaPointer(options) {
 		options.writeAxisPosition(axis, position);
 	}
 	function onThumbPointerdown(axis, event) {
-		if (event.button !== 0 || event.isPrimary === false) return;
-		const state = options.refreshAxis(axis);
-		if (!state.overflow) return;
-		const scrollbar = getScrollbar(axis);
-		const thumb = event.currentTarget;
-		if (!scrollbar) return;
-		const trackRect = scrollbar.getBoundingClientRect();
-		const thumbRect = thumb.getBoundingClientRect();
-		const horizontal = axis === "x";
-		const trackSize = horizontal ? trackRect.width : trackRect.height;
-		const thumbSize = horizontal ? thumbRect.width : thumbRect.height;
-		const travel = Math.max(0, trackSize - thumbSize);
-		if (travel === 0) return;
-		event.preventDefault();
-		stopDragging();
-		if (!options.isEmbedded()) scrollbar.focus({ preventScroll: true });
-		startDragging(axis, event, scrollbar, travel, state);
-	}
-	function startDragging(axis, event, scrollbar, travel, state) {
-		const view = scrollbar.ownerDocument.defaultView;
-		dragSession = {
-			axis,
-			coordinateDirection: axis === "x" && state.direction === "rtl" ? -1 : 1,
-			maxPosition: state.maxPosition,
-			pointerId: getPointerId(event),
-			startCoordinate: getPointerAxisCoordinate(axis, event),
-			startPosition: state.position,
-			travel,
-			view
-		};
-		options.setDraggingAxis(axis);
-		view?.addEventListener("pointermove", onPointermove);
-		view?.addEventListener("pointerup", onPointerend);
-		view?.addEventListener("pointercancel", onPointerend);
-	}
-	function onPointermove(event) {
-		const session = dragSession;
-		if (!session || !isMatchingPointer(event, session.pointerId)) return;
-		options.writeAxisPosition(session.axis, getScrollAreaDragPosition({
-			coordinate: getPointerAxisCoordinate(session.axis, event),
-			coordinateDirection: session.coordinateDirection,
-			maxPosition: session.maxPosition,
-			startCoordinate: session.startCoordinate,
-			startPosition: session.startPosition,
-			travel: session.travel
-		}));
-	}
-	function onPointerend(event) {
-		if (!dragSession || !isMatchingPointer(event, dragSession.pointerId)) return;
-		stopDragging();
-	}
-	function stopDragging() {
-		const view = dragSession?.view;
-		view?.removeEventListener("pointermove", onPointermove);
-		view?.removeEventListener("pointerup", onPointerend);
-		view?.removeEventListener("pointercancel", onPointerend);
-		dragSession = void 0;
-		options.setDraggingAxis(null);
+		return pointerSession.start(event, () => {
+			const state = options.refreshAxis(axis);
+			if (!state.overflow) return;
+			const scrollbar = getScrollbar(axis);
+			const thumb = event.currentTarget;
+			if (!scrollbar) return;
+			const trackRect = scrollbar.getBoundingClientRect();
+			const thumbRect = thumb.getBoundingClientRect();
+			const horizontal = axis === "x";
+			const trackSize = horizontal ? trackRect.width : trackRect.height;
+			const thumbSize = horizontal ? thumbRect.width : thumbRect.height;
+			const travel = Math.max(0, trackSize - thumbSize);
+			if (travel === 0) return;
+			return {
+				state: {
+					axis,
+					coordinateDirection: axis === "x" && state.direction === "rtl" ? -1 : 1,
+					maxPosition: state.maxPosition,
+					scrollbar,
+					startCoordinate: getPointerAxisCoordinate(axis, event),
+					startPosition: state.position,
+					travel
+				},
+				target: scrollbar
+			};
+		});
 	}
 	function getScrollbar(axis) {
 		return axis === "x" ? options.elements.horizontalScrollbar.value : options.elements.verticalScrollbar.value;
 	}
-	onBeforeUnmount(stopDragging);
+	const pointerSession = createPointerSession({
+		endUpdate: "none",
+		onStart(event, session) {
+			event.preventDefault();
+			if (!options.isEmbedded()) session.scrollbar.focus({ preventScroll: true });
+			options.setDraggingAxis(session.axis);
+		},
+		onStop() {
+			options.setDraggingAxis(null);
+		},
+		onUpdate(event, session) {
+			options.writeAxisPosition(session.axis, getScrollAreaDragPosition({
+				coordinate: getPointerAxisCoordinate(session.axis, event),
+				coordinateDirection: session.coordinateDirection,
+				maxPosition: session.maxPosition,
+				startCoordinate: session.startCoordinate,
+				startPosition: session.startPosition,
+				travel: session.travel
+			}));
+		},
+		updateMode: "immediate"
+	});
+	onBeforeUnmount(pointerSession.stop);
 	return {
 		onScrollbarPointerdown,
 		onThumbPointerdown

package/dist/segmented-control.css

@@ -0,0 +1,176 @@
+@layer ropav.components {
+.rp-segmented-control[data-v-aba56e2a] {
+    --_rp-segmented-control-color: var(--rp-color-control-selected-bg);
+    --_rp-segmented-control-on-color: var(--rp-color-control-selected-fg);
+    --_rp-segmented-control-height: var(--rp-size-control-md);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-2);
+    --_rp-segmented-control-font-size: var(--rp-font-size-md);
+    --_rp-segmented-control-radius: var(--rp-radius-sm);
+    display: inline-flex;
+    box-sizing: border-box;
+    max-width: 100%;
+    padding: 2px;
+    color: var(--rp-color-control-fg);
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-segmented-control-font-size);
+    line-height: 1;
+    background-color: var(--rp-color-control-track-bg);
+    border: var(--rp-border-width-thin) solid transparent;
+    border-radius: var(--_rp-segmented-control-radius);
+    vertical-align: middle;
+}
+.rp-segmented-control__control[data-v-aba56e2a] {
+    position: relative;
+    display: inline-flex;
+    align-items: stretch;
+    min-width: 0;
+    min-height: var(--_rp-segmented-control-height);
+    flex: 1 1 auto;
+    cursor: pointer;
+    user-select: none;
+}
+.rp-segmented-control__input[data-v-aba56e2a] {
+    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-segmented-control__indicator[data-v-aba56e2a] {
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    background-color: transparent;
+    border-radius: var(--_rp-segmented-control-radius);
+    box-shadow: none;
+    transition: background-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-segmented-control__label[data-v-aba56e2a] {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 0;
+    padding-inline: var(--_rp-segmented-control-padding-x);
+    gap: var(--_rp-segmented-control-gap);
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    transition: color var(--rp-transition-fast);
+    white-space: nowrap;
+}
+.rp-segmented-control__label[data-v-aba56e2a] svg {
+    width: 1em;
+    height: 1em;
+    flex: 0 0 auto;
+}
+.rp-segmented-control__control:hover:not(.rp-segmented-control__control--disabled) .rp-segmented-control__indicator[data-v-aba56e2a] {
+    background-color: color-mix(in srgb, var(--rp-color-body) 55%, transparent);
+}
+.rp-segmented-control__control--selected .rp-segmented-control__indicator[data-v-aba56e2a], .rp-segmented-control__control--selected:hover:not(.rp-segmented-control__control--disabled) .rp-segmented-control__indicator[data-v-aba56e2a] {
+    background-color: var(--_rp-segmented-control-color);
+    box-shadow: var(--rp-shadow-sm);
+}
+.rp-segmented-control__control--selected .rp-segmented-control__label[data-v-aba56e2a] {
+    color: var(--_rp-segmented-control-on-color);
+    font-weight: var(--rp-font-weight-medium);
+}
+.rp-segmented-control__input:focus-visible + .rp-segmented-control__indicator[data-v-aba56e2a] {
+    outline: none;
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-segmented-control__control--disabled[data-v-aba56e2a] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-segmented-control--disabled[data-v-aba56e2a] {
+    cursor: not-allowed;
+}
+.rp-segmented-control--invalid[data-v-aba56e2a] {
+    border-color: var(--rp-color-red-filled);
+    box-shadow: 0 0 0 var(--rp-border-width-thin) color-mix(in srgb, var(--rp-color-red-filled) 22%, transparent);
+}
+.rp-segmented-control--vertical[data-v-aba56e2a] {
+    flex-direction: column;
+    align-items: stretch;
+}
+.rp-segmented-control--vertical .rp-segmented-control__control[data-v-aba56e2a] {
+    width: 100%;
+}
+.rp-segmented-control--vertical .rp-segmented-control__label[data-v-aba56e2a] {
+    justify-content: flex-start;
+    text-align: start;
+}
+.rp-segmented-control--full-width[data-v-aba56e2a] {
+    display: flex;
+    width: 100%;
+}
+.rp-segmented-control--full-width .rp-segmented-control__control[data-v-aba56e2a] {
+    flex-basis: 0;
+}
+.rp-segmented-control--size-xs[data-v-aba56e2a] {
+    --_rp-segmented-control-height: var(--rp-size-control-xs);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-xs) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-1);
+    --_rp-segmented-control-font-size: var(--rp-font-size-xs);
+}
+.rp-segmented-control--size-sm[data-v-aba56e2a] {
+    --_rp-segmented-control-height: var(--rp-size-control-sm);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-sm) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-2);
+    --_rp-segmented-control-font-size: var(--rp-font-size-sm);
+}
+.rp-segmented-control--size-md[data-v-aba56e2a] {
+    --_rp-segmented-control-height: var(--rp-size-control-md);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-2);
+    --_rp-segmented-control-font-size: var(--rp-font-size-md);
+}
+.rp-segmented-control--size-lg[data-v-aba56e2a] {
+    --_rp-segmented-control-height: var(--rp-size-control-lg);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-lg) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-3);
+    --_rp-segmented-control-font-size: var(--rp-font-size-lg);
+}
+.rp-segmented-control--size-xl[data-v-aba56e2a] {
+    --_rp-segmented-control-height: var(--rp-size-control-xl);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-xl) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-3);
+    --_rp-segmented-control-font-size: var(--rp-font-size-xl);
+}
+.rp-segmented-control--radius-none[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-none);
+}
+.rp-segmented-control--radius-xs[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-xs);
+}
+.rp-segmented-control--radius-sm[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-sm);
+}
+.rp-segmented-control--radius-md[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-md);
+}
+.rp-segmented-control--radius-lg[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-lg);
+}
+.rp-segmented-control--radius-xl[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-xl);
+}
+.rp-segmented-control--radius-full[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-full);
+}
+@media (prefers-reduced-motion: reduce) {
+.rp-segmented-control__indicator[data-v-aba56e2a],
+    .rp-segmented-control__label[data-v-aba56e2a] {
+      transition: none;
+}
+}
+}