input2tags 3.0.1 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +18 -16
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,5 +1,7 @@
1
- # input-tags
2
- ## Version 2.01
1
+ # input2tags
2
+ ## Version 3.02
3
+ ## Supercedes js-input2tags (v2.01)
4
+
3
5
  **Check the CodePen.io [basic example](https://codepen.io/mindflowgo/pen/PwYNQVe); [autocomplete example](https://codepen.io/mindflowgo/pen/MYgyVgg).**
4
6
 
5
7
  *Project objective: simple but powerful vanilla ES6 javascript (code: 350 lines) input tag generator for any input fields; with auto-completion lists.*
@@ -9,7 +11,7 @@ Based off the inspiration work of [github.com/rk4bir/simple-tags-input](https://
9
11
  This project is mobile-friendly: but you may want to prevent scrolling of screen depending on your needs.
10
12
 
11
13
  ## Demo
12
- [Demos & Instructions](https://mindflowgo.github.io/input-tags/)
14
+ [Demos & Instructions](https://mindflowgo.github.io/input2tags/)
13
15
 
14
16
  Video illustrations:
15
17
  ![demonstration](./docs/media/autocomplete.gif)
@@ -31,7 +33,7 @@ Video illustrations:
31
33
  - **onChange**: a function called after change to tags (new tag added, re-arranged, deleted tag)
32
34
 
33
35
  ## Methods
34
- *With a valid InputTags() instance you have these methods:*
36
+ *With a valid Input2Tags() instance you have these methods:*
35
37
  - **getTags()**: get the list of tags created
36
38
  - **setTags([])**: set the list of tags
37
39
  - **addTag(tag)**: add a new tag to input tags instance
@@ -44,7 +46,7 @@ Video illustrations:
44
46
  There are 3 steps to using it
45
47
  1. Include the CSS & JS files (importing it into a script type=module)
46
48
  2. Have an empty list (UL) and an input box (INPUT)
47
- 3. Run the function: const inputTags = new InputTags({ inputId: "tagsInput", listId: "tagsList" });
49
+ 3. Run the function: const inputTags = new Input2Tags({ inputId: "tagsInput", listId: "tagsList" });
48
50
 
49
51
  That's it!
50
52
 
@@ -54,11 +56,11 @@ That's it!
54
56
  #### Step 1 - Include Files (change path to match where they are)
55
57
  ```html
56
58
  <head>
57
- <link rel="stylesheet" href="https://unpkg.com/input-tags@latest/style.css">
59
+ <link rel="stylesheet" href="https://unpkg.com/input2tags@latest/style.css">
58
60
  </head>
59
61
 
60
62
  <script type="module">
61
- import InputTags from "https://unpkg.com/input-tags@latest"
63
+ import Input2Tags from "https://unpkg.com/input2tags@latest"
62
64
  </script>
63
65
  ```
64
66
 
@@ -73,7 +75,7 @@ That's it!
73
75
 
74
76
  #### Step 3 - Run Javascript (to initialize INPUT field)
75
77
  ```javascript
76
- const inputTags = new InputTags({ inputId: "tagsInput", listId: "tagsList" });
78
+ const inputTags = new Input2Tags({ inputId: "tagsInput", listId: "tagsList" });
77
79
  ```
78
80
 
79
81
  **Quick example html**
@@ -87,8 +89,8 @@ That's it!
87
89
  <!-- Bootstrap 5 not used by Input Tags -->
88
90
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
89
91
 
90
- <!-- Only CSS used by InputTags -->
91
- <link rel="stylesheet" href="https://unpkg.com/input-tags@latest/style.css">
92
+ <!-- Only CSS used by Input2Tags -->
93
+ <link rel="stylesheet" href="https://unpkg.com/input2tags@latest/style.css">
92
94
  </head>
93
95
 
94
96
  <body>
@@ -114,10 +116,10 @@ That's it!
114
116
 
115
117
  <!--Simple tags input implementation-->
116
118
  <script type="module">
117
- import InputTags from "https://unpkg.com/input-tags@latest"
119
+ import Input2Tags from "https://unpkg.com/input2tags@latest"
118
120
 
119
121
  const inputEl = document.getElementById('tagsInput');
120
- const inputTags = new InputTags(inputEl, {
122
+ const inputTags = new Input2Tags(inputEl, {
121
123
  autocomplete: ['apple', 'banana', 'cherry'],
122
124
  // initialTags: ['one','two','three'], // pre-populate (1)
123
125
  targetEl: document.getElementById('myTagList'), // pre-populate (2)
@@ -140,11 +142,11 @@ That's it!
140
142
  #### Step 1 - Include Files (change path to match where they are)
141
143
  ```html
142
144
  <head>
143
- <link rel="stylesheet" href="https://unpkg.com/input-tags@latest/style.css">
145
+ <link rel="stylesheet" href="https://unpkg.com/input2tags@latest/style.css">
144
146
  </head>
145
147
 
146
148
  <script type="module">
147
- import InputTags from "https://unpkg.com/input-tags@latest"
149
+ import Input2Tags from "https://unpkg.com/input2tags@latest"
148
150
  </script>
149
151
  ```
150
152
 
@@ -162,7 +164,7 @@ an existing list (UL) otherwise it will create one and pre-pend above the INPUT
162
164
  #### Step 3 - Run Javascript (to initialize INPUT field)
163
165
  ```javascript
164
166
  const inputEl = document.getElementById('tagsInput');
165
- const inputTags = new InputTags(inputEl, {
167
+ const inputTags = new Input2Tags(inputEl, {
166
168
  autocomplete: ['apple', 'banana', 'cherry'],
167
169
  initialTags: ['one','two','three'], // pre-populate (1)
168
170
  // targetEl: document.getElementById('myTagList'), // pre-populate (2)
@@ -178,7 +180,7 @@ You can use the 4 hooks to limit characters allow in inputs, prevent certain tag
178
180
 
179
181
  ```javascript
180
182
  const inputEl = document.getElementById('tagsInput');
181
- const inputTags = new InputTags(inputEl, {
183
+ const inputTags = new Input2Tags(inputEl, {
182
184
  targetEl: document.getElementById('myList'),
183
185
  autocomplete: ['apple', 'banana', 'cherry', 'pear', 'pineapple'],
184
186
  // allowCustomKeys: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "input2tags",
3
- "version": "3.0.1",
3
+ "version": "3.0.2",
4
4
  "description": "Simple, but powerful vanilla javascript input2tags creator, with autocomplete.",
5
5
  "keywords": [
6
6
  "input",
@@ -44,7 +44,7 @@
44
44
  "bugs": {
45
45
  "url": "https://github.com/mindflowgo/input2tags/issues"
46
46
  },
47
- "homepage": "https://github.com/mindflowgo/input2tags#readme",
47
+ "homepage": "https://mindflowgo.github.io/input2tags/",
48
48
  "devDependencies": {
49
49
  "cssnano": "^7.1.2",
50
50
  "postcss": "^8.5.6",