yukihirop/vue-tag-editor

# vue-tag-editor-set

[![npm version](https://badge.fury.io/js/vue-tag-editor-set.svg)](https://badge.fury.io/js/vue-tag-editor-set)
[![Build Status](https://travis-ci.org/yukihirop/vue-tag-editor.svg?branch=master)](https://travis-ci.org/yukihirop/vue-tag-editor)
[![Coverage Status](https://coveralls.io/repos/github/yukihirop/vue-tag-editor/badge.svg?branch=before_release)](https://coveralls.io/github/yukihirop/vue-tag-editor?branch=before_release)
[![Maintainability](https://api.codeclimate.com/v1/badges/69b323668f245135f9d2/maintainability)](https://codeclimate.com/github/yukihirop/vue-tag-editor/maintainability)
[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)

[![NPM](https://nodei.co/npm/vue-tag-editor-set.png)](https://nodei.co/npm/vue-tag-editor-set/)


A Vue.js component for creating tag editor.<br>
Easy to use by providing simple api. And you can customize the style of this component by css.

<img src="https://raw.githubusercontent.com/yukihirop/vue-tag-editor/master/img/vue-tag-editor-set.png" />

## Installation

Install the npm package.

```bash
$ npm install vue-tag-editor-set --save
```

Register the component.

```
import { VueTagEditor, VueTagEditorBulma } from 'vue-tag-editor'  #if you want to use bulma design component, include VueTagEditorBulma

Vue.component('tag-editor', VueTagEditor)
Vue.component('tag-editor-bulma', VueTagEditorBulma)
```

## Demo

You can see the demo for quickly understand how to use this package.

```bash
$ git clone git@github.com:yukihirop/vue-tag-editor.git
$ cd vue-tag-editor
$ npm install
$ npm run demo
```

Check the code from `./demo/index.html` and `./demo/App.vue`.

## Support Component

- VueTagEditor
- VueTagEditorBulma

## Usage

#### Basic Usage (Case When VueTagEditor)

```html
<!-- when type is label -->
<tag-editor
  :tags="tagLabels"
  :type="'label'"
  @handler-after-input-tag="handlerAfterInputTag"
  @handler-after-delete-tag="handlerAfterDeleteTag"
/>

<!-- when type is link -->
<!-- handler-after-click-tag is effective only when type is 'link' -->
<tag-editor
  :tags="tagLinks"
  :type="'link'"
  @handler-after-click-tag="handlerAfterClickTag"
  @handler-after-input-tag="handlerAfterInputTag"
  @handler-after-delete-tag="handlerAfterDeleteTag"
/>
```

#### Example

```html
<template>
  <tag-editor
    :tags="tags"
    :type="'link'"
    @handler-after-click-tag="handlerAfterClickTag"
    @handler-after-input-tag="handlerAfterInputTag"
    @handler-after-delete-tag="handlerAfterDeleteTag"
  />
</template>

<script>
export default {
  data(){
    return {
      tags: ['javascript', 'ruby']
    }
  },
  methods: {
    // Only one argument
    handlerAfterClickTag(tag){
      alert(tag + ' is click!')
    },
    // Only two argument
    handlerAfterInputTag(tag, isAddTag){
      if (isAddTag === true) {
        console.log(tag + ' is added!')
      } else {
        console.log(tag + ' isn\'t added')
      }
    },
    // Only one argument
    handlerAfterDeleteTag(tag){
      console.log(tag + ' is deleted!')
    }
  }
}
</script>
```

## Props

There is no `required` props. all `optional`.

|Name|Type|Description|Remarks|
|----|----|-----------|-------|
|`tags`|`Array`|tags to display. default is `[]`.|
|`type`|`String`|type of tag. default is `label`.|`label` or `link`.|
|`tag-area-class`|`String`|CSS class name for tag `span`.|`Only VueTagEditor`|
|`tag-content-class`|`String`|CSS class name for tag `label` (when type is label) or `a` (when type is link).|`Only VueTagEditor`|
|`delete-area-class`|`String`|CSS class name for tag delete `button`.|`Only VueTagEditor`|
|`delete-content-class`|`String`|CSS class name for tag delete button `text`.|`Only VueTagEditor`|
|`input-content-class`|`String`|CSS class name for tag `input`.|
|`tag-custom-class`|`String`|CSS class name for tag `span`.When you want to overwrite css of `VueTagEditorBulma` and so on.|
|`placeholder`|`String`|Input placeholer message. default is `Add tags...`.|
|@handler-after-click-tag|`Function`|The method to call when tag clicked. Use clicked `tagname` as parameter.|`Only effective when type is link`|
|@handler-after-input-tag|`Function`|The method to call when tag inputed. Use inputed `tagname` and `success or failure` as parameter.|
|@handler-after-delete-tag|`Function`|The method to call when tag deleted. Use deleted `tagname` as parameter.|

## Note

- Please use `/deep/` when CSS is not reflected properly.
- For the place where `tagAreaClass`, `tagContentClass`, `deleteAreaClass`, `deleteContentClass`, `inputContentClass`, `tagCustomClass` is set,
look at:

    - [tag-editor_type-label.html](https://github.com/yukihirop/vue-tag-editor/blob/master/docs/tag-editor_type-label.html)
    - [tag-editor_type-link.html](https://github.com/yukihirop/vue-tag-editor/blob/master/docs/tag-editor_type-link.html)