juxscript 1.1.108 → 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/base/BaseComponent.d.ts.map +1 -1
- package/lib/components/base/BaseComponent.js +4 -0
- package/lib/components/base/BaseComponent.ts +6 -0
- package/lib/components/base/LayoutExtensions.d.ts +91 -0
- package/lib/components/base/LayoutExtensions.d.ts.map +1 -0
- package/lib/components/base/LayoutExtensions.js +131 -0
- package/lib/components/base/LayoutExtensions.ts +253 -0
- package/lib/components/stack/BaseStack.d.ts +19 -59
- package/lib/components/stack/BaseStack.d.ts.map +1 -1
- package/lib/components/stack/BaseStack.js +94 -168
- package/lib/components/stack/BaseStack.ts +114 -210
- package/lib/styles/{stack.css → animations.css} +49 -263
- package/lib/styles/modifiers.css +103 -0
- package/lib/styles/stacks.css +82 -0
- package/package.json +1 -1
package/dom-structure-map.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ import { getOrCreateContainer } from '../helpers.js';
|
|
|
2
2
|
import { registry } from '../registry.js';
|
|
3
3
|
import { stateHistory } from '../history/StateHistory.js';
|
|
4
4
|
import { formatIdAsLabel } from '../../utils/formatId.js'; // ✅ Import utility
|
|
5
|
+
import { applyLayoutExtensions } from './LayoutExtensions.js'; // ✅ Import
|
|
5
6
|
/**
|
|
6
7
|
* Abstract base class for all JUX components
|
|
7
8
|
* Provides common storage, event routing, and lifecycle methods
|
|
@@ -54,6 +55,8 @@ export class BaseComponent {
|
|
|
54
55
|
return true;
|
|
55
56
|
}
|
|
56
57
|
});
|
|
58
|
+
// ✅ Automatically apply layout extensions to ALL components
|
|
59
|
+
applyLayoutExtensions(this);
|
|
57
60
|
}
|
|
58
61
|
/**
|
|
59
62
|
* REACTIVE UPDATE HOOK (PUBLIC, CONCRETE)
|
|
@@ -634,3 +637,4 @@ export class BaseComponent {
|
|
|
634
637
|
});
|
|
635
638
|
}
|
|
636
639
|
}
|
|
640
|
+
// ...precision layout modifiers...
|
|
@@ -3,6 +3,7 @@ import { getOrCreateContainer } from '../helpers.js';
|
|
|
3
3
|
import { registry } from '../registry.js';
|
|
4
4
|
import { stateHistory } from '../history/StateHistory.js';
|
|
5
5
|
import { formatIdAsLabel } from '../../utils/formatId.js'; // ✅ Import utility
|
|
6
|
+
import { applyLayoutExtensions, LayoutExtensions } from './LayoutExtensions.js'; // ✅ Import
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* Base state interface that ALL component states must extend
|
|
@@ -92,6 +93,9 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
|
|
|
92
93
|
return true;
|
|
93
94
|
}
|
|
94
95
|
});
|
|
96
|
+
|
|
97
|
+
// ✅ Automatically apply layout extensions to ALL components
|
|
98
|
+
applyLayoutExtensions(this);
|
|
95
99
|
}
|
|
96
100
|
|
|
97
101
|
/* ═════════════════════════════════════════════════════════════════
|
|
@@ -764,3 +768,5 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
|
|
|
764
768
|
});
|
|
765
769
|
}
|
|
766
770
|
}
|
|
771
|
+
|
|
772
|
+
// ...precision layout modifiers...
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Layout Modifiers Extension
|
|
3
|
+
*
|
|
4
|
+
* Provides precision layout control via inline styles (for variable values)
|
|
5
|
+
* and CSS classes (for fixed values like display, position, overflow).
|
|
6
|
+
*
|
|
7
|
+
* Automatically applied to BaseComponent - all components have these methods.
|
|
8
|
+
*/
|
|
9
|
+
import type { BaseComponent } from './BaseComponent.js';
|
|
10
|
+
export interface LayoutExtensions {
|
|
11
|
+
padding(value: string): this;
|
|
12
|
+
paddingTop(value: string): this;
|
|
13
|
+
paddingRight(value: string): this;
|
|
14
|
+
paddingBottom(value: string): this;
|
|
15
|
+
paddingLeft(value: string): this;
|
|
16
|
+
paddingHorizontal(value: string): this;
|
|
17
|
+
paddingVertical(value: string): this;
|
|
18
|
+
margin(value: string): this;
|
|
19
|
+
marginTop(value: string): this;
|
|
20
|
+
marginRight(value: string): this;
|
|
21
|
+
marginBottom(value: string): this;
|
|
22
|
+
marginLeft(value: string): this;
|
|
23
|
+
marginHorizontal(value: string): this;
|
|
24
|
+
marginVertical(value: string): this;
|
|
25
|
+
width(value: string): this;
|
|
26
|
+
height(value: string): this;
|
|
27
|
+
minWidth(value: string): this;
|
|
28
|
+
maxWidth(value: string): this;
|
|
29
|
+
minHeight(value: string): this;
|
|
30
|
+
maxHeight(value: string): this;
|
|
31
|
+
border(value: string): this;
|
|
32
|
+
borderTop(value: string): this;
|
|
33
|
+
borderRight(value: string): this;
|
|
34
|
+
borderBottom(value: string): this;
|
|
35
|
+
borderLeft(value: string): this;
|
|
36
|
+
borderRadius(value: string): this;
|
|
37
|
+
borderWidth(value: string): this;
|
|
38
|
+
borderColor(value: string): this;
|
|
39
|
+
borderStyle(value: 'solid' | 'dashed' | 'dotted' | 'double' | 'none'): this;
|
|
40
|
+
background(value: string): this;
|
|
41
|
+
backgroundColor(value: string): this;
|
|
42
|
+
backgroundImage(value: string): this;
|
|
43
|
+
boxShadow(value: string): this;
|
|
44
|
+
opacity(value: string | number): this;
|
|
45
|
+
position(value: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'): this;
|
|
46
|
+
top(value: string): this;
|
|
47
|
+
right(value: string): this;
|
|
48
|
+
bottom(value: string): this;
|
|
49
|
+
left(value: string): this;
|
|
50
|
+
zIndex(value: string | number): this;
|
|
51
|
+
overflow(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
|
|
52
|
+
overflowX(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
|
|
53
|
+
overflowY(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
|
|
54
|
+
display(value: 'block' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'none'): this;
|
|
55
|
+
flex(value: string | number): this;
|
|
56
|
+
flexGrow(value: string | number): this;
|
|
57
|
+
flexShrink(value: string | number): this;
|
|
58
|
+
flexBasis(value: string): this;
|
|
59
|
+
alignSelf(value: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'): this;
|
|
60
|
+
transform(value: string): this;
|
|
61
|
+
transformOrigin(value: string): this;
|
|
62
|
+
rotate(degrees: number): this;
|
|
63
|
+
scale(value: number): this;
|
|
64
|
+
translateX(value: string): this;
|
|
65
|
+
translateY(value: string): this;
|
|
66
|
+
translate(x: string, y: string): this;
|
|
67
|
+
transition(value: string): this;
|
|
68
|
+
transitionDuration(value: string): this;
|
|
69
|
+
transitionDelay(value: string): this;
|
|
70
|
+
animation(value: string): this;
|
|
71
|
+
cursor(value: string): this;
|
|
72
|
+
pointerEvents(value: 'auto' | 'none'): this;
|
|
73
|
+
userSelect(value: 'auto' | 'none' | 'text' | 'all'): this;
|
|
74
|
+
color(value: string): this;
|
|
75
|
+
fontSize(value: string): this;
|
|
76
|
+
fontWeight(value: string | number): this;
|
|
77
|
+
fontFamily(value: string): this;
|
|
78
|
+
textAlign(value: 'left' | 'center' | 'right' | 'justify'): this;
|
|
79
|
+
lineHeight(value: string | number): this;
|
|
80
|
+
letterSpacing(value: string): this;
|
|
81
|
+
textDecoration(value: string): this;
|
|
82
|
+
textTransform(value: 'none' | 'capitalize' | 'uppercase' | 'lowercase'): this;
|
|
83
|
+
whiteSpace(value: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line'): this;
|
|
84
|
+
wordWrap(value: 'normal' | 'break-word'): this;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Apply layout extensions to a component instance
|
|
88
|
+
* Called automatically in BaseComponent constructor
|
|
89
|
+
*/
|
|
90
|
+
export declare function applyLayoutExtensions<T extends BaseComponent<any>>(component: T): T & LayoutExtensions;
|
|
91
|
+
//# sourceMappingURL=LayoutExtensions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LayoutExtensions.d.ts","sourceRoot":"","sources":["LayoutExtensions.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Layout Modifiers Extension
|
|
3
|
+
*
|
|
4
|
+
* Provides precision layout control via inline styles (for variable values)
|
|
5
|
+
* and CSS classes (for fixed values like display, position, overflow).
|
|
6
|
+
*
|
|
7
|
+
* Automatically applied to BaseComponent - all components have these methods.
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* Helper to add inline style
|
|
11
|
+
*/
|
|
12
|
+
function addInlineStyle(component, property, value) {
|
|
13
|
+
const currentStyle = component.state.style || '';
|
|
14
|
+
const styles = currentStyle
|
|
15
|
+
.split(';')
|
|
16
|
+
.filter((s) => s.trim() && !s.trim().startsWith(property))
|
|
17
|
+
.map((s) => s.trim());
|
|
18
|
+
styles.push(`${property}: ${value}`);
|
|
19
|
+
component.state.style = styles.join('; ');
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Apply layout extensions to a component instance
|
|
23
|
+
* Called automatically in BaseComponent constructor
|
|
24
|
+
*/
|
|
25
|
+
export function applyLayoutExtensions(component) {
|
|
26
|
+
const ext = component;
|
|
27
|
+
// Spacing (inline styles)
|
|
28
|
+
ext.padding = (v) => { addInlineStyle(component, 'padding', v); return ext; };
|
|
29
|
+
ext.paddingTop = (v) => { addInlineStyle(component, 'padding-top', v); return ext; };
|
|
30
|
+
ext.paddingRight = (v) => { addInlineStyle(component, 'padding-right', v); return ext; };
|
|
31
|
+
ext.paddingBottom = (v) => { addInlineStyle(component, 'padding-bottom', v); return ext; };
|
|
32
|
+
ext.paddingLeft = (v) => { addInlineStyle(component, 'padding-left', v); return ext; };
|
|
33
|
+
ext.paddingHorizontal = (v) => {
|
|
34
|
+
addInlineStyle(component, 'padding-left', v);
|
|
35
|
+
addInlineStyle(component, 'padding-right', v);
|
|
36
|
+
return ext;
|
|
37
|
+
};
|
|
38
|
+
ext.paddingVertical = (v) => {
|
|
39
|
+
addInlineStyle(component, 'padding-top', v);
|
|
40
|
+
addInlineStyle(component, 'padding-bottom', v);
|
|
41
|
+
return ext;
|
|
42
|
+
};
|
|
43
|
+
ext.margin = (v) => { addInlineStyle(component, 'margin', v); return ext; };
|
|
44
|
+
ext.marginTop = (v) => { addInlineStyle(component, 'margin-top', v); return ext; };
|
|
45
|
+
ext.marginRight = (v) => { addInlineStyle(component, 'margin-right', v); return ext; };
|
|
46
|
+
ext.marginBottom = (v) => { addInlineStyle(component, 'margin-bottom', v); return ext; };
|
|
47
|
+
ext.marginLeft = (v) => { addInlineStyle(component, 'margin-left', v); return ext; };
|
|
48
|
+
ext.marginHorizontal = (v) => {
|
|
49
|
+
addInlineStyle(component, 'margin-left', v);
|
|
50
|
+
addInlineStyle(component, 'margin-right', v);
|
|
51
|
+
return ext;
|
|
52
|
+
};
|
|
53
|
+
ext.marginVertical = (v) => {
|
|
54
|
+
addInlineStyle(component, 'margin-top', v);
|
|
55
|
+
addInlineStyle(component, 'margin-bottom', v);
|
|
56
|
+
return ext;
|
|
57
|
+
};
|
|
58
|
+
// Sizing (inline styles)
|
|
59
|
+
ext.width = (v) => { addInlineStyle(component, 'width', v); return ext; };
|
|
60
|
+
ext.height = (v) => { addInlineStyle(component, 'height', v); return ext; };
|
|
61
|
+
ext.minWidth = (v) => { addInlineStyle(component, 'min-width', v); return ext; };
|
|
62
|
+
ext.maxWidth = (v) => { addInlineStyle(component, 'max-width', v); return ext; };
|
|
63
|
+
ext.minHeight = (v) => { addInlineStyle(component, 'min-height', v); return ext; };
|
|
64
|
+
ext.maxHeight = (v) => { addInlineStyle(component, 'max-height', v); return ext; };
|
|
65
|
+
// Borders
|
|
66
|
+
ext.border = (v) => { addInlineStyle(component, 'border', v); return ext; };
|
|
67
|
+
ext.borderTop = (v) => { addInlineStyle(component, 'border-top', v); return ext; };
|
|
68
|
+
ext.borderRight = (v) => { addInlineStyle(component, 'border-right', v); return ext; };
|
|
69
|
+
ext.borderBottom = (v) => { addInlineStyle(component, 'border-bottom', v); return ext; };
|
|
70
|
+
ext.borderLeft = (v) => { addInlineStyle(component, 'border-left', v); return ext; };
|
|
71
|
+
ext.borderRadius = (v) => { addInlineStyle(component, 'border-radius', v); return ext; };
|
|
72
|
+
ext.borderWidth = (v) => { addInlineStyle(component, 'border-width', v); return ext; };
|
|
73
|
+
ext.borderColor = (v) => { addInlineStyle(component, 'border-color', v); return ext; };
|
|
74
|
+
ext.borderStyle = (v) => { component.addClass(`jux-border-${v}`); return ext; }; // ✅ CSS class
|
|
75
|
+
// Background
|
|
76
|
+
ext.background = (v) => { addInlineStyle(component, 'background', v); return ext; };
|
|
77
|
+
ext.backgroundColor = (v) => { addInlineStyle(component, 'background-color', v); return ext; };
|
|
78
|
+
ext.backgroundImage = (v) => { addInlineStyle(component, 'background-image', v); return ext; };
|
|
79
|
+
// Effects
|
|
80
|
+
ext.boxShadow = (v) => { addInlineStyle(component, 'box-shadow', v); return ext; };
|
|
81
|
+
ext.opacity = (v) => { addInlineStyle(component, 'opacity', String(v)); return ext; };
|
|
82
|
+
// Positioning
|
|
83
|
+
ext.position = (v) => { component.addClass(`jux-position-${v}`); return ext; }; // ✅ CSS class
|
|
84
|
+
ext.top = (v) => { addInlineStyle(component, 'top', v); return ext; };
|
|
85
|
+
ext.right = (v) => { addInlineStyle(component, 'right', v); return ext; };
|
|
86
|
+
ext.bottom = (v) => { addInlineStyle(component, 'bottom', v); return ext; };
|
|
87
|
+
ext.left = (v) => { addInlineStyle(component, 'left', v); return ext; };
|
|
88
|
+
ext.zIndex = (v) => { addInlineStyle(component, 'z-index', String(v)); return ext; };
|
|
89
|
+
// Overflow
|
|
90
|
+
ext.overflow = (v) => { component.addClass(`jux-overflow-${v}`); return ext; }; // ✅ CSS class
|
|
91
|
+
ext.overflowX = (v) => { component.addClass(`jux-overflow-x-${v}`); return ext; }; // ✅ CSS class
|
|
92
|
+
ext.overflowY = (v) => { component.addClass(`jux-overflow-y-${v}`); return ext; }; // ✅ CSS class
|
|
93
|
+
// Display
|
|
94
|
+
ext.display = (v) => { component.addClass(`jux-display-${v}`); return ext; }; // ✅ CSS class
|
|
95
|
+
// Flex
|
|
96
|
+
ext.flex = (v) => { addInlineStyle(component, 'flex', String(v)); return ext; };
|
|
97
|
+
ext.flexGrow = (v) => { addInlineStyle(component, 'flex-grow', String(v)); return ext; };
|
|
98
|
+
ext.flexShrink = (v) => { addInlineStyle(component, 'flex-shrink', String(v)); return ext; };
|
|
99
|
+
ext.flexBasis = (v) => { addInlineStyle(component, 'flex-basis', v); return ext; };
|
|
100
|
+
ext.alignSelf = (v) => { addInlineStyle(component, 'align-self', v); return ext; };
|
|
101
|
+
// Transform
|
|
102
|
+
ext.transform = (v) => { addInlineStyle(component, 'transform', v); return ext; };
|
|
103
|
+
ext.transformOrigin = (v) => { addInlineStyle(component, 'transform-origin', v); return ext; };
|
|
104
|
+
ext.rotate = (deg) => { addInlineStyle(component, 'transform', `rotate(${deg}deg)`); return ext; };
|
|
105
|
+
ext.scale = (v) => { addInlineStyle(component, 'transform', `scale(${v})`); return ext; };
|
|
106
|
+
ext.translateX = (v) => { addInlineStyle(component, 'transform', `translateX(${v})`); return ext; };
|
|
107
|
+
ext.translateY = (v) => { addInlineStyle(component, 'transform', `translateY(${v})`); return ext; };
|
|
108
|
+
ext.translate = (x, y) => { addInlineStyle(component, 'transform', `translate(${x}, ${y})`); return ext; };
|
|
109
|
+
// Transition & Animation
|
|
110
|
+
ext.transition = (v) => { addInlineStyle(component, 'transition', v); return ext; };
|
|
111
|
+
ext.transitionDuration = (v) => { addInlineStyle(component, 'transition-duration', v); return ext; };
|
|
112
|
+
ext.transitionDelay = (v) => { addInlineStyle(component, 'transition-delay', v); return ext; };
|
|
113
|
+
ext.animation = (v) => { addInlineStyle(component, 'animation', v); return ext; };
|
|
114
|
+
// Cursor & Interaction
|
|
115
|
+
ext.cursor = (v) => { component.addClass(`jux-cursor-${v}`); return ext; }; // ✅ CSS class
|
|
116
|
+
ext.pointerEvents = (v) => { component.addClass(`jux-pointer-events-${v}`); return ext; }; // ✅ CSS class
|
|
117
|
+
ext.userSelect = (v) => { component.addClass(`jux-select-${v}`); return ext; }; // ✅ CSS class
|
|
118
|
+
// Text
|
|
119
|
+
ext.color = (v) => { addInlineStyle(component, 'color', v); return ext; };
|
|
120
|
+
ext.fontSize = (v) => { addInlineStyle(component, 'font-size', v); return ext; };
|
|
121
|
+
ext.fontWeight = (v) => { addInlineStyle(component, 'font-weight', String(v)); return ext; };
|
|
122
|
+
ext.fontFamily = (v) => { addInlineStyle(component, 'font-family', v); return ext; };
|
|
123
|
+
ext.textAlign = (v) => { component.addClass(`jux-text-${v}`); return ext; }; // ✅ CSS class
|
|
124
|
+
ext.lineHeight = (v) => { addInlineStyle(component, 'line-height', String(v)); return ext; };
|
|
125
|
+
ext.letterSpacing = (v) => { addInlineStyle(component, 'letter-spacing', v); return ext; };
|
|
126
|
+
ext.textDecoration = (v) => { addInlineStyle(component, 'text-decoration', v); return ext; };
|
|
127
|
+
ext.textTransform = (v) => { component.addClass(`jux-text-${v}`); return ext; }; // ✅ CSS class
|
|
128
|
+
ext.whiteSpace = (v) => { component.addClass(`jux-whitespace-${v}`); return ext; }; // ✅ CSS class
|
|
129
|
+
ext.wordWrap = (v) => { component.addClass(`jux-word-wrap-${v === 'break-word' ? 'break' : 'normal'}`); return ext; }; // ✅ CSS class
|
|
130
|
+
return ext;
|
|
131
|
+
}
|
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Layout Modifiers Extension
|
|
3
|
+
*
|
|
4
|
+
* Provides precision layout control via inline styles (for variable values)
|
|
5
|
+
* and CSS classes (for fixed values like display, position, overflow).
|
|
6
|
+
*
|
|
7
|
+
* Automatically applied to BaseComponent - all components have these methods.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
import type { BaseComponent } from './BaseComponent.js';
|
|
11
|
+
|
|
12
|
+
export interface LayoutExtensions {
|
|
13
|
+
// Spacing (inline styles - too variable for classes)
|
|
14
|
+
padding(value: string): this;
|
|
15
|
+
paddingTop(value: string): this;
|
|
16
|
+
paddingRight(value: string): this;
|
|
17
|
+
paddingBottom(value: string): this;
|
|
18
|
+
paddingLeft(value: string): this;
|
|
19
|
+
paddingHorizontal(value: string): this;
|
|
20
|
+
paddingVertical(value: string): this;
|
|
21
|
+
margin(value: string): this;
|
|
22
|
+
marginTop(value: string): this;
|
|
23
|
+
marginRight(value: string): this;
|
|
24
|
+
marginBottom(value: string): this;
|
|
25
|
+
marginLeft(value: string): this;
|
|
26
|
+
marginHorizontal(value: string): this;
|
|
27
|
+
marginVertical(value: string): this;
|
|
28
|
+
|
|
29
|
+
// Sizing (inline styles)
|
|
30
|
+
width(value: string): this;
|
|
31
|
+
height(value: string): this;
|
|
32
|
+
minWidth(value: string): this;
|
|
33
|
+
maxWidth(value: string): this;
|
|
34
|
+
minHeight(value: string): this;
|
|
35
|
+
maxHeight(value: string): this;
|
|
36
|
+
|
|
37
|
+
// Borders (inline styles for values, classes for style)
|
|
38
|
+
border(value: string): this;
|
|
39
|
+
borderTop(value: string): this;
|
|
40
|
+
borderRight(value: string): this;
|
|
41
|
+
borderBottom(value: string): this;
|
|
42
|
+
borderLeft(value: string): this;
|
|
43
|
+
borderRadius(value: string): this;
|
|
44
|
+
borderWidth(value: string): this;
|
|
45
|
+
borderColor(value: string): this;
|
|
46
|
+
borderStyle(value: 'solid' | 'dashed' | 'dotted' | 'double' | 'none'): this;
|
|
47
|
+
|
|
48
|
+
// Background (inline styles)
|
|
49
|
+
background(value: string): this;
|
|
50
|
+
backgroundColor(value: string): this;
|
|
51
|
+
backgroundImage(value: string): this;
|
|
52
|
+
|
|
53
|
+
// Effects (inline styles)
|
|
54
|
+
boxShadow(value: string): this;
|
|
55
|
+
opacity(value: string | number): this;
|
|
56
|
+
|
|
57
|
+
// Positioning (classes for type, inline for offsets)
|
|
58
|
+
position(value: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'): this;
|
|
59
|
+
top(value: string): this;
|
|
60
|
+
right(value: string): this;
|
|
61
|
+
bottom(value: string): this;
|
|
62
|
+
left(value: string): this;
|
|
63
|
+
zIndex(value: string | number): this;
|
|
64
|
+
|
|
65
|
+
// Overflow (CSS classes)
|
|
66
|
+
overflow(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
|
|
67
|
+
overflowX(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
|
|
68
|
+
overflowY(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
|
|
69
|
+
|
|
70
|
+
// Display (CSS classes)
|
|
71
|
+
display(value: 'block' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'none'): this;
|
|
72
|
+
|
|
73
|
+
// Flex (inline styles)
|
|
74
|
+
flex(value: string | number): this;
|
|
75
|
+
flexGrow(value: string | number): this;
|
|
76
|
+
flexShrink(value: string | number): this;
|
|
77
|
+
flexBasis(value: string): this;
|
|
78
|
+
alignSelf(value: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'): this;
|
|
79
|
+
|
|
80
|
+
// Transform (inline styles)
|
|
81
|
+
transform(value: string): this;
|
|
82
|
+
transformOrigin(value: string): this;
|
|
83
|
+
rotate(degrees: number): this;
|
|
84
|
+
scale(value: number): this;
|
|
85
|
+
translateX(value: string): this;
|
|
86
|
+
translateY(value: string): this;
|
|
87
|
+
translate(x: string, y: string): this;
|
|
88
|
+
|
|
89
|
+
// Transition & Animation (inline styles)
|
|
90
|
+
transition(value: string): this;
|
|
91
|
+
transitionDuration(value: string): this;
|
|
92
|
+
transitionDelay(value: string): this;
|
|
93
|
+
animation(value: string): this;
|
|
94
|
+
|
|
95
|
+
// Cursor & Interaction (CSS classes)
|
|
96
|
+
cursor(value: string): this;
|
|
97
|
+
pointerEvents(value: 'auto' | 'none'): this;
|
|
98
|
+
userSelect(value: 'auto' | 'none' | 'text' | 'all'): this;
|
|
99
|
+
|
|
100
|
+
// Text (inline styles for values, classes for alignment/transform)
|
|
101
|
+
color(value: string): this;
|
|
102
|
+
fontSize(value: string): this;
|
|
103
|
+
fontWeight(value: string | number): this;
|
|
104
|
+
fontFamily(value: string): this;
|
|
105
|
+
textAlign(value: 'left' | 'center' | 'right' | 'justify'): this;
|
|
106
|
+
lineHeight(value: string | number): this;
|
|
107
|
+
letterSpacing(value: string): this;
|
|
108
|
+
textDecoration(value: string): this;
|
|
109
|
+
textTransform(value: 'none' | 'capitalize' | 'uppercase' | 'lowercase'): this;
|
|
110
|
+
whiteSpace(value: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line'): this;
|
|
111
|
+
wordWrap(value: 'normal' | 'break-word'): this;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Helper to add inline style
|
|
116
|
+
*/
|
|
117
|
+
function addInlineStyle(component: BaseComponent<any>, property: string, value: string): void {
|
|
118
|
+
const currentStyle = component.state.style || '';
|
|
119
|
+
const styles = currentStyle
|
|
120
|
+
.split(';')
|
|
121
|
+
.filter((s: string) => s.trim() && !s.trim().startsWith(property))
|
|
122
|
+
.map((s: string) => s.trim());
|
|
123
|
+
|
|
124
|
+
styles.push(`${property}: ${value}`);
|
|
125
|
+
component.state.style = styles.join('; ');
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* Apply layout extensions to a component instance
|
|
130
|
+
* Called automatically in BaseComponent constructor
|
|
131
|
+
*/
|
|
132
|
+
export function applyLayoutExtensions<T extends BaseComponent<any>>(component: T): T & LayoutExtensions {
|
|
133
|
+
const ext = component as T & LayoutExtensions;
|
|
134
|
+
|
|
135
|
+
// Spacing (inline styles)
|
|
136
|
+
ext.padding = (v) => { addInlineStyle(component, 'padding', v); return ext; };
|
|
137
|
+
ext.paddingTop = (v) => { addInlineStyle(component, 'padding-top', v); return ext; };
|
|
138
|
+
ext.paddingRight = (v) => { addInlineStyle(component, 'padding-right', v); return ext; };
|
|
139
|
+
ext.paddingBottom = (v) => { addInlineStyle(component, 'padding-bottom', v); return ext; };
|
|
140
|
+
ext.paddingLeft = (v) => { addInlineStyle(component, 'padding-left', v); return ext; };
|
|
141
|
+
ext.paddingHorizontal = (v) => {
|
|
142
|
+
addInlineStyle(component, 'padding-left', v);
|
|
143
|
+
addInlineStyle(component, 'padding-right', v);
|
|
144
|
+
return ext;
|
|
145
|
+
};
|
|
146
|
+
ext.paddingVertical = (v) => {
|
|
147
|
+
addInlineStyle(component, 'padding-top', v);
|
|
148
|
+
addInlineStyle(component, 'padding-bottom', v);
|
|
149
|
+
return ext;
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
ext.margin = (v) => { addInlineStyle(component, 'margin', v); return ext; };
|
|
153
|
+
ext.marginTop = (v) => { addInlineStyle(component, 'margin-top', v); return ext; };
|
|
154
|
+
ext.marginRight = (v) => { addInlineStyle(component, 'margin-right', v); return ext; };
|
|
155
|
+
ext.marginBottom = (v) => { addInlineStyle(component, 'margin-bottom', v); return ext; };
|
|
156
|
+
ext.marginLeft = (v) => { addInlineStyle(component, 'margin-left', v); return ext; };
|
|
157
|
+
ext.marginHorizontal = (v) => {
|
|
158
|
+
addInlineStyle(component, 'margin-left', v);
|
|
159
|
+
addInlineStyle(component, 'margin-right', v);
|
|
160
|
+
return ext;
|
|
161
|
+
};
|
|
162
|
+
ext.marginVertical = (v) => {
|
|
163
|
+
addInlineStyle(component, 'margin-top', v);
|
|
164
|
+
addInlineStyle(component, 'margin-bottom', v);
|
|
165
|
+
return ext;
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
// Sizing (inline styles)
|
|
169
|
+
ext.width = (v) => { addInlineStyle(component, 'width', v); return ext; };
|
|
170
|
+
ext.height = (v) => { addInlineStyle(component, 'height', v); return ext; };
|
|
171
|
+
ext.minWidth = (v) => { addInlineStyle(component, 'min-width', v); return ext; };
|
|
172
|
+
ext.maxWidth = (v) => { addInlineStyle(component, 'max-width', v); return ext; };
|
|
173
|
+
ext.minHeight = (v) => { addInlineStyle(component, 'min-height', v); return ext; };
|
|
174
|
+
ext.maxHeight = (v) => { addInlineStyle(component, 'max-height', v); return ext; };
|
|
175
|
+
|
|
176
|
+
// Borders
|
|
177
|
+
ext.border = (v) => { addInlineStyle(component, 'border', v); return ext; };
|
|
178
|
+
ext.borderTop = (v) => { addInlineStyle(component, 'border-top', v); return ext; };
|
|
179
|
+
ext.borderRight = (v) => { addInlineStyle(component, 'border-right', v); return ext; };
|
|
180
|
+
ext.borderBottom = (v) => { addInlineStyle(component, 'border-bottom', v); return ext; };
|
|
181
|
+
ext.borderLeft = (v) => { addInlineStyle(component, 'border-left', v); return ext; };
|
|
182
|
+
ext.borderRadius = (v) => { addInlineStyle(component, 'border-radius', v); return ext; };
|
|
183
|
+
ext.borderWidth = (v) => { addInlineStyle(component, 'border-width', v); return ext; };
|
|
184
|
+
ext.borderColor = (v) => { addInlineStyle(component, 'border-color', v); return ext; };
|
|
185
|
+
ext.borderStyle = (v) => { component.addClass(`jux-border-${v}`); return ext; }; // ✅ CSS class
|
|
186
|
+
|
|
187
|
+
// Background
|
|
188
|
+
ext.background = (v) => { addInlineStyle(component, 'background', v); return ext; };
|
|
189
|
+
ext.backgroundColor = (v) => { addInlineStyle(component, 'background-color', v); return ext; };
|
|
190
|
+
ext.backgroundImage = (v) => { addInlineStyle(component, 'background-image', v); return ext; };
|
|
191
|
+
|
|
192
|
+
// Effects
|
|
193
|
+
ext.boxShadow = (v) => { addInlineStyle(component, 'box-shadow', v); return ext; };
|
|
194
|
+
ext.opacity = (v) => { addInlineStyle(component, 'opacity', String(v)); return ext; };
|
|
195
|
+
|
|
196
|
+
// Positioning
|
|
197
|
+
ext.position = (v) => { component.addClass(`jux-position-${v}`); return ext; }; // ✅ CSS class
|
|
198
|
+
ext.top = (v) => { addInlineStyle(component, 'top', v); return ext; };
|
|
199
|
+
ext.right = (v) => { addInlineStyle(component, 'right', v); return ext; };
|
|
200
|
+
ext.bottom = (v) => { addInlineStyle(component, 'bottom', v); return ext; };
|
|
201
|
+
ext.left = (v) => { addInlineStyle(component, 'left', v); return ext; };
|
|
202
|
+
ext.zIndex = (v) => { addInlineStyle(component, 'z-index', String(v)); return ext; };
|
|
203
|
+
|
|
204
|
+
// Overflow
|
|
205
|
+
ext.overflow = (v) => { component.addClass(`jux-overflow-${v}`); return ext; }; // ✅ CSS class
|
|
206
|
+
ext.overflowX = (v) => { component.addClass(`jux-overflow-x-${v}`); return ext; }; // ✅ CSS class
|
|
207
|
+
ext.overflowY = (v) => { component.addClass(`jux-overflow-y-${v}`); return ext; }; // ✅ CSS class
|
|
208
|
+
|
|
209
|
+
// Display
|
|
210
|
+
ext.display = (v) => { component.addClass(`jux-display-${v}`); return ext; }; // ✅ CSS class
|
|
211
|
+
|
|
212
|
+
// Flex
|
|
213
|
+
ext.flex = (v) => { addInlineStyle(component, 'flex', String(v)); return ext; };
|
|
214
|
+
ext.flexGrow = (v) => { addInlineStyle(component, 'flex-grow', String(v)); return ext; };
|
|
215
|
+
ext.flexShrink = (v) => { addInlineStyle(component, 'flex-shrink', String(v)); return ext; };
|
|
216
|
+
ext.flexBasis = (v) => { addInlineStyle(component, 'flex-basis', v); return ext; };
|
|
217
|
+
ext.alignSelf = (v) => { addInlineStyle(component, 'align-self', v); return ext; };
|
|
218
|
+
|
|
219
|
+
// Transform
|
|
220
|
+
ext.transform = (v) => { addInlineStyle(component, 'transform', v); return ext; };
|
|
221
|
+
ext.transformOrigin = (v) => { addInlineStyle(component, 'transform-origin', v); return ext; };
|
|
222
|
+
ext.rotate = (deg) => { addInlineStyle(component, 'transform', `rotate(${deg}deg)`); return ext; };
|
|
223
|
+
ext.scale = (v) => { addInlineStyle(component, 'transform', `scale(${v})`); return ext; };
|
|
224
|
+
ext.translateX = (v) => { addInlineStyle(component, 'transform', `translateX(${v})`); return ext; };
|
|
225
|
+
ext.translateY = (v) => { addInlineStyle(component, 'transform', `translateY(${v})`); return ext; };
|
|
226
|
+
ext.translate = (x, y) => { addInlineStyle(component, 'transform', `translate(${x}, ${y})`); return ext; };
|
|
227
|
+
|
|
228
|
+
// Transition & Animation
|
|
229
|
+
ext.transition = (v) => { addInlineStyle(component, 'transition', v); return ext; };
|
|
230
|
+
ext.transitionDuration = (v) => { addInlineStyle(component, 'transition-duration', v); return ext; };
|
|
231
|
+
ext.transitionDelay = (v) => { addInlineStyle(component, 'transition-delay', v); return ext; };
|
|
232
|
+
ext.animation = (v) => { addInlineStyle(component, 'animation', v); return ext; };
|
|
233
|
+
|
|
234
|
+
// Cursor & Interaction
|
|
235
|
+
ext.cursor = (v) => { component.addClass(`jux-cursor-${v}`); return ext; }; // ✅ CSS class
|
|
236
|
+
ext.pointerEvents = (v) => { component.addClass(`jux-pointer-events-${v}`); return ext; }; // ✅ CSS class
|
|
237
|
+
ext.userSelect = (v) => { component.addClass(`jux-select-${v}`); return ext; }; // ✅ CSS class
|
|
238
|
+
|
|
239
|
+
// Text
|
|
240
|
+
ext.color = (v) => { addInlineStyle(component, 'color', v); return ext; };
|
|
241
|
+
ext.fontSize = (v) => { addInlineStyle(component, 'font-size', v); return ext; };
|
|
242
|
+
ext.fontWeight = (v) => { addInlineStyle(component, 'font-weight', String(v)); return ext; };
|
|
243
|
+
ext.fontFamily = (v) => { addInlineStyle(component, 'font-family', v); return ext; };
|
|
244
|
+
ext.textAlign = (v) => { component.addClass(`jux-text-${v}`); return ext; }; // ✅ CSS class
|
|
245
|
+
ext.lineHeight = (v) => { addInlineStyle(component, 'line-height', String(v)); return ext; };
|
|
246
|
+
ext.letterSpacing = (v) => { addInlineStyle(component, 'letter-spacing', v); return ext; };
|
|
247
|
+
ext.textDecoration = (v) => { addInlineStyle(component, 'text-decoration', v); return ext; };
|
|
248
|
+
ext.textTransform = (v) => { component.addClass(`jux-text-${v}`); return ext; }; // ✅ CSS class
|
|
249
|
+
ext.whiteSpace = (v) => { component.addClass(`jux-whitespace-${v}`); return ext; }; // ✅ CSS class
|
|
250
|
+
ext.wordWrap = (v) => { component.addClass(`jux-word-wrap-${v === 'break-word' ? 'break' : 'normal'}`); return ext; }; // ✅ CSS class
|
|
251
|
+
|
|
252
|
+
return ext;
|
|
253
|
+
}
|