ropav 0.0.10 → 0.0.12

package/dist/input.css

@@ -1,121 +1,123 @@
-.rp-input[data-v-67d291cf] {
-  --_rp-input-height: var(--rp-size-control-md);
-  --_rp-input-padding-x: calc(var(--rp-size-control-md) / 3);
-  --_rp-input-font-size: var(--rp-font-size-md);
-  --_rp-input-radius: var(--rp-radius-sm);
-  --_rp-input-valid-border: var(--rp-color-green-outline);
-  --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-green-outline) 32%, transparent);
-  --_rp-input-invalid-border: var(--rp-color-red-outline);
-  --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-red-outline) 32%, transparent);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  gap: var(--rp-spacing-2);
-  font-family: var(--rp-font-family);
-  font-weight: var(--rp-font-weight-normal);
-  background-color: var(--rp-color-control-bg);
-  border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
-  cursor: text;
-  transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
-}
-.rp-input[data-v-67d291cf]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
-  border-color: var(--rp-color-control-border-hover);
-}
-.rp-input[data-v-67d291cf]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
-  border-color: var(--rp-color-control-border-focus);
-  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
-}
-.rp-input[data-v-67d291cf] {
-  height: var(--_rp-input-height);
-  padding: 0 var(--_rp-input-padding-x);
-  font-size: var(--_rp-input-font-size);
-  border-radius: var(--_rp-input-radius);
-}
-.rp-input--size-xs[data-v-67d291cf] {
-  --_rp-input-height: var(--rp-size-control-xs);
-  --_rp-input-padding-x: calc(var(--rp-size-control-xs) / 3);
-  --_rp-input-font-size: var(--rp-font-size-xs);
-}
-.rp-input--size-sm[data-v-67d291cf] {
-  --_rp-input-height: var(--rp-size-control-sm);
-  --_rp-input-padding-x: calc(var(--rp-size-control-sm) / 3);
-  --_rp-input-font-size: var(--rp-font-size-sm);
-}
-.rp-input--size-md[data-v-67d291cf] {
-  --_rp-input-height: var(--rp-size-control-md);
-  --_rp-input-padding-x: calc(var(--rp-size-control-md) / 3);
-  --_rp-input-font-size: var(--rp-font-size-md);
-}
-.rp-input--size-lg[data-v-67d291cf] {
-  --_rp-input-height: var(--rp-size-control-lg);
-  --_rp-input-padding-x: calc(var(--rp-size-control-lg) / 3);
-  --_rp-input-font-size: var(--rp-font-size-lg);
-}
-.rp-input--size-xl[data-v-67d291cf] {
-  --_rp-input-height: var(--rp-size-control-xl);
-  --_rp-input-padding-x: calc(var(--rp-size-control-xl) / 3);
-  --_rp-input-font-size: var(--rp-font-size-xl);
-}
-.rp-input--radius-xs[data-v-67d291cf] {
-  --_rp-input-radius: var(--rp-radius-xs);
-}
-.rp-input--radius-sm[data-v-67d291cf] {
-  --_rp-input-radius: var(--rp-radius-sm);
-}
-.rp-input--radius-md[data-v-67d291cf] {
-  --_rp-input-radius: var(--rp-radius-md);
-}
-.rp-input--radius-lg[data-v-67d291cf] {
-  --_rp-input-radius: var(--rp-radius-lg);
-}
-.rp-input--radius-xl[data-v-67d291cf] {
-  --_rp-input-radius: var(--rp-radius-xl);
-}
-.rp-input--disabled[data-v-67d291cf] {
-  opacity: var(--rp-opacity-disabled);
-  cursor: not-allowed;
-}
-.rp-input--valid[data-v-67d291cf] {
-  border-color: var(--_rp-input-valid-border);
-}
-.rp-input--valid[data-v-67d291cf]:focus-within:not(.rp-input--disabled) {
-  border-color: var(--_rp-input-valid-border);
-  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-valid-ring);
-}
-.rp-input--invalid[data-v-67d291cf] {
-  border-color: var(--_rp-input-invalid-border);
-}
-.rp-input--invalid[data-v-67d291cf]:focus-within:not(.rp-input--disabled) {
-  border-color: var(--_rp-input-invalid-border);
-  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-invalid-ring);
-}
-.rp-input--readonly[data-v-67d291cf] {
-  background-color: var(--rp-color-control-readonly-bg);
-}
-.rp-input__native[data-v-67d291cf] {
-  box-sizing: border-box;
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  padding: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  font: inherit;
-  color: var(--rp-color-control-fg);
-  line-height: 1;
-}
-.rp-input__native[data-v-67d291cf]::placeholder {
-  color: var(--rp-color-control-placeholder);
-}
-.rp-input__native[data-v-67d291cf]:disabled {
-  cursor: not-allowed;
-}
-.rp-input__left[data-v-67d291cf], .rp-input__right[data-v-67d291cf] {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--rp-color-control-icon);
+@layer ropav.components {
+.rp-input[data-v-3dd93444] {
+    --_rp-input-height: var(--rp-size-control-md);
+    --_rp-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-input-font-size: var(--rp-font-size-md);
+    --_rp-input-radius: var(--rp-radius-sm);
+    --_rp-input-valid-border: var(--rp-color-green-outline);
+    --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-green-outline) 32%, transparent);
+    --_rp-input-invalid-border: var(--rp-color-red-outline);
+    --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-red-outline) 32%, transparent);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    gap: var(--rp-spacing-2);
+    font-family: var(--rp-font-family);
+    font-weight: var(--rp-font-weight-normal);
+    background-color: var(--rp-color-control-bg);
+    border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+    cursor: text;
+    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-input[data-v-3dd93444]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+    border-color: var(--rp-color-control-border-hover);
+}
+.rp-input[data-v-3dd93444]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-input[data-v-3dd93444] {
+    height: var(--_rp-input-height);
+    padding: 0 var(--_rp-input-padding-x);
+    font-size: var(--_rp-input-font-size);
+    border-radius: var(--_rp-input-radius);
+}
+.rp-input--size-xs[data-v-3dd93444] {
+    --_rp-input-height: var(--rp-size-control-xs);
+    --_rp-input-padding-x: calc(var(--rp-size-control-xs) / 3);
+    --_rp-input-font-size: var(--rp-font-size-xs);
+}
+.rp-input--size-sm[data-v-3dd93444] {
+    --_rp-input-height: var(--rp-size-control-sm);
+    --_rp-input-padding-x: calc(var(--rp-size-control-sm) / 3);
+    --_rp-input-font-size: var(--rp-font-size-sm);
+}
+.rp-input--size-md[data-v-3dd93444] {
+    --_rp-input-height: var(--rp-size-control-md);
+    --_rp-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-input-font-size: var(--rp-font-size-md);
+}
+.rp-input--size-lg[data-v-3dd93444] {
+    --_rp-input-height: var(--rp-size-control-lg);
+    --_rp-input-padding-x: calc(var(--rp-size-control-lg) / 3);
+    --_rp-input-font-size: var(--rp-font-size-lg);
+}
+.rp-input--size-xl[data-v-3dd93444] {
+    --_rp-input-height: var(--rp-size-control-xl);
+    --_rp-input-padding-x: calc(var(--rp-size-control-xl) / 3);
+    --_rp-input-font-size: var(--rp-font-size-xl);
+}
+.rp-input--radius-xs[data-v-3dd93444] {
+    --_rp-input-radius: var(--rp-radius-xs);
+}
+.rp-input--radius-sm[data-v-3dd93444] {
+    --_rp-input-radius: var(--rp-radius-sm);
+}
+.rp-input--radius-md[data-v-3dd93444] {
+    --_rp-input-radius: var(--rp-radius-md);
+}
+.rp-input--radius-lg[data-v-3dd93444] {
+    --_rp-input-radius: var(--rp-radius-lg);
+}
+.rp-input--radius-xl[data-v-3dd93444] {
+    --_rp-input-radius: var(--rp-radius-xl);
+}
+.rp-input--disabled[data-v-3dd93444] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-input--valid[data-v-3dd93444] {
+    border-color: var(--_rp-input-valid-border);
+}
+.rp-input--valid[data-v-3dd93444]:focus-within:not(.rp-input--disabled) {
+    border-color: var(--_rp-input-valid-border);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-valid-ring);
+}
+.rp-input--invalid[data-v-3dd93444] {
+    border-color: var(--_rp-input-invalid-border);
+}
+.rp-input--invalid[data-v-3dd93444]:focus-within:not(.rp-input--disabled) {
+    border-color: var(--_rp-input-invalid-border);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-invalid-ring);
+}
+.rp-input--readonly[data-v-3dd93444] {
+    background-color: var(--rp-color-control-readonly-bg);
+}
+.rp-input__native[data-v-3dd93444] {
+    box-sizing: border-box;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: var(--rp-color-control-fg);
+    line-height: 1;
+}
+.rp-input__native[data-v-3dd93444]::placeholder {
+    color: var(--rp-color-control-placeholder);
+}
+.rp-input__native[data-v-3dd93444]:disabled {
+    cursor: not-allowed;
+}
+.rp-input__left[data-v-3dd93444], .rp-input__right[data-v-3dd93444] {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--rp-color-control-icon);
+}
 }

