feat: pagination content table

Author: vis97c

package.json

@@ -27,7 +27,9 @@
     "dev:vue": "yarn p:vue dev",
     "dev:nuxt": "yarn p:nuxt dev",
     "build": "yarn workspaces run build",
+    "build:helpers": "yarn p:enums build && yarn p:helpers build",
     "build:nuxt": "yarn p:vue build && yarn p:nuxt build",
+    "build:js": "yarn build:helpers && yarn build:nuxt",
     "build:css": "yarn p:styles build",
     "release": "yarn workspaces run semantic-release",
     "release:dry": "yarn workspaces run semantic-release --dry-run"
@@ -64,7 +66,7 @@
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-prettier": "^5.0.0",
     "typescript": "5.8.2",
-    "vite": "^5.2.12",
+    "vite": "^7.0.4",
     "vue-tsc": "2.1.10"
   },
   "husky": {

packages/common-enums/src/components.ts

@@ -3,6 +3,7 @@
  */
 export const componentNames = [
 	// base
+	"BaseBrowserOnly",
 	"BaseImg",
 	"BaseAction",
 	"BaseInput",
@@ -41,6 +42,7 @@ export const componentNames = [
 	// pagination
 	"Pagination",
 	"PaginationContent",
+	"PaginationContentTable",
 	// form
 	"FormInput",
 	"Form",

packages/components-vue/src/components/base/BrowserOnly.vue

@@ -0,0 +1,11 @@
+<template>
+	<slot v-if="isBrowser"></slot>
+	<slot v-else-if="$slots.fallback" name="fallback"></slot>
+</template>
+<script setup lang="ts">
+	import { useUtils } from "@open-xamu-co/ui-common-helpers";
+
+	import { useHelpers } from "../../composables/utils";
+
+	const { isBrowser } = useHelpers(useUtils);
+</script>

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

@@ -2,8 +2,7 @@
 	<BaseErrorBoundary :theme="theme">
 		<LoaderContent
 			v-bind="{
-				content:
-					!!content && patchedIsContent(content) && (!!fallback || firstLoad || hydrated),
+				content: patchedIsContent(content) && (!!fallback || firstLoad || hydrated),
 				errors,
 				loading,
 				refresh,
@@ -18,9 +17,7 @@
 			:class="$attrs.class"
 		>
 			<slot
-				v-if="
-					!!content && patchedIsContent(content) && (!!fallback || firstLoad || hydrated)
-				"
+				v-if="patchedIsContent(content) && (!!fallback || firstLoad || hydrated)"
 				v-bind="{ content, refresh, loading, errors }"
 			></slot>
 		</LoaderContent>
@@ -198,8 +195,9 @@
 		},
 	});
 
