@useinsider/guido 1.0.0-beta.b79463f → 1.0.0-beta.b7d755a

package/README.md

@@ -14,10 +14,7 @@ Guido is a Vue 2 + TypeScript wrapper for the Stripo Email Editor plugin. Easily
 ```bash
 npm install @useinsider/guido
 ```
-### Prerequisites
-  🍍 Your project should have `pinia`
 
----
 ## 🚀 Usage
 
 ### Basic Usage
@@ -26,11 +23,9 @@ npm install @useinsider/guido
 <template>
   <div>
     <Guido
-      ref="guidoEditor"
       :email-id="emailId"
       :user-id="userId"
       :guido-config="guidoConfig"
-      @dynamic-content:open="handleDynamicContentOpen"
     />
   </div>
 </template>
@@ -49,29 +44,7 @@ export default {
       guidoConfig: {
         translationsPath: 'window.trans.en'
       }
-      dynamicContentModalVisible: false
     };
-  },
-
-  methods: {
-    handleDynamicContentOpen() {
-      this.dynamicContentModalVisible = true;
-    }
-    // ⚠️ Your own Dynamic Content Modal should have this id: #guido-dynamic-content-modal
-    handleDynamicContentInsert() {
-      this.$ref.guidoEditor?.dynamicContent.insert({
-        text: 'Text', 
-        value: 'Value', 
-        fallback: 'Fallback'
-      });
-
-      this.dynamicContentModalVisible = false;
-    },
-    // ⚠️ It's mandatory. There is no way to understand if user closes the modal without selection.
-    handleDynamicContentClose() {
-      this.$ref.guidoEditor?.dynamicContent.close();
-    }
-
   }
 };
 </script>
