flysoft-react-ui 1.0.6 → 1.0.8
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/dist/components/form-controls/Pagination.d.ts +0 -7
- package/dist/components/form-controls/Pagination.d.ts.map +1 -1
- package/dist/components/form-controls/SearchSelectInput-OLD.d.ts +1 -1
- package/dist/components/form-controls/SearchSelectInput-OLD.d.ts.map +1 -1
- package/dist/components/form-controls/SearchSelectInput-OLD.js +3 -4
- package/dist/components/form-controls/SearchSelectInput.d.ts +1 -1
- package/dist/components/form-controls/SearchSelectInput.d.ts.map +1 -1
- package/dist/components/form-controls/index.d.ts +1 -1
- package/dist/components/form-controls/index.d.ts.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/layout/DataTable.d.ts +5 -1
- package/dist/components/layout/DataTable.d.ts.map +1 -1
- package/dist/components/layout/DataTable.js +2 -2
- package/dist/components/layout/Filter.d.ts +1 -1
- package/dist/components/layout/Filter.d.ts.map +1 -1
- package/dist/contexts/CrudContext.d.ts +1 -1
- package/dist/contexts/CrudContext.d.ts.map +1 -1
- package/dist/contexts/CrudContext.js +1 -1
- package/dist/docs/DataTableDocs.d.ts.map +1 -1
- package/dist/docs/DataTableDocs.js +1 -1
- package/dist/docs/docMockServices/empresaService.d.ts +1 -1
- package/dist/docs/docMockServices/empresaService.d.ts.map +1 -1
- package/dist/docs/docMockServices/personaService.d.ts +1 -1
- package/dist/docs/docMockServices/personaService.d.ts.map +1 -1
- package/dist/helpers/currencyFormat.d.ts +2 -0
- package/dist/helpers/currencyFormat.d.ts.map +1 -0
- package/dist/helpers/currencyFormat.js +3 -0
- package/dist/helpers/getErrorMessage.d.ts +2 -0
- package/dist/helpers/getErrorMessage.d.ts.map +1 -0
- package/dist/helpers/getErrorMessage.js +14 -0
- package/dist/helpers/getInitialLetters.d.ts +2 -0
- package/dist/helpers/getInitialLetters.d.ts.map +1 -0
- package/dist/helpers/getInitialLetters.js +5 -0
- package/dist/helpers/getQueryString.d.ts +2 -0
- package/dist/helpers/getQueryString.d.ts.map +1 -0
- package/dist/helpers/getQueryString.js +13 -0
- package/dist/helpers/index.d.ts +10 -0
- package/dist/helpers/index.d.ts.map +1 -0
- package/dist/helpers/index.js +9 -0
- package/dist/helpers/mappers.d.ts +3 -0
- package/dist/helpers/mappers.d.ts.map +1 -0
- package/dist/helpers/mappers.js +27 -0
- package/dist/helpers/nameValueArrayToObject.d.ts +3 -0
- package/dist/helpers/nameValueArrayToObject.d.ts.map +1 -0
- package/dist/helpers/nameValueArrayToObject.js +3 -0
- package/dist/helpers/objectToQueryString.d.ts +2 -0
- package/dist/helpers/objectToQueryString.d.ts.map +1 -0
- package/dist/helpers/objectToQueryString.js +3 -0
- package/dist/helpers/queryStringToObject.d.ts +2 -0
- package/dist/helpers/queryStringToObject.d.ts.map +1 -0
- package/dist/helpers/queryStringToObject.js +13 -0
- package/dist/helpers/regularExpressions.d.ts +12 -0
- package/dist/helpers/regularExpressions.d.ts.map +1 -0
- package/dist/helpers/regularExpressions.js +5 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/useEnum.d.ts +6 -0
- package/dist/hooks/useEnum.d.ts.map +1 -0
- package/dist/hooks/useEnum.js +21 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +4 -63
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -33
- package/dist/index.js.map +1 -1
- package/dist/interfaces/index.d.ts +3 -0
- package/dist/interfaces/index.d.ts.map +1 -0
- package/dist/interfaces/index.js +1 -0
- package/dist/interfaces/name-value.interface.d.ts +6 -0
- package/dist/interfaces/name-value.interface.d.ts.map +1 -0
- package/dist/interfaces/name-value.interface.js +1 -0
- package/dist/interfaces/pagination.interface.d.ts +8 -0
- package/dist/interfaces/pagination.interface.d.ts.map +1 -0
- package/dist/interfaces/pagination.interface.js +1 -0
- package/dist/services/index.d.ts +3 -0
- package/dist/services/index.d.ts.map +1 -0
- package/dist/services/index.js +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0FhD,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { InputProps } from "./Input";
|
|
3
|
-
import type { PaginationInterface } from "
|
|
3
|
+
import type { PaginationInterface } from "../../interfaces";
|
|
4
4
|
export interface SearchSelectOption {
|
|
5
5
|
label: string;
|
|
6
6
|
value?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchSelectInput-OLD.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/SearchSelectInput-OLD.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"SearchSelectInput-OLD.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/SearchSelectInput-OLD.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAI5D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB,CACrC,CAAC,GAAG,kBAAkB,EACtB,CAAC,GAAG,MAAM,CACV,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtD;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EACL,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GACxB,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC/C;;OAEG;IACH,iBAAiB,EAAE,CACjB,IAAI,EAAE,MAAM,KACT,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD;;;;OAIG;IACH,uBAAuB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAC9D;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAChE;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7C;AA6sCD,eAAO,MAAM,iBAAiB,EAAiC,CAC7D,CAAC,GAAG,kBAAkB,EACtB,CAAC,GAAG,MAAM,EAEV,KAAK,EAAE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IACpC,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;CAC5C,KACE,KAAK,CAAC,YAAY,CAAC"}
|
|
@@ -719,8 +719,8 @@ function SearchSelectInputInner({ value, onChange, onSearchPromiseFn, onSingleSe
|
|
|
719
719
|
? displayValue
|
|
720
720
|
: internalDisplayValue;
|
|
721
721
|
const displayValueStr = isRegisterMode
|
|
722
|
-
? displayValue ?? ""
|
|
723
|
-
: internalDisplayValue ?? "";
|
|
722
|
+
? (displayValue ?? "")
|
|
723
|
+
: (internalDisplayValue ?? "");
|
|
724
724
|
return ((isRegisterMode
|
|
725
725
|
? displayValueStr.trim() !== ""
|
|
726
726
|
: value !== undefined && value !== null && value !== "") &&
|
|
@@ -893,8 +893,7 @@ function SearchSelectInputInner({ value, onChange, onSearchPromiseFn, onSingleSe
|
|
|
893
893
|
}, delay);
|
|
894
894
|
});
|
|
895
895
|
}
|
|
896
|
-
}, [ref, isRegisterMode]
|
|
897
|
-
);
|
|
896
|
+
}, [ref, isRegisterMode]);
|
|
898
897
|
// Valor que se muestra en el input principal - completamente desacoplado del dialog
|
|
899
898
|
// Solo muestra el label de la opción seleccionada
|
|
900
899
|
const inputValue = React.useMemo(() => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { type InputProps } from "./Input";
|
|
3
|
-
import type { PaginationInterface } from "
|
|
3
|
+
import type { PaginationInterface } from "../../interfaces";
|
|
4
4
|
export interface SearchSelectOption {
|
|
5
5
|
label: string;
|
|
6
6
|
value?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchSelectInput.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/SearchSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"SearchSelectInput.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/SearchSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAK5D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,sBAAsB,CACrC,CAAC,GAAG,kBAAkB,EACtB,CAAC,GAAG,MAAM,CACV,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtD,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EACL,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GACxB,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC/C;;OAEG;IACH,iBAAiB,EAAE,CACjB,IAAI,EAAE,MAAM,KACT,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD;;;;OAIG;IACH,uBAAuB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAC9D;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAChE;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyfD,eAAO,MAAM,iBAAiB,EAA6B,CACzD,CAAC,GAAG,kBAAkB,EACtB,CAAC,GAAG,MAAM,EAEV,KAAK,EAAE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IACpC,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;CAC5C,KACE,KAAK,CAAC,YAAY,CAAC"}
|
|
@@ -15,7 +15,7 @@ export type { AutocompleteInputProps, AutocompleteOption, } from "./Autocomplete
|
|
|
15
15
|
export type { SearchSelectInputProps, SearchSelectOption, } from "./SearchSelectInput-OLD";
|
|
16
16
|
export type { DatePickerProps } from "./DatePicker";
|
|
17
17
|
export type { DateInputProps, DateInputFormat } from "./DateInput";
|
|
18
|
-
export type { PaginationProps
|
|
18
|
+
export type { PaginationProps } from "./Pagination";
|
|
19
19
|
export type { CheckboxProps } from "./Checkbox";
|
|
20
20
|
export type { RadioButtonGroupProps, RadioOption } from "./RadioButtonGroup";
|
|
21
21
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAC;AAGhC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAC;AAGhC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -24,6 +24,10 @@ export interface DataTableProps<T> {
|
|
|
24
24
|
locale?: string;
|
|
25
25
|
isLoading?: boolean;
|
|
26
26
|
loadingRows?: number;
|
|
27
|
+
/**
|
|
28
|
+
* Función opcional para aplicar clases CSS a una fila específica basada en sus datos.
|
|
29
|
+
*/
|
|
30
|
+
rowClassName?: (row: T) => string;
|
|
27
31
|
}
|
|
28
|
-
export declare const DataTable: <T>({ columns, rows, className, maxRows, locale, isLoading, loadingRows, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export declare const DataTable: <T>({ columns, rows, className, maxRows, locale, isLoading, loadingRows, rowClassName, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
29
33
|
//# sourceMappingURL=DataTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;IACjE,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;IACjE,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,sFAS3B,cAAc,CAAC,CAAC,CAAC,4CAkTnB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { DropdownMenu } from "./DropdownMenu";
|
|
4
|
-
export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es-AR", isLoading = false, loadingRows = 5, }) => {
|
|
4
|
+
export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es-AR", isLoading = false, loadingRows = 5, rowClassName, }) => {
|
|
5
5
|
// Calcular si necesitamos scroll
|
|
6
6
|
const displayRows = isLoading ? loadingRows : rows.length;
|
|
7
7
|
const needsScroll = maxRows !== undefined && displayRows > maxRows;
|
|
@@ -135,7 +135,7 @@ export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es
|
|
|
135
135
|
`, style: {
|
|
136
136
|
...(column.width ? { width: column.width } : {}),
|
|
137
137
|
}, children: _jsx(SkeletonCell, {}) }, colIndex))) }, `skeleton-${rowIndex}`)))
|
|
138
|
-
: rows.map((row, rowIndex) => (_jsx("tr", { className:
|
|
138
|
+
: rows.map((row, rowIndex) => (_jsx("tr", { className: `group/row border-b border-[var(--color-border-default)] transition-colors hover:bg-[var(--color-bg-secondary)] ${rowClassName ? rowClassName(row) : ""}`, children: columns.map((column, colIndex) => {
|
|
139
139
|
const cellValue = getCellValue(column, row);
|
|
140
140
|
const formattedValue = formatValue(cellValue, column.type);
|
|
141
141
|
const tooltip = column.tooltip
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { AutocompleteOption } from "../form-controls/AutocompleteInput";
|
|
3
3
|
import type { SearchSelectOption } from "../form-controls/SearchSelectInput";
|
|
4
|
-
import type { PaginationInterface } from "
|
|
4
|
+
import type { PaginationInterface } from "../../interfaces";
|
|
5
5
|
export interface StaticOption {
|
|
6
6
|
text: string;
|
|
7
7
|
value: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Filter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAE7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Filter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAE7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAI5D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,UAAU,EAAE,QAAQ,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB,CACtC,CAAC,GAAG,kBAAkB,EACtB,CAAC,GAAG,MAAM,CACV,SAAQ,eAAe;IACvB,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,UAAU,EAAE,QAAQ,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB,CACtC,CAAC,GAAG,kBAAkB,EACtB,CAAC,GAAG,MAAM,CACV,SAAQ,eAAe;IACvB,UAAU,EAAE,cAAc,CAAC;IAC3B,iBAAiB,EAAE,CACjB,IAAI,EAAE,MAAM,KACT,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD,uBAAuB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,MAAM,MAAM,WAAW,GACnB,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,uBAAuB,GACvB,iBAAiB,GACjB,uBAAuB,CAAC;AAE5B,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAm/BxC,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ReactNode, type Dispatch, type SetStateAction } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import type { PaginationInterface } from "../interfaces";
|
|
3
3
|
export interface CrudContextType<T> {
|
|
4
4
|
list: Array<T> | undefined;
|
|
5
5
|
item: T | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CrudContext.d.ts","sourceRoot":"","sources":["../../src/contexts/CrudContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CrudContext.d.ts","sourceRoot":"","sources":["../../src/contexts/CrudContext.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useContext, useEffect, useMemo, useRef, useState, useCallback, } from "react";
|
|
3
3
|
import { useSearchParams } from "react-router-dom";
|
|
4
|
-
import { Pagination
|
|
4
|
+
import { Pagination } from "../components/form-controls/Pagination";
|
|
5
5
|
import { useAsyncRequest } from "../hooks/useAsyncRequest";
|
|
6
6
|
const createCrudContext = () => {
|
|
7
7
|
return createContext(undefined);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DataTableDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"DataTableDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DataTableDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAi1B1B,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -239,6 +239,6 @@ const DataTableDocs = () => {
|
|
|
239
239
|
return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DataTable - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla b\u00E1sica" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo b\u00E1sico de una tabla con columnas simples usando nombres de propiedades." }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla completa con tipos de datos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Tabla con diferentes tipos de datos: currency, numeric y date. Las columnas se formatean autom\u00E1ticamente seg\u00FAn su tipo." }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con contenido personalizado y acciones" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Ejemplo con valores personalizados usando funciones, tooltips y componentes React como Badges. La columna de acciones usa la propiedad ", _jsx("code", { children: "actions" }), " que muestra un DropdownMenu con las acciones disponibles para cada fila. Cuando hay una sola acci\u00F3n (como en la columna \"Ver\"), se muestra directamente gracias a", " ", _jsx("code", { children: "replaceOnSingleOption" }), ", sin necesidad de abrir un men\u00FA."] }), _jsx(Card, { children: _jsx(DataTable, { columns: customColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con headers personalizados y acciones en header" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Los headers pueden ser ReactNode, permitiendo incluir iconos u otros componentes personalizados. Tambi\u00E9n puedes usar", " ", _jsx("code", { children: "headerActions" }), " para agregar un DropdownMenu con acciones en el header de la columna."] }), _jsx(Card, { children: _jsx(DataTable, { columns: headerCustomColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con scroll limitado (maxRows) y footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "maxRows" }), " puedes limitar el n\u00FAmero de filas visibles. Si hay m\u00E1s filas que el m\u00E1ximo, la tabla mostrar\u00E1 scroll solo en las filas mientras el header y el footer permanecen fijos. El footer se muestra usando la propiedad", " ", _jsx("code", { children: "footer" }), " en las columnas."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: allProducts, maxRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con locale personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "locale" }), " puedes cambiar el formato de los n\u00FAmeros (separador de miles y decimales). Por defecto usa", " ", _jsx("code", { children: "'es-AR'" }), ". En este ejemplo se usa ", _jsx("code", { children: "'en-US'" }), " ", "que formatea los n\u00FAmeros con coma como separador de miles y punto como separador decimal."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, locale: "en-US" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estado de carga (Loading)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando las props ", _jsx("code", { children: "isLoading" }), " y ", _jsx("code", { children: "loadingRows" }), " ", "puedes mostrar un estado de carga con skeleton loaders. Cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ", la tabla muestra las columnas pero reemplaza las filas de datos con filas skeleton que simulan el contenido. El n\u00FAmero de filas skeleton se controla con", " ", _jsx("code", { children: "loadingRows" }), " (por defecto 5)."] }), _jsx("div", { className: "mb-4", children: _jsx(Button, { variant: "primary", icon: "fa-sync-alt", onClick: () => {
|
|
240
240
|
setIsLoading(true);
|
|
241
241
|
setTimeout(() => setIsLoading(false), 3000);
|
|
242
|
-
}, disabled: isLoading, children: isLoading ? "Cargando..." : "Simular carga" }) }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, isLoading: isLoading, loadingRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Tipos de datos:" }), " Soporta text, numeric, currency y date con formateo autom\u00E1tico"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones por fila:" }), " Usa la propiedad", " ", _jsx("code", { children: "actions" }), " para mostrar un DropdownMenu con acciones espec\u00EDficas para cada fila"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones en header:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar un DropdownMenu con acciones en el header de la columna"] }), _jsxs("li", { children: [_jsx("strong", { children: "Alineaci\u00F3n:" }), " Cada columna puede tener su propia alineaci\u00F3n (left, right, center)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Ancho personalizado:" }), " Puedes definir el ancho de cada columna usando la propiedad width"] }), _jsxs("li", { children: [_jsx("strong", { children: "Valores personalizados:" }), " El value puede ser una funci\u00F3n que recibe la fila completa y retorna ReactNode"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tooltips:" }), " Soporte para tooltips personalizados por celda"] }), _jsxs("li", { children: [_jsx("strong", { children: "Headers personalizados:" }), " Los headers pueden ser ReactNode para incluir iconos o componentes"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover effect:" }), " Las filas tienen un efecto hover para mejor UX"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " La tabla tiene scroll horizontal autom\u00E1tico en pantallas peque\u00F1as"] }), _jsxs("li", { children: [_jsx("strong", { children: "Scroll limitado:" }), " Con maxRows puedes limitar el n\u00FAmero de filas visibles, manteniendo el header fijo y permitiendo scroll solo en las filas"] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "columns" }) }), _jsx("td", { className: "p-3 text-sm", children: "DataTableColumn<T>[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de columnas que define la estructura de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rows" }) }), _jsx("td", { className: "p-3 text-sm", children: "T[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de objetos que representan las filas de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "className" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para el contenedor de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "maxRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsx("td", { className: "p-3 text-sm", children: "M\u00E1ximo n\u00FAmero de filas visibles. Si hay m\u00E1s filas, se activa scroll vertical manteniendo el header fijo" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "locale" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsxs("td", { className: "p-3 text-sm", children: ["Locale para formateo de n\u00FAmeros (currency y numeric). Por defecto es ", _jsx("code", { children: "'es-AR'" }), ". Ejemplos:", " ", _jsx("code", { children: "'en-US'" }), ", ", _jsx("code", { children: "'es-ES'" }), ",", " ", _jsx("code", { children: "'de-DE'" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "isLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsxs("td", { className: "p-3 text-sm", children: ["Estado de carga. Cuando es ", _jsx("code", { children: "true" }), ", muestra filas skeleton en lugar de los datos. Por defecto es", " ", _jsx("code", { children: "false" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "loadingRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsxs("td", { className: "p-3 text-sm", children: ["N\u00FAmero de filas skeleton a mostrar cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es", " ", _jsx("code", { children: "5" })] })] })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "DataTableColumn Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "align" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"left\" | \"right\" | \"center\"" }), _jsx("td", { className: "p-3 text-sm", children: "Alineaci\u00F3n del contenido de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "width" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Ancho de la columna (ej: \"100px\", \"20%\")" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "header" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Texto o componente React para el header de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "value" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | number | ((row: T) => string | ReactNode)" }), _jsx("td", { className: "p-3 text-sm", children: "Nombre de la propiedad del objeto, valor directo, o funci\u00F3n que retorna el valor a mostrar" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "tooltip" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna el tooltip a mostrar al hacer hover sobre la celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "type" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"text\" | \"numeric\" | \"currency\" | \"date\"" }), _jsx("td", { className: "p-3 text-sm", children: "Tipo de dato que determina el formateo autom\u00E1tico" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "actions" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu para cada fila. Las acciones deben manejar sus propios eventos onClick." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerActions" }) }), _jsx("td", { className: "p-3 text-sm", children: "() => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu en el header de la columna. Las acciones deben manejar sus propios eventos onClick." })] })] })] }) })] })] }) }) }));
|
|
242
|
+
}, disabled: isLoading, children: isLoading ? "Cargando..." : "Simular carga" }) }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, isLoading: isLoading, loadingRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estilos condicionales (rowClassName)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "rowClassName" }), " puedes aplicar clases CSS a filas espec\u00EDficas bas\u00E1ndote en sus datos. En este ejemplo, los productos sin stock se resaltan con un fondo rojo suave."] }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products, rowClassName: (row) => row.stock === 0 ? "bg-red-50 dark:bg-red-900/20" : "" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Tipos de datos:" }), " Soporta text, numeric, currency y date con formateo autom\u00E1tico"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones por fila:" }), " Usa la propiedad", " ", _jsx("code", { children: "actions" }), " para mostrar un DropdownMenu con acciones espec\u00EDficas para cada fila"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones en header:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar un DropdownMenu con acciones en el header de la columna"] }), _jsxs("li", { children: [_jsx("strong", { children: "Alineaci\u00F3n:" }), " Cada columna puede tener su propia alineaci\u00F3n (left, right, center)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Ancho personalizado:" }), " Puedes definir el ancho de cada columna usando la propiedad width"] }), _jsxs("li", { children: [_jsx("strong", { children: "Valores personalizados:" }), " El value puede ser una funci\u00F3n que recibe la fila completa y retorna ReactNode"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tooltips:" }), " Soporte para tooltips personalizados por celda"] }), _jsxs("li", { children: [_jsx("strong", { children: "Headers personalizados:" }), " Los headers pueden ser ReactNode para incluir iconos o componentes"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover effect:" }), " Las filas tienen un efecto hover para mejor UX"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " La tabla tiene scroll horizontal autom\u00E1tico en pantallas peque\u00F1as"] }), _jsxs("li", { children: [_jsx("strong", { children: "Scroll limitado:" }), " Con maxRows puedes limitar el n\u00FAmero de filas visibles, manteniendo el header fijo y permitiendo scroll solo en las filas"] }), _jsxs("li", { children: [_jsx("strong", { children: "Estilos condicionales:" }), " Usa", " ", _jsx("code", { children: "rowClassName" }), " para aplicar clases CSS a filas espec\u00EDficas seg\u00FAn sus datos"] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "columns" }) }), _jsx("td", { className: "p-3 text-sm", children: "DataTableColumn<T>[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de columnas que define la estructura de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rows" }) }), _jsx("td", { className: "p-3 text-sm", children: "T[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de objetos que representan las filas de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "className" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para el contenedor de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "maxRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsx("td", { className: "p-3 text-sm", children: "M\u00E1ximo n\u00FAmero de filas visibles. Si hay m\u00E1s filas, se activa scroll vertical manteniendo el header fijo" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "locale" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsxs("td", { className: "p-3 text-sm", children: ["Locale para formateo de n\u00FAmeros (currency y numeric). Por defecto es ", _jsx("code", { children: "'es-AR'" }), ". Ejemplos:", " ", _jsx("code", { children: "'en-US'" }), ", ", _jsx("code", { children: "'es-ES'" }), ",", " ", _jsx("code", { children: "'de-DE'" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "isLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsxs("td", { className: "p-3 text-sm", children: ["Estado de carga. Cuando es ", _jsx("code", { children: "true" }), ", muestra filas skeleton en lugar de los datos. Por defecto es", " ", _jsx("code", { children: "false" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "loadingRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsxs("td", { className: "p-3 text-sm", children: ["N\u00FAmero de filas skeleton a mostrar cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es ", _jsx("code", { children: "5" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rowClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n opcional para aplicar clases CSS a una fila espec\u00EDfica basada en sus datos" })] })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "DataTableColumn Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "align" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"left\" | \"right\" | \"center\"" }), _jsx("td", { className: "p-3 text-sm", children: "Alineaci\u00F3n del contenido de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "width" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Ancho de la columna (ej: \"100px\", \"20%\")" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "header" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Texto o componente React para el header de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "value" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | number | ((row: T) => string | ReactNode)" }), _jsx("td", { className: "p-3 text-sm", children: "Nombre de la propiedad del objeto, valor directo, o funci\u00F3n que retorna el valor a mostrar" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "tooltip" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna el tooltip a mostrar al hacer hover sobre la celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "type" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"text\" | \"numeric\" | \"currency\" | \"date\"" }), _jsx("td", { className: "p-3 text-sm", children: "Tipo de dato que determina el formateo autom\u00E1tico" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "actions" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu para cada fila. Las acciones deben manejar sus propios eventos onClick." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerActions" }) }), _jsx("td", { className: "p-3 text-sm", children: "() => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu en el header de la columna. Las acciones deben manejar sus propios eventos onClick." })] })] })] }) })] })] }) }) }));
|
|
243
243
|
};
|
|
244
244
|
export default DataTableDocs;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"empresaService.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/empresaService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"empresaService.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/empresaService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAoB5D;;GAEG;AACH,eAAO,MAAM,cAAc;IACzB;;OAEG;oBACmB;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;IAY9D;;OAEG;6BAC4B;QAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,GAAG,OAAO,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;IA2CzC;;OAEG;oBACmB,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAW/C;;OAEG;qBACoB,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;IAe7D;;OAEG;eAEG,MAAM,SACH,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,GAClC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAW1B;;OAEG;sBACqB,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;CAYhD,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Persona, PersonaConEmpresas } from "./interfaces";
|
|
2
|
-
import type { PaginationInterface } from "../../
|
|
2
|
+
import type { PaginationInterface } from "../../interfaces";
|
|
3
3
|
/**
|
|
4
4
|
* Servicio mock para gestionar Personas en localStorage
|
|
5
5
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"personaService.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/personaService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAW,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"personaService.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/personaService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAW,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AA6D5D;;GAEG;AACH,eAAO,MAAM,cAAc;IACzB;;OAEG;oBACmB;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,kBAAkB,EAAE,CAAC;IAuBzE;;OAEG;6BAC4B;QAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,GAAG,OAAO,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;IAoEpD;;OAEG;oBACmB,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;IAM3D;;OAEG;qBACoB,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;IAoB7D;;OAEG;eAEG,MAAM,SACH,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,GAClC,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;IAgB/B;;OAEG;sBACqB,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;CAiBhD,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"currencyFormat.d.ts","sourceRoot":"","sources":["../../src/helpers/currencyFormat.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAE9C,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getErrorMessage.d.ts","sourceRoot":"","sources":["../../src/helpers/getErrorMessage.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,GAAI,OAAO,GAAG,KAAG,MAW5C,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { AxiosError } from 'axios';
|
|
2
|
+
export const getErrorMessage = (error) => {
|
|
3
|
+
console.log('ERR', error);
|
|
4
|
+
if (error instanceof AxiosError) {
|
|
5
|
+
const data = error.response?.data || {};
|
|
6
|
+
if (data.message) {
|
|
7
|
+
return data.message;
|
|
8
|
+
}
|
|
9
|
+
else if (data.errors) {
|
|
10
|
+
return Object.values(data.errors).join(', ');
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
return 'Ha ocurrido un error';
|
|
14
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getInitialLetters.d.ts","sourceRoot":"","sources":["../../src/helpers/getInitialLetters.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,GAAI,MAAM,MAAM,KAAG,MAIhD,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getQueryString.d.ts","sourceRoot":"","sources":["../../src/helpers/getQueryString.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,GAAI,QAAQ,eAAe,EAAE,WAAW,GAAG,KAAG,MAYxE,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export const getQueryString = (params, newParams) => {
|
|
2
|
+
const queryObject = {
|
|
3
|
+
...Object.fromEntries(params.entries()),
|
|
4
|
+
...newParams
|
|
5
|
+
};
|
|
6
|
+
let query = '';
|
|
7
|
+
for (const key in queryObject) {
|
|
8
|
+
if (queryObject[key]) {
|
|
9
|
+
query += (query !== '' ? '&' : '') + key + '=' + queryObject[key];
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
return '?' + query;
|
|
13
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export * from "./currencyFormat";
|
|
2
|
+
export * from "./getErrorMessage";
|
|
3
|
+
export * from "./getInitialLetters";
|
|
4
|
+
export * from "./getQueryString";
|
|
5
|
+
export * from "./mappers";
|
|
6
|
+
export * from "./nameValueArrayToObject";
|
|
7
|
+
export * from "./objectToQueryString";
|
|
8
|
+
export * from "./queryStringToObject";
|
|
9
|
+
export * from "./regularExpressions";
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export * from "./currencyFormat";
|
|
2
|
+
export * from "./getErrorMessage";
|
|
3
|
+
export * from "./getInitialLetters";
|
|
4
|
+
export * from "./getQueryString";
|
|
5
|
+
export * from "./mappers";
|
|
6
|
+
export * from "./nameValueArrayToObject";
|
|
7
|
+
export * from "./objectToQueryString";
|
|
8
|
+
export * from "./queryStringToObject";
|
|
9
|
+
export * from "./regularExpressions";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mappers.d.ts","sourceRoot":"","sources":["../../src/helpers/mappers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGzD,eAAO,MAAM,aAAa,GAAI,CAAC,EAAE,CAAC,EAAG,SAAS,OAAO,CAAC,GAAG,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,KAAI,OAAO,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAuBvI,CAAA"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export const promiseMapper = (promise, mapperFunction) => {
|
|
2
|
+
return new Promise((resolve, reject) => {
|
|
3
|
+
promise.then(res => {
|
|
4
|
+
if (Array.isArray(res)) {
|
|
5
|
+
resolve(res.map((i) => mapperFunction(i)));
|
|
6
|
+
}
|
|
7
|
+
else if (res.list !== undefined && res.total !== undefined && res.page !== undefined && res.pages !== undefined && res.limit !== undefined) {
|
|
8
|
+
resolve({
|
|
9
|
+
...res,
|
|
10
|
+
list: res.list.map((i) => mapperFunction(i))
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
else if (res.lista !== undefined && res.total !== undefined && res.pagina !== undefined && res.paginas !== undefined && res.mostrar !== undefined) {
|
|
14
|
+
resolve({
|
|
15
|
+
total: res.total,
|
|
16
|
+
list: res.lista.map((i) => mapperFunction(i)),
|
|
17
|
+
limit: res.mostrar,
|
|
18
|
+
page: res.pagina,
|
|
19
|
+
pages: res.paginas,
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
resolve(mapperFunction(res));
|
|
24
|
+
}
|
|
25
|
+
}).catch(error => reject(error));
|
|
26
|
+
});
|
|
27
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nameValueArrayToObject.d.ts","sourceRoot":"","sources":["../../src/helpers/nameValueArrayToObject.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAGvD,eAAO,MAAM,sBAAsB,GAAI,CAAC,EAAI,gBAAgB,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,OAEvF,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"objectToQueryString.d.ts","sourceRoot":"","sources":["../../src/helpers/objectToQueryString.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,GAAI,QAAQ,GAAG,KAAG,MAEjD,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"queryStringToObject.d.ts","sourceRoot":"","sources":["../../src/helpers/queryStringToObject.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,OAajD,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export const queryStringToObject = (params) => {
|
|
2
|
+
return params
|
|
3
|
+
.trim()
|
|
4
|
+
.split('&')
|
|
5
|
+
.filter(p => p.trim() !== '')
|
|
6
|
+
.reduce((obj, value) => {
|
|
7
|
+
const paramArr = value.split('=');
|
|
8
|
+
return {
|
|
9
|
+
...obj,
|
|
10
|
+
[paramArr[0]]: paramArr[1]
|
|
11
|
+
};
|
|
12
|
+
}, {});
|
|
13
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const RegularExpressions: {
|
|
2
|
+
email: RegExp;
|
|
3
|
+
dateString: RegExp;
|
|
4
|
+
password: ({ minLength, lowerCaseMin, upperCaseMin, digitsMin, specialCharMin }: {
|
|
5
|
+
minLength?: number | undefined;
|
|
6
|
+
lowerCaseMin?: number | undefined;
|
|
7
|
+
upperCaseMin?: number | undefined;
|
|
8
|
+
digitsMin?: number | undefined;
|
|
9
|
+
specialCharMin?: number | undefined;
|
|
10
|
+
}) => RegExp;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=regularExpressions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"regularExpressions.d.ts","sourceRoot":"","sources":["../../src/helpers/regularExpressions.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;;;;;CAU9B,CAAA"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export const RegularExpressions = {
|
|
2
|
+
email: new RegExp('[a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?'),
|
|
3
|
+
dateString: new RegExp('^\\d{4}[-]?((((0[13578])|(1[02]))[-]?(([0-2][0-9])|(3[01])))|(((0[469])|(11))[-]?(([0-2][0-9])|(30)))|(02[-]?[0-2][0-9]))$'),
|
|
4
|
+
password: ({ minLength = 0, lowerCaseMin = 0, upperCaseMin = 0, digitsMin = 0, specialCharMin = 0 }) => new RegExp(`^${lowerCaseMin ? '(?=(.*[a-z]){' + lowerCaseMin + '})' : ''}${upperCaseMin ? '(?=(.*[A-Z]){' + upperCaseMin + '})' : ''}${digitsMin ? '(?=(.*\\d){' + digitsMin + '})' : ''}${specialCharMin ? '(?=(.*[^a-zA-Z0-9]){' + specialCharMin + '})' : ''}([^\\s]){${minLength},}$`)
|
|
5
|
+
};
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { useGlobalThemeStyles } from "./useGlobalThemeStyles";
|
|
|
3
3
|
export { useBreakpoint } from "./useBreakpoint";
|
|
4
4
|
export { useElementScroll } from "./useElementScroll";
|
|
5
5
|
export { useAsyncRequest } from "./useAsyncRequest";
|
|
6
|
+
export { useEnum } from "./useEnum";
|
|
6
7
|
export type { Breakpoint, WindowSize, BreakpointInfo } from "./useBreakpoint";
|
|
7
8
|
export type { AsyncRequestOptions, UseAsyncRequestReturn } from "./useAsyncRequest";
|
|
8
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC9E,YAAY,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC9E,YAAY,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC"}
|
package/dist/hooks/index.js
CHANGED