@mantine-vue/table 2.2.1 → 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
@@ -1458,6 +1458,16 @@ var useMVT_TableOptions = (rawOptions) => {
 		enumerable: true,
 		get: () => rawOptions.columns
 	});
+	Object.defineProperty(definedOptions, "state", {
+		configurable: true,
+		enumerable: true,
+		get: () => rawOptions.state
+	});
+	Object.defineProperty(definedOptions, "rowCount", {
+		configurable: true,
+		enumerable: true,
+		get: () => rawOptions.rowCount
+	});
 	return definedOptions;
 };
 //#endregion
@@ -1593,10 +1603,20 @@ var useMVT_TableInstance = (definedTableOptions) => {
 	const showColumnFilters = ref(initialState?.showColumnFilters ?? false);
 	const showGlobalFilter = ref(initialState?.showGlobalFilter ?? false);
 	const showToolbarDropZone = ref(initialState?.showToolbarDropZone ?? false);
-	const userState = definedTableOptions.state ?? {};
-	const state = { ...userState };
+	const stateDescriptor = Object.getOwnPropertyDescriptor(definedTableOptions, "state");
+	const readUserState = () => (stateDescriptor?.get ? stateDescriptor.get.call(definedTableOptions) : stateDescriptor?.value) ?? {};
+	const userStateKeys = new Set(Object.keys(readUserState()));
+	const state = {};
+	userStateKeys.forEach((key) => {
+		Object.defineProperty(state, key, {
+			configurable: true,
+			enumerable: true,
+			get: () => readUserState()[key]
+		});
+	});
 	const defineState = (key, getter) => {
-		if (!(key in userState)) Object.defineProperty(state, key, {
+		if (!userStateKeys.has(key)) Object.defineProperty(state, key, {
+			configurable: true,
 			enumerable: true,
 			get: getter
 		});
@@ -1620,7 +1640,12 @@ var useMVT_TableInstance = (definedTableOptions) => {
 	defineState("showColumnFilters", () => showColumnFilters.value);
 	defineState("showGlobalFilter", () => showGlobalFilter.value);
 	defineState("showToolbarDropZone", () => showToolbarDropZone.value);
-	definedTableOptions.state = state;
+	Object.defineProperty(definedTableOptions, "state", {
+		configurable: true,
+		enumerable: true,
+		writable: true,
+		value: state
+	});
 	const statefulTableOptions = definedTableOptions;
 	let columnDefsCache = [];
 	const columns = computed(() => {
@@ -1647,7 +1672,7 @@ var useMVT_TableInstance = (definedTableOptions) => {
 		const s = statefulTableOptions.state;
 		return (s.isLoading || s.showSkeletons) && !definedTableOptions.data.length ? [...Array(Math.min(s.pagination.pageSize, 20)).fill(null)].map(() => Object.assign({}, ...getAllLeafColumnDefs(columns.value).map((col) => ({ [getColumnId(col)]: null })))) : definedTableOptions.data;
 	});
-	const { columns: _columns, data: _data, ...restOptions } = statefulTableOptions;
+	const { columns: _columns, data: _data, rowCount: _rowCount, ...restOptions } = statefulTableOptions;
 	const table = useVueTable({
 		onColumnOrderChange: (updater) => applyUpdater(columnOrder, updater),
 		onColumnSizingInfoChange: (updater) => applyUpdater(columnSizingInfo, updater),
@@ -1660,6 +1685,9 @@ var useMVT_TableInstance = (definedTableOptions) => {
 		get data() {
 			return data.value;
 		},
+		get rowCount() {
+			return definedTableOptions.rowCount;
+		},
 		globalFilterFn: statefulTableOptions.filterFns?.[globalFilterFn.value ?? "fuzzy"]
 	});
 	table.refs = {
@@ -1980,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;
@@ -2690,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,
@@ -2708,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;
@@ -2719,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),
@@ -2736,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, {
@@ -2773,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();
@@ -2810,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