stf vue select VUE2

stf vue select - most flexible and customized select

For detailed explanation on how things work, checkout the DEMO

install

# install 
npm install stf-vue-select --save

import

import {StfSelect, StfSelectOption} from "stf-vue-select";
import "stf-vue-select/dist/lib/stf-vue-select.min.css";

...

Vue.component('stf-select-option', StfSelectOption);
Vue.component('stf-select', StfSelect);

Using without webpack minified files

<script src="./dist/lib/stf-vue-select.min.js"></script>

Vue.use(StfSelectPlugin) 

usage

    <template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>stf-vue-select - the most flexible vue select</h1>
    <br>
    <label>Select without input</label>
    <stf-select v-model="value" style="width: 300px; margin: 0 auto">
      <div slot="label">Input address</div>
      <div slot="value">
        <div v-if="value">
           <span>{{value.address}} (<small>{{value.text}}</small>)</span>
        </div>
      </div>
      <section class="options delivery_order__options">
          <stf-select-option  
           v-for="item of list" :key="item.id"
           :value="item"
           :class="{'stf-select-option_selected': item.id === (value && value.id)}" 
           >
              <span>{{item.text}} (<small>{{item.address}}</small>)</span>
          </stf-select-option>
      </section>
    </stf-select>

    <br>
    <label>Select with input</label>
    <stf-select v-model="value" style="width: 300px; margin: 0 auto">
      <div slot="label">Input address</div>
      <div slot="value">
        <div v-if="value">
           <span>{{value.address}} (<small>{{value.text}}</small>)</span>
        </div>
      </div>
      <div slot="search-input">
          <input @input="onsearch">
      </div>
      <section class="options delivery_order__options">
          <stf-select-option  
           v-for="item of listFinded" :key="item.id"
           :value="item"
           :class="{'stf-select-option_selected': item.id === (value && value.id)}" 
           >
              <span>{{item.text}} (<small>{{item.address}}</small>)</span>
          </stf-select-option>
      </section>
    </stf-select>
  </div>
</template>

<script>
import {StfSelect, StfSelectOption} from './components/stf-select'

export default {
  name: 'app',
  components: {
    StfSelect, 
    StfSelectOption
  },
  created() {
    this.listFinded = this.list;
  },
  data () {
    return {
      value: null,
      list: [
        {
          text: "text1",
          address: "address1",
          id: 1
        },
        {
          text: "text2",
          address: "address2",
          id: 2
        },
        {
          text: "text3",
          address: "address3",
          id: 3
        },
      ],
      listFinded: [
      ]
    }
  },
  methods: {
    onsearch(e) {
      if (e.target.value) {
        this.listFinded = this.list.filter(el => el.text.indexOf(e.target.value) !== -1 || el.address.indexOf(e.target.value) !== -1);
      } else {
        this.listFinded = this.list;
      }
    }
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

options

props: {
    value: [Object, Number, String, Array, Boolean],
    more: Boolean,
    pending: Boolean,
    optionsWrapClass: String,
    needFocusInpOnTab: {
        type: Boolean,
        default: false
    },
},

• needFocusInpOnTab - This property changes behaviour of select when focus comes to it on TAB key pressing. If we have true value then focus will be on input else focus will be on select and for focusing input we should press ENTER key.
• optionsWrapClass - is class which will be added to options' container. We need it cause options are not rendered in the select's element but out and styling by parent class is not accessible. Why are options out of the parent element? - Cause we have a situation when some element can have style overflow hidden and in this case, if options are in such container it will be hidden. That is why we just add options to the bottom of the body and set a position of this element near to the select's container.
• more - property activates a function which watches the scroll and asks more components from parent component by this.$emit('loadMore', {}); event
• pending - just says don`t ask me more I process your request

For detailed explanation on how things work, checkout the DEMO