package/dist/input.js

@@ -1,8 +1,10 @@
 import './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 { a as useTextFormControl, o as useControllableValue, t as claimNestedFormControlOwner } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, ref, renderEffect, setClass, setDynamicProps, setInsertionState, template, unref, watch } from "vue";
+import { child, computed, createIf, createSlot, defineVaporComponent, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/input/useInput.ts
 var INTERACTIVE_SELECTOR = [
 	"button",
@@ -46,19 +48,20 @@ function useInput(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/input/input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-67d291cf class=rp-input__left>");
-var t1 = template("<span data-v-67d291cf class=rp-input__right>");
-var t2 = template("<label data-v-67d291cf><input data-v-67d291cf>", 1);
-delegateEvents("mousedown");
+var t0 = template("<span data-v-3dd93444>");
+var t1 = template("<label data-v-3dd93444><input data-v-3dd93444>", 1);
 //#endregion
 //#region src/components/input/input.vue
 var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpInput",
+	inheritAttrs: false,
 	__name: "input",
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: "" },
 		type: { default: "text" },
 		size: {},
 		radius: {},
@@ -87,71 +90,91 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		describedby: {},
 		labelledby: {},
 		inputAttrs: {},
-		validationMessage: {}
+		validationMessage: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit, slots: $slots }) {
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
 		const { inputRef, control, rootClass, onInput, focusInput } = useInput(props, (value) => {
-			emit("update:modelValue", value);
+			controllable.setValue(value);
 		});
+		if (!claimNestedFormControlOwner()) useTextFormControl(() => inputRef.value, controllable, () => props.validationMessage);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			onMousedown: focusInput,
+			"data-disabled": presence(control.disabled),
+			"data-readonly": presence(props.readonly),
+			"data-invalid": presence(control.invalid)
+		}));
 		const nativeInputAttrs = computed(() => {
 			const attrs = props.inputAttrs ?? {};
+			const { class: compatibilityClass, style: compatibilityStyle, ...forwardedAttrs } = attrs;
 			return {
-				...attrs,
+				...forwardedAttrs,
+				...getPartAttrs("input", {
+					class: "rp-input__native",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				id: control.id,
+				name: props.name,
+				form: control.form ?? forwardedAttrs.form,
+				type: props.type,
+				value: controllable.value.value,
+				placeholder: props.placeholder,
+				disabled: control.disabled || void 0,
+				readonly: props.readonly || void 0,
+				required: control.required || void 0,
+				"aria-label": props.ariaLabel || void 0,
+				"aria-labelledby": control.ariaLabelledby,
+				"aria-describedby": control.ariaDescribedby,
+				"aria-invalid": control.invalid || void 0,
+				"aria-required": control.required || void 0,
+				"data-disabled": presence(control.disabled),
+				"data-readonly": presence(props.readonly),
+				"data-invalid": presence(control.invalid),
 				onInput(event) {
 					onInput(event);
 					attrs.onInput?.(event);
 				}
 			};
 		});
-		watch([inputRef, () => props.validationMessage], ([input, validationMessage]) => input?.setCustomValidity(validationMessage ?? ""), {
-			flush: "post",
-			immediate: true
+		__expose({
+			nativeElement: inputRef,
+			focus: () => inputRef.value?.focus()
 		});
-		const _setTemplateRef = createTemplateRefSetter();
-		const n9 = t2();
+		const n9 = t1();
 		const n4 = child(n9, 1);
-		renderEffect(() => setClass(n9, unref(rootClass)));
+		renderEffect(() => setDynamicProps(n9, [rootAttrs.value]));
 		setInsertionState(n9, 0, 0);
 		createIf(() => $slots.left, () => {
 			const n3 = t0();
+			renderEffect(() => setDynamicProps(n3, [unref(getPartAttrs)("left", { class: "rp-input__left" })]));
 			setInsertionState(n3, null, 0);
 			createSlot("left", null, null, 1);
 			return n3;
 		});
-		_setTemplateRef(n4, inputRef, null, "inputRef");
-		renderEffect(() => {
-			const _control = unref(control);
-			const _control_required = _control.required;
-			setDynamicProps(n4, [nativeInputAttrs.value, {
-				id: _control.id,
-				name: __props.name,
-				class: "rp-input__native",
-				type: __props.type,
-				value: __props.modelValue,
-				placeholder: __props.placeholder,
-				disabled: _control.disabled || void 0,
-				readonly: __props.readonly || void 0,
-				required: _control_required || void 0,
-				"aria-label": __props.ariaLabel || void 0,
-				"aria-labelledby": _control.ariaLabelledby,
-				"aria-describedby": _control.ariaDescribedby,
-				"aria-invalid": _control.invalid || void 0,
-				"aria-required": _control_required || void 0
-			}]);
-		});
+		setStaticTemplateRef(n4, inputRef, null, "inputRef");
+		renderEffect(() => setDynamicProps(n4, [nativeInputAttrs.value]));
 		setInsertionState(n9, null, 2);
 		createIf(() => $slots.right, () => {
-			const n8 = t1();
+			const n8 = t0();
+			renderEffect(() => setDynamicProps(n8, [unref(getPartAttrs)("right", { class: "rp-input__right" })]));
 			setInsertionState(n8, null, 0);
 			createSlot("right", null, null, 1);
 			return n8;
 		});
-		n9.$evtmousedown = createInvoker((e) => unref(focusInput)(e));
 		return n9;
 	}
-}), [["__scopeId", "data-v-67d291cf"]]);
+}), [["__scopeId", "data-v-3dd93444"]]);
 //#endregion
 export { input_default as t };

package/dist/input2.js

@@ -0,0 +1,9 @@
+//#region src/components/input/types.ts
+var inputParts = [
+	"root",
+	"input",
+	"left",
+	"right"
+];
+//#endregion
+export { inputParts as t };