lf-pagebuilder-vue 0.0.67 → 0.0.69

package/README.md

@@ -20,6 +20,8 @@ npm install lf-pagebuilder-vue
     :submitForm="false"
     inputId="mi-input-hidden"
     :excludeComponentTypes="['SEO', 'Footer']"
+    :excludeComponentTags="['boton', 'destacado']"
+    :includeOnlyComponentTags="['articulo']"
     :visibleSections="['Header', 'Body', 'Footer']"
     allowRenderMode="open"
     limboToken="eyJ..."
@@ -40,6 +42,8 @@ import 'lf-pagebuilder-vue/styles';
 | `submitForm` | `boolean` | `false` | Al guardar, busca el `<form>` padre y hace `.submit()` automáticamente |
 | `inputId` | `string \| null` | `null` | ID del `<input hidden>` donde se vuelca el JSON de configuración al guardar |
 | `excludeComponentTypes` | `string[]` | `[]` | Categorías de componentes que NO aparecerán en el selector. "Repetidor" siempre se excluye. |
+| `excludeComponentTags` | `string[]` | `[]` | Tags de componentes a excluir (lista negra). Un componente con cualquiera de estos tags no aparecerá. Compatible con `excludeComponentTypes`. |
+| `includeOnlyComponentTags` | `string[]` | `[]` | Solo muestra componentes que tengan al menos uno de estos tags (lista blanca). Si se combina con `excludeComponentTags`, la exclusión tiene prioridad. |
 | `visibleSections` | `string[]` | — | Secciones visibles. Si no se indica, se muestran todas. Valores posibles: `Header`, `Body`, `Footer`, `Sidebar` |
 | `allowRenderMode` | `'open' \| 'fullpage' \| 'onlybody'` | `'open'` | Controla el modo de renderizado. `open` = el usuario elige · `fullpage` = forzado página completa · `onlybody` = forzado solo body |
 | `limboToken` | `string` | — | Token JWT para el gestor de imágenes Limbo. Obtenerlo server-side con `fetchLimboToken()` |
@@ -47,6 +51,9 @@ import 'lf-pagebuilder-vue/styles';
 > **Categorías disponibles para `excludeComponentTypes`:**
 > `Call to Action`, `Contenido`, `Separador`, `Texto`, `Cabecera`, `Footer`, `Imagen`, `Repetidor`, `Formulario`, `Título`, `SEO`
 
+> **Nota sobre filtrado por tags (`excludeComponentTags` / `includeOnlyComponentTags`):**
+> Los tags son metadatos libres definidos en cada componente de la librería. Puedes usar uno o ambos filtros simultáneamente: si un componente está en `excludeComponentTags` y también cumple `includeOnlyComponentTags`, la exclusión tiene prioridad y no aparece.
+
 ---
 
 ### Modo 2 — Script IIFE (Symfony / Twig / cualquier backend)
@@ -64,6 +71,8 @@ import 'lf-pagebuilder-vue/styles';
   data-debug-mode="false"
   data-submit-form="false"
   data-exclude-component-types="SEO,Footer,Cabecera"
+  data-exclude-component-tags="boton,destacado"
+  data-include-only-component-tags="articulo"
   data-visible-sections="Header,Body,Footer"
   data-allow-render-mode="open"
 />
@@ -75,6 +84,8 @@ import 'lf-pagebuilder-vue/styles';
 | `data-debug-mode` | `"true"` \| `"false"` | `"false"` | Muestra panel de import/export JSON y botón de carga desde localStorage |
 | `data-submit-form` | `"true"` \| `"false"` | `"false"` | Al guardar, busca el `<form>` padre y hace `.submit()` automáticamente |
 | `data-exclude-component-types` | `string` (separado por comas) | — | Categorías de componentes a excluir. Ej: `"SEO,Footer,Cabecera"` |
