@seatlayer/vue 0.65.0 → 0.67.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +148 -20
- package/package.json +15 -6
package/README.md
CHANGED
|
@@ -1,19 +1,41 @@
|
|
|
1
|
-
#
|
|
1
|
+
# SeatLayer Vue Seat Map SDK for Reserved Seating
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@seatlayer/vue)
|
|
4
4
|
[](https://www.npmjs.com/package/@seatlayer/vue)
|
|
5
5
|
[](https://vuejs.org/)
|
|
6
|
+
[](https://www.typescriptlang.org/)
|
|
6
7
|
[](../../LICENSE)
|
|
7
8
|
|
|
8
|
-
The official Vue 3 wrapper for SeatLayer reserved seating
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
helpers exported by this package; they are not additional Vue components.
|
|
9
|
+
The official Vue 3 wrapper for SeatLayer reserved seating. Render an interactive
|
|
10
|
+
seating chart with live seat availability inside a Vue app, let buyers pick
|
|
11
|
+
seats, and take a temporary hold on the inventory they choose.
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
The buyer modal and iframe integration stay framework-agnostic: this package
|
|
14
|
+
also re-exports the plain JavaScript `SeatPickerWidget` class and the
|
|
15
|
+
`attachPickerFrame` helper, so a Vue host depends on one package.
|
|
16
|
+
|
|
17
|
+
[SeatLayer Vue SDK on npm](https://www.npmjs.com/package/@seatlayer/vue) ·
|
|
18
|
+
[Vue seat-map documentation](https://docs.seatlayer.io/buyer-sdk/seat-picker/) ·
|
|
19
|
+
[SeatLayer reserved-seating platform](https://seatlayer.io/) ·
|
|
20
|
+
[Buyer seat-map demo](https://app.seatlayer.io/demo/play/grand-theatre) ·
|
|
21
|
+
[SeatLayer JavaScript seat map SDK](https://www.npmjs.com/package/@seatlayer/js) ·
|
|
22
|
+
[SeatLayer React seat map SDK](https://www.npmjs.com/package/@seatlayer/react) ·
|
|
23
|
+
[SeatLayer Angular seat map SDK](https://www.npmjs.com/package/@seatlayer/angular) ·
|
|
24
|
+
[SeatLayer AI Toolkit](https://github.com/seatlayer/seatlayer-ai-toolkit)
|
|
25
|
+
|
|
26
|
+
## What is included
|
|
27
|
+
|
|
28
|
+
- `SeatingChart` — one native Vue component (`SeatLayerSeatingChart`), written
|
|
29
|
+
as a render function so no Vue compiler plugin is needed.
|
|
30
|
+
- `SeatPickerWidget` — the framework-agnostic one-call buyer modal.
|
|
31
|
+
- `attachPickerFrame` — the host-side iframe helper for embedded pickers.
|
|
32
|
+
- TypeScript declarations for ESM (`dist/index.d.ts`) and CommonJS
|
|
33
|
+
(`dist/index.d.cts`), including the `SeatingChartExposed` handle type.
|
|
34
|
+
|
|
35
|
+
## Requirements
|
|
36
|
+
|
|
37
|
+
- Vue 3.3 or newer (declared as a peer dependency).
|
|
38
|
+
- A browser DOM: the chart is created when the component mounts.
|
|
17
39
|
|
|
18
40
|
## Install
|
|
19
41
|
|
|
@@ -21,10 +43,7 @@ helpers exported by this package; they are not additional Vue components.
|
|
|
21
43
|
npm install @seatlayer/vue
|
|
22
44
|
```
|
|
23
45
|
|
|
24
|
-
|
|
25
|
-
need no Vue compiler plugin to consume this package.
|
|
26
|
-
|
|
27
|
-
## Usage
|
|
46
|
+
## Quick start
|
|
28
47
|
|
|
29
48
|
```vue
|
|
30
49
|
<script setup lang="ts">
|
|
@@ -72,6 +91,10 @@ async function checkout() {
|
|
|
72
91
|
| `colorblindSafe` | `boolean` | Render colorblind-safe seat glyphs. |
|
|
73
92
|
| `seatTooltip` | `boolean` | Set `false` to draw your own popover from `@seat-hover`. |
|
|
74
93
|
| `messages` | `object` | Copy overrides. Read once per rebuild. |
|
|
94
|
+
| `initialView` | `RendererViewMode` | Initial 2D projection, read once per rebuild. |
|
|
95
|
+
| `errorDisplay` | `'message' \| 'none'` | `'message'` (default) shows a notice with Try again; `'none'` is silent. |
|
|
96
|
+
| `buyerAccessTokenProvider` | `BuyerAccessTokenProvider` | Sales Channels: mint a buyer access session on demand from your backend. |
|
|
97
|
+
| `buyerAccessToken` | `string \| BuyerAccessToken` | One-shot session for hosts that own the lifecycle. Cannot be renewed. |
|
|
75
98
|
|
|
76
99
|
`numberOfPlacesToSelect`, `selectionValidators`, and the other identity props rebuild the
|
|
77
100
|
canvas. `selectedObjects` and `selectableObjects` are initial values; use the
|
|
@@ -94,6 +117,9 @@ chart mid-selection.
|
|
|
94
117
|
| `@deck-tap` | `string` (floor id) |
|
|
95
118
|
| `@hint` | `string \| null` — `null` clears the hint |
|
|
96
119
|
| `@seat-hover` | `SeatHoverDetails \| null` — `null` when the pointer leaves |
|
|
120
|
+
| `@access-expired` | `BuyerAccessExpiredEvent` |
|
|
121
|
+
| `@access-unavailable` | `BuyerAccessUnavailableEvent` |
|
|
122
|
+
| `@selected-object-unavailable` | `SelectedObjectUnavailableEvent` |
|
|
97
123
|
|
|
98
124
|
## Imperative API
|
|
99
125
|
|
|
@@ -105,7 +131,10 @@ Everything on the template ref, typed as `SeatingChartExposed`:
|
|
|
105
131
|
`deselectCategories` · `setSelectableObjects` · `setMaxSelection` ·
|
|
106
132
|
`getSelectionValidity` ·
|
|
107
133
|
`getFloors` · `setFloor` · `setColorblindSafe` · `zoomIn` · `zoomOut` ·
|
|
108
|
-
`zoomToFit`
|
|
134
|
+
`zoomToFit` · `refreshAccess`
|
|
135
|
+
|
|
136
|
+
Calling any of them before the chart exists returns an empty answer rather than
|
|
137
|
+
throwing, so a template ref used one frame early is safe.
|
|
109
138
|
|
|
110
139
|
## Also exported
|
|
111
140
|
|
|
@@ -113,13 +142,112 @@ Everything on the template ref, typed as `SeatingChartExposed`:
|
|
|
113
142
|
- `attachPickerFrame` — raw framework-agnostic JavaScript iframe helper; grows on `seatlayer:height` and
|
|
114
143
|
pins on `seatlayer:fullscreen`.
|
|
115
144
|
|
|
116
|
-
##
|
|
145
|
+
## Security boundary
|
|
146
|
+
|
|
147
|
+
The Vue app **selects and holds** inventory. Your trusted backend **inspects and
|
|
148
|
+
books** the hold after payment or order validation.
|
|
149
|
+
|
|
150
|
+
- Never ship a SeatLayer secret key in browser code or a bundled env variable.
|
|
151
|
+
- Send only the `holdId` and your normal checkout context to your backend.
|
|
152
|
+
- Calculate the charge from server-inspected hold items, not from browser input.
|
|
153
|
+
- Reuse your stable order id as `bookingRef` so a retried booking is idempotent.
|
|
154
|
+
|
|
155
|
+
Read [how the integration works](https://docs.seatlayer.io/start/how-it-works/)
|
|
156
|
+
before connecting checkout.
|
|
157
|
+
|
|
158
|
+
## Architecture
|
|
159
|
+
|
|
160
|
+
This package is a thin Vue layer over
|
|
161
|
+
[`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js), the
|
|
162
|
+
framework-agnostic browser runtime. The component renders a single `<div>`,
|
|
163
|
+
builds the chart on mount, forwards every prop and emit, and exposes the
|
|
164
|
+
runtime's imperative handle through `defineExpose`. Chart geometry,
|
|
165
|
+
availability, and holds come from the SeatLayer API at runtime.
|
|
166
|
+
|
|
167
|
+
## Frequently asked questions
|
|
168
|
+
|
|
169
|
+
### How do I add a seat map to a Vue app?
|
|
170
|
+
|
|
171
|
+
Install `@seatlayer/vue`, render `<SeatingChart event="ev_…" />` in a container
|
|
172
|
+
with a definite height, and handle `@selection-change`. That is a complete
|
|
173
|
+
interactive seating chart with live availability; the
|
|
174
|
+
[seat-picker documentation](https://docs.seatlayer.io/buyer-sdk/seat-picker/)
|
|
175
|
+
covers props, events, holds, and checkout in depth.
|
|
176
|
+
|
|
177
|
+
### Is this a real Vue component or an iframe?
|
|
178
|
+
|
|
179
|
+
`SeatingChart` is a real Vue 3 component that renders a plain `<div>` into your
|
|
180
|
+
own tree — no iframe and no stylesheet of its own. It is written as a render
|
|
181
|
+
function rather than a single-file component, so it needs no Vue compiler plugin
|
|
182
|
+
and works the same in Vite, Nuxt, and a plain bundler. If you would rather embed
|
|
183
|
+
the buyer picker in an iframe, `attachPickerFrame` is exported for that.
|
|
184
|
+
|
|
185
|
+
### How do temporary seat holds work?
|
|
186
|
+
|
|
187
|
+
When a buyer commits to a selection, `hold()` reserves that inventory against
|
|
188
|
+
concurrent buyers for a limited checkout window and returns an opaque `holdId`.
|
|
189
|
+
The hold lapses on its own if checkout never completes — `@hold-expired` tells
|
|
190
|
+
the app to return the buyer to the map — and `resumeHold()` restores it after a
|
|
191
|
+
same-tab checkout navigation or a reload. This is what prevents double-selling
|
|
192
|
+
without locking seats forever.
|
|
193
|
+
|
|
194
|
+
### Can I use my own payment provider?
|
|
195
|
+
|
|
196
|
+
Yes. Nothing in this package takes a payment. The browser hands your code a
|
|
197
|
+
`holdId` and priced line items, your backend charges through whatever provider
|
|
198
|
+
you already use, and it then books the hold through the
|
|
199
|
+
[server-side checkout flow](https://docs.seatlayer.io/buyer-sdk/holds-and-checkout/).
|
|
200
|
+
|
|
201
|
+
### Can I evaluate it without a SeatLayer account?
|
|
202
|
+
|
|
203
|
+
You can explore a live seating chart in the browser at the
|
|
204
|
+
[buyer seat-map demo](https://app.seatlayer.io/demo/play/grand-theatre) with no
|
|
205
|
+
account. Rendering your own venue needs an event key, because the chart and its
|
|
206
|
+
availability are served by the SeatLayer API — create a free test event for
|
|
207
|
+
that, which books no real inventory.
|
|
208
|
+
|
|
209
|
+
## Continue your Vue integration
|
|
210
|
+
|
|
211
|
+
- [Follow the buyer SDK installation guide](https://docs.seatlayer.io/buyer-sdk/install/)
|
|
212
|
+
for the full browser integration, options, and events.
|
|
213
|
+
- [Connect seat holds to secure server-side checkout](https://docs.seatlayer.io/buyer-sdk/holds-and-checkout/)
|
|
214
|
+
without putting booking credentials in the browser.
|
|
215
|
+
- [Run the complete checkout example](https://docs.seatlayer.io/examples/complete-checkout/)
|
|
216
|
+
to connect a buyer hold id to payment and idempotent booking.
|
|
217
|
+
- [Compare SeatLayer's mobile seat map SDKs](https://docs.seatlayer.io/buyer-sdk/mobile/)
|
|
218
|
+
when the same event also has to render in native iOS, Android, Flutter, or
|
|
219
|
+
React Native apps.
|
|
220
|
+
- [Read the embedded Designer guide](https://docs.seatlayer.io/platform/embedded-designer/)
|
|
221
|
+
to let organizers draw their own venues inside your product.
|
|
222
|
+
- [Explore the 3D seating chart](https://seatlayer.io/3d-seat-map/) for the
|
|
223
|
+
interactive venue view buyers can switch to from the map.
|
|
224
|
+
- [Point AI coding agents at the SeatLayer docs index](https://docs.seatlayer.io/llms.txt)
|
|
225
|
+
(`llms.txt`) for an agent-readable map of the documentation.
|
|
226
|
+
|
|
227
|
+
## SeatLayer SDK ecosystem
|
|
228
|
+
|
|
229
|
+
| Surface | Package or source |
|
|
230
|
+
| --- | --- |
|
|
231
|
+
| JavaScript | [`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js) |
|
|
232
|
+
| React | [`@seatlayer/react`](https://www.npmjs.com/package/@seatlayer/react) |
|
|
233
|
+
| Vue | [`@seatlayer/vue`](https://www.npmjs.com/package/@seatlayer/vue) (this package) |
|
|
234
|
+
| Angular | [`@seatlayer/angular`](https://www.npmjs.com/package/@seatlayer/angular) |
|
|
235
|
+
| React Native | [`@seatlayer/react-native`](https://www.npmjs.com/package/@seatlayer/react-native) |
|
|
236
|
+
| iOS | [`seatlayer-ios`](https://github.com/seatlayer/seatlayer-ios) |
|
|
237
|
+
| Flutter | [`seatlayer`](https://pub.dev/packages/seatlayer) |
|
|
238
|
+
| Android | [`seatlayer-android`](https://github.com/seatlayer/seatlayer-android) |
|
|
239
|
+
| Server SDKs | [Node.js, Python, PHP, Ruby, .NET, Java, and Go](https://docs.seatlayer.io/server-sdk/install/) |
|
|
240
|
+
|
|
241
|
+
## Development
|
|
242
|
+
|
|
243
|
+
```bash
|
|
244
|
+
pnpm install
|
|
245
|
+
pnpm verify
|
|
246
|
+
```
|
|
117
247
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
- [`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js) — framework-agnostic core
|
|
121
|
-
- [Server SDKs](https://docs.seatlayer.io/server-sdk/install/) — Node.js, Python, PHP, Java, Go, Ruby, .NET
|
|
248
|
+
Source, issues, and contribution guidance live in
|
|
249
|
+
[seatlayer/seatlayer-sdk](https://github.com/seatlayer/seatlayer-sdk).
|
|
122
250
|
|
|
123
251
|
## License
|
|
124
252
|
|
|
125
|
-
MIT
|
|
253
|
+
MIT © SeatLayer
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seatlayer/vue",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Vue
|
|
3
|
+
"version": "0.67.15",
|
|
4
|
+
"description": "SeatLayer's official Vue seating chart and seat map SDK — live availability, seat selection, temporary holds, and a typed TypeScript API for ticketing apps.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "SeatLayer",
|
|
@@ -37,18 +37,27 @@
|
|
|
37
37
|
],
|
|
38
38
|
"sideEffects": false,
|
|
39
39
|
"keywords": [
|
|
40
|
-
"
|
|
40
|
+
"seat map",
|
|
41
|
+
"seating chart",
|
|
41
42
|
"seat-map",
|
|
42
43
|
"seating-chart",
|
|
43
44
|
"seat-picker",
|
|
45
|
+
"seat-selection",
|
|
46
|
+
"seat-reservation",
|
|
47
|
+
"reserved-seating",
|
|
48
|
+
"seat-booking",
|
|
49
|
+
"event-ticketing",
|
|
50
|
+
"ticketing",
|
|
51
|
+
"live-inventory",
|
|
52
|
+
"seating",
|
|
44
53
|
"seatlayer",
|
|
45
54
|
"vue",
|
|
46
55
|
"vue3",
|
|
47
|
-
"
|
|
56
|
+
"typescript"
|
|
48
57
|
],
|
|
49
58
|
"dependencies": {
|
|
50
|
-
"@seatlayer/core": "0.
|
|
51
|
-
"@seatlayer/js": "0.
|
|
59
|
+
"@seatlayer/core": "0.67.15",
|
|
60
|
+
"@seatlayer/js": "0.67.15"
|
|
52
61
|
},
|
|
53
62
|
"peerDependencies": {
|
|
54
63
|
"vue": ">=3.3.0"
|