soft4ti / vue-select-sides

A component for Vue.js to select double-sided data.

Vue Select Sides

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.

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:

name	type	example	notes
v-model	Array or Object	["xyz"] or {xyz: ["abc", "def"]}	Use Object if type is grouped else uses Array
type	String	grouped or mirror
list	Array	[{ value: "xyz", label: "Label xyz 01", disabled: true/false }]	You can add the children key to type grouped
search	Boolean	true or false	To show/hide search input. Default is visible (true)
total	Boolean	true or false	To show/hide total selected in footer. Default is visible (true)
toggle-all	Boolean	true or false	To show/hide toggle in footer. Default is visible (true)
sort-selected-up	Boolean	true or false	Show first the pre-selected. Default does not visible (false). Available only grouped type
order-by	String	asc or desc	Show first the pre-selected. Default is natural order
lang (deprecated in v1.1)	String	en_US, pt_BR, es_ES or fr_FR	Language default. Default is en_US Use Use global locale
placeholder-search-left	String	"Yay! Search items..."	Placeholder on the left search field. Default is ""
placeholder-search-right	String	"Or search children items..."	Placeholder on the right search field. Default is ""

Bugs and feature requests

If your problem or idea is not addressed yet, please open a new issue.

Sponsor / Creator

Contribution / Development

Install dependencies

yarn install

Devserver

yarn run serve

Bundling

yarn run build

Donate

You can help with a donation on Paypal

License

Vue select sides is open-sourced software licensed under the the MIT license.

vue-select-sides's Issues

Please avail compiled css files

Hi

Thanks for your components, can you please also avail css files?

Thanks

Change default list key name

It is possible to change default keys in source array

value: "sul",
label: "Sul",

For Example:

key: "sul",
name: "Sul",

SASS variables problems with bootstrap.

Bootstrap v3 also uses varaible: $font-size-base in px

so when included css from this compoennt throws an error
Incompatible units rem and px. font-size: $font-size-base + 0.4rem;

Maybe is a good idea to prefix variables.

vue-i18n Conflict

I have got this error when I use this in my project which has vue-i18n already installed.

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read properties of undefined (reading '_t') at VueComponent.Vue.$t (vueSelectSides.umd.js?ab22:584) at VueComponent.t (utils.js?3f05:12) at Proxy.render (VerticalNavMenuLink.vue?a770:29) at eval (vue-composition-api.mjs?ed09:1645) at activateCurrentInstance (vue-composition-api.mjs?ed09:1601) at Proxy.$options.render (vue-composition-api.mjs?ed09:1645) at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548) at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066) at Watcher.get (vue.runtime.esm.js?2b0e:4479) at new Watcher (vue.runtime.esm.js?2b0e:4468)

Mirror not working above version 1.0.6

https://codepen.io/hakanersu/pen/KKdjjzX

Hi

I tried different versions and it seems mirror option not working above version 1.0.6 or i'm doing something wrong.

Thank you for great component.

Broken link in Readme (Live demo)

The "Live demo" on the project README leads to https://juliorosseti.github.io/vue-select-sides/demo.html?v=20201113113940 which gives 404 (There isn't a GitHub Pages site here.)

Global usage is not working /Lazyload

When Component registred globally:

import Vue from 'vue'
import vueSelectSides from "vue-select-sides";
Vue.use(vueSelectSides, {
	locale: "en_US"
});

Throws an error:
<vue-select-sides> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

So you need always to Import Vue and in all child components.

Also Lazyload is not working:

components: {
        vueSelectSides: () => import("vue-select-sides")
},

Error:
"TypeError: Cannot read property 'orderBy' of undefined"

Use any locale available in any app

Issue by @nioperas06

#4 (comment)

Build files outdated on latest release

Hi @juliorosseti!

It seems that the build of the last release was not done.

I was trying to load the component from CDNs (like jsDelivr or UNPKG) and verified that they are still delivering the old version of the files.

Refresh list

The list is updated but not reflected in the component