@useinsider/guido 1.0.0-beta.f2786f4 → 1.0.0-beta.f2fcf4d

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 (68) hide show
  1. package/README.md +89 -166
  2. package/dist/@types/generic.d.ts +4 -1
  3. package/dist/components/Guido.vue.d.ts +0 -2
  4. package/dist/components/Guido.vue.js +7 -7
  5. package/dist/components/Guido.vue2.js +11 -18
  6. package/dist/components/organisms/top-bar/HeaderMiddleSlot.vue.js +8 -8
  7. package/dist/components/organisms/top-bar/HeaderMiddleSlot.vue2.js +6 -14
  8. package/dist/components/organisms/top-bar/HeaderRightSlot.vue.d.ts +1 -1
  9. package/dist/components/organisms/top-bar/HeaderRightSlot.vue.js +9 -9
  10. package/dist/components/organisms/top-bar/HeaderRightSlot.vue2.js +9 -7
  11. package/dist/composables/useStripo.d.ts +1 -1
  12. package/dist/composables/useStripo.js +24 -37
  13. package/dist/composables/useTemplates.d.ts +1 -1
  14. package/dist/enums/defaults.enum.d.ts +18 -0
  15. package/dist/guido.css +1 -1
  16. package/dist/library.d.ts +0 -1
  17. package/dist/stores/counter.d.ts +12 -0
  18. package/package.json +1 -1
  19. package/dist/components/organisms/top-bar/HeaderViewOptions.vue.d.ts +0 -2
  20. package/dist/components/organisms/top-bar/HeaderViewOptions.vue.js +0 -18
  21. package/dist/components/organisms/top-bar/HeaderViewOptions.vue2.js +0 -15
  22. package/dist/composables/useTranslations.js +0 -20
  23. package/dist/enums/defaults.d.ts +0 -2
  24. package/dist/enums/defaults.js +0 -6
  25. package/dist/guido.png +0 -0
  26. package/dist/node_modules/lodash-es/_Hash.js +0 -20
  27. package/dist/node_modules/lodash-es/_ListCache.js +0 -20
  28. package/dist/node_modules/lodash-es/_Map.js +0 -6
  29. package/dist/node_modules/lodash-es/_MapCache.js +0 -20
  30. package/dist/node_modules/lodash-es/_Symbol.js +0 -5
  31. package/dist/node_modules/lodash-es/_assocIndexOf.js +0 -10
  32. package/dist/node_modules/lodash-es/_baseGetTag.js +0 -10
  33. package/dist/node_modules/lodash-es/_baseIsNative.js +0 -16
  34. package/dist/node_modules/lodash-es/_coreJsData.js +0 -5
  35. package/dist/node_modules/lodash-es/_freeGlobal.js +0 -4
  36. package/dist/node_modules/lodash-es/_getMapData.js +0 -8
  37. package/dist/node_modules/lodash-es/_getNative.js +0 -9
  38. package/dist/node_modules/lodash-es/_getRawTag.js +0 -15
  39. package/dist/node_modules/lodash-es/_getValue.js +0 -6
  40. package/dist/node_modules/lodash-es/_hashClear.js +0 -7
  41. package/dist/node_modules/lodash-es/_hashDelete.js +0 -7
  42. package/dist/node_modules/lodash-es/_hashGet.js +0 -13
  43. package/dist/node_modules/lodash-es/_hashHas.js +0 -9
  44. package/dist/node_modules/lodash-es/_hashSet.js +0 -9
  45. package/dist/node_modules/lodash-es/_isKeyable.js +0 -7
  46. package/dist/node_modules/lodash-es/_isMasked.js +0 -11
  47. package/dist/node_modules/lodash-es/_listCacheClear.js +0 -6
  48. package/dist/node_modules/lodash-es/_listCacheDelete.js +0 -12
  49. package/dist/node_modules/lodash-es/_listCacheGet.js +0 -8
  50. package/dist/node_modules/lodash-es/_listCacheHas.js +0 -7
  51. package/dist/node_modules/lodash-es/_listCacheSet.js +0 -8
  52. package/dist/node_modules/lodash-es/_mapCacheClear.js +0 -13
  53. package/dist/node_modules/lodash-es/_mapCacheDelete.js +0 -8
  54. package/dist/node_modules/lodash-es/_mapCacheGet.js +0 -7
  55. package/dist/node_modules/lodash-es/_mapCacheHas.js +0 -7
  56. package/dist/node_modules/lodash-es/_mapCacheSet.js +0 -8
  57. package/dist/node_modules/lodash-es/_nativeCreate.js +0 -5
  58. package/dist/node_modules/lodash-es/_objectToString.js +0 -7
  59. package/dist/node_modules/lodash-es/_root.js +0 -5
  60. package/dist/node_modules/lodash-es/_toSource.js +0 -17
  61. package/dist/node_modules/lodash-es/eq.js +0 -6
  62. package/dist/node_modules/lodash-es/isFunction.js +0 -12
  63. package/dist/node_modules/lodash-es/isObject.js +0 -7
  64. package/dist/node_modules/lodash-es/memoize.js +0 -18
  65. package/dist/node_modules/pinia/dist/pinia.js +0 -314
  66. package/dist/node_modules/pinia/node_modules/vue-demi/lib/index.js +0 -11
  67. package/dist/stores/editor.d.ts +0 -4
  68. package/dist/stores/editor.js +0 -10
package/README.md CHANGED
@@ -1,32 +1,25 @@
1
- <p align="center">
2
- <a href="https://www.youtube.com/shorts/Y0RwBeMezL4" target="_blank" rel="noopener noreferrer">
3
- <img width="180" src="./public/guido.png" alt="Guido logo">
4
- </a>
5
- </p>
1
+ # @useinsider/guido-plugin
6
2
 
7
-
8
- # @useinsider/guido
9
-
10
- Guido is a Vue 2 + TypeScript wrapper for the Stripo Email Editor plugin. Easily embed the professional email editor in your Vue applications with a clean, customizable interface.
3
+ Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.
11
4
 
12
5
  ## 📦 Install
13
-
14
6
  ```bash
15
7
  npm install @useinsider/guido
16
8
  ```
17
9
 
18
- ## 🚀 Usage
19
-
20
- ### Basic Usage
21
-
22
- ```html
10
+ ## 🚀 Usage (Vue 2)
11
+ ```vue
23
12
  <template>
24
- <div>
25
- <Guido
26
- :email-id="emailId"
27
- :guido-config="guidoConfig"
28
- />
29
- </div>
13
+ <Guido
14
+ email-id="abc123"
15
+ :api="apiEndpoints"
16
+ :extensions="extensions"
17
+ :insider-stripo-config="insiderStripoConfig"
18
+ @save="handleSave"
19
+ @export:requested="onExportRequested"
20
+ @export:ready="handleHtml"
21
+ @close="onClose"
22
+ />
30
23
  </template>
31
24
 
32
25
  <script lang="ts">
@@ -38,169 +31,99 @@ export default {
38
31
  },
39
32
  data() {
40
33
  return {
41
- emailId: 'abc123',
42
- guidoConfig: {
43
- translationsPath: 'window.trans.en'
34
+ apiEndpoints: {
35
+ dynamicContent: '/api/dynamic-content',
36
+ unsubPages: '/api/unsub-pages',
37
+ header: '/api/header',
38
+ footer: '/api/footer',
39
+ productName: '/api/product-name',
40
+ productVersion: '/api/product-version',
41
+ token: '/api/stripo-token'
42
+ },
43
+ extensions: {
44
+ dynamicContent: true,
45
+ unsubPages: true,
46
+ header: false,
47
+ footer: false
44
48
  }
45
49
  };
50
+ },
51
+ methods: {
52
+ handleSave(data: any) {
53
+ console.log('Saved:', data);
54
+ },
55
+ handleHtml({ html }: { html: string }) {
56
+ console.log('HTML ready:', html);
57
+ },
58
+ onExportRequested() {
59
+ console.log('Export started');
60
+ },
61
+ onClose() {
62
+ console.log('Closed');
63
+ }
46
64
  }
47
65
  };
