@mantine-vue/table 2.2.2 → 2.3.0

package/cjs/index.cjs

@@ -2032,13 +2032,7 @@ var MVT_BottomToolbar = (0, vue.defineComponent)({
 		required: true
 	} },
 	setup(props, { attrs }) {
-		const isMobile = (0, vue.ref)(false);
-		(0, vue.onMounted)(() => {
-			if (typeof window === "undefined" || !window.matchMedia) return;
-			const mql = window.matchMedia("(max-width: 720px)");
-			isMobile.value = mql.matches;
-			mql.addEventListener("change", (e) => isMobile.value = e.matches);
-		});
+		const isMobile = (0, _mantine_vue_hooks.useMediaQuery)("(max-width: 720px)");
 		return () => {
 			const { table } = props;
 			const { getState, options: { enablePagination, mantineBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions }, refs: { bottomToolbarRef } } = table;
@@ -2742,16 +2736,6 @@ var MVT_TopToolbar_module_default = {
 };
 //#endregion
 //#region src/components/toolbar/MVT_TopToolbar.ts
-var useMedia = (query) => {
-	const matches = (0, vue.ref)(false);
-	(0, vue.onMounted)(() => {
-		if (typeof window === "undefined" || !window.matchMedia) return;
-		const mql = window.matchMedia(query);
-		matches.value = mql.matches;
-		mql.addEventListener("change", (e) => matches.value = e.matches);
-	});
-	return matches;
-};
 var MVT_TopToolbar = (0, vue.defineComponent)({
 	name: "MVTTopToolbar",
 	inheritAttrs: false,
@@ -2760,8 +2744,8 @@ var MVT_TopToolbar = (0, vue.defineComponent)({
 		required: true
 	} },
 	setup(props, { attrs }) {
-		const isMobile = useMedia("(max-width: 720px)");
-		const isTablet = useMedia("(max-width: 1024px)");
+		const isMobile = (0, _mantine_vue_hooks.useMediaQuery)("(max-width: 720px)");
+		const isTablet = (0, _mantine_vue_hooks.useMediaQuery)("(max-width: 1024px)");
 		return () => {
 			const { table } = props;
 			const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, mantineTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions }, refs: { topToolbarRef } } = table;
@@ -2771,7 +2755,10 @@ var MVT_TopToolbar = (0, vue.defineComponent)({
 				...attrs
 			};
 			const stackAlertBanner = isMobile.value || !!renderTopToolbarCustomActions || showGlobalFilter && isTablet.value;
-			const globalFilterProps = { table };
+			const globalFilterProps = {
+				style: !isTablet.value ? { zIndex: 3 } : void 0,
+				table
+			};
 			return (0, vue.h)(_mantine_vue_core.Box, {
 				...toolbarProps,
 				class: (0, clsx.default)(common_styles_module_default["common-toolbar-styles"], MVT_TopToolbar_module_default["root"], isFullScreen && MVT_TopToolbar_module_default["root-fullscreen"], toolbarProps?.class),
@@ -2788,7 +2775,7 @@ var MVT_TopToolbar = (0, vue.defineComponent)({
 					table
 				}),
 				["both", "top"].includes(positionToolbarDropZone ?? "") && (0, vue.h)(MVT_ToolbarDropZone, { table }),
-				(0, vue.h)(_mantine_vue_core.Flex, { class: (0, clsx.default)(MVT_TopToolbar_module_default["actions-container"], stackAlertBanner && MVT_TopToolbar_module_default["actions-container-stack-alert"]) }, () => [
+				(0, vue.h)(_mantine_vue_core.Flex, { class: [MVT_TopToolbar_module_default["actions-container"], stackAlertBanner ? MVT_TopToolbar_module_default["actions-container-stack-alert"] : void 0] }, () => [
 					enableGlobalFilter && positionGlobalFilter === "left" && (0, vue.h)(MVT_GlobalFilterTextInput, globalFilterProps),
 					parseFromValuesOrFunc(renderTopToolbarCustomActions, { table }) ?? (0, vue.h)("span"),
 					enableToolbarInternalActions ? (0, vue.h)(_mantine_vue_core.Flex, {
@@ -2825,6 +2812,7 @@ var MVT_EditRowModal = (0, vue.defineComponent)({
 	},
 	emits: { close: () => true },
 	setup(props, { attrs, emit, slots }) {
+		const mvtSlots = useMVT_Slots();
 		return () => {
 			const { table } = props;
 			const state = table.getState();
@@ -2862,7 +2850,7 @@ var MVT_EditRowModal = (0, vue.defineComponent)({
 				modalProps.onClose?.();
 				emit("close");
 			};
-			const custom = (state.creatingRow ? slots.create ?? slots.default : slots.edit ?? slots.default)?.({
+			const custom = (state.creatingRow ? slots.create ?? mvtSlots.createRowModalContent ?? slots.default : slots.edit ?? mvtSlots.editRowModalContent ?? slots.default)?.({
 				internalEditComponents,
 				row,
 				table