ropav 0.0.10 → 0.0.12

package/dist/number-input.css

@@ -1,86 +1,88 @@
-.rp-number-input[data-v-b5d8edf1] {
-  --_rp-number-input-control-size: var(--_rp-input-height);
-  --_rp-number-input-text-align: left;
-  overflow: hidden;
-  vertical-align: middle;
-}
-.rp-number-input[data-v-b5d8edf1] .rp-input__native {
-  appearance: textfield;
-  text-align: var(--_rp-number-input-text-align);
-}
-.rp-number-input--text-align-center[data-v-b5d8edf1] {
-  --_rp-number-input-text-align: center;
-}
-.rp-number-input--text-align-right[data-v-b5d8edf1] {
-  --_rp-number-input-text-align: right;
-}
-.rp-number-input[data-v-b5d8edf1] .rp-input__native::-webkit-inner-spin-button,
-.rp-number-input[data-v-b5d8edf1] .rp-input__native::-webkit-outer-spin-button {
-  margin: 0;
-  appearance: none;
-}
-.rp-number-input[data-v-b5d8edf1] .rp-input__left,
-.rp-number-input[data-v-b5d8edf1] .rp-input__right {
-  align-self: stretch;
-  margin-block: calc(-1 * var(--rp-border-width-thin));
-}
-.rp-number-input[data-v-b5d8edf1] .rp-input__left {
-  margin-inline-start: calc(-1 * var(--_rp-input-padding-x));
-}
-.rp-number-input[data-v-b5d8edf1] .rp-input__right {
-  margin-inline-end: calc(-1 * var(--_rp-input-padding-x));
-}
-.rp-number-input__controls[data-v-b5d8edf1] {
-  display: inline-flex;
-  height: var(--_rp-input-height);
-  flex-shrink: 0;
-}
-.rp-number-input__controls--left[data-v-b5d8edf1] {
-  border-inline-end: var(--rp-border-width-thin) solid var(--rp-color-control-border);
-}
-.rp-number-input__controls--right[data-v-b5d8edf1] {
-  border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
-}
-.rp-number-input__control[data-v-b5d8edf1] {
-  padding: 0;
-  font: inherit;
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--_rp-number-input-control-size);
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  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-b5d8edf1] {
-  border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
-}
-.rp-number-input__control[data-v-b5d8edf1]:hover:not(:disabled) {
-  color: var(--rp-color-control-fg);
-  background-color: var(--rp-color-default-hover);
-}
-.rp-number-input__control[data-v-b5d8edf1]:disabled {
-  cursor: not-allowed;
-  opacity: var(--rp-opacity-disabled);
-}
-.rp-number-input__control-icon[data-v-b5d8edf1] {
-  display: inline-flex;
-  align-items: center;
-  width: 0.875em;
-  height: 0.875em;
-  flex-shrink: 0;
-}
-.rp-number-input__control-icon svg[data-v-b5d8edf1] {
-  width: 100%;
-  height: 100%;
-}
-.rp-number-input__control-icon[data-v-b5d8edf1] >  svg {
-  display: block;
-  width: 100%;
-  height: 100%;
+@layer ropav.components {
+.rp-number-input[data-v-eb2db673] {
+    --_rp-number-input-control-size: var(--_rp-input-height);
+    --_rp-number-input-text-align: left;
+    overflow: hidden;
+    vertical-align: middle;
+}
+.rp-number-input[data-v-eb2db673] .rp-input__native {
+    appearance: textfield;
+    text-align: var(--_rp-number-input-text-align);
+}
+.rp-number-input--text-align-center[data-v-eb2db673] {
+    --_rp-number-input-text-align: center;
+}
+.rp-number-input--text-align-right[data-v-eb2db673] {
+    --_rp-number-input-text-align: right;
+}
+.rp-number-input[data-v-eb2db673] .rp-input__native::-webkit-inner-spin-button,
+  .rp-number-input[data-v-eb2db673] .rp-input__native::-webkit-outer-spin-button {
+    margin: 0;
+    appearance: none;
+}
+.rp-number-input[data-v-eb2db673] .rp-input__left,
+  .rp-number-input[data-v-eb2db673] .rp-input__right {
+    align-self: stretch;
+    margin-block: calc(-1 * var(--rp-border-width-thin));
+}
+.rp-number-input[data-v-eb2db673] .rp-input__left {
+    margin-inline-start: calc(-1 * var(--_rp-input-padding-x));
+}
+.rp-number-input[data-v-eb2db673] .rp-input__right {
+    margin-inline-end: calc(-1 * var(--_rp-input-padding-x));
+}
+.rp-number-input__controls[data-v-eb2db673] {
+    display: inline-flex;
+    height: var(--_rp-input-height);
+    flex-shrink: 0;
+}
+.rp-number-input__controls--left[data-v-eb2db673] {
+    border-inline-end: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__controls--right[data-v-eb2db673] {
+    border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__control[data-v-eb2db673] {
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_rp-number-input-control-size);
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    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-eb2db673] {
+    border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__control[data-v-eb2db673]:hover:not(:disabled) {
+    color: var(--rp-color-control-fg);
+    background-color: var(--rp-color-default-hover);
+}
+.rp-number-input__control[data-v-eb2db673]:disabled {
+    cursor: not-allowed;
+    opacity: var(--rp-opacity-disabled);
+}
+.rp-number-input__control-icon[data-v-eb2db673] {
+    display: inline-flex;
+    align-items: center;
+    width: 0.875em;
+    height: 0.875em;
+    flex-shrink: 0;
+}
+.rp-number-input__control-icon svg[data-v-eb2db673] {
+    width: 100%;
+    height: 100%;
+}
+.rp-number-input__control-icon[data-v-eb2db673] >  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
 }

package/dist/number-input.js

@@ -1,10 +1,12 @@
 import './number-input.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.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, o as useControllableValue } 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, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref, withModifiers, withVaporModifiers } from "vue";
+import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, delegateEvents, markRaw, on, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref, withModifiers, withVaporModifiers } 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) {
@@ -75,11 +77,12 @@ function normalizeNumberInputTextAlign(textAlign) {
 function getModelInputValue(value) {
 	return value !== null && Number.isFinite(value) ? String(normalizeZero(value)) : "";
 }
-function useNumberInput(props, emitUpdate) {
+function useNumberInput(props, emitUpdate, getValue = () => props.modelValue ?? null) {
 	const control = useControlState(props);
 	const bounds = computed(() => normalizeNumberInputBounds(props.min, props.max));
 	const nativeStep = computed(() => normalizeNumberInputStep(props.step));
-	const modelInputValue = computed(() => getModelInputValue(props.modelValue));
+	const currentValue = computed(getValue);
+	const modelInputValue = computed(() => getModelInputValue(currentValue.value));
 	const isInteractive = computed(() => !control.disabled && !props.readonly);
 	const controlsPosition = computed(() => normalizeNumberInputControlsPosition(props.controlsPosition));
 	const textAlign = computed(() => normalizeNumberInputTextAlign(props.textAlign));
@@ -106,17 +109,17 @@ function useNumberInput(props, emitUpdate) {
 	}));
 	const canIncrement = computed(() => {
 		if (!isInteractive.value) return false;
-		if (props.modelValue === null || !Number.isFinite(props.modelValue)) return true;
-		return bounds.value.max === void 0 || props.modelValue < bounds.value.max;
+		if (currentValue.value === null || !Number.isFinite(currentValue.value)) return true;
+		return bounds.value.max === void 0 || currentValue.value < bounds.value.max;
 	});
 	const canDecrement = computed(() => {
 		if (!isInteractive.value) return false;
-		if (props.modelValue === null || !Number.isFinite(props.modelValue)) return true;
-		return bounds.value.min === void 0 || props.modelValue > bounds.value.min;
+		if (currentValue.value === null || !Number.isFinite(currentValue.value)) return true;
+		return bounds.value.min === void 0 || currentValue.value > bounds.value.min;
 	});
 	function emitStep(direction) {
 		if (!(direction === 1 ? canIncrement.value : canDecrement.value)) return false;
-		const current = Number.isFinite(props.modelValue) ? props.modelValue : null;
+		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);
@@ -186,20 +189,23 @@ function useNumberInput(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/number-input/number-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<button data-v-b5d8edf1 type=button tabindex=-1><span data-v-b5d8edf1 class=rp-number-input__control-icon aria-hidden=true></button>");
-var t1 = template("<span data-v-b5d8edf1 class=\"rp-number-input__controls rp-number-input__controls--left\">");
-var t2 = template("<button data-v-b5d8edf1 type=button tabindex=-1><span data-v-b5d8edf1 class=rp-number-input__control-icon aria-hidden=true>");
-var t3 = template("<span data-v-b5d8edf1 class=\"rp-number-input__controls rp-number-input__controls--right\">");
+var t0 = template("<button data-v-eb2db673><span data-v-eb2db673 class=rp-number-input__control-icon aria-hidden=true></button>");
+var t1 = template("<span data-v-eb2db673 class=\"rp-number-input__controls rp-number-input__controls--left\">");
+var t2 = template("<button data-v-eb2db673><span data-v-eb2db673 class=rp-number-input__control-icon aria-hidden=true>");
+var t3 = template("<span data-v-eb2db673 class=\"rp-number-input__controls rp-number-input__controls--right\">");
 delegateEvents("mousedown");
 //#endregion
 //#region src/components/number-input/number-input.vue
 var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpNumberInput",
+	inheritAttrs: false,
 	__name: "number-input",
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: null },
 		min: {},
 		max: {},
 		step: { default: 1 },
@@ -242,13 +248,52 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		inputAttrs: {},
 		validationMessage: {},
 		incrementLabel: { default: "Increment value" },
-		decrementLabel: { default: "Decrement value" }
+		decrementLabel: { default: "Decrement value" },
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { control, rootClass, nativeInputAttrs, modelInputValue, leftControls, rightControls, canIncrement, canDecrement, increment, decrement, onInputUpdate } = useNumberInput(props, (value) => emit("update:modelValue", value));
+		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 { attrs, getPartAttrs } = useStylesApi(props, "root");
+		const inputClassNames = computed(() => ({
+			root: [rootClass.value, props.classNames?.root],
+			input: props.classNames?.input
+		}));
+		const inputStyles = computed(() => ({
+			root: props.styles?.root,
+			input: props.styles?.input
+		}));
+		function getControlAttrs(controlType) {
+			return {
+				...getPartAttrs("control", { class: ["rp-number-input__control", `rp-number-input__control--${controlType}`] }),
+				"data-control": controlType,
+				"data-disabled": presence(isControlDisabled(controlType))
+			};
+		}
 		function focusNativeInput(event) {
 			const target = event.currentTarget;
 			if (!(target instanceof Element)) return;
@@ -263,10 +308,10 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		function onControlClick(event, controlType) {
 			if (controlType === "increment" ? increment() : decrement()) focusNativeInput(event);
 		}
-		return createComponent(input_default, {
-			class: () => unref(rootClass),
+		const n30 = createComponent(input_default, { $: [() => unref(attrs), {
 			id: () => unref(control).id,
 			name: () => __props.name,
+			form: () => unref(control).form,
 			"model-value": () => unref(modelInputValue),
 			type: "number",
 			size: () => __props.size,
@@ -281,9 +326,11 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			describedby: () => __props.describedby,
 			labelledby: () => __props.labelledby,
 			"input-attrs": () => unref(nativeInputAttrs),
+			"class-names": () => inputClassNames.value,
+			styles: () => inputStyles.value,
 			"validation-message": () => __props.validationMessage,
 			"onUpdate:modelValue": () => unref(onInputUpdate)
-		}, { $: [() => unref(leftControls).length ? {
+		}] }, { $: [() => unref(leftControls).length ? {
 			name: "left",
 			fn: () => {
 				const n13 = t1();
@@ -293,8 +340,17 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					const n11 = child(n12);
 					renderEffect(() => {
 						const _controlType = _for_item0.value;
-						setAttr(n12, "aria-label", getControlLabel(_controlType));
-						setProp(n12, "disabled", isControlDisabled(_controlType));
+						setDynamicProps(n12, [
+							{
+								type: "button",
+								tabindex: "-1"
+							},
+							getControlAttrs(_controlType),
+							{
+								"aria-label": getControlLabel(_controlType),
+								disabled: isControlDisabled(_controlType)
+							}
+						]);
 					});
 					setInsertionState(n11, null, 0);
 					createIf(() => _for_item0.value === "increment", () => {
@@ -308,7 +364,6 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					}, 261);
 					n12.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
 					on(n12, "click", withModifiers(($event) => onControlClick($event, _for_item0.value), ["stop"]));
-					setClass(n12, ["rp-number-input__control", `rp-number-input__control--${_for_item0.value}`]);
 					return n12;
 				}, (controlType) => controlType, 9);
 				return n13;
@@ -323,8 +378,17 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					const n26 = child(n27);
 					renderEffect(() => {
 						const _controlType = _for_item0.value;
-						setAttr(n27, "aria-label", getControlLabel(_controlType));
-						setProp(n27, "disabled", isControlDisabled(_controlType));
+						setDynamicProps(n27, [
+							{
+								type: "button",
+								tabindex: "-1"
+							},
+							getControlAttrs(_controlType),
+							{
+								"aria-label": getControlLabel(_controlType),
+								disabled: isControlDisabled(_controlType)
+							}
+						]);
 					});
 					setInsertionState(n26, null, 0);
 					createIf(() => _for_item0.value === "increment", () => {
@@ -338,13 +402,21 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					}, 517);
 					n27.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
 					on(n27, "click", withModifiers(($event) => onControlClick($event, _for_item0.value), ["stop"]));
-					setClass(n27, ["rp-number-input__control", `rp-number-input__control--${_for_item0.value}`]);
 					return n27;
 				}, (controlType) => controlType, 9);
 				return n28;
 			}
 		} : void 0] }, true);
+		setStaticTemplateRef(n30, inputComponentRef, null, "inputComponentRef");
+		return n30;
 	}
-}), [["__scopeId", "data-v-b5d8edf1"]]);
+}), [["__scopeId", "data-v-eb2db673"]]);
+//#endregion
+//#region src/components/number-input/types.ts
+var numberInputParts = [
+	"root",
+	"input",
+	"control"
+];
 //#endregion
