{"id":16628347,"url":"https://github.com/prabhuignoto/smart-tagz","last_synced_at":"2025-03-16T22:30:53.628Z","repository":{"id":38197324,"uuid":"285537091","full_name":"prabhuignoto/smart-tagz","owner":"prabhuignoto","description":"🏷Smart input tags for Vue","archived":false,"fork":false,"pushed_at":"2023-04-14T05:31:46.000Z","size":4025,"stargazers_count":57,"open_issues_count":14,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-13T04:32:18.946Z","etag":null,"topics":["input-tags","tags","tagsinput","typescript","vue-components","vue-input-tags","vue-tags","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://smart-tagz.vercel.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prabhuignoto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-06T10:05:17.000Z","updated_at":"2024-08-17T17:28:22.000Z","dependencies_parsed_at":"2024-06-19T22:51:08.653Z","dependency_job_id":"c58cc08a-0e01-404c-8240-0cde3a288436","html_url":"https://github.com/prabhuignoto/smart-tagz","commit_stats":{"total_commits":132,"total_committers":4,"mean_commits":33.0,"dds":"0.037878787878787845","last_synced_commit":"0bfd56b462396c1de397484476061bed597b796f"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fsmart-tagz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fsmart-tagz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fsmart-tagz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fsmart-tagz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prabhuignoto","download_url":"https://codeload.github.com/prabhuignoto/smart-tagz/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221668362,"owners_count":16860631,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["input-tags","tags","tagsinput","typescript","vue-components","vue-input-tags","vue-tags","vue3","vuejs"],"created_at":"2024-10-12T04:32:23.026Z","updated_at":"2024-10-27T11:26:13.663Z","avatar_url":"https://github.com/prabhuignoto.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- [![NPM Version][npm-image]][npm-url]--\u003e\n\u003c!-- [![Downloads Stats][npm-downloads]][npm-url] --\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./social-slide-small.png\" /\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n[![Build Status](https://dev.azure.com/prabhummurthy/smart-tagz/_apis/build/status/prabhuignoto.smart-tagz?branchName=master)](https://dev.azure.com/prabhummurthy/smart-tagz/_build/latest?definitionId=4\u0026branchName=master)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/ece87afeb05c431fa375a8b98223290d)](https://www.codacy.com/manual/prabhuignoto/smart-tagz?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=prabhuignoto/smart-tagz\u0026utm_campaign=Badge_Grade)\n[![DeepScan grade](https://deepscan.io/api/teams/10074/projects/13324/branches/220204/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=10074\u0026pid=13324\u0026bid=220204)\n[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/prabhuignoto/smart-tagz.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/prabhuignoto/smart-tagz/context:javascript)\n![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/prabhuignoto/smart-tagz)\n[![Depfu](https://badges.depfu.com/badges/b07de06e0726ec1cdfec6c7a12967582/overview.svg)](https://depfu.com/github/prabhuignoto/smart-tagz?project_id=18158)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./demo.gif\"/\u003e\n\u003c/div\u003e\n\n[![Edit smart-tagz](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/smart-tagz-pd32g?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n\u003ch2\u003e✨ Features\u003c/h2\u003e\n\n- ⚡ [Autosuggest](#auto-suggest) with support for keyboard selection.\n- ✏️ [Edit](#editable-tags) the tags inline by double clicking them.\n- 🏷️ [Paste](#paste) strings with delimiters of your choice and the component will create the tags for you.\n- 🗑️ Quickly delete the tags with a visual confirmation before removing a tag.\n- 🧹 Quickly clear all tags with `quick-delete` mode.\n- 🔒 \u0026nbsp;[Lock the component](#readonly-tags) using the `readonly` mode.\n- ✋ \u0026nbsp;[Restrict](#max-tags) the number of tags and Handle duplicates gracefully.\n- 🌈\u0026nbsp;[Customize](#theme) the colors.\n\n### Table of Contents\n\n- [⚡ Installation](#-installation)\n- [🚀 Getting Started](#-getting-started)\n- [🍬 Demos](#-demos)\n- [Props](#props)\n  - [Default Tags](#default-tags)\n  - [Duplicates](#duplicates)\n  - [Auto Suggest](#auto-suggest)\n  - [Max Tags](#max-tags)\n  - [Paste](#paste)\n  - [Editable Tags](#editable-tags)\n  - [Readonly Tags](#readonly-tags)\n  - [Theme](#theme)\n  - [Custom Class names](#custom-class-names)\n- [📦 Build Setup](#-build-setup)\n- [🔨 Contributing](#-contributing)\n- [Notes](#notes)\n- [Meta](#meta)\n\n## ⚡ Installation\n\n```jsx\nyarn install smart-tagz\n```\n\n## 🚀 Getting Started\n\nsmart-tagz has some great defaults to get you started quickly. Please check the props list for all options.\n\n```jsx\n\u003ctemplate\u003e\n  \u003csmart-tagz\n    autosuggest\n    editable\n    inputPlaceholder=\"Select Countries ...\"\n    :sources=\"sources\"\n    :allowPaste=\"{delimiter: ','}\"\n    :allowDuplicates=\"false\"\n    :maxTags=\"20\"\n    :defaultTags=\"['United Kingdom', 'Uruguay', 'Uzbekistan']\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { SmartTagz } from \"smart-tagz\";\nimport \"smart-tagz/dist/smart-tagz.css\";\n\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"Basic\",\n  components: {\n    SmartTagz,\n  }\n});\n\u003c/script\u003e\n```\n\n## 🍬 Demos\n\nHead to our demo page for examples showcasing all the features.\n\n[https://smart-tagz.vercel.app/](https://smart-tagz.vercel.app/)\n\n## Props\n\n| Prop             | Type                  | Description                                                                                      | Default          |\n| ---------------- | --------------------- | ------------------------------------------------------------------------------------------------ | ---------------- |\n| defaultTags      | Array                 | initialize with a `default` set of tags                                                          | []               |\n| width            | String                | `width` of the container                                                                         | 100%             |\n| autosuggest      | Boolean               | Enables the `autosuggest` feature. you also need to set the sources for the autosuggest to work. | false            |\n| sources          | Array                 | Works as the `datasource` for the autosuggest feature                                            | []               |\n| allowPaste       | { delimiter: String } | Parses the pasted string based on the passed delimiter and creates tags automatically            | {delimiter: \",\"} |\n| editable         | Boolean               | makes the tags `editable`                                                                        | false            |\n| allowDuplicates  | Boolean               | allows/disallows `duplicate` tag entries while pasted or entered manually.                       | true             |\n| maxTags          | Number                | sets the `Maximum` number of tags                                                                | 10               |\n| inputPlaceholder | String                | `Placeholder` for the input box.                                                                 | \"Enter tag...\"   |\n| readOnly         | Boolean               | Makes the whole component `readOnly`. ideal for display only purposes.                           | false            |\n| quick-delete     | Boolean               | When enabled all the tags can be cleared by \u003ckbd\u003eCTRL\u003c/kbd\u003e + \u003ckbd\u003eA\u003c/kbd\u003e, \u003ckbd\u003eDEL\u003c/kbd\u003e       | false            |\n| on-changed       | Function              | `callback` that gets called when a new tag is added or an existing tag is deleted                | false            |\n\n### Default Tags\n\nWe 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.\n\n```jsx\n\u003csmart-tagz :default-tags=\"['United Kingdom', 'Uruguay', 'Uzbekistan']\" /\u003e\n```\n\n### Duplicates\n\nYou can decide how to manage `duplicate` tags by either allowing or disallowing them completely. When set to `false` no duplicate values are allowed.\n\n```jsx\n\u003csmart-tagz :allow-duplicates=\"false\" /\u003e\n```\n\n### Auto Suggest\n\nWhe 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.\n\n```jsx\n \u003csmart-tagz autosuggest :sources=\"['India', 'Brazil', 'China', 'United Kingdom']\" /\u003e\n```\n\n### Max Tags\n\nThe 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.\n\nHere we restrict the tags to `3`\n\n```jsx\n\u003csmart-tagz :max-tags=\"3\" /\u003e\n```\n\n### Paste\n\nThe 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.\n\n```jsx\n\u003csmart-tagz :allow-paste=\"{delimiter: ';'}\" /\u003e\n```\n\n### Editable Tags\n\nThe 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.\n\n```jsx\n\u003csmart-tagz editable /\u003e\n```\n\n### Readonly Tags\n\nYou can lock the component with `readonly` mode. All interactions are disabled in `read-only` mode.\n\n```jsx\n\u003csmart-tagz read-only /\u003e\n```\n\n### Theme\n\nThe components color scheme can be customized by passing a custom theme prop.\n\n```jsx\n  \u003csmart-tagz\n    :theme=\"{\n      primary: '#545454',\n      background: '#bdbdbd',\n      tagTextColor: '#fff',\n    }\"\n  /\u003e\n```\n\n### Custom Class names\n\nIf 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.\n\n```jsx\n\u003csmart-tagz\n  input-placeholder=\"Select Countries ...\"\n  :class-names=\"{\n    wrapper: 'tags_wrapper_custom',\n    tag_name: 'tag_name_custom',\n    tag_container: 'tag_container_custom',\n    tag_close_btn: 'tag_close_btn_custom',\n  }\"\n  :default-tags=\"[\n    'United Kingdom',\n    'Uruguay',\n    'Uzbekistan',\n    'Venezuela'\n  ]\"\n/\u003e\n```\n\n## 📦 Build Setup\n\n```bash\n# install dependencies\nyarn install\n\n# start dev\nyarn run dev\n\n# package lib\nnpm run rollup\n\n# run css linting\nyarn run lint:css\n```\n\n## 🔨 Contributing\n\n1. Fork it ( [https://github.com/prabhuignoto/smart-tagz/fork](https://github.com/prabhuignoto/smart-tagz/fork) )\n2. Create your feature branch (`git checkout -b new-feature`)\n3. Commit your changes (`git commit -am 'Add feature'`)\n4. Push to the branch (`git push origin new-feature`)\n5. Create a new Pull Request\n\n## Notes\n\nThe project uses [vite](vite) instead of @vue/cli. I choose vite for speed and i also believe [vite](vite) will be the future.\n\n## Meta\n\nPrabhu Murthy – [@prabhumurthy2](https://twitter.com/prabhumurthy2) – prabhu.m.murthy@gmail.com\n\nDistributed under the MIT license. See `LICENSE` for more information.\n\n[https://github.com/prabhuingoto/](https://github.com/prabhuingoto/)\n\n\u003c!-- Markdown link \u0026 img dfn's --\u003e\n\n[vue]: https://vuejs.org\n[typescript]: https://typescriptlang.org\n[vite]: https://github.com/vitejs/vite\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprabhuignoto%2Fsmart-tagz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprabhuignoto%2Fsmart-tagz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprabhuignoto%2Fsmart-tagz/lists"}