@seatschart/vue 0.1.0 → 0.2.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 SeatsChart
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 SeatsChart
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,135 +1,135 @@
-# @seatschart/vue
-
-Vue 3 components for SeatsChart: the buyer seat chart, the Event Manager and the map designer. They are thin wrappers
-over the script-tag host API of [`@seatschart/embed`](https://www.npmjs.com/package/@seatschart/embed) (`SeatsChart`,
-`SeatsChartEventManager`, `SeatsChartDesigner`): same options, seats.io-compatible callback names and the same
-commands. Works with Nuxt: nothing touches `window` at import and the iframe is created on mount only.
-
-## Install
-
-```bash
-npm install @seatschart/vue @seatschart/embed
-```
-
-Vue 3.3 or newer.
-
-## Buyer seat chart
-
-`token` is a short-lived buyer JWT minted by your server with the API key (`POST /api/viewer-tokens`). Never pass an
-API key or a secret to the browser.
-
-```vue
-<script setup lang="ts">
-import { ref } from "vue";
-import { SeatChart, useSeatChart } from "@seatschart/vue";
-
-const props = defineProps<{ eventId: string; jwt: string }>();
-const chart = useSeatChart(); // typed template ref (SeatChartHandle | null)
-const cart = ref<string[]>([]);
-const maxSeats = ref(4);
-</script>
-
-<template>
-  <SeatChart
-    ref="chart"
-    class="seat-map"
-    web-base="https://your-tenant.seatschart.com"
-    :event="props.eventId"
-    :token="props.jwt"
-    language="pt"
-    :height="640"
-    :max-selected-objects="maxSeats"
-    :object-color="{ byStatus: { locked: '#f59e0b' } }"
-    :settings3d="{ lightPreset: 'exteriorSunset' }"
-    @chart-rendered="(e) => console.log('ready', e.objectCount)"
-    @object-selected="(e) => cart.push(e.label)"
-    @object-deselected="(e) => (cart = cart.filter((l) => l !== e.label))"
-    @session-hold="(e) => console.log('hold token', e.holdToken)"
-    @hold-failed="(e) => console.error(e.objectIds, e.message)"
-  />
-  <button type="button" @click="chart?.clearSelection()">Clear</button>
-  <button type="button" @click="chart?.selectBestAvailable({ number: 2, categories: ['VIP'] })">Best 2 VIP</button>
-  <button type="button" @click="chart?.showViewFromSeat(cart[0] ?? '')">View from seat</button>
-</template>
-```
-
-- **Props** are the `SeatsChart` options of `@seatschart/embed` (`event`, `token`, `webBase`, `parentOrigin`,
-  `channel`, `channelKey(s)`, `holdToken`, `pricing`, `language`, `theme`, `defaultRenderer`, …) and every declarative
-  renderer option (`objectColor`, `objectLabel`, `tooltip`, `maxSelectedObjects`, `legend`, `filterControls`,
-  `settings3d`, …). The chart `style` option (`{ font, cornerRadius, buttonShape }`) is **`chart-style`**: `class` and
-  `style` style the wrapper `<div data-seatschart-chart>`; `class-name` styles the iframe.
-- **Reactive updates**: values are compared, not identities (nested changes count). Declarative options and `pricing`
-  are applied live with `changeConfig` (no reload); `height`, `title` and `class-name` update the iframe in place; any
-  other prop re-renders the iframe and the hold session continues.
-- **Events**: every chart callback, kebab-case without `on`: `@object-selected`, `@object-clicked`,
-  `@hold-succeeded`, `@hold-confirmed`, `@selection-invalid`, `@best-available-selected`, `@floor-changed`,
-  `@full-screen-opened`, `@hold-created` (`SEATSCHART_RESERVATION_SUCCESS`), … (payloads as in `@seatschart/embed`).
-- **Host-drawn prompts**: a `@places-prompt`, `@ticket-type-prompt` or `@places-with-ticket-types-prompt` handler
-  switches that viewer prompt to your page; it gets `(params, confirm, cancel)`.
-- **Template ref** (`SeatChartHandle`): every `SeatsChart` command — `selectObjects`, `deselectObjects`,
-  `clearSelection`, `trySelectObjects`, `selectBestAvailable`, `changeConfig`, `setFilters`, `zoomToObjects`,
-  `zoomToSection`, `goToFloor`, `showViewFromSeat`, `getHoldToken`, `releaseHoldToken`, `exportImage`, … Each resolves
-  once the chart rendered and rejects with `ChartCommandError`. Also `selectedObjects`, `holdToken`, `chart` (the
-  `SeatsChart` instance), `getIframe()` and `rerender()`.
-- **Cleanup**: unmounting removes the iframe and its message listener; pending commands reject.
-
-## Event Manager (back office)
-
-```vue
-<script setup lang="ts">
-import { EventManager, useEventManager } from "@seatschart/vue";
-const manager = useEventManager();
-</script>
-
-<template>
-  <EventManager
-    ref="manager"
-    web-base="https://your-tenant.seatschart.com"
-    :event="eventId"
-    :token="managerEmbedToken"
-    mode="select"
-    color-scheme="auto"
-    :max-selected-objects="8"
-    @selection-changed="(objects) => (cart = objects.map((o) => o.label))"
-  />
-  <button type="button" @click="manager?.setHighlightedObjects(['A-1'])">Highlight A-1</button>
-</template>
-```
-
-Selectability rules, `max-selected-objects`, `selected-objects`, `order`, `filters`, `language` and `color-scheme`
-change live (`changeConfig`); `mode`, `event` or `token` re-render the iframe. The ref has every
-`SeatsChartEventManager` command (`listSelectedObjects`, `selectObjects`, `listOrderChanges`, `zoomToObjects`, …).
-
-## Designer
-
-```vue
-<script setup lang="ts">
-import { Designer, useDesigner } from "@seatschart/vue";
-const designer = useDesigner();
-</script>
-
-<template>
-  <Designer
-    ref="designer"
-    web-base="https://your-tenant.seatschart.com"
-    :token="designerEmbedToken"
-    :chart-id="chartId"
-    mode="safe"
-    canvas-color-scheme="dark"
-    @chart-updated="(id) => (saved = true)"
-    @exit-requested="router.back()"
-  />
-  <button type="button" @click="designer?.publish('Summer layout')">Publish</button>
-</template>
-```
-
-Without `chart-id` the designer creates a chart (`@chart-created`). The Exit button shows only with an
-`@exit-requested` handler. `language`, `color-scheme`, `canvas-color-scheme`, `mode` and `safe-mode-options` change
-live. The ref has `save()`, `publish(note?)`, `getState()`, `changeConfig()` and `chartId`.
-
-## Documentation
-
-- [Embed guide](https://github.com/seatschart/seatschart-prod/blob/main/docs/locales/en/README.md) and
-  [Quickstart](https://github.com/seatschart/seatschart-prod/blob/main/docs/locales/en/QUICKSTART.md)
-- Every option, callback and command: `@seatschart/embed` (`SeatsChartConfig`, `SeatsChartEventManagerConfig`,
-  `SeatsChartDesignerConfig`).
+# @seatschart/vue
+
+Vue 3 components for SeatsChart: the buyer seat chart, the Event Manager and the map designer. They are thin wrappers
+over the script-tag host API of [`@seatschart/embed`](https://www.npmjs.com/package/@seatschart/embed) (`SeatsChart`,
+`SeatsChartEventManager`, `SeatsChartDesigner`): same options, seats.io-compatible callback names and the same
+commands. Works with Nuxt: nothing touches `window` at import and the iframe is created on mount only.
+
+## Install
+
+```bash
+npm install @seatschart/vue @seatschart/embed
+```
+
+Vue 3.3 or newer.
+
+## Buyer seat chart
+
+`token` is a short-lived buyer JWT minted by your server with the API key (`POST /api/viewer-tokens`). Never pass an
+API key or a secret to the browser.
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { SeatChart, useSeatChart } from "@seatschart/vue";
+
+const props = defineProps<{ eventId: string; jwt: string }>();
+const chart = useSeatChart(); // typed template ref (SeatChartHandle | null)
+const cart = ref<string[]>([]);
+const maxSeats = ref(4);
+</script>
+
+<template>
+  <SeatChart
+    ref="chart"
+    class="seat-map"
+    web-base="https://your-tenant.seatschart.com"
+    :event="props.eventId"
+    :token="props.jwt"
+    language="pt"
+    :height="640"
+    :max-selected-objects="maxSeats"
+    :object-color="{ byStatus: { locked: '#f59e0b' } }"
+    :settings3d="{ lightPreset: 'exteriorSunset' }"
+    @chart-rendered="(e) => console.log('ready', e.objectCount)"
+    @object-selected="(e) => cart.push(e.label)"
+    @object-deselected="(e) => (cart = cart.filter((l) => l !== e.label))"
+    @session-hold="(e) => console.log('hold token', e.holdToken)"
+    @hold-failed="(e) => console.error(e.objectIds, e.message)"
+  />
+  <button type="button" @click="chart?.clearSelection()">Clear</button>
+  <button type="button" @click="chart?.selectBestAvailable({ number: 2, categories: ['VIP'] })">Best 2 VIP</button>
+  <button type="button" @click="chart?.showViewFromSeat(cart[0] ?? '')">View from seat</button>
+</template>
+```
+
+- **Props** are the `SeatsChart` options of `@seatschart/embed` (`event`, `token`, `webBase`, `parentOrigin`,
+  `channel`, `channelKey(s)`, `holdToken`, `pricing`, `language`, `theme`, `defaultRenderer`, …) and every declarative
+  renderer option (`objectColor`, `objectLabel`, `tooltip`, `maxSelectedObjects`, `legend`, `filterControls`,
+  `settings3d`, …). The chart `style` option (`{ font, cornerRadius, buttonShape }`) is **`chart-style`**: `class` and
+  `style` style the wrapper `<div data-seatschart-chart>`; `class-name` styles the iframe.
+- **Reactive updates**: values are compared, not identities (nested changes count). Declarative options and `pricing`
+  are applied live with `changeConfig` (no reload); `height`, `title` and `class-name` update the iframe in place; any
+  other prop re-renders the iframe and the hold session continues.
+- **Events**: every chart callback, kebab-case without `on`: `@object-selected`, `@object-clicked`,
+  `@hold-succeeded`, `@hold-confirmed`, `@selection-invalid`, `@best-available-selected`, `@floor-changed`,
+  `@full-screen-opened`, `@hold-created` (`SEATSCHART_RESERVATION_SUCCESS`), … (payloads as in `@seatschart/embed`).
+- **Host-drawn prompts**: a `@places-prompt`, `@ticket-type-prompt` or `@places-with-ticket-types-prompt` handler
+  switches that viewer prompt to your page; it gets `(params, confirm, cancel)`.
+- **Template ref** (`SeatChartHandle`): every `SeatsChart` command — `selectObjects`, `deselectObjects`,
+  `clearSelection`, `trySelectObjects`, `selectBestAvailable`, `changeConfig`, `setFilters`, `zoomToObjects`,
+  `zoomToSection`, `goToFloor`, `showViewFromSeat`, `getHoldToken`, `releaseHoldToken`, `exportImage`, … Each resolves
+  once the chart rendered and rejects with `ChartCommandError`. Also `selectedObjects`, `holdToken`, `chart` (the
+  `SeatsChart` instance), `getIframe()` and `rerender()`.
+- **Cleanup**: unmounting removes the iframe and its message listener; pending commands reject.
+
+## Event Manager (back office)
+
+```vue
+<script setup lang="ts">
+import { EventManager, useEventManager } from "@seatschart/vue";
+const manager = useEventManager();
+</script>
+
+<template>
+  <EventManager
+    ref="manager"
+    web-base="https://your-tenant.seatschart.com"
+    :event="eventId"
+    :token="managerEmbedToken"
+    mode="select"
+    color-scheme="auto"
+    :max-selected-objects="8"
+    @selection-changed="(objects) => (cart = objects.map((o) => o.label))"
+  />
+  <button type="button" @click="manager?.setHighlightedObjects(['A-1'])">Highlight A-1</button>
+</template>
+```
+
+Selectability rules, `max-selected-objects`, `selected-objects`, `order`, `filters`, `language` and `color-scheme`
+change live (`changeConfig`); `mode`, `event` or `token` re-render the iframe. The ref has every
+`SeatsChartEventManager` command (`listSelectedObjects`, `selectObjects`, `listOrderChanges`, `zoomToObjects`, …).
+
+## Designer
+
+```vue
+<script setup lang="ts">
+import { Designer, useDesigner } from "@seatschart/vue";
+const designer = useDesigner();
+</script>
+
+<template>
+  <Designer
+    ref="designer"
+    web-base="https://your-tenant.seatschart.com"
+    :token="designerEmbedToken"
+    :chart-id="chartId"
+    mode="safe"
+    canvas-color-scheme="dark"
+    @chart-updated="(id) => (saved = true)"
+    @exit-requested="router.back()"
+  />
+  <button type="button" @click="designer?.publish('Summer layout')">Publish</button>
+</template>
+```
+
+Without `chart-id` the designer creates a chart (`@chart-created`). The Exit button shows only with an
+`@exit-requested` handler. `language`, `color-scheme`, `canvas-color-scheme`, `mode` and `safe-mode-options` change
+live. The ref has `save()`, `publish(note?)`, `getState()`, `changeConfig()` and `chartId`.
+
+## Documentation
+
+- [Embed guide](https://github.com/seatschart/seatschart-prod/blob/main/docs/locales/en/README.md) and
+  [Quickstart](https://github.com/seatschart/seatschart-prod/blob/main/docs/locales/en/QUICKSTART.md)
+- Every option, callback and command: `@seatschart/embed` (`SeatsChartConfig`, `SeatsChartEventManagerConfig`,
+  `SeatsChartDesignerConfig`).

package/dist/Designer.d.ts

@@ -37,7 +37,7 @@ export declare const Designer: import("vue").DefineSetupFnComponent<DesignerProp
     colorScheme?: "auto" | "dark" | "light" | undefined;
     features?: import("@seatschart/embed").DesignerFeatureGates | undefined;
     height?: string | number | undefined;
-    language?: "de" | "en" | "es" | "fr" | "it" | "ja" | "ko" | "nl" | "pl" | "pt" | "tr" | "zh" | undefined;
+    language?: "ar" | "az" | "bn" | "de" | "en" | "es" | "fa" | "fr" | "gu" | "hi" | "id" | "it" | "ja" | "kk" | "kn" | "ko" | "ml" | "mr" | "ms" | "nl" | "pl" | "ps" | "pt" | "ru" | "ta" | "te" | "th" | "tr" | "uk" | "ur" | "vi" | "zh" | undefined;
     mode?: "normal" | "readOnly" | "safe" | undefined;
     openDraftDrawing?: boolean | undefined;
     openLatestDrawing?: boolean | undefined;

package/dist/SeatChart.d.ts

@@ -63,7 +63,7 @@ export declare const SeatChart: import("vue").DefineSetupFnComponent<SeatChartPr
     holdToken?: string | undefined;
     holdTokenInputName?: string | undefined;
     isObjectVisible?: import("@seatschart/embed").ObjectOverrides<boolean> | undefined;
-    language?: "de" | "en" | "es" | "fr" | "it" | "ja" | "ko" | "nl" | "pl" | "pt" | "tr" | "zh" | undefined;
+    language?: "ar" | "az" | "bn" | "de" | "en" | "es" | "fa" | "fr" | "gu" | "hi" | "id" | "it" | "ja" | "kk" | "kn" | "ko" | "ml" | "mr" | "ms" | "nl" | "pl" | "ps" | "pt" | "ru" | "ta" | "te" | "th" | "tr" | "uk" | "ur" | "vi" | "zh" | undefined;
     legend?: import("@seatschart/embed").LegendConfig | undefined;
     loading?: import("@seatschart/embed").ChartLoadingConfig | undefined;
     lockActiveFloor?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seatschart/vue",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Vue 3 components for SeatsChart seat maps: buyer chart, Event Manager and designer embeds",
   "type": "module",
   "license": "MIT",
@@ -41,7 +41,7 @@
     "vue": ">=3.3.0"
   },
   "dependencies": {
-    "@seatschart/embed": "^0.5.0"
+    "@seatschart/embed": "^0.6.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^21.0.4",