vanilla-jui 1.7.25 → 1.7.26
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/index.js +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/form.ts +2 -1
- package/src/css/themes/default/captcha.css +125 -0
- package/src/css/themes/default/index.css +2 -1
package/package.json
CHANGED
package/src/components/form.ts
CHANGED
|
@@ -921,7 +921,8 @@ export function createForm(input: FormProps = {}): Form {
|
|
|
921
921
|
'data-field-label': () => fieldAccessor().name || id,
|
|
922
922
|
children: () => asRenderable(fieldAccessor().label),
|
|
923
923
|
};
|
|
924
|
-
if (isGroupedControl()) return jsx('legend', labelProps) as HTMLElement;
|
|
924
|
+
// if (isGroupedControl()) return jsx('legend', labelProps) as HTMLElement;
|
|
925
|
+
if (isGroupedControl()) return jsx('label', labelProps) as HTMLElement;
|
|
925
926
|
return jsx('label', { ...labelProps, for: id }) as HTMLElement;
|
|
926
927
|
};
|
|
927
928
|
const controlContainer = (): HTMLElement =>
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
/* cap captcha */
|
|
2
|
+
.j-cap-field {
|
|
3
|
+
position: relative;
|
|
4
|
+
width: 100%;
|
|
5
|
+
min-width: 0;
|
|
6
|
+
height: 56px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.j-cap-field .cap-control {
|
|
10
|
+
display: flex;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: 8px;
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 100%;
|
|
16
|
+
padding: 8px 12px;
|
|
17
|
+
border: 1px solid var(--ui-border);
|
|
18
|
+
border-radius: 6px;
|
|
19
|
+
background: var(--ui-bg);
|
|
20
|
+
color: var(--ui-fg);
|
|
21
|
+
font: inherit;
|
|
22
|
+
font-size: var(--font-size-md);
|
|
23
|
+
line-height: 18px;
|
|
24
|
+
text-align: start;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
transition:
|
|
27
|
+
background-color 150ms,
|
|
28
|
+
border-color 150ms;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.j-cap-field .cap-control[data-state='idle']:hover {
|
|
32
|
+
border-color: var(--tone-border-strong);
|
|
33
|
+
background: var(--tone-soft);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.j-cap-field .cap-control:focus-visible {
|
|
37
|
+
outline: 2px solid var(--tone-solid);
|
|
38
|
+
outline-offset: 2px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.j-cap-field .cap-control[data-state='loading'],
|
|
42
|
+
.j-cap-field .cap-control[data-state='verifying'] {
|
|
43
|
+
cursor: wait;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.j-cap-field .cap-control[data-state='verified'] {
|
|
47
|
+
border-color: var(--state-success-border);
|
|
48
|
+
background: var(--state-success-subtle);
|
|
49
|
+
color: var(--state-success-text);
|
|
50
|
+
cursor: default;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.j-cap-field .cap-control[data-state='error'],
|
|
54
|
+
.j-cap-field .cap-control[data-state='rate-limited'] {
|
|
55
|
+
border-color: var(--state-danger-border);
|
|
56
|
+
color: var(--state-danger-text);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.j-cap-field .cap-control-icon,
|
|
60
|
+
.j-cap-field .cap-control-icon>svg,
|
|
61
|
+
.j-cap-field .cap-control-box {
|
|
62
|
+
display: block;
|
|
63
|
+
width: 20px;
|
|
64
|
+
height: 20px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.j-cap-field .cap-control-icon {
|
|
68
|
+
flex: 0 0 20px;
|
|
69
|
+
color: var(--tone-text);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.j-cap-field .cap-control[data-state='verified'] .cap-control-icon,
|
|
73
|
+
.j-cap-field .cap-control[data-state='error'] .cap-control-icon,
|
|
74
|
+
.j-cap-field .cap-control[data-state='rate-limited'] .cap-control-icon {
|
|
75
|
+
color: inherit;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.j-cap-field .cap-control-box {
|
|
79
|
+
border: 1.5px solid var(--ui-border);
|
|
80
|
+
border-radius: 4px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.j-cap-field .cap-control-label {
|
|
84
|
+
flex: 1 1 0;
|
|
85
|
+
min-width: 0;
|
|
86
|
+
overflow-wrap: anywhere;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.j-cap-field .cap-control-percent {
|
|
90
|
+
flex: 0 0 4ch;
|
|
91
|
+
white-space: nowrap;
|
|
92
|
+
color: var(--tone-caption);
|
|
93
|
+
font-size: 12px;
|
|
94
|
+
font-variant-numeric: tabular-nums;
|
|
95
|
+
text-align: end;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.j-cap-field .cap-progress {
|
|
99
|
+
position: absolute;
|
|
100
|
+
inset: auto 1px 1px;
|
|
101
|
+
height: 2px;
|
|
102
|
+
overflow: hidden;
|
|
103
|
+
border-radius: 0 0 5px 5px;
|
|
104
|
+
pointer-events: none;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.j-cap-field .cap-progress>span {
|
|
108
|
+
display: block;
|
|
109
|
+
height: 100%;
|
|
110
|
+
background: var(--tone-solid);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.j-cap-field .cap-spinner {
|
|
114
|
+
animation: animate-spin 800ms linear infinite;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@media (prefers-reduced-motion: reduce) {
|
|
118
|
+
.j-cap-field .cap-control {
|
|
119
|
+
transition: none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.j-cap-field .cap-spinner {
|
|
123
|
+
animation: none;
|
|
124
|
+
}
|
|
125
|
+
}
|