@jsenv/navi 0.2.0 → 0.2.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.
Files changed (12) hide show
  1. package/dist/jsenv_navi.js +634 -684
  2. package/package.json +3 -4
  3. package/src/components/field/button.jsx +134 -128
  4. package/src/components/field/checkbox_list.jsx +5 -3
  5. package/src/components/field/input_checkbox.jsx +117 -107
  6. package/src/components/field/input_radio.jsx +147 -137
  7. package/src/components/field/input_textual.jsx +76 -75
  8. package/src/components/field/label.jsx +9 -7
  9. package/src/components/field/navi_css_vars.js +7 -5
  10. package/src/components/field/radio_list.jsx +5 -3
  11. package/src/validation/validation_message.js +122 -118
  12. package/src/components/field/field_css.js +0 -87
package/src/validation/validation_message.js CHANGED
@@ -33,137 +33,141 @@ const ARROW_HEIGHT = 8;
33
33
  const ARROW_SPACING = 8;
34
34
 
35
35
  import.meta.css = /* css */ `
36
- :root {
37
- --navi-info-color: #2196f3;
38
- --navi-warning-color: #ff9800;
39
- --navi-error-color: #f44336;
40
- --navi-validation-message-background-color: white;
41
- }
36
+ @layer navi {
37
+ :root {
38
+ --navi-info-color: #2196f3;
39
+ --navi-warning-color: #ff9800;
40
+ --navi-error-color: #f44336;
41
+ --navi-validation-message-background-color: white;
42
+ }
42
43
 
43
- /* Ensure the validation message CANNOT cause overflow */
44
- /* might be important to ensure it cannot create scrollbars in the document */
45
- /* When measuring the size it should take */
46
- .jsenv_validation_message_container {
47
- position: fixed;
48
- inset: 0;
49
- overflow: hidden;
50
- }
44
+ /* Ensure the validation message CANNOT cause overflow */
45
+ /* might be important to ensure it cannot create scrollbars in the document */
46
+ /* When measuring the size it should take */
47
+ .jsenv_validation_message_container {
48
+ position: fixed;
49
+ inset: 0;
50
+ overflow: hidden;
51
+ }
51
52
 
52
- .jsenv_validation_message {
53
- position: absolute;
54
- top: 0;
55
- left: 0;
56
- z-index: 1;
57
- display: block;
58
- height: auto;
59
- opacity: 0;
60
- /* will be positioned with transform: translate */
61
- transition: opacity 0.2s ease-in-out;
62
- overflow: visible;
63
- }
53
+ .jsenv_validation_message {
54
+ position: absolute;
55
+ top: 0;
56
+ left: 0;
57
+ z-index: 1;
58
+ display: block;
59
+ height: auto;
60
+ opacity: 0;
61
+ /* will be positioned with transform: translate */
62
+ transition: opacity 0.2s ease-in-out;
63
+ overflow: visible;
64
+ }
64
65
 
65
- .jsenv_validation_message_border {
66
- position: absolute;
67
- filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));
68
- pointer-events: none;
69
- }
66
+ .jsenv_validation_message_border {
67
+ position: absolute;
68
+ filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));
69
+ pointer-events: none;
70
+ }
70
71
 
71
- .jsenv_validation_message_body_wrapper {
72
- position: relative;
73
- border-style: solid;
74
- border-color: transparent;
75
- }
72
+ .jsenv_validation_message_body_wrapper {
73
+ position: relative;
74
+ border-style: solid;
75
+ border-color: transparent;
76
+ }
76
77
 
77
- .jsenv_validation_message_body {
78
- position: relative;
79
- display: flex;
80
- max-width: 47vw;
81
- padding: 8px;
82
- flex-direction: row;
83
- gap: 10px;
84
- }
78
+ .jsenv_validation_message_body {
79
+ position: relative;
80
+ display: flex;
81
+ max-width: 47vw;
82
+ padding: 8px;
83
+ flex-direction: row;
84
+ gap: 10px;
85
+ }
85
86
 
86
- .jsenv_validation_message_icon {
87
- display: flex;
88
- width: 22px;
89
- height: 22px;
90
- flex-shrink: 0;
91
- align-items: center;
92
- align-self: flex-start;
93
- justify-content: center;
94
- border-radius: 2px;
95
- }
87
+ .jsenv_validation_message_icon {
88
+ display: flex;
89
+ width: 22px;
90
+ height: 22px;
91
+ flex-shrink: 0;
92
+ align-items: center;
93
+ align-self: flex-start;
94
+ justify-content: center;
95
+ border-radius: 2px;
96
+ }
96
97
 
97
- .jsenv_validation_message_exclamation_svg {
98
- width: 16px;
99
- height: 12px;
100
- color: white;
101
- }
98
+ .jsenv_validation_message_exclamation_svg {
99
+ width: 16px;
100
+ height: 12px;
101
+ color: white;
102
+ }
102
103
 
103
- .jsenv_validation_message[data-level="info"] .border_path {
104
- fill: var(--navi-info-color);
105
- }
106
- .jsenv_validation_message[data-level="info"] .jsenv_validation_message_icon {
107
- background-color: var(--navi-info-color);
108
- }
109
- .jsenv_validation_message[data-level="warning"] .border_path {
110
- fill: var(--navi-warning-color);
111
- }
112
- .jsenv_validation_message[data-level="warning"]
113
- .jsenv_validation_message_icon {
114
- background-color: var(--navi-warning-color);
115
- }
116
- .jsenv_validation_message[data-level="error"] .border_path {
117
- fill: var(--navi-error-color);
118
- }
119
- .jsenv_validation_message[data-level="error"] .jsenv_validation_message_icon {
120
- background-color: var(--navi-error-color);
121
- }
104
+ .jsenv_validation_message[data-level="info"] .border_path {
105
+ fill: var(--navi-info-color);
106
+ }
107
+ .jsenv_validation_message[data-level="info"]
108
+ .jsenv_validation_message_icon {
109
+ background-color: var(--navi-info-color);
110
+ }
111
+ .jsenv_validation_message[data-level="warning"] .border_path {
112
+ fill: var(--navi-warning-color);
113
+ }
114
+ .jsenv_validation_message[data-level="warning"]
115
+ .jsenv_validation_message_icon {
116
+ background-color: var(--navi-warning-color);
117
+ }
118
+ .jsenv_validation_message[data-level="error"] .border_path {
119
+ fill: var(--navi-error-color);
120
+ }
121
+ .jsenv_validation_message[data-level="error"]
122
+ .jsenv_validation_message_icon {
123
+ background-color: var(--navi-error-color);
124
+ }
122
125
 
123
- .jsenv_validation_message_content {
124
- min-width: 0;
125
- align-self: center;
126
- word-break: break-word;
127
- overflow-wrap: anywhere;
128
- }
126
+ .jsenv_validation_message_content {
127
+ min-width: 0;
128
+ align-self: center;
129
+ word-break: break-word;
130
+ overflow-wrap: anywhere;
131
+ }
129
132
 
130
- .jsenv_validation_message_border svg {
131
- position: absolute;
132
- inset: 0;
133
- overflow: visible;
134
- }
133
+ .jsenv_validation_message_border svg {
134
+ position: absolute;
135
+ inset: 0;
136
+ overflow: visible;
137
+ }
135
138
 
136
- .background_path {
137
- fill: var(--navi-validation-message-background-color);
138
- }
139
+ .background_path {
140
+ fill: var(--navi-validation-message-background-color);
141
+ }
139
142
 
140
- .jsenv_validation_message_close_button_column {
141
- display: flex;
142
- height: 22px;
143
- }
144
- .jsenv_validation_message_close_button {
145
- width: 1em;
146
- height: 1em;
147
- padding: 0;
148
- align-self: center;
149
- color: currentColor;
150
- font-size: inherit;
151
- background: none;
152
- border: none;
153
- border-radius: 0.2em;
154
- cursor: pointer;
155
- }
156
- .jsenv_validation_message_close_button:hover {
157
- background: rgba(0, 0, 0, 0.1);
158
- }
159
- .close_svg {
160
- width: 100%;
161
- height: 100%;
162
- }
143
+ .jsenv_validation_message_close_button_column {
144
+ display: flex;
145
+ height: 22px;
146
+ }
147
+ .jsenv_validation_message_close_button {
148
+ width: 1em;
149
+ height: 1em;
150
+ padding: 0;
151
+ align-self: center;
152
+ color: currentColor;
153
+ font-size: inherit;
154
+ background: none;
155
+ border: none;
156
+ border-radius: 0.2em;
157
+ cursor: pointer;
158
+ }
159
+ .jsenv_validation_message_close_button:hover {
160
+ background: rgba(0, 0, 0, 0.1);
161
+ }
162
+ .close_svg {
163
+ width: 100%;
164
+ height: 100%;
165
+ }
163
166
 
164
- .error_stack {
165
- max-height: 200px;
166
- overflow: auto;
167
+ .error_stack {
168
+ max-height: 200px;
169
+ overflow: auto;
170
+ }
167
171
  }
168
172
  `;
