@m4l/layouts 9.1.8 → 9.1.10-beta.1

package/components/MFHostApp/MFHostApp.d.ts

@@ -0,0 +1,6 @@
+import { MFHostAppProps } from './types';
+/**
+ * Componente que envuelve la aplicación de un microfrontend
+ */
+export declare function MFHostApp(props: MFHostAppProps): import("react/jsx-runtime").JSX.Element;
+export default MFHostApp;

package/components/MFHostApp/MFHostApp.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { unstable_HistoryRouter } from "react-router-dom";
+import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
+import { DeviceTypeProvider, LocalesProvider, HostThemeProvider, FormatterProvider } from "@m4l/graphics";
+import { BaseModule, WindowToolsMFProvider, DynamicMFParmsProvider, AppearanceComponentProvider } from "@m4l/components";
+import { M as MFWindowsTitle } from "../MFWindowsTitle/MFWindowsTitle.js";
+function MFHostApp(props) {
+  const {
+    children,
+    currentLocale,
+    hostTheme,
+    environment,
+    hostTools,
+    axiosOperation,
+    formatters,
+    isAuth = true,
+    moduleId,
+    moduleNameField,
+    skeletonFlags,
+    privileges,
+    componentsDictionary,
+    dynamicMFStore,
+    windowTools,
+    isAddEditModule = false
+  } = props;
+  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: currentLocale, children: /* @__PURE__ */ jsx(
+    HostThemeProvider,
+    {
+      isMicroFrontEnd: true,
+      ...hostTheme,
+      children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history: hostTools.history, children: /* @__PURE__ */ jsx(
+        DomainCountryProvider,
+        {
+          isMicroFrontEnd: true,
+          id: dynamicMFStore?.getState().dynamicMFParameters?.id || 1,
+          currency: formatters.currencyFormatter.code,
+          currency_decimal_digits: formatters.currencyFormatter.decimalDigits,
+          decimal_symbol: formatters.numberFormatter.decimalSymbol,
+          thousands_symbol: formatters.numberFormatter.thousandsSymbol,
+          children: /* @__PURE__ */ jsx(
+            BaseModule,
+            {
+              isAuth,
+              moduleId,
+              moduleNameField,
+              componentsDictionary,
+              skeletonFlags,
+              privileges,
+              children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(MFWindowsTitle, { isAddEditModule, children: /* @__PURE__ */ jsx(AppearanceComponentProvider, { children }) }) }) }) })
+            }
+          )
+        }
+      ) })
+    }
+  ) }) }) }) }) });
+}
+export {
+  MFHostApp as M
+};

package/components/MFHostApp/index.d.ts

@@ -1,10 +1,2 @@
-import { MFHostAppProps } from './types';
-/**
- * Componente que envuelve la aplicación de un microfrontend
- * @author Juan Escobar - automatic
- * @createdAt 2024-10-09 19:56:26 - automatic
- * @updatedAt 2024-10-09 20:00:30 - automatic
- * @updatedUser Juan Escobar - automatic
- */
-export declare function MFHostApp(props: MFHostAppProps): import("react/jsx-runtime").JSX.Element;
-export default MFHostApp;
+export { MFHostApp } from './MFHostApp';
+export type { ByHostProps } from './types';

package/components/MFHostApp/index.js

@@ -1,60 +1 @@
-import { jsx } from "react/jsx-runtime";
-import { unstable_HistoryRouter } from "react-router-dom";
-import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
-import { DeviceTypeProvider, LocalesProvider, HostThemeProvider, ResponsiveContainerProvider, FormatterProvider } from "@m4l/graphics";
-import { BaseModule, WindowToolsMFProvider, DynamicMFParmsProvider, AppearanceComponentProvider } from "@m4l/components";
-import { M as MFWindowsTitle } from "../MFWindowsTitle/MFWindowsTitle.js";
-function MFHostApp(props) {
-  const {
-    children,
-    currentLocale,
-    hostTheme,
-    environment,
-    hostTools,
-    axiosOperation,
-    formatters,
-    isAuth = true,
-    moduleId,
-    moduleNameField,
-    skeletonFlags,
-    privileges,
-    componentsDictionary,
-    dynamicMFStore,
-    windowTools,
-    observedDivRef,
-    isAddEditModule = false
-  } = props;
-  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: currentLocale, children: /* @__PURE__ */ jsx(
-    HostThemeProvider,
-    {
-      isMicroFrontEnd: true,
-      ...hostTheme,
-      children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, { observedDivRef, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history: hostTools.history, children: /* @__PURE__ */ jsx(
-        DomainCountryProvider,
-        {
-          isMicroFrontEnd: true,
-          id: dynamicMFStore?.getState().dynamicMFParameters?.id || 1,
-          currency: formatters.currencyFormatter.code,
-          currency_decimal_digits: formatters.currencyFormatter.decimalDigits,
-          decimal_symbol: formatters.numberFormatter.decimalSymbol,
-          thousands_symbol: formatters.numberFormatter.thousandsSymbol,
-          children: /* @__PURE__ */ jsx(
-            BaseModule,
-            {
-              isAuth,
-              moduleId,
-              moduleNameField,
-              componentsDictionary,
-              skeletonFlags,
-              privileges,
-              children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(MFWindowsTitle, { isAddEditModule, children: /* @__PURE__ */ jsx(AppearanceComponentProvider, { children }) }) }) }) })
-            }
-          )
-        }
-      ) }) })
-    }
-  ) }) }) }) }) });
-}
-export {
-  MFHostApp as M
-};
+

