@seatsio/seatsio-vue 1.0.0

package/.browserslistrc

@@ -0,0 +1,3 @@
+current node
+last 2 versions and > 2%
+ie > 10

package/.github/workflows/build.yml

@@ -0,0 +1,21 @@
+name: 'Build'
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: yarn install
+      - run: yarn build

package/.github/workflows/publish.yml

@@ -0,0 +1,20 @@
+name: 'Publish'
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: yarn install
+      - run: yarn build
+      - run: yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/README.md

@@ -0,0 +1,178 @@
+# seatsio-vue, the official Seats.io Vue wrapper
+
+Vue wrapper for rendering [Seats.io](https://www.seats.io) seating charts. Brought to you by the Seats.io team.
+
+# Installation
+
+```
+Npm
+npm install --save @seatsio/seatsio-vue
+
+Yarn
+yarn add -dev @seatsio/seatsio-vue
+```
+
+# Usage
+
+## Regular charts
+
+### Minimal example to render a seating chart:
+
+```jsx
+import { SeatsioSeatingChart } from '@seatsio/seatsio-vue';
+
+<div style="height: 500px">
+    <SeatsioSeatingChart
+        workspaceKey="<yourPublicWorkspaceKey>"
+        event="<yourEventKey>"
+        region="eu"
+    />
+</div>
+```
+
+The chart uses 100 % of the width and height of the DOM element (e.g. a div) in which you render it. Play with the size of that element to change the chart size.
+
+## Reacting to events
+
+### onRenderStarted()
+
+`onRenderStarted` is fired when the chart has started loading, but hasn't rendered yet. If you store the chart object that's passed to the `onRenderStarted` callback, you can access the properties defined on the  wrapped `seatsio.SeatingChart`:
+
+```jsx
+// Single File Component (SFC) using SeatsioSeatingChart
+export default {
+    ...
+    data() {
+        return {
+            chart: null
+        }
+    },
+    methods: {
+        onRenderStarted: function (chart) {
+            this.chart = chart
+            console.log(chart.selectedObjects)
+        } 
+    }
+}
+
+<SeatsioSeatingChart
+    workspaceKey="<yourPublicWorkspaceKey>"
+    event="<yourEventKey>"
+    // Notice how the event handler is defined with @<eventListener>
+    // For more information, see https://vuejs.org/guide/essentials/event-handling.html
+    @onRenderStarted="onRenderStarted"
+    region="eu"
+/>
+```
+
+## onChartRendered()
+
+`onChartRendered` is fired when the chart is rendered successfully:
+
+```jsx
+export default {
+    ...
+    data() {
+        return {
+            chart: null
+        }
+    },
+    methods: {
+        onChartRendered: function (chart) {
+            this.chart = chart
+            console.log(chart.selectedObjects)
+        } 
+    }
+}
+
+<SeatsioSeatingChart
+    workspaceKey="<yourPublicWorkspaceKey>"
+    event="<yourEventKey>"
+    @onChartRendered="onChartRendered"
+    region="eu"
+/>
+```
+## Supported properties
+
+Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/renderer/embed-a-floor-plan
+
+
+Example: Passing in a custom object color:
+```jsx
+export default {
+    ...
+    data() {
+        // Supports CSS color values
+        objectColor: () => 'grey',
+    },
+}
+
+<SeatsioSeatingChart
+    workspaceKey="<yourPublicWorkspaceKey>"
+    event="<yourEventKey>"
+    region="eu"
+    :objectColor="objectColor"
+/>
+```
+
+Whenever one of the properties passed on to `<SeatsioSeatingChart />` changes, the chart destroys itself and rerenders. To avoid such a 'full refresh', you can use `chart.changeConfig()` instead of updating the properties directly. Please check https://docs.seats.io/docs/renderer-chart-properties-chartchangeconfig. Note that `changeConfig()` only supports a subset of all available chart parameters.
+
+## Event manager
+
+```jsx
+import { SeatsioEventManager } from '@seatsio/seatsio-vue';
+
+<div style="height: 500px">
+    <SeatsioEventManager
+        secretKey="<yourWorkspaceSecretKey>"
+        event="<yourEventKey>"
+        mode="<manageObjectStatuses or another mode>"
+        region="eu"
+    />
+</div>
+```
+
+Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/event-manager/configuring
+
+## Chart manager
+
+```jsx
+import { SeatsioChartManager } from '@seatsio/seatsio-vue';
+
+<div style="height: 500px">
+    <SeatsioChartManager
+        secretKey="<yourWorkspaceSecretKey>"
+        chart="<yourChartKey>"
+        mode="<manageRulesets or another mode>"
+        region="eu"
+    />
+</div>
+```
+Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/chart-manager/configuring/
+
+## Seating Chart Designer
+
+To embed the seating chart designer for the purpose of creating a new chart, do this:
+
+```jsx
+import { SeatsioDesigner } from '@seatsio/seatsio-vue';
+
+<div style="height: 500px">
+    <SeatsioDesigner
+        secretKey="<yourWorkspaceSecretKey>"
+        region="eu"
+    />
+</div>
+```
+
+To be able to edit a chart from an embedded designer, you need to specify the chart to load:
+ 
+```jsx
+<SeatsioDesigner
+    secretKey="<yourWorkspaceSecretKey>"    
+    chartKey="<yourChartKey>"
+    region="eu"
+/>
+```
+
+Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/embedded-designer/introduction

package/babel.config.js

@@ -0,0 +1,16 @@
+const devPresets = ['@vue/babel-preset-app'];
+const buildPresets = [
+  [
+    '@babel/preset-env',
+    // Config for @babel/preset-env
+    {
+      // Example: Always transpile optional chaining/nullish coalescing
+      // include: [
+      //   /(optional-chaining|nullish-coalescing)/
+      // ],
+    },
+  ],
+];
+module.exports = {
+  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
+};

package/build/rollup.config.js

@@ -0,0 +1,143 @@
+// rollup.config.js
+import fs from 'fs';
+import path from 'path';
+import vue from 'rollup-plugin-vue';
+import alias from '@rollup/plugin-alias';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import babel from '@rollup/plugin-babel';
+import { terser } from 'rollup-plugin-terser';
+import minimist from 'minimist';
+
+// Get browserslist config and remove ie from es build targets
+const esbrowserslist = fs.readFileSync('./.browserslistrc')
+  .toString()
+  .split('\n')
+  .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
+
+// Extract babel preset-env config, to combine with esbrowserslist
+const babelPresetEnvConfig = require('../babel.config')
+  .presets.filter((entry) => entry[0] === '@babel/preset-env')[0][1];
+
+const argv = minimist(process.argv.slice(2));
+
+const projectRoot = path.resolve(__dirname, '..');
+
+const baseConfig = {
+  input: 'src/entry.js',
+  plugins: {
+    preVue: [
+      alias({
+        entries: [
+          {
+            find: '@',
+            replacement: `${path.resolve(projectRoot, 'src')}`,
+          },
+        ],
+      }),
+    ],
+    replace: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      preventAssignment: true
+    },
+    vue: {
+      css: true,
+      template: {
+        isProduction: true,
+      },
+    },
+    postVue: [
+      resolve({
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      }),
+      commonjs(),
+    ],
+    babel: {
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      babelHelpers: 'bundled',
+    },
+  },
+};
+
+// ESM/UMD/IIFE shared settings: externals
+// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
+const external = [
+  // list external dependencies, exactly the way it is written in the import statement.
+  // eg. 'jquery'
+  'vue',
+];
+
+// UMD/IIFE shared settings: output.globals
+// Refer to https://rollupjs.org/guide/en#output-globals for details
+const globals = {
+  // Provide global variable names to replace your external imports
+  // eg. jquery: '$'
+  vue: 'Vue',
+};
+
+// Customize configs for individual targets
+const buildFormats = [];
+if (!argv.format || argv.format === 'es') {
+  const esConfig = {
+    ...baseConfig,
+    input: 'src/entry.js',
+    external,
+    output: {
+      file: 'dist/seatsio-vue.js',
+      format: 'esm',
+      exports: 'named',
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel({
+        ...baseConfig.plugins.babel,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              ...babelPresetEnvConfig,
+              targets: esbrowserslist,
+            },
+          ],
+        ],
+      }),
+    ],
+  };
+  buildFormats.push(esConfig);
+}
+
+if (!argv.format || argv.format === 'iife') {
+  const unpkgConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/seatsio-vue.min.js',
+      format: 'iife',
+      name: 'SeatsioVue',
+      exports: 'named',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel(baseConfig.plugins.babel),
+      terser({
+        output: {
+          ecma: 5,
+        },
+      }),
+    ],
+  };
+  buildFormats.push(unpkgConfig);
+}
+
+// Export config
+export default buildFormats;

