ropav 0.0.9 → 0.0.11

package/dist/field.css

@@ -1,40 +1,42 @@
-.rp-field[data-v-f9e37351] {
-  --_rp-field-danger: var(--rp-color-red-filled);
-  display: grid;
-  gap: var(--rp-spacing-1);
-  min-width: 0;
-  font-family: var(--rp-font-family);
-  color: var(--rp-color-text);
-}
-html.dark .rp-field[data-v-f9e37351], [data-rp-color-scheme=dark] .rp-field[data-v-f9e37351] {
-  --_rp-field-danger: var(--rp-color-red-light-color);
-}
-.rp-field__label[data-v-f9e37351] {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  gap: var(--rp-spacing-1);
-  color: var(--rp-color-text);
-  font-size: var(--rp-font-size-sm);
-  font-weight: var(--rp-font-weight-medium);
-  line-height: var(--rp-line-height-md);
-}
-.rp-field__required[data-v-f9e37351] {
-  color: var(--_rp-field-danger);
-  line-height: 1;
-}
-.rp-field__label + .rp-field__control[data-v-f9e37351] {
-  margin-block-start: var(--rp-spacing-1);
-}
-.rp-field__control[data-v-f9e37351] {
-  min-width: 0;
-}
-.rp-field__description[data-v-f9e37351] {
-  margin: 0;
-  color: var(--rp-color-dimmed);
-  font-size: var(--rp-font-size-sm);
-  line-height: var(--rp-line-height-md);
-}
-.rp-field--disabled .rp-field__label[data-v-f9e37351], .rp-field--disabled .rp-field__description[data-v-f9e37351] {
-  color: var(--rp-color-disabled-color);
+@layer ropav.components {
+.rp-field[data-v-cbd66c2e] {
+    --_rp-field-danger: var(--rp-color-red-filled);
+    display: grid;
+    gap: var(--rp-spacing-1);
+    min-width: 0;
+    font-family: var(--rp-font-family);
+    color: var(--rp-color-text);
+}
+html.dark .rp-field[data-v-cbd66c2e], [data-rp-color-scheme=dark] .rp-field[data-v-cbd66c2e] {
+    --_rp-field-danger: var(--rp-color-red-light-color);
+}
+.rp-field__label[data-v-cbd66c2e] {
+    display: inline-flex;
+    width: fit-content;
+    align-items: center;
+    gap: var(--rp-spacing-1);
+    color: var(--rp-color-text);
+    font-size: var(--rp-font-size-sm);
+    font-weight: var(--rp-font-weight-medium);
+    line-height: var(--rp-line-height-md);
+}
+.rp-field__required[data-v-cbd66c2e] {
+    color: var(--_rp-field-danger);
+    line-height: 1;
+}
+.rp-field__label + .rp-field__control[data-v-cbd66c2e] {
+    margin-block-start: var(--rp-spacing-1);
+}
+.rp-field__control[data-v-cbd66c2e] {
+    min-width: 0;
+}
+.rp-field__description[data-v-cbd66c2e] {
+    margin: 0;
+    color: var(--rp-color-dimmed);
+    font-size: var(--rp-font-size-sm);
+    line-height: var(--rp-line-height-md);
+}
+.rp-field--disabled .rp-field__label[data-v-cbd66c2e], .rp-field--disabled .rp-field__description[data-v-cbd66c2e] {
+    color: var(--rp-color-disabled-color);
+}
 }

package/dist/field.js

@@ -1,7 +1,8 @@
 import './field.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 { child, computed, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setClass, setInsertionState, setProp, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
+import { child, computed, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
 //#region src/components/field/useField.ts
 var INTERACTIVE_LABEL_SELECTOR = [
 	"button",
@@ -66,15 +67,16 @@ function useField(props) {
 //#endregion
 //#region src/components/field/field.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template(" ");
-var t1 = template("<span data-v-f9e37351 class=rp-field__required aria-hidden=true>*", 2);
-var t2 = template("<label data-v-f9e37351 class=rp-field__label>");
-var t3 = template("<p data-v-f9e37351 class=rp-field__description>");
-var t4 = template("<div data-v-f9e37351><div data-v-f9e37351 class=rp-field__control></div>", 1);
+var t1 = template("<span data-v-cbd66c2e>*");
+var t2 = template("<label data-v-cbd66c2e>");
+var t3 = template("<p data-v-cbd66c2e>");
+var t4 = template("<div data-v-cbd66c2e><div data-v-cbd66c2e></div>", 1);
 delegateEvents("mousedown");
 //#endregion
 //#region src/components/field/field.vue
 var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpField",
+	inheritAttrs: false,
 	__name: "field",
 	props: {
 		id: {},
@@ -91,20 +93,30 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		invalid: {
 			type: Boolean,
 			default: void 0
-		}
+		},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props) {
-		const { controlId, labelId, descriptionId, isInvalid, hasLabel, hasDescription, hasMessage, controlLabelledby, controlDescribedby, rootClass, controlProps, focusControl } = useField(__props);
+		const props = __props;
+		const { controlId, labelId, descriptionId, isInvalid, hasLabel, hasDescription, hasMessage, controlLabelledby, controlDescribedby, rootClass, controlProps, focusControl } = useField(props);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			"data-disabled": presence(props.disabled),
+			"data-invalid": presence(isInvalid.value)
+		}));
 		const n20 = t4();
 		const n10 = child(n20, 1);
-		renderEffect(() => setClass(n20, unref(rootClass)));
+		renderEffect(() => setDynamicProps(n20, [rootAttrs.value]));
 		setInsertionState(n20, 0, 0);
 		createIf(() => unref(hasLabel), () => {
 			const n8 = t2();
-			renderEffect(() => {
-				setProp(n8, "id", unref(labelId));
-				setProp(n8, "for", unref(controlId));
-			});
+			renderEffect(() => setDynamicProps(n8, [
+				{ id: unref(labelId) },
+				unref(getPartAttrs)("label", { class: "rp-field__label" }),
+				{ for: unref(controlId) }
+			]));
 			setInsertionState(n8, null, 0);
 			createSlot("label", null, () => {
 				const n4 = t0();
@@ -113,11 +125,14 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			}, 1);
 			setInsertionState(n8, null, 1);
 			createIf(() => __props.required, () => {
-				return t1();
+				const n7 = t1();
+				renderEffect(() => setDynamicProps(n7, [unref(getPartAttrs)("required", { class: "rp-field__required" }), { "aria-hidden": "true" }]));
+				return n7;
 			});
 			n8.$evtmousedown = createInvoker((e) => unref(focusControl)(e));
 			return n8;
 		});
+		renderEffect(() => setDynamicProps(n10, [unref(getPartAttrs)("control", { class: "rp-field__control" })]));
 		setInsertionState(n10, null, 0);
 		createSlot("default", {
 			id: () => unref(controlId),
@@ -131,7 +146,7 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		setInsertionState(n20, null, 2);
 		createIf(() => unref(hasDescription), () => {
 			const n16 = t3();
-			renderEffect(() => setProp(n16, "id", unref(descriptionId)));
+			renderEffect(() => setDynamicProps(n16, [{ id: unref(descriptionId) }, unref(getPartAttrs)("description", { class: "rp-field__description" })]));
 			setInsertionState(n16, null, 0);
 			createSlot("description", null, () => {
 				const n15 = t0();
@@ -146,6 +161,15 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n20;
 	}
-}), [["__scopeId", "data-v-f9e37351"]]);
+}), [["__scopeId", "data-v-cbd66c2e"]]);
+//#endregion
+//#region src/components/field/types.ts
+var fieldParts = [
+	"root",
+	"label",
+	"required",
+	"control",
+	"description"
+];
 //#endregion
-export { field_default as t };
+export { field_default as n, fieldParts as t };

package/dist/focus-trap.js

@@ -0,0 +1,80 @@
+import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useFocusTrap } from "./useFocusTrap.js";
+import { computed, createDynamicComponent, createSlot, defineVaporComponent, extend, ref, setStaticTemplateRef, watch } from "vue";
+//#endregion
+//#region src/components/focus-trap/focus-trap.vue
+var focus_trap_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpFocusTrap",
+	inheritAttrs: false,
+	__name: "focus-trap",
+	props: {
+		active: {
+			type: Boolean,
+			default: true
+		},
+		paused: {
+			type: Boolean,
+			default: false
+		},
+		as: { default: "div" },
+		options: { default: () => ({}) },
+		classNames: {},
+		styles: {}
+	},
+	emits: ["update:active", "update:paused"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const containerRef = ref(null);
+		const { isActive, isPaused, activate, deactivate, pause, unpause } = useFocusTrap(containerRef, props.options);
+		const slotProps = computed(() => ({
+			active: isActive.value,
+			paused: isPaused.value,
+			activate,
+			deactivate,
+			pause: pauseTrap,
+			unpause: unpauseTrap
+		}));
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: "rp-focus-trap",
+			"data-active": presence(isActive.value),
+			"data-paused": presence(isPaused.value)
+		}));
+		function pauseTrap(options) {
+			pause(options);
+			if (!props.paused) emit("update:paused", true);
+		}
+		function unpauseTrap(options) {
+			unpause(options);
+			if (props.paused) emit("update:paused", false);
+		}
+		watch(() => props.active, (active) => {
+			if (active) activate();
+			else deactivate();
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		watch(() => props.paused, (paused) => {
+			if (paused) pause();
+			else unpause();
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		watch(isActive, (active) => {
+			if (active !== props.active) emit("update:active", active);
+		});
+		const n1 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot("default", { $: [() => slotProps.value] });
+		}, { _: 8 }), 1);
+		setStaticTemplateRef(n1, containerRef, null, "containerRef");
+		return n1;
+	}
+});
+//#endregion
+//#region src/components/focus-trap/types.ts
+var focusTrapParts = ["root"];
+//#endregion
+export { focus_trap_default as n, focusTrapParts as t };