選択データを左右のコンポーネントに分ける「vue-select-sides」

by kabanoki

HTML

<div id="app">
  <vue-select-sides
    type="mirror"
    v-model="selected"
    :list="list"
    :order-by="'asc'"
    :placeholder-search-left="'選択'"
    :placeholder-search-right="'選択済み'"
    :sort-selected-up="true"
    :search="true"
    :total="true"
    :toggle-all="true"
  ></vue-select-sides>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vueSelectSides.umd.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

    .vss,
.vss ul,
.vss ul li {
  list-style-type: none;
  margin: 0px;
}

.vss ul ul {
  padding: 0px;
}

.vss,
.vss *,
.vss *::before,
.vss *::after {
  box-sizing: border-box;
}

.vss {
  display: flex;
  align-items: stretch;
  align-content: stretch;
  justify-content: space-between;
}
.vss a {
  text-decoration: none;
}
.vss .vss-span,
.vss .vss-list-ul li {
  user-select: none;
}
.vss .vss-span {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vss .vss-list {
  width: 100%;
}
.vss .vss-list .vss-inner-list {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.vss .vss-list .vss-inner-list .vss-list-search {
  width: 100%;
}
.vss .vss-list .vss-inner-list .vss-list-ul {
  overflow-y: auto;
}
.vss .vss-list .vss-inner-list .vss-list-ul li {
  line-height: 1.5;
}
.vss .vss-list .vss-inner-list .vss-list-ul li .vss-list-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vss * {
  font-size: 0.9rem;
}
.vss .vss-span {
  font-size: 1.3rem;
  color: #e1e1e1;
}
.vss .vss-list .vss-inner-list {
  box-shadow: 0px 0px 10px #e1e1e1;
  border-radius: 0.25rem;
}
.vss .vss-list .vss-inner-list .vss-list-search {
  border: none;
  padding: 12px 14px;
  border-bottom: 2px solid #f3f3f3;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  outline: none;
}
.vss .vss-list .vss-inner-list .vss-list-search:focus {
  border-color: #e1e1e1;
}
.vss .vss-list .vss-inner-list .vss-list-ul {
  padding: 8px 10px 10px 10px;
}
.vss .vss-list .vss-inner-list .vss-list-ul li span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.25rem;
  color: #222;
  padding: 5px 12px;
  margin-top: 2px;
}
.vss .vss-list .vss-inner-list .vss-list-ul li span .vss-list-badge {
  font-size: 0.5rem;
 ...

Vue

const vueSelectSides = window['vueSelectSides'].default;
Vue.use(vueSelectSides, {
  locale: null
});
new Vue({
  el: '#app',
  components: {
    'vue-select-sides':vueSelectSides
  },
  data:{
    selected: [],
    list: [
      {
        value: "afghanistan",
        label: "Afghanistan"
      },
      {
        value: "brazil",
        label: "Brazil"
      },
      {
        value: "fiji",
        label: "Fiji"
      },
      {
        value: "ghana",
        label: "Ghana"
      },
    ]
  }
});