@desislavsd/vue-select

Examples

by desislavsd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/@desislavsd/vue-select/dist/vue-select.umd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@desislavsd/vue-select/dist/vue-select.css">
<div id="app" v-cloak>

  <h1 class="title has-text-weight-light">@desislavsd/vue-select examples<a href="https://desislavsd.gitbook.io/vue-select/" target="_blank">Docs</a></h1>
  
  <section class="examples">
  
    <div class="box">
      <div class="columns">
        <div class="column is-half">
          <h4 class="subtitle">Basic:</h4>
          <p>Select a value from a list of primitive values</p>
          <v-select v-model="selected.name" :from="browsersNames"></v-select>
        </div>
        <div class="column is-half">
          <pre>{{ selected.name }}</pre>
        </div>
      </div>
    </div>
    
    <div class="box">
      <div class="columns">
        <div class="column is-half">
          <h4 class="subtitle">Select browser:</h4>
          <p>Non primitive options + tagging</p>
          <v-select v-model="selected.browser" as="name::id" :from="browsers" tagging></v-select>
        </div>
        <div class="column is-half">
          <pre>{{selected.browser}}</pre>
        </div>
      </div>
    </div>
    
    
    <div class="box">
      <div class="columns">
        <div class="column is-half">
          <h4 class="subtitle">Select <strong>multiple</strong> browsers:</h4>
          <p>Select multiple, <code>id</code> only + tagging via <strong>Enter</strong>, <strong>Tab</strong>, <strong>Space</strong> and <strong>Comma</strong></p>
          <v-select v-model="selected.browsers" as="name:id:id" :from="browsers" tagging :tag-keys="[9,32,188]"></v-select>
...

CSS

:root {
  padding: 20px;
  background: #f0f0f0;
}

body {
  background: none;
  padding-bottom: 300px;
}

[v-cloak] {
  display: none;
}

a {
  color: #4FC08D;
}

h1:after {
  content: '';
  display: table;
  clear: both;
}

h1 a {
  float: right;
  line-height: inherit;
  padding-left: 20px;
}

.examples { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  grid-gap: 15px;
}

.examples .box {
  margin: 0;
}

.examples p {
  margin: -15px 0 15px;
  font-size: 14px;
  color: #777;
}

pre {
  height: 100%;
}

pre:empty::before {
  content: 'value';
  color: #aaa;
}

.v-select-option {
  display: flex;
  align-items: center;
}

.v-select img{
  margin-right: 5px;
}

JavaScript

new Vue({
	components: {
  	vSelect: VueSelect.vSelect,
  },
	data: {
  	selected: {
    	name: '',
      browser: '',
      browsers: [],
      repos: [],
    },
  	browsers: [
    	{"id":1,"name":"Internet Explorer"},
      {"id":2,"name":"Firefox"},
      {"id":3,"name":"Chrome"},
      {"id":4,"name":"Opera"},
      {"id":5,"name":"Safari"}
    ]
  },
  
  computed: {
  	browsersNames(){
    	return this.browsers.map( e => e.name );
    }
  },

}).$mount('#app')