@getspot/spot-widget-vue 0.2.0 → 1.0.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @getspot/spot-widget-vue@0.2.0 build /builds/getspot/spot-widget/packages/vue
+> @getspot/spot-widget-vue@1.0.0 build /builds/getspot/spot-widget/packages/vue
 > vite build
 
 The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
@@ -9,6 +9,6 @@ transforming...
 No name was provided for external module "@getspot/spot-widget" in "output.globals" – guessing "SpotWidget".
 rendering chunks...
 computing gzip size...
-dist/index.umd.js  0.80 kB │ gzip: 0.49 kB
-dist/index.es.js  0.80 kB │ gzip: 0.48 kB
-✓ built in 213ms
+dist/index.umd.js  3.65 kB │ gzip: 1.18 kB
+dist/index.es.js  4.98 kB │ gzip: 1.29 kB
+✓ built in 217ms

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @getspot/spot-widget-vue
 
+## 1.0.0
+
+### Major Changes
+
+- 4f9e10e: First major release of all the widget variants.
+
+  This is really a major release for the sake of having our first major bump. The package is now ready for external use.
+
+  Includes updated functionality for updating quotes.
+
+### Patch Changes
+
+- Updated dependencies [4f9e10e]
+  - @getspot/spot-widget@1.0.0
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.es.js

@@ -1,37 +1,192 @@
 import s from "@getspot/spot-widget";
