ropav 0.0.10 → 0.0.12

package/dist/select.js

@@ -1,10 +1,11 @@
 import './select.css';
 import { t as x_default } from "./x.js";
 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 { i as useFormControl, o as useControllableValue } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { t as useClickOutside } from "./useClickOutside.js";
-import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSelector, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, withModifiers, withVaporModifiers } from "vue";
+import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, watch, watchEffect, withModifiers, withVaporModifiers } from "vue";
 //#region ~icons/lucide/chevrons-up-down
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
 function render(_ctx) {
@@ -15,6 +16,28 @@ var chevrons_up_down_default = markRaw(defineVaporComponent({
 	render
 }));
 //#endregion
+//#region src/composables/useClickOutside.ts
+function useClickOutside(target, active, callback) {
+	let isListening = false;
+	let stopWatch;
+	function handler(e) {
+		if (!(Array.isArray(target) ? target : [target]).some((current) => current.value?.contains(e.target))) callback(e);
+	}
+	function setListening(value) {
+		if (typeof document === "undefined" || value === isListening) return;
+		isListening = value;
+		if (value) document.addEventListener("click", handler, true);
+		else document.removeEventListener("click", handler, true);
+	}
+	onMounted(() => {
+		stopWatch = watch(active, setListening, { immediate: true });
+	});
+	onBeforeUnmount(() => {
+		stopWatch?.();
+		setListening(false);
+	});
+}
+//#endregion
 //#region src/composables/useListNavigation.ts
 function useListNavigation(options) {
 	const localFocusedIndex = ref(-1);
@@ -88,7 +111,7 @@ function getSelectDisplayLabel(options, value) {
 function getSelectActiveDescendantId(baseId, focusedIndex) {
 	return focusedIndex < 0 ? void 0 : `${baseId}-option-${focusedIndex}`;
 }
-function useSelect(props, emitUpdate) {
+function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null) {
 	const selectRef = ref(null);
 	const triggerRef = ref(null);
 	const isOpen = ref(false);
@@ -96,9 +119,10 @@ function useSelect(props, emitUpdate) {
 	const listboxId = `${selectId}-listbox`;
 	const control = useControlState(props);
 	const visibleOptions = computed(() => props.options ?? []);
+	const value = computed(getValue);
 	const navigation = useListNavigation({
 		items: () => visibleOptions.value,
-		isSelected: (item) => item.value === props.modelValue
+		isSelected: (item) => item.value === value.value
 	});
 	const focusedIndex = navigation.focusedIndex;
 	const activeDescendantId = computed(() => getSelectActiveDescendantId(selectId, focusedIndex.value));
@@ -109,8 +133,8 @@ function useSelect(props, emitUpdate) {
 		disabled: control.disabled,
 		invalid: control.invalid
 	}));
-	const hasValue = computed(() => hasSelectValue(props.modelValue));
-	const displayLabel = computed(() => getSelectDisplayLabel(props.options, props.modelValue));
+	const hasValue = computed(() => hasSelectValue(value.value));
+	const displayLabel = computed(() => getSelectDisplayLabel(props.options, value.value));
 	const canClear = computed(() => Boolean(props.clearable && hasValue.value && !control.disabled));
 	function focusTrigger() {
 		nextTick(() => triggerRef.value?.focus());
@@ -215,6 +239,7 @@ function useSelect(props, emitUpdate) {
 		rootClass,
 		hasValue,
 		displayLabel,
+		value,
 		canClear,
 		toggle,
 		selectOption,
@@ -225,23 +250,25 @@ function useSelect(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/select/select.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<input data-v-abf4b97a type=hidden>");
-var t1 = template("<button data-v-abf4b97a type=button class=rp-select__clear tabindex=-1></button>");
+var t0 = template("<option data-v-5c4e4e6a> ");
+var t1 = template("<button data-v-5c4e4e6a></button>");
 var t2 = template("No options", 2);
-var t3 = template("<div data-v-abf4b97a class=rp-select__empty>");
-var t4 = template("<div data-v-abf4b97a role=option> ");
-var t5 = template("<div data-v-abf4b97a class=rp-select__dropdown role=listbox>");
-var t6 = template("<div data-v-abf4b97a><div data-v-abf4b97a class=rp-select__trigger role=combobox aria-haspopup=listbox><span data-v-abf4b97a> </span><span data-v-abf4b97a class=rp-select__indicator><span data-v-abf4b97a class=rp-select__arrow aria-hidden=true>", 1);
+var t3 = template("<div data-v-5c4e4e6a>");
+var t4 = template("<div data-v-5c4e4e6a> ");
+var t5 = template("<div data-v-5c4e4e6a><select data-v-5c4e4e6a><option data-v-5c4e4e6a value></option></select><div data-v-5c4e4e6a><span data-v-5c4e4e6a> </span><span data-v-5c4e4e6a><span data-v-5c4e4e6a class=rp-select__arrow aria-hidden=true>", 1);
 delegateEvents("mousedown", "click", "keydown");
 //#endregion
 //#region src/components/select/select.vue
 var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpSelect",
+	inheritAttrs: false,
 	__name: "select",
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: null },
 		options: { default: () => [] },
 		size: {},
 		radius: {},
@@ -265,118 +292,254 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { selectRef, triggerRef, isOpen, selectId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onTriggerKeydown } = useSelect(props, (value) => {
-			emit("update:modelValue", value);
+		const nativeSelectRef = ref(null);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		function getNativeValue(select) {
+			if (select.selectedIndex <= 0) return null;
+			return props.options?.[select.selectedIndex - 1]?.value ?? null;
+		}
+		function syncNativeSelection(value) {
+			const select = nativeSelectRef.value;
+			if (!select) return;
+			select.selectedIndex = (props.options?.findIndex((option) => option.value === value) ?? -1) + 1;
+		}
+		function syncNativeDefaultSelection() {
+			const select = nativeSelectRef.value;
+			if (!select) return;
+			const optionIndex = props.options?.findIndex((option) => option.value === controllable.initialValue) ?? -1;
+			for (const [index, option] of [...select.options].entries()) option.defaultSelected = index === optionIndex + 1;
+		}
+		function requestValueUpdate(value) {
+			const select = nativeSelectRef.value;
+			if (!select) {
+				controllable.setValue(value);
+				return;
+			}
+			syncNativeSelection(value);
+			select.dispatchEvent(new Event("input", {
+				bubbles: true,
+				cancelable: true
+			}));
+			select.dispatchEvent(new Event("change", {
+				bubbles: true,
+				cancelable: true
+			}));
+			if (controllable.isControlled.value) queueMicrotask(() => syncNativeSelection(controllable.value.value));
+		}
+		const { selectRef, triggerRef, isOpen, selectId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onTriggerKeydown } = useSelect(props, requestValueUpdate, () => controllable.value.value);
+		useFormControl({
+			elements: () => [nativeSelectRef.value],
+			isControlled: () => controllable.isControlled.value,
+			validationMessage: () => props.validationMessage,
+			readResetValue(elements) {
+				controllable.resetValue(getNativeValue(elements[0]));
+			},
+			syncControlledValue() {
+				syncNativeSelection(controllable.value.value);
+			}
+		});
+		watchEffect(syncNativeDefaultSelection, { flush: "post" });
+		watchEffect(() => syncNativeSelection(controllable.value.value), { flush: "post" });
+		const nativeInputAttrs = computed(() => {
+			const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, onChange: compatibilityOnChange, onInvalid: compatibilityOnInvalid, ...attrs } = props.inputAttrs ?? {};
+			return {
+				...attrs,
+				class: ["rp-select__native", compatibilityClass],
+				style: compatibilityStyle,
+				onInput(event) {
+					controllable.setValue(getNativeValue(event.currentTarget));
+					compatibilityOnInput?.(event);
+				},
+				onChange(event) {
+					compatibilityOnChange?.(event);
+				},
+				onInvalid(event) {
+					event.preventDefault();
+					triggerRef.value?.focus();
+					compatibilityOnInvalid?.(event);
+				}
+			};
+		});
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			"data-state": isOpen.value ? "open" : "closed",
+			"data-disabled": presence(control.disabled),
+			"data-invalid": presence(control.invalid)
+		}));
+		__expose({
+			nativeElement: nativeSelectRef,
+			focus: () => triggerRef.value?.focus()
 		});
 		const _setTemplateRef = createTemplateRefSetter();
-		const n25 = t6();
-		const n11 = child(n25, 1);
-		const n3 = child(n11);
-		const n10 = next(n3, 1);
-		const n9 = child(n10, 1);
-		renderEffect(() => setClass(n25, unref(rootClass)));
-		setInsertionState(n25, 0, 0);
-		createIf(() => __props.name, () => {
+		const n26 = t5();
+		const n3 = child(n26);
+		const n12 = next(n3, 1);
+		const n4 = child(n12);
+		const n11 = next(n4, 1);
+		const n10 = child(n11, 1);
+		renderEffect(() => {
+			const _nativeInputAttrs = nativeInputAttrs.value;
+			const _control = unref(control);
+			setDynamicProps(n26, [rootAttrs.value]);
+			setDynamicProps(n3, [_nativeInputAttrs, {
+				name: __props.name,
+				form: _control.form ?? _nativeInputAttrs.form,
+				disabled: _control.disabled || void 0,
+				required: _control.required || void 0,
+				tabindex: "-1",
+				"aria-hidden": "true"
+			}]);
+		});
+		setInsertionState(n3, null, 1);
+		createFor(() => unref(visibleOptions), (_for_item0) => {
 			const n2 = t0();
+			const x2 = txt(n2);
 			renderEffect(() => {
-				setProp(n2, "name", __props.name);
-				setValue(n2, __props.modelValue ?? "");
-				setProp(n2, "disabled", unref(control).disabled || void 0);
+				const _option = _for_item0.value;
+				setValue(n2, String(_option.value));
+				setProp(n2, "disabled", _option.disabled || void 0);
+				setText(x2, toDisplayString(_option.label));
 			});
 			return n2;
-		});
-		const x3 = txt(n3);
+		}, (option) => option.value, 8);
+		_setTemplateRef(n3, nativeSelectRef, null, "nativeSelectRef");
+		const x4 = txt(n4);
 		renderEffect(() => {
 			const _control = unref(control);
+			const _getPartAttrs = unref(getPartAttrs);
 			const _isOpen = unref(isOpen);
 			const _control_disabled = _control.disabled;
-			setProp(n11, "id", _control.id);
-			setAttr(n11, "aria-expanded", _isOpen);
-			setAttr(n11, "aria-activedescendant", unref(activeDescendantId));
-			setAttr(n11, "aria-controls", unref(listboxId));
-			setAttr(n11, "aria-disabled", _control_disabled || void 0);
-			setAttr(n11, "aria-invalid", _control.invalid || void 0);
-			setAttr(n11, "aria-required", _control.required || void 0);
-			setAttr(n11, "aria-label", __props.ariaLabel || void 0);
-			setAttr(n11, "aria-labelledby", _control.ariaLabelledby);
-			setAttr(n11, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n11, "data-state", _isOpen ? "open" : "closed");
-			setAttr(n11, "data-disabled", _control_disabled || void 0);
-			setProp(n11, "tabindex", _control_disabled ? -1 : 0);
-			setClassName(n3, !unref(hasValue) ? 1 : 0, " rp-select__placeholder", "rp-select__value");
-			setText(x3, toDisplayString(unref(displayLabel) || __props.placeholder));
+			setDynamicProps(n12, [
+				{ id: _control.id },
+				_getPartAttrs("trigger", { class: "rp-select__trigger" }),
+				{
+					role: "combobox",
+					"aria-expanded": _isOpen,
+					"aria-haspopup": "listbox",
+					"aria-activedescendant": unref(activeDescendantId),
+					"aria-controls": unref(listboxId),
+					"aria-disabled": _control_disabled || void 0,
+					"aria-invalid": _control.invalid || void 0,
+					"aria-required": _control.required || void 0,
+					"aria-label": __props.ariaLabel || void 0,
+					"aria-labelledby": _control.ariaLabelledby,
+					"aria-describedby": _control.ariaDescribedby,
+					"data-state": _isOpen ? "open" : "closed",
+					"data-disabled": unref(presence)(_control.disabled),
+					"data-invalid": unref(presence)(_control.invalid),
+					tabindex: _control_disabled ? -1 : 0
+				}
+			]);
+			setDynamicProps(n4, [_getPartAttrs("value", { class: ["rp-select__value", { "rp-select__placeholder": !unref(hasValue) }] })]);
+			setText(x4, toDisplayString(unref(displayLabel) || __props.placeholder));
+			setDynamicProps(n11, [_getPartAttrs("indicator", { class: "rp-select__indicator" })]);
 		});
-		setInsertionState(n10, 0, 0);
+		setInsertionState(n11, 0, 0);
 		createIf(() => unref(canClear), () => {
-			const n7 = t1();
-			renderEffect(() => setAttr(n7, "aria-label", __props.clearLabel));
-			setInsertionState(n7, null, 0);
+			const n8 = t1();
+			renderEffect(() => setDynamicProps(n8, [
+				{ type: "button" },
+				unref(getPartAttrs)("clear", { class: "rp-select__clear" }),
+				{
+					"aria-label": __props.clearLabel,
+					tabindex: "-1"
+				}
+			]));
+			setInsertionState(n8, null, 0);
 			createComponent(unref(x_default));
-			n7.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
-			on(n7, "click", withModifiers((e) => unref(clearSelection)(e), ["stop"]));
-			return n7;
+			n8.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
+			on(n8, "click", withModifiers((e) => unref(clearSelection)(e), ["stop"]));
+			return n8;
 		});
-		setInsertionState(n9, null, 0);
+		setInsertionState(n10, null, 0);
 		createComponent(unref(chevrons_up_down_default));
-		n11.$evtclick = createInvoker((e) => unref(toggle)(e));
-		n11.$evtkeydown = createInvoker((e) => unref(onTriggerKeydown)(e));
-		_setTemplateRef(n11, triggerRef, null, "triggerRef");
-		setInsertionState(n25, null, 2);
+		n12.$evtclick = createInvoker((e) => unref(toggle)(e));
+		n12.$evtkeydown = createInvoker((e) => unref(onTriggerKeydown)(e));
+		_setTemplateRef(n12, triggerRef, null, "triggerRef");
+		setInsertionState(n26, null, 2);
 		createComponent(VaporTransition, { name: "rp-select-dropdown" }, extend(() => {
 			return createIf(() => unref(isOpen), () => {
-				const n23 = t5();
-				renderEffect(() => setProp(n23, "id", unref(listboxId)));
-				setInsertionState(n23, null, 0);
+				const n24 = t3();
+				renderEffect(() => setDynamicProps(n24, [unref(getPartAttrs)("content", { class: "rp-select__dropdown" }), {
+					role: "listbox",
+					id: unref(listboxId),
+					"data-state": unref(isOpen) ? "open" : "closed"
+				}]));
+				setInsertionState(n24, null, 0);
 				createIf(() => unref(visibleOptions).length === 0, () => {
-					const n19 = t3();
-					setInsertionState(n19, null, 0);
+					const n20 = t3();
+					renderEffect(() => setDynamicProps(n20, [unref(getPartAttrs)("empty", { class: "rp-select__empty" })]));
+					setInsertionState(n20, null, 0);
 					createSlot("empty", null, () => {
 						return t2();
 					}, 1);
-					return n19;
+					return n20;
 				});
-				setInsertionState(n23, null, 1);
-				const _selector20 = createSelector(() => __props.modelValue);
+				setInsertionState(n24, null, 1);
 				createFor(() => unref(visibleOptions), (_for_item0, _for_key0) => {
-					const n22 = t4();
-					const x22 = txt(n22);
-					n22.$evtclick = createInvoker(() => unref(selectOption)(_for_item0.value));
-					on(n22, "mouseenter", () => unref(onOptionMouseenter)(_for_item0.value, _for_key0.value));
-					let _index, _option, _modelValue, _option_disabled, _option_value;
+					const n23 = t4();
+					const x23 = txt(n23);
+					n23.$evtclick = createInvoker(() => unref(selectOption)(_for_item0.value));
+					on(n23, "mouseenter", () => unref(onOptionMouseenter)(_for_item0.value, _for_key0.value));
 					renderEffect(() => {
-						_index = _for_key0.value;
-						_option = _for_item0.value;
-						_modelValue = __props.modelValue;
-						_option_disabled = _option.disabled;
-						_option_value = _option.value;
-						setProp(n22, "id", `${unref(selectId)}-option-${_index}`);
-						setAttr(n22, "aria-disabled", _option_disabled || void 0);
-						setAttr(n22, "data-selected", _option_value === _modelValue || void 0);
-						setAttr(n22, "data-disabled", _option_disabled || void 0);
-						setClass(n22, ["rp-select__option", {
-							"rp-select__option--selected": _option_value === _modelValue,
-							"rp-select__option--focused": _index === unref(focusedIndex),
+						const _index = _for_key0.value;
+						const _option = _for_item0.value;
+						const _controllable = unref(controllable);
+						const _presence = unref(presence);
+						const _focusedIndex = unref(focusedIndex);
+						const _option_value = _option.value;
+						const _controllable_value = _controllable.value;
+						const _option_disabled = _option.disabled;
+						setDynamicProps(n23, [{
+							role: "option",
+							id: `${unref(selectId)}-option-${_index}`,
+							"aria-selected": _option_value === _controllable_value.value,
+							"aria-disabled": _option_disabled || void 0,
+							"data-selected": _presence(_option_value === _controllable_value.value),
+							"data-highlighted": _presence(_index === _focusedIndex),
+							"data-disabled": _presence(_option.disabled)
+						}, unref(getPartAttrs)("option", { class: ["rp-select__option", {
+							"rp-select__option--selected": _option_value === _controllable_value.value,
+							"rp-select__option--focused": _index === _focusedIndex,
 							"rp-select__option--disabled": _option_disabled
-						}]);
-						setText(x22, toDisplayString(_option.label));
-					});
-					_selector20(_option.value, () => {
-						setAttr(n22, "aria-selected", _option.value === _modelValue);
+						}] })]);
+						setText(x23, toDisplayString(_option.label));
 					});
-					return n22;
-				}, (option, index) => option.value, 8).onReset(_selector20.reset);
-				return n23;
+					return n23;
+				}, (option, index) => option.value, 8);
+				return n24;
 			}, null, 129);
 		}, { _: 8 }));
-		_setTemplateRef(n25, selectRef, null, "selectRef");
-		return n25;
+		_setTemplateRef(n26, selectRef, null, "selectRef");
+		return n26;
 	}
-}), [["__scopeId", "data-v-abf4b97a"]]);
+}), [["__scopeId", "data-v-5c4e4e6a"]]);
+//#endregion
+//#region src/components/select/types.ts
+var selectParts = [
+	"root",
+	"trigger",
+	"value",
+	"indicator",
+	"clear",
+	"content",
+	"option",
+	"empty"
+];
 //#endregion
-export { select_default as t };
+export { select_default as n, selectParts as t };