ui-ingredients 0.4.3 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (2) hide show
  1. package/dist/field/create-field.svelte.js +53 -45
  2. package/package.json +1 -1
package/dist/field/create-field.svelte.js CHANGED
@@ -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(() => {
@@ -37,19 +38,6 @@ export function createField(props) {
37
38
  }
38
39
  return l.join(' ');
39
40
  });
40
- $effect(() => {
41
- const rootNode = environment?.getRootNode() ?? document;
42
- const doc = getDocument(rootNode);
43
- const win = getWindow(rootNode);
44
- function handler() {
45
- hasErrorText = invalid && doc.getElementById(ids.errorText) !== null;
46
- hasHelperText = doc.getElementById(ids.helperText) !== null;
47
- }
48
- handler();
49
- const observer = new win.MutationObserver(handler);
50
- observer.observe(rootNode, { childList: true, subtree: true });
51
- return () => observer.disconnect();
52
- });
53
41
  function getRootProps() {
54
42
  return {
55
43
  ...parts.root.attrs,
@@ -59,6 +47,7 @@ export function createField(props) {
59
47
  'data-disabled': dataAttr(disabled),
60
48
  'data-required': dataAttr(required),
61
49
  'data-readonly': dataAttr(readOnly),
50
+ 'data-focus': dataAttr(focused),
62
51
  };
63
52
  }
64
53
  function getLabelProps() {
@@ -70,6 +59,18 @@ export function createField(props) {
70
59
  'data-disabled': dataAttr(disabled),
71
60
  'data-required': dataAttr(required),
72
61
  'data-readonly': dataAttr(readOnly),
62
+ 'data-focus': dataAttr(focused),
63
+ };
64
+ }
65
+ function getRequiredIndicatorProps() {
66
+ return {
67
+ ...parts.requiredIndicator.attrs,
68
+ hidden: !required,
69
+ 'aria-hidden': true,
70
+ 'data-invalid': dataAttr(invalid),
71
+ 'data-disabled': dataAttr(disabled),
72
+ 'data-readonly': dataAttr(readOnly),
73
+ 'data-focus': dataAttr(focused),
73
74
  };
74
75
  }
75
76
  function getErrorTextProps() {
@@ -82,6 +83,7 @@ export function createField(props) {
82
83
  'data-disabled': dataAttr(disabled),
83
84
  'data-required': dataAttr(required),
84
85
  'data-readonly': dataAttr(readOnly),
86
+ 'data-focus': dataAttr(focused),
85
87
  };
86
88
  }
87
89
  function getHelperTextProps() {
@@ -92,68 +94,74 @@ export function createField(props) {
92
94
  'data-disabled': dataAttr(disabled),
93
95
  'data-required': dataAttr(required),
94
96
  'data-readonly': dataAttr(readOnly),
97
+ 'data-focus': dataAttr(focused),
95
98
  };
96
99
  }
97
- function getInputProps() {
100
+ function onfocus() {
101
+ focused = true;
102
+ }
103
+ function onblur() {
104
+ focused = false;
105
+ }
106
+ function getControlProps() {
98
107
  return {
99
- ...parts.input.attrs,
100
108
  id: ids.control,
109
+ onfocus,
110
+ onblur,
101
111
  disabled,
102
112
  required,
103
- readonly: readOnly,
104
- 'aria-invalid': ariaAttr(invalid),
105
113
  'aria-describedby': ariaDescribedby,
114
+ 'aria-invalid': ariaAttr(invalid),
115
+ 'aria-disabled': ariaAttr(disabled),
116
+ 'aria-required': ariaAttr(required),
117
+ 'aria-readonly': ariaAttr(readOnly),
106
118
  'data-invalid': dataAttr(invalid),
107
119
  'data-disabled': dataAttr(disabled),
108
120
  'data-required': dataAttr(required),
109
121
  'data-readonly': dataAttr(readOnly),
122
+ 'data-focus': dataAttr(focused),
110
123
  };
111
124
  }
112
- function getSelectProps() {
125
+ function getInputProps() {
113
126
  return {
114
- ...parts.select.attrs,
115
- id: ids.control,
116
- disabled,
117
- required,
118
- 'aria-invalid': ariaAttr(invalid),
119
- 'aria-readonly': ariaAttr(readOnly),
120
- 'aria-describedby': ariaDescribedby,
121
- 'data-invalid': dataAttr(invalid),
122
- 'data-disabled': dataAttr(disabled),
123
- 'data-required': dataAttr(required),
124
- 'data-readonly': dataAttr(readOnly),
127
+ readonly: readOnly,
128
+ ...getControlProps(),
129
+ ...parts.input.attrs,
125
130
  };
126
131
  }
127
132
  function getTextareaProps() {
128
133
  return {
129
- ...parts.textarea.attrs,
130
- id: ids.control,
131
- disabled,
132
- required,
133
134
  readonly: readOnly,
134
- 'aria-describedby': ariaDescribedby,
135
- 'data-invalid': dataAttr(invalid),
136
- 'data-disabled': dataAttr(disabled),
137
- 'data-required': dataAttr(required),
138
- 'data-readonly': dataAttr(readOnly),
135
+ ...getControlProps(),
136
+ ...parts.textarea.attrs,
139
137
  };
140
138
  }
141
- function getRequiredIndicatorProps() {
139
+ function getSelectProps() {
142
140
  return {
143
- ...parts.requiredIndicator.attrs,
144
- hidden: !required,
145
- 'aria-hidden': true,
146
- 'data-invalid': dataAttr(invalid),
147
- 'data-disabled': dataAttr(disabled),
148
- 'data-readonly': dataAttr(readOnly),
141
+ ...getControlProps(),
142
+ ...parts.select.attrs,
149
143
  };
150
144
  }
145
+ $effect(() => {
146
+ const rootNode = environment?.getRootNode() ?? document;
147
+ const doc = getDocument(rootNode);
148
+ const win = getWindow(rootNode);
149
+ function handler() {
150
+ hasErrorText = invalid && doc.getElementById(ids.errorText) !== null;
151
+ hasHelperText = doc.getElementById(ids.helperText) !== null;
152
+ }
153
+ handler();
154
+ const observer = new win.MutationObserver(handler);
155
+ observer.observe(rootNode, { childList: true, subtree: true });
156
+ return () => observer.disconnect();
157
+ });
151
158
  return reflect(() => ({
152
159
  ids,
153
160
  disabled,
154
161
  required,
155
162
  readOnly,
156
163
  invalid,
164
+ focused,
157
165
  'aria-describedby': ariaDescribedby,
158
166
  getRootProps,
159
167
  getLabelProps,
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "ui-ingredients",
3
3
  "type": "module",
4
4
  "license": "MIT",
5
- "version": "0.4.3",
5
+ "version": "0.5.0",
6
6
  "packageManager": "pnpm@9.7.0",
7
7
  "svelte": "./dist/index.js",
8
8
  "types": "./dist/index.d.ts",