@mantine-vue/table 2.2.1 → 2.3.0

package/cjs/index.cjs

@@ -1482,6 +1482,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
@@ -1617,10 +1627,20 @@ var useMVT_TableInstance = (definedTableOptions) => {
 	const showColumnFilters = (0, vue.ref)(initialState?.showColumnFilters ?? false);
 	const showGlobalFilter = (0, vue.ref)(initialState?.showGlobalFilter ?? false);
 	const showToolbarDropZone = (0, vue.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
 		});
@@ -1644,7 +1664,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 = (0, vue.computed)(() => {
@@ -1671,7 +1696,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 = (0, _tanstack_vue_table.useVueTable)({
 		onColumnOrderChange: (updater) => applyUpdater(columnOrder, updater),
 		onColumnSizingInfoChange: (updater) => applyUpdater(columnSizingInfo, updater),
@@ -1684,6 +1709,9 @@ var useMVT_TableInstance = (definedTableOptions) => {
 		get data() {
 			return data.value;
 		},
+		get rowCount() {
+			return definedTableOptions.rowCount;
+		},
 		globalFilterFn: statefulTableOptions.filterFns?.[globalFilterFn.value ?? "fuzzy"]
 	});
 	table.refs = {
@@ -2004,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;
@@ -2714,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,
@@ -2732,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;
@@ -2743,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),
@@ -2760,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, {
@@ -2797,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();
@@ -2834,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