48
66
  </script>
49
67
  ```
50
68
 
51
69
  ## 📚 API
70
+ ### `<StripoEditor />` Props
71
+ | Prop | Type | Required | Description |
72
+ |-------------|----------|----------|----------------------------|
73
+ | emailId | string | ✅ | Stripo email draft ID |
74
+ | iframeId | string | ❌ | Custom iframe ID |
75
+ | api | object | ❌ | Custom API endpoints |
76
+ | extensions | object | ❌ | Enable/disable extensions |
77
+ | insiderStripoConfig | object | ❌ | Insider Stripo configuration |
78
+
79
+ ### Extensions
80
+ | Extension | Type | Default | Description |
81
+ |----------------|-----------|---------|--------------------------------|
82
+ | dynamicContent | boolean | true | Dynamic content functionality |
83
+ | unsubPages | boolean | true | Unsubscribe pages feature |
84
+ | header | boolean | true | Header customization |
85
+ | footer | boolean | true | Footer customization |
86
+
87
+ ### Insider Stripo Configuration
88
+ | Property | Type | Default | Description |
89
+ |-------------------|----------|---------|--------------------------------|
90
+ | translationsPath | string | 'window.trans.en | JS Path to translations file |
91
+
92
+ ### API Endpoints
93
+ | Endpoint | Default Path | Description |
94
+ |-------------------|------------------------|--------------------------------|
95
+ | dynamicContent | /api/dynamic-content | Dynamic content endpoint |
96
+ | unsubPages | /api/unsub-pages | Unsubscribe pages endpoint |
97
+ | header | /api/header | Header endpoint |
98
+ | footer | /api/footer | Footer endpoint |
99
+ | productName | /api/product-name | Product name endpoint |
100
+ | productVersion | /api/product-version | Product version endpoint |
101
+ | token | /api/stripo-token | Authentication token endpoint |
102
+
103
+ ### Events
104
+ | Event | Payload | Description |
105
+ |-------------------|------------------------|--------------------------------|
106
+ | `save` | any | Triggered on save |
107
+ | `export:requested`| void | Triggered when export starts |
108
+ | `export:ready` | { html: string } | Triggered when HTML is ready |
109
+ | `close` | void | Triggered when editor closes |
52
110
 
53
- ### Guido Component Props
54
-
55
- | Prop | Type | Required | Default | Description |
56
- |------|------|----------|---------|-------------|
57
- | `emailId` | `string` | ✅ | - | Unique identifier for the email draft |
58
- | `guidoConfig` | `GuidoConfig` | ✅ | - | Configuration object for the editor |
59
-
60
- ### GuidoConfig Interface
61
-
62
- ```typescript
63
- interface GuidoConfig {
64
- translationsPath: string;
65
- }
66
- ```
67
-
68
- | Property | Type | Default | Description |
69
- |----------|------|---------|-------------|
70
- | `translationsPath` | `string` | `'window.trans.en'` | JavaScript path to the translations object |
71
-
72
- ### TypeScript Types
73
-
74
- The library exports the following TypeScript types:
75
-
76
- ```typescript
77
- // Main component
78
- import { Guido } from '@useinsider/guido';
79
-
80
- // Types
81
- import type { GuidoConfig } from '@useinsider/guido';
82
- import type { StripoEventType } from '@useinsider/guido';
83
- ```
84
-
85
- ### StripoEventType
86
-
87
- ```typescript
88
- type StripoEventType =
89
- | 'save'
90
- | 'export'
91
- | 'close'
92
- | 'autosave'
93
- | 'publish'
94
- | 'export:requested'
95
- | 'export:ready';
96
- ```
97
111
 
98
112
  ---
99
113
 
100
- ## 🔧 Development
101
-
102
- ### Prerequisites
103
-
104
- - 🧄 `Bun` (strongly recommended)
105
- or
106
- - NodeJS 18+ & `npm`
107
-
108
- ### Setup
109
-
114
+ ## 🛠 Development
110
115
  ```bash
