Transfer

Demos

Size variants

Available size variants for the ui prop: s / m.

<template>
<article>
  <section>
    <veui-transfer
      v-model="selected"
      :datasource="coffees"
    />
  </section>
  <section>
    <veui-transfer
      v-model="selected"
      :datasource="coffees"
      ui="s"
    />
  </section>
  <p>Selected: {{ selected }}</p>
</article>
</template>

<script>
import { Transfer } from 'veui'

export default {
  components: {
    'veui-transfer': Transfer
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed'
                },
                {
                  label: 'Filtered',
                  value: 'filtered'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          children: [
            {
              label: 'Percolated',
              value: 'percolated'
            },
            {
              label: 'Turkish',
              value: 'turkish'
            },
            {
              label: 'Moka',
              value: 'moka'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo'
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro'
            },
            {
              label: 'Doppio',
              value: 'doppio'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano'
            },
            {
              label: 'Guillermo',
              value: 'guillermo'
            },
            {
              label: 'Ristretto',
              value: 'ristretto'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white'
            },
            {
              label: 'Latte',
              value: 'latte'
            },
            {
              label: 'Macchiato',
              value: 'macchiato'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino'
            },
            {
              label: 'White coffee',
              value: 'white-coffee'
            }
          ]
        }
      ],
      selected: []
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

Without search input

Selected: []

Edit this page on GitHubEdit

<template>
<article>
  <veui-transfer
    v-model="selected"
    :datasource="coffees"
    :searchable="false"
  />
  <p>Selected: {{ selected }}</p>
</article>
</template>

<script>
import { Transfer } from 'veui'

export default {
  components: {
    'veui-transfer': Transfer
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed'
                },
                {
                  label: 'Filtered',
                  value: 'filtered'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          children: [
            {
              label: 'Percolated',
              value: 'percolated'
            },
            {
              label: 'Turkish',
              value: 'turkish'
            },
            {
              label: 'Moka',
              value: 'moka'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo'
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro'
            },
            {
              label: 'Doppio',
              value: 'doppio'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano'
            },
            {
              label: 'Guillermo',
              value: 'guillermo'
            },
            {
              label: 'Ristretto',
              value: 'ristretto'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white'
            },
            {
              label: 'Latte',
              value: 'latte'
            },
            {
              label: 'Macchiato',
              value: 'macchiato'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino'
            },
            {
              label: 'White coffee',
              value: 'white-coffee'
            }
          ]
        }
      ],
      selected: []
    }
  }
}
</script>

Custom search

Selected: []

Customize filter to filter by any of label / value / id.

Edit this page on GitHubEdit

<template>
<article>
  <veui-transfer
    v-model="selected"
    :datasource="coffees"
    :filter="filter"
  />
  <p>Selected: {{ selected }}</p>
</article>
</template>

<script>
import { Transfer } from 'veui'
import { includes } from 'lodash'

export default {
  components: {
    'veui-transfer': Transfer
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          id: '100',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              id: '100-01',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed',
                  id: '100-01-01'
                },
                {
                  label: 'Filtered',
                  value: 'filtered',
                  id: '100-01-02'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over',
                  id: '100-01-03'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed',
                  id: '100-01-04'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press',
              id: '100-02'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew',
              id: '100-03'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          id: '200',
          children: [
            {
              label: 'Percolated',
              value: 'percolated',
              id: '200-01'
            },
            {
              label: 'Turkish',
              value: 'turkish',
              id: '200-02'
            },
            {
              label: 'Moka',
              value: 'moka',
              id: '200-03'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          id: '300',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano',
              id: '300-01'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo',
              id: '300-02'
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano',
              id: '300-03'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema',
              id: '300-04'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro',
              id: '300-05'
            },
            {
              label: 'Doppio',
              value: 'doppio',
              id: '300-06'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano',
              id: '300-07'
            },
            {
              label: 'Guillermo',
              value: 'guillermo',
              id: '300-08'
            },
            {
              label: 'Ristretto',
              value: 'ristretto',
              id: '300-09'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          id: '400',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white',
              id: '400-01'
            },
            {
              label: 'Latte',
              value: 'latte',
              id: '400-02'
            },
            {
              label: 'Macchiato',
              value: 'macchiato',
              id: '400-03'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino',
              id: '400-04'
            },
            {
              label: 'White coffee',
              value: 'white-coffee',
              id: '400-05'
            }
          ]
        }
      ],
      selected: []
    }
  },
  methods: {
    filter (type, keyword, { label, value, id }) {
      let key = keyword.toLowerCase()
      return (
        includes(label.toLowerCase(), key) ||
        includes(value.toLowerCase(), key) ||
        includes(id, key)
      )
    }
  }
}
</script>

Selected values as list

Selected: []

Edit this page on GitHubEdit

<template>
<article>
  <veui-transfer
    v-model="selected"
    :datasource="coffees"
    selected-show-mode="flat"
  />
  <p>Selected: {{ selected }}</p>
</article>
</template>

<script>
import { Transfer } from 'veui'

