ropav 0.0.10 → 0.0.11

package/dist/color-input.js

@@ -1,12 +1,13 @@
 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 { 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, 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 +58,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();
@@ -176,12 +180,13 @@ 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-cf9bd64a>");
+var t1 = template("<button data-v-cf9bd64a><span data-v-cf9bd64a 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: {},
@@ -245,7 +250,9 @@ 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 }) {
@@ -255,17 +262,54 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			modelValue: (value) => emit("update:modelValue", value),
 			open: (value) => emit("update:open", value)
 		});
-		return createComponent(popover_default, {
+		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
+		}));
+		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, {
 					id: () => unref(control).id,
@@ -284,6 +328,8 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 					describedby: () => __props.describedby,
 					labelledby: () => __props.labelledby,
 					"input-attrs": () => unref(getInputTriggerAttrs)(slotProps),
+					"class-names": () => inputClassNames.value,
+					styles: () => inputStyles.value,
 					"validation-message": () => unref(colorValidationMessage),
 					"onUpdate:modelValue": () => unref(onInputUpdate)
 				}, {
@@ -294,13 +340,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 +360,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, () => {
@@ -337,6 +389,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 +398,21 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}
 		}, true);
 	}
-}), [["__scopeId", "data-v-e752da15"]]);
+}), [["__scopeId", "data-v-cf9bd64a"]]);
 //#endregion
-export { color_input_default as t };
+//#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 n, colorInputParts as t };