juxscript 1.1.10 → 1.1.11

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/hero.d.ts +15 -3
  2. package/lib/components/hero.d.ts.map +1 -1
  3. package/lib/components/hero.js +29 -4
  4. package/lib/components/hero.ts +35 -7
  5. package/package.json +1 -1
package/lib/components/hero.d.ts CHANGED
@@ -5,7 +5,11 @@ export interface HeroOptions {
5
5
  content?: string;
6
6
  cta?: string;
7
7
  ctaLink?: string;
8
- backgroundImage?: string;
8
+ backgroundImage?: string | {
9
+ url: string;
10
+ size?: string;
11
+ repeat?: string;
12
+ };
9
13
  backgroundOverlay?: boolean;
10
14
  variant?: 'default' | 'centered' | 'split';
11
15
  centered?: boolean;
@@ -18,7 +22,11 @@ type HeroState = {
18
22
  content: string;
19
23
  cta: string;
20
24
  ctaLink: string;
21
- backgroundImage: string;
25
+ backgroundImage: {
26
+ url: string;
27
+ size: string;
28
+ repeat: string;
29
+ };
22
30
  backgroundOverlay: boolean;
23
31
  variant: string;
24
32
  centered: boolean;
@@ -34,7 +42,11 @@ export declare class Hero extends BaseComponent<HeroState> {
34
42
  content(value: string): this;
35
43
  cta(value: string): this;
36
44
  ctaLink(value: string): this;
37
- backgroundImage(value: string): this;
45
+ backgroundImage(value: string | {
46
+ url: string;
47
+ size?: string;
48
+ repeat?: string;
49
+ }): this;
38
50
  backgroundOverlay(value: boolean): this;
39
51
  variant(value: string): this;
40
52
  centered(value: boolean): this;
package/lib/components/hero.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,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,CAAC;IACzB,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;IACf,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,MAAM,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAgBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,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,IAAI;IAKpC,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;CA2GhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
1
+ {"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,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;IACf,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;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAqBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,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;CA6GhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
package/lib/components/hero.js CHANGED
@@ -4,13 +4,17 @@ const TRIGGER_EVENTS = [];
4
4
  const CALLBACK_EVENTS = ['ctaClick']; // ✅ When CTA button is clicked
5
5
  export class Hero extends BaseComponent {
6
6
  constructor(id, options = {}) {
7
+ // Normalize backgroundImage to object format
8
+ const bgImage = typeof options.backgroundImage === 'string'
9
+ ? { url: options.backgroundImage, size: 'cover', repeat: 'no-repeat' }
10
+ : options.backgroundImage || { url: '', size: 'cover', repeat: 'no-repeat' };
7
11
  super(id, {
8
12
  title: options.title ?? '',
9
13
  subtitle: options.subtitle ?? '',
10
14
  content: options.content ?? '', // ✅ ADD
11
15
  cta: options.cta ?? '',
12
16
  ctaLink: options.ctaLink ?? '#',
13
- backgroundImage: options.backgroundImage ?? '',
17
+ backgroundImage: { url: bgImage.url, size: bgImage.size || 'cover', repeat: bgImage.repeat || 'no-repeat' },
14
18
  backgroundOverlay: options.backgroundOverlay ?? false, // ✅ ADD
15
19
  variant: options.variant ?? 'default',
16
20
  centered: options.centered ?? false, // ✅ ADD
@@ -48,7 +52,16 @@ export class Hero extends BaseComponent {
48
52
  return this;
49
53
  }
50
54
  backgroundImage(value) {
51
- this.state.backgroundImage = value;
55
+ if (typeof value === 'string') {
56
+ this.state.backgroundImage = { url: value, size: 'cover', repeat: 'no-repeat' };
57
+ }
58
+ else {
59
+ this.state.backgroundImage = {
60
+ url: value.url,
61
+ size: value.size || 'cover',
62
+ repeat: value.repeat || 'no-repeat'
63
+ };
64
+ }
52
65
  return this;
53
66
  }
54
67
  backgroundOverlay(value) {
@@ -78,8 +91,10 @@ export class Hero extends BaseComponent {
78
91
  hero.className += ` ${className}`;
79
92
  if (style)
80
93
  hero.setAttribute('style', style);
81
- if (backgroundImage) {
82
- hero.style.backgroundImage = `url(${backgroundImage})`;
94
+ if (backgroundImage.url) {
95
+ hero.style.backgroundImage = `url(${backgroundImage.url})`;
96
+ hero.style.backgroundSize = backgroundImage.size;
97
+ hero.style.backgroundRepeat = backgroundImage.repeat;
83
98
  if (backgroundOverlay) {
84
99
  const overlay = document.createElement('div');
85
100
  overlay.className = 'jux-hero-overlay';
@@ -163,3 +178,13 @@ export class Hero extends BaseComponent {
163
178
  export function hero(id, options = {}) {
164
179
  return new Hero(id, options);
165
180
  }
181
+ // String format (backward compatible)
182
+ hero('h1').backgroundImage('/hero.jpg');
183
+ // Object format with defaults
184
+ hero('h2').backgroundImage({ url: '/hero.jpg' });
185
+ // Object format with custom values
186
+ hero('h3').backgroundImage({
187
+ url: '/pattern.png',
188
+ size: 'contain',
189
+ repeat: 'repeat'
190
+ });
package/lib/components/hero.ts CHANGED
@@ -10,7 +10,7 @@ export interface HeroOptions {
10
10
  content?: string; // ✅ ADD: Generates jux-hero-body div
11
11
  cta?: string; // ✅ KEEP: Generates jux-hero-cta anchor
12
12
  ctaLink?: string;
13
- backgroundImage?: string;
13
+ backgroundImage?: string | { url: string; size?: string; repeat?: string };
14
14
  backgroundOverlay?: boolean; // ✅ ADD: Generates jux-hero-overlay div
15
15
  variant?: 'default' | 'centered' | 'split';
16
16
  centered?: boolean; // ✅ ADD: Affects container class
@@ -24,7 +24,7 @@ type HeroState = {
24
24
  content: string; // ✅ ADD: For jux-hero-body
25
25
  cta: string;
26
26
  ctaLink: string;
27
- backgroundImage: string;
27
+ backgroundImage: { url: string; size: string; repeat: string };
28
28
  backgroundOverlay: boolean; // ✅ ADD: For overlay div
29
29
  variant: string;
30
30
  centered: boolean; // ✅ ADD: For layout variant
@@ -34,13 +34,18 @@ type HeroState = {
34
34
 
35
35
  export class Hero extends BaseComponent<HeroState> {
36
36
  constructor(id: string, options: HeroOptions = {}) {
37
+ // Normalize backgroundImage to object format
38
+ const bgImage = typeof options.backgroundImage === 'string'
39
+ ? { url: options.backgroundImage, size: 'cover', repeat: 'no-repeat' }
40
+ : options.backgroundImage || { url: '', size: 'cover', repeat: 'no-repeat' };
41
+
37
42
  super(id, {
38
43
  title: options.title ?? '',
39
44
  subtitle: options.subtitle ?? '',
40
45
  content: options.content ?? '', // ✅ ADD
41
46
  cta: options.cta ?? '',
42
47
  ctaLink: options.ctaLink ?? '#',
43
- backgroundImage: options.backgroundImage ?? '',
48
+ backgroundImage: { url: bgImage.url, size: bgImage.size || 'cover', repeat: bgImage.repeat || 'no-repeat' },
44
49
  backgroundOverlay: options.backgroundOverlay ?? false, // ✅ ADD
45
50
  variant: options.variant ?? 'default',
46
51
  centered: options.centered ?? false, // ✅ ADD
@@ -86,8 +91,16 @@ export class Hero extends BaseComponent<HeroState> {
86
91
  return this;
87
92
  }
88
93
 
89
- backgroundImage(value: string): this {
90
- this.state.backgroundImage = value;
94
+ backgroundImage(value: string | { url: string; size?: string; repeat?: string }): this {
95
+ if (typeof value === 'string') {
96
+ this.state.backgroundImage = { url: value, size: 'cover', repeat: 'no-repeat' };
97
+ } else {
98
+ this.state.backgroundImage = {
99
+ url: value.url,
100
+ size: value.size || 'cover',
101
+ repeat: value.repeat || 'no-repeat'
102
+ };
103
+ }
91
104
  return this;
92
105
  }
93
106
 
@@ -122,8 +135,10 @@ export class Hero extends BaseComponent<HeroState> {
122
135
  if (className) hero.className += ` ${className}`;
123
136
  if (style) hero.setAttribute('style', style);
124
137
 
125
- if (backgroundImage) {
126
- hero.style.backgroundImage = `url(${backgroundImage})`;
138
+ if (backgroundImage.url) {
139
+ hero.style.backgroundImage = `url(${backgroundImage.url})`;
140
+ hero.style.backgroundSize = backgroundImage.size;
141
+ hero.style.backgroundRepeat = backgroundImage.repeat;
127
142
  if (backgroundOverlay) {
128
143
  const overlay = document.createElement('div');
129
144
  overlay.className = 'jux-hero-overlay';
@@ -222,3 +237,16 @@ export class Hero extends BaseComponent<HeroState> {
222
237
  export function hero(id: string, options: HeroOptions = {}): Hero {
223
238
  return new Hero(id, options);
224
239
  }
240
+
241
+ // String format (backward compatible)
242
+ hero('h1').backgroundImage('/hero.jpg')
243
+
244
+ // Object format with defaults
245
+ hero('h2').backgroundImage({ url: '/hero.jpg' })
246
+
247
+ // Object format with custom values
248
+ hero('h3').backgroundImage({
249
+ url: '/pattern.png',
250
+ size: 'contain',
251
+ repeat: 'repeat'
252
+ })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "juxscript",
3
- "version": "1.1.10",
3
+ "version": "1.1.11",
4
4
  "type": "module",
5
5
  "description": "A JavaScript UX authorship platform",
6
6
  "main": "index.js",