# igg-vue-input-select

> - `Default rander` ![rander](https://i.imgur.com/QLa3ZYa.png)

Latest version **1.0.13** (published 2021-09-15) · 0 weekly downloads

## Install

```sh
npm install igg-vue-input-select
pnpm add igg-vue-input-select
yarn add igg-vue-input-select
bun add igg-vue-input-select
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.13 |
| Published | 2021-09-15 |
| First published | 2021-08-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | igeargeek.com |

## Links

- npm: https://www.npmjs.com/package/igg-vue-input-select
- npm.io page: https://npm.io/package/igg-vue-input-select

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) 2.6.11
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) 4.0.8
- [@syncfusion/ej2-vue-dropdowns](https://npm.io/package/@syncfusion/ej2-vue-dropdowns.md) 19.2.51

## Recent versions

- 1.0.13 (latest) — 2021-09-15
- 1.0.12 — 2021-09-15
- 1.0.11 — 2021-09-15
- 1.0.10 — 2021-09-15
- 1.0.9 — 2021-09-08
- 1.0.8 — 2021-08-25
- 1.0.7 — 2021-08-24
- 1.0.6 — 2021-08-24
- 1.0.5 — 2021-08-24
- 1.0.4 — 2021-08-23
- 1.0.3 — 2021-08-23
- 1.0.2 — 2021-08-23
- 1.0.1 — 2021-08-23
- 1.0.0 — 2021-08-23
- 0.1.0 — 2021-08-20
- … 5 more at https://npm.io/package/igg-vue-input-select/versions

## README

## `demo`

- `Default rander`
![rander](https://i.imgur.com/QLa3ZYa.png)

------------------------------------------------------------------------------------------------------------------
- `Popup open`
![popup](https://i.imgur.com/GHNGZbk.png)

------------------------------------------------------------------------------------------------------------------
- `Default select`
![select](https://i.imgur.com/dfKxN5x.png)

------------------------------------------------------------------------------------------------------------------
- `Default select all`
![select-all](https://i.imgur.com/nHDBbmn.png)

------------------------------------------------------------------------------------------------------------------
- `Default only`
![only](https://i.imgur.com/5KtMWLf.png)

------------------------------------------------------------------------------------------------------------------
#### Config Nuxt version

##### `install`
```
npm i igg-vue-input-select
```
------------------------------------------------------------------------------------------------------------------
##### `nuxt.config.js file`
```js
import path from 'path'
export default {
  ...
  alias: {
    vue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
  },
  ...
}
```
------------------------------------------------------------------------------------------------------------------
##### `plugins file`
```js
import Vue from 'vue'
import IggVueInputSelect from 'igg-vue-input-select'
Vue.use(IggVueInputSelect)
```
------------------------------------------------------------------------------------------------------------------
#### `css file`
```scss
// assets/main.scss import to nuxt.config.js
import '~/node_modules/@syncfusion/ej2-base/styles/material.css'
import '~/node_modules/@syncfusion/ej2-inputs/styles/material.css'
import '~/node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css'
import '~/node_modules/@syncfusion/ej2-buttons/styles/material.css'
import '~/node_modules/igg-vue-input-select/dist/igg-vue-input-select.css'
```
##### `How to use`
```html
<template>
  <igg-vue-input-select
    v-model="value"
    input-box
    :options="options"
    :style="style"
    only-text="only"
    placeholder="select text"
    select-all-text="select all"
    filter-bar-placeholder="search text"
    more-text="more"
  />
</template>

<script>
export default {
  data () {
    return {
      select: null,
      style: {
        '--color': 'rgb(192, 108, 255)',
        '--font-family': '"Kanit", sans-serif'
      },
      options: [
        { text: 'Cabbage', value: 'item1' },
        { text: 'Spinach', value: 'item2' },
        { text: 'Wheat grass', value: 'item3' },
        { text: 'Yarrow', value: 'item4' },
        { text: 'Pumpkins', value: 'item5' },
        { text: 'Chickpea', value: 'item6' },
        { text: 'Green bean', value: 'item7' },
        { text: 'Horse gram', value: 'item8' },
        { text: 'Garlic', value: 'item9' },
        { text: 'Nopal', value: 'item10' },
        { text: 'Onion', value: 'item11' }
      ]
    }
  }
}
</script>
```
------------------------------------------------------------------------------------------------------------------
##### `props`
| Prop                  | Type                       | Default                          | Description             |
| ----------------------| ---------------------------| ---------------------------------|-------------------------|
| v-model               | `string number`            | null                             | value return [`value`]  |
| input-box             | `boolen`                   | false                            | use box style           |
| options               | `array:{text,value,append}`| []                               | items select            |
| style                 | `object {varkey:value}`    | null                             | pass variable css       |
| only-text             | `string`                   | `only`                           | text select only        |
| select-all-text       | `string`                   | `Select all`                     | text select all         |
| filter-bar-placeholder| `string`                   | `Search texts`                   | text search options     |
| more-text             | `string`                   | `more`                           | text more when truncate |
| placeholder           | `string`                   | `Select text`                    | text placeholder input  |
| select-all-value-text | `string`                   | `Select all`                     | text select all options |
| id                    | `string`                   | `el-1`                           | element id              |

`example options`
```js
options: [
  { text: 'Cabbage', value: 'item1', append: 10 },
  { text: 'Spinach', value: 'item2', append: 9 },
  { text: 'Wheat grass', value: 'item3' },
  { text: 'Yarrow', value: 'item4' },
  { text: 'Pumpkins', value: 'item5' },
  { text: 'Chickpea', value: 'item6' },
  { text: 'Green bean', value: 'item7' },
  { text: 'Horse gram', value: 'item8' },
  { text: 'Garlic', value: 'item9' },
  { text: 'Nopal', value: 'item10' },
  { text: 'Onion', value: 'item11' }
]
```

`example style`
```json
{
  "--color": "rgb(192, 108, 255)",
  "--font-family": "'Kanit', sans-serif"
}
```

`example v-model`
```json
["item1", "item2", ...]
```

`example trick resize popup`
```js
...
<igg-vue-input-select
  ref="input-select"
  id="el-1"
  input-box
  v-model="select"
  :style="style"
  :options="options"
/>
...
// trick resize component after mount
this.$refs['input-select'].setResizePopup()
```

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