+| `data-exclude-component-tags` | `string` (separado por comas) | — | Tags de componentes a excluir (lista negra). Ej: `"boton,destacado"` |
+| `data-include-only-component-tags` | `string` (separado por comas) | — | Solo muestra componentes con estos tags (lista blanca). Ej: `"articulo"`. Si se combina con `data-exclude-component-tags`, la exclusión tiene prioridad. |
 | `data-visible-sections` | `string` (separado por comas) | — | Secciones visibles. Si no se indica, se muestran todas. Ej: `"Header,Body"` |
 | `data-allow-render-mode` | `"open"` \| `"fullpage"` \| `"onlybody"` | `"open"` | Controla el modo de renderizado. `open` = el usuario elige · `fullpage` = forzado página completa · `onlybody` = forzado solo body |
 
@@ -140,23 +151,28 @@ Se pueden pasar opciones de configuración al Pagebuilder mediante atributos `da
 | `data-debug-mode` | `"true"` \| `"false"` | `"false"` | Activa el modo debug |
 | `data-submit-form` | `"true"` \| `"false"` | `"false"` | Envía el formulario automáticamente |
 | `data-exclude-component-types` | `string` | - | Categorías de componentes a excluir, separadas por coma |
+| `data-exclude-component-tags` | `string` | - | Tags de componentes a excluir (lista negra), separados por coma. Ej: `"boton,destacado"` |
+| `data-include-only-component-tags` | `string` | - | Solo muestra componentes con estos tags (lista blanca), separados por coma. Ej: `"articulo"`. Si se combina con `data-exclude-component-tags`, la exclusión tiene prioridad. |
 
 **Ejemplo completo:**
 
 ```html
-<input 
-  type="hidden" 
-  class="js-lf-pagebuilder-vue-input" 
+<input
+  type="hidden"
+  class="js-lf-pagebuilder-vue-input"
   name="page_config"
   data-is-production="true"
   data-debug-mode="false"
   data-submit-form="true"
   data-exclude-component-types="SEO, Footer, Cabecera"
+  data-exclude-component-tags="boton,destacado"
 />
 ```
 
 > **Nota sobre `data-exclude-component-types`:** La categoría "Repetidor" siempre se excluye automáticamente. Las categorías adicionales que pases se suman a esta exclusión. Las categorías disponibles son: `Call to Action`, `Contenido`, `Separador`, `Texto`, `Cabecera`, `Footer`, `Imagen`, `Repetidor`, `Formulario`, `Título`, `SEO`.
 
+> **Nota sobre filtrado por tags:** `data-exclude-component-tags` y `data-include-only-component-tags` actúan sobre los tags de los componentes (metadatos libres definidos en la librería). Pueden usarse de forma independiente o combinada. Si un componente aparece en ambos filtros, la exclusión prevalece.
+
 ---
 
 ### 2. Como componente Vue
@@ -185,14 +201,17 @@ import { Pagebuilder } from 'lf-pagebuilder-vue';
 | `submitForm` | `boolean` | `false` | Envía el formulario automáticamente |
 | `inputId` | `string \| null` | `null` | ID del input hidden donde guardar la configuración |
 | `excludeComponentTypes` | `string[]` | `[]` | Categorías de componentes a excluir (además de "Repetidor" que siempre se excluye) |
+| `excludeComponentTags` | `string[]` | `[]` | Tags de componentes a excluir (lista negra). Un componente con cualquiera de estos tags no aparecerá. |
+| `includeOnlyComponentTags` | `string[]` | `[]` | Solo muestra componentes que tengan al menos uno de estos tags (lista blanca). Si se combina con `excludeComponentTags`, la exclusión tiene prioridad. |
 
 **Ejemplo con exclusión de componentes:**
 
 ```vue
 <template>
-  <Pagebuilder 
+  <Pagebuilder
     :isProduction="false"
     :excludeComponentTypes="['SEO', 'Footer', 'Cabecera']"
+    :excludeComponentTags="['boton', 'destacado']"
   />
 </template>
 
@@ -291,6 +310,47 @@ Para más detalles, consulta [README_LIMBO.md](README_LIMBO.md).
 
 ---
 
