fix: loader content props validation

Author: vis97c

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

@@ -39,8 +39,6 @@
 
 	import type { iUseThemeProps } from "../../types/props";
 
-	type tDataPromise<Ti, Pi extends any[]> = (...args: Pi) => Promise<Ti>;
-
 	interface iLoaderContentFetchProps<Ti, Pi extends any[]> extends iUseThemeProps {
 		/**
 		 * Loader label
@@ -53,8 +51,8 @@
 		fallback?: Ti;
 		unwrap?: boolean;
 		url?: false | string;
-		promise?: false | tDataPromise<Ti, Pi>;
-		hydratablePromise?: false | ((hydrate: tHydrate<Ti>) => tDataPromise<Ti, Pi>);
+		promise?: false | ((...args: Pi) => Promise<Ti>);
+		hydratablePromise?: false | ((hydrate: tHydrate<Ti>) => (...args: Pi) => Promise<Ti>);
 		payload?: Pi;
 		/**
 		 * Component or tag to render

packages/components-vue/src/screens/ModalWithFormStages.vue

@@ -42,6 +42,7 @@
 
 <script setup lang="ts">
 	import { computed } from "vue";
+
 	import type { iInvalidInput } from "@open-xamu-co/ui-common-types";
 	import { FormInput, useForm, type iForm } from "@open-xamu-co/ui-common-helpers";
 
@@ -55,6 +56,8 @@
 
 	/**
 	 * Modal with form stages
+	 *
+	 * @screen
 	 */
 
 	const stages = computed<iForm[][]>(() => {

packages/components-vue/src/screens/PaginationContentWithTable.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import PaginationContentWithTable from "./PaginationContentWithTable.vue";
+
+const meta = {
+	title: "Screens/Pagination Content with Table",
+	component: PaginationContentWithTable as Record<
+		keyof typeof PaginationContentWithTable,
+		unknown
+	>,
+	args: {},
+	tags: ["!autodocs"],
+} satisfies Meta<typeof PaginationContentWithTable>;
+
+type Story = StoryObj<typeof PaginationContentWithTable>;
+
+export const Sample: Story = {
+	args: {},
+};
+
+export default meta;

packages/components-vue/src/screens/PaginationContentWithTable.vue

@@ -0,0 +1,83 @@
+<template>
+	<PaginationContent
+		v-slot="{ content }"
+		:page="page"
+		:transform="getPageFromResponse"
+		with-route
+		class="flx --flxColumn --flx-start-end --gap-5 --width"
+	>
+		<Table
+			:nodes="content"
+			can-sort
+			:modal-props="{ theme: [eColors.LIGHT, eColors.SECONDARY], class: '--txtColor' }"
+		/>
+	</PaginationContent>
+</template>
+
+<script setup lang="ts">
+	import type { iFormResponse, iPage, iPagination } from "@open-xamu-co/ui-common-types";
+	import { eColors } from "@open-xamu-co/ui-common-enums";
+
+	import PaginationContent from "../components/pagination/Content.vue";
+	import Table from "../components/table/Simple.vue";
+
+	export interface iSector {
+		id: number;
+		categories: Record<string, any>[];
+		name: string;
+		description: string;
+	}
+
+	/**
+	 * Pagination Content with Table
+	 *
+	 * @screen
+	 */
+
+	const page = async (_params?: iPagination): Promise<iFormResponse<iPage<iSector, number>>> => {
+		const data = {
+			response: {
+				edges: [
+					{
+						cursor: 2,
+						node: {
+							id: 2,
+							name: "Agropecuario",
+							description: "Este es el sector agropecuario",
+							categories: [],
+						},
+					},
+					{
+						cursor: 1,
+						node: {
+							id: 1,
+							name: "Tecnológico",
+							description:
+								"Este sector incluye todo tipo de electrodomésticos y dispositivos.",
+							categories: [],
+						},
+					},
+				],
+				pageInfo: {
+					hasNextPage: false,
+					hasPreviousPage: false,
+				},
+				totalCount: 2,
+			},
+			invalidInputs: [],
+			withErrors: false,
+			requestHadErrors: false,
+			validationHadErrors: false,
+		};
+
+		return new Promise((resolve) => {
+			setTimeout(() => {
+				resolve(data);
+			}, 3000);
+		});
+	};
+
+	const getPageFromResponse = ({ response }: iFormResponse<iPage<iSector, number>>) => {
+		return response;
+	};
+</script>