Initial commit

use-bootstrap · Aug 9, 2023 · c27695a · c27695a
commit c27695a
Show file tree

Hide file tree

Showing 44 changed files with 6,026 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,10 @@
+{
+  "plugins": ["react"],
+  "extends": "@antfu",
+  "rules": {
+    "curly": ["error", "all"],
+    "jsx-quotes": ["error", "prefer-double"],
+    "react/jsx-indent": ["error", 2]
+  },
+  "ignorePatterns": ["docs/**/*"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+dist
+.DS_Store
+.eslintcache
+*.log*
+*.conf*
+*.env*
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+save-exact=true
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "files.associations": {
+    "*.html.txt": "html",
+    "*.css.txt": "css",
+    "*.js.txt": "javascript",
+  },
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 use-bootstrap
+
+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.
diff --git a/README.md b/README.md
@@ -0,0 +1,83 @@
+
+# use-bootstrap-tag
+
+Tag input for Bootstrap 5
+
+
+## Features
+
+- **Custom separator**: Set a specific delimiter character between tag elements.
+- **Enable/disable duplicates**: Toggle the allowance of duplicate tags.
+- **Custom transformation**: Define personalized modifications to input tag entries.
+- **Sizing**: Adjustable sizing to match user preferences or layouts.
+- **Validation**: Reflects validation states visually to align with Bootstrap's form validation feedback.
+## Installation
+
+Install use-bootstrap-tag from npm:
+
+```bash
+npm install use-bootstrap-tag
+```
+
+## Usage/Examples
+
+After installation, you can import the library into your project as follows
+
+```javascript
+import 'use-bootstrap-tag/dist/use-bootstrap-tag.css'
+import { UseBootstrapTag } from 'use-bootstrap-tag'
+```
+
+or, since it also comes with an IIFE bundle, you can insert it directly into your HTML
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bootstrap demo</title>
+    <link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="node_modules/use-bootstrap-tag/dist/use-bootstrap-tag.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <input type="text" class="form-control" id="example">
+    <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="node_modules/use-bootstrap-tag/dist/use-bootstrap-tag.min.js"></script>
+  </body>
+</html>
+```
+
+Once you imported the library, you can initiate it
+
+```javascript
+const example = UseBootstrapTag(document.getElementById('example'))
+```
+
+
+## Options
+
+All options are embedded in attributes:
+
+```html
+data-ub-tag-separator
+data-ub-tag-duplicate
+data-ub-tag-transform
+data-ub-tag-enter
+```
+
+```html
+<input class="form-control" data-ub-tag-separator=" " data-ub-tag-duplicate data-ub-tag-transform="input => input.toUpperCase()" data-ub-tag-enter>
+```
+## Methods
+
+| Name    | Params          | Returns         | Example                           |
+|---------|-----------------|-----------------|-----------------------------------|
+| addValue  | string \| array | void    | `example.addValue('cyan')`<br/>`example.addValue(['light', 'dark'])`    |
+| removeValue  | string \| array | void    | `example.removeValue('cyan')`<br/>`example.removeValue(['light', 'dark'])`    |
+| getValue  | null            | string  | `example.getValue()`  |
+| getValues | null            | array   | `example.getValues()` |
+
+## License
+
+[MIT](./LICENSE)
diff --git a/docs/favicon.svg b/docs/favicon.svg