flysoft-react-ui 1.1.10 → 1.1.12
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/App.d.ts.map +1 -1
- package/dist/App.js +1 -1
- package/dist/components/layout/AppLayout.d.ts +1 -0
- package/dist/components/layout/AppLayout.d.ts.map +1 -1
- package/dist/components/layout/AppLayout.js +3 -3
- package/dist/components/layout/DropdownMenu.d.ts +6 -1
- package/dist/components/layout/DropdownMenu.d.ts.map +1 -1
- package/dist/components/layout/DropdownMenu.js +28 -3
- package/dist/components/layout/DropdownPanel.d.ts +6 -1
- package/dist/components/layout/DropdownPanel.d.ts.map +1 -1
- package/dist/components/layout/DropdownPanel.js +28 -3
- package/dist/components/utils/Skeleton.d.ts +14 -0
- package/dist/components/utils/Skeleton.d.ts.map +1 -0
- package/dist/components/utils/Skeleton.js +10 -0
- package/dist/components/utils/index.d.ts +2 -0
- package/dist/components/utils/index.d.ts.map +1 -1
- package/dist/components/utils/index.js +1 -0
- package/dist/contexts/AppLayoutContext.d.ts +3 -0
- package/dist/contexts/AppLayoutContext.d.ts.map +1 -1
- package/dist/contexts/AppLayoutContext.js +10 -4
- package/dist/contexts/ThemeContext.d.ts +1 -0
- package/dist/contexts/ThemeContext.d.ts.map +1 -1
- package/dist/contexts/ThemeContext.js +27 -1
- package/dist/contexts/types.d.ts +1 -0
- package/dist/contexts/types.d.ts.map +1 -1
- package/dist/docs/DocsMenu.d.ts.map +1 -1
- package/dist/docs/DocsMenu.js +1 -1
- package/dist/docs/DocsRouter.d.ts.map +1 -1
- package/dist/docs/DocsRouter.js +2 -1
- package/dist/docs/DropdownMenuDocs.d.ts.map +1 -1
- package/dist/docs/DropdownMenuDocs.js +2 -2
- package/dist/docs/DropdownPanelDocs.d.ts.map +1 -1
- package/dist/docs/DropdownPanelDocs.js +1 -1
- package/dist/docs/LoaderDocs.js +2 -2
- package/dist/docs/SkeletonDocs.d.ts +4 -0
- package/dist/docs/SkeletonDocs.d.ts.map +1 -0
- package/dist/docs/SkeletonDocs.js +7 -0
- package/dist/index.css +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/App.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAGA,OAAO,aAAa,CAAC;AAuDrB,iBAAS,GAAG,
|
|
1
|
+
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAGA,OAAO,aAAa,CAAC;AAuDrB,iBAAS,GAAG,4CA2BX;AAED,eAAe,GAAG,CAAC"}
|
package/dist/App.js
CHANGED
|
@@ -25,6 +25,6 @@ function App() {
|
|
|
25
25
|
headerNode: _jsx(LeftDrawerHeader, {}),
|
|
26
26
|
contentNode: _jsx(DocsMenu, {}),
|
|
27
27
|
footerNode: _jsx(LeftDrawerFooter, {}),
|
|
28
|
-
}, children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(HomeContent, {}) }), _jsx(Route, { path: "/docs/*", element: _jsx(DocsRouter, {}) })] }) }));
|
|
28
|
+
}, initialContentFooter: _jsx("div", { className: "bg-gray-300 text-white", children: "Footer" }), children: _jsx("div", { className: "p-4", children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(HomeContent, {}) }), _jsx(Route, { path: "/docs/*", element: _jsx(DocsRouter, {}) })] }) }) }));
|
|
29
29
|
}
|
|
30
30
|
export default App;
|
|
@@ -3,6 +3,7 @@ import type { NavbarInterface, LeftDrawerInterface } from "../../contexts/AppLay
|
|
|
3
3
|
export interface AppLayoutProps {
|
|
4
4
|
navbar?: NavbarInterface;
|
|
5
5
|
leftDrawer?: LeftDrawerInterface;
|
|
6
|
+
contentFooter?: React.ReactNode;
|
|
6
7
|
children: React.ReactNode;
|
|
7
8
|
className?: string;
|
|
8
9
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/AppLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/AppLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmf9C,CAAC"}
|
|
@@ -3,7 +3,7 @@ import React, { useState, useRef } from "react";
|
|
|
3
3
|
import { useBreakpoint } from "../../hooks";
|
|
4
4
|
import { useElementScroll } from "../../hooks/useElementScroll";
|
|
5
5
|
import { Button } from "../form-controls";
|
|
6
|
-
export const AppLayout = ({ navbar, leftDrawer, children, className = "", }) => {
|
|
6
|
+
export const AppLayout = ({ navbar, leftDrawer, contentFooter, children, className = "", }) => {
|
|
7
7
|
// Extract values from interfaces
|
|
8
8
|
const navBarLeftNode = navbar?.navBarLeftNode;
|
|
9
9
|
const navBarRightNode = navbar?.navBarRightNode;
|
|
@@ -206,7 +206,7 @@ export const AppLayout = ({ navbar, leftDrawer, children, className = "", }) =>
|
|
|
206
206
|
flex-shrink-0
|
|
207
207
|
`;
|
|
208
208
|
const contentClasses = `
|
|
209
|
-
flex-1 overflow-y-auto
|
|
209
|
+
flex-1 overflow-y-auto flex flex-col
|
|
210
210
|
`;
|
|
211
211
|
// Clases del overlay móvil
|
|
212
212
|
const overlayClasses = `
|
|
@@ -228,5 +228,5 @@ export const AppLayout = ({ navbar, leftDrawer, children, className = "", }) =>
|
|
|
228
228
|
const mobileDrawerContentClasses = `
|
|
229
229
|
flex-1 overflow-y-auto scrollbar-hide
|
|
230
230
|
`;
|
|
231
|
-
return (_jsxs("div", { className: layoutClasses, children: [fullWidthNavbar ? (_jsxs(_Fragment, { children: [shouldShowNavbar && (_jsx("nav", { className: navbarClasses, style: navbarStyle, children: _jsxs("div", { className: navbarContentClasses, style: navbarContentStyle, children: [_jsxs("div", { className: navbarLeftClasses, children: [shouldShowMobileDrawer && hasLeftDrawerContent && (_jsx("div", { className: "pr-4 lg:px-4 md:px-3", children: _jsx(Button, { variant: "ghost", icon: "fa-bars", onClick: handleMobileDrawerToggle, "aria-label": "Abrir men\u00FA" }) })), navBarLeftNode && (_jsx("div", { children: typeof navBarLeftNode === "string" ? (_jsx("span", { children: navBarLeftNode })) : (navBarLeftNode) }))] }), navBarRightNode && (_jsx("div", { className: navbarRightClasses, children: typeof navBarRightNode === "string" ? (_jsx("span", { children: navBarRightNode })) : (navBarRightNode) }))] }) })), _jsxs("div", { className: mainClasses, style: mainStyle, children: [shouldShowDesktopDrawer && (_jsxs("aside", { className: leftDrawerClasses, style: leftDrawerStyle, children: [leftDrawerHeader && (_jsx("div", { className: leftDrawerHeaderClasses, children: leftDrawerHeader })), leftDrawerContent && (_jsx("div", { className: leftDrawerContentClasses, children: leftDrawerContent })), leftDrawerFooter && (_jsx("div", { className: leftDrawerFooterClasses, children: leftDrawerFooter }))] })),
|
|
231
|
+
return (_jsxs("div", { className: layoutClasses, children: [fullWidthNavbar ? (_jsxs(_Fragment, { children: [shouldShowNavbar && (_jsx("nav", { className: navbarClasses, style: navbarStyle, children: _jsxs("div", { className: navbarContentClasses, style: navbarContentStyle, children: [_jsxs("div", { className: navbarLeftClasses, children: [shouldShowMobileDrawer && hasLeftDrawerContent && (_jsx("div", { className: "pr-4 lg:px-4 md:px-3", children: _jsx(Button, { variant: "ghost", icon: "fa-bars", onClick: handleMobileDrawerToggle, "aria-label": "Abrir men\u00FA" }) })), navBarLeftNode && (_jsx("div", { children: typeof navBarLeftNode === "string" ? (_jsx("span", { children: navBarLeftNode })) : (navBarLeftNode) }))] }), navBarRightNode && (_jsx("div", { className: navbarRightClasses, children: typeof navBarRightNode === "string" ? (_jsx("span", { children: navBarRightNode })) : (navBarRightNode) }))] }) })), _jsxs("div", { className: mainClasses, style: mainStyle, children: [shouldShowDesktopDrawer && (_jsxs("aside", { className: leftDrawerClasses, style: leftDrawerStyle, children: [leftDrawerHeader && (_jsx("div", { className: leftDrawerHeaderClasses, children: leftDrawerHeader })), leftDrawerContent && (_jsx("div", { className: leftDrawerContentClasses, children: leftDrawerContent })), leftDrawerFooter && (_jsx("div", { className: leftDrawerFooterClasses, children: leftDrawerFooter }))] })), _jsxs("main", { ref: contentRef, className: contentClasses, style: contentStyle, children: [_jsx("div", { className: "flex-1", children: children }), contentFooter && _jsx("div", { role: "contentinfo", children: contentFooter })] })] })] })) : (_jsx(_Fragment, { children: _jsxs("div", { className: contentWrapperClasses, children: [shouldShowDesktopDrawer && (_jsxs("aside", { className: leftDrawerClasses, style: leftDrawerStyle, children: [leftDrawerHeader && (_jsx("div", { className: leftDrawerHeaderClasses, children: leftDrawerHeader })), leftDrawerContent && (_jsx("div", { className: leftDrawerContentClasses, children: leftDrawerContent })), leftDrawerFooter && (_jsx("div", { className: leftDrawerFooterClasses, children: leftDrawerFooter }))] })), _jsxs("div", { className: drawerAndContentClasses, style: drawerAndContentStyle, children: [shouldShowNavbar && (_jsx("nav", { className: navbarClasses, style: navbarStyle, children: _jsxs("div", { className: navbarContentClasses, style: navbarContentStyle, children: [_jsxs("div", { className: navbarLeftClasses, children: [shouldShowMobileDrawer && hasLeftDrawerContent && (_jsx("div", { className: "pr-4 px-2", children: _jsx(Button, { variant: "ghost", icon: "fa-bars", onClick: handleMobileDrawerToggle, "aria-label": "Abrir men\u00FA" }) })), navBarLeftNode && (_jsx("div", { children: typeof navBarLeftNode === "string" ? (_jsx("span", { children: navBarLeftNode })) : (navBarLeftNode) }))] }), navBarRightNode && (_jsx("div", { className: navbarRightClasses, children: typeof navBarRightNode === "string" ? (_jsx("span", { children: navBarRightNode })) : (navBarRightNode) }))] }) })), _jsxs("main", { ref: contentRef, className: contentClasses, style: contentStyle, children: [_jsx("div", { className: "flex-1", children: children }), contentFooter && _jsx("div", { role: "contentinfo", children: contentFooter })] })] })] }) })), shouldShowMobileDrawer && hasLeftDrawerContent && isMobileDrawerOpen && (_jsx("div", { className: overlayClasses, onClick: handleOverlayClick })), shouldShowMobileDrawer && hasLeftDrawerContent && (_jsxs("aside", { className: `${mobileDrawerBaseClasses} ${isMobileDrawerOpen ? mobileDrawerOpenClasses : ""}`, style: mobileDrawerStyle, children: [_jsxs("div", { className: "flex-shrink-0 flex items-center justify-between", children: [leftDrawerHeader ? (_jsx("div", { className: "flex-1", children: leftDrawerHeader })) : (_jsx("div", { className: "flex-1" })), _jsx("div", { className: "absolute top-3 right-2", children: _jsx(Button, { variant: "ghost", icon: "fa-times", onClick: handleMobileDrawerToggle, "aria-label": "Cerrar men\u00FA" }) })] }), leftDrawerContent && (_jsx("div", { className: mobileDrawerContentClasses, children: leftDrawerContent })), leftDrawerFooter && (_jsx("div", { className: "flex-shrink-0", children: leftDrawerFooter }))] }))] }));
|
|
232
232
|
};
|
|
@@ -18,8 +18,13 @@ export interface DropdownMenuProps<T = {
|
|
|
18
18
|
* Por defecto es false.
|
|
19
19
|
*/
|
|
20
20
|
replaceOnSingleOption?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Si es true, el menú se abre al pasar el mouse por encima.
|
|
23
|
+
* Por defecto es false.
|
|
24
|
+
*/
|
|
25
|
+
openOnHover?: boolean;
|
|
21
26
|
}
|
|
22
27
|
export declare const DropdownMenu: <T = {
|
|
23
28
|
label: string;
|
|
24
|
-
}>({ options, onOptionSelected, renderNode, getOptionLabel, renderOption, replaceOnSingleOption, }: DropdownMenuProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
}>({ options, onOptionSelected, renderNode, getOptionLabel, renderOption, replaceOnSingleOption, openOnHover, }: DropdownMenuProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
25
30
|
//# sourceMappingURL=DropdownMenu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,gBAAgB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,gBAAgB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,GAAI,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAAG,8GAQlD,iBAAiB,CAAC,CAAC,CAAC,4CAwPtB,CAAC"}
|
|
@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import React, { useState, useRef, useEffect, useCallback, useMemo, } from "react";
|
|
3
3
|
import { createPortal } from "react-dom";
|
|
4
4
|
import { Button } from "../form-controls/Button";
|
|
5
|
-
export const DropdownMenu = ({ options, onOptionSelected, renderNode, getOptionLabel, renderOption, replaceOnSingleOption = false, }) => {
|
|
5
|
+
export const DropdownMenu = ({ options, onOptionSelected, renderNode, getOptionLabel, renderOption, replaceOnSingleOption = false, openOnHover = false, }) => {
|
|
6
6
|
const [isOpen, setIsOpen] = useState(false);
|
|
7
7
|
const [menuPosition, setMenuPosition] = useState("bottom");
|
|
8
8
|
const [scrollUpdate, setScrollUpdate] = useState(0);
|
|
9
9
|
const triggerRef = useRef(null);
|
|
10
10
|
const menuRef = useRef(null);
|
|
11
|
+
const hoverTimeoutRef = useRef(null);
|
|
11
12
|
// Calcular posición del menú
|
|
12
13
|
const calculatePosition = useCallback(() => {
|
|
13
14
|
if (isOpen && triggerRef.current) {
|
|
@@ -80,6 +81,14 @@ export const DropdownMenu = ({ options, onOptionSelected, renderNode, getOptionL
|
|
|
80
81
|
document.removeEventListener("keydown", handleEscape);
|
|
81
82
|
};
|
|
82
83
|
}, [isOpen]);
|
|
84
|
+
// Limpiar timeout al desmontar
|
|
85
|
+
useEffect(() => {
|
|
86
|
+
return () => {
|
|
87
|
+
if (hoverTimeoutRef.current) {
|
|
88
|
+
window.clearTimeout(hoverTimeoutRef.current);
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
}, []);
|
|
83
92
|
const labelGetter = useCallback((item) => {
|
|
84
93
|
if (getOptionLabel)
|
|
85
94
|
return getOptionLabel(item);
|
|
@@ -89,6 +98,22 @@ export const DropdownMenu = ({ options, onOptionSelected, renderNode, getOptionL
|
|
|
89
98
|
const handleToggle = () => {
|
|
90
99
|
setIsOpen(!isOpen);
|
|
91
100
|
};
|
|
101
|
+
const handleMouseEnter = () => {
|
|
102
|
+
if (!openOnHover)
|
|
103
|
+
return;
|
|
104
|
+
if (hoverTimeoutRef.current) {
|
|
105
|
+
window.clearTimeout(hoverTimeoutRef.current);
|
|
106
|
+
hoverTimeoutRef.current = null;
|
|
107
|
+
}
|
|
108
|
+
setIsOpen(true);
|
|
109
|
+
};
|
|
110
|
+
const handleMouseLeave = () => {
|
|
111
|
+
if (!openOnHover)
|
|
112
|
+
return;
|
|
113
|
+
hoverTimeoutRef.current = window.setTimeout(() => {
|
|
114
|
+
setIsOpen(false);
|
|
115
|
+
}, 150); // Pequeño delay para permitir mover el mouse al menú
|
|
116
|
+
};
|
|
92
117
|
const handleOptionClick = (item) => {
|
|
93
118
|
onOptionSelected(item);
|
|
94
119
|
setIsOpen(false);
|
|
@@ -137,9 +162,9 @@ export const DropdownMenu = ({ options, onOptionSelected, renderNode, getOptionL
|
|
|
137
162
|
if (shouldReplace && singleOption) {
|
|
138
163
|
return (_jsx("div", { onClick: () => handleOptionClick(singleOption), className: "cursor-pointer", children: renderOption ? renderOption(singleOption) : labelGetter(singleOption) }));
|
|
139
164
|
}
|
|
140
|
-
return (_jsxs("div", { className: "relative inline-block", ref: triggerRef, children: [_jsx("div", { onClick: handleToggle, className: "cursor-pointer", children: renderNode ? (renderNode) : (_jsx(Button, { variant: "ghost", icon: "fa-ellipsis-h" })) }), isOpen &&
|
|
165
|
+
return (_jsxs("div", { className: "relative inline-block", ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx("div", { onClick: handleToggle, className: "cursor-pointer", children: renderNode ? (renderNode) : (_jsx(Button, { variant: "ghost", icon: "fa-ellipsis-h" })) }), isOpen &&
|
|
141
166
|
(typeof document !== "undefined" && document.body
|
|
142
|
-
? createPortal(_jsx("div", { ref: menuRef, className: "fixed z-[2000] bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded-md shadow-[var(--shadow-lg)] py-1 min-w-[160px] font-[var(--font-default)]", style: menuStyles, children: options.map((option, index) => {
|
|
167
|
+
? createPortal(_jsx("div", { ref: menuRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, className: "fixed z-[2000] bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded-md shadow-[var(--shadow-lg)] py-1 min-w-[160px] font-[var(--font-default)]", style: menuStyles, children: options.map((option, index) => {
|
|
143
168
|
const key = String(option?.id ??
|
|
144
169
|
labelGetter(option) ??
|
|
145
170
|
index);
|
|
@@ -2,6 +2,11 @@ import React from "react";
|
|
|
2
2
|
export interface DropdownPanelProps {
|
|
3
3
|
renderNode?: React.ReactNode;
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* Si es true, el panel se abre al pasar el mouse por encima.
|
|
7
|
+
* Por defecto es false.
|
|
8
|
+
*/
|
|
9
|
+
openOnHover?: boolean;
|
|
5
10
|
}
|
|
6
|
-
export declare const DropdownPanel: ({ renderNode, children, }: DropdownPanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const DropdownPanel: ({ renderNode, children, openOnHover, }: DropdownPanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
12
|
//# sourceMappingURL=DropdownPanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownPanel.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DropdownPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,kBAAkB;
|
|
1
|
+
{"version":3,"file":"DropdownPanel.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DropdownPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,GAAI,wCAI3B,kBAAkB,4CAoNpB,CAAC"}
|
|
@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import React, { useState, useRef, useEffect, useCallback, useMemo, } from "react";
|
|
3
3
|
import { createPortal } from "react-dom";
|
|
4
4
|
import { Button } from "../form-controls/Button";
|
|
5
|
-
export const DropdownPanel = ({ renderNode, children, }) => {
|
|
5
|
+
export const DropdownPanel = ({ renderNode, children, openOnHover = false, }) => {
|
|
6
6
|
const [isOpen, setIsOpen] = useState(false);
|
|
7
7
|
const [menuPosition, setMenuPosition] = useState("bottom");
|
|
8
8
|
const [scrollUpdate, setScrollUpdate] = useState(0);
|
|
9
9
|
const triggerRef = useRef(null);
|
|
10
10
|
const menuRef = useRef(null);
|
|
11
|
+
const hoverTimeoutRef = useRef(null);
|
|
11
12
|
// Calcular posición del menú
|
|
12
13
|
const calculatePosition = useCallback(() => {
|
|
13
14
|
if (isOpen && triggerRef.current) {
|
|
@@ -84,9 +85,33 @@ export const DropdownPanel = ({ renderNode, children, }) => {
|
|
|
84
85
|
document.removeEventListener("keydown", handleEscape);
|
|
85
86
|
};
|
|
86
87
|
}, [isOpen]);
|
|
88
|
+
// Limpiar timeout al desmontar
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
return () => {
|
|
91
|
+
if (hoverTimeoutRef.current) {
|
|
92
|
+
window.clearTimeout(hoverTimeoutRef.current);
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
}, []);
|
|
87
96
|
const handleToggle = () => {
|
|
88
97
|
setIsOpen(!isOpen);
|
|
89
98
|
};
|
|
99
|
+
const handleMouseEnter = () => {
|
|
100
|
+
if (!openOnHover)
|
|
101
|
+
return;
|
|
102
|
+
if (hoverTimeoutRef.current) {
|
|
103
|
+
window.clearTimeout(hoverTimeoutRef.current);
|
|
104
|
+
hoverTimeoutRef.current = null;
|
|
105
|
+
}
|
|
106
|
+
setIsOpen(true);
|
|
107
|
+
};
|
|
108
|
+
const handleMouseLeave = () => {
|
|
109
|
+
if (!openOnHover)
|
|
110
|
+
return;
|
|
111
|
+
hoverTimeoutRef.current = window.setTimeout(() => {
|
|
112
|
+
setIsOpen(false);
|
|
113
|
+
}, 150); // Pequeño delay para permitir mover el mouse al panel
|
|
114
|
+
};
|
|
90
115
|
const menuStyles = useMemo(() => {
|
|
91
116
|
if (!isOpen || !triggerRef.current) {
|
|
92
117
|
return {};
|
|
@@ -130,8 +155,8 @@ export const DropdownPanel = ({ renderNode, children, }) => {
|
|
|
130
155
|
// scrollUpdate se usa intencionalmente para forzar el recálculo en scroll
|
|
131
156
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
132
157
|
}, [isOpen, menuPosition, scrollUpdate]);
|
|
133
|
-
return (_jsxs("div", { className: "relative inline-block", ref: triggerRef, children: [_jsx("div", { onClick: handleToggle, className: "cursor-pointer", children: renderNode ? (renderNode) : (_jsx(Button, { variant: "ghost", icon: "fa-ellipsis-h" })) }), isOpen &&
|
|
158
|
+
return (_jsxs("div", { className: "relative inline-block", ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx("div", { onClick: handleToggle, className: "cursor-pointer", children: renderNode ? (renderNode) : (_jsx(Button, { variant: "ghost", icon: "fa-ellipsis-h" })) }), isOpen &&
|
|
134
159
|
(typeof document !== "undefined" && document.body
|
|
135
|
-
? createPortal(_jsx("div", { ref: menuRef, className: "fixed z-[2000] bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded-md shadow-[var(--shadow-lg)] py-1 min-w-[160px] font-[var(--font-default)]", style: menuStyles, children: children }), document.body)
|
|
160
|
+
? createPortal(_jsx("div", { ref: menuRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, className: "fixed z-[2000] bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded-md shadow-[var(--shadow-lg)] py-1 min-w-[160px] font-[var(--font-default)]", style: menuStyles, children: children }), document.body)
|
|
136
161
|
: null)] }));
|
|
137
162
|
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface SkeletonProps {
|
|
3
|
+
/**
|
|
4
|
+
* Clases adicionales de Tailwind para personalizar el skeleton (medidas, bordes, etc.)
|
|
5
|
+
* La animación y el fondo base se mantendrán a menos que se sobreescriban explícitamente.
|
|
6
|
+
*/
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Componente Skeleton para mostrar estados de carga.
|
|
11
|
+
* Consiste en un div con una animación de pulso y un fondo grisáceo por defecto.
|
|
12
|
+
*/
|
|
13
|
+
export declare const Skeleton: React.FC<SkeletonProps>;
|
|
14
|
+
//# sourceMappingURL=Skeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAS5C,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { twMerge } from "tailwind-merge";
|
|
4
|
+
/**
|
|
5
|
+
* Componente Skeleton para mostrar estados de carga.
|
|
6
|
+
* Consiste en un div con una animación de pulso y un fondo grisáceo por defecto.
|
|
7
|
+
*/
|
|
8
|
+
export const Skeleton = ({ className }) => {
|
|
9
|
+
return (_jsx("div", { className: twMerge("animate-pulse bg-[var(--color-bg-secondary)] rounded-md", className) }));
|
|
10
|
+
};
|
|
@@ -14,4 +14,6 @@ export { Snackbar } from "./Snackbar";
|
|
|
14
14
|
export type { SnackbarProps } from "./Snackbar";
|
|
15
15
|
export { SnackbarContainer } from "./SnackbarContainer";
|
|
16
16
|
export type { SnackbarContainerProps } from "./SnackbarContainer";
|
|
17
|
+
export { Skeleton } from "./Skeleton";
|
|
18
|
+
export type { SkeletonProps } from "./Skeleton";
|
|
17
19
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -17,9 +17,11 @@ export interface LeftDrawerInterface {
|
|
|
17
17
|
export interface AppLayoutContextType extends ThemeContextType {
|
|
18
18
|
navbar: NavbarInterface | undefined;
|
|
19
19
|
leftDrawer: LeftDrawerInterface | undefined;
|
|
20
|
+
contentFooter: ReactNode | undefined;
|
|
20
21
|
className: string;
|
|
21
22
|
setNavbar: Dispatch<SetStateAction<NavbarInterface | undefined>>;
|
|
22
23
|
setLeftDrawer: Dispatch<SetStateAction<LeftDrawerInterface | undefined>>;
|
|
24
|
+
setContentFooter: (node: ReactNode | undefined) => void;
|
|
23
25
|
setClassName: (className: string) => void;
|
|
24
26
|
setNavBarLeftNode: (node: string | ReactNode | undefined) => void;
|
|
25
27
|
setNavbarRightNode: (node: string | ReactNode | undefined) => void;
|
|
@@ -31,6 +33,7 @@ interface AppLayoutProviderProps {
|
|
|
31
33
|
forceInitialTheme?: boolean;
|
|
32
34
|
initialNavbar?: NavbarInterface;
|
|
33
35
|
initialLeftDrawer?: LeftDrawerInterface;
|
|
36
|
+
initialContentFooter?: ReactNode;
|
|
34
37
|
className?: string;
|
|
35
38
|
}
|
|
36
39
|
export declare const AppLayoutProvider: React.FC<AppLayoutProviderProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppLayoutContext.d.ts","sourceRoot":"","sources":["../../src/contexts/AppLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EAEd,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKvD,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAE5D,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAGlB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC;IACjE,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAC;IACzE,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAClE,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CACpE;AAMD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"AppLayoutContext.d.ts","sourceRoot":"","sources":["../../src/contexts/AppLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EAEd,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKvD,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAE5D,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C,aAAa,EAAE,SAAS,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC;IAGlB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC;IACjE,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAC;IACzE,gBAAgB,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAClE,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CACpE;AAMD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8ID,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6B9D,CAAC;AAIF,eAAO,MAAM,YAAY,QAAO,oBAM/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,eAG/B,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { SnackbarProvider } from "./SnackbarContext";
|
|
|
6
6
|
import { SnackbarContainer } from "../components/utils/SnackbarContainer";
|
|
7
7
|
const AppLayoutContext = createContext(undefined);
|
|
8
8
|
// Internal component that uses ThemeContext and provides AppLayoutContext
|
|
9
|
-
const AppLayoutProviderInner = ({ children, initialNavbar, initialLeftDrawer, initialClassName }) => {
|
|
9
|
+
const AppLayoutProviderInner = ({ children, initialNavbar, initialLeftDrawer, initialContentFooter, initialClassName, }) => {
|
|
10
10
|
// Get theme context
|
|
11
11
|
const themeContext = useTheme();
|
|
12
12
|
// Layout state - ensure default height is set
|
|
@@ -18,6 +18,7 @@ const AppLayoutProviderInner = ({ children, initialNavbar, initialLeftDrawer, in
|
|
|
18
18
|
return defaultNavbar;
|
|
19
19
|
});
|
|
20
20
|
const [leftDrawer, setLeftDrawer] = useState(initialLeftDrawer || {});
|
|
21
|
+
const [contentFooter, setContentFooter] = useState(initialContentFooter);
|
|
21
22
|
const [className, setClassName] = useState(initialClassName || "");
|
|
22
23
|
// Memoize setters to avoid unnecessary re-renders
|
|
23
24
|
const handleSetNavbar = useCallback((newNavbar) => {
|
|
@@ -29,6 +30,9 @@ const AppLayoutProviderInner = ({ children, initialNavbar, initialLeftDrawer, in
|
|
|
29
30
|
const handleSetClassName = useCallback((newClassName) => {
|
|
30
31
|
setClassName(newClassName);
|
|
31
32
|
}, []);
|
|
33
|
+
const handleSetContentFooter = useCallback((node) => {
|
|
34
|
+
setContentFooter(node);
|
|
35
|
+
}, []);
|
|
32
36
|
// Setters para actualizar solo los nodos del navbar
|
|
33
37
|
const handleSetNavBarLeftNode = useCallback((node) => {
|
|
34
38
|
setNavbar((prev) => {
|
|
@@ -68,18 +72,20 @@ const AppLayoutProviderInner = ({ children, initialNavbar, initialLeftDrawer, in
|
|
|
68
72
|
// Layout state
|
|
69
73
|
navbar,
|
|
70
74
|
leftDrawer,
|
|
75
|
+
contentFooter,
|
|
71
76
|
className,
|
|
72
77
|
// Layout setters
|
|
73
78
|
setNavbar: handleSetNavbar,
|
|
74
79
|
setLeftDrawer: handleSetLeftDrawer,
|
|
80
|
+
setContentFooter: handleSetContentFooter,
|
|
75
81
|
setClassName: handleSetClassName,
|
|
76
82
|
setNavBarLeftNode: handleSetNavBarLeftNode,
|
|
77
83
|
setNavbarRightNode: handleSetNavbarRightNode,
|
|
78
84
|
};
|
|
79
|
-
return (_jsx(AppLayoutContext.Provider, { value: value, children: _jsx(AppLayout, { navbar: navbar, leftDrawer: leftDrawer, className: className, children: children }) }));
|
|
85
|
+
return (_jsx(AppLayoutContext.Provider, { value: value, children: _jsx(AppLayout, { navbar: navbar, leftDrawer: leftDrawer, contentFooter: contentFooter, className: className, children: children }) }));
|
|
80
86
|
};
|
|
81
|
-
export const AppLayoutProvider = ({ children, initialTheme = "light", storageKey = "flysoft-theme", forceInitialTheme = false, initialNavbar, initialLeftDrawer, className = "", }) => {
|
|
82
|
-
return (_jsx(ThemeProvider, { initialTheme: initialTheme, storageKey: storageKey, forceInitialTheme: forceInitialTheme, children: _jsxs(SnackbarProvider, { children: [_jsx(AppLayoutProviderInner, { initialNavbar: initialNavbar, initialLeftDrawer: initialLeftDrawer, initialClassName: className, children: children }), _jsx(SnackbarContainer, { position: "bottom-right" })] }) }));
|
|
87
|
+
export const AppLayoutProvider = ({ children, initialTheme = "light", storageKey = "flysoft-theme", forceInitialTheme = false, initialNavbar, initialLeftDrawer, initialContentFooter, className = "", }) => {
|
|
88
|
+
return (_jsx(ThemeProvider, { initialTheme: initialTheme, storageKey: storageKey, forceInitialTheme: forceInitialTheme, children: _jsxs(SnackbarProvider, { children: [_jsx(AppLayoutProviderInner, { initialNavbar: initialNavbar, initialLeftDrawer: initialLeftDrawer, initialContentFooter: initialContentFooter, initialClassName: className, children: children }), _jsx(SnackbarContainer, { position: "bottom-right" })] }) }));
|
|
83
89
|
};
|
|
84
90
|
// Hook to use AppLayout context
|
|
85
91
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
@@ -5,6 +5,7 @@ interface ThemeProviderProps {
|
|
|
5
5
|
initialTheme?: string | Theme;
|
|
6
6
|
storageKey?: string;
|
|
7
7
|
forceInitialTheme?: boolean;
|
|
8
|
+
onThemeChange?: (theme: Theme) => void;
|
|
8
9
|
}
|
|
9
10
|
export declare const ThemeProvider: React.FC<ThemeProviderProps>;
|
|
10
11
|
export declare const useTheme: () => ThemeContextType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2CvD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2CvD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiMtD,CAAC;AAIF,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC;AAIF,eAAO,MAAM,eAAe,eAG3B,CAAC"}
|
|
@@ -31,7 +31,7 @@ const buildThemeResetStyles = (theme) => {
|
|
|
31
31
|
...cssVariables,
|
|
32
32
|
};
|
|
33
33
|
};
|
|
34
|
-
export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "flysoft-theme", forceInitialTheme = false, }) => {
|
|
34
|
+
export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "flysoft-theme", forceInitialTheme = false, onThemeChange, }) => {
|
|
35
35
|
// Almacenar el tema inicial para poder resetear a él
|
|
36
36
|
const getInitialTheme = () => {
|
|
37
37
|
if (typeof initialTheme === "string") {
|
|
@@ -130,9 +130,34 @@ export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "
|
|
|
130
130
|
if (typeof window !== "undefined") {
|
|
131
131
|
localStorage.setItem(storageKey, JSON.stringify(newTheme));
|
|
132
132
|
}
|
|
133
|
+
// Trigger external callback
|
|
134
|
+
onThemeChange?.(newTheme);
|
|
133
135
|
// Apply to CSS
|
|
134
136
|
applyThemeToCSS(newTheme);
|
|
135
137
|
};
|
|
138
|
+
// Function to update theme partially
|
|
139
|
+
const updateTheme = (updates) => {
|
|
140
|
+
setCurrentTheme((prev) => {
|
|
141
|
+
const newTheme = typeof updates === "function"
|
|
142
|
+
? updates(prev)
|
|
143
|
+
: {
|
|
144
|
+
...prev,
|
|
145
|
+
...updates,
|
|
146
|
+
colors: { ...prev.colors, ...updates.colors },
|
|
147
|
+
shadows: { ...prev.shadows, ...updates.shadows },
|
|
148
|
+
radius: { ...prev.radius, ...updates.radius },
|
|
149
|
+
spacing: { ...prev.spacing, ...updates.spacing },
|
|
150
|
+
fonts: { ...prev.fonts, ...updates.fonts },
|
|
151
|
+
};
|
|
152
|
+
// Save to localStorage
|
|
153
|
+
if (typeof window !== "undefined") {
|
|
154
|
+
localStorage.setItem(storageKey, JSON.stringify(newTheme));
|
|
155
|
+
}
|
|
156
|
+
// Trigger external callback
|
|
157
|
+
onThemeChange?.(newTheme);
|
|
158
|
+
return newTheme;
|
|
159
|
+
});
|
|
160
|
+
};
|
|
136
161
|
// Function to reset to initial theme (the one passed as initialTheme prop)
|
|
137
162
|
const resetToDefault = () => {
|
|
138
163
|
setTheme(getInitialTheme());
|
|
@@ -147,6 +172,7 @@ export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "
|
|
|
147
172
|
const value = {
|
|
148
173
|
theme: currentTheme,
|
|
149
174
|
setTheme,
|
|
175
|
+
updateTheme,
|
|
150
176
|
currentThemeName,
|
|
151
177
|
availableThemes: Object.keys(themes),
|
|
152
178
|
resetToDefault,
|
package/dist/contexts/types.d.ts
CHANGED
|
@@ -77,6 +77,7 @@ export interface Theme {
|
|
|
77
77
|
export interface ThemeContextType {
|
|
78
78
|
theme: Theme;
|
|
79
79
|
setTheme: (theme: Theme | string) => void;
|
|
80
|
+
updateTheme: (updates: Partial<Theme> | ((prev: Theme) => Theme)) => void;
|
|
80
81
|
currentThemeName: string;
|
|
81
82
|
availableThemes: string[];
|
|
82
83
|
resetToDefault: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/contexts/types.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/contexts/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+
|
|
1
|
+
{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAoTpB,CAAC"}
|
package/dist/docs/DocsMenu.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Accordion, LinkButton } from "../index";
|
|
3
3
|
export const DocsMenu = () => {
|
|
4
|
-
return (_jsxs("div", { className: "space-y-2 p-4 bg-gray-100 h-full", children: [_jsx(Accordion, { title: "Form Controls", icon: "fa-edit", defaultOpen: true, children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/button", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Button" }), _jsx(LinkButton, { to: "/docs/linkbutton", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "LinkButton" }), _jsx(LinkButton, { to: "/docs/input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Input" }), _jsx(LinkButton, { to: "/docs/autocomplete-input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "AutocompleteInput" }), _jsx(LinkButton, { to: "/docs/search-select-input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "SearchSelectInput" }), _jsx(LinkButton, { to: "/docs/datepicker", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DatePicker" }), _jsx(LinkButton, { to: "/docs/dateinput", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DateInput" }), _jsx(LinkButton, { to: "/docs/checkbox", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Checkbox" }), _jsx(LinkButton, { to: "/docs/radiobuttongroup", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "RadioButtonGroup" }), _jsx(LinkButton, { to: "/docs/pagination", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Pagination" })] }) }), _jsx(Accordion, { title: "Layout", icon: "fa-th-large", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/card", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Card" }), _jsx(LinkButton, { to: "/docs/datafield", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DataField" }), _jsx(LinkButton, { to: "/docs/tabsgroup", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "TabsGroup" }), _jsx(LinkButton, { to: "/docs/datatable", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DataTable" }), _jsx(LinkButton, { to: "/docs/accordion", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Accordion" }), _jsx(LinkButton, { to: "/docs/menu", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Menu" }), _jsx(LinkButton, { to: "/docs/dropdownmenu", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DropdownMenu" }), _jsx(LinkButton, { to: "/docs/dropdownpanel", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DropdownPanel" }), _jsx(LinkButton, { to: "/docs/filter", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Filter" })] }) }), _jsx(Accordion, { title: "Utils", icon: "fa-tools", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/badge", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Badge" }), _jsx(LinkButton, { to: "/docs/avatar", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Avatar" }), _jsx(LinkButton, { to: "/docs/roadmap", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "RoadMap" }), _jsx(LinkButton, { to: "/docs/dialog", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Dialog" }), _jsx(LinkButton, { to: "/docs/loader", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Loader" }), _jsx(LinkButton, { to: "/docs/snackbar", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Snackbar" }), _jsx(LinkButton, { to: "/docs/theme", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "ThemeSwitcher" })] }) }), _jsx(Accordion, { title: "Contexts", icon: "fa-database", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/auth", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "AuthContext" }), _jsx(LinkButton, { to: "/docs/listcrud", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "CrudContext" })] }) }), _jsx(Accordion, { title: "Otros", icon: "fa-folder", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/example-form", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Formulario de Ejemplo" }), _jsx(LinkButton, { to: "/docs/admin", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Admin (Mock Services)" })] }) })] }));
|
|
4
|
+
return (_jsxs("div", { className: "space-y-2 p-4 bg-gray-100 h-full", children: [_jsx(Accordion, { title: "Form Controls", icon: "fa-edit", defaultOpen: true, children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/button", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Button" }), _jsx(LinkButton, { to: "/docs/linkbutton", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "LinkButton" }), _jsx(LinkButton, { to: "/docs/input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Input" }), _jsx(LinkButton, { to: "/docs/autocomplete-input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "AutocompleteInput" }), _jsx(LinkButton, { to: "/docs/search-select-input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "SearchSelectInput" }), _jsx(LinkButton, { to: "/docs/datepicker", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DatePicker" }), _jsx(LinkButton, { to: "/docs/dateinput", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DateInput" }), _jsx(LinkButton, { to: "/docs/checkbox", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Checkbox" }), _jsx(LinkButton, { to: "/docs/radiobuttongroup", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "RadioButtonGroup" }), _jsx(LinkButton, { to: "/docs/pagination", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Pagination" })] }) }), _jsx(Accordion, { title: "Layout", icon: "fa-th-large", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/card", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Card" }), _jsx(LinkButton, { to: "/docs/datafield", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DataField" }), _jsx(LinkButton, { to: "/docs/tabsgroup", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "TabsGroup" }), _jsx(LinkButton, { to: "/docs/datatable", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DataTable" }), _jsx(LinkButton, { to: "/docs/accordion", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Accordion" }), _jsx(LinkButton, { to: "/docs/menu", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Menu" }), _jsx(LinkButton, { to: "/docs/dropdownmenu", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DropdownMenu" }), _jsx(LinkButton, { to: "/docs/dropdownpanel", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DropdownPanel" }), _jsx(LinkButton, { to: "/docs/filter", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Filter" })] }) }), _jsx(Accordion, { title: "Utils", icon: "fa-tools", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/badge", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Badge" }), _jsx(LinkButton, { to: "/docs/avatar", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Avatar" }), _jsx(LinkButton, { to: "/docs/roadmap", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "RoadMap" }), _jsx(LinkButton, { to: "/docs/dialog", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Dialog" }), _jsx(LinkButton, { to: "/docs/loader", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Loader" }), _jsx(LinkButton, { to: "/docs/skeleton", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Skeleton" }), _jsx(LinkButton, { to: "/docs/snackbar", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Snackbar" }), _jsx(LinkButton, { to: "/docs/theme", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "ThemeSwitcher" })] }) }), _jsx(Accordion, { title: "Contexts", icon: "fa-database", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/auth", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "AuthContext" }), _jsx(LinkButton, { to: "/docs/listcrud", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "CrudContext" })] }) }), _jsx(Accordion, { title: "Otros", icon: "fa-folder", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/example-form", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Formulario de Ejemplo" }), _jsx(LinkButton, { to: "/docs/admin", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Admin (Mock Services)" })] }) })] }));
|
|
5
5
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkC1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAsC9B,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
package/dist/docs/DocsRouter.js
CHANGED
|
@@ -30,8 +30,9 @@ import RadioButtonGroupDocs from "./RadioButtonGroupDocs";
|
|
|
30
30
|
import MenuDocs from "./MenuDocs";
|
|
31
31
|
import SnackbarDocs from "./SnackbarDocs";
|
|
32
32
|
import AccordionDocs from "./AccordionDocs";
|
|
33
|
+
import SkeletonDocs from "./SkeletonDocs";
|
|
33
34
|
import DocAdmin from "./DocAdmin";
|
|
34
35
|
export const DocsRouter = () => {
|
|
35
|
-
return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "linkbutton", element: _jsx(LinkButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "avatar", element: _jsx(AvatarDocs, {}) }), _jsx(Route, { path: "roadmap", element: _jsx(RoadMapDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "search-select-input", element: _jsx(SearchSelectInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "checkbox", element: _jsx(CheckboxDocs, {}) }), _jsx(Route, { path: "radiobuttongroup", element: _jsx(RadioButtonGroupDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "tabsgroup", element: _jsx(TabsGroupDocs, {}) }), _jsx(Route, { path: "dialog", element: _jsx(DialogDocs, {}) }), _jsx(Route, { path: "pagination", element: _jsx(PaginationDocs, {}) }), _jsx(Route, { path: "loader", element: _jsx(LoaderDocs, {}) }), _jsx(Route, { path: "datatable", element: _jsx(DataTableDocs, {}) }), _jsx(Route, { path: "dropdownmenu", element: _jsx(DropdownMenuDocs, {}) }), _jsx(Route, { path: "dropdownpanel", element: _jsx(DropdownPanelDocs, {}) }), _jsx(Route, { path: "filter", element: _jsx(FilterDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) }), _jsx(Route, { path: "listcrud/empresa/:id", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "listcrud", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "example-form", element: _jsx(ExampleFormDocs, {}) }), _jsx(Route, { path: "menu", element: _jsx(MenuDocs, {}) }), _jsx(Route, { path: "snackbar", element: _jsx(SnackbarDocs, {}) }), _jsx(Route, { path: "accordion", element: _jsx(AccordionDocs, {}) }), _jsx(Route, { path: "admin", element: _jsx(DocAdmin, {}) })] }));
|
|
36
|
+
return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "linkbutton", element: _jsx(LinkButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "avatar", element: _jsx(AvatarDocs, {}) }), _jsx(Route, { path: "roadmap", element: _jsx(RoadMapDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "search-select-input", element: _jsx(SearchSelectInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "checkbox", element: _jsx(CheckboxDocs, {}) }), _jsx(Route, { path: "radiobuttongroup", element: _jsx(RadioButtonGroupDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "tabsgroup", element: _jsx(TabsGroupDocs, {}) }), _jsx(Route, { path: "dialog", element: _jsx(DialogDocs, {}) }), _jsx(Route, { path: "pagination", element: _jsx(PaginationDocs, {}) }), _jsx(Route, { path: "loader", element: _jsx(LoaderDocs, {}) }), _jsx(Route, { path: "datatable", element: _jsx(DataTableDocs, {}) }), _jsx(Route, { path: "dropdownmenu", element: _jsx(DropdownMenuDocs, {}) }), _jsx(Route, { path: "dropdownpanel", element: _jsx(DropdownPanelDocs, {}) }), _jsx(Route, { path: "filter", element: _jsx(FilterDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) }), _jsx(Route, { path: "listcrud/empresa/:id", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "listcrud", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "example-form", element: _jsx(ExampleFormDocs, {}) }), _jsx(Route, { path: "menu", element: _jsx(MenuDocs, {}) }), _jsx(Route, { path: "snackbar", element: _jsx(SnackbarDocs, {}) }), _jsx(Route, { path: "accordion", element: _jsx(AccordionDocs, {}) }), _jsx(Route, { path: "skeleton", element: _jsx(SkeletonDocs, {}) }), _jsx(Route, { path: "admin", element: _jsx(DocAdmin, {}) })] }));
|
|
36
37
|
};
|
|
37
38
|
export default DocsRouter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DropdownMenuDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqBxC,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"DropdownMenuDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DropdownMenuDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqBxC,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EA2vB7B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|