juxscript 1.1.109 → 1.1.110
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 +1 -1
- package/lib/components/stack/BaseStack.d.ts +1 -0
- package/lib/components/stack/BaseStack.d.ts.map +1 -1
- package/lib/components/stack/BaseStack.js +21 -12
- package/lib/components/stack/BaseStack.ts +32 -22
- package/lib/styles/animations.css +2 -0
- package/package.json +1 -1
package/dom-structure-map.json
CHANGED
|
@@ -66,6 +66,7 @@ export declare abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
66
66
|
elasticTiming(): this;
|
|
67
67
|
delay(ms: 100 | 200 | 300 | 500 | 1000): this;
|
|
68
68
|
staggered(): this;
|
|
69
|
+
stagger(delayMs?: number): this;
|
|
69
70
|
interactive(): this;
|
|
70
71
|
smooth(): this;
|
|
71
72
|
smoothItems(): this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseStack.d.ts","sourceRoot":"","sources":["BaseStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,
|
|
1
|
+
{"version":3,"file":"BaseStack.d.ts","sourceRoot":"","sources":["BaseStack.ts"],"names":[],"mappings":"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"}
|
|
@@ -21,6 +21,7 @@ export class BaseStack extends BaseComponent {
|
|
|
21
21
|
this._container = null;
|
|
22
22
|
this._childStyleFunction = null;
|
|
23
23
|
// ✅ Layout extensions are automatically applied in BaseComponent constructor
|
|
24
|
+
// No need to call applyLayoutExtensions() here
|
|
24
25
|
}
|
|
25
26
|
getTriggerEvents() {
|
|
26
27
|
return TRIGGER_EVENTS;
|
|
@@ -29,7 +30,7 @@ export class BaseStack extends BaseComponent {
|
|
|
29
30
|
return CALLBACK_EVENTS;
|
|
30
31
|
}
|
|
31
32
|
/* ═════════════════════════════════════════════════════════════════
|
|
32
|
-
*
|
|
33
|
+
* STACK-SPECIFIC LAYOUT API (NOT in LayoutExtensions)
|
|
33
34
|
* ═════════════════════════════════════════════════════════════════ */
|
|
34
35
|
spacing(value) {
|
|
35
36
|
this.state.spacing = value;
|
|
@@ -67,7 +68,7 @@ export class BaseStack extends BaseComponent {
|
|
|
67
68
|
return this;
|
|
68
69
|
}
|
|
69
70
|
/* ═════════════════════════════════════════════════════════════════
|
|
70
|
-
* CHILD STYLING
|
|
71
|
+
* CHILD STYLING (Stack-specific)
|
|
71
72
|
* ═════════════════════════════════════════════════════════════════ */
|
|
72
73
|
childStyle(fn) {
|
|
73
74
|
this._childStyleFunction = fn;
|
|
@@ -102,7 +103,7 @@ export class BaseStack extends BaseComponent {
|
|
|
102
103
|
return this;
|
|
103
104
|
}
|
|
104
105
|
/* ═════════════════════════════════════════════════════════════════
|
|
105
|
-
* ANIMATION API (
|
|
106
|
+
* ANIMATION API (Stack-specific)
|
|
106
107
|
* ═════════════════════════════════════════════════════════════════ */
|
|
107
108
|
/* Stack-Level Animations */
|
|
108
109
|
fadeIn() {
|
|
@@ -212,6 +213,23 @@ export class BaseStack extends BaseComponent {
|
|
|
212
213
|
staggered() {
|
|
213
214
|
return this.addClass('jux-stack-stagger');
|
|
214
215
|
}
|
|
216
|
+
stagger(delayMs = 100) {
|
|
217
|
+
this.addClass('jux-stack-stagger');
|
|
218
|
+
if (delayMs !== 100 && this._container) {
|
|
219
|
+
const children = this._container.children;
|
|
220
|
+
for (let i = 0; i < Math.min(children.length, 10); i++) {
|
|
221
|
+
const child = children[i];
|
|
222
|
+
const currentStyle = child.getAttribute('style') || '';
|
|
223
|
+
const delay = i * delayMs;
|
|
224
|
+
const cleanedStyle = currentStyle
|
|
225
|
+
.split(';')
|
|
226
|
+
.filter(s => !s.trim().startsWith('animation-delay'))
|
|
227
|
+
.join(';');
|
|
228
|
+
child.setAttribute('style', `${cleanedStyle}; animation-delay: ${delay}ms`);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
return this;
|
|
232
|
+
}
|
|
215
233
|
interactive() {
|
|
216
234
|
return this.addClass('jux-stack-interactive');
|
|
217
235
|
}
|
|
@@ -265,18 +283,13 @@ export class BaseStack extends BaseComponent {
|
|
|
265
283
|
}
|
|
266
284
|
renderChild(child, index) {
|
|
267
285
|
let childElement;
|
|
268
|
-
// ✅ Priority 1: Check if it's a Stack (has _container property)
|
|
269
286
|
if (child && typeof child === 'object' && '_container' in child && child._container instanceof HTMLElement) {
|
|
270
287
|
childElement = child._container;
|
|
271
288
|
}
|
|
272
|
-
// ✅ Priority 2: Check if it's a JUX Component (has render method)
|
|
273
289
|
else if (child && typeof child === 'object' && typeof child.render === 'function') {
|
|
274
|
-
// Create temporary container to render into
|
|
275
290
|
const tempContainer = document.createElement('div');
|
|
276
291
|
tempContainer.style.display = 'contents';
|
|
277
|
-
// Render the component
|
|
278
292
|
child.render(tempContainer);
|
|
279
|
-
// Extract the rendered element
|
|
280
293
|
if (child.container && child.container.firstElementChild) {
|
|
281
294
|
childElement = child.container.firstElementChild;
|
|
282
295
|
}
|
|
@@ -287,16 +300,13 @@ export class BaseStack extends BaseComponent {
|
|
|
287
300
|
childElement = tempContainer;
|
|
288
301
|
}
|
|
289
302
|
}
|
|
290
|
-
// ✅ Priority 3: Already a DOM element
|
|
291
303
|
else if (child instanceof HTMLElement) {
|
|
292
304
|
childElement = child;
|
|
293
305
|
}
|
|
294
|
-
// ✅ Priority 4: String - wrap in div
|
|
295
306
|
else if (typeof child === 'string') {
|
|
296
307
|
childElement = document.createElement('div');
|
|
297
308
|
childElement.innerHTML = child;
|
|
298
309
|
}
|
|
299
|
-
// ✅ Fallback - stringify
|
|
300
310
|
else {
|
|
301
311
|
childElement = document.createElement('div');
|
|
302
312
|
childElement.textContent = String(child);
|
|
@@ -317,7 +327,6 @@ export class BaseStack extends BaseComponent {
|
|
|
317
327
|
if (this.state.style) {
|
|
318
328
|
stackDiv.setAttribute('style', this.state.style);
|
|
319
329
|
}
|
|
320
|
-
// Handle both array and object children
|
|
321
330
|
const childArray = Array.isArray(this.children)
|
|
322
331
|
? this.children
|
|
323
332
|
: Object.values(this.children);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BaseComponent, BaseState } from '../base/BaseComponent.js';
|
|
2
|
-
import {
|
|
2
|
+
import { LayoutExtensions } from '../base/LayoutExtensions.js';
|
|
3
3
|
|
|
4
4
|
// Event definitions
|
|
5
5
|
const TRIGGER_EVENTS = [] as const;
|
|
@@ -42,6 +42,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
42
42
|
});
|
|
43
43
|
|
|
44
44
|
// ✅ Layout extensions are automatically applied in BaseComponent constructor
|
|
45
|
+
// No need to call applyLayoutExtensions() here
|
|
45
46
|
}
|
|
46
47
|
|
|
47
48
|
protected getTriggerEvents(): readonly string[] {
|
|
@@ -53,7 +54,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
/* ═════════════════════════════════════════════════════════════════
|
|
56
|
-
*
|
|
57
|
+
* STACK-SPECIFIC LAYOUT API (NOT in LayoutExtensions)
|
|
57
58
|
* ═════════════════════════════════════════════════════════════════ */
|
|
58
59
|
|
|
59
60
|
spacing(value: 'none' | 'tight' | 'normal' | 'loose'): this {
|
|
@@ -97,7 +98,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
/* ═════════════════════════════════════════════════════════════════
|
|
100
|
-
* CHILD STYLING
|
|
101
|
+
* CHILD STYLING (Stack-specific)
|
|
101
102
|
* ═════════════════════════════════════════════════════════════════ */
|
|
102
103
|
|
|
103
104
|
childStyle(fn: (index: number) => string): this {
|
|
@@ -137,7 +138,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
137
138
|
}
|
|
138
139
|
|
|
139
140
|
/* ═════════════════════════════════════════════════════════════════
|
|
140
|
-
* ANIMATION API (
|
|
141
|
+
* ANIMATION API (Stack-specific)
|
|
141
142
|
* ═════════════════════════════════════════════════════════════════ */
|
|
142
143
|
|
|
143
144
|
/* Stack-Level Animations */
|
|
@@ -282,6 +283,28 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
282
283
|
return this.addClass('jux-stack-stagger');
|
|
283
284
|
}
|
|
284
285
|
|
|
286
|
+
stagger(delayMs: number = 100): this {
|
|
287
|
+
this.addClass('jux-stack-stagger');
|
|
288
|
+
|
|
289
|
+
if (delayMs !== 100 && this._container) {
|
|
290
|
+
const children = this._container.children;
|
|
291
|
+
for (let i = 0; i < Math.min(children.length, 10); i++) {
|
|
292
|
+
const child = children[i] as HTMLElement;
|
|
293
|
+
const currentStyle = child.getAttribute('style') || '';
|
|
294
|
+
const delay = i * delayMs;
|
|
295
|
+
|
|
296
|
+
const cleanedStyle = currentStyle
|
|
297
|
+
.split(';')
|
|
298
|
+
.filter(s => !s.trim().startsWith('animation-delay'))
|
|
299
|
+
.join(';');
|
|
300
|
+
|
|
301
|
+
child.setAttribute('style', `${cleanedStyle}; animation-delay: ${delay}ms`);
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
return this;
|
|
306
|
+
}
|
|
307
|
+
|
|
285
308
|
interactive(): this {
|
|
286
309
|
return this.addClass('jux-stack-interactive');
|
|
287
310
|
}
|
|
@@ -347,20 +370,14 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
347
370
|
protected renderChild(child: any, index: number): HTMLElement {
|
|
348
371
|
let childElement: HTMLElement;
|
|
349
372
|
|
|
350
|
-
// ✅ Priority 1: Check if it's a Stack (has _container property)
|
|
351
373
|
if (child && typeof child === 'object' && '_container' in child && child._container instanceof HTMLElement) {
|
|
352
374
|
childElement = child._container;
|
|
353
|
-
}
|
|
354
|
-
// ✅ Priority 2: Check if it's a JUX Component (has render method)
|
|
355
|
-
else if (child && typeof child === 'object' && typeof child.render === 'function') {
|
|
356
|
-
// Create temporary container to render into
|
|
375
|
+
} else if (child && typeof child === 'object' && typeof child.render === 'function') {
|
|
357
376
|
const tempContainer = document.createElement('div');
|
|
358
377
|
tempContainer.style.display = 'contents';
|
|
359
378
|
|
|
360
|
-
// Render the component
|
|
361
379
|
child.render(tempContainer);
|
|
362
380
|
|
|
363
|
-
// Extract the rendered element
|
|
364
381
|
if (child.container && child.container.firstElementChild) {
|
|
365
382
|
childElement = child.container.firstElementChild as HTMLElement;
|
|
366
383
|
} else if (tempContainer.firstElementChild) {
|
|
@@ -368,18 +385,12 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
368
385
|
} else {
|
|
369
386
|
childElement = tempContainer;
|
|
370
387
|
}
|
|
371
|
-
}
|
|
372
|
-
// ✅ Priority 3: Already a DOM element
|
|
373
|
-
else if (child instanceof HTMLElement) {
|
|
388
|
+
} else if (child instanceof HTMLElement) {
|
|
374
389
|
childElement = child;
|
|
375
|
-
}
|
|
376
|
-
// ✅ Priority 4: String - wrap in div
|
|
377
|
-
else if (typeof child === 'string') {
|
|
390
|
+
} else if (typeof child === 'string') {
|
|
378
391
|
childElement = document.createElement('div');
|
|
379
392
|
childElement.innerHTML = child;
|
|
380
|
-
}
|
|
381
|
-
// ✅ Fallback - stringify
|
|
382
|
-
else {
|
|
393
|
+
} else {
|
|
383
394
|
childElement = document.createElement('div');
|
|
384
395
|
childElement.textContent = String(child);
|
|
385
396
|
}
|
|
@@ -405,7 +416,6 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
405
416
|
stackDiv.setAttribute('style', this.state.style);
|
|
406
417
|
}
|
|
407
418
|
|
|
408
|
-
// Handle both array and object children
|
|
409
419
|
const childArray = Array.isArray(this.children)
|
|
410
420
|
? this.children
|
|
411
421
|
: Object.values(this.children);
|
|
@@ -428,5 +438,5 @@ export abstract class BaseStack extends BaseComponent<StackState> {
|
|
|
428
438
|
}
|
|
429
439
|
}
|
|
430
440
|
|
|
431
|
-
// ✅ Type assertion for LayoutExtensions
|
|
441
|
+
// ✅ Type assertion for LayoutExtensions (inherited from BaseComponent)
|
|
432
442
|
export interface BaseStack extends LayoutExtensions { }
|
|
@@ -176,6 +176,8 @@
|
|
|
176
176
|
|
|
177
177
|
/* ═════════════════════════════════════════════════════════════════
|
|
178
178
|
* STAGGER DELAYS (Sequential item delays)
|
|
179
|
+
* DEFAULT: 100ms between items
|
|
180
|
+
* Use .stagger(customMs) to override with inline styles
|
|
179
181
|
* ═════════════════════════════════════════════════════════════════ */
|
|
180
182
|
|
|
181
183
|
.jux-stack-stagger > *:nth-child(1) { animation-delay: 0ms; }
|