@chimera-pe/mui-saas 3.0.2 → 3.0.4

package/dist/mui-saas.js

@@ -1,37 +1,38 @@
-import { jsxs as m, jsx as s, Fragment as y } from "react/jsx-runtime";
-import n from "prop-types";
-import { useSaasStore as x, SaasApp as T } from "@chimera-pe/react-saas";
-import { useEffect as u, useMemo as b, useState as j, useCallback as C } from "react";
-import { useMediaQuery as N, createTheme as v, ThemeProvider as k, CssBaseline as M, Snackbar as R, Alert as d, Box as f, CircularProgress as S, AlertTitle as q } from "@mui/material";
-import { grey as p } from "@mui/material/colors";
-import { create as A } from "zustand";
-import { useTranslate as h } from "react-polyglot";
-const c = A((o) => ({
+import { jsxs as d, jsx as r, Fragment as D } from "react/jsx-runtime";
+import t from "prop-types";
+import { useSaasStore as I, SaasApp as M } from "@chimera-pe/react-saas";
+import { useEffect as b, useMemo as E, useState as v, Children as L, cloneElement as O, useCallback as B } from "react";
+import { useMediaQuery as F, createTheme as G, ThemeProvider as H, CssBaseline as Q, Snackbar as $, Alert as R, Box as j, CircularProgress as J, AlertTitle as K, List as U, ListItem as V, ListItemText as W, Skeleton as X, Card as P, CardHeader as S, CardContent as T, LinearProgress as Y, Typography as Z, CardActions as _, TablePagination as ee } from "@mui/material";
+import { grey as x } from "@mui/material/colors";
+import { create as re } from "zustand";
+import { useTranslate as C } from "react-polyglot";
+import { useQuery as ie } from "@tanstack/react-query";
+const f = re((n) => ({
   tema: "light",
   notificaciones: [],
-  cambiarTema: (r) => {
-    o({
-      tema: r
+  cambiarTema: (i) => {
+    n({
+      tema: i
     });
   },
-  mostrarNotificacion: (r) => {
-    o((i) => ({
-      notificaciones: [r, ...i.notificaciones]
+  mostrarNotificacion: (i) => {
+    n((a) => ({
+      notificaciones: [i, ...a.notificaciones]
     }));
   },
   ocultarNotificacion: () => {
-    o((r) => ({
-      notificaciones: r.notificaciones.slice(1)
+    n((i) => ({
+      notificaciones: i.notificaciones.slice(1)
     }));
   }
-})), g = ({ children: o }) => {
-  const r = c((a) => a.cambiarTema), i = N("(prefers-color-scheme: dark)"), t = c((a) => a.tema), e = x((a) => a.instancia);
-  u(() => {
-    r(i ? "dark" : "light");
-  }, [r, i]);
-  const l = b(() => v({
+})), z = ({ children: n }) => {
+  const i = f((s) => s.cambiarTema), a = F("(prefers-color-scheme: dark)"), o = f((s) => s.tema), e = I((s) => s.instancia);
+  b(() => {
+    i(a ? "dark" : "light");
+  }, [i, a]);
+  const m = E(() => G({
     palette: {
-      mode: t,
+      mode: o,
       primary: {
         main: e.color.primary
       },
@@ -50,111 +51,185 @@ const c = A((o) => ({
       success: {
         main: e.color.success
       },
-      ...t === "light" && {
+      ...o === "light" && {
         background: {
-          default: p.A200,
-          paper: p[100]
+          default: x.A200,
+          paper: x[100]
         }
       }
     },
     shape: {
       borderRadius: 6
     }
-  }), [t, e]);
-  return /* @__PURE__ */ m(k, { theme: l, children: [
-    /* @__PURE__ */ s(M, {}),
-    o
+  }), [o, e]);
+  return /* @__PURE__ */ d(H, { theme: m, children: [
+    /* @__PURE__ */ r(Q, {}),
+    n
   ] });
 };
-g.propTypes = {
-  children: n.element.isRequired
+z.propTypes = {
+  children: t.element.isRequired
 };
-const w = () => {
-  const o = h(), [r, i] = j(!1), t = c((a) => a.ocultarNotificacion), e = c((a) => a.notificaciones[0]);
-  u(() => {
-    i(!!e);
+const ne = () => {
+  const n = C(), [i, a] = v(!1), o = f((s) => s.ocultarNotificacion), e = f((s) => s.notificaciones[0]);
+  b(() => {
+    a(!!e);
   }, [e]);
-  const l = () => {
-    i(!1), t();
+  const m = () => {
+    a(!1), o();
   };
-  return /* @__PURE__ */ s(
-    R,
+  return /* @__PURE__ */ r(
+    $,
     {
-      open: r,
-      message: e ? e.tipo === "default" && o(e == null ? void 0 : e.mensaje) : null,
+      open: i,
+      message: e ? e.tipo === "default" && n(e == null ? void 0 : e.mensaje) : null,
       autoHideDuration: 5e3,
-      onClose: l,
+      onClose: m,
       anchorOrigin: e && {
         vertical: e == null ? void 0 : e.posicion.vertical,
         horizontal: e == null ? void 0 : e.posicion.horizontal
       },
-      children: e && (e == null ? void 0 : e.tipo) !== "default" && /* @__PURE__ */ s(d, { severity: e.tipo, children: o(e.mensaje) })
+      children: e && (e == null ? void 0 : e.tipo) !== "default" && /* @__PURE__ */ r(R, { severity: e.tipo, children: n(e.mensaje) })
     }
   );
-}, D = ({
-  aplicacion: o,
-  dev: r = !1,
-  redirectUri: i,
-  mensajes: t = {
+}, te = ({
+  aplicacion: n,
+  dev: i = !1,
+  redirectUri: a,
+  mensajes: o = {
     en: {},
     es: {}
   },
   children: e
-}) => /* @__PURE__ */ s(
-  T,
+}) => /* @__PURE__ */ r(
+  M,
   {
-    aplicacion: o,
-    dev: r,
-    redirectUri: i,
-    mensajes: t,
-    children: /* @__PURE__ */ s(g, { children: /* @__PURE__ */ m(y, { children: [
+    aplicacion: n,
+    dev: i,
+    redirectUri: a,
+    mensajes: o,
+    children: /* @__PURE__ */ r(z, { children: /* @__PURE__ */ d(D, { children: [
       e,
-      /* @__PURE__ */ s(w, {})
+      /* @__PURE__ */ r(ne, {})
     ] }) })
   }
 );
-D.propTypes = {
-  aplicacion: n.string.isRequired,
-  dev: n.bool,
-  redirectUri: n.string.isRequired,
-  mensajes: n.object,
-  children: n.element.isRequired
+te.propTypes = {
+  aplicacion: t.string.isRequired,
+  dev: t.bool,
+  redirectUri: t.string.isRequired,
+  mensajes: t.object,
+  children: t.element.isRequired
 };
-const Q = () => /* @__PURE__ */ s(f, { sx: {
+const fe = () => /* @__PURE__ */ r(j, { sx: {
   display: "flex",
   flexDirection: "column",
   flexGrow: 1,
   justifyContent: "center",
   alignItems: "center"
-}, children: /* @__PURE__ */ s(S, {}) }), z = ({ titulo: o, texto: r, align: i = "center", severity: t = "error" }) => {
-  const e = h();
-  return /* @__PURE__ */ s(f, { sx: {
+}, children: /* @__PURE__ */ r(J, {}) }), w = ({ titulo: n, texto: i, align: a = "center", severity: o = "error" }) => {
+  const e = C();
+  return /* @__PURE__ */ r(j, { sx: {
     display: "flex",
     flexDirection: "column",
     flexGrow: 1,
     justifyContent: "center",
-    alignItems: i
-  }, children: /* @__PURE__ */ m(d, { severity: t, children: [
-    /* @__PURE__ */ s(q, { children: e(o) }),
-    r && e(r)
+    alignItems: a
+  }, children: /* @__PURE__ */ d(R, { severity: o, children: [
+    /* @__PURE__ */ r(K, { children: e(n) }),
+    i && e(i)
   ] }) });
 };
-z.propTypes = {
-  titulo: n.string.isRequired,
-  texto: n.string,
-  align: n.string,
-  severity: n.string
+w.propTypes = {
+  titulo: t.string.isRequired,
+  texto: t.string,
+  align: t.string,
+  severity: t.string
+};
+const ae = ({
+  nombre: n,
+  elevation: i = 1,
+  api: a,
+  filtros: o,
+  titulo: e,
+  initialPageSize: m = 10,
+  children: s
+}) => {
+  const g = C(), [l, y] = v({
+    page: 0,
+    pageSize: m
+  });
+  b(() => {
+    y((c) => ({
+      ...c,
+      page: 0
+    }));
+  }, [JSON.stringify(o)]);
+  const { isLoading: h, isError: k, data: u } = ie({
+    queryKey: [`paginable-${n}`, l, o],
+    queryFn: () => a(o, l.page, l.pageSize),
+    keepPreviousData: !0
+  });
+  if (h)
+    return /* @__PURE__ */ r(U, { children: Array.from(Array(m).keys()).map((c) => /* @__PURE__ */ r(V, { children: /* @__PURE__ */ r(W, { primary: /* @__PURE__ */ r(X, {}) }) }, `row-${c}`)) });
+  if (k)
+    return /* @__PURE__ */ d(P, { children: [
+      /* @__PURE__ */ r(S, { titulo: g(e) }),
+      /* @__PURE__ */ r(T, { children: /* @__PURE__ */ r(w, { titulo: "error.carga" }) })
+    ] });
+  const q = (c, p) => {
+    h || p === l.page || y({
+      page: p,
+      pageSize: l.pageSize
+    });
+  }, N = (c) => {
+    const p = c.target.value;
+    h || p === l.pageSize || y({
+      page: 0,
+      pageSize: p
+    });
+  };
+  return /* @__PURE__ */ d(P, { elevation: i, children: [
+    e && /* @__PURE__ */ r(S, { titulo: g(e) }),
+    /* @__PURE__ */ r(T, { children: h ? /* @__PURE__ */ r(Y, {}) : u && u.content.length > 0 ? L.map(s, (c) => O(c, {
+      data: u.content
+    })) : /* @__PURE__ */ r(Z, { children: g("main.pageable.noResults") }) }),
+    u && u.totalElements > 0 && /* @__PURE__ */ r(_, { sx: { justifyContent: "flex-end" }, children: /* @__PURE__ */ r(
+      ee,
+      {
+        component: "div",
+        count: u.totalElements,
+        page: l.page,
+        rowsPerPage: l.pageSize,
+        labelRowsPerPage: g("main.pageable.rows"),
+        labelDisplayedRows: ({ from: c, to: p, count: A }) => g("main.pageable.results", { inicial: c, final: p, total: A }),
+        rowsPerPageOptions: [5, 10, 15, 20, 25, 50],
+        onRowsPerPageChange: N,
+        onPageChange: q
+      }
+    ) })
+  ] });
+};
+ae.propTypes = {
+  nombre: t.string.isRequired,
+  elevation: t.number,
+  api: t.func.isRequired,
+  filtros: t.object,
+  titulo: t.string,
+  initialPageSize: t.number,
+  children: t.element
 };
-const U = () => {
-  const o = c((r) => r.mostrarNotificacion);
-  return C((r, i = "default", t = { vertical: "botton", horizontal: "center" }) => {
-    o({ mensaje: r, tipo: i, posicion: t });
-  }, [o]);
+const he = () => {
+  const n = f((i) => i.mostrarNotificacion);
+  return B((i, a = "default", o = { vertical: "botton", horizontal: "center" }) => {
+    n({ mensaje: i, tipo: a, posicion: o });
+  }, [n]);
 };
 export {
-  Q as Cargando,
-  z as Mensaje,
-  D as MuiApp,
-  c as useMuiStore,
-  U as useNotificar
+  fe as Cargando,
+  w as Mensaje,
+  te as MuiApp,
+  ae as Paginable,
+  f as useMuiStore,
+  he as useNotificar
 };

package/dist/mui-saas.umd.cjs

@@ -1 +1 @@
-(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("prop-types"),require("@chimera-pe/react-saas"),require("react"),require("@mui/material"),require("@mui/material/colors"),require("zustand"),require("react-polyglot")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","prop-types","@chimera-pe/react-saas","react","@mui/material","@mui/material/colors","zustand","react-polyglot"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i["mui-saas"]={},i.ReactJSX,i.PropTypes,i.ReactSaas,i.React,i.MuiMaterial,i.MuiMaterialColors,i.Zustand,i.ReactPolyglot))})(this,function(i,t,a,m,d,o,h,q,p){"use strict";const u=q.create(n=>({tema:"light",notificaciones:[],cambiarTema:r=>{n({tema:r})},mostrarNotificacion:r=>{n(s=>({notificaciones:[r,...s.notificaciones]}))},ocultarNotificacion:()=>{n(r=>({notificaciones:r.notificaciones.slice(1)}))}})),g=({children:n})=>{const r=u(l=>l.cambiarTema),s=o.useMediaQuery("(prefers-color-scheme: dark)"),c=u(l=>l.tema),e=m.useSaasStore(l=>l.instancia);d.useEffect(()=>{r(s?"dark":"light")},[r,s]);const f=d.useMemo(()=>o.createTheme({palette:{mode:c,primary:{main:e.color.primary},secondary:{main:e.color.secondary},error:{main:e.color.error},warning:{main:e.color.warning},info:{main:e.color.info},success:{main:e.color.success},...c==="light"&&{background:{default:h.grey.A200,paper:h.grey[100]}}},shape:{borderRadius:6}}),[c,e]);return t.jsxs(o.ThemeProvider,{theme:f,children:[t.jsx(o.CssBaseline,{}),n]})};g.propTypes={children:a.element.isRequired};const j=()=>{const n=p.useTranslate(),[r,s]=d.useState(!1),c=u(l=>l.ocultarNotificacion),e=u(l=>l.notificaciones[0]);d.useEffect(()=>{s(!!e)},[e]);const f=()=>{s(!1),c()};return t.jsx(o.Snackbar,{open:r,message:e?e.tipo==="default"&&n(e==null?void 0:e.mensaje):null,autoHideDuration:5e3,onClose:f,anchorOrigin:e&&{vertical:e==null?void 0:e.posicion.vertical,horizontal:e==null?void 0:e.posicion.horizontal},children:e&&(e==null?void 0:e.tipo)!=="default"&&t.jsx(o.Alert,{severity:e.tipo,children:n(e.mensaje)})})},y=({aplicacion:n,dev:r=!1,redirectUri:s,mensajes:c={en:{},es:{}},children:e})=>t.jsx(m.SaasApp,{aplicacion:n,dev:r,redirectUri:s,mensajes:c,children:t.jsx(g,{children:t.jsxs(t.Fragment,{children:[e,t.jsx(j,{})]})})});y.propTypes={aplicacion:a.string.isRequired,dev:a.bool,redirectUri:a.string.isRequired,mensajes:a.object,children:a.element.isRequired};const x=()=>t.jsx(o.Box,{sx:{display:"flex",flexDirection:"column",flexGrow:1,justifyContent:"center",alignItems:"center"},children:t.jsx(o.CircularProgress,{})}),M=({titulo:n,texto:r,align:s="center",severity:c="error"})=>{const e=p.useTranslate();return t.jsx(o.Box,{sx:{display:"flex",flexDirection:"column",flexGrow:1,justifyContent:"center",alignItems:s},children:t.jsxs(o.Alert,{severity:c,children:[t.jsx(o.AlertTitle,{children:e(n)}),r&&e(r)]})})};M.propTypes={titulo:a.string.isRequired,texto:a.string,align:a.string,severity:a.string};const C=()=>{const n=u(r=>r.mostrarNotificacion);return d.useCallback((r,s="default",c={vertical:"botton",horizontal:"center"})=>{n({mensaje:r,tipo:s,posicion:c})},[n])};i.Cargando=x,i.Mensaje=M,i.MuiApp=y,i.useMuiStore=u,i.useNotificar=C,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+(function(a,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("prop-types"),require("@chimera-pe/react-saas"),require("react"),require("@mui/material"),require("@mui/material/colors"),require("zustand"),require("react-polyglot"),require("@tanstack/react-query")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","prop-types","@chimera-pe/react-saas","react","@mui/material","@mui/material/colors","zustand","react-polyglot","@tanstack/react-query"],r):(a=typeof globalThis<"u"?globalThis:a||self,r(a["mui-saas"]={},a.ReactJSX,a.PropTypes,a.ReactSaas,a.React,a.MuiMaterial,a.MuiMaterialColors,a.Zustand,a.ReactPolyglot,a.ReactQuery))})(this,function(a,r,t,j,u,n,M,k,q,w){"use strict";const p=k.create(s=>({tema:"light",notificaciones:[],cambiarTema:i=>{s({tema:i})},mostrarNotificacion:i=>{s(o=>({notificaciones:[i,...o.notificaciones]}))},ocultarNotificacion:()=>{s(i=>({notificaciones:i.notificaciones.slice(1)}))}})),v=({children:s})=>{const i=p(l=>l.cambiarTema),o=n.useMediaQuery("(prefers-color-scheme: dark)"),c=p(l=>l.tema),e=j.useSaasStore(l=>l.instancia);u.useEffect(()=>{i(o?"dark":"light")},[i,o]);const h=u.useMemo(()=>n.createTheme({palette:{mode:c,primary:{main:e.color.primary},secondary:{main:e.color.secondary},error:{main:e.color.error},warning:{main:e.color.warning},info:{main:e.color.info},success:{main:e.color.success},...c==="light"&&{background:{default:M.grey.A200,paper:M.grey[100]}}},shape:{borderRadius:6}}),[c,e]);return r.jsxs(n.ThemeProvider,{theme:h,children:[r.jsx(n.CssBaseline,{}),s]})};v.propTypes={children:t.element.isRequired};const A=()=>{const s=q.useTranslate(),[i,o]=u.useState(!1),c=p(l=>l.ocultarNotificacion),e=p(l=>l.notificaciones[0]);u.useEffect(()=>{o(!!e)},[e]);const h=()=>{o(!1),c()};return r.jsx(n.Snackbar,{open:i,message:e?e.tipo==="default"&&s(e==null?void 0:e.mensaje):null,autoHideDuration:5e3,onClose:h,anchorOrigin:e&&{vertical:e==null?void 0:e.posicion.vertical,horizontal:e==null?void 0:e.posicion.horizontal},children:e&&(e==null?void 0:e.tipo)!=="default"&&r.jsx(n.Alert,{severity:e.tipo,children:s(e.mensaje)})})},z=({aplicacion:s,dev:i=!1,redirectUri:o,mensajes:c={en:{},es:{}},children:e})=>r.jsx(j.SaasApp,{aplicacion:s,dev:i,redirectUri:o,mensajes:c,children:r.jsx(v,{children:r.jsxs(r.Fragment,{children:[e,r.jsx(A,{})]})})});z.propTypes={aplicacion:t.string.isRequired,dev:t.bool,redirectUri:t.string.isRequired,mensajes:t.object,children:t.element.isRequired};const N=()=>r.jsx(n.Box,{sx:{display:"flex",flexDirection:"column",flexGrow:1,justifyContent:"center",alignItems:"center"},children:r.jsx(n.CircularProgress,{})}),m=({titulo:s,texto:i,align:o="center",severity:c="error"})=>{const e=q.useTranslate();return r.jsx(n.Box,{sx:{display:"flex",flexDirection:"column",flexGrow:1,justifyContent:"center",alignItems:o},children:r.jsxs(n.Alert,{severity:c,children:[r.jsx(n.AlertTitle,{children:e(s)}),i&&e(i)]})})};m.propTypes={titulo:t.string.isRequired,texto:t.string,align:t.string,severity:t.string};const x=({nombre:s,elevation:i=1,api:o,filtros:c,titulo:e,initialPageSize:h=10,children:l})=>{const C=q.useTranslate(),[g,b]=u.useState({page:0,pageSize:h});u.useEffect(()=>{b(d=>({...d,page:0}))},[JSON.stringify(c)]);const{isLoading:S,isError:D,data:y}=w.useQuery({queryKey:[`paginable-${s}`,g,c],queryFn:()=>o(c,g.page,g.pageSize),keepPreviousData:!0});if(S)return r.jsx(n.List,{children:Array.from(Array(h).keys()).map(d=>r.jsx(n.ListItem,{children:r.jsx(n.ListItemText,{primary:r.jsx(n.Skeleton,{})})},`row-${d}`))});if(D)return r.jsxs(n.Card,{children:[r.jsx(n.CardHeader,{titulo:C(e)}),r.jsx(n.CardContent,{children:r.jsx(m,{titulo:"error.carga"})})]});const I=(d,f)=>{S||f===g.page||b({page:f,pageSize:g.pageSize})},L=d=>{const f=d.target.value;S||f===g.pageSize||b({page:0,pageSize:f})};return r.jsxs(n.Card,{elevation:i,children:[e&&r.jsx(n.CardHeader,{titulo:C(e)}),r.jsx(n.CardContent,{children:S?r.jsx(n.LinearProgress,{}):y&&y.content.length>0?u.Children.map(l,d=>u.cloneElement(d,{data:y.content})):r.jsx(n.Typography,{children:C("main.pageable.noResults")})}),y&&y.totalElements>0&&r.jsx(n.CardActions,{sx:{justifyContent:"flex-end"},children:r.jsx(n.TablePagination,{component:"div",count:y.totalElements,page:g.page,rowsPerPage:g.pageSize,labelRowsPerPage:C("main.pageable.rows"),labelDisplayedRows:({from:d,to:f,count:O})=>C("main.pageable.results",{inicial:d,final:f,total:O}),rowsPerPageOptions:[5,10,15,20,25,50],onRowsPerPageChange:L,onPageChange:I})})]})};x.propTypes={nombre:t.string.isRequired,elevation:t.number,api:t.func.isRequired,filtros:t.object,titulo:t.string,initialPageSize:t.number,children:t.element};const E=()=>{const s=p(i=>i.mostrarNotificacion);return u.useCallback((i,o="default",c={vertical:"botton",horizontal:"center"})=>{s({mensaje:i,tipo:o,posicion:c})},[s])};a.Cargando=N,a.Mensaje=m,a.MuiApp=z,a.Paginable=x,a.useMuiStore=p,a.useNotificar=E,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@chimera-pe/mui-saas",
 	"description": "Librería con componentes comunes para MUI, usando SaaS",
-	"version": "3.0.2",
+	"version": "3.0.4",
 	"type": "module",
 	"repository": {
 		"type": "git",