ropav 0.1.6 → 0.1.8

package/dist/segmented-control.css

@@ -0,0 +1,176 @@
+@layer ropav.components {
+.rp-segmented-control[data-v-aba56e2a] {
+    --_rp-segmented-control-color: var(--rp-color-control-selected-bg);
+    --_rp-segmented-control-on-color: var(--rp-color-control-selected-fg);
+    --_rp-segmented-control-height: var(--rp-size-control-md);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-2);
+    --_rp-segmented-control-font-size: var(--rp-font-size-md);
+    --_rp-segmented-control-radius: var(--rp-radius-sm);
+    display: inline-flex;
+    box-sizing: border-box;
+    max-width: 100%;
+    padding: 2px;
+    color: var(--rp-color-control-fg);
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-segmented-control-font-size);
+    line-height: 1;
+    background-color: var(--rp-color-control-track-bg);
+    border: var(--rp-border-width-thin) solid transparent;
+    border-radius: var(--_rp-segmented-control-radius);
+    vertical-align: middle;
+}
+.rp-segmented-control__control[data-v-aba56e2a] {
+    position: relative;
+    display: inline-flex;
+    align-items: stretch;
+    min-width: 0;
+    min-height: var(--_rp-segmented-control-height);
+    flex: 1 1 auto;
+    cursor: pointer;
+    user-select: none;
+}
+.rp-segmented-control__input[data-v-aba56e2a] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+.rp-segmented-control__indicator[data-v-aba56e2a] {
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    background-color: transparent;
+    border-radius: var(--_rp-segmented-control-radius);
+    box-shadow: none;
+    transition: background-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-segmented-control__label[data-v-aba56e2a] {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 0;
+    padding-inline: var(--_rp-segmented-control-padding-x);
+    gap: var(--_rp-segmented-control-gap);
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    transition: color var(--rp-transition-fast);
+    white-space: nowrap;
+}
+.rp-segmented-control__label[data-v-aba56e2a] svg {
+    width: 1em;
+    height: 1em;
+    flex: 0 0 auto;
+}
+.rp-segmented-control__control:hover:not(.rp-segmented-control__control--disabled) .rp-segmented-control__indicator[data-v-aba56e2a] {
+    background-color: color-mix(in srgb, var(--rp-color-body) 55%, transparent);
+}
+.rp-segmented-control__control--selected .rp-segmented-control__indicator[data-v-aba56e2a], .rp-segmented-control__control--selected:hover:not(.rp-segmented-control__control--disabled) .rp-segmented-control__indicator[data-v-aba56e2a] {
+    background-color: var(--_rp-segmented-control-color);
+    box-shadow: var(--rp-shadow-sm);
+}
+.rp-segmented-control__control--selected .rp-segmented-control__label[data-v-aba56e2a] {
+    color: var(--_rp-segmented-control-on-color);
+    font-weight: var(--rp-font-weight-medium);
+}
+.rp-segmented-control__input:focus-visible + .rp-segmented-control__indicator[data-v-aba56e2a] {
+    outline: none;
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-segmented-control__control--disabled[data-v-aba56e2a] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-segmented-control--disabled[data-v-aba56e2a] {
+    cursor: not-allowed;
+}
+.rp-segmented-control--invalid[data-v-aba56e2a] {
+    border-color: var(--rp-color-red-filled);
+    box-shadow: 0 0 0 var(--rp-border-width-thin) color-mix(in srgb, var(--rp-color-red-filled) 22%, transparent);
+}
+.rp-segmented-control--vertical[data-v-aba56e2a] {
+    flex-direction: column;
+    align-items: stretch;
+}
+.rp-segmented-control--vertical .rp-segmented-control__control[data-v-aba56e2a] {
+    width: 100%;
+}
+.rp-segmented-control--vertical .rp-segmented-control__label[data-v-aba56e2a] {
+    justify-content: flex-start;
+    text-align: start;
+}
+.rp-segmented-control--full-width[data-v-aba56e2a] {
+    display: flex;
+    width: 100%;
+}
+.rp-segmented-control--full-width .rp-segmented-control__control[data-v-aba56e2a] {
+    flex-basis: 0;
+}
+.rp-segmented-control--size-xs[data-v-aba56e2a] {
+    --_rp-segmented-control-height: var(--rp-size-control-xs);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-xs) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-1);
+    --_rp-segmented-control-font-size: var(--rp-font-size-xs);
+}
+.rp-segmented-control--size-sm[data-v-aba56e2a] {
+    --_rp-segmented-control-height: var(--rp-size-control-sm);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-sm) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-2);
+    --_rp-segmented-control-font-size: var(--rp-font-size-sm);
+}
+.rp-segmented-control--size-md[data-v-aba56e2a] {
+    --_rp-segmented-control-height: var(--rp-size-control-md);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-2);
+    --_rp-segmented-control-font-size: var(--rp-font-size-md);
+}
+.rp-segmented-control--size-lg[data-v-aba56e2a] {
+    --_rp-segmented-control-height: var(--rp-size-control-lg);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-lg) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-3);
+    --_rp-segmented-control-font-size: var(--rp-font-size-lg);
+}
+.rp-segmented-control--size-xl[data-v-aba56e2a] {
+    --_rp-segmented-control-height: var(--rp-size-control-xl);
+    --_rp-segmented-control-padding-x: calc(var(--rp-size-control-xl) / 3);
+    --_rp-segmented-control-gap: var(--rp-spacing-3);
+    --_rp-segmented-control-font-size: var(--rp-font-size-xl);
+}
+.rp-segmented-control--radius-none[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-none);
+}
+.rp-segmented-control--radius-xs[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-xs);
+}
+.rp-segmented-control--radius-sm[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-sm);
+}
+.rp-segmented-control--radius-md[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-md);
+}
+.rp-segmented-control--radius-lg[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-lg);
+}
+.rp-segmented-control--radius-xl[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-xl);
+}
+.rp-segmented-control--radius-full[data-v-aba56e2a] {
+    --_rp-segmented-control-radius: var(--rp-radius-full);
+}
+@media (prefers-reduced-motion: reduce) {
+.rp-segmented-control__indicator[data-v-aba56e2a],
+    .rp-segmented-control__label[data-v-aba56e2a] {
+      transition: none;
+}
+}
+}

