@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.
Files changed (45) hide show
  1. package/README.md +21 -133
  2. package/dist/@types/generic.d.ts +0 -4
  3. package/dist/components/Guido.vue.d.ts +1 -2
  4. package/dist/components/Guido.vue.js +8 -8
  5. package/dist/components/Guido.vue2.js +23 -26
  6. package/dist/components/organisms/header/LeftSlot.vue2.js +9 -7
  7. package/dist/components/organisms/header/MiddleSlot.vue.js +4 -4
  8. package/dist/components/organisms/header/MiddleSlot.vue2.js +14 -17
  9. package/dist/components/organisms/header/RightSlot.vue.js +1 -1
  10. package/dist/components/organisms/header/ViewOptions.vue.js +6 -6
  11. package/dist/composables/useActionsApi.d.ts +0 -2
  12. package/dist/composables/useActionsApi.js +36 -47
  13. package/dist/guido.css +1 -1
  14. package/dist/stores/editor.d.ts +0 -4
  15. package/dist/stores/editor.js +3 -7
  16. package/package.json +1 -1
  17. package/dist/components/organisms/design-preview/AmpErrorModal.vue.d.ts +0 -16
  18. package/dist/components/organisms/design-preview/AmpErrorModal.vue.js +0 -21
  19. package/dist/components/organisms/design-preview/AmpErrorModal.vue2.js +0 -30
  20. package/dist/components/organisms/design-preview/DesktopPreview.vue.d.ts +0 -16
  21. package/dist/components/organisms/design-preview/DesktopPreview.vue.js +0 -22
  22. package/dist/components/organisms/design-preview/DesktopPreview.vue2.js +0 -42
  23. package/dist/components/organisms/design-preview/EmailPreview.vue.d.ts +0 -16
  24. package/dist/components/organisms/design-preview/EmailPreview.vue.js +0 -17
  25. package/dist/components/organisms/design-preview/EmailPreview.vue2.js +0 -33
  26. package/dist/components/organisms/design-preview/EmailView.vue.d.ts +0 -18
  27. package/dist/components/organisms/design-preview/EmailView.vue.js +0 -19
  28. package/dist/components/organisms/design-preview/EmailView.vue2.js +0 -24
  29. package/dist/components/organisms/design-preview/InboxView.vue.d.ts +0 -17
  30. package/dist/components/organisms/design-preview/InboxView.vue.js +0 -19
  31. package/dist/components/organisms/design-preview/InboxView.vue2.js +0 -23
  32. package/dist/components/organisms/design-preview/MobilePreview.vue.d.ts +0 -17
  33. package/dist/components/organisms/design-preview/MobilePreview.vue.js +0 -17
  34. package/dist/components/organisms/design-preview/MobilePreview.vue2.js +0 -24
  35. package/dist/components/organisms/header/AmpToggle.vue.d.ts +0 -2
  36. package/dist/components/organisms/header/AmpToggle.vue.js +0 -17
  37. package/dist/components/organisms/header/AmpToggle.vue2.js +0 -48
  38. package/dist/composables/useDebounce.d.ts +0 -4
  39. package/dist/composables/useDebounce.js +0 -12
  40. package/dist/composables/useMobileGmailFit.d.ts +0 -5
  41. package/dist/composables/useMobileGmailFit.js +0 -69
  42. package/dist/enums/gmailMobilePreview.d.ts +0 -7
  43. package/dist/enums/gmailMobilePreview.js +0 -17
  44. package/dist/static/assets/inbox-mockup.svg.js +0 -4
  45. 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