package/dev/componentSelector.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'ComponentSelector',
+  methods: {
+    onClick: function(selection) {
+        this.$emit('selectChartType', selection)
+    }
+  }
+}
+</script>
+
+<template>
+  <ul id="menu">
+      <li><button @click="onClick('seatingChart')">Seating Chart</button></li>
+      <li><button @click="onClick('chartDesigner')">Designer</button></li>
+      <li><button @click="onClick('chartManager')">ChartManager</button></li>
+      <li><button @click="onClick('eventManager')">EventManager</button></li>
+    </ul>
+</template>
+
+<style scoped>
+#menu {
+  list-style-type: none;
+  display: inline;
+}
+
+#menu > li {
+  display: inline;
+  margin-right: 4px;
+}
+</style>

package/dev/serve.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import ServeDev from './serve.vue'
+
+createApp(ServeDev).mount('#app')

package/dev/serve.vue

@@ -0,0 +1,87 @@
+<script>
+import ComponentSelector from './componentSelector.vue'
+import SeatsioSeatingChart from '@/lib-components/seatsioSeatingChart.vue'
+import SeatsioChartManager from '@/lib-components/seatsioChartManager.vue'
+import SeatsioDesigner from '@/lib-components/seatsioDesigner.vue'
+import SeatsioEventManager from '@/lib-components/seatsioEventManager.vue'
+
+export default {
+    name: 'ServeDev',
+    components: {
+      ComponentSelector,
+      SeatsioSeatingChart,
+      SeatsioChartManager,
+      SeatsioDesigner,
+      SeatsioEventManager,
+      SeatsioSeatingChart,
+    },
+    data: () => ({
+      messages: { clickToSelect: 'Click to pick'},
+      objectColor: () => 'grey',
+      tooltipInfo: () => 'My custom info',
+      selectedComponent: 'seatingChart',
+    }),
+    methods: {
+      onRenderStarted: chart => console.log('Render started', chart),
+      onObjectClicked: clickedObject => console.log('Object clicked', clickedObject),
+    },
+}
+</script>
+
+<template>
+  <ComponentSelector @selectChartType="component => selectedComponent = component" />
+  <SeatsioSeatingChart
+        v-if="selectedComponent === 'seatingChart'"
+        id="myChart"
+        workspaceKey="publicDemoKey"
+        event="smallTheatreEvent"
+        region="eu"
+        :messages="messages"
+        :objectColor="objectColor"
+        :tooltipInfo="tooltipInfo"
+        @onRenderStarted="onRenderStarted"
+        @onObjectClicked="onObjectClicked"
+    />
+    <SeatsioDesigner
+      v-if="selectedComponent === 'chartDesigner'"
+      event="437fd038-ba0c-42aa-9ba9-e06bd5b790a3"
+      id="myChartDesigner"
+      workspaceKey="publicDemoKey"
+      mode="readOnly"
+      :messages="messages"
+      :tooltipInfo="tooltipInfo"
+      @onRenderStarted="onRenderStarted"
+      @onObjectClicked="onObjectClicked"
+      chartKey="0bcf8295-0063-486b-85fe-77b8d85008b5"
+    />
+    <SeatsioChartManager
+        v-if="selectedComponent === 'chartManager'"
+        id="myChartManager"
+        mode="manageRulesets"
+        :messages="messages"
+        :tooltipInfo="tooltipInfo"
+        @onRenderStarted="onRenderStarted"
+        @onObjectClicked="onObjectClicked"
+        workspaceKey="<yourWorkspaceKey>"
+        chartKey="<yourChartKey>"
+        secretKey="<yourWorkspaceSecretKey>"
+    />
+    <SeatsioEventManager
+        v-if="selectedComponent === 'eventManager'"
+        id="myEventManager"
+        mode="manageCategories"
+        :messages="messages"
+        :tooltipInfo="tooltipInfo"
+        @onRenderStarted="onRenderStarted"
+        @onObjectClicked="onObjectClicked"
+        event="<yourEventKey"
+        secretKey="<yourWorkspaceSecretKey>"
+        workspaceKey="<yourWorkspaceKey>"
+    />
+</template>
+
+<style scoped>
+#myChart, #myChartDesigner, #myChartManager, #myEventManager {
+  height: 100vh
+}
+</style>

