@mantine-vue/table 2.2.2 → 2.3.0

package/esm/index.mjs

@@ -4,7 +4,7 @@ import { ActionIcon, Alert, Autocomplete, Badge, Box, Button, Checkbox, Collapse
 import clsx from "clsx";
 import { compareItems, rankItem, rankings } from "@tanstack/match-sorter-utils";
 import { IconArrowAutofitContent, IconArrowsSort, IconBaselineDensityLarge, IconBaselineDensityMedium, IconBaselineDensitySmall, IconBoxMultiple, IconChevronDown, IconChevronLeft, IconChevronLeftPipe, IconChevronRight, IconChevronRightPipe, IconChevronsDown, IconCircleX, IconClearAll, IconColumns, IconDeviceFloppy, IconDots, IconDotsVertical, IconEdit, IconEyeOff, IconFilter, IconFilterCog, IconFilterOff, IconGripHorizontal, IconMaximize, IconMinimize, IconPinned, IconPinnedOff, IconSearch, IconSearchOff, IconSortAscending, IconSortDescending, IconX } from "@tabler/icons-vue";
-import { useDebouncedValue } from "@mantine-vue/hooks";
+import { useDebouncedValue, useMediaQuery } from "@mantine-vue/hooks";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/vue-virtual";
 import { DateInput } from "@mantine-vue/dates";
 //#region src/utils/column.utils.ts
@@ -2008,13 +2008,7 @@ var MVT_BottomToolbar = defineComponent({
 		required: true
 	} },
 	setup(props, { attrs }) {
-		const isMobile = ref(false);
-		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 = useMediaQuery("(max-width: 720px)");
 		return () => {
 			const { table } = props;
 			const { getState, options: { enablePagination, mantineBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions }, refs: { bottomToolbarRef } } = table;
@@ -2718,16 +2712,6 @@ var MVT_TopToolbar_module_default = {
 };
 //#endregion
 //#region src/components/toolbar/MVT_TopToolbar.ts
-var useMedia = (query) => {
-	const matches = ref(false);
-	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 = defineComponent({
 	name: "MVTTopToolbar",
 	inheritAttrs: false,
@@ -2736,8 +2720,8 @@ var MVT_TopToolbar = defineComponent({
 		required: true
 	} },
 	setup(props, { attrs }) {
-		const isMobile = useMedia("(max-width: 720px)");
-		const isTablet = useMedia("(max-width: 1024px)");
+		const isMobile = useMediaQuery("(max-width: 720px)");
+		const isTablet = useMediaQuery("(max-width: 1024px)");
 		return () => {
 			const { table } = props;
 			const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, mantineTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions }, refs: { topToolbarRef } } = table;
@@ -2747,7 +2731,10 @@ var MVT_TopToolbar = defineComponent({
 				...attrs
 			};
 			const stackAlertBanner = isMobile.value || !!renderTopToolbarCustomActions || showGlobalFilter && isTablet.value;
-			const globalFilterProps = { table };
+			const globalFilterProps = {
+				style: !isTablet.value ? { zIndex: 3 } : void 0,
+				table
+			};
 			return h(Box, {
 				...toolbarProps,
 				class: clsx(common_styles_module_default["common-toolbar-styles"], MVT_TopToolbar_module_default["root"], isFullScreen && MVT_TopToolbar_module_default["root-fullscreen"], toolbarProps?.class),
@@ -2764,7 +2751,7 @@ var MVT_TopToolbar = defineComponent({
 					table
 				}),
 				["both", "top"].includes(positionToolbarDropZone ?? "") && h(MVT_ToolbarDropZone, { table }),
-				h(Flex, { class: clsx(MVT_TopToolbar_module_default["actions-container"], stackAlertBanner && MVT_TopToolbar_module_default["actions-container-stack-alert"]) }, () => [
+				h(Flex, { class: [MVT_TopToolbar_module_default["actions-container"], stackAlertBanner ? MVT_TopToolbar_module_default["actions-container-stack-alert"] : void 0] }, () => [
 					enableGlobalFilter && positionGlobalFilter === "left" && h(MVT_GlobalFilterTextInput, globalFilterProps),
 					parseFromValuesOrFunc(renderTopToolbarCustomActions, { table }) ?? h("span"),
 					enableToolbarInternalActions ? h(Flex, {
@@ -2801,6 +2788,7 @@ var MVT_EditRowModal = defineComponent({
 	},
 	emits: { close: () => true },
 	setup(props, { attrs, emit, slots }) {
+		const mvtSlots = useMVT_Slots();
 		return () => {
 			const { table } = props;
 			const state = table.getState();
@@ -2838,7 +2826,7 @@ var MVT_EditRowModal = 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