@m4l/components 9.3.15-BE110925-beta.1 → 9.3.15-JT19092025.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/components/Card/helpers/getSizeSpacing.d.ts +2 -3
- package/components/Card/types.d.ts +5 -7
- package/components/Stepper/hooks/useDynamicValidation/index.d.ts +9 -0
- package/components/Stepper/hooks/useDynamicValidation/index.js +57 -0
- package/components/Stepper/hooks/useStepperActions/index.js +21 -3
- package/components/Stepper/subcomponents/StepArea/index.js +4 -0
- package/components/hook-form/RHFormContext/index.d.ts +1 -1
- package/components/hook-form/RHFormContext/index.js +29 -4
- package/components/index.d.ts +0 -1
- package/components/mui_extended/Typography/Typography.js +1 -3
- package/components/mui_extended/Typography/constants.d.ts +0 -4
- package/components/mui_extended/Typography/constants.js +1 -6
- package/components/mui_extended/Typography/types.d.ts +0 -5
- package/components/mui_extended/Typography/typography.styles.js +0 -2
- package/index.js +34 -36
- package/package.json +1 -1
- 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
|
@@ -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;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import { Theme } from '@mui/material
|
|
1
|
+
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'];
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hook que simula validación onChange de campos específicos del Stepper, manteniendo el formulario en modo onSubmit para preservar el rendimiento.
|
|
3
|
+
* @returns Objeto con funciones para manejar la validación dinámica
|
|
4
|
+
*/
|
|
5
|
+
export declare function useDynamicValidation(): {
|
|
6
|
+
activateFieldsValidation: (fields: string[]) => void;
|
|
7
|
+
clearAllValidation: () => void;
|
|
8
|
+
activeFields: string[];
|
|
9
|
+
};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { useState, useRef, useEffect, useCallback } from "react";
|
|
2
|
+
import { useFormContext, useWatch } from "react-hook-form";
|
|
3
|
+
function useDynamicValidation() {
|
|
4
|
+
const { trigger } = useFormContext();
|
|
5
|
+
const [activeFields, setActiveFields] = useState([]);
|
|
6
|
+
const watchValues = useWatch({
|
|
7
|
+
name: activeFields.length > 0 ? activeFields : ["__dummy__"]
|
|
8
|
+
});
|
|
9
|
+
const lastValuesRef = useRef({});
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (activeFields.length === 0) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
const currentValues = activeFields.length === 1 ? { [activeFields[0]]: watchValues } : activeFields.reduce((acc, field, index) => {
|
|
15
|
+
acc[field] = Array.isArray(watchValues) ? watchValues[index] : watchValues;
|
|
16
|
+
return acc;
|
|
17
|
+
}, {});
|
|
18
|
+
const changedFields = activeFields.filter((field) => {
|
|
19
|
+
const currentValue = currentValues[field];
|
|
20
|
+
const lastValue = lastValuesRef.current[field];
|
|
21
|
+
const hasChanged = JSON.stringify(currentValue) !== JSON.stringify(lastValue);
|
|
22
|
+
if (hasChanged) {
|
|
23
|
+
lastValuesRef.current[field] = currentValue;
|
|
24
|
+
}
|
|
25
|
+
return hasChanged;
|
|
26
|
+
});
|
|
27
|
+
if (changedFields.length > 0) {
|
|
28
|
+
const timeoutId = setTimeout(() => {
|
|
29
|
+
trigger(changedFields);
|
|
30
|
+
}, 100);
|
|
31
|
+
return () => clearTimeout(timeoutId);
|
|
32
|
+
}
|
|
33
|
+
}, [activeFields, trigger, watchValues]);
|
|
34
|
+
const activateFieldsValidation = useCallback((fields) => {
|
|
35
|
+
setActiveFields((prev) => {
|
|
36
|
+
const newFields = fields.filter((field) => !prev.includes(field));
|
|
37
|
+
return [...prev, ...newFields];
|
|
38
|
+
});
|
|
39
|
+
fields.forEach((field) => {
|
|
40
|
+
if (!lastValuesRef.current.hasOwnProperty(field)) {
|
|
41
|
+
lastValuesRef.current[field] = void 0;
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
}, []);
|
|
45
|
+
const clearAllValidation = useCallback(() => {
|
|
46
|
+
setActiveFields([]);
|
|
47
|
+
lastValuesRef.current = {};
|
|
48
|
+
}, []);
|
|
49
|
+
return {
|
|
50
|
+
activateFieldsValidation,
|
|
51
|
+
clearAllValidation,
|
|
52
|
+
activeFields
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
export {
|
|
56
|
+
useDynamicValidation as u
|
|
57
|
+
};
|
|
@@ -2,8 +2,10 @@ import { useCallback } from "react";
|
|
|
2
2
|
import { u as useStepper } from "../useStepper/index.js";
|
|
3
3
|
import { useFormContext } from "react-hook-form";
|
|
4
4
|
import { shallow } from "zustand/shallow";
|
|
5
|
+
import { u as useDynamicValidation } from "../useDynamicValidation/index.js";
|
|
5
6
|
function useStepperActions() {
|
|
6
7
|
const { trigger, clearErrors, getValues, reset } = useFormContext();
|
|
8
|
+
const { activateFieldsValidation, clearAllValidation } = useDynamicValidation();
|
|
7
9
|
const {
|
|
8
10
|
nextStep,
|
|
9
11
|
prevStep,
|
|
@@ -41,9 +43,22 @@ function useStepperActions() {
|
|
|
41
43
|
if (fieldsToValidate.length === 0) {
|
|
42
44
|
return true;
|
|
43
45
|
}
|
|
44
|
-
|
|
46
|
+
const result = await trigger(fieldsToValidate);
|
|
47
|
+
if (!result) {
|
|
48
|
+
activateFieldsValidation(fieldsToValidate);
|
|
49
|
+
}
|
|
50
|
+
return result;
|
|
45
51
|
};
|
|
46
52
|
const success = await nextStep(validateFn, formData);
|
|
53
|
+
if (success) {
|
|
54
|
+
const currentStepData = steps[currentStep - 1];
|
|
55
|
+
const fieldsJustValidated = currentStepData?.validationFields || [];
|
|
56
|
+
if (fieldsJustValidated.length > 0) {
|
|
57
|
+
setTimeout(() => {
|
|
58
|
+
clearAllValidation();
|
|
59
|
+
}, 100);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
47
62
|
if (success && futureFields.length > 0) {
|
|
48
63
|
clearErrors(futureFields);
|
|
49
64
|
setTimeout(() => {
|
|
@@ -62,13 +77,16 @@ function useStepperActions() {
|
|
|
62
77
|
steps,
|
|
63
78
|
currentStep,
|
|
64
79
|
trigger,
|
|
65
|
-
getValues
|
|
80
|
+
getValues,
|
|
81
|
+
activateFieldsValidation,
|
|
82
|
+
clearAllValidation
|
|
66
83
|
]);
|
|
67
84
|
const cancelAction = useCallback(() => {
|
|
68
85
|
reset();
|
|
69
86
|
clearErrors();
|
|
87
|
+
clearAllValidation();
|
|
70
88
|
resetStepper();
|
|
71
|
-
}, [reset, clearErrors, resetStepper]);
|
|
89
|
+
}, [reset, clearErrors, clearAllValidation, resetStepper]);
|
|
72
90
|
return { prevStepAction, nextStepAction, cancelAction };
|
|
73
91
|
}
|
|
74
92
|
export {
|
|
@@ -5,10 +5,12 @@ import { u as useStepper } from "../../hooks/useStepper/index.js";
|
|
|
5
5
|
import { e as StepAreaStyled, f as StepStyled, g as StepNameStyled } from "../../slots/StepperSlot.js";
|
|
6
6
|
import { I as Indicator } from "./subcomponents/Inidicator/index.js";
|
|
7
7
|
import { shallow } from "zustand/shallow";
|
|
8
|
+
import { u as useDynamicValidation } from "../../hooks/useDynamicValidation/index.js";
|
|
8
9
|
import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
|
|
9
10
|
function StepArea() {
|
|
10
11
|
const { trigger, clearErrors } = useFormContext();
|
|
11
12
|
const formValues = useWatch();
|
|
13
|
+
const { activateFieldsValidation } = useDynamicValidation();
|
|
12
14
|
const {
|
|
13
15
|
currentStep,
|
|
14
16
|
steps,
|
|
@@ -64,6 +66,7 @@ function StepArea() {
|
|
|
64
66
|
if (!isValid) {
|
|
65
67
|
setCurrentStep(stepOriginalIndex);
|
|
66
68
|
setStepValidationStatus(stepOriginalIndex, false);
|
|
69
|
+
activateFieldsValidation(step.validationFields || []);
|
|
67
70
|
return;
|
|
68
71
|
}
|
|
69
72
|
setStepValidationStatus(stepOriginalIndex, true);
|
|
@@ -76,6 +79,7 @@ function StepArea() {
|
|
|
76
79
|
const isCurrentValid = await trigger(currentStepData.validationFields);
|
|
77
80
|
if (!isCurrentValid) {
|
|
78
81
|
setStepValidationStatus(currentStepOriginalIndex, false);
|
|
82
|
+
activateFieldsValidation(currentStepData.validationFields || []);
|
|
79
83
|
return;
|
|
80
84
|
}
|
|
81
85
|
setStepValidationStatus(currentStepOriginalIndex, true);
|
|
@@ -3,7 +3,7 @@ import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from
|
|
|
3
3
|
/**
|
|
4
4
|
* TODO: Documentar
|
|
5
5
|
*/
|
|
6
|
-
export declare function useCustomForm({ validationSchema, values, statusLoad, mode }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
|
|
6
|
+
export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
|
|
7
7
|
/**
|
|
8
8
|
* TODO: Documentar
|
|
9
9
|
*/
|
|
@@ -6,7 +6,12 @@ import { yupResolver } from "@hookform/resolvers/yup";
|
|
|
6
6
|
import { F as FormProviderRoot } from "./styles.js";
|
|
7
7
|
import { R as RHFormProviderUtilityClasses } from "./classes/index.js";
|
|
8
8
|
const classes = RHFormProviderUtilityClasses();
|
|
9
|
-
function useCustomForm({
|
|
9
|
+
function useCustomForm({
|
|
10
|
+
validationSchema,
|
|
11
|
+
values,
|
|
12
|
+
statusLoad,
|
|
13
|
+
mode
|
|
14
|
+
}) {
|
|
10
15
|
const formMethods = useForm({
|
|
11
16
|
resolver: yupResolver(validationSchema),
|
|
12
17
|
defaultValues: values,
|
|
@@ -39,11 +44,31 @@ function useCustomForm({ validationSchema, values, statusLoad, mode }) {
|
|
|
39
44
|
}
|
|
40
45
|
function FormProviderCustom(props) {
|
|
41
46
|
const { children, onSubmit, className, handleSubmit } = props;
|
|
42
|
-
return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(
|
|
47
|
+
return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(
|
|
48
|
+
FormProviderRoot,
|
|
49
|
+
{
|
|
50
|
+
className: clsx(classes.root, className),
|
|
51
|
+
onSubmit: handleSubmit(onSubmit),
|
|
52
|
+
children
|
|
53
|
+
}
|
|
54
|
+
) });
|
|
43
55
|
}
|
|
44
56
|
function RHFormProvider(props) {
|
|
45
|
-
const {
|
|
46
|
-
|
|
57
|
+
const {
|
|
58
|
+
children,
|
|
59
|
+
onSubmit,
|
|
60
|
+
values,
|
|
61
|
+
validationSchema,
|
|
62
|
+
statusLoad = "ready",
|
|
63
|
+
className,
|
|
64
|
+
mode
|
|
65
|
+
} = props;
|
|
66
|
+
const formMethods = useCustomForm({
|
|
67
|
+
validationSchema,
|
|
68
|
+
statusLoad,
|
|
69
|
+
values,
|
|
70
|
+
mode
|
|
71
|
+
});
|
|
47
72
|
return /* @__PURE__ */ jsx(
|
|
48
73
|
FormProviderCustom,
|
|
49
74
|
{
|
package/components/index.d.ts
CHANGED
|
@@ -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,
|
|
@@ -11,7 +11,3 @@ export declare const TYPOGRAPHY_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";
|
|
|
11
11
|
* Inventario de clases CSS para el componente Typography.
|
|
12
12
|
*/
|
|
13
13
|
export declare const TYPOGRAPHY_CLASSES: Record<string, string>;
|
|
14
|
-
export declare const TYPOGRAPHY_FONTS: {
|
|
15
|
-
Inter: string;
|
|
16
|
-
Jura: string;
|
|
17
|
-
};
|
|
@@ -3,13 +3,8 @@ import { T as TypographySlots } from "./slots/typographyEnum.js";
|
|
|
3
3
|
const TYPOGRAPHY_KEY_COMPONENT = "M4LTypography";
|
|
4
4
|
const TYPOGRAPHY_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";
|
|
5
5
|
const TYPOGRAPHY_CLASSES = getComponentClasses(TYPOGRAPHY_KEY_COMPONENT, TypographySlots);
|
|
6
|
-
const TYPOGRAPHY_FONTS = {
|
|
7
|
-
Inter: "Inter",
|
|
8
|
-
Jura: "Jura"
|
|
9
|
-
};
|
|
10
6
|
export {
|
|
11
7
|
TYPOGRAPHY_CLASSES as T,
|
|
12
8
|
TYPOGRAPHY_KEY_COMPONENT as a,
|
|
13
|
-
TYPOGRAPHY_CLASS_NAME_SPECIFY as b
|
|
14
|
-
TYPOGRAPHY_FONTS as c
|
|
9
|
+
TYPOGRAPHY_CLASS_NAME_SPECIFY as b
|
|
15
10
|
};
|
|
@@ -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.
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
|
|
2
2
|
import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
|
|
3
|
-
import { c as TYPOGRAPHY_FONTS } from "./constants.js";
|
|
4
3
|
const typographyStyles = {
|
|
5
4
|
/**
|
|
6
5
|
* Slot: root
|
|
@@ -9,7 +8,6 @@ const typographyStyles = {
|
|
|
9
8
|
root: ({ ownerState, theme }) => ({
|
|
10
9
|
margin: 0,
|
|
11
10
|
cursor: "default",
|
|
12
|
-
fontFamily: TYPOGRAPHY_FONTS[ownerState?.fontFamily || "Inter"],
|
|
13
11
|
"&.M4lclassCssSpecificity": {
|
|
14
12
|
// Estilos generales 🌐
|
|
15
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";
|
|
@@ -266,24 +265,23 @@ export {
|
|
|
266
265
|
B2 as BoxIcon,
|
|
267
266
|
B3 as Breadcrumbs,
|
|
268
267
|
B5 as Button,
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
C5 as
|
|
277
|
-
C6 as
|
|
278
|
-
C7 as
|
|
279
|
-
C8 as
|
|
280
|
-
C9 as
|
|
281
|
-
C10 as
|
|
282
|
-
C11 as
|
|
283
|
-
C12 as
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
C3 as ContainerFlow,
|
|
268
|
+
C15 as CheckBox,
|
|
269
|
+
C as Chip,
|
|
270
|
+
C17 as ChipStatusFormatter,
|
|
271
|
+
C14 as CircularProgress,
|
|
272
|
+
C3 as ColumnBooleanFormatter,
|
|
273
|
+
C13 as ColumnChipStatusFormatter,
|
|
274
|
+
C4 as ColumnConcatenatedValueFormatter,
|
|
275
|
+
C5 as ColumnDateFormatter,
|
|
276
|
+
C6 as ColumnIconFormatter,
|
|
277
|
+
C7 as ColumnInteractiveCheckFormatter,
|
|
278
|
+
C8 as ColumnNestedValueFormatter,
|
|
279
|
+
C9 as ColumnPointsFormatter,
|
|
280
|
+
C10 as ColumnPriceFormatter,
|
|
281
|
+
C11 as ColumnSetCheckFormatter,
|
|
282
|
+
C12 as ColumnUncertaintyFormatter,
|
|
283
|
+
C16 as ConcatenatedFormatter,
|
|
284
|
+
C2 as ContainerFlow,
|
|
287
285
|
b3 as DATAGRID_ROW_HEADER_HEIGHTS,
|
|
288
286
|
a4 as DATAGRID_ROW_HEIGHTS,
|
|
289
287
|
e as DATAGRID_SEMANTIC_WIDTHS,
|
package/package.json
CHANGED
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
|
-
};
|