package/dist/seatsio-vue.js

@@ -0,0 +1,215 @@
+import { openBlock, createElementBlock } from 'vue';
+
+var script$4 = {
+  mounted() {
+    this.createAndRenderChart();
+  },
+  beforeUnmount() {
+    this.destroyChart();
+  },
+  props: {
+    chartJsUrl: {
+      type: String,
+      default: 'https://cdn-{region}.seatsio.net/chart.js'
+    },
+    event: String,
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    extraConfig: Object,
+    fitTo: String,
+    language: String,
+    messages: Object,
+    mode: String,
+    objectColor: Function,
+    objectTooltip: Object,
+    workspaceKey: {
+      type: String,
+      required: true
+    },
+    region: {
+      type: String,
+      default: 'eu'
+    },
+    showFullscreenButton: Boolean,
+    tooltipInfo: Function,
+    chartKey: String,
+    secretKey: String
+  },
+  methods: {
+    createAndRenderChart: async function () {
+      const seatsio = await this.getSeatsio();
+      const callbacks = {
+        onChartRendered: chart => this.$emit('onChartRendered', chart),
+        onChartRenderingFailed: chart => this.$emit('onChartRenderingFailed', chart),
+        onChartRerenderingStarted: chart => this.$emit('onChartRerenderingStarted', chart),
+        onObjectSelected: selectedObject => this.$emit('onObjectSelected', selectedObject),
+        onObjectDeselected: deselectedObject => this.$emit('onObjectDeselected', deselectedObject),
+        onObjectClicked: clickedObject => this.$emit('onObjectClicked', clickedObject),
+        onFullScreenOpened: () => this.$emit('onFullScreenOpened'),
+        onFullScreenClosed: () => this.$emit('onFullScreenClosed'),
+        onSubmitSucceeded: () => this.$emit('onSubmitSucceeded'),
+        onSubmitFailed: () => this.$emit('onSubmitFailed')
+      };
+      const config = {
+        divId: this.$props.id,
+        ...this.finaliseProps(this.$props),
+        ...callbacks
+      };
+      this.chart = this.createChart(seatsio, config).render();
+      this.chart && this.$emit('onRenderStarted', this.chart);
+    },
+    finaliseProps: function (props) {
+      return props;
+    },
+    getSeatsio: async function () {
+      if (typeof window.seatsio === 'undefined') {
+        return this.loadSeatsio();
+      } else if (window.seatsio.region !== this.region) {
+        window.seatsio = undefined;
+        return this.loadSeatsio();
+      } else {
+        return Promise.resolve(seatsio);
+      }
+    },
+    loadSeatsio: async function () {
+      return new Promise((resolve, reject) => {
+        let script = document.createElement('script');
+        script.onload = () => {
+          window.seatsio.region = this.region;
+          resolve(window.seatsio);
+        };
+        script.onerror = () => reject(`Could not load ${script.src}`);
+        script.src = this.chartJsUrl.replace('{region}', this.region);
+        document.head.appendChild(script);
+      });
+    },
+    destroyChart: function () {
+      this.chart.destroy();
+    }
+  }
+};
+
+var script$3 = {
+  mixins: [script$4],
+  name: 'SeatsioChartManager',
+  methods: {
+    finaliseProps: function (props) {
+      const {
+        chartKey,
+        chartJsUrl,
+        id,
+        region,
+        showFullscreenButton,
+        ...finalProps
+      } = props;
+      return {
+        chart: chartKey,
+        ...finalProps
+      };
+    },
+    createChart: (seatsio, config) => {
+      return new seatsio.ChartManager(config);
+    }
+  }
+};
+
+const _hoisted_1$3 = ["id"];
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    id: _ctx.id
+  }, null, 8, _hoisted_1$3);
+}
+
+script$3.render = render$3;
+
+var script$2 = {
+  mixins: [script$4],
+  name: 'SeatsioDesigner',
+  methods: {
+    createChart: function (seatsio, config) {
+      return new seatsio.SeatingChartDesigner(config);
+    }
+  }
+};
+
+const _hoisted_1$2 = ["id"];
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    id: _ctx.id
+  }, null, 8, _hoisted_1$2);
+}
+
+script$2.render = render$2;
+
+var script$1 = {
+  mixins: [script$4],
+  name: 'SeatsioEventManager',
+  methods: {
+    finaliseProps: function (props) {
+      const {
+        chartJsUrl,
+        id,
+        region,
+        showFullscreenButton,
+        chartKey,
+        ...finalProps
+      } = props;
+      return {
+        chart: chartKey,
+        ...finalProps
+      };
+    },
+    createChart: (seatsio, config) => {
+      return new seatsio.EventManager(config);
+    }
+  }
+};
+
+const _hoisted_1$1 = ["id"];
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    id: _ctx.id
+  }, null, 8, _hoisted_1$1);
+}
+
+script$1.render = render$1;
+
+var script = {
+  mixins: [script$4],
+  name: 'SeatsioSeatingChart',
+  methods: {
+    createChart: function (seatsio, config) {
+      return new seatsio.SeatingChart(config);
+    }
+  }
+};
+
+const _hoisted_1 = ["id"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    id: _ctx.id
+  }, null, 8, _hoisted_1);
+}
+
+script.render = render;
+
+const components = {
+  SeatsioChartManager: script$3,
+  SeatsioDesigner: script$2,
+  SeatsioEventManager: script$1,
+  SeatsioSeatingChart: script
+};
+var entry = {
+  install(app, _options) {
+    for (const prop in components) {
+      if (components.hasOwnProperty(prop)) {
+        const component = components[prop];
+        app.component(component.name, component);
+      }
+    }
+  }
+};
+
+export { script$3 as SeatsioChartManager, script$2 as SeatsioDesigner, script$1 as SeatsioEventManager, script as SeatsioSeatingChart, entry as default };

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@seatsio/seatsio-vue",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "dist/seatsio-vue.js",
+  "sideEffects": false,
+  "scripts": {
+    "serve": "vue-cli-service serve dev/serve.js",
+    "prebuild": "rimraf ./dist",
+    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "cross-env": "^7.0.3",
+    "minimist": "^1.2.5",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.52.8",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^6.0.0",
+    "vue": "3.2.47"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.47"
+  }
+}