@@ -90,13 +63,7 @@ export default {
 | `productType` | `string` | ⚪ | Getting from URL path | Unique identifier for the product draft |
 | `guidoConfig` | `GuidoConfig` | ✅ | - | Configuration object for the editor |
 
-### Guido Exposed Methods
-```typescript
-dynamicContent.insert(DynamicContent);
-dynamicContent.close();
-```
-
-### Guido Interfaces
+### GuidoConfig Interface
 
 ```typescript
 interface GuidoConfig {
@@ -108,20 +75,6 @@ interface GuidoConfig {
 |----------|------|---------|-------------|
 | `translationsPath` | `string` | `'window.trans.en'` | JavaScript path to the translations object |
 
-```typescript
-interface DynamicContent {
-  value: string;
-  text: string;
-  fallback?: string;
-}
-```
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `value` | `string` | '' | Value of the dynamic content |
-| `text` | `string` | '' | Visible value of the dynamic content |
-| `fallback?` | `string` | '' | Fallback value of the dynamic content. Optional |
-
 ### TypeScript Types
 
 The library exports the following TypeScript types:
@@ -135,6 +88,19 @@ import type { GuidoConfig } from '@useinsider/guido';
 import type { StripoEventType } from '@useinsider/guido';
 ```
 
+### StripoEventType
+
+```typescript
+type StripoEventType = 
+  | 'save'
+  | 'export'
+  | 'close'
+  | 'autosave'
+  | 'publish'
+  | 'export:requested'
+  | 'export:ready';
+```
+
 ---
 
 ## 🔧 Development
@@ -204,34 +170,6 @@ const trans = useTranslations();
 trans('foo.bar')
 ```
 
-## 📦 Local Building (Recommended)
-
-Run this commands if you want to test the package on your local before sending to NPM.
-```sh
-bun run build
-```
-
-Since bun does not have packaging yet, use npm here: 🥲
-```sh
-npm pack
-```
-
-It'll crate like `useinsider-guido-1.0.0.tgz` file.
-
-Move this file to your project path like: `email-fe` via:
-```sh
-cp useinsider-guido-1.0.0.tgz ../email-fe
-```
-
-Install the file to your project: 
-```sh
-npm i ./useinsider-guido-1.0.0.tgz
-```
-
-Then you just need to rebuild to your project or restart the Container. 🎉
-
-For Future, we can create a shell script for it. Feel free to help 🙃
-
 ## 📦 Build Output
 
 The library builds to multiple formats:

package/dist/components/Guido.vue.d.ts

@@ -8,10 +8,7 @@ type __VLS_Props = {
     guidoConfig: GuidoConfig;
 };
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
-    dynamicContent: {
-        insert: (data: DynamicContent) => void;
-        close: () => void;
-    };
+    applyDynamicContent: (data: DynamicContent) => void;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
     "dynamic-content:open": (detail: DynamicContent | null) => void;
 }, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;

package/dist/components/Guido.vue.js

@@ -10,7 +10,7 @@ var s = function() {
   _,
   !1,
   null,
-  "89423288"
+  "1d1d2b7c"
 );
 const f = a.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -1,10 +1,10 @@
-import { defineComponent as v, onMounted as w } from "vue";
-import { usePartner as h } from "../composables/usePartner.js";
-import { useStripo as D } from "../composables/useStripo.js";
-import { useTemplates as E } from "../composables/useTemplates.js";
-import { DefaultUsername as _, DefaultGuidoConfig as b } from "../enums/defaults.js";
-import T from "./organisms/header/HeaderWrapper.vue.js";
-const W = /* @__PURE__ */ v({
+import { defineComponent as C, onMounted as w } from "vue";
+import { usePartner as _ } from "../composables/usePartner.js";
+import { useStripo as T } from "../composables/useStripo.js";
+import { useTemplates as b } from "../composables/useTemplates.js";
+import { DefaultUsername as h, DefaultGuidoConfig as v } from "../enums/defaults.js";
+import D from "./organisms/header/HeaderWrapper.vue.js";
+const x = /* @__PURE__ */ C({
   __name: "Guido",
   props: {
     emailId: null,
@@ -15,28 +15,28 @@ const W = /* @__PURE__ */ v({
     guidoConfig: null
   },
   emits: ["dynamic-content:open"],
-  setup(g, { expose: C, emit: n }) {
-    const t = g, { getPartnerName: o, getProductType: c } = h(), {
+  setup(g, { expose: y, emit: n }) {
+    const o = g, { getPartnerName: t, getProductType: r } = _(), {
       emailId: i,
       userId: a,
-      guidoConfig: r,
-      partnerName: s = o(),
-      productType: d = c(),
-      username: u = _
-    } = t;
+      guidoConfig: c,
+      partnerName: s = t(),
+      productType: u = r(),
+      username: d = h
+    } = o;
     window.GuidoConfig = {
-      ...b,
-      ...r
+      ...v,
+      ...c
     };
-    const { initPlugin: m } = D({ emailId: i, userId: a, username: u, partnerName: s, productType: d }), { getDefaultTemplate: l } = E(), p = (e) => {
-      console.debug("dynamic-content:close", e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, y = () => {
-      console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
+    const { initPlugin: m } = T({ emailId: i, userId: a, username: d, partnerName: s, productType: u }), { getDefaultTemplate: p } = b(), l = (e) => {
+      console.debug("dynamic-content:close", e), document.dispatchEvent(new CustomEvent("dynamic-content:close", {
+        detail: e
+      }));
     };
     return w(async () => {
       console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
-        const e = await l();
+        const e = await p();
         await m(e);
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
@@ -45,14 +45,11 @@ const W = /* @__PURE__ */ v({
         const f = e;
         console.debug("dynamic-content:open", f.detail), n("dynamic-content:open", f.detail);
       });
-    }), C({
-      dynamicContent: {
-        insert: p,
-        close: y
-      }
-    }), { __sfc: !0, props: t, getPartnerName: o, getProductType: c, emailId: i, userId: a, guidoConfig: r, partnerName: s, productType: d, username: u, emit: n, initPlugin: m, getDefaultTemplate: l, insertDynamicContent: p, closeDynamicContent: y, HeaderWrapper: T };
+    }), y({
+      applyDynamicContent: l
+    }), { __sfc: !0, props: o, getPartnerName: t, getProductType: r, emailId: i, userId: a, guidoConfig: c, partnerName: s, productType: u, username: d, emit: n, initPlugin: m, getDefaultTemplate: p, applyDynamicContent: l, HeaderWrapper: D };
   }
 });
 export {
-  W as default
+  x as default
 };

package/dist/extensions/DynamicContent/dynamic-content-modal.js

@@ -1,27 +1,27 @@
 var i = Object.defineProperty;
-var d = (t, e, n) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var a = (t, e, n) => d(t, typeof e != "symbol" ? e + "" : e, n);
-class y {
+var d = (e, t, n) => t in e ? i(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var a = (e, t, n) => d(e, typeof t != "symbol" ? t + "" : t, n);
+class u {
   constructor() {
     a(this, "selectedDynamicContent", null);
     a(this, "dataSelectCallback", () => {
     });
   }
-  openMergeTagsLibrary(e, n) {
-    this.dataSelectCallback = n, this.selectedDynamicContent = e;
-    const s = new CustomEvent("dynamic-content:open", {
+  openMergeTagsLibrary(t, n) {
+    this.dataSelectCallback = n, this.selectedDynamicContent = t;
+    const o = new CustomEvent("dynamic-content:open", {
       detail: {
-        attribute: e
+        attribute: t
       }
     });
-    document.dispatchEvent(s);
-    const o = (l) => {
-      const c = l.detail;
-      this.selectedDynamicContent = c, c.text && c.value && this.dataSelectCallback(c), document.removeEventListener("dynamic-content:close", o);
+    document.dispatchEvent(o);
+    const l = (s) => {
+      const c = s.detail;
+      this.selectedDynamicContent = c || null, c && this.dataSelectCallback(c), document.removeEventListener("dynamic-content:close", l);
     };
-    document.addEventListener("dynamic-content:close", o);
+    document.addEventListener("dynamic-content:close", l);
   }
 }
 export {
-  y as ExternalMergeTagsLibrary
+  u as ExternalMergeTagsLibrary
 };

package/dist/guido.css

@@ -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-89423288],.guido-editor__container[data-v-89423288]{width:100%;height:calc(100vh - 75px)}
+.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-1d1d2b7c],.guido-editor__container[data-v-1d1d2b7c]{width:100%;height:calc(100vh - 75px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.0-beta.b79463f",
+  "version": "1.0.0-beta.b7d755a",
   "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",