@useinsider/guido 1.0.3-beta.2df2106 → 1.0.3-beta.2f9ae0f
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/dist/components/Guido.vue.js +1 -1
- package/dist/components/organisms/LoadingWrapper.vue.js +1 -1
- package/dist/components/organisms/header/RightSlot.vue2.js +13 -13
- package/dist/extensions/Blocks/Items/controls/settingsControl.js +36 -36
- package/dist/extensions/Blocks/Items/enums/controlEnums.js +2 -2
- package/dist/extensions/Blocks/Items/enums/productEnums.js +2 -3
- package/dist/extensions/Blocks/Items/extension.js +6 -7
- package/dist/extensions/Blocks/Items/layouts/horizontal.html.js +2 -2
- package/dist/extensions/Blocks/Items/layouts/vertical.html.js +5 -17
- package/dist/extensions/Blocks/Items/settingsPanel.js +24 -25
- package/dist/extensions/Blocks/Items/store/items-block.js +3 -7
- package/dist/extensions/Blocks/Items/template.js +2 -2
- package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js +26 -35
- package/dist/extensions/Blocks/Items/utils/updateAttributes.js +27 -29
- package/dist/guido.css +1 -1
- package/dist/src/extensions/Blocks/Items/enums/controlEnums.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/enums/productEnums.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/store/items-block.d.ts +0 -2
- package/dist/src/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.d.ts +0 -6
- package/package.json +1 -3
- package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js +0 -92
- package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts +0 -15
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as H, ref as
|
|
1
|
+
import { defineComponent as H, ref as p, computed as _ } from "vue";
|
|
2
2
|
import { useConfig as h } from "../../../composables/useConfig.js";
|
|
3
3
|
import { useExport as V } from "../../../composables/useExport.js";
|
|
4
4
|
import { useTestEmailClick as x } from "../../../composables/useGuidoActions.js";
|
|
@@ -10,25 +10,25 @@ import { getTooltipOptions as O } from "../../../utils/tooltipUtils.js";
|
|
|
10
10
|
import { InButtonV2 as A } from "@useinsider/design-system-vue";
|
|
11
11
|
const J = /* @__PURE__ */ H({
|
|
12
12
|
__name: "RightSlot",
|
|
13
|
-
setup(k, { expose:
|
|
14
|
-
const { config:
|
|
15
|
-
if (
|
|
13
|
+
setup(k, { expose: m }) {
|
|
14
|
+
const { config: c } = h(), { exportHtml: r } = V(), { save: n } = E(), { openVersionHistory: i, closeVersionHistory: a } = w(), t = C(), o = T(), e = p(!1), s = p(!1), u = x(), f = () => {
|
|
15
|
+
if (t.isVersionHistoryOpen) {
|
|
16
16
|
a();
|
|
17
17
|
return;
|
|
18
18
|
}
|
|
19
19
|
i();
|
|
20
|
-
},
|
|
20
|
+
}, v = async () => {
|
|
21
21
|
e.value = !0, await r(), e.value = !1;
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
s.value = !0,
|
|
26
|
-
const g = await n(
|
|
27
|
-
return s.value = !1,
|
|
22
|
+
}, d = () => {
|
|
23
|
+
t.isSaveAsTemplateDrawerOpen = !0;
|
|
24
|
+
}, y = _(() => t.isVersionHistoryOpen ? o("newsletter.close-version-history") : o("newsletter.version-history")), l = async (S) => {
|
|
25
|
+
s.value = !0, t.loadingStatus = !0;
|
|
26
|
+
const g = await n(S);
|
|
27
|
+
return s.value = !1, t.loadingStatus = !1, g;
|
|
28
28
|
};
|
|
29
|
-
return
|
|
29
|
+
return m({
|
|
30
30
|
handleSave: l
|
|
31
|
-
}), { __sfc: !0, config:
|
|
31
|
+
}), { __sfc: !0, config: c, exportHtml: r, save: n, openVersionHistory: i, closeVersionHistory: a, editorStore: t, trans: o, isExporting: e, isSaving: s, testEmailClick: u, handleVersionHistory: f, handleExport: v, handleSaveAs: d, versionHistoryTooltipText: y, handleSave: l, getTooltipOptions: O, InButtonV2: A };
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
34
|
export {
|
|
@@ -12,7 +12,7 @@ import { useItemsBlockStore as $ } from "../store/items-block.js";
|
|
|
12
12
|
import { getDefaultTemplate as q } from "../template.js";
|
|
13
13
|
import { syncCurrencySymbolFromAttributes as k, syncCurrencyLocationFromAttributes as w, syncFormattedPriceFromAttributes as B } from "../utils/syncAttributesFromConfigBlock.js";
|
|
14
14
|
import { updateConfigBlockAttributes as f } from "../utils/updateAttributes.js";
|
|
15
|
-
const G = "ui-elements-items-block",
|
|
15
|
+
const G = "ui-elements-items-block", o = {
|
|
16
16
|
ITEMS_TYPE: "itemsType",
|
|
17
17
|
ORIENTATION: "orientation",
|
|
18
18
|
ITEM_IDS: "itemIds"
|
|
@@ -36,9 +36,9 @@ class te extends x {
|
|
|
36
36
|
}
|
|
37
37
|
onRender() {
|
|
38
38
|
this.api.updateValues({
|
|
39
|
-
[
|
|
40
|
-
[
|
|
41
|
-
[
|
|
39
|
+
[o.ORIENTATION]: this.store.orientation,
|
|
40
|
+
[o.ITEMS_TYPE]: this.store.itemsType,
|
|
41
|
+
[o.ITEM_IDS]: this.store.itemIds
|
|
42
42
|
}), this._listenToFormUpdates();
|
|
43
43
|
}
|
|
44
44
|
onTemplateNodeUpdated(e) {
|
|
@@ -48,9 +48,9 @@ class te extends x {
|
|
|
48
48
|
},
|
|
49
49
|
() => {
|
|
50
50
|
this.api.updateValues({
|
|
51
|
-
[
|
|
52
|
-
[
|
|
53
|
-
[
|
|
51
|
+
[o.ORIENTATION]: this.store.orientation,
|
|
52
|
+
[o.ITEMS_TYPE]: this.store.itemsType,
|
|
53
|
+
[o.ITEM_IDS]: this.store.itemIds
|
|
54
54
|
}), this._initializeSelectItems();
|
|
55
55
|
}
|
|
56
56
|
);
|
|
@@ -64,7 +64,7 @@ class te extends x {
|
|
|
64
64
|
${this._GuOneColumn([
|
|
65
65
|
this._GuLabel({ text: "Item Type" }),
|
|
66
66
|
this._GuSelect({
|
|
67
|
-
name:
|
|
67
|
+
name: o.ITEMS_TYPE,
|
|
68
68
|
className: "es-100",
|
|
69
69
|
placeholder: "Select Item Type",
|
|
70
70
|
options: P
|
|
@@ -77,7 +77,7 @@ class te extends x {
|
|
|
77
77
|
${this._GuTwoColumns([
|
|
78
78
|
this._GuLabel({ text: "Orientation" }),
|
|
79
79
|
this._GuRadioButton({
|
|
80
|
-
name:
|
|
80
|
+
name: o.ORIENTATION,
|
|
81
81
|
buttons: L
|
|
82
82
|
})
|
|
83
83
|
])}
|
|
@@ -88,7 +88,7 @@ class te extends x {
|
|
|
88
88
|
${this._GuTwoColumns([
|
|
89
89
|
this._GuLabel({ text: "Item in Cart" }),
|
|
90
90
|
this._GuSelect({
|
|
91
|
-
name:
|
|
91
|
+
name: o.ITEM_IDS,
|
|
92
92
|
className: "es-100",
|
|
93
93
|
placeholder: "Select Item In Cart",
|
|
94
94
|
options: []
|
|
@@ -97,7 +97,7 @@ class te extends x {
|
|
|
97
97
|
`;
|
|
98
98
|
}
|
|
99
99
|
_onOrientationChange(e) {
|
|
100
|
-
console.debug("Orientation changed to: ", e), this.store.setOrientation(e), this.
|
|
100
|
+
console.debug("Orientation changed to: ", e), this.store.setOrientation(e), this.api.updateValues({ [o.ORIENTATION]: e }), f(this.currentNode, this.api), this._reOrderTemplate(), setTimeout(() => {
|
|
101
101
|
this._recalculateTrimming();
|
|
102
102
|
}, 50);
|
|
103
103
|
}
|
|
@@ -106,36 +106,36 @@ class te extends x {
|
|
|
106
106
|
!i || !r || (this.store.setItemsType(i), this.store.setItemIds(r.value), f(this.currentNode, this.api), this._updateDataTypeAttributes(i), this._initializeSelectItems(), this._reFillTemplate());
|
|
107
107
|
}
|
|
108
108
|
_onItemIdsChange(e) {
|
|
109
|
-
console.debug("Item ids changed to: ", e), this.store.setItemIds(e), this.api.updateValues({ [
|
|
109
|
+
console.debug("Item ids changed to: ", e), this.store.setItemIds(e), this.api.updateValues({ [o.ITEM_IDS]: e }), f(this.currentNode, this.api), this._updateDataNumberAttributes(e), this._reFillTemplate();
|
|
110
110
|
}
|
|
111
111
|
_initializeSelectItems() {
|
|
112
112
|
this.api.setUIEAttribute(
|
|
113
|
-
|
|
113
|
+
o.ITEMS_TYPE,
|
|
114
114
|
A.SELECTPICKER.items,
|
|
115
115
|
P
|
|
116
116
|
);
|
|
117
117
|
const { itemsType: e, itemIds: i } = this.store;
|
|
118
118
|
this.api.updateValues({
|
|
119
|
-
[
|
|
119
|
+
[o.ITEMS_TYPE]: e
|
|
120
120
|
});
|
|
121
121
|
const t = N[e];
|
|
122
122
|
this.api.setUIEAttribute(
|
|
123
|
-
|
|
123
|
+
o.ITEM_IDS,
|
|
124
124
|
A.SELECTPICKER.items,
|
|
125
125
|
t
|
|
126
126
|
), this.api.updateValues({
|
|
127
|
-
[
|
|
127
|
+
[o.ITEM_IDS]: i
|
|
128
128
|
});
|
|
129
129
|
}
|
|
130
130
|
_listenToFormUpdates() {
|
|
131
131
|
this.api.onValueChanged(
|
|
132
|
-
|
|
132
|
+
o.ITEMS_TYPE,
|
|
133
133
|
(e) => this._onItemsTypeChange(e)
|
|
134
134
|
), this.api.onValueChanged(
|
|
135
|
-
|
|
135
|
+
o.ORIENTATION,
|
|
136
136
|
(e) => this._onOrientationChange(e)
|
|
137
137
|
), this.api.onValueChanged(
|
|
138
|
-
|
|
138
|
+
o.ITEM_IDS,
|
|
139
139
|
(e) => this._onItemIdsChange(e)
|
|
140
140
|
);
|
|
141
141
|
}
|
|
@@ -146,7 +146,7 @@ class te extends x {
|
|
|
146
146
|
itemIds: t,
|
|
147
147
|
currencySymbol: r,
|
|
148
148
|
currencyLocation: n,
|
|
149
|
-
formattedPrice:
|
|
149
|
+
formattedPrice: s
|
|
150
150
|
} = this.store;
|
|
151
151
|
this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(q({
|
|
152
152
|
orientation: e,
|
|
@@ -154,11 +154,11 @@ class te extends x {
|
|
|
154
154
|
itemId: t,
|
|
155
155
|
currencySymbol: r,
|
|
156
156
|
currencyLocation: n,
|
|
157
|
-
formattedPrice:
|
|
157
|
+
formattedPrice: s
|
|
158
158
|
})).apply(new d("Updated template"));
|
|
159
159
|
}
|
|
160
160
|
_getTemplateData() {
|
|
161
|
-
const { itemsType: e, itemIds: i, formattedPrice: t } = this.store, r = N[e].findIndex((
|
|
161
|
+
const { itemsType: e, itemIds: i, formattedPrice: t } = this.store, r = N[e].findIndex((s) => s.value === i), n = r > -1 ? r : 0;
|
|
162
162
|
return {
|
|
163
163
|
imageSrc: T.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[n],
|
|
164
164
|
name: T.PAIRS_FOR_EXTENSION.name[e].DEFAULT[n],
|
|
@@ -190,7 +190,7 @@ class te extends x {
|
|
|
190
190
|
const t = this._getParagraphFromBlock(i);
|
|
191
191
|
if (!t)
|
|
192
192
|
return;
|
|
193
|
-
const r = t.getInnerHTML() || "", n = t.getInnerText() || "", { currencySymbol:
|
|
193
|
+
const r = t.getInnerHTML() || "", n = t.getInnerText() || "", { currencySymbol: s, currencyLocation: a } = this.store, c = (s == null ? void 0 : s.trim()) || "", m = this._removeCurrencySymbol(n, c), u = this._replacePriceNumber(m, e), I = this._buildPriceContent(u, c, a), _ = r.replace(n, I);
|
|
194
194
|
this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(_).apply(new d("Updated price"));
|
|
195
195
|
}
|
|
196
196
|
_updateOriginalPrice(e) {
|
|
@@ -206,7 +206,7 @@ class te extends x {
|
|
|
206
206
|
const r = t.querySelector("s");
|
|
207
207
|
if (!r)
|
|
208
208
|
return;
|
|
209
|
-
const n = r.getInnerHTML() || "",
|
|
209
|
+
const n = r.getInnerHTML() || "", s = r.getInnerText() || "", { currencySymbol: a, currencyLocation: c } = this.store, m = (a == null ? void 0 : a.trim()) || "", u = this._removeCurrencySymbol(s, m), I = this._replacePriceNumber(u, e), _ = this._buildPriceContent(I, m, c), E = `<s>${n.replace(s, _)}</s>`;
|
|
210
210
|
this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(E).apply(new d("Updated original price"));
|
|
211
211
|
}
|
|
212
212
|
_updateQuantity(e) {
|
|
@@ -215,8 +215,8 @@ class te extends x {
|
|
|
215
215
|
if (!t)
|
|
216
216
|
return;
|
|
217
217
|
const r = t.getStyle("display") === "none", n = t.getInnerText().trim();
|
|
218
|
-
let
|
|
219
|
-
|
|
218
|
+
let s = t.getInnerHTML();
|
|
219
|
+
s = s.replace(n, e), this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(s).setStyle("display", i && !r ? "table-cell" : "none").apply(new d("Updated quantity"));
|
|
220
220
|
}
|
|
221
221
|
/**
|
|
222
222
|
* @todo Optimize template reordering for performance.
|
|
@@ -226,13 +226,13 @@ class te extends x {
|
|
|
226
226
|
var I, _, g, E, y, O, C;
|
|
227
227
|
const e = (I = this.currentNode) == null ? void 0 : I.querySelector(`[esd-extension-block-id="${l.IMAGE}"]`), i = (_ = this.currentNode) == null ? void 0 : _.querySelector(`[esd-extension-block-id="${l.NAME}"]`), t = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${l.PRICE}"]`), r = (E = this.currentNode) == null ? void 0 : E.querySelector(
|
|
228
228
|
`[esd-extension-block-id="${l.ORIGINAL_PRICE}"]`
|
|
229
|
-
), n = (y = this.currentNode) == null ? void 0 : y.querySelector(`[esd-extension-block-id="${l.QUANTITY}"]`),
|
|
230
|
-
if (!e || !i || !t || !r || !n || !
|
|
229
|
+
), n = (y = this.currentNode) == null ? void 0 : y.querySelector(`[esd-extension-block-id="${l.QUANTITY}"]`), s = (O = this.currentNode) == null ? void 0 : O.querySelector(`[esd-extension-block-id="${l.BUTTON}"]`), a = (C = this.currentNode) == null ? void 0 : C.querySelector("esd-config-block");
|
|
230
|
+
if (!e || !i || !t || !r || !n || !s || !a)
|
|
231
231
|
return;
|
|
232
232
|
const { orientation: c } = this.store, m = c === S.ORIENTATION.VERTICAL;
|
|
233
233
|
let u = m ? F : U;
|
|
234
234
|
this.api.getDocumentModifier().modifyHtml(e.querySelector("img")).setAttribute("width", H.productImageWidth).apply(new d("Updated image width")), setTimeout(() => {
|
|
235
|
-
u = u.replace("{-{-TEMPLATE_FIRST_LINE-}-}", m ? R : "").replace("{-{-PRODUCT_IMAGE-}-}", e.getOuterHTML()).replace("{-{-PRODUCT_NAME-}-}", i.getOuterHTML()).
|
|
235
|
+
u = u.replace("{-{-TEMPLATE_FIRST_LINE-}-}", m ? R : "").replace("{-{-PRODUCT_IMAGE-}-}", e.getOuterHTML()).replace("{-{-PRODUCT_NAME-}-}", i.getOuterHTML()).replace("{-{-PRODUCT_PRICE-}-}", t.getOuterHTML()).replace("{-{-PRODUCT_ORIGINAL_PRICE-}-}", r.getOuterHTML()).replace("{-{-PRODUCT_QUANTITY-}-}", n.getOuterHTML()).replace("{-{-PRODUCT_BUTTON-}-}", s.getOuterHTML()).replace("{-{-CONFIG_BLOCK-}-}", a.getOuterHTML()), u = u.trim().replace(R, "").slice(0, -5), this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(u).apply(new d("Reordered template"));
|
|
236
236
|
}, 50);
|
|
237
237
|
}
|
|
238
238
|
_updateDataTypeAttributes(e) {
|
|
@@ -240,8 +240,8 @@ class te extends x {
|
|
|
240
240
|
return;
|
|
241
241
|
const i = this.currentNode.closest(".ins-product-td"), t = this.api.getDocumentModifier();
|
|
242
242
|
i && t.modifyHtml(i).setAttribute("data-type", e), this.currentNode.querySelectorAll("[data-type]").forEach((n) => {
|
|
243
|
-
const
|
|
244
|
-
t.modifyHtml(
|
|
243
|
+
const s = n;
|
|
244
|
+
t.modifyHtml(s).setAttribute("data-type", e);
|
|
245
245
|
}), t.apply(new d("Updated data-type attribute"));
|
|
246
246
|
}
|
|
247
247
|
_updateDataNumberAttributes(e) {
|
|
@@ -258,11 +258,11 @@ class te extends x {
|
|
|
258
258
|
r = m;
|
|
259
259
|
}
|
|
260
260
|
}
|
|
261
|
-
const n = this.currentNode.closest(".ins-product-td"),
|
|
262
|
-
n &&
|
|
261
|
+
const n = this.currentNode.closest(".ins-product-td"), s = this.api.getDocumentModifier();
|
|
262
|
+
n && s.modifyHtml(n).setAttribute("data-number", r), this.currentNode.querySelectorAll("[data-number]").forEach((c) => {
|
|
263
263
|
const m = c;
|
|
264
|
-
|
|
265
|
-
}),
|
|
264
|
+
s.modifyHtml(m).setAttribute("data-number", r);
|
|
265
|
+
}), s.apply(new d("Updated data-number attribute"));
|
|
266
266
|
}
|
|
267
267
|
_reFillTemplate() {
|
|
268
268
|
const e = this._getTemplateData();
|
|
@@ -296,7 +296,7 @@ class te extends x {
|
|
|
296
296
|
} else {
|
|
297
297
|
const n = t.match(/([^0-9.,\s]+)/);
|
|
298
298
|
if (n && n[1]) {
|
|
299
|
-
const
|
|
299
|
+
const s = n[1].trim(), a = new RegExp(`\\s*${this._escapeRegex(s)}\\s*`);
|
|
300
300
|
r = t.replace(a, "").trim();
|
|
301
301
|
}
|
|
302
302
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var c = /* @__PURE__ */ ((i) => (i.BUTTON = "items-block-button", i.IMAGE = "items-block-image", i.ORIGINAL_PRICE = "items-block-original-price", i.PRICE = "items-block-price", i.QUANTITY = "items-block-quantity", i.NAME = "items-block-name", i))(c || {}),
|
|
1
|
+
var c = /* @__PURE__ */ ((i) => (i.BUTTON = "items-block-button", i.IMAGE = "items-block-image", i.ORIGINAL_PRICE = "items-block-original-price", i.PRICE = "items-block-price", i.QUANTITY = "items-block-quantity", i.NAME = "items-block-name", i))(c || {}), b = /* @__PURE__ */ ((i) => (i.BUTTON_ALIGN = "items-block-button-align-control", i.BUTTON_BORDER = "items-block-button-border-control", i.BUTTON_BORDER_RADIUS = "items-block-button-border-radius-control", i.BUTTON_COLOR = "items-block-button-color-control", i.BUTTON_FIT_TO_CONTENT = "items-block-button-fit-to-content-control", i.BUTTON_FONT_FAMILY = "items-block-button-font-family-control", i.BUTTON_MARGINS = "items-block-button-margins-control", i.BUTTON_PADDINGS = "items-block-button-paddings-control", i.BUTTON_TEXT = "items-block-button-text-control", i.BUTTON_TEXT_SIZE = "items-block-button-text-size-control", i.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "items-block-button-text-style-and-font-color-control", i.BUTTON_LINK = "items-block-button-link-control", i.IMAGE_SIZE = "items-block-image-size-control", i.IMAGE_MARGINS = "items-block-image-margins-control", i.IMAGE_LINK = "items-block-image-link-control", i.ORIGINAL_PRICE_ALIGN = "items-block-original-price-align-control", i.ORIGINAL_PRICE_COLOR = "items-block-original-price-color-control", i.ORIGINAL_PRICE_SIZE = "items-block-original-price-size-control", i.ORIGINAL_PRICE_STYLE = "items-block-original-price-style-control", i.ORIGINAL_PRICE_FONT_FAMILY = "items-block-original-price-font-family-control", i.ORIGINAL_PRICE_BACKGROUND = "items-block-original-price-background-control", i.ORIGINAL_PRICE_PADDINGS = "items-block-original-price-paddings-control", i.PRICE_ALIGN = "items-block-price-align-control", i.PRICE_COLOR = "items-block-price-color-control", i.PRICE_SIZE = "items-block-price-size-control", i.PRICE_STYLE = "items-block-price-style-control", i.PRICE_FONT_FAMILY = "items-block-price-font-family-control", i.PRICE_BACKGROUND = "items-block-price-background-control", i.PRICE_PADDINGS = "items-block-price-paddings-control", i.PRICE_HIDE_DISCOUNT = "items-block-price-hide-discount-control", i.PRICE_FORMATTED_PRICE = "items-block-price-formatted-price-control", i.PRICE_CURRENCY_SYMBOL = "items-block-price-currency-symbol-control", i.PRICE_CURRENCY_LOCATION = "items-block-price-currency-location-control", i.NAME_ALIGN = "items-block-name-align-control", i.NAME_COLOR = "items-block-name-color-control", i.NAME_SIZE = "items-block-name-size-control", i.NAME_STYLE = "items-block-name-style-control", i.NAME_FONT_FAMILY = "items-block-name-font-family-control", i.NAME_BACKGROUND = "items-block-name-background-control", i.NAME_TRIMMING = "items-block-name-trimming-control", i.NAME_PADDINGS = "items-block-name-paddings-control", i.QUANTITY_ALIGN = "items-block-quantity-align-control", i.QUANTITY_COLOR = "items-block-quantity-color-control", i.QUANTITY_FONT_FAMILY = "items-block-quantity-font-family-control", i.QUANTITY_PADDINGS = "items-block-quantity-paddings-control", i.QUANTITY_SIZE = "items-block-quantity-size-control", i.QUANTITY_STYLE = "items-block-quantity-style-control", i))(b || {});
|
|
2
2
|
export {
|
|
3
|
-
|
|
3
|
+
b as ItemsBlockControlId,
|
|
4
4
|
c as ItemsBlockId
|
|
5
5
|
};
|
|
@@ -9,7 +9,6 @@ const o = '<td align="center" class="ins-product-td items-block items-block-v2">
|
|
|
9
9
|
PRODUCT_PRICE_FORMATTED: "data-product_price_formatted",
|
|
10
10
|
PRODUCT_PRICE_CURRENCY_SYMBOL: "data-product_price_currency_symbol",
|
|
11
11
|
PRODUCT_PRICE_CURRENCY_LOCATION: "data-product_price_currency_location",
|
|
12
|
-
PRODUCT_ORIGINAL_PRICE_CONTROL_ORIENTATION: "data-product_original_price_control_orientation",
|
|
13
12
|
PRODUCT_BUTTON_LINK: "data-product_button_link",
|
|
14
13
|
PRODUCT_IMAGE_LINK: "data-product_image_link",
|
|
15
14
|
PRODUCT_NAME_CONTROL_VALUE: "data-product_name_control_value",
|
|
@@ -215,7 +214,7 @@ const o = '<td align="center" class="ins-product-td items-block items-block-v2">
|
|
|
215
214
|
function m(e, a = 8) {
|
|
216
215
|
return i(1, a + 1).map((s) => `${e}_${s}`);
|
|
217
216
|
}
|
|
218
|
-
function
|
|
217
|
+
function E() {
|
|
219
218
|
const { PAIRS_FOR_EXTENSION: e } = t, a = [];
|
|
220
219
|
return a.push(
|
|
221
220
|
e.imageSrc.CART_ITEMS.ATTR,
|
|
@@ -263,7 +262,7 @@ function r() {
|
|
|
263
262
|
), a;
|
|
264
263
|
}
|
|
265
264
|
const p = _(
|
|
266
|
-
|
|
265
|
+
E(),
|
|
267
266
|
(e) => m(e)
|
|
268
267
|
);
|
|
269
268
|
export {
|
|
@@ -3,18 +3,17 @@ import { ItemsBlock as i } from "./block.js";
|
|
|
3
3
|
import { ButtonLinkControl as C } from "./controls/button/link.js";
|
|
4
4
|
import { ItemsBlockCardCompositionControl as e } from "./controls/cardComposition.js";
|
|
5
5
|
import { ImageLinkControl as m } from "./controls/image/link.js";
|
|
6
|
-
import { NameControls as
|
|
6
|
+
import { NameControls as t, QuantityControls as n, OriginalPriceControls as r, PriceControls as d, ImageControls as l, ButtonControls as o } from "./controls/index.js";
|
|
7
7
|
import { NameTrimmingControl as s } from "./controls/name/trimming.js";
|
|
8
8
|
import { PriceCurrencyLocationControl as c } from "./controls/price/currencyLocation.js";
|
|
9
9
|
import { PriceCurrencySymbolControl as g } from "./controls/price/currencySymbol.js";
|
|
10
10
|
import { PriceFormattedPriceControl as f } from "./controls/price/formattedPrice.js";
|
|
11
11
|
import { PriceHideDiscountControl as p } from "./controls/price/hideDiscount.js";
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import { ItemsIconsRegistry as P } from "./iconsRegistry.js";
|
|
12
|
+
import { ItemsBlockControl as y } from "./controls/settingsControl.js";
|
|
13
|
+
import { ItemsIconsRegistry as u } from "./iconsRegistry.js";
|
|
15
14
|
import k from "./items.css.js";
|
|
16
|
-
import { SettingsPanel as
|
|
17
|
-
const
|
|
15
|
+
import { SettingsPanel as P } from "./settingsPanel.js";
|
|
16
|
+
const E = new a().addBlock(i).withSettingsPanelRegistry(P).addControl(y).addControl(e).addControl(t.align).addControl(t.color).addControl(t.size).addControl(t.style).addControl(t.fontFamily).addControl(t.background).addControl(t.paddings).addControl(s).addControl(n.align).addControl(n.color).addControl(n.fontFamily).addControl(n.paddings).addControl(n.size).addControl(n.style).addControl(r.align).addControl(r.color).addControl(r.size).addControl(r.style).addControl(r.fontFamily).addControl(r.background).addControl(r.paddings).addControl(d.align).addControl(d.color).addControl(d.size).addControl(d.style).addControl(d.fontFamily).addControl(d.background).addControl(d.paddings).addControl(p).addControl(f).addControl(g).addControl(c).addControl(m).addControl(l.size).addControl(l.margins).addControl(C).addControl(o.align).addControl(o.border).addControl(o.borderRadius).addControl(o.color).addControl(o.fontFamily).addControl(o.margins).addControl(o.paddings).addControl(o.text).addControl(o.textSize).addControl(o.textStyleAndFontColor).addControl(o.fitToContent).addStyles(k).withIconsRegistry(u).build();
|
|
18
17
|
export {
|
|
19
|
-
|
|
18
|
+
E as default
|
|
20
19
|
};
|
|
@@ -33,7 +33,7 @@ const t = `{-{-TEMPLATE_FIRST_LINE-}-}
|
|
|
33
33
|
</td>
|
|
34
34
|
</tr>
|
|
35
35
|
<tr>
|
|
36
|
-
<td width="100%"
|
|
36
|
+
<td width="100%">
|
|
37
37
|
<table width="100%">
|
|
38
38
|
<tbody>
|
|
39
39
|
{-{-PRODUCT_QUANTITY-}-}
|
|
@@ -42,7 +42,7 @@ const t = `{-{-TEMPLATE_FIRST_LINE-}-}
|
|
|
42
42
|
</td>
|
|
43
43
|
</tr>
|
|
44
44
|
<tr>
|
|
45
|
-
<td width="100%"
|
|
45
|
+
<td width="100%">
|
|
46
46
|
<table width="100%">
|
|
47
47
|
<tbody>
|
|
48
48
|
{-{-PRODUCT_BUTTON-}-}
|
|
@@ -10,8 +10,8 @@ const t = `{-{-TEMPLATE_FIRST_LINE-}-}
|
|
|
10
10
|
<td class="product-image-class" data-slot-1>
|
|
11
11
|
{-{-PRODUCT_IMAGE-}-}
|
|
12
12
|
</td>
|
|
13
|
-
<td class="product-name-class" data-slot-2>
|
|
14
|
-
<table>
|
|
13
|
+
<td class="product-name-class" data-slot-2 width="130px">
|
|
14
|
+
<table width="130">
|
|
15
15
|
<tbody>
|
|
16
16
|
{-{-PRODUCT_NAME-}-}
|
|
17
17
|
</tbody>
|
|
@@ -24,33 +24,21 @@ const t = `{-{-TEMPLATE_FIRST_LINE-}-}
|
|
|
24
24
|
</tbody>
|
|
25
25
|
</table>
|
|
26
26
|
</td>
|
|
27
|
-
<td class="product-price-class
|
|
27
|
+
<td class="product-price-class" data-slot-4>
|
|
28
|
+
|
|
28
29
|
<table width="100%">
|
|
29
30
|
<tbody>
|
|
30
31
|
{-{-PRODUCT_PRICE-}-}
|
|
31
32
|
</tbody>
|
|
32
33
|
</table>
|
|
33
34
|
</td>
|
|
34
|
-
<td class="product-original-price-class
|
|
35
|
+
<td class="product-original-price-class" data-slot-5>
|
|
35
36
|
<table width="100%">
|
|
36
37
|
<tbody>
|
|
37
38
|
{-{-PRODUCT_ORIGINAL_PRICE-}-}
|
|
38
39
|
</tbody>
|
|
39
40
|
</table>
|
|
40
41
|
</td>
|
|
41
|
-
<td class="product-price-container vertical-price" data-slot-4 style="display: none;">
|
|
42
|
-
<table class="product-price-class" width="100%" data-slot-4>
|
|
43
|
-
<tbody>
|
|
44
|
-
{-{-PRODUCT_PRICE-}-}
|
|
45
|
-
</tbody>
|
|
46
|
-
</table>
|
|
47
|
-
<table class="product-original-price-class product-original-price-container"
|
|
48
|
-
width="100%" data-slot-5>
|
|
49
|
-
<tbody>
|
|
50
|
-
{-{-PRODUCT_ORIGINAL_PRICE-}-}
|
|
51
|
-
</tbody>
|
|
52
|
-
</table>
|
|
53
|
-
</td>
|
|
54
42
|
<td class="product-button-class" data-slot-6>
|
|
55
43
|
<table width="100%">
|
|
56
44
|
<tbody>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { SettingsPanelRegistry as O, SettingsPanelTab as T, SettingsTab as
|
|
2
|
-
import { BLOCK_ID as
|
|
3
|
-
import { COMPOSITION_CONTROL_BLOCK_ID as
|
|
1
|
+
import { SettingsPanelRegistry as O, SettingsPanelTab as T, SettingsTab as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
2
|
+
import { BLOCK_ID as S } from "./block.js";
|
|
3
|
+
import { COMPOSITION_CONTROL_BLOCK_ID as R } from "./controls/cardComposition.js";
|
|
4
4
|
import { CONTROL_BLOCK_ID as A } from "./controls/settingsControl.js";
|
|
5
5
|
import { ItemsBlockId as E, ItemsBlockControlId as I } from "./enums/controlEnums.js";
|
|
6
6
|
class U extends O {
|
|
7
|
-
registerBlockControls(
|
|
8
|
-
|
|
7
|
+
registerBlockControls(N) {
|
|
8
|
+
N[S] = [
|
|
9
9
|
new T(
|
|
10
|
-
|
|
10
|
+
_.SETTINGS,
|
|
11
11
|
[
|
|
12
12
|
A
|
|
13
13
|
]
|
|
@@ -15,12 +15,12 @@ class U extends O {
|
|
|
15
15
|
new T(
|
|
16
16
|
"Card Composition",
|
|
17
17
|
[
|
|
18
|
-
|
|
18
|
+
R
|
|
19
19
|
]
|
|
20
20
|
).withLabel("Card Composition")
|
|
21
|
-
],
|
|
21
|
+
], N[E.ORIGINAL_PRICE] = [
|
|
22
22
|
new T(
|
|
23
|
-
|
|
23
|
+
_.SETTINGS,
|
|
24
24
|
[
|
|
25
25
|
I.ORIGINAL_PRICE_STYLE,
|
|
26
26
|
I.ORIGINAL_PRICE_ALIGN,
|
|
@@ -28,16 +28,16 @@ class U extends O {
|
|
|
28
28
|
]
|
|
29
29
|
),
|
|
30
30
|
new T(
|
|
31
|
-
|
|
31
|
+
_.STYLES,
|
|
32
32
|
[
|
|
33
33
|
I.ORIGINAL_PRICE_COLOR,
|
|
34
34
|
I.ORIGINAL_PRICE_FONT_FAMILY,
|
|
35
35
|
I.ORIGINAL_PRICE_SIZE
|
|
36
36
|
]
|
|
37
37
|
)
|
|
38
|
-
],
|
|
38
|
+
], N[E.PRICE] = [
|
|
39
39
|
new T(
|
|
40
|
-
|
|
40
|
+
_.SETTINGS,
|
|
41
41
|
[
|
|
42
42
|
I.PRICE_STYLE,
|
|
43
43
|
I.PRICE_ALIGN,
|
|
@@ -45,21 +45,20 @@ class U extends O {
|
|
|
45
45
|
I.PRICE_FORMATTED_PRICE,
|
|
46
46
|
I.PRICE_CURRENCY_SYMBOL,
|
|
47
47
|
I.PRICE_CURRENCY_LOCATION,
|
|
48
|
-
I.PRICE_ORIENTATION,
|
|
49
48
|
I.PRICE_PADDINGS
|
|
50
49
|
]
|
|
51
50
|
),
|
|
52
51
|
new T(
|
|
53
|
-
|
|
52
|
+
_.STYLES,
|
|
54
53
|
[
|
|
55
54
|
I.PRICE_COLOR,
|
|
56
55
|
I.PRICE_FONT_FAMILY,
|
|
57
56
|
I.PRICE_SIZE
|
|
58
57
|
]
|
|
59
58
|
)
|
|
60
|
-
],
|
|
59
|
+
], N[E.NAME] = [
|
|
61
60
|
new T(
|
|
62
|
-
|
|
61
|
+
_.SETTINGS,
|
|
63
62
|
[
|
|
64
63
|
I.NAME_STYLE,
|
|
65
64
|
I.NAME_ALIGN,
|
|
@@ -68,23 +67,23 @@ class U extends O {
|
|
|
68
67
|
]
|
|
69
68
|
),
|
|
70
69
|
new T(
|
|
71
|
-
|
|
70
|
+
_.STYLES,
|
|
72
71
|
[
|
|
73
72
|
I.NAME_FONT_FAMILY,
|
|
74
73
|
I.NAME_SIZE,
|
|
75
74
|
I.NAME_COLOR
|
|
76
75
|
]
|
|
77
76
|
)
|
|
78
|
-
],
|
|
77
|
+
], N[E.QUANTITY] = [
|
|
79
78
|
new T(
|
|
80
|
-
|
|
79
|
+
_.SETTINGS,
|
|
81
80
|
[
|
|
82
81
|
I.QUANTITY_FONT_FAMILY,
|
|
83
82
|
I.QUANTITY_STYLE
|
|
84
83
|
]
|
|
85
84
|
),
|
|
86
85
|
new T(
|
|
87
|
-
|
|
86
|
+
_.STYLES,
|
|
88
87
|
[
|
|
89
88
|
I.QUANTITY_ALIGN,
|
|
90
89
|
I.QUANTITY_SIZE,
|
|
@@ -92,18 +91,18 @@ class U extends O {
|
|
|
92
91
|
I.QUANTITY_PADDINGS
|
|
93
92
|
]
|
|
94
93
|
)
|
|
95
|
-
],
|
|
94
|
+
], N[E.IMAGE] = [
|
|
96
95
|
new T(
|
|
97
|
-
|
|
96
|
+
_.SETTINGS,
|
|
98
97
|
[
|
|
99
98
|
I.IMAGE_LINK,
|
|
100
99
|
I.IMAGE_SIZE,
|
|
101
100
|
I.IMAGE_MARGINS
|
|
102
101
|
]
|
|
103
102
|
)
|
|
104
|
-
],
|
|
103
|
+
], N[E.BUTTON] = [
|
|
105
104
|
new T(
|
|
106
|
-
|
|
105
|
+
_.SETTINGS,
|
|
107
106
|
[
|
|
108
107
|
I.BUTTON_LINK,
|
|
109
108
|
I.BUTTON_TEXT,
|
|
@@ -113,7 +112,7 @@ class U extends O {
|
|
|
113
112
|
]
|
|
114
113
|
),
|
|
115
114
|
new T(
|
|
116
|
-
|
|
115
|
+
_.STYLES,
|
|
117
116
|
[
|
|
118
117
|
I.BUTTON_COLOR,
|
|
119
118
|
I.BUTTON_FONT_FAMILY,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineStore as
|
|
1
|
+
import { defineStore as s } from "pinia";
|
|
2
2
|
import { DefaultConfigValues as e } from "../enums/settingsEnums.js";
|
|
3
3
|
const n = (t) => t.replace(/Url\}/, "Image}"), o = (t) => t.replace(/Image\}/, "Url}"), i = () => {
|
|
4
4
|
const t = e.cartItemsSelectControlValue;
|
|
@@ -13,7 +13,6 @@ const n = (t) => t.replace(/Url\}/, "Image}"), o = (t) => t.replace(/Image\}/, "
|
|
|
13
13
|
currencySymbol: "USD",
|
|
14
14
|
currencyLocation: "0",
|
|
15
15
|
formattedPrice: !0,
|
|
16
|
-
priceOrientation: "horizontal",
|
|
17
16
|
templateData: {
|
|
18
17
|
imageSrc: "",
|
|
19
18
|
name: "",
|
|
@@ -23,7 +22,7 @@ const n = (t) => t.replace(/Url\}/, "Image}"), o = (t) => t.replace(/Image\}/, "
|
|
|
23
22
|
button: ""
|
|
24
23
|
}
|
|
25
24
|
};
|
|
26
|
-
},
|
|
25
|
+
}, a = s("guidoItemsBlock", {
|
|
27
26
|
state: () => i(),
|
|
28
27
|
actions: {
|
|
29
28
|
setItemsType(t) {
|
|
@@ -56,9 +55,6 @@ const n = (t) => t.replace(/Url\}/, "Image}"), o = (t) => t.replace(/Image\}/, "
|
|
|
56
55
|
setFormattedPrice(t) {
|
|
57
56
|
this.formattedPrice = t;
|
|
58
57
|
},
|
|
59
|
-
setPriceOrientation(t) {
|
|
60
|
-
this.priceOrientation = t;
|
|
61
|
-
},
|
|
62
58
|
setTemplateData(t) {
|
|
63
59
|
this.templateData = t;
|
|
64
60
|
},
|
|
@@ -71,5 +67,5 @@ const n = (t) => t.replace(/Url\}/, "Image}"), o = (t) => t.replace(/Image\}/, "
|
|
|
71
67
|
}
|
|
72
68
|
});
|
|
73
69
|
export {
|
|
74
|
-
|
|
70
|
+
a as useItemsBlockStore
|
|
75
71
|
};
|
|
@@ -142,10 +142,10 @@ const h = (a, t) => `
|
|
|
142
142
|
return a.replace(
|
|
143
143
|
/<td([^>]*class="[^"]*ins-product-td[^"]*"[^>]*)>/,
|
|
144
144
|
`<td$1 ${$}>`
|
|
145
|
-
).replace("{-{-TEMPLATE_FIRST_LINE-}-}", N).replace("{-{-PRODUCT_IMAGE-}-}", h(t, o)).replace("{-{-PRODUCT_NAME-}-}", F(t)).
|
|
145
|
+
).replace("{-{-TEMPLATE_FIRST_LINE-}-}", N).replace("{-{-PRODUCT_IMAGE-}-}", h(t, o)).replace("{-{-PRODUCT_NAME-}-}", F(t)).replace(
|
|
146
146
|
"{-{-PRODUCT_PRICE-}-}",
|
|
147
147
|
S(t, o, c, n, r)
|
|
148
|
-
).
|
|
148
|
+
).replace(
|
|
149
149
|
"{-{-PRODUCT_ORIGINAL_PRICE-}-}",
|
|
150
150
|
L(
|
|
151
151
|
t,
|
|
@@ -1,76 +1,67 @@
|
|
|
1
|
-
import { useItemsBlockStore as
|
|
2
|
-
import { syncAttributeFromConfigBlock as
|
|
3
|
-
function
|
|
4
|
-
const o =
|
|
1
|
+
import { useItemsBlockStore as s } from "../store/items-block.js";
|
|
2
|
+
import { syncAttributeFromConfigBlock as e, createBooleanSyncConfig as i, createStringSyncConfig as r } from "./syncAttributeFromConfigBlock.js";
|
|
3
|
+
function C(t) {
|
|
4
|
+
const o = s(), n = i(
|
|
5
5
|
"PRODUCT_NAME_TRIMMING",
|
|
6
6
|
(c) => o.setNameTrimming(c),
|
|
7
7
|
!1
|
|
8
8
|
);
|
|
9
|
-
|
|
9
|
+
e(t, n);
|
|
10
10
|
}
|
|
11
11
|
function f(t) {
|
|
12
|
-
const o =
|
|
12
|
+
const o = s(), n = i(
|
|
13
13
|
"PRODUCT_PRICE_HIDE_DISCOUNT",
|
|
14
14
|
(c) => o.setHideDiscount(c),
|
|
15
15
|
!1
|
|
16
16
|
);
|
|
17
|
-
|
|
17
|
+
e(t, n);
|
|
18
18
|
}
|
|
19
19
|
function R(t) {
|
|
20
|
-
const o =
|
|
20
|
+
const o = s(), n = i(
|
|
21
21
|
"PRODUCT_PRICE_FORMATTED",
|
|
22
22
|
(c) => o.setFormattedPrice(c),
|
|
23
23
|
!0
|
|
24
24
|
);
|
|
25
|
-
|
|
25
|
+
e(t, n);
|
|
26
26
|
}
|
|
27
|
-
function
|
|
28
|
-
const o =
|
|
27
|
+
function _(t) {
|
|
28
|
+
const o = s(), n = r(
|
|
29
29
|
"PRODUCT_PRICE_CURRENCY_SYMBOL",
|
|
30
30
|
(c) => o.setCurrencySymbol(c),
|
|
31
31
|
""
|
|
32
32
|
);
|
|
33
|
-
|
|
33
|
+
e(t, n);
|
|
34
34
|
}
|
|
35
|
-
function
|
|
36
|
-
const o =
|
|
35
|
+
function y(t) {
|
|
36
|
+
const o = s(), n = r(
|
|
37
37
|
"PRODUCT_PRICE_CURRENCY_LOCATION",
|
|
38
38
|
(c) => o.setCurrencyLocation(c),
|
|
39
39
|
"0"
|
|
40
40
|
);
|
|
41
|
-
|
|
41
|
+
e(t, n);
|
|
42
42
|
}
|
|
43
|
-
function
|
|
44
|
-
const o =
|
|
43
|
+
function T(t) {
|
|
44
|
+
const o = s(), n = r(
|
|
45
45
|
"PRODUCT_BUTTON_LINK",
|
|
46
46
|
(c) => o.setButtonLink(c),
|
|
47
47
|
""
|
|
48
48
|
);
|
|
49
|
-
|
|
49
|
+
e(t, n);
|
|
50
50
|
}
|
|
51
|
-
function
|
|
52
|
-
const o =
|
|
51
|
+
function g(t) {
|
|
52
|
+
const o = s(), n = r(
|
|
53
53
|
"PRODUCT_IMAGE_LINK",
|
|
54
54
|
(c) => o.setImageLink(c),
|
|
55
55
|
""
|
|
56
56
|
);
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
function y(t) {
|
|
60
|
-
const o = e(), n = s(
|
|
61
|
-
"PRODUCT_ORIGINAL_PRICE_CONTROL_ORIENTATION",
|
|
62
|
-
(c) => o.setPriceOrientation(c),
|
|
63
|
-
"horizontal"
|
|
64
|
-
);
|
|
65
|
-
r(t, n);
|
|
57
|
+
e(t, n);
|
|
66
58
|
}
|
|
67
59
|
export {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
60
|
+
T as syncButtonLinkFromAttributes,
|
|
61
|
+
y as syncCurrencyLocationFromAttributes,
|
|
62
|
+
_ as syncCurrencySymbolFromAttributes,
|
|
71
63
|
R as syncFormattedPriceFromAttributes,
|
|
72
64
|
f as syncHideDiscountFromAttributes,
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
y as syncPriceOrientationFromAttributes
|
|
65
|
+
g as syncImageLinkFromAttributes,
|
|
66
|
+
C as syncNameTrimmingFromAttributes
|
|
76
67
|
};
|
|
@@ -1,46 +1,44 @@
|
|
|
1
|
-
import { ModificationDescription as
|
|
1
|
+
import { ModificationDescription as D } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
2
2
|
import { configAttributes as t } from "../enums/productEnums.js";
|
|
3
|
-
import { DefaultConfigValues as
|
|
4
|
-
import { useItemsBlockStore as
|
|
5
|
-
import { getConfigBlock as
|
|
6
|
-
function
|
|
7
|
-
const
|
|
8
|
-
if (!
|
|
3
|
+
import { DefaultConfigValues as e } from "../enums/settingsEnums.js";
|
|
4
|
+
import { useItemsBlockStore as l } from "../store/items-block.js";
|
|
5
|
+
import { getConfigBlock as p } from "./configBlockUtils.js";
|
|
6
|
+
function b(n, c) {
|
|
7
|
+
const i = p(n);
|
|
8
|
+
if (!i)
|
|
9
9
|
return;
|
|
10
|
-
const
|
|
10
|
+
const C = l(), {
|
|
11
11
|
itemsType: r,
|
|
12
|
-
itemIds:
|
|
12
|
+
itemIds: E,
|
|
13
13
|
orientation: T,
|
|
14
14
|
nameTrimming: _,
|
|
15
|
-
hideDiscount:
|
|
16
|
-
formattedPrice:
|
|
17
|
-
currencySymbol:
|
|
18
|
-
currencyLocation:
|
|
19
|
-
priceOrientation: I,
|
|
15
|
+
hideDiscount: O,
|
|
16
|
+
formattedPrice: m,
|
|
17
|
+
currencySymbol: R,
|
|
18
|
+
currencyLocation: N,
|
|
20
19
|
buttonLink: a,
|
|
21
20
|
imageLink: f
|
|
22
|
-
} =
|
|
21
|
+
} = C, u = {
|
|
23
22
|
"data-source": r,
|
|
24
23
|
[t.TYPE]: r,
|
|
25
|
-
[t.ITEMS_INDEX_SELECT_CONTROL_VALUE]:
|
|
24
|
+
[t.ITEMS_INDEX_SELECT_CONTROL_VALUE]: E,
|
|
26
25
|
[t.ORIENTATION]: T,
|
|
27
26
|
[t.PRODUCT_NAME_TRIMMING]: _ ? "1" : "0",
|
|
28
|
-
[t.PRODUCT_PRICE_HIDE_DISCOUNT]:
|
|
29
|
-
[t.PRODUCT_PRICE_FORMATTED]:
|
|
30
|
-
[t.PRODUCT_PRICE_CURRENCY_SYMBOL]:
|
|
31
|
-
[t.PRODUCT_PRICE_CURRENCY_LOCATION]:
|
|
32
|
-
[t.PRODUCT_ORIGINAL_PRICE_CONTROL_ORIENTATION]: I || "horizontal",
|
|
27
|
+
[t.PRODUCT_PRICE_HIDE_DISCOUNT]: O ? "1" : "0",
|
|
28
|
+
[t.PRODUCT_PRICE_FORMATTED]: m ? "1" : "0",
|
|
29
|
+
[t.PRODUCT_PRICE_CURRENCY_SYMBOL]: R || "",
|
|
30
|
+
[t.PRODUCT_PRICE_CURRENCY_LOCATION]: N || "0",
|
|
33
31
|
[t.PRODUCT_BUTTON_LINK]: a || "",
|
|
34
32
|
[t.PRODUCT_IMAGE_LINK]: f || "",
|
|
35
|
-
[t.NAME_CONTROL_ENABLED]:
|
|
36
|
-
[t.QUANTITY_CONTROL_ENABLED]:
|
|
37
|
-
[t.PRICE_CONTROL_OPENED]:
|
|
33
|
+
[t.NAME_CONTROL_ENABLED]: e.productNameControlEnabled,
|
|
34
|
+
[t.QUANTITY_CONTROL_ENABLED]: e.productQuantityControlEnabled,
|
|
35
|
+
[t.PRICE_CONTROL_OPENED]: e.productPriceControlOpened
|
|
38
36
|
};
|
|
39
|
-
let o =
|
|
40
|
-
Object.entries(u).forEach(([
|
|
41
|
-
o = o.setAttribute(
|
|
42
|
-
}), o.apply(new
|
|
37
|
+
let o = c.getDocumentModifier().modifyHtml(i);
|
|
38
|
+
Object.entries(u).forEach(([I, s]) => {
|
|
39
|
+
o = o.setAttribute(I, s);
|
|
40
|
+
}), o.apply(new D("Update config block attributes from control"));
|
|
43
41
|
}
|
|
44
42
|
export {
|
|
45
|
-
|
|
43
|
+
b as updateConfigBlockAttributes
|
|
46
44
|
};
|
package/dist/guido.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-
|
|
1
|
+
.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-23c413c9],.guido-editor__container[data-v-23c413c9]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-23c413c9]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
|
|
@@ -44,7 +44,6 @@ export declare enum ItemsBlockControlId {
|
|
|
44
44
|
PRICE_FORMATTED_PRICE = "items-block-price-formatted-price-control",
|
|
45
45
|
PRICE_CURRENCY_SYMBOL = "items-block-price-currency-symbol-control",
|
|
46
46
|
PRICE_CURRENCY_LOCATION = "items-block-price-currency-location-control",
|
|
47
|
-
PRICE_ORIENTATION = "items-block-price-orientation-control",
|
|
48
47
|
NAME_ALIGN = "items-block-name-align-control",
|
|
49
48
|
NAME_COLOR = "items-block-name-color-control",
|
|
50
49
|
NAME_SIZE = "items-block-name-size-control",
|
|
@@ -8,7 +8,6 @@ export declare const configAttributes: {
|
|
|
8
8
|
PRODUCT_PRICE_FORMATTED: string;
|
|
9
9
|
PRODUCT_PRICE_CURRENCY_SYMBOL: string;
|
|
10
10
|
PRODUCT_PRICE_CURRENCY_LOCATION: string;
|
|
11
|
-
PRODUCT_ORIGINAL_PRICE_CONTROL_ORIENTATION: string;
|
|
12
11
|
PRODUCT_BUTTON_LINK: string;
|
|
13
12
|
PRODUCT_IMAGE_LINK: string;
|
|
14
13
|
PRODUCT_NAME_CONTROL_VALUE: string;
|
|
@@ -10,7 +10,6 @@ interface ItemsBlockState {
|
|
|
10
10
|
currencySymbol: string;
|
|
11
11
|
currencyLocation: string;
|
|
12
12
|
formattedPrice: boolean;
|
|
13
|
-
priceOrientation: 'vertical' | 'horizontal';
|
|
14
13
|
templateData: {
|
|
15
14
|
imageSrc: string;
|
|
16
15
|
name: string;
|
|
@@ -31,7 +30,6 @@ export declare const useItemsBlockStore: import("pinia").StoreDefinition<"guidoI
|
|
|
31
30
|
setCurrencySymbol(currencySymbol: string): void;
|
|
32
31
|
setCurrencyLocation(currencyLocation: string): void;
|
|
33
32
|
setFormattedPrice(formattedPrice: boolean): void;
|
|
34
|
-
setPriceOrientation(priceOrientation: "vertical" | "horizontal"): void;
|
|
35
33
|
setTemplateData(templateData: ItemsBlockState["templateData"]): void;
|
|
36
34
|
updateFromAttributes(attributes: {
|
|
37
35
|
itemsType?: string;
|
|
@@ -42,9 +42,3 @@ export declare function syncButtonLinkFromAttributes(currentNode: ImmutableHtmlN
|
|
|
42
42
|
* @param currentNode - The current node from the control (usually this.currentNode)
|
|
43
43
|
*/
|
|
44
44
|
export declare function syncImageLinkFromAttributes(currentNode: ImmutableHtmlNode | undefined): void;
|
|
45
|
-
/**
|
|
46
|
-
* Reads price orientation value from esd-config-block attribute and updates the store.
|
|
47
|
-
* This makes the price orientation value mutable by syncing it from the DOM.
|
|
48
|
-
* @param currentNode - The current node from the control (usually this.currentNode)
|
|
49
|
-
*/
|
|
50
|
-
export declare function syncPriceOrientationFromAttributes(currentNode: ImmutableHtmlNode | undefined): void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@useinsider/guido",
|
|
3
|
-
"version": "1.0.3-beta.
|
|
3
|
+
"version": "1.0.3-beta.2f9ae0f",
|
|
4
4
|
"description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
|
|
5
5
|
"main": "./dist/guido.umd.cjs",
|
|
6
6
|
"module": "./dist/library.js",
|
|
@@ -41,8 +41,6 @@
|
|
|
41
41
|
"vue": "2.7.14"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@commitlint/cli": "20.2.0",
|
|
45
|
-
"@commitlint/config-conventional": "20.2.0",
|
|
46
44
|
"@cspell/eslint-plugin": "8.17.5",
|
|
47
45
|
"@eslint/eslintrc": "3.3.0",
|
|
48
46
|
"@eslint/js": "8.57.1",
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
var I = Object.defineProperty;
|
|
2
|
-
var y = (n, o, t) => o in n ? I(n, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[o] = t;
|
|
3
|
-
var m = (n, o, t) => y(n, typeof o != "symbol" ? o + "" : o, t);
|
|
4
|
-
import { ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
-
import { CommonControl as E } from "../../../common-control.js";
|
|
6
|
-
import { ItemsBlockControlId as O } from "../../enums/controlEnums.js";
|
|
7
|
-
import { SETTINGS_ENUMS as N } from "../../enums/settingsEnums.js";
|
|
8
|
-
import { useItemsBlockStore as f } from "../../store/items-block.js";
|
|
9
|
-
import { syncPriceOrientationFromAttributes as T } from "../../utils/syncAttributesFromConfigBlock.js";
|
|
10
|
-
import { updateConfigBlockAttributes as P } from "../../utils/updateAttributes.js";
|
|
11
|
-
const _ = O.PRICE_ORIENTATION, p = {
|
|
12
|
-
PRICE_ORIENTATION: "priceOrientation"
|
|
13
|
-
}, C = [
|
|
14
|
-
{ icon: "vertical-orientation", value: "vertical" },
|
|
15
|
-
{ icon: "horizontal-orientation", value: "horizontal" }
|
|
16
|
-
];
|
|
17
|
-
class v extends E {
|
|
18
|
-
constructor() {
|
|
19
|
-
super(...arguments);
|
|
20
|
-
m(this, "store", f());
|
|
21
|
-
}
|
|
22
|
-
getId() {
|
|
23
|
-
return _;
|
|
24
|
-
}
|
|
25
|
-
getTemplate() {
|
|
26
|
-
return `
|
|
27
|
-
<div class="${O.PRICE_ORIENTATION}">
|
|
28
|
-
${this._getPriceOrientation()}
|
|
29
|
-
</div>
|
|
30
|
-
`;
|
|
31
|
-
}
|
|
32
|
-
onRender() {
|
|
33
|
-
this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation }), this.api.onValueChanged(p.PRICE_ORIENTATION, (t) => {
|
|
34
|
-
this._onPriceOrientationChange(t);
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
onTemplateNodeUpdated(t) {
|
|
38
|
-
super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
|
|
39
|
-
() => {
|
|
40
|
-
T(this.currentNode);
|
|
41
|
-
},
|
|
42
|
-
() => {
|
|
43
|
-
this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation });
|
|
44
|
-
}
|
|
45
|
-
);
|
|
46
|
-
}
|
|
47
|
-
_onPriceOrientationChange(t) {
|
|
48
|
-
if (console.debug("Price orientation changed to: ", t), this.store.setPriceOrientation(t), P(this.currentNode, this.api), !this.currentNode)
|
|
49
|
-
return;
|
|
50
|
-
const { orientation: i } = this.store, r = i === N.ORIENTATION.VERTICAL, e = t === "horizontal";
|
|
51
|
-
r ? this._updateVerticalLayout(e) : this._updateHorizontalLayout(e);
|
|
52
|
-
}
|
|
53
|
-
_updateHorizontalLayout(t) {
|
|
54
|
-
var c, l, d, a;
|
|
55
|
-
const i = ((l = (c = this.currentNode) == null ? void 0 : c.closest(".ins-product-td")) == null ? void 0 : l.querySelectorAll(".product-price-class")) || [], r = ((a = (d = this.currentNode) == null ? void 0 : d.closest(".ins-product-td")) == null ? void 0 : a.querySelectorAll(".product-original-price-class")) || [];
|
|
56
|
-
if (!i || !r)
|
|
57
|
-
return;
|
|
58
|
-
const e = t ? "50%" : "100%", s = this.api.getDocumentModifier();
|
|
59
|
-
i.forEach((u) => {
|
|
60
|
-
s.modifyHtml(u).setAttribute("width", e).setStyle("width", e);
|
|
61
|
-
}), r.forEach((u) => {
|
|
62
|
-
s.modifyHtml(u).setAttribute("width", e).setStyle("width", e);
|
|
63
|
-
}), s.apply(new h(`Updated original price element width to ${e}`));
|
|
64
|
-
}
|
|
65
|
-
_updateVerticalLayout(t) {
|
|
66
|
-
var s, c, l, d;
|
|
67
|
-
const i = ((c = (s = this.currentNode) == null ? void 0 : s.closest(".ins-product-td")) == null ? void 0 : c.querySelectorAll(".horizontal-price")) || [], r = (d = (l = this.currentNode) == null ? void 0 : l.closest(".ins-product-td")) == null ? void 0 : d.querySelector(".vertical-price");
|
|
68
|
-
if (!i || !r || i.length === 0)
|
|
69
|
-
return;
|
|
70
|
-
const e = this.api.getDocumentModifier();
|
|
71
|
-
t ? (i.forEach((a) => {
|
|
72
|
-
e.modifyHtml(a).setStyle("display", "table-cell");
|
|
73
|
-
}), e.modifyHtml(r).setStyle("display", "none").apply(new h("Hide vertical price element"))) : (i.forEach((a) => {
|
|
74
|
-
e.modifyHtml(a).setStyle("display", "none");
|
|
75
|
-
}), e.modifyHtml(r).setStyle("display", "table-cell").apply(new h("Show vertical price element")));
|
|
76
|
-
}
|
|
77
|
-
_getPriceOrientation() {
|
|
78
|
-
return `
|
|
79
|
-
${this._GuTwoColumns([
|
|
80
|
-
this._GuLabel({ text: "Price Orientation" }),
|
|
81
|
-
this._GuRadioButton({
|
|
82
|
-
name: p.PRICE_ORIENTATION,
|
|
83
|
-
buttons: C
|
|
84
|
-
})
|
|
85
|
-
])}
|
|
86
|
-
`;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
export {
|
|
90
|
-
_ as CONTROL_BLOCK_ID,
|
|
91
|
-
v as PriceOrientationControl
|
|
92
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
2
|
-
import { CommonControl } from '../../../common-control';
|
|
3
|
-
import { ItemsBlockControlId } from '../../enums/controlEnums';
|
|
4
|
-
export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.PRICE_ORIENTATION;
|
|
5
|
-
export declare class PriceOrientationControl extends CommonControl {
|
|
6
|
-
private store;
|
|
7
|
-
getId(): string;
|
|
8
|
-
getTemplate(): string;
|
|
9
|
-
onRender(): void;
|
|
10
|
-
onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
|
|
11
|
-
_onPriceOrientationChange(value: string): void;
|
|
12
|
-
private _updateHorizontalLayout;
|
|
13
|
-
private _updateVerticalLayout;
|
|
14
|
-
_getPriceOrientation(): string;
|
|
15
|
-
}
|