Awesome

A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values can be displayed grouped or ungrouped.

From version v2.0.0 it is only compatible with Vue 3

Live DEMO

Installation

First install it using:

npm install --save vue-select-sides

or

yarn add vue-select-sides

Then you can either use it as a component:

import vueSelectSides from "vue-select-sides";

export default {
  components: {
    vueSelectSides,
  },
};

Global component:

import vueSelectSides from "vue-select-sides";
Vue.use(VueSelectSides);
Vue.component("vue-select-sides", VueSelectSides);

Or if you wish to include it in a script tag, just include the vueSelectSides.umd.min.js file located in the dist folder as so:

<script src="dist/vueSelectSides.umd.min.js"></script>

Usage

The component has support for two types: mirror and grouped.

Import a theme

// modern
@import "/node_modules/vue-select-sides/styles/themes/soft.scss";
// or dark
@import "/node_modules/vue-select-sides/styles/themes/dark.scss";
// or light
@import "/node_modules/vue-select-sides/styles/themes/light.scss";

Grouped

Warning: v-model must be of type Object

<vue-select-sides
  type="grouped"
  v-model="selected"
  :list="list"
></vue-select-sides>

import vueSelectSides from "vue-select-sides";

export default {
  components: {
    vueSelectSides
  },
  data() {
    return {
      selected: {},
      list: [
        {
          value: "sul",
          label: "Sul",
          disabled: false,
          children: [
            {
              value: "santa-catarina",
              label: "Santa Catarina",
              disabled: false
            },
            {
              ...
            }
          ]
        },
        {
          value: "sudeste",
          label: "Sudeste",
          disabled: false,
          children: [
            {
              value: "minas-gerais",
              label: "Minas Gerais",
              disabled: false
            },
            {
              ...
            }
          ]
        }
      ]
    };
  }
};

Mirror

Warning: v-model must be of type Array

<vue-select-sides
  type="mirror"
  v-model="selected"
  :list="list"
></vue-select-sides>

import vueSelectSides from "vue-select-sides";

export default {
  components: {
    vueSelectSides
  },
  data() {
    return {
      selected: [],
      list: [
        {
          value: "afghanistan",
          label: "Afghanistan",
          disabled: true
        },
        {
          value: "brazil",
          label: "Brazil"
        },
        {
          value: "fiji",
          label: "Fiji",
          disabled: true
        },
        {
          value: "ghana",
          label: "Ghana"
        },
        {
          ...
        }
    ];
  }
};

Language/locales

List of locales available for the plugin:

• en_US - [English] - Default
• pt_BR - [Portuguese] - Contributed by @juliorosseti
• es_ES - [Spanish] - Contributed by @etrepat
• fr_FR - [French] - Contributed by @MajuTo
• tr_TR - [Turkey] - Contributed by @Abdulsametileri
• pl_PL - [Polish] - Contributed by @jzapal

Use global locale

import vueSelectSides from "vue-select-sides";

Vue.use(vueSelectSides, {
  locale: "pt_BR",
});

Vue.component("vue-select-sides", vueSelectSides);

Props

These are all the props you can pass to the component:

Bugs and feature requests

If your problem or idea is not <a href="https://github.com/juliorosseti/vue-select-sides/issues" target="_blank">addressed</a> yet, <a href="https://github.com/juliorosseti/vue-select-sides/issues/new" target="_blank">please open a new issue</a>.

Sponsor / Creator

Contribution / Development

Install dependencies

yarn install

Devserver

yarn run serve

Bundling

yarn run build

Donate

You can help with a donation on <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=E96JA5BH6XTHE&source=url" target="_blank">Paypal</a>

License

Vue select sides is open-sourced software licensed under the the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a>.