@jsenv/navi 0.1.0 → 0.2.0
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 +8413 -3793
- package/package.json +4 -3
- package/src/components/action_execution/form_context.js +1 -4
- package/src/components/action_execution/use_action.js +2 -2
- package/src/components/demos/0_button_demo.html +149 -68
- package/src/components/demos/1_checkbox_demo.html +122 -2
- package/src/components/demos/2_input_textual_demo.html +44 -55
- package/src/components/demos/3_radio_demo.html +811 -157
- package/src/components/demos/action/0_button_demo.html +6 -4
- package/src/components/demos/action/1_input_text_demo.html +19 -25
- package/src/components/field/button.jsx +174 -71
- package/src/components/field/custom_field.js +106 -0
- package/src/components/field/field_css.js +51 -85
- package/src/components/field/form.jsx +9 -4
- package/src/components/field/input_checkbox.jsx +170 -99
- package/src/components/field/input_radio.jsx +179 -153
- package/src/components/field/input_textual.jsx +103 -6
- package/src/components/field/label.jsx +15 -3
- package/src/components/field/navi_css_vars.js +8 -0
- package/src/components/loader/loader_background.jsx +41 -14
- package/src/validation/constraints/readonly_constraint.js +5 -0
- package/src/validation/validation_message.js +78 -70
|
@@ -7,18 +7,18 @@
|
|
|
7
7
|
<title>Input Textual Demo</title>
|
|
8
8
|
<style>
|
|
9
9
|
body {
|
|
10
|
-
font-family:
|
|
11
|
-
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
12
10
|
max-width: 1400px;
|
|
13
11
|
margin: 0 auto;
|
|
14
12
|
padding: 20px;
|
|
13
|
+
font-family:
|
|
14
|
+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
15
15
|
background-color: #f8f9fa;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
h1 {
|
|
19
|
-
text-align: center;
|
|
20
|
-
color: #333;
|
|
21
19
|
margin-bottom: 30px;
|
|
20
|
+
color: #333;
|
|
21
|
+
text-align: center;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.demo-grid {
|
|
@@ -28,66 +28,55 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.demo-card {
|
|
31
|
+
padding: 20px;
|
|
31
32
|
background: white;
|
|
33
|
+
border: 1px solid #e1e8ed;
|
|
32
34
|
border-radius: 8px;
|
|
33
|
-
padding: 20px;
|
|
34
35
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
35
|
-
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.demo-card.loading-demo {
|
|
39
|
+
background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.demo-card.readonly-demo {
|
|
43
|
+
background: linear-gradient(135deg, #fff3e0 0%, #fce4ec 100%);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.demo-card.disabled-demo {
|
|
47
|
+
background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e8 100%);
|
|
36
48
|
}
|
|
37
49
|
|
|
38
50
|
.demo-title {
|
|
39
|
-
color: #2c3e50;
|
|
40
51
|
margin-top: 0;
|
|
41
52
|
margin-bottom: 15px;
|
|
42
|
-
|
|
53
|
+
padding-bottom: 8px;
|
|
54
|
+
color: #2c3e50;
|
|
43
55
|
font-weight: 600;
|
|
56
|
+
font-size: 18px;
|
|
44
57
|
border-bottom: 2px solid #3498db;
|
|
45
|
-
padding-bottom: 8px;
|
|
46
58
|
}
|
|
47
59
|
|
|
48
60
|
.native-comparison {
|
|
49
61
|
display: grid;
|
|
62
|
+
margin: 15px 0;
|
|
50
63
|
grid-template-columns: 1fr 1fr;
|
|
51
64
|
gap: 15px;
|
|
52
|
-
margin: 15px 0;
|
|
53
65
|
}
|
|
54
66
|
|
|
55
67
|
.native-demo {
|
|
56
|
-
background: #f8f9fa;
|
|
57
68
|
padding: 15px;
|
|
58
|
-
|
|
69
|
+
background: #f8f9fa;
|
|
59
70
|
border: 1px solid #dee2e6;
|
|
71
|
+
border-radius: 6px;
|
|
60
72
|
}
|
|
61
73
|
|
|
62
74
|
.native-demo h4 {
|
|
63
75
|
margin-top: 0;
|
|
64
76
|
margin-bottom: 10px;
|
|
65
77
|
color: #495057;
|
|
66
|
-
font-size: 14px;
|
|
67
78
|
font-weight: 500;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
input[type="text"],
|
|
71
|
-
input[type="email"],
|
|
72
|
-
input[type="password"],
|
|
73
|
-
input[type="number"],
|
|
74
|
-
input[type="tel"],
|
|
75
|
-
input[type="url"],
|
|
76
|
-
input[type="search"],
|
|
77
|
-
textarea {
|
|
78
|
-
width: 100%;
|
|
79
|
-
padding: 8px 12px;
|
|
80
|
-
border: 1px solid #ddd;
|
|
81
|
-
border-radius: 4px;
|
|
82
79
|
font-size: 14px;
|
|
83
|
-
box-sizing: border-box;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
input:focus,
|
|
87
|
-
textarea:focus {
|
|
88
|
-
outline: none;
|
|
89
|
-
border-color: #3498db;
|
|
90
|
-
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
|
91
80
|
}
|
|
92
81
|
|
|
93
82
|
.control-group {
|
|
@@ -97,41 +86,41 @@
|
|
|
97
86
|
label {
|
|
98
87
|
display: block;
|
|
99
88
|
margin-bottom: 5px;
|
|
100
|
-
font-weight: 500;
|
|
101
89
|
color: #555;
|
|
90
|
+
font-weight: 500;
|
|
102
91
|
}
|
|
103
92
|
|
|
104
93
|
.result-display {
|
|
105
|
-
|
|
106
|
-
border: 1px solid #dee2e6;
|
|
107
|
-
border-radius: 4px;
|
|
108
|
-
padding: 12px;
|
|
94
|
+
min-height: 20px;
|
|
109
95
|
margin-top: 15px;
|
|
96
|
+
padding: 12px;
|
|
97
|
+
color: #495057;
|
|
98
|
+
font-size: 13px;
|
|
110
99
|
font-family:
|
|
111
100
|
"SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono",
|
|
112
101
|
"Droid Sans Mono", "Courier New", monospace;
|
|
113
|
-
font-size: 13px;
|
|
114
|
-
color: #495057;
|
|
115
|
-
min-height: 20px;
|
|
116
102
|
white-space: pre-wrap;
|
|
103
|
+
background: #f8f9fa;
|
|
104
|
+
border: 1px solid #dee2e6;
|
|
105
|
+
border-radius: 4px;
|
|
117
106
|
}
|
|
118
107
|
|
|
119
108
|
.result-success {
|
|
109
|
+
color: #155724;
|
|
120
110
|
background: #d4edda;
|
|
121
111
|
border-color: #c3e6cb;
|
|
122
|
-
color: #155724;
|
|
123
112
|
}
|
|
124
113
|
|
|
125
114
|
.result-error {
|
|
115
|
+
color: #721c24;
|
|
126
116
|
background: #f8d7da;
|
|
127
117
|
border-color: #f5c6cb;
|
|
128
|
-
color: #721c24;
|
|
129
118
|
}
|
|
130
119
|
|
|
131
120
|
.result-loading {
|
|
121
|
+
color: #0c5460;
|
|
132
122
|
background: #d1ecf1;
|
|
133
123
|
border-color: #bee5eb;
|
|
134
|
-
color: #0c5460;
|
|
135
124
|
animation: pulse 1.5s ease-in-out infinite;
|
|
136
125
|
}
|
|
137
126
|
|
|
@@ -147,21 +136,21 @@
|
|
|
147
136
|
|
|
148
137
|
.button-group {
|
|
149
138
|
display: flex;
|
|
150
|
-
gap: 8px;
|
|
151
139
|
margin-top: 12px;
|
|
152
140
|
flex-wrap: wrap;
|
|
141
|
+
gap: 8px;
|
|
153
142
|
}
|
|
154
143
|
|
|
155
144
|
button {
|
|
145
|
+
box-sizing: border-box;
|
|
156
146
|
padding: 6px 12px;
|
|
157
|
-
border: 1px solid #3498db;
|
|
158
|
-
background: #3498db;
|
|
159
147
|
color: white;
|
|
160
|
-
border-radius: 4px;
|
|
161
|
-
cursor: pointer;
|
|
162
148
|
font-size: 14px;
|
|
149
|
+
background: #3498db;
|
|
150
|
+
border: 1px solid #3498db;
|
|
151
|
+
border-radius: 4px;
|
|
163
152
|
transition: all 0.2s ease;
|
|
164
|
-
|
|
153
|
+
cursor: pointer;
|
|
165
154
|
}
|
|
166
155
|
|
|
167
156
|
button:hover {
|
|
@@ -214,7 +203,7 @@
|
|
|
214
203
|
const [loading, setLoading] = useState(false);
|
|
215
204
|
|
|
216
205
|
return (
|
|
217
|
-
<div className="demo-card">
|
|
206
|
+
<div className="demo-card loading-demo">
|
|
218
207
|
<h3 className="demo-title">💫 Loading State</h3>
|
|
219
208
|
<div className="control-group">
|
|
220
209
|
<h4>@jsenv/navi Input</h4>
|
|
@@ -244,7 +233,7 @@
|
|
|
244
233
|
const [loading, setLoading] = useState(false);
|
|
245
234
|
|
|
246
235
|
return (
|
|
247
|
-
<div className="demo-card">
|
|
236
|
+
<div className="demo-card readonly-demo">
|
|
248
237
|
<h3 className="demo-title">🔒 Read-only State</h3>
|
|
249
238
|
<div className="control-group">
|
|
250
239
|
<h4>@jsenv/navi Read-only</h4>
|
|
@@ -268,7 +257,7 @@
|
|
|
268
257
|
const [loading, setLoading] = useState(false);
|
|
269
258
|
|
|
270
259
|
return (
|
|
271
|
-
<div className="demo-card">
|
|
260
|
+
<div className="demo-card disabled-demo">
|
|
272
261
|
<h3 className="demo-title">🚫 Disabled State</h3>
|
|
273
262
|
<div className="control-group">
|
|
274
263
|
<h4>@jsenv/navi Disabled</h4>
|