fix: restore external pagination table head

Author: vis97c

packages/components-vue/src/components/loader/ContentFetch.vue

@@ -99,7 +99,7 @@
 	const props = defineProps<iLoaderContentFetchProps<T, P>>();
 	const emit = defineEmits(["refresh", "has-content", "hydrate"]);
 
-	const { logger, isBrowser } = useHelpers(useUtils);
+	const { logger } = useHelpers(useUtils);
 	const { useFetch } = useFetchUtils();
 	const { internals } = inject<iVuePluginOptions>("xamu") || {};
 	const useAsyncData: typeof useAsyncDataFn = internals?.useAsyncData ?? useAsyncDataFn;
@@ -237,7 +237,7 @@
 		(newContent) => {
 			const isContent = patchedIsContent(newContent);
 
-			if (isBrowser) emit("has-content", isContent, newContent, hydrate);
+			emit("has-content", isContent, newContent, hydrate);
 		},
 		{ immediate: true }
 	);

packages/components-vue/src/components/pagination/ContentTable.vue

@@ -8,6 +8,22 @@
 				createNodeAndRefresh,
 			}"
 		></slot>
+		<!-- Temporary head actions -->
+		<div
+			v-if="!emittedHasContent && $slots.headActions"
+			key="external-head-actions"
+			class="flx --flxRow --flx-start-center --gap-10 --gap:md"
+		>
+			<slot
+				name="headActions"
+				v-bind="{
+					refreshData,
+					hasContent: emittedHasContent,
+					hydrateData: emittedHydrateNodes,
+					createNodeAndRefresh,
+				}"
+			></slot>
+		</div>
 		<PaginationContent
 			v-slot="{ content }"
 			v-bind="{
@@ -25,21 +41,6 @@
 			@refresh="emittedRefresh = $event"
 			@has-content="hasContent"
 		>
-			<!-- Temporary head actions -->
-			<div
-				v-if="!emittedHasContent && $slots.headActions"
-				class="flx --flxRow --flx-start-center --gap-10 --gap:md"
-			>
-				<slot
-					name="headActions"
-					v-bind="{
-						refreshData,
-						hasContent: emittedHasContent,
-						hydrateData: emittedHydrateNodes,
-						createNodeAndRefresh,
-					}"
-				></slot>
-			</div>
 			<!-- Tabulated data -->
 			<div class="flx --flxColumn --flx-start-stretch">
 				<Table
@@ -60,7 +61,10 @@
 					}"
 				>
 					<template v-if="emittedHasContent && $slots.headActions" #headActions>
-						<div class="flx --flxRow --flx-start-center --gap-10 --gap:md">
+						<div
+							key="internal-head-actions"
+							class="flx --flxRow --flx-start-center --gap-10 --gap:md"
+						>
 							<slot
 								name="headActions"
 								v-bind="{
@@ -168,7 +172,7 @@
 	const Swal = useHelpers(useSwal);
 
 	const emittedRefresh = ref<() => void>();
-	const emittedHasContent = ref<boolean>(true);
+	const emittedHasContent = ref<boolean>();
 	const emittedContent = ref<T[] | null>();
 	const emittedHydrateNodes = ref<(newContent: T[] | null, newErrors?: unknown) => void>();
 
@@ -225,8 +229,8 @@
 						createdNodes = [created, ...(emittedContent.value || [])];
 					}
 
-					// Prefer hydration over refreshing
-					if (emittedHydrateNodes.value && createdNodes) {
+					// If has content, prefer hydration over refreshing
+					if (emittedHasContent.value && emittedHydrateNodes.value && createdNodes) {
 						emittedHydrateNodes.value(createdNodes);
 					} else if (!props.omitRefresh) refreshData();
 

packages/components-vue/src/components/table/Body.vue

@@ -374,8 +374,12 @@
 				title: t("swal.table_created"),
 				text: t("swal.table_created_text"),
 				willOpen() {
-					// Prefer hydration over refreshing
-					if (props.hydrateNodes && typeof updatedParent === "object") {
+					// If has children, prefer hydration over refreshing
+					if (
+						props.childrenCount(node) &&
+						props.hydrateNodes &&
+						typeof updatedParent === "object"
+					) {
 						hydrateNode({ ...node, ...updatedParent });
 					} else if (!props.omitRefresh) props.refresh?.();
 

packages/components-vue/src/components/table/Simple.vue

@@ -470,7 +470,7 @@
 		Swal.fireLoader();
 
 		let updatedNodes: T[] = [...props.nodes];
-		// run process
+		// run process in parallel
 		const deleted: iNodeFnResponse<T>[] = await Promise.all(
 			nodes.map(async (node) => {
 				const response = await useResolveNodeFn(props.deleteNode?.(node));