@pixeasy/customizer 0.0.0
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 +114 -0
- package/assets/images/logos/google-icon.png +0 -0
- package/assets/styles/_variables.css +0 -0
- package/assets/styles/theme.css +53 -0
- package/assets/theme/custom-preset.ts +256 -0
- package/index.d.ts +79 -0
- package/media/remixicon.eot +0 -0
- package/media/remixicon.svg +9709 -0
- package/media/remixicon.ttf +0 -0
- package/media/remixicon.woff +0 -0
- package/media/remixicon.woff2 +0 -0
- package/package.json +23 -0
- package/pixeasy-customizer.css +1 -0
- package/pixeasy-customizer.min.js +4527 -0
package/README.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# Pixeasy Customizer SDK
|
|
2
|
+
|
|
3
|
+
Framework-agnostic SDK for embedding the Pixeasy customizer with npm/ESM imports.
|
|
4
|
+
|
|
5
|
+
## Build package artifact (local)
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm run build:sdk
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
This generates:
|
|
12
|
+
|
|
13
|
+
- `dist/pixeasy-customizer-element/pixeasy-customizer.min.js`
|
|
14
|
+
- `dist/pixeasy-customizer-element/pixeasy-customizer.css`
|
|
15
|
+
- `dist/npm` (installable npm package output)
|
|
16
|
+
|
|
17
|
+
## Install from local file output
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @pixeasy/customizer@file:../customizer/dist/npm
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Exports
|
|
24
|
+
|
|
25
|
+
- `createPixeasyBuilder()`
|
|
26
|
+
- `PixeasyBuilder`
|
|
27
|
+
- `definePixeasyCustomizerElement()`
|
|
28
|
+
- typed events and options (`PixeasyOpenOptions`, `ManifestLoadedEventDetail`, etc.)
|
|
29
|
+
- styles entry: `@pixeasy/customizer/styles.css`
|
|
30
|
+
|
|
31
|
+
## Angular usage
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
import { createPixeasyBuilder } from '@pixeasy/customizer';
|
|
35
|
+
import '@pixeasy/customizer/styles.css';
|
|
36
|
+
|
|
37
|
+
const builder = createPixeasyBuilder();
|
|
38
|
+
builder
|
|
39
|
+
.open({
|
|
40
|
+
container: 'pixeasyBuidler',
|
|
41
|
+
apiKey: 'dk_xxx_yyy',
|
|
42
|
+
productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
|
|
43
|
+
manifestUrl: 'https://localhost:8000/api/products/{productId}/manifest?useCdnUrl=true',
|
|
44
|
+
})
|
|
45
|
+
.on('sdk-ready', (event) => console.log(event.productId))
|
|
46
|
+
.on('design:created', (event) => console.log(event.data.designs));
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## React usage
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { useEffect } from 'react';
|
|
53
|
+
import { createPixeasyBuilder } from '@pixeasy/customizer';
|
|
54
|
+
import '@pixeasy/customizer/styles.css';
|
|
55
|
+
|
|
56
|
+
export function CustomizerHost() {
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
const builder = createPixeasyBuilder();
|
|
59
|
+
builder.open({
|
|
60
|
+
container: 'pixeasyBuidler',
|
|
61
|
+
apiKey: 'dk_xxx_yyy',
|
|
62
|
+
productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
|
|
63
|
+
manifestUrl: 'https://localhost:8000/api/products/{productId}/manifest?useCdnUrl=true',
|
|
64
|
+
});
|
|
65
|
+
return () => builder.close();
|
|
66
|
+
}, []);
|
|
67
|
+
|
|
68
|
+
return <div id="pixeasyBuidler" />;
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Vue usage
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
import { onMounted, onBeforeUnmount } from 'vue';
|
|
76
|
+
import { createPixeasyBuilder } from '@pixeasy/customizer';
|
|
77
|
+
import '@pixeasy/customizer/styles.css';
|
|
78
|
+
|
|
79
|
+
const builder = createPixeasyBuilder();
|
|
80
|
+
|
|
81
|
+
onMounted(() => {
|
|
82
|
+
builder.open({
|
|
83
|
+
container: 'pixeasyBuidler',
|
|
84
|
+
apiKey: 'dk_xxx_yyy',
|
|
85
|
+
productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
|
|
86
|
+
manifestUrl: 'https://localhost:8000/api/products/{productId}/manifest?useCdnUrl=true',
|
|
87
|
+
});
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
onBeforeUnmount(() => builder.close());
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Plain ESM usage
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<div id="pixeasyBuidler"></div>
|
|
97
|
+
<script type="module">
|
|
98
|
+
import { createPixeasyBuilder } from '/node_modules/@pixeasy/customizer/pixeasy-customizer.min.js';
|
|
99
|
+
|
|
100
|
+
const builder = createPixeasyBuilder();
|
|
101
|
+
builder.open({
|
|
102
|
+
container: 'pixeasyBuidler',
|
|
103
|
+
apiKey: 'dk_xxx_yyy',
|
|
104
|
+
productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
|
|
105
|
+
manifestUrl: 'https://localhost:8000/api/products/{productId}/manifest?useCdnUrl=true',
|
|
106
|
+
});
|
|
107
|
+
</script>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Migration note
|
|
111
|
+
|
|
112
|
+
`window.pixeasy_builder` has been removed.
|
|
113
|
+
|
|
114
|
+
Use ESM import-based integration only.
|
|
Binary file
|
|
File without changes
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
/* Primary Palette */
|
|
3
|
+
--color-primary-50: #aeaff2;
|
|
4
|
+
--color-primary-100: #a6a8f1;
|
|
5
|
+
--color-primary-200: #9698f0;
|
|
6
|
+
--color-primary-300: #8587f0;
|
|
7
|
+
--color-primary-400: #7477f0;
|
|
8
|
+
--color-primary-500: #6265f1;
|
|
9
|
+
--color-primary-600: #474aea;
|
|
10
|
+
--color-primary-700: #2c30e3;
|
|
11
|
+
--color-primary-800: #1f23ce;
|
|
12
|
+
--color-primary-900: #1e21ad;
|
|
13
|
+
--color-primary-950: #1d209d;
|
|
14
|
+
|
|
15
|
+
/* Updated Secondary Palette (Mint/Teal) */
|
|
16
|
+
--color-secondary-50: #e6fcf7;
|
|
17
|
+
--color-secondary-100: #ccf9f0;
|
|
18
|
+
--color-secondary-200: #99f3e1;
|
|
19
|
+
--color-secondary-300: #66ecd2;
|
|
20
|
+
--color-secondary-400: #33e6c4;
|
|
21
|
+
--color-secondary-500: #00dfb6;
|
|
22
|
+
--color-secondary-600: #00b394;
|
|
23
|
+
--color-secondary-700: #008772;
|
|
24
|
+
--color-secondary-800: #005c50;
|
|
25
|
+
--color-secondary-900: #003f38;
|
|
26
|
+
--color-secondary-950: #002e29;
|
|
27
|
+
|
|
28
|
+
/* PrimeNG variable aliases for Primary */
|
|
29
|
+
--color-p-primary-50: #aeaff2;
|
|
30
|
+
--color-p-primary-100: #a6a8f1;
|
|
31
|
+
--color-p-primary-200: #9698f0;
|
|
32
|
+
--color-p-primary-300: #8587f0;
|
|
33
|
+
--color-p-primary-400: #7477f0;
|
|
34
|
+
--color-p-primary-500: #6265f1;
|
|
35
|
+
--color-p-primary-600: #474aea;
|
|
36
|
+
--color-p-primary-700: #2c30e3;
|
|
37
|
+
--color-p-primary-800: #1f23ce;
|
|
38
|
+
--color-p-primary-900: #1e21ad;
|
|
39
|
+
--color-p-primary-950: #1d209d;
|
|
40
|
+
|
|
41
|
+
/* PrimeNG variable aliases for Updated Secondary Palette */
|
|
42
|
+
--color-p-secondary-50: #e6fcf7;
|
|
43
|
+
--color-p-secondary-100: #ccf9f0;
|
|
44
|
+
--color-p-secondary-200: #99f3e1;
|
|
45
|
+
--color-p-secondary-300: #66ecd2;
|
|
46
|
+
--color-p-secondary-400: #33e6c4;
|
|
47
|
+
--color-p-secondary-500: #00dfb6;
|
|
48
|
+
--color-p-secondary-600: #00b394;
|
|
49
|
+
--color-p-secondary-700: #008772;
|
|
50
|
+
--color-p-secondary-800: #005c50;
|
|
51
|
+
--color-p-secondary-900: #003f38;
|
|
52
|
+
--color-p-secondary-950: #002e29;
|
|
53
|
+
}
|
|
@@ -0,0 +1,256 @@
|
|
|
1
|
+
import { definePreset } from '@primeuix/themes';
|
|
2
|
+
import Aura from '@primeuix/themes/aura';
|
|
3
|
+
|
|
4
|
+
const primaryPalette = {
|
|
5
|
+
50: '#aeaff2',
|
|
6
|
+
100: '#a6a8f1',
|
|
7
|
+
200: '#9698f0',
|
|
8
|
+
300: '#8587f0',
|
|
9
|
+
400: '#7477f0',
|
|
10
|
+
500: '#6265f1', // Your new base primary (close to #6366f1)
|
|
11
|
+
600: '#474aea',
|
|
12
|
+
700: '#2c30e3',
|
|
13
|
+
800: '#1f23ce',
|
|
14
|
+
900: '#1e21ad',
|
|
15
|
+
950: '#1d209d',
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const secondaryPalette = {
|
|
19
|
+
50: '#F9FAFB',
|
|
20
|
+
100: '#F0F2F4',
|
|
21
|
+
200: '#DBE0E5',
|
|
22
|
+
300: '#C4CBD4',
|
|
23
|
+
400: '#A6B0BF',
|
|
24
|
+
500: '#64748b',
|
|
25
|
+
600: '#556377',
|
|
26
|
+
700: '#404A59',
|
|
27
|
+
800: '#2B323B',
|
|
28
|
+
900: '#1A1E24',
|
|
29
|
+
950: '#0D0F12',
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const successPalette = {
|
|
33
|
+
50: '#e6fcf7',
|
|
34
|
+
100: '#ccf9f0',
|
|
35
|
+
200: '#99f3e1',
|
|
36
|
+
300: '#66ecd2',
|
|
37
|
+
400: '#33e6c4',
|
|
38
|
+
500: '#00dfb6', // New base secondary (mint/teal accent)
|
|
39
|
+
600: '#00b394',
|
|
40
|
+
700: '#008772',
|
|
41
|
+
800: '#005c50',
|
|
42
|
+
900: '#003f38',
|
|
43
|
+
950: '#002e29',
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export const customPreset = definePreset(Aura, {
|
|
47
|
+
semantic: {
|
|
48
|
+
...Aura.semantic, // Inherit neutrals (surface, text, etc.) and default severities
|
|
49
|
+
primary: primaryPalette,
|
|
50
|
+
secondary: secondaryPalette,
|
|
51
|
+
success: successPalette,
|
|
52
|
+
},
|
|
53
|
+
colorScheme: {
|
|
54
|
+
// Light/dark mappings (optimized for new primary and secondary)
|
|
55
|
+
light: {
|
|
56
|
+
primary: {
|
|
57
|
+
color: '{primary.500}',
|
|
58
|
+
inverseColor: '#ffffff', // White text on primary bg
|
|
59
|
+
hoverColor: '{primary.400}',
|
|
60
|
+
activeColor: '{primary.600}',
|
|
61
|
+
focusColor: '{primary.400}',
|
|
62
|
+
},
|
|
63
|
+
secondary: {
|
|
64
|
+
color: '{secondary.500}',
|
|
65
|
+
inverseColor: '#ffffff',
|
|
66
|
+
hoverColor: '{secondary.400}',
|
|
67
|
+
activeColor: '{secondary.600}',
|
|
68
|
+
focusColor: '{secondary.400}',
|
|
69
|
+
},
|
|
70
|
+
success: {
|
|
71
|
+
color: '{success.500}',
|
|
72
|
+
inverseColor: '#ffffff',
|
|
73
|
+
hoverColor: '{success.400}',
|
|
74
|
+
activeColor: '{success.600}',
|
|
75
|
+
focusColor: '{success.400}',
|
|
76
|
+
},
|
|
77
|
+
highlight: {
|
|
78
|
+
background: '{primary.100}', // Subtle primary tint for selections
|
|
79
|
+
focusBackground: '{primary.300}',
|
|
80
|
+
color: '{primary.700}',
|
|
81
|
+
focusColor: '{primary.700}',
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
dark: {
|
|
85
|
+
primary: {
|
|
86
|
+
color: '{primary.400}', // Lighter primary in dark mode
|
|
87
|
+
inverseColor: '{primary.950}',
|
|
88
|
+
hoverColor: '{primary.300}',
|
|
89
|
+
activeColor: '{primary.500}',
|
|
90
|
+
focusColor: '{primary.300}',
|
|
91
|
+
},
|
|
92
|
+
secondary: {
|
|
93
|
+
color: '{secondary.400}',
|
|
94
|
+
inverseColor: '{secondary.950}',
|
|
95
|
+
hoverColor: '{secondary.300}',
|
|
96
|
+
activeColor: '{secondary.500}',
|
|
97
|
+
focusColor: '{secondary.300}',
|
|
98
|
+
},
|
|
99
|
+
success: {
|
|
100
|
+
color: '{success.400}',
|
|
101
|
+
inverseColor: '{success.950}',
|
|
102
|
+
hoverColor: '{success.300}',
|
|
103
|
+
activeColor: '{success.500}',
|
|
104
|
+
focusColor: '{success.300}',
|
|
105
|
+
},
|
|
106
|
+
highlight: {
|
|
107
|
+
background: 'rgba(99, 102, 241, 0.16)', // Semi-transparent new primary
|
|
108
|
+
focusBackground: 'rgba(99, 102, 241, 0.24)',
|
|
109
|
+
color: 'rgba(255, 255, 255, 0.87)',
|
|
110
|
+
focusColor: 'rgba(255, 255, 255, 0.87)',
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
},
|
|
114
|
+
// Component-specific tokens (base overrides)
|
|
115
|
+
components: {
|
|
116
|
+
// Base button tokens (e.g., radius, font-weight, padding)
|
|
117
|
+
button: {
|
|
118
|
+
root: {
|
|
119
|
+
borderRadius: '12px',
|
|
120
|
+
transitionDuration: '0.3s',
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
// Base inputtext tokens (e.g., border, radius, transition)
|
|
124
|
+
inputtext: {
|
|
125
|
+
root: {
|
|
126
|
+
borderRadius: '8px',
|
|
127
|
+
transitionDuration: '0.3s',
|
|
128
|
+
},
|
|
129
|
+
},
|
|
130
|
+
// Float label base
|
|
131
|
+
floatlabel: {
|
|
132
|
+
root: { fontWeight: '600' },
|
|
133
|
+
},
|
|
134
|
+
},
|
|
135
|
+
css: ({ dt }) => `
|
|
136
|
+
/* p-button Styles (Primary by default) */
|
|
137
|
+
.p-button.p-button-primary,
|
|
138
|
+
.p-button.p-button-success,
|
|
139
|
+
.p-button.p-button-secondary,
|
|
140
|
+
.p-button.p-button-info,
|
|
141
|
+
.p-button.p-button-warn,
|
|
142
|
+
.p-button.p-button-help,
|
|
143
|
+
.p-button.p-button-danger,
|
|
144
|
+
.p-button.p-button-contrast {
|
|
145
|
+
|
|
146
|
+
border: none;
|
|
147
|
+
border-radius: ${dt('button.root.borderRadius')} ;
|
|
148
|
+
font-weight: 600 ;
|
|
149
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) ;
|
|
150
|
+
color: white ;
|
|
151
|
+
box-shadow: 0 4px 14px 0 rgba(100, 116, 139, 0.3) ;
|
|
152
|
+
&:hover:not(:disabled) {
|
|
153
|
+
transform: translateY(-1px) ;
|
|
154
|
+
|
|
155
|
+
)} 100%) ;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.p-button.p-button-primary:not(.p-button-success):not(.p-button-info):not(.p-button-warn):not(.p-button-help):not(.p-button-danger):not(.p-button-contrast):not(.p-button-outlined):not(.p-button-text) {
|
|
160
|
+
background: linear-gradient(135deg, ${dt('primary.600')} 0%, ${dt('primary.500')} 100%) ;
|
|
161
|
+
|
|
162
|
+
box-shadow: 0 4px 14px 0 rgba(98, 101, 241, 0.3) ;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.p-button:not(.p-button-secondary):not(.p-button-success):not(.p-button-info):not(.p-button-warn):not(.p-button-help):not(.p-button-danger):not(.p-button-contrast):not(.p-button-outlined):not(.p-button-text):hover:not(:disabled) {
|
|
166
|
+
transform: translateY(-1px) ;
|
|
167
|
+
box-shadow: 0 6px 20px 0 rgba(98, 101, 241, 0.4) ;
|
|
168
|
+
background: linear-gradient(135deg, ${dt('primary.700')} 0%, ${dt('primary.600')} 100%) ;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* p-button-secondary Styles */
|
|
172
|
+
.p-button.p-button-secondary {
|
|
173
|
+
background: linear-gradient(135deg, ${dt('secondary.600')} 0%, ${dt('secondary.500')} 100%) ;
|
|
174
|
+
|
|
175
|
+
color: white !important;
|
|
176
|
+
box-shadow: 0 4px 14px 0 rgba(100, 116, 139, 0.3) !important;
|
|
177
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
178
|
+
background: linear-gradient(135deg, var(--p-secondary-600) 0%, var(--p-secondary-500) 100%) !important;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.p-button.p-button-secondary:hover:not(:disabled) {
|
|
182
|
+
transform: translateY(-1px)!important ;
|
|
183
|
+
box-shadow: 0 6px 20px 0 rgba(100, 116, 139, 0.4) !important;
|
|
184
|
+
background: linear-gradient(135deg, ${dt('secondary.700')} 0%, ${dt('secondary.600')} 100%) !important;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* p-button-success Styles */
|
|
188
|
+
.p-button.p-button-success {
|
|
189
|
+
background: linear-gradient(135deg, ${dt('success.600')} 0%, ${dt('success.500')} 100%) ;
|
|
190
|
+
|
|
191
|
+
box-shadow: 0 4px 14px 0 rgba(0, 223, 182, 0.3) ;
|
|
192
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) ;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.p-button.p-button-success:hover:not(:disabled) {
|
|
196
|
+
transform: translateY(-1px) ;
|
|
197
|
+
box-shadow: 0 6px 20px 0 rgba(0, 223, 182, 0.4) ;
|
|
198
|
+
background: linear-gradient(135deg, ${dt('success.700')} 0%, ${dt('success.600')} 100%) ;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.p-button:disabled {
|
|
202
|
+
opacity: 0.7 ;
|
|
203
|
+
transform: none ;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* p-inputtext Styles */
|
|
207
|
+
.p-inputtext {
|
|
208
|
+
border: 2px solid #e5e7eb ;
|
|
209
|
+
border-radius: ${dt('inputtext.root.borderRadius')} ;
|
|
210
|
+
transition: all 0.3s ease ;
|
|
211
|
+
background: rgba(255, 255, 255, 0.8) ;
|
|
212
|
+
backdrop-filter: blur(5px) ;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.p-inputtext:focus {
|
|
216
|
+
border-color: ${dt('primary.500')} ;
|
|
217
|
+
box-shadow: 0 0 0 3px rgba(98, 101, 241, 0.1) ;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.p-select.field-invalid ,.p-password.field-invalid .p-password-input,.p-inputtext.field-invalid {
|
|
221
|
+
border-color: #ef4444 ;
|
|
222
|
+
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) ;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
/* p-float-label Styles */
|
|
227
|
+
.p-float-label label {
|
|
228
|
+
color: #6b7280 ;
|
|
229
|
+
font-weight: 500 ;
|
|
230
|
+
i{
|
|
231
|
+
color: #6b7280 ;
|
|
232
|
+
font-weight: 500 ;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/* Dark Mode Overrides */
|
|
237
|
+
.dark .p-inputtext.field-invalid {
|
|
238
|
+
border-color: #f87171 ;
|
|
239
|
+
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1) ;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.dark .p-button-outlined {
|
|
243
|
+
border-color: #4b5563 ;
|
|
244
|
+
color: #d1d5db ;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/* Breadcrumb Styles */
|
|
248
|
+
.p-breadcrumb{
|
|
249
|
+
background: transparent !important
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.p-breadcrumb-item-label{
|
|
253
|
+
cursor: pointer ;
|
|
254
|
+
}
|
|
255
|
+
`,
|
|
256
|
+
});
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
export interface SdkElementConfig {
|
|
2
|
+
apiKey: string;
|
|
3
|
+
productId: string;
|
|
4
|
+
locale?: string;
|
|
5
|
+
theme?: string;
|
|
6
|
+
readonly?: boolean;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export interface PixeasyOpenOptions extends SdkElementConfig {
|
|
10
|
+
container: string | HTMLElement;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export interface ManifestLoadedEventDetail {
|
|
14
|
+
productId: string;
|
|
15
|
+
manifestMeta?: {
|
|
16
|
+
version?: string;
|
|
17
|
+
} | null;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export interface SdkReadyEventDetail {
|
|
21
|
+
productId: string;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export interface DesignChangeEventDetail {
|
|
25
|
+
productId: string;
|
|
26
|
+
placements: unknown[];
|
|
27
|
+
overlays: unknown[];
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export interface ErrorEventDetail {
|
|
31
|
+
code: 'INVALID_CONFIG' | 'MANIFEST_LOAD_FAILED' | 'ASSET_LOAD_FAILED' | 'RUNTIME_ERROR';
|
|
32
|
+
message: string;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export interface DesignCreatedEventPayload {
|
|
36
|
+
data: {
|
|
37
|
+
productId?: string;
|
|
38
|
+
designs: unknown[];
|
|
39
|
+
overlays: unknown[];
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export type BuilderEventName =
|
|
44
|
+
| 'manifest-loaded'
|
|
45
|
+
| 'sdk-ready'
|
|
46
|
+
| 'design-change'
|
|
47
|
+
| 'design:created'
|
|
48
|
+
| 'error'
|
|
49
|
+
| 'closed';
|
|
50
|
+
|
|
51
|
+
export class PixeasyBuilder {
|
|
52
|
+
open(options: PixeasyOpenOptions): this;
|
|
53
|
+
on<K extends BuilderEventName>(
|
|
54
|
+
name: K,
|
|
55
|
+
handler: (payload: {
|
|
56
|
+
'manifest-loaded': ManifestLoadedEventDetail;
|
|
57
|
+
'sdk-ready': SdkReadyEventDetail;
|
|
58
|
+
'design-change': DesignChangeEventDetail;
|
|
59
|
+
'design:created': DesignCreatedEventPayload;
|
|
60
|
+
error: ErrorEventDetail;
|
|
61
|
+
closed: undefined;
|
|
62
|
+
}[K]) => void,
|
|
63
|
+
): this;
|
|
64
|
+
off<K extends BuilderEventName>(
|
|
65
|
+
name: K,
|
|
66
|
+
handler: (payload: {
|
|
67
|
+
'manifest-loaded': ManifestLoadedEventDetail;
|
|
68
|
+
'sdk-ready': SdkReadyEventDetail;
|
|
69
|
+
'design-change': DesignChangeEventDetail;
|
|
70
|
+
'design:created': DesignCreatedEventPayload;
|
|
71
|
+
error: ErrorEventDetail;
|
|
72
|
+
closed: undefined;
|
|
73
|
+
}[K]) => void,
|
|
74
|
+
): this;
|
|
75
|
+
close(): this;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
export function createPixeasyBuilder(): PixeasyBuilder;
|
|
79
|
+
export function definePixeasyCustomizerElement(): void;
|
|
Binary file
|