@getspot/spot-widget-vue 3.2.2 → 4.0.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [4.0.0](https://gitlab.com/getspot/spot-widget/compare/@getspot/spot-widget-vue@3.2.2...@getspot/spot-widget-vue@4.0.0) (2026-01-12)
+
+
+* feat!(core): replacing optInSelected prop with selection enum ([0d40913](https://gitlab.com/getspot/spot-widget/commit/0d409135aa50eaa98995b9c1e20ca05cc7e2b2fc))
+
+
+### BREAKING CHANGES
+
+* better preselection of widget optIn/optOut
+
 ## [3.2.2](https://gitlab.com/getspot/spot-widget/compare/@getspot/spot-widget-vue@3.2.1...@getspot/spot-widget-vue@3.2.2) (2026-01-09)
 
 

package/README.md

@@ -30,7 +30,7 @@ npm install @getspot/spot-widget-vue
     }"
     :quote-request-data="quoteData"
     :show-table="true"
-    :opt-in-selected="false"
+    :selection="'unselected'"
     @quote-retrieved="onQuoteRetrieved"
     @opt-in="onOptIn"
     @opt-out="onOptOut"
@@ -129,7 +129,7 @@ const onOptOut = (data: SelectionData) => {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `showTable` | `boolean` | `true` | Whether to show the payout table |
-| `optInSelected` | `boolean` | `false` | Whether the widget should be pre-selected for opt-in |
+| `selection` | `SelectionEnum` | `'unselected'` | Initial selection state for the widget |
 | `theme` | `Theme` | `undefined` | Theme customization options for styling the widget |
 
 ## Events

package/dist/index.es.js

@@ -1,11 +1,11 @@
-import s from "@getspot/spot-widget";
-import { createElementBlock as r, openBlock as d } from "vue";
-const a = (t, e) => {
+import r, { SelectionEnum as s } from "@getspot/spot-widget";
+import { createElementBlock as d, openBlock as a } from "vue";
+const u = (t, e) => {
   const i = t.__vccOpts || t;
   for (const [n, o] of e)
     i[n] = o;
   return i;
-}, u = {
+}, h = {
   name: "VueSpotWidget",
   props: {
     apiConfig: {
@@ -20,9 +20,10 @@ const a = (t, e) => {
       type: Boolean,
       default: !0
     },
-    optInSelected: {
-      type: Boolean,
-      default: !1
+    selection: {
+      type: String,
+      default: s.UNSELECTED,
+      validator: (t) => Object.values(s).includes(t)
     },
     theme: {
       type: Object,
@@ -93,7 +94,7 @@ const a = (t, e) => {
         apiConfig: this.apiConfig,
         quoteRequestData: this.quoteRequestData,
         showTable: this.showTable,
-        optInSelected: this.optInSelected,
+        selection: this.selection,
         theme: this.theme,
         callbacks: this.mergedCallbacks,
         ...this.options
@@ -126,7 +127,7 @@ const a = (t, e) => {
     showTable(t, e) {
       t !== e && this.reinitializeWidget();
     },
-    optInSelected(t, e) {
+    selection(t, e) {
       t !== e && this.reinitializeWidget();
     },
     theme: {
@@ -147,7 +148,7 @@ const a = (t, e) => {
       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.widget = new r({
             ...this.widgetOptions,
             location: this.$refs.container
           });
@@ -187,11 +188,11 @@ const a = (t, e) => {
   beforeUnmount() {
     this.reinitTimeout && clearTimeout(this.reinitTimeout), this.widget && typeof this.widget.destroy == "function" && this.widget.destroy();
   }
-}, h = { ref: "container" };
-function l(t, e, i, n, o, c) {
-  return d(), r("div", h, null, 512);
+}, l = { ref: "container" };
+function c(t, e, i, n, o, f) {
+  return a(), d("div", l, null, 512);
 }
-const p = /* @__PURE__ */ a(u, [["render", l]]);
+const y = /* @__PURE__ */ u(h, [["render", c]]);
 export {
-  p as default
+  y as default
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(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,Array],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(async()=>{try{await this.widget.updateQuote(t)||this.reinitializeWidget()}catch{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()}},a={ref:"container"};function h(t,e,i,s,d,l){return o.openBlock(),o.createElementBlock("div",a,null,512)}return r(u,[["render",h]])});
+(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 d=(t,e)=>{const i=t.__vccOpts||t;for(const[s,r]of e)i[s]=r;return i},u={name:"VueSpotWidget",props:{apiConfig:{type:Object,default:void 0},quoteRequestData:{type:[Object,Array],default:void 0},showTable:{type:Boolean,default:!0},selection:{type:String,default:n.SelectionEnum.UNSELECTED,validator:t=>Object.values(n.SelectionEnum).includes(t)},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,selection:this.selection,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(async()=>{try{await this.widget.updateQuote(t)||this.reinitializeWidget()}catch{this.reinitializeWidget()}this.reinitTimeout=null},100))},deep:!0},apiConfig:{handler(){this.reinitializeWidget()},deep:!0},showTable(t,e){t!==e&&this.reinitializeWidget()},selection(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()}},a={ref:"container"};function h(t,e,i,s,r,l){return o.openBlock(),o.createElementBlock("div",a,null,512)}return d(u,[["render",h]])});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getspot/spot-widget-vue",
-  "version": "3.2.2",
+  "version": "4.0.0",
   "description": "Vue 3 wrapper for Spot Widget",
   "publishConfig": {
     "access": "public"
@@ -14,7 +14,7 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@getspot/spot-widget": "^3.3.2"
+    "@getspot/spot-widget": "^4.0.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"