ropav 0.0.7 → 0.0.9

package/dist/color-input.css

@@ -0,0 +1,108 @@
+.rp-color-input[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-md);
+  --_rp-color-input-preview-size: calc(var(--_rp-color-input-height) / 2);
+  --_rp-color-input-preview-inset: calc(
+      (var(--_rp-color-input-height) - var(--_rp-color-input-preview-size)) / 2
+  );
+  --_rp-color-input-empty-tile: var(--rp-color-gray-3);
+  --_rp-color-input-empty-tile-alt: var(--rp-color-white);
+  --_rp-color-input-empty-grid: conic-gradient(
+      var(--_rp-color-input-empty-tile) 25%,
+      var(--_rp-color-input-empty-tile-alt) 0 50%,
+      var(--_rp-color-input-empty-tile) 0 75%,
+      var(--_rp-color-input-empty-tile-alt) 0
+  );
+  display: inline-flex;
+  max-width: 100%;
+  font-family: var(--rp-font-family);
+  vertical-align: middle;
+}
+.rp-color-input--size-xs[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-xs);
+}
+.rp-color-input--size-sm[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-sm);
+}
+.rp-color-input--size-md[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-md);
+}
+.rp-color-input--size-lg[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-lg);
+}
+.rp-color-input--size-xl[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-xl);
+}
+html.dark .rp-color-input[data-v-bae38f91], [data-rp-color-scheme=dark] .rp-color-input[data-v-bae38f91] {
+  --_rp-color-input-empty-tile: var(--rp-color-dark-6);
+  --_rp-color-input-empty-tile-alt: var(--rp-color-dark-4);
+}
+.rp-color-input[data-v-bae38f91] .rp-input {
+  width: 100%;
+  min-width: 180px;
+  padding-inline-start: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
+}
+.rp-color-input[data-v-bae38f91] .rp-popover__content {
+  min-width: auto;
+  padding: var(--rp-spacing-3);
+  padding-inline: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
+}
+.rp-color-input[data-v-bae38f91] .rp-color-picker {
+  --_rp-color-picker-size: min(
+      var(--_rp-color-picker-saturation-width),
+      calc(100vw - var(--rp-spacing-12))
+  );
+}
+.rp-color-input__preview[data-v-bae38f91] {
+  --_rp-color-swatch-radius: 50%;
+  width: var(--_rp-color-input-preview-size);
+  height: var(--_rp-color-input-preview-size);
+  flex-shrink: 0;
+  border-radius: 50%;
+  pointer-events: none;
+}
+.rp-color-input__preview--empty[data-v-bae38f91] {
+  box-sizing: border-box;
+  display: inline-flex;
+  background: var(--_rp-color-input-empty-grid);
+  background-size: calc(var(--_rp-color-input-preview-size) / 2) calc(var(--_rp-color-input-preview-size) / 2);
+  border: var(--rp-border-width-thin) dashed var(--rp-color-control-border);
+}
+.rp-color-input__eye-dropper[data-v-bae38f91] {
+  padding: 0;
+  font: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rp-radius-xs);
+  color: var(--rp-color-control-icon);
+  transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
+}
+.rp-color-input__eye-dropper[data-v-bae38f91]:hover:not(:disabled) {
+  color: var(--rp-color-control-fg);
+}
+.rp-color-input__eye-dropper[data-v-bae38f91]:focus-visible {
+  outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
+  outline-offset: 2px;
+}
+.rp-color-input__eye-dropper[data-v-bae38f91]:disabled {
+  cursor: not-allowed;
+  opacity: var(--rp-opacity-disabled);
+}
+.rp-color-input__eye-dropper-icon[data-v-bae38f91] {
+  display: inline-flex;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+.rp-color-input__eye-dropper-icon svg[data-v-bae38f91] {
+  width: 100%;
+  height: 100%;
+}
+.rp-color-input__eye-dropper-icon[data-v-bae38f91] >  svg {
+  width: 100%;
+  height: 100%;
+}

package/dist/color-input.js

@@ -0,0 +1,344 @@
+import './color-input.css';
+import { t as bem } from "./bem.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";
+//#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) {
+	return t0$1();
+}
+var crosshair_default = markRaw(defineVaporComponent({
+	name: "lucide-crosshair",
+	render
+}));
+//#endregion
+//#region src/components/color-input/useColorInputEyeDropper.ts
+function useColorInputEyeDropper(options) {
+	const eyeDropperApi = shallowRef();
+	const isPickingColor = ref(false);
+	const showEyeDropper = computed(() => options.enabled() && Boolean(eyeDropperApi.value));
+	onMounted(() => {
+		eyeDropperApi.value = window.EyeDropper;
+	});
+	async function pickScreenColor(closePicker) {
+		const EyeDropperApi = eyeDropperApi.value;
+		if (options.disabled() || isPickingColor.value || !EyeDropperApi) return;
+		closePicker();
+		isPickingColor.value = true;
+		try {
+			const color = parseColorPickerValue((await new EyeDropperApi().open()).sRGBHex);
+			if (!color || options.disabled()) return;
+			options.update(formatColorPickerValue(color, options.format()));
+		} catch {} finally {
+			isPickingColor.value = false;
+		}
+	}
+	return {
+		showEyeDropper,
+		isPickingColor,
+		pickScreenColor
+	};
+}
+//#endregion
+//#region src/components/color-input/useColorInputPopover.ts
+function onInputKeydown(event, popover) {
+	if (event.key === "ArrowDown") {
+		event.preventDefault();
+		const trigger = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
+		popover.open();
+		nextTick(() => focusPickerFromTrigger(trigger));
+		return;
+	}
+	if (event.key === "Escape") popover.triggerProps.onKeydown(event);
+}
+function focusPickerFromTrigger(trigger) {
+	const picker = trigger?.closest(".rp-color-input")?.querySelector(".rp-color-picker");
+	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;
+	event.stopPropagation();
+	focusTarget?.focus({ preventScroll: true });
+	popover.close();
+}
+function useColorInputPopover(getInputAttrs) {
+	let closePicker;
+	function getInputTriggerAttrs(slotProps) {
+		const popover = slotProps;
+		const trigger = popover.triggerProps;
+		const attrs = getInputAttrs() ?? {};
+		if (!trigger["aria-haspopup"]) return attrs;
+		return {
+			...attrs,
+			role: "combobox",
+			"aria-autocomplete": "none",
+			"aria-controls": trigger["aria-controls"],
+			"aria-expanded": trigger["aria-expanded"],
+			"aria-haspopup": trigger["aria-haspopup"],
+			onFocusin(event) {
+				rememberClose(popover);
+				popover.open();
+				attrs.onFocusin?.(event);
+			},
+			onClick(event) {
+				rememberClose(popover);
+				popover.open();
+				attrs.onClick?.(event);
+			},
+			onKeydown(event) {
+				onInputKeydown(event, popover);
+				attrs.onKeydown?.(event);
+			}
+		};
+	}
+	function rememberClose(slotProps) {
+		closePicker = slotProps.close;
+	}
+	function onFocusOut(event) {
+		const root = event.currentTarget;
+		const nextTarget = event.relatedTarget;
+		if (root instanceof HTMLElement && nextTarget instanceof Node && root.contains(nextTarget)) return;
+		closePicker?.();
+	}
+	return {
+		getInputTriggerAttrs,
+		rememberClose,
+		onPickerKeydown,
+		onFocusOut
+	};
+}
+//#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);
+	const hasValidSwatches = computed(() => Boolean(props.swatches?.some((swatch) => parseColorPickerValue(swatch))));
+	const hasInvalidColor = computed(() => props.validateColor && props.modelValue.trim().length > 0 && !parsedColor.value);
+	return {
+		previewColor,
+		hasValidSwatches,
+		hasInvalidColor,
+		isInvalid: computed(() => isControlInvalid() || hasInvalidColor.value),
+		colorValidationMessage: computed(() => hasInvalidColor.value ? props.invalidColorMessage : void 0)
+	};
+}
+//#endregion
+//#region src/components/color-input/useColorInput.ts
+function useColorInput(props, emit) {
+	const control = useControlState(props);
+	const value = useColorInputValue(props, () => control.invalid);
+	const popover = useColorInputPopover(() => props.inputAttrs);
+	const popoverDisabled = computed(() => control.disabled || Boolean(props.readonly) || Boolean(props.swatchesOnly) && !value.hasValidSwatches.value);
+	const eyeDropper = useColorInputEyeDropper({
+		enabled: () => props.withEyeDropper !== false && !props.swatchesOnly,
+		disabled: () => control.disabled || Boolean(props.readonly) || Boolean(props.swatchesOnly),
+		format: () => props.format ?? "hex",
+		update: emit.modelValue
+	});
+	const rootClass = computed(() => bem("rp-color-input", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		disabled: control.disabled,
+		invalid: value.isInvalid.value,
+		valid: control.valid && !value.isInvalid.value,
+		readonly: props.readonly
+	}));
+	function onInputUpdate(nextValue) {
+		if (control.disabled || props.readonly || props.disallowInput || props.swatchesOnly) return;
+		emit.modelValue(nextValue);
+	}
+	function onPickerUpdate(nextValue) {
+		if (control.disabled || props.readonly) return;
+		emit.modelValue(nextValue);
+	}
+	function onOpenUpdate(open) {
+		emit.open(open);
+	}
+	return {
+		control,
+		rootClass,
+		popoverDisabled,
+		...value,
+		...popover,
+		...eyeDropper,
+		onInputUpdate,
+		onPickerUpdate,
+		onOpenUpdate
+	};
+}
+//#endregion
+//#region src/components/color-input/color-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-v-bae38f91 class=\"rp-color-input__preview rp-color-input__preview--empty\"aria-hidden=true>", 2);
+var t1 = template("<button data-v-bae38f91 class=rp-color-input__eye-dropper type=button><span data-v-bae38f91 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",
+	__name: "color-input",
+	props: {
+		id: {},
+		name: {},
+		modelValue: {},
+		format: { default: "hex" },
+		size: {},
+		radius: {},
+		placeholder: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		disallowInput: {
+			type: Boolean,
+			default: false
+		},
+		swatchesOnly: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		valid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validateColor: {
+			type: Boolean,
+			default: false
+		},
+		invalidColorMessage: { default: "Enter a valid color." },
+		swatches: {},
+		swatchesPerRow: {},
+		placement: { default: "bottom-start" },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		popoverId: {},
+		pickerAriaLabel: { default: "Choose color" },
+		withEyeDropper: {
+			type: Boolean,
+			default: true
+		},
+		eyeDropperAriaLabel: { default: "Pick color from screen" }
+	},
+	emits: ["update:modelValue", "update:open"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		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),
+			open: (value) => emit("update:open", value)
+		});
+		return createComponent(popover_default, {
+			id: () => __props.popoverId,
+			class: () => unref(rootClass),
+			placement: () => __props.placement,
+			open: () => __props.open,
+			disabled: () => unref(popoverDisabled),
+			"aria-label": () => __props.pickerAriaLabel,
+			onFocusout: () => unref(onFocusOut),
+			"onUpdate:open": () => unref(onOpenUpdate)
+		}, {
+			"default": (slotProps) => {
+				return createComponent(input_default, {
+					id: () => unref(control).id,
+					name: () => __props.name,
+					"model-value": () => __props.modelValue,
+					type: "text",
+					size: () => __props.size,
+					radius: () => __props.radius,
+					placeholder: () => __props.placeholder,
+					disabled: () => unref(control).disabled || void 0,
+					readonly: () => __props.readonly || __props.disallowInput || __props.swatchesOnly || void 0,
+					required: () => unref(control).required || void 0,
+					invalid: () => unref(isInvalid) || void 0,
+					valid: () => unref(control).valid && !unref(isInvalid) ? true : void 0,
+					"aria-label": () => __props.ariaLabel,
+					describedby: () => __props.describedby,
+					labelledby: () => __props.labelledby,
+					"input-attrs": () => unref(getInputTriggerAttrs)(slotProps),
+					"validation-message": () => unref(colorValidationMessage),
+					"onUpdate:modelValue": () => unref(onInputUpdate)
+				}, {
+					"left": extend(() => {
+						return createSlot("left", {
+							color: () => unref(previewColor),
+							empty: () => !unref(previewColor)
+						}, () => {
+							return createIf(() => unref(previewColor), () => {
+								return createComponent(color_swatch_default, {
+									class: "rp-color-input__preview",
+									color: () => unref(previewColor),
+									size: "var(--_rp-color-input-preview-size)",
+									"aria-hidden": "true"
+								});
+							}, () => {
+								return t0();
+							}, 389);
+						}, 1);
+					}, { _: 8 }),
+					$: [() => unref(showEyeDropper) ? {
+						name: "right",
+						fn: () => {
+							const n13 = t1();
+							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);
+							});
+							setInsertionState(n12, null, 0);
+							createSlot("eye-dropper-icon", null, () => {
+								return createComponent(unref(crosshair_default));
+							}, 1);
+							on(n13, "click", withModifiers(() => unref(pickScreenColor)(slotProps.close), ["stop"]));
+							return n13;
+						}
+					} : void 0]
+				});
+			},
+			"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,
+					format: () => __props.format,
+					size: () => __props.size,
+					readonly: () => __props.readonly,
+					"with-picker": () => !__props.swatchesOnly,
+					swatches: () => __props.swatches,
+					"swatches-per-row": () => __props.swatchesPerRow,
+					"aria-label": () => __props.pickerAriaLabel,
+					onFocusin: () => _on_focusin,
+					onKeydown: () => _on_keydown,
+					"onUpdate:modelValue": () => unref(onPickerUpdate)
+				});
+			}
+		}, true);
+	}
+}), [["__scopeId", "data-v-bae38f91"]]);
+//#endregion
+export { color_input_default as t };