package/dist/segmented-control.js

@@ -0,0 +1,382 @@
+import './segmented-control.css';
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as getComponentCheckedColorStyle, t as componentColors } from "./componentColors.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
+import { t as useControlState } from "./useControlState.js";
+import { t as useNativeChoiceTransaction } from "./useNativeChoiceTransaction.js";
+import { child, computed, createFor, createSlot, createTemplateRefSetter, defineVaporComponent, next, renderEffect, setDynamicProps, setInsertionState, setText, shallowRef, template, toDisplayString, unref, useId } from "vue";
+//#region src/internal/composables/useGroupedRadioChoiceTransaction.ts
+function getFirstEnabledValue(choices) {
+	return choices?.find((choice) => !choice.disabled)?.value ?? null;
+}
+function getChoiceMetadata(choices) {
+	return choices?.map((choice) => [choice.value, Boolean(choice.disabled)]) ?? [];
+}
+function hasSameChoiceMetadata(previous, next) {
+	return previous.length === next.length && previous.every(([value, disabled], index) => value === next[index]?.[0] && disabled === next[index]?.[1]);
+}
+function useGroupedRadioChoiceTransaction(options) {
+	const inputsByValue = shallowRef(/* @__PURE__ */ new Map());
+	const inputRefs = computed(() => options.choices()?.map((choice) => inputsByValue.value.get(choice.value) ?? null) ?? []);
+	const explicitDefaultValue = options.value.defaultValue();
+	const hasExplicitEmptyDefault = explicitDefaultValue === null;
+	const initialValue = explicitDefaultValue === void 0 ? getFirstEnabledValue(options.choices()) : explicitDefaultValue;
+	let nativeResetValue = initialValue;
+	let choiceMetadata = getChoiceMetadata(options.choices());
+	let shouldSyncNativeDefault = true;
+	function findInputChoice(input) {
+		const index = inputRefs.value.indexOf(input);
+		return index < 0 ? void 0 : options.choices()?.[index];
+	}
+	function getResetValue(currentValue) {
+		if (hasExplicitEmptyDefault) return null;
+		const initialChoice = options.choices()?.find((choice) => choice.value === initialValue);
+		if (initialChoice && !initialChoice.disabled) return initialChoice.value;
+		const fallbackValue = getFirstEnabledValue(options.choices());
+		return currentValue === fallbackValue ? fallbackValue : initialValue;
+	}
+	function getValidationAnchor(currentValue) {
+		let firstEnabledInput;
+		for (const [index, choice] of (options.choices() ?? []).entries()) {
+			const input = inputRefs.value[index];
+			if (!input || options.disabled() || choice.disabled) continue;
+			firstEnabledInput ??= input;
+			if (choice.value === currentValue) return input;
+		}
+		return firstEnabledInput;
+	}
+	function syncInputs(value) {
+		for (const [index, input] of inputRefs.value.entries()) {
+			if (!input) continue;
+			input.checked = options.choices()?.[index]?.value === value;
+		}
+		if (!shouldSyncNativeDefault) return;
+		shouldSyncNativeDefault = false;
+		for (const [index, input] of inputRefs.value.entries()) if (input) input.defaultChecked = options.choices()?.[index]?.value === nativeResetValue;
+	}
+	const valueOptions = {
+		modelValue: options.value.modelValue,
+		defaultValue: () => initialValue,
+		onChange: options.value.onChange
+	};
+	let currentValue;
+	const transaction = useNativeChoiceTransaction({
+		value: valueOptions,
+		adapter: {
+			commitValue(_value, _initialValue, applyValue) {
+				applyValue();
+			},
+			controls: () => inputRefs.value,
+			readResetValue(controls) {
+				const checked = controls.find((control) => control.checked);
+				return checked ? findInputChoice(checked)?.value ?? null : null;
+			},
+			reconcileValue(value, _initialValue, isControlled) {
+				const nextChoiceMetadata = getChoiceMetadata(options.choices());
+				if (hasSameChoiceMetadata(choiceMetadata, nextChoiceMetadata)) return value;
+				choiceMetadata = nextChoiceMetadata;
+				let reconciledValue = value;
+				if (!isControlled && !(value === null && hasExplicitEmptyDefault)) reconciledValue = options.choices()?.some((choice) => choice.value === value && !choice.disabled) ? value : getFirstEnabledValue(options.choices());
+				nativeResetValue = getResetValue(reconciledValue);
+				shouldSyncNativeDefault = true;
+				return reconciledValue;
+			},
+			syncValue: syncInputs,
+			validationMessage(element) {
+				return element === getValidationAnchor(currentValue.value) ? options.validationMessage?.() : void 0;
+			}
+		}
+	});
+	currentValue = transaction.value;
+	function createInputRef(value) {
+		let mountedInput = null;
+		return (element) => {
+			const input = element instanceof HTMLInputElement ? element : null;
+			if (input) {
+				mountedInput = input;
+				input.defaultChecked = value === nativeResetValue;
+				const existingInput = inputsByValue.value.get(value);
+				const hasOtherRegistration = [...inputsByValue.value].some(([registeredValue, registeredInput]) => registeredValue !== value && registeredInput === input);
+				if (existingInput === input && !hasOtherRegistration) return;
+				const nextInputs = new Map(inputsByValue.value);
+				for (const [registeredValue, registeredInput] of nextInputs) if (registeredInput === input) nextInputs.delete(registeredValue);
+				nextInputs.set(value, input);
+				inputsByValue.value = nextInputs;
+				return;
+			}
+			const removedInput = mountedInput;
+			mountedInput = null;
+			if (!removedInput || inputsByValue.value.get(value) !== removedInput) return;
+			const nextInputs = new Map(inputsByValue.value);
+			nextInputs.delete(value);
+			inputsByValue.value = nextInputs;
+		};
+	}
+	return {
+		acceptValue: transaction.requestValueUpdate,
+		createInputRef,
+		inputRefs,
+		value: transaction.value
+	};
+}
+//#endregion
+//#region src/components/segmented-control/useSegmentedControl.ts
+function useSegmentedControl(props, emitUpdate) {
+	const control = useControlState(props);
+	const generatedId = useId();
+	const baseId = computed(() => props.id ?? generatedId);
+	const groupName = computed(() => props.name ?? `${baseId.value}-segmented-control`);
+	const transaction = useGroupedRadioChoiceTransaction({
+		choices: () => props.options,
+		disabled: () => control.disabled,
+		validationMessage: () => props.validationMessage,
+		value: {
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange(value) {
+				if (value !== null) emitUpdate(value);
+			}
+		}
+	});
+	const inputRefs = transaction.inputRefs;
+	const selectedValue = transaction.value;
+	const rootClass = computed(() => bem("rp-segmented-control", {
+		[`size-${props.size ?? "md"}`]: true,
+		[`radius-${props.radius ?? "sm"}`]: true,
+		[props.orientation ?? "horizontal"]: true,
+		"full-width": props.fullWidth,
+		disabled: control.disabled,
+		invalid: control.invalid
+	}));
+	const rootStyle = computed(() => getComponentCheckedColorStyle({
+		color: props.color,
+		autoContrast: props.autoContrast,
+		contrastColor: props.contrastColor,
+		colorProperty: "--_rp-segmented-control-color",
+		checkedColorProperty: "--_rp-segmented-control-on-color"
+	}));
+	function isSelected(option) {
+		return option.value === selectedValue.value;
+	}
+	function isOptionDisabled(option) {
+		return control.disabled || Boolean(option.disabled);
+	}
+	function selectOption(option) {
+		if (isOptionDisabled(option)) return;
+		transaction.acceptValue(option.value);
+	}
+	function getInputId(index) {
+		return `${baseId.value}-option-${index}`;
+	}
+	function focus(options) {
+		const selectedInput = inputRefs.value.find((input) => input?.checked && !input.disabled);
+		const firstEnabledInput = inputRefs.value.find((input) => input && !input.disabled);
+		(selectedInput ?? firstEnabledInput)?.focus(options);
+	}
+	return {
+		control,
+		inputRefs,
+		selectedValue,
+		rootClass,
+		rootStyle,
+		groupName,
+		createInputRef: transaction.createInputRef,
+		isSelected,
+		isOptionDisabled,
+		selectOption,
+		getInputId,
+		focus
+	};
+}
+//#endregion
+//#region src/components/segmented-control/segmented-control.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<label data-v-aba56e2a><input data-v-aba56e2a><span data-v-aba56e2a></span><span data-v-aba56e2a>");
+var t2 = template("<div data-v-aba56e2a>", 1);
+//#endregion
+//#region src/components/segmented-control/segmented-control.vue
+var segmented_control_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpSegmentedControl",
+	inheritAttrs: false,
+	__name: "segmented-control",
+	props: {
+		id: {},
+		name: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
+		options: { default: () => [] },
+		color: {},
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
+		size: { default: "md" },
+		radius: { default: "sm" },
+		orientation: { default: "horizontal" },
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { control, inputRefs, selectedValue, rootClass, rootStyle, groupName, createInputRef, isSelected, isOptionDisabled, selectOption, getInputId, focus } = useSegmentedControl(props, (value) => emit("update:modelValue", value));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			id: control.id,
+			class: rootClass.value,
+			style: rootStyle.value,
+			role: "radiogroup",
+			"data-value": selectedValue.value ?? void 0,
+			"data-size": props.size,
+			"data-orientation": props.orientation,
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid),
+			"aria-label": props.ariaLabel || void 0,
+			"aria-labelledby": control.ariaLabelledby,
+			"aria-describedby": control.ariaDescribedby,
+			"aria-orientation": props.orientation,
+			"aria-disabled": control.disabled || void 0,
+			"aria-invalid": control.invalid || void 0,
+			"aria-required": control.required || void 0
+		}));
+		function getControlAttrs(option) {
+			const selected = isSelected(option);
+			const disabled = isOptionDisabled(option);
+			return {
+				...getPartAttrs("control", { class: ["rp-segmented-control__control", {
+					"rp-segmented-control__control--selected": selected,
+					"rp-segmented-control__control--disabled": disabled
+				}] }),
+				"data-state": selected ? "checked" : "unchecked",
+				"data-disabled": toPresenceAttribute(disabled)
+			};
+		}
+		function getInputAttrs(option) {
+			const attributes = props.inputAttrs ?? {};
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(attributes);
+			return {
+				...forwardedAttributes,
+				...getPartAttrs("input", {
+					class: "rp-segmented-control__input",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				onChange: composeEventHandlers(() => selectOption(option), attributes.onChange)
+			};
+		}
+		__expose({
+			nativeElements: inputRefs,
+			focus
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n9 = t2();
+		renderEffect(() => setDynamicProps(n9, [rootAttrs.value]));
+		setInsertionState(n9, null, 0);
+		createFor(() => __props.options, (_for_item0, _for_key0) => {
+			const n8 = t1();
+			const n2 = child(n8);
+			const n3 = next(n2, 1);
+			const n7 = next(n3, 2);
+			renderEffect(() => {
+				const _option = _for_item0.value;
+				const _control = unref(control);
+				const _isOptionDisabled = unref(isOptionDisabled);
+				const _toPresenceAttribute = unref(toPresenceAttribute);
+				const _getPartAttrs = unref(getPartAttrs);
+				const _control_required = _control.required;
+				const _isSelected_option_checked_unchecked = unref(isSelected)(_option) ? "checked" : "unchecked";
+				setDynamicProps(n8, [getControlAttrs(_option)]);
+				setDynamicProps(n2, [getInputAttrs(_option), {
+					id: unref(getInputId)(_for_key0.value),
+					type: "radio",
+					name: unref(groupName),
+					form: _control.form ?? __props.inputAttrs?.form,
+					value: String(_option.value),
+					checked: unref(isSelected)(_option),
+					disabled: _isOptionDisabled(_option) || void 0,
+					required: _control_required || void 0,
+					"aria-describedby": _control.ariaDescribedby,
+					"aria-invalid": _control.invalid || void 0,
+					"aria-required": _control_required || void 0,
+					"data-state": _isSelected_option_checked_unchecked,
+					"data-disabled": _toPresenceAttribute(_isOptionDisabled(_option)),
+					"data-invalid": _toPresenceAttribute(_control.invalid)
+				}]);
+				_setTemplateRef(n2, unref(createInputRef)(_option.value), true);
+				setDynamicProps(n3, [_getPartAttrs("indicator", { class: "rp-segmented-control__indicator" }), {
+					"aria-hidden": "true",
+					"data-state": _isSelected_option_checked_unchecked
+				}]);
+				setDynamicProps(n7, [_getPartAttrs("label", { class: "rp-segmented-control__label" })]);
+			});
+			setInsertionState(n7, null, 0);
+			createSlot("option", {
+				option: () => _for_item0.value,
+				selected: () => unref(isSelected)(_for_item0.value),
+				disabled: () => unref(isOptionDisabled)(_for_item0.value)
+			}, () => {
+				const n6 = t0();
+				renderEffect(() => setText(n6, toDisplayString(_for_item0.value.label)));
+				return n6;
+			}, 1);
+			return n8;
+		}, (option, index) => option.value, 9);
+		return n9;
+	}
+}), [["__scopeId", "data-v-aba56e2a"]]);
+//#endregion
+//#region src/components/segmented-control/types.ts
+var segmentedControlParts = [
+	"root",
+	"control",
+	"input",
+	"indicator",
+	"label"
+];
+var segmentedControlColors = componentColors;
+var segmentedControlSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var segmentedControlRadiuses = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"full"
+];
+var segmentedControlOrientations = ["horizontal", "vertical"];
+//#endregion
+export { segmentedControlSizes as a, segmentedControlRadiuses as i, segmentedControlOrientations as n, segmented_control_default as o, segmentedControlParts as r, segmentedControlColors as t };