npm - @vizejs/ui - Versions diffs - 0.429.2 → 0.430.1 - Mend

@vizejs/ui 0.429.2 → 0.430.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 (309) hide show

package/registry/files/families/media/webcam-capture/webcam-capture-switch-camera.vue CHANGED Viewed

@@ -50,7 +50,7 @@ defineExpose(exposed);
     ref="element"
     type="button"
     :disabled
-    :aria-label="ariaLabel"
+    :aria-label
     :aria-controls="context.id.value"
     data-vize-ui="webcam-capture-switch-camera"
     part="switch-camera"

package/registry/files/families/menus/dropdown-menu/dropdown-menu-trigger.vue CHANGED Viewed

@@ -112,7 +112,7 @@ defineExpose({ element, focus } satisfies Omit<MenuTriggerExpose, "element"> & {
     ref="element"
     type="button"
     :disabled="disabledState"
-    :aria-label="ariaLabel"
+    :aria-label
     aria-haspopup="menu"
     :aria-expanded="level.open.value ? 'true' : 'false'"
     :aria-controls="level.open.value ? level.contentId.value : undefined"

package/registry/files/families/menus/menu/menu-checkbox-item.vue CHANGED Viewed

@@ -128,7 +128,7 @@ defineExpose({
     v-bind="item.interactiveProps"
     :id="item.id.value"
     ref="element"
-    :aria-checked="ariaChecked"
+    :aria-checked
     :aria-disabled="item.disabled.value ? 'true' : undefined"
     data-vize-ui="menu-checkbox-item"
     part="item"
@@ -140,7 +140,7 @@ defineExpose({
       :checked="checkedState.value.value"
       :disabled="item.disabled.value"
       :highlighted="item.highlighted.value"
-      :state="state"
+      :state
     />
   </div>
 </template>

package/registry/files/families/menus/menu/menu-content.vue CHANGED Viewed

@@ -203,7 +203,7 @@ defineExpose(exposed);
               ref="element"
               v-bind="menu.contentProps"
               :dir="tree.dir.value"
-              :aria-label="ariaLabel"
+              :aria-label
               :aria-labelledby="labelledby"
               data-vize-ui="menu-content"
               :data-menu-kind="tree.kind"

package/registry/files/families/menus/menu/menu-radio-item.vue CHANGED Viewed

@@ -110,12 +110,7 @@ defineExpose({
     :data-disabled="item.disabled.value ? 'true' : undefined"
     :data-highlighted="item.highlighted.value ? 'true' : undefined"
   >
-    <slot
-      :checked="checked"
-      :disabled="item.disabled.value"
-      :highlighted="item.highlighted.value"
-      :state="state"
-    />
+    <slot :checked :disabled="item.disabled.value" :highlighted="item.highlighted.value" :state />
   </div>
 </template>

package/registry/files/families/menus/menu/menu-sub-content.vue CHANGED Viewed

@@ -192,7 +192,7 @@ defineExpose({
               ref="element"
               v-bind="menu.contentProps"
               :dir="tree.dir.value"
-              :aria-label="ariaLabel"
+              :aria-label
               :aria-labelledby="ariaLabel ? undefined : level.triggerId.value"
               data-vize-ui="menu-sub-content"
               :data-menu-kind="tree.kind"

package/registry/files/families/menus/menu/menu-trigger.vue CHANGED Viewed

@@ -82,7 +82,7 @@ defineExpose({ element, focus } satisfies Omit<MenuTriggerExpose, "element"> & {
     ref="element"
     type="button"
     :disabled="disabledState"
-    :aria-label="ariaLabel"
+    :aria-label
     aria-haspopup="menu"
     :aria-expanded="level.open.value ? 'true' : 'false'"
     :aria-controls="level.open.value ? level.contentId.value : undefined"

package/registry/files/families/menus/menubar/menubar-root.vue CHANGED Viewed

@@ -171,8 +171,8 @@ defineExpose({
     ref="element"
     role="menubar"
     aria-orientation="horizontal"
-    :aria-label="ariaLabel"
-    :aria-labelledby="ariaLabelledby"
+    :aria-label
+    :aria-labelledby
     :dir="dirState"
     data-vize-ui="menubar"
     part="root"

package/registry/files/families/menus/menubar/menubar-trigger.vue CHANGED Viewed

@@ -148,7 +148,7 @@ defineExpose({ element, focus } satisfies Omit<MenubarTriggerExpose, "element">
     <slot
       :dir="tree.dir.value"
       :disabled="disabledState"
-      :highlighted="highlighted"
+      :highlighted
       :modal="tree.modal.value"
       :open="level.open.value"
       :state="level.state.value"

package/registry/files/families/navigation/bottom-navigation/bottom-navigation-item.vue CHANGED Viewed

@@ -76,9 +76,9 @@ function onClick(event: MouseEvent): void {
     :data-state="active ? 'active' : 'inactive'"
     @click="onClick"
   >
-    <slot :active="active" />
+    <slot :active />
     <span v-if="badge !== undefined" part="badge" data-vize-ui="bottom-navigation-badge">
-      <slot name="badge" :badge="badge">{{ badge }}</slot>
+      <slot name="badge" :badge>{{ badge }}</slot>
     </span>
   </component>
 </template>

package/registry/files/families/navigation/bottom-navigation/bottom-navigation.vue CHANGED Viewed

@@ -82,7 +82,7 @@ bottomNavigationContext.provide({
 <template>
   <nav
     :aria-label="ariaLabelledby === undefined ? ariaLabel : undefined"
-    :aria-labelledby="ariaLabelledby"
+    :aria-labelledby
     part="root"
     data-vize-ui="bottom-navigation"
     :data-count="destinations.length"

package/registry/files/families/navigation/link/link-anchor.vue CHANGED Viewed

@@ -115,7 +115,7 @@ defineExpose(exposed);
     :aria-disabled="unavailable ? 'true' : undefined"
     :inert="inert ? true : undefined"
     data-vize-ui="link"
-    :data-state="dataState"
+    :data-state
     @click="onClick"
     @keydown="onKeydown"
   >

package/registry/files/families/navigation/navigation-menu/navigation-menu-indicator.vue CHANGED Viewed

@@ -62,7 +62,7 @@ onScopeDispose(() => stopResize?.());
 <template>
   <span
     aria-hidden="true"
-    :style="style"
+    :style
     data-vize-ui="navigation-menu-indicator"
     part="indicator"
     :data-state="state"

package/registry/files/families/navigation/navigation-menu/navigation-menu-root.vue CHANGED Viewed

@@ -371,8 +371,8 @@ defineExpose(exposed);
     :id="baseId"
     ref="element"
     :dir="dirState"
-    :aria-label="ariaLabel"
-    :aria-labelledby="ariaLabelledby"
+    :aria-label
+    :aria-labelledby
     data-vize-ui="navigation-menu"
     part="root"
     :data-state="openValue === null ? 'closed' : 'open'"

package/registry/files/families/navigation/navigation-menu/navigation-menu-trigger.vue CHANGED Viewed

@@ -97,7 +97,7 @@ const triggerProps = computed<{
     :id="triggerId"
     ref="element"
     type="button"
-    :disabled="disabled"
+    :disabled
     :aria-expanded="item.open.value ? 'true' : 'false'"
     :aria-controls="contentId"
     data-navigation-menu-entry=""

package/registry/files/families/navigation/navigation-menu/navigation-menu-viewport.vue CHANGED Viewed

@@ -64,7 +64,7 @@ onScopeDispose(() => {
 <template>
   <div
     aria-hidden="true"
-    :style="style"
+    :style
     data-vize-ui="navigation-menu-viewport"
     part="viewport"
     :data-state="state"

package/registry/files/families/navigation/pager/pager-page.vue CHANGED Viewed

@@ -33,7 +33,7 @@ const active = computed(() => context.active.value === page);
     :data-page="page"
     :data-state="active ? 'active' : 'inactive'"
   >
-    <slot :active="active" />
+    <slot :active />
   </section>
 </template>

package/registry/files/families/navigation/pager/pager-tab.vue CHANGED Viewed

@@ -50,7 +50,7 @@ const tabProps = computed(() => ({
     :data-state="selected ? 'active' : 'inactive'"
     @click="onClick"
   >
-    <slot :selected="selected" />
+    <slot :selected />
   </button>
 </template>

package/registry/files/families/navigation/pagination/pagination-next.vue CHANGED Viewed

@@ -122,8 +122,8 @@ defineExpose(exposed);
     :type
     :disabled="controlDisabled"
     :aria-label="ariaLabelledby === undefined ? ariaLabel : undefined"
-    :aria-labelledby="ariaLabelledby"
-    :aria-describedby="ariaDescribedby"
+    :aria-labelledby
+    :aria-describedby
     data-vize-ui="pagination-next"
     part="next"
     :data-state="controlState"

package/registry/files/families/navigation/pagination/pagination-page.vue CHANGED Viewed

@@ -143,8 +143,8 @@ defineExpose(exposed);
     :type
     :disabled="pageDisabled"
     :aria-label="ariaLabelledby === undefined ? accessibleLabel : undefined"
-    :aria-labelledby="ariaLabelledby"
-    :aria-describedby="ariaDescribedby"
+    :aria-labelledby
+    :aria-describedby
     :aria-current="current ? 'page' : undefined"
     data-vize-ui="pagination-page"
     part="page"

package/registry/files/families/navigation/pagination/pagination-previous.vue CHANGED Viewed

@@ -122,8 +122,8 @@ defineExpose(exposed);
     :type
     :disabled="controlDisabled"
     :aria-label="ariaLabelledby === undefined ? ariaLabel : undefined"
-    :aria-labelledby="ariaLabelledby"
-    :aria-describedby="ariaDescribedby"
+    :aria-labelledby
+    :aria-describedby
     data-vize-ui="pagination-previous"
     part="previous"
     :data-state="controlState"

package/registry/files/families/navigation/stepper/stepper-item.vue CHANGED Viewed

@@ -223,9 +223,9 @@ defineExpose(exposed);
     :id="itemContext.id.value"
     ref="element"
     role="listitem"
-    :aria-label="ariaLabel"
-    :aria-labelledby="ariaLabelledby"
-    :aria-describedby="ariaDescribedby"
+    :aria-label
+    :aria-labelledby
+    :aria-describedby
     data-vize-ui="stepper-item"
     part="item"
     :data-state="itemContext.state.value"

package/registry/files/families/navigation/stepper/stepper-list.vue CHANGED Viewed

@@ -94,9 +94,9 @@ defineExpose(exposed);
     :id="context.listId.value"
     ref="element"
     role="list"
-    :aria-label="ariaLabel"
-    :aria-labelledby="ariaLabelledby"
-    :aria-describedby="ariaDescribedby"
+    :aria-label
+    :aria-labelledby
+    :aria-describedby
     :aria-orientation="context.orientation.value"
     data-vize-ui="stepper-list"
     part="list"

package/registry/files/families/navigation/stepper/stepper-trigger.vue CHANGED Viewed

@@ -163,12 +163,12 @@ defineExpose(exposed);
     :type
     :disabled="nativeDisabled"
     :tabindex="tabIndex"
-    :aria-label="ariaLabel"
-    :aria-labelledby="ariaLabelledby"
-    :aria-describedby="ariaDescribedby"
+    :aria-label
+    :aria-labelledby
+    :aria-describedby
     :aria-current="item.current.value ? 'step' : undefined"
     :aria-controls="item.contentId.value"
-    :aria-disabled="ariaDisabled"
+    :aria-disabled
     data-vize-ui="stepper-trigger"
     part="trigger"
     :data-state="item.state.value"

package/registry/files/families/navigation/tabs/tabs-content.vue CHANGED Viewed

@@ -101,9 +101,9 @@ defineExpose(exposed);
     role="tabpanel"
     :hidden="selected ? undefined : true"
     :tabindex="selected ? 0 : undefined"
-    :aria-label="ariaLabel"
+    :aria-label
     :aria-labelledby="labelledBy"
-    :aria-describedby="ariaDescribedby"
+    :aria-describedby
     data-vize-ui="tabs-content"
     part="content"
     :data-state="contentState"

package/registry/files/families/navigation/tabs/tabs-list.vue CHANGED Viewed

@@ -88,9 +88,9 @@ defineExpose(exposed);
     :id="context.listId.value"
     ref="element"
     role="tablist"
-    :aria-label="ariaLabel"
-    :aria-labelledby="ariaLabelledby"
-    :aria-describedby="ariaDescribedby"
+    :aria-label
+    :aria-labelledby
+    :aria-describedby
     :aria-orientation="context.orientation.value"
     data-vize-ui="tabs-list"
     part="list"

package/registry/files/families/navigation/tabs/tabs-trigger.vue CHANGED Viewed

@@ -193,9 +193,9 @@ defineExpose(exposed);
     role="tab"
     :disabled="triggerDisabled"
     :tabindex="tabIndex"
-    :aria-label="ariaLabel"
-    :aria-labelledby="ariaLabelledby"
-    :aria-describedby="ariaDescribedby"
+    :aria-label
+    :aria-labelledby
+    :aria-describedby
     :aria-selected="selected ? 'true' : 'false'"
     :aria-controls="contentId"
     data-vize-ui="tabs-trigger"

package/registry/files/families/navigation/toc/toc-list.vue CHANGED Viewed

@@ -19,7 +19,7 @@ defineSlots<{
 <template>
   <ol data-vize-ui="toc-list" part="list" :data-level="level">
-    <slot :level="level" />
+    <slot :level />
   </ol>
 </template>

package/registry/files/families/navigation/toc/toc-root.vue CHANGED Viewed

@@ -180,7 +180,7 @@ defineExpose(exposed);
   <nav
     ref="element"
     :aria-label="ariaLabelledby === undefined ? ariaLabel : undefined"
-    :aria-labelledby="ariaLabelledby"
+    :aria-labelledby
     data-vize-ui="toc"
     part="root"
     :data-state="state"

package/registry/files/families/overlays/action-sheet/action-sheet-item.vue CHANGED Viewed

@@ -111,7 +111,7 @@ const itemProps = computed(() => ({
     :data-destructive="destructive ? 'true' : undefined"
     :data-disabled="disabled ? 'true' : undefined"
   >
-    <slot :disabled="disabled" />
+    <slot :disabled />
   </div>
 </template>

package/registry/files/families/overlays/command-palette/command-palette-dialog.vue CHANGED Viewed

@@ -152,7 +152,7 @@ defineExpose(exposed);
       <DialogPortal :to :disabled="portalDisabled">
         <DialogOverlay />
         <DialogContent :aria-label>
-          <slot :open="isOpen" :close="close" />
+          <slot :open="isOpen" :close />
         </DialogContent>
       </DialogPortal>
     </DialogRoot>

package/registry/files/families/overlays/command-palette/command-palette-input.vue CHANGED Viewed

@@ -118,7 +118,7 @@ defineExpose(exposed);
     spellcheck="false"
     aria-autocomplete="list"
     aria-haspopup="listbox"
-    :aria-label="ariaLabel"
+    :aria-label
     :aria-expanded="context.open.value ? 'true' : 'false'"
     :aria-controls="context.listId.value"
     :aria-activedescendant="activeDescendant"

package/registry/files/families/overlays/command-palette/command-palette-list.vue CHANGED Viewed

@@ -40,7 +40,7 @@ const listboxRole = { role: "listbox" } as const;
     :id="context.listId.value"
     ref="element"
     v-bind="listboxRole"
-    :aria-label="ariaLabel"
+    :aria-label
     :aria-busy="context.loading.value ? 'true' : undefined"
     :hidden="context.open.value ? undefined : true"
     data-vize-ui="command-palette-list"

package/registry/files/families/overlays/dialog/dialog-close.vue CHANGED Viewed

@@ -74,7 +74,7 @@ defineExpose(exposed);
     ref="element"
     :type
     :disabled
-    :aria-label="ariaLabel"
+    :aria-label
     data-vize-ui="dialog-close"
     part="close"
     :data-state="context.state.value"

package/registry/files/families/overlays/dialog/dialog-content.vue CHANGED Viewed

@@ -259,7 +259,7 @@ defineExpose(exposed);
       :role
       tabindex="-1"
       :aria-modal="context.modal.value ? 'true' : undefined"
-      :aria-label="ariaLabel"
+      :aria-label
       :aria-labelledby="ariaLabelledbyValue"
       :aria-describedby="ariaDescribedbyValue"
       data-vize-ui="dialog-content"

package/registry/files/families/overlays/dialog/dialog-trigger.vue CHANGED Viewed

@@ -83,7 +83,7 @@ defineExpose(exposed);
     ref="element"
     :type
     :disabled
-    :aria-label="ariaLabel"
+    :aria-label
     aria-haspopup="dialog"
     :aria-expanded="context.open.value ? 'true' : 'false'"
     :aria-controls="context.contentId.value"

package/registry/files/families/overlays/drawer/drawer-content.vue CHANGED Viewed

@@ -397,7 +397,7 @@ defineExpose(exposed);
     ref="element"
     v-bind="dismissableLayer.layerProps"
     tabindex="-1"
-    :aria-label="ariaLabel"
+    :aria-label
     :aria-labelledby="ariaLabelledbyValue"
     :aria-describedby="ariaDescribedbyValue"
     data-vize-ui="drawer-content"

package/registry/files/families/overlays/drawer/drawer-handle.vue CHANGED Viewed

@@ -96,7 +96,7 @@ defineExpose(exposed);
     ref="element"
     type="button"
     :disabled
-    :aria-label="ariaLabel"
+    :aria-label
     :aria-controls="context.contentId.value"
     data-vize-ui="drawer-handle"
     part="handle"

package/registry/files/families/overlays/hover-card/hover-card-content.vue CHANGED Viewed

@@ -234,7 +234,7 @@ defineExpose(exposed);
             :id="context.contentId.value"
             ref="element"
             v-bind="dismissableLayer.layerProps"
-            :aria-label="ariaLabel"
+            :aria-label
             data-vize-ui="hover-card-content"
             part="content"
             :hidden="context.open.value ? undefined : true"

package/registry/files/families/overlays/popover/popover-content.vue CHANGED Viewed

@@ -306,9 +306,9 @@ defineExpose(exposed);
               :role
               tabindex="-1"
               :aria-modal="context.modal.value ? 'true' : undefined"
-              :aria-label="ariaLabel"
-              :aria-labelledby="ariaLabelledby"
-              :aria-describedby="ariaDescribedby"
+              :aria-label
+              :aria-labelledby
+              :aria-describedby
               data-vize-ui="popover-content"
               part="content"
               :hidden="context.open.value ? undefined : true"

package/registry/files/families/overlays/popover/popover-trigger.vue CHANGED Viewed

@@ -84,7 +84,7 @@ defineExpose(exposed);
     ref="element"
     :type
     :disabled="disabledState"
-    :aria-label="ariaLabel"
+    :aria-label
     aria-haspopup="dialog"
     :aria-expanded="context.open.value ? 'true' : 'false'"
     :aria-controls="context.contentId.value"

package/registry/files/families/overlays/tooltip/tooltip-content.vue CHANGED Viewed

@@ -201,7 +201,7 @@ defineExpose(exposed);
             ref="element"
             v-bind="dismissableLayer.layerProps"
             role="tooltip"
-            :aria-label="ariaLabel"
+            :aria-label
             data-vize-ui="tooltip-content"
             part="content"
             :hidden="context.open.value ? undefined : true"

package/registry/files/families/overlays/tooltip/tooltip-trigger.vue CHANGED Viewed

@@ -94,7 +94,7 @@ defineExpose(exposed);
     v-bind="hover.hoverProps"
     :type
     :disabled="disabledState"
-    :aria-label="ariaLabel"
+    :aria-label
     :aria-describedby="context.open.value ? context.contentId.value : undefined"
     data-vize-ui="tooltip-trigger"
     part="trigger"

package/registry/files/families/overlays/tour/tour-close.vue CHANGED Viewed

@@ -66,7 +66,7 @@ function onClick(event: MouseEvent): void {
   <button
     type="button"
     :disabled="controlDisabled"
-    :aria-label="ariaLabel"
+    :aria-label
     data-vize-ui="tour-close"
     part="close"
     :data-state="context.state.value"

package/registry/files/families/overlays/tour/tour-content.vue CHANGED Viewed

@@ -326,7 +326,7 @@ defineExpose(exposed);
             role="dialog"
             tabindex="-1"
             :aria-modal="modal ? 'true' : undefined"
-            :aria-label="ariaLabel"
+            :aria-label
             :aria-labelledby="labelledBy"
             :aria-describedby="describedBy"
             data-vize-ui="tour-content"

package/registry/files/families/overlays/tour/tour-next.vue CHANGED Viewed

@@ -55,7 +55,7 @@ function onClick(event: MouseEvent): void {
   <button
     type="button"
     :disabled="controlDisabled"
-    :aria-label="ariaLabel"
+    :aria-label
     data-vize-ui="tour-next"
     part="next"
     :data-state="context.state.value"

package/registry/files/families/overlays/tour/tour-prev.vue CHANGED Viewed

@@ -55,7 +55,7 @@ function onClick(event: MouseEvent): void {
   <button
     type="button"
     :disabled="controlDisabled"
-    :aria-label="ariaLabel"
+    :aria-label
     data-vize-ui="tour-prev"
     part="prev"
     :data-state="context.state.value"

package/registry/files/families/selection/cascader/cascader-column.vue CHANGED Viewed

@@ -56,7 +56,7 @@ cascaderColumnContext.provide({ level: computed(() => level) });
     :data-level="level"
     :data-loading="loading ? 'true' : undefined"
   >
-    <slot :level="level" :loading="loading" />
+    <slot :level :loading />
   </div>
 </template>

package/registry/files/families/selection/cascader/cascader-content.vue CHANGED Viewed

@@ -211,7 +211,7 @@ defineExpose({ element });
               :id="context.contentId.value"
               ref="element"
               v-bind="contentBindings"
-              :aria-label="ariaLabel"
+              :aria-label
               data-vize-ui="cascader-content"
               part="content"
               :hidden="context.open.value ? undefined : true"

package/registry/files/families/selection/cascader/cascader-item.vue CHANGED Viewed

@@ -64,7 +64,7 @@ const interactiveProps = computed(() => ({
     :aria-expanded="branch ? (expanded ? 'true' : 'false') : undefined"
     :aria-disabled="disabled ? 'true' : undefined"
     :aria-busy="loading ? 'true' : undefined"
-    :aria-label="ariaLabel"
+    :aria-label
     data-vize-ui="cascader-item"
     part="item"
     :data-state="state"

package/registry/files/families/selection/cascader/cascader-trigger.vue CHANGED Viewed

@@ -67,9 +67,9 @@ defineExpose({ element, focus: (options?: FocusOptions) => element.value?.focus(
     :aria-expanded="context.open.value ? 'true' : 'false'"
     :aria-controls="context.open.value ? context.columnIds.value.join(' ') : undefined"
     :aria-activedescendant="context.activeDescendant.value"
-    :aria-label="ariaLabel"
-    :aria-labelledby="ariaLabelledby"
-    :aria-describedby="ariaDescribedby"
+    :aria-label
+    :aria-labelledby
+    :aria-describedby
     :aria-required="context.required.value ? 'true' : undefined"
     data-vize-ui="cascader-trigger"
     part="trigger"

package/registry/files/families/selection/checkbox/checkbox-control.vue CHANGED Viewed

@@ -111,7 +111,7 @@ defineExpose({ element, checked, focus, reset: state.reset, setChecked: state.se
     type="checkbox"
     :checked
     :disabled
-    :aria-label="ariaLabel"
+    :aria-label
     :aria-checked="indeterminate ? 'mixed' : checked"
     data-vize-ui="checkbox"
     :data-state="visualState"

package/registry/files/families/selection/checkbox-group/checkbox-group-item.vue CHANGED Viewed

@@ -88,8 +88,8 @@ function onChange(event: Event): void {
     :checked
     :disabled="itemDisabled"
     :required="nativeRequired"
-    :aria-label="ariaLabel"
-    :aria-labelledby="ariaLabelledby"
+    :aria-label
+    :aria-labelledby
     :aria-describedby="context.ariaDescribedby.value"
     :aria-invalid="context.ariaInvalid.value"
     :aria-errormessage="

package/registry/files/families/selection/checkbox-group/checkbox-group-select-all.vue CHANGED Viewed

@@ -64,8 +64,8 @@ function onChange(event: Event): void {
     :checked="state === 'checked'"
     :disabled="context.selectAllDisabled.value"
     :aria-checked="state === 'indeterminate' ? 'mixed' : state === 'checked' ? 'true' : 'false'"
-    :aria-label="ariaLabel"
-    :aria-labelledby="ariaLabelledby"
+    :aria-label
+    :aria-labelledby
     part="select-all"
     data-vize-ui="checkbox-group-select-all"
     :data-state="state"