+## Funcionalidades del editor
+
+### Color de fondo en filas y columnas
+
+Cada fila y cada columna del editor puede tener un color de fondo personalizado con soporte de canal alpha (opacidad). El color se configura desde el panel de configuración de la fila o columna y se exporta junto al resto de la configuración del layout.
+
+El panel de color incluye:
+- Selector de color (rueda de color nativa del navegador)
+- Deslizador de opacidad (0–100%)
+- Indicador visual del color resultante con su valor RGBA
+
+El color se almacena en el JSON de configuración como un valor `rgba(r, g, b, a)` dentro de la propiedad `backgroundColor` del objeto de configuración de la fila o columna:
+
+```json
+{
+  "rows": [
+    {
+      "config": {
+        "backgroundColor": "rgba(255, 200, 100, 0.75)"
+      },
+      "columns": [
+        {
+          "config": {
+            "backgroundColor": "rgba(240, 240, 240, 1)"
+          },
+          "components": []
+        }
+      ]
+    }
+  ]
+}
+```
+
+### Resaltado de elemento en edición
+
+Cuando se abre el panel de configuración de una fila, una columna o un componente, el elemento correspondiente se resalta visualmente en el editor con un borde ámbar y un halo de sombra. Esto facilita identificar qué elemento se está editando, especialmente en layouts con múltiples filas y columnas.
+
+El resaltado desaparece automáticamente al cerrar el panel de configuración.
+
+---
+
 ## Build
 
 El proyecto tiene dos builds diferentes:

package/dist/components/BodySection.vue.d.ts

@@ -18,8 +18,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     removeCol: PropType<(rowIndex: number, colIndex: number, section: string) => void>;
     moveCol: PropType<(rowIndex: number, colIndex: number, section: string, direction?: "left" | "right") => void>;
     moveRow: PropType<(rowIndex: number, section: string, direction?: "up" | "down") => void>;
-    updateColConfig: PropType<(rowIndex: number, columnIndex: number, section: string, width: string, gap: string, flexDirection: string) => void>;
-    updateRowConfig: PropType<(rowIndex: number, section: string, padding: string, gap: string, width: string) => void>;
+    updateColConfig: PropType<(rowIndex: number, columnIndex: number, section: string, width: string, gap: string, flexDirection: string, backgroundColor: string) => void>;
+    updateRowConfig: PropType<(rowIndex: number, section: string, padding: string, gap: string, width: string, backgroundColor: string) => void>;
     renderApiDomain: StringConstructor;
     isProduction: {
         type: BooleanConstructor;
@@ -39,8 +39,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     removeCol: PropType<(rowIndex: number, colIndex: number, section: string) => void>;
     moveCol: PropType<(rowIndex: number, colIndex: number, section: string, direction?: "left" | "right") => void>;
     moveRow: PropType<(rowIndex: number, section: string, direction?: "up" | "down") => void>;
-    updateColConfig: PropType<(rowIndex: number, columnIndex: number, section: string, width: string, gap: string, flexDirection: string) => void>;
-    updateRowConfig: PropType<(rowIndex: number, section: string, padding: string, gap: string, width: string) => void>;
+    updateColConfig: PropType<(rowIndex: number, columnIndex: number, section: string, width: string, gap: string, flexDirection: string, backgroundColor: string) => void>;
+    updateRowConfig: PropType<(rowIndex: number, section: string, padding: string, gap: string, width: string, backgroundColor: string) => void>;
     renderApiDomain: StringConstructor;
     isProduction: {
         type: BooleanConstructor;

package/dist/components/ColConfig.vue.d.ts

@@ -9,6 +9,7 @@ interface PageSection {
                 width?: string;
                 gap?: string;
                 flexDirection?: string;
+                backgroundColor?: string;
             };
             components: any[];
         }>;
@@ -26,7 +27,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     fullwidthMode: BooleanConstructor;
     addCol: PropType<(rowIndex: number, colIndex: number, section: string, direction?: "left" | "right") => void>;
-    updateColConfig: PropType<(rowIndex: number, columnIndex: number, section: string, width: string, gap: string, flexDirection: string) => void>;
+    updateColConfig: PropType<(rowIndex: number, columnIndex: number, section: string, width: string, gap: string, flexDirection: string, backgroundColor: string) => void>;
     removeCol: PropType<(rowIndex: number, colIndex: number, section: string) => void>;
     addComponentFunction: PropType<(rowIndex: number, columnIndex: number, section: string) => void>;
     moveCol: PropType<(rowIndex: number, colIndex: number, section: string, direction?: "left" | "right") => void>;
@@ -36,7 +37,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: boolean;
     };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "toggle-visibility": (...args: any[]) => void;
