ropav 0.0.10 → 0.0.12

package/dist/color-input.js

@@ -1,12 +1,14 @@
 import './color-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, n as provideNestedFormControlOwner, o as useControllableValue } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as color_swatch_default } from "./color-swatch.js";
 import { n as formatColorPickerValue, r as parseColorPickerValue, t as color_picker_default } from "./color-picker.js";
 import { t as input_default } from "./input.js";
 import { t as popover_default } from "./popover.js";
-import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, markRaw, nextTick, on, onMounted, ref, renderEffect, setAttr, setInsertionState, setProp, shallowRef, template, unref, withModifiers } from "vue";
+import { child, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, markRaw, nextTick, on, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, withModifiers } from "vue";
 //#region ~icons/lucide/crosshair
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><g fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2><circle cx=12 cy=12 r=10></circle><path d=\"M22 12h-4M6 12H2m10-6V2m0 20v-4\">", 3, 1);
 function render(_ctx) {
@@ -57,14 +59,17 @@ function onInputKeydown(event, popover) {
 	if (event.key === "Escape") popover.triggerProps.onKeydown(event);
 }
 function focusPickerFromTrigger(trigger) {
-	const picker = trigger?.closest(".rp-color-input")?.querySelector(".rp-color-picker");
+	const contentId = trigger?.getAttribute("aria-controls")?.split(/\s+/).find(Boolean);
+	const picker = contentId ? trigger?.ownerDocument.getElementById(contentId)?.querySelector(".rp-color-picker") : null;
 	if (!picker) return;
 	(Boolean(picker.querySelector(".rp-color-picker__saturation")) ? picker.querySelector("input:not(:disabled), button:not(:disabled), [tabindex=\"0\"]") : picker.querySelector("[role=\"radio\"][aria-checked=\"true\"]") ?? picker.querySelector("[role=\"radio\"][tabindex=\"0\"]"))?.focus({ preventScroll: true });
 }
 function onPickerKeydown(event, popover) {
 	if (event.key !== "Escape") return;
 	const pickerRoot = event.currentTarget;
-	const focusTarget = pickerRoot instanceof Element ? pickerRoot.closest(".rp-color-input")?.querySelector(".rp-input__native") : void 0;
+	const content = pickerRoot instanceof Element ? pickerRoot.closest("[role=\"dialog\"]") : null;
+	const contentId = content?.id;
+	const focusTarget = contentId ? [...content.ownerDocument.querySelectorAll("[aria-controls]")].find((element) => element.getAttribute("aria-controls")?.split(/\s+/).includes(contentId)) : void 0;
 	event.stopPropagation();
 	focusTarget?.focus({ preventScroll: true });
 	popover.close();
@@ -117,11 +122,12 @@ function useColorInputPopover(getInputAttrs) {
 }
 //#endregion
 //#region src/components/color-input/useColorInputValue.ts
-function useColorInputValue(props, isControlInvalid) {
-	const parsedColor = computed(() => parseColorPickerValue(props.modelValue));
-	const previewColor = computed(() => parsedColor.value ? props.modelValue : void 0);
+function useColorInputValue(props, isControlInvalid, getValue = () => props.modelValue ?? "") {
+	const currentValue = computed(getValue);
+	const parsedColor = computed(() => parseColorPickerValue(currentValue.value));
+	const previewColor = computed(() => parsedColor.value ? currentValue.value : void 0);
 	const hasValidSwatches = computed(() => Boolean(props.swatches?.some((swatch) => parseColorPickerValue(swatch))));
-	const hasInvalidColor = computed(() => props.validateColor && props.modelValue.trim().length > 0 && !parsedColor.value);
+	const hasInvalidColor = computed(() => props.validateColor && currentValue.value.trim().length > 0 && !parsedColor.value);
 	return {
 		previewColor,
 		hasValidSwatches,
@@ -132,9 +138,9 @@ function useColorInputValue(props, isControlInvalid) {
 }
 //#endregion
 //#region src/components/color-input/useColorInput.ts
-function useColorInput(props, emit) {
+function useColorInput(props, emit, getValue = () => props.modelValue ?? "") {
 	const control = useControlState(props);
-	const value = useColorInputValue(props, () => control.invalid);
+	const value = useColorInputValue(props, () => control.invalid, getValue);
 	const popover = useColorInputPopover(() => props.inputAttrs);
 	const popoverDisabled = computed(() => control.disabled || Boolean(props.readonly) || Boolean(props.swatchesOnly) && !value.hasValidSwatches.value);
 	const eyeDropper = useColorInputEyeDropper({
@@ -176,17 +182,20 @@ function useColorInput(props, emit) {
 }
 //#endregion
 //#region src/components/color-input/color-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-e752da15 class=\"rp-color-input__preview rp-color-input__preview--empty\"aria-hidden=true>", 2);
-var t1 = template("<button data-v-e752da15 class=rp-color-input__eye-dropper type=button><span data-v-e752da15 class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
+var t0 = template("<span data-v-0c4e1f32>");
+var t1 = template("<button data-v-0c4e1f32><span data-v-0c4e1f32 class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
 //#endregion
 //#region src/components/color-input/color-input.vue
 var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpColorInput",
+	inheritAttrs: false,
 	__name: "color-input",
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: "" },
 		format: { default: "hex" },
 		size: {},
 		radius: {},
@@ -223,6 +232,7 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		describedby: {},
 		labelledby: {},
 		inputAttrs: {},
+		validationMessage: {},
 		validateColor: {
 			type: Boolean,
 			default: false
@@ -245,32 +255,82 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			type: Boolean,
 			default: true
 		},
-		eyeDropperAriaLabel: { default: "Pick color from screen" }
+		eyeDropperAriaLabel: { default: "Pick color from screen" },
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue", "update:open"],
 	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, previewColor, isInvalid, colorValidationMessage, popoverDisabled, getInputTriggerAttrs, rememberClose, onPickerKeydown, onFocusOut, showEyeDropper, isPickingColor, pickScreenColor, onInputUpdate, onPickerUpdate, onOpenUpdate } = useColorInput(props, {
-			modelValue: (value) => emit("update:modelValue", value),
+			modelValue: (value) => controllable.setValue(value),
 			open: (value) => emit("update:open", value)
-		});
-		return createComponent(popover_default, {
+		}, () => controllable.value.value);
+		const effectiveValidationMessage = computed(() => props.validationMessage !== void 0 ? props.validationMessage : colorValidationMessage.value);
+		useTextFormControl(() => inputComponentRef.value?.nativeElement, controllable, () => effectiveValidationMessage.value);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			"data-disabled": presence(control.disabled),
+			"data-readonly": presence(props.readonly),
+			"data-invalid": presence(isInvalid.value),
+			onFocusout: onFocusOut
+		}));
+		const popoverClassNames = computed(() => ({
+			root: rootClass.value,
+			content: props.classNames?.content
+		}));
+		const popoverStyles = computed(() => ({ content: props.styles?.content }));
+		const inputClassNames = computed(() => ({
+			root: props.classNames?.control,
+			input: props.classNames?.input
+		}));
+		const inputStyles = computed(() => ({
+			root: props.styles?.control,
+			input: props.styles?.input
+		}));
+		const previewClassNames = computed(() => ({ root: ["rp-color-input__preview", props.classNames?.preview] }));
+		const previewStyles = computed(() => ({ root: props.styles?.preview }));
+		const pickerClassNames = computed(() => ({
+			root: props.classNames?.picker,
+			control: props.classNames?.pickerControl,
+			handle: props.classNames?.pickerHandle,
+			swatches: props.classNames?.pickerSwatches,
+			swatch: props.classNames?.pickerSwatch
+		}));
+		const pickerStyles = computed(() => ({
+			root: props.styles?.picker,
+			control: props.styles?.pickerControl,
+			handle: props.styles?.pickerHandle,
+			swatches: props.styles?.pickerSwatches,
+			swatch: props.styles?.pickerSwatch
+		}));
+		const _setTemplateRef = createTemplateRefSetter();
+		return createComponent(popover_default, { $: [() => rootAttrs.value, {
 			id: () => __props.popoverId,
-			class: () => unref(rootClass),
+			"class-names": () => popoverClassNames.value,
+			styles: () => popoverStyles.value,
 			placement: () => __props.placement,
 			open: () => __props.open,
 			"keep-mounted": () => __props.keepMounted,
 			disabled: () => unref(popoverDisabled),
 			"aria-label": () => __props.pickerAriaLabel,
-			onFocusout: () => unref(onFocusOut),
+			"content-class": () => `rp-color-input__popover rp-color-input__popover--size-${__props.size ?? "md"}`,
 			"onUpdate:open": () => unref(onOpenUpdate)
-		}, {
+		}] }, {
 			"default": (slotProps) => {
-				return createComponent(input_default, {
+				const n15 = createComponent(input_default, {
 					id: () => unref(control).id,
 					name: () => __props.name,
-					"model-value": () => __props.modelValue,
+					form: () => unref(control).form,
+					"model-value": () => unref(controllable).value.value,
 					type: "text",
 					size: () => __props.size,
 					radius: () => __props.radius,
@@ -284,7 +344,9 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 					describedby: () => __props.describedby,
 					labelledby: () => __props.labelledby,
 					"input-attrs": () => unref(getInputTriggerAttrs)(slotProps),
-					"validation-message": () => unref(colorValidationMessage),
+					"class-names": () => inputClassNames.value,
+					styles: () => inputStyles.value,
+					"validation-message": () => effectiveValidationMessage.value,
 					"onUpdate:modelValue": () => unref(onInputUpdate)
 				}, {
 					"left": extend(() => {
@@ -294,13 +356,16 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 						}, () => {
 							return createIf(() => unref(previewColor), () => {
 								return createComponent(color_swatch_default, {
-									class: "rp-color-input__preview",
+									"class-names": () => previewClassNames.value,
+									styles: () => previewStyles.value,
 									color: () => unref(previewColor),
 									size: "var(--_rp-color-input-preview-size)",
 									"aria-hidden": "true"
 								});
 							}, () => {
-								return t0();
+								const n6 = t0();
+								renderEffect(() => setDynamicProps(n6, [unref(getPartAttrs)("preview", { class: ["rp-color-input__preview", "rp-color-input__preview--empty"] }), { "aria-hidden": "true" }]));
+								return n6;
 							}, 389);
 						}, 1);
 					}, { _: 8 }),
@@ -311,9 +376,12 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 							const n12 = child(n13);
 							renderEffect(() => {
 								const _isPickingColor = unref(isPickingColor);
-								setProp(n13, "disabled", unref(control).disabled || __props.readonly || _isPickingColor);
-								setAttr(n13, "aria-label", __props.eyeDropperAriaLabel);
-								setAttr(n13, "aria-busy", _isPickingColor || void 0);
+								setDynamicProps(n13, [unref(getPartAttrs)("eyeDropper", { class: "rp-color-input__eye-dropper" }), {
+									type: "button",
+									disabled: unref(control).disabled || __props.readonly || _isPickingColor,
+									"aria-label": __props.eyeDropperAriaLabel,
+									"aria-busy": _isPickingColor || void 0
+								}]);
 							});
 							setInsertionState(n12, null, 0);
 							createSlot("eye-dropper-icon", null, () => {
@@ -324,12 +392,14 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 						}
 					} : void 0]
 				});
+				_setTemplateRef(n15, inputComponentRef, null, "inputComponentRef");
+				return n15;
 			},
 			"content": (slotProps) => {
 				const _on_focusin = () => unref(rememberClose)(slotProps);
 				const _on_keydown = ($event) => unref(onPickerKeydown)($event, slotProps);
 				return createComponent(color_picker_default, {
-					"model-value": () => __props.modelValue,
+					"model-value": () => unref(controllable).value.value,
 					format: () => __props.format,
 					size: () => __props.size,
 					readonly: () => __props.readonly,
@@ -337,6 +407,8 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 					swatches: () => __props.swatches,
 					"swatches-per-row": () => __props.swatchesPerRow,
 					"aria-label": () => __props.pickerAriaLabel,
+					"class-names": () => pickerClassNames.value,
+					styles: () => pickerStyles.value,
 					onFocusin: () => _on_focusin,
 					onKeydown: () => _on_keydown,
 					"onUpdate:modelValue": () => unref(onPickerUpdate)
@@ -344,6 +416,21 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}
 		}, true);
 	}
-}), [["__scopeId", "data-v-e752da15"]]);
+}), [["__scopeId", "data-v-0c4e1f32"]]);
+//#endregion
+//#region src/components/color-input/types.ts
+var colorInputParts = [
+	"root",
+	"control",
+	"input",
+	"preview",
+	"eyeDropper",
+	"content",
+	"picker",
+	"pickerControl",
+	"pickerHandle",
+	"pickerSwatches",
+	"pickerSwatch"
+];
 //#endregion
-export { color_input_default as t };
+export { color_input_default as n, colorInputParts as t };