@useinsider/guido 3.2.0-beta.8e8f902 → 3.2.0-beta.8f147c3

package/dist/src/stores/editor.d.ts

@@ -263,27 +263,4 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         templateId: string;
         syncModulesEnabled: boolean;
     }>) => boolean;
-    isInSaveableState: (state: {
-        loadingStatus: boolean;
-        isCodeEditorOpen: boolean;
-        isSaveAsTemplateDrawerOpen: boolean;
-        isVersionHistoryOpen: boolean;
-        isPreviewModeOpen: boolean;
-        editorVisualMode: string;
-        hasChanges: boolean;
-        isStripoInitialized: boolean;
-        templateId: string;
-        syncModulesEnabled: boolean;
-    } & import("pinia").PiniaCustomStateProperties<{
-        loadingStatus: boolean;
-        isCodeEditorOpen: boolean;
-        isSaveAsTemplateDrawerOpen: boolean;
-        isVersionHistoryOpen: boolean;
-        isPreviewModeOpen: boolean;
-        editorVisualMode: string;
-        hasChanges: boolean;
-        isStripoInitialized: boolean;
-        templateId: string;
-        syncModulesEnabled: boolean;
-    }>) => boolean;
 }, {}>;

package/dist/src/utils/htmlEscape.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Escape HTML special characters for safe inclusion in attribute values
+ * or text content. Use for any string that may contain untrusted input.
+ */
+export declare function escapeHtml(text: string): string;

package/dist/stores/editor.js

