juxscript 1.1.78 → 1.1.79
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/base/FormInput.d.ts +1 -1
- package/lib/components/base/FormInput.d.ts.map +1 -1
- package/lib/components/base/FormInput.js +4 -2
- package/lib/components/base/FormInput.ts +5 -2
- package/lib/components/button.d.ts.map +1 -1
- package/lib/components/button.js +2 -1
- package/lib/components/button.ts +2 -1
- package/lib/components/input.js +1 -1
- package/lib/components/input.ts +1 -1
- package/lib/utils/formatId.d.ts +16 -0
- package/lib/utils/formatId.d.ts.map +1 -0
- package/lib/utils/formatId.js +27 -0
- package/lib/utils/formatId.ts +28 -0
- package/package.json +1 -1
package/dom-structure-map.json
CHANGED
|
@@ -58,7 +58,7 @@ export declare abstract class FormInput<TState extends FormInputState> extends B
|
|
|
58
58
|
*/
|
|
59
59
|
protected _clearError(): void;
|
|
60
60
|
/**
|
|
61
|
-
* Build label element
|
|
61
|
+
* Build label element with auto-generated text from ID if not provided
|
|
62
62
|
*/
|
|
63
63
|
protected _renderLabel(): HTMLLabelElement;
|
|
64
64
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["FormInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["FormInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,8BAAsB,SAAS,CAAC,MAAM,SAAS,cAAc,CAAE,SAAQ,aAAa,CAAC,MAAM,CAAC;IACxF,SAAS,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAQ;IACnD,SAAS,CAAC,aAAa,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IACxD,SAAS,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAQ;IACnD,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,GAAG,MAAM,CAAC;IACzD,SAAS,CAAC,iBAAiB,EAAE,OAAO,CAAS;IAM7C;;OAEG;IACH,QAAQ,CAAC,QAAQ,IAAI,GAAG;IAExB;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAEnC;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,kBAAkB,IAAI,WAAW;IAEpD;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,GAAG,MAAM;IAM/D,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ1B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,GAAG,MAAM,GAAG,IAAI;IAS3D;;OAEG;IACH,QAAQ,IAAI,OAAO;IAcnB;;OAEG;IACH,OAAO,IAAI,OAAO;IAKlB;;OAEG;IACH,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAa3C;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAiB7B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,gBAAgB;IAqB1C;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,WAAW;IAUrC;;OAEG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAItC;;OAEG;IACH,SAAS,CAAC,aAAa,CAAC,YAAY,EAAE,WAAW,EAAE,SAAS,GAAE,MAAgB,GAAG,IAAI;CA8CxF"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { BaseComponent } from './BaseComponent.js';
|
|
2
|
+
import { formatIdAsLabel } from '../../utils/formatId.js'; // ✅ Import utility
|
|
2
3
|
/**
|
|
3
4
|
* Abstract base class for all form input components
|
|
4
5
|
* Extends BaseComponent with form-specific functionality
|
|
@@ -89,14 +90,15 @@ export class FormInput extends BaseComponent {
|
|
|
89
90
|
* COMMON RENDER HELPERS
|
|
90
91
|
* ═════════════════════════════════════════════════════════════════ */
|
|
91
92
|
/**
|
|
92
|
-
* Build label element
|
|
93
|
+
* Build label element with auto-generated text from ID if not provided
|
|
93
94
|
*/
|
|
94
95
|
_renderLabel() {
|
|
95
96
|
const { label, required } = this.state;
|
|
96
97
|
const labelEl = document.createElement('label');
|
|
97
98
|
labelEl.className = 'jux-input-label';
|
|
98
99
|
labelEl.htmlFor = `${this._id}-input`;
|
|
99
|
-
|
|
100
|
+
// ✅ Use provided label or auto-generate from ID
|
|
101
|
+
labelEl.textContent = label || formatIdAsLabel(this._id);
|
|
100
102
|
if (required) {
|
|
101
103
|
const requiredSpan = document.createElement('span');
|
|
102
104
|
requiredSpan.className = 'jux-input-required';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { BaseComponent } from './BaseComponent.js';
|
|
2
|
+
import { formatIdAsLabel } from '../../utils/formatId.js'; // ✅ Import utility
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* Base state interface for all form inputs
|
|
@@ -141,7 +142,7 @@ export abstract class FormInput<TState extends FormInputState> extends BaseCompo
|
|
|
141
142
|
* ═════════════════════════════════════════════════════════════════ */
|
|
142
143
|
|
|
143
144
|
/**
|
|
144
|
-
* Build label element
|
|
145
|
+
* Build label element with auto-generated text from ID if not provided
|
|
145
146
|
*/
|
|
146
147
|
protected _renderLabel(): HTMLLabelElement {
|
|
147
148
|
const { label, required } = this.state;
|
|
@@ -149,7 +150,9 @@ export abstract class FormInput<TState extends FormInputState> extends BaseCompo
|
|
|
149
150
|
const labelEl = document.createElement('label');
|
|
150
151
|
labelEl.className = 'jux-input-label';
|
|
151
152
|
labelEl.htmlFor = `${this._id}-input`;
|
|
152
|
-
|
|
153
|
+
|
|
154
|
+
// ✅ Use provided label or auto-generate from ID
|
|
155
|
+
labelEl.textContent = label || formatIdAsLabel(this._id);
|
|
153
156
|
|
|
154
157
|
if (required) {
|
|
155
158
|
const requiredSpan = document.createElement('span');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQxD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChG,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IACpD,OAAO,CAAC,cAAc,CAAkC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa;IAkB/C,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAUhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;IAK3G,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAK/C,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAK3C,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAKhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAkDnE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAElE"}
|
package/lib/components/button.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { BaseComponent } from './base/BaseComponent.js';
|
|
2
2
|
import { renderIcon } from './icons.js';
|
|
3
|
+
import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import utility
|
|
3
4
|
// Event definitions
|
|
4
5
|
const TRIGGER_EVENTS = [];
|
|
5
6
|
const CALLBACK_EVENTS = ['click']; // ✅ Button fires click events
|
|
@@ -7,7 +8,7 @@ export class Button extends BaseComponent {
|
|
|
7
8
|
constructor(id, options) {
|
|
8
9
|
const opts = options || {};
|
|
9
10
|
super(id, {
|
|
10
|
-
label: opts.label ??
|
|
11
|
+
label: opts.label ?? formatIdAsLabel(id), // ✅ Use utility for default
|
|
11
12
|
icon: opts.icon ?? '',
|
|
12
13
|
variant: opts.variant ?? 'primary',
|
|
13
14
|
size: opts.size ?? 'medium',
|
package/lib/components/button.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { BaseComponent } from './base/BaseComponent.js';
|
|
2
2
|
import { renderIcon } from './icons.js';
|
|
3
|
+
import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import utility
|
|
3
4
|
|
|
4
5
|
// Event definitions
|
|
5
6
|
const TRIGGER_EVENTS = [] as const;
|
|
@@ -40,7 +41,7 @@ export class Button extends BaseComponent<ButtonState> {
|
|
|
40
41
|
const opts = options || {};
|
|
41
42
|
|
|
42
43
|
super(id, {
|
|
43
|
-
label: opts.label ??
|
|
44
|
+
label: opts.label ?? formatIdAsLabel(id), // ✅ Use utility for default
|
|
44
45
|
icon: opts.icon ?? '',
|
|
45
46
|
variant: opts.variant ?? 'primary',
|
|
46
47
|
size: opts.size ?? 'medium',
|
package/lib/components/input.js
CHANGED
|
@@ -9,7 +9,7 @@ export class Input extends FormInput {
|
|
|
9
9
|
type: options.type ?? 'text',
|
|
10
10
|
value: options.value ?? '',
|
|
11
11
|
placeholder: options.placeholder ?? '',
|
|
12
|
-
label: options.label ?? '',
|
|
12
|
+
label: options.label ?? '', // ✅ Empty string = auto-generate in _renderLabel()
|
|
13
13
|
icon: options.icon ?? '',
|
|
14
14
|
required: options.required ?? false,
|
|
15
15
|
disabled: options.disabled ?? false,
|
package/lib/components/input.ts
CHANGED
|
@@ -47,7 +47,7 @@ export class Input extends FormInput<InputState> {
|
|
|
47
47
|
type: options.type ?? 'text',
|
|
48
48
|
value: options.value ?? '',
|
|
49
49
|
placeholder: options.placeholder ?? '',
|
|
50
|
-
label: options.label ?? '',
|
|
50
|
+
label: options.label ?? '', // ✅ Empty string = auto-generate in _renderLabel()
|
|
51
51
|
icon: options.icon ?? '',
|
|
52
52
|
required: options.required ?? false,
|
|
53
53
|
disabled: options.disabled ?? false,
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert a component ID to a human-readable label
|
|
3
|
+
*
|
|
4
|
+
* Examples:
|
|
5
|
+
* 'btn-1' → 'Btn 1'
|
|
6
|
+
* 'btn1' → 'Btn1'
|
|
7
|
+
* 'btn-primary-1' → 'Btn Primary 1'
|
|
8
|
+
* 'user-email-input' → 'User Email Input'
|
|
9
|
+
* 'firstName' → 'First Name'
|
|
10
|
+
* 'first_name' → 'First Name'
|
|
11
|
+
*
|
|
12
|
+
* @param id - Component ID (kebab-case, snake_case, or camelCase)
|
|
13
|
+
* @returns Human-readable label with proper capitalization
|
|
14
|
+
*/
|
|
15
|
+
export declare function formatIdAsLabel(id: string): string;
|
|
16
|
+
//# sourceMappingURL=formatId.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formatId.d.ts","sourceRoot":"","sources":["formatId.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAalD"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert a component ID to a human-readable label
|
|
3
|
+
*
|
|
4
|
+
* Examples:
|
|
5
|
+
* 'btn-1' → 'Btn 1'
|
|
6
|
+
* 'btn1' → 'Btn1'
|
|
7
|
+
* 'btn-primary-1' → 'Btn Primary 1'
|
|
8
|
+
* 'user-email-input' → 'User Email Input'
|
|
9
|
+
* 'firstName' → 'First Name'
|
|
10
|
+
* 'first_name' → 'First Name'
|
|
11
|
+
*
|
|
12
|
+
* @param id - Component ID (kebab-case, snake_case, or camelCase)
|
|
13
|
+
* @returns Human-readable label with proper capitalization
|
|
14
|
+
*/
|
|
15
|
+
export function formatIdAsLabel(id) {
|
|
16
|
+
if (!id)
|
|
17
|
+
return '';
|
|
18
|
+
// Split by common delimiters: hyphens, underscores, or camelCase boundaries
|
|
19
|
+
const words = id
|
|
20
|
+
.replace(/([a-z])([A-Z])/g, '$1 $2') // camelCase → separate words
|
|
21
|
+
.split(/[-_\s]+/) // Split by hyphens, underscores, spaces
|
|
22
|
+
.filter(word => word.length > 0);
|
|
23
|
+
// Capitalize first letter of each word
|
|
24
|
+
return words
|
|
25
|
+
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
|
26
|
+
.join(' ');
|
|
27
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert a component ID to a human-readable label
|
|
3
|
+
*
|
|
4
|
+
* Examples:
|
|
5
|
+
* 'btn-1' → 'Btn 1'
|
|
6
|
+
* 'btn1' → 'Btn1'
|
|
7
|
+
* 'btn-primary-1' → 'Btn Primary 1'
|
|
8
|
+
* 'user-email-input' → 'User Email Input'
|
|
9
|
+
* 'firstName' → 'First Name'
|
|
10
|
+
* 'first_name' → 'First Name'
|
|
11
|
+
*
|
|
12
|
+
* @param id - Component ID (kebab-case, snake_case, or camelCase)
|
|
13
|
+
* @returns Human-readable label with proper capitalization
|
|
14
|
+
*/
|
|
15
|
+
export function formatIdAsLabel(id: string): string {
|
|
16
|
+
if (!id) return '';
|
|
17
|
+
|
|
18
|
+
// Split by common delimiters: hyphens, underscores, or camelCase boundaries
|
|
19
|
+
const words = id
|
|
20
|
+
.replace(/([a-z])([A-Z])/g, '$1 $2') // camelCase → separate words
|
|
21
|
+
.split(/[-_\s]+/) // Split by hyphens, underscores, spaces
|
|
22
|
+
.filter(word => word.length > 0);
|
|
23
|
+
|
|
24
|
+
// Capitalize first letter of each word
|
|
25
|
+
return words
|
|
26
|
+
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
|
27
|
+
.join(' ');
|
|
28
|
+
}
|