@seatsio/seatsio-vue 4.13.0 → 4.14.0

package/README.md

@@ -31,7 +31,7 @@ import { SeatsioSeatingChart } from '@seatsio/seatsio-vue';
 
 <div style="height: 500px">
     <SeatsioSeatingChart
-        workspaceKey="<yourPublicWorkspaceKey>"
+        workspace-key="<yourPublicWorkspaceKey>"
         event="<yourEventKey>"
         region="eu"
     />
@@ -40,6 +40,28 @@ 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.
 
+### Prop naming convention
+
+Following Vue.js conventions, all component props can be passed using either kebab-case or camelCase. Both formats are fully supported:
+
+```vue
+<!-- Using kebab-case (Vue convention) -->
+<SeatsioSeatingChart
+    workspace-key="<yourPublicWorkspaceKey>"
+    event="<yourEventKey>"
+    region="eu"
+/>
+
+<!-- Using camelCase -->
+<SeatsioSeatingChart
+    workspaceKey="<yourPublicWorkspaceKey>"
+    event="<yourEventKey>"
+    region="eu"
+/>
+```
+
+Both examples work identically. For consistency with other Vue components, kebab-case is recommended when using props in templates.
+
 ### Pricing
 
 ```vue
@@ -57,7 +79,7 @@ const pricing: Pricing = {
 
 <div style="height: 500px">
     <SeatsioSeatingChart
-        workspaceKey="<yourPublicWorkspaceKey>"
+        workspace-key="<yourPublicWorkspaceKey>"
         event="<yourEventKey>"
         region="eu"
         :pricing="pricing"
@@ -91,9 +113,9 @@ export default {
 // 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>"
+    workspace-key="<yourPublicWorkspaceKey>"
     event="<yourEventKey>"
-    @renderStarted="onRenderStarted"
+    @render-started="onRenderStarted"
     region="eu"
 />
 ```
@@ -119,9 +141,9 @@ export default {
 }
 
 <SeatsioSeatingChart
-    workspaceKey="<yourPublicWorkspaceKey>"
+    workspace-key="<yourPublicWorkspaceKey>"
     event="<yourEventKey>"
-    @chartRendered="onChartRendered"
+    @chart-rendered="onChartRendered"
     region="eu"
 />
 ```
@@ -140,10 +162,10 @@ export default {
 }
 
 <SeatsioSeatingChart
-    workspaceKey="<yourPublicWorkspaceKey>"
+    workspace-key="<yourPublicWorkspaceKey>"
     event="<yourEventKey>"
     region="eu"
-    :objectColor="objectColor"
+    :object-color="objectColor"
 />
 ```
 
@@ -156,7 +178,7 @@ import { SeatsioEventManager } from '@seatsio/seatsio-vue';
 
 <div style="height: 500px">
     <SeatsioEventManager
-        secretKey="<yourWorkspaceSecretKey>"
+        secret-key="<yourWorkspaceSecretKey>"
         event="<yourEventKey>"
         mode="<manageObjectStatuses or another mode>"
         region="eu"
@@ -175,9 +197,9 @@ import { SeatsioDesigner } from '@seatsio/seatsio-vue';
 
 <div style="height: 500px">
     <SeatsioDesigner
-        secretKey="<yourWorkspaceSecretKey>"
+        secret-key="<yourWorkspaceSecretKey>"
         region="eu"
-        @chartCreated="onChartCreated"
+        @chart-created="onChartCreated"
     />
 </div>
 ```
@@ -186,8 +208,8 @@ To be able to edit a chart from an embedded designer, you need to specify the ch
  
 ```vue
 <SeatsioDesigner