-	function patchedIsContent(c?: T): boolean {
-		return props.isContent?.(c) ?? !!c;
+	function patchedIsContent(c?: T | null): c is NonNullable<T> {
+		// isContent needs to run always
+		return props.isContent?.(c ?? undefined) ?? !!c;
 	}
 	function validatePromiseLike(newPromise: any, oldPromise: any) {
 		/**

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import ContentTable from "./ContentTable.vue";
+
+const meta = {
+	title: "Pagination/Pagination ContentTable",
+	component: ContentTable as Record<keyof typeof ContentTable, unknown>,
+	args: {},
+} satisfies Meta<typeof ContentTable>;
+
+type Story = StoryObj<typeof ContentTable>;
+
+export const Sample: Story = {
+	args: {},
+};
+
+export default meta;

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

@@ -0,0 +1,124 @@
+<template>
+	<BaseErrorBoundary>
+		<slot v-bind="{ hasContent, refreshData }"></slot>
+		<div class="flx --flxColumn --gap-30">
+			<div
+				v-if="!hasContent && $slots.headActions"
+				class="flx --flxRow --flx-start-center --gap-10 --gap:md"
+			>
+				<slot name="headActions" v-bind="{ hasContent, refreshData }"></slot>
+			</div>
+			<PaginationContent
+				v-slot="{ content }"
+				v-bind="{ page, url, noContentMessage, preventAutoload, theme, client }"
+				with-route
+				:defaults="{ page: true, ...defaults }"
+				class="flx --flxColumn --flx-start-end"
+				@refresh="emittedRefresh = $event"
+				@has-content="hasContent = $event"
+			>
+				<!-- Prevent hydration issues, data is fetched no matter what -->
+				<BrowserOnly>
+					<Table
+						:nodes="mapNodes(content)"
+						:refresh="refreshData"
+						:class="tableClass"
+						v-bind="{
+							...tableProps,
+							theme,
+							modalProps: {
+								invertTheme: true,
+								class: modalClass ?? tableClass,
+								...tableProps?.modalProps,
+							},
+						}"
+					>
+						<template v-if="$slots.headActions" #headActions>
+							<div class="flx --flxRow --flx-start-center --gap-10 --gap:md">
+								<slot
+									name="headActions"
+									v-bind="{ hasContent, refreshData }"
+								></slot>
+							</div>
+						</template>
+						<template v-if="$slots.tableChildren" #default="tableChildrenScope">
+							<slot
+								name="tableChildren"
+								v-bind="{ ...tableChildrenScope, hasContent, refreshData }"
+							></slot>
+						</template>
+					</Table>
+				</BrowserOnly>
+			</PaginationContent>
+		</div>
+	</BaseErrorBoundary>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>, TM extends Record<string, any>">
+	import { ref } from "vue";
+
+	import type { iGetPage, tThemeModifier, tThemeTuple } from "@open-xamu-co/ui-common-types";
+	import type { iTableProps } from "@open-xamu-co/ui-components-vue";
+
+	import BaseErrorBoundary from "../base/ErrorBoundary.vue";
+	import BrowserOnly from "../base/BrowserOnly.vue";
+	import Table from "../table/Simple.vue";
+	import PaginationContent from "./Content.vue";
+
+	export interface iPaginationContentTableProps<
+		Ti extends Record<string, any>,
+		TMi extends Record<string, any>,
+	> {
+		/**
+		 * Required to dedupe caching
+		 */
+		url: string;
+		page: iGetPage<Ti>;
+		defaults?: Record<string, any>;
+		mapNode?: (node: Ti) => TMi;
+		preventAutoload?: boolean;
+		/**
+		 * Additional refresh function
+		 */
+		refresh?: () => void;
+		noContentMessage?: string;
+		tableProps?: Omit<iTableProps<TMi>, "nodes" | "refresh">;
+		theme?: tThemeModifier | tThemeTuple;
+		client?: boolean;
+		/**
+		 * Additional class for the table
+		 *
+		 * @example --txtColor
+		 */
+		tableClass?: string | string[] | Record<string, boolean>;
+		/**
+		 * Additional class for the modal
+		 *
+		 * @example --txtColor
+		 */
+		modalClass?: string | string[] | Record<string, boolean>;
+	}
+
+	/**
+	 * Pagination Table
+	 * Showcase a table with pagination and data fetching
+	 *
+	 * @component
+	 */
+
+	const props = withDefaults(defineProps<iPaginationContentTableProps<T, TM>>(), {
+		mapNode: (node: T) => node as unknown as TM,
+	});
+
+	const hasContent = ref(false);
+	const emittedRefresh = ref();
+
+	function refreshData() {
+		props.refresh?.();
+		emittedRefresh.value?.();
+	}
+
+	function mapNodes(nodes: T[] = []): TM[] {
+		return nodes.map(props.mapNode);
+	}
+</script>

packages/components-vue/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./types/props";
 
 // base
+export { default as BaseBrowserOnly } from "./components/base/BrowserOnly.vue";
 export { default as BaseImg } from "./components/base/Img.vue";
 export { default as BaseAction } from "./components/base/Action.vue";
 export { default as BaseInput } from "./components/base/Input.vue";
@@ -47,6 +48,7 @@ export { default as LoaderContentFetch } from "./components/loader/ContentFetch.
 // pagination
 export { default as Pagination } from "./components/pagination/Simple.vue";
 export { default as PaginationContent } from "./components/pagination/Content.vue";
+export { default as PaginationContentTable } from "./components/pagination/ContentTable.vue";
 
 // form
 export { default as FormInput } from "./components/form/Input.vue";