+    "toggle-visibility": () => any;
+    "config-open": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     globalPageConfiguration: PropType<PageSection[]>;
     rowIndex: {
@@ -49,7 +51,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     fullwidthMode: BooleanConstructor;
     addCol: PropType<(rowIndex: number, colIndex: number, section: string, direction?: "left" | "right") => void>;
-    updateColConfig: PropType<(rowIndex: number, columnIndex: number, section: string, width: string, gap: string, flexDirection: string) => void>;
+    updateColConfig: PropType<(rowIndex: number, columnIndex: number, section: string, width: string, gap: string, flexDirection: string, backgroundColor: string) => void>;
     removeCol: PropType<(rowIndex: number, colIndex: number, section: string) => void>;
     addComponentFunction: PropType<(rowIndex: number, columnIndex: number, section: string) => void>;
     moveCol: PropType<(rowIndex: number, colIndex: number, section: string, direction?: "left" | "right") => void>;
@@ -59,7 +61,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: boolean;
     };
 }>> & Readonly<{
-    "onToggle-visibility"?: ((...args: any[]) => any) | undefined;
+    "onToggle-visibility"?: (() => any) | undefined;
+    "onConfig-open"?: ((value: boolean) => any) | undefined;
 }>, {
     fullwidthMode: boolean;
     isHidden: boolean;

package/dist/components/GlobalConfig.vue.d.ts

@@ -48,6 +48,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     saveButtonAction: () => void;
     loadFromLocalStorage: () => void;
     toggleExpandScreen: () => void;
+    scrollToTop: () => void;
     sectionWidth: import('vue').WritableComputedRef<string, string>;
     isSaved: import('vue').Ref<boolean, boolean>;
     componentRoot: import('vue').Ref<HTMLElement | null, HTMLElement | null>;

package/dist/components/Pagebuilder.vue.d.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
     submitForm?: boolean;
     inputId?: string | null;
     excludeComponentTypes?: string[];
+    excludeComponentTags?: string[];
+    includeOnlyComponentTags?: string[];
     /** Modo de renderizado permitido. 'open' = el usuario puede elegir (defecto), 'fullpage' = forzado página completa, 'onlybody' = forzado solo body */
     allowRenderMode?: 'open' | 'fullpage' | 'onlybody';
     /** Secciones visibles. Si no se indica, se muestran todas: Header, Body, Footer, Sidebar */

package/dist/components/RowConfig.vue.d.ts

@@ -7,6 +7,7 @@ interface PageSection {
             padding?: string;
             gap?: string;
             width?: string;
+            backgroundColor?: string;
         };
         columns: any[];
     }>;
@@ -16,22 +17,26 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         required: true;
     };
-    updateRowConfig: PropType<(rowIndex: number, section: string, padding: string, gap: string, width: string) => void>;
+    updateRowConfig: PropType<(rowIndex: number, section: string, padding: string, gap: string, width: string, backgroundColor: string) => void>;
     removeRow: PropType<(index: number, section: string) => void>;
     addRow: PropType<(index: number | null, section: string) => void>;
     globalPageConfiguration: PropType<PageSection[]>;
     section: StringConstructor;
     moveRow: PropType<(rowIndex: number, section: string, direction: "up" | "down") => void>;
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "config-open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     rowIndex: {
         type: NumberConstructor;
         required: true;
     };
-    updateRowConfig: PropType<(rowIndex: number, section: string, padding: string, gap: string, width: string) => void>;
+    updateRowConfig: PropType<(rowIndex: number, section: string, padding: string, gap: string, width: string, backgroundColor: string) => void>;
     removeRow: PropType<(index: number, section: string) => void>;
     addRow: PropType<(index: number | null, section: string) => void>;
     globalPageConfiguration: PropType<PageSection[]>;
     section: StringConstructor;
     moveRow: PropType<(rowIndex: number, section: string, direction: "up" | "down") => void>;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{
+    "onConfig-open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;