-    secretKey="<yourWorkspaceSecretKey>"    
-    chartKey="<yourChartKey>"
+    secret-key="<yourWorkspaceSecretKey>"    
+    chart-key="<yourChartKey>"
     region="eu"
 />
 ```

package/dist/seatsio-vue.js

@@ -1,5 +1,43 @@
 import { defineComponent, openBlock, createElementBlock } from 'vue';
 
+/**
+* @vue/shared v3.5.22
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+const cacheStringFunction = (fn) => {
+  const cache = /* @__PURE__ */ Object.create(null);
+  return ((str) => {
+    const hit = cache[str];
+    return hit || (cache[str] = fn(str));
+  });
+};
+const camelizeRE = /-\w/g;
+const camelize = cacheStringFunction(
+  (str) => {
+    return str.replace(camelizeRE, (c) => c.slice(1).toUpperCase());
+  }
+);
+
+/**
+ * Normalizes component attributes by converting kebab-case keys to camelCase
+ * This enables Vue components to accept props in both kebab-case (Vue convention)
+ * and camelCase formats
+ * @param attrs - The attributes object to normalize
+ * @returns A new object with all keys converted to camelCase
+ * @example
+ * normalizeAttrs({'workspace-key': 'foo', eventLocation: 'bar'})
+ * // returns {workspaceKey: 'foo', eventLocation: 'bar'}
+ */
+function normalizeAttrs(attrs) {
+  const normalized = {};
+  for (const key in attrs) {
+    const camelKey = camelize(key);
+    normalized[camelKey] = attrs[key];
+  }
+  return normalized;
+}
+
 var script$3 = defineComponent({
   mounted() {
     this.createAndRenderChart();
@@ -43,9 +81,10 @@ var script$3 = defineComponent({
       }
     },
     propsAndAttrs: function () {
+      const normalizedAttrs = normalizeAttrs(this.$attrs);
       let allPropsAndAttrs = {
         ...this.$props,
-        ...this.$attrs
+        ...normalizedAttrs
       };
       // @ts-ignore
       let {

package/dist/utils/propNormalizer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Normalizes component attributes by converting kebab-case keys to camelCase
+ * This enables Vue components to accept props in both kebab-case (Vue convention)
+ * and camelCase formats
+ * @param attrs - The attributes object to normalize
+ * @returns A new object with all keys converted to camelCase
+ * @example
+ * normalizeAttrs({'workspace-key': 'foo', eventLocation: 'bar'})
+ * // returns {workspaceKey: 'foo', eventLocation: 'bar'}
+ */
+export declare function normalizeAttrs(attrs: Record<string, any>): Record<string, any>;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@seatsio/seatsio-vue",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "scripts": {
     "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"
+    "prebuild": "rimraf ./dist",
+    "test": "vitest"
   },
   "main": "dist/seatsio-vue.js",
   "types": "dist/index.d.ts",
@@ -12,7 +13,8 @@
     "dist"
   ],
   "dependencies": {
-    "@seatsio/seatsio-types": "6.4.0"
+    "@seatsio/seatsio-types": "6.4.0",
+    "@vue/shared": "^3.5.22"
   },
   "devDependencies": {
     "@babel/core": "^7.28.4",
@@ -22,11 +24,14 @@
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
+    "@vitejs/plugin-vue": "^6.0.1",
     "@vue/cli-plugin-babel": "^5.0.9",
     "@vue/cli-plugin-typescript": "~5.0.9",
     "@vue/cli-service": "^5.0.9",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
     "cross-env": "^10.1.0",
+    "happy-dom": "^20.0.2",
     "minimist": "^1.2.8",
     "rimraf": "^6.0.1",
     "rollup": "^2.79.2",
@@ -35,6 +40,7 @@
     "rollup-plugin-vue": "^6.0.0",
     "semver": "7.7.2",
     "typescript": "~5.9.3",
+    "vitest": "^3.2.4",
     "vue": "3.5.22",
     "zx": "8.8.4"
   },
@@ -42,5 +48,6 @@
     "vue": "^3.2.47"
   },
   "license": "MIT",
-  "sideEffects": false
+  "sideEffects": false,
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }