@astryx-vue/core 0.3.0 → 0.4.1

package/dist/{ComplexSelector-DWLdKPGI.js → ComplexSelector-CIz6DDmY.js}

@@ -1,10 +1,13 @@
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { n as useDevWarning } from "./useDevWarning-DznOpOHT.js";
+import { t as _sfc_main$1 } from "./Icon-KDnUyY7f.js";
+import { s as useAstryxMessages } from "./context-CM-cjGg_.js";
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
-import { t as _sfc_main$1 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$2 } from "./Spinner-9cYUCnDy.js";
-import { t as _sfc_main$3 } from "./Field-D5gUEGw4.js";
-import { t as _sfc_main$4 } from "./Popover-DJf8POzL.js";
-import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, normalizeProps, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, useId, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import { t as _sfc_main$2 } from "./Spinner-BY8iQz--.js";
+import { t as _sfc_main$3 } from "./Field-JIxT3xCh.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { n as fieldStatusPlacement, t as normalizeTriggerVariant } from "./triggerVariant-BsL8jMHs.js";
+import { t as _sfc_main$4 } from "./Popover-78dFjTb9.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/complex-selector.css";
 //#region src/ComplexSelector/ComplexSelector.vue
 const _hoisted_1 = [
@@ -21,6 +24,7 @@ const _hoisted_1 = [
 const _hoisted_2 = { class: "astryx-complex-selector-value" };
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxComplexSelector",
+	inheritAttrs: false,
 	__name: "ComplexSelector",
 	props: /*@__PURE__*/ mergeModels({
 		label: {},
@@ -51,6 +55,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		status: {},
 		statusVariant: { default: "attached" },
 		labelTooltip: {},
+		popupWidth: {},
+		contentClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		contentStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
 		size: { default: "md" },
 		width: {},
 		placement: { default: "below" },
@@ -59,7 +78,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		variant: { default: "input" },
 		renderTrigger: {},
 		handleRef: {},
-		changeAction: {}
+		changeAction: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	}, {
 		"modelValue": { required: true },
 		"modelModifiers": {}
@@ -74,6 +121,30 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
+		const attrs = useAttrs();
+		const parts = useFieldPartStyling({
+			component: "ComplexSelector",
+			props,
+			attrs: new Proxy(attrs, { get(target, key, receiver) {
+				if (key === "class" || key === "style") return void 0;
+				return Reflect.get(target, key, receiver);
+			} }),
+			reservedAttrs: [
+				"id",
+				"role",
+				"aria-label",
+				"aria-labelledby",
+				"aria-expanded",
+				"aria-controls",
+				"aria-haspopup",
+				"aria-busy",
+				"aria-invalid",
+				"aria-required",
+				"disabled"
+			]
+		});
+		const triggerVariant = computed(() => normalizeTriggerVariant(props.variant));
+		const effectiveStatusVariant = computed(() => fieldStatusPlacement(props.variant, props.statusVariant));
 		const model = useModel(__props, "modelValue");
 		const messages = useAstryxMessages();
 		const isOpen = ref(false);
@@ -148,6 +219,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (!event.defaultPrevented) emit("keydown", event);
 		}
 		const hasCustomTrigger = computed(() => props.renderTrigger != null || slots.trigger != null);
+		useDevWarning("ComplexSelector", "`containerClass`/`containerStyle` have no effect on a custom trigger.", () => hasCustomTrigger.value && (props.containerClass != null || props.containerStyle != null));
+		useDevWarning("ComplexSelector", "`controlClass`/`controlStyle` have no effect on a custom trigger.", () => hasCustomTrigger.value && (props.controlClass != null || props.controlStyle != null));
 		const triggerProps = computed(() => ({
 			"id": triggerId,
 			"onClick": onCustomClick,
@@ -184,42 +257,49 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		onBeforeUnmount(() => publishHandle(null));
 		__expose(handle);
 		return (_ctx, _cache) => {
-			return hasCustomTrigger.value ? (openBlock(), createBlock(_sfc_main$4, {
-				key: 0,
+			return hasCustomTrigger.value ? (openBlock(), createBlock(_sfc_main$4, mergeProps({ key: 0 }, unref(parts).forwardedAttrs(), {
+				class: unref(attrs).class,
+				style: unref(attrs).style,
 				alignment: __props.alignment,
 				"has-auto-focus": true,
 				"has-close-button": false,
 				"is-enabled": !__props.isDisabled,
 				"is-open": isOpen.value,
 				label: __props.label,
-				padding: 3,
+				padding: 0,
 				placement: __props.placement,
+				width: __props.popupWidth,
 				role: "dialog",
 				onOpenChange: setOpen
-			}, {
+			}), {
 				content: withCtx(() => [createElementVNode("div", {
 					id: contentId,
 					ref_key: "contentEl",
 					ref: contentEl,
-					class: "astryx-complex-selector-content"
+					class: normalizeClass(["astryx-complex-selector-content", __props.contentClass]),
+					style: normalizeStyle(__props.contentStyle)
 				}, [renderSlot(_ctx.$slots, "default", {
 					close,
 					commit,
 					state: state.value,
 					value: displayValue.value
-				})], 512)]),
+				})], 6)]),
 				default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps(triggerProps.value)), () => [(openBlock(), createBlock(resolveDynamicComponent(triggerView)))])]),
 				_: 3
-			}, 8, [
+			}, 16, [
+				"class",
+				"style",
 				"alignment",
 				"is-enabled",
 				"is-open",
 				"label",
-				"placement"
+				"placement",
+				"width"
 			])) : (openBlock(), createBlock(_sfc_main$3, {
 				key: 1,
-				class: "astryx-complex-selector-field",
-				"data-variant": __props.variant,
+				class: normalizeClass(["astryx-complex-selector-field", [unref(attrs).class, unref(parts).containerClass.value]]),
+				style: normalizeStyle([unref(attrs).style, unref(parts).containerStyle.value]),
+				"data-variant": triggerVariant.value,
 				description: __props.description,
 				"input-id": triggerId,
 				"is-disabled": __props.isDisabled,
@@ -230,7 +310,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"label-id": labelId,
 				"label-tooltip": __props.labelTooltip,
 				status: __props.status,
-				"status-variant": __props.statusVariant,
+				"status-variant": effectiveStatusVariant.value,
 				width: __props.width
 			}, {
 				default: withCtx(() => [createVNode(_sfc_main$4, {
@@ -240,8 +320,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"is-enabled": !__props.isDisabled,
 					"is-open": isOpen.value,
 					label: __props.label,
-					padding: 3,
+					padding: 0,
 					placement: __props.placement,
+					width: __props.popupWidth,
 					role: "dialog",
 					onOpenChange: setOpen
 				}, {
@@ -249,20 +330,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						id: contentId,
 						ref_key: "contentEl",
 						ref: contentEl,
-						class: "astryx-complex-selector-content"
+						class: normalizeClass(["astryx-complex-selector-content", __props.contentClass]),
+						style: normalizeStyle(__props.contentStyle)
 					}, [renderSlot(_ctx.$slots, "default", {
 						close,
 						commit,
 						state: state.value,
 						value: displayValue.value
-					})], 512)]),
-					default: withCtx(() => [createElementVNode("button", {
+					})], 6)]),
+					default: withCtx(() => [createElementVNode("button", mergeProps(unref(parts).forwardedAttrs(), {
 						id: triggerId,
-						class: "astryx-complex-selector",
+						class: ["astryx-complex-selector", __props.controlClass],
+						style: __props.controlStyle,
 						"data-placeholder": hasTriggerLabel.value ? void 0 : "",
 						"data-size": __props.size,
-						"data-status": __props.status?.type,
-						"data-variant": __props.variant,
+						"data-status": triggerVariant.value === "input" ? __props.status?.type : void 0,
+						"data-variant": triggerVariant.value,
 						"aria-busy": isBusy.value || void 0,
 						"aria-expanded": isOpen.value,
 						"aria-invalid": __props.status?.type === "error" || void 0,
@@ -272,7 +355,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						type: "button",
 						onClick: onBuiltinClick,
 						onKeydown: onBuiltinKeyDown
-					}, [
+					}), [
 						__props.startIcon ? (openBlock(), createBlock(_sfc_main$1, {
 							key: 0,
 							class: "astryx-complex-selector-start",
@@ -292,17 +375,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							icon: "chevronDown",
 							size: "sm"
 						}, null, 8, ["data-state"])
-					], 40, _hoisted_1)]),
+					], 16, _hoisted_1)]),
 					_: 3
 				}, 8, [
 					"alignment",
 					"is-enabled",
 					"is-open",
 					"label",
-					"placement"
+					"placement",
+					"width"
 				])]),
 				_: 3
 			}, 8, [
+				"class",
+				"style",
 				"data-variant",
 				"description",
 				"is-disabled",

package/dist/ContextMenu/index.d.ts

@@ -1,3 +1,3 @@
-import { $i as ContextMenuItemProps, Bi as _default, Gi as ContextMenuDividerProps, Hi as useContextMenuSize, Ii as _default$7, Ji as ContextMenuGroupProps, Ki as ContextMenuEmits, Li as _default$4, Qi as ContextMenuItemIcon, Ri as _default$3, Ui as ContextMenuCheckboxData, Vi as useContextMenu, Wi as ContextMenuDividerData, Xi as ContextMenuItemData, Yi as ContextMenuGroupSlots, Zi as ContextMenuItemEmits, aa as ContextMenuRadioData, ca as ContextMenuSize, da as ContextMenuSubMenuProps, ea as ContextMenuItemSlots, fa as ContextMenuSubMenuSlots, ha as ContextMenuWidth, ia as ContextMenuProps, la as ContextMenuSlots, ma as ContextMenuVariant, na as ContextMenuOption, oa as ContextMenuRadioOptionData, pa as ContextMenuTriggerElement, qi as ContextMenuEntry, ra as ContextMenuPresentation, sa as ContextMenuSection, ta as ContextMenuItemTarget, ua as ContextMenuSubMenuEmits, zi as _default$2 } from "../index-DUaLJO7l.js";
-import { n as _default$5, r as _default$1, t as _default$6 } from "../DropdownMenuRadioItem.vue-CXEURBcq.js";
+import { $i as ContextMenuItemIcon, Bi as _default$2, Gi as ContextMenuDividerData, Hi as useContextMenu, Ji as ContextMenuEntry, Ki as ContextMenuDividerProps, Li as _default$7, Qi as ContextMenuItemEmits, Ri as _default$4, Ui as useContextMenuSize, Vi as _default, Wi as ContextMenuCheckboxData, Xi as ContextMenuGroupSlots, Yi as ContextMenuGroupProps, Zi as ContextMenuItemData, aa as ContextMenuProps, ca as ContextMenuSection, da as ContextMenuSubMenuEmits, ea as ContextMenuItemProps, fa as ContextMenuSubMenuProps, ga as ContextMenuWidth, ha as ContextMenuVariant, ia as ContextMenuPresentation, la as ContextMenuSize, ma as ContextMenuTriggerElement, na as ContextMenuItemTarget, oa as ContextMenuRadioData, pa as ContextMenuSubMenuSlots, qi as ContextMenuEmits, ra as ContextMenuOption, sa as ContextMenuRadioOptionData, ta as ContextMenuItemSlots, ua as ContextMenuSlots, zi as _default$3 } from "../index-UA93Im7H.js";
+import { n as _default$5, r as _default$1, t as _default$6 } from "../DropdownMenuRadioItem.vue-Qd-8Rg4Q.js";
 export { _default as ContextMenu, type ContextMenuCheckboxData, _default$1 as ContextMenuCheckboxItem, _default$2 as ContextMenuDivider, type ContextMenuDividerData, type ContextMenuDividerProps, type ContextMenuEmits, type ContextMenuEntry, _default$3 as ContextMenuGroup, type ContextMenuGroupProps, type ContextMenuGroupSlots, _default$4 as ContextMenuItem, type ContextMenuItemData, type ContextMenuItemEmits, type ContextMenuItemIcon, type ContextMenuItemProps, type ContextMenuItemSlots, type ContextMenuItemTarget, type ContextMenuOption, type ContextMenuPresentation, type ContextMenuProps, type ContextMenuRadioData, _default$5 as ContextMenuRadioGroup, _default$6 as ContextMenuRadioItem, type ContextMenuRadioOptionData, type ContextMenuSection, type ContextMenuSize, type ContextMenuSlots, _default$7 as ContextMenuSubMenu, type ContextMenuSubMenuEmits, type ContextMenuSubMenuProps, type ContextMenuSubMenuSlots, type ContextMenuTriggerElement, type ContextMenuVariant, type ContextMenuWidth, useContextMenu, useContextMenuSize };

package/dist/ContextMenu/index.js

@@ -1,3 +1,3 @@
-import { d as useContextMenuSize, i as _sfc_main$1, n as _sfc_main$6, r as _sfc_main$5, u as useContextMenu } from "../useMenuDrillIn-DzKGkTho.js";
-import { a as _sfc_main$2, i as _sfc_main$3, n as _sfc_main$7, r as _sfc_main$4, t as _sfc_main } from "../ContextMenu-Bq9b3Ti5.js";
+import { d as useContextMenuSize, i as _sfc_main$1, n as _sfc_main$6, r as _sfc_main$5, u as useContextMenu } from "../useMenuDrillIn-DhUnPvKs.js";
+import { a as _sfc_main$2, i as _sfc_main$3, n as _sfc_main$7, r as _sfc_main$4, t as _sfc_main } from "../ContextMenu-CxoiRh_h.js";
 export { _sfc_main as ContextMenu, _sfc_main$1 as ContextMenuCheckboxItem, _sfc_main$2 as ContextMenuDivider, _sfc_main$3 as ContextMenuGroup, _sfc_main$4 as ContextMenuItem, _sfc_main$5 as ContextMenuRadioGroup, _sfc_main$6 as ContextMenuRadioItem, _sfc_main$7 as ContextMenuSubMenu, useContextMenu, useContextMenuSize };