juxscript 1.1.14 → 1.1.16
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/index.d.ts +0 -2
- package/index.d.ts.map +1 -1
- package/index.js +0 -2
- package/lib/components/alert.d.ts.map +1 -1
- package/lib/components/alert.js +14 -1
- package/lib/components/alert.ts +13 -1
- package/lib/components/badge.d.ts +2 -4
- package/lib/components/badge.d.ts.map +1 -1
- package/lib/components/badge.js +18 -1
- package/lib/components/badge.ts +17 -5
- package/lib/components/base/BaseComponent.d.ts +18 -2
- package/lib/components/base/BaseComponent.d.ts.map +1 -1
- package/lib/components/base/BaseComponent.js +25 -41
- package/lib/components/base/BaseComponent.ts +43 -42
- package/lib/components/hero.d.ts +2 -4
- package/lib/components/hero.d.ts.map +1 -1
- package/lib/components/hero.js +6 -10
- package/lib/components/hero.ts +8 -12
- package/lib/components/sidebar.d.ts +25 -15
- package/lib/components/sidebar.d.ts.map +1 -1
- package/lib/components/sidebar.js +179 -91
- package/lib/components/sidebar.ts +224 -108
- package/package.json +1 -1
- package/lib/components/guard.d.ts +0 -42
- package/lib/components/guard.d.ts.map +0 -1
- package/lib/components/guard.js +0 -59
- package/lib/components/guard.ts +0 -96
package/index.d.ts
CHANGED
|
@@ -15,7 +15,6 @@ import { dropdown } from './lib/components/dropdown.js';
|
|
|
15
15
|
import { element } from './lib/components/element.js';
|
|
16
16
|
import { fileupload } from './lib/components/fileupload.js';
|
|
17
17
|
import { grid } from './lib/components/grid.js';
|
|
18
|
-
import { guard } from './lib/components/guard.js';
|
|
19
18
|
import { heading } from './lib/components/heading.js';
|
|
20
19
|
import { getOrCreateContainer } from './lib/components/helpers.js';
|
|
21
20
|
import { hero } from './lib/components/hero.js';
|
|
@@ -60,7 +59,6 @@ export declare const jux: {
|
|
|
60
59
|
element: typeof element;
|
|
61
60
|
fileupload: typeof fileupload;
|
|
62
61
|
grid: typeof grid;
|
|
63
|
-
guard: typeof guard;
|
|
64
62
|
heading: typeof heading;
|
|
65
63
|
hero: typeof hero;
|
|
66
64
|
icon: typeof icon;
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
|
package/index.js
CHANGED
|
@@ -15,7 +15,6 @@ import { dropdown } from './lib/components/dropdown.js';
|
|
|
15
15
|
import { element } from './lib/components/element.js';
|
|
16
16
|
import { fileupload } from './lib/components/fileupload.js';
|
|
17
17
|
import { grid } from './lib/components/grid.js';
|
|
18
|
-
import { guard } from './lib/components/guard.js';
|
|
19
18
|
import { heading } from './lib/components/heading.js';
|
|
20
19
|
import { getOrCreateContainer } from './lib/components/helpers.js';
|
|
21
20
|
import { hero } from './lib/components/hero.js';
|
|
@@ -62,7 +61,6 @@ export const jux = {
|
|
|
62
61
|
element,
|
|
63
62
|
fileupload,
|
|
64
63
|
grid,
|
|
65
|
-
guard,
|
|
66
64
|
heading,
|
|
67
65
|
hero,
|
|
68
66
|
icon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,UAAU,GAAG;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;IAChD,OAAO,CAAC,MAAM,CAA4B;gBAE9B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAYlD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAiBhD,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI;IAK3D,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB;;OAEG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,UAAU,GAAG;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;IAChD,OAAO,CAAC,MAAM,CAA4B;gBAE9B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAYlD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAiBhD,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI;IAK3D,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB;;OAEG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAoBtC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA6GlC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}
|
package/lib/components/alert.js
CHANGED
|
@@ -53,7 +53,20 @@ export class Alert extends BaseComponent {
|
|
|
53
53
|
* Reactive update hook
|
|
54
54
|
*/
|
|
55
55
|
update(prop, value) {
|
|
56
|
-
|
|
56
|
+
const el = document.getElementById(this._id);
|
|
57
|
+
if (!el)
|
|
58
|
+
return;
|
|
59
|
+
if (prop === 'content') {
|
|
60
|
+
const contentEl = el.querySelector('.jux-alert-content');
|
|
61
|
+
if (contentEl)
|
|
62
|
+
contentEl.textContent = value;
|
|
63
|
+
}
|
|
64
|
+
else if (prop === 'type') {
|
|
65
|
+
// Update alert type class
|
|
66
|
+
el.className = `jux-alert jux-alert-${value}`;
|
|
67
|
+
if (this.state.class)
|
|
68
|
+
el.className += ` ${this.state.class}`;
|
|
69
|
+
}
|
|
57
70
|
}
|
|
58
71
|
/* ═════════════════════════════════════════════════════════════════
|
|
59
72
|
* RENDER
|
package/lib/components/alert.ts
CHANGED
|
@@ -84,7 +84,19 @@ export class Alert extends BaseComponent<AlertState> {
|
|
|
84
84
|
* Reactive update hook
|
|
85
85
|
*/
|
|
86
86
|
update(prop: string, value: any): void {
|
|
87
|
-
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
const el = document.getElementById(this._id);
|
|
90
|
+
if (!el) return;
|
|
91
|
+
|
|
92
|
+
if (prop === 'content') {
|
|
93
|
+
const contentEl = el.querySelector('.jux-alert-content');
|
|
94
|
+
if (contentEl) contentEl.textContent = value;
|
|
95
|
+
} else if (prop === 'type') {
|
|
96
|
+
// Update alert type class
|
|
97
|
+
el.className = `jux-alert jux-alert-${value}`;
|
|
98
|
+
if (this.state.class) el.className += ` ${this.state.class}`;
|
|
99
|
+
}
|
|
88
100
|
}
|
|
89
101
|
|
|
90
102
|
/* ═════════════════════════════════════════════════════════════════
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseComponent } from './base/BaseComponent.js';
|
|
1
|
+
import { BaseComponent, BaseState } from './base/BaseComponent.js';
|
|
2
2
|
export interface BadgeOptions {
|
|
3
3
|
label?: string;
|
|
4
4
|
variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
|
|
@@ -6,12 +6,10 @@ export interface BadgeOptions {
|
|
|
6
6
|
style?: string;
|
|
7
7
|
class?: string;
|
|
8
8
|
}
|
|
9
|
-
type BadgeState = {
|
|
9
|
+
type BadgeState = BaseState & {
|
|
10
10
|
label: string;
|
|
11
11
|
variant: string;
|
|
12
12
|
pill: boolean;
|
|
13
|
-
style: string;
|
|
14
|
-
class: string;
|
|
15
13
|
};
|
|
16
14
|
export declare class Badge extends BaseComponent<BadgeState> {
|
|
17
15
|
constructor(id: string, options?: BadgeOptions);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,YAAY;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,UAAU,GAAG,SAAS,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAUlD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAwBtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI;IAK1E,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS1B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA8BlC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}
|
package/lib/components/badge.js
CHANGED
|
@@ -19,7 +19,24 @@ export class Badge extends BaseComponent {
|
|
|
19
19
|
return CALLBACK_EVENTS;
|
|
20
20
|
}
|
|
21
21
|
update(prop, value) {
|
|
22
|
-
|
|
22
|
+
const el = document.getElementById(this._id);
|
|
23
|
+
if (!el)
|
|
24
|
+
return;
|
|
25
|
+
// ✅ Component-specific updates
|
|
26
|
+
if (prop === 'label') {
|
|
27
|
+
el.textContent = value;
|
|
28
|
+
}
|
|
29
|
+
else if (prop === 'variant') {
|
|
30
|
+
const baseClass = 'jux-badge';
|
|
31
|
+
el.className = `${baseClass} ${baseClass}-${value}`;
|
|
32
|
+
if (this.state.pill)
|
|
33
|
+
el.classList.add('jux-badge-pill');
|
|
34
|
+
if (this.state.class)
|
|
35
|
+
el.className += ` ${this.state.class}`;
|
|
36
|
+
}
|
|
37
|
+
else if (prop === 'pill') {
|
|
38
|
+
el.classList.toggle('jux-badge-pill', value);
|
|
39
|
+
}
|
|
23
40
|
}
|
|
24
41
|
/* ═════════════════════════════════════════════════════════════════
|
|
25
42
|
* FLUENT API
|
package/lib/components/badge.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseComponent } from './base/BaseComponent.js';
|
|
1
|
+
import { BaseComponent, BaseState } from './base/BaseComponent.js';
|
|
2
2
|
|
|
3
3
|
// Event definitions
|
|
4
4
|
const TRIGGER_EVENTS = [] as const;
|
|
@@ -12,12 +12,10 @@ export interface BadgeOptions {
|
|
|
12
12
|
class?: string;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
type BadgeState = {
|
|
15
|
+
type BadgeState = BaseState & {
|
|
16
16
|
label: string;
|
|
17
17
|
variant: string;
|
|
18
18
|
pill: boolean;
|
|
19
|
-
style: string;
|
|
20
|
-
class: string;
|
|
21
19
|
};
|
|
22
20
|
|
|
23
21
|
export class Badge extends BaseComponent<BadgeState> {
|
|
@@ -40,7 +38,21 @@ export class Badge extends BaseComponent<BadgeState> {
|
|
|
40
38
|
}
|
|
41
39
|
|
|
42
40
|
update(prop: string, value: any): void {
|
|
43
|
-
|
|
41
|
+
|
|
42
|
+
const el = document.getElementById(this._id);
|
|
43
|
+
if (!el) return;
|
|
44
|
+
|
|
45
|
+
// ✅ Component-specific updates
|
|
46
|
+
if (prop === 'label') {
|
|
47
|
+
el.textContent = value;
|
|
48
|
+
} else if (prop === 'variant') {
|
|
49
|
+
const baseClass = 'jux-badge';
|
|
50
|
+
el.className = `${baseClass} ${baseClass}-${value}`;
|
|
51
|
+
if (this.state.pill) el.classList.add('jux-badge-pill');
|
|
52
|
+
if (this.state.class) el.className += ` ${this.state.class}`;
|
|
53
|
+
} else if (prop === 'pill') {
|
|
54
|
+
el.classList.toggle('jux-badge-pill', value);
|
|
55
|
+
}
|
|
44
56
|
}
|
|
45
57
|
|
|
46
58
|
/* ═════════════════════════════════════════════════════════════════
|
|
@@ -1,4 +1,16 @@
|
|
|
1
1
|
import { State } from '../../reactivity/state.js';
|
|
2
|
+
/**
|
|
3
|
+
* Base state interface that ALL component states must extend
|
|
4
|
+
* Contains properties managed by BaseComponent
|
|
5
|
+
*/
|
|
6
|
+
export interface BaseState {
|
|
7
|
+
visible?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
class?: string;
|
|
11
|
+
style?: string;
|
|
12
|
+
attributes?: Record<string, string>;
|
|
13
|
+
}
|
|
2
14
|
/**
|
|
3
15
|
* Abstract base class for all JUX components
|
|
4
16
|
* Provides common storage, event routing, and lifecycle methods
|
|
@@ -8,7 +20,7 @@ import { State } from '../../reactivity/state.js';
|
|
|
8
20
|
* - CALLBACK_EVENTS constant (readonly string[])
|
|
9
21
|
* - render() implementation
|
|
10
22
|
*/
|
|
11
|
-
export declare abstract class BaseComponent<TState extends
|
|
23
|
+
export declare abstract class BaseComponent<TState extends BaseState = BaseState> {
|
|
12
24
|
state: TState;
|
|
13
25
|
container: HTMLElement | null;
|
|
14
26
|
_id: string;
|
|
@@ -149,7 +161,11 @@ export declare abstract class BaseComponent<TState extends Record<string, any>>
|
|
|
149
161
|
protected _wireAllSyncs(): void;
|
|
150
162
|
renderTo(juxComponent: any): this;
|
|
151
163
|
/**
|
|
152
|
-
* ✅ Read-only accessor for component state
|
|
164
|
+
* ✅ Read-only accessor for component state (getter, not a method)
|
|
165
|
+
*
|
|
166
|
+
* Usage:
|
|
167
|
+
* const myState = component.props; // ✅ Correct
|
|
168
|
+
* const myState = component.props(); // ❌ Error: props is not a function
|
|
153
169
|
*/
|
|
154
170
|
get props(): Readonly<TState>;
|
|
155
171
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGlD
|
|
1
|
+
{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"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"}
|
|
@@ -18,8 +18,18 @@ export class BaseComponent {
|
|
|
18
18
|
this._callbackHandlers = new Map();
|
|
19
19
|
this._id = id;
|
|
20
20
|
this.id = id;
|
|
21
|
+
// ✨ Ensure base properties exist with defaults
|
|
22
|
+
const stateWithDefaults = {
|
|
23
|
+
visible: true,
|
|
24
|
+
disabled: false,
|
|
25
|
+
loading: false,
|
|
26
|
+
class: '',
|
|
27
|
+
style: '',
|
|
28
|
+
attributes: {},
|
|
29
|
+
...initialState
|
|
30
|
+
};
|
|
21
31
|
// ✨ REACTIVE PROXY: Intercept state changes to trigger view updates automatically
|
|
22
|
-
this.state = new Proxy(
|
|
32
|
+
this.state = new Proxy(stateWithDefaults, {
|
|
23
33
|
set: (target, prop, value) => {
|
|
24
34
|
const key = prop;
|
|
25
35
|
if (target[key] !== value) {
|
|
@@ -37,14 +47,14 @@ export class BaseComponent {
|
|
|
37
47
|
* Set component style
|
|
38
48
|
*/
|
|
39
49
|
style(value) {
|
|
40
|
-
this.state.style = value;
|
|
50
|
+
this.state.style = value; // ✅ Triggers update()
|
|
41
51
|
return this;
|
|
42
52
|
}
|
|
43
53
|
/**
|
|
44
54
|
* Set component class
|
|
45
55
|
*/
|
|
46
56
|
class(value) {
|
|
47
|
-
this.state.class = value;
|
|
57
|
+
this.state.class = value; // ✅ Triggers update()
|
|
48
58
|
return this;
|
|
49
59
|
}
|
|
50
60
|
/* ═════════════════════════════════════════════════════════════════
|
|
@@ -55,13 +65,9 @@ export class BaseComponent {
|
|
|
55
65
|
*/
|
|
56
66
|
addClass(value) {
|
|
57
67
|
const current = this.state.class || '';
|
|
58
|
-
const classes = current.split(' ').filter((c) => c);
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
this.state.class = classes.join(' ');
|
|
62
|
-
if (this.container)
|
|
63
|
-
this.container.classList.add(value);
|
|
64
|
-
}
|
|
68
|
+
const classes = current.split(' ').filter((c) => c && c !== value);
|
|
69
|
+
classes.push(value);
|
|
70
|
+
this.state.class = classes.join(' '); // ✅ Triggers update()
|
|
65
71
|
return this;
|
|
66
72
|
}
|
|
67
73
|
/**
|
|
@@ -70,9 +76,7 @@ export class BaseComponent {
|
|
|
70
76
|
removeClass(value) {
|
|
71
77
|
const current = this.state.class || '';
|
|
72
78
|
const classes = current.split(' ').filter((c) => c && c !== value);
|
|
73
|
-
this.state.class = classes.join(' ');
|
|
74
|
-
if (this.container)
|
|
75
|
-
this.container.classList.remove(value);
|
|
79
|
+
this.state.class = classes.join(' '); // ✅ Triggers update()
|
|
76
80
|
return this;
|
|
77
81
|
}
|
|
78
82
|
/**
|
|
@@ -90,14 +94,7 @@ export class BaseComponent {
|
|
|
90
94
|
* Set component visibility
|
|
91
95
|
*/
|
|
92
96
|
visible(value) {
|
|
93
|
-
this.state.visible = value;
|
|
94
|
-
if (this.container) {
|
|
95
|
-
// Find the actual component wrapper, not the parent container
|
|
96
|
-
const wrapper = this.container.querySelector(`#${this._id}`);
|
|
97
|
-
if (wrapper) {
|
|
98
|
-
wrapper.style.display = value ? '' : 'none';
|
|
99
|
-
}
|
|
100
|
-
}
|
|
97
|
+
this.state.visible = value; // ✅ Triggers update()
|
|
101
98
|
return this;
|
|
102
99
|
}
|
|
103
100
|
/**
|
|
@@ -158,14 +155,7 @@ export class BaseComponent {
|
|
|
158
155
|
* Set disabled state for interactive elements
|
|
159
156
|
*/
|
|
160
157
|
disabled(value) {
|
|
161
|
-
this.state.disabled = value;
|
|
162
|
-
if (this.container) {
|
|
163
|
-
const inputs = this.container.querySelectorAll('input, button, select, textarea');
|
|
164
|
-
inputs.forEach(el => {
|
|
165
|
-
el.disabled = value;
|
|
166
|
-
});
|
|
167
|
-
this.container.setAttribute('aria-disabled', String(value));
|
|
168
|
-
}
|
|
158
|
+
this.state.disabled = value; // ✅ Triggers update()
|
|
169
159
|
return this;
|
|
170
160
|
}
|
|
171
161
|
/**
|
|
@@ -187,17 +177,7 @@ export class BaseComponent {
|
|
|
187
177
|
* Set loading state
|
|
188
178
|
*/
|
|
189
179
|
loading(value) {
|
|
190
|
-
this.state.loading = value;
|
|
191
|
-
if (this.container) {
|
|
192
|
-
if (value) {
|
|
193
|
-
this.container.classList.add('jux-loading');
|
|
194
|
-
this.container.setAttribute('aria-busy', 'true');
|
|
195
|
-
}
|
|
196
|
-
else {
|
|
197
|
-
this.container.classList.remove('jux-loading');
|
|
198
|
-
this.container.removeAttribute('aria-busy');
|
|
199
|
-
}
|
|
200
|
-
}
|
|
180
|
+
this.state.loading = value; // ✅ Triggers update()
|
|
201
181
|
return this;
|
|
202
182
|
}
|
|
203
183
|
/* ═════════════════════════════════════════════════════════════════
|
|
@@ -356,7 +336,11 @@ export class BaseComponent {
|
|
|
356
336
|
* PROPS ACCESSOR - Read-only access to component state
|
|
357
337
|
* ═════════════════════════════════════════════════════════════════ */
|
|
358
338
|
/**
|
|
359
|
-
* ✅ Read-only accessor for component state
|
|
339
|
+
* ✅ Read-only accessor for component state (getter, not a method)
|
|
340
|
+
*
|
|
341
|
+
* Usage:
|
|
342
|
+
* const myState = component.props; // ✅ Correct
|
|
343
|
+
* const myState = component.props(); // ❌ Error: props is not a function
|
|
360
344
|
*/
|
|
361
345
|
get props() {
|
|
362
346
|
return this.state;
|
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
import { State } from '../../reactivity/state.js';
|
|
2
2
|
import { getOrCreateContainer } from '../helpers.js';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Base state interface that ALL component states must extend
|
|
6
|
+
* Contains properties managed by BaseComponent
|
|
7
|
+
*/
|
|
8
|
+
export interface BaseState {
|
|
9
|
+
visible?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
class?: string;
|
|
13
|
+
style?: string;
|
|
14
|
+
attributes?: Record<string, string>;
|
|
15
|
+
}
|
|
16
|
+
|
|
4
17
|
/**
|
|
5
18
|
* Abstract base class for all JUX components
|
|
6
19
|
* Provides common storage, event routing, and lifecycle methods
|
|
@@ -10,7 +23,7 @@ import { getOrCreateContainer } from '../helpers.js';
|
|
|
10
23
|
* - CALLBACK_EVENTS constant (readonly string[])
|
|
11
24
|
* - render() implementation
|
|
12
25
|
*/
|
|
13
|
-
export abstract class BaseComponent<TState extends
|
|
26
|
+
export abstract class BaseComponent<TState extends BaseState = BaseState> {
|
|
14
27
|
// Common properties (all components have these)
|
|
15
28
|
state: TState;
|
|
16
29
|
container: HTMLElement | null = null;
|
|
@@ -32,8 +45,19 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
|
|
|
32
45
|
this._id = id;
|
|
33
46
|
this.id = id;
|
|
34
47
|
|
|
48
|
+
// ✨ Ensure base properties exist with defaults
|
|
49
|
+
const stateWithDefaults: TState = {
|
|
50
|
+
visible: true,
|
|
51
|
+
disabled: false,
|
|
52
|
+
loading: false,
|
|
53
|
+
class: '',
|
|
54
|
+
style: '',
|
|
55
|
+
attributes: {},
|
|
56
|
+
...initialState
|
|
57
|
+
};
|
|
58
|
+
|
|
35
59
|
// ✨ REACTIVE PROXY: Intercept state changes to trigger view updates automatically
|
|
36
|
-
this.state = new Proxy(
|
|
60
|
+
this.state = new Proxy(stateWithDefaults, {
|
|
37
61
|
set: (target, prop, value) => {
|
|
38
62
|
const key = prop as keyof TState;
|
|
39
63
|
if (target[key] !== value) {
|
|
@@ -85,7 +109,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
|
|
|
85
109
|
* Set component style
|
|
86
110
|
*/
|
|
87
111
|
style(value: string): this {
|
|
88
|
-
|
|
112
|
+
this.state.style = value; // ✅ Triggers update()
|
|
89
113
|
return this;
|
|
90
114
|
}
|
|
91
115
|
|
|
@@ -93,7 +117,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
|
|
|
93
117
|
* Set component class
|
|
94
118
|
*/
|
|
95
119
|
class(value: string): this {
|
|
96
|
-
|
|
120
|
+
this.state.class = value; // ✅ Triggers update()
|
|
97
121
|
return this;
|
|
98
122
|
}
|
|
99
123
|
|
|
@@ -105,13 +129,10 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
|
|
|
105
129
|
* Add a CSS class to the component
|
|
106
130
|
*/
|
|
107
131
|
addClass(value: string): this {
|
|
108
|
-
const current =
|
|
109
|
-
const classes = current.split(' ').filter((c: string) => c);
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
(this.state as any).class = classes.join(' ');
|
|
113
|
-
if (this.container) this.container.classList.add(value);
|
|
114
|
-
}
|
|
132
|
+
const current = this.state.class || '';
|
|
133
|
+
const classes = current.split(' ').filter((c: string) => c && c !== value);
|
|
134
|
+
classes.push(value);
|
|
135
|
+
this.state.class = classes.join(' '); // ✅ Triggers update()
|
|
115
136
|
return this;
|
|
116
137
|
}
|
|
117
138
|
|
|
@@ -119,10 +140,9 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
|
|
|
119
140
|
* Remove a CSS class from the component
|
|
120
141
|
*/
|
|
121
142
|
removeClass(value: string): this {
|
|
122
|
-
const current =
|
|
143
|
+
const current = this.state.class || '';
|
|
123
144
|
const classes = current.split(' ').filter((c: string) => c && c !== value);
|
|
124
|
-
|
|
125
|
-
if (this.container) this.container.classList.remove(value);
|
|
145
|
+
this.state.class = classes.join(' '); // ✅ Triggers update()
|
|
126
146
|
return this;
|
|
127
147
|
}
|
|
128
148
|
|
|
@@ -130,7 +150,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
|
|
|
130
150
|
* Toggle a CSS class on the component
|
|
131
151
|
*/
|
|
132
152
|
toggleClass(value: string): this {
|
|
133
|
-
const current =
|
|
153
|
+
const current = this.state.class || '';
|
|
134
154
|
const hasClass = current.split(' ').includes(value);
|
|
135
155
|
return hasClass ? this.removeClass(value) : this.addClass(value);
|
|
136
156
|
}
|
|
@@ -143,14 +163,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
|
|
|
143
163
|
* Set component visibility
|
|
144
164
|
*/
|
|
145
165
|
visible(value: boolean): this {
|
|
146
|
-
|
|
147
|
-
if (this.container) {
|
|
148
|
-
// Find the actual component wrapper, not the parent container
|
|
149
|
-
const wrapper = this.container.querySelector(`#${this._id}`) as HTMLElement;
|
|
150
|
-
if (wrapper) {
|
|
151
|
-
wrapper.style.display = value ? '' : 'none';
|
|
152
|
-
}
|
|
153
|
-
}
|
|
166
|
+
this.state.visible = value; // ✅ Triggers update()
|
|
154
167
|
return this;
|
|
155
168
|
}
|
|
156
169
|
|
|
@@ -218,14 +231,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
|
|
|
218
231
|
* Set disabled state for interactive elements
|
|
219
232
|
*/
|
|
220
233
|
disabled(value: boolean): this {
|
|
221
|
-
|
|
222
|
-
if (this.container) {
|
|
223
|
-
const inputs = this.container.querySelectorAll('input, button, select, textarea');
|
|
224
|
-
inputs.forEach(el => {
|
|
225
|
-
(el as HTMLInputElement).disabled = value;
|
|
226
|
-
});
|
|
227
|
-
this.container.setAttribute('aria-disabled', String(value));
|
|
228
|
-
}
|
|
234
|
+
this.state.disabled = value; // ✅ Triggers update()
|
|
229
235
|
return this;
|
|
230
236
|
}
|
|
231
237
|
|
|
@@ -251,16 +257,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
|
|
|
251
257
|
* Set loading state
|
|
252
258
|
*/
|
|
253
259
|
loading(value: boolean): this {
|
|
254
|
-
|
|
255
|
-
if (this.container) {
|
|
256
|
-
if (value) {
|
|
257
|
-
this.container.classList.add('jux-loading');
|
|
258
|
-
this.container.setAttribute('aria-busy', 'true');
|
|
259
|
-
} else {
|
|
260
|
-
this.container.classList.remove('jux-loading');
|
|
261
|
-
this.container.removeAttribute('aria-busy');
|
|
262
|
-
}
|
|
263
|
-
}
|
|
260
|
+
this.state.loading = value; // ✅ Triggers update()
|
|
264
261
|
return this;
|
|
265
262
|
}
|
|
266
263
|
|
|
@@ -439,7 +436,11 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
|
|
|
439
436
|
* ═════════════════════════════════════════════════════════════════ */
|
|
440
437
|
|
|
441
438
|
/**
|
|
442
|
-
* ✅ Read-only accessor for component state
|
|
439
|
+
* ✅ Read-only accessor for component state (getter, not a method)
|
|
440
|
+
*
|
|
441
|
+
* Usage:
|
|
442
|
+
* const myState = component.props; // ✅ Correct
|
|
443
|
+
* const myState = component.props(); // ❌ Error: props is not a function
|
|
443
444
|
*/
|
|
444
445
|
get props(): Readonly<TState> {
|
|
445
446
|
return this.state as Readonly<TState>;
|
package/lib/components/hero.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseComponent } from './base/BaseComponent.js';
|
|
1
|
+
import { BaseComponent, BaseState } from './base/BaseComponent.js';
|
|
2
2
|
export interface HeroOptions {
|
|
3
3
|
title?: string;
|
|
4
4
|
subtitle?: string;
|
|
@@ -16,7 +16,7 @@ export interface HeroOptions {
|
|
|
16
16
|
style?: string;
|
|
17
17
|
class?: string;
|
|
18
18
|
}
|
|
19
|
-
type HeroState = {
|
|
19
|
+
type HeroState = BaseState & {
|
|
20
20
|
title: string;
|
|
21
21
|
subtitle: string;
|
|
22
22
|
content: string;
|
|
@@ -30,8 +30,6 @@ type HeroState = {
|
|
|
30
30
|
backgroundOverlay: boolean;
|
|
31
31
|
variant: string;
|
|
32
32
|
centered: boolean;
|
|
33
|
-
style: string;
|
|
34
|
-
class: string;
|
|
35
33
|
};
|
|
36
34
|
export declare class Hero extends BaseComponent<HeroState> {
|
|
37
35
|
constructor(id: string, options?: HeroOptions);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IA8CtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAatF,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAsEhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
|
package/lib/components/hero.js
CHANGED
|
@@ -37,7 +37,7 @@ export class Hero extends BaseComponent {
|
|
|
37
37
|
update(prop, value) {
|
|
38
38
|
const hero = document.getElementById(this._id);
|
|
39
39
|
if (!hero)
|
|
40
|
-
return;
|
|
40
|
+
return;
|
|
41
41
|
switch (prop) {
|
|
42
42
|
case 'title':
|
|
43
43
|
const titleEl = document.getElementById(`${this._id}-title`);
|
|
@@ -50,17 +50,17 @@ export class Hero extends BaseComponent {
|
|
|
50
50
|
subtitleEl.textContent = value;
|
|
51
51
|
break;
|
|
52
52
|
case 'content':
|
|
53
|
-
const contentEl = hero.querySelector('.jux-hero-body');
|
|
53
|
+
const contentEl = hero.querySelector('.jux-hero-body'); // ✅ BEM naming
|
|
54
54
|
if (contentEl)
|
|
55
55
|
contentEl.innerHTML = value;
|
|
56
56
|
break;
|
|
57
57
|
case 'cta':
|
|
58
|
-
const ctaEl = hero.querySelector('.jux-hero-cta');
|
|
58
|
+
const ctaEl = hero.querySelector('.jux-hero-cta'); // ✅ BEM naming
|
|
59
59
|
if (ctaEl)
|
|
60
60
|
ctaEl.textContent = value;
|
|
61
61
|
break;
|
|
62
62
|
case 'ctaLink':
|
|
63
|
-
const ctaLinkEl = hero.querySelector('.jux-hero-cta');
|
|
63
|
+
const ctaLinkEl = hero.querySelector('.jux-hero-cta'); // ✅ BEM naming
|
|
64
64
|
if (ctaLinkEl)
|
|
65
65
|
ctaLinkEl.href = value;
|
|
66
66
|
break;
|
|
@@ -70,10 +70,7 @@ export class Hero extends BaseComponent {
|
|
|
70
70
|
hero.style.backgroundRepeat = value.repeat;
|
|
71
71
|
break;
|
|
72
72
|
case 'centered':
|
|
73
|
-
|
|
74
|
-
hero.classList.add('jux-hero-centered');
|
|
75
|
-
else
|
|
76
|
-
hero.classList.remove('jux-hero-centered');
|
|
73
|
+
hero.classList.toggle('jux-hero-centered', value); // ✅ BEM modifier
|
|
77
74
|
break;
|
|
78
75
|
}
|
|
79
76
|
}
|
|
@@ -177,7 +174,6 @@ export class Hero extends BaseComponent {
|
|
|
177
174
|
ctaButton.className = 'jux-hero-cta';
|
|
178
175
|
ctaButton.href = this.state.ctaLink;
|
|
179
176
|
ctaButton.textContent = this.state.cta;
|
|
180
|
-
// ✅ Fire callback when CTA is clicked
|
|
181
177
|
ctaButton.addEventListener('click', (e) => {
|
|
182
178
|
this._triggerCallback('ctaClick', e);
|
|
183
179
|
});
|
|
@@ -185,7 +181,7 @@ export class Hero extends BaseComponent {
|
|
|
185
181
|
}
|
|
186
182
|
hero.appendChild(contentContainer);
|
|
187
183
|
this._wireStandardEvents(hero);
|
|
188
|
-
this._wireAllSyncs();
|
|
184
|
+
this._wireAllSyncs();
|
|
189
185
|
container.appendChild(hero);
|
|
190
186
|
return this;
|
|
191
187
|
}
|