innoboxrr-form-core 2.6.0 → 2.7.0

package/README.md

@@ -67,6 +67,7 @@ setTheme({
 | Avisos | `toast`, `toastSuccess`, `toastDanger`, `toastWarning`, `toastTitle`, `toastClose`, `toastRegion` |
 | Tabla | `table`, `tableNumeric`, `tableSticky`, `tableSelect`, `tableResizer`, `tableEmpty`, `bulkBar`, `bulkCount`, `tableSort`, `tableContainer`, `tableFooter`, `tablePager` |
 | Listado | `datatable`, `datatableFilters`, `toolbarSpacer` |
+| Campos compuestos | `fileDrop`, `fileDropHint`, `avatarPreview`, `codeInput`, `codeCell`, `group`, `groupTitle`, `dragHandle`, `iconButtonDanger` |
 | Edición en línea | `editable` |
 | Shell de aplicación | `shell`, `shellHeader`, `shellSidebar`, `shellMain` |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-form-core",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "El nucleo agnostico de la interfaz innoboxrr: tema, iconos, estilos, archivos y zonas horarias.",
   "type": "module",
   "main": "index.js",

package/src/components.css

@@ -1254,6 +1254,147 @@
     width: auto;
 }
 
+/* ============================================================
+   CAMPOS COMPUESTOS
+   ============================================================ */
+
+/*
+ * La zona para soltar archivos. Se resalta al pasar el ratón, al enfocarla y
+ * mientras se arrastra algo encima (`data-dragging="true"`).
+ */
+.fe-file-drop {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--fe-space-2);
+    width: 100%;
+    padding: var(--fe-space-6) var(--fe-space-4);
+    font-size: var(--fe-text-sm);
+    text-align: center;
+    color: var(--fe-text-muted);
+    background: var(--fe-surface);
+    border: 2px dashed var(--fe-border-strong);
+    border-radius: var(--fe-radius-lg);
+    cursor: pointer;
+    transition: border-color var(--fe-transition), background var(--fe-transition);
+}
+
+.fe-file-drop p {
+    margin: 0;
+}
+
+.fe-file-drop:hover,
+.fe-file-drop[data-dragging='true'] {
+    border-color: var(--fe-primary);
+    background: var(--fe-primary-soft);
+}
+
+.fe-file-drop:focus-visible {
+    outline: 2px solid var(--fe-focus);
+    outline-offset: 2px;
+}
+
+.fe-file-drop-hint {
+    font-size: var(--fe-text-xs);
+    color: var(--fe-text-subtle);
+}
+
+/* La miniatura de un avatar, que se pulsa para cambiarlo. */
+.fe-avatar-preview {
+    box-sizing: border-box;
+    width: 6rem;
+    height: 6rem;
+    object-fit: cover;
+    border: 2px solid var(--fe-border);
+    border-radius: var(--fe-radius-full);
+    box-shadow: var(--fe-shadow);
+    cursor: pointer;
+    transition: border-color var(--fe-transition);
+}
+
+.fe-avatar-preview:hover {
+    border-color: var(--fe-primary);
+}
+
+.fe-avatar-preview:focus-visible {
+    outline: 2px solid var(--fe-focus);
+    outline-offset: 2px;
+}
+
+/* Las casillas de un código de un solo uso. */
+.fe-code-input {
+    display: flex;
+    justify-content: center;
+    gap: var(--fe-space-2);
+}
+
+.fe-code-cell {
+    box-sizing: border-box;
+    width: 3rem;
+    height: 3rem;
+    padding: 0;
+    font-family: var(--fe-font);
+    font-size: var(--fe-text-lg);
+    text-align: center;
+    color: var(--fe-text);
+    background: var(--fe-surface);
+    border: 1px solid var(--fe-border-strong);
+    border-radius: var(--fe-radius);
+    appearance: textfield;
+    transition: border-color var(--fe-transition), box-shadow var(--fe-transition);
+}
+
+.fe-code-cell:focus {
+    outline: none;
+    border-color: var(--fe-focus);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fe-focus) 22%, transparent);
+    caret-color: var(--fe-focus);
+}
+
+.fe-code-cell::-webkit-outer-spin-button,
+.fe-code-cell::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+}
+
+/*
+ * Un grupo de campos que se repite. Cada elemento es una superficie con su
+ * barra: el tirador para ordenarlo, el título y las acciones.
+ */
+.fe-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fe-space-2);
+}
+
+.fe-group-title {
+    margin: 0;
+    font-size: var(--fe-text-base);
+    font-weight: 600;
+    color: var(--fe-text);
+}
+
+.fe-drag-handle {
+    cursor: grab;
+    touch-action: none;
+}
+
+.fe-drag-handle:active {
+    cursor: grabbing;
+}
+
+/* Va después del botón de icono genérico para ganarle el color al pasar. */
+.fe-icon-button-danger {
+    color: var(--fe-danger);
+}
+
+.fe-icon-button-danger:hover:not(:disabled) {
+    color: var(--fe-danger);
+    background: var(--fe-danger-soft);
+}
+
 /* ============================================================
    EDICION EN LINEA
    ============================================================ */

package/src/theme.js

@@ -46,6 +46,14 @@ export const defaultTheme = {
     checkbox: 'fe-checkbox',
     radio: 'fe-radio',
     file: 'fe-file',
+    fileDrop: 'fe-file-drop',
+    fileDropHint: 'fe-file-drop-hint',
+    avatarPreview: 'fe-avatar-preview',
+    codeInput: 'fe-code-input',
+    codeCell: 'fe-code-cell',
+    group: 'fe-group',
+    groupTitle: 'fe-group-title',
+    dragHandle: 'fe-drag-handle',
 
     // BOTONES
     button: 'fe-button',
@@ -53,6 +61,7 @@ export const defaultTheme = {
     buttonDanger: 'fe-button-danger',
     buttonLink: 'fe-button-link',
     iconButton: 'fe-icon-button',
+    iconButtonDanger: 'fe-icon-button-danger',
 
     // NAVEGACION Y ACCIONES
     breadcrumb: 'fe-breadcrumb',