@useinsider/guido 1.0.0-beta.e490934 → 1.0.0-beta.e760ea9
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 +21 -133
- package/dist/@types/generic.d.ts +0 -4
- package/dist/components/Guido.vue.d.ts +1 -2
- package/dist/components/Guido.vue.js +8 -8
- package/dist/components/Guido.vue2.js +23 -26
- package/dist/components/organisms/header/LeftSlot.vue2.js +9 -7
- package/dist/components/organisms/header/MiddleSlot.vue.js +4 -4
- package/dist/components/organisms/header/MiddleSlot.vue2.js +14 -17
- package/dist/components/organisms/header/RightSlot.vue.js +1 -1
- package/dist/components/organisms/header/ViewOptions.vue.js +6 -6
- package/dist/composables/useActionsApi.d.ts +0 -2
- package/dist/composables/useActionsApi.js +36 -47
- package/dist/guido.css +1 -1
- package/dist/stores/editor.d.ts +0 -4
- package/dist/stores/editor.js +3 -7
- package/package.json +1 -1
- package/dist/components/organisms/design-preview/AmpErrorModal.vue.d.ts +0 -16
- package/dist/components/organisms/design-preview/AmpErrorModal.vue.js +0 -21
- package/dist/components/organisms/design-preview/AmpErrorModal.vue2.js +0 -30
- package/dist/components/organisms/design-preview/DesktopPreview.vue.d.ts +0 -16
- package/dist/components/organisms/design-preview/DesktopPreview.vue.js +0 -22
- package/dist/components/organisms/design-preview/DesktopPreview.vue2.js +0 -42
- package/dist/components/organisms/design-preview/EmailPreview.vue.d.ts +0 -16
- package/dist/components/organisms/design-preview/EmailPreview.vue.js +0 -17
- package/dist/components/organisms/design-preview/EmailPreview.vue2.js +0 -33
- package/dist/components/organisms/design-preview/EmailView.vue.d.ts +0 -18
- package/dist/components/organisms/design-preview/EmailView.vue.js +0 -19
- package/dist/components/organisms/design-preview/EmailView.vue2.js +0 -24
- package/dist/components/organisms/design-preview/InboxView.vue.d.ts +0 -17
- package/dist/components/organisms/design-preview/InboxView.vue.js +0 -19
- package/dist/components/organisms/design-preview/InboxView.vue2.js +0 -23
- package/dist/components/organisms/design-preview/MobilePreview.vue.d.ts +0 -17
- package/dist/components/organisms/design-preview/MobilePreview.vue.js +0 -17
- package/dist/components/organisms/design-preview/MobilePreview.vue2.js +0 -24
- package/dist/components/organisms/header/AmpToggle.vue.d.ts +0 -2
- package/dist/components/organisms/header/AmpToggle.vue.js +0 -17
- package/dist/components/organisms/header/AmpToggle.vue2.js +0 -48
- package/dist/composables/useDebounce.d.ts +0 -4
- package/dist/composables/useDebounce.js +0 -12
- package/dist/composables/useMobileGmailFit.d.ts +0 -5
- package/dist/composables/useMobileGmailFit.js +0 -69
- package/dist/enums/gmailMobilePreview.d.ts +0 -7
- package/dist/enums/gmailMobilePreview.js +0 -17
- package/dist/static/assets/inbox-mockup.svg.js +0 -4
- package/dist/static/assets/phone-mockup.svg.js +0 -4
package/README.md
CHANGED
|
@@ -27,15 +27,10 @@ npm install @useinsider/guido
|
|
|
27
27
|
<div>
|
|
28
28
|
<Guido
|
|
29
29
|
ref="guidoEditor"
|
|
30
|
-
:
|
|
30
|
+
:email-id="emailId"
|
|
31
31
|
:user-id="userId"
|
|
32
32
|
:guido-config="guidoConfig"
|
|
33
|
-
:html="initialHtml"
|
|
34
|
-
:css="initialCss"
|
|
35
33
|
@dynamic-content:open="handleDynamicContentOpen"
|
|
36
|
-
@back="handleBack"
|
|
37
|
-
@save:start="handleSaveStart"
|
|
38
|
-
@save:complete="handleSaveComplete"
|
|
39
34
|
/>
|
|
40
35
|
</div>
|
|
41
36
|
</template>
|
|
@@ -49,55 +44,36 @@ export default {
|
|
|
49
44
|
},
|
|
50
45
|
data() {
|
|
51
46
|
return {
|
|
52
|
-
|
|
53
|
-
userId: '
|
|
54
|
-
initialHtml: '<p>Initial HTML content</p>',
|
|
55
|
-
initialCss: 'p { color: #333; }',
|
|
47
|
+
emailId: 'abc123',
|
|
48
|
+
userId: '12345',
|
|
56
49
|
guidoConfig: {
|
|
57
50
|
translationsPath: 'window.trans.en',
|
|
58
51
|
htmlCompilerRules: [],
|
|
59
52
|
ignoreDefaultHtmlCompilerRules: false,
|
|
60
|
-
}
|
|
53
|
+
}
|
|
61
54
|
dynamicContentModalVisible: false
|
|
62
55
|
};
|
|
63
56
|
},
|
|
64
57
|
|
|
65
58
|
methods: {
|
|
66
|
-
handleDynamicContentOpen(
|
|
67
|
-
console.log('Dynamic content requested:', detail);
|
|
59
|
+
handleDynamicContentOpen() {
|
|
68
60
|
this.dynamicContentModalVisible = true;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
handleBack() {
|
|
72
|
-
console.log('User clicked back button');
|
|
73
|
-
// Handle navigation back
|
|
74
|
-
},
|
|
75
|
-
|
|
76
|
-
handleSaveStart() {
|
|
77
|
-
console.log('Save process started');
|
|
78
|
-
// Show loading indicator
|
|
79
|
-
},
|
|
80
|
-
|
|
81
|
-
handleSaveComplete(template) {
|
|
82
|
-
console.log('Save completed:', template);
|
|
83
|
-
// Handle saved template data
|
|
84
|
-
},
|
|
85
|
-
|
|
61
|
+
}
|
|
86
62
|
// ⚠️ Your own Dynamic Content Modal should have this id: #guido-dynamic-content-modal
|
|
87
63
|
handleDynamicContentInsert() {
|
|
88
|
-
this.$
|
|
89
|
-
text: '
|
|
90
|
-
value: '
|
|
91
|
-
fallback: 'Fallback
|
|
64
|
+
this.$ref.guidoEditor?.dynamicContent.insert({
|
|
65
|
+
text: 'Text',
|
|
66
|
+
value: 'Value',
|
|
67
|
+
fallback: 'Fallback'
|
|
92
68
|
});
|
|
93
69
|
|
|
94
70
|
this.dynamicContentModalVisible = false;
|
|
95
71
|
},
|
|
96
|
-
|
|
97
72
|
// ⚠️ It's mandatory. There is no way to understand if user closes the modal without selection.
|
|
98
73
|
handleDynamicContentClose() {
|
|
99
|
-
this.$
|
|
74
|
+
this.$ref.guidoEditor?.dynamicContent.close();
|
|
100
75
|
}
|
|
76
|
+
|
|
101
77
|
}
|
|
102
78
|
};
|
|
103
79
|
</script>
|
|
@@ -109,23 +85,12 @@ export default {
|
|
|
109
85
|
|
|
110
86
|
| Prop | Type | Required | Default | Description |
|
|
111
87
|
|------|------|----------|---------|-------------|
|
|
112
|
-
| `
|
|
113
|
-
| `userId` | `string` | ✅ | - | Unique identifier for the user |
|
|
88
|
+
| `emailId` | `string` | ✅ | - | Unique identifier for the email draft |
|
|
89
|
+
| `userId` | `string` | ✅ | - | Unique identifier for the user draft |
|
|
90
|
+
| `username` | `string` | ⚪ | Guido User | User name |
|
|
91
|
+
| `partnerName` | `string` | ⚪ | Getting from URL host | Unique identifier for the partner draft |
|
|
92
|
+
| `productType` | `string` | ⚪ | Getting from URL path | Unique identifier for the product draft |
|
|
114
93
|
| `guidoConfig` | `GuidoConfig` | ✅ | - | Configuration object for the editor |
|
|
115
|
-
| `partnerName` | `string` | ⚪ | From URL host | Partner identifier |
|
|
116
|
-
| `productType` | `string` | ⚪ | From URL path | Product type identifier |
|
|
117
|
-
| `username` | `string` | ⚪ | `'Guido User'` | Display name for the user |
|
|
118
|
-
| `html` | `string` | ⚪ | `''` | Initial HTML content for the template |
|
|
119
|
-
| `css` | `string` | ⚪ | `''` | Initial CSS styles for the template |
|
|
120
|
-
|
|
121
|
-
### Guido Component Events
|
|
122
|
-
|
|
123
|
-
| Event | Payload | Description |
|
|
124
|
-
|-------|---------|-------------|
|
|
125
|
-
| `dynamic-content:open` | `DynamicContent \| null` | Fired when user requests to insert dynamic content |
|
|
126
|
-
| `back` | - | Fired when user clicks the back button |
|
|
127
|
-
| `save:start` | - | Fired when the save process begins |
|
|
128
|
-
| `save:complete` | `Omit<Template, 'forceRecreate'>` | Fired when template is successfully saved |
|
|
129
94
|
|
|
130
95
|
### Guido Exposed Methods
|
|
131
96
|
```typescript
|
|
@@ -412,87 +377,6 @@ src/
|
|
|
412
377
|
└── library.ts # Main export
|
|
413
378
|
```
|
|
414
379
|
|
|
415
|
-
## 🔌 Provide/Inject Utilities
|
|
416
|
-
|
|
417
|
-
Guido includes type-safe utilities for Vue's provide/inject system to facilitate dependency injection between components.
|
|
418
|
-
|
|
419
|
-
### useProvideInject
|
|
420
|
-
|
|
421
|
-
The `useProvideInject` composable provides two helper functions for type-safe dependency injection:
|
|
422
|
-
|
|
423
|
-
#### Basic Usage
|
|
424
|
-
|
|
425
|
-
```typescript
|
|
426
|
-
// Parent component
|
|
427
|
-
import { provideValue } from '@useinsider/guido';
|
|
428
|
-
import { InjectionKey } from 'vue';
|
|
429
|
-
|
|
430
|
-
// Define a typed injection key
|
|
431
|
-
const MyServiceKey: InjectionKey<MyService> = Symbol('MyService');
|
|
432
|
-
|
|
433
|
-
// Provide the value
|
|
434
|
-
const myService = new MyService();
|
|
435
|
-
provideValue(MyServiceKey, myService);
|
|
436
|
-
|
|
437
|
-
// Child component
|
|
438
|
-
import { useInjectedValue } from '@useinsider/guido';
|
|
439
|
-
|
|
440
|
-
// Inject the value with type safety
|
|
441
|
-
const myService = useInjectedValue(MyServiceKey);
|
|
442
|
-
```
|
|
443
|
-
|
|
444
|
-
#### With Default Value
|
|
445
|
-
|
|
446
|
-
```typescript
|
|
447
|
-
// Inject with a fallback value
|
|
448
|
-
const myService = useInjectedValue(MyServiceKey, new DefaultService());
|
|
449
|
-
```
|
|
450
|
-
|
|
451
|
-
#### Error Handling
|
|
452
|
-
|
|
453
|
-
The `useInjectedValue` function will throw a descriptive error if no provider is found and no default value is provided:
|
|
454
|
-
|
|
455
|
-
```typescript
|
|
456
|
-
// This will throw an error if no provider exists
|
|
457
|
-
try {
|
|
458
|
-
const myService = useInjectedValue(MyServiceKey);
|
|
459
|
-
} catch (error) {
|
|
460
|
-
console.error('No provider found for MyService');
|
|
461
|
-
}
|
|
462
|
-
```
|
|
463
|
-
|
|
464
|
-
### API Reference
|
|
465
|
-
|
|
466
|
-
#### `provideValue`
|
|
467
|
-
|
|
468
|
-
```typescript
|
|
469
|
-
provideValue<T>(key: InjectionKey<T>, value: T): void
|
|
470
|
-
```
|
|
471
|
-
|
|
472
|
-
Provides a value using Vue's provide system with type safety.
|
|
473
|
-
|
|
474
|
-
| Parameter | Type | Description |
|
|
475
|
-
|-----------|------|-------------|
|
|
476
|
-
| `key` | `InjectionKey<T>` | The typed injection key |
|
|
477
|
-
| `value` | `T` | The value to provide |
|
|
478
|
-
|
|
479
|
-
#### `useInjectedValue`
|
|
480
|
-
|
|
481
|
-
```typescript
|
|
482
|
-
useInjectedValue<T>(key: InjectionKey<T>, defaultValue?: T): T
|
|
483
|
-
```
|
|
484
|
-
|
|
485
|
-
Injects a value using Vue's inject system with type safety and error handling.
|
|
486
|
-
|
|
487
|
-
| Parameter | Type | Required | Description |
|
|
488
|
-
|-----------|------|----------|-------------|
|
|
489
|
-
| `key` | `InjectionKey<T>` | ✅ | The typed injection key |
|
|
490
|
-
| `defaultValue` | `T` | ⚪ | Optional fallback value |
|
|
491
|
-
|
|
492
|
-
**Returns:** `T` - The injected value
|
|
493
|
-
|
|
494
|
-
**Throws:** `Error` - When no provider is found and no default value is provided
|
|
495
|
-
|
|
496
380
|
## 🌐 i18n
|
|
497
381
|
Before running the project, it sends to request to inone.useinsider.com/translations and writes the JSON file into - [trans.json](src/mock/responses/trans.json).
|
|
498
382
|
It allows to use production or local translations on your code. 🚀
|
|
@@ -579,4 +463,8 @@ ISC License
|
|
|
579
463
|
- Master Version Generator should be fixed.
|
|
580
464
|
- Playwright integration
|
|
581
465
|
- Commitlint & Precommit Hooks integration
|
|
466
|
+
- We need to emit save event and we should return template config to it
|
|
467
|
+
- Default template should be same with production
|
|
468
|
+
- Open Guido with saved template
|
|
469
|
+
- Get User ID, Email and Unique Template ID as dynamic from props
|
|
582
470
|
- Get Pre-built display conditions from API
|
package/dist/@types/generic.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { DynamicContent, GuidoConfig
|
|
1
|
+
import type { DynamicContent, GuidoConfig } from '@@/Types/generic';
|
|
2
2
|
import type { Template } from '@@/Types/stripo';
|
|
3
3
|
type __VLS_Props = {
|
|
4
4
|
templateId: string;
|
|
@@ -9,7 +9,6 @@ type __VLS_Props = {
|
|
|
9
9
|
html?: string;
|
|
10
10
|
css?: string;
|
|
11
11
|
guidoConfig: GuidoConfig;
|
|
12
|
-
emailData?: EmailData;
|
|
13
12
|
};
|
|
14
13
|
declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
|
|
15
14
|
dynamicContent: {
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import o from "./Guido.vue2.js";
|
|
2
2
|
/* empty css */
|
|
3
|
-
import
|
|
3
|
+
import i from "../_virtual/_plugin-vue2_normalizer.js";
|
|
4
4
|
var s = function() {
|
|
5
|
-
var
|
|
6
|
-
return r("div", { staticClass: "guido-editor__wrapper" }, [r(
|
|
7
|
-
},
|
|
5
|
+
var e = this, r = e._self._c, t = e._self._setupProxy;
|
|
6
|
+
return r("div", { staticClass: "guido-editor__wrapper" }, [r(t.HeaderWrapper), r("div", { staticClass: "guido-editor__container", attrs: { id: "guido-editor" } })], 1);
|
|
7
|
+
}, _ = [], a = /* @__PURE__ */ i(
|
|
8
8
|
o,
|
|
9
9
|
s,
|
|
10
|
-
|
|
10
|
+
_,
|
|
11
11
|
!1,
|
|
12
12
|
null,
|
|
13
|
-
"
|
|
13
|
+
"89bedf08"
|
|
14
14
|
);
|
|
15
|
-
const
|
|
15
|
+
const f = a.exports;
|
|
16
16
|
export {
|
|
17
|
-
|
|
17
|
+
f as default
|
|
18
18
|
};
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { provideGuidoActions as
|
|
3
|
-
import { usePartner as
|
|
4
|
-
import { useStripo as
|
|
5
|
-
import { DefaultUsername as
|
|
6
|
-
import
|
|
7
|
-
import k from "
|
|
8
|
-
|
|
9
|
-
import { useEditorStore as N } from "../stores/editor.js";
|
|
10
|
-
const M = /* @__PURE__ */ w({
|
|
1
|
+
import { defineComponent as h, onMounted as w } from "vue";
|
|
2
|
+
import { provideGuidoActions as D } from "../composables/useGuidoActions.js";
|
|
3
|
+
import { usePartner as E } from "../composables/usePartner.js";
|
|
4
|
+
import { useStripo as S } from "../composables/useStripo.js";
|
|
5
|
+
import { DefaultUsername as _, DefaultGuidoConfig as G } from "../enums/defaults.js";
|
|
6
|
+
import I from "./organisms/header/HeaderWrapper.vue.js";
|
|
7
|
+
import { useStripoApi as k } from "../services/stripoApi.js";
|
|
8
|
+
const B = /* @__PURE__ */ h({
|
|
11
9
|
__name: "Guido",
|
|
12
10
|
props: {
|
|
13
11
|
templateId: null,
|
|
@@ -17,27 +15,26 @@ const M = /* @__PURE__ */ w({
|
|
|
17
15
|
username: null,
|
|
18
16
|
html: null,
|
|
19
17
|
css: null,
|
|
20
|
-
guidoConfig: null
|
|
21
|
-
emailData: null
|
|
18
|
+
guidoConfig: null
|
|
22
19
|
},
|
|
23
20
|
emits: ["dynamic-content:open", "back", "save:start", "save:complete"],
|
|
24
21
|
setup(C, { expose: b, emit: t }) {
|
|
25
|
-
const o = C, { getPartnerName: n, getProductType: a } =
|
|
22
|
+
const o = C, { getPartnerName: n, getProductType: a } = E(), {
|
|
26
23
|
templateId: c,
|
|
27
|
-
userId:
|
|
24
|
+
userId: s,
|
|
28
25
|
guidoConfig: i,
|
|
29
|
-
html:
|
|
26
|
+
html: r = "",
|
|
30
27
|
css: l = "",
|
|
31
28
|
partnerName: d = n(),
|
|
32
29
|
productType: u = a(),
|
|
33
|
-
username: m =
|
|
30
|
+
username: m = _
|
|
34
31
|
} = o;
|
|
35
32
|
window.GuidoConfig = {
|
|
36
|
-
...
|
|
33
|
+
...G,
|
|
37
34
|
...i
|
|
38
35
|
};
|
|
39
|
-
const { initPlugin: p } =
|
|
40
|
-
|
|
36
|
+
const { initPlugin: p } = S({ emailId: c, userId: s, username: m, partnerName: d, productType: u }), { getDefaultTemplate: g } = k();
|
|
37
|
+
D({
|
|
41
38
|
onBack: () => {
|
|
42
39
|
console.debug("guido:back"), t("back");
|
|
43
40
|
},
|
|
@@ -48,21 +45,21 @@ const M = /* @__PURE__ */ w({
|
|
|
48
45
|
console.debug("guido:save:complete", e), t("save:complete", e);
|
|
49
46
|
}
|
|
50
47
|
});
|
|
51
|
-
const
|
|
48
|
+
const f = (e) => {
|
|
52
49
|
console.debug("dynamic-content:close", e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
|
|
53
50
|
}, y = () => {
|
|
54
51
|
console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
|
|
55
52
|
};
|
|
56
|
-
return
|
|
53
|
+
return w(async () => {
|
|
57
54
|
console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
|
|
58
55
|
try {
|
|
59
56
|
let e = {
|
|
60
|
-
html:
|
|
57
|
+
html: r,
|
|
61
58
|
css: l,
|
|
62
59
|
forceRecreate: !0
|
|
63
60
|
// TODO: It should be false for old templates. We will communicate with Stripo
|
|
64
61
|
};
|
|
65
|
-
e.html || (e = await
|
|
62
|
+
e.html || (e = await g()), await p(e);
|
|
66
63
|
} catch (e) {
|
|
67
64
|
console.error("Failed to initialize Stripo editor:", e);
|
|
68
65
|
}
|
|
@@ -72,12 +69,12 @@ const M = /* @__PURE__ */ w({
|
|
|
72
69
|
});
|
|
73
70
|
}), b({
|
|
74
71
|
dynamicContent: {
|
|
75
|
-
insert:
|
|
72
|
+
insert: f,
|
|
76
73
|
close: y
|
|
77
74
|
}
|
|
78
|
-
}), { __sfc: !0, props: o, getPartnerName: n, getProductType: a, templateId: c, userId:
|
|
75
|
+
}), { __sfc: !0, props: o, getPartnerName: n, getProductType: a, templateId: c, userId: s, guidoConfig: i, html: r, css: l, partnerName: d, productType: u, username: m, emit: t, initPlugin: p, getDefaultTemplate: g, insertDynamicContent: f, closeDynamicContent: y, HeaderWrapper: I };
|
|
79
76
|
}
|
|
80
77
|
});
|
|
81
78
|
export {
|
|
82
|
-
|
|
79
|
+
B as default
|
|
83
80
|
};
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { defineComponent as r } from "vue";
|
|
2
2
|
import { useBack as e } from "../../../composables/useGuidoActions.js";
|
|
3
|
-
import { useEditorStore as
|
|
4
|
-
import { InButtonV2 as
|
|
3
|
+
import { useEditorStore as n } from "../../../stores/editor.js";
|
|
4
|
+
import { InButtonV2 as m } from "@useinsider/design-system-vue";
|
|
5
5
|
import s from "./version-history/RestoreButton.vue.js";
|
|
6
|
-
const
|
|
6
|
+
const d = /* @__PURE__ */ r({
|
|
7
7
|
__name: "LeftSlot",
|
|
8
|
-
setup(
|
|
9
|
-
const
|
|
10
|
-
return { __sfc: !0, editorStore:
|
|
8
|
+
setup(a) {
|
|
9
|
+
const t = n(), o = e();
|
|
10
|
+
return { __sfc: !0, editorStore: t, back: o, handleBack: () => {
|
|
11
|
+
o();
|
|
12
|
+
}, InButtonV2: m, RestoreButton: s };
|
|
11
13
|
}
|
|
12
14
|
});
|
|
13
15
|
export {
|
|
14
|
-
|
|
16
|
+
d as default
|
|
15
17
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import s from "./MiddleSlot.vue2.js";
|
|
2
2
|
import i from "../../../_virtual/_plugin-vue2_normalizer.js";
|
|
3
3
|
var n = function() {
|
|
4
|
-
var
|
|
5
|
-
return t.editorStore.isVersionHistoryOpen ?
|
|
4
|
+
var e = this, o = e._self._c, t = e._self._setupProxy;
|
|
5
|
+
return t.editorStore.isVersionHistoryOpen ? o("div", { staticClass: "d-f" }, [o(t.VersionHistory), o(t.VersionHistoryViewOptions)], 1) : o("div", { staticClass: "d-f" }, [o(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__code-button", "data-testid": "Code Editor", "left-icon": "line-code", styling: "ghost", "tooltip-text": "Code Editor", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button") } }), o(t.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__preview-button"), "tooltip-text": t.trans("newsletter.email-preview") } }), o(t.ViewOptions, { staticClass: "ml-3" })], 1);
|
|
6
6
|
}, l = [], r = /* @__PURE__ */ i(
|
|
7
7
|
s,
|
|
8
8
|
n,
|
|
@@ -11,7 +11,7 @@ var n = function() {
|
|
|
11
11
|
null,
|
|
12
12
|
null
|
|
13
13
|
);
|
|
14
|
-
const
|
|
14
|
+
const p = r.exports;
|
|
15
15
|
export {
|
|
16
|
-
|
|
16
|
+
p as default
|
|
17
17
|
};
|
|
@@ -1,25 +1,22 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { useTranslations as
|
|
3
|
-
import { useEditorStore as
|
|
4
|
-
import { InButtonV2 as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
const T = /* @__PURE__ */ s({
|
|
1
|
+
import { defineComponent as r } from "vue";
|
|
2
|
+
import { useTranslations as s } from "../../../composables/useTranslations.js";
|
|
3
|
+
import { useEditorStore as n } from "../../../stores/editor.js";
|
|
4
|
+
import { InButtonV2 as e } from "@useinsider/design-system-vue";
|
|
5
|
+
import m from "./version-history/VersionHistory.vue.js";
|
|
6
|
+
import p from "./version-history/ViewOptions.vue.js";
|
|
7
|
+
import f from "./ViewOptions.vue.js";
|
|
8
|
+
const y = /* @__PURE__ */ r({
|
|
10
9
|
__name: "MiddleSlot",
|
|
11
|
-
setup(
|
|
12
|
-
const o =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return { __sfc: !0, editorStore: o, trans: t, handlePreviewClick: e, isPreviewModeOpen: i, getTooltipOptions: (r) => ({
|
|
16
|
-
id: `${r}-tooltip`,
|
|
10
|
+
setup(a) {
|
|
11
|
+
const o = n(), t = s();
|
|
12
|
+
return { __sfc: !0, editorStore: o, trans: t, getTooltipOptions: (i) => ({
|
|
13
|
+
id: `${i}-tooltip`,
|
|
17
14
|
dynamicPosition: !1,
|
|
18
15
|
staticPosition: "bottom center",
|
|
19
16
|
iconStatus: !1
|
|
20
|
-
}), InButtonV2:
|
|
17
|
+
}), InButtonV2: e, VersionHistory: m, VersionHistoryViewOptions: p, ViewOptions: f };
|
|
21
18
|
}
|
|
22
19
|
});
|
|
23
20
|
export {
|
|
24
|
-
|
|
21
|
+
y as default
|
|
25
22
|
};
|
|
@@ -2,7 +2,7 @@ import o from "./RightSlot.vue2.js";
|
|
|
2
2
|
import i from "../../../_virtual/_plugin-vue2_normalizer.js";
|
|
3
3
|
var n = function() {
|
|
4
4
|
var s = this, e = s._self._c, t = s._self._setupProxy;
|
|
5
|
-
return e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "
|
|
5
|
+
return e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen }, on: { click: t.handleVersionHistory } }), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 }, on: { click: t.exportHtml } }), e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": t.editorStore.isVersionHistoryOpen }, on: { click: t.handleSave } })], 1);
|
|
6
6
|
}, r = [], a = /* @__PURE__ */ i(
|
|
7
7
|
o,
|
|
8
8
|
n,
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import r from "./ViewOptions.vue2.js";
|
|
2
2
|
/* empty css */
|
|
3
|
-
import
|
|
4
|
-
var
|
|
3
|
+
import s from "../../../_virtual/_plugin-vue2_normalizer.js";
|
|
4
|
+
var n = function() {
|
|
5
5
|
var t = this, o = t._self._c, e = t._self._setupProxy;
|
|
6
|
-
return o(e.InSegments, { attrs: { id: "guido__view-option-selection", "with-icon": "",
|
|
7
|
-
},
|
|
6
|
+
return o(e.InSegments, { attrs: { id: "guido__view-option-selection", "with-icon": "", "segment-list": e.segmentList, selected: e.editorStore.editorVisualMode } });
|
|
7
|
+
}, i = [], _ = /* @__PURE__ */ s(
|
|
8
8
|
r,
|
|
9
|
-
s,
|
|
10
9
|
n,
|
|
10
|
+
i,
|
|
11
11
|
!1,
|
|
12
12
|
null,
|
|
13
|
-
"
|
|
13
|
+
"0fff376c"
|
|
14
14
|
);
|
|
15
15
|
const l = _.exports;
|
|
16
16
|
export {
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import type { CompileEmailOptions } from '@@/Types/stripo';
|
|
2
1
|
import { GetCompiledEmailOptions, CompiledEmailResult } from '@@/Types/actions-api';
|
|
3
2
|
export declare const useActionsApi: () => {
|
|
4
3
|
getCompiledEmail: (options?: GetCompiledEmailOptions) => Promise<CompiledEmailResult>;
|
|
5
4
|
activateCustomViewStyles: (isActive?: boolean) => void;
|
|
6
|
-
getPreviewData: (options?: CompileEmailOptions) => Promise<CompiledEmailResult>;
|
|
7
5
|
};
|
|
@@ -1,49 +1,38 @@
|
|
|
1
|
-
const
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
window.StripoEditorApi.actionsApi.activateCustomViewStyles(e);
|
|
37
|
-
}, getPreviewData: async (e) => {
|
|
38
|
-
const t = await a({ minimize: !1, resetDataSavedFlag: !1, ...e });
|
|
39
|
-
return {
|
|
40
|
-
html: t.html,
|
|
41
|
-
ampHtml: t.ampHtml ?? "",
|
|
42
|
-
ampErrors: t.ampErrors ?? null,
|
|
43
|
-
displayConditions: t.displayConditions
|
|
44
|
-
};
|
|
45
|
-
} };
|
|
46
|
-
};
|
|
1
|
+
const g = () => ({ getCompiledEmail: (t = {}) => new Promise((i, a) => {
|
|
2
|
+
const s = { ...{
|
|
3
|
+
minimize: !0,
|
|
4
|
+
utmEntity: {
|
|
5
|
+
utmSource: "",
|
|
6
|
+
utmMedium: "",
|
|
7
|
+
utmCampaign: "",
|
|
8
|
+
utmContent: "",
|
|
9
|
+
utmTerm: "",
|
|
10
|
+
customUtms: [
|
|
11
|
+
{
|
|
12
|
+
name1: "val1",
|
|
13
|
+
name2: "val2"
|
|
14
|
+
}
|
|
15
|
+
]
|
|
16
|
+
},
|
|
17
|
+
mergeTags: ["Tag1", "Tag2"],
|
|
18
|
+
forseAmp: !1,
|
|
19
|
+
resetDataSavedFlag: !1,
|
|
20
|
+
disableLineHeightsReplace: !0
|
|
21
|
+
}, ...t }, o = {
|
|
22
|
+
callback: (e, m, l, n, c) => {
|
|
23
|
+
e ? a(e) : i({
|
|
24
|
+
html: m,
|
|
25
|
+
ampHtml: l,
|
|
26
|
+
ampErrors: n,
|
|
27
|
+
displayConditions: c
|
|
28
|
+
});
|
|
29
|
+
},
|
|
30
|
+
...s
|
|
31
|
+
};
|
|
32
|
+
window.StripoEditorApi.actionsApi.compileEmail(o);
|
|
33
|
+
}), activateCustomViewStyles: (t = !0) => {
|
|
34
|
+
window.StripoEditorApi.actionsApi.activateCustomViewStyles(t);
|
|
35
|
+
} });
|
|
47
36
|
export {
|
|
48
|
-
|
|
37
|
+
g as useActionsApi
|
|
49
38
|
};
|
package/dist/guido.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}[data-v-6a2bde67] .guido__verion-history-view-option-selection-desktop svg,[data-v-6a2bde67] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6a2bde67] .in-segments-wrapper__button_selected,[data-v-6a2bde67] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-0fff376c] .guido__view-option-selection-desktop svg,[data-v-0fff376c] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-0fff376c] .in-segments-wrapper__button_selected,[data-v-0fff376c] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.guido-editor__wrapper[data-v-89bedf08],.guido-editor__container[data-v-89bedf08]{width:100%;height:calc(100vh - 75px)}
|
package/dist/stores/editor.d.ts
CHANGED
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
export declare const useEditorStore: import("pinia").StoreDefinition<"editor", {
|
|
2
2
|
isCodeEditorOpen: boolean;
|
|
3
3
|
isVersionHistoryOpen: boolean;
|
|
4
|
-
isPreviewModeOpen: boolean;
|
|
5
4
|
editorVisualMode: string;
|
|
6
|
-
emailFormat: "html" | "amp";
|
|
7
|
-
ampHtml: string | null;
|
|
8
|
-
ampErrors: string[] | null;
|
|
9
5
|
}, {}, {}>;
|
package/dist/stores/editor.js
CHANGED
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
import { defineStore as e } from "pinia";
|
|
2
|
-
const
|
|
2
|
+
const t = e("editor", {
|
|
3
3
|
state: () => ({
|
|
4
4
|
isCodeEditorOpen: !1,
|
|
5
5
|
isVersionHistoryOpen: !1,
|
|
6
|
-
|
|
7
|
-
editorVisualMode: "desktop",
|
|
8
|
-
emailFormat: "amp",
|
|
9
|
-
ampHtml: null,
|
|
10
|
-
ampErrors: null
|
|
6
|
+
editorVisualMode: "desktop"
|
|
11
7
|
})
|
|
12
8
|
});
|
|
13
9
|
export {
|
|
14
|
-
|
|
10
|
+
t as useEditorStore
|
|
15
11
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@useinsider/guido",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.e760ea9",
|
|
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",
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
interface Props {
|
|
2
|
-
errors: string[];
|
|
3
|
-
}
|
|
4
|
-
declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
|
|
5
|
-
close: () => void;
|
|
6
|
-
}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}>;
|
|
7
|
-
export default _default;
|
|
8
|
-
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
9
|
-
type __VLS_TypePropsToOption<T> = {
|
|
10
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
11
|
-
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
12
|
-
} : {
|
|
13
|
-
type: import('vue').PropType<T[K]>;
|
|
14
|
-
required: true;
|
|
15
|
-
};
|
|
16
|
-
};
|