-import { createElementBlock as c, openBlock as i } from "vue";
-const p = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, n] of e)
-    o[r] = n;
-  return o;
-}, a = {
+import { createElementBlock as r, openBlock as d } from "vue";
+const a = (t, e) => {
+  const i = t.__vccOpts || t;
+  for (const [n, o] of e)
+    i[n] = o;
+  return i;
+}, u = {
   name: "VueSpotWidget",
   props: {
+    apiConfig: {
+      type: Object,
+      default: void 0
+    },
+    quoteRequestData: {
+      type: Object,
+      default: void 0
+    },
+    showTable: {
+      type: Boolean,
+      default: !0
+    },
+    optInSelected: {
+      type: Boolean,
+      default: !1
+    },
+    theme: {
+      type: Object,
+      default: void 0
+    },
+    callbacks: {
+      type: Object,
+      default: () => ({})
+    },
+    onQuoteRetrieved: {
+      type: Function,
+      default: void 0
+    },
+    onOptIn: {
+      type: Function,
+      default: void 0
+    },
+    onOptOut: {
+      type: Function,
+      default: void 0
+    },
+    onError: {
+      type: Function,
+      default: void 0
+    },
+    onNoMatchingQuote: {
+      type: Function,
+      default: void 0
+    },
+    onSelectionChange: {
+      type: Function,
+      default: void 0
+    },
     options: {
       type: Object,
       default: () => ({})
     }
   },
+  data() {
+    return {
+      widget: null,
+      reinitTimeout: null
+    };
+  },
+  computed: {
+    mergedCallbacks() {
+      return {
+        ...this.callbacks,
+        ...this.onQuoteRetrieved && { onQuoteRetrieved: this.onQuoteRetrieved },
+        ...this.onOptIn && {
+          onOptIn: (t) => {
+            var e, i;
+            (e = this.onOptIn) == null || e.call(this, t), (i = this.onSelectionChange) == null || i.call(this, t);
+          }
+        },
+        ...this.onOptOut && {
+          onOptOut: (t) => {
+            var e, i;
+            (e = this.onOptOut) == null || e.call(this, t), (i = this.onSelectionChange) == null || i.call(this, t);
+          }
+        },
+        ...this.onError && { onError: this.onError },
+        ...this.onNoMatchingQuote && { onNoMatchingQuote: this.onNoMatchingQuote }
+      };
+    },
+    widgetOptions() {
+      return {
+        apiConfig: this.apiConfig,
+        quoteRequestData: this.quoteRequestData,
+        showTable: this.showTable,
+        optInSelected: this.optInSelected,
+        theme: this.theme,
+        callbacks: this.mergedCallbacks,
+        ...this.options
+      };
+    }
+  },
   mounted() {
-    try {
-      this.widget = new s({
-        ...this.options,
-        location: this.$refs.container
+    this.initializeWidget();
+  },
+  watch: {
+    quoteRequestData: {
+      handler(t, e) {
+        this.widget && t && JSON.stringify(t) !== JSON.stringify(e) && (this.reinitTimeout && clearTimeout(this.reinitTimeout), this.reinitTimeout = setTimeout(() => {
+          this.reinitializeWidget(), this.reinitTimeout = null;
+        }, 100));
+      },
+      deep: !0
+    },
+    apiConfig: {
+      handler() {
+        this.reinitializeWidget();
+      },
+      deep: !0
+    },
+    showTable(t, e) {
+      t !== e && this.reinitializeWidget();
+    },
+    optInSelected(t, e) {
+      t !== e && this.reinitializeWidget();
+    },
+    theme: {
+      handler(t, e) {
+        this.widget && JSON.stringify(t) !== JSON.stringify(e) && this.updateTheme(t);
+      },
+      deep: !0
+    },
+    mergedCallbacks: {
+      handler(t, e) {
+        this.widget && JSON.stringify(t) !== JSON.stringify(e) && this.updateCallbacks(t);
+      },
+      deep: !0
+    }
+  },
+  methods: {
+    initializeWidget() {
+      this.widget && (this.widget.destroy(), this.widget = null), this.$refs.container && (this.$refs.container.innerHTML = ""), this.$nextTick(() => {
+        var t;
+        try {
+          this.widget = new s({
+            ...this.widgetOptions,
+            location: this.$refs.container
+          });
+        } catch (e) {
+          this.$emit("error", e), (t = this.onError) == null || t.call(this, e);
+        }
+      });
+    },
+    reinitializeWidget() {
+      this.widget && (this.widget.destroy(), this.widget = null), this.initializeWidget();
+    },
+    async updateQuote(t) {
+      var e;
+      return (e = this.widget) == null ? void 0 : e.updateQuote(t);
+    },
+    getSelection() {
+      var t;
+      return (t = this.widget) == null ? void 0 : t.getSelection();
+    },
+    validateSelection() {
+      var t;
+      return (t = this.widget) == null ? void 0 : t.validateSelection();
+    },
+    updateTheme(t) {
+      !this.widget || !this.widget.container || Object.entries(t || {}).forEach(([e, i]) => {
+        const n = `--${e}`;
+        this.widget.container.style.setProperty(n, i);
       });
-    } catch (t) {
-      this.$emit("error", t);
+    },
+    updateCallbacks(t) {
+      this.widget && (this.widget.options.callbacks = t);
+    },
+    destroy() {
+      this.widget && typeof this.widget.destroy == "function" && (this.widget.destroy(), this.widget = null);
     }
   },
   beforeUnmount() {
-    var t, e;
-    (e = (t = this.widget) == null ? void 0 : t.destroy) == null || e.call(t);
+    this.reinitTimeout && clearTimeout(this.reinitTimeout), this.widget && typeof this.widget.destroy == "function" && this.widget.destroy();
   }
-}, d = { ref: "container" };
-function f(t, e, o, r, n, _) {
-  return i(), c("div", d, null, 512);
+}, h = { ref: "container" };
+function l(t, e, i, n, o, c) {
+  return d(), r("div", h, null, 512);
 }
-const l = /* @__PURE__ */ p(a, [["render", f]]);
+const g = /* @__PURE__ */ a(u, [["render", l]]);
 export {
-  l as default
+  g as default
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(t,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("@getspot/spot-widget"),require("vue")):typeof define=="function"&&define.amd?define(["@getspot/spot-widget","vue"],o):(t=typeof globalThis<"u"?globalThis:t||self,t.VueSpotWidget=o(t.SpotWidget,t.Vue))})(this,function(t,o){"use strict";const d=(e,n)=>{const i=e.__vccOpts||e;for(const[s,r]of n)i[s]=r;return i},p={name:"VueSpotWidget",props:{options:{type:Object,default:()=>({})}},mounted(){try{this.widget=new t({...this.options,location:this.$refs.container})}catch(e){this.$emit("error",e)}},beforeUnmount(){var e,n;(n=(e=this.widget)==null?void 0:e.destroy)==null||n.call(e)}},c={ref:"container"};function u(e,n,i,s,r,_){return o.openBlock(),o.createElementBlock("div",c,null,512)}return d(p,[["render",u]])});
+(function(n,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("@getspot/spot-widget"),require("vue")):typeof define=="function"&&define.amd?define(["@getspot/spot-widget","vue"],o):(n=typeof globalThis<"u"?globalThis:n||self,n.VueSpotWidget=o(n.SpotWidget,n.Vue))})(this,function(n,o){"use strict";const r=(t,e)=>{const i=t.__vccOpts||t;for(const[s,d]of e)i[s]=d;return i},u={name:"VueSpotWidget",props:{apiConfig:{type:Object,default:void 0},quoteRequestData:{type:Object,default:void 0},showTable:{type:Boolean,default:!0},optInSelected:{type:Boolean,default:!1},theme:{type:Object,default:void 0},callbacks:{type:Object,default:()=>({})},onQuoteRetrieved:{type:Function,default:void 0},onOptIn:{type:Function,default:void 0},onOptOut:{type:Function,default:void 0},onError:{type:Function,default:void 0},onNoMatchingQuote:{type:Function,default:void 0},onSelectionChange:{type:Function,default:void 0},options:{type:Object,default:()=>({})}},data(){return{widget:null,reinitTimeout:null}},computed:{mergedCallbacks(){return{...this.callbacks,...this.onQuoteRetrieved&&{onQuoteRetrieved:this.onQuoteRetrieved},...this.onOptIn&&{onOptIn:t=>{var e,i;(e=this.onOptIn)==null||e.call(this,t),(i=this.onSelectionChange)==null||i.call(this,t)}},...this.onOptOut&&{onOptOut:t=>{var e,i;(e=this.onOptOut)==null||e.call(this,t),(i=this.onSelectionChange)==null||i.call(this,t)}},...this.onError&&{onError:this.onError},...this.onNoMatchingQuote&&{onNoMatchingQuote:this.onNoMatchingQuote}}},widgetOptions(){return{apiConfig:this.apiConfig,quoteRequestData:this.quoteRequestData,showTable:this.showTable,optInSelected:this.optInSelected,theme:this.theme,callbacks:this.mergedCallbacks,...this.options}}},mounted(){this.initializeWidget()},watch:{quoteRequestData:{handler(t,e){this.widget&&t&&JSON.stringify(t)!==JSON.stringify(e)&&(this.reinitTimeout&&clearTimeout(this.reinitTimeout),this.reinitTimeout=setTimeout(()=>{this.reinitializeWidget(),this.reinitTimeout=null},100))},deep:!0},apiConfig:{handler(){this.reinitializeWidget()},deep:!0},showTable(t,e){t!==e&&this.reinitializeWidget()},optInSelected(t,e){t!==e&&this.reinitializeWidget()},theme:{handler(t,e){this.widget&&JSON.stringify(t)!==JSON.stringify(e)&&this.updateTheme(t)},deep:!0},mergedCallbacks:{handler(t,e){this.widget&&JSON.stringify(t)!==JSON.stringify(e)&&this.updateCallbacks(t)},deep:!0}},methods:{initializeWidget(){this.widget&&(this.widget.destroy(),this.widget=null),this.$refs.container&&(this.$refs.container.innerHTML=""),this.$nextTick(()=>{var t;try{this.widget=new n({...this.widgetOptions,location:this.$refs.container})}catch(e){this.$emit("error",e),(t=this.onError)==null||t.call(this,e)}})},reinitializeWidget(){this.widget&&(this.widget.destroy(),this.widget=null),this.initializeWidget()},async updateQuote(t){var e;return(e=this.widget)==null?void 0:e.updateQuote(t)},getSelection(){var t;return(t=this.widget)==null?void 0:t.getSelection()},validateSelection(){var t;return(t=this.widget)==null?void 0:t.validateSelection()},updateTheme(t){!this.widget||!this.widget.container||Object.entries(t||{}).forEach(([e,i])=>{const s=`--${e}`;this.widget.container.style.setProperty(s,i)})},updateCallbacks(t){this.widget&&(this.widget.options.callbacks=t)},destroy(){this.widget&&typeof this.widget.destroy=="function"&&(this.widget.destroy(),this.widget=null)}},beforeUnmount(){this.reinitTimeout&&clearTimeout(this.reinitTimeout),this.widget&&typeof this.widget.destroy=="function"&&this.widget.destroy()}},h={ref:"container"};function a(t,e,i,s,d,c){return o.openBlock(),o.createElementBlock("div",h,null,512)}return r(u,[["render",a]])});

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@getspot/spot-widget-vue",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "publishConfig": {
     "access": "public"
   },
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
   "dependencies": {
-    "@getspot/spot-widget": "0.2.0"
+    "@getspot/spot-widget": "1.0.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

package/src/VueSpotWidget.vue

@@ -8,23 +8,220 @@ import SpotWidget from "@getspot/spot-widget";
 export default {
   name: "VueSpotWidget",
   props: {
+    apiConfig: {
+      type: Object,
+      default: undefined,
+    },
+    quoteRequestData: {
+      type: Object,
+      default: undefined,
+    },
+    showTable: {
+      type: Boolean,
+      default: true,
+    },
+    optInSelected: {
+      type: Boolean,
+      default: false,
+    },
+    theme: {
+      type: Object,
+      default: undefined,
+    },
+    callbacks: {
+      type: Object,
+      default: () => ({}),
+    },
+    onQuoteRetrieved: {
+      type: Function,
+      default: undefined,
+    },
+    onOptIn: {
+      type: Function,
+      default: undefined,
+    },
+    onOptOut: {
+      type: Function,
+      default: undefined,
+    },
+    onError: {
+      type: Function,
+      default: undefined,
+    },
+    onNoMatchingQuote: {
+      type: Function,
+      default: undefined,
+    },
+    onSelectionChange: {
+      type: Function,
+      default: undefined,
+    },
     options: {
       type: Object,
       default: () => ({}),
     },
   },
-  mounted() {
-    try {
-      this.widget = new SpotWidget({
+  data() {
+    return {
+      widget: null,
+      reinitTimeout: null,
+    };
+  },
+  computed: {
+    mergedCallbacks() {
+      return {
+        ...this.callbacks,
+        ...(this.onQuoteRetrieved && { onQuoteRetrieved: this.onQuoteRetrieved }),
+        ...(this.onOptIn && { 
+          onOptIn: (data) => {
+            this.onOptIn?.(data);
+            this.onSelectionChange?.(data);
+          }
+        }),
+        ...(this.onOptOut && { 
+          onOptOut: (data) => {
+            this.onOptOut?.(data);
+            this.onSelectionChange?.(data);
+          }
+        }),
+        ...(this.onError && { onError: this.onError }),
+        ...(this.onNoMatchingQuote && { onNoMatchingQuote: this.onNoMatchingQuote }),
+      };
+    },
+    widgetOptions() {
+      return {
+        apiConfig: this.apiConfig,
+        quoteRequestData: this.quoteRequestData,
+        showTable: this.showTable,
+        optInSelected: this.optInSelected,
+        theme: this.theme,
+        callbacks: this.mergedCallbacks,
         ...this.options,
-        location: this.$refs.container,
+      };
+    },
+  },
+  mounted() {
+    this.initializeWidget();
+  },
+  watch: {
+    quoteRequestData: {
+      handler(newQuoteRequestData, oldQuoteRequestData) {
+        if (this.widget && newQuoteRequestData && JSON.stringify(newQuoteRequestData) !== JSON.stringify(oldQuoteRequestData)) {
+          // Debounce reinitialize to prevent multiple rapid updates
+          if (this.reinitTimeout) {
+            clearTimeout(this.reinitTimeout);
+          }
+          
+          this.reinitTimeout = setTimeout(() => {
+            this.reinitializeWidget();
+            this.reinitTimeout = null;
+          }, 100);
+        }
+      },
+      deep: true,
+    },
+    apiConfig: {
+      handler() {
+        this.reinitializeWidget();
+      },
+      deep: true,
+    },
+    showTable(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.reinitializeWidget();
+      }
+    },
+    optInSelected(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.reinitializeWidget();
+      }
+    },
+    theme: {
+      handler(newTheme, oldTheme) {
+        if (this.widget && JSON.stringify(newTheme) !== JSON.stringify(oldTheme)) {
+          this.updateTheme(newTheme);
+        }
+      },
+      deep: true,
+    },
+    mergedCallbacks: {
+      handler(newCallbacks, oldCallbacks) {
+        if (this.widget && JSON.stringify(newCallbacks) !== JSON.stringify(oldCallbacks)) {
+          this.updateCallbacks(newCallbacks);
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    initializeWidget() {
+      // Destroy any existing widget first
+      if (this.widget) {
+        this.widget.destroy();
+        this.widget = null;
+      }
+      
+      // Clear the container completely
+      if (this.$refs.container) {
+        this.$refs.container.innerHTML = '';
+      }
+      
+      // Add a small delay to ensure DOM is ready
+      this.$nextTick(() => {
+        try {
+          this.widget = new SpotWidget({
+            ...this.widgetOptions,
+            location: this.$refs.container,
+          });
+        } catch (err) {
+          this.$emit("error", err);
+          this.onError?.(err);
+        }
       });
-    } catch (err) {
-      this.$emit("error", err);
-    }
+    },
+    reinitializeWidget() {
+      if (this.widget) {
+        this.widget.destroy();
+        this.widget = null;
+      }
+      this.initializeWidget();
+    },
+    async updateQuote(newQuoteRequestData) {
+      return this.widget?.updateQuote(newQuoteRequestData);
+    },
+    getSelection() {
+      return this.widget?.getSelection();
+    },
+    validateSelection() {
+      return this.widget?.validateSelection();
+    },
+    updateTheme(newTheme) {
+      if (!this.widget || !this.widget.container) return;
+      
+      Object.entries(newTheme || {}).forEach(([k, v]) => {
+        const cssVariable = `--${k}`;
+        this.widget.container.style.setProperty(cssVariable, v);
+      });
+    },
+    updateCallbacks(newCallbacks) {
+      if (!this.widget) return;
+      
+      this.widget.options.callbacks = newCallbacks;
+    },
+    destroy() {
+      if (this.widget && typeof this.widget.destroy === "function") {
+        this.widget.destroy();
+        this.widget = null;
+      }
+    },
   },
   beforeUnmount() {
-    this.widget?.destroy?.();
+    if (this.reinitTimeout) {
+      clearTimeout(this.reinitTimeout);
+    }
+    if (this.widget && typeof this.widget.destroy === "function") {
+      this.widget.destroy();
+    }
   },
 };
 </script>