111
- # Install dependencies
112
116
  bun install
113
-
114
- # Start development server
115
117
  bun start
116
-
117
- # Build for production
118
- bun run build
119
-
120
- # Type checking
121
- bun run type-check
122
-
123
- # Linting
124
- bun run lint
125
- ```
126
-
127
- ### Environment Variables
128
-
129
- Create a `.env` file with the following variables: (You can get env variables from your senior)
130
-
131
- ```env
132
- VITE_STRIPO_PLUGIN_ID=your_plugin_id
133
- VITE_STRIPO_SECRET_KEY=your_secret_key
134
- VITE_STRIPO_ROLE=your_role
135
- ```
136
-
137
- ### Project Structure
138
-
139
118
  ```
140
- src/
141
- ├── components/
142
- │ ├── Guido.vue # Main component
143
- │ └── organisms/
144
- │ └── top-bar/ # Header components
145
- ...
146
- ├── composables/
147
- │ ├── useStripo.ts # Stripo integration
148
- │ └── useTranslations.ts # Translation management
149
- ├── @types/
150
- │ ├── generic.ts # Generic types
151
- │ ├── stripo.d.ts # Stripo-specific types
152
- │ └── events.ts # Event types
153
- ├── static/
154
- │ ├── editor.css # Custom editor styles
155
- │ └── templates/
156
- │ └── default/ # Default email template
157
- └── library.ts # Main export for library
158
- ```
159
-
160
-
161
- ## 📦 Build Output
162
119
 
163
- The library builds to multiple formats:
164
-
165
- - **ES Module**: `dist/library.js` (recommended)
166
- - **CSS**: `dist/guido.css` (custom styles)
167
-
168
- ### Package Exports
169
-
170
- ```json
171
- {
172
- "exports": {
173
- ".": {
174
- "import": "./dist/library.js",
175
- "types": "./dist/components/Guido.vue.d.ts",
176
- "require": "./dist/components/Guido.vue.js"
177
- },
178
- "./style": "./dist/guido.css"
179
- }
180
- }
120
+ Build & types:
121
+ ```bash
122
+ bun run build
181
123
  ```
182
124
 
183
-
184
- ## 🤝 Contributing
185
- - PR Titles should be structured like `TASK-ID | 🔥 | Some Clear Task Descriptions`
186
- - PR Labels should be filled.
187
- - PR Assignee required.
188
- - Tests should be covered.
189
- - All required checks should be passed before sending review request.
190
-
191
- ## 📄 License
192
-
193
- ISC License
194
-
195
125
  ---
196
126
 
