@elcrm/form 0.0.74 → 0.0.76
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/README.md +52 -5
- package/dist/assets/styles/Field.module.css +1 -1
- package/dist/core/Field.js +1 -1
- package/dist/fields/Check.d.ts +7 -0
- package/dist/fields/Check.js +79 -0
- package/dist/fields/Date.js +8 -2
- package/dist/fields/Input.js +17 -5
- package/dist/fields/Mask.js +8 -2
- package/dist/fields/Modal.js +8 -2
- package/dist/fields/Money.js +8 -2
- package/dist/fields/Numeric.js +8 -2
- package/dist/fields/Options.js +8 -2
- package/dist/fields/Password.js +10 -5
- package/dist/fields/Phone.js +8 -2
- package/dist/fields/Range.js +8 -2
- package/dist/fields/Select.js +84 -77
- package/dist/fields/Textarea.js +8 -2
- package/dist/fields/Time.js +64 -58
- package/dist/index.d.ts +2 -0
- package/dist/index.js +7 -6
- package/dist/index.umd.js +2 -2
- package/dist/package.js +1 -1
- package/dist/style.css +1 -1
- package/dist/styles/Field.module.js +24 -18
- package/package.json +1 -1
- package/src/lib/styles/Field.module.scss +94 -3
- package/src/lib/styles/dark.css +0 -1
- package/src/lib/styles/light.css +0 -1
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
& > dt,
|
|
10
10
|
& > dd {
|
|
11
11
|
margin: 0;
|
|
12
|
-
padding: 0;
|
|
13
12
|
}
|
|
14
13
|
&[data-field="group"] {
|
|
15
14
|
& div {
|
|
@@ -46,7 +45,8 @@
|
|
|
46
45
|
overflow: hidden;
|
|
47
46
|
background: var(--field-background);
|
|
48
47
|
color: var(--field-color);
|
|
49
|
-
|
|
48
|
+
/* Внутренний отступ теперь на контейнере dd (.f), а не на дочернем div */
|
|
49
|
+
padding: var(--control-inner-padding, 0 var(--field-side-padding, 14px));
|
|
50
50
|
transition:
|
|
51
51
|
border-color 0.16s ease,
|
|
52
52
|
box-shadow 0.16s ease,
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
margin: 0;
|
|
83
83
|
min-height: var(--field-height);
|
|
84
84
|
line-height: calc(var(--field-height) - 2px);
|
|
85
|
-
padding:
|
|
85
|
+
padding: 0;
|
|
86
86
|
font-size: var(--control-font-size, 14px);
|
|
87
87
|
text-wrap: pretty;
|
|
88
88
|
|
|
@@ -240,6 +240,21 @@
|
|
|
240
240
|
padding-bottom: 10px;
|
|
241
241
|
}
|
|
242
242
|
|
|
243
|
+
.affix {
|
|
244
|
+
display: inline-flex;
|
|
245
|
+
align-items: center;
|
|
246
|
+
justify-content: center;
|
|
247
|
+
flex: 0 0 auto;
|
|
248
|
+
padding: 0;
|
|
249
|
+
margin: 0;
|
|
250
|
+
color: var(--field-icon-color, var(--field-placeholder));
|
|
251
|
+
font-size: inherit;
|
|
252
|
+
line-height: 1;
|
|
253
|
+
user-select: none;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* Отступ аффиксов от краёв капсулы (как визуально у Password), без увеличения зазора до текста */
|
|
257
|
+
|
|
243
258
|
.g {
|
|
244
259
|
flex-direction: column;
|
|
245
260
|
}
|
|
@@ -295,6 +310,82 @@
|
|
|
295
310
|
}
|
|
296
311
|
}
|
|
297
312
|
|
|
313
|
+
// checkbox — капсула с квадратом слева и текстом справа
|
|
314
|
+
.checkbox {
|
|
315
|
+
& > div {
|
|
316
|
+
min-height: var(--field-height);
|
|
317
|
+
display: flex;
|
|
318
|
+
align-items: flex-start;
|
|
319
|
+
width: 100%;
|
|
320
|
+
padding: 0;
|
|
321
|
+
line-height: normal;
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.checkControl {
|
|
326
|
+
width: 100%;
|
|
327
|
+
min-height: var(--field-height);
|
|
328
|
+
display: flex;
|
|
329
|
+
align-items: flex-start;
|
|
330
|
+
gap: 12px;
|
|
331
|
+
border: 0;
|
|
332
|
+
margin: 0;
|
|
333
|
+
padding: 10px 0;
|
|
334
|
+
background: transparent;
|
|
335
|
+
color: inherit;
|
|
336
|
+
font: inherit;
|
|
337
|
+
text-align: left;
|
|
338
|
+
cursor: pointer;
|
|
339
|
+
outline: none;
|
|
340
|
+
|
|
341
|
+
&:focus-visible {
|
|
342
|
+
box-shadow: 0 0 0 3px var(--field-focus-ring, #0000);
|
|
343
|
+
border-radius: calc(var(--field-radius) - 2px);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
&[aria-disabled="true"] {
|
|
347
|
+
cursor: not-allowed;
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.checkBox {
|
|
352
|
+
width: 22px;
|
|
353
|
+
height: 22px;
|
|
354
|
+
border-radius: 8px;
|
|
355
|
+
border: var(--field-check-box-border, var(--field-border));
|
|
356
|
+
background: transparent;
|
|
357
|
+
display: inline-flex;
|
|
358
|
+
align-items: center;
|
|
359
|
+
justify-content: center;
|
|
360
|
+
flex: 0 0 auto;
|
|
361
|
+
transition:
|
|
362
|
+
background-color 0.16s ease,
|
|
363
|
+
border-color 0.16s ease,
|
|
364
|
+
opacity 0.16s ease;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.checkMark {
|
|
368
|
+
width: 11px;
|
|
369
|
+
height: 6px;
|
|
370
|
+
border: 2px solid #fcfff4;
|
|
371
|
+
border-top: none;
|
|
372
|
+
border-right: none;
|
|
373
|
+
transform: translateY(-1px) rotate(-45deg);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.checkText {
|
|
377
|
+
flex: 1 1 auto;
|
|
378
|
+
min-width: 0;
|
|
379
|
+
color: inherit;
|
|
380
|
+
font-size: var(--control-font-size, 14px);
|
|
381
|
+
line-height: 1.25;
|
|
382
|
+
padding-top: 2px;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.checkControl[aria-checked="true"] .checkBox {
|
|
386
|
+
background: var(--field-background-active);
|
|
387
|
+
}
|
|
388
|
+
|
|
298
389
|
// checkBox
|
|
299
390
|
.h {
|
|
300
391
|
--field-border: 0;
|
package/src/lib/styles/dark.css
CHANGED
package/src/lib/styles/light.css
CHANGED