@visns-studio/visns-components 5.4.17 → 5.4.18
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/package.json
CHANGED
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
82
82
|
},
|
|
83
83
|
"name": "@visns-studio/visns-components",
|
|
84
|
-
"version": "5.4.
|
|
84
|
+
"version": "5.4.18",
|
|
85
85
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
86
86
|
"main": "src/index.js",
|
|
87
87
|
"files": [
|
|
@@ -1226,11 +1226,14 @@ function Field({
|
|
|
1226
1226
|
name={settings.id}
|
|
1227
1227
|
data-name={settings.id}
|
|
1228
1228
|
type="radio"
|
|
1229
|
-
className={styles.fi__customcheckbox}
|
|
1229
|
+
className={`${styles.fi__customcheckbox} radio-input`}
|
|
1230
1230
|
value={option.id}
|
|
1231
1231
|
checked={
|
|
1232
|
-
|
|
1233
|
-
|
|
1232
|
+
inputValue !== undefined &&
|
|
1233
|
+
inputValue !== null &&
|
|
1234
|
+
inputValue !== '' &&
|
|
1235
|
+
parseInt(String(inputValue)) ===
|
|
1236
|
+
parseInt(String(option.id))
|
|
1234
1237
|
}
|
|
1235
1238
|
onChange={onChange}
|
|
1236
1239
|
/>
|
|
@@ -1253,11 +1256,25 @@ function Field({
|
|
|
1253
1256
|
name={settings.id}
|
|
1254
1257
|
data-name={settings.id}
|
|
1255
1258
|
type="radio"
|
|
1256
|
-
className={styles.fi__customcheckbox}
|
|
1259
|
+
className={`${styles.fi__customcheckbox} radio-input`}
|
|
1257
1260
|
value={option.id}
|
|
1258
1261
|
checked={
|
|
1259
|
-
|
|
1260
|
-
|
|
1262
|
+
inputValue !== undefined &&
|
|
1263
|
+
inputValue !== null &&
|
|
1264
|
+
inputValue !== '' &&
|
|
1265
|
+
// Handle case where inputValue is an object with value property
|
|
1266
|
+
((typeof inputValue === 'object' &&
|
|
1267
|
+
inputValue.value !== undefined &&
|
|
1268
|
+
parseInt(
|
|
1269
|
+
String(inputValue.value)
|
|
1270
|
+
) ===
|
|
1271
|
+
parseInt(String(option.id))) ||
|
|
1272
|
+
// Handle case where inputValue is a direct value
|
|
1273
|
+
(typeof inputValue !== 'object' &&
|
|
1274
|
+
parseInt(String(inputValue)) ===
|
|
1275
|
+
parseInt(
|
|
1276
|
+
String(option.id)
|
|
1277
|
+
)))
|
|
1261
1278
|
}
|
|
1262
1279
|
onChange={onChange}
|
|
1263
1280
|
/>
|
|
@@ -886,17 +886,19 @@ function Form({
|
|
|
886
886
|
|
|
887
887
|
if (resSaveAnother.data.error === '') {
|
|
888
888
|
toast.success(saveAnother.message);
|
|
889
|
+
fetchTable();
|
|
889
890
|
}
|
|
890
891
|
} else {
|
|
891
892
|
fetchData();
|
|
892
893
|
modalOpen('create', 0);
|
|
893
894
|
}
|
|
894
895
|
}
|
|
896
|
+
} else {
|
|
897
|
+
toast.success(
|
|
898
|
+
formSettings?.save?.toast?.success ||
|
|
899
|
+
'Entry successfully saved into the system.'
|
|
900
|
+
);
|
|
895
901
|
}
|
|
896
|
-
toast.success(
|
|
897
|
-
formSettings?.save?.toast?.success ||
|
|
898
|
-
'Entry successfully saved into the system.'
|
|
899
|
-
);
|
|
900
902
|
|
|
901
903
|
if (formSettings.redirect && res.data.data?.id) {
|
|
902
904
|
navigate(
|
|
@@ -1190,6 +1192,7 @@ function Form({
|
|
|
1190
1192
|
'multi-dropdown',
|
|
1191
1193
|
'multi-dropdown-ajax',
|
|
1192
1194
|
'async-dropdown-ajax',
|
|
1195
|
+
'radio-ajax',
|
|
1193
1196
|
];
|
|
1194
1197
|
|
|
1195
1198
|
if (relationTypes.includes(field.type)) {
|
|
@@ -117,10 +117,52 @@
|
|
|
117
117
|
|
|
118
118
|
.fi__customcheckbox {
|
|
119
119
|
margin-right: 5px; // Space between checkbox and its label
|
|
120
|
+
-webkit-appearance: none; // Reset default appearance for Safari
|
|
121
|
+
-moz-appearance: none;
|
|
122
|
+
appearance: none;
|
|
123
|
+
width: 18px;
|
|
124
|
+
height: 18px;
|
|
125
|
+
border: 1px solid rgba(var(--paragraph-color-rgb), 0.5);
|
|
126
|
+
border-radius: 50% !important; // Make it round for radio buttons
|
|
127
|
+
outline: none;
|
|
128
|
+
position: relative;
|
|
129
|
+
cursor: pointer;
|
|
130
|
+
vertical-align: middle;
|
|
131
|
+
background-color: white;
|
|
132
|
+
display: inline-block;
|
|
133
|
+
transition: border-color 0.2s ease-in-out;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* Hover state */
|
|
137
|
+
.fi__customcheckbox:hover {
|
|
138
|
+
border-color: var(--primary-color);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* Styling for checked state */
|
|
142
|
+
.fi__customcheckbox:checked {
|
|
143
|
+
border-color: var(--primary-color);
|
|
144
|
+
background-color: white;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Create the inner circle for checked state */
|
|
148
|
+
.fi__customcheckbox:checked::after {
|
|
149
|
+
content: '';
|
|
150
|
+
position: absolute;
|
|
151
|
+
top: 50%;
|
|
152
|
+
left: 50%;
|
|
153
|
+
transform: translate(-50%, -50%);
|
|
154
|
+
width: 10px;
|
|
155
|
+
height: 10px;
|
|
156
|
+
border-radius: 50% !important;
|
|
157
|
+
background-color: var(--primary-color);
|
|
158
|
+
display: block;
|
|
159
|
+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
|
|
120
160
|
}
|
|
121
161
|
|
|
122
162
|
.fi__checkboxlabel {
|
|
123
163
|
user-select: none; // Improves UX by preventing text selection
|
|
164
|
+
margin-left: 5px;
|
|
165
|
+
vertical-align: middle;
|
|
124
166
|
}
|
|
125
167
|
}
|
|
126
168
|
|
|
@@ -37,6 +37,52 @@ select {
|
|
|
37
37
|
font: inherit;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
+
/* Global radio button styling */
|
|
41
|
+
input[type='radio'],
|
|
42
|
+
.radio-input {
|
|
43
|
+
-webkit-appearance: none !important;
|
|
44
|
+
-moz-appearance: none !important;
|
|
45
|
+
appearance: none !important;
|
|
46
|
+
width: 18px !important;
|
|
47
|
+
height: 18px !important;
|
|
48
|
+
border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
|
|
49
|
+
border-radius: 50% !important;
|
|
50
|
+
outline: none !important;
|
|
51
|
+
position: relative !important;
|
|
52
|
+
cursor: pointer !important;
|
|
53
|
+
vertical-align: middle !important;
|
|
54
|
+
background-color: white !important;
|
|
55
|
+
display: inline-block !important;
|
|
56
|
+
box-sizing: border-box !important;
|
|
57
|
+
transition: border-color 0.2s ease-in-out !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
input[type='radio']:hover,
|
|
61
|
+
.radio-input:hover {
|
|
62
|
+
border-color: var(--primary-color, #0066cc) !important;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
input[type='radio']:checked,
|
|
66
|
+
.radio-input:checked {
|
|
67
|
+
border-color: var(--primary-color, #0066cc) !important;
|
|
68
|
+
background-color: white !important;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
input[type='radio']:checked::after,
|
|
72
|
+
.radio-input:checked::after {
|
|
73
|
+
content: '' !important;
|
|
74
|
+
position: absolute !important;
|
|
75
|
+
top: 50% !important;
|
|
76
|
+
left: 50% !important;
|
|
77
|
+
transform: translate(-50%, -50%) !important;
|
|
78
|
+
width: 10px !important;
|
|
79
|
+
height: 10px !important;
|
|
80
|
+
border-radius: 50% !important;
|
|
81
|
+
background-color: var(--primary-color, #0066cc) !important;
|
|
82
|
+
display: block !important;
|
|
83
|
+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
|
|
84
|
+
}
|
|
85
|
+
|
|
40
86
|
select {
|
|
41
87
|
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+)
|
|
42
88
|
no-repeat 100% 50% #fff;
|
|
@@ -292,3 +338,51 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
|
|
|
292
338
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
293
339
|
z-index: -1 !important;
|
|
294
340
|
}
|
|
341
|
+
|
|
342
|
+
/* Safari-specific fixes for form elements */
|
|
343
|
+
@supports (-webkit-touch-callout: none) {
|
|
344
|
+
/* Safari-specific styles */
|
|
345
|
+
input[type='radio'],
|
|
346
|
+
.radio-input {
|
|
347
|
+
-webkit-appearance: none !important;
|
|
348
|
+
appearance: none !important;
|
|
349
|
+
width: 18px !important;
|
|
350
|
+
height: 18px !important;
|
|
351
|
+
border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
|
|
352
|
+
border-radius: 50% !important;
|
|
353
|
+
outline: none !important;
|
|
354
|
+
position: relative !important;
|
|
355
|
+
cursor: pointer !important;
|
|
356
|
+
vertical-align: middle !important;
|
|
357
|
+
background-color: white !important;
|
|
358
|
+
display: inline-block !important;
|
|
359
|
+
box-sizing: border-box !important;
|
|
360
|
+
transition: border-color 0.2s ease-in-out !important;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
input[type='radio']:hover,
|
|
364
|
+
.radio-input:hover {
|
|
365
|
+
border-color: var(--primary-color, #0066cc) !important;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
input[type='radio']:checked,
|
|
369
|
+
.radio-input:checked {
|
|
370
|
+
border-color: var(--primary-color, #0066cc) !important;
|
|
371
|
+
background-color: white !important;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
input[type='radio']:checked::after,
|
|
375
|
+
.radio-input:checked::after {
|
|
376
|
+
content: '' !important;
|
|
377
|
+
position: absolute !important;
|
|
378
|
+
top: 50% !important;
|
|
379
|
+
left: 50% !important;
|
|
380
|
+
transform: translate(-50%, -50%) !important;
|
|
381
|
+
width: 10px !important;
|
|
382
|
+
height: 10px !important;
|
|
383
|
+
border-radius: 50% !important;
|
|
384
|
+
background-color: var(--primary-color, #0066cc) !important;
|
|
385
|
+
display: block !important;
|
|
386
|
+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
|
|
387
|
+
}
|
|
388
|
+
}
|