ui-ingredients 0.4.4 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -25,6 +25,7 @@ export function createField(props) {
|
|
|
25
25
|
readOnly: props.readOnly ?? false,
|
|
26
26
|
};
|
|
27
27
|
});
|
|
28
|
+
let focused = $state(false);
|
|
28
29
|
let hasErrorText = $state(false);
|
|
29
30
|
let hasHelperText = $state(false);
|
|
30
31
|
const ariaDescribedby = $derived.by(() => {
|
|
@@ -46,6 +47,7 @@ export function createField(props) {
|
|
|
46
47
|
'data-disabled': dataAttr(disabled),
|
|
47
48
|
'data-required': dataAttr(required),
|
|
48
49
|
'data-readonly': dataAttr(readOnly),
|
|
50
|
+
'data-focus': dataAttr(focused),
|
|
49
51
|
};
|
|
50
52
|
}
|
|
51
53
|
function getLabelProps() {
|
|
@@ -57,6 +59,7 @@ export function createField(props) {
|
|
|
57
59
|
'data-disabled': dataAttr(disabled),
|
|
58
60
|
'data-required': dataAttr(required),
|
|
59
61
|
'data-readonly': dataAttr(readOnly),
|
|
62
|
+
'data-focus': dataAttr(focused),
|
|
60
63
|
};
|
|
61
64
|
}
|
|
62
65
|
function getRequiredIndicatorProps() {
|
|
@@ -67,6 +70,7 @@ export function createField(props) {
|
|
|
67
70
|
'data-invalid': dataAttr(invalid),
|
|
68
71
|
'data-disabled': dataAttr(disabled),
|
|
69
72
|
'data-readonly': dataAttr(readOnly),
|
|
73
|
+
'data-focus': dataAttr(focused),
|
|
70
74
|
};
|
|
71
75
|
}
|
|
72
76
|
function getErrorTextProps() {
|
|
@@ -79,6 +83,7 @@ export function createField(props) {
|
|
|
79
83
|
'data-disabled': dataAttr(disabled),
|
|
80
84
|
'data-required': dataAttr(required),
|
|
81
85
|
'data-readonly': dataAttr(readOnly),
|
|
86
|
+
'data-focus': dataAttr(focused),
|
|
82
87
|
};
|
|
83
88
|
}
|
|
84
89
|
function getHelperTextProps() {
|
|
@@ -89,11 +94,20 @@ export function createField(props) {
|
|
|
89
94
|
'data-disabled': dataAttr(disabled),
|
|
90
95
|
'data-required': dataAttr(required),
|
|
91
96
|
'data-readonly': dataAttr(readOnly),
|
|
97
|
+
'data-focus': dataAttr(focused),
|
|
92
98
|
};
|
|
93
99
|
}
|
|
100
|
+
function onfocus() {
|
|
101
|
+
focused = true;
|
|
102
|
+
}
|
|
103
|
+
function onblur() {
|
|
104
|
+
focused = false;
|
|
105
|
+
}
|
|
94
106
|
function getControlProps() {
|
|
95
107
|
return {
|
|
96
108
|
id: ids.control,
|
|
109
|
+
onfocus,
|
|
110
|
+
onblur,
|
|
97
111
|
disabled,
|
|
98
112
|
required,
|
|
99
113
|
'aria-describedby': ariaDescribedby,
|
|
@@ -105,6 +119,7 @@ export function createField(props) {
|
|
|
105
119
|
'data-disabled': dataAttr(disabled),
|
|
106
120
|
'data-required': dataAttr(required),
|
|
107
121
|
'data-readonly': dataAttr(readOnly),
|
|
122
|
+
'data-focus': dataAttr(focused),
|
|
108
123
|
};
|
|
109
124
|
}
|
|
110
125
|
function getInputProps() {
|
|
@@ -146,6 +161,7 @@ export function createField(props) {
|
|
|
146
161
|
required,
|
|
147
162
|
readOnly,
|
|
148
163
|
invalid,
|
|
164
|
+
focused,
|
|
149
165
|
'aria-describedby': ariaDescribedby,
|
|
150
166
|
getRootProps,
|
|
151
167
|
getLabelProps,
|