@jsenv/navi 0.8.0 → 0.9.1
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/dist/jsenv_navi.js +426 -293
- package/package.json +1 -1
- package/src/components/field/button.jsx +4 -11
- package/src/components/field/input_checkbox.jsx +3 -2
- package/src/components/field/input_radio.jsx +3 -2
- package/src/components/field/input_textual.jsx +8 -13
- package/src/components/layout/demos/demo_layout_style_buttons.html +351 -0
- package/src/components/layout/demos/demo_layout_style_input.html +226 -0
- package/src/components/layout/demos/demo_layout_style_text.html +514 -0
- package/src/components/layout/flex.jsx +10 -64
- package/src/components/layout/layout_context.jsx +3 -0
- package/src/components/layout/spacing.jsx +12 -90
- package/src/components/layout/use_layout_style.js +249 -0
- package/src/components/link/link.jsx +13 -2
- package/src/components/text/text.jsx +3 -15
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>useLayoutStyle Demo</title>
|
|
6
|
+
<style>
|
|
7
|
+
.demo-container {
|
|
8
|
+
margin-bottom: 30px;
|
|
9
|
+
padding: 20px;
|
|
10
|
+
background: #f8f9fa;
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.demo-box {
|
|
15
|
+
min-width: 60px;
|
|
16
|
+
padding: 10px;
|
|
17
|
+
text-align: center;
|
|
18
|
+
background: #e3f2fd;
|
|
19
|
+
border: 1px solid #90caf9;
|
|
20
|
+
border-radius: 4px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.visual-container {
|
|
24
|
+
margin: 10px 0;
|
|
25
|
+
padding: 10px;
|
|
26
|
+
background: #fff3e0;
|
|
27
|
+
border: 2px dashed #ff9800;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h3 {
|
|
31
|
+
margin-top: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Helper to visualize the container boundaries */
|
|
35
|
+
.bounded {
|
|
36
|
+
width: 400px;
|
|
37
|
+
height: 100px;
|
|
38
|
+
padding: 10px;
|
|
39
|
+
background: #f0f4ff;
|
|
40
|
+
border: 1px solid #6366f1;
|
|
41
|
+
}
|
|
42
|
+
</style>
|
|
43
|
+
</head>
|
|
44
|
+
<body>
|
|
45
|
+
<div id="app"></div>
|
|
46
|
+
<script type="module" jsenv-type="module/jsx">
|
|
47
|
+
/* eslint-disable no-unused-vars */
|
|
48
|
+
import { render } from "preact";
|
|
49
|
+
import { FlexRow, FlexColumn, Input, Button } from "@jsenv/navi";
|
|
50
|
+
|
|
51
|
+
const DemoBox = ({ children, ...props }) => (
|
|
52
|
+
<div className="demo-box" {...props}>
|
|
53
|
+
{children}
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
|
|
57
|
+
const Demo = () => {
|
|
58
|
+
return (
|
|
59
|
+
<div style={{ padding: "20px", fontFamily: "system-ui, sans-serif" }}>
|
|
60
|
+
<h1>useLayoutStyle Demo - Input Elements</h1>
|
|
61
|
+
<p>
|
|
62
|
+
Testing spacing (margin/padding), alignment, and expand behavior
|
|
63
|
+
specifically with Input components in various layout contexts.
|
|
64
|
+
</p>
|
|
65
|
+
|
|
66
|
+
<div className="demo-container">
|
|
67
|
+
<h3>1. Input with Expand in FlexRow</h3>
|
|
68
|
+
<div className="visual-container">
|
|
69
|
+
<FlexRow gap="10px">
|
|
70
|
+
<Button>Start</Button>
|
|
71
|
+
<Input placeholder="Expanding input" expandX />
|
|
72
|
+
<Button>End</Button>
|
|
73
|
+
</FlexRow>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div className="demo-container">
|
|
78
|
+
<h3>2. Input with Expand in FlexColumn</h3>
|
|
79
|
+
<div className="visual-container">
|
|
80
|
+
<FlexColumn gap="10px" style={{ height: "200px" }}>
|
|
81
|
+
<Input placeholder="Fixed input" />
|
|
82
|
+
<Input placeholder="Expanding input (height)" expandY />
|
|
83
|
+
<Input placeholder="Fixed input" />
|
|
84
|
+
</FlexColumn>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div className="demo-container">
|
|
89
|
+
<h3>3. Input with Expand outside Flex context</h3>
|
|
90
|
+
<div className="visual-container">
|
|
91
|
+
<div
|
|
92
|
+
style={{
|
|
93
|
+
width: "300px",
|
|
94
|
+
border: "1px solid #ccc",
|
|
95
|
+
padding: "10px",
|
|
96
|
+
}}
|
|
97
|
+
>
|
|
98
|
+
<Input placeholder="Normal input" />
|
|
99
|
+
<br />
|
|
100
|
+
<br />
|
|
101
|
+
<Input
|
|
102
|
+
placeholder="Expanding input (should take full width)"
|
|
103
|
+
expand
|
|
104
|
+
/>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div className="demo-container">
|
|
110
|
+
<h3>4. Multiple Expand Elements</h3>
|
|
111
|
+
<div className="visual-container">
|
|
112
|
+
<FlexRow gap="10px">
|
|
113
|
+
<Input placeholder="Expand 1" expand />
|
|
114
|
+
<Input placeholder="Expand 2" expand />
|
|
115
|
+
<Input placeholder="Expand 3" expand />
|
|
116
|
+
</FlexRow>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<div className="demo-container">
|
|
121
|
+
<h3>5. Basic Spacing - Input with margins</h3>
|
|
122
|
+
<div className="visual-container">
|
|
123
|
+
<Input placeholder="Default input" margin="10px" />
|
|
124
|
+
<Input placeholder="MarginX only" marginX="20px" />
|
|
125
|
+
<Input placeholder="MarginY only" marginY="15px" />
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div className="demo-container">
|
|
130
|
+
<h3>6. Input with Padding</h3>
|
|
131
|
+
<div className="visual-container">
|
|
132
|
+
<Input placeholder="Default padding" />
|
|
133
|
+
<Input placeholder="Extra padding" padding="20px" />
|
|
134
|
+
<Input placeholder="PaddingX only" paddingX="30px" />
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div className="demo-container">
|
|
139
|
+
<h3>7. Directional Margins and Padding</h3>
|
|
140
|
+
<div className="visual-container">
|
|
141
|
+
<FlexColumn gap="5px">
|
|
142
|
+
<Input placeholder="marginLeft: 20px" marginLeft="20px" />
|
|
143
|
+
<Input placeholder="marginRight: 30px" marginRight="30px" />
|
|
144
|
+
<Input
|
|
145
|
+
placeholder="marginTop: 15px, marginBottom: 25px"
|
|
146
|
+
marginTop="15px"
|
|
147
|
+
marginBottom="25px"
|
|
148
|
+
/>
|
|
149
|
+
<Input placeholder="paddingLeft: 25px" paddingLeft="25px" />
|
|
150
|
+
</FlexColumn>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<div className="demo-container">
|
|
155
|
+
<h3>8. AlignX Test: FlexRow + alignX="end"</h3>
|
|
156
|
+
<div className="visual-container">
|
|
157
|
+
<div className="bounded">
|
|
158
|
+
<FlexRow gap="10px" style={{ height: "100%" }}>
|
|
159
|
+
<Input placeholder="Default" />
|
|
160
|
+
<Input placeholder="Pushed to end" alignX="end" />
|
|
161
|
+
</FlexRow>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<div className="demo-container">
|
|
167
|
+
<h3>9. Combined Spacing and Expand</h3>
|
|
168
|
+
<div className="visual-container">
|
|
169
|
+
<FlexRow gap="10px">
|
|
170
|
+
<Button>Label</Button>
|
|
171
|
+
<Input
|
|
172
|
+
placeholder="Margin + Expand"
|
|
173
|
+
expand
|
|
174
|
+
marginY="5px"
|
|
175
|
+
paddingX="15px"
|
|
176
|
+
/>
|
|
177
|
+
<Button>Action</Button>
|
|
178
|
+
</FlexRow>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<div className="demo-container">
|
|
183
|
+
<h3>10. Complex Layout: Form with Expand</h3>
|
|
184
|
+
<div className="visual-container">
|
|
185
|
+
<FlexColumn gap="15px">
|
|
186
|
+
<FlexRow gap="10px">
|
|
187
|
+
<label style={{ minWidth: "80px", alignSelf: "center" }}>
|
|
188
|
+
Name:
|
|
189
|
+
</label>
|
|
190
|
+
<Input placeholder="Enter your name" expand />
|
|
191
|
+
</FlexRow>
|
|
192
|
+
|
|
193
|
+
<FlexRow gap="10px">
|
|
194
|
+
<label style={{ minWidth: "80px", alignSelf: "center" }}>
|
|
195
|
+
Email:
|
|
196
|
+
</label>
|
|
197
|
+
<Input placeholder="Enter your email" expand />
|
|
198
|
+
<Button>Verify</Button>
|
|
199
|
+
</FlexRow>
|
|
200
|
+
|
|
201
|
+
<FlexRow gap="10px">
|
|
202
|
+
<label style={{ minWidth: "80px", alignSelf: "center" }}>
|
|
203
|
+
Message:
|
|
204
|
+
</label>
|
|
205
|
+
<Input
|
|
206
|
+
placeholder="Enter your message"
|
|
207
|
+
expand
|
|
208
|
+
paddingY="10px"
|
|
209
|
+
/>
|
|
210
|
+
</FlexRow>
|
|
211
|
+
|
|
212
|
+
<FlexRow gap="10px" alignX="end">
|
|
213
|
+
<Button>Cancel</Button>
|
|
214
|
+
<Button>Submit</Button>
|
|
215
|
+
</FlexRow>
|
|
216
|
+
</FlexColumn>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
);
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
render(<Demo />, document.getElementById("app"));
|
|
224
|
+
</script>
|
|
225
|
+
</body>
|
|
226
|
+
</html>
|