frontend-plus-react 0.8.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +2 -1
- package/dist/index.cjs +5 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +14 -4
- package/dist/index.css.map +1 -1
- package/dist/index.js +5 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -2,10 +2,19 @@
|
|
|
2
2
|
.rdg-light {
|
|
3
3
|
--rdg-border-color: #e0e0e0;
|
|
4
4
|
--rdg-header-background-color: #eceff1;
|
|
5
|
-
--rdg-row-hover-background-color:
|
|
6
|
-
--rdg-row-selected-background-color:
|
|
7
|
-
--rdg-row-selected-hover-background-color:
|
|
5
|
+
--rdg-row-hover-background-color: color-mix(in srgb, rgb(var(--primary-rgb, 25, 118, 210)) 6%, white);
|
|
6
|
+
--rdg-row-selected-background-color: color-mix(in srgb, rgb(var(--primary-rgb, 25, 118, 210)) 12%, white);
|
|
7
|
+
--rdg-row-selected-hover-background-color: color-mix(in srgb, rgb(var(--primary-rgb, 25, 118, 210)) 16%, white);
|
|
8
8
|
--rdg-selection-color: rgb(var(--primary-rgb, 25, 118, 210));
|
|
9
|
+
background-image:
|
|
10
|
+
repeating-linear-gradient(
|
|
11
|
+
to bottom,
|
|
12
|
+
transparent 0,
|
|
13
|
+
transparent 29px,
|
|
14
|
+
var(--rdg-border-color) 29px,
|
|
15
|
+
var(--rdg-border-color) 30px);
|
|
16
|
+
background-attachment: local;
|
|
17
|
+
content-visibility: visible;
|
|
9
18
|
}
|
|
10
19
|
.fpr-celda {
|
|
11
20
|
position: absolute;
|
|
@@ -53,10 +62,11 @@
|
|
|
53
62
|
max-width: 100%;
|
|
54
63
|
}
|
|
55
64
|
.fpr-boton-detalle {
|
|
65
|
+
position: absolute;
|
|
66
|
+
inset: 0;
|
|
56
67
|
display: flex;
|
|
57
68
|
justify-content: center;
|
|
58
69
|
align-items: center;
|
|
59
|
-
height: 100%;
|
|
60
70
|
}
|
|
61
71
|
.typed-controls-signal-no-data {
|
|
62
72
|
background-color: #fff9c4 !important;
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/grid/GenericDataGrid.css","../src/App.css"],"sourcesContent":["/* src/components/grid/GenericDataGrid.css */\n\n/* Colores alineados con el skin \"modern\" de backend-skins (my-tables.styl), para que una grilla de\n backend-plus que entra por el puente se parezca a esta. Si el CSS del skin está cargado se usa su\n --primary-rgb; si no, el azul de MUI (el mismo valor). */\n.rdg-light {\n --rdg-border-color: #e0e0e0;\n --rdg-header-background-color: #eceff1;\n --rdg-row-hover-background-color:
|
|
1
|
+
{"version":3,"sources":["../src/components/grid/GenericDataGrid.css","../src/App.css"],"sourcesContent":["/* src/components/grid/GenericDataGrid.css */\n\n/* Colores alineados con el skin \"modern\" de backend-skins (my-tables.styl), para que una grilla de\n backend-plus que entra por el puente se parezca a esta. Si el CSS del skin está cargado se usa su\n --primary-rgb; si no, el azul de MUI (el mismo valor). */\n.rdg-light {\n --rdg-border-color: #e0e0e0;\n --rdg-header-background-color: #eceff1;\n /* opacos (mezcla con blanco): con un color translúcido el patrón de filas vacías de abajo se vería como una raya en la fila */\n --rdg-row-hover-background-color: color-mix(in srgb, rgb(var(--primary-rgb, 25, 118, 210)) 6%, white);\n --rdg-row-selected-background-color: color-mix(in srgb, rgb(var(--primary-rgb, 25, 118, 210)) 12%, white);\n --rdg-row-selected-hover-background-color: color-mix(in srgb, rgb(var(--primary-rgb, 25, 118, 210)) 16%, white);\n --rdg-selection-color: rgb(var(--primary-rgb, 25, 118, 210));\n /* La grilla virtualiza: al scrollear rápido las filas tardan en dibujarse. Detrás se ve el patrón de filas vacías\n (30 px, el alto de ROW_HEIGHT, con el borde de las celdas) en lugar de blanco liso, y se acompaña el scroll. */\n background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, var(--rdg-border-color) 29px, var(--rdg-border-color) 30px);\n background-attachment: local;\n /* react-data-grid lo pone en auto y el navegador puede demorar el pintado de lo que acaba de entrar en pantalla */\n content-visibility: visible;\n}\n\n/* Celda de datos (reemplaza al Box + Typography de MUI que se armaba en cada celda) */\n.fpr-celda {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 12px 0 8px;\n box-sizing: border-box;\n font-size: 0.875rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: background-color 0.3s ease-in-out;\n}\n\n.fpr-celda-numerica {\n justify-content: flex-end;\n}\n\n/* Fila que se está borrando (antes era un style copiado en cada fila) */\n.fpr-fila-saliendo {\n opacity: 0;\n transition: opacity 0.4s ease-in-out;\n}\n\n/* Fila de detalle desplegada: una sola celda (colSpan) con la grilla anidada adentro */\n.fpr-fila-detalle > .rdg-cell {\n padding: 0;\n background-color: #f3f6fa;\n white-space: normal;\n /* react-data-grid recorta las celdas (overflow: clip, en un @layer): la grilla anidada\n puede ser más ancha que las columnas del padre, como el td de detalle de backend-plus */\n overflow: visible;\n}\n\n.fpr-detalle {\n position: sticky; /* queda a la vista aunque la grilla de arriba esté scrolleada a la derecha */\n left: 0;\n height: 100%;\n /* el ancho lo da el contenido (las columnas de la grilla anidada), hasta lo visible */\n width: max-content;\n box-sizing: border-box;\n padding: 4px 8px 4px 28px; /* sangría: se ve de qué fila es el detalle */\n border-left: 3px solid #90caf9;\n background-color: #f3f6fa;\n}\n\n/* Detalle que es una pantalla propia (wScreen): el contenido se mide y la fila toma su alto */\n.fpr-detalle-wscreen {\n height: 100%;\n overflow: auto;\n}\n\n.fpr-detalle-wscreen-contenido {\n width: max-content;\n max-width: 100%;\n}\n\n/* Sobre toda la celda (no sobre lo que queda dentro de su padding de 8 px a cada lado): la columna mide 30 px y\n el botón se corría hacia la derecha, fuera del centro de la columna y de su sigla en el encabezado */\n.fpr-boton-detalle {\n position: absolute;\n inset: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* Estas clases estaban solo en index.css, que la librería no importa */\n.typed-controls-signal-no-data {\n background-color: #fff9c4 !important;\n color: #fbc02d;\n font-weight: bold;\n}\n\n.typed-controls-signal-unknown-data {\n background-color: #ffe0b2 !important;\n color: #fb8c00;\n font-weight: bold;\n}\n","/* src/app.css */\n\n/* Estilos globales para asegurar que la aplicación ocupe el 100% del viewport\n y que el scroll sea gestionado por componentes específicos, no por la página. */\n html, body, #root {\n height: 100%; /* Ocupa el 100% del alto del viewport */\n margin: 0; /* Elimina márgenes por defecto del navegador */\n padding: 0; /* Elimina rellenos por defecto del navegador */\n overflow: hidden; /* ¡CLAVE! Previene scrolls a nivel de la página (horizontal y vertical) */\n box-sizing: border-box; /* Asegura que padding y border se incluyan en el width/height */\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* El contenedor principal de tu aplicación (si es <App />) */\n.App {\n height: 100%; /* Asegura que la App ocupe el 100% del alto de #root */\n display: flex; /* Utiliza flexbox para su contenido (MainLayout) */\n flex-direction: column; /* Los hijos se apilan verticalmente */\n}\n\n/* Otros estilos que tenías en tu archivo */\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh; /* Revisa si esto es necesario o si causa desbordamiento */\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n\n/* Estilos base para las filas de react-data-grid */\n.rdg-row {\n /* La transición debe ser lo suficientemente larga para ser visible */\n transition: opacity 0.5s ease-out, transform 0.5s ease-out;\n}\n\n/* Esta clase se aplica a la fila cuando se va a borrar */\n.deleting-row {\n opacity: 0; /* Hace que la fila se desvanezca */\n transform: translateX(-100%); /* Mueve la fila hacia la izquierda */\n pointer-events: none; /* Evita interacciones mientras se desvanece */\n}"],"mappings":"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","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -1398,8 +1398,12 @@ function BotonDetalle({ row, rowId, detailTable, deshabilitado }) {
|
|
|
1398
1398
|
IconButton,
|
|
1399
1399
|
{
|
|
1400
1400
|
size: "small",
|
|
1401
|
+
sx: { width: 24, height: 24, p: 0 },
|
|
1401
1402
|
disabled: deshabilitado,
|
|
1402
1403
|
onClick: (e) => alternarDetalle(row, rowId, detailTable, e.ctrlKey || e.metaKey),
|
|
1404
|
+
onMouseDown: (e) => {
|
|
1405
|
+
if (e.button === 1) e.preventDefault();
|
|
1406
|
+
},
|
|
1403
1407
|
onAuxClick: (e) => {
|
|
1404
1408
|
if (e.button === 1) alternarDetalle(row, rowId, detailTable, true);
|
|
1405
1409
|
},
|
|
@@ -2079,7 +2083,7 @@ var ActionsColumnHeaderCell = ({
|
|
|
2079
2083
|
)
|
|
2080
2084
|
] });
|
|
2081
2085
|
};
|
|
2082
|
-
var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ jsx6(Tooltip2, { title: detailTable.label, children: /* @__PURE__ */ jsx6(Typography2, { variant: "caption", sx: { fontSize: "0.75rem", fontWeight: "bold" }, children: detailTable.abr.toUpperCase() }) });
|
|
2086
|
+
var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ jsx6(Tooltip2, { title: detailTable.label, children: /* @__PURE__ */ jsx6(Box3, { sx: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx6(Typography2, { variant: "caption", sx: { fontSize: "0.75rem", fontWeight: "bold" }, children: detailTable.abr.toUpperCase() }) }) });
|
|
2083
2087
|
|
|
2084
2088
|
// src/components/grid/FilterInputRender.tsx
|
|
2085
2089
|
import { InputBase as InputBase3, Box as Box4 } from "@mui/material";
|