diff --git a/node_modules/@yaireo/tagify/.eslintrc b/node_modules/@yaireo/tagify/.eslintrc new file mode 100644 index 0000000..a251eb3 --- /dev/null +++ b/node_modules/@yaireo/tagify/.eslintrc @@ -0,0 +1,46 @@ +{ + "rules": { + "no-mixed-spaces-and-tabs" : [2, "smart-tabs"], + "block-spacing" : [2, "always"], + "comma-style" : [2, "last"], + "no-debugger" : [1], + "no-alert" : [1], + "indent" : [1, 4, {"SwitchCase":1}], + "strict" : 0, + "no-undef" : 1 + }, + "parserOptions": { + "ecmaVersion" : 9, + "sourceType": "module", + "ecmaFeatures": { + "modules": true, + "sourceTyp": "module", + "experimentalObjectRestSpread": true + } + }, + "globals" : { + "FB": "readonly", + "ga": "readonly", + "jQuery": "readonly", + "$":"readonly", + "_": "readonly", + "d3": "readonly", + "Router": "readonly", + "ttip": "readonly", + "Cookies": "readonly", + "fastdom": "readonly", + "describe": "readonly", + "beforeEach": "readonly", + "it": "readonly", + "expect": "readonly", + "assert": "readonly", + "done": "readonly", + "dataLayer": "readonly", + "validator": "readonly" + }, + "env": { + "es6": true, + "browser": true, + "node": true + } +} \ No newline at end of file diff --git a/node_modules/@yaireo/tagify/.gitattributes b/node_modules/@yaireo/tagify/.gitattributes new file mode 100644 index 0000000..bdb0cab --- /dev/null +++ b/node_modules/@yaireo/tagify/.gitattributes @@ -0,0 +1,17 @@ +# Auto detect text files and perform LF normalization +* text=auto + +# Custom for Visual Studio +*.cs diff=csharp + +# Standard to msysgit +*.doc diff=astextplain +*.DOC diff=astextplain +*.docx diff=astextplain +*.DOCX diff=astextplain +*.dot diff=astextplain +*.DOT diff=astextplain +*.pdf diff=astextplain +*.PDF diff=astextplain +*.rtf diff=astextplain +*.RTF diff=astextplain diff --git a/node_modules/@yaireo/tagify/LICENSE b/node_modules/@yaireo/tagify/LICENSE new file mode 100644 index 0000000..4110d3c --- /dev/null +++ b/node_modules/@yaireo/tagify/LICENSE @@ -0,0 +1,19 @@ +Copyright 2019 Yair Even-Or + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/node_modules/@yaireo/tagify/README.md b/node_modules/@yaireo/tagify/README.md new file mode 100644 index 0000000..570cb19 --- /dev/null +++ b/node_modules/@yaireo/tagify/README.md @@ -0,0 +1,888 @@ +

+ +

+ Tagify - tags input component +

+ +

+ Transforms an input field or a textarea into a Tags component, in an easy, customizable way, + with great performance and small code footprint, exploded with features. +
+ Vanilla ⚡ React ⚡ Vue ⚡ Angular +

+ +

+ 👉 See Demos 👈 +

+ +

+ + + + + + + + +

+ +

+ + +

+ +## Table of Contents + + +* [Installation](#installation) +* [What can Tagify do](#features) +* [Building the project](#building-the-project) +* [Adding tags dynamically](#adding-tags-dynamically) +* [Output value](#output-value) +* [Ajax whitelist](#ajax-whitelist) +* [Edit tags](#edit-tags) +* [Drag & Sort](#drag--sort) +* [DOM Templates](#dom-templates) +* [Suggestions selectbox](#suggestions-selectbox) +* [Tags mixed with text](#mixed-content) +* [Single-Value Only](#single-value) +* [React wrapper](#react) +* [Angular wrapper](#angular) +* [Vue Example](https://codesandbox.io/s/tagify-tags-component-vue-example-l8ok4) +* [jQuery version](#jquery-version) +* [FAQ](#FAQ) +* [CSS Variables](#css-variables) +* [Methods](#methods) +* [Events](#events) +* [Hooks](#hooks) +* [Settings](#settings) + + +## Installation + +```sh +npm i @yaireo/tagify --save +``` + +### Usage (in your bundle): + +[live demo using Parcel as bundler](https://codesandbox.io/s/simple-tagify-setup-6pfi2) + +```js +import Tagify from '@yaireo/tagify' + +var tagify = new Tagify(...) +``` + +> Don't forget to **include `tagify.css`** file in your project. +> CSS location: `@yaireo/tagify/dist/tagify.css` +> SCSS location: `@yaireo/tagify/src/tagify.scss` +> [See SCSS usecase & example](https://github.com/yairEO/tagify/pull/282) + +## Features +* Can be applied on input & textarea elements +* Supports [mix content](#mixed-content) (text and tags together) +* Supports [single-value](#single-value) mode (like ` +``` + +## Drag & Sort + +To be able to sort tags by draging, a 3rd-party script is needed. + +I have made a very simple *drag & drop* (~`11kb` *unminified*) script which uses [HTML5 native API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) and +it is available to download via [NPM](https://www.npmjs.com/package/@yaireo/dragsort) or [Github](https://github.com/yairEO/dragsort) +but any other *drag & drop* script may possibly work. I could not find in the whole internet a decent lightweight script. + +### [Integration example](https://codepen.io/vsync/pen/jOqYOVJ): + +```js +var tagify = new Tagify(inputElement) + +// bind "DragSort" to Tagify's main element and tell +// it that all the items with the below "selector" are "draggable" +var dragsort = new DragSort(tagify.DOM.scope, { + selector: '.'+tagify.settings.classNames.tag, + callbacks: { + dragEnd: onDragEnd + } +}) + +// must update Tagify's value according to the re-ordered nodes in the DOM +function onDragEnd(elm){ + tagify.updateValueByDOMTags() +} +``` + + +## DOM Templates +It's possible to control the templates for some of the HTML elements tagify is using by +modifying the `settings.templates` Object with your own custom functions which **must return** an *HTML string*. + +Available templates are: `wrapper`, `tag`, `dropdown`, `dropdownItem` and the optional `dropdownItemNoMatch` +which is a special template for rendering a suggestion item (in the dropdown list) only if there were no matches found for the typed input. + +[View templates](https://github.com/yairEO/tagify/blob/master/src/parts/templates.js) + +## Suggestions selectbox +The suggestions selectbox is shown is a whitelist Array of Strings or Objects was passed in the settings when the Tagify instance was created. +Suggestions list will only be rendered if there are at least two matching suggestions (case-insensitive). + +The selectbox dropdown will be appended to the document's `` element and will be rendered by default in a position below (bottom of) the Tagify element. +Using the keyboard arrows up/down will highlight an option from the list, and hitting the Enter key to select. + +It is possible to tweak the selectbox dropdown via 2 settings: + + - `enabled` - this is a numeral value which tells Tagify when to show the suggestions dropdown, when a minimum of N characters were typed. + - `maxItems` - Limits the number of items the suggestions selectbox will render + +```javascript +var input = document.querySelector('input'), + tagify = new Tagify(input, { + whitelist : ['aaa', 'aaab', 'aaabb', 'aaabc', 'aaabd', 'aaabe', 'aaac', 'aaacc'], + dropdown : { + classname : "color-blue", + enabled : 0, // show the dropdown immediately on focus + maxItems : 5, + position : "text", // place the dropdown near the typed text + closeOnSelect : false, // keep the dropdown open after selecting a suggestion + highlightFirst: true + } + }); +``` + +