-export { number_input_default as t };
+export { number_input_default as n, numberInputParts as t };

package/dist/overlay.css

@@ -1,28 +1,30 @@
-.rp-overlay[data-v-d98cba01] {
-  --_rp-overlay-color: rgba(0, 0, 0, 0.55);
-  --_rp-overlay-opacity: 1;
-  --_rp-overlay-blur: 0px;
-  --_rp-overlay-z-index: 1;
-  position: absolute;
-  inset: 0;
-  z-index: var(--_rp-overlay-z-index);
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-color: var(--_rp-overlay-color);
-  border-radius: inherit;
-  opacity: var(--_rp-overlay-opacity);
-  pointer-events: none;
+@layer ropav.components {
+.rp-overlay[data-v-972b25a9] {
+    --_rp-overlay-color: rgba(0, 0, 0, 0.55);
+    --_rp-overlay-opacity: 1;
+    --_rp-overlay-blur: 0px;
+    --_rp-overlay-z-index: 1;
+    position: absolute;
+    inset: 0;
+    z-index: var(--_rp-overlay-z-index);
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: var(--_rp-overlay-color);
+    border-radius: inherit;
+    opacity: var(--_rp-overlay-opacity);
+    pointer-events: none;
 }
-.rp-overlay--gradient[data-v-d98cba01] {
-  background-color: transparent;
-  opacity: 1;
+.rp-overlay--gradient[data-v-972b25a9] {
+    background-color: transparent;
+    opacity: 1;
 }
-.rp-overlay--blurred[data-v-d98cba01] {
-  backdrop-filter: blur(var(--_rp-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--_rp-overlay-blur));
+.rp-overlay--blurred[data-v-972b25a9] {
+    backdrop-filter: blur(var(--_rp-overlay-blur));
+    -webkit-backdrop-filter: blur(var(--_rp-overlay-blur));
+}
+.rp-overlay--interactive[data-v-972b25a9] {
+    pointer-events: auto;
 }
-.rp-overlay--interactive[data-v-d98cba01] {
-  pointer-events: auto;
 }

package/dist/overlay.js

@@ -1,7 +1,8 @@
 import './overlay.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createIf, defineVaporComponent, renderEffect, setClass, setStyle, template, unref } from "vue";
+import { computed, createIf, defineVaporComponent, renderEffect, setDynamicProps, template, unref } from "vue";
 //#region src/components/overlay/useOverlay.ts
 function getBlurValue(blur) {
 	if (blur == null || blur === "") return void 0;
@@ -45,11 +46,12 @@ function useOverlay(props) {
 }
 //#endregion
 //#region src/components/overlay/overlay.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-d98cba01 aria-hidden=true>", 1);
+var t0 = template("<div data-v-972b25a9>", 1);
 //#endregion
 //#region src/components/overlay/overlay.vue
 var overlay_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpOverlay",
+	inheritAttrs: false,
 	__name: "overlay",
 	props: {
 		color: { default: "rgba(0, 0, 0, 0.55)" },
@@ -64,19 +66,25 @@ var overlay_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		disabled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props) {
-		const { isRendered, rootClass, rootStyle } = useOverlay(__props);
+		const props = __props;
+		const { isRendered, rootClass, rootStyle } = useOverlay(props);
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			style: rootStyle.value,
+			"aria-hidden": "true"
+		}));
 		return createIf(() => unref(isRendered), () => {
 			const n2 = t0();
-			renderEffect(() => {
-				setClass(n2, unref(rootClass));
-				setStyle(n2, unref(rootStyle));
-			});
+			renderEffect(() => setDynamicProps(n2, [rootAttrs.value]));
 			return n2;
 		});
 	}
-}), [["__scopeId", "data-v-d98cba01"]]);
+}), [["__scopeId", "data-v-972b25a9"]]);
 //#endregion
 export { overlay_default as t };

package/dist/overlay2.js

@@ -0,0 +1,4 @@
+//#region src/components/overlay/types.ts
+var overlayParts = ["root"];
+//#endregion
+export { overlayParts as t };