# stf-vue-select

> A Vue.js project

Latest version **0.1.15** (published 2020-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install stf-vue-select
pnpm add stf-vue-select
yarn add stf-vue-select
bun add stf-vue-select
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.15 |
| Published | 2020-06-09 |
| First published | 2017-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 0 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 61 |
| Author | Andriy Syagrovskiy |
| Maintainers | syagr |
| Keywords | select, vue, custom, flexible, flexible select, vue select, dropdown, vue.js, vuejs, vue2, select2, ui, component |

## Links

- npm: https://www.npmjs.com/package/stf-vue-select
- Repository: https://github.com/stfalcon-studio/stf-vue-select
- Homepage: https://github.com/stfalcon-studio/stf-vue-select#readme
- Issues: https://github.com/stfalcon-studio/stf-vue-select/issues
- npm.io page: https://npm.io/package/stf-vue-select

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.1.15 (latest) — 2020-06-09
- 0.1.14 — 2020-06-09
- 0.1.13 — 2020-06-09
- 0.1.12 — 2019-01-24
- 0.1.11 — 2018-03-12
- 0.1.10 — 2018-03-06
- 0.1.9 — 2017-11-06
- 0.1.8 — 2017-10-20
- 0.1.7 — 2017-10-04
- 0.1.6 — 2017-07-17
- 0.1.4 — 2017-07-11
- 0.1.3 — 2017-07-11
- 0.1.2 — 2017-07-09
- 0.1.1 — 2017-07-07
- 0.1.0 — 2017-06-29
- … 8 more at https://npm.io/package/stf-vue-select/versions

## README

# stf vue select VUE2

[![Join the chat at https://gitter.im/stfalcon-studio/stf-vue-select](https://badges.gitter.im/stfalcon-studio/stf-vue-select.svg)](https://gitter.im/stfalcon-studio/stf-vue-select?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

> stf vue select - most flexible and customized select

For detailed explanation on how things work, checkout the [DEMO](https://stfalcon-studio.github.io/stf-vue-select/dist/)

## install

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


```
## import 
``` js

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

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

Vue.use(StfSelectPlugin) 

```

## usage

``` html
    <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
```js
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](https://stfalcon-studio.github.io/stf-vue-select/dist/)

---
_Source: https://npm.io/package/stf-vue-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._