- :template-id="templateId"
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
- templateId: 'template-123',
53
- userId: 'user-456',
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(detail) {
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.$refs.guidoEditor?.dynamicContent.insert({
89
- text: 'Display Text',
90
- value: 'actual-value',
91
- fallback: 'Fallback Text'
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.$refs.guidoEditor?.dynamicContent.close();
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
- | `templateId` | `string` | ✅ | - | Unique identifier for the email template |
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
@@ -9,7 +9,3 @@ export type DynamicContent = {
9
9
  text: string;
10
10
  fallback?: string;
11
11
  };
12
- export interface EmailData {
13
- senderName: string;
14
- subject: string;
15
- }
@@ -1,4 +1,4 @@
1
- import type { DynamicContent, GuidoConfig, EmailData } from '@@/Types/generic';
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 t from "../_virtual/_plugin-vue2_normalizer.js";
3
+ import i from "../_virtual/_plugin-vue2_normalizer.js";
4
4
  var s = function() {
5
- var i = this, r = i._self._c, e = i._self._setupProxy;
6
- return r("div", { staticClass: "guido-editor__wrapper" }, [r(e.HeaderWrapper), r(e.EmailPreview, { directives: [{ name: "show", rawName: "v-show", value: e.editorStore.isPreviewModeOpen, expression: "editorStore.isPreviewModeOpen" }], attrs: { "email-data": i.emailData, "is-visible": e.editorStore.isPreviewModeOpen } }), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.editorStore.isPreviewModeOpen, expression: "!editorStore.isPreviewModeOpen" }], staticClass: "guido-editor__container", attrs: { id: "guido-editor" } })], 1);
7
- }, a = [], d = /* @__PURE__ */ t(
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
- a,
10
+ _,
11
11
  !1,
12
12
  null,
13
- "7836f831"
13
+ "89bedf08"
14
14
  );
15
- const m = d.exports;
15
+ const f = a.exports;
16
16
  export {
17
- m as default
17
+ f as default
18
18
  };
@@ -1,13 +1,11 @@
1
- import { defineComponent as w, onMounted as E } from "vue";
2
- import { provideGuidoActions as S } from "../composables/useGuidoActions.js";
3
- import { usePartner as D } from "../composables/usePartner.js";
4
- import { useStripo as _ } from "../composables/useStripo.js";
5
- import { DefaultUsername as G, DefaultGuidoConfig as I } from "../enums/defaults.js";
6
- import P from "./organisms/design-preview/EmailPreview.vue.js";
7
- import k from "./organisms/header/HeaderWrapper.vue.js";
8
- import { useStripoApi as T } from "../services/stripoApi.js";
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 } = D(), {
22
+ const o = C, { getPartnerName: n, getProductType: a } = E(), {
26
23
  templateId: c,
27
- userId: r,
24
+ userId: s,
28
25
  guidoConfig: i,
29
- html: s = "",
26
+ html: r = "",
30
27
  css: l = "",
31
28
  partnerName: d = n(),
32
29
  productType: u = a(),
33
- username: m = G
30
+ username: m = _
34
31
  } = o;
35
32
  window.GuidoConfig = {
36
- ...I,
33
+ ...G,
37
34
  ...i
38
35
  };
39
- const { initPlugin: p } = _({ emailId: c, userId: r, username: m, partnerName: d, productType: u }), { getDefaultTemplate: f } = T(), h = N();
40
- S({
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 g = (e) => {
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 E(async () => {
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: s,
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 f()), await p(e);
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: g,
72
+ insert: f,
76
73
  close: y
77
74
  }
78
- }), { __sfc: !0, props: o, getPartnerName: n, getProductType: a, templateId: c, userId: r, guidoConfig: i, html: s, css: l, partnerName: d, productType: u, username: m, emit: t, initPlugin: p, getDefaultTemplate: f, editorStore: h, insertDynamicContent: g, closeDynamicContent: y, EmailPreview: P, HeaderWrapper: k };
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
- M as default
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 m } from "../../../stores/editor.js";
4
- import { InButtonV2 as n } from "@useinsider/design-system-vue";
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 c = /* @__PURE__ */ r({
6
+ const d = /* @__PURE__ */ r({
7
7
  __name: "LeftSlot",
8
- setup(f) {
9
- const o = m(), t = e();
10
- return { __sfc: !0, editorStore: o, handleBack: t, InButtonV2: n, RestoreButton: s };
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
- c as default
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 o = this, e = o._self._c, t = o._self._setupProxy;
5
- return t.editorStore.isVersionHistoryOpen ? e("div", { staticClass: "d-f" }, [e(t.VersionHistory), e(t.VersionHistoryViewOptions)], 1) : e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "disabled-status": t.isPreviewModeOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "disabled-status": t.isPreviewModeOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__code-button", "data-testid": "Code Editor", "left-icon": "line-code", styling: "ghost", "tooltip-text": "Code Editor", type: "secondary", "disabled-status": t.isPreviewModeOpen, "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button") } }), e(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.isPreviewModeOpen ? t.trans("newsletter.close-email-preview") : t.trans("newsletter.email-preview") }, on: { click: t.handlePreviewClick } }), e(t.ViewOptions, { staticClass: "ml-3" }), e(t.AmpToggle)], 1);
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 u = r.exports;
14
+ const p = r.exports;
15
15
  export {
16
- u as default
16
+ p as default
17
17
  };
@@ -1,25 +1,22 @@
1
- import { defineComponent as s, computed as n } from "vue";
2
- import { useTranslations as p } from "../../../composables/useTranslations.js";
3
- import { useEditorStore as m } from "../../../stores/editor.js";
4
- import { InButtonV2 as c } from "@useinsider/design-system-vue";
5
- import d from "./AmpToggle.vue.js";
6
- import f from "./version-history/VersionHistory.vue.js";
7
- import a from "./version-history/ViewOptions.vue.js";
8
- import l from "./ViewOptions.vue.js";
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(u) {
12
- const o = m(), t = p(), e = () => {
13
- o.isPreviewModeOpen = !o.isPreviewModeOpen;
14
- }, i = n(() => o.isPreviewModeOpen);
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: c, AmpToggle: d, VersionHistory: f, VersionHistoryViewOptions: a, ViewOptions: l };
17
+ }), InButtonV2: e, VersionHistory: m, VersionHistoryViewOptions: p, ViewOptions: f };
21
18
  }
22
19
  });
