@codingfactory/mediables-vue 2.3.6 → 2.4.1
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/dist/{PixiFrameExporter-DM4yaigy.cjs → PixiFrameExporter-8_WF3thr.cjs} +2 -2
- package/dist/{PixiFrameExporter-DM4yaigy.cjs.map → PixiFrameExporter-8_WF3thr.cjs.map} +1 -1
- package/dist/{PixiFrameExporter-BAZtrvGS.js → PixiFrameExporter-vXYgP3wU.js} +2 -2
- package/dist/{PixiFrameExporter-BAZtrvGS.js.map → PixiFrameExporter-vXYgP3wU.js.map} +1 -1
- package/dist/components/ImageEditorModal.vue.d.ts +4 -2
- package/dist/composables/useImageEditorModal.d.ts +288 -16
- package/dist/composables/useRadialMenu.d.ts +1 -1
- package/dist/editor-Bl0mzqgX.cjs +42 -0
- package/dist/editor-Bl0mzqgX.cjs.map +1 -0
- package/dist/{editor-BWpslm--.js → editor-DiiyShiW.js} +419 -303
- package/dist/editor-DiiyShiW.js.map +1 -0
- package/dist/{index-CMOpozRS.js → index-B42SSGjg.js} +7717 -7554
- package/dist/index-B42SSGjg.js.map +1 -0
- package/dist/index-CT0VqMgf.cjs +342 -0
- package/dist/index-CT0VqMgf.cjs.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/mediables-vanilla.cjs +1 -1
- package/dist/mediables-vanilla.mjs +1 -1
- package/dist/mediables-vue.cjs +1 -1
- package/dist/mediables-vue.mjs +59 -52
- package/dist/style.css +1 -1
- package/dist/types/editor.d.ts +87 -2
- package/dist/utils/imageEditorState.d.ts +26 -0
- package/package.json +1 -1
- package/dist/editor-BWpslm--.js.map +0 -1
- package/dist/editor-D_dX1XkE.cjs +0 -42
- package/dist/editor-D_dX1XkE.cjs.map +0 -1
- package/dist/index-6-ArBBEQ.cjs +0 -342
- package/dist/index-6-ArBBEQ.cjs.map +0 -1
- package/dist/index-CMOpozRS.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { SaveEventPayload } from '../types/editor';
|
|
1
|
+
import type { SaveEventPayload, ImageEditorOpenOptions, ImageEditorSessionState } from '../types/editor';
|
|
2
2
|
export interface ImageEditorModalOptions {
|
|
3
3
|
onSave?: (payload: SaveEventPayload) => void | Promise<void>;
|
|
4
4
|
onError?: (error: Error) => void;
|
|
@@ -35,7 +35,30 @@ export declare function useImageEditorModal(options?: ImageEditorModalOptions):
|
|
|
35
35
|
(): Promise<string>;
|
|
36
36
|
(): Promise<string>;
|
|
37
37
|
};
|
|
38
|
-
} |
|
|
38
|
+
} | {
|
|
39
|
+
readonly size: number;
|
|
40
|
+
readonly type: string;
|
|
41
|
+
arrayBuffer: {
|
|
42
|
+
(): Promise<ArrayBuffer>;
|
|
43
|
+
(): Promise<ArrayBuffer>;
|
|
44
|
+
};
|
|
45
|
+
bytes: {
|
|
46
|
+
(): Promise<Uint8Array<ArrayBuffer>>;
|
|
47
|
+
(): Promise<Uint8Array<ArrayBuffer>>;
|
|
48
|
+
};
|
|
49
|
+
slice: {
|
|
50
|
+
(start?: number, end?: number, contentType?: string): Blob;
|
|
51
|
+
(start?: number, end?: number, contentType?: string): Blob;
|
|
52
|
+
};
|
|
53
|
+
stream: {
|
|
54
|
+
(): ReadableStream<Uint8Array<ArrayBuffer>>;
|
|
55
|
+
(): ReadableStream<Uint8Array<ArrayBuffer>>;
|
|
56
|
+
};
|
|
57
|
+
text: {
|
|
58
|
+
(): Promise<string>;
|
|
59
|
+
(): Promise<string>;
|
|
60
|
+
};
|
|
61
|
+
} | null, string | Blob | File | {
|
|
39
62
|
readonly lastModified: number;
|
|
40
63
|
readonly name: string;
|
|
41
64
|
readonly webkitRelativePath: string;
|
|
@@ -61,6 +84,29 @@ export declare function useImageEditorModal(options?: ImageEditorModalOptions):
|
|
|
61
84
|
(): Promise<string>;
|
|
62
85
|
(): Promise<string>;
|
|
63
86
|
};
|
|
87
|
+
} | {
|
|
88
|
+
readonly size: number;
|
|
89
|
+
readonly type: string;
|
|
90
|
+
arrayBuffer: {
|
|
91
|
+
(): Promise<ArrayBuffer>;
|
|
92
|
+
(): Promise<ArrayBuffer>;
|
|
93
|
+
};
|
|
94
|
+
bytes: {
|
|
95
|
+
(): Promise<Uint8Array<ArrayBuffer>>;
|
|
96
|
+
(): Promise<Uint8Array<ArrayBuffer>>;
|
|
97
|
+
};
|
|
98
|
+
slice: {
|
|
99
|
+
(start?: number, end?: number, contentType?: string): Blob;
|
|
100
|
+
(start?: number, end?: number, contentType?: string): Blob;
|
|
101
|
+
};
|
|
102
|
+
stream: {
|
|
103
|
+
(): ReadableStream<Uint8Array<ArrayBuffer>>;
|
|
104
|
+
(): ReadableStream<Uint8Array<ArrayBuffer>>;
|
|
105
|
+
};
|
|
106
|
+
text: {
|
|
107
|
+
(): Promise<string>;
|
|
108
|
+
(): Promise<string>;
|
|
109
|
+
};
|
|
64
110
|
} | null>;
|
|
65
111
|
editedImage: import("vue").Ref<{
|
|
66
112
|
imageData: string;
|
|
@@ -68,7 +114,25 @@ export declare function useImageEditorModal(options?: ImageEditorModalOptions):
|
|
|
68
114
|
width: number;
|
|
69
115
|
height: number;
|
|
70
116
|
};
|
|
71
|
-
|
|
117
|
+
state: {
|
|
118
|
+
version: 1;
|
|
119
|
+
crop: {
|
|
120
|
+
rect: {
|
|
121
|
+
x: number;
|
|
122
|
+
y: number;
|
|
123
|
+
width: number;
|
|
124
|
+
height: number;
|
|
125
|
+
} | null;
|
|
126
|
+
aspectRatio: string;
|
|
127
|
+
shape: "free" | "square" | "circle";
|
|
128
|
+
};
|
|
129
|
+
filters: {
|
|
130
|
+
id: string;
|
|
131
|
+
enabled: boolean;
|
|
132
|
+
values: Record<string, import("@/types").ImageEditorPrimitive>;
|
|
133
|
+
}[];
|
|
134
|
+
};
|
|
135
|
+
metadata?: {
|
|
72
136
|
hasCrop: boolean;
|
|
73
137
|
cropRect: {
|
|
74
138
|
x: number;
|
|
@@ -83,14 +147,32 @@ export declare function useImageEditorModal(options?: ImageEditorModalOptions):
|
|
|
83
147
|
width: number;
|
|
84
148
|
height: number;
|
|
85
149
|
};
|
|
86
|
-
};
|
|
150
|
+
} | undefined;
|
|
87
151
|
} | null, SaveEventPayload | {
|
|
88
152
|
imageData: string;
|
|
89
153
|
dimensions: {
|
|
90
154
|
width: number;
|
|
91
155
|
height: number;
|
|
92
156
|
};
|
|
93
|
-
|
|
157
|
+
state: {
|
|
158
|
+
version: 1;
|
|
159
|
+
crop: {
|
|
160
|
+
rect: {
|
|
161
|
+
x: number;
|
|
162
|
+
y: number;
|
|
163
|
+
width: number;
|
|
164
|
+
height: number;
|
|
165
|
+
} | null;
|
|
166
|
+
aspectRatio: string;
|
|
167
|
+
shape: "free" | "square" | "circle";
|
|
168
|
+
};
|
|
169
|
+
filters: {
|
|
170
|
+
id: string;
|
|
171
|
+
enabled: boolean;
|
|
172
|
+
values: Record<string, import("@/types").ImageEditorPrimitive>;
|
|
173
|
+
}[];
|
|
174
|
+
};
|
|
175
|
+
metadata?: {
|
|
94
176
|
hasCrop: boolean;
|
|
95
177
|
cropRect: {
|
|
96
178
|
x: number;
|
|
@@ -105,12 +187,48 @@ export declare function useImageEditorModal(options?: ImageEditorModalOptions):
|
|
|
105
187
|
width: number;
|
|
106
188
|
height: number;
|
|
107
189
|
};
|
|
190
|
+
} | undefined;
|
|
191
|
+
} | null>;
|
|
192
|
+
sessionKey: import("vue").Ref<number, number>;
|
|
193
|
+
initialState: import("vue").Ref<{
|
|
194
|
+
version: 1;
|
|
195
|
+
crop: {
|
|
196
|
+
rect: {
|
|
197
|
+
x: number;
|
|
198
|
+
y: number;
|
|
199
|
+
width: number;
|
|
200
|
+
height: number;
|
|
201
|
+
} | null;
|
|
202
|
+
aspectRatio: string;
|
|
203
|
+
shape: "free" | "square" | "circle";
|
|
204
|
+
};
|
|
205
|
+
filters: {
|
|
206
|
+
id: string;
|
|
207
|
+
enabled: boolean;
|
|
208
|
+
values: Record<string, import("@/types").ImageEditorPrimitive>;
|
|
209
|
+
}[];
|
|
210
|
+
} | null, ImageEditorSessionState | {
|
|
211
|
+
version: 1;
|
|
212
|
+
crop: {
|
|
213
|
+
rect: {
|
|
214
|
+
x: number;
|
|
215
|
+
y: number;
|
|
216
|
+
width: number;
|
|
217
|
+
height: number;
|
|
218
|
+
} | null;
|
|
219
|
+
aspectRatio: string;
|
|
220
|
+
shape: "free" | "square" | "circle";
|
|
108
221
|
};
|
|
222
|
+
filters: {
|
|
223
|
+
id: string;
|
|
224
|
+
enabled: boolean;
|
|
225
|
+
values: Record<string, import("@/types").ImageEditorPrimitive>;
|
|
226
|
+
}[];
|
|
109
227
|
} | null>;
|
|
110
228
|
error: import("vue").Ref<Error | null, Error | null>;
|
|
111
229
|
hasError: import("vue").ComputedRef<boolean>;
|
|
112
230
|
hasUnsavedChanges: import("vue").ComputedRef<boolean>;
|
|
113
|
-
open: (
|
|
231
|
+
open: (imageOrOptions?: string | Blob | File | ImageEditorOpenOptions) => void;
|
|
114
232
|
close: () => void;
|
|
115
233
|
handleSave: (payload: SaveEventPayload) => Promise<SaveEventPayload>;
|
|
116
234
|
handleCancel: () => void;
|
|
@@ -122,7 +240,25 @@ export declare function useImageEditorModal(options?: ImageEditorModalOptions):
|
|
|
122
240
|
width: number;
|
|
123
241
|
height: number;
|
|
124
242
|
};
|
|
125
|
-
|
|
243
|
+
state: {
|
|
244
|
+
version: 1;
|
|
245
|
+
crop: {
|
|
246
|
+
rect: {
|
|
247
|
+
x: number;
|
|
248
|
+
y: number;
|
|
249
|
+
width: number;
|
|
250
|
+
height: number;
|
|
251
|
+
} | null;
|
|
252
|
+
aspectRatio: string;
|
|
253
|
+
shape: "free" | "square" | "circle";
|
|
254
|
+
};
|
|
255
|
+
filters: {
|
|
256
|
+
id: string;
|
|
257
|
+
enabled: boolean;
|
|
258
|
+
values: Record<string, import("@/types").ImageEditorPrimitive>;
|
|
259
|
+
}[];
|
|
260
|
+
};
|
|
261
|
+
metadata?: {
|
|
126
262
|
hasCrop: boolean;
|
|
127
263
|
cropRect: {
|
|
128
264
|
x: number;
|
|
@@ -137,7 +273,7 @@ export declare function useImageEditorModal(options?: ImageEditorModalOptions):
|
|
|
137
273
|
width: number;
|
|
138
274
|
height: number;
|
|
139
275
|
};
|
|
140
|
-
};
|
|
276
|
+
} | undefined;
|
|
141
277
|
} | null;
|
|
142
278
|
};
|
|
143
279
|
export declare function useGlobalImageEditor(options?: ImageEditorModalOptions): {
|
|
@@ -169,7 +305,30 @@ export declare function useGlobalImageEditor(options?: ImageEditorModalOptions):
|
|
|
169
305
|
(): Promise<string>;
|
|
170
306
|
(): Promise<string>;
|
|
171
307
|
};
|
|
172
|
-
} |
|
|
308
|
+
} | {
|
|
309
|
+
readonly size: number;
|
|
310
|
+
readonly type: string;
|
|
311
|
+
arrayBuffer: {
|
|
312
|
+
(): Promise<ArrayBuffer>;
|
|
313
|
+
(): Promise<ArrayBuffer>;
|
|
314
|
+
};
|
|
315
|
+
bytes: {
|
|
316
|
+
(): Promise<Uint8Array<ArrayBuffer>>;
|
|
317
|
+
(): Promise<Uint8Array<ArrayBuffer>>;
|
|
318
|
+
};
|
|
319
|
+
slice: {
|
|
320
|
+
(start?: number, end?: number, contentType?: string): Blob;
|
|
321
|
+
(start?: number, end?: number, contentType?: string): Blob;
|
|
322
|
+
};
|
|
323
|
+
stream: {
|
|
324
|
+
(): ReadableStream<Uint8Array<ArrayBuffer>>;
|
|
325
|
+
(): ReadableStream<Uint8Array<ArrayBuffer>>;
|
|
326
|
+
};
|
|
327
|
+
text: {
|
|
328
|
+
(): Promise<string>;
|
|
329
|
+
(): Promise<string>;
|
|
330
|
+
};
|
|
331
|
+
} | null, string | Blob | File | {
|
|
173
332
|
readonly lastModified: number;
|
|
174
333
|
readonly name: string;
|
|
175
334
|
readonly webkitRelativePath: string;
|
|
@@ -195,6 +354,29 @@ export declare function useGlobalImageEditor(options?: ImageEditorModalOptions):
|
|
|
195
354
|
(): Promise<string>;
|
|
196
355
|
(): Promise<string>;
|
|
197
356
|
};
|
|
357
|
+
} | {
|
|
358
|
+
readonly size: number;
|
|
359
|
+
readonly type: string;
|
|
360
|
+
arrayBuffer: {
|
|
361
|
+
(): Promise<ArrayBuffer>;
|
|
362
|
+
(): Promise<ArrayBuffer>;
|
|
363
|
+
};
|
|
364
|
+
bytes: {
|
|
365
|
+
(): Promise<Uint8Array<ArrayBuffer>>;
|
|
366
|
+
(): Promise<Uint8Array<ArrayBuffer>>;
|
|
367
|
+
};
|
|
368
|
+
slice: {
|
|
369
|
+
(start?: number, end?: number, contentType?: string): Blob;
|
|
370
|
+
(start?: number, end?: number, contentType?: string): Blob;
|
|
371
|
+
};
|
|
372
|
+
stream: {
|
|
373
|
+
(): ReadableStream<Uint8Array<ArrayBuffer>>;
|
|
374
|
+
(): ReadableStream<Uint8Array<ArrayBuffer>>;
|
|
375
|
+
};
|
|
376
|
+
text: {
|
|
377
|
+
(): Promise<string>;
|
|
378
|
+
(): Promise<string>;
|
|
379
|
+
};
|
|
198
380
|
} | null>;
|
|
199
381
|
editedImage: import("vue").Ref<{
|
|
200
382
|
imageData: string;
|
|
@@ -202,7 +384,25 @@ export declare function useGlobalImageEditor(options?: ImageEditorModalOptions):
|
|
|
202
384
|
width: number;
|
|
203
385
|
height: number;
|
|
204
386
|
};
|
|
205
|
-
|
|
387
|
+
state: {
|
|
388
|
+
version: 1;
|
|
389
|
+
crop: {
|
|
390
|
+
rect: {
|
|
391
|
+
x: number;
|
|
392
|
+
y: number;
|
|
393
|
+
width: number;
|
|
394
|
+
height: number;
|
|
395
|
+
} | null;
|
|
396
|
+
aspectRatio: string;
|
|
397
|
+
shape: "free" | "square" | "circle";
|
|
398
|
+
};
|
|
399
|
+
filters: {
|
|
400
|
+
id: string;
|
|
401
|
+
enabled: boolean;
|
|
402
|
+
values: Record<string, import("@/types").ImageEditorPrimitive>;
|
|
403
|
+
}[];
|
|
404
|
+
};
|
|
405
|
+
metadata?: {
|
|
206
406
|
hasCrop: boolean;
|
|
207
407
|
cropRect: {
|
|
208
408
|
x: number;
|
|
@@ -217,14 +417,32 @@ export declare function useGlobalImageEditor(options?: ImageEditorModalOptions):
|
|
|
217
417
|
width: number;
|
|
218
418
|
height: number;
|
|
219
419
|
};
|
|
220
|
-
};
|
|
420
|
+
} | undefined;
|
|
221
421
|
} | null, SaveEventPayload | {
|
|
222
422
|
imageData: string;
|
|
223
423
|
dimensions: {
|
|
224
424
|
width: number;
|
|
225
425
|
height: number;
|
|
226
426
|
};
|
|
227
|
-
|
|
427
|
+
state: {
|
|
428
|
+
version: 1;
|
|
429
|
+
crop: {
|
|
430
|
+
rect: {
|
|
431
|
+
x: number;
|
|
432
|
+
y: number;
|
|
433
|
+
width: number;
|
|
434
|
+
height: number;
|
|
435
|
+
} | null;
|
|
436
|
+
aspectRatio: string;
|
|
437
|
+
shape: "free" | "square" | "circle";
|
|
438
|
+
};
|
|
439
|
+
filters: {
|
|
440
|
+
id: string;
|
|
441
|
+
enabled: boolean;
|
|
442
|
+
values: Record<string, import("@/types").ImageEditorPrimitive>;
|
|
443
|
+
}[];
|
|
444
|
+
};
|
|
445
|
+
metadata?: {
|
|
228
446
|
hasCrop: boolean;
|
|
229
447
|
cropRect: {
|
|
230
448
|
x: number;
|
|
@@ -239,12 +457,48 @@ export declare function useGlobalImageEditor(options?: ImageEditorModalOptions):
|
|
|
239
457
|
width: number;
|
|
240
458
|
height: number;
|
|
241
459
|
};
|
|
460
|
+
} | undefined;
|
|
461
|
+
} | null>;
|
|
462
|
+
sessionKey: import("vue").Ref<number, number>;
|
|
463
|
+
initialState: import("vue").Ref<{
|
|
464
|
+
version: 1;
|
|
465
|
+
crop: {
|
|
466
|
+
rect: {
|
|
467
|
+
x: number;
|
|
468
|
+
y: number;
|
|
469
|
+
width: number;
|
|
470
|
+
height: number;
|
|
471
|
+
} | null;
|
|
472
|
+
aspectRatio: string;
|
|
473
|
+
shape: "free" | "square" | "circle";
|
|
474
|
+
};
|
|
475
|
+
filters: {
|
|
476
|
+
id: string;
|
|
477
|
+
enabled: boolean;
|
|
478
|
+
values: Record<string, import("@/types").ImageEditorPrimitive>;
|
|
479
|
+
}[];
|
|
480
|
+
} | null, ImageEditorSessionState | {
|
|
481
|
+
version: 1;
|
|
482
|
+
crop: {
|
|
483
|
+
rect: {
|
|
484
|
+
x: number;
|
|
485
|
+
y: number;
|
|
486
|
+
width: number;
|
|
487
|
+
height: number;
|
|
488
|
+
} | null;
|
|
489
|
+
aspectRatio: string;
|
|
490
|
+
shape: "free" | "square" | "circle";
|
|
242
491
|
};
|
|
492
|
+
filters: {
|
|
493
|
+
id: string;
|
|
494
|
+
enabled: boolean;
|
|
495
|
+
values: Record<string, import("@/types").ImageEditorPrimitive>;
|
|
496
|
+
}[];
|
|
243
497
|
} | null>;
|
|
244
498
|
error: import("vue").Ref<Error | null, Error | null>;
|
|
245
499
|
hasError: import("vue").ComputedRef<boolean>;
|
|
246
500
|
hasUnsavedChanges: import("vue").ComputedRef<boolean>;
|
|
247
|
-
open: (
|
|
501
|
+
open: (imageOrOptions?: string | Blob | File | ImageEditorOpenOptions) => void;
|
|
248
502
|
close: () => void;
|
|
249
503
|
handleSave: (payload: SaveEventPayload) => Promise<SaveEventPayload>;
|
|
250
504
|
handleCancel: () => void;
|
|
@@ -256,7 +510,25 @@ export declare function useGlobalImageEditor(options?: ImageEditorModalOptions):
|
|
|
256
510
|
width: number;
|
|
257
511
|
height: number;
|
|
258
512
|
};
|
|
259
|
-
|
|
513
|
+
state: {
|
|
514
|
+
version: 1;
|
|
515
|
+
crop: {
|
|
516
|
+
rect: {
|
|
517
|
+
x: number;
|
|
518
|
+
y: number;
|
|
519
|
+
width: number;
|
|
520
|
+
height: number;
|
|
521
|
+
} | null;
|
|
522
|
+
aspectRatio: string;
|
|
523
|
+
shape: "free" | "square" | "circle";
|
|
524
|
+
};
|
|
525
|
+
filters: {
|
|
526
|
+
id: string;
|
|
527
|
+
enabled: boolean;
|
|
528
|
+
values: Record<string, import("@/types").ImageEditorPrimitive>;
|
|
529
|
+
}[];
|
|
530
|
+
};
|
|
531
|
+
metadata?: {
|
|
260
532
|
hasCrop: boolean;
|
|
261
533
|
cropRect: {
|
|
262
534
|
x: number;
|
|
@@ -271,7 +543,7 @@ export declare function useGlobalImageEditor(options?: ImageEditorModalOptions):
|
|
|
271
543
|
width: number;
|
|
272
544
|
height: number;
|
|
273
545
|
};
|
|
274
|
-
};
|
|
546
|
+
} | undefined;
|
|
275
547
|
} | null;
|
|
276
548
|
};
|
|
277
|
-
export declare function createImageEditor(options?: ImageEditorModalOptions): (
|
|
549
|
+
export declare function createImageEditor(options?: ImageEditorModalOptions): (imageOrOptions?: string | Blob | File | ImageEditorOpenOptions) => Promise<SaveEventPayload>;
|
|
@@ -40,7 +40,7 @@ export declare function useRadialMenu(): {
|
|
|
40
40
|
}>;
|
|
41
41
|
activeCategory: import("vue").ComputedRef<number | null>;
|
|
42
42
|
activeFilter: import("vue").ComputedRef<string | null>;
|
|
43
|
-
menuLevel: import("vue").ComputedRef<
|
|
43
|
+
menuLevel: import("vue").ComputedRef<1 | 2 | 3>;
|
|
44
44
|
hoveredCategory: import("vue").Ref<number | null, number | null>;
|
|
45
45
|
filterCategories: FilterCategory[];
|
|
46
46
|
subMenuFilters: import("vue").ComputedRef<Filter[]>;
|