@useinsider/guido 1.0.0-beta.e08abf8 → 1.0.0-beta.e096204
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.
- package/README.md +28 -203
- package/dist/@types/generic.d.ts +0 -5
- package/dist/App.vue.d.ts +1 -1
- package/dist/components/Guido.vue.d.ts +3 -16
- package/dist/components/Guido.vue.js +1 -1
- package/dist/components/Guido.vue2.js +24 -61
- package/dist/components/organisms/header/LeftSlot.vue.js +5 -5
- package/dist/components/organisms/header/LeftSlot.vue2.js +8 -10
- package/dist/components/organisms/header/RightSlot.vue.d.ts +1 -1
- package/dist/components/organisms/header/RightSlot.vue.js +1 -1
- package/dist/components/organisms/header/RightSlot.vue2.js +14 -28
- package/dist/components/organisms/header/ViewOptions.vue.d.ts +1 -1
- package/dist/components/organisms/header/version-history/RestoreButton.vue.d.ts +1 -1
- package/dist/components/organisms/header/version-history/VersionHistoryItem.vue.d.ts +1 -1
- package/dist/components/organisms/header/version-history/VersionHistoryItem.vue.js +1 -1
- package/dist/components/organisms/header/version-history/ViewOptions.vue.d.ts +1 -1
- package/dist/composables/useActionsApi.d.ts +0 -1
- package/dist/composables/useActionsApi.js +12 -14
- package/dist/composables/useStripo.js +29 -41
- package/dist/composables/useTemplates.d.ts +5 -0
- package/dist/composables/useTemplates.js +27 -0
- package/dist/guido.css +1 -1
- package/dist/services/stripoApi.d.ts +1 -2
- package/dist/services/stripoApi.js +7 -27
- package/dist/static/templates/default/index.html.js +5 -0
- package/dist/static/templates/default/style.css.js +119 -0
- package/package.json +1 -2
- package/dist/_virtual/AddCustomFont.js +0 -4
- package/dist/_virtual/AiAssistantValueType.js +0 -4
- package/dist/_virtual/BackgroundColorBuiltInControl.js +0 -4
- package/dist/_virtual/BackgroundImageBuiltInControl.js +0 -4
- package/dist/_virtual/Block.js +0 -4
- package/dist/_virtual/BlockAttributes.js +0 -4
- package/dist/_virtual/BlockCompositionType.js +0 -4
- package/dist/_virtual/BlockPaddingsBuiltInControl.js +0 -4
- package/dist/_virtual/BlockRenderer.js +0 -4
- package/dist/_virtual/BlockType.js +0 -4
- package/dist/_virtual/BlocksPanel.js +0 -4
- package/dist/_virtual/BuiltInControl.js +0 -4
- package/dist/_virtual/BuiltInControlTypes.js +0 -4
- package/dist/_virtual/ButtonBorderBuiltInControl.js +0 -4
- package/dist/_virtual/ButtonColorBuiltInControl.js +0 -4
- package/dist/_virtual/ButtonFontColorBuiltInControl.js +0 -4
- package/dist/_virtual/ButtonInternalIndentsBuiltInControl.js +0 -4
- package/dist/_virtual/ButtonTextBuiltInControl.js +0 -4
- package/dist/_virtual/ContextAction.js +0 -4
- package/dist/_virtual/ContextActionType.js +0 -4
- package/dist/_virtual/Control.js +0 -4
- package/dist/_virtual/EditorStatePropertyType.js +0 -4
- package/dist/_virtual/Extension.js +0 -4
- package/dist/_virtual/ExtensionBuilder.js +0 -4
- package/dist/_virtual/FontFamilyBuiltInControl.js +0 -4
- package/dist/_virtual/LinkColorBuiltInControl.js +0 -4
- package/dist/_virtual/ModificationDescription.js +0 -4
- package/dist/_virtual/PanelPosition.js +0 -4
- package/dist/_virtual/PreviewDeviceMode.js +0 -4
- package/dist/_virtual/SettingsPanelRegistry.js +0 -4
- package/dist/_virtual/SettingsPanelTab.js +0 -4
- package/dist/_virtual/SettingsTab.js +0 -4
- package/dist/_virtual/StructureBorderBuiltInControl.js +0 -4
- package/dist/_virtual/StructurePaddingsBuiltInControl.js +0 -4
- package/dist/_virtual/TextColorBuiltInControl.js +0 -4
- package/dist/_virtual/TextLineSpacingBuiltInControl.js +0 -4
- package/dist/_virtual/TextSizeBuiltInControl.js +0 -4
- package/dist/_virtual/TextStyleBuiltInControl.js +0 -4
- package/dist/_virtual/UIElement.js +0 -4
- package/dist/_virtual/UIElementTagRegistry.js +0 -4
- package/dist/_virtual/UIElementType.js +0 -4
- package/dist/_virtual/UIElementsAttributes.js +0 -4
- package/dist/_virtual/index.js +0 -5
- package/dist/_virtual/index2.js +0 -4
- package/dist/composables/useGuidoActions.d.ts +0 -46
- package/dist/composables/useGuidoActions.js +0 -37
- package/dist/composables/useProvideInject.d.ts +0 -14
- package/dist/composables/useProvideInject.js +0 -17
- package/dist/extensions/DynamicContent/dynamic-content-modal.d.ts +0 -6
- package/dist/extensions/DynamicContent/dynamic-content-modal.js +0 -27
- package/dist/extensions/DynamicContent/dynamic-content.css.js +0 -24
- package/dist/extensions/DynamicContent/dynamic-content.d.ts +0 -16
- package/dist/extensions/DynamicContent/dynamic-content.js +0 -63
- package/dist/extensions/DynamicContent/extension.d.ts +0 -2
- package/dist/extensions/DynamicContent/extension.js +0 -11
- package/dist/mock/api/default-template.d.ts +0 -2
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/Extension.js +0 -51
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/ExtensionBuilder.js +0 -52
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/blocks/Block.js +0 -41
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/blocks/BlockRenderer.js +0 -18
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/blocks/BlocksPanel.js +0 -32
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/blocks/ContextAction.js +0 -18
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/AddCustomFont.js +0 -8
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js +0 -13
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockAttributes.js +0 -34
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js +0 -13
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js +0 -13
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js +0 -104
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js +0 -13
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js +0 -13
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js +0 -13
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js +0 -13
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js +0 -13
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js +0 -13
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementsAttributes.js +0 -45
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/BackgroundColorBuiltInControl.js +0 -43
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/BackgroundImageBuiltInControl.js +0 -46
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/BlockPaddingsBuiltInControl.js +0 -44
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/BuiltInControl.js +0 -22
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/ButtonBorderBuiltInControl.js +0 -46
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/ButtonColorBuiltInControl.js +0 -46
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/ButtonFontColorBuiltInControl.js +0 -45
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/ButtonInternalIndentsBuiltInControl.js +0 -45
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/ButtonTextBuiltInControl.js +0 -45
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/Control.js +0 -20
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/FontFamilyBuiltInControl.js +0 -43
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/LinkColorBuiltInControl.js +0 -45
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelRegistry.js +0 -18
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelTab.js +0 -32
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/StructureBorderBuiltInControl.js +0 -46
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/StructurePaddingsBuiltInControl.js +0 -44
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/TextColorBuiltInControl.js +0 -43
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/TextLineSpacingBuiltInControl.js +0 -43
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/TextSizeBuiltInControl.js +0 -45
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/TextStyleBuiltInControl.js +0 -43
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/index.js +0 -266
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/modifications/ModificationDescription.js +0 -26
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/ui-elements/UIElement.js +0 -22
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/ui-elements/UIElementTagRegistry.js +0 -18
package/README.md
CHANGED
|
@@ -14,10 +14,7 @@ Guido is a Vue 2 + TypeScript wrapper for the Stripo Email Editor plugin. Easily
|
|
|
14
14
|
```bash
|
|
15
15
|
npm install @useinsider/guido
|
|
16
16
|
```
|
|
17
|
-
### Prerequisites
|
|
18
|
-
🍍 Your project should have `pinia`
|
|
19
17
|
|
|
20
|
-
---
|
|
21
18
|
## 🚀 Usage
|
|
22
19
|
|
|
23
20
|
### Basic Usage
|
|
@@ -26,16 +23,9 @@ npm install @useinsider/guido
|
|
|
26
23
|
<template>
|
|
27
24
|
<div>
|
|
28
25
|
<Guido
|
|
29
|
-
|
|
30
|
-
:template-id="templateId"
|
|
26
|
+
:email-id="emailId"
|
|
31
27
|
:user-id="userId"
|
|
32
28
|
:guido-config="guidoConfig"
|
|
33
|
-
:html="initialHtml"
|
|
34
|
-
:css="initialCss"
|
|
35
|
-
@dynamic-content:open="handleDynamicContentOpen"
|
|
36
|
-
@back="handleBack"
|
|
37
|
-
@save:start="handleSaveStart"
|
|
38
|
-
@save:complete="handleSaveComplete"
|
|
39
29
|
/>
|
|
40
30
|
</div>
|
|
41
31
|
</template>
|
|
@@ -49,55 +39,14 @@ export default {
|
|
|
49
39
|
},
|
|
50
40
|
data() {
|
|
51
41
|
return {
|
|
52
|
-
|
|
53
|
-
userId: '
|
|
54
|
-
initialHtml: '<p>Initial HTML content</p>',
|
|
55
|
-
initialCss: 'p { color: #333; }',
|
|
42
|
+
emailId: 'abc123',
|
|
43
|
+
userId: '12345',
|
|
56
44
|
guidoConfig: {
|
|
57
|
-
translationsPath: 'window.trans.en'
|
|
45
|
+
translationsPath: 'window.trans.en'
|
|
58
46
|
htmlCompilerRules: [],
|
|
59
47
|
ignoreDefaultHtmlCompilerRules: false,
|
|
60
|
-
}
|
|
61
|
-
dynamicContentModalVisible: false
|
|
48
|
+
}
|
|
62
49
|
};
|
|
63
|
-
},
|
|
64
|
-
|
|
65
|
-
methods: {
|
|
66
|
-
handleDynamicContentOpen(detail) {
|
|
67
|
-
console.log('Dynamic content requested:', detail);
|
|
68
|
-
this.dynamicContentModalVisible = true;
|
|
69
|
-
},
|
|
70
|
-
|
|
71
|
-
handleBack() {
|
|
72
|
-
console.log('User clicked back button');
|
|
73
|
-
// Handle navigation back
|
|
74
|
-
},
|
|
75
|
-
|
|
76
|
-
handleSaveStart() {
|
|
77
|
-
console.log('Save process started');
|
|
78
|
-
// Show loading indicator
|
|
79
|
-
},
|
|
80
|
-
|
|
81
|
-
handleSaveComplete(template) {
|
|
82
|
-
console.log('Save completed:', template);
|
|
83
|
-
// Handle saved template data
|
|
84
|
-
},
|
|
85
|
-
|
|
86
|
-
// ⚠️ Your own Dynamic Content Modal should have this id: #guido-dynamic-content-modal
|
|
87
|
-
handleDynamicContentInsert() {
|
|
88
|
-
this.$refs.guidoEditor?.dynamicContent.insert({
|
|
89
|
-
text: 'Display Text',
|
|
90
|
-
value: 'actual-value',
|
|
91
|
-
fallback: 'Fallback Text'
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
this.dynamicContentModalVisible = false;
|
|
95
|
-
},
|
|
96
|
-
|
|
97
|
-
// ⚠️ It's mandatory. There is no way to understand if user closes the modal without selection.
|
|
98
|
-
handleDynamicContentClose() {
|
|
99
|
-
this.$refs.guidoEditor?.dynamicContent.close();
|
|
100
|
-
}
|
|
101
50
|
}
|
|
102
51
|
};
|
|
103
52
|
</script>
|
|
@@ -109,31 +58,14 @@ export default {
|
|
|
109
58
|
|
|
110
59
|
| Prop | Type | Required | Default | Description |
|
|
111
60
|
|------|------|----------|---------|-------------|
|
|
112
|
-
| `
|
|
113
|
-
| `userId` | `string` | ✅ | - | Unique identifier for the user |
|
|
61
|
+
| `emailId` | `string` | ✅ | - | Unique identifier for the email draft |
|
|
62
|
+
| `userId` | `string` | ✅ | - | Unique identifier for the user draft |
|
|
63
|
+
| `username` | `string` | ⚪ | Guido User | User name |
|
|
64
|
+
| `partnerName` | `string` | ⚪ | Getting from URL host | Unique identifier for the partner draft |
|
|
65
|
+
| `productType` | `string` | ⚪ | Getting from URL path | Unique identifier for the product draft |
|
|
114
66
|
| `guidoConfig` | `GuidoConfig` | ✅ | - | Configuration object for the editor |
|
|
115
|
-
| `partnerName` | `string` | ⚪ | From URL host | Partner identifier |
|
|
116
|
-
| `productType` | `string` | ⚪ | From URL path | Product type identifier |
|
|
117
|
-
| `username` | `string` | ⚪ | `'Guido User'` | Display name for the user |
|
|
118
|
-
| `html` | `string` | ⚪ | `''` | Initial HTML content for the template |
|
|
119
|
-
| `css` | `string` | ⚪ | `''` | Initial CSS styles for the template |
|
|
120
|
-
|
|
121
|
-
### Guido Component Events
|
|
122
|
-
|
|
123
|
-
| Event | Payload | Description |
|
|
124
|
-
|-------|---------|-------------|
|
|
125
|
-
| `dynamic-content:open` | `DynamicContent \| null` | Fired when user requests to insert dynamic content |
|
|
126
|
-
| `back` | - | Fired when user clicks the back button |
|
|
127
|
-
| `save:start` | - | Fired when the save process begins |
|
|
128
|
-
| `save:complete` | `Omit<Template, 'forceRecreate'>` | Fired when template is successfully saved |
|
|
129
|
-
|
|
130
|
-
### Guido Exposed Methods
|
|
131
|
-
```typescript
|
|
132
|
-
dynamicContent.insert(DynamicContent);
|
|
133
|
-
dynamicContent.close();
|
|
134
|
-
```
|
|
135
67
|
|
|
136
|
-
###
|
|
68
|
+
### GuidoConfig Interface
|
|
137
69
|
|
|
138
70
|
```typescript
|
|
139
71
|
interface GuidoConfig {
|
|
@@ -149,21 +81,6 @@ interface GuidoConfig {
|
|
|
149
81
|
| `htmlCompilerRules` | `CompilerRule[]` | `[]` | Additional compiler rules to apply to HTML content. See [HTML Compiler Rules](#-html-compiler-rules) section below |
|
|
150
82
|
| `ignoreDefaultHtmlCompilerRules` | `boolean` | `false` | Skip default compiler rules and only use custom rules. Default rules: `src/config/compiler/htmlCompilerRules.ts` |
|
|
151
83
|
|
|
152
|
-
```typescript
|
|
153
|
-
interface DynamicContent {
|
|
154
|
-
value: string;
|
|
155
|
-
text: string;
|
|
156
|
-
fallback?: string;
|
|
157
|
-
}
|
|
158
|
-
```
|
|
159
|
-
---
|
|
160
|
-
|
|
161
|
-
| Property | Type | Default | Description |
|
|
162
|
-
|----------|------|---------|-------------|
|
|
163
|
-
| `value` | `string` | '' | Value of the dynamic content |
|
|
164
|
-
| `text` | `string` | '' | Visible value of the dynamic content |
|
|
165
|
-
| `fallback?` | `string` | '' | Fallback value of the dynamic content. Optional |
|
|
166
|
-
|
|
167
84
|
### TypeScript Types
|
|
168
85
|
|
|
169
86
|
The library exports the following TypeScript types:
|
|
@@ -177,6 +94,19 @@ import type { GuidoConfig } from '@useinsider/guido';
|
|
|
177
94
|
import type { StripoEventType } from '@useinsider/guido';
|
|
178
95
|
```
|
|
179
96
|
|
|
97
|
+
### StripoEventType
|
|
98
|
+
|
|
99
|
+
```typescript
|
|
100
|
+
type StripoEventType =
|
|
101
|
+
| 'save'
|
|
102
|
+
| 'export'
|
|
103
|
+
| 'close'
|
|
104
|
+
| 'autosave'
|
|
105
|
+
| 'publish'
|
|
106
|
+
| 'export:requested'
|
|
107
|
+
| 'export:ready';
|
|
108
|
+
```
|
|
109
|
+
|
|
180
110
|
## 🔨 HTML Compiler Rules
|
|
181
111
|
|
|
182
112
|
Guido includes a powerful HTML compiler system that allows you to transform HTML content with custom rules. You can define additional rules and optionally ignore the default rules.
|
|
@@ -412,87 +342,6 @@ src/
|
|
|
412
342
|
└── library.ts # Main export
|
|
413
343
|
```
|
|
414
344
|
|
|
415
|
-
## 🔌 Provide/Inject Utilities
|
|
416
|
-
|
|
417
|
-
Guido includes type-safe utilities for Vue's provide/inject system to facilitate dependency injection between components.
|
|
418
|
-
|
|
419
|
-
### useProvideInject
|
|
420
|
-
|
|
421
|
-
The `useProvideInject` composable provides two helper functions for type-safe dependency injection:
|
|
422
|
-
|
|
423
|
-
#### Basic Usage
|
|
424
|
-
|
|
425
|
-
```typescript
|
|
426
|
-
// Parent component
|
|
427
|
-
import { provideValue } from '@useinsider/guido';
|
|
428
|
-
import { InjectionKey } from 'vue';
|
|
429
|
-
|
|
430
|
-
// Define a typed injection key
|
|
431
|
-
const MyServiceKey: InjectionKey<MyService> = Symbol('MyService');
|
|
432
|
-
|
|
433
|
-
// Provide the value
|
|
434
|
-
const myService = new MyService();
|
|
435
|
-
provideValue(MyServiceKey, myService);
|
|
436
|
-
|
|
437
|
-
// Child component
|
|
438
|
-
import { useInjectedValue } from '@useinsider/guido';
|
|
439
|
-
|
|
440
|
-
// Inject the value with type safety
|
|
441
|
-
const myService = useInjectedValue(MyServiceKey);
|
|
442
|
-
```
|
|
443
|
-
|
|
444
|
-
#### With Default Value
|
|
445
|
-
|
|
446
|
-
```typescript
|
|
447
|
-
// Inject with a fallback value
|
|
448
|
-
const myService = useInjectedValue(MyServiceKey, new DefaultService());
|
|
449
|
-
```
|
|
450
|
-
|
|
451
|
-
#### Error Handling
|
|
452
|
-
|
|
453
|
-
The `useInjectedValue` function will throw a descriptive error if no provider is found and no default value is provided:
|
|
454
|
-
|
|
455
|
-
```typescript
|
|
456
|
-
// This will throw an error if no provider exists
|
|
457
|
-
try {
|
|
458
|
-
const myService = useInjectedValue(MyServiceKey);
|
|
459
|
-
} catch (error) {
|
|
460
|
-
console.error('No provider found for MyService');
|
|
461
|
-
}
|
|
462
|
-
```
|
|
463
|
-
|
|
464
|
-
### API Reference
|
|
465
|
-
|
|
466
|
-
#### `provideValue`
|
|
467
|
-
|
|
468
|
-
```typescript
|
|
469
|
-
provideValue<T>(key: InjectionKey<T>, value: T): void
|
|
470
|
-
```
|
|
471
|
-
|
|
472
|
-
Provides a value using Vue's provide system with type safety.
|
|
473
|
-
|
|
474
|
-
| Parameter | Type | Description |
|
|
475
|
-
|-----------|------|-------------|
|
|
476
|
-
| `key` | `InjectionKey<T>` | The typed injection key |
|
|
477
|
-
| `value` | `T` | The value to provide |
|
|
478
|
-
|
|
479
|
-
#### `useInjectedValue`
|
|
480
|
-
|
|
481
|
-
```typescript
|
|
482
|
-
useInjectedValue<T>(key: InjectionKey<T>, defaultValue?: T): T
|
|
483
|
-
```
|
|
484
|
-
|
|
485
|
-
Injects a value using Vue's inject system with type safety and error handling.
|
|
486
|
-
|
|
487
|
-
| Parameter | Type | Required | Description |
|
|
488
|
-
|-----------|------|----------|-------------|
|
|
489
|
-
| `key` | `InjectionKey<T>` | ✅ | The typed injection key |
|
|
490
|
-
| `defaultValue` | `T` | ⚪ | Optional fallback value |
|
|
491
|
-
|
|
492
|
-
**Returns:** `T` - The injected value
|
|
493
|
-
|
|
494
|
-
**Throws:** `Error` - When no provider is found and no default value is provided
|
|
495
|
-
|
|
496
345
|
## 🌐 i18n
|
|
497
346
|
Before running the project, it sends to request to inone.useinsider.com/translations and writes the JSON file into - [trans.json](src/mock/responses/trans.json).
|
|
498
347
|
It allows to use production or local translations on your code. 🚀
|
|
@@ -506,34 +355,6 @@ const trans = useTranslations();
|
|
|
506
355
|
trans('foo.bar')
|
|
507
356
|
```
|
|
508
357
|
|
|
509
|
-
## 📦 Local Building (Recommended)
|
|
510
|
-
|
|
511
|
-
Run this commands if you want to test the package on your local before sending to NPM.
|
|
512
|
-
```sh
|
|
513
|
-
bun run build
|
|
514
|
-
```
|
|
515
|
-
|
|
516
|
-
Since bun does not have packaging yet, use npm here: 🥲
|
|
517
|
-
```sh
|
|
518
|
-
npm pack
|
|
519
|
-
```
|
|
520
|
-
|
|
521
|
-
It'll crate like `useinsider-guido-1.0.0.tgz` file.
|
|
522
|
-
|
|
523
|
-
Move this file to your project path like: `email-fe` via:
|
|
524
|
-
```sh
|
|
525
|
-
cp useinsider-guido-1.0.0.tgz ../email-fe
|
|
526
|
-
```
|
|
527
|
-
|
|
528
|
-
Install the file to your project:
|
|
529
|
-
```sh
|
|
530
|
-
npm i ./useinsider-guido-1.0.0.tgz
|
|
531
|
-
```
|
|
532
|
-
|
|
533
|
-
Then you just need to rebuild to your project or restart the Container. 🎉
|
|
534
|
-
|
|
535
|
-
For Future, we can create a shell script for it. Feel free to help 🙃
|
|
536
|
-
|
|
537
358
|
## 📦 Build Output
|
|
538
359
|
|
|
539
360
|
The library builds to multiple formats:
|
|
@@ -579,4 +400,8 @@ ISC License
|
|
|
579
400
|
- Master Version Generator should be fixed.
|
|
580
401
|
- Playwright integration
|
|
581
402
|
- Commitlint & Precommit Hooks integration
|
|
403
|
+
- We need to emit save event and we should return template config to it
|
|
404
|
+
- Default template should be same with production
|
|
405
|
+
- Open Guido with saved template
|
|
406
|
+
- Get User ID, Email and Unique Template ID as dynamic from props
|
|
582
407
|
- Get Pre-built display conditions from API
|
package/dist/@types/generic.d.ts
CHANGED
package/dist/App.vue.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import '../node_modules/@useinsider/design-system-vue/dist/design-system-vue.css';
|
|
2
|
-
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options
|
|
2
|
+
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<{}>>, {}>;
|
|
3
3
|
export default _default;
|
|
@@ -1,26 +1,13 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { Template } from '@@/Types/stripo';
|
|
1
|
+
import type { GuidoConfig } from '@@/Types/generic';
|
|
3
2
|
type __VLS_Props = {
|
|
4
|
-
|
|
3
|
+
emailId: string;
|
|
5
4
|
userId: string;
|
|
6
5
|
partnerName?: string;
|
|
7
6
|
productType?: string;
|
|
8
7
|
username?: string;
|
|
9
|
-
html?: string;
|
|
10
|
-
css?: string;
|
|
11
8
|
guidoConfig: GuidoConfig;
|
|
12
9
|
};
|
|
13
|
-
declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
|
|
14
|
-
dynamicContent: {
|
|
15
|
-
insert: (data: DynamicContent) => void;
|
|
16
|
-
close: () => void;
|
|
17
|
-
};
|
|
18
|
-
}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
|
|
19
|
-
"dynamic-content:open": (detail: DynamicContent | null) => void;
|
|
20
|
-
back: () => void;
|
|
21
|
-
"save:start": () => void;
|
|
22
|
-
"save:complete": (template: Omit<Template, "forceRecreate">) => void;
|
|
23
|
-
}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
|
|
10
|
+
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>>>, {}>;
|
|
24
11
|
export default _default;
|
|
25
12
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
26
13
|
type __VLS_TypePropsToOption<T> = {
|
|
@@ -1,80 +1,43 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { DefaultUsername as
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
const B = /* @__PURE__ */ h({
|
|
1
|
+
import { defineComponent as f, onMounted as c } from "vue";
|
|
2
|
+
import { usePartner as g } from "../composables/usePartner.js";
|
|
3
|
+
import { useStripo as _ } from "../composables/useStripo.js";
|
|
4
|
+
import { useTemplates as y } from "../composables/useTemplates.js";
|
|
5
|
+
import { DefaultUsername as C, DefaultGuidoConfig as T } from "../enums/defaults.js";
|
|
6
|
+
import w from "./organisms/header/HeaderWrapper.vue.js";
|
|
7
|
+
const h = /* @__PURE__ */ f({
|
|
9
8
|
__name: "Guido",
|
|
10
9
|
props: {
|
|
11
|
-
|
|
10
|
+
emailId: null,
|
|
12
11
|
userId: null,
|
|
13
12
|
partnerName: null,
|
|
14
13
|
productType: null,
|
|
15
14
|
username: null,
|
|
16
|
-
html: null,
|
|
17
|
-
css: null,
|
|
18
15
|
guidoConfig: null
|
|
19
16
|
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
partnerName: d = n(),
|
|
29
|
-
productType: u = a(),
|
|
30
|
-
username: m = _
|
|
17
|
+
setup(d) {
|
|
18
|
+
const o = d, { getPartnerName: r, getProductType: t } = g(), {
|
|
19
|
+
emailId: n,
|
|
20
|
+
userId: i,
|
|
21
|
+
guidoConfig: a,
|
|
22
|
+
partnerName: u = r(),
|
|
23
|
+
productType: p = t(),
|
|
24
|
+
username: m = C
|
|
31
25
|
} = o;
|
|
32
26
|
window.GuidoConfig = {
|
|
33
|
-
...
|
|
34
|
-
...
|
|
27
|
+
...T,
|
|
28
|
+
...a
|
|
35
29
|
};
|
|
36
|
-
const { initPlugin:
|
|
37
|
-
|
|
38
|
-
onBack: () => {
|
|
39
|
-
console.debug("guido:back"), t("back");
|
|
40
|
-
},
|
|
41
|
-
onSaveStart: () => {
|
|
42
|
-
console.debug("guido:save:start"), t("save:start");
|
|
43
|
-
},
|
|
44
|
-
onSaveComplete: (e) => {
|
|
45
|
-
console.debug("guido:save:complete", e), t("save:complete", e);
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
const f = (e) => {
|
|
49
|
-
console.debug("dynamic-content:close", e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
|
|
50
|
-
}, y = () => {
|
|
51
|
-
console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
|
|
52
|
-
};
|
|
53
|
-
return w(async () => {
|
|
54
|
-
console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
|
|
30
|
+
const { initPlugin: l } = _({ emailId: n, userId: i, username: m, partnerName: u, productType: p }), { getDefaultTemplate: s } = y();
|
|
31
|
+
return c(async () => {
|
|
55
32
|
try {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
css: l,
|
|
59
|
-
forceRecreate: !0
|
|
60
|
-
// TODO: It should be false for old templates. We will communicate with Stripo
|
|
61
|
-
};
|
|
62
|
-
e.html || (e = await g()), await p(e);
|
|
33
|
+
const e = await s();
|
|
34
|
+
await l(e);
|
|
63
35
|
} catch (e) {
|
|
64
36
|
console.error("Failed to initialize Stripo editor:", e);
|
|
65
37
|
}
|
|
66
|
-
|
|
67
|
-
const v = e;
|
|
68
|
-
console.debug("dynamic-content:open", v.detail), t("dynamic-content:open", v.detail);
|
|
69
|
-
});
|
|
70
|
-
}), b({
|
|
71
|
-
dynamicContent: {
|
|
72
|
-
insert: f,
|
|
73
|
-
close: y
|
|
74
|
-
}
|
|
75
|
-
}), { __sfc: !0, props: o, getPartnerName: n, getProductType: a, templateId: c, userId: s, guidoConfig: i, html: r, css: l, partnerName: d, productType: u, username: m, emit: t, initPlugin: p, getDefaultTemplate: g, insertDynamicContent: f, closeDynamicContent: y, HeaderWrapper: I };
|
|
38
|
+
}), { __sfc: !0, props: o, getPartnerName: r, getProductType: t, emailId: n, userId: i, guidoConfig: a, partnerName: u, productType: p, username: m, initPlugin: l, getDefaultTemplate: s, HeaderWrapper: w };
|
|
76
39
|
}
|
|
77
40
|
});
|
|
78
41
|
export {
|
|
79
|
-
|
|
42
|
+
h as default
|
|
80
43
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import r from "./LeftSlot.vue2.js";
|
|
2
2
|
import o from "../../../_virtual/_plugin-vue2_normalizer.js";
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
return
|
|
3
|
+
var n = function() {
|
|
4
|
+
var t = this, e = t._self._c, s = t._self._setupProxy;
|
|
5
|
+
return e("div", { staticClass: "d-f a-i-c" }, [e(s.InButtonV2, { staticClass: "p-2", attrs: { id: "guido__back-button", "label-text": "Back", "left-icon": "line-arrow-left", styling: "text", type: "secondary" } }), s.editorStore.isVersionHistoryOpen ? e(s.RestoreButton, { staticClass: "ml-3" }) : t._e()], 1);
|
|
6
6
|
}, a = [], i = /* @__PURE__ */ o(
|
|
7
|
-
n,
|
|
8
7
|
r,
|
|
8
|
+
n,
|
|
9
9
|
a,
|
|
10
10
|
!1,
|
|
11
11
|
null,
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
const c = /* @__PURE__ */ r({
|
|
1
|
+
import { defineComponent as t } from "vue";
|
|
2
|
+
import { useEditorStore as o } from "../../../stores/editor.js";
|
|
3
|
+
import { InButtonV2 as r } from "@useinsider/design-system-vue";
|
|
4
|
+
import e from "./version-history/RestoreButton.vue.js";
|
|
5
|
+
const _ = /* @__PURE__ */ t({
|
|
7
6
|
__name: "LeftSlot",
|
|
8
|
-
setup(
|
|
9
|
-
|
|
10
|
-
return { __sfc: !0, editorStore: o, handleBack: t, InButtonV2: n, RestoreButton: s };
|
|
7
|
+
setup(m) {
|
|
8
|
+
return { __sfc: !0, editorStore: o(), InButtonV2: r, RestoreButton: e };
|
|
11
9
|
}
|
|
12
10
|
});
|
|
13
11
|
export {
|
|
14
|
-
|
|
12
|
+
_ as default
|
|
15
13
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options
|
|
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;
|
|
@@ -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", "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 }
|
|
5
|
+
return e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen }, on: { click: t.handleVersionHistory } }), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 }, on: { click: t.exportHtml } }), e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": t.editorStore.isVersionHistoryOpen } })], 1);
|
|
6
6
|
}, r = [], a = /* @__PURE__ */ i(
|
|
7
7
|
o,
|
|
8
8
|
n,
|
|
@@ -1,35 +1,21 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
import { InButtonV2 as S } from "@useinsider/design-system-vue";
|
|
8
|
-
const E = /* @__PURE__ */ m({
|
|
1
|
+
import { defineComponent as s } from "vue";
|
|
2
|
+
import { useExport as i } from "../../../composables/useExport.js";
|
|
3
|
+
import { useVersionHistoryApi as n } from "../../../composables/useVersionHistoryApi.js";
|
|
4
|
+
import { useEditorStore as p } from "../../../stores/editor.js";
|
|
5
|
+
import { InButtonV2 as m } from "@useinsider/design-system-vue";
|
|
6
|
+
const d = /* @__PURE__ */ s({
|
|
9
7
|
__name: "RightSlot",
|
|
10
|
-
setup(
|
|
11
|
-
const { exportHtml:
|
|
12
|
-
return { __sfc: !0, exportHtml:
|
|
13
|
-
if (
|
|
14
|
-
|
|
8
|
+
setup(f) {
|
|
9
|
+
const { exportHtml: e } = i(), { openVersionHistory: o, closeVersionHistory: r } = n(), t = p();
|
|
10
|
+
return { __sfc: !0, exportHtml: e, openVersionHistory: o, closeVersionHistory: r, editorStore: t, handleVersionHistory: () => {
|
|
11
|
+
if (t.isVersionHistoryOpen) {
|
|
12
|
+
r();
|
|
15
13
|
return;
|
|
16
14
|
}
|
|
17
|
-
|
|
18
|
-
},
|
|
19
|
-
e();
|
|
20
|
-
try {
|
|
21
|
-
const { html: o } = await t();
|
|
22
|
-
r({
|
|
23
|
-
html: o || "",
|
|
24
|
-
css: ""
|
|
25
|
-
// CSS is embedded in HTML from Stripo
|
|
26
|
-
});
|
|
27
|
-
} catch (o) {
|
|
28
|
-
console.error("Failed to get template data for save:", o);
|
|
29
|
-
}
|
|
30
|
-
}, InButtonV2: S };
|
|
15
|
+
o();
|
|
16
|
+
}, InButtonV2: m };
|
|
31
17
|
}
|
|
32
18
|
});
|
|
33
19
|
export {
|
|
34
|
-
|
|
20
|
+
d as default
|
|
35
21
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options
|
|
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,2 +1,2 @@
|
|
|
1
|
-
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options
|
|
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;
|
|
@@ -3,7 +3,7 @@ type __VLS_Props = {
|
|
|
3
3
|
date: number;
|
|
4
4
|
textAlign: string;
|
|
5
5
|
};
|
|
6
|
-
declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, {}, {}, {}, import("vue/types/v3-component-options
|
|
6
|
+
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
7
|
export default _default;
|
|
8
8
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
9
9
|
type __VLS_TypePropsToOption<T> = {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options
|
|
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,5 +1,4 @@
|
|
|
1
1
|
import { GetCompiledEmailOptions, CompiledEmailResult } from '@@/Types/actions-api';
|
|
2
2
|
export declare const useActionsApi: () => {
|
|
3
3
|
getCompiledEmail: (options?: GetCompiledEmailOptions) => Promise<CompiledEmailResult>;
|
|
4
|
-
activateCustomViewStyles: (isActive?: boolean) => void;
|
|
5
4
|
};
|