23
20
  export {
24
- T as default
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", "disabled-status": t.editorStore.isPreviewModeOpen, "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 || t.editorStore.isPreviewModeOpen }, on: { click: t.handleSave } })], 1);
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 i from "../../../_virtual/_plugin-vue2_normalizer.js";
4
- var s = function() {
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": "", disable: e.editorStore.isPreviewModeOpen, "segment-list": e.segmentList, selected: e.editorStore.editorVisualMode } });
7
- }, n = [], _ = /* @__PURE__ */ i(
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
- "f90d31ea"
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 w = () => {
2
- const a = (e = {}) => new Promise((t, s) => {
3
- const m = { ...{
4
- minimize: !0,
5
- utmEntity: {
6
- utmSource: "",
7
- utmMedium: "",
8
- utmCampaign: "",
9
- utmContent: "",
10
- utmTerm: "",
11
- customUtms: [
12
- {
13
- name1: "val1",
14
- name2: "val2"
15
- }
16
- ]
17
- },
18
- mergeTags: ["Tag1", "Tag2"],
19
- forseAmp: !1,
20
- resetDataSavedFlag: !1,
21
- disableLineHeightsReplace: !0
22
- }, ...e }, o = {
23
- callback: (i, n, l, r, c) => {
24
- i ? s(i) : t({
25
- html: n,
26
- ampHtml: l,
27
- ampErrors: r,
28
- displayConditions: c
29
- });
30
- },
31
- ...m
32
- };
33
- window.StripoEditorApi.actionsApi.compileEmail(o);
34
- });
35
- return { getCompiledEmail: a, activateCustomViewStyles: (e = !0) => {
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
- w as useActionsApi
37
+ g as useActionsApi
49
38
  };
package/dist/guido.css CHANGED
@@ -1 +1 @@
1
- [data-v-af6f2286] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-af6f2286],[data-v-af6f2286] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.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-f90d31ea] .guido__view-option-selection-desktop svg,[data-v-f90d31ea] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-f90d31ea] .in-segments-wrapper__button_selected,[data-v-f90d31ea] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.guido-editor__wrapper[data-v-7836f831],.guido-editor__container[data-v-7836f831]{width:100%;height:calc(100vh - 75px)}
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)}
@@ -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
  }, {}, {}>;
@@ -1,15 +1,11 @@
1
1
  import { defineStore as e } from "pinia";
2
- const r = e("editor", {
2
+ const t = e("editor", {
3
3
  state: () => ({
4
4
  isCodeEditorOpen: !1,
5
5
  isVersionHistoryOpen: !1,
6
- isPreviewModeOpen: !1,
7
- editorVisualMode: "desktop",
8
- emailFormat: "amp",
9
- ampHtml: null,
10
- ampErrors: null
6
+ editorVisualMode: "desktop"
11
7
  })
12
8
  });
13
9
  export {
14
- r as useEditorStore
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.e490934",
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
- };