stf-vue-select

    0.1.15 • Public • Published

    stf vue select VUE2

    Join the chat at https://gitter.im/stfalcon-studio/stf-vue-select

    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'HelveticaArialsans-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

    Install

    npm i stf-vue-select

    DownloadsWeekly Downloads

    89

    Version

    0.1.15

    License

    MIT

    Unpacked Size

    1.56 MB

    Total Files

    67

    Last publish

    Collaborators

    • syagr