@m4l/components 9.1.103 → 9.1.105
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/@types/types.d.ts +10 -0
- package/components/CommonActions/components/ActionFormIntro/ActionFormIntro.d.ts +9 -0
- package/components/CommonActions/components/ActionFormIntro/ActionFormIntro.js +34 -0
- package/components/CommonActions/components/ActionFormIntro/ActionFromIntro.styles.d.ts +2 -0
- package/components/CommonActions/components/ActionFormIntro/ActionFromIntro.styles.js +7 -0
- package/components/CommonActions/components/ActionFormIntro/constanst.d.ts +6 -0
- package/components/CommonActions/components/ActionFormIntro/constanst.js +7 -0
- package/components/CommonActions/components/ActionFormIntro/slots/ActionFormIntroEnum.d.ts +3 -0
- package/components/CommonActions/components/ActionFormIntro/slots/ActionFormIntroEnum.js +7 -0
- package/components/CommonActions/components/ActionFormIntro/slots/ActionFormIntroSlots.d.ts +3 -0
- package/components/CommonActions/components/ActionFormIntro/slots/ActionFormIntroSlots.js +12 -0
- package/components/CommonActions/components/ActionFormIntro/slots/index.d.ts +2 -0
- package/components/CommonActions/components/ActionFormIntro/slots/index.js +1 -0
- package/components/CommonActions/components/ActionFormIntro/test/ActionFormIntro.test.d.ts +1 -0
- package/components/CommonActions/components/ActionFormIntro/types.d.ts +14 -0
- package/components/CommonActions/dictionary.d.ts +3 -0
- package/components/CommonActions/dictionary.js +4 -0
- package/components/CommonActions/index.d.ts +1 -1
- package/components/MenuActions/types.d.ts +2 -2
- package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyActions/index.js +1 -1
- package/components/mui_extended/Autocomplete/renderOptions/index.d.ts +4 -0
- package/components/mui_extended/Autocomplete/renderOptions/index.js +1 -1
- package/components/mui_extended/MenuItem/MenuItem.d.ts +4 -0
- package/components/mui_extended/MenuItem/MenuItem.js +2 -10
- package/components/mui_extended/MenuItem/MenuItem.styles.js +77 -94
- package/components/mui_extended/MenuItem/types.d.ts +4 -8
- package/index.js +7 -6
- package/package.json +1 -1
- package/components/CommonActions/components/ActionFormIntro/index.d.ts +0 -5
- package/components/CommonActions/components/ActionFormIntro/index.js +0 -30
package/@types/types.d.ts
CHANGED
|
@@ -133,6 +133,9 @@ import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-
|
|
|
133
133
|
import { AreasAdminOwnerState, AreasAdminType } from '../components/areas/components/AreasAdmin/types';
|
|
134
134
|
import { DateTimePickerOwnerState, DateTimePickerSlotsType } from '../components/mui_extended/DateTimePicker/types';
|
|
135
135
|
import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/Divider/types';
|
|
136
|
+
import { ActionFormIntroOwnerState, ActionFormIntroSlotsType } from '../components/CommonActions/components/ActionFormIntro/types';
|
|
137
|
+
|
|
138
|
+
|
|
136
139
|
declare module '@mui/material/styles' {
|
|
137
140
|
// Define the slots in the theme
|
|
138
141
|
interface ComponentNameToClassKey {
|
|
@@ -197,6 +200,7 @@ declare module '@mui/material/styles' {
|
|
|
197
200
|
M4LStack: StackSlotsType;
|
|
198
201
|
M4LDateTimePicker: DateTimePickerSlotsType;
|
|
199
202
|
M4LDivider: DividerSlotsType;
|
|
203
|
+
M4LActionFormIntro: ActionFormIntroSlotsType;
|
|
200
204
|
}
|
|
201
205
|
interface ComponentsPropsList {
|
|
202
206
|
// Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
|
|
@@ -261,6 +265,7 @@ declare module '@mui/material/styles' {
|
|
|
261
265
|
M4LStack: Partial<StackOwnerState>;
|
|
262
266
|
M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
|
|
263
267
|
M4LDivider: Partial<DividerOwnerState>;
|
|
268
|
+
M4LActionFormIntro : Partial<ActionFormIntroOwnerState>;
|
|
264
269
|
}
|
|
265
270
|
interface Components {
|
|
266
271
|
M4LDynamicFilter?: {
|
|
@@ -562,6 +567,11 @@ declare module '@mui/material/styles' {
|
|
|
562
567
|
styleOverrides?: ComponentsOverrides<Theme>['M4LDateTimePicker'];
|
|
563
568
|
variants?: ComponentsVariants['M4LDateTimePicker'];
|
|
564
569
|
};
|
|
570
|
+
M4LActionFormIntro?: {
|
|
571
|
+
defaultProps?: ComponentsPropsList['M4LActionFormIntro '];
|
|
572
|
+
styleOverrides?: ComponentsOverrides<Theme>['M4LActionFormIntro '];
|
|
573
|
+
variants?: ComponentsVariants['M4LActionFormIntro '];
|
|
574
|
+
};
|
|
565
575
|
M4LDivider?: {
|
|
566
576
|
defaultProps?: ComponentsPropsList['M4LDivider'];
|
|
567
577
|
styleOverrides?: ComponentsOverrides<Theme>['M4LDivider'];
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ActionsFormIntroProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Este componente es útil en formularios donde se necesita un botón de envío con
|
|
4
|
+
* funcionalidad de carga y soporte para internacionalización.
|
|
5
|
+
* @createdAt 2024-12-31 11:23:50 - automatic
|
|
6
|
+
* @updatedAt 2025-01-03 11:42:14 - automatic
|
|
7
|
+
* @updatedUser Andrés Quintero - automatic
|
|
8
|
+
*/
|
|
9
|
+
export declare function ActionFormIntro(props: ActionsFormIntroProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useFormContext, useFormState } from "react-hook-form";
|
|
3
|
+
import { useModuleDictionary } from "@m4l/core";
|
|
4
|
+
import { c as classActoinFormIntroRoot } from "./constanst.js";
|
|
5
|
+
import { clsx } from "clsx";
|
|
6
|
+
import { D as DICTIONARY } from "../../dictionary.js";
|
|
7
|
+
import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
|
|
8
|
+
import { L as LoadingButtonActionFormIntroRootStyled } from "./slots/ActionFormIntroSlots.js";
|
|
9
|
+
function ActionFormIntro(props) {
|
|
10
|
+
const { variant = "contained", color = "primary", className, label, size = "medium", ...others } = props;
|
|
11
|
+
const { getLabel } = useModuleDictionary();
|
|
12
|
+
const finalLabel = label || getLabel(DICTIONARY.LABEL_INTRO);
|
|
13
|
+
const { control } = useFormContext();
|
|
14
|
+
const { isSubmitting } = useFormState({ control });
|
|
15
|
+
const { currentSize } = useComponentSize(size);
|
|
16
|
+
const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
|
|
17
|
+
return /* @__PURE__ */ jsx(
|
|
18
|
+
LoadingButtonActionFormIntroRootStyled,
|
|
19
|
+
{
|
|
20
|
+
ownerState: {},
|
|
21
|
+
variant,
|
|
22
|
+
type: "submit",
|
|
23
|
+
color,
|
|
24
|
+
loading: isSubmitting,
|
|
25
|
+
size: adjustedSize,
|
|
26
|
+
className: clsx(classActoinFormIntroRoot, className),
|
|
27
|
+
label: finalLabel,
|
|
28
|
+
...others
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
export {
|
|
33
|
+
ActionFormIntro as A
|
|
34
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const ACTION_FORM_INTRO_KEY_COMPONENT = "M4LActionFormIntro";
|
|
2
|
+
/**
|
|
3
|
+
* Nombre de clase creado para aportar especificidad a los estilos del componente. Es usado para sobreescribir los estilos de MUI sin
|
|
4
|
+
* tener la necesidad de agregar valores en !important.
|
|
5
|
+
*/
|
|
6
|
+
export declare const classActoinFormIntroRoot: string;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
|
|
2
|
+
const ACTION_FORM_INTRO_KEY_COMPONENT = "M4LActionFormIntro";
|
|
3
|
+
const classActoinFormIntroRoot = getComponentSlotRoot(ACTION_FORM_INTRO_KEY_COMPONENT);
|
|
4
|
+
export {
|
|
5
|
+
ACTION_FORM_INTRO_KEY_COMPONENT as A,
|
|
6
|
+
classActoinFormIntroRoot as c
|
|
7
|
+
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const LoadingButtonActionFormIntroRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../mui_extended/LoadingButton/types').LoadingButtonProps, keyof import('../../../../mui_extended/LoadingButton/types').LoadingButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').ActionFormIntroOwnerState> & Record<string, unknown> & {
|
|
2
|
+
ownerState: Partial<import('../types').ActionFormIntroOwnerState> & Record<string, unknown>;
|
|
3
|
+
}, {}, {}>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { styled } from "@mui/material";
|
|
2
|
+
import { L as LoadingButton } from "../../../../mui_extended/LoadingButton/LoadingButton.js";
|
|
3
|
+
import { A as ACTION_FORM_INTRO_KEY_COMPONENT } from "../constanst.js";
|
|
4
|
+
import { A as ActionFormIntroSlots } from "./ActionFormIntroEnum.js";
|
|
5
|
+
import { a as actionFormIntroStyles } from "../ActionFromIntro.styles.js";
|
|
6
|
+
const LoadingButtonActionFormIntroRootStyled = styled(LoadingButton, {
|
|
7
|
+
name: ACTION_FORM_INTRO_KEY_COMPONENT,
|
|
8
|
+
slot: ActionFormIntroSlots.root
|
|
9
|
+
})(actionFormIntroStyles?.root);
|
|
10
|
+
export {
|
|
11
|
+
LoadingButtonActionFormIntroRootStyled as L
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,4 +1,18 @@
|
|
|
1
|
+
import { Sizes } from '@m4l/styles';
|
|
2
|
+
import { Theme } from '@mui/material';
|
|
3
|
+
import { OverridesStyleRules } from '@mui/material/styles/overrides';
|
|
1
4
|
import { LoadingButtonProps } from '../../../mui_extended/LoadingButton/types';
|
|
5
|
+
import { ACTION_FORM_INTRO_KEY_COMPONENT } from './constanst';
|
|
6
|
+
import { ActionFormIntroSlots } from './slots/ActionFormIntroEnum';
|
|
2
7
|
export interface ActionsFormIntroProps extends Omit<LoadingButtonProps, 'label'> {
|
|
3
8
|
label?: string;
|
|
9
|
+
size?: Extract<Sizes, 'small' | 'medium'>;
|
|
10
|
+
className?: string;
|
|
11
|
+
skeletonWidth?: string;
|
|
12
|
+
dictionaryId?: string;
|
|
4
13
|
}
|
|
14
|
+
export type OwnerState = Pick<LoadingButtonProps, 'size'>;
|
|
15
|
+
export interface ActionFormIntroOwnerState extends LoadingButtonProps, OwnerState {
|
|
16
|
+
}
|
|
17
|
+
export type ActionFormIntroType = keyof typeof ActionFormIntroSlots;
|
|
18
|
+
export type ActionFormIntroStyles = OverridesStyleRules<ActionFormIntroSlots, typeof ACTION_FORM_INTRO_KEY_COMPONENT, Theme>;
|
|
@@ -9,7 +9,11 @@ const defaultCommonActionsDictionary = {
|
|
|
9
9
|
confirm_quit_msg: "Are your sure exit?"
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
+
const DICTIONARY = {
|
|
13
|
+
LABEL_INTRO: "common_actions.intro"
|
|
14
|
+
};
|
|
12
15
|
export {
|
|
16
|
+
DICTIONARY as D,
|
|
13
17
|
defaultCommonActionsDictionary as d,
|
|
14
18
|
getCommonActionsDictionary as g
|
|
15
19
|
};
|
|
@@ -2,6 +2,6 @@ export { ActionsContainer } from './components/ActionsContainer/ActionsContainer
|
|
|
2
2
|
export { ActionCancel } from './components/ActionCancel';
|
|
3
3
|
export { ActionIntro } from './components/ActionIntro';
|
|
4
4
|
export { ActionFormCancel } from './components/ActionFormCancel';
|
|
5
|
-
export { ActionFormIntro } from './components/ActionFormIntro';
|
|
5
|
+
export { ActionFormIntro } from './components/ActionFormIntro/ActionFormIntro';
|
|
6
6
|
export { getCommonActionsDictionary } from './dictionary';
|
|
7
7
|
export * from './dictionary';
|
|
@@ -20,7 +20,7 @@ export type MenuTypes = 'menuItem' | 'divider' | 'loader' | 'customNode';
|
|
|
20
20
|
interface BaseMenuAction {
|
|
21
21
|
type: MenuTypes;
|
|
22
22
|
}
|
|
23
|
-
interface MenuItemAction extends BaseMenuAction, Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | '
|
|
23
|
+
interface MenuItemAction extends BaseMenuAction, Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked'> {
|
|
24
24
|
type: 'menuItem';
|
|
25
25
|
onClick?: (arg?: any) => void;
|
|
26
26
|
customNode?: never;
|
|
@@ -52,7 +52,7 @@ interface CustomNodeAction extends BaseMenuAction {
|
|
|
52
52
|
* [onClick] - Función opcional a ejecutar al hacer clic en la acción del menú.
|
|
53
53
|
* [error] - Indicador de error en la acción del menú.
|
|
54
54
|
*/
|
|
55
|
-
export type MenuAction = (MenuItemAction & Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | '
|
|
55
|
+
export type MenuAction = (MenuItemAction & Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked'> & {
|
|
56
56
|
onClick?: (arg?: any) => void;
|
|
57
57
|
error?: boolean;
|
|
58
58
|
}) | DividerAction | LoaderAction | CustomNodeAction;
|
|
@@ -7,7 +7,7 @@ import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../dictionary.js";
|
|
|
7
7
|
import { u as usePopupsStore } from "../../../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore/index.js";
|
|
8
8
|
import { u as useMapGpsToolsStore } from "../../../../../../hooks/useMapGpsToolsStore/index.js";
|
|
9
9
|
import { R as RHFHelperError } from "../../../../../../../../../hook-form/RHFHelperError/index.js";
|
|
10
|
-
import { A as ActionFormIntro } from "../../../../../../../../../CommonActions/components/ActionFormIntro/
|
|
10
|
+
import { A as ActionFormIntro } from "../../../../../../../../../CommonActions/components/ActionFormIntro/ActionFormIntro.js";
|
|
11
11
|
import { W as WindowConfirm } from "../../../../../../../../../WindowConfirm/WindowConfirm.js";
|
|
12
12
|
import { A as ActionsContainer } from "../../../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
|
|
13
13
|
import { B as Button } from "../../../../../../../../../mui_extended/Button/Button.js";
|
|
@@ -4,6 +4,10 @@ import { Sizes } from '@m4l/styles';
|
|
|
4
4
|
* Higher-order function to generate a render option function for Autocomplete.
|
|
5
5
|
* It supports rendering options with `startAd` and `endIcon`.
|
|
6
6
|
* @param color - The color for the MenuItem.
|
|
7
|
+
* @author SebastianM - automatic
|
|
8
|
+
* @createdAt 2024-11-28 18:58:00 - automatic
|
|
9
|
+
* @updatedAt 2025-02-10 10:25:46 - automatic
|
|
10
|
+
* @updatedUser cesar - automatic
|
|
7
11
|
*/
|
|
8
12
|
export declare function renderOption<T>(optionProps: HTMLAttributes<HTMLLIElement>, option: T & {
|
|
9
13
|
label: string;
|
|
@@ -5,5 +5,9 @@ import { MenuItemProps } from './types';
|
|
|
5
5
|
* If the module is in skeleton mode, it renders a skeleton menu item instead.
|
|
6
6
|
* @param props
|
|
7
7
|
* @returns
|
|
8
|
+
* @author Bruce Escobar - automatic
|
|
9
|
+
* @createdAt 2024-10-22 19:53:39 - automatic
|
|
10
|
+
* @updatedAt 2025-02-10 10:22:38 - automatic
|
|
11
|
+
* @updatedUser cesar - automatic
|
|
8
12
|
*/
|
|
9
13
|
export declare const MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useModuleSkeleton, useEnvironment
|
|
3
|
-
import { useTheme } from "@mui/material";
|
|
2
|
+
import { useModuleSkeleton, useEnvironment } from "@m4l/core";
|
|
4
3
|
import clsx from "clsx";
|
|
5
4
|
import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
|
|
6
5
|
import { M as MENUITEM_CLASSES } from "./constants.js";
|
|
@@ -14,7 +13,7 @@ const MenuItem = (props) => {
|
|
|
14
13
|
value,
|
|
15
14
|
skeletonWidth = "100%",
|
|
16
15
|
selected = false,
|
|
17
|
-
color = "
|
|
16
|
+
color = "default",
|
|
18
17
|
disabled = false,
|
|
19
18
|
size = "medium",
|
|
20
19
|
checked = false,
|
|
@@ -24,19 +23,12 @@ const MenuItem = (props) => {
|
|
|
24
23
|
} = props;
|
|
25
24
|
const { currentSize } = useComponentSize(size);
|
|
26
25
|
const isSkeleton = useModuleSkeleton();
|
|
27
|
-
const theme = useTheme();
|
|
28
26
|
const { host_static_assets, environment_assets } = useEnvironment();
|
|
29
27
|
const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
|
|
30
|
-
const paletteColor = getPropertyByString(
|
|
31
|
-
theme.vars.palette,
|
|
32
|
-
disabled ? "default" : color,
|
|
33
|
-
theme.vars.palette.default
|
|
34
|
-
);
|
|
35
28
|
const ownerState = {
|
|
36
29
|
size: adjustedSize,
|
|
37
30
|
disabled,
|
|
38
31
|
selected,
|
|
39
|
-
paletteColor,
|
|
40
32
|
color,
|
|
41
33
|
checkable,
|
|
42
34
|
checked
|
|
@@ -1,115 +1,91 @@
|
|
|
1
1
|
import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
|
|
2
2
|
const menuItemStyles = {
|
|
3
3
|
/**
|
|
4
|
-
* Estilos para el contenedor de los items del menú
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
4
|
+
* Estilos para el contenedor de los items del menú contenedor
|
|
5
|
+
* @author cesar - automatic
|
|
6
|
+
* @createdAt 2025-02-10 10:22:37 - automatic
|
|
7
|
+
* @updatedAt 2025-02-10 16:37:32 - automatic
|
|
8
|
+
* @updatedUser cesar - automatic
|
|
8
9
|
*/
|
|
9
|
-
root: ({ theme, ownerState }) =>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
10
|
+
root: ({ theme, ownerState }) => {
|
|
11
|
+
const mainColor = ownerState.selected ? ownerState.color === "error" ? ownerState.color : "primary" : ownerState.color;
|
|
12
|
+
const paletteColor = theme.vars.palette[mainColor ?? "default"];
|
|
13
|
+
const color = (token) => {
|
|
14
|
+
return ownerState.color === "default" && !ownerState.selected ? theme.vars.palette.text.primary : paletteColor[token];
|
|
15
|
+
};
|
|
16
|
+
return {
|
|
17
|
+
width: "100%",
|
|
18
|
+
gap: theme.vars.size.baseSpacings.sp4,
|
|
19
|
+
paddingTop: theme.vars.size.baseSpacings.sp1,
|
|
20
|
+
paddingBottom: theme.vars.size.baseSpacings.sp1,
|
|
21
|
+
paddingLeft: theme.vars.size.baseSpacings.sp4,
|
|
22
|
+
paddingRight: theme.vars.size.baseSpacings.sp4,
|
|
23
|
+
borderRadius: theme.vars.size.borderRadius.r0,
|
|
24
|
+
// Estilos base para el texto y el ícono
|
|
23
25
|
"& .M4LTypography-root": {
|
|
24
|
-
|
|
26
|
+
paddingLeft: theme.vars.size.baseSpacings.sp1,
|
|
27
|
+
color: color("enabled")
|
|
25
28
|
},
|
|
26
29
|
"& .M4LIcon-icon": {
|
|
27
|
-
backgroundColor:
|
|
30
|
+
backgroundColor: `${color("enabled")} !important`
|
|
28
31
|
},
|
|
29
|
-
"&:
|
|
30
|
-
backgroundColor:
|
|
32
|
+
"&:active": {
|
|
33
|
+
backgroundColor: `${paletteColor.activeOpacity} !important`,
|
|
31
34
|
"& .M4LIcon-icon": {
|
|
32
|
-
backgroundColor:
|
|
33
|
-
},
|
|
34
|
-
"& .M4LTypography-root": {
|
|
35
|
-
color: ownerState.paletteColor?.hover
|
|
35
|
+
backgroundColor: color("active")
|
|
36
36
|
}
|
|
37
37
|
},
|
|
38
|
-
"&:
|
|
39
|
-
backgroundColor:
|
|
40
|
-
"& .M4LIcon-icon": {
|
|
41
|
-
backgroundColor: ownerState.paletteColor?.active
|
|
42
|
-
},
|
|
38
|
+
"&:hover": {
|
|
39
|
+
backgroundColor: paletteColor.hoverOpacity,
|
|
43
40
|
"& .M4LTypography-root": {
|
|
44
|
-
|
|
41
|
+
paddingLeft: theme.vars.size.baseSpacings.sp1,
|
|
42
|
+
color: color("hover")
|
|
43
|
+
},
|
|
44
|
+
"& .M4LIcon-icon": {
|
|
45
|
+
backgroundColor: color("hover")
|
|
45
46
|
}
|
|
46
47
|
},
|
|
47
48
|
"&:focus-visible": {
|
|
48
|
-
backgroundColor: ownerState.paletteColor?.activeOpacity,
|
|
49
49
|
outline: theme.vars.size.borderStroke.container,
|
|
50
50
|
outlineColor: theme.vars.palette.border.main,
|
|
51
|
-
outlineOffset: theme.vars.size.baseSpacings["sp0-5"]
|
|
52
|
-
"& .M4LIcon-icon": {
|
|
53
|
-
color: ownerState.paletteColor?.active
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
...ownerState.color === "default" && {
|
|
58
|
-
"& .M4LTypography-root": {
|
|
59
|
-
color: theme.vars.palette.text.primary
|
|
51
|
+
outlineOffset: theme.vars.size.baseSpacings["sp0-5"]
|
|
60
52
|
},
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
"&:hover": {
|
|
65
|
-
backgroundColor: ownerState.paletteColor?.hoverOpacity
|
|
53
|
+
...ownerState.selected && {
|
|
54
|
+
borderLeft: theme.vars.size.borderStroke.container,
|
|
55
|
+
borderLeftColor: paletteColor.enabled
|
|
66
56
|
},
|
|
67
|
-
"
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
57
|
+
"& .M4LImage-root": {
|
|
58
|
+
...getHeightSizeStyles(
|
|
59
|
+
theme.generalSettings.isMobile,
|
|
60
|
+
ownerState.size || "medium",
|
|
61
|
+
"base",
|
|
62
|
+
(val) => {
|
|
63
|
+
return {
|
|
64
|
+
height: val,
|
|
65
|
+
width: val
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
)
|
|
78
69
|
},
|
|
79
|
-
"& .M4LIcon-icon": {
|
|
80
|
-
backgroundColor: theme.vars.palette.text.disabled
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
"& .M4LImage-root": {
|
|
84
70
|
...getHeightSizeStyles(
|
|
85
71
|
theme.generalSettings.isMobile,
|
|
86
72
|
ownerState.size || "medium",
|
|
87
|
-
"
|
|
88
|
-
(
|
|
73
|
+
"action",
|
|
74
|
+
(height) => {
|
|
89
75
|
return {
|
|
90
|
-
height:
|
|
91
|
-
|
|
76
|
+
//height: 'auto !important',
|
|
77
|
+
minHeight: `${height}!important`
|
|
92
78
|
};
|
|
93
79
|
}
|
|
94
80
|
)
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
theme.generalSettings.isMobile,
|
|
98
|
-
ownerState.size || "medium",
|
|
99
|
-
"action",
|
|
100
|
-
(height) => {
|
|
101
|
-
return {
|
|
102
|
-
//height: 'auto !important',
|
|
103
|
-
minHeight: `${height}!important`
|
|
104
|
-
};
|
|
105
|
-
}
|
|
106
|
-
)
|
|
107
|
-
}),
|
|
81
|
+
};
|
|
82
|
+
},
|
|
108
83
|
/**
|
|
109
84
|
* Estilos para el icono de los items del menú
|
|
110
|
-
*
|
|
111
|
-
*
|
|
112
|
-
*
|
|
85
|
+
* @author SebastianM - automatic
|
|
86
|
+
* @createdAt 2024-12-02 19:12:14 - automatic
|
|
87
|
+
* @updatedAt 2025-02-10 16:37:32 - automatic
|
|
88
|
+
* @updatedUser cesar - automatic
|
|
113
89
|
*/
|
|
114
90
|
menuItemIcon: () => ({
|
|
115
91
|
"&.MenuItemEndIcon-root": {
|
|
@@ -118,24 +94,26 @@ const menuItemStyles = {
|
|
|
118
94
|
}),
|
|
119
95
|
/**
|
|
120
96
|
* Estilos para el icono de los items del menú cuando están seleccionados
|
|
121
|
-
*
|
|
122
|
-
*
|
|
123
|
-
*
|
|
97
|
+
* @author SebastianM - automatic
|
|
98
|
+
* @createdAt 2024-12-13 12:45:48 - automatic
|
|
99
|
+
* @updatedAt 2025-02-10 16:37:32 - automatic
|
|
100
|
+
* @updatedUser cesar - automatic
|
|
124
101
|
*/
|
|
125
|
-
menuItemIconChecked: ({ ownerState }) => ({
|
|
102
|
+
menuItemIconChecked: ({ theme, ownerState }) => ({
|
|
126
103
|
visibility: ownerState.checkable ? ownerState.checked ? "visible" : "hidden" : "hidden",
|
|
127
104
|
...ownerState.selected && {
|
|
128
105
|
"& .M4LIcon-icon": {
|
|
129
|
-
backgroundColor: ownerState.
|
|
106
|
+
backgroundColor: theme.vars.palette[ownerState.color ?? "default"].main
|
|
130
107
|
}
|
|
131
108
|
},
|
|
132
109
|
variants: []
|
|
133
110
|
}),
|
|
134
111
|
/**
|
|
135
112
|
* Estilos para la tipografía del menú item
|
|
136
|
-
*
|
|
137
|
-
*
|
|
138
|
-
*
|
|
113
|
+
* @author SebastianM - automatic
|
|
114
|
+
* @createdAt 2024-12-13 12:45:48 - automatic
|
|
115
|
+
* @updatedAt 2025-02-10 16:37:32 - automatic
|
|
116
|
+
* @updatedUser cesar - automatic
|
|
139
117
|
*/
|
|
140
118
|
menuItemTypography: () => ({
|
|
141
119
|
overflow: "hidden",
|
|
@@ -143,6 +121,10 @@ const menuItemStyles = {
|
|
|
143
121
|
}),
|
|
144
122
|
/**
|
|
145
123
|
* Estilos para el contenedor de los items del menú contenedor
|
|
124
|
+
* @author cesar - automatic
|
|
125
|
+
* @createdAt 2025-01-20 15:51:18 - automatic
|
|
126
|
+
* @updatedAt 2025-02-10 16:37:32 - automatic
|
|
127
|
+
* @updatedUser cesar - automatic
|
|
146
128
|
*/
|
|
147
129
|
menuItemContainer: ({ theme }) => ({
|
|
148
130
|
display: "flex",
|
|
@@ -153,9 +135,10 @@ const menuItemStyles = {
|
|
|
153
135
|
}),
|
|
154
136
|
/**
|
|
155
137
|
* Estilos para el contenedor de los items del menú en skeleton
|
|
156
|
-
*
|
|
157
|
-
*
|
|
158
|
-
*
|
|
138
|
+
* @author Bruce Escobar - automatic
|
|
139
|
+
* @createdAt 2024-10-22 10:38:00 - automatic
|
|
140
|
+
* @updatedAt 2025-02-10 16:37:32 - automatic
|
|
141
|
+
* @updatedUser cesar - automatic
|
|
159
142
|
*/
|
|
160
143
|
skeletonMenuItem: ({ theme, ownerState }) => ({
|
|
161
144
|
width: "100%",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MenuItemProps as MUIMenuItemProps, Theme
|
|
1
|
+
import { MenuItemProps as MUIMenuItemProps, Theme } from '@mui/material';
|
|
2
2
|
import { OverridesStyleRules } from '@mui/material/styles/overrides';
|
|
3
3
|
import { Sizes, ComponentPalletColor } from '@m4l/styles';
|
|
4
4
|
import { MenuItemSlots } from './slots';
|
|
@@ -27,11 +27,7 @@ export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'>
|
|
|
27
27
|
/**
|
|
28
28
|
* Define el color del `MenuItem`
|
|
29
29
|
*/
|
|
30
|
-
color?: Extract<ComponentPalletColor, '
|
|
31
|
-
/**
|
|
32
|
-
* Personalización del color de la paleta del componente
|
|
33
|
-
*/
|
|
34
|
-
componentPaletteColor?: ComponentPalletColor;
|
|
30
|
+
color?: Extract<ComponentPalletColor, 'default' | 'error'>;
|
|
35
31
|
/**
|
|
36
32
|
* Indica si el `MenuItem` está deshabilitado
|
|
37
33
|
*/
|
|
@@ -58,8 +54,8 @@ export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'>
|
|
|
58
54
|
* Pick<MenuItemProps, 'size' | 'componentPaletteColor' | 'disabled' | 'selected'>
|
|
59
55
|
* paletteColor - Define el color de la paleta aplicada al `MenuItem`.
|
|
60
56
|
*/
|
|
61
|
-
export interface MenuItemOwnerState extends Pick<MenuItemProps, 'checked' | 'checkable' | 'size' | '
|
|
62
|
-
|
|
57
|
+
export interface MenuItemOwnerState extends Pick<MenuItemProps, 'checked' | 'checkable' | 'size' | 'disabled' | 'selected'> {
|
|
58
|
+
color: Extract<ComponentPalletColor, 'default' | 'error' | 'primary'>;
|
|
63
59
|
}
|
|
64
60
|
/**
|
|
65
61
|
* Define los tipos de Slots disponibles para el `MenuItem`.
|
package/index.js
CHANGED
|
@@ -73,9 +73,9 @@ import { A as A6 } from "./components/CommonActions/components/ActionsContainer/
|
|
|
73
73
|
import { A as A7 } from "./components/CommonActions/components/ActionCancel/ActionCancel.js";
|
|
74
74
|
import { A as A8 } from "./components/CommonActions/components/ActionIntro/ActionIntro.js";
|
|
75
75
|
import { A as A9 } from "./components/CommonActions/components/ActionFormCancel/index.js";
|
|
76
|
-
import { A as A10 } from "./components/CommonActions/components/ActionFormIntro/
|
|
77
|
-
import { d, g as g13 } from "./components/CommonActions/dictionary.js";
|
|
78
|
-
import { D as
|
|
76
|
+
import { A as A10 } from "./components/CommonActions/components/ActionFormIntro/ActionFormIntro.js";
|
|
77
|
+
import { D as D5, d, g as g13 } from "./components/CommonActions/dictionary.js";
|
|
78
|
+
import { D as D6 } from "./components/DragResizeWindow/DragResizeWindow.js";
|
|
79
79
|
import { d as d2 } from "./components/DragResizeWindow/classes/index.js";
|
|
80
80
|
import { G } from "./components/GridLayout/GridLayout.js";
|
|
81
81
|
import { R as R18 } from "./components/GridLayout/subcomponents/Responsive/index.js";
|
|
@@ -185,7 +185,7 @@ import { T as T17 } from "./components/mui_extended/ToggleIconButton/ToggleIconB
|
|
|
185
185
|
import { T as T18 } from "./components/mui_extended/ToggleIconButton/constants.js";
|
|
186
186
|
import { T as T19 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonEnum.js";
|
|
187
187
|
import { T as T20 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.js";
|
|
188
|
-
import { a as a13, D as
|
|
188
|
+
import { a as a13, D as D7, M as M13 } from "./components/areas/contexts/DynamicMFParmsContext/index.js";
|
|
189
189
|
import { F, R as R21, u as u9 } from "./components/hook-form/RHFormContext/index.js";
|
|
190
190
|
import { g as g26 } from "./components/hook-form/RHFormContext/dictionary.js";
|
|
191
191
|
import { u as u10 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
|
|
@@ -239,13 +239,14 @@ export {
|
|
|
239
239
|
C11 as CommonFeatureRender,
|
|
240
240
|
C as ConcatenatedFormatter,
|
|
241
241
|
C12 as ContentWindowStyled,
|
|
242
|
+
D5 as DICTIONARY,
|
|
242
243
|
D as DataGrid,
|
|
243
244
|
D2 as DateFormatter,
|
|
244
245
|
D3 as DistanceToNowFormatter,
|
|
245
|
-
|
|
246
|
+
D6 as DragResizeWindow,
|
|
246
247
|
D4 as DynamicFilter,
|
|
247
248
|
a13 as DynamicMFParmsContext,
|
|
248
|
-
|
|
249
|
+
D7 as DynamicMFParmsProvider,
|
|
249
250
|
F as FormProviderCustom,
|
|
250
251
|
G as GridLayout,
|
|
251
252
|
H5 as HamburgerMenu,
|
package/package.json
CHANGED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useFormContext, useFormState } from "react-hook-form";
|
|
3
|
-
import { useModuleDictionary } from "@m4l/core";
|
|
4
|
-
import { L as LoadingButton } from "../../../mui_extended/LoadingButton/LoadingButton.js";
|
|
5
|
-
import { u as useCommonActionsUtilityClasses } from "../../classes/index.js";
|
|
6
|
-
function ActionFormIntro(props) {
|
|
7
|
-
const { variant = "contained", color = "primary", label, ...others } = props;
|
|
8
|
-
const { getLabel } = useModuleDictionary();
|
|
9
|
-
const finalLabel = label || getLabel("common_actions.intro");
|
|
10
|
-
const { control } = useFormContext();
|
|
11
|
-
const { isSubmitting } = useFormState({
|
|
12
|
-
control
|
|
13
|
-
});
|
|
14
|
-
const classes = useCommonActionsUtilityClasses();
|
|
15
|
-
return /* @__PURE__ */ jsx(
|
|
16
|
-
LoadingButton,
|
|
17
|
-
{
|
|
18
|
-
...others,
|
|
19
|
-
variant,
|
|
20
|
-
type: "submit",
|
|
21
|
-
color,
|
|
22
|
-
loading: isSubmitting,
|
|
23
|
-
className: classes.actionFormIntro,
|
|
24
|
-
label: finalLabel
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
}
|
|
28
|
-
export {
|
|
29
|
-
ActionFormIntro as A
|
|
30
|
-
};
|