Tareas #8562

Feature: Soporte para inyección de estilos CSS personalizados mediante JSON de configuración

Añadido por Anielkis Herrera hace 18 días.

Estado:NuevaFecha de inicio:2026-03-04
Prioridad:NormalFecha fin:
Asignado a:Desarrollo% Realizado:

0%

Categoría:DesarrolloTiempo dedicado:-
Versión prevista:Backlog widget
App related: Tipo de funcionalidad:

Descripción

Objetivo:

Extender las capacidades de personalización del componente permitiendo la definición de reglas CSS arbitrarias dentro de la clave styles del objeto theme.

Especificación del JSON:

Se debe dar soporte a una nueva estructura dentro de la configuración del tema:

"theme": {
    "name": "light",
    "colors": {
        "primary": "#BB0000",
        "secondary": "#6c757d" 
    },
    "fontFamily": "system-ui, ...",
    "fontSize": "12px",
    "styles": {
        "ul li": {
            "list-style": "none",
            "padding": "0" 
        }
    }
}

Reglas de Implementación (Vue.js):

  1. Encapsulamiento: Cualquier estilo declarado en el objeto styles debe ser inyectado en el DOM teniendo como ancestro obligatorio la clase .df-widgets.
  2. Transformación: El sistema debe parsear el JSON para generar una salida CSS válida.

Ejemplo de salida esperada:


.df-widgets ul li {
   list-style: none;
   padding: 0;
}

Alcance: Asegurar que la inyección sea dinámica y responda a los cambios del tema cargado.

Criterios de Aceptación:

  • El sistema debe renderizar los estilos correctamente al cargar el JSON.
  • Los estilos inyectados no deben afectar elementos fuera del contenedor .df-widgets.

Notas Técnicas para Desarrollo:

  • Carga Única: La lógica de generación debe ejecutarse en el hook onMounted o mediante un computed que procese el estado inicial del store.
  • Inyección en el DOM: Crear un elemento <style id="df-dynamic-theme"> e insertarlo al final del <head> para asegurar prioridad por cascada.
  • Sanitización (Seguridad): Es imperativo validar que los valores no contengan caracteres de escape que permitan inyectar CSS fuera del scope.
    • Problema a evitar: Un JSON malintencionado podría intentar cerrar la llave prematuramente para afectar elementos globales: 
      "styles": {
  "ul li": {
    "list-style": "none; } body { display: none !important; } .df-widgets { \": \"none" 
  }
}
    • Resultado malicioso: .df-widgets ul li { list-style: none; } body { display: none !important; } ... }
    • Solución: Escapar o eliminar llaves de cierre } y caracteres especiales en los valores de las propiedades antes de la concatenación.

Exportar a: Atom PDF