ropav 0.1.6 → 0.1.8

package/dist/number-input.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-number-input[data-v-988300ea] {
+.rp-number-input[data-v-64cb2fc3] {
     --_rp-number-input-control-size: var(--_rp-input-height);
     --_rp-number-input-text-align: left;
     overflow: hidden;
@@ -7,39 +7,39 @@
     padding-inline: 0;
     vertical-align: middle;
 }
-.rp-number-input[data-v-988300ea] .rp-input__native {
+.rp-number-input[data-v-64cb2fc3] .rp-input__native {
     appearance: textfield;
     padding-inline: var(--_rp-input-padding-x);
     text-align: var(--_rp-number-input-text-align);
 }
-.rp-number-input--text-align-center[data-v-988300ea] {
+.rp-number-input--text-align-center[data-v-64cb2fc3] {
     --_rp-number-input-text-align: center;
 }
-.rp-number-input--text-align-right[data-v-988300ea] {
+.rp-number-input--text-align-right[data-v-64cb2fc3] {
     --_rp-number-input-text-align: right;
 }
-.rp-number-input[data-v-988300ea] .rp-input__native::-webkit-inner-spin-button,
-  .rp-number-input[data-v-988300ea] .rp-input__native::-webkit-outer-spin-button {
+.rp-number-input[data-v-64cb2fc3] .rp-input__native::-webkit-inner-spin-button,
+  .rp-number-input[data-v-64cb2fc3] .rp-input__native::-webkit-outer-spin-button {
     margin: 0;
     appearance: none;
 }
-.rp-number-input[data-v-988300ea] .rp-input__left,
-  .rp-number-input[data-v-988300ea] .rp-input__right {
+.rp-number-input[data-v-64cb2fc3] .rp-input__left,
+  .rp-number-input[data-v-64cb2fc3] .rp-input__right {
     align-self: stretch;
     margin-block: calc(-1 * var(--rp-border-width-thin));
 }
-.rp-number-input__controls[data-v-988300ea] {
+.rp-number-input__controls[data-v-64cb2fc3] {
     display: inline-flex;
     height: var(--_rp-input-height);
     flex-shrink: 0;
 }
-.rp-number-input__controls--left[data-v-988300ea] {
+.rp-number-input__controls--left[data-v-64cb2fc3] {
     border-inline-end: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__controls--right[data-v-988300ea] {
+.rp-number-input__controls--right[data-v-64cb2fc3] {
     border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__control[data-v-988300ea] {
+.rp-number-input__control[data-v-64cb2fc3] {
     padding: 0;
     font: inherit;
     background: none;
@@ -55,29 +55,29 @@
     color: var(--rp-color-control-icon);
     transition: color var(--rp-transition-fast), background-color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-number-input__control + .rp-number-input__control[data-v-988300ea] {
+.rp-number-input__control + .rp-number-input__control[data-v-64cb2fc3] {
     border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__control[data-v-988300ea]:hover:not(:disabled) {
+.rp-number-input__control[data-v-64cb2fc3]:hover:not(:disabled) {
     color: var(--rp-color-control-fg);
     background-color: var(--rp-color-default-hover);
 }
-.rp-number-input__control[data-v-988300ea]:disabled {
+.rp-number-input__control[data-v-64cb2fc3]:disabled {
     cursor: not-allowed;
     opacity: var(--rp-opacity-disabled);
 }
-.rp-number-input__control-icon[data-v-988300ea] {
+.rp-number-input__control-icon[data-v-64cb2fc3] {
     display: inline-flex;
     align-items: center;
     width: 0.875em;
     height: 0.875em;
     flex-shrink: 0;
 }
-.rp-number-input__control-icon svg[data-v-988300ea] {
+.rp-number-input__control-icon svg[data-v-64cb2fc3] {
     width: 100%;
     height: 100%;
 }
-.rp-number-input__control-icon[data-v-988300ea] >  svg {
+.rp-number-input__control-icon[data-v-64cb2fc3] >  svg {
     display: block;
     width: 100%;
     height: 100%;

package/dist/number-input.js

@@ -1,13 +1,14 @@
 import './number-input.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as minus_default } from "./minus.js";
 import { i as useFormControl, n as provideNestedFormControlOwner } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as input_default } from "./input.js";
-import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, delegateEvents, markRaw, on, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref, withModifiers, withVaporModifiers } from "vue";
+import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, markRaw, on, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref, useTemplateRef, withModifiers } from "vue";
 //#region ~icons/lucide/plus
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M5 12h14m-7-7v14\">", 3, 1);
 function render(_ctx) {
@@ -18,7 +19,7 @@ var plus_default = markRaw(defineVaporComponent({
 	render
 }));
 //#endregion
-//#region src/components/number-input/useNumberInput.ts
+//#region src/components/number-input/numberInputModel.ts
 function finiteOrUndefined(value) {
 	return value !== void 0 && Number.isFinite(value) ? value : void 0;
 }
@@ -78,11 +79,20 @@ function normalizeNumberInputTextAlign(textAlign) {
 function getModelInputValue(value) {
 	return value !== null && Number.isFinite(value) ? String(normalizeZero(value)) : "";
 }
-function useNumberInput(props, emitUpdate, getValue = () => props.modelValue ?? null) {
+//#endregion
+//#region src/components/number-input/useNumberInput.ts
+function useNumberInput(props, onUpdate) {
+	const controllable = useControllableValue({
+		modelValue: () => props.modelValue,
+		defaultValue: () => props.defaultValue ?? null,
+		onChange: onUpdate
+	});
+	const inputComponent = useTemplateRef("inputComponent");
+	provideNestedFormControlOwner();
 	const control = useControlState(props);
 	const bounds = computed(() => normalizeNumberInputBounds(props.min, props.max));
 	const nativeStep = computed(() => normalizeNumberInputStep(props.step));
-	const currentValue = computed(getValue);
+	const currentValue = controllable.value;
 	const modelInputValue = computed(() => getModelInputValue(currentValue.value));
 	const isInteractive = computed(() => !control.disabled && !props.readonly);
 	const controlsPosition = computed(() => normalizeNumberInputControlsPosition(props.controlsPosition));
@@ -123,12 +133,12 @@ function useNumberInput(props, emitUpdate, getValue = () => props.modelValue ??
 		const current = Number.isFinite(currentValue.value) ? currentValue.value : null;
 		const next = stepNumberInputValue(current, direction, nativeStep.value, bounds.value);
 		if (current !== null && next === current) return false;
-		emitUpdate(next);
+		controllable.setValue(next);
 		return true;
 	}
 	function onInputUpdate(value) {
 		if (!isInteractive.value) return;
-		emitUpdate(parseNumberInputValue(value));
+		controllable.setValue(parseNumberInputValue(value));
 	}
 	function onKeydown(event) {
 		if (!isInteractive.value) return;
@@ -152,13 +162,25 @@ function useNumberInput(props, emitUpdate, getValue = () => props.modelValue ??
 		const next = clampNumberInputValue(current, bounds.value);
 		if (next === current) return;
 		input.value = String(next);
-		emitUpdate(next);
+		controllable.setValue(next);
 	}
+	useFormControl({
+		elements: () => [inputComponent.value?.nativeElement],
+		isControlled: () => controllable.isControlled.value,
+		initializeDefault(element) {
+			element.defaultValue = getModelInputValue(controllable.initialValue);
+		},
+		validationMessage: () => props.validationMessage,
+		readResetValue([element]) {
+			controllable.resetValue(parseNumberInputValue(element.value));
+		},
+		syncControlledValue([element]) {
+			element.value = getModelInputValue(controllable.value.value);
+		}
+	});
 	return {
 		control,
 		rootClass,
-		bounds,
-		nativeStep,
 		nativeInputAttrs: computed(() => {
 			const attrs = props.inputAttrs ?? {};
 			return {
@@ -190,11 +212,10 @@ function useNumberInput(props, emitUpdate, getValue = () => props.modelValue ??
 }
 //#endregion
 //#region src/components/number-input/number-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<button data-v-988300ea><span data-v-988300ea class=rp-number-input__control-icon aria-hidden=true></button>");
-var t1 = template("<span data-v-988300ea class=\"rp-number-input__controls rp-number-input__controls--left\">");
-var t2 = template("<button data-v-988300ea><span data-v-988300ea class=rp-number-input__control-icon aria-hidden=true>");
-var t3 = template("<span data-v-988300ea class=\"rp-number-input__controls rp-number-input__controls--right\">");
-delegateEvents("mousedown");
+var t0 = template("<button data-v-64cb2fc3><span data-v-64cb2fc3 class=rp-number-input__control-icon aria-hidden=true></button>");
+var t1 = template("<span data-v-64cb2fc3 class=\"rp-number-input__controls rp-number-input__controls--left\">");
+var t2 = template("<button data-v-64cb2fc3><span data-v-64cb2fc3 class=rp-number-input__control-icon aria-hidden=true>");
+var t3 = template("<span data-v-64cb2fc3 class=\"rp-number-input__controls rp-number-input__controls--right\">");
 //#endregion
 //#region src/components/number-input/number-input.vue
 var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -217,8 +238,8 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: Boolean,
 			default: true
 		},
-		controlsPosition: { default: "right" },
-		textAlign: { default: "left" },
+		controlsPosition: { default: "split" },
+		textAlign: { default: "center" },
 		clampOnBlur: {
 			type: Boolean,
 			default: true
@@ -257,28 +278,7 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const controllable = useControllableValue({
-			modelValue: () => props.modelValue,
-			defaultValue: () => props.defaultValue,
-			onChange: (value) => emit("update:modelValue", value)
-		});
-		const inputComponentRef = ref(null);
-		provideNestedFormControlOwner();
-		const { control, rootClass, nativeInputAttrs, modelInputValue, leftControls, rightControls, canIncrement, canDecrement, increment, decrement, onInputUpdate } = useNumberInput(props, (value) => controllable.setValue(value), () => controllable.value.value);
-		useFormControl({
-			elements: () => [inputComponentRef.value?.nativeElement],
-			isControlled: () => controllable.isControlled.value,
-			initializeDefault(element) {
-				element.defaultValue = getModelInputValue(controllable.initialValue);
-			},
-			validationMessage: () => props.validationMessage,
-			readResetValue(elements) {
-				controllable.resetValue(parseNumberInputValue(elements[0].value));
-			},
-			syncControlledValue(elements) {
-				elements[0].value = getModelInputValue(controllable.value.value);
-			}
-		});
+		const { control, rootClass, nativeInputAttrs, modelInputValue, leftControls, rightControls, canIncrement, canDecrement, increment, decrement, onInputUpdate } = useNumberInput(props, (value) => emit("update:modelValue", value));
 		const { attrs, getPartAttrs } = useStylesApi(props, "root");
 		const inputClassNames = computed(() => ({
 			root: [rootClass.value, props.classNames?.root],
@@ -292,7 +292,7 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			return {
 				...getPartAttrs("control", { class: ["rp-number-input__control", `rp-number-input__control--${controlType}`] }),
 				"data-control": controlType,
-				"data-disabled": presence(isControlDisabled(controlType))
+				"data-disabled": toPresenceAttribute(isControlDisabled(controlType))
 			};
 		}
 		function focusNativeInput(event) {
@@ -363,7 +363,7 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 							return createComponent(unref(minus_default));
 						}, 1);
 					}, 261);
-					n12.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
+					on(n12, "mousedown", withModifiers(() => {}, ["prevent"]));
 					on(n12, "click", withModifiers(($event) => onControlClick($event, _for_item0.value), ["stop"]));
 					return n12;
 				}, (controlType) => controlType, 9);
@@ -401,17 +401,17 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 							return createComponent(unref(minus_default));
 						}, 1);
 					}, 517);
-					n27.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
+					on(n27, "mousedown", withModifiers(() => {}, ["prevent"]));
 					on(n27, "click", withModifiers(($event) => onControlClick($event, _for_item0.value), ["stop"]));
 					return n27;
 				}, (controlType) => controlType, 9);
 				return n28;
 			}
 		} : void 0] }, true);
-		setStaticTemplateRef(n30, inputComponentRef, null, "inputComponentRef");
+		setStaticTemplateRef(n30, "inputComponent");
 		return n30;
 	}
-}), [["__scopeId", "data-v-988300ea"]]);
+}), [["__scopeId", "data-v-64cb2fc3"]]);
 //#endregion
 //#region src/components/number-input/types.ts
 var numberInputParts = [

package/dist/number.js

@@ -0,0 +1,22 @@
+//#region src/utils/number.ts
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function getValuePercent(value, min, max) {
+	if (![
+		value,
+		min,
+		max
+	].every(Number.isFinite) || max <= min) return 0;
+	return clamp((value - min) / (max - min) * 100, 0, 100);
+}
+function normalizeDelay(value, fallback = 0) {
+	if (value == null) return fallback;
+	return Number.isFinite(value) ? Math.max(0, value) : fallback;
+}
+function roundTo(value, fractionDigits = 2) {
+	const factor = 10 ** fractionDigits;
+	return Math.round(value * factor) / factor;
+}
+//#endregion
+export { roundTo as i, getValuePercent as n, normalizeDelay as r, clamp as t };

package/dist/overlay.js

@@ -1,7 +1,8 @@
 import './overlay.css';
-import { n as useStylesApi } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as clamp } from "./number.js";
 import { computed, createIf, defineVaporComponent, renderEffect, setDynamicProps, template, unref } from "vue";
 //#region src/components/overlay/useOverlay.ts
 function getBlurValue(blur) {
@@ -18,7 +19,7 @@ function useOverlay(props) {
 	const normalizedOpacity = computed(() => {
 		const opacity = props.opacity;
 		if (opacity === void 0 || !Number.isFinite(opacity)) return 1;
-		return Math.min(1, Math.max(0, opacity));
+		return clamp(opacity, 0, 1);
 	});
 	const blurValue = computed(() => getBlurValue(props.blur));
 	const hasBlur = computed(() => Boolean(blurValue.value));

package/dist/pagination.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-pagination[data-v-6ae45781] {
+.rp-pagination[data-v-cb68db8f] {
     --_rp-pagination-item-size: var(--rp-size-control-md);
     --_rp-pagination-font-size: var(--rp-font-size-md);
     --_rp-pagination-radius: var(--rp-radius-sm);
@@ -16,7 +16,7 @@
     line-height: 1;
     vertical-align: middle;
 }
-.rp-pagination__items[data-v-6ae45781] {
+.rp-pagination__items[data-v-cb68db8f] {
     display: flex;
     align-items: center;
     max-width: 100%;
@@ -25,11 +25,11 @@
     gap: var(--_rp-pagination-gap);
     list-style: none;
 }
-.rp-pagination__item[data-v-6ae45781] {
+.rp-pagination__item[data-v-cb68db8f] {
     display: flex;
     flex: 0 0 auto;
 }
-.rp-pagination__page[data-v-6ae45781], .rp-pagination__control[data-v-6ae45781], .rp-pagination__ellipsis[data-v-6ae45781] {
+.rp-pagination__page[data-v-cb68db8f], .rp-pagination__control[data-v-cb68db8f], .rp-pagination__ellipsis[data-v-cb68db8f] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -45,96 +45,96 @@
     border: var(--rp-border-width-thin) solid transparent;
     border-radius: var(--_rp-pagination-radius);
 }
-.rp-pagination__page[data-v-6ae45781], .rp-pagination__control[data-v-6ae45781] {
+.rp-pagination__page[data-v-cb68db8f], .rp-pagination__control[data-v-cb68db8f] {
     appearance: none;
     cursor: pointer;
 }
-.rp-pagination__page[data-v-6ae45781]:hover:not(:disabled), .rp-pagination__control[data-v-6ae45781]:hover:not(:disabled) {
+.rp-pagination__page[data-v-cb68db8f]:hover:not(:disabled), .rp-pagination__control[data-v-cb68db8f]:hover:not(:disabled) {
     background-color: var(--rp-color-default-hover);
 }
-.rp-pagination__page[data-v-6ae45781]:focus-visible, .rp-pagination__control[data-v-6ae45781]:focus-visible {
+.rp-pagination__page[data-v-cb68db8f]:focus-visible, .rp-pagination__control[data-v-cb68db8f]:focus-visible {
     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-pagination__page[data-v-6ae45781]:disabled, .rp-pagination__control[data-v-6ae45781]:disabled {
+.rp-pagination__page[data-v-cb68db8f]:disabled, .rp-pagination__control[data-v-cb68db8f]:disabled {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-pagination__page[data-v-6ae45781] {
+.rp-pagination__page[data-v-cb68db8f] {
     width: auto;
     padding-inline: var(--rp-spacing-2);
     font-variant-numeric: tabular-nums;
     transition: box-shadow var(--rp-transition-fast);
 }
-.rp-pagination__page--active[data-v-6ae45781] {
+.rp-pagination__page--active[data-v-cb68db8f] {
     color: var(--_rp-pagination-active-fg);
     font-weight: var(--rp-font-weight-medium);
     background-color: var(--_rp-pagination-active-bg);
     border-color: var(--_rp-pagination-active-bg);
 }
-.rp-pagination__page--active[data-v-6ae45781]:hover:not(:disabled) {
+.rp-pagination__page--active[data-v-cb68db8f]:hover:not(:disabled) {
     background-color: var(--_rp-pagination-active-bg-hover);
     border-color: var(--_rp-pagination-active-bg-hover);
     color: var(--_rp-pagination-active-fg-hover);
 }
-.rp-pagination__control[data-v-6ae45781] {
+.rp-pagination__control[data-v-cb68db8f] {
     transition: color var(--rp-transition-fast), background-color var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-pagination__control-icon[data-v-6ae45781], .rp-pagination__ellipsis[data-v-6ae45781] >  svg {
+.rp-pagination__control-icon[data-v-cb68db8f], .rp-pagination__ellipsis[data-v-cb68db8f] >  svg {
     display: block;
     width: 1em;
     height: 1em;
 }
-.rp-pagination__ellipsis[data-v-6ae45781] {
+.rp-pagination__ellipsis[data-v-cb68db8f] {
     color: var(--rp-color-dimmed);
 }
-.rp-pagination:dir(rtl) .rp-pagination__control-icon[data-v-6ae45781] {
+.rp-pagination:dir(rtl) .rp-pagination__control-icon[data-v-cb68db8f] {
     transform: rotate(180deg);
 }
-.rp-pagination--disabled .rp-pagination__page[data-v-6ae45781]:not(:disabled), .rp-pagination--disabled .rp-pagination__control[data-v-6ae45781]:not(:disabled) {
+.rp-pagination--disabled .rp-pagination__page[data-v-cb68db8f]:not(:disabled), .rp-pagination--disabled .rp-pagination__control[data-v-cb68db8f]:not(:disabled) {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-pagination--size-xs[data-v-6ae45781] {
+.rp-pagination--size-xs[data-v-cb68db8f] {
     --_rp-pagination-item-size: var(--rp-size-control-xs);
     --_rp-pagination-font-size: var(--rp-font-size-xs);
 }
-.rp-pagination--size-sm[data-v-6ae45781] {
+.rp-pagination--size-sm[data-v-cb68db8f] {
     --_rp-pagination-item-size: var(--rp-size-control-sm);
     --_rp-pagination-font-size: var(--rp-font-size-sm);
 }
-.rp-pagination--size-md[data-v-6ae45781] {
+.rp-pagination--size-md[data-v-cb68db8f] {
     --_rp-pagination-item-size: var(--rp-size-control-md);
     --_rp-pagination-font-size: var(--rp-font-size-md);
 }
-.rp-pagination--size-lg[data-v-6ae45781] {
+.rp-pagination--size-lg[data-v-cb68db8f] {
     --_rp-pagination-item-size: var(--rp-size-control-lg);
     --_rp-pagination-font-size: var(--rp-font-size-lg);
 }
-.rp-pagination--size-xl[data-v-6ae45781] {
+.rp-pagination--size-xl[data-v-cb68db8f] {
     --_rp-pagination-item-size: var(--rp-size-control-xl);
     --_rp-pagination-font-size: var(--rp-font-size-xl);
 }
-.rp-pagination--radius-none[data-v-6ae45781] {
+.rp-pagination--radius-none[data-v-cb68db8f] {
     --_rp-pagination-radius: var(--rp-radius-none);
 }
-.rp-pagination--radius-xs[data-v-6ae45781] {
+.rp-pagination--radius-xs[data-v-cb68db8f] {
     --_rp-pagination-radius: var(--rp-radius-xs);
 }
-.rp-pagination--radius-sm[data-v-6ae45781] {
+.rp-pagination--radius-sm[data-v-cb68db8f] {
     --_rp-pagination-radius: var(--rp-radius-sm);
 }
-.rp-pagination--radius-md[data-v-6ae45781] {
+.rp-pagination--radius-md[data-v-cb68db8f] {
     --_rp-pagination-radius: var(--rp-radius-md);
 }
-.rp-pagination--radius-lg[data-v-6ae45781] {
+.rp-pagination--radius-lg[data-v-cb68db8f] {
     --_rp-pagination-radius: var(--rp-radius-lg);
 }
-.rp-pagination--radius-xl[data-v-6ae45781] {
+.rp-pagination--radius-xl[data-v-cb68db8f] {
     --_rp-pagination-radius: var(--rp-radius-xl);
 }
-.rp-pagination--radius-full[data-v-6ae45781] {
+.rp-pagination--radius-full[data-v-cb68db8f] {
     --_rp-pagination-radius: var(--rp-radius-full);
 }
 }