ui-ingredients 0.4.3 → 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.
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",