197
- ## 🔗 Related
198
-
199
- - [Stripo Email Editor](https://stripo.email/) - The underlying email editor
200
- - [@useinsider/design-system-vue](https://github.com/useinsider/design-system-vue) - Insider's Vue design system
201
-
202
- ## 🎯 TODO:
203
- - [editor.css](src/static/editor.css) should be optimized with variables & `sass-loader`.
204
- - Master Version Generator should be fixed.
205
- - Playwright integration
206
- - Commitlint & Precommit Hooks integration
127
+ TODO:
128
+ [ ] - Default Template @edugencioglu
129
+ [ ] - Using CSS variables into [editor.css](./src/static/editor.css) @berkansezer-useinsider
@@ -1,3 +1,6 @@
1
- export type GuidoConfig = {
1
+ export type Translations = {
2
+ [key: string]: string;
3
+ };
4
+ export type InsiderStripoConfig = {
2
5
  translationsPath: string;
3
6
  };
@@ -1,7 +1,5 @@
1
- import type { GuidoConfig } from '@@/Types/generic';
2
1
  type __VLS_Props = {
3
2
  emailId: string;
4
- guidoConfig: GuidoConfig;
5
3
  };
6
4
  declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
7
5
  export default _default;
@@ -2,17 +2,17 @@ import o from "./Guido.vue2.js";
2
2
  /* empty css */
3
3
  import i from "../_virtual/_plugin-vue2_normalizer.js";
4
4
  var s = function() {
5
- var e = this, r = e._self._c, t = e._self._setupProxy;
6
- return r("div", { staticClass: "guido-editor__wrapper" }, [r(t.Header), r("div", { staticClass: "guido-editor__container", attrs: { id: "guido-editor" } })], 1);
7
- }, _ = [], a = /* @__PURE__ */ i(
5
+ var t = this, r = t._self._c, e = t._self._setupProxy;
6
+ return r("div", { staticClass: "guido-editor-wrapper" }, [r(e.Header), r("div", { staticClass: "guido-editor-container", attrs: { id: "guido-editor" } })], 1);
7
+ }, a = [], n = /* @__PURE__ */ i(
8
8
  o,
9
9
  s,
10
- _,
10
+ a,
11
11
  !1,
12
12
  null,
13
- "ef4897b1"
13
+ "c14163ad"
14
14
  );
15
- const p = a.exports;
15
+ const f = n.exports;
16
16
  export {
17
- p as default
17
+ f as default
18
18
  };
@@ -1,31 +1,24 @@
1
- import { defineComponent as n, onMounted as a } from "vue";
1
+ import { defineComponent as a, onMounted as n } from "vue";
2
2
  import { useStripo as m } from "../composables/useStripo.js";
3
3
  import { useTemplates as p } from "../composables/useTemplates.js";
4
- import { DefaultGuidoConfig as u } from "../enums/defaults.js";
5
- import l from "./organisms/top-bar/Header.vue.js";
6
- const _ = /* @__PURE__ */ n({
4
+ import s from "./organisms/top-bar/Header.vue.js";
5
+ const f = /* @__PURE__ */ a({
7
6
  __name: "Guido",
8
7
  props: {
9
- emailId: null,
10
- guidoConfig: null
8
+ emailId: null
11
9
  },
12
- setup(r) {
13
- const o = r;
14
- window.GuidoConfig = {
15
- ...u,
16
- ...o.guidoConfig
17
- };
18
- const { initPlugin: i } = m(o.emailId), { getDefaultTemplate: e } = p();
19
- return a(async () => {
10
+ setup(i) {
11
+ const e = i, { initPlugin: o } = m(e.emailId), { getDefaultTemplate: r } = p();
12
+ return n(async () => {
20
13
  try {
21
- const t = await e();
22
- await i(t);
14
+ const t = await r();
15
+ await o(t);
23
16
  } catch (t) {
24
17
  console.error("Failed to initialize Stripo editor:", t);
25
18
  }
26
- }), { __sfc: !0, props: o, initPlugin: i, getDefaultTemplate: e, Header: l };
19
+ }), { __sfc: !0, props: e, initPlugin: o, getDefaultTemplate: r, Header: s };
27
20
  }
28
21
  });
29
22
  export {
30
- _ as default
23
+ f as default
31
24
  };
@@ -1,17 +1,17 @@
1
- import n from "./HeaderMiddleSlot.vue2.js";
1
+ import o from "./HeaderMiddleSlot.vue2.js";
2
2
  import s from "../../../_virtual/_plugin-vue2_normalizer.js";
3
- var i = function() {
4
- var o = this, e = o._self._c, t = o._self._setupProxy;
5
- return e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__code-button", "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") } }), 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.trans("newsletter.email-preview") } })], 1);
6
- }, l = [], r = /* @__PURE__ */ s(
7
- n,
8
- i,
3
+ var l = function() {
4
+ var n = this, t = n._self._c, e = n._self._setupProxy;
5
+ return t("div", { staticClass: "d-f" }, [t(e.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__code-button", "left-icon": "line-code", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1 } })], 1);
6
+ }, a = [], i = /* @__PURE__ */ s(
7
+ o,
9
8
  l,
9
+ a,
10
10
  !1,
11
11
  null,
12
12
  null
13
13
  );
14
- const _ = r.exports;
14
+ const _ = i.exports;
15
15
  export {
16
16
  _ as default
17
17
  };
@@ -1,19 +1,11 @@
1
- import { defineComponent as i } from "vue";
2
- import { useEditorStore as n } from "../../../stores/editor.js";
3
- import { InButtonV2 as s } from "@useinsider/design-system-vue";
4
- import { useTranslations as r } from "../../../composables/useTranslations.js";
5
- const l = /* @__PURE__ */ i({
1
+ import { defineComponent as e } from "vue";
2
+ import { InButtonV2 as t } from "@useinsider/design-system-vue";
3
+ const _ = /* @__PURE__ */ e({
6
4
  __name: "HeaderMiddleSlot",
7
- setup(p) {
8
- const t = n(), { trans: o } = r();
9
- return { __sfc: !0, editorStore: t, trans: o, getTooltipOptions: (e) => ({
10
- id: `${e}-tooltip`,
11
- dynamicPosition: !1,
12
- staticPosition: "bottom center",
13
- iconStatus: !1
14
- }), InButtonV2: s };
5
+ setup(o) {
6
+ return { __sfc: !0, InButtonV2: t };
15
7
  }
16
8
  });
17
9
  export {
18
- l as default
10
+ _ as default
19
11
  };
@@ -1,2 +1,2 @@
1
- declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
1
+ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
2
2
  export default _default;
@@ -1,18 +1,18 @@
1
- import o from "./HeaderRightSlot.vue2.js";
1
+ import n from "./HeaderRightSlot.vue2.js";
2
2
  /* empty css */
3
- import a from "../../../_virtual/_plugin-vue2_normalizer.js";
4
- var n = function() {
3
+ import o from "../../../_virtual/_plugin-vue2_normalizer.js";
4
+ var a = function() {
5
5
  var s = this, t = s._self._c, e = s._self._setupProxy;
6
- return t("div", { staticClass: "d-f header-right-slot" }, [t("div", { staticClass: "d-f" }, [t(e.HeaderViewOptions)], 1), t("div", { staticClass: "d-f" }, [t(e.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "label-text-status": !1 } })], 1), t(e.InButtonV2, { attrs: { id: "guido__save-button", "label-text": "Save" } })], 1);
7
- }, i = [], r = /* @__PURE__ */ a(
8
- o,
6
+ return t("div", { staticClass: "d-f header-right-slot" }, [t("div", { staticClass: "d-f" }, [t(e.InSegments, { attrs: { id: "preview-platform-selection", "with-icon": "", selected: "desktop", "segment-list": e.segmentList } })], 1), t("div", { staticClass: "d-f" }, [t(e.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "label-text-status": !1 } })], 1), t(e.InButtonV2, { attrs: { id: "guido__save-button", "label-text": "Save" } })], 1);
7
+ }, i = [], l = /* @__PURE__ */ o(
9
8
  n,
9
+ a,
10
10
  i,
11
11
  !1,
12
12
  null,
13
- "94ef50f1"
13
+ "9d879f6f"
14
14
  );
15
- const c = r.exports;
15
+ const u = l.exports;
16
16
  export {
17
- c as default
17
+ u as default
18
18
  };
@@ -1,12 +1,14 @@
1
- import { defineComponent as t } from "vue";
2
- import { InButtonV2 as e } from "@useinsider/design-system-vue";
3
- import o from "./HeaderViewOptions.vue.js";
4
- const i = /* @__PURE__ */ t({
1
+ import { defineComponent as e } from "vue";
2
+ import { InSegments as t, InButtonV2 as n } from "@useinsider/design-system-vue";
3
+ const p = /* @__PURE__ */ e({
5
4
  __name: "HeaderRightSlot",
6
- setup(r) {
7
- return { __sfc: !0, InButtonV2: e, HeaderViewOptions: o };
5
+ setup(o) {
6
+ return { __sfc: !0, segmentList: [
7
+ { text: "", icon: "line-desktop", value: "desktop" },
8
+ { text: "", icon: "line-menu-mobileapp", value: "mobile" }
9
+ ], InButtonV2: n, InSegments: t };
8
10
  }
9
11
  });
10
12
  export {
11
- i as default
13
+ p as default
12
14
  };
@@ -1,4 +1,4 @@
1
- import type { Template } from '@@/Types/stripo';
1
+ import type { Template } from '@@types/stripo';
2
2
  export declare const useStripo: (emailId: string) => {
3
3
  initPlugin: (template: Template) => Promise<void>;
4
4
  };
@@ -1,10 +1,9 @@
1
- import { useCustomInterfaceAppearance as u } from "./useCustomInterfaceAppearance.js";
2
- import { useEditorStore as l } from "../stores/editor.js";
3
- const g = (s) => {
1
+ import { useCustomInterfaceAppearance as d } from "./useCustomInterfaceAppearance.js";
2
+ const u = (s) => {
4
3
  const c = () => {
5
4
  const t = new Headers();
6
5
  t.append("Content-Type", "application/json");
7
- const r = JSON.stringify({
6
+ const o = JSON.stringify({
8
7
  pluginId: void 0,
9
8
  secretKey: void 0,
10
9
  role: void 0,
@@ -13,11 +12,11 @@ const g = (s) => {
13
12
  return fetch("/v2/stripo/get-token", {
14
13
  method: "POST",
15
14
  headers: t,
16
- body: r,
15
+ body: o,
17
16
  redirect: "follow"
18
- }).then((o) => o.json());
19
- }, d = (t) => {
20
- const r = l(), n = t.html, o = t.css;
17
+ }).then((e) => e.json());
18
+ }, i = (t) => {
19
+ const o = t.html, n = t.css;
21
20
  window.UIEditor.initEditor(
22
21
  document.querySelector("#guido-editor"),
23
22
  {
@@ -27,55 +26,43 @@ const g = (s) => {
27
26
  username: "Plugin Demo User"
28
27
  },
29
28
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
30
- html: n,
29
+ html: o,
31
30
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
32
- css: o,
31
+ css: n,
33
32
  locale: "en",
34
- undoButtonSelector: "#guido__undo-button",
35
- redoButtonSelector: "#guido__redo-button",
36
- mobileViewButtonSelector: ".guido__view-option-selection-mobile",
37
- desktopViewButtonSelector: ".guido__view-option-selection-desktop",
38
- versionHistoryButtonSelector: "#guido__history-button",
39
- codeEditorButtonSelector: "#guido__code-button",
40
33
  async onTokenRefreshRequest(e) {
41
34
  try {
42
- const i = await c();
43
- e(i.token);
44
- } catch (i) {
45
- console.error("Failed to refresh token:", i);
35
+ const r = await c();
36
+ e(r.token);
37
+ } catch (r) {
38
+ console.error("Failed to refresh token:", r);
46
39
  }
47
40
  },
48
41
  onTemplateLoaded() {
49
42
  try {
50
- const { importCss: e } = u();
43
+ const { importCss: e } = d();
51
44
  e();
52
45
  } catch (e) {
53
46
  console.error("Failed to load custom interface appearance:", e);
54
47
  }
55
- },
56
- onCodeEditorVisibilityChanged(e) {
57
- r.isCodeEditorOpen = e;
58
- },
59
- onEditorVisualModeChanged(e) {
60
- r.editorVisualMode = e.toLowerCase();
61
48
  }
62
49
  }
63
50
  );
64
51
  };
65
- return { initPlugin: (t) => new Promise((r, n) => {
52
+ return { initPlugin: (t) => new Promise((o, n) => {
66
53
  if (document.getElementById("UiEditorScript")) {
67
- d(t), r();
54
+ i(t), o();
68
55
  return;
69
56
  }
70
- const o = document.createElement("script");
71
- o.id = "UiEditorScript", o.type = "module", o.src = "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js", o.onload = () => {
72
- d(t), r();
73
- }, o.onerror = () => {
74
- const e = new Error("Failed to load Stripo UIEditor script");
75
- n(e);
76
- }, document.body.appendChild(o);
57
+ const e = document.createElement("script");
58
+ e.id = "UiEditorScript", e.type = "module", e.src = "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js", e.onload = () => {
59
+ i(t), o();
60
+ }, e.onerror = () => {
61
+ const r = new Error("Failed to load Stripo UIEditor script");
62
+ n(r);
63
+ }, document.body.appendChild(e);
77
64
  }) };
78
65
  };
79
66
  export {
80
- g as useStripo
67
+ u as useStripo
81
68
  };
@@ -1,4 +1,4 @@
1
- import type { Template } from '@@/Types/stripo';
1
+ import type { Template } from '@@types/stripo';
2
2
  export declare const useTemplates: () => {
3
3
  getDefaultTemplate: () => Promise<Template>;
4
4
  getTemplate: (templateName: string) => Promise<Template>;
@@ -0,0 +1,18 @@
1
+ export declare const DefaultApiEndpoints: {
2
+ dynamicContent: string;
3
+ unsubPages: string;
4
+ header: string;
5
+ footer: string;
6
+ productName: string;
7
+ productVersion: string;
8
+ token: string;
9
+ };
10
+ export declare const DefaultExtensions: {
11
+ dynamicContent: boolean;
12
+ unsubPages: boolean;
13
+ header: boolean;
14
+ footer: boolean;
15
+ };
16
+ export declare const DefaultConfig: {
17
+ translationsPath: string;
18
+ };
package/dist/guido.css CHANGED
@@ -1 +1 @@
1
- [data-v-f67c82be] .guido__view-option-selection-desktop svg,[data-v-f67c82be] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}.header-right-slot[data-v-94ef50f1]{gap:16px}.guido-editor__wrapper[data-v-ef4897b1],.guido-editor__container[data-v-ef4897b1]{width:100%;height:100vh}
1
+ .header-right-slot[data-v-9d879f6f]{gap:16px}[data-v-9d879f6f] .preview-platform-selection-desktop svg,[data-v-9d879f6f] .preview-platform-selection-mobile svg{margin:0 0 0 2px}.guido-editor-wrapper[data-v-c14163ad],.guido-editor-container[data-v-c14163ad]{width:100%;height:100vh}
package/dist/library.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  export { default as Guido } from './components/Guido.vue';
2
2
  export type { StripoEventType } from './@types/events';
3
- export type * from './@types/generic';
@@ -0,0 +1,12 @@
1
+ export declare const useCounterStore: import("pinia").StoreDefinition<"counter", {
2
+ count: number;
3
+ }, {
4
+ doubleCount: (state: {
5
+ count: number;
6
+ } & import("pinia").PiniaCustomStateProperties<{
7
+ count: number;
8
+ }>) => number;
9
+ }, {
10
+ increment(): void;
11
+ decrement(): void;
12
+ }>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useinsider/guido",
3
- "version": "1.0.0-beta.f2786f4",
3
+ "version": "1.0.0-beta.f2fcf4d",
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",