https://github.com/prabhuignoto/smart-tagz
🏷Smart input tags for Vue
https://github.com/prabhuignoto/smart-tagz
input-tags tags tagsinput typescript vue-components vue-input-tags vue-tags vue3 vuejs
Last synced: 2 months ago
JSON representation
🏷Smart input tags for Vue
- Host: GitHub
- URL: https://github.com/prabhuignoto/smart-tagz
- Owner: prabhuignoto
- License: mit
- Created: 2020-08-06T10:05:17.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-14T05:31:46.000Z (about 2 years ago)
- Last Synced: 2024-10-13T04:32:18.946Z (8 months ago)
- Topics: input-tags, tags, tagsinput, typescript, vue-components, vue-input-tags, vue-tags, vue3, vuejs
- Language: Vue
- Homepage: https://smart-tagz.vercel.app/
- Size: 3.84 MB
- Stars: 57
- Watchers: 4
- Forks: 15
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://dev.azure.com/prabhummurthy/smart-tagz/_build/latest?definitionId=4&branchName=master)
[](https://www.codacy.com/manual/prabhuignoto/smart-tagz?utm_source=github.com&utm_medium=referral&utm_content=prabhuignoto/smart-tagz&utm_campaign=Badge_Grade)
[](https://deepscan.io/dashboard#view=project&tid=10074&pid=13324&bid=220204)
[](https://lgtm.com/projects/g/prabhuignoto/smart-tagz/context:javascript)
[](https://depfu.com/github/prabhuignoto/smart-tagz?project_id=18158)
[](https://codesandbox.io/s/smart-tagz-pd32g?fontsize=14&hidenavigation=1&theme=dark)
✨ Features
- ⚡ [Autosuggest](#auto-suggest) with support for keyboard selection.
- ✏️ [Edit](#editable-tags) the tags inline by double clicking them.
- 🏷️ [Paste](#paste) strings with delimiters of your choice and the component will create the tags for you.
- 🗑️ Quickly delete the tags with a visual confirmation before removing a tag.
- 🧹 Quickly clear all tags with `quick-delete` mode.
- 🔒 [Lock the component](#readonly-tags) using the `readonly` mode.
- ✋ [Restrict](#max-tags) the number of tags and Handle duplicates gracefully.
- 🌈 [Customize](#theme) the colors.
### Table of Contents
- [⚡ Installation](#-installation)
- [🚀 Getting Started](#-getting-started)
- [🍬 Demos](#-demos)
- [Props](#props)
- [Default Tags](#default-tags)
- [Duplicates](#duplicates)
- [Auto Suggest](#auto-suggest)
- [Max Tags](#max-tags)
- [Paste](#paste)
- [Editable Tags](#editable-tags)
- [Readonly Tags](#readonly-tags)
- [Theme](#theme)
- [Custom Class names](#custom-class-names)
- [📦 Build Setup](#-build-setup)
- [🔨 Contributing](#-contributing)
- [Notes](#notes)
- [Meta](#meta)
## ⚡ Installation
```jsx
yarn install smart-tagz
```
## 🚀 Getting Started
smart-tagz has some great defaults to get you started quickly. Please check the props list for all options.
```jsx
import { SmartTagz } from "smart-tagz";
import "smart-tagz/dist/smart-tagz.css";
import { defineComponent } from "vue";
export default defineComponent({
name: "Basic",
components: {
SmartTagz,
}
});
```
## 🍬 Demos
Head to our demo page for examples showcasing all the features.
[https://smart-tagz.vercel.app/](https://smart-tagz.vercel.app/)
## Props
| Prop | Type | Description | Default |
| ---------------- | --------------------- | ------------------------------------------------------------------------------------------------ | ---------------- |
| defaultTags | Array | initialize with a `default` set of tags | [] |
| width | String | `width` of the container | 100% |
| autosuggest | Boolean | Enables the `autosuggest` feature. you also need to set the sources for the autosuggest to work. | false |
| sources | Array | Works as the `datasource` for the autosuggest feature | [] |
| allowPaste | { delimiter: String } | Parses the pasted string based on the passed delimiter and creates tags automatically | {delimiter: ","} |
| editable | Boolean | makes the tags `editable` | false |
| allowDuplicates | Boolean | allows/disallows `duplicate` tag entries while pasted or entered manually. | true |
| maxTags | Number | sets the `Maximum` number of tags | 10 |
| inputPlaceholder | String | `Placeholder` for the input box. | "Enter tag..." |
| readOnly | Boolean | Makes the whole component `readOnly`. ideal for display only purposes. | false |
| quick-delete | Boolean | When enabled all the tags can be cleared by CTRL + A, DEL | false |
| on-changed | Function | `callback` that gets called when a new tag is added or an existing tag is deleted | false |
### Default Tags
We can initialize smart-tagz with some `default` tags. This setting will mostly be used along with the `readonly` prop to create tags for display only purposes.
```jsx
```
### Duplicates
You can decide how to manage `duplicate` tags by either allowing or disallowing them completely. When set to `false` no duplicate values are allowed.
```jsx
```
### Auto Suggest
Whe set to `true`, the `autosuggest` prop suggests values in a dropdown. You also need to set the `sources` prop for this to work. The `sources` prop can be an Array of strings.
```jsx
```
### Max Tags
The component can also be configured to accept the `Maximum` number of tags that can be created. Once the threshold is reached, the input will be `hidden` from the user.
Here we restrict the tags to `3`
```jsx
```
### Paste
The component can parse strings and automatically create tags for you. The default delimiter is `","` but you can override this setting by manually setting the `delimiter` option.
```jsx
```
### Editable Tags
The Tags are not `editable` by default, but you can change this setting with the `editable` prop. Simply double click a tag, make the changes and hit enter to save.
```jsx
```
### Readonly Tags
You can lock the component with `readonly` mode. All interactions are disabled in `read-only` mode.
```jsx
```
### Theme
The components color scheme can be customized by passing a custom theme prop.
```jsx
```
### Custom Class names
If you are looking for more control in terms of customizing the style of the tags, you can make use of the `classNames` prop to apply custom classes to the different elements within the component.
```jsx
```
## 📦 Build Setup
```bash
# install dependencies
yarn install
# start dev
yarn run dev
# package lib
npm run rollup
# run css linting
yarn run lint:css
```
## 🔨 Contributing
1. Fork it ( [https://github.com/prabhuignoto/smart-tagz/fork](https://github.com/prabhuignoto/smart-tagz/fork) )
2. Create your feature branch (`git checkout -b new-feature`)
3. Commit your changes (`git commit -am 'Add feature'`)
4. Push to the branch (`git push origin new-feature`)
5. Create a new Pull Request
## Notes
The project uses [vite](vite) instead of @vue/cli. I choose vite for speed and i also believe [vite](vite) will be the future.
## Meta
Prabhu Murthy – [@prabhumurthy2](https://twitter.com/prabhumurthy2) – [email protected]
Distributed under the MIT license. See `LICENSE` for more information.
[https://github.com/prabhuingoto/](https://github.com/prabhuingoto/)
[vue]: https://vuejs.org
[typescript]: https://typescriptlang.org
[vite]: https://github.com/vitejs/vite