export default {
  components: {
    'veui-transfer': Transfer
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          id: '100',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              id: '100-01',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed',
                  id: '100-01-01'
                },
                {
                  label: 'Filtered',
                  value: 'filtered',
                  id: '100-01-02'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over',
                  id: '100-01-03'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed',
                  id: '100-01-04'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press',
              id: '100-02'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew',
              id: '100-03'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          id: '200',
          children: [
            {
              label: 'Percolated',
              value: 'percolated',
              id: '200-01'
            },
            {
              label: 'Turkish',
              value: 'turkish',
              id: '200-02'
            },
            {
              label: 'Moka',
              value: 'moka',
              id: '200-03'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          id: '300',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano',
              id: '300-01'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo',
              id: '300-02'
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano',
              id: '300-03'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema',
              id: '300-04'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro',
              id: '300-05'
            },
            {
              label: 'Doppio',
              value: 'doppio',
              id: '300-06'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano',
              id: '300-07'
            },
            {
              label: 'Guillermo',
              value: 'guillermo',
              id: '300-08'
            },
            {
              label: 'Ristretto',
              value: 'ristretto',
              id: '300-09'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          id: '400',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white',
              id: '400-01'
            },
            {
              label: 'Latte',
              value: 'latte',
              id: '400-02'
            },
            {
              label: 'Macchiato',
              value: 'macchiato',
              id: '400-03'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino',
              id: '400-04'
            },
            {
              label: 'White coffee',
              value: 'white-coffee',
              id: '400-05'
            }
          ]
        }
      ],
      selected: []
    }
  }
}
</script>

API

Props

Name Type Default Description

ui

string=

Style variants.

Value	Description
`s`	Small transfer.
`m`	Medium transfer.

datasource

Array<Object>

[]

The datasource of the transfer. The type of node item is {label, value, children, ...}.

Name	Type	Description
`label`	`string`	The descriptive label of each item.
`value`	`string`	The value of each item.
`children`	`Array<Object>=`	The child items of each item. The item type is the same as `datasource` items.

searchable boolean= true Whether to allow search.

filter

function=

See description

The filter function. The function signature is function(from, keyword, item, index, datasource): boolean. Items that make filter function returns false will be hidden.

Name	Type	Description
`from`	`string`	The source of search. Available values are `'candidate'` / `'selected'`. `'candidate'` means search is triggered from the candidate panel, `'selected'` means from the selected panel.
`keyword`	`string`	The search keyword.
`item`	`Object`	Each item in `datasource`.
`index`	`number`	The index of each item among its siblings.
`datasource`	`Array<{label: string, ...}>`	same as the `datasource` prop.

import { includes } from 'lodash'

function (keyword, { label }) {
  return includes(label, keyword)
}

selected

Array=

[]

v-model

The selected values which is the value array of datasource items (affected by the keys prop).

candidate-placeholder string= - The placeholder text in the search input of the candidate panel.

selected-placeholder string= - The placeholder text in the search input of the selected panel.

candidate-label string= - The title of the candidates panel.

selected-label string= - The title of the selected panel.

selected-show-mode

string=

'tree'

To specify how should items inside selected panel be displayed.

Value	Description
`tree`	Displayed as a tree structure.
`flat`	Displayed as a flattened array.

keys string | function= 'value' The customized unique key for datasource items. String values can be used to specify which field value is used. Also a function can bu used to specify a customized key value.

merge-checked

string=

keep-all

Merge strategy for selected values. When all child nodes under a node are selected, you can choose to keep only the parent node, only the child nodes, or both.

Value	Description
`keep-all`	The parent and child nodes will both be in the selected value.
`upwards`	Merge selected values as far as possible in the ancestor direction.
`downwards`	Merge selected values in the direction of descendants if possible.

Slots

Name Description

candidate The candidate panel.

candidate-head

The head area of the candidate panel.

Name	Type	Description
`count`	`number`	The number of candidate items.

selected-head

The head area of the selected panel.

Name	Type	Description
`count`	`number`	The number of selected items.

candidate-title The title text of the candidate panel. Shares the same scope properties with slot candidate-head.

selected-title The title text of the selected panel. Shares the same scope properties with slot selected-head.

candidate-no-data The content displayed when there's no data inside the candidate panel.

selected-no-data The content displayed when there's no data inside the selected panel.

candidate-item

The content of each item inside the candidate panel.

Name	Type	Description
`label`	`string`	The descriptive label of current item.
`value`	`string`	The value of current item.
`children`	`Array<Object>=`	The array of the child items of each item. Shares the same type with `datasource` items.
`index`	`number`	The index of current item among its siblings.
`depth`	`number`	The depth of current item in the tree structure.

selected-item

The content of each item inside the selected panel.

The scope properties will be the same as slot candidate-item when selected-show-mode is 'tree'. They'll be as follows when selected-show-mode is 'flat'.

Name	Type	Description
`items`	`Array<Object>`	All ancestor items from the top level down to current item. Shares the same item type with `datasource` items.
`index`	`number`	The index of current item among its siblings.

candidate-item-label Label text of each item inside the candidate panel. Shares the same scope properties with slot candidate-item.

selected-item-label Label text of each item inside the selected panel. Shares the same scope properties with slot selected-item when selected-show-mode is 'tree'. Otherwise this slot specifies custom content for any item along the path for all selected leaf item and shares the same scope properties with slot candidate-item.

Events

Name	Description
`select`	Triggered when user changes selection. The callback parameter list is `(selected: Array<string>)` and `selected` is the array of `value` properties of selected items.

Icons

Name	Description
`checked`	The checked state.
`select`	Select items.
`remove`	Remove items.
`expand`	Click to expand (currently being collapsed).
`collapse`	Click to collapse (currently being expanded).
`separator`	The separator between level labels when `selected-show-mode` is `'flat'`.

Edit this page on GitHubEdit

Transfer

Demos

Size variants

Available Select all

Selected Deselect all

Available Select all

Selected Deselect all

Without search input

Available Select all

Selected Deselect all

Custom search

Available Select all

Selected Deselect all

Selected values as list

Available Select all

Selected Deselect all

API

Props

Slots

Events

Icons

Available

Selected

Available

Selected

Available

Selected

Available

Selected

Available

Selected