@useinsider/guido 3.21.2-beta.cfc5be2 → 3.21.2-beta.eda5c2e
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/README.md +0 -1
- package/dist/@types/config/schemas.js +39 -41
- package/dist/components/Guido.vue.js +6 -6
- package/dist/components/Guido.vue2.js +79 -81
- package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue.js +5 -5
- package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue2.js +9 -9
- package/dist/composables/useBlocksConfig.js +24 -32
- package/dist/enums/academy.js +0 -1
- package/dist/guido.css +1 -1
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +92 -93
- package/dist/node_modules/valibot/dist/index.js +261 -297
- package/dist/src/@types/config/schemas.d.ts +0 -4
- package/dist/src/composables/useConfig.d.ts +0 -2
- package/dist/src/enums/academy.d.ts +0 -1
- package/dist/src/stores/config.d.ts +0 -166
- package/dist/src/stores/unsubscribe.d.ts +10 -0
- package/dist/stores/config.js +6 -13
- package/dist/stores/unsubscribe.js +28 -24
- package/dist/utils/pairProductVariables.js +14 -15
- package/package.json +1 -1
- package/dist/@types/display-condition.js +0 -25
- package/dist/components/organisms/display-conditions/CodeEditorField.vue.js +0 -20
- package/dist/components/organisms/display-conditions/CodeEditorField.vue2.js +0 -30
- package/dist/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue.js +0 -30
- package/dist/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue2.js +0 -71
- package/dist/components/organisms/display-conditions/DisplayConditionSelectDrawer.vue.js +0 -34
- package/dist/components/organisms/display-conditions/DisplayConditionSelectDrawer.vue2.js +0 -57
- package/dist/components/organisms/display-conditions/DisplayConditionsHost.vue.js +0 -17
- package/dist/components/organisms/display-conditions/DisplayConditionsHost.vue2.js +0 -22
- package/dist/composables/useDisplayConditions.js +0 -102
- package/dist/enums/display-condition.js +0 -12
- package/dist/extensions/DisplayConditions/bridge.js +0 -17
- package/dist/extensions/DisplayConditions/constants.js +0 -17
- package/dist/extensions/DisplayConditions/control.js +0 -178
- package/dist/extensions/DisplayConditions/display-conditions.css.js +0 -201
- package/dist/extensions/DisplayConditions/extension.js +0 -28
- package/dist/extensions/DisplayConditions/iconsRegistry.js +0 -20
- package/dist/extensions/DisplayConditions/library.js +0 -27
- package/dist/extensions/DisplayConditions/settingsPanel.js +0 -17
- package/dist/services/displayConditionApi.js +0 -39
- package/dist/src/@types/display-condition.d.ts +0 -59
- package/dist/src/components/organisms/display-conditions/CodeEditorField.vue.d.ts +0 -43
- package/dist/src/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue.d.ts +0 -2
- package/dist/src/components/organisms/display-conditions/DisplayConditionSelectDrawer.vue.d.ts +0 -2
- package/dist/src/components/organisms/display-conditions/DisplayConditionsHost.vue.d.ts +0 -2
- package/dist/src/composables/useDisplayConditions.d.ts +0 -16
- package/dist/src/enums/display-condition.d.ts +0 -15
- package/dist/src/extensions/DisplayConditions/bridge.d.ts +0 -6
- package/dist/src/extensions/DisplayConditions/constants.d.ts +0 -14
- package/dist/src/extensions/DisplayConditions/control.d.ts +0 -23
- package/dist/src/extensions/DisplayConditions/extension.d.ts +0 -2
- package/dist/src/extensions/DisplayConditions/iconsRegistry.d.ts +0 -4
- package/dist/src/extensions/DisplayConditions/library.d.ts +0 -8
- package/dist/src/extensions/DisplayConditions/settingsPanel.d.ts +0 -5
- package/dist/src/mock/api/display-conditions.d.ts +0 -2
- package/dist/src/services/displayConditionApi.d.ts +0 -8
- package/dist/src/stores/display-condition.d.ts +0 -81
- package/dist/src/utils/displayCondition.d.ts +0 -10
- package/dist/src/utils/protectTableText.d.ts +0 -2
- package/dist/stores/display-condition.js +0 -28
- package/dist/utils/displayCondition.js +0 -26
- package/dist/utils/protectTableText.js +0 -22
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
var O = Object.defineProperty;
|
|
2
|
-
var $ = (o, s, i) => s in o ? O(o, s, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[s] = i;
|
|
3
|
-
var u = (o, s, i) => $(o, typeof s != "symbol" ? s + "" : s, i);
|
|
4
|
-
import { CommonControl as S } from "../Blocks/common-control.js";
|
|
5
|
-
import { toAppliedCondition as w, parseSource as N } from "../../utils/displayCondition.js";
|
|
6
|
-
import { escapeHtml as f } from "../../utils/htmlEscape.js";
|
|
7
|
-
import { ModificationDescription as D, UIElementType as b, UEAttr as I } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
8
|
-
import { requestDisplayCondition as E } from "./bridge.js";
|
|
9
|
-
import { CONDITIONS_CONTROL_ID as x, APPLIED_DESCRIPTION as M, EMPTY_DESCRIPTION as T, MAX_COLLAPSED_LINES as v, CONDITION_ICONS as g } from "./constants.js";
|
|
10
|
-
const r = ".guido-display-conditions", L = { id: 0, name: "", description: "", beforeScript: "", afterScript: "" }, _ = (o) => `<${b.ICON} ${I.ICON.src}="${o}"></${b.ICON}>`, c = (o, s, i, t = !1) => `<button type="button" class="${s}" id="${o}"${t ? " hidden" : ""}>${i}</button>`;
|
|
11
|
-
class B extends S {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments);
|
|
14
|
-
u(this, "expanded", !1);
|
|
15
|
-
u(this, "listeners", []);
|
|
16
|
-
u(this, "resizeObserver", null);
|
|
17
|
-
u(this, "detachOutsideClick", null);
|
|
18
|
-
}
|
|
19
|
-
getId() {
|
|
20
|
-
return x;
|
|
21
|
-
}
|
|
22
|
-
getTemplate() {
|
|
23
|
-
return `
|
|
24
|
-
<div class="guido-display-conditions">
|
|
25
|
-
<div class="guido-display-conditions__header">
|
|
26
|
-
<p class="guido-display-conditions__title">${this.api.translate("Display Conditions")}</p>
|
|
27
|
-
<p class="guido-display-conditions__description" data-dc-description></p>
|
|
28
|
-
</div>
|
|
29
|
-
<div class="guido-display-conditions__empty" data-dc-empty>
|
|
30
|
-
${c(
|
|
31
|
-
"guido__btn-add-display-condition",
|
|
32
|
-
"guido-display-conditions__add",
|
|
33
|
-
`${_(g.PLUS)}<span>${this.api.translate("Add Display Condition")}</span>`
|
|
34
|
-
)}
|
|
35
|
-
<div class="guido-display-conditions__menu" data-dc-menu hidden>
|
|
36
|
-
${c(
|
|
37
|
-
"guido__btn-display-condition-create",
|
|
38
|
-
"guido-display-conditions__menu-item",
|
|
39
|
-
this.api.translate("Create New Condition")
|
|
40
|
-
)}
|
|
41
|
-
${c(
|
|
42
|
-
"guido__btn-display-condition-select",
|
|
43
|
-
"guido-display-conditions__menu-item",
|
|
44
|
-
this.api.translate("Select Saved Condition")
|
|
45
|
-
)}
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
<div class="guido-display-conditions__applied" data-dc-applied hidden>
|
|
49
|
-
<div class="guido-display-conditions__code-box">
|
|
50
|
-
<p class="guido-display-conditions__name" data-dc-name></p>
|
|
51
|
-
<div class="guido-display-conditions__sections" data-dc-sections>
|
|
52
|
-
<p class="guido-display-conditions__section-label">
|
|
53
|
-
${this.api.translate("Code Before Module")}
|
|
54
|
-
</p>
|
|
55
|
-
<pre class="guido-display-conditions__code" data-dc-before></pre>
|
|
56
|
-
<p class="guido-display-conditions__section-label" data-dc-after-label>
|
|
57
|
-
${this.api.translate("Code After Module")}
|
|
58
|
-
</p>
|
|
59
|
-
<pre class="guido-display-conditions__code" data-dc-after></pre>
|
|
60
|
-
</div>
|
|
61
|
-
${c(
|
|
62
|
-
"guido__btn-display-condition-toggle",
|
|
63
|
-
"guido-display-conditions__toggle",
|
|
64
|
-
`${_(g.CHEVRON)}<span data-dc-toggle-label></span>`,
|
|
65
|
-
!0
|
|
66
|
-
)}
|
|
67
|
-
</div>
|
|
68
|
-
<div class="guido-display-conditions__actions">
|
|
69
|
-
${c(
|
|
70
|
-
"guido__btn-edit-display-condition",
|
|
71
|
-
"guido-display-conditions__action guido-display-conditions__action--edit",
|
|
72
|
-
`${_(g.EDIT)}<span>${this.api.translate("Edit")}</span>`
|
|
73
|
-
)}
|
|
74
|
-
${c(
|
|
75
|
-
"guido__btn-remove-display-condition",
|
|
76
|
-
"guido-display-conditions__action guido-display-conditions__action--remove",
|
|
77
|
-
`${_(g.TRASH)}<span>${this.api.translate("Remove")}</span>`
|
|
78
|
-
)}
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
`;
|
|
83
|
-
}
|
|
84
|
-
onRender() {
|
|
85
|
-
this.teardown(), this.wire("#guido__btn-add-display-condition", () => this.toggleMenu()), this.wire("#guido__btn-display-condition-create", () => this.openDrawer("create")), this.wire("#guido__btn-display-condition-select", () => this.openDrawer("select")), this.wire("#guido__btn-edit-display-condition", () => this.openDrawer("edit")), this.wire("#guido__btn-remove-display-condition", () => this.applyCondition(null)), this.wire("#guido__btn-display-condition-toggle", () => {
|
|
86
|
-
this.expanded = !this.expanded, this.paint();
|
|
87
|
-
}), this.observeCodeSize(), this.paint();
|
|
88
|
-
}
|
|
89
|
-
onTemplateNodeUpdated(i) {
|
|
90
|
-
const t = i !== this.currentNode;
|
|
91
|
-
super.onTemplateNodeUpdated(i), t && (this.expanded = !1, this.toggleMenu(!1)), this.paint();
|
|
92
|
-
}
|
|
93
|
-
onDestroy() {
|
|
94
|
-
super.onDestroy(), this.teardown();
|
|
95
|
-
}
|
|
96
|
-
getCondition() {
|
|
97
|
-
var t;
|
|
98
|
-
const i = this.currentNode;
|
|
99
|
-
return w((t = i == null ? void 0 : i.getDisplayCondition) == null ? void 0 : t.call(i));
|
|
100
|
-
}
|
|
101
|
-
toggleMenu(i) {
|
|
102
|
-
var n, d, a;
|
|
103
|
-
const t = (n = this.getContainer()) == null ? void 0 : n.querySelector(`${r} [data-dc-menu]`);
|
|
104
|
-
if (!t)
|
|
105
|
-
return;
|
|
106
|
-
t.hidden = i === void 0 ? !t.hidden : !i, (d = this.detachOutsideClick) == null || d.call(this), t.hidden || this.listenOutsideClick();
|
|
107
|
-
const e = (a = this.getContainer()) == null ? void 0 : a.querySelector(`${r} #guido__btn-add-display-condition`);
|
|
108
|
-
t.style.width = !t.hidden && e ? `${e.getBoundingClientRect().width}px` : "";
|
|
109
|
-
}
|
|
110
|
-
listenOutsideClick() {
|
|
111
|
-
const i = this.getContainer(), t = (e) => {
|
|
112
|
-
e.composedPath().some((d) => d instanceof HTMLElement && d.matches(`${r} [data-dc-menu], ${r} #guido__btn-add-display-condition`)) || this.toggleMenu(!1);
|
|
113
|
-
};
|
|
114
|
-
i == null || i.addEventListener("pointerdown", t, !0), this.detachOutsideClick = () => {
|
|
115
|
-
i == null || i.removeEventListener("pointerdown", t, !0), this.detachOutsideClick = null;
|
|
116
|
-
};
|
|
117
|
-
}
|
|
118
|
-
openDrawer(i) {
|
|
119
|
-
this.toggleMenu(!1), E(
|
|
120
|
-
{ mode: i, current: i === "edit" ? this.getCondition() : null },
|
|
121
|
-
{ onApply: (t) => this.applyCondition(t) }
|
|
122
|
-
);
|
|
123
|
-
}
|
|
124
|
-
applyCondition(i) {
|
|
125
|
-
if (!this.currentNode)
|
|
126
|
-
return;
|
|
127
|
-
const t = this.api.getDocumentModifier().modifyHtml(this.currentNode);
|
|
128
|
-
i ? t.setDisplayCondition(i) : t.setDisplayCondition(L), t.apply(new D(
|
|
129
|
-
i ? `Set display condition ${i.name}` : "Remove display condition"
|
|
130
|
-
));
|
|
131
|
-
}
|
|
132
|
-
wire(i, t) {
|
|
133
|
-
var n;
|
|
134
|
-
const e = (n = this.getContainer()) == null ? void 0 : n.querySelector(`${r} ${i}`);
|
|
135
|
-
e && (e.addEventListener("click", t), this.listeners.push({ element: e, handler: t }));
|
|
136
|
-
}
|
|
137
|
-
teardown() {
|
|
138
|
-
var i, t;
|
|
139
|
-
this.listeners.forEach(({ element: e, handler: n }) => e.removeEventListener("click", n)), this.listeners = [], (i = this.resizeObserver) == null || i.disconnect(), this.resizeObserver = null, (t = this.detachOutsideClick) == null || t.call(this);
|
|
140
|
-
}
|
|
141
|
-
// Line counts depend on layout: the panel font loads late and the panel can be resized.
|
|
142
|
-
observeCodeSize() {
|
|
143
|
-
var t;
|
|
144
|
-
const i = (t = this.getContainer()) == null ? void 0 : t.querySelectorAll(`${r} .guido-display-conditions__code`);
|
|
145
|
-
!(i != null && i.length) || typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver(() => this.paint()), i.forEach((e) => {
|
|
146
|
-
var n;
|
|
147
|
-
return (n = this.resizeObserver) == null ? void 0 : n.observe(e);
|
|
148
|
-
}));
|
|
149
|
-
}
|
|
150
|
-
paint() {
|
|
151
|
-
var C;
|
|
152
|
-
const i = (C = this.getContainer()) == null ? void 0 : C.querySelector(r);
|
|
153
|
-
if (!i)
|
|
154
|
-
return;
|
|
155
|
-
const t = this.getCondition(), e = (h) => i.querySelector(h);
|
|
156
|
-
if (e("[data-dc-empty]").hidden = !!t, e("[data-dc-applied]").hidden = !t, e("[data-dc-description]").textContent = this.api.translate(t ? M : T), !t)
|
|
157
|
-
return;
|
|
158
|
-
e("[data-dc-name]").textContent = t.name, e("#guido__btn-edit-display-condition").hidden = N(t) !== "inline";
|
|
159
|
-
const n = e("[data-dc-sections]"), d = e("[data-dc-before]"), a = e("[data-dc-after]");
|
|
160
|
-
d.innerHTML = f(t.beforeScript), a.innerHTML = f(t.afterScript), a.hidden = !t.afterScript, e("[data-dc-after-label]").hidden = !t.afterScript, n.style.maxHeight = "";
|
|
161
|
-
const l = parseFloat(getComputedStyle(d).lineHeight) || 24, p = (h) => h.hidden ? 0 : Math.round(h.scrollHeight / l), y = p(d) + p(a) > v, m = e("#guido__btn-display-condition-toggle");
|
|
162
|
-
m.hidden = !y, m.classList.toggle("is-expanded", this.expanded), e("[data-dc-toggle-label]").textContent = this.api.translate(this.expanded ? "Show Less" : "Show More"), y && !this.expanded && (n.style.maxHeight = `${this.collapsedHeight(n, [d, a], l)}px`);
|
|
163
|
-
}
|
|
164
|
-
// Labels do not count toward the line limit, so the cut lands after the 10th rendered code line.
|
|
165
|
-
collapsedHeight(i, t, e) {
|
|
166
|
-
const { top: n } = i.getBoundingClientRect();
|
|
167
|
-
let d = v, a = 0;
|
|
168
|
-
return t.filter((l) => !l.hidden).forEach((l) => {
|
|
169
|
-
if (d <= 0)
|
|
170
|
-
return;
|
|
171
|
-
const p = Math.min(d, Math.round(l.scrollHeight / e));
|
|
172
|
-
a = l.getBoundingClientRect().top - n + p * e, d -= p;
|
|
173
|
-
}), a;
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
export {
|
|
177
|
-
B as DisplayConditionsControl
|
|
178
|
-
};
|
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
const n = `.guido-display-conditions {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
font-family: inherit;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.guido-display-conditions__header {
|
|
8
|
-
padding: 16px;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.guido-display-conditions__title {
|
|
12
|
-
margin: 0 0 8px;
|
|
13
|
-
color: var(--guido-color-gray-800);
|
|
14
|
-
font-size: 16px;
|
|
15
|
-
font-weight: 600;
|
|
16
|
-
line-height: 24px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.guido-display-conditions__description {
|
|
20
|
-
margin: 0;
|
|
21
|
-
color: var(--guido-color-gray-600);
|
|
22
|
-
font-size: 13px;
|
|
23
|
-
line-height: 16px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.guido-display-conditions__empty {
|
|
27
|
-
padding: 8px 16px 16px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.guido-display-conditions__add {
|
|
31
|
-
display: flex;
|
|
32
|
-
gap: 8px;
|
|
33
|
-
align-items: center;
|
|
34
|
-
justify-content: center;
|
|
35
|
-
width: 100%;
|
|
36
|
-
height: 40px;
|
|
37
|
-
padding: 0 16px;
|
|
38
|
-
border: none;
|
|
39
|
-
border-radius: 4px;
|
|
40
|
-
background: var(--guido-color-primary-100);
|
|
41
|
-
color: var(--guido-color-primary-500);
|
|
42
|
-
font: inherit;
|
|
43
|
-
font-size: 15px;
|
|
44
|
-
line-height: 24px;
|
|
45
|
-
cursor: pointer;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
/* Stripo draws registered icons at 100% of ue-icon-component (Figma: 20px glyph in a 24px box). */
|
|
49
|
-
.guido-display-conditions ue-icon-component {
|
|
50
|
-
display: inline-flex;
|
|
51
|
-
flex-shrink: 0;
|
|
52
|
-
align-items: center;
|
|
53
|
-
justify-content: center;
|
|
54
|
-
width: 24px;
|
|
55
|
-
height: 24px;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.guido-display-conditions ue-icon-component svg {
|
|
59
|
-
width: 20px;
|
|
60
|
-
height: 20px;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.guido-display-conditions__add:hover {
|
|
64
|
-
background: var(--guido-color-primary-200);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.guido-display-conditions__add:focus-visible,
|
|
68
|
-
.guido-display-conditions__action:focus-visible,
|
|
69
|
-
.guido-display-conditions__toggle:focus-visible {
|
|
70
|
-
outline: 2px solid var(--guido-color-primary-500);
|
|
71
|
-
outline-offset: 2px;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.guido-display-conditions__code-box {
|
|
75
|
-
display: flex;
|
|
76
|
-
flex-direction: column;
|
|
77
|
-
gap: 8px;
|
|
78
|
-
padding: 16px;
|
|
79
|
-
background: var(--guido-color-gray-0);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.guido-display-conditions__sections {
|
|
83
|
-
display: flex;
|
|
84
|
-
flex-direction: column;
|
|
85
|
-
gap: 8px;
|
|
86
|
-
overflow: hidden;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.guido-display-conditions__name,
|
|
90
|
-
.guido-display-conditions__section-label {
|
|
91
|
-
margin: 0;
|
|
92
|
-
color: var(--guido-color-gray-800);
|
|
93
|
-
font-size: 15px;
|
|
94
|
-
font-weight: 600;
|
|
95
|
-
line-height: 24px;
|
|
96
|
-
word-break: break-word;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.guido-display-conditions__code {
|
|
100
|
-
margin: 0;
|
|
101
|
-
color: #101727;
|
|
102
|
-
font-family: inherit;
|
|
103
|
-
font-size: 15px;
|
|
104
|
-
line-height: 24px;
|
|
105
|
-
white-space: pre-wrap;
|
|
106
|
-
word-break: break-word;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.guido-display-conditions__toggle {
|
|
110
|
-
display: inline-flex;
|
|
111
|
-
align-items: center;
|
|
112
|
-
align-self: flex-start;
|
|
113
|
-
padding: 8px 0;
|
|
114
|
-
border: none;
|
|
115
|
-
background: none;
|
|
116
|
-
color: var(--guido-color-primary-500);
|
|
117
|
-
font: inherit;
|
|
118
|
-
font-size: 15px;
|
|
119
|
-
line-height: 24px;
|
|
120
|
-
cursor: pointer;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.guido-display-conditions__toggle span {
|
|
124
|
-
padding: 0 8px;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.guido-display-conditions__toggle.is-expanded ue-icon-component {
|
|
128
|
-
transform: rotate(180deg);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.guido-display-conditions__actions {
|
|
132
|
-
display: flex;
|
|
133
|
-
gap: 16px;
|
|
134
|
-
align-items: center;
|
|
135
|
-
height: 48px;
|
|
136
|
-
padding: 0 8px;
|
|
137
|
-
background: var(--guido-color-white);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.guido-display-conditions__action {
|
|
141
|
-
display: inline-flex;
|
|
142
|
-
align-items: center;
|
|
143
|
-
padding: 8px;
|
|
144
|
-
border: none;
|
|
145
|
-
background: none;
|
|
146
|
-
font: inherit;
|
|
147
|
-
font-size: 15px;
|
|
148
|
-
line-height: 24px;
|
|
149
|
-
cursor: pointer;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.guido-display-conditions__action span {
|
|
153
|
-
padding: 0 8px;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.guido-display-conditions__action--edit {
|
|
157
|
-
color: var(--guido-color-primary-500);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.guido-display-conditions__action--remove {
|
|
161
|
-
color: var(--guido-color-danger-500);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.guido-display-conditions [hidden] {
|
|
165
|
-
display: none !important;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
/* No positioned ancestor inside Stripo's clipping scroller: the menu keeps its static spot but escapes the clip. */
|
|
169
|
-
.guido-display-conditions__menu {
|
|
170
|
-
position: absolute;
|
|
171
|
-
z-index: 2;
|
|
172
|
-
margin-top: 4px;
|
|
173
|
-
padding: 4px 0;
|
|
174
|
-
border-radius: 4px;
|
|
175
|
-
background-color: #FFFFFF;
|
|
176
|
-
box-shadow: 0 4px 16px rgba(34, 41, 56, 0.16);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.guido-display-conditions__menu-item {
|
|
180
|
-
display: block;
|
|
181
|
-
width: 100%;
|
|
182
|
-
padding: 8px 16px;
|
|
183
|
-
border: 0;
|
|
184
|
-
background: none;
|
|
185
|
-
color: var(--guido-color-neutral-800);
|
|
186
|
-
cursor: pointer;
|
|
187
|
-
font: inherit;
|
|
188
|
-
font-size: 14px;
|
|
189
|
-
line-height: 24px;
|
|
190
|
-
text-align: left;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
.guido-display-conditions__menu-item:hover,
|
|
194
|
-
.guido-display-conditions__menu-item:focus-visible {
|
|
195
|
-
background-color: var(--guido-color-neutral-100);
|
|
196
|
-
outline: none;
|
|
197
|
-
}
|
|
198
|
-
`;
|
|
199
|
-
export {
|
|
200
|
-
n as default
|
|
201
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { ExtensionBuilder as t } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
2
|
-
import { APPLIED_DESCRIPTION as o, EMPTY_DESCRIPTION as i } from "./constants.js";
|
|
3
|
-
import { DisplayConditionsControl as e } from "./control.js";
|
|
4
|
-
import n from "./display-conditions.css.js";
|
|
5
|
-
import { DisplayConditionsIconsRegistry as s } from "./iconsRegistry.js";
|
|
6
|
-
import { DisplayConditionsLibrary as d } from "./library.js";
|
|
7
|
-
import { DisplayConditionsSettingsPanel as r } from "./settingsPanel.js";
|
|
8
|
-
const S = new t().addControl(e).withIconsRegistry(s).withSettingsPanelRegistry(r).withExternalDisplayCondition(d).withStyles(n).withLocalization({
|
|
9
|
-
en: {
|
|
10
|
-
Conditions: "Conditions",
|
|
11
|
-
"Display Conditions": "Display Conditions",
|
|
12
|
-
"Add Display Condition": "Add Display Condition",
|
|
13
|
-
"Create New Condition": "Create New Condition",
|
|
14
|
-
"Select Saved Condition": "Select Saved Condition",
|
|
15
|
-
[i]: i,
|
|
16
|
-
[o]: o,
|
|
17
|
-
Edit: "Edit",
|
|
18
|
-
Remove: "Remove",
|
|
19
|
-
"Show More": "Show More",
|
|
20
|
-
"Show Less": "Show Less",
|
|
21
|
-
"Code Before Module": "Code Before Module",
|
|
22
|
-
"Code After Module": "Code After Module",
|
|
23
|
-
"Insider Display Conditions": "Insider Display Conditions"
|
|
24
|
-
}
|
|
25
|
-
}).build();
|
|
26
|
-
export {
|
|
27
|
-
S as default
|
|
28
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { IconsRegistry as n } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
2
|
-
import { CONDITION_ICONS as r } from "./constants.js";
|
|
3
|
-
const h = 'fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"', s = (t, o, e = 1.3) => `
|
|
4
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 ${t} ${t}">
|
|
5
|
-
<path d="${o}" ${h} stroke-width="${e}"/>
|
|
6
|
-
</svg>`;
|
|
7
|
-
class g extends n {
|
|
8
|
-
registerIconsSvg(o) {
|
|
9
|
-
o[r.PLUS] = s(20, "M10 4v12M4 10h12", 1.5), o[r.EDIT] = s(
|
|
10
|
-
20,
|
|
11
|
-
"M3.5 16.5h13M5 12.6 13.1 4.5a1.4 1.4 0 0 1 2 0l.4.4a1.4 1.4 0 0 1 0 2L7.4 15H5v-2.4Z"
|
|
12
|
-
), o[r.TRASH] = s(
|
|
13
|
-
20,
|
|
14
|
-
"M3.5 5.5h13M8 5.5V4h4v1.5M5 5.5l.8 11h8.4l.8-11M8.5 8.5v5M11.5 8.5v5"
|
|
15
|
-
), o[r.CHEVRON] = s(20, "m5 7.5 5 5 5-5", 1.5);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
export {
|
|
19
|
-
g as DisplayConditionsIconsRegistry
|
|
20
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { toAppliedCondition as s, parseSource as a } from "../../utils/displayCondition.js";
|
|
2
|
-
import { ExternalDisplayConditionsLibrary as l } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
3
|
-
import { requestDisplayCondition as p } from "./bridge.js";
|
|
4
|
-
class m extends l {
|
|
5
|
-
getCategoryName() {
|
|
6
|
-
return this.api.translate("Insider Display Conditions");
|
|
7
|
-
}
|
|
8
|
-
openExternalDisplayConditionsDialog(o, r, t) {
|
|
9
|
-
const e = s(o), n = a(e) === "inline";
|
|
10
|
-
p(
|
|
11
|
-
{ mode: n ? "edit" : "select", current: n ? e : null },
|
|
12
|
-
{
|
|
13
|
-
onApply: (i) => i ? r(i) : t(),
|
|
14
|
-
onCancel: t
|
|
15
|
-
}
|
|
16
|
-
);
|
|
17
|
-
}
|
|
18
|
-
getIsContextActionEnabled() {
|
|
19
|
-
return !0;
|
|
20
|
-
}
|
|
21
|
-
getContextActionIndex() {
|
|
22
|
-
return 1;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
export {
|
|
26
|
-
m as DisplayConditionsLibrary
|
|
27
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { SettingsPanelRegistry as a, SettingsTab as r, SettingsPanelTab as o } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
2
|
-
import { CONDITION_BLOCK_TYPES as I, BUILT_IN_CONDITION_CONTROLS as O, CONDITIONS_TAB_ID as T, CONDITIONS_CONTROL_ID as N } from "./constants.js";
|
|
3
|
-
class _ extends a {
|
|
4
|
-
// Stripo hands over the map pre-filled with its default tabs, so they are extended, not replaced.
|
|
5
|
-
registerBlockControls(e) {
|
|
6
|
-
I.forEach((i) => {
|
|
7
|
-
const n = e[i] ?? [];
|
|
8
|
-
n.filter((t) => t.getTabId() === String(r.SETTINGS)).forEach((t) => O.forEach((s) => t.deleteControl(s))), e[i] = [
|
|
9
|
-
...n,
|
|
10
|
-
new o(T, [N]).withLabel(this.api.translate("Conditions"))
|
|
11
|
-
];
|
|
12
|
-
});
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
export {
|
|
16
|
-
_ as DisplayConditionsSettingsPanel
|
|
17
|
-
};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { useHttp as p } from "../composables/useHttp.js";
|
|
2
|
-
import { SavedDisplayConditionSchema as y, DisplayConditionListResponseSchema as S } from "../@types/display-condition.js";
|
|
3
|
-
import { parse as r } from "../node_modules/valibot/dist/index.js";
|
|
4
|
-
const s = "/email-proxy/v1/display-conditions", u = 100, P = () => {
|
|
5
|
-
const { get: c, post: m, delete: l } = p(), i = async (t, e) => {
|
|
6
|
-
const o = new URLSearchParams({
|
|
7
|
-
page: String(e),
|
|
8
|
-
limit: String(u),
|
|
9
|
-
sortColumn: "id",
|
|
10
|
-
sortDirection: "desc",
|
|
11
|
-
"filter[syntax]": t
|
|
12
|
-
}), { data: n } = await c(`${s}?${o.toString()}`);
|
|
13
|
-
return r(S, n);
|
|
14
|
-
};
|
|
15
|
-
return { list: async (t) => {
|
|
16
|
-
const e = await i(t, 1), o = await Promise.all(Array.from(
|
|
17
|
-
{ length: Math.max(e.meta.lastPage - 1, 0) },
|
|
18
|
-
(a, d) => i(t, d + 2)
|
|
19
|
-
)), n = [e, ...o].flatMap((a) => a.data);
|
|
20
|
-
return [...new Map(n.map((a) => [a.id, a])).values()];
|
|
21
|
-
}, create: async (t, e) => {
|
|
22
|
-
const { data: o } = await m(s, {
|
|
23
|
-
name: t.name.trim(),
|
|
24
|
-
description: t.description.trim() || null,
|
|
25
|
-
syntax: e,
|
|
26
|
-
method: "codeOnly",
|
|
27
|
-
codeBefore: t.codeBefore,
|
|
28
|
-
codeAfter: t.codeAfter
|
|
29
|
-
});
|
|
30
|
-
return r(y, o.data);
|
|
31
|
-
}, remove: async (t) => {
|
|
32
|
-
await l(`${s}/${t}`);
|
|
33
|
-
} };
|
|
34
|
-
};
|
|
35
|
-
export {
|
|
36
|
-
u as DISPLAY_CONDITIONS_PAGE_LIMIT,
|
|
37
|
-
s as DISPLAY_CONDITIONS_URL,
|
|
38
|
-
P as useDisplayConditionApi
|
|
39
|
-
};
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import * as v from 'valibot';
|
|
2
|
-
export declare const DisplayConditionSyntaxSchema: v.PicklistSchema<["liquid", "pongo"], undefined>;
|
|
3
|
-
export declare const DisplayConditionMethodSchema: v.PicklistSchema<["codeOnly", "logicBuilder"], undefined>;
|
|
4
|
-
export declare const SavedDisplayConditionSchema: v.ObjectSchema<{
|
|
5
|
-
readonly id: v.NumberSchema<undefined>;
|
|
6
|
-
readonly name: v.StringSchema<undefined>;
|
|
7
|
-
readonly description: v.NullishSchema<v.StringSchema<undefined>, "">;
|
|
8
|
-
readonly syntax: v.PicklistSchema<["liquid", "pongo"], undefined>;
|
|
9
|
-
readonly method: v.PicklistSchema<["codeOnly", "logicBuilder"], undefined>;
|
|
10
|
-
readonly codeBefore: v.StringSchema<undefined>;
|
|
11
|
-
readonly codeAfter: v.NullishSchema<v.StringSchema<undefined>, "">;
|
|
12
|
-
readonly createdAt: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
|
|
13
|
-
}, undefined>;
|
|
14
|
-
export declare const DisplayConditionListResponseSchema: v.ObjectSchema<{
|
|
15
|
-
readonly data: v.ArraySchema<v.ObjectSchema<{
|
|
16
|
-
readonly id: v.NumberSchema<undefined>;
|
|
17
|
-
readonly name: v.StringSchema<undefined>;
|
|
18
|
-
readonly description: v.NullishSchema<v.StringSchema<undefined>, "">;
|
|
19
|
-
readonly syntax: v.PicklistSchema<["liquid", "pongo"], undefined>;
|
|
20
|
-
readonly method: v.PicklistSchema<["codeOnly", "logicBuilder"], undefined>;
|
|
21
|
-
readonly codeBefore: v.StringSchema<undefined>;
|
|
22
|
-
readonly codeAfter: v.NullishSchema<v.StringSchema<undefined>, "">;
|
|
23
|
-
readonly createdAt: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
|
|
24
|
-
}, undefined>, undefined>;
|
|
25
|
-
readonly meta: v.ObjectSchema<{
|
|
26
|
-
readonly totalCount: v.NumberSchema<undefined>;
|
|
27
|
-
readonly perPage: v.NumberSchema<undefined>;
|
|
28
|
-
readonly currentPage: v.NumberSchema<undefined>;
|
|
29
|
-
readonly lastPage: v.NumberSchema<undefined>;
|
|
30
|
-
}, undefined>;
|
|
31
|
-
}, undefined>;
|
|
32
|
-
export type DisplayConditionSyntax = v.InferOutput<typeof DisplayConditionSyntaxSchema>;
|
|
33
|
-
export type DisplayConditionMethod = v.InferOutput<typeof DisplayConditionMethodSchema>;
|
|
34
|
-
export type SavedDisplayCondition = v.InferOutput<typeof SavedDisplayConditionSchema>;
|
|
35
|
-
export type DisplayConditionListResponse = v.InferOutput<typeof DisplayConditionListResponseSchema>;
|
|
36
|
-
export interface DisplayConditionDraft {
|
|
37
|
-
name: string;
|
|
38
|
-
description: string;
|
|
39
|
-
codeBefore: string;
|
|
40
|
-
codeAfter: string;
|
|
41
|
-
}
|
|
42
|
-
export type DisplayConditionSource = 'inline' | 'saved';
|
|
43
|
-
/** Mirrors Stripo's `DisplayCondition`; kept local so Vue code does not import the Stripo package. */
|
|
44
|
-
export interface AppliedDisplayCondition {
|
|
45
|
-
id: number;
|
|
46
|
-
name: string;
|
|
47
|
-
description: string;
|
|
48
|
-
beforeScript: string;
|
|
49
|
-
afterScript: string;
|
|
50
|
-
extraData?: string;
|
|
51
|
-
}
|
|
52
|
-
export type DisplayConditionOpenMode = 'select' | 'create' | 'edit';
|
|
53
|
-
export interface DisplayConditionOpenDetail {
|
|
54
|
-
mode: DisplayConditionOpenMode;
|
|
55
|
-
current: AppliedDisplayCondition | null;
|
|
56
|
-
}
|
|
57
|
-
export interface DisplayConditionApplyDetail {
|
|
58
|
-
condition: AppliedDisplayCondition | null;
|
|
59
|
-
}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
type __VLS_Props = {
|
|
2
|
-
id: string;
|
|
3
|
-
label: string;
|
|
4
|
-
value: string;
|
|
5
|
-
placeholder?: string;
|
|
6
|
-
error?: string;
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
};
|
|
9
|
-
declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
|
|
10
|
-
placeholder: string;
|
|
11
|
-
error: string;
|
|
12
|
-
disabled: boolean;
|
|
13
|
-
}>, {
|
|
14
|
-
read: () => string;
|
|
15
|
-
}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
|
|
16
|
-
input: (value: string) => void;
|
|
17
|
-
}, string, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
|
|
18
|
-
placeholder: string;
|
|
19
|
-
error: string;
|
|
20
|
-
disabled: boolean;
|
|
21
|
-
}>>>, {
|
|
22
|
-
error: string;
|
|
23
|
-
placeholder: string;
|
|
24
|
-
disabled: boolean;
|
|
25
|
-
}>;
|
|
26
|
-
export default _default;
|
|
27
|
-
type __VLS_WithDefaults<P, D> = {
|
|
28
|
-
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
|
|
29
|
-
default: D[K];
|
|
30
|
-
}> : P[K];
|
|
31
|
-
};
|
|
32
|
-
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
33
|
-
type __VLS_TypePropsToOption<T> = {
|
|
34
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
35
|
-
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
36
|
-
} : {
|
|
37
|
-
type: import('vue').PropType<T[K]>;
|
|
38
|
-
required: true;
|
|
39
|
-
};
|
|
40
|
-
};
|
|
41
|
-
type __VLS_PrettifyLocal<T> = {
|
|
42
|
-
[K in keyof T]: T[K];
|
|
43
|
-
} & {};
|
package/dist/src/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue.d.ts
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
|
|
2
|
-
export default _default;
|
package/dist/src/components/organisms/display-conditions/DisplayConditionSelectDrawer.vue.d.ts
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
|
|
2
|
-
export default _default;
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
|
|
2
|
-
export default _default;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { DisplayConditionDraft, DisplayConditionOpenDetail, SavedDisplayCondition } from '@@/Types/display-condition';
|
|
2
|
-
export type DraftField = keyof DisplayConditionDraft;
|
|
3
|
-
export type DraftErrors = Partial<Record<DraftField, string>>;
|
|
4
|
-
export type CreateIntent = 'inline' | 'save';
|
|
5
|
-
export declare const useDisplayConditions: () => {
|
|
6
|
-
syntax: import("vue").ComputedRef<"liquid" | "pongo">;
|
|
7
|
-
handleOpen: (detail: DisplayConditionOpenDetail) => void;
|
|
8
|
-
cancel: () => void;
|
|
9
|
-
loadList: () => Promise<void>;
|
|
10
|
-
validate: (draft: DisplayConditionDraft) => DraftErrors;
|
|
11
|
-
notifyInvalid: () => void;
|
|
12
|
-
createInline: (draft: DisplayConditionDraft) => void;
|
|
13
|
-
createAndSave: (draft: DisplayConditionDraft) => Promise<DraftErrors | null>;
|
|
14
|
-
select: (row: SavedDisplayCondition) => void;
|
|
15
|
-
deleteSaved: (row: SavedDisplayCondition) => Promise<void>;
|
|
16
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare enum DisplayConditionEvent {
|
|
2
|
-
OPEN = "display-condition:open",
|
|
3
|
-
APPLY = "display-condition:apply",
|
|
4
|
-
CANCEL = "display-condition:cancel"
|
|
5
|
-
}
|
|
6
|
-
export declare enum DisplayConditionSourceType {
|
|
7
|
-
INLINE = "inline",
|
|
8
|
-
SAVED = "saved"
|
|
9
|
-
}
|
|
10
|
-
export declare const DISPLAY_CONDITION_LIMITS: {
|
|
11
|
-
readonly NAME_MIN: 2;
|
|
12
|
-
readonly NAME_MAX: 40;
|
|
13
|
-
readonly DESCRIPTION_MAX: 200;
|
|
14
|
-
readonly CODE_MAX: 65535;
|
|
15
|
-
};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { AppliedDisplayCondition, DisplayConditionOpenDetail } from '@@/Types/display-condition';
|
|
2
|
-
export interface ConditionRequestHandlers {
|
|
3
|
-
onApply: (condition: AppliedDisplayCondition | null) => void;
|
|
4
|
-
onCancel?: () => void;
|
|
5
|
-
}
|
|
6
|
-
export declare const requestDisplayCondition: (detail: DisplayConditionOpenDetail, handlers: ConditionRequestHandlers) => void;
|