@seatsyoo/vue 1.0.0 → 1.1.0

package/README.md

@@ -240,7 +240,43 @@ hidrata y monta el visor. En Nuxt funciona tal cual (también dentro de `<Client
 No va en el paquete: el visor la descarga de `${server}/sdk/butacas-3d.js` cuando alguien la abre. Si tu web
 tiene una política de seguridad de contenidos (CSP), añade esa dirección a `script-src`, o pasa `:view3d="false"`.
 
-La referencia completa de opciones, avisos y métodos está en la documentación de Seatsyoo (**/docs/visor** y
+## El diseñador de planos
+
+`<SeatsyooDesigner>` abre en tu web el diseñador de planos de Seatsyoo, para que tus clientes dibujen sus recintos.
+Tu servidor abre una sesión para un plano con su clave secreta (`POST /api/v1/charts/{plano}/designer-sessions`, o
+`charts.designerSession` de `@seatsyoo/node`) y le da el token a tu web:
+
+```vue
+<script setup lang="ts">
+import { SeatsyooDesigner } from "@seatsyoo/vue";
+
+defineProps<{ token: string }>();
+const emit = defineEmits<{ cerrar: [] }>();
+// Tu servidor abre otra sesión del mismo plano y te da el token (aquí, una ruta tuya).
+const pedirToken = (): Promise<string> =>
+  fetch("/mi-api/disenador/teatro", { method: "POST" }).then((r) => r.json()).then((s: { token: string }) => s.token);
+</script>
+
+<template>
+  <SeatsyooDesigner
+    server="https://seatsyoo.example"
+    :token="token"
+    :refresh-token="pedirToken"
+    style="height: 80vh"
+    @publish="({ version }) => console.log('Publicada la versión', version)"
+    @close="emit('cerrar')"
+  />
+</template>
+```
+
+Props: `server`, `token`, `language` y `refreshToken` (pide a tu servidor otro token del mismo plano antes de que
+caduque: sin ella, al caducar deja de guardar). Eventos: `ready`, `save`, `publish`, `close` («←» sale si hay quien
+escuche `@close` al montarse) y `error`. `class`, `style` e `id` van al `<div>`, que necesita alto. Un `token` nuevo se le
+manda sin volver a montarlo; cambiar `server` o `language`, o pasar o quitar `refreshToken`, lo vuelve a montar. Con
+una ref de plantilla, `disenador.value.designer` es el diseñador (`setToken()`, `iframe`). `app.use(SeatsyooPlugin)`
+también lo registra. En el servidor (SSR) pinta solo el `<div>`.
+
+La referencia completa de opciones, avisos y métodos está en la documentación de Seatsyoo (**/docs/visor**, **/docs/disenador** y
 **/docs/frameworks**).
 
 ## Licencia
@@ -273,6 +309,9 @@ npm install @seatsyoo/vue
      (never the selected keys). -->
 ```
 
+- **Embedded designer**: `<SeatsyooDesigner server :token :refresh-token @publish @close style="height: 80vh" />` opens
+  the Seatsyoo chart designer in your website, with a session token your server opens with its secret key
+  (`POST /api/v1/charts/{chart}/designer-sessions`).
 - **Props**: every viewer option except `container` and the callbacks; `class`, `style`, `id` and other attributes
   go to the wrapping `<div>`. `app.use(SeatsyooPlugin)` registers `<SeatsyooChart>` globally.
 - **Events**: `ready`, `change`, `select`, `deselect`, `error`, `hold-expired`, `hold-token-change`,

package/dist/SeatsyooChart.d.ts

@@ -1,5 +1,6 @@
 import { type ChartDocument, type Language, type SeatingChart, type SelectedObject, type StatusStyle, type View3DModule } from "@seatsyoo/visor";
 import { type ComponentOptionsMixin, type DefineComponent, type ExtractPublicPropTypes, type Plugin, type PropType } from "vue";
+import { SeatsyooDesigner } from "./SeatsyooDesigner.js";
 declare const props: {
     /** URL base del servidor de Seatsyoo, p. ej. https://seatsyoo.example */
     server: {
@@ -139,12 +140,14 @@ export type SeatsyooChartComponent = DefineComponent<typeof props, SeatsyooChart
  * mientras no hay ninguno.
  */
 export declare const SeatsyooChart: SeatsyooChartComponent;
-/** Plugin que registra <SeatsyooChart> en toda la aplicación: `app.use(SeatsyooPlugin)`. */
+/** Plugin que registra <SeatsyooChart> y <SeatsyooDesigner> en toda la aplicación: `app.use(SeatsyooPlugin)`. */
 export declare const SeatsyooPlugin: Plugin;
 declare module "vue" {
     interface GlobalComponents {
         /** El visor de Seatsyoo (registrado con `app.use(SeatsyooPlugin)`). */
         SeatsyooChart: typeof SeatsyooChart;
+        /** El diseñador de planos de Seatsyoo (registrado con `app.use(SeatsyooPlugin)`). */
+        SeatsyooDesigner: typeof SeatsyooDesigner;
     }
 }
 export {};

package/dist/SeatsyooChart.js

@@ -11,6 +11,7 @@
 //   ese momento, sin volver a montar.
 import { render, } from "@seatsyoo/visor";
 import { defineComponent, getCurrentInstance, h, onBeforeUnmount, onMounted, shallowRef, toRaw, watch, } from "vue";
+import { SeatsyooDesigner } from "./SeatsyooDesigner.js";
 import { aplicarEnVivo, avisarEnConsola, copiaDeDatos, enVivoDe, errorDeOpciones, identidadDe, igual, opcionesEnVivo, sinIndefinidos, sueltaAlCambiar, } from "./opciones.js";
 // Los booleanos con `default: undefined`: sin él, Vue los pone a false si no se pasan, y el visor los quiere
 // sin indicar (su valor por defecto es «sí»).
@@ -216,9 +217,10 @@ const componente = defineComponent({
  * mientras no hay ninguno.
  */
 export const SeatsyooChart = componente;
-/** Plugin que registra <SeatsyooChart> en toda la aplicación: `app.use(SeatsyooPlugin)`. */
+/** Plugin que registra <SeatsyooChart> y <SeatsyooDesigner> en toda la aplicación: `app.use(SeatsyooPlugin)`. */
 export const SeatsyooPlugin = {
     install(app) {
         app.component("SeatsyooChart", SeatsyooChart);
+        app.component("SeatsyooDesigner", SeatsyooDesigner);
     },
 };

package/dist/SeatsyooDesigner.d.ts

@@ -0,0 +1,71 @@
+import { type EmbeddedDesigner, type Language } from "@seatsyoo/visor";
+import { type ComponentOptionsMixin, type DefineComponent, type ExtractPublicPropTypes, type PropType } from "vue";
+type Estado = "draft" | "published" | "published-with-draft";
+declare const props: {
+    /** URL base del servidor de Seatsyoo, p. ej. https://seatsyoo.example */
+    server: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** El token de la sesión del diseñador (dsg_…), que abre tu servidor con su clave secreta. */
+    token: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Idioma del diseñador: «es» (por defecto) o «en». */
+    language: PropType<Language>;
+    /** Pide a tu servidor otro token del mismo plano antes de que caduque (sin ella, al caducar deja de guardar). */
+    refreshToken: PropType<() => Promise<string>>;
+};
+declare const emits: {
+    /** El diseñador está abierto con el plano. */
+    ready: (info: {
+        chart: string;
+        status: Estado;
+        publishedVersion: number | null;
+        canPublish: boolean;
+    }) => boolean;
+    /** Se han guardado los cambios en el borrador. */
+    save: (info: {
+        chart: string;
+        status: Estado;
+    }) => boolean;
+    /** Se ha publicado una versión nueva. */
+    publish: (info: {
+        chart: string;
+        version: number;
+    }) => boolean;
+    /** Se ha pulsado «←» (sale solo si hay quien escuche @close al montarse). */
+    close: () => boolean;
+    /** Algo ha fallado: `{ code, message }`. Sin oyente, se escribe en la consola. */
+    error: (error: {
+        code: string;
+        message: string;
+    }) => boolean;
+};
+/** Props de SeatsyooDesigner: las opciones del diseñador, sin `container` ni los avisos (que son eventos). */
+export type SeatsyooDesignerProps = ExtractPublicPropTypes<typeof props>;
+/** Lo que expone el componente a una ref de plantilla. */
+export interface SeatsyooDesignerExposed {
+    /** El diseñador abierto (`setToken()`, `iframe`), o null mientras no hay ninguno. */
+    designer: EmbeddedDesigner | null;
+}
+/** Su tipo público, escrito a mano como el de SeatsyooChart (con los parámetros que no han cambiado desde Vue 3.3). */
+export type SeatsyooDesignerComponent = DefineComponent<typeof props, SeatsyooDesignerExposed, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, typeof emits>;
+/**
+ * El diseñador de planos de Seatsyoo en tu web, con el token de una sesión que abre tu servidor con su clave secreta
+ * (`POST /api/v1/charts/{plano}/designer-sessions`, o `charts.designerSession` de `@seatsyoo/node`).
+ *
+ * ```vue
+ * <SeatsyooDesigner
+ *   server="https://seatsyoo.example"
+ *   :token="token"
+ *   :refresh-token="pedirToken"
+ *   style="height: 80vh"
+ *   @publish="({ version }) => console.log(version)"
+ *   @close="abierto = false"
+ * />
+ * ```
+ */
+export declare const SeatsyooDesigner: SeatsyooDesignerComponent;
+export {};

package/dist/SeatsyooDesigner.js

@@ -0,0 +1,138 @@
+// SeatsyooDesigner: el diseñador de planos de Seatsyoo, incrustado en tu web, como componente de Vue 3 (3.3 o posterior),
+// sin SFC (defineComponent y una función render), como SeatsyooChart.
+//
+// - Se monta en onMounted: en el servidor (SSR) solo se pinta el <div> vacío. Antes de desmontar, destroy().
+// - Vuelve a montarse si cambia `server` o `language`, o si se pasa o se quita `refreshToken`: la página del diseñador
+//   sabe al abrirse si puede pedir tokens nuevos. «←» sale si al montarse hay quien escuche @close.
+// - Un `token` nuevo con el diseñador abierto no lo vuelve a montar: se le manda (setToken), como al renovarlo.
+// - Los avisos salen como eventos de Vue (ready, save, publish, close, error); refreshToken es una prop (devuelve el
+//   token) y se llama siempre la última recibida.
+import { designer } from "@seatsyoo/visor";
+import { defineComponent, getCurrentInstance, h, onBeforeUnmount, onMounted, shallowRef, watch, } from "vue";
+import { avisarEnConsola, errorDeOpciones } from "./opciones.js";
+const props = {
+    /** URL base del servidor de Seatsyoo, p. ej. https://seatsyoo.example */
+    server: { type: String, required: true },
+    /** El token de la sesión del diseñador (dsg_…), que abre tu servidor con su clave secreta. */
+    token: { type: String, required: true },
+    /** Idioma del diseñador: «es» (por defecto) o «en». */
+    language: String,
+    /** Pide a tu servidor otro token del mismo plano antes de que caduque (sin ella, al caducar deja de guardar). */
+    refreshToken: Function,
+};
+// Los parámetros solo dan el tipo de cada evento (Vue valida con lo que devuelven: siempre sí).
+const emits = {
+    /** El diseñador está abierto con el plano. */
+    ready: (info) => true,
+    /** Se han guardado los cambios en el borrador. */
+    save: (info) => true,
+    /** Se ha publicado una versión nueva. */
+    publish: (info) => true,
+    /** Se ha pulsado «←» (sale solo si hay quien escuche @close al montarse). */
+    close: () => true,
+    /** Algo ha fallado: `{ code, message }`. Sin oyente, se escribe en la consola. */
+    error: (error) => true,
+};
+const componente = defineComponent({
+    name: "SeatsyooDesigner",
+    props,
+    emits,
+    expose: ["designer"],
+    setup(props, { emit }) {
+        const abierto = shallowRef(null);
+        const el = shallowRef(null);
+        const instancia = getCurrentInstance();
+        let vivo = false;
+        /** El último token que se le dio al diseñador abierto. */
+        let token = "";
+        /** ¿Hay alguien escuchando ese evento ahora mismo? */
+        function escuchan(evento) {
+            const p = instancia?.vnode.props;
+            const f = p?.[evento] ?? p?.[`${evento}Once`];
+            return typeof f === "function" || Array.isArray(f);
+        }
+        function desmontar() {
+            const anterior = abierto.value;
+            abierto.value = null;
+            anterior?.destroy();
+        }
+        function montar() {
+            desmontar();
+            const div = el.value;
+            if (!div)
+                return;
+            const refresh = props.refreshToken;
+            try {
+                abierto.value = designer({
+                    container: div,
+                    server: props.server,
+                    token: props.token,
+                    ...(props.language ? { language: props.language } : {}),
+                    ...(refresh ? { refreshToken: () => (props.refreshToken ?? refresh)() } : {}),
+                    ...(escuchan("onClose") ? { onClose: () => emit("close") } : {}),
+                    onReady: (i) => emit("ready", i),
+                    onSave: (i) => emit("save", i),
+                    onPublish: (i) => emit("publish", i),
+                    onError: (e) => (escuchan("onError") ? emit("error", e) : avisarEnConsola(e)),
+                });
+                token = props.token;
+            }
+            catch (err) {
+                const error = errorDeOpciones(err);
+                if (escuchan("onError"))
+                    emit("error", error);
+                else
+                    console.error("[seatsyoo]", error.message);
+            }
+        }
+        onMounted(() => {
+            vivo = true;
+            montar();
+        });
+        onBeforeUnmount(() => {
+            vivo = false;
+            desmontar();
+        });
+        watch(() => [props.server, props.language, !!props.refreshToken], () => {
+            if (vivo)
+                montar();
+        });
+        watch(() => props.token, (nuevo) => {
+            const d = abierto.value;
+            if (!vivo || !d || nuevo === token)
+                return;
+            try {
+                d.setToken(nuevo);
+                token = nuevo;
+            }
+            catch (err) {
+                const error = errorDeOpciones(err);
+                if (escuchan("onError"))
+                    emit("error", error);
+                else
+                    avisarEnConsola(error);
+            }
+        });
+        return { designer: abierto, el };
+    },
+    render() {
+        // class, style, id y demás atributos pasan solos a este <div> (inheritAttrs).
+        return h("div", { ref: "el" });
+    },
+});
+/**
+ * El diseñador de planos de Seatsyoo en tu web, con el token de una sesión que abre tu servidor con su clave secreta
+ * (`POST /api/v1/charts/{plano}/designer-sessions`, o `charts.designerSession` de `@seatsyoo/node`).
+ *
+ * ```vue
+ * <SeatsyooDesigner
+ *   server="https://seatsyoo.example"
+ *   :token="token"
+ *   :refresh-token="pedirToken"
+ *   style="height: 80vh"
+ *   @publish="({ version }) => console.log(version)"
+ *   @close="abierto = false"
+ * />
+ * ```
+ */
+export const SeatsyooDesigner = componente;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { SeatsyooChart, type SeatsyooChartExposed, type SeatsyooChartProps, SeatsyooPlugin } from "./SeatsyooChart.js";
-export type { ChartDocument, Language, RenderOptions, SeatingChart, SelectedObject, StatusStyle } from "@seatsyoo/visor";
+export { SeatsyooDesigner, type SeatsyooDesignerExposed, type SeatsyooDesignerProps } from "./SeatsyooDesigner.js";
+export type { ChartDocument, EmbeddedDesigner, EmbeddedDesignerOptions, Language, RenderOptions, SeatingChart, SelectedObject, StatusStyle, } from "@seatsyoo/visor";

package/dist/index.js

@@ -1,2 +1,3 @@
-// @seatsyoo/vue: el visor de mapas de asientos de Seatsyoo como componente de Vue 3.
+// @seatsyoo/vue: el visor de mapas de asientos de Seatsyoo y su diseñador de planos como componentes de Vue 3.
 export { SeatsyooChart, SeatsyooPlugin } from "./SeatsyooChart.js";
+export { SeatsyooDesigner } from "./SeatsyooDesigner.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seatsyoo/vue",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Componente de Vue para el visor de mapas de asientos de Seatsyoo: elegir butacas, retenerlas y venderlas en tiempo real.",
   "license": "MIT",
   "keywords": [
@@ -27,7 +27,7 @@
     "dist/*.d.ts"
   ],
   "dependencies": {
-    "@seatsyoo/visor": "^1.0.0"
+    "@seatsyoo/visor": "^1.1.0"
   },
   "peerDependencies": {
     "vue": "^3.3.0"