@useinsider/guido 1.0.0-beta.614e7ff → 1.0.0-beta.637a8ae

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 (70) hide show
  1. package/dist/@types/generic.d.ts +2 -1
  2. package/dist/components/Guido.vue.d.ts +1 -2
  3. package/dist/components/Guido.vue.js +8 -8
  4. package/dist/components/Guido.vue2.js +35 -37
  5. package/dist/components/organisms/{design-preview/DesktopPreview.vue.d.ts → email-preview/EmailPreviewContainer.vue.d.ts} +2 -3
  6. package/dist/components/organisms/email-preview/EmailPreviewContainer.vue.js +17 -0
  7. package/dist/components/organisms/email-preview/EmailPreviewContainer.vue2.js +32 -0
  8. package/dist/components/organisms/email-preview/amp/AmpErrorModal.vue.js +19 -0
  9. package/dist/components/organisms/email-preview/amp/AmpErrorModal.vue2.js +37 -0
  10. package/dist/components/organisms/email-preview/amp/AmpToggle.vue.js +17 -0
  11. package/dist/components/organisms/email-preview/amp/AmpToggle.vue2.js +57 -0
  12. package/dist/components/organisms/{design-preview/EmailPreview.vue.d.ts → email-preview/desktop-preview/DesktopPreview.vue.d.ts} +3 -3
  13. package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue.js +22 -0
  14. package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue2.js +39 -0
  15. package/dist/components/organisms/email-preview/desktop-preview/EmailHeaderInfo.vue.d.ts +15 -0
  16. package/dist/components/organisms/email-preview/desktop-preview/EmailHeaderInfo.vue.js +17 -0
  17. package/dist/components/organisms/email-preview/desktop-preview/EmailHeaderInfo.vue2.js +15 -0
  18. package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.d.ts +19 -0
  19. package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js +17 -0
  20. package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue2.js +17 -0
  21. package/dist/components/organisms/{design-preview → email-preview/mobile-preview}/InboxView.vue.d.ts +2 -2
  22. package/dist/components/organisms/{design-preview → email-preview/mobile-preview}/InboxView.vue.js +2 -2
  23. package/dist/components/organisms/email-preview/mobile-preview/InboxView.vue2.js +23 -0
  24. package/dist/components/organisms/{design-preview → email-preview/mobile-preview}/MobilePreview.vue.d.ts +3 -3
  25. package/dist/components/organisms/email-preview/mobile-preview/MobilePreview.vue.js +17 -0
  26. package/dist/components/organisms/email-preview/mobile-preview/MobilePreview.vue2.js +27 -0
  27. package/dist/components/organisms/{design-preview/EmailView.vue.d.ts → email-preview/mobile-preview/OpenedEmailView.vue.d.ts} +2 -3
  28. package/dist/components/organisms/{design-preview/EmailView.vue.js → email-preview/mobile-preview/OpenedEmailView.vue.js} +4 -4
  29. package/dist/components/organisms/email-preview/mobile-preview/OpenedEmailView.vue2.js +26 -0
  30. package/dist/components/organisms/header/MiddleSlot.vue.js +4 -4
  31. package/dist/components/organisms/header/MiddleSlot.vue2.js +15 -16
  32. package/dist/components/organisms/header/RightSlot.vue.js +1 -1
  33. package/dist/components/organisms/header/RightSlot.vue2.js +18 -17
  34. package/dist/components/organisms/header/ViewOptions.vue.js +5 -5
  35. package/dist/components/organisms/header/ViewOptions.vue2.js +10 -8
  36. package/dist/components/wrappers/BaseModal.vue.d.ts +76 -0
  37. package/dist/components/wrappers/BaseModal.vue.js +19 -0
  38. package/dist/components/wrappers/BaseModal.vue2.js +22 -0
  39. package/dist/composables/useActionsApi.js +15 -15
  40. package/dist/composables/useCodeEditorApi.d.ts +5 -0
  41. package/dist/composables/useCodeEditorApi.js +17 -0
  42. package/dist/composables/useEmailResponsiveFit.d.ts +5 -0
  43. package/dist/composables/useEmailResponsiveFit.js +72 -0
  44. package/dist/composables/usePreviewMode.d.ts +6 -0
  45. package/dist/composables/usePreviewMode.js +21 -0
  46. package/dist/enums/defaults.js +10 -6
  47. package/dist/guido.css +1 -1
  48. package/dist/stores/editor.d.ts +0 -3
  49. package/dist/stores/editor.js +3 -6
  50. package/dist/stores/preview.d.ts +56 -0
  51. package/dist/stores/preview.js +23 -0
  52. package/package.json +1 -1
  53. package/dist/components/organisms/design-preview/AmpErrorModal.vue.js +0 -21
  54. package/dist/components/organisms/design-preview/AmpErrorModal.vue2.js +0 -30
  55. package/dist/components/organisms/design-preview/DesktopPreview.vue.js +0 -22
  56. package/dist/components/organisms/design-preview/DesktopPreview.vue2.js +0 -43
  57. package/dist/components/organisms/design-preview/EmailPreview.vue.js +0 -17
  58. package/dist/components/organisms/design-preview/EmailPreview.vue2.js +0 -33
  59. package/dist/components/organisms/design-preview/EmailView.vue2.js +0 -24
  60. package/dist/components/organisms/design-preview/InboxView.vue2.js +0 -23
  61. package/dist/components/organisms/design-preview/MobilePreview.vue.js +0 -17
  62. package/dist/components/organisms/design-preview/MobilePreview.vue2.js +0 -24
  63. package/dist/components/organisms/header/AmpToggle.vue.js +0 -17
  64. package/dist/components/organisms/header/AmpToggle.vue2.js +0 -48
  65. package/dist/composables/useMobileGmailFit.d.ts +0 -5
  66. package/dist/composables/useMobileGmailFit.js +0 -69
  67. package/dist/enums/emailPreview.d.ts +0 -3
  68. package/dist/enums/emailPreview.js +0 -4
  69. /package/dist/components/organisms/{design-preview → email-preview/amp}/AmpErrorModal.vue.d.ts +0 -0
  70. /package/dist/components/organisms/{header → email-preview/amp}/AmpToggle.vue.d.ts +0 -0