package/components/MFHostApp/types.d.ts

@@ -10,7 +10,10 @@ export interface ByHostProps {
     formatters: Formatters;
     dynamicMFStore: DynamicMFStore;
     windowTools: WindowToolsMF;
-    observedDivRef: Element | Text | null;
+    /**
+     * @deprecated no usar, no tiene efecto. esto se usaba para detectar la resposividad de los breakpoints
+     */
+    observedDivRef?: Element | Text | null;
     /**
      * isAddEditModule saber si el módulo es tipo add/edit, para poder asignar el title automáticamente
      * cuando se cambia el idioma, desde MFHostApp/MFWindowsTitle

package/components/MFNoAuthApp/index.d.ts

@@ -1,10 +1,6 @@
 import { MFNoAuthAppProps } from './types';
 /**
  * Componente que envuelve la aplicación de un microfrontend sin autenticación
- * @author Juan Escobar - automatic
- * @createdAt 2024-10-09 19:56:26 - automatic
- * @updatedAt 2024-10-17 15:37:19 - automatic
- * @updatedUser Juan Escobar - automatic
  */
 export declare function MFNoAuthApp(props: MFNoAuthAppProps): import("react/jsx-runtime").JSX.Element;
 export default MFNoAuthApp;

package/components/MFNoAuthApp/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { DomainCountryProvider } from "@m4l/core";
-import { DeviceTypeProvider, FormatterProvider, ResponsiveContainerProvider } from "@m4l/graphics";
+import { DeviceTypeProvider, FormatterProvider } from "@m4l/graphics";
 import { BaseModule } from "@m4l/components";
 function MFNoAuthApp(props) {
   const {
@@ -11,8 +11,7 @@ function MFNoAuthApp(props) {
     skeletonFlags,
     privileges,
     componentsDictionary,
-    isAuth,
-    observedDivRef
+    isAuth
   } = props;
   const domianCountry = {
     id: 1,
@@ -30,7 +29,7 @@ function MFNoAuthApp(props) {
       componentsDictionary,
       skeletonFlags,
       privileges,
-      children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, { observedDivRef, children }) })
+      children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children })
     }
   ) }) });
 }

package/components/MFNoAuthApp/types.d.ts

@@ -5,5 +5,8 @@ export interface ByHostProps {
     windowTools: WindowToolsMF;
 }
 export interface MFNoAuthAppProps extends ByHostProps, BaseModuleProps {
-    observedDivRef: Element | Text | null;
+    /**
+     * @deprecated no usar, no tiene efecto. esto se usaba para detectar la resposividad de los breakpoints
+     */
+    observedDivRef?: Element | Text | null;
 }

package/components/MFWindowsTitle/MFWindowsTitle.d.ts

@@ -1,9 +1,5 @@
 import { MFWindowsTitleProps } from './types';
 /**
  * Titulo de la ventana del microfrontend
- * @author Juan Escobar - automatic
- * @createdAt 2024-10-09 19:56:26 - automatic
- * @updatedAt 2024-10-09 20:00:30 - automatic
- * @updatedUser Juan Escobar - automatic
  */
 export declare function MFWindowsTitle({ isAddEditModule, children }: MFWindowsTitleProps): import("react/jsx-runtime").JSX.Element;

package/components/ModuleDetailTabs/ModuleDetailTabs.d.ts

@@ -0,0 +1,5 @@
+import { ModuleDetailTabsProps } from './types';
+/**
+ * Componente para mostrar un listado de tabs y contenido en un MasterDetail, basado en las props
+ */
+export declare function ModuleDetailTabs(props: ModuleDetailTabsProps): import("react/jsx-runtime").JSX.Element;

