ui-ingredients 0.4.4 → 0.5.0
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.
|
@@ -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,
|