juxscript 1.1.64 → 1.1.66

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.
Files changed (5) hide show
  1. package/lib/components/container.d.ts +17 -0
  2. package/lib/components/container.d.ts.map +1 -1
  3. package/lib/components/container.js +101 -2
  4. package/lib/components/container.ts +117 -2
  5. package/package.json +1 -1
package/lib/components/container.d.ts CHANGED
@@ -3,6 +3,7 @@ import { BaseComponent } from './base/BaseComponent.js';
3
3
  * Container options
4
4
  */
5
5
  export interface ContainerOptions {
6
+ content?: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
6
7
  class?: string;
7
8
  style?: string;
8
9
  direction?: 'row' | 'column';
@@ -14,6 +15,7 @@ export interface ContainerOptions {
14
15
  * Container state
15
16
  */
16
17
  type ContainerState = {
18
+ content: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
17
19
  class: string;
18
20
  style: string;
19
21
  direction?: 'row' | 'column';
@@ -25,14 +27,29 @@ type ContainerState = {
25
27
  * Container component - a simple div container for grouping elements
26
28
  */
27
29
  export declare class Container extends BaseComponent<ContainerState> {
30
+ private _containerElement;
28
31
  constructor(id: string, options?: ContainerOptions);
29
32
  protected getTriggerEvents(): readonly string[];
30
33
  protected getCallbackEvents(): readonly string[];
31
34
  update(prop: string, value: any): void;
35
+ private _updateContent;
36
+ content(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this;
32
37
  direction(value: 'row' | 'column'): this;
33
38
  gap(value: string | number): this;
34
39
  align(value: 'start' | 'center' | 'end' | 'stretch'): this;
35
40
  justify(value: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'): this;
41
+ /**
42
+ * Add content to container (supports strings and BaseComponents)
43
+ */
44
+ addContent(content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this;
45
+ /**
46
+ * Clear all content from container
47
+ */
48
+ clearContent(): this;
49
+ /**
50
+ * Get the container element ID for rendering child components
51
+ */
52
+ contentId(): string;
36
53
  render(targetId?: string | HTMLElement | BaseComponent<any>): this;
37
54
  }
38
55
  /**
package/lib/components/container.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"container.d.ts","sourceRoot":"","sources":["container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;CAC1F;AAED;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,CAAC;gBAC9C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IAWtD,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;IAgBtC,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI;IAKxC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAKjC,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI;IAK1D,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI;IASpG,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA2CnE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAE/E"}
1
+ {"version":3,"file":"container.d.ts","sourceRoot":"","sources":["container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;CAC1F;AAED;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,CAAC;IAC1D,OAAO,CAAC,iBAAiB,CAA4B;gBAEzC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IAYtD,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;IA6BtC,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IAKtF,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI;IAKxC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAKjC,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI;IAK1D,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI;IAKpG;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IAuB3F;;OAEG;IACH,YAAY,IAAI,IAAI;IAOpB;;OAEG;IACH,SAAS,IAAI,MAAM;IAQnB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA4DnE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAE/E"}
package/lib/components/container.js CHANGED
@@ -8,6 +8,7 @@ const CALLBACK_EVENTS = ['click'];
8
8
  export class Container extends BaseComponent {
9
9
  constructor(id, options = {}) {
10
10
  super(id, {
11
+ content: options.content ?? [],
11
12
  class: options.class ?? '',
12
13
  style: options.style ?? '',
13
14
  direction: options.direction,
@@ -15,6 +16,7 @@ export class Container extends BaseComponent {
15
16
  align: options.align,
16
17
  justify: options.justify
17
18
  });
19
+ this._containerElement = null;
18
20
  }
19
21
  getTriggerEvents() {
20
22
  return TRIGGER_EVENTS;
@@ -23,7 +25,45 @@ export class Container extends BaseComponent {
23
25
  return CALLBACK_EVENTS;
24
26
  }
25
27
  update(prop, value) {
26
- // No reactive updates needed
28
+ super.update(prop, value);
29
+ if (!this._containerElement)
30
+ return;
31
+ switch (prop) {
32
+ case 'content':
33
+ this._updateContent(value);
34
+ break;
35
+ case 'direction':
36
+ this._containerElement.style.flexDirection = value;
37
+ break;
38
+ case 'gap':
39
+ const gapValue = typeof value === 'number' ? `${value}px` : value;
40
+ this._containerElement.style.gap = gapValue;
41
+ break;
42
+ case 'align':
43
+ this._containerElement.style.alignItems = value;
44
+ break;
45
+ case 'justify':
46
+ this._containerElement.style.justifyContent = value;
47
+ break;
48
+ }
49
+ }
50
+ _updateContent(value) {
51
+ if (!this._containerElement)
52
+ return;
53
+ this._containerElement.innerHTML = '';
54
+ const items = Array.isArray(value) ? value : [value];
55
+ items.forEach(item => {
56
+ if (typeof item === 'string') {
57
+ const tempDiv = document.createElement('div');
58
+ tempDiv.innerHTML = item;
59
+ while (tempDiv.firstChild) {
60
+ this._containerElement.appendChild(tempDiv.firstChild);
61
+ }
62
+ }
63
+ else if (item instanceof BaseComponent) {
64
+ item.render(this._containerElement);
65
+ }
66
+ });
27
67
  }
28
68
  /* -------------------------
29
69
  * Fluent API
@@ -35,6 +75,10 @@ export class Container extends BaseComponent {
35
75
  // - visible(), show(), hide()
36
76
  // - attr(), attrs(), removeAttr()
37
77
  // - disabled(), enable(), disable()
78
+ content(value) {
79
+ this.state.content = value;
80
+ return this;
81
+ }
38
82
  direction(value) {
39
83
  this.state.direction = value;
40
84
  return this;
@@ -51,14 +95,53 @@ export class Container extends BaseComponent {
51
95
  this.state.justify = value;
52
96
  return this;
53
97
  }
98
+ /**
99
+ * Add content to container (supports strings and BaseComponents)
100
+ */
101
+ addContent(content) {
102
+ if (!this._containerElement) {
103
+ console.warn('[Container] Container element not found');
104
+ return this;
105
+ }
106
+ const items = Array.isArray(content) ? content : [content];
107
+ items.forEach(item => {
108
+ if (typeof item === 'string') {
109
+ const tempDiv = document.createElement('div');
110
+ tempDiv.innerHTML = item;
111
+ while (tempDiv.firstChild) {
112
+ this._containerElement.appendChild(tempDiv.firstChild);
113
+ }
114
+ }
115
+ else if (item instanceof BaseComponent) {
116
+ item.render(this._containerElement);
117
+ }
118
+ });
119
+ return this;
120
+ }
121
+ /**
122
+ * Clear all content from container
123
+ */
124
+ clearContent() {
125
+ if (this._containerElement) {
126
+ this._containerElement.innerHTML = '';
127
+ }
128
+ return this;
129
+ }
130
+ /**
131
+ * Get the container element ID for rendering child components
132
+ */
133
+ contentId() {
134
+ return `${this._id}-content`;
135
+ }
54
136
  /* -------------------------
55
137
  * Render
56
138
  * ------------------------- */
57
139
  render(targetId) {
58
140
  const container = this._setupContainer(targetId);
59
- const { class: className, style, direction, gap, align, justify } = this.state;
141
+ const { content, class: className, style, direction, gap, align, justify } = this.state;
60
142
  const div = document.createElement('div');
61
143
  div.id = this._id;
144
+ this._containerElement = div;
62
145
  // Always include jux-container class, append custom classes
63
146
  div.className = className ? `jux-container ${className}` : 'jux-container';
64
147
  // Only apply flex styles if any flex properties are set
@@ -83,6 +166,22 @@ export class Container extends BaseComponent {
83
166
  if (computedStyle) {
84
167
  div.setAttribute('style', computedStyle);
85
168
  }
169
+ // Render initial content
170
+ if (content) {
171
+ const items = Array.isArray(content) ? content : [content];
172
+ items.forEach(item => {
173
+ if (typeof item === 'string') {
174
+ const tempDiv = document.createElement('div');
175
+ tempDiv.innerHTML = item;
176
+ while (tempDiv.firstChild) {
177
+ div.appendChild(tempDiv.firstChild);
178
+ }
179
+ }
180
+ else if (item instanceof BaseComponent) {
181
+ item.render(div);
182
+ }
183
+ });
184
+ }
86
185
  this._wireStandardEvents(div);
87
186
  container.appendChild(div);
88
187
  return this;
package/lib/components/container.ts CHANGED
@@ -8,6 +8,7 @@ const CALLBACK_EVENTS = ['click'] as const;
8
8
  * Container options
9
9
  */
10
10
  export interface ContainerOptions {
11
+ content?: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
11
12
  class?: string;
12
13
  style?: string;
13
14
  direction?: 'row' | 'column';
@@ -20,6 +21,7 @@ export interface ContainerOptions {
20
21
  * Container state
21
22
  */
22
23
  type ContainerState = {
24
+ content: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
23
25
  class: string;
24
26
  style: string;
25
27
  direction?: 'row' | 'column';
@@ -32,8 +34,11 @@ type ContainerState = {
32
34
  * Container component - a simple div container for grouping elements
33
35
  */
34
36
  export class Container extends BaseComponent<ContainerState> {
37
+ private _containerElement: HTMLElement | null = null;
38
+
35
39
  constructor(id: string, options: ContainerOptions = {}) {
36
40
  super(id, {
41
+ content: options.content ?? [],
37
42
  class: options.class ?? '',
38
43
  style: options.style ?? '',
39
44
  direction: options.direction,
@@ -52,7 +57,52 @@ export class Container extends BaseComponent<ContainerState> {
52
57
  }
53
58
 
54
59
  update(prop: string, value: any): void {
55
- // No reactive updates needed
60
+ super.update(prop, value);
61
+
62
+ if (!this._containerElement) return;
63
+
64
+ switch (prop) {
65
+ case 'content':
66
+ this._updateContent(value);
67
+ break;
68
+
69
+ case 'direction':
70
+ this._containerElement.style.flexDirection = value;
71
+ break;
72
+
73
+ case 'gap':
74
+ const gapValue = typeof value === 'number' ? `${value}px` : value;
75
+ this._containerElement.style.gap = gapValue;
76
+ break;
77
+
78
+ case 'align':
79
+ this._containerElement.style.alignItems = value;
80
+ break;
81
+
82
+ case 'justify':
83
+ this._containerElement.style.justifyContent = value;
84
+ break;
85
+ }
86
+ }
87
+
88
+ private _updateContent(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): void {
89
+ if (!this._containerElement) return;
90
+
91
+ this._containerElement.innerHTML = '';
92
+
93
+ const items = Array.isArray(value) ? value : [value];
94
+
95
+ items.forEach(item => {
96
+ if (typeof item === 'string') {
97
+ const tempDiv = document.createElement('div');
98
+ tempDiv.innerHTML = item;
99
+ while (tempDiv.firstChild) {
100
+ this._containerElement!.appendChild(tempDiv.firstChild);
101
+ }
102
+ } else if (item instanceof BaseComponent) {
103
+ item.render(this._containerElement!);
104
+ }
105
+ });
56
106
  }
57
107
 
58
108
  /* -------------------------
@@ -67,6 +117,11 @@ export class Container extends BaseComponent<ContainerState> {
67
117
  // - attr(), attrs(), removeAttr()
68
118
  // - disabled(), enable(), disable()
69
119
 
120
+ content(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this {
121
+ this.state.content = value;
122
+ return this;
123
+ }
124
+
70
125
  direction(value: 'row' | 'column'): this {
71
126
  this.state.direction = value;
72
127
  return this;
@@ -87,6 +142,49 @@ export class Container extends BaseComponent<ContainerState> {
87
142
  return this;
88
143
  }
89
144
 
145
+ /**
146
+ * Add content to container (supports strings and BaseComponents)
147
+ */
148
+ addContent(content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this {
149
+ if (!this._containerElement) {
150
+ console.warn('[Container] Container element not found');
151
+ return this;
152
+ }
153
+
154
+ const items = Array.isArray(content) ? content : [content];
155
+
156
+ items.forEach(item => {
157
+ if (typeof item === 'string') {
158
+ const tempDiv = document.createElement('div');
159
+ tempDiv.innerHTML = item;
160
+ while (tempDiv.firstChild) {
161
+ this._containerElement!.appendChild(tempDiv.firstChild);
162
+ }
163
+ } else if (item instanceof BaseComponent) {
164
+ item.render(this._containerElement!);
165
+ }
166
+ });
167
+
168
+ return this;
169
+ }
170
+
171
+ /**
172
+ * Clear all content from container
173
+ */
174
+ clearContent(): this {
175
+ if (this._containerElement) {
176
+ this._containerElement.innerHTML = '';
177
+ }
178
+ return this;
179
+ }
180
+
181
+ /**
182
+ * Get the container element ID for rendering child components
183
+ */
184
+ contentId(): string {
185
+ return `${this._id}-content`;
186
+ }
187
+
90
188
  /* -------------------------
91
189
  * Render
92
190
  * ------------------------- */
@@ -94,10 +192,11 @@ export class Container extends BaseComponent<ContainerState> {
94
192
  render(targetId?: string | HTMLElement | BaseComponent<any>): this {
95
193
  const container = this._setupContainer(targetId);
96
194
 
97
- const { class: className, style, direction, gap, align, justify } = this.state;
195
+ const { content, class: className, style, direction, gap, align, justify } = this.state;
98
196
 
99
197
  const div = document.createElement('div');
100
198
  div.id = this._id;
199
+ this._containerElement = div;
101
200
 
102
201
  // Always include jux-container class, append custom classes
103
202
  div.className = className ? `jux-container ${className}` : 'jux-container';
@@ -128,6 +227,22 @@ export class Container extends BaseComponent<ContainerState> {
128
227
  div.setAttribute('style', computedStyle);
129
228
  }
130
229
 
230
+ // Render initial content
231
+ if (content) {
232
+ const items = Array.isArray(content) ? content : [content];
233
+ items.forEach(item => {
234
+ if (typeof item === 'string') {
235
+ const tempDiv = document.createElement('div');
236
+ tempDiv.innerHTML = item;
237
+ while (tempDiv.firstChild) {
238
+ div.appendChild(tempDiv.firstChild);
239
+ }
240
+ } else if (item instanceof BaseComponent) {
241
+ item.render(div);
242
+ }
243
+ });
244
+ }
245
+
131
246
  this._wireStandardEvents(div);
132
247
 
133
248
  container.appendChild(div);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "juxscript",
3
- "version": "1.1.64",
3
+ "version": "1.1.66",
4
4
  "type": "module",
5
5
  "description": "A JavaScript UX authorship platform",
6
6
  "main": "index.js",