https://github.com/tomquinonero/vue-tag-selector

A simple tag selector as a vue component.
https://github.com/tomquinonero/vue-tag-selector

Last synced: about 2 months ago
JSON representation

A simple tag selector as a vue component.

• Host: GitHub
• URL: https://github.com/tomquinonero/vue-tag-selector
• Owner: tomquinonero
• License: mit
• Created: 2017-12-28T23:04:31.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-14T01:09:57.000Z (over 1 year ago)
• Last Synced: 2024-01-23T19:15:04.846Z (4 months ago)
• Language: TypeScript
• Homepage: http://tomquinonero.com/vue-tag-selector/
• Size: 5.05 MB
• Stars: 13
• Watchers: 3
• Forks: 1
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Lists

• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (Components & Libraries / UI Components)
• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (Components & Libraries / UI Components)
• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (Components & Libraries / UI Components)
• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (Components & Libraries / UI Components)
• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (Components & Libraries / UI Components)
• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (Components & Libraries / UI Components)
• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (Components & Libraries / UI Components)
• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (Components & Libraries / UI Components)
• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (Components & Libraries / UI Components)
• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (UI Components / Form)
• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (UI Components / Form)
• awesome-vue - vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation! (Components & Libraries / UI Components)
• awesome-vue - vue-tag-selector ★4 - Tag-like input. Light, customizable and handles REGEX validation! (UI Components / Form)

README

        


  



















  Vue-tag-selector is a component for vuejs for tag type fields. 


  Light (6.3kb gzipped) and customizable.

  Offering regex validation.

  

  

  


  


  Check out the demo



### Installation

```

# with npm

npm install --save vue-tag-selector

# with yarn

yarn add vue-tag-selector

```

### Usage

For using the component you just need to import the component and register it: 

``` js

import TagSelector from 'vue-tag-selector'

export default {

  components: { TagSelector },

  data(){

    return {

      tags: []

    }

  }

}

```

And then use it in your template:

``` html

  


    

  


```

### API Documentation

Here's a list of the props available: 

 - `label`: Displays a label, has to be String can be ignored

 - `name`: _Required_. usually the field name.

 - `classes`: Allows you to add classes to the field. String or Array.

 - `regex`: A RegExp. Validates every tag and disallow adding if not matching. By default it's alphanumerical only (`/^[a-zA-Z0-9]*$/`)

 - `regexError`: The error displayed when the Regex doesn't match 

## Style

The component philosophy is pretty straightforward here: only the mandatory style is bundled.

I personally never liked js library that needs too much CSS. 

Only 26 lines of CSS here 😉.

But you can easily stylize the component.

Have an example template:

``` html



  Post tags

  


      


        Dogs delete_icon

      

      


        Cats delete_icon

      

      


        Horses delete_icon

      

    

  

  
The tag you entered is at the wrong format. Please only use alphanumerical characters.



```


One rule tho, `.tag-selector--input` _has_ to be `display: flex;`.

You can see different themes applied in the [demo][link-demo]

## Related

[on Bundlephobia][link-bundlephobia] - [on npm][link-npm]

Created by [Tom Quinonero][link-author]

[link-author]: https://tomquinonero.com

[link-bundlephobia]: https://bundlephobia.com/result?p=vue-tag-selector

[link-npm]: https://www.npmjs.com/package/vue-tag-selector

[link-demo]: http://tomquinonero.com/vue-tag-selector/