169
173
 
package/src/components/field/field_css.js DELETED
@@ -1,87 +0,0 @@
1
- import.meta.css = /* css */ `
2
- :root {
3
- --navi-field-border-width: 1px;
4
- --navi-field-outline-width: 1px;
5
-
6
- --navi-field-border-color: light-dark(#767676, #8e8e93);
7
- --navi-field-outline-color: light-dark(#355fcc, #3b82f6);
8
- --navi-field-background-color: light-dark(#f3f4f6, #2d3748);
9
- --navi-field-accent-color: light-dark(#355fcc, #3b82f6);
10
-
11
- --navi-field-disabled-border-color: color-mix(
12
- in srgb,
13
- var(--navi-field-border-color) 30%,
14
- white
15
- );
16
- --navi-field-readonly-border-color: var(--navi-field-disabled-border-color);
17
- --navi-field-active-border-color: color-mix(
18
- in srgb,
19
- var(--navi-field-border-color) 90%,
20
- black
21
- );
22
- --navi-field-hover-border-color: color-mix(
23
- in srgb,
24
- var(--navi-field-border-color) 70%,
25
- black
26
- );
27
-
28
- --navi-field-disabled-background-color: var(--navi-field-background-color);
29
- --navi-field-readonly-background-color: var(
30
- --navi-field-disabled-background-color
31
- );
32
- --navi-field-hover-background-color: color-mix(
33
- in srgb,
34
- var(--navi-field-background-color) 95%,
35
- black
36
- );
37
-
38
- --navi-field-readonly-color: color-mix(
39
- in srgb,
40
- currentColor 30%,
41
- transparent
42
- );
43
- --navi-field-disabled-color: var(--navi-field-readonly-color);
44
- }
45
-
46
- [data-field-border-and-outline] {
47
- border-width: calc(
48
- var(--navi-field-border-width) + var(--navi-field-outline-width)
49
- );
50
-
51
- border-style: solid;
52
-
53
- border-color: transparent;
54
- outline-width: var(--navi-field-border-width);
55
- outline-style: none;
56
- outline-color: var(--navi-field-border-color);
57
- outline-offset: calc(-1 * (var(--navi-field-border-width)));
58
- }
59
- [data-field-wrapper][data-focus-visible] [data-field-border-and-outline] {
60
- outline-width: calc(
61
- var(--navi-field-border-width) + var(--navi-field-outline-width)
62
- );
63
- outline-style: solid;
64
- outline-offset: calc(
65
- -1 * (var(--navi-field-border-width) + var(--navi-field-outline-width))
66
- );
67
- }
68
- [data-field-wrapper][data-readonly] [data-field-border-and-outline] {
69
- --navi-field-outline-color: var(--navi-field-readonly-border-color);
70
- --navi-field-background-color: none;
71
- }
72
- [data-field-wrapper][data-active] [data-field-border-and-outline] {
73
- --navi-field-outline-color: var(--navi-field-active-border-color);
74
- --navi-field-background-color: none;
75
- }
76
-
77
- [data-field-border-hover-only] {
78
- border: 0;
79
- }
80
- [data-field-wrapper][data-hover] [data-field-with-hover-effect-on-border] {
81
- outline-color: var(--navi-field-hover-border-color);
82
- }
83
-
84
- [data-field-wrapper][data-readonly] [data-field] {
85
- --navi-field-color: var(--navi-field-readonly-color);
86
- }
87
- `;