@seatsio/seatsio-vue 1.1.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
 
 ```
@@ -9,7 +17,7 @@ Npm
 npm install --save @seatsio/seatsio-vue
 
 Yarn
-yarn add -dev @seatsio/seatsio-vue
+yarn add @seatsio/seatsio-vue
 ```
 
 # Usage
@@ -18,7 +26,7 @@ yarn add -dev @seatsio/seatsio-vue
 
 ### Minimal example to render a seating chart:
 
-```jsx
+```vue
 import { SeatsioSeatingChart } from '@seatsio/seatsio-vue';
 
 <div style="height: 500px">
@@ -32,13 +40,32 @@ import { SeatsioSeatingChart } from '@seatsio/seatsio-vue';
 
 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.
 
+### Pricing
+
+```vue
+import { SeatsioSeatingChart } from '@seatsio/seatsio-vue';
+
+<div style="height: 500px">
+    <SeatsioSeatingChart
+        workspaceKey="<yourPublicWorkspaceKey>"
+        event="<yourEventKey>"
+        region="eu"
+        :pricing="[
+            {'category': 1, 'price': 30},
+            {'category': 2, 'price': 40},
+            {'category': 3, 'price': 50}
+        ]"
+    />
+</div>
+```
+
 ## 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
+```vue
 // Single File Component (SFC) using SeatsioSeatingChart
 export default {
     ...
@@ -48,19 +75,19 @@ export default {
         }
     },
     methods: {
-        onRenderStarted: function (chart) {
+        onRenderStarted: (chart) => {
             this.chart = chart
             console.log(chart.selectedObjects)
         } 
     }
 }
 
+// Notice how the event handler is defined with @&lt;eventListener&gt;
+// For more information, see https://vuejs.org/guide/essentials/event-handling.html
 <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"
+    @renderStarted="onRenderStarted"
     region="eu"
 />
 ```
@@ -69,7 +96,7 @@ export default {
 
 `onChartRendered` is fired when the chart is rendered successfully:
 
-```jsx
+```vue
 export default {
     ...
     data() {
@@ -88,7 +115,7 @@ export default {
 <SeatsioSeatingChart
     workspaceKey="<yourPublicWorkspaceKey>"
     event="<yourEventKey>"
-    @onChartRendered="onChartRendered"
+    @chartRendered="onChartRendered"
     region="eu"
 />
 ```
@@ -96,14 +123,13 @@ export default {
 
 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
+```vue
 export default {
     ...
     data() {
         // Supports CSS color values
-        objectColor: () => 'grey',
+        objectColor: () => 'grey'
     },
 }
 
@@ -119,7 +145,7 @@ Whenever one of the properties passed on to `<SeatsioSeatingChart />` changes, t
 
 ## Event manager
 
-```jsx
+```vue
 import { SeatsioEventManager } from '@seatsio/seatsio-vue';
 
 <div style="height: 500px">
@@ -134,40 +160,25 @@ 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
-
-```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
+```vue
 import { SeatsioDesigner } from '@seatsio/seatsio-vue';
 
 <div style="height: 500px">
     <SeatsioDesigner
         secretKey="<yourWorkspaceSecretKey>"
         region="eu"
+        @chartCreated="onChartCreated"
     />
 </div>
 ```
 
 To be able to edit a chart from an embedded designer, you need to specify the chart to load:
  
-```jsx
+```vue
 <SeatsioDesigner
     secretKey="<yourWorkspaceSecretKey>"    
     chartKey="<yourChartKey>"
@@ -175,4 +186,4 @@ To be able to edit a chart from an embedded designer, you need to specify the ch
 />
 ```
 
-Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/embedded-designer/introduction
+Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/embedded-designer/introduction

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();
   },
@@ -12,61 +12,52 @@ var script$4 = {
       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
+      required: true
+    }
   },
   methods: {
     createAndRenderChart: async function () {
+      if (!this.$props.region) {
+        return;
+      }
       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.propsAndAttrs()
       };
+      // @ts-ignore
       this.chart = this.createChart(seatsio, config).render();
-      this.chart && this.$emit('onRenderStarted', this.chart);
+      if (this.$attrs.onRenderStarted) {
+        // @ts-ignore
+        this.$attrs.onRenderStarted(this.chart);
+      }
     },
-    finaliseProps: function (props) {
-      return props;
+    propsAndAttrs: function () {
+      let allPropsAndAttrs = {
+        ...this.$props,
+        ...this.$attrs
+      };
+      // @ts-ignore
+      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.region) {
+      } else if (seatsio.region !== this.getRegion()) {
+        // @ts-ignore
         window.seatsio = undefined;
         return this.loadSeatsio();
       } else {
@@ -77,74 +68,48 @@ var script$4 = {
       return new Promise((resolve, reject) => {
         let script = document.createElement('script');
         script.onload = () => {
-          window.seatsio.region = this.region;
+          seatsio.region = this.getRegion();
           resolve(window.seatsio);
         };
         script.onerror = () => reject(`Could not load ${script.src}`);
-        script.src = this.chartJsUrl.replace('{region}', this.region);
+        script.src = this.chartJsUrl.replace('{region}', this.getRegion());
         document.head.appendChild(script);
       });
     },
     destroyChart: function () {
+      // @ts-ignore
       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);
+    getRegion: function () {
+      return this.$props.region;
     }
   }
-};
+});
 
-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) {
@@ -152,12 +117,10 @@ var script$1 = {
         chartJsUrl,
         id,
         region,
-        showFullscreenButton,
-        chartKey,
+        showFullScreenButton,
         ...finalProps
       } = props;
       return {
-        chart: chartKey,
         ...finalProps
       };
     },
@@ -165,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": "1.1.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.3",
-    "@babel/preset-env": "^7.14.7",
-    "@rollup/plugin-alias": "^4.0.3",
+    "@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.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^2.4.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.5",
-    "rimraf": "^3.0.2",
+    "minimist": "^1.2.8",
+    "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,87 +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,
-      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/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,77 +0,0 @@
-<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

@@ -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>