@@ -0,0 +1,27 @@
1
+ import { defineComponent as i, ref as s, computed as o } from "vue";
2
+ import c from "../../../../static/assets/inbox-mockup.svg.js";
3
+ import u from "../../../../static/assets/phone-mockup.svg.js";
4
+ import f from "./InboxView.vue.js";
5
+ import v from "./OpenedEmailView.vue.js";
6
+ const d = /* @__PURE__ */ i({
7
+ __name: "MobilePreview",
8
+ props: {
9
+ html: null,
10
+ isAmp: { type: Boolean },
11
+ emailHeader: null
12
+ },
13
+ setup(t) {
14
+ const n = t, e = s(!1), m = o(() => n.html), p = o(() => ({
15
+ image: e.value ? c : u,
16
+ alt: e.value ? "Inbox mockup" : "Phone mockup"
17
+ })), r = () => {
18
+ e.value = !1;
19
+ }, l = () => {
20
+ e.value = !0;
21
+ }, a = o(() => e.value ? "88px" : "44px");
22
+ return { __sfc: !0, props: n, showInbox: e, html: m, mockup: p, openEmail: r, backToInbox: l, phoneScreenTopMargin: a, InboxView: f, OpenedEmailView: v };
23
+ }
24
+ });
25
+ export {
26
+ d as default
27
+ };
@@ -1,10 +1,9 @@
1
1
  interface Props {
2
- emailHtml: string;
3
- isAmp?: boolean;
2
+ html: string;
3
+ isAmp: boolean;
4
4
  }
5
5
  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, {
6
6
  "back-to-inbox": () => void;
7
- load: () => void;
8
7
  }, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}>;
9
8
  export default _default;
