# @lassehaslev/vue-item-picker

> Item picker logic for Vue.js v2

Latest version **0.1.4** (published 2017-02-17) · 0 weekly downloads

## Install

```sh
npm install @lassehaslev/vue-item-picker
pnpm add @lassehaslev/vue-item-picker
yarn add @lassehaslev/vue-item-picker
bun add @lassehaslev/vue-item-picker
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2017-02-17 |
| First published | 2016-12-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Lasse S. Haslev |
| Maintainers | lassehaslev |

## Links

- npm: https://www.npmjs.com/package/@lassehaslev/vue-item-picker
- Repository: https://github.com/lassehaslev/vue-item-picker
- Homepage: https://github.com/lassehaslev/vue-item-picker#readme
- Issues: https://github.com/lassehaslev/vue-item-picker/issues
- npm.io page: https://npm.io/package/@lassehaslev/vue-item-picker

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.1.0
- [@lassehaslev/vue-crud](https://npm.io/package/@lassehaslev/vue-crud.md) ^0.3
- [@lassehaslev/vue-modal](https://npm.io/package/@lassehaslev/vue-modal.md) ^3.0.0

## Recent versions

- 0.1.4 (latest) — 2017-02-17
- 0.1.3 — 2017-01-02
- 0.1.2 — 2017-01-02
- 0.1.1 — 2017-01-02
- 0.1.0 — 2017-01-02
- 0.0.3 — 2016-12-21
- 0.0.2 — 2016-12-20
- 0.0.1 — 2016-12-20

## README

# @lassehaslev/vue-item-picker

> Item picker for Vue.js v2

## Installation
Run ```npm install @lassehaslev/vue-item-picker --save``` in your project folder

## Usage
This package is divided into two main modules. ```BaseItemPicker``` and ```BaseItemPickerItem```

#### Base item picker
```js
import { BaseItemPicker } from '@lassehaslev/vue-item-picker';
import ImagePickerItem from './ImagePickerItem';
export default {
    template: `
        <div class="modal"
             :class="{ 'is-active': isShowingModal }">
            <div class="modal-background" @click="close"></div>
            <div class="modal-content">
                <div class="box">
                    <slot>
                        <h4 class="title">Please select an image</h4>
                    </slot>
                    <div class="columns is-mobile is-multiline">
                        <image-picker-item v-for="item in pickerItems" :selected="selectedItems" @confirm="confirm" @select="onItemSelect" :picker-item="item" :itemAdaptor="itemAdaptor"></image-picker-item>
                    </div>
                    <button class="button is-primary" @click="confirm">Confirm</button>
                    <button class="button is-default" @click="cancel">Cancel</button>
                </div>
            </div>
            <button class="modal-close" @click="close"></button>
        </div>
    `,

    mixins: [ BaseItemPicker ],

    components: {
        ImagePickerItem,
    }
}
```

#### Base item picker item
```js
import { BaseItemPickerItem } from '@lassehaslev/vue-item-picker';
export default {
    template: `
        <div class="column is-3">
            <div v-if="item.url"
                style="padding-bottom: 100%"
                @dblclick.prevent="confirm"
                @click="select"
                :style="{
                    'background-image': 'url(' + item.url + ')',
                    'background-size':'contain',
                    'background-position':'center',
                    'background-repeat': 'no-repeat',
                    'background-color': '#ccc',
                    'cursor':'pointer',
                    'outline': isSelected ? '5px solid #0762D9' : '',
            }">
            </div>
        </div>
    `,
    mixins: [ BaseItemPickerItem ],
}
```


## Development

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

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