@ark-ui/vue 5.29.0 → 5.29.1

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 (5) hide show
  1. package/dist/components/fieldset/fieldset-root.vue.cjs +4 -1
  2. package/dist/components/fieldset/fieldset-root.vue.js +4 -1
  3. package/dist/components/fieldset/use-fieldset.cjs +11 -9
  4. package/dist/components/fieldset/use-fieldset.js +11 -9
  5. package/package.json +63 -63
package/dist/components/fieldset/fieldset-root.vue.cjs CHANGED
@@ -25,7 +25,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
25
25
  useFieldsetContext.FieldsetProvider(fieldset);
26
26
  useForwardExpose.useForwardExpose();
27
27
  return (_ctx, _cache) => {
28
- return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).fieldset, vue.mergeProps(vue.unref(fieldset).getRootProps(), { "as-child": __props.asChild }), {
28
+ return vue.openBlock(), vue.createBlock(vue.unref(factory.ark).fieldset, vue.mergeProps(vue.unref(fieldset).getRootProps(), {
29
+ ref: vue.unref(fieldset).refs.rootRef,
30
+ "as-child": __props.asChild
31
+ }), {
29
32
  default: vue.withCtx(() => [
30
33
  vue.renderSlot(_ctx.$slots, "default")
31
34
  ]),
package/dist/components/fieldset/fieldset-root.vue.js CHANGED
@@ -21,7 +21,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
21
21
  FieldsetProvider(fieldset);
22
22
  useForwardExpose();
23
23
  return (_ctx, _cache) => {
24
- return openBlock(), createBlock(unref(ark).fieldset, mergeProps(unref(fieldset).getRootProps(), { "as-child": __props.asChild }), {
24
+ return openBlock(), createBlock(unref(ark).fieldset, mergeProps(unref(fieldset).getRootProps(), {
25
+ ref: unref(fieldset).refs.rootRef,
26
+ "as-child": __props.asChild
27
+ }), {
25
28
  default: withCtx(() => [
26
29
  renderSlot(_ctx.$slots, "default")
27
30
  ]),
package/dist/components/fieldset/use-fieldset.cjs CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
  const domQuery = require('@zag-js/dom-query');
6
6
  const vue = require('vue');
7
7
  const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
8
+ const unrefElement = require('../../utils/unref-element.cjs');
8
9
  const fieldset_anatomy = require('./fieldset.anatomy.cjs');
9
10
 
10
11
  const useFieldset = (props = {}) => {
@@ -19,13 +20,13 @@ const useFieldset = (props = {}) => {
19
20
  const fieldsetProps = vue.toValue(props);
20
21
  const id = fieldsetProps.id ?? uuid;
21
22
  return {
22
- labelId: `fieldset::${id}::label`,
23
+ legendId: `fieldset::${id}::legend`,
23
24
  errorTextId: `fieldset::${id}::error-text`,
24
25
  helperTextId: `fieldset::${id}::helper-text`
25
26
  };
26
27
  });
27
28
  vue.onMounted(() => {
28
- const rootNode = rootRef.value;
29
+ const rootNode = unrefElement.unrefElement(rootRef);
29
30
  if (!rootNode) return;
30
31
  const checkTextElements = () => {
31
32
  const { errorTextId, helperTextId } = ids.value;
@@ -43,20 +44,21 @@ const useFieldset = (props = {}) => {
43
44
  });
44
45
  return vue.computed(() => {
45
46
  const { disabled, invalid } = vue.toValue(props);
46
- const { labelId, errorTextId, helperTextId } = ids.value;
47
- const labelIds = [];
48
- if (state.hasErrorText && invalid) labelIds.push(errorTextId);
49
- if (state.hasHelperText) labelIds.push(helperTextId);
47
+ const { legendId, errorTextId, helperTextId } = ids.value;
48
+ const describedByIds = [];
49
+ if (state.hasErrorText && invalid) describedByIds.push(errorTextId);
50
+ if (state.hasHelperText) describedByIds.push(helperTextId);
51
+ const describedBy = describedByIds.length > 0 ? describedByIds.join(" ") : void 0;
50
52
  const getRootProps = () => ({
51
53
  ...fieldset_anatomy.parts.root.attrs,
52
54
  disabled,
53
55
  "data-disabled": domQuery.dataAttr(!!disabled),
54
56
  "data-invalid": domQuery.dataAttr(invalid),
55
- "aria-labelledby": labelId,
56
- "aria-describedby": labelIds.join(" ")
57
+ "aria-labelledby": legendId,
58
+ "aria-describedby": describedBy
57
59
  });
58
60
  const getLegendProps = () => ({
59
- id: labelId,
61
+ id: legendId,
60
62
  ...fieldset_anatomy.parts.legend.attrs,
61
63
  "data-disabled": domQuery.dataAttr(!!disabled),
62
64
  "data-invalid": domQuery.dataAttr(invalid)
package/dist/components/fieldset/use-fieldset.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { dataAttr } from '@zag-js/dom-query';
2
2
  import { reactive, ref, useId, computed, toValue, onMounted, onBeforeUnmount } from 'vue';
3
3
  import { useEnvironmentContext, DEFAULT_ENVIRONMENT } from '../../providers/environment/use-environment-context.js';
4
+ import { unrefElement } from '../../utils/unref-element.js';
4
5
  import { parts } from './fieldset.anatomy.js';
5
6
 
6
7
  const useFieldset = (props = {}) => {
@@ -15,13 +16,13 @@ const useFieldset = (props = {}) => {
15
16
  const fieldsetProps = toValue(props);
16
17
  const id = fieldsetProps.id ?? uuid;
17
18
  return {
18
- labelId: `fieldset::${id}::label`,
19
+ legendId: `fieldset::${id}::legend`,
19
20
  errorTextId: `fieldset::${id}::error-text`,
20
21
  helperTextId: `fieldset::${id}::helper-text`
21
22
  };
22
23
  });
23
24
  onMounted(() => {
24
- const rootNode = rootRef.value;
25
+ const rootNode = unrefElement(rootRef);
25
26
  if (!rootNode) return;
26
27
  const checkTextElements = () => {
27
28
  const { errorTextId, helperTextId } = ids.value;
@@ -39,20 +40,21 @@ const useFieldset = (props = {}) => {
39
40
  });
40
41
  return computed(() => {
41
42
  const { disabled, invalid } = toValue(props);
42
- const { labelId, errorTextId, helperTextId } = ids.value;
43
- const labelIds = [];
44
- if (state.hasErrorText && invalid) labelIds.push(errorTextId);
45
- if (state.hasHelperText) labelIds.push(helperTextId);
43
+ const { legendId, errorTextId, helperTextId } = ids.value;
44
+ const describedByIds = [];
45
+ if (state.hasErrorText && invalid) describedByIds.push(errorTextId);
46
+ if (state.hasHelperText) describedByIds.push(helperTextId);
47
+ const describedBy = describedByIds.length > 0 ? describedByIds.join(" ") : void 0;
46
48
  const getRootProps = () => ({
47
49
  ...parts.root.attrs,
48
50
  disabled,
49
51
  "data-disabled": dataAttr(!!disabled),
50
52
  "data-invalid": dataAttr(invalid),
51
- "aria-labelledby": labelId,
52
- "aria-describedby": labelIds.join(" ")
53
+ "aria-labelledby": legendId,
54
+ "aria-describedby": describedBy
53
55
  });
54
56
  const getLegendProps = () => ({
55
- id: labelId,
57
+ id: legendId,
56
58
  ...parts.legend.attrs,
57
59
  "data-disabled": dataAttr(!!disabled),
58
60
  "data-invalid": dataAttr(invalid)
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ark-ui/vue",
3
3
  "type": "module",
4
- "version": "5.29.0",
4
+ "version": "5.29.1",
5
5
  "description": "A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.",
6
6
  "keywords": [
7
7
  "accordion",
@@ -149,68 +149,68 @@
149
149
  "sideEffects": false,
150
150
  "dependencies": {
151
151
  "@internationalized/date": "3.10.0",
152
- "@zag-js/accordion": "1.29.0",
153
- "@zag-js/anatomy": "1.29.0",
154
- "@zag-js/angle-slider": "1.29.0",
155
- "@zag-js/async-list": "1.29.0",
156
- "@zag-js/auto-resize": "1.29.0",
157
- "@zag-js/avatar": "1.29.0",
158
- "@zag-js/bottom-sheet": "1.29.0",
159
- "@zag-js/carousel": "1.29.0",
160
- "@zag-js/checkbox": "1.29.0",
161
- "@zag-js/clipboard": "1.29.0",
162
- "@zag-js/collapsible": "1.29.0",
163
- "@zag-js/collection": "1.29.0",
164
- "@zag-js/color-picker": "1.29.0",
165
- "@zag-js/color-utils": "1.29.0",
166
- "@zag-js/combobox": "1.29.0",
167
- "@zag-js/core": "1.29.0",
168
- "@zag-js/date-picker": "1.29.0",
169
- "@zag-js/date-utils": "1.29.0",
170
- "@zag-js/dialog": "1.29.0",
171
- "@zag-js/dom-query": "1.29.0",
172
- "@zag-js/editable": "1.29.0",
173
- "@zag-js/file-upload": "1.29.0",
174
- "@zag-js/file-utils": "1.29.0",
175
- "@zag-js/floating-panel": "1.29.0",
176
- "@zag-js/focus-trap": "1.29.0",
177
- "@zag-js/highlight-word": "1.29.0",
178
- "@zag-js/hover-card": "1.29.0",
179
- "@zag-js/image-cropper": "1.29.0",
180
- "@zag-js/i18n-utils": "1.29.0",
181
- "@zag-js/json-tree-utils": "1.29.0",
182
- "@zag-js/listbox": "1.29.0",
183
- "@zag-js/marquee": "1.29.0",
184
- "@zag-js/menu": "1.29.0",
185
- "@zag-js/number-input": "1.29.0",
186
- "@zag-js/pagination": "1.29.0",
187
- "@zag-js/password-input": "1.29.0",
188
- "@zag-js/pin-input": "1.29.0",
189
- "@zag-js/popover": "1.29.0",
190
- "@zag-js/presence": "1.29.0",
191
- "@zag-js/progress": "1.29.0",
192
- "@zag-js/qr-code": "1.29.0",
193
- "@zag-js/radio-group": "1.29.0",
194
- "@zag-js/rating-group": "1.29.0",
195
- "@zag-js/scroll-area": "1.29.0",
196
- "@zag-js/select": "1.29.0",
197
- "@zag-js/signature-pad": "1.29.0",
198
- "@zag-js/slider": "1.29.0",
199
- "@zag-js/splitter": "1.29.0",
200
- "@zag-js/steps": "1.29.0",
201
- "@zag-js/switch": "1.29.0",
202
- "@zag-js/tabs": "1.29.0",
203
- "@zag-js/tags-input": "1.29.0",
204
- "@zag-js/timer": "1.29.0",
205
- "@zag-js/toast": "1.29.0",
206
- "@zag-js/toggle": "1.29.0",
207
- "@zag-js/toggle-group": "1.29.0",
208
- "@zag-js/tooltip": "1.29.0",
209
- "@zag-js/tour": "1.29.0",
210
- "@zag-js/tree-view": "1.29.0",
211
- "@zag-js/types": "1.29.0",
212
- "@zag-js/utils": "1.29.0",
213
- "@zag-js/vue": "1.29.0"
152
+ "@zag-js/accordion": "1.29.1",
153
+ "@zag-js/anatomy": "1.29.1",
154
+ "@zag-js/angle-slider": "1.29.1",
155
+ "@zag-js/async-list": "1.29.1",
156
+ "@zag-js/auto-resize": "1.29.1",
157
+ "@zag-js/avatar": "1.29.1",
158
+ "@zag-js/bottom-sheet": "1.29.1",
159
+ "@zag-js/carousel": "1.29.1",
160
+ "@zag-js/checkbox": "1.29.1",
161
+ "@zag-js/clipboard": "1.29.1",
162
+ "@zag-js/collapsible": "1.29.1",
163
+ "@zag-js/collection": "1.29.1",
164
+ "@zag-js/color-picker": "1.29.1",
165
+ "@zag-js/color-utils": "1.29.1",
166
+ "@zag-js/combobox": "1.29.1",
167
+ "@zag-js/core": "1.29.1",
168
+ "@zag-js/date-picker": "1.29.1",
169
+ "@zag-js/date-utils": "1.29.1",
170
+ "@zag-js/dialog": "1.29.1",
171
+ "@zag-js/dom-query": "1.29.1",
172
+ "@zag-js/editable": "1.29.1",
173
+ "@zag-js/file-upload": "1.29.1",
174
+ "@zag-js/file-utils": "1.29.1",
175
+ "@zag-js/floating-panel": "1.29.1",
176
+ "@zag-js/focus-trap": "1.29.1",
177
+ "@zag-js/highlight-word": "1.29.1",
178
+ "@zag-js/hover-card": "1.29.1",
179
+ "@zag-js/image-cropper": "1.29.1",
180
+ "@zag-js/i18n-utils": "1.29.1",
181
+ "@zag-js/json-tree-utils": "1.29.1",
182
+ "@zag-js/listbox": "1.29.1",
183
+ "@zag-js/marquee": "1.29.1",
184
+ "@zag-js/menu": "1.29.1",
185
+ "@zag-js/number-input": "1.29.1",
186
+ "@zag-js/pagination": "1.29.1",
187
+ "@zag-js/password-input": "1.29.1",
188
+ "@zag-js/pin-input": "1.29.1",
189
+ "@zag-js/popover": "1.29.1",
190
+ "@zag-js/presence": "1.29.1",
191
+ "@zag-js/progress": "1.29.1",
192
+ "@zag-js/qr-code": "1.29.1",
193
+ "@zag-js/radio-group": "1.29.1",
194
+ "@zag-js/rating-group": "1.29.1",
195
+ "@zag-js/scroll-area": "1.29.1",
196
+ "@zag-js/select": "1.29.1",
197
+ "@zag-js/signature-pad": "1.29.1",
198
+ "@zag-js/slider": "1.29.1",
199
+ "@zag-js/splitter": "1.29.1",
200
+ "@zag-js/steps": "1.29.1",
201
+ "@zag-js/switch": "1.29.1",
202
+ "@zag-js/tabs": "1.29.1",
203
+ "@zag-js/tags-input": "1.29.1",
204
+ "@zag-js/timer": "1.29.1",
205
+ "@zag-js/toast": "1.29.1",
206
+ "@zag-js/toggle": "1.29.1",
207
+ "@zag-js/toggle-group": "1.29.1",
208
+ "@zag-js/tooltip": "1.29.1",
209
+ "@zag-js/tour": "1.29.1",
210
+ "@zag-js/tree-view": "1.29.1",
211
+ "@zag-js/types": "1.29.1",
212
+ "@zag-js/utils": "1.29.1",
213
+ "@zag-js/vue": "1.29.1"
214
214
  },
215
215
  "devDependencies": {
216
216
  "@biomejs/biome": "2.3.6",