@mantine-vue/core 2.2.2 → 2.3.1

package/cjs/index.cjs

@@ -3967,7 +3967,10 @@ var Badge = withBoxProps((0, vue.defineComponent)({
 			type: String,
 			default: "div"
 		},
-		size: [String, Number],
+		size: {
+			type: String,
+			default: void 0
+		},
 		circle: {
 			type: Boolean,
 			default: false
@@ -4035,7 +4038,7 @@ var Badge = withBoxProps((0, vue.defineComponent)({
 		const renderSection = (section, position) => hasNode(section) ? (0, vue.h)("span", {
 			...getStyles("section"),
 			"data-position": position
-		}, () => section) : null;
+		}, section) : null;
 		return () => {
 			const children = slots.default?.() ?? [];
 			const leftSection = resolveNode(props.leftSection, slots.leftSection);
@@ -6981,7 +6984,8 @@ var GridColVariables = (0, vue.defineComponent)({
 					acc[breakpoint]["--col-max-width"] = getColumnMaxWidth(span, ctx.columns, ctx.grow);
 				}
 				if (isObject$1(props.offset) && props.offset[breakpoint] !== void 0) acc[breakpoint]["--col-offset"] = getColumnOffset(props.offset[breakpoint], ctx.columns);
-				if (isObject$1(props.align) && props.align[breakpoint] !== void 0) acc[breakpoint]["--col-align-self"] = props.align[breakpoint];
+				const responsiveAlign = isObject$1(props.align) ? props.align[breakpoint] : void 0;
+				if (responsiveAlign !== void 0) acc[breakpoint]["--col-align-self"] = responsiveAlign;
 				return acc;
 			}, {});
 			const values = getSortedBreakpoints(breakpoints).reduce((acc, item) => {
@@ -11175,7 +11179,7 @@ var InputClearButton = withBoxProps((0, vue.defineComponent)({
 	inheritAttrs: false,
 	props: {
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		variant: {
@@ -13556,7 +13560,7 @@ var PinInput = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		autoFocus: {
@@ -15293,7 +15297,7 @@ var SegmentedControl = (0, vue.defineComponent)({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: "sm"
 		},
 		radius: {
@@ -17429,7 +17433,7 @@ var CheckboxGroup = (0, vue.defineComponent)({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		wrapperProps: {
@@ -17821,7 +17825,7 @@ var CheckboxBase = (0, vue.defineComponent)({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: "sm"
 		},
 		radius: {
@@ -18100,7 +18104,7 @@ var ChipBase = (0, vue.defineComponent)({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: "sm"
 		},
 		type: {
@@ -18287,7 +18291,7 @@ var PillGroup = withBoxProps((0, vue.defineComponent)({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		disabled: {
@@ -18369,7 +18373,7 @@ var PillBase = (0, vue.defineComponent)({
 	inheritAttrs: false,
 	props: {
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		withRemoveButton: {
@@ -18750,7 +18754,7 @@ var RadioGroup = (0, vue.defineComponent)({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		wrapperProps: {
@@ -19128,7 +19132,7 @@ var RadioBase = (0, vue.defineComponent)({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: "sm"
 		},
 		icon: {
@@ -19315,7 +19319,7 @@ var SwitchGroup = (0, vue.defineComponent)({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		wrapperProps: {
@@ -19480,7 +19484,7 @@ var SwitchBase = (0, vue.defineComponent)({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: "sm"
 		},
 		radius: {
@@ -19767,8 +19771,8 @@ var Flex = withBoxProps((0, vue.defineComponent)({
 			name: "Flex",
 			classes: Flex_module_default,
 			props,
-			className: attrs.class,
-			style: attrs.style,
+			className: void 0,
+			style: void 0,
 			classNames: props.classNames,
 			styles: props.styles,
 			vars: props.vars,
@@ -19798,8 +19802,8 @@ var Flex = withBoxProps((0, vue.defineComponent)({
 				component: props.component,
 				...attrs,
 				...getStyles("root", {
-					className: parsedStyleProps.hasResponsiveStyles ? responsiveClassName : void 0,
-					style: filterProps(parsedStyleProps.inlineStyles)
+					className: [attrs.class, parsedStyleProps.hasResponsiveStyles ? responsiveClassName : void 0],
+					style: [attrs.style, filterProps(parsedStyleProps.inlineStyles)]
 				})
 			}, () => slots.default?.())];
 		};
@@ -20197,7 +20201,7 @@ var StepperBase = (0, vue.defineComponent)({
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: void 0
 		},
 		radius: {
@@ -26240,14 +26244,17 @@ var Drawer = Object.assign(DrawerBaseComponent, {
 });
 //#endregion
 //#region src/utils/Floating/FloatingArrow/get-arrow-position-styles.ts
+function px$1(value) {
+	return value === void 0 ? void 0 : `${value}px`;
+}
 function horizontalSide(placement, arrowY, offset, position) {
-	if (placement === "center" || position === "center") return { top: arrowY };
-	return placement === "end" ? { bottom: offset } : { top: offset };
+	if (placement === "center" || position === "center") return { top: px$1(arrowY) };
+	return placement === "end" ? { bottom: px$1(offset) } : { top: px$1(offset) };
 }
 function verticalSide(placement, arrowX, offset, position, dir) {
-	if (placement === "center" || position === "center") return { left: arrowX };
-	if (placement === "end") return { [dir === "ltr" ? "right" : "left"]: offset };
-	return { [dir === "ltr" ? "left" : "right"]: offset };
+	if (placement === "center" || position === "center") return { left: px$1(arrowX) };
+	if (placement === "end") return { [dir === "ltr" ? "right" : "left"]: px$1(offset) };
+	return { [dir === "ltr" ? "left" : "right"]: px$1(offset) };
 }
 var radiusBySide = {
 	bottom: "borderTopLeftRadius",
@@ -26268,15 +26275,15 @@ function mergeStyles(position, size, dir) {
 		const startShape = placement === "start" !== (dir === "rtl");
 		return {
 			...base,
-			[side === "bottom" ? "top" : "bottom"]: -size,
-			[physical]: 0,
+			[side === "bottom" ? "top" : "bottom"]: px$1(-size),
+			[physical]: px$1(0),
 			clipPath: side === "bottom" ? startShape ? "polygon(0% 0%, 0% 100%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)" : startShape ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 100% 0%, 100% 100%)"
 		};
 	}
 	return {
 		...base,
-		[side === "left" ? "right" : "left"]: -size,
-		[placement === "start" ? "top" : "bottom"]: 0,
+		[side === "left" ? "right" : "left"]: px$1(-size),
+		[placement === "start" ? "top" : "bottom"]: px$1(0),
 		clipPath: side === "left" ? placement === "start" ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 0% 100%, 100% 100%)" : placement === "start" ? "polygon(0% 0%, 100% 0%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)"
 	};
 }
@@ -26293,7 +26300,7 @@ function getArrowPositionStyles(input) {
 		position: "absolute",
 		[radiusBySide[side]]: `${input.arrowRadius}px`
 	};
-	const edge = -input.arrowSize / 2;
+	const edge = px$1(-input.arrowSize / 2);
 	if (side === "left") return {
 		...base,
 		...horizontalSide(placement, input.arrowY, input.arrowOffset, input.arrowPosition),
@@ -26369,6 +26376,7 @@ var FloatingArrow = (0, vue.defineComponent)({
 	setup(props, { attrs }) {
 		const { dir } = useDirection();
 		return () => props.visible ? (0, vue.h)("div", {
+			role: "presentation",
 			...attrs,
 			style: [attrs.style, getArrowPositionStyles({
 				...props,
@@ -26815,7 +26823,11 @@ var PopoverBase = (0, vue.defineComponent)({
 					...shiftOptions
 				};
 			}));
-			result.push((0, _floating_ui_vue.arrow)({ element: arrowElement }));
+			if (props.middlewares?.inline) result.push((0, _floating_ui_vue.inline)(typeof props.middlewares.inline === "object" ? props.middlewares.inline : void 0));
+			result.push((0, _floating_ui_vue.arrow)({
+				element: arrowElement,
+				padding: props.arrowOffset
+			}));
 			if (props.middlewares?.size || props.width === "target") result.push((0, _floating_ui_vue.size)({
 				...typeof props.middlewares?.size === "object" ? props.middlewares.size : {},
 				apply: ({ rects, availableWidth, availableHeight, elements, ...rest }) => {