Will render

+ +```html +
+
+
aaab
+
aaabb
+
aaabc
+
aaabd
+
aaabe
+
+
+``` + +By default searching the suggestions is using [fuzzy-search](https://en.wikipedia.org/wiki/Approximate_string_matching) (see [settings](#settings)). + +If you wish to assign *alias* to items (in your suggestion list), add the `searchBy` property to *whitelist* items you wish +to have an *alias* for. + +In the below example, typing a part of a string which is included in the `searchBy` property, for example *`land midd"`* - +the suggested item which match the value "Israel" will be rendered in the suggestions (dropdown) list. + +### [Example](https://yaireo.github.io/tagify/#section-extra-properties) for a suggestion item alias + +```javascript +whitelist = [ + ... + { value:'Israel', code:'IL', searchBy:'holy land, desert, middle east' }, + ... +] +``` + +Another handy setting is `dropdown.searchKeys` which, like the above `dropdown.searchBy` setting, allows +expanding the search of any typed terms to more than the `value` property of the whitelist items (if items are a *Collection*). + +### Example whitelist: + +```javascript +[ + { + value : 123456, + nickname : "foo", + email : "foo@mail.com" + }, + { + value : 987654, + nickname : "bar", + email : "bar@mail.com" + }, + ...more.. +] +``` + +// setting to search in other keys: +```javascript +{ + dropdown: { + searchKeys: ["nickname", "email"] // fuzzy-search matching for those whitelist items' properties + } +} +``` + +## Mixed-Content + +> To use this feature it must be toggled - see [settings](#settings). + +When mixing text with tags, the original textarea (or input) element will have a value as follows: + + [[cartman]]⁠ and [[kyle]]⁠ do not know [[Homer simpson]]⁠ + +If the inital value of the textarea or input is formatted as the above example, tagify will try to +automatically convert everything between `[[` & `]]` to a tag, if tag exists in the *whitelist*, so make +sure when the Tagify instance is initialized, that it has tags with the correct `value` property that match +the same values that appear between `[[` & `]]`. + +Applying the setting `dropdown.position:"text"` is encouraged for mixed-content tags, because the suggestions list +will be rendered right next to the caret location and not the the bottom of the Tagify componenet, which might look +weird when there is already a lot of content at multiple lines. + +If a tag does not exists in the *whitelist*, it may be created by the user and all you should do is listen to the `add` event and update your local/remote state. + +## Single-Value + +Similar to native ``'s element `name` attribute +value | String/Array | ✔ | Initial value. +defaultValue | String/Array | | Only affects the hidden `` element +placeholder | String | ✔ | placeholder text for the component +readOnly | Boolean | ✔ | Toggles `readonly` state. With capital `O`. +tagifyRef | Object | | `useRef` hook refference for the component inner instance of vailla *Tagify* (for methods access) +showFilteredDropdown | Boolean/String | ✔ | if `true` shows the suggestions dropdown. if assigned a String, show the dropdown pre-filtered. +loading | Boolean | ✔ | Toggles `loading` state for the whole component +whitelist | Array | ✔ | Sets the `whitelist` which is the basis for the suggestions dropdown & autocomplete +className | String | | Component's optional class name to be added +InputMode | String | | `"textarea"` will create a `