ropav 0.0.9 → 0.0.11

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 { 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, ref, renderEffect, setDynamicProps, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, 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) {
@@ -225,18 +226,18 @@ 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("<input data-v-e6060752 type=hidden>");
+var t1 = template("<button data-v-e6060752></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-e6060752>");
+var t4 = template("<div data-v-e6060752> ");
+var t5 = template("<div data-v-e6060752><div data-v-e6060752><span data-v-e6060752> </span><span data-v-e6060752><span data-v-e6060752 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: {},
@@ -265,7 +266,9 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -274,13 +277,20 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		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 { 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)
+		}));
 		const _setTemplateRef = createTemplateRefSetter();
-		const n25 = t6();
+		const n25 = t5();
 		const n11 = child(n25, 1);
 		const n3 = child(n11);
 		const n10 = next(n3, 1);
 		const n9 = child(n10, 1);
-		renderEffect(() => setClass(n25, unref(rootClass)));
+		renderEffect(() => setDynamicProps(n25, [rootAttrs.value]));
 		setInsertionState(n25, 0, 0);
 		createIf(() => __props.name, () => {
 			const n2 = t0();
@@ -294,28 +304,45 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const x3 = txt(n3);
 		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");
+			setDynamicProps(n11, [
+				{ 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(n3, [_getPartAttrs("value", { class: ["rp-select__value", { "rp-select__placeholder": !unref(hasValue) }] })]);
 			setText(x3, toDisplayString(unref(displayLabel) || __props.placeholder));
+			setDynamicProps(n10, [_getPartAttrs("indicator", { class: "rp-select__indicator" })]);
 		});
 		setInsertionState(n10, 0, 0);
 		createIf(() => unref(canClear), () => {
 			const n7 = t1();
-			renderEffect(() => setAttr(n7, "aria-label", __props.clearLabel));
+			renderEffect(() => setDynamicProps(n7, [
+				{ type: "button" },
+				unref(getPartAttrs)("clear", { class: "rp-select__clear" }),
+				{
+					"aria-label": __props.clearLabel,
+					tabindex: "-1"
+				}
+			]));
 			setInsertionState(n7, null, 0);
 			createComponent(unref(x_default));
 			n7.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
@@ -330,11 +357,16 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		setInsertionState(n25, null, 2);
 		createComponent(VaporTransition, { name: "rp-select-dropdown" }, extend(() => {
 			return createIf(() => unref(isOpen), () => {
-				const n23 = t5();
-				renderEffect(() => setProp(n23, "id", unref(listboxId)));
+				const n23 = t3();
+				renderEffect(() => setDynamicProps(n23, [unref(getPartAttrs)("content", { class: "rp-select__dropdown" }), {
+					role: "listbox",
+					id: unref(listboxId),
+					"data-state": unref(isOpen) ? "open" : "closed"
+				}]));
 				setInsertionState(n23, null, 0);
 				createIf(() => unref(visibleOptions).length === 0, () => {
 					const n19 = t3();
+					renderEffect(() => setDynamicProps(n19, [unref(getPartAttrs)("empty", { class: "rp-select__empty" })]));
 					setInsertionState(n19, null, 0);
 					createSlot("empty", null, () => {
 						return t2();
@@ -342,41 +374,54 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					return n19;
 				});
 				setInsertionState(n23, null, 1);
-				const _selector20 = createSelector(() => __props.modelValue);
 				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;
 					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", {
+						const _index = _for_key0.value;
+						const _option = _for_item0.value;
+						const _modelValue = __props.modelValue;
+						const _presence = unref(presence);
+						const _focusedIndex = unref(focusedIndex);
+						const _option_value = _option.value;
+						const _option_disabled = _option.disabled;
+						setDynamicProps(n22, [{
+							role: "option",
+							id: `${unref(selectId)}-option-${_index}`,
+							"aria-selected": _option_value === _modelValue,
+							"aria-disabled": _option_disabled || void 0,
+							"data-selected": _presence(_option_value === _modelValue),
+							"data-highlighted": _presence(_index === _focusedIndex),
+							"data-disabled": _presence(_option.disabled)
+						}, unref(getPartAttrs)("option", { class: ["rp-select__option", {
 							"rp-select__option--selected": _option_value === _modelValue,
-							"rp-select__option--focused": _index === unref(focusedIndex),
+							"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);
-					});
 					return n22;
-				}, (option, index) => option.value, 8).onReset(_selector20.reset);
+				}, (option, index) => option.value, 8);
 				return n23;
 			}, null, 129);
 		}, { _: 8 }));
 		_setTemplateRef(n25, selectRef, null, "selectRef");
 		return n25;
 	}
-}), [["__scopeId", "data-v-abf4b97a"]]);
+}), [["__scopeId", "data-v-e6060752"]]);
+//#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 };