@getspot/spot-widget-vue2 0.1.4 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +26 -0
- package/dist/index.es.js +187 -36
- package/dist/index.umd.js +1 -1
- package/package.json +2 -2
- package/src/Vue2SpotWidget.vue +206 -8
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @getspot/spot-widget-vue2@0.
|
|
2
|
+
> @getspot/spot-widget-vue2@1.0.0 build /builds/getspot/spot-widget/packages/vue2
|
|
3
3
|
> vite build
|
|
4
4
|
|
|
5
5
|
[36mvite v4.5.13 [32mbuilding for production...[36m[39m
|
|
@@ -8,6 +8,6 @@ transforming...
|
|
|
8
8
|
No name was provided for external module "@getspot/spot-widget" in "output.globals" – guessing "SpotWidget".
|
|
9
9
|
rendering chunks...
|
|
10
10
|
computing gzip size...
|
|
11
|
-
[2mdist/[22m[36mindex.umd.js [39m[1m[
|
|
12
|
-
[2mdist/[22m[36mindex.es.js [39m[1m[
|
|
13
|
-
[32m✓ built in
|
|
11
|
+
[2mdist/[22m[36mindex.umd.js [39m[1m[2m4.40 kB[22m[1m[22m[2m │ gzip: 1.46 kB[22m
|
|
12
|
+
[2mdist/[22m[36mindex.es.js [39m[1m[2m5.97 kB[22m[1m[22m[2m │ gzip: 1.65 kB[22m
|
|
13
|
+
[32m✓ built in 321ms[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @getspot/spot-widget-vue2
|
|
2
2
|
|
|
3
|
+
## 1.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- 4f9e10e: First major release of all the widget variants.
|
|
8
|
+
|
|
9
|
+
This is really a major release for the sake of having our first major bump. The package is now ready for external use.
|
|
10
|
+
|
|
11
|
+
Includes updated functionality for updating quotes.
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies [4f9e10e]
|
|
16
|
+
- @getspot/spot-widget@1.0.0
|
|
17
|
+
|
|
18
|
+
## 0.2.0
|
|
19
|
+
|
|
20
|
+
### Minor Changes
|
|
21
|
+
|
|
22
|
+
- 25bba43: Making cartId required on quoteRequest
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- Updated dependencies [25bba43]
|
|
27
|
+
- @getspot/spot-widget@0.2.0
|
|
28
|
+
|
|
3
29
|
## 0.1.4
|
|
4
30
|
|
|
5
31
|
### Patch Changes
|
package/dist/index.es.js
CHANGED
|
@@ -1,69 +1,220 @@
|
|
|
1
|
-
import
|
|
2
|
-
function
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
if (
|
|
7
|
-
|
|
1
|
+
import p from "@getspot/spot-widget";
|
|
2
|
+
function w(t, e, s, d, r, a, u, f) {
|
|
3
|
+
var i = typeof t == "function" ? t.options : t;
|
|
4
|
+
e && (i.render = e, i.staticRenderFns = s, i._compiled = !0), d && (i.functional = !0), a && (i._scopeId = "data-v-" + a);
|
|
5
|
+
var o;
|
|
6
|
+
if (u ? (o = function(n) {
|
|
7
|
+
n = n || // cached call
|
|
8
8
|
this.$vnode && this.$vnode.ssrContext || // stateful
|
|
9
|
-
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !
|
|
10
|
-
},
|
|
9
|
+
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !n && typeof __VUE_SSR_CONTEXT__ < "u" && (n = __VUE_SSR_CONTEXT__), r && r.call(this, n), n && n._registeredComponents && n._registeredComponents.add(u);
|
|
10
|
+
}, i._ssrRegister = o) : r && (o = f ? function() {
|
|
11
11
|
r.call(
|
|
12
12
|
this,
|
|
13
|
-
(
|
|
13
|
+
(i.functional ? this.parent : this).$root.$options.shadowRoot
|
|
14
14
|
);
|
|
15
|
-
} : r),
|
|
16
|
-
if (
|
|
17
|
-
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
return
|
|
15
|
+
} : r), o)
|
|
16
|
+
if (i.functional) {
|
|
17
|
+
i._injectStyles = o;
|
|
18
|
+
var c = i.render;
|
|
19
|
+
i.render = function(g, l) {
|
|
20
|
+
return o.call(l), c(g, l);
|
|
21
21
|
};
|
|
22
22
|
} else {
|
|
23
|
-
var
|
|
24
|
-
|
|
23
|
+
var h = i.beforeCreate;
|
|
24
|
+
i.beforeCreate = h ? [].concat(h, o) : [o];
|
|
25
25
|
}
|
|
26
26
|
return {
|
|
27
|
-
exports:
|
|
28
|
-
options:
|
|
27
|
+
exports: t,
|
|
28
|
+
options: i
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
|
-
const
|
|
32
|
-
name: "
|
|
31
|
+
const y = {
|
|
32
|
+
name: "Vue2SpotWidget",
|
|
33
33
|
props: {
|
|
34
|
+
apiConfig: {
|
|
35
|
+
type: Object,
|
|
36
|
+
default: void 0
|
|
37
|
+
},
|
|
38
|
+
quoteRequestData: {
|
|
39
|
+
type: Object,
|
|
40
|
+
default: void 0
|
|
41
|
+
},
|
|
42
|
+
showTable: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: !0
|
|
45
|
+
},
|
|
46
|
+
optInSelected: {
|
|
47
|
+
type: Boolean,
|
|
48
|
+
default: !1
|
|
49
|
+
},
|
|
50
|
+
theme: {
|
|
51
|
+
type: Object,
|
|
52
|
+
default: void 0
|
|
53
|
+
},
|
|
54
|
+
callbacks: {
|
|
55
|
+
type: Object,
|
|
56
|
+
default: () => ({})
|
|
57
|
+
},
|
|
58
|
+
onQuoteRetrieved: {
|
|
59
|
+
type: Function,
|
|
60
|
+
default: void 0
|
|
61
|
+
},
|
|
62
|
+
onOptIn: {
|
|
63
|
+
type: Function,
|
|
64
|
+
default: void 0
|
|
65
|
+
},
|
|
66
|
+
onOptOut: {
|
|
67
|
+
type: Function,
|
|
68
|
+
default: void 0
|
|
69
|
+
},
|
|
70
|
+
onError: {
|
|
71
|
+
type: Function,
|
|
72
|
+
default: void 0
|
|
73
|
+
},
|
|
74
|
+
onNoMatchingQuote: {
|
|
75
|
+
type: Function,
|
|
76
|
+
default: void 0
|
|
77
|
+
},
|
|
78
|
+
onSelectionChange: {
|
|
79
|
+
type: Function,
|
|
80
|
+
default: void 0
|
|
81
|
+
},
|
|
34
82
|
options: {
|
|
35
83
|
type: Object,
|
|
36
84
|
default: () => ({})
|
|
37
85
|
}
|
|
38
86
|
},
|
|
87
|
+
data() {
|
|
88
|
+
return {
|
|
89
|
+
widget: null,
|
|
90
|
+
reinitTimeout: null
|
|
91
|
+
};
|
|
92
|
+
},
|
|
93
|
+
computed: {
|
|
94
|
+
mergedCallbacks() {
|
|
95
|
+
return {
|
|
96
|
+
...this.callbacks,
|
|
97
|
+
...this.onQuoteRetrieved && { onQuoteRetrieved: this.onQuoteRetrieved },
|
|
98
|
+
...this.onOptIn && {
|
|
99
|
+
onOptIn: (t) => {
|
|
100
|
+
this.onOptIn && this.onOptIn(t), this.onSelectionChange && this.onSelectionChange(t);
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
...this.onOptOut && {
|
|
104
|
+
onOptOut: (t) => {
|
|
105
|
+
this.onOptOut && this.onOptOut(t), this.onSelectionChange && this.onSelectionChange(t);
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
...this.onError && { onError: this.onError },
|
|
109
|
+
...this.onNoMatchingQuote && { onNoMatchingQuote: this.onNoMatchingQuote }
|
|
110
|
+
};
|
|
111
|
+
},
|
|
112
|
+
widgetOptions() {
|
|
113
|
+
return {
|
|
114
|
+
apiConfig: this.apiConfig,
|
|
115
|
+
quoteRequestData: this.quoteRequestData,
|
|
116
|
+
showTable: this.showTable,
|
|
117
|
+
optInSelected: this.optInSelected,
|
|
118
|
+
theme: this.theme,
|
|
119
|
+
callbacks: this.mergedCallbacks,
|
|
120
|
+
...this.options
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
},
|
|
39
124
|
mounted() {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
125
|
+
this.initializeWidget();
|
|
126
|
+
},
|
|
127
|
+
watch: {
|
|
128
|
+
quoteRequestData: {
|
|
129
|
+
handler: function(t, e) {
|
|
130
|
+
this.widget && t && JSON.stringify(t) !== JSON.stringify(e) && (this.reinitTimeout && clearTimeout(this.reinitTimeout), this.reinitTimeout = setTimeout(() => {
|
|
131
|
+
this.reinitializeWidget(), this.reinitTimeout = null;
|
|
132
|
+
}, 100));
|
|
133
|
+
},
|
|
134
|
+
deep: !0
|
|
135
|
+
},
|
|
136
|
+
apiConfig: {
|
|
137
|
+
handler: function() {
|
|
138
|
+
this.reinitializeWidget();
|
|
139
|
+
},
|
|
140
|
+
deep: !0
|
|
141
|
+
},
|
|
142
|
+
showTable: function(t, e) {
|
|
143
|
+
t !== e && this.reinitializeWidget();
|
|
144
|
+
},
|
|
145
|
+
optInSelected: function(t, e) {
|
|
146
|
+
t !== e && this.reinitializeWidget();
|
|
147
|
+
},
|
|
148
|
+
theme: {
|
|
149
|
+
handler: function(t, e) {
|
|
150
|
+
this.widget && JSON.stringify(t) !== JSON.stringify(e) && this.updateTheme(t);
|
|
151
|
+
},
|
|
152
|
+
deep: !0
|
|
153
|
+
},
|
|
154
|
+
mergedCallbacks: {
|
|
155
|
+
handler: function(t, e) {
|
|
156
|
+
this.widget && JSON.stringify(t) !== JSON.stringify(e) && this.updateCallbacks(t);
|
|
157
|
+
},
|
|
158
|
+
deep: !0
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
methods: {
|
|
162
|
+
initializeWidget() {
|
|
163
|
+
this.widget && (this.widget.destroy(), this.widget = null), this.$refs.container && (this.$refs.container.innerHTML = ""), this.$nextTick(() => {
|
|
164
|
+
try {
|
|
165
|
+
this.widget = new p({
|
|
166
|
+
...this.widgetOptions,
|
|
167
|
+
location: this.$refs.container
|
|
168
|
+
});
|
|
169
|
+
} catch (t) {
|
|
170
|
+
this.$emit("error", t), this.onError && this.onError(t);
|
|
171
|
+
}
|
|
44
172
|
});
|
|
45
|
-
}
|
|
46
|
-
|
|
173
|
+
},
|
|
174
|
+
reinitializeWidget() {
|
|
175
|
+
this.widget && (this.widget.destroy(), this.widget = null), this.initializeWidget();
|
|
176
|
+
},
|
|
177
|
+
async updateQuote(t) {
|
|
178
|
+
return this.widget && this.widget.updateQuote ? this.widget.updateQuote(t) : void 0;
|
|
179
|
+
},
|
|
180
|
+
getSelection() {
|
|
181
|
+
return this.widget && this.widget.getSelection ? this.widget.getSelection() : void 0;
|
|
182
|
+
},
|
|
183
|
+
validateSelection() {
|
|
184
|
+
return this.widget && this.widget.validateSelection ? this.widget.validateSelection() : void 0;
|
|
185
|
+
},
|
|
186
|
+
updateTheme: function(t) {
|
|
187
|
+
if (!(!this.widget || !this.widget.container))
|
|
188
|
+
for (var e = Object.keys(t || {}), s = 0; s < e.length; s++) {
|
|
189
|
+
var d = e[s], r = t[d], a = "--" + d;
|
|
190
|
+
this.widget.container.style.setProperty(a, r);
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
updateCallbacks: function(t) {
|
|
194
|
+
this.widget && (this.widget.options.callbacks = t);
|
|
195
|
+
},
|
|
196
|
+
destroy() {
|
|
197
|
+
this.widget && typeof this.widget.destroy == "function" && (this.widget.destroy(), this.widget = null);
|
|
47
198
|
}
|
|
48
199
|
},
|
|
49
200
|
beforeDestroy() {
|
|
50
|
-
this.widget && typeof this.widget.destroy == "function" && this.widget.destroy();
|
|
201
|
+
this.reinitTimeout && clearTimeout(this.reinitTimeout), this.widget && typeof this.widget.destroy == "function" && this.widget.destroy();
|
|
51
202
|
}
|
|
52
203
|
};
|
|
53
|
-
var
|
|
54
|
-
var
|
|
204
|
+
var _ = function() {
|
|
205
|
+
var e = this, s = e._self._c;
|
|
55
206
|
return s("div", { ref: "container" });
|
|
56
|
-
},
|
|
207
|
+
}, m = [], O = /* @__PURE__ */ w(
|
|
208
|
+
y,
|
|
209
|
+
_,
|
|
57
210
|
m,
|
|
58
|
-
g,
|
|
59
|
-
C,
|
|
60
211
|
!1,
|
|
61
212
|
null,
|
|
62
213
|
null,
|
|
63
214
|
null,
|
|
64
215
|
null
|
|
65
216
|
);
|
|
66
|
-
const
|
|
217
|
+
const S = O.exports;
|
|
67
218
|
export {
|
|
68
|
-
|
|
219
|
+
S as default
|
|
69
220
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(r,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("@getspot/spot-widget")):typeof define=="function"&&define.amd?define(["@getspot/spot-widget"],u):(r=typeof globalThis<"u"?globalThis:r||self,r.Vue2SpotWidget=u(r.SpotWidget))})(this,function(r){"use strict";function u(t,e,s,a,d,h,f,m){var i=typeof t=="function"?t.options:t;e&&(i.render=e,i.staticRenderFns=s,i._compiled=!0),a&&(i.functional=!0),h&&(i._scopeId="data-v-"+h);var o;if(f?(o=function(n){n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!n&&typeof __VUE_SSR_CONTEXT__<"u"&&(n=__VUE_SSR_CONTEXT__),d&&d.call(this,n),n&&n._registeredComponents&&n._registeredComponents.add(f)},i._ssrRegister=o):d&&(o=m?function(){d.call(this,(i.functional?this.parent:this).$root.$options.shadowRoot)}:d),o)if(i.functional){i._injectStyles=o;var _=i.render;i.render=function(O,c){return o.call(c),_(O,c)}}else{var l=i.beforeCreate;i.beforeCreate=l?[].concat(l,o):[o]}return{exports:t,options:i}}const p={name:"Vue2SpotWidget",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=>{this.onOptIn&&this.onOptIn(t),this.onSelectionChange&&this.onSelectionChange(t)}},...this.onOptOut&&{onOptOut:t=>{this.onOptOut&&this.onOptOut(t),this.onSelectionChange&&this.onSelectionChange(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:function(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:function(){this.reinitializeWidget()},deep:!0},showTable:function(t,e){t!==e&&this.reinitializeWidget()},optInSelected:function(t,e){t!==e&&this.reinitializeWidget()},theme:{handler:function(t,e){this.widget&&JSON.stringify(t)!==JSON.stringify(e)&&this.updateTheme(t)},deep:!0},mergedCallbacks:{handler:function(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(()=>{try{this.widget=new r({...this.widgetOptions,location:this.$refs.container})}catch(t){this.$emit("error",t),this.onError&&this.onError(t)}})},reinitializeWidget(){this.widget&&(this.widget.destroy(),this.widget=null),this.initializeWidget()},async updateQuote(t){return this.widget&&this.widget.updateQuote?this.widget.updateQuote(t):void 0},getSelection(){return this.widget&&this.widget.getSelection?this.widget.getSelection():void 0},validateSelection(){return this.widget&&this.widget.validateSelection?this.widget.validateSelection():void 0},updateTheme:function(t){if(!(!this.widget||!this.widget.container))for(var e=Object.keys(t||{}),s=0;s<e.length;s++){var a=e[s],d=t[a],h="--"+a;this.widget.container.style.setProperty(h,d)}},updateCallbacks:function(t){this.widget&&(this.widget.options.callbacks=t)},destroy(){this.widget&&typeof this.widget.destroy=="function"&&(this.widget.destroy(),this.widget=null)}},beforeDestroy(){this.reinitTimeout&&clearTimeout(this.reinitTimeout),this.widget&&typeof this.widget.destroy=="function"&&this.widget.destroy()}};var g=function(){var e=this,s=e._self._c;return s("div",{ref:"container"})},w=[],y=u(p,g,w,!1,null,null,null,null);return y.exports});
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getspot/spot-widget-vue2",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
7
|
"main": "dist/index.umd.js",
|
|
8
8
|
"module": "dist/index.es.js",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@getspot/spot-widget": "0.
|
|
10
|
+
"@getspot/spot-widget": "1.0.0"
|
|
11
11
|
},
|
|
12
12
|
"peerDependencies": {
|
|
13
13
|
"vue": "^2.6.0"
|
package/src/Vue2SpotWidget.vue
CHANGED
|
@@ -6,24 +6,222 @@
|
|
|
6
6
|
import SpotWidget from "@getspot/spot-widget";
|
|
7
7
|
|
|
8
8
|
export default {
|
|
9
|
-
name: "
|
|
9
|
+
name: "Vue2SpotWidget",
|
|
10
10
|
props: {
|
|
11
|
+
apiConfig: {
|
|
12
|
+
type: Object,
|
|
13
|
+
default: undefined,
|
|
14
|
+
},
|
|
15
|
+
quoteRequestData: {
|
|
16
|
+
type: Object,
|
|
17
|
+
default: undefined,
|
|
18
|
+
},
|
|
19
|
+
showTable: {
|
|
20
|
+
type: Boolean,
|
|
21
|
+
default: true,
|
|
22
|
+
},
|
|
23
|
+
optInSelected: {
|
|
24
|
+
type: Boolean,
|
|
25
|
+
default: false,
|
|
26
|
+
},
|
|
27
|
+
theme: {
|
|
28
|
+
type: Object,
|
|
29
|
+
default: undefined,
|
|
30
|
+
},
|
|
31
|
+
callbacks: {
|
|
32
|
+
type: Object,
|
|
33
|
+
default: () => ({}),
|
|
34
|
+
},
|
|
35
|
+
onQuoteRetrieved: {
|
|
36
|
+
type: Function,
|
|
37
|
+
default: undefined,
|
|
38
|
+
},
|
|
39
|
+
onOptIn: {
|
|
40
|
+
type: Function,
|
|
41
|
+
default: undefined,
|
|
42
|
+
},
|
|
43
|
+
onOptOut: {
|
|
44
|
+
type: Function,
|
|
45
|
+
default: undefined,
|
|
46
|
+
},
|
|
47
|
+
onError: {
|
|
48
|
+
type: Function,
|
|
49
|
+
default: undefined,
|
|
50
|
+
},
|
|
51
|
+
onNoMatchingQuote: {
|
|
52
|
+
type: Function,
|
|
53
|
+
default: undefined,
|
|
54
|
+
},
|
|
55
|
+
onSelectionChange: {
|
|
56
|
+
type: Function,
|
|
57
|
+
default: undefined,
|
|
58
|
+
},
|
|
11
59
|
options: {
|
|
12
60
|
type: Object,
|
|
13
61
|
default: () => ({}),
|
|
14
62
|
},
|
|
15
63
|
},
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
64
|
+
data() {
|
|
65
|
+
return {
|
|
66
|
+
widget: null,
|
|
67
|
+
reinitTimeout: null,
|
|
68
|
+
};
|
|
69
|
+
},
|
|
70
|
+
computed: {
|
|
71
|
+
mergedCallbacks() {
|
|
72
|
+
return {
|
|
73
|
+
...this.callbacks,
|
|
74
|
+
...(this.onQuoteRetrieved && { onQuoteRetrieved: this.onQuoteRetrieved }),
|
|
75
|
+
...(this.onOptIn && {
|
|
76
|
+
onOptIn: (data) => {
|
|
77
|
+
if (this.onOptIn) this.onOptIn(data);
|
|
78
|
+
if (this.onSelectionChange) this.onSelectionChange(data);
|
|
79
|
+
}
|
|
80
|
+
}),
|
|
81
|
+
...(this.onOptOut && {
|
|
82
|
+
onOptOut: (data) => {
|
|
83
|
+
if (this.onOptOut) this.onOptOut(data);
|
|
84
|
+
if (this.onSelectionChange) this.onSelectionChange(data);
|
|
85
|
+
}
|
|
86
|
+
}),
|
|
87
|
+
...(this.onError && { onError: this.onError }),
|
|
88
|
+
...(this.onNoMatchingQuote && { onNoMatchingQuote: this.onNoMatchingQuote }),
|
|
89
|
+
};
|
|
90
|
+
},
|
|
91
|
+
widgetOptions() {
|
|
92
|
+
return {
|
|
93
|
+
apiConfig: this.apiConfig,
|
|
94
|
+
quoteRequestData: this.quoteRequestData,
|
|
95
|
+
showTable: this.showTable,
|
|
96
|
+
optInSelected: this.optInSelected,
|
|
97
|
+
theme: this.theme,
|
|
98
|
+
callbacks: this.mergedCallbacks,
|
|
19
99
|
...this.options,
|
|
20
|
-
|
|
100
|
+
};
|
|
101
|
+
},
|
|
102
|
+
},
|
|
103
|
+
mounted() {
|
|
104
|
+
this.initializeWidget();
|
|
105
|
+
},
|
|
106
|
+
watch: {
|
|
107
|
+
quoteRequestData: {
|
|
108
|
+
handler: function(newQuoteRequestData, oldQuoteRequestData) {
|
|
109
|
+
if (this.widget && newQuoteRequestData && JSON.stringify(newQuoteRequestData) !== JSON.stringify(oldQuoteRequestData)) {
|
|
110
|
+
// Debounce reinitialize to prevent multiple rapid updates
|
|
111
|
+
if (this.reinitTimeout) {
|
|
112
|
+
clearTimeout(this.reinitTimeout);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
this.reinitTimeout = setTimeout(() => {
|
|
116
|
+
this.reinitializeWidget();
|
|
117
|
+
this.reinitTimeout = null;
|
|
118
|
+
}, 100);
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
deep: true,
|
|
122
|
+
},
|
|
123
|
+
apiConfig: {
|
|
124
|
+
handler: function() {
|
|
125
|
+
this.reinitializeWidget();
|
|
126
|
+
},
|
|
127
|
+
deep: true,
|
|
128
|
+
},
|
|
129
|
+
showTable: function(newVal, oldVal) {
|
|
130
|
+
if (newVal !== oldVal) {
|
|
131
|
+
this.reinitializeWidget();
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
optInSelected: function(newVal, oldVal) {
|
|
135
|
+
if (newVal !== oldVal) {
|
|
136
|
+
this.reinitializeWidget();
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
theme: {
|
|
140
|
+
handler: function(newTheme, oldTheme) {
|
|
141
|
+
if (this.widget && JSON.stringify(newTheme) !== JSON.stringify(oldTheme)) {
|
|
142
|
+
this.updateTheme(newTheme);
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
deep: true,
|
|
146
|
+
},
|
|
147
|
+
mergedCallbacks: {
|
|
148
|
+
handler: function(newCallbacks, oldCallbacks) {
|
|
149
|
+
if (this.widget && JSON.stringify(newCallbacks) !== JSON.stringify(oldCallbacks)) {
|
|
150
|
+
this.updateCallbacks(newCallbacks);
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
deep: true,
|
|
154
|
+
},
|
|
155
|
+
},
|
|
156
|
+
methods: {
|
|
157
|
+
initializeWidget() {
|
|
158
|
+
// Destroy any existing widget first
|
|
159
|
+
if (this.widget) {
|
|
160
|
+
this.widget.destroy();
|
|
161
|
+
this.widget = null;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
// Clear the container completely
|
|
165
|
+
if (this.$refs.container) {
|
|
166
|
+
this.$refs.container.innerHTML = '';
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// Add a small delay to ensure DOM is ready
|
|
170
|
+
this.$nextTick(() => {
|
|
171
|
+
try {
|
|
172
|
+
this.widget = new SpotWidget({
|
|
173
|
+
...this.widgetOptions,
|
|
174
|
+
location: this.$refs.container,
|
|
175
|
+
});
|
|
176
|
+
} catch (err) {
|
|
177
|
+
this.$emit("error", err);
|
|
178
|
+
if (this.onError) this.onError(err);
|
|
179
|
+
}
|
|
21
180
|
});
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
181
|
+
},
|
|
182
|
+
reinitializeWidget() {
|
|
183
|
+
if (this.widget) {
|
|
184
|
+
this.widget.destroy();
|
|
185
|
+
this.widget = null;
|
|
186
|
+
}
|
|
187
|
+
this.initializeWidget();
|
|
188
|
+
},
|
|
189
|
+
async updateQuote(newQuoteRequestData) {
|
|
190
|
+
return this.widget && this.widget.updateQuote ? this.widget.updateQuote(newQuoteRequestData) : undefined;
|
|
191
|
+
},
|
|
192
|
+
getSelection() {
|
|
193
|
+
return this.widget && this.widget.getSelection ? this.widget.getSelection() : undefined;
|
|
194
|
+
},
|
|
195
|
+
validateSelection() {
|
|
196
|
+
return this.widget && this.widget.validateSelection ? this.widget.validateSelection() : undefined;
|
|
197
|
+
},
|
|
198
|
+
updateTheme: function(newTheme) {
|
|
199
|
+
if (!this.widget || !this.widget.container) return;
|
|
200
|
+
|
|
201
|
+
var entries = Object.keys(newTheme || {});
|
|
202
|
+
for (var i = 0; i < entries.length; i++) {
|
|
203
|
+
var key = entries[i];
|
|
204
|
+
var value = newTheme[key];
|
|
205
|
+
var cssVariable = "--" + key;
|
|
206
|
+
this.widget.container.style.setProperty(cssVariable, value);
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
updateCallbacks: function(newCallbacks) {
|
|
210
|
+
if (!this.widget) return;
|
|
211
|
+
|
|
212
|
+
this.widget.options.callbacks = newCallbacks;
|
|
213
|
+
},
|
|
214
|
+
destroy() {
|
|
215
|
+
if (this.widget && typeof this.widget.destroy === "function") {
|
|
216
|
+
this.widget.destroy();
|
|
217
|
+
this.widget = null;
|
|
218
|
+
}
|
|
219
|
+
},
|
|
25
220
|
},
|
|
26
221
|
beforeDestroy() {
|
|
222
|
+
if (this.reinitTimeout) {
|
|
223
|
+
clearTimeout(this.reinitTimeout);
|
|
224
|
+
}
|
|
27
225
|
if (this.widget && typeof this.widget.destroy === "function") {
|
|
28
226
|
this.widget.destroy();
|
|
29
227
|
}
|