@m4l/components 9.3.12-BE010925-beta.1 → 9.3.12-BE080925-beta.1
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/.storybook/utils/getStylesColorsByMode.d.ts +4 -0
- package/components/Card/helpers/getSizeSpacing.d.ts +2 -3
- package/components/Card/types.d.ts +4 -6
- package/components/index.d.ts +0 -1
- package/components/mui_extended/Badge/Badge.styles.js +4 -2
- package/components/mui_extended/IconButton/IconButton.styles.js +7 -7
- package/components/mui_extended/Typography/Typography.js +1 -3
- package/components/mui_extended/Typography/types.d.ts +0 -5
- package/components/mui_extended/Typography/typography.styles.js +0 -1
- package/index.js +34 -36
- package/package.json +3 -3
- package/storybook/components/extended/mui/IconButton/IconButton.stories.d.ts +3 -0
- package/components/Card/Card.js +0 -49
- package/components/Card/Card.styles.js +0 -56
- package/components/Card/constants.js +0 -17
- package/components/Card/helpers/getSizeSpacing.js +0 -10
- package/components/Card/index.js +0 -1
- package/components/Card/slots/CardEnum.js +0 -7
- package/components/Card/slots/CardSlots.js +0 -11
|
@@ -73,6 +73,7 @@ export declare const colorsLight: {
|
|
|
73
73
|
readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
74
74
|
readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
75
75
|
readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
76
|
+
readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
76
77
|
readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
77
78
|
readonly primary: {
|
|
78
79
|
readonly outlined: {
|
|
@@ -277,6 +278,7 @@ export declare const colorsLight: {
|
|
|
277
278
|
readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
278
279
|
readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
279
280
|
readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
281
|
+
readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
280
282
|
readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
281
283
|
readonly primary: {
|
|
282
284
|
readonly outlined: {
|
|
@@ -482,6 +484,7 @@ export declare const colorsDark: {
|
|
|
482
484
|
readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
483
485
|
readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
484
486
|
readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
487
|
+
readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
485
488
|
readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
486
489
|
readonly primary: {
|
|
487
490
|
readonly outlined: {
|
|
@@ -686,6 +689,7 @@ export declare const colorsDark: {
|
|
|
686
689
|
readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
687
690
|
readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
688
691
|
readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
692
|
+
readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
689
693
|
readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
|
|
690
694
|
readonly primary: {
|
|
691
695
|
readonly outlined: {
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { CardProps } from '../types';
|
|
2
|
-
import { Theme } from '@mui/material';
|
|
3
2
|
/**
|
|
4
3
|
* Obtiene el tamaño del gap de la tarjeta.
|
|
5
|
-
* @param
|
|
4
|
+
* @param gap - El gap de la tarjeta.
|
|
6
5
|
* @returns El tamaño del gap de la tarjeta.
|
|
7
6
|
*/
|
|
8
|
-
export declare const getSizeSpacing: (
|
|
7
|
+
export declare const getSizeSpacing: (gap: CardProps["gap"] | number | undefined | null) => number;
|
|
@@ -2,8 +2,6 @@ import { Theme } from '@mui/material';
|
|
|
2
2
|
import { M4LOverridesStyleRules } from '../../@types/augmentations';
|
|
3
3
|
import { CARD_KEY } from './constants';
|
|
4
4
|
import { CardSlots } from './slots/CardEnum';
|
|
5
|
-
import { Density } from '@m4l/styles';
|
|
6
|
-
export type SpacingsCard = number | keyof Density;
|
|
7
5
|
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
8
6
|
/**
|
|
9
7
|
* Contenido de la tarjeta.
|
|
@@ -16,11 +14,11 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
16
14
|
/**
|
|
17
15
|
* Espacio entre los elementos de la tarjeta.
|
|
18
16
|
*/
|
|
19
|
-
gap?:
|
|
17
|
+
gap?: number | 'compact' | 'standard' | 'comfortable';
|
|
20
18
|
/**
|
|
21
19
|
* Espacio entre los elementos de la tarjeta.
|
|
22
20
|
*/
|
|
23
|
-
padding?:
|
|
21
|
+
padding?: number | 'compact' | 'standard' | 'comfortable';
|
|
24
22
|
/**
|
|
25
23
|
* Dirección de la tarjeta.
|
|
26
24
|
*/
|
|
@@ -49,9 +47,9 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
49
47
|
export type CardSlotsType = keyof typeof CardSlots;
|
|
50
48
|
export type CardOwnerState = {
|
|
51
49
|
variant: CardProps['variant'];
|
|
52
|
-
|
|
50
|
+
gap: CardProps['gap'];
|
|
53
51
|
height: CardProps['height'];
|
|
54
|
-
|
|
52
|
+
padding: CardProps['padding'];
|
|
55
53
|
direction: CardProps['direction'];
|
|
56
54
|
onClick: boolean;
|
|
57
55
|
justifyContent: CardProps['justifyContent'];
|
package/components/index.d.ts
CHANGED
|
@@ -24,11 +24,13 @@ const badgeStyles = {
|
|
|
24
24
|
...theme.generalSettings.isMobile ? {
|
|
25
25
|
height: theme.vars.size.baseSpacings.sp5,
|
|
26
26
|
width: ownerState?.displayBadgeContent ? "26px" : theme.vars.size.baseSpacings.sp5,
|
|
27
|
-
right: ownerState?.displayBadgeContent ?
|
|
27
|
+
right: ownerState?.displayBadgeContent ? 0 : 2,
|
|
28
|
+
top: ownerState?.displayBadgeContent ? 0 : 2
|
|
28
29
|
} : {
|
|
29
30
|
height: theme.vars.size.baseSpacings["sp3-5"],
|
|
30
31
|
width: ownerState?.displayBadgeContent ? "23px" : theme.vars.size.baseSpacings["sp3-5"],
|
|
31
|
-
right: ownerState?.displayBadgeContent ?
|
|
32
|
+
right: ownerState?.displayBadgeContent ? 0 : 2,
|
|
33
|
+
top: ownerState?.displayBadgeContent ? 0 : 2
|
|
32
34
|
},
|
|
33
35
|
// Estilos para variantes
|
|
34
36
|
...ownerState?.BadgeVariant === "dot" && {
|
|
@@ -13,7 +13,7 @@ const iconButtonStyles = {
|
|
|
13
13
|
overflow: "hidden",
|
|
14
14
|
cursor: ownerState?.disabled ? "not-allowed" : "pointer",
|
|
15
15
|
color: theme.vars.palette.text.primary,
|
|
16
|
-
borderRadius: theme.size.borderRadius
|
|
16
|
+
borderRadius: theme.size.borderRadius["r1-5"],
|
|
17
17
|
pointerEvents: ownerState?.disabled ? "none" : "auto",
|
|
18
18
|
display: ownerState?.isSkeleton ? "none" : "flex",
|
|
19
19
|
justifyContent: "center",
|
|
@@ -47,24 +47,24 @@ const iconButtonStyles = {
|
|
|
47
47
|
// Estilos para la variante contained
|
|
48
48
|
...ownerState?.variant === "contained" && {
|
|
49
49
|
// 🎯 Color de fondo según variante y color del componente
|
|
50
|
-
backgroundColor: ownerState?.variant === "contained" ? ownerState?.color === "error" ? paletteColor.active : ownerState?.color === "default" ? theme.vars.palette.primary.selected : paletteColor.selected : ownerState?.color === "error" ? paletteColor.activeOpacity : paletteColor.selectedOpacity,
|
|
50
|
+
backgroundColor: ownerState?.variant === "contained" ? ownerState?.color === "error" ? paletteColor.active : ownerState?.color === "default" ? theme.vars.palette.primary.selected : ownerState?.color === "success" ? theme.vars.palette.success.selected : paletteColor.selected : ownerState?.color === "error" ? paletteColor.activeOpacity : paletteColor.selectedOpacity,
|
|
51
51
|
"&&& .M4LIcon-icon": {
|
|
52
52
|
backgroundColor: ownerState?.variant === "contained" ? theme.vars.palette.primary.contrastText : paletteColor.semanticText
|
|
53
53
|
}
|
|
54
54
|
},
|
|
55
55
|
// Estilos para la variante text
|
|
56
56
|
...ownerState.variant === "outline" && {
|
|
57
|
-
backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.
|
|
57
|
+
backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.selectedOpacity : paletteColor.selectedOpacity,
|
|
58
58
|
border: theme.vars.size.borderStroke.actionInput,
|
|
59
59
|
borderColor: ownerState.color === "default" ? theme.vars.palette.primary.active : paletteColor.active,
|
|
60
60
|
"&&& .M4LIcon-icon": {
|
|
61
|
-
backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : paletteColor.selected
|
|
61
|
+
backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : ownerState.color === "warning" ? paletteColor.active : paletteColor.selected
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
...ownerState.variant === "text" && {
|
|
65
|
-
backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.
|
|
65
|
+
backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.selectedOpacity : paletteColor.selectedOpacity,
|
|
66
66
|
"&&& .M4LIcon-icon": {
|
|
67
|
-
backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : paletteColor.selected
|
|
67
|
+
backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : ownerState.color === "warning" ? paletteColor.active : paletteColor.selected
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
} : {
|
|
@@ -128,7 +128,7 @@ const iconButtonStyles = {
|
|
|
128
128
|
backgroundColor: paletteColor.enabled,
|
|
129
129
|
// 🖼️ Color del icono
|
|
130
130
|
"&&& .M4LIcon-icon": {
|
|
131
|
-
backgroundColor: paletteColor.semanticText
|
|
131
|
+
backgroundColor: ownerState?.color === "default" ? paletteColor.semanticText : paletteColor.contrastText
|
|
132
132
|
},
|
|
133
133
|
// 🖱️ Estado Hover
|
|
134
134
|
"&:hover": {
|
|
@@ -18,7 +18,6 @@ function Typography(props) {
|
|
|
18
18
|
children,
|
|
19
19
|
disabled,
|
|
20
20
|
ellipsis = false,
|
|
21
|
-
fontFamily = "inter",
|
|
22
21
|
...other
|
|
23
22
|
} = props;
|
|
24
23
|
const isSkeleton = useModuleSkeleton();
|
|
@@ -31,8 +30,7 @@ function Typography(props) {
|
|
|
31
30
|
skeletonRows,
|
|
32
31
|
variant,
|
|
33
32
|
skeleton: isSkeleton,
|
|
34
|
-
ellipsis
|
|
35
|
-
fontFamily
|
|
33
|
+
ellipsis
|
|
36
34
|
};
|
|
37
35
|
return /* @__PURE__ */ jsx(
|
|
38
36
|
StyledMUITypography,
|
|
@@ -47,10 +47,6 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
|
|
|
47
47
|
* Si se activa, el texto se corta y se muestra un elipsis.
|
|
48
48
|
*/
|
|
49
49
|
ellipsis?: boolean;
|
|
50
|
-
/**
|
|
51
|
-
* Familia de fuentes a usar para el componente.
|
|
52
|
-
*/
|
|
53
|
-
fontFamily?: 'inter' | 'jura';
|
|
54
50
|
}
|
|
55
51
|
/**
|
|
56
52
|
* Define valores de estado necesarios para estilar el componente.
|
|
@@ -63,7 +59,6 @@ export interface TypographyOwnerState {
|
|
|
63
59
|
skeletonRows: TypographyProps['skeletonRows'];
|
|
64
60
|
skeleton: boolean;
|
|
65
61
|
ellipsis: TypographyProps['ellipsis'];
|
|
66
|
-
fontFamily: TypographyProps['fontFamily'];
|
|
67
62
|
}
|
|
68
63
|
/**
|
|
69
64
|
* Agrupa la lista de slots del componente.
|
|
@@ -8,7 +8,6 @@ const typographyStyles = {
|
|
|
8
8
|
root: ({ ownerState, theme }) => ({
|
|
9
9
|
margin: 0,
|
|
10
10
|
cursor: "default",
|
|
11
|
-
fontFamily: ownerState?.fontFamily === "jura" ? "Jura" : "Inter",
|
|
12
11
|
"&.M4lclassCssSpecificity": {
|
|
13
12
|
// Estilos generales 🌐
|
|
14
13
|
// skeleton spacing when multiple rows 🦴
|
package/index.js
CHANGED
|
@@ -18,8 +18,7 @@ import { a as a2, A as A6 } from "./components/areas/contexts/AreasContext/index
|
|
|
18
18
|
import { u } from "./components/areas/hooks/useAreas/index.js";
|
|
19
19
|
import { A as A7, a as a3, L as L2, b as b2, g as g3 } from "./components/areas/dictionary.js";
|
|
20
20
|
import { B } from "./components/BaseModule/BaseModule.js";
|
|
21
|
-
import { C } from "./components/
|
|
22
|
-
import { C as C2 } from "./components/Chip/Chip.js";
|
|
21
|
+
import { C } from "./components/Chip/Chip.js";
|
|
23
22
|
import { A as A8 } from "./components/commercial/AppBarCommercial/index.js";
|
|
24
23
|
import { H } from "./components/commercial/HamburgerMenu/HamburgerMenu.js";
|
|
25
24
|
import { T } from "./components/commercial/TopBar/TopBar.js";
|
|
@@ -30,32 +29,32 @@ import { A as A11 } from "./components/CommonActions/components/ActionIntro/Acti
|
|
|
30
29
|
import { A as A12 } from "./components/CommonActions/components/ActionFormCancel/ActionFormCancel.js";
|
|
31
30
|
import { A as A13 } from "./components/CommonActions/components/ActionFormIntro/ActionFormIntro.js";
|
|
32
31
|
import { D, d, g as g4 } from "./components/CommonActions/dictionary.js";
|
|
33
|
-
import { C as
|
|
32
|
+
import { C as C2 } from "./components/ContainerFlow/ContainerFlow.js";
|
|
34
33
|
import { D as D2 } from "./components/DataGrid/DataGrid.js";
|
|
35
34
|
import { g as g5 } from "./components/DataGrid/dictionary.js";
|
|
36
35
|
import { N, T as T2 } from "./components/DataGrid/subcomponents/editors/TextEditor/index.js";
|
|
37
36
|
import { g as g6 } from "./components/DataGrid/utils/getDataGridRowsFromSet.js";
|
|
38
37
|
import { b as b3, a as a4, e } from "./components/DataGrid/constants.js";
|
|
39
|
-
import { C as
|
|
38
|
+
import { C as C3 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
|
|
40
39
|
import { u as u2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js";
|
|
41
|
-
import { C as
|
|
40
|
+
import { C as C4 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
|
|
42
41
|
import { u as u3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.js";
|
|
43
|
-
import { C as
|
|
42
|
+
import { C as C5 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
|
|
44
43
|
import { u as u4 } from "./components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js";
|
|
45
|
-
import { C as
|
|
46
|
-
import { C as
|
|
44
|
+
import { C as C6 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
|
|
45
|
+
import { C as C7 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
|
|
47
46
|
import { u as u5 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
|
|
48
|
-
import { C as
|
|
47
|
+
import { C as C8 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
|
|
49
48
|
import { u as u6 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
|
|
50
|
-
import { C as
|
|
49
|
+
import { C as C9 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
|
|
51
50
|
import { u as u7 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
|
|
52
|
-
import { C as
|
|
51
|
+
import { C as C10 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
|
|
53
52
|
import { u as u8 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
|
|
54
|
-
import { C as
|
|
53
|
+
import { C as C11 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
|
|
55
54
|
import { u as u9 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
|
|
56
|
-
import { C as
|
|
55
|
+
import { C as C12 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
|
|
57
56
|
import { u as u10 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
|
|
58
|
-
import { C as
|
|
57
|
+
import { C as C13 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
|
|
59
58
|
import { u as u11 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
|
|
60
59
|
import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
|
|
61
60
|
import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
|
|
@@ -78,7 +77,7 @@ import { R as R3 } from "./components/extended/React-Json-Viewer/ReactJsonViewer
|
|
|
78
77
|
import { A as A14 } from "./components/mui_extended/Avatar/Avatar.js";
|
|
79
78
|
import { B as B2 } from "./components/mui_extended/BoxIcon/index.js";
|
|
80
79
|
import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.js";
|
|
81
|
-
import { C as
|
|
80
|
+
import { C as C14 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
|
|
82
81
|
import { B as B4 } from "./components/mui_extended/Badge/Badge.js";
|
|
83
82
|
import { L as L3 } from "./components/mui_extended/LinearProgress/index.js";
|
|
84
83
|
import { L as L4 } from "./components/mui_extended/LinkWithRoute/index.js";
|
|
@@ -88,7 +87,7 @@ import { A as A15 } from "./components/mui_extended/Accordion/Accordion.js";
|
|
|
88
87
|
import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
|
|
89
88
|
import { I as I2 } from "./components/mui_extended/IconButton/IconButton.js";
|
|
90
89
|
import { B as B5 } from "./components/mui_extended/Button/Button.js";
|
|
91
|
-
import { C as
|
|
90
|
+
import { C as C15 } from "./components/mui_extended/CheckBox/CheckBox.js";
|
|
92
91
|
import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
|
|
93
92
|
import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
|
|
94
93
|
import { S as S4 } from "./components/mui_extended/Select/Select.js";
|
|
@@ -116,10 +115,10 @@ import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatt
|
|
|
116
115
|
import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
|
|
117
116
|
import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
|
|
118
117
|
import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
|
|
119
|
-
import { C as
|
|
118
|
+
import { C as C16, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
|
|
120
119
|
import { P as P4, u as u12 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
|
|
121
120
|
import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
|
|
122
|
-
import { C as
|
|
121
|
+
import { C as C17 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
|
|
123
122
|
import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
|
|
124
123
|
import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
|
|
125
124
|
import { g as g18 } from "./components/formatters/dictionary.js";
|
|
@@ -252,24 +251,23 @@ export {
|
|
|
252
251
|
B2 as BoxIcon,
|
|
253
252
|
B3 as Breadcrumbs,
|
|
254
253
|
B5 as Button,
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
C5 as
|
|
263
|
-
C6 as
|
|
264
|
-
C7 as
|
|
265
|
-
C8 as
|
|
266
|
-
C9 as
|
|
267
|
-
C10 as
|
|
268
|
-
C11 as
|
|
269
|
-
C12 as
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
C3 as ContainerFlow,
|
|
254
|
+
C15 as CheckBox,
|
|
255
|
+
C as Chip,
|
|
256
|
+
C17 as ChipStatusFormatter,
|
|
257
|
+
C14 as CircularProgress,
|
|
258
|
+
C3 as ColumnBooleanFormatter,
|
|
259
|
+
C13 as ColumnChipStatusFormatter,
|
|
260
|
+
C4 as ColumnConcatenatedValueFormatter,
|
|
261
|
+
C5 as ColumnDateFormatter,
|
|
262
|
+
C6 as ColumnIconFormatter,
|
|
263
|
+
C7 as ColumnInteractiveCheckFormatter,
|
|
264
|
+
C8 as ColumnNestedValueFormatter,
|
|
265
|
+
C9 as ColumnPointsFormatter,
|
|
266
|
+
C10 as ColumnPriceFormatter,
|
|
267
|
+
C11 as ColumnSetCheckFormatter,
|
|
268
|
+
C12 as ColumnUncertaintyFormatter,
|
|
269
|
+
C16 as ConcatenatedFormatter,
|
|
270
|
+
C2 as ContainerFlow,
|
|
273
271
|
b3 as DATAGRID_ROW_HEADER_HEIGHTS,
|
|
274
272
|
a4 as DATAGRID_ROW_HEIGHTS,
|
|
275
273
|
e as DATAGRID_SEMANTIC_WIDTHS,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m4l/components",
|
|
3
|
-
"version": "9.3.12-
|
|
3
|
+
"version": "9.3.12-BE080925-beta.1",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "M4L Components",
|
|
6
6
|
"lint-staged": {
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
"@googlemaps/js-api-loader": "^1.16.6",
|
|
12
12
|
"@hookform/resolvers": "2.9.11",
|
|
13
13
|
"@m4l/core": "^2.0.0",
|
|
14
|
-
"@m4l/graphics": "7.
|
|
15
|
-
"@m4l/styles": "7.
|
|
14
|
+
"@m4l/graphics": "^7.0.0",
|
|
15
|
+
"@m4l/styles": "^7.0.0",
|
|
16
16
|
"@microlink/react-json-view": "^1.23.3",
|
|
17
17
|
"@mui/lab": "5.0.0-alpha.173",
|
|
18
18
|
"@mui/material": "5.16.7",
|
|
@@ -36,4 +36,7 @@ export declare const WithBadgeDot: Story;
|
|
|
36
36
|
* Story for IconButton with skeleton.
|
|
37
37
|
*/
|
|
38
38
|
export declare const WithSkeleton: Story;
|
|
39
|
+
export declare const allColorsContained: Story;
|
|
40
|
+
export declare const allColorsOutlined: Story;
|
|
41
|
+
export declare const allColorsText: Story;
|
|
39
42
|
export default meta;
|
package/components/Card/Card.js
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { C as CardRootStyled } from "./slots/CardSlots.js";
|
|
3
|
-
import { C as CARD_CLASSES } from "./constants.js";
|
|
4
|
-
import clsx from "clsx";
|
|
5
|
-
const Card = (props) => {
|
|
6
|
-
const {
|
|
7
|
-
className,
|
|
8
|
-
variant = "text",
|
|
9
|
-
gap,
|
|
10
|
-
height = "auto",
|
|
11
|
-
children,
|
|
12
|
-
direction = "row",
|
|
13
|
-
justifyContent = "center",
|
|
14
|
-
alignItems = "center",
|
|
15
|
-
selected = false,
|
|
16
|
-
padding,
|
|
17
|
-
...others
|
|
18
|
-
} = props;
|
|
19
|
-
const ownerState = {
|
|
20
|
-
variant,
|
|
21
|
-
CardGap: gap,
|
|
22
|
-
height,
|
|
23
|
-
direction,
|
|
24
|
-
onClick: !!props.onClick,
|
|
25
|
-
justifyContent,
|
|
26
|
-
alignItems,
|
|
27
|
-
selected,
|
|
28
|
-
CardPadding: padding
|
|
29
|
-
};
|
|
30
|
-
return /* @__PURE__ */ jsx(
|
|
31
|
-
CardRootStyled,
|
|
32
|
-
{
|
|
33
|
-
ownerState,
|
|
34
|
-
className: clsx(
|
|
35
|
-
CARD_CLASSES.root,
|
|
36
|
-
variant === "outlined" && CARD_CLASSES.outlined,
|
|
37
|
-
variant === "text" && CARD_CLASSES.text,
|
|
38
|
-
selected && CARD_CLASSES.selected,
|
|
39
|
-
className
|
|
40
|
-
),
|
|
41
|
-
role: "card",
|
|
42
|
-
...others,
|
|
43
|
-
children
|
|
44
|
-
}
|
|
45
|
-
);
|
|
46
|
-
};
|
|
47
|
-
export {
|
|
48
|
-
Card as C
|
|
49
|
-
};
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { g as getSizeSpacing } from "./helpers/getSizeSpacing.js";
|
|
2
|
-
const cardStyles = {
|
|
3
|
-
/**
|
|
4
|
-
* Estilos para el contenedor principal del card.
|
|
5
|
-
*/
|
|
6
|
-
root: ({ theme, ownerState }) => {
|
|
7
|
-
const gap = getSizeSpacing(ownerState?.CardGap, theme);
|
|
8
|
-
const padding = getSizeSpacing(ownerState?.CardPadding, theme);
|
|
9
|
-
return {
|
|
10
|
-
display: "flex",
|
|
11
|
-
justifyContent: ownerState?.justifyContent ?? "center",
|
|
12
|
-
alignItems: ownerState?.alignItems ?? "center",
|
|
13
|
-
flexDirection: ownerState?.direction ?? "column",
|
|
14
|
-
gap,
|
|
15
|
-
padding,
|
|
16
|
-
transition: "all 0.2s ease-in-out",
|
|
17
|
-
width: "100%",
|
|
18
|
-
outline: "unset!important",
|
|
19
|
-
borderRadius: theme.vars.size.borderRadius.r2,
|
|
20
|
-
backgroundColor: theme.palette.background.paper,
|
|
21
|
-
height: ownerState?.height ?? "auto",
|
|
22
|
-
minHeight: ownerState?.height ?? "auto",
|
|
23
|
-
maxHeight: ownerState?.height ?? "auto",
|
|
24
|
-
overflow: "hidden",
|
|
25
|
-
...ownerState?.onClick && {
|
|
26
|
-
cursor: "pointer",
|
|
27
|
-
"&:hover": {
|
|
28
|
-
backgroundColor: theme.vars.palette.background.base
|
|
29
|
-
},
|
|
30
|
-
"&:active": {
|
|
31
|
-
backgroundColor: theme.vars.palette.default.activeOpacity
|
|
32
|
-
},
|
|
33
|
-
"&:focus-visible, &:focus-within": {
|
|
34
|
-
border: theme.vars.size.borderStroke.container,
|
|
35
|
-
borderColor: `${theme.vars.palette.primary.focusVisible}!important`,
|
|
36
|
-
outline: "unset!important"
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
...ownerState?.variant === "outlined" && {
|
|
40
|
-
border: theme.vars.size.borderStroke.container,
|
|
41
|
-
borderColor: theme.vars.palette.border.disabled
|
|
42
|
-
},
|
|
43
|
-
...ownerState?.variant === "text" && {
|
|
44
|
-
border: theme.vars.size.borderStroke.container,
|
|
45
|
-
borderColor: "transparent"
|
|
46
|
-
},
|
|
47
|
-
...ownerState?.selected && {
|
|
48
|
-
border: theme.vars.size.borderStroke.container,
|
|
49
|
-
borderColor: theme.vars.palette.primary.enabled
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
export {
|
|
55
|
-
cardStyles as c
|
|
56
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
|
|
2
|
-
import { C as CardSlots } from "./slots/CardEnum.js";
|
|
3
|
-
const CARD_KEY = "M4LCard";
|
|
4
|
-
const CARD_VARIANTS = {
|
|
5
|
-
text: "text",
|
|
6
|
-
outlined: "outlined"
|
|
7
|
-
};
|
|
8
|
-
const COMBINED_CLASSES = {
|
|
9
|
-
...CARD_VARIANTS,
|
|
10
|
-
...CardSlots,
|
|
11
|
-
selected: "selected"
|
|
12
|
-
};
|
|
13
|
-
const CARD_CLASSES = getComponentClasses(CARD_KEY, COMBINED_CLASSES);
|
|
14
|
-
export {
|
|
15
|
-
CARD_CLASSES as C,
|
|
16
|
-
CARD_KEY as a
|
|
17
|
-
};
|
package/components/Card/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { styled } from "@mui/material/styles";
|
|
2
|
-
import { a as CARD_KEY } from "../constants.js";
|
|
3
|
-
import { C as CardSlots } from "./CardEnum.js";
|
|
4
|
-
import { c as cardStyles } from "../Card.styles.js";
|
|
5
|
-
const CardRootStyled = styled("div", {
|
|
6
|
-
name: CARD_KEY,
|
|
7
|
-
slot: CardSlots.root
|
|
8
|
-
})(cardStyles?.root);
|
|
9
|
-
export {
|
|
10
|
-
CardRootStyled as C
|
|
11
|
-
};
|