VWindow API

Props

name	type	default
`continuous`	boolean	false
If `true`, window will “wrap around” from the last item to the first, and from the first item to the last.
`crossfade` New in v3.10.0	boolean	false
Enables crossfade transition.
`direction`	'vertical' \| 'horizontal'	'horizontal'
The transition direction when changing windows.
`disabled`	boolean	false
Removes the ability to click or target the component.
`mandatory`	boolean \| 'force'	'force'
Forces at least one item to always be selected (if available).
`model-value`	unknown	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`next-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$next'
Icon used for the “next” button if `show-arrows` is `true`.
`prev-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$prev'
Icon used for the “prev” button if `show-arrows` is `true`.
`reverse`	boolean	false
Reverse the normal transition direction.
`selected-class`	string	'v-window-item--active'
Configure the active CSS class applied when an item is selected.
`show-arrows`	string \| boolean	false
Display the “next” and “prev” buttons.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`touch`	boolean \| TouchHandlers	undefined
Provide a custom left and right function when swiped left or right.
`transition-duration` New in v3.10.0	number	undefined
Overrides transition duration. Does not work in firefox, safari <18, or with `prefers-reduced-motion: reduce`.
`vertical-arrows`	boolean \| 'left' \| 'right'	false
Displays the navigation arrows vertically instead of horizontally.

Events

name	type
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.

Slots

{
  group: {
    register: (
      item: {
        id: string
        value: Ref<unknown, unknown>
        disabled: Ref<boolean | undefined, boolean | undefined>
        useIndexAsValue: boolean
      },
      cmp: ComponentInternalInstance,
    ) => void
    unregister: (id: string) => void
    select: (id: string, value: boolean) => void
    selected: Ref<readonly string[], readonly string[]>
    isSelected: (id: string) => boolean
    prev: () => void
    next: () => void
    selectedClass: Ref<string | undefined, string | undefined>
    items: Readonly<
      Ref<
        { id: string; value: unknown; disabled: boolean | undefined }[],
        { id: string; value: unknown; disabled: boolean | undefined }[]
      >
    >
    disabled: Ref<boolean | undefined, boolean | undefined>
    getItemIndex: (value: unknown) => number
  }
}

{
  group: {
    register: (
      item: {
        id: string
        value: Ref<unknown, unknown>
        disabled: Ref<boolean | undefined, boolean | undefined>
        useIndexAsValue: boolean
      },
      cmp: ComponentInternalInstance,
    ) => void
    unregister: (id: string) => void
    select: (id: string, value: boolean) => void
    selected: Ref<readonly string[], readonly string[]>
    isSelected: (id: string) => boolean
    prev: () => void
    next: () => void
    selectedClass: Ref<string | undefined, string | undefined>
    items: Readonly<
      Ref<
        { id: string; value: unknown; disabled: boolean | undefined }[],
        { id: string; value: unknown; disabled: boolean | undefined }[]
      >
    >
    disabled: Ref<boolean | undefined, boolean | undefined>
    getItemIndex: (value: unknown) => number
  }
}

{
  props: {
    icon:
      | string
      | (string | [string, number])[]
      | (new () => any)
      | FunctionalComponent
    class: string
    onClick: () => void
    'aria-label': string
  }
}

{
  props: {
    icon:
      | string
      | (string | [string, number])[]
      | (new () => any)
      | FunctionalComponent
    class: string
    onClick: () => void
    'aria-label': string
  }
}

`additional`
Slot for additional content at the end of the component.
`default`
The default Vue slot.
`next`
Slot displaying the arrow switching to the next item.
`prev`
Slot displaying the arrow switching to the previous item.

Exposed

{
  register: (item: GroupItem, cmp: ComponentInternalInstance) => void
  unregister: (id: string) => void
  select: (id: string, value: boolean) => void
  selected: readonly string[]
  isSelected: (id: string) => boolean
  prev: () => void
  next: () => void
  selectedClass: string | undefined
  items: { id: string; value: unknown; disabled: boolean | undefined }[]
  disabled: boolean | undefined
  getItemIndex: (value: unknown) => number
}

`group`
Returns item group data, state and helper methods.

SASS Variables

name	default
`$window-controls-padding`	0 16px
`$window-controls-vertical-gap`	12px
`$window-crossfade-blend-mode`	plus-lighter
`$window-transition`	.3s cubic-bezier(.25, .8, .50, 1)

#VWindow API

VWindow API