package/src/entry.js

@@ -0,0 +1,26 @@
+import { 
+  SeatsioChartManager,
+  SeatsioDesigner,
+  SeatsioEventManager,
+  SeatsioSeatingChart
+} from './lib-components';
+
+const components = {
+  SeatsioChartManager,
+  SeatsioDesigner,
+  SeatsioEventManager,
+  SeatsioSeatingChart
+}
+
+export default {
+  install (app, _options) {
+    for (const prop in components) {
+      if (components.hasOwnProperty(prop)) {
+        const component = components[prop]
+        app.component(component.name, component)
+      }
+    }
+  }
+}
+
+export { SeatsioChartManager, SeatsioDesigner, SeatsioEventManager, SeatsioSeatingChart }

package/src/lib-components/index.js

@@ -0,0 +1,5 @@
+/* eslint-disable import/prefer-default-export */
+export { default as SeatsioChartManager } from './seatsioChartManager.vue';
+export { default as SeatsioDesigner } from './seatsioDesigner.vue';
+export { default as SeatsioEventManager } from './seatsioEventManager.vue';
+export { default as SeatsioSeatingChart } from './seatsioSeatingChart.vue';

package/src/lib-components/seatsioChartManager.vue

@@ -0,0 +1,21 @@
+<script>
+import SeatsioEmbeddable from './seatsioEmbeddable.vue'
+
+export default {
+    mixins: [SeatsioEmbeddable],
+    name: 'SeatsioChartManager',
+    methods: {
+        finaliseProps: function (props) {
+            const { chartKey, chartJsUrl, id, region, showFullscreenButton, ...finalProps } = props
+            return { chart: chartKey, ...finalProps }
+        },
+        createChart: (seatsio, config) => {
+          return new seatsio.ChartManager(config)
+        }
+    }
+}
+</script>
+
+<template>
+  <div :id="id"></div>
+</template>

package/src/lib-components/seatsioDesigner.vue

@@ -0,0 +1,17 @@
+<script>
+import SeatsioEmbeddable from './seatsioEmbeddable.vue'
+
+export default {
+  mixins: [SeatsioEmbeddable],
+  name: 'SeatsioDesigner',
+  methods: {
+     createChart: function (seatsio, config) {
+      return new seatsio.SeatingChartDesigner(config)
+    }
+  }
+}
+</script>
+
+<template>
+  <div :id="id"></div>
+</template>

package/src/lib-components/seatsioEmbeddable.vue

@@ -0,0 +1,77 @@
+<script>
+  export default {
+    mounted() {
+      this.createAndRenderChart()
+    },
+    beforeUnmount() {
+      this.destroyChart()
+    },
+    props: {
+      chartJsUrl: {type: String, default: 'https://cdn-{region}.seatsio.net/chart.js'},
+      event: String,
+      id: {type: String, default: 'chart'},
+      extraConfig: Object,
+      fitTo: String,
+      language: String,
+      messages: Object,
+      mode: String,
+      objectColor: Function,
+      objectTooltip: Object,
+      workspaceKey: {type: String, required: true},
+      region: {type: String, default: 'eu'},
+      showFullscreenButton: Boolean,
+      tooltipInfo: Function,
+      chartKey: String,
+      secretKey: String
+    },
+    methods: {
+      createAndRenderChart: async function () {
+        const seatsio = await this.getSeatsio()
+        const callbacks = {
+          onChartRendered: chart => this.$emit('onChartRendered', chart),
+          onChartRenderingFailed: chart => this.$emit('onChartRenderingFailed', chart),
+          onChartRerenderingStarted: chart => this.$emit('onChartRerenderingStarted', chart),
+          onObjectSelected: selectedObject => this.$emit('onObjectSelected', selectedObject),
+          onObjectDeselected: deselectedObject => this.$emit('onObjectDeselected', deselectedObject),
+          onObjectClicked: clickedObject => this.$emit('onObjectClicked', clickedObject),
+          onFullScreenOpened: () => this.$emit('onFullScreenOpened'),
+          onFullScreenClosed: () => this.$emit('onFullScreenClosed'),
+          onSubmitSucceeded: () => this.$emit('onSubmitSucceeded'),
+          onSubmitFailed: () => this.$emit('onSubmitFailed'),
+        }
+  
+        const config = {divId: this.$props.id, ...this.finaliseProps(this.$props), ...callbacks}                 
+        this.chart = this.createChart(seatsio, config).render()
+        this.chart && this.$emit('onRenderStarted', this.chart)
+      },
+      finaliseProps: function (props) {
+        return props
+      },
+      getSeatsio: async function () {
+        if (typeof window.seatsio === 'undefined') {
+          return this.loadSeatsio()
+        } else if (window.seatsio.region !== this.region) {
+          window.seatsio = undefined
+          return this.loadSeatsio()
+        } else {
+          return Promise.resolve(seatsio)
+        }
+      },
+      loadSeatsio: async function () {
+        return new Promise((resolve, reject) => {
+          let script = document.createElement('script')
+          script.onload = () => {
+            window.seatsio.region = this.region
+            resolve(window.seatsio)
+          }
+          script.onerror = () => reject(`Could not load ${script.src}`)
+          script.src = this.chartJsUrl.replace('{region}', this.region)
+          document.head.appendChild(script)
+        })
+      },
+      destroyChart: function () {
+        this.chart.destroy()
+      }
+    }
+  }
+</script>

package/src/lib-components/seatsioEventManager.vue

@@ -0,0 +1,21 @@
+<script>
+import SeatsioEmbeddable from './seatsioEmbeddable.vue'
+
+export default {
+    mixins: [SeatsioEmbeddable],
+    name: 'SeatsioEventManager',
+    methods: {
+        finaliseProps: function (props) {
+            const { chartJsUrl, id, region, showFullscreenButton, chartKey, ...finalProps } = props
+            return { chart: chartKey, ...finalProps }
+        },
+        createChart: (seatsio, config) => {
+          return new seatsio.EventManager(config)
+        }
+    }
+}
+</script>
+
+<template>
+  <div :id="id"></div>
+</template>

package/src/lib-components/seatsioSeatingChart.vue

@@ -0,0 +1,17 @@
+<script>
+import SeatsioEmbeddable from './seatsioEmbeddable.vue'
+
+export default {
+  mixins: [SeatsioEmbeddable],
+  name: 'SeatsioSeatingChart',
+  methods: {
+    createChart: function (seatsio, config) {
+      return new seatsio.SeatingChart(config)
+    }
+  }
+}
+</script>
+
+<template>
+  <div :id="id"></div>
+</template>