@@ -25,9 +25,7 @@ const o = e("guidoEditor", {
     isExportButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
     isSaveAsButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
     isTestButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
-    isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen,
-    // Autosave
-    isInSaveableState: (i) => !i.loadingStatus && !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isCodeEditorOpen
+    isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen
   }
 });
 export {

package/dist/utils/htmlEscape.js

@@ -0,0 +1,13 @@
+const c = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#x27;"
+};
+function n(t) {
+  return t.replace(/[&<>"']/g, (e) => c[e]);
+}
+export {
+  n as escapeHtml
+};

package/dist/utils/pairProductVariables.js

@@ -1,85 +1,84 @@
-import { productPairs as L } from "../extensions/Blocks/Items/enums/productEnums.js";
-function q(w) {
-  const y = w.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), T = new DOMParser().parseFromString(y, "text/html"), C = L.PAIRS_FOR_EXTENSION;
-  Object.entries(C).forEach(([r, f]) => {
-    T.querySelectorAll(".ins-product-td").forEach((o) => {
-      const A = o.getAttribute("data-number") || "1", b = o.getAttribute("data-type") || "CART_ITEMS";
-      o.querySelectorAll(`[product-attr="${r}"]`).forEach((e) => {
-        var k, F, I;
-        const $ = e.getAttribute("data-type") || b, d = e.getAttribute("data-number") || A, u = f[$];
-        if (u)
-          switch (r) {
+import { productPairs as P } from "../extensions/Blocks/Items/enums/productEnums.js";
+function L(F) {
+  const R = F.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), $ = new DOMParser().parseFromString(R, "text/html"), y = P.PAIRS_FOR_EXTENSION;
+  Object.entries(y).forEach(([n, l]) => {
+    $.querySelectorAll(".ins-product-td").forEach((c) => {
+      const E = c.getAttribute("data-number") || "1", T = c.getAttribute("data-type") || "CART_ITEMS";
+      c.querySelectorAll(`[product-attr="${n}"]`).forEach((e) => {
+        var H;
+        const b = e.getAttribute("data-type") || T, u = e.getAttribute("data-number") || E, p = l[b];
+        if (p)
+          switch (n) {
             case "imageSrc": {
-              let t = null, i = null;
-              if (e.tagName === "IMG" ? (t = e, i = t.closest("a")) : (t = e.querySelector("img"), i = e.querySelector("a") || e.closest("a")), !t)
+              let t = null, o = null;
+              if (e.tagName === "IMG" ? (t = e, o = t.closest("a")) : (t = e.querySelector("img"), o = e.querySelector("a") || e.closest("a")), !t)
                 break;
-              const a = u.DEFAULT, s = u.ATTR;
-              if (a && t.src) {
-                const c = t.src;
-                a.some((h) => {
-                  const l = h.split("/").pop() || "", g = c.split("/").pop() || "";
-                  return c.includes(h) || c.includes(l) || g === l;
-                }) && (t.src = `{{${s}_${d}}}`);
+              const i = p.DEFAULT, a = p.ATTR;
+              if (i && t.src) {
+                const r = t.src;
+                i.some((f) => {
+                  const s = f.split("/").pop() || "", _ = r.split("/").pop() || "";
+                  return r.includes(f) || r.includes(s) || _ === s;
+                }) && (t.src = `{{${a}_${u}}}`);
               }
-              const n = (F = (k = C.name) == null ? void 0 : k[$]) == null ? void 0 : F.ATTR;
-              if (n && t.setAttribute("alt", `{{${n}_${d}}}`), i) {
-                const c = (I = C.itemLink) == null ? void 0 : I[$];
-                if (c) {
-                  const E = c.HREF, h = c.DEFAULT_HREF || "#!", l = i.href;
-                  (l === "#" || l === "" || l.endsWith("#!") || l.endsWith(h) || l === `${window.location.href}${h}` || !l || l === window.location.href) && (i.href = `{{${E}_${d}}}`);
+              if (o) {
+                const r = (H = y.itemLink) == null ? void 0 : H[b];
+                if (r) {
+                  const d = r.HREF, f = r.DEFAULT_HREF || "#!", s = o.href;
+                  (s === "#" || s === "" || s.endsWith("#!") || s.endsWith(f) || s === `${window.location.href}${f}` || !s || s === window.location.href) && (o.href = `{{${d}_${u}}}`);
                 }
               }
               break;
             }
             case "name": {
-              const t = u, i = t.ATTR, a = t.DEFAULT_HREF || "#!", s = t.HREF;
-              e.textContent && (e.textContent = `{{${i}_${d}}}`);
-              const n = e.closest("a") || (e.tagName === "A" ? e : null);
-              if (n && s) {
-                const c = n.href, E = `${window.location.href}${a}`;
-                (c === E || c.endsWith(a)) && (n.href = `{{${s}_${d}}}`);
+              const t = p, o = t.ATTR, i = t.DEFAULT_HREF || "#!", a = t.HREF;
+              e.textContent && (e.textContent = `{{${o}_${u}}}`);
+              const r = e.closest("a") || (e.tagName === "A" ? e : null);
+              if (r && a) {
+                const d = r.href, f = `${window.location.href}${i}`;
+                (d === f || d.endsWith(i)) && (r.href = `{{${a}_${u}}}`);
               }
               break;
             }
             case "price":
             case "originalPrice": {
-              const t = u, i = e.getAttribute("data-formated"), a = e.getAttribute("data-single_price"), s = i === "true", n = a === "true", c = e.getAttribute("data-curency") || "before";
-              let E;
-              n ? E = s ? t.SINGLE_PRICE_FORMATTED : t.SINGLE_PRICE : E = s ? t.PRICE_FORMATTED : t.PRICE;
-              const h = t.CURRENCY;
-              let l = `{{${E}_${d}}}`;
-              if (h) {
-                const g = `{{${h}_${d}}}`;
-                l = c === "after" ? `${l} ${g}` : `${g} ${l}`;
+              const t = p, o = e.getAttribute("data-formated"), i = e.getAttribute("data-single_price"), a = o === "true", r = i === "true", d = e.getAttribute("data-curency") || "before";
+              let f;
+              r ? f = a ? t.SINGLE_PRICE_FORMATTED : t.SINGLE_PRICE : f = a ? t.PRICE_FORMATTED : t.PRICE;
+              const s = t.CURRENCY;
+              let _ = `{{${f}_${u}}}`;
+              if (s) {
+                const k = `{{${s}_${u}}}`;
+                _ = d === "after" ? `${_} ${k}` : `${k} ${_}`;
               }
-              e.textContent = l;
+              e.textContent = _;
               break;
             }
             case "quantity": {
-              const t = u, i = t.ATTR, a = t.DEFAULT;
-              e.textContent && e.textContent.trim() === a && (e.textContent = `{{${i}_${d}}}`);
+              const t = p, o = t.ATTR, i = t.DEFAULT;
+              e.textContent && e.textContent.trim() === i && (e.textContent = `{{${o}_${u}}}`);
               break;
             }
             case "button": {
-              const t = u, i = t.HREF, a = t.DEFAULT_HREF || "#!", s = e.tagName === "A" ? e : e.querySelector("a");
-              if (s) {
-                const n = s.href || "", c = `${window.location.href}${a}`;
-                (n === "" || n === "#" || n === c || n.endsWith(a) || n.endsWith("#!") || n === window.location.href) && (s.href = `{{${i}_${d}}}`);
+              const t = p, o = t.HREF, i = t.DEFAULT_HREF || "#!", a = e.tagName === "A" ? e : e.querySelector("a");
+              if (a) {
+                const r = a.href || "", d = `${window.location.href}${i}`;
+                (r === "" || r === "#" || r === d || r.endsWith(i) || r.endsWith("#!") || r === window.location.href) && (a.href = `{{${o}_${u}}}`);
               }
               break;
             }
             case "itemLink": {
-              const t = u, i = t.HREF, a = t.DEFAULT_HREF || "#!", s = e;
-              if (s.href) {
-                const n = s.href, c = `${window.location.href}${a}`;
-                (n === c || n.endsWith(a)) && (s.href = `{{${i}_${d}}}`);
+              const t = p, o = t.HREF, i = t.DEFAULT_HREF || "#!", a = e;
+              if (a.href) {
+                const r = a.href, d = `${window.location.href}${i}`;
+                (r === d || r.endsWith(i)) && (a.href = `{{${o}_${u}}}`);
               }
               break;
             }
             default: {
-              if ("ATTR" in u) {
-                const t = u.ATTR;
-                e.textContent && (e.textContent = `{{${t}_${d}}}`);
+              if ("ATTR" in p) {
+                const t = p.ATTR;
+                e.textContent && (e.textContent = `{{${t}_${u}}}`);
               }
               break;
             }
@@ -87,55 +86,55 @@ function q(w) {
       });
     });
   });
-  const S = y.match(/<!DOCTYPE[^>]*>/i), M = S ? `${S[0]}
-` : "", P = T.querySelectorAll(".ins-product-td"), H = [];
-  P.forEach((r) => {
-    const f = r.getAttribute("data-type") || "CART_ITEMS", p = r.getAttribute("data-number") || "1", o = r.getAttribute("data-nodup"), A = r.outerHTML;
-    H.push({
-      element: r,
-      outerHtml: A,
-      type: f,
-      number: p,
-      nodup: o || void 0
+  const S = R.match(/<!DOCTYPE[^>]*>/i), I = S ? `${S[0]}
+` : "", w = $.querySelectorAll(".ins-product-td"), m = [];
+  w.forEach((n) => {
+    const l = n.getAttribute("data-type") || "CART_ITEMS", A = n.getAttribute("data-number") || "1", c = n.getAttribute("data-nodup"), E = n.outerHTML;
+    m.push({
+      element: n,
+      outerHtml: E,
+      type: l,
+      number: A,
+      nodup: c || void 0
     });
   });
-  let _ = M + T.documentElement.outerHTML;
-  H.reverse().forEach(({ outerHtml: r, type: f, number: p }) => {
-    let o = "";
-    switch (f) {
+  let h = I + $.documentElement.outerHTML;
+  m.reverse().forEach(({ outerHtml: n, type: l, number: A }) => {
+    let c = "";
+    switch (l) {
       case "CART_ITEMS":
-        o = "ins_apr_total_product_kind";
+        c = "ins_apr_total_product_kind";
         break;
       case "BROWSED_ITEMS":
-        o = "browsed_item_total_product_kind";
+        c = "browsed_item_total_product_kind";
         break;
       case "PURCHASED_ITEMS":
-        o = "purchased_item_total_product_kind";
+        c = "purchased_item_total_product_kind";
         break;
     }
-    if (o) {
-      const b = parseInt(p) - 1, $ = `${`{% if ${o} > ${b} %}`}${r}{% endif %}`;
-      _ = _.replace(r, $);
+    if (c) {
+      const T = parseInt(A) - 1, b = `${`{% if ${c} > ${T} %}`}${n}{% endif %}`;
+      h = h.replace(n, b);
     }
   });
-  const D = T.querySelectorAll('[product-attr="originalPrice"][data-type="CART_ITEMS"]'), R = [];
-  return D.forEach((r) => {
-    const f = r.getAttribute("data-number"), p = r.getAttribute("data-type");
-    if (!f || p !== "CART_ITEMS")
+  const M = $.querySelectorAll('[product-attr="originalPrice"][data-type="CART_ITEMS"]'), g = [];
+  return M.forEach((n) => {
+    const l = n.getAttribute("data-number"), A = n.getAttribute("data-type");
+    if (!l || A !== "CART_ITEMS")
       return;
-    const o = r.closest(".product-original-price-class");
-    if (o) {
-      const A = o.outerHTML;
-      R.some((m) => m.tdOuterHtml === A) || R.push({ tdOuterHtml: A, number: f });
+    const c = n.closest(".product-original-price-class");
+    if (c) {
+      const E = c.outerHTML;
+      g.some((C) => C.tdOuterHtml === E) || g.push({ tdOuterHtml: E, number: l });
     }
-  }), R.reverse().forEach(({ tdOuterHtml: r, number: f }) => {
-    const p = `{% if ins_apr_price_${f} != ins_apr_originalprice_${f} %}`;
-    if (!_.includes(p) && !r.includes("{% if")) {
-      const A = `${p}${r}{% endif %}`;
-      _ = _.replace(r, A);
+  }), g.reverse().forEach(({ tdOuterHtml: n, number: l }) => {
+    const A = `{% if ins_apr_price_${l} != ins_apr_originalprice_${l} %}`;
+    if (!h.includes(A) && !n.includes("{% if")) {
+      const E = `${A}${n}{% endif %}`;
+      h = h.replace(n, E);
     }
-  }), _.replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+  }), h.replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
-  q as pairProductVariables
+  L as pairProductVariables
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.2.0-beta.8e8f902",
+  "version": "3.2.0-beta.8f147c3",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",
@@ -24,6 +24,8 @@
     "lint": "NODE_OPTIONS=--max-old-space-size=2048 eslint ./ && bun run type-check",
     "lint:fix": "NODE_OPTIONS=--max-old-space-size=2048 eslint --fix ./",
     "type-check": "vue-tsc --noEmit --project tsconfig.config.json && vue-tsc --noEmit --project tsconfig.app.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "test:visual-update": "npx playwright test --update-snapshots --reporter html",
     "prepare": "husky",
     "preinstall": "rm -rf ./node_modules/.vite"
@@ -69,12 +71,14 @@
     "eslint-plugin-vue": "10.1.0",
     "eslint-plugin-vue-scoped-css": "2.6.1",
     "globals": "16.0.0",
+    "happy-dom": "^15",
     "husky": "9.1.7",
     "msw": "2.10.3",
     "sass": "1.69.7",
     "typescript": "5.5.4",
     "typescript-eslint": "8.26.0",
     "vite-plugin-dts": "4.5.4",
+    "vitest": "^2",
     "vue-tsc": "2.2.10"
   },
   "overrides": {

package/dist/components/organisms/AutoSaveController.vue.js

@@ -1,17 +0,0 @@
-import n from "./AutoSaveController.vue2.js";
-import t from "../../_virtual/_plugin-vue2_normalizer.js";
-var o = function() {
-  var r = this, e = r._self._c;
-  return r._self._setupProxy, e("div", { staticClass: "d-n" });
-}, s = [], _ = /* @__PURE__ */ t(
-  n,
-  o,
-  s,
-  !1,
-  null,
-  null
-);
-const f = _.exports;
-export {
-  f as default
-};

package/dist/components/organisms/AutoSaveController.vue2.js

@@ -1,13 +0,0 @@
-import { defineComponent as t } from "vue";
-import { useAutoSave as r } from "../../composables/useAutoSave.js";
-import { useSave as s } from "../../composables/useSave.js";
-const f = /* @__PURE__ */ t({
-  __name: "AutoSaveController",
-  setup(a) {
-    const { save: e } = s(), o = () => e(!1, !0);
-    return r(o), { __sfc: !0, save: e, backgroundSave: o };
-  }
-});
-export {
-  f as default
-};

package/dist/components/organisms/header/AutoSaveToggle.vue.js

@@ -1,22 +0,0 @@
-import o from "./AutoSaveToggle.vue2.js";
-/* empty css                    */
-import i from "../../../_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
-  var e = this, a = e._self._c, t = e._self._setupProxy;
-  return t.isFeatureEnabled("autosave") ? a("div", { staticClass: "d-f a-i-c mr-3 auto-save-toggle", on: { mouseenter: function(s) {
-    t.isHovered = !0;
-  }, mouseleave: function(s) {
-    t.isHovered = !1;
-  } } }, [a(t.InToggle, { attrs: { id: "guido__autosave-toggle", name: "guido-autosave-toggle", checked: t.autosaveStore.isOn, disable: t.editorStore.loadingStatus }, on: { click: t.toggle } }), a("span", { staticClass: "ml-2 auto-save-toggle__label t-c-55" }, [e._v(" " + e._s(t.trans("email-editor.auto-save")) + " ")]), t.autosaveStore.status === t.AUTOSAVE_STATUS.SAVING ? a("span", { staticClass: "ml-2 d-f a-i-c f-s-1" }, [a(t.InLoading, { attrs: { "color-class": "i-c-53", size: "16" } }), a("span", { staticClass: "ml-1 t-c-53" }, [e._v(" " + e._s(t.trans("newsletter.saving")) + " ")])], 1) : t.lastSavedLabel ? a("span", { staticClass: "ml-2 f-s-1 t-c-53" }, [e._v(" " + e._s(t.lastSavedLabel) + " ")]) : e._e(), t.isHovered ? a(t.InInfoBox, { staticClass: "auto-save-toggle__info-box", attrs: { id: "guido__autosave-info-box", size: "small", variant: "information", "description-text": t.trans("email-editor.auto-save-description"), "title-text": t.trans("email-editor.auto-save-title") } }) : e._e()], 1) : e._e();
-}, l = [], r = /* @__PURE__ */ i(
-  o,
-  n,
-  l,
-  !1,
-  null,
-  "2c964af4"
-);
-const d = r.exports;
-export {
-  d as default
-};

package/dist/components/organisms/header/AutoSaveToggle.vue2.js

@@ -1,19 +0,0 @@
-import { defineComponent as i, ref as f, computed as u } from "vue";
-import { useConfig as l } from "../../../composables/useConfig.js";
-import { useTranslations as p } from "../../../composables/useTranslations.js";
-import { useAutosaveStore as c, AUTOSAVE_STATUS as t } from "../../../stores/autosave.js";
-import { useEditorStore as S } from "../../../stores/editor.js";
-import { formatLocalTime as d } from "../../../utils/timeUtil.js";
-import { InToggle as g, InLoading as _, InInfoBox as A } from "@useinsider/design-system-vue";
-const U = /* @__PURE__ */ i({
-  __name: "AutoSaveToggle",
-  setup(v) {
-    const { isFeatureEnabled: e } = l(), r = S(), o = c(), s = p(), n = f(!1), a = u(() => o.status !== t.SAVED || !o.lastSavedAt ? "" : d(o.lastSavedAt));
-    return { __sfc: !0, isFeatureEnabled: e, editorStore: r, autosaveStore: o, trans: s, isHovered: n, lastSavedLabel: a, toggle: (m) => {
-      o.isOn = m;
-    }, AUTOSAVE_STATUS: t, InInfoBox: A, InLoading: _, InToggle: g };
-  }
-});
-export {
-  U as default
-};

package/dist/composables/useAutoSave.js

@@ -1,71 +0,0 @@
-import { useConfig as m } from "./useConfig.js";
-import { useAutosaveStore as A, AUTOSAVE_STATUS as s } from "../stores/autosave.js";
-import { useEditorStore as E } from "../stores/editor.js";
-import { computed as f, watch as p, onUnmounted as y } from "vue";
-const I = 18e4, r = 6e4, T = (b) => {
-  const { isFeatureEnabled: S } = m(), a = E(), t = A();
-  let i = null, c = 0;
-  const u = f(
-    () => S("autosave") && t.isOn
-  ), g = () => a.hasChanges && a.isInSaveableState, h = () => ({
-    hasChanges: a.hasChanges,
-    isInSaveableState: a.isInSaveableState
-  }), l = async (e) => {
-    if (!u.value) {
-      console.debug("guido:autosave:skipped", { trigger: e, reason: "not-active" });
-      return;
-    }
-    if (!g()) {
-      console.debug("guido:autosave:skipped", { trigger: e, reason: "gates-blocked", gates: h() });
-      return;
-    }
-    if (t.status === s.SAVING) {
-      console.debug("guido:autosave:skipped", { trigger: e, reason: "already-saving" });
-      return;
-    }
-    console.debug("guido:autosave:save-start", { trigger: e }), t.status = s.SAVING;
-    try {
-      if (await b() === void 0) {
-        console.debug("guido:autosave:blocked", { trigger: e, reason: "save-returned-undefined" }), t.status = s.ERROR;
-        return;
-      }
-      a.hasChanges = !1, t.status = s.SAVED, t.lastSavedAt = /* @__PURE__ */ new Date(), console.debug("guido:autosave:save-complete", { trigger: e, at: t.lastSavedAt });
-    } catch (o) {
-      console.debug("guido:autosave:error", { trigger: e, error: o }), t.status = s.ERROR;
-    }
-  }, n = () => {
-    const { visibilityState: e } = document;
-    if (console.debug("guido:autosave:visibility-change", {
-      visibilityState: e,
-      isActive: u.value
-    }), e !== "hidden")
-      return;
-    const o = Date.now() - c;
-    if (o < r) {
-      console.debug("guido:autosave:visibility-debounced", {
-        sinceLastMs: o,
-        debounceMs: r
-      });
-      return;
-    }
-    c = Date.now(), l("visibility");
-  }, d = () => {
-    i && (clearInterval(i), i = null);
-  }, v = () => {
-    document.removeEventListener("visibilitychange", n), window.removeEventListener("pagehide", n);
-  };
-  p(
-    u,
-    (e) => {
-      console.debug("guido:autosave:active-changed", { active: e }), e ? (d(), i = setInterval(() => {
-        console.debug("guido:autosave:interval-tick"), l("interval");
-      }, I), document.addEventListener("visibilitychange", n), window.addEventListener("pagehide", n)) : (d(), v(), t.status = s.IDLE);
-    },
-    { immediate: !0 }
-  ), y(() => {
-    d(), v(), t.status = s.IDLE, t.lastSavedAt = null;
-  });
-};
-export {
-  T as useAutoSave
-};