package/components/ModuleDetailTabs/ModuleDetailTabs.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NoItemSelected, ModalProvider, Stack, Tabs, Tab, TabContent } from "@m4l/components";
+import { u as useModuleDetailTabs } from "./useModuleDatailTabs.js";
+function ModuleDetailTabs(props) {
+  const { conditionNoMasterSelection, currentTab, detailData, finalTabs, handleChangeTab, hasPrivilegeDetail, endPointData } = useModuleDetailTabs(props);
+  if (conditionNoMasterSelection) {
+    return /* @__PURE__ */ jsx(NoItemSelected, {});
+  }
+  if (!hasPrivilegeDetail) {
+    return /* @__PURE__ */ jsx("div", { children: "No tiene privilegio para ver el detalle" });
+  }
+  return /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        value: currentTab,
+        scrollButtons: "auto",
+        variant: "scrollable",
+        allowScrollButtonsMobile: true,
+        onChange: (_e, value) => handleChangeTab(value),
+        children: finalTabs.map((tab) => {
+          const { value, label } = tab;
+          return /* @__PURE__ */ jsx(Tab, { value, label }, value);
+        })
+      }
+    ),
+    finalTabs.map((tab) => {
+      const isMatched = tab.value === currentTab;
+      return (isMatched || !tab.unmountable) && /* @__PURE__ */ jsx(
+        TabContent,
+        {
+          style: { display: isMatched ? "flex" : "none" },
+          children: /* @__PURE__ */ jsx(tab.tabContent, { data: detailData, endPointData, hasPrivilegeDetail, ...tab.componentProps })
+        },
+        tab.value
+      );
+    })
+  ] }) });
+}
+export {
+  ModuleDetailTabs as M
+};

package/components/ModuleDetailTabs/index.d.ts

@@ -0,0 +1,2 @@
+export { ModuleDetailTabs } from './ModuleDetailTabs';
+export type { ModuleDatailTab, ModuleDetailObjectLogs, ModuleDetailTabContent, ModuleDetailTabsProps } from './types';

package/components/ModuleDetailTabs/index.js

@@ -0,0 +1 @@
+

package/components/ModuleDetailTabs/types.d.ts

@@ -0,0 +1,88 @@
+import { default as React } from 'react';
+import { TabProps } from '@m4l/components';
+import { NetworkProps } from '@m4l/core';
+/**
+ * Props obligatorias que deben tener todos los componentes de tab
+ * Estas props serán inyectadas automáticamente por ModuleDetailTabs
+ */
+export interface ModuleDetailTabContent<T extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>> {
+    /**
+     * data - Contiene los datos del registro seleccionado en el master
+     * Esta prop es OBLIGATORIA para todos los componentes de tab
+     */
+    data: T;
+    /**
+     * endPointData - Contiene los datos del endpoint de detalle, en caso de haberse configurado.
+     */
+    endPointData?: K;
+    /**
+     * hasPrivilegeDetail - Indica si el usuario tiene privilegio para ver el detalle.
+     */
+    hasPrivilegeDetail?: boolean;
+}
+interface ModuleDetailBaseTab extends Omit<TabProps, 'label'> {
+    /**
+     * "dictionaryId" Id del diccionario para el label.
+     */
+    dictionaryId?: string;
+    /**
+     * "unmountable" Indica si el tab se desmonta cuando el tab no está seleccionado, default: true
+     */
+    unmountable?: boolean;
+}
+type ComponentWithData<T extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>, C extends React.ElementType = React.ElementType> = React.FunctionComponent<ModuleDetailTabContent<T, K> & React.ComponentProps<C>>;
+export interface ModuleDatailTab<T extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>, C extends React.ElementType = React.ElementType> extends ModuleDetailBaseTab {
+    /**
+     * "value" Valor o key del tab
+     */
+    value: string;
+    /**
+     * "tabContent" Contenido del tab, debe ser un componente que acepte como mínimo
+     * la prop "data" (DetailComponentProps) que será inyectada automáticamente
+     */
+    tabContent: ComponentWithData<T, K>; /**Elemento no instanciado de react, solamente la funcion */
+    /**
+     * "componentProps" Propiedades adicionales del componente del tab.
+     * IMPORTANTE: No se puede sobrescribir la prop "data" aquí, ya que será inyectada
+     * automáticamente por ModuleDetailTabs
+     */
+    componentProps?: Omit<React.ComponentProps<C>, keyof ModuleDetailTabContent<T, K>>;
+}
+/**
+ * Interfaz para las props del tab de logs
+ */
+export interface ModuleDetailObjectLogs extends ModuleDetailBaseTab {
+    /**
+     * "resourceId" Id del recurso para el logs.
+     */
+    resourceId: string | number;
+    /**
+     * "getObjectId" Función para obtener el id del objeto.
+     */
+    getObjectId: (detailData: Record<string, any>) => number;
+}
+export interface ModuleDetailTabsProps<T extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>> {
+    /**
+     * "defaultTab" Valor o key del tab por defecto, default: el primer tab
+     */
+    defaultTab: string;
+    /**
+     * "urlAssetsPrefix" Prefijo de la url para la ruta de los iconos, en algunos casos es:
+     *   - host_api_remote
+     *   - host_static_asset/environment_assets
+     */
+    urlAssetsPrefix: string;
+    /**
+     * "tabs" Lista de tabs con los siguientes campos:
+     */
+    tabs: ModuleDatailTab<T, K>[];
+    /**
+     * ObjectLogs props
+     */
+    objectLogsProps?: ModuleDetailObjectLogs;
+    /**
+     * "endPoint" Endpoint para obtener los datos del detalle., en caso de que se requiera.
+     */
+    getEndPoint?: (masterSelection: T) => NetworkProps;
+}
+export {};