@goldenm/vuetify-dual-list v3.0.0

Vuetify Dual-List

Online Demo

For online demo, please go to this link

Installation

npm install --save @goldenm/vuetify-dual-list

or

yarn add @goldenm/vuetify-dual-list

Example usage

<template>
  <vuetify-dual-list
    v-model="selected"
    :items="items"
    item-text="text"
    item-value="value"
    mobile-breakpoint="960"
    :messages="messages"
    :icons="icons"
  />
</template>

<script>
export default {
  data () {
    return {
      items: [{ text: 'Item 1', value: 1 }, { text: 'Item 2', value: 2 }, { text: 'Item 3', value: 3 }],

      selected: [],

      messages: {
        listOptions: 'Options',
        listSelected: 'Selected',
        forwardAll: 'Toggle all to selected',
        forward: 'Toggle to selected',
        backwardAll: 'Toggle all to options',
        backward: 'Toggle to options',
        find: 'Find'
      },

      icons: {
        mobile: {
          forwardAll: 'mdi-chevron-double-down',
          forward: 'mdi-chevron-down',
          backwardAll: 'mdi-chevron-double-up',
          backward: 'mdi-chevron-up'
        },
        desktop: {
          forwardAll: 'mdi-chevron-double-right',
          forward: 'mdi-chevron-right',
          backwardAll: 'mdi-chevron-double-left',
          backward: 'mdi-chevron-left'
        }
      },
    }
  }
}
</script>

Props

Slots

Default messages and icons

For icons, we use Material Design Icons

{
  mobile: {
    forwardAll: 'mdi-chevron-double-down', // Move all items to selected
    forward: 'mdi-chevron-down', // Move selected items to selected
    backwardAll: 'mdi-chevron-double-up', // Move all items to options
    backward: 'mdi-chevron-up' // Move selected items to options
  },
  desktop: {
    forwardAll: 'mdi-chevron-double-right', // Move all items to selected
    forward: 'mdi-chevron-right', // Move selected items to selected
    backwardAll: 'mdi-chevron-double-left', // Move all items to options
    backward: 'mdi-chevron-left' // Move selected items to options
  }
}

Default messages

{
  listOptions: 'Options', // First list name
  listSelected: 'Selected', // Second list name
  forwardAll: 'Toggle all to selected', // Tooltip message for move all items to selected
  forward: 'Toggle to selected', // Tooltip message for move selected items to selected
  backwardAll: 'Toggle all to options', // Tooltip message to move all items to options
  backward: 'Toggle to options', // Tooltip message to move selected items to options
  find: 'Find'
}

Work with us!

Feel free to send us an email to sales@goldenmcorp.com

License

MIT

Contributing

Merge requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.