@seatsio/seatsio-vue 1.0.0 → 2.0.0

package/.github/dependabot.yml

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

@@ -12,10 +12,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - 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
+      - run: yarn build

package/.github/workflows/release.yml

@@ -0,0 +1,44 @@
+# 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/README.md

@@ -9,7 +9,7 @@ Npm
 npm install --save @seatsio/seatsio-vue
 
 Yarn
-yarn add -dev @seatsio/seatsio-vue
+yarn add @seatsio/seatsio-vue
 ```
 
 # Usage
@@ -18,7 +18,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 +32,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 +67,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 +88,7 @@ export default {
 
 `onChartRendered` is fired when the chart is rendered successfully:
 
-```jsx
+```vue
 export default {
     ...
     data() {
@@ -88,7 +107,7 @@ export default {
 <SeatsioSeatingChart
     workspaceKey="<yourPublicWorkspaceKey>"
     event="<yourEventKey>"
-    @onChartRendered="onChartRendered"
+    @chartRendered="onChartRendered"
     region="eu"
 />
 ```
@@ -96,14 +115,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 +137,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">
@@ -136,7 +154,7 @@ Other parameters are supported as well. For a full list, check https://docs.seat
 
 ## Chart manager
 
-```jsx
+```vue
 import { SeatsioChartManager } from '@seatsio/seatsio-vue';
 
 <div style="height: 500px">
@@ -154,7 +172,7 @@ Other parameters are supported as well. For a full list, check https://docs.seat
 
 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">
@@ -167,7 +185,7 @@ import { SeatsioDesigner } from '@seatsio/seatsio-vue';
 
 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 +193,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/dev/serve.vue

@@ -12,19 +12,23 @@ export default {
       SeatsioSeatingChart,
       SeatsioChartManager,
       SeatsioDesigner,
-      SeatsioEventManager,
-      SeatsioSeatingChart,
+      SeatsioEventManager
     },
     data: () => ({
-      messages: { clickToSelect: 'Click to pick'},
-      objectColor: () => 'grey',
-      tooltipInfo: () => 'My custom info',
+      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>
 
@@ -36,47 +40,59 @@ export default {
         workspaceKey="publicDemoKey"
         event="smallTheatreEvent"
         region="eu"
+        language="en"
+        :chartJsUrl="chartJsUrl"
         :messages="messages"
         :objectColor="objectColor"
         :tooltipInfo="tooltipInfo"
-        @onRenderStarted="onRenderStarted"
-        @onObjectClicked="onObjectClicked"
+        :priceFormatter="priceFormatter"
+        @renderStarted="onRenderStarted"
+        @objectClicked="onObjectClicked"
+        :pricing="[
+          { category: 1, price: 30 },
+          { category: 2, price: 40 },
+          { category: 3, price: 50 }
+        ]"
     />
     <SeatsioDesigner
       v-if="selectedComponent === 'chartDesigner'"
-      event="437fd038-ba0c-42aa-9ba9-e06bd5b790a3"
+      region="eu"
       id="myChartDesigner"
       workspaceKey="publicDemoKey"
       mode="readOnly"
+      :chartJsUrl="chartJsUrl"
+      :show-fullscreen-button="true"
       :messages="messages"
       :tooltipInfo="tooltipInfo"
-      @onRenderStarted="onRenderStarted"
-      @onObjectClicked="onObjectClicked"
+      @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"
-        @onRenderStarted="onRenderStarted"
-        @onObjectClicked="onObjectClicked"
-        workspaceKey="<yourWorkspaceKey>"
-        chartKey="<yourChartKey>"
-        secretKey="<yourWorkspaceSecretKey>"
+        @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"
-        @onRenderStarted="onRenderStarted"
-        @onObjectClicked="onObjectClicked"
-        event="<yourEventKey"
-        secretKey="<yourWorkspaceSecretKey>"
-        workspaceKey="<yourWorkspaceKey>"
+        @renderStarted="onRenderStarted"
+        @objectClicked="onObjectClicked"
+        event="smallTheatreEvent"
+        secretKey="demoKey"
     />
 </template>
 
@@ -84,4 +100,4 @@ export default {
 #myChart, #myChartDesigner, #myChartManager, #myEventManager {
   height: 100vh
 }
-</style>
+</style>

package/dist/seatsio-vue.js

@@ -12,61 +12,48 @@ 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()
       };
       this.chart = this.createChart(seatsio, config).render();
-      this.chart && this.$emit('onRenderStarted', this.chart);
+      if (this.$attrs.onRenderStarted) {
+        this.$attrs.onRenderStarted(this.chart);
+      }
     },
-    finaliseProps: function (props) {
-      return props;
+    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.region) {
+      } else if (window.seatsio.region !== this.getRegion()) {
         window.seatsio = undefined;
         return this.loadSeatsio();
       } else {
@@ -77,16 +64,19 @@ var script$4 = {
       return new Promise((resolve, reject) => {
         let script = document.createElement('script');
         script.onload = () => {
-          window.seatsio.region = this.region;
+          window.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 () {
       this.chart.destroy();
+    },
+    getRegion: function () {
+      return this.$props.region;
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seatsio/seatsio-vue",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "license": "MIT",
   "main": "dist/seatsio-vue.js",
   "sideEffects": false,
@@ -10,18 +10,18 @@
     "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",
+    "@babel/core": "^7.21.5",
+    "@babel/preset-env": "^7.21.5",
+    "@rollup/plugin-alias": "^5.0.0",
+    "@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",
     "@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",
+    "minimist": "^1.2.8",
+    "rimraf": "^4.4.1",
     "rollup": "^2.52.8",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",

package/release.mjs

@@ -0,0 +1,92 @@
+#!/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/lib-components/seatsioEmbeddable.vue

@@ -8,49 +8,35 @@
     },
     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
+      region: {type: 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.propsAndAttrs()
         }
-  
-        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)
+        if(this.$attrs.onRenderStarted) {
+          this.$attrs.onRenderStarted(this.chart)
+        }
       },
-      finaliseProps: function (props) {
-        return props
+      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.region) {
+        } else if (window.seatsio.region !== this.getRegion()) {
           window.seatsio = undefined
           return this.loadSeatsio()
         } else {
@@ -61,17 +47,20 @@
         return new Promise((resolve, reject) => {
           let script = document.createElement('script')
           script.onload = () => {
-            window.seatsio.region = this.region
+            window.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 () {
         this.chart.destroy()
+      },
+      getRegion: function () {
+        return this.$props.region
       }
     }
   }
-</script>
+</script>

package/.github/workflows/publish.yml

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