lf-pagebuilder-vue 0.0.40 → 0.0.42

package/README.md

@@ -2,6 +2,86 @@
 
 Editor visual para construir páginas HTML usando los componentes de `libreria-astro-lefebvre`.
 
+---
+
+## ⚡ Referencia rápida — Todas las opciones
+
+### Modo 1 — Componente Vue
+
+```bash
+npm install lf-pagebuilder-vue
+```
+
+```vue
+<template>
+  <Pagebuilder
+    :isProduction="false"
+    :debugMode="false"
+    :submitForm="false"
+    inputId="mi-input-hidden"
+    :excludeComponentTypes="['SEO', 'Footer']"
+    :visibleSections="['Header', 'Body', 'Footer']"
+    allowRenderMode="open"
+    limboToken="eyJ..."
+    client:only="vue"
+  />
+</template>
+
+<script setup>
+import { Pagebuilder } from 'lf-pagebuilder-vue';
+import 'lf-pagebuilder-vue/styles';
+</script>
+```
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `isProduction` | `boolean` | `false` | `true` = API producción · `false` = API desarrollo |
+| `debugMode` | `boolean` | `false` | Muestra panel de import/export JSON y botón de carga desde localStorage |
+| `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. |
+| `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()` |
+
+> **Categorías disponibles para `excludeComponentTypes`:**
+> `Call to Action`, `Contenido`, `Separador`, `Texto`, `Cabecera`, `Footer`, `Imagen`, `Repetidor`, `Formulario`, `Título`, `SEO`
+
+---
+
+### Modo 2 — Script IIFE (Symfony / Twig / cualquier backend)
+
+```html
+<link rel="stylesheet" href="/build/lf-pagebuilder-iife.css">
+<script src="/build/lf-pagebuilder-iife.iife.js"></script>
+
+<input
+  type="hidden"
+  class="js-lf-pagebuilder-vue-input"
+  name="page_config"
+  id="mi-input"
+  data-is-production="false"
+  data-debug-mode="false"
+  data-submit-form="false"
+  data-exclude-component-types="SEO,Footer,Cabecera"
+  data-visible-sections="Header,Body,Footer"
+  data-allow-render-mode="open"
+/>
+```
+
+| Atributo `data-*` | Valores | Default | Descripción |
+|-------------------|---------|---------|-------------|
+| `data-is-production` | `"true"` \| `"false"` | `"false"` | Entorno de la API de renderizado |
+| `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-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 |
+
+> El `id` del input se usa como clave de localStorage y como referencia interna. Si no tiene `id`, se genera uno automáticamente.
+
+---
+
 ## Instalación
 
 ```bash

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+
 interface PageSection {
     section: string;
     config: any;
@@ -47,8 +48,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    isProduction: boolean;
     isComponentMode: boolean;
     fullwidthMode: boolean;
-    isProduction: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+
 interface PageSection {
     section: string;
     config: any;

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

@@ -3,7 +3,7 @@ interface ColumnToInsert {
     columnIndex: number | null;
     section: string | null;
 }
-type __VLS_Props = {
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     isComponentMode: boolean;
     fullwidthMode: boolean;
     columnToInsert: ColumnToInsert;
@@ -13,6 +13,24 @@ type __VLS_Props = {
     isProduction: boolean;
     components: Record<string, any>;
     excludedCategories?: string[];
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    isComponentMode: boolean;
+    fullwidthMode: boolean;
+    columnToInsert: ColumnToInsert;
+    addComponentToColumn: (component: any) => void;
+    renderApiDomain: string;
+    toggleComponentModeFunction: () => void;
+    isProduction: boolean;
+    components: Record<string, any>;
+    excludedCategories?: string[];
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+
 interface ComponentField {
     name: string;
     label: string;
@@ -67,5 +68,5 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>> & Readonly<{}>, {
     isProduction: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+
 interface ComponentField {
     name: string;
     label: string;
@@ -33,9 +34,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    fieldUpdated: (fieldName: string, value: string | boolean) => any;
-    exclusiveFieldChanged: (groupName: string, activeFieldName: string) => any;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    fieldUpdated: (fieldName: string, value: string | boolean) => void;
+    exclusiveFieldChanged: (groupName: string, activeFieldName: string) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     object: {
         type: PropType<ComponentObject>;

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

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+
 interface PageSection {
     section: string;
     config: {
@@ -34,6 +35,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     parametersPageConfiguration: PropType<PageParameters>;
     renderApiDomain: StringConstructor;
     inputId: PropType<string | null>;
+    allowRenderMode: {
+        type: PropType<"open" | "fullpage" | "onlybody">;
+        default: string;
+    };
 }>, {
     validateSeo: () => void;
     importConfig: import('vue').Ref<string, string>;
@@ -61,6 +66,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     parametersPageConfiguration: PropType<PageParameters>;
     renderApiDomain: StringConstructor;
     inputId: PropType<string | null>;
+    allowRenderMode: {
+        type: PropType<"open" | "fullpage" | "onlybody">;
+        default: string;
+    };
 }>> & Readonly<{
     "onUpdate:sectionSelected"?: ((...args: any[]) => any) | undefined;
     "onUpdate:parametersPageConfiguration.global.sidebarEnabled"?: ((...args: any[]) => any) | undefined;
@@ -76,5 +85,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     fullwidthMode: boolean;
     debugMode: boolean;
     submitForm: boolean;
+    allowRenderMode: "open" | "fullpage" | "onlybody";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+
 interface ComponentField {
     name: string;
     label: string;
@@ -85,11 +86,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    isProduction: boolean;
     isComponentMode: boolean;
     fullwidthMode: boolean;
-    isProduction: boolean;
     insideComponentBox: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
-    rootElement: HTMLDivElement;
-}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,11 +1,35 @@
-type __VLS_Props = {
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     isProduction?: boolean;
     debugMode?: boolean;
     submitForm?: boolean;
     inputId?: string | null;
     excludeComponentTypes?: 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 */
+    visibleSections?: string[];
     /** Token JWT de Limbo - obtenido server-side con fetchLimboToken() */
     limboToken?: string;
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    isProduction?: boolean;
+    debugMode?: boolean;
+    submitForm?: boolean;
+    inputId?: string | null;
+    excludeComponentTypes?: 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 */
+    visibleSections?: string[];
+    /** Token JWT de Limbo - obtenido server-side con fetchLimboToken() */
+    limboToken?: string;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+
 interface PageSection {
     section: string;
     config: any;

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+
 interface FeedCriteria {
     name: string;
     url: string;
@@ -31,5 +32,5 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>> & Readonly<{}>, {
     isProduction: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;