10
9
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -1,10 +1,10 @@
1
- import n from "./EmailView.vue2.js";
2
- import c from "../../../_virtual/_plugin-vue2_normalizer.js";
1
+ import n from "./OpenedEmailView.vue2.js";
2
+ import c from "../../../../_virtual/_plugin-vue2_normalizer.js";
3
3
  var e = function() {
4
4
  var a = this, s = a._self._c, t = a._self._setupProxy;
5
- return s("div", { staticClass: "w-1 h-1 b-c-4 d-f f-d-c" }, [s("div", { staticClass: "d-f j-c-s-b a-i-c p-2 h-6-s" }, [s("div", { staticClass: "d-f a-i-c cur-p", on: { click: function(r) {
5
+ return s("div", { staticClass: "w-1 h-1 b-c-4 d-f f-d-c" }, [s("div", { staticClass: "d-f j-c-s-b a-i-c p-2 h-6-s" }, [s("div", { staticClass: "d-f a-i-c cur-p", on: { click: function(l) {
6
6
  return a.$emit("back-to-inbox");
7
- } } }, [s(t.InIcons, { staticClass: "f-s-3 i-c-7", attrs: { name: "line-chevron-left" } }), s("span", { staticClass: "ml-2 f-s-1 f-w-400 l-h-1 t-c-7" }, [a._v(a._s(t.trans("newsletter.inbox")))])], 1), s("div", { staticClass: "d-f a-i-c" }, [s(t.InIcons, { staticClass: "i-c-52", attrs: { name: "line-chevron-down" } }), s(t.InIcons, { staticClass: "ml-1 i-c-52", attrs: { name: "line-chevron-up" } })], 1)]), s("iframe", { ref: "iframeRef", staticClass: "f-g-1 w-1 d-b b-c-4 bor-s-n", attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts", srcdoc: a.emailHtml }, on: { load: t.onLoad } })]);
7
+ } } }, [s(t.InIcons, { staticClass: "f-s-3 i-c-7", attrs: { name: "line-chevron-left" } }), s("span", { staticClass: "ml-2 f-s-1 f-w-400 l-h-1 t-c-7" }, [a._v(a._s(t.trans("newsletter.inbox")))])], 1), s("div", { staticClass: "d-f a-i-c" }, [s(t.InIcons, { staticClass: "i-c-52", attrs: { name: "line-chevron-down" } }), s(t.InIcons, { staticClass: "ml-1 i-c-52", attrs: { name: "line-chevron-up" } })], 1)]), s("iframe", { ref: "iframeRef", staticClass: "f-g-1 w-1 d-b b-c-4 bor-s-n", attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts", srcdoc: t.html }, on: { load: t.onLoad } })]);
8
8
  }, i = [], o = /* @__PURE__ */ c(
9
9
  n,
10
10
  e,
@@ -0,0 +1,26 @@
1
+ import { defineComponent as l, ref as u, computed as r } from "vue";
2
+ import { useEmailResponsiveFit as f } from "../../../../composables/useEmailResponsiveFit.js";
3
+ import { useTranslations as d } from "../../../../composables/useTranslations.js";
4
+ import { InIcons as h } from "@useinsider/design-system-vue";
5
+ const g = /* @__PURE__ */ l({
6
+ __name: "OpenedEmailView",
7
+ props: {
8
+ html: null,
9
+ isAmp: { type: Boolean }
10
+ },
11
+ emits: ["back-to-inbox"],
12
+ setup(a) {
13
+ const t = a, c = d(), n = u(), { setupEmailResponsiveFit: s } = f(), p = r(() => t.html), m = r(() => !!t.isAmp && t.html.includes("@media") && t.html.includes(".adapt-img")), i = (o) => {
14
+ ["transform", "transform-origin", "height"].forEach((e) => {
15
+ o.documentElement.style.removeProperty(e);
16
+ });
17
+ };
18
+ return { __sfc: !0, props: t, trans: c, iframeRef: n, setupEmailResponsiveFit: s, html: p, isAMPResponsive: m, clearAMPTransforms: i, onLoad: () => {
19
+ const o = n.value, e = o == null ? void 0 : o.contentDocument;
20
+ e && (s(o), m.value && setTimeout(() => i(e), 50));
21
+ }, InIcons: h };
22
+ }
23
+ });
24
+ export {
25
+ g as default
26
+ };
@@ -2,16 +2,16 @@ import s from "./MiddleSlot.vue2.js";
2
2
  import i from "../../../_virtual/_plugin-vue2_normalizer.js";
3
3
  var n = function() {
4
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);
6
- }, l = [], r = /* @__PURE__ */ i(
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, "selected-status": t.isPreviewModeOpen, "tooltip-options": t.getTooltipOptions("guido__preview-button"), "tooltip-text": t.previewTooltipText }, on: { click: t.togglePreviewMode } }), e(t.ViewOptions, { staticClass: "ml-3" }), t.isPreviewModeOpen ? e(t.AmpToggle) : o._e()], 1);
6
+ }, d = [], l = /* @__PURE__ */ i(
7
7
  s,
8
8
  n,
9
- l,
9
+ d,
10
10
  !1,
11
11
  null,
12
12
  null
13
13
  );
14
- const u = r.exports;
14
+ const u = l.exports;
15
15
  export {
16
16
  u as default
17
17
  };
@@ -1,25 +1,24 @@
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";
1
+ import { defineComponent as n, computed as p } from "vue";
2
+ import { usePreviewMode as m } from "../../../composables/usePreviewMode.js";
3
+ import { useTranslations as l } from "../../../composables/useTranslations.js";
4
+ import a from "../email-preview/amp/AmpToggle.vue.js";
5
+ import { useEditorStore as f } from "../../../stores/editor.js";
4
6
  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({
7
+ import d from "./version-history/VersionHistory.vue.js";
8
+ import u from "./version-history/ViewOptions.vue.js";
9
+ import w from "./ViewOptions.vue.js";
10
+ const H = /* @__PURE__ */ n({
10
11
  __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`,
12
+ setup(_) {
13
+ const e = f(), o = l(), { isPreviewModeOpen: t, togglePreviewMode: i } = m(), r = p(() => o(t.value ? "newsletter.close-email-preview" : "newsletter.email-preview"));
14
+ return { __sfc: !0, editorStore: e, trans: o, isPreviewModeOpen: t, togglePreviewMode: i, previewTooltipText: r, getTooltipOptions: (s) => ({
15
+ id: `${s}-tooltip`,
17
16
  dynamicPosition: !1,
18
17
  staticPosition: "bottom center",
19
18
  iconStatus: !1
20
- }), InButtonV2: c, AmpToggle: d, VersionHistory: f, VersionHistoryViewOptions: a, ViewOptions: l };
19
+ }), AmpToggle: a, InButtonV2: c, VersionHistory: d, VersionHistoryViewOptions: u, ViewOptions: w };
21
20
  }
22
21
  });
23
22
  export {
24
- T as default
23
+ H as default
25
24
  };
@@ -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", "disabled-status": t.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.isPreviewModeOpen }, on: { click: t.handleSave } })], 1);
6
6
  }, r = [], a = /* @__PURE__ */ i(
7
7
  o,
8
8
  n,
@@ -1,24 +1,25 @@
1
- import { defineComponent as m } from "vue";
2
- import { useActionsApi as p } from "../../../composables/useActionsApi.js";
3
- import { useExport as c } from "../../../composables/useExport.js";
4
- import { useSaveStart as l, useSaveComplete as f } from "../../../composables/useGuidoActions.js";
5
- import { useVersionHistoryApi as u } from "../../../composables/useVersionHistoryApi.js";
6
- import { useEditorStore as d } from "../../../stores/editor.js";
7
- import { InButtonV2 as S } from "@useinsider/design-system-vue";
8
- const E = /* @__PURE__ */ m({
1
+ import { defineComponent as p } from "vue";
2
+ import { useActionsApi as c } from "../../../composables/useActionsApi.js";
3
+ import { useExport as l } from "../../../composables/useExport.js";
4
+ import { useSaveStart as f, useSaveComplete as d } from "../../../composables/useGuidoActions.js";
5
+ import { usePreviewMode as u } from "../../../composables/usePreviewMode.js";
6
+ import { useVersionHistoryApi as v } from "../../../composables/useVersionHistoryApi.js";
7
+ import { useEditorStore as S } from "../../../stores/editor.js";
8
+ import { InButtonV2 as h } from "@useinsider/design-system-vue";
9
+ const O = /* @__PURE__ */ p({
9
10
  __name: "RightSlot",
10
- setup(h) {
11
- const { exportHtml: a } = c(), { getCompiledEmail: t } = p(), e = l(), r = f(), { openVersionHistory: s, closeVersionHistory: n } = u(), i = d();
12
- return { __sfc: !0, exportHtml: a, getCompiledEmail: t, saveStart: e, saveComplete: r, openVersionHistory: s, closeVersionHistory: n, editorStore: i, handleVersionHistory: () => {
13
- if (i.isVersionHistoryOpen) {
14
- n();
11
+ setup(y) {
12
+ const { exportHtml: m } = l(), { getCompiledEmail: e } = c(), t = f(), r = d(), { openVersionHistory: s, closeVersionHistory: i } = v(), n = S(), { isPreviewModeOpen: a } = u();
13
+ return { __sfc: !0, exportHtml: m, getCompiledEmail: e, saveStart: t, saveComplete: r, openVersionHistory: s, closeVersionHistory: i, editorStore: n, isPreviewModeOpen: a, handleVersionHistory: () => {
14
+ if (n.isVersionHistoryOpen) {
15
+ i();
15
16
  return;
16
17
  }
17
18
  s();
18
19
  }, handleSave: async () => {
19
- e();
20
+ t();
20
21
  try {
21
- const { html: o } = await t();
22
+ const { html: o } = await e();
22
23
  r({
23
24
  html: o || "",
24
25
  css: ""
@@ -27,9 +28,9 @@ const E = /* @__PURE__ */ m({
27
28
  } catch (o) {
28
29
  console.error("Failed to get template data for save:", o);
29
30
  }
30
- }, InButtonV2: S };
31
+ }, InButtonV2: h };
31
32
  }
32
33
  });
33
34
  export {
34
- E as default
35
+ O as default
35
36
  };
@@ -1,16 +1,16 @@
1
- import r from "./ViewOptions.vue2.js";
1
+ import s from "./ViewOptions.vue2.js";
2
2
  /* empty css */
3
3
  import i from "../../../_virtual/_plugin-vue2_normalizer.js";
4
- var s = function() {
4
+ var r = 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 } });
6
+ return o(e.InSegments, { attrs: { id: "guido__view-option-selection", "with-icon": "", disable: e.isPreviewModeOpen, "segment-list": e.segmentList, selected: e.editorStore.editorVisualMode } });
7
7
  }, n = [], _ = /* @__PURE__ */ i(
8
- r,
9
8
  s,
9
+ r,
10
10
  n,
11
11
  !1,
12
12
  null,
13
- "f90d31ea"
13
+ "b81a01c5"
14
14
  );
15
15
  const l = _.exports;
16
16
  export {
@@ -1,15 +1,17 @@
1
- import { defineComponent as e } from "vue";
2
- import { useEditorStore as t } from "../../../stores/editor.js";
3
- import { InSegments as o } from "@useinsider/design-system-vue";
4
- const u = /* @__PURE__ */ e({
1
+ import { defineComponent as i } from "vue";
2
+ import { usePreviewMode as n } from "../../../composables/usePreviewMode.js";
3
+ import { useEditorStore as r } from "../../../stores/editor.js";
4
+ import { InSegments as s } from "@useinsider/design-system-vue";
5
+ const f = /* @__PURE__ */ i({
5
6
  __name: "ViewOptions",
6
- setup(n) {
7
- return { __sfc: !0, editorStore: t(), segmentList: [
7
+ setup(m) {
8
+ const e = r(), o = [
8
9
  { text: "", icon: "line-desktop", value: "desktop" },
9
10
  { text: "", icon: "line-menu-mobileapp", value: "mobile" }
10
- ], InSegments: o };
11
+ ], { isPreviewModeOpen: t } = n();
12
+ return { __sfc: !0, editorStore: e, segmentList: o, isPreviewModeOpen: t, InSegments: s };
11
13
  }
12
14
  });
13
15
  export {
14
- u as default
16
+ f as default
15
17
  };
@@ -0,0 +1,76 @@
1
+ interface FooterButtonGroup {
2
+ primaryButton?: {
3
+ type: 'primary';
4
+ labelText: string;
5
+ disabledStatus?: boolean;
6
+ };
7
+ cancelOrBackButton?: {
8
+ type: 'secondary';
9
+ labelText: string;
10
+ styling: 'ghost';
11
+ };
12
+ }
13
+ type __VLS_Props = {
14
+ id: string;
15
+ title: string;
16
+ description?: string;
17
+ size?: 'small' | 'medium' | 'large';
18
+ footerButtonOptions?: FooterButtonGroup;
19
+ closeButtonStatus?: boolean;
20
+ closeOnOutsideClick?: boolean;
21
+ footerStatus?: boolean;
22
+ };
23
+ declare var __VLS_13: {};
24
+ type __VLS_Slots = {} & {
25
+ default?: (props: typeof __VLS_13) => any;
26
+ };
27
+ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
28
+ description: string;
29
+ size: string;
30
+ footerButtonOptions: undefined;
31
+ closeButtonStatus: boolean;
32
+ closeOnOutsideClick: boolean;
33
+ footerStatus: boolean;
34
+ }>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
35
+ close: () => void;
36
+ "primary-action": () => void;
37
+ "secondary-action": () => void;
38
+ }, string, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
39
+ description: string;
40
+ size: string;
41
+ footerButtonOptions: undefined;
42
+ closeButtonStatus: boolean;
43
+ closeOnOutsideClick: boolean;
44
+ footerStatus: boolean;
45
+ }>>>, {
46
+ size: "small" | "medium" | "large";
47
+ description: string;
48
+ footerButtonOptions: FooterButtonGroup;
49
+ closeButtonStatus: boolean;
50
+ closeOnOutsideClick: boolean;
51
+ footerStatus: boolean;
52
+ }>;
53
+ declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
54
+ export default _default;
55
+ type __VLS_WithDefaults<P, D> = {
56
+ [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
57
+ default: D[K];
58
+ }> : P[K];
59
+ };
60
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
61
+ type __VLS_TypePropsToOption<T> = {
62
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
63
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
64
+ } : {
65
+ type: import('vue').PropType<T[K]>;
66
+ required: true;
67
+ };
68
+ };
69
+ type __VLS_WithSlots<T, S> = T & {
70
+ new (): {
71
+ $scopedSlots: S;
72
+ };
73
+ };
74
+ type __VLS_PrettifyLocal<T> = {
75
+ [K in keyof T]: T[K];
76
+ } & {};
@@ -0,0 +1,19 @@
1
+ import n from "./BaseModal.vue2.js";
2
+ import s from "../../_virtual/_plugin-vue2_normalizer.js";
3
+ var r = function() {
4
+ var t = this, o = t._self._c, e = t._self._setupProxy;
5
+ return o(e.InModalV2, { attrs: { id: t.id, "description-status": "", status: "", "close-button-status": t.closeButtonStatus, "close-on-outside-click": t.closeOnOutsideClick, "description-text": t.description, "footer-button-group-options": t.footerButtonOptions, "footer-status": t.footerStatus, size: t.size, "title-text": t.title }, on: { cancelOrBackButtonEvent: e.handleClose, onCloseEvent: e.handleClose, primaryButtonEvent: e.handlePrimaryAction, secondaryButtonEvent: e.handleSecondaryAction }, scopedSlots: t._u([{ key: "contentSlot", fn: function() {
6
+ return [t._t("default")];
7
+ }, proxy: !0 }], null, !0) });
8
+ }, l = [], a = /* @__PURE__ */ s(
9
+ n,
10
+ r,
11
+ l,
12
+ !1,
13
+ null,
14
+ null
15
+ );
16
+ const d = a.exports;
17
+ export {
18
+ d as default
19
+ };
@@ -0,0 +1,22 @@
1
+ import { defineComponent as e } from "vue";
2
+ import { InModalV2 as t } from "@useinsider/design-system-vue";
3
+ const d = /* @__PURE__ */ e({
4
+ __name: "BaseModal",
5
+ props: {
6
+ id: null,
7
+ title: null,
8
+ description: { default: "" },
9
+ size: { default: "small" },
10
+ footerButtonOptions: { default: void 0 },
11
+ closeButtonStatus: { type: Boolean, default: !0 },
12
+ closeOnOutsideClick: { type: Boolean, default: !0 },
13
+ footerStatus: { type: Boolean, default: !0 }
14
+ },
15
+ emits: ["close", "primary-action", "secondary-action"],
16
+ setup(n, { emit: o }) {
17
+ return { __sfc: !0, emit: o, handleClose: () => o("close"), handlePrimaryAction: () => o("primary-action"), handleSecondaryAction: () => o("secondary-action"), InModalV2: t };
18
+ }
19
+ });
20
+ export {
21
+ d as default
22
+ };
@@ -1,6 +1,6 @@
1
1
  const w = () => {
2
- const a = (e = {}) => new Promise((t, s) => {
3
- const m = { ...{
2
+ const i = (e = {}) => new Promise((t, s) => {
3
+ const o = { ...{
4
4
  minimize: !0,
5
5
  utmEntity: {
6
6
  utmSource: "",
@@ -16,30 +16,30 @@ const w = () => {
16
16
  ]
17
17
  },
18
18
  mergeTags: ["Tag1", "Tag2"],
19
- forseAmp: !1,
19
+ forseAMP: !1,
20
20
  resetDataSavedFlag: !1,
21
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,
22
+ }, ...e }, n = {
23
+ callback: (a, l, m, r, c) => {
24
+ a ? s(a) : t({
25
+ html: l,
26
+ AMPHtml: m,
27
+ AMPErrors: r,
28
28
  displayConditions: c
29
29
  });
30
30
  },
31
- ...m
31
+ ...o
32
32
  };
33
- window.StripoEditorApi.actionsApi.compileEmail(o);
33
+ window.StripoEditorApi.actionsApi.compileEmail(n);
34
34
  });
35
- return { getCompiledEmail: a, activateCustomViewStyles: (e = !0) => {
35
+ return { getCompiledEmail: i, activateCustomViewStyles: (e = !0) => {
36
36
  window.StripoEditorApi.actionsApi.activateCustomViewStyles(e);
37
37
  }, getPreviewData: async (e) => {
38
- const t = await a({ minimize: !1, resetDataSavedFlag: !1, ...e });
38
+ const t = await i({ minimize: !1, resetDataSavedFlag: !1, ...e });
39
39
  return {
40
40
  html: t.html,
41
- ampHtml: t.ampHtml ?? "",
42
- ampErrors: t.ampErrors ?? null,
41
+ AMPHtml: t.AMPHtml ?? "",
42
+ AMPErrors: t.AMPErrors ?? [],
43
43
  displayConditions: t.displayConditions
44
44
  };
45
45
  } };
@@ -0,0 +1,5 @@
1
+ export declare const useCodeEditorApi: () => {
2
+ openCodeEditor: () => boolean;
3
+ closeCodeEditor: () => boolean;
4
+ isCodeEditorApiAvailable: () => boolean;
5
+ };
@@ -0,0 +1,17 @@
1
+ const t = () => ({
2
+ openCodeEditor: () => {
3
+ var o, i;
4
+ return (i = (o = window.StripoEditorApi) == null ? void 0 : o.codeEditorApi) != null && i.openCodeEditor ? (window.StripoEditorApi.codeEditorApi.openCodeEditor(), !0) : !1;
5
+ },
6
+ closeCodeEditor: () => {
7
+ var o, i;
8
+ return (i = (o = window.StripoEditorApi) == null ? void 0 : o.codeEditorApi) != null && i.closeCodeEditor ? (window.StripoEditorApi.codeEditorApi.closeCodeEditor(), !0) : !1;
9
+ },
10
+ isCodeEditorApiAvailable: () => {
11
+ var o;
12
+ return !!((o = window.StripoEditorApi) != null && o.codeEditorApi);
13
+ }
14
+ });
15
+ export {
16
+ t as useCodeEditorApi
17
+ };
@@ -0,0 +1,5 @@
1
+ export declare const useEmailResponsiveFit: () => {
2
+ setupEmailResponsiveFit: (iframe: HTMLIFrameElement) => void;
3
+ tearDownEmailResponsiveFit: (iframe: HTMLIFrameElement) => void;
4
+ hasResponsiveMetaViewport: (doc: Document) => boolean;
5
+ };
@@ -0,0 +1,72 @@
1
+ import { useDebounce as E } from "./useDebounce.js";
2
+ import { META_VIEWPORT_REGEX as d, INLINE_WIDTH_REGEX as p, EMAIL_CONTAINER_SELECTORS as h, DEFAULT_EMAIL_WIDTH as w, MIN_SCALE as v, TABLE_WIDTH_REGEX as f, RESIZE_DEBOUNCE_MS as u } from "../enums/gmailMobilePreview.js";
3
+ let a = null, c = null;
4
+ const { debounce: y } = E(), b = (t) => {
5
+ if (!t)
6
+ return null;
7
+ const s = t.match(f);
8
+ if (!s)
9
+ return null;
10
+ const i = Number(s[1]);
11
+ return Number.isNaN(i) ? null : i;
12
+ }, A = (t) => {
13
+ const s = Array.from(t.querySelectorAll("table[width]")).reduce(
14
+ (e, o) => {
15
+ const r = b(o.getAttribute("width"));
16
+ return r && r > e ? r : e;
17
+ },
18
+ 0
19
+ ), i = Array.from(t.querySelectorAll('[style*="width"]')).reduce(
20
+ (e, o) => {
21
+ const l = (o.getAttribute("style") || "").match(p);
22
+ if (!l)
23
+ return e;
24
+ const m = Number(l[1]);
25
+ return !Number.isNaN(m) && m > e ? m : e;
26
+ },
27
+ 0
28
+ ), n = h.reduce((e, o) => {
29
+ const r = t.querySelector(o);
30
+ if (!r)
31
+ return e;
32
+ const l = Math.max(r.offsetWidth, r.scrollWidth);
33
+ return l > e ? l : e;
34
+ }, 0);
35
+ return Math.max(s, i, n) || w;
36
+ }, R = (t) => {
37
+ t.documentElement.style.setProperty("overflow-x", "visible", "important"), t.body.style.setProperty("visibility", "visible", "important");
38
+ }, g = (t) => {
39
+ t.documentElement.style.removeProperty("transform"), t.documentElement.style.removeProperty("transform-origin"), t.documentElement.style.removeProperty("height"), t.body.style.removeProperty("overflow-x");
40
+ }, N = (t, s) => {
41
+ const i = A(t), n = s / i, e = Math.min(Math.max(n, v), 1);
42
+ t.documentElement.style.setProperty("height", "100%", "important"), t.documentElement.style.setProperty("transform", `scale(${e})`, "important"), t.documentElement.style.setProperty("transform-origin", "top left", "important"), t.body.style.setProperty("overflow-x", "hidden", "important");
43
+ }, _ = () => {
44
+ const t = (n) => {
45
+ const e = n.contentWindow;
46
+ c && e && e.removeEventListener("resize", c), a && window.removeEventListener("resize", a), c = null, a = null;
47
+ }, s = (n) => {
48
+ const e = n.querySelector('meta[name="viewport"]');
49
+ if (!e)
50
+ return !1;
51
+ const o = e.getAttribute("content") || "";
52
+ return d.test(o);
53
+ };
54
+ return { setupEmailResponsiveFit: (n) => {
55
+ const e = n.contentDocument, o = n.contentWindow;
56
+ if (!e || !o)
57
+ return;
58
+ R(e);
59
+ const r = () => {
60
+ const l = n.clientWidth || n.getBoundingClientRect().width || 375;
61
+ if (s(e)) {
62
+ g(e);
63
+ return;
64
+ }
65
+ N(e, l);
66
+ };
67
+ r(), t(n), c = () => y(r, u), o.addEventListener("resize", c), a = () => y(r, u), window.addEventListener("resize", a);
68
+ }, tearDownEmailResponsiveFit: t, hasResponsiveMetaViewport: s };
69
+ };
70
+ export {
71
+ _ as useEmailResponsiveFit
72
+ };
@@ -0,0 +1,6 @@
1
+ export declare const usePreviewMode: () => {
2
+ isPreviewModeOpen: import("vue").ComputedRef<boolean>;
3
+ togglePreviewMode: () => void;
4
+ closePreviewMode: () => void;
5
+ openPreviewMode: () => void;
6
+ };
@@ -0,0 +1,21 @@
1
+ import { useEditorStore as i } from "../stores/editor.js";
2
+ import { computed as r } from "vue";
3
+ import { useCodeEditorApi as d } from "./useCodeEditorApi.js";
4
+ const P = () => {
5
+ const e = i(), { closeCodeEditor: o } = d();
6
+ return {
7
+ isPreviewModeOpen: r(() => e.isPreviewModeOpen),
8
+ togglePreviewMode: () => {
9
+ !e.isPreviewModeOpen && e.isCodeEditorOpen && (o(), e.isCodeEditorOpen = !1), e.isPreviewModeOpen = !e.isPreviewModeOpen;
10
+ },
11
+ closePreviewMode: () => {
12
+ e.isPreviewModeOpen = !1;
13
+ },
14
+ openPreviewMode: () => {
15
+ e.isCodeEditorOpen && (o(), e.isCodeEditorOpen = !1), e.isPreviewModeOpen = !0;
16
+ }
17
+ };
18
+ };
19
+ export {
20
+ P as usePreviewMode
21
+ };
@@ -1,8 +1,12 @@
1
- const t = {
2
- translationsPath: "window.trans.en"
3
- }, e = "newsletter", n = "Guido User";
1
+ const e = {
2
+ translationsPath: "window.trans.en",
3
+ emailHeader: {
4
+ senderName: "Default Sender",
5
+ subject: "Default Subject"
6
+ }
7
+ }, t = "newsletter", a = "Guido User";
4
8
  export {
5
- t as DefaultGuidoConfig,
6
- e as DefaultProductType,
7
- n as DefaultUsername
9
+ e as DefaultGuidoConfig,
10
+ t as DefaultProductType,
11
+ a as DefaultUsername
8
12
  };
package/dist/guido.css CHANGED
@@ -1 +1 @@
1
- [data-v-95dad178] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-95dad178],[data-v-95dad178] .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-b81a01c5] .guido__view-option-selection-desktop svg,[data-v-b81a01c5] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-b81a01c5] .in-segments-wrapper__button_selected,[data-v-b81a01c5] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.guido-editor__wrapper[data-v-988dfdfd],.guido-editor__container[data-v-988dfdfd]{width:100%;height:calc(100vh - 75px)}[data-v-9a504b0d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-9a504b0d],[data-v-9a504b0d] .desktop-preview-container .in-container{min-height:720px!important;height:100%}
@@ -3,7 +3,4 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"editor", {
3
3
  isVersionHistoryOpen: boolean;
4
4
  isPreviewModeOpen: boolean;
5
5
  editorVisualMode: string;
6
- emailFormat: "html" | "amp";
7
- ampHtml: string | null;
8
- ampErrors: string[] | null;
9
6
  }, {}, {}>;