juxscript 1.1.70 → 1.1.71
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/dom-structure-map.json
CHANGED
|
@@ -9,7 +9,7 @@ export interface ModalOptions {
|
|
|
9
9
|
icon?: EmojiIconType | undefined;
|
|
10
10
|
close?: boolean;
|
|
11
11
|
backdropClose?: boolean;
|
|
12
|
-
position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
|
|
12
|
+
position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
|
|
13
13
|
size?: 'small' | 'medium' | 'large';
|
|
14
14
|
actions?: Array<{
|
|
15
15
|
label: string;
|
|
@@ -25,7 +25,7 @@ type ModalState = {
|
|
|
25
25
|
icon: EmojiIconType | undefined;
|
|
26
26
|
close: boolean;
|
|
27
27
|
backdropClose: boolean;
|
|
28
|
-
position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
|
|
28
|
+
position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
|
|
29
29
|
size: string;
|
|
30
30
|
open: boolean;
|
|
31
31
|
actions: Array<{
|
|
@@ -52,6 +52,7 @@ export declare class Modal extends BaseComponent<ModalState> {
|
|
|
52
52
|
close(value: boolean): this;
|
|
53
53
|
backdropClose(value: boolean): this;
|
|
54
54
|
size(value: 'small' | 'medium' | 'large'): this;
|
|
55
|
+
position(value: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right'): this;
|
|
55
56
|
actions(value: Array<{
|
|
56
57
|
label: string;
|
|
57
58
|
variant?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,MAAM,aAAa,GAAG;IAE1B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC;CAC9F,CAAA;AACD,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3E,IAAI,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,YAAY,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"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"}
|
package/lib/components/modal.js
CHANGED
|
@@ -58,6 +58,17 @@ export class Modal extends BaseComponent {
|
|
|
58
58
|
case 'size':
|
|
59
59
|
modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
|
|
60
60
|
break;
|
|
61
|
+
case 'position':
|
|
62
|
+
// Remove existing position classes
|
|
63
|
+
this._overlay.className = this._overlay.className
|
|
64
|
+
.split(' ')
|
|
65
|
+
.filter(c => !c.startsWith('jux-modal-position-'))
|
|
66
|
+
.join(' ');
|
|
67
|
+
// Add new position class
|
|
68
|
+
if (value) {
|
|
69
|
+
this._overlay.classList.add(`jux-modal-position-${value}`);
|
|
70
|
+
}
|
|
71
|
+
break;
|
|
61
72
|
case 'actions':
|
|
62
73
|
this._rebuildActions();
|
|
63
74
|
break;
|
|
@@ -189,6 +200,10 @@ export class Modal extends BaseComponent {
|
|
|
189
200
|
this.state.size = value;
|
|
190
201
|
return this;
|
|
191
202
|
}
|
|
203
|
+
position(value) {
|
|
204
|
+
this.state.position = value;
|
|
205
|
+
return this;
|
|
206
|
+
}
|
|
192
207
|
actions(value) {
|
|
193
208
|
this.state.actions = value;
|
|
194
209
|
return this;
|
|
@@ -275,12 +290,16 @@ export class Modal extends BaseComponent {
|
|
|
275
290
|
* ═════════════════════════════════════════════════════════════════ */
|
|
276
291
|
render(targetId) {
|
|
277
292
|
const container = this._setupContainer(targetId);
|
|
278
|
-
const { open, title, content, icon, size, close, backdropClose, actions, style, class: className } = this.state;
|
|
293
|
+
const { open, title, content, icon, size, position, close, backdropClose, actions, style, class: className } = this.state;
|
|
279
294
|
const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
|
|
280
295
|
const overlay = document.createElement('div');
|
|
281
296
|
overlay.className = 'jux-modal-overlay';
|
|
282
297
|
overlay.id = this._id;
|
|
283
298
|
overlay.style.display = open ? 'flex' : 'none';
|
|
299
|
+
// Add position class
|
|
300
|
+
if (position) {
|
|
301
|
+
overlay.classList.add(`jux-modal-position-${position}`);
|
|
302
|
+
}
|
|
284
303
|
if (className)
|
|
285
304
|
overlay.className += ` ${className}`;
|
|
286
305
|
if (style)
|
package/lib/components/modal.ts
CHANGED
|
@@ -16,7 +16,7 @@ export interface ModalOptions {
|
|
|
16
16
|
icon?: EmojiIconType | undefined;
|
|
17
17
|
close?: boolean;
|
|
18
18
|
backdropClose?: boolean;
|
|
19
|
-
position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
|
|
19
|
+
position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
|
|
20
20
|
size?: 'small' | 'medium' | 'large';
|
|
21
21
|
actions?: Array<{ label: string; variant?: string; click?: () => void } | Array<BaseComponent<any>>>;
|
|
22
22
|
style?: string;
|
|
@@ -29,7 +29,7 @@ type ModalState = {
|
|
|
29
29
|
icon: EmojiIconType | undefined;
|
|
30
30
|
close: boolean;
|
|
31
31
|
backdropClose: boolean;
|
|
32
|
-
position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
|
|
32
|
+
position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
|
|
33
33
|
size: string;
|
|
34
34
|
open: boolean;
|
|
35
35
|
actions: Array<{ label: string; variant?: string; click?: () => void } | Array<BaseComponent<any>>>;
|
|
@@ -102,6 +102,19 @@ export class Modal extends BaseComponent<ModalState> {
|
|
|
102
102
|
modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
|
|
103
103
|
break;
|
|
104
104
|
|
|
105
|
+
case 'position':
|
|
106
|
+
// Remove existing position classes
|
|
107
|
+
this._overlay.className = this._overlay.className
|
|
108
|
+
.split(' ')
|
|
109
|
+
.filter(c => !c.startsWith('jux-modal-position-'))
|
|
110
|
+
.join(' ');
|
|
111
|
+
|
|
112
|
+
// Add new position class
|
|
113
|
+
if (value) {
|
|
114
|
+
this._overlay.classList.add(`jux-modal-position-${value}`);
|
|
115
|
+
}
|
|
116
|
+
break;
|
|
117
|
+
|
|
105
118
|
case 'actions':
|
|
106
119
|
this._rebuildActions();
|
|
107
120
|
break;
|
|
@@ -255,6 +268,11 @@ export class Modal extends BaseComponent<ModalState> {
|
|
|
255
268
|
return this;
|
|
256
269
|
}
|
|
257
270
|
|
|
271
|
+
position(value: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right'): this {
|
|
272
|
+
this.state.position = value;
|
|
273
|
+
return this;
|
|
274
|
+
}
|
|
275
|
+
|
|
258
276
|
actions(value: Array<{ label: string; variant?: string; click?: () => void }>): this {
|
|
259
277
|
this.state.actions = value;
|
|
260
278
|
return this;
|
|
@@ -357,13 +375,19 @@ export class Modal extends BaseComponent<ModalState> {
|
|
|
357
375
|
render(targetId?: string | HTMLElement | BaseComponent<any>): this {
|
|
358
376
|
const container = this._setupContainer(targetId);
|
|
359
377
|
|
|
360
|
-
const { open, title, content, icon, size, close, backdropClose, actions, style, class: className } = this.state;
|
|
378
|
+
const { open, title, content, icon, size, position, close, backdropClose, actions, style, class: className } = this.state;
|
|
361
379
|
const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
|
|
362
380
|
|
|
363
381
|
const overlay = document.createElement('div');
|
|
364
382
|
overlay.className = 'jux-modal-overlay';
|
|
365
383
|
overlay.id = this._id;
|
|
366
384
|
overlay.style.display = open ? 'flex' : 'none';
|
|
385
|
+
|
|
386
|
+
// Add position class
|
|
387
|
+
if (position) {
|
|
388
|
+
overlay.classList.add(`jux-modal-position-${position}`);
|
|
389
|
+
}
|
|
390
|
+
|
|
367
391
|
if (className) overlay.className += ` ${className}`;
|
|
368
392
|
if (style) overlay.setAttribute('style', style);
|
|
369
393
|
this._overlay = overlay;
|