@seatsio/seatsio-vue 2.0.0 → 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 seats.io
+
+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

@@ -2,6 +2,14 @@
 
 Vue wrapper for rendering [Seats.io](https://www.seats.io) seating charts. Brought to you by the Seats.io team.
 
+# Recommended tools
+
+This package uses TypeScript. In order to get the best possible developer experience, you may need some Vue plugins for your IDE. If you use Visual Studio Code, we recommend the following plugins (direct extension links):
+- [Vue Language Features (Volar)](vscode:extension/Vue.volar)
+- [TypeScript Vue Plugin](vscode:extension/Vue.vscode-typescript-vue-plugin)
+
+If you use a different IDE, there may be similar plugins available.
+
 # Installation
 
 ```
@@ -152,22 +160,6 @@ import { SeatsioEventManager } from '@seatsio/seatsio-vue';
 
 Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/event-manager/configuring
 
-## Chart manager
-
-```vue
-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:
@@ -179,6 +171,7 @@ import { SeatsioDesigner } from '@seatsio/seatsio-vue';
     <SeatsioDesigner
         secretKey="<yourWorkspaceSecretKey>"
         region="eu"
+        @chartCreated="onChartCreated"
     />
 </div>
 ```

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SeatsioDesigner } from './lib-components/seatsioDesigner.vue';
+export { default as SeatsioEventManager } from './lib-components/seatsioEventManager.vue';
+export { default as SeatsioSeatingChart } from './lib-components/seatsioSeatingChart.vue';
+export * from './types';

package/dist/lib-components/seatsioDesigner.vue.d.ts

@@ -0,0 +1,3 @@
+import type { SeatsioChartDesignerProps } from '../types';
+declare const _default: import("vue").DefineComponent<SeatsioChartDesignerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<SeatsioChartDesignerProps>, {}, {}>;
+export default _default;

package/dist/lib-components/seatsioEmbeddable.vue.d.ts

@@ -0,0 +1,40 @@
+import type { Region } from '@seatsio/seatsio-types';
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    chartJsUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    region: {
+        type: PropType<Region>;
+        required: true;
+    };
+}, unknown, unknown, {}, {
+    createAndRenderChart: () => Promise<void>;
+    propsAndAttrs: () => {};
+    getSeatsio: () => Promise<unknown>;
+    loadSeatsio: () => Promise<unknown>;
+    destroyChart: () => void;
+    getRegion: () => Region;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    chartJsUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    region: {
+        type: PropType<Region>;
+        required: true;
+    };
+}>>, {
+    chartJsUrl: string;
+    id: string;
+}, {}>;
+export default _default;

package/dist/lib-components/seatsioEventManager.vue.d.ts

@@ -0,0 +1,5 @@
+import type { SeatsioEventManagerProps } from '../types';
+declare const _default: import("vue").DefineComponent<SeatsioEventManagerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<SeatsioEventManagerProps>, {
+    themeColors?: any;
+}, {}>;
+export default _default;

package/dist/lib-components/seatsioSeatingChart.vue.d.ts

@@ -0,0 +1,5 @@
+import type { SeatsioSeatingChartProps } from '../types';
+declare const _default: import("vue").DefineComponent<SeatsioSeatingChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<SeatsioSeatingChartProps>, {
+    themeColors?: any;
+}, {}>;
+export default _default;

package/dist/seatsio-vue.js

@@ -1,6 +1,6 @@
-import { openBlock, createElementBlock } from 'vue';
+import { defineComponent, openBlock, createElementBlock } from 'vue';
 
-var script$4 = {
+var script$3 = defineComponent({
   mounted() {
     this.createAndRenderChart();
   },
@@ -31,8 +31,10 @@ var script$4 = {
         divId: this.$props.id,
         ...this.propsAndAttrs()
       };
+      // @ts-ignore
       this.chart = this.createChart(seatsio, config).render();
       if (this.$attrs.onRenderStarted) {
+        // @ts-ignore
         this.$attrs.onRenderStarted(this.chart);
       }
     },
@@ -41,6 +43,7 @@ var script$4 = {
         ...this.$props,
         ...this.$attrs
       };
+      // @ts-ignore
       let {
         id,
         onRenderStarted,
@@ -53,7 +56,8 @@ var script$4 = {
     getSeatsio: async function () {
       if (typeof window.seatsio === 'undefined') {
         return this.loadSeatsio();
-      } else if (window.seatsio.region !== this.getRegion()) {
+      } else if (seatsio.region !== this.getRegion()) {
+        // @ts-ignore
         window.seatsio = undefined;
         return this.loadSeatsio();
       } else {
@@ -64,7 +68,7 @@ var script$4 = {
       return new Promise((resolve, reject) => {
         let script = document.createElement('script');
         script.onload = () => {
-          window.seatsio.region = this.getRegion();
+          seatsio.region = this.getRegion();
           resolve(window.seatsio);
         };
         script.onerror = () => reject(`Could not load ${script.src}`);
@@ -73,68 +77,39 @@ var script$4 = {
       });
     },
     destroyChart: function () {
+      // @ts-ignore
       this.chart.destroy();
     },
     getRegion: function () {
       return this.$props.region;
     }
   }
-};
+});
 
-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.__file = "src/lib-components/seatsioEmbeddable.vue";
 
-script$3.render = render$3;
-
-var script$2 = {
-  mixins: [script$4],
+var script$2 = defineComponent({
+  extends: script$3,
   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);
+  }, null, 8 /* PROPS */, _hoisted_1$2);
 }
 
 script$2.render = render$2;
+script$2.__file = "src/lib-components/seatsioDesigner.vue";
 
-var script$1 = {
-  mixins: [script$4],
+var script$1 = defineComponent({
+  extends: script$3,
   name: 'SeatsioEventManager',
   methods: {
     finaliseProps: function (props) {
@@ -142,12 +117,10 @@ var script$1 = {
         chartJsUrl,
         id,
         region,
-        showFullscreenButton,
-        chartKey,
+        showFullScreenButton,
         ...finalProps
       } = props;
       return {
-        chart: chartKey,
         ...finalProps
       };
     },
@@ -155,51 +128,39 @@ var script$1 = {
       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);
+  }, null, 8 /* PROPS */, _hoisted_1$1);
 }
 
 script$1.render = render$1;
+script$1.__file = "src/lib-components/seatsioEventManager.vue";
 
-var script = {
-  mixins: [script$4],
+var script = defineComponent({
+  extends: script$3,
+  components: {
+    SeatsioEmbeddable: script$3
+  },
   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);
+  }, null, 8 /* PROPS */, _hoisted_1);
 }
 
 script.render = render;
+script.__file = "src/lib-components/seatsioSeatingChart.vue";
 
-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 };
+export { script$2 as SeatsioDesigner, script$1 as SeatsioEventManager, script as SeatsioSeatingChart };

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+import type { ChartDesigner, ChartDesignerConfigOptions, ChartRendererConfigOptions, EventManager, EventManagerConfigOptions, Region, SeatingChart } from '@seatsio/seatsio-types';
+export type * from '@seatsio/seatsio-types';
+export type SeatsioConfig = ChartRendererConfigOptions | EventManagerConfigOptions | ChartDesignerConfigOptions;
+export interface SeatsioEmbeddableProps {
+    chartJsUrl?: string;
+    id?: string;
+    region: Region;
+    onRenderStarted?: (chart: SeatsioChartInstance) => void;
+}
+export type SeatsioChartInstance = SeatingChart | EventManager | ChartDesigner;
+export type SeatsioSeatingChartProps = SeatsioEmbeddableProps & ChartRendererConfigOptions;
+export type SeatsioEventManagerProps = SeatsioEmbeddableProps & EventManagerConfigOptions;
+export type SeatsioChartDesignerProps = SeatsioEmbeddableProps & ChartDesignerConfigOptions;

package/package.json

@@ -1,33 +1,42 @@
 {
   "name": "@seatsio/seatsio-vue",
-  "version": "2.0.0",
-  "license": "MIT",
-  "main": "dist/seatsio-vue.js",
-  "sideEffects": false,
+  "version": "3.0.0",
   "scripts": {
-    "serve": "vue-cli-service serve dev/serve.js",
-    "prebuild": "rimraf ./dist",
-    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js"
+    "serve": "vue-cli-service serve dev/serve.ts",
+    "build": "cross-env NODE_ENV=production && rollup --config build/rollup.config.js --format es",
+    "prebuild": "rimraf ./dist"
+  },
+  "module": "dist/seatsio-vue.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "dependencies": {
+    "@seatsio/seatsio-types": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.5",
-    "@babel/preset-env": "^7.21.5",
-    "@rollup/plugin-alias": "^5.0.0",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.22.20",
+    "@rollup/plugin-alias": "^5.0.1",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.1.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
     "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "^5.0.8",
+    "@vue/tsconfig": "^0.4.0",
     "cross-env": "^7.0.3",
     "minimist": "^1.2.8",
-    "rimraf": "^4.4.1",
+    "rimraf": "^5.0.5",
     "rollup": "^2.52.8",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-vue": "^6.0.0",
-    "vue": "3.2.47"
+    "typescript": "~5.0.0",
+    "vue": "3.3.4"
   },
   "peerDependencies": {
     "vue": "^3.2.47"
-  }
+  },
+  "license": "MIT",
+  "sideEffects": false
 }

package/.browserslistrc

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

package/.github/dependabot.yml

@@ -1,11 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "monthly"

package/.github/workflows/build.yml

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

package/.github/workflows/release.yml

@@ -1,44 +0,0 @@
-# Very important!
-# Make sure that the github token has read AND WRITE access on github.
-#   1. hit https://github.com/seatsio/[REPO]/settings/actions
-#   2. under "Workflow permissions", make sure "Read and write permissions" is checked instead of the (default?) read only.
-#
-
-name: Release
-run-name: Release ${{ github.repository }}
-on:
-  workflow_dispatch:
-    inputs:
-      versionToBump:
-        description: 'The version to bump. Major for incompatible API changes, minor for adding BC features'
-        required: true
-        type: choice
-        options:
-          - minor
-          - major
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: fregante/setup-git-user@v2
-      - id: install-zx
-        run: npm i -g zx
-      - id: install-semver-tool
-        run: |
-          wget -O /usr/local/bin/semver https://raw.githubusercontent.com/fsaintjacques/semver-tool/master/src/semver
-          chmod +x /usr/local/bin/semver
-      - run: zx ./release.mjs -v $VERSION_TO_BUMP
-        env:
-          VERSION_TO_BUMP: ${{ inputs.versionToBump }}
-          GH_TOKEN: ${{ github.token }}
-      - 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/babel.config.js

@@ -1,16 +0,0 @@
-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

@@ -1,143 +0,0 @@
-// 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

@@ -1,31 +0,0 @@
-<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

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

package/dev/serve.vue

@@ -1,103 +0,0 @@
-<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
-    },
-    data: () => ({
-      messages: {
-        clickToSelect: 'Click to pick',
-        STAGE: 'stage-translated'
-      },
-      selectedComponent: 'seatingChart',
-      objectColor: () => 'purple',
-      tooltipInfo: () => 'My custom info',
-      chartJsUrl: 'https://cdn-staging-eu.seatsio.net/chart.js'
-    }),
-    methods: {
-      onRenderStarted: chart => console.log('Render started', chart),
-      onObjectClicked: clickedObject => console.log('Object clicked', clickedObject),
-      priceFormatter: price => '$' + price
-    }
-}
-</script>
-
-<template>
-  <ComponentSelector @selectChartType="component => selectedComponent = component" />
-  <SeatsioSeatingChart
-        v-if="selectedComponent === 'seatingChart'"
-        id="myChart"
-        workspaceKey="publicDemoKey"
-        event="smallTheatreEvent"
-        region="eu"
-        language="en"
-        :chartJsUrl="chartJsUrl"
-        :messages="messages"
-        :objectColor="objectColor"
-        :tooltipInfo="tooltipInfo"
-        :priceFormatter="priceFormatter"
-        @renderStarted="onRenderStarted"
-        @objectClicked="onObjectClicked"
-        :pricing="[
-          { category: 1, price: 30 },
-          { category: 2, price: 40 },
-          { category: 3, price: 50 }
-        ]"
-    />
-    <SeatsioDesigner
-      v-if="selectedComponent === 'chartDesigner'"
-      region="eu"
-      id="myChartDesigner"
-      workspaceKey="publicDemoKey"
-      mode="readOnly"
-      :chartJsUrl="chartJsUrl"
-      :show-fullscreen-button="true"
-      :messages="messages"
-      :tooltipInfo="tooltipInfo"
-      @renderStarted="onRenderStarted"
-      @objectClicked="onObjectClicked"
-      chartKey="0bcf8295-0063-486b-85fe-77b8d85008b5"
-    />
-    <SeatsioChartManager
-        v-if="selectedComponent === 'chartManager'"
-        region="eu"
-        id="myChartManager"
-        mode="manageRulesets"
-        :chartJsUrl="chartJsUrl"
-        :messages="messages"
-        :tooltipInfo="tooltipInfo"
-        @renderStarted="onRenderStarted"
-        @objectClicked="onObjectClicked"
-        chart="0bcf8295-0063-486b-85fe-77b8d85008b5"
-        secretKey="demoKey"
-    />
-    <SeatsioEventManager
-        v-if="selectedComponent === 'eventManager'"
-        region="eu"
-        id="myEventManager"
-        mode="manageCategories"
-        :chartJsUrl="chartJsUrl"
-        :messages="messages"
-        :tooltipInfo="tooltipInfo"
-        @renderStarted="onRenderStarted"
-        @objectClicked="onObjectClicked"
-        event="smallTheatreEvent"
-        secretKey="demoKey"
-    />
-</template>
-
-<style scoped>
-#myChart, #myChartDesigner, #myChartManager, #myEventManager {
-  height: 100vh
-}
-</style>

package/release.mjs

@@ -1,92 +0,0 @@
-#!/usr/bin/env zx
-
-/*
-* Script to release the seats.io java lib.
-*   - changes the version number in README.md
-*   - changes the version number in build.gradle
-*   - creates the release in Gihub (using gh cli)
-*
-*
-* Prerequisites:
-*   - zx installed (https://github.com/google/zx)
-*   - gh cli installed (https://cli.github.com/)
-*   - semver cli installed (https://github.com/fsaintjacques/semver-tool)
-*
-* Usage:
-*   zx ./release.mjs -v major/minor -n "release notes"
-* */
-
-// don't output the commands themselves
-$.verbose = false
-
-const versionToBump = getVersionToBump()
-const latestVersion = await fetchLatestReleasedVersionNumber()
-const nextVersion = await determineNextVersionNumber(latestVersion)
-
-await pullLastVersion()
-    .then(bumpVersionInFiles)
-    .then(commitAndPush)
-    .then(release)
-
-function getVersionToBump() {
-    if (!argv.v || !(argv.v === 'minor' || argv.v === 'major')) {
-        throw new Error ("Please specify -v major/minor")
-    }
-    return argv.v
-}
-
-function removeLeadingV(tagName) {
-    if (tagName.startsWith('v')) {
-        return tagName.substring(1)
-    }
-    return tagName
-}
-
-async function fetchLatestReleasedVersionNumber() {
-    let result = await $`gh release view --json tagName`
-    let tagName = JSON.parse(result).tagName
-    return removeLeadingV(tagName)
-}
-
-async function determineNextVersionNumber(previous) {
-    return (await $`semver bump ${versionToBump} ${previous}`).stdout.trim()
-}
-
-async function bumpVersionInFiles() {
-    await replaceInFile("package.json", `"version": "${latestVersion}",`, `"version": "${nextVersion}",`)
-}
-
-async function replaceInFile(filename, latestVersion, nextVersion) {
-    return await fs.readFile(filename, 'utf8')
-        .then(text => {
-            if (text.indexOf(latestVersion) < 0) {
-                throw new Error('Not the correct version. Could not find ' + latestVersion + ' in ' + filename)
-            }
-            return text
-        })
-        .then(text => text.replace(latestVersion, nextVersion))
-        .then(text => fs.writeFileSync(filename, text))
-        .then(() => gitAdd(filename))
-}
-
-async function pullLastVersion() {
-    await $`git checkout master`
-    await $`git pull origin master`
-}
-
-async function gitAdd(filename) {
-    return await $`git add ${filename}`
-}
-
-async function commitAndPush() {
-    await $`git commit -m "version bump"`
-    await $`git push origin master`
-}
-
-async function release() {
-    const newTag = 'v' + nextVersion
-    return await $`gh release create ${newTag} --generate-notes`.catch(error => {
-        console.error('something went wrong while creating the release. Please revert the version change!')
-        throw error
-    })
-}

package/src/entry.js

@@ -1,26 +0,0 @@
-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

@@ -1,5 +0,0 @@
-/* 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

@@ -1,21 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-<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

@@ -1,66 +0,0 @@
-<script>
-  export default {
-    mounted() {
-      this.createAndRenderChart()
-    },
-    beforeUnmount() {
-      this.destroyChart()
-    },
-    props: {
-      chartJsUrl: {type: String, default: 'https://cdn-{region}.seatsio.net/chart.js'},
-      id: {type: String, default: 'chart'},
-      region: {type: String, required: true}
-    },
-    methods: {
-      createAndRenderChart: async function () {
-        if(!this.$props.region) {
-          return
-        }
-
-        const seatsio = await this.getSeatsio()
-
-        const config = {
-          divId: this.$props.id,
-          ...this.propsAndAttrs()
-        }
-        this.chart = this.createChart(seatsio, config).render()
-        if(this.$attrs.onRenderStarted) {
-          this.$attrs.onRenderStarted(this.chart)
-        }
-      },
-      propsAndAttrs: function () {
-        let allPropsAndAttrs = {...this.$props, ...this.$attrs};
-        let { id, onRenderStarted, chartJsUrl, region, ...filteredPropsAndAttrs } = allPropsAndAttrs
-        return filteredPropsAndAttrs
-      },
-      getSeatsio: async function () {
-        if (typeof window.seatsio === 'undefined') {
-          return this.loadSeatsio()
-        } else if (window.seatsio.region !== this.getRegion()) {
-          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.getRegion()
-            resolve(window.seatsio)
-          }
-          script.onerror = () => reject(`Could not load ${script.src}`)
-          script.src = this.chartJsUrl.replace('{region}', this.getRegion())
-          document.head.appendChild(script)
-        })
-      },
-      destroyChart: function () {
-        this.chart.destroy()
-      },
-      getRegion: function () {
-        return this.$props.region
-      }
-    }
-  }
-</script>

package/src/lib-components/seatsioEventManager.vue

@@ -1,21 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-<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>