ropav 0.0.8 → 0.0.10

package/dist/dropdown-menu.js

@@ -11,29 +11,6 @@ var chevron_right_default = markRaw(defineVaporComponent({
 	name: "lucide-chevron-right",
 	render
 }));
-//#endregion
-//#region src/components/dropdown-menu/dropdown-menu-items.ts
-var dropdown_menu_items_default = defineComponent({
-	name: "RpDropdownMenuItems",
-	props: { items: {
-		type: Array,
-		required: true
-	} },
-	setup(props, { slots }) {
-		function renderItems(items) {
-			return items.map((renderedItem) => {
-				const children = [h("button", renderedItem.props, slots.item?.(renderedItem.slotProps))];
-				if (renderedItem.hasSubmenu && renderedItem.submenuOpen) children.push(h("div", renderedItem.submenuProps, renderItems(renderedItem.children)));
-				return h("div", {
-					key: renderedItem.key,
-					class: "rp-dropdown-menu__item-wrap",
-					role: "none"
-				}, children);
-			});
-		}
-		return () => renderItems(props.items);
-	}
-});
 var DEFAULT_FOCUS_TARGET = "first";
 function getOpenFocusTarget(options) {
 	if (typeof options === "string") return options;
@@ -52,7 +29,7 @@ function hasItemSubmenu(item) {
 	return (item.children?.length ?? 0) > 0;
 }
 function hasNestedItems(items) {
-	return items.some((item) => hasItemSubmenu(item) || hasNestedItems(item.children ?? []));
+	return items.some(hasItemSubmenu);
 }
 function getPathKey(path) {
 	return path.length === 0 ? "root" : path.join("-");
@@ -95,6 +72,138 @@ function getNextEnabledIndex(items, index, direction) {
 	return enabledIndexes[enabledIndexes.length - 1];
 }
 //#endregion
+//#region src/components/dropdown-menu/dropdown-menu-items.ts
+var contextProp = {
+	type: Object,
+	required: true
+};
+var renderItemProp = {
+	type: Function,
+	required: true
+};
+var DropdownMenuItemRow = defineComponent({
+	name: "RpDropdownMenuItemRow",
+	props: {
+		context: contextProp,
+		disabled: {
+			type: Boolean,
+			required: true
+		},
+		focused: {
+			type: Boolean,
+			required: true
+		},
+		index: {
+			type: Number,
+			required: true
+		},
+		item: {
+			type: Object,
+			required: true
+		},
+		parentPath: {
+			type: Array,
+			required: true
+		},
+		renderItem: renderItemProp,
+		submenuOpen: {
+			type: Boolean,
+			required: true
+		}
+	},
+	setup(props) {
+		const path = computed(() => [...props.parentPath, props.index]);
+		return () => {
+			const currentPath = path.value;
+			const hasSubmenu = hasItemSubmenu(props.item);
+			const children = [h("button", props.context.getItemProps(props.item, currentPath, props.focused, props.disabled, props.submenuOpen), props.renderItem(props.context.getItemSlotProps(props.item, currentPath, props.focused, props.disabled, props.submenuOpen)))];
+			if (hasSubmenu && props.submenuOpen) children.push(h(DropdownMenuSubmenu, {
+				context: props.context,
+				item: props.item,
+				path: currentPath,
+				renderItem: props.renderItem
+			}));
+			return h("div", {
+				class: "rp-dropdown-menu__item-wrap",
+				role: "none"
+			}, children);
+		};
+	}
+});
+var DropdownMenuItemsList = defineComponent({
+	name: "RpDropdownMenuItemsList",
+	props: {
+		context: contextProp,
+		items: {
+			type: Array,
+			required: true
+		},
+		parentPath: {
+			type: Array,
+			default: () => []
+		},
+		renderItem: renderItemProp
+	},
+	setup(props) {
+		return () => props.items.map((item, index) => {
+			const path = [...props.parentPath, index];
+			const hasSubmenu = hasItemSubmenu(item);
+			return h(DropdownMenuItemRow, {
+				key: `${getPathKey(path)}:${String(item.value)}`,
+				context: props.context,
+				disabled: Boolean(item.disabled),
+				focused: props.context.isItemFocused(path),
+				index,
+				item,
+				parentPath: props.parentPath,
+				renderItem: props.renderItem,
+				submenuOpen: hasSubmenu && props.context.isSubmenuOpen(path)
+			});
+		});
+	}
+});
+var DropdownMenuSubmenu = defineComponent({
+	name: "RpDropdownMenuSubmenu",
+	props: {
+		context: contextProp,
+		item: {
+			type: Object,
+			required: true
+		},
+		path: {
+			type: Array,
+			required: true
+		},
+		renderItem: renderItemProp
+	},
+	setup(props) {
+		return () => h("div", props.context.getSubmenuProps(props.item, props.path, true), [h(DropdownMenuItemsList, {
+			context: props.context,
+			items: props.item.children ?? [],
+			parentPath: props.path,
+			renderItem: props.renderItem
+		})]);
+	}
+});
+var dropdown_menu_items_default = defineComponent({
+	name: "RpDropdownMenuItems",
+	props: {
+		context: contextProp,
+		items: {
+			type: Array,
+			required: true
+		}
+	},
+	setup(props, { slots }) {
+		const renderItem = (slotProps) => slots.item?.(slotProps);
+		return () => h(DropdownMenuItemsList, {
+			context: props.context,
+			items: props.items,
+			renderItem
+		});
+	}
+});
+//#endregion
 //#region src/components/dropdown-menu/useDropdownMenuDisclosure.ts
 function useDropdownMenuDisclosure({ props, emit, rootRef, uncontrolledOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger }) {
 	function setOpen(nextOpen) {
@@ -567,25 +676,25 @@ function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuAct
 				disabled,
 				hasSubmenu,
 				submenuOpen,
-				props: getItemProps(item, path, focused, disabled),
-				submenuProps: hasSubmenu ? getSubmenuProps(item, path) : void 0,
-				slotProps: getItemSlotProps(item, path, focused, disabled),
-				children: hasSubmenu ? getRenderedItems(item.children ?? [], path) : []
+				props: getItemProps(item, path, focused, disabled, submenuOpen),
+				submenuProps: submenuOpen ? getSubmenuProps(item, path, true) : void 0,
+				slotProps: getItemSlotProps(item, path, focused, disabled, submenuOpen),
+				children: submenuOpen ? getRenderedItems(item.children ?? [], path) : []
 			};
 		});
 	}
-	function getItemProps(item, indexOrPath, focused = isItemFocused(indexOrPath), disabled = Boolean(item.disabled)) {
+	function getItemProps(item, indexOrPath, focused = isItemFocused(indexOrPath), disabled = Boolean(item.disabled), submenuOpen) {
 		const path = normalizePath(indexOrPath);
 		const hasSubmenu = hasItemSubmenu(item);
-		const submenuOpen = hasSubmenu && isSubmenuOpen(path);
+		const resolvedSubmenuOpen = submenuOpen ?? (hasSubmenu ? isSubmenuOpen(path) : false);
 		return {
 			id: getItemId(path),
 			type: "button",
 			role: "menuitem",
 			tabindex: -1,
-			class: getItemClass(item, focused, disabled, hasSubmenu, submenuOpen),
+			class: getItemClass(item, focused, disabled, hasSubmenu, resolvedSubmenuOpen),
 			"aria-controls": hasSubmenu ? getSubmenuId(path) : void 0,
-			"aria-expanded": hasSubmenu ? submenuOpen : void 0,
+			"aria-expanded": hasSubmenu ? resolvedSubmenuOpen : void 0,
 			"aria-haspopup": hasSubmenu ? "menu" : void 0,
 			"aria-disabled": disabled || void 0,
 			"data-disabled": disabled || void 0,
@@ -595,21 +704,22 @@ function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuAct
 			onMouseenter: (event) => focusHoveredItem(item, path, event)
 		};
 	}
-	function getSubmenuProps(item, path) {
+	function getSubmenuProps(item, path, submenuOpen = isSubmenuOpen(path)) {
 		return {
 			id: getSubmenuId(path),
 			role: "menu",
 			class: bem("rp-dropdown-menu__submenu", {
-				open: isSubmenuOpen(path),
+				open: submenuOpen,
 				"has-submenu": hasNestedItems(item.children ?? [])
 			}),
 			"aria-label": item.label,
 			"aria-activedescendant": getMenuActiveDescendant(path)
 		};
 	}
-	function getItemSlotProps(item, indexOrPath, focused = isItemFocused(indexOrPath), disabled = Boolean(item.disabled)) {
+	function getItemSlotProps(item, indexOrPath, focused = isItemFocused(indexOrPath), disabled = Boolean(item.disabled), submenuOpen) {
 		const path = normalizePath(indexOrPath);
 		const hasSubmenu = hasItemSubmenu(item);
+		const resolvedSubmenuOpen = submenuOpen ?? (hasSubmenu ? isSubmenuOpen(path) : false);
 		return {
 			item,
 			index: path[path.length - 1] ?? -1,
@@ -618,7 +728,7 @@ function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuAct
 			focused,
 			disabled,
 			hasSubmenu,
-			isSubmenuOpen: hasSubmenu && isSubmenuOpen(path),
+			isSubmenuOpen: resolvedSubmenuOpen,
 			select: () => selectItem(item),
 			openSubmenu: (focus = DEFAULT_FOCUS_TARGET) => openSubmenu(path, focus),
 			closeSubmenu: () => closeSubmenu(path),
@@ -627,6 +737,13 @@ function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuAct
 	}
 	return {
 		renderedItems,
+		renderContext: {
+			isItemFocused,
+			isSubmenuOpen,
+			getItemProps,
+			getSubmenuProps,
+			getItemSlotProps
+		},
 		getItemProps,
 		getItemSlotProps
 	};
@@ -768,7 +885,7 @@ function useDropdownMenu(props, emit = {}) {
 		close,
 		toggle
 	}));
-	const { renderedItems, getItemProps, getItemSlotProps } = useDropdownMenuRenderItems({
+	const { renderedItems, renderContext, getItemProps, getItemSlotProps } = useDropdownMenuRenderItems({
 		items: visibleItems,
 		getItemId,
 		getSubmenuId,
@@ -790,6 +907,7 @@ function useDropdownMenu(props, emit = {}) {
 		isEmpty,
 		visibleItems,
 		renderedItems,
+		renderContext,
 		focusedIndex,
 		focusedPath,
 		activeDescendantId,
@@ -847,7 +965,7 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { rootRef, menuRef, isVisible, isEmpty, renderedItems, rootClass, contentClass, contentProps, slotProps } = useDropdownMenu(props, {
+		const { rootRef, menuRef, isVisible, isEmpty, visibleItems, renderContext, rootClass, contentClass, contentProps, slotProps } = useDropdownMenu(props, {
 			openChange: (open) => emit("update:open", open),
 			select: (item) => emit("select", item)
 		});
@@ -871,7 +989,10 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 					return n8;
 				});
 				setInsertionState(n21, null, 1);
-				createComponent(unref(dropdown_menu_items_default), { items: () => unref(renderedItems) }, { "item": extend((itemSlotProps) => {
+				createComponent(unref(dropdown_menu_items_default), {
+					items: () => unref(visibleItems),
+					context: () => unref(renderContext)
+				}, { "item": extend((itemSlotProps) => {
 					return [createSlot("item", { $: [() => itemSlotProps] }, () => {
 						const n11 = t2();
 						const x11 = txt(n11);

package/dist/field.css

@@ -1,15 +1,15 @@
-.rp-field[data-v-0d027ead] {
-  --_rp-field-danger: var(--rp-color-danger);
+.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-0d027ead] {
-  --_rp-field-danger: var(--rp-color-danger-fg);
+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-0d027ead] {
+.rp-field__label[data-v-f9e37351] {
   display: inline-flex;
   width: fit-content;
   align-items: center;
@@ -17,27 +17,24 @@ html.dark .rp-field[data-v-0d027ead] {
   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-normal);
+  line-height: var(--rp-line-height-md);
 }
-.rp-field__required[data-v-0d027ead] {
+.rp-field__required[data-v-f9e37351] {
   color: var(--_rp-field-danger);
-  line-height: var(--rp-line-height-none);
+  line-height: 1;
 }
-.rp-field__label + .rp-field__control[data-v-0d027ead] {
+.rp-field__label + .rp-field__control[data-v-f9e37351] {
   margin-block-start: var(--rp-spacing-1);
 }
-.rp-field__control[data-v-0d027ead] {
+.rp-field__control[data-v-f9e37351] {
   min-width: 0;
 }
-.rp-field__description[data-v-0d027ead], .rp-field__message[data-v-0d027ead] {
+.rp-field__description[data-v-f9e37351] {
   margin: 0;
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-dimmed);
   font-size: var(--rp-font-size-sm);
-  line-height: var(--rp-line-height-normal);
+  line-height: var(--rp-line-height-md);
 }
-.rp-field--invalid .rp-field__message[data-v-0d027ead] {
-  color: var(--_rp-field-danger);
-}
-.rp-field--disabled .rp-field__label[data-v-0d027ead], .rp-field--disabled .rp-field__description[data-v-0d027ead], .rp-field--disabled .rp-field__message[data-v-0d027ead] {
-  color: var(--rp-color-text-disabled);
+.rp-field--disabled .rp-field__label[data-v-f9e37351], .rp-field--disabled .rp-field__description[data-v-f9e37351] {
+  color: var(--rp-color-disabled-color);
 }

package/dist/field.js

@@ -21,14 +21,12 @@ function useField(props) {
 	const controlId = computed(() => props.id ?? `${generatedId}-control`);
 	const labelId = computed(() => `${controlId.value}-label`);
 	const descriptionId = computed(() => `${controlId.value}-description`);
-	const messageId = computed(() => `${controlId.value}-message`);
-	const isInvalid = computed(() => Boolean(props.invalid || props.error));
-	const messageText = computed(() => props.error || props.message);
+	const isInvalid = computed(() => Boolean(props.invalid));
 	const hasLabel = computed(() => Boolean(props.label || slots.label));
 	const hasDescription = computed(() => Boolean(props.description || slots.description));
-	const hasMessage = computed(() => Boolean(messageText.value || slots.message));
+	const hasMessage = computed(() => Boolean(slots.message));
 	const controlLabelledby = computed(() => hasLabel.value ? labelId.value : void 0);
-	const controlDescribedby = computed(() => [hasDescription.value ? descriptionId.value : void 0, hasMessage.value ? messageId.value : void 0].filter(Boolean).join(" ") || void 0);
+	const controlDescribedby = computed(() => hasDescription.value ? descriptionId.value : void 0);
 	const rootClass = computed(() => bem("rp-field", {
 		disabled: props.disabled,
 		required: props.required,
@@ -54,9 +52,7 @@ function useField(props) {
 		controlId,
 		labelId,
 		descriptionId,
-		messageId,
 		isInvalid,
-		messageText,
 		hasLabel,
 		hasDescription,
 		hasMessage,
@@ -70,11 +66,10 @@ 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-0d027ead class=rp-field__required aria-hidden=true>*", 2);
-var t2 = template("<label data-v-0d027ead class=rp-field__label>");
-var t3 = template("<p data-v-0d027ead class=rp-field__description>");
-var t4 = template("<p data-v-0d027ead class=rp-field__message>");
-var t5 = template("<div data-v-0d027ead><div data-v-0d027ead class=rp-field__control></div>", 1);
+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);
 delegateEvents("mousedown");
 //#endregion
 //#region src/components/field/field.vue
@@ -85,8 +80,6 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		id: {},
 		label: { default: "" },
 		description: { default: "" },
-		message: { default: "" },
-		error: { default: "" },
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -101,11 +94,11 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		}
 	},
 	setup(__props) {
-		const { controlId, labelId, descriptionId, messageId, isInvalid, messageText, hasLabel, hasDescription, hasMessage, controlLabelledby, controlDescribedby, rootClass, controlProps, focusControl } = useField(__props);
-		const n23 = t5();
-		const n10 = child(n23, 1);
-		renderEffect(() => setClass(n23, unref(rootClass)));
-		setInsertionState(n23, 0, 0);
+		const { controlId, labelId, descriptionId, isInvalid, hasLabel, hasDescription, hasMessage, controlLabelledby, controlDescribedby, rootClass, controlProps, focusControl } = useField(__props);
+		const n20 = t4();
+		const n10 = child(n20, 1);
+		renderEffect(() => setClass(n20, unref(rootClass)));
+		setInsertionState(n20, 0, 0);
 		createIf(() => unref(hasLabel), () => {
 			const n8 = t2();
 			renderEffect(() => {
@@ -135,7 +128,7 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			describedby: () => unref(controlDescribedby),
 			controlProps: () => unref(controlProps)
 		}, null, 1);
-		setInsertionState(n23, null, 2);
+		setInsertionState(n20, null, 2);
 		createIf(() => unref(hasDescription), () => {
 			const n16 = t3();
 			renderEffect(() => setProp(n16, "id", unref(descriptionId)));
@@ -147,23 +140,12 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			}, 1);
 			return n16;
 		});
-		setInsertionState(n23, null, 3);
+		setInsertionState(n20, null, 3);
 		createIf(() => unref(hasMessage), () => {
-			const n22 = t4();
-			renderEffect(() => {
-				setProp(n22, "id", unref(messageId));
-				setProp(n22, "role", unref(isInvalid) ? "alert" : void 0);
-			});
-			setInsertionState(n22, null, 0);
-			createSlot("message", null, () => {
-				const n21 = t0();
-				renderEffect(() => setText(n21, toDisplayString(unref(messageText))));
-				return n21;
-			}, 1);
-			return n22;
+			return createSlot("message", null, null, 1);
 		});
-		return n23;
+		return n20;
 	}
-}), [["__scopeId", "data-v-0d027ead"]]);
+}), [["__scopeId", "data-v-f9e37351"]]);
 //#endregion
 export { field_default as t };