feat(b-form-tags): new tagged input component

[tmorehouse]

Describe the PR

New form control component <b-form-tags> (and helper component <b-form-tag>)

Has default rendering of layout which can be overridden via the scoped default slot.

To Do:

• Documentation
• Add a "Add" button for easier usage on mobile devices (since users can't press enter easily)
• Add handling of adding tags when space (or other character, such as ; or ,, is pressed)
• Props to disable adding tag on enter events
• Prop for providing a tag validator function to validate before the tag is added
• emit tag-state event when tags are added (or can't be added)
• Unit tests
• add in optional last tag removal via delete key (when input is empty)
• better input filtering of duplicate tags after add attempt
• improve tag styling with minimal SCSS, and usage of utility classes
• validate tags (invalid/duplicate) on input event
• Add input validation state to slot scope (isInvalid, isDuplicate)
• add arrays of invalidTags and duplicateTags to slot scope
• add invalid/duplicate feedback to default render
• update documentation for validation + examples
• Add invalid/duplicate tag feedback text prop defaults to config
• make adding tag on change event opt-in
• adjust timing of input clearing when input element is a <select>
• move default content render to helper method (emulating a default slot function)
• add example of using select element as the tag input to docs
• Make tagged region an aria-live="polite" with non-atomic updates (additions and removals announced only)

Future Ideas:

• clear the input value if focus leaves component and input only has invalid/duplicate tags
• Update custom render examples for best aria practices
• support 'required' prop (but only if in a form) by automatically adding is-invalid class to root element on form submission (and call evt.preventDefault() on the form's submit event
• prop to transform tag to upper/lower case before adding
• add prop for case insensitive duplicate detection
• option to clear input on invalid/duplicate (default is to keep invalid/duplicate tags in input)
• use a select if prop 'options` provided (filter out existing tags for options) - will require a bit of custom SCSS to style the select) - interim show example of using select in custom render

Loosely based on https://adamwathan.me/renderless-components-in-vuejs/

PR checklist

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Enhancement
• ARIA accessibility
• Documentation update
• Other (please describe)

Does this PR introduce a breaking change? (check one)

• No
• Yes (please describe)

The PR fulfills these requirements:

• It's submitted to the dev branch, not the master branch
• When resolving a specific issue, it's referenced in the PR's title (i.e. [...] (fixes #xxx[,#xxx]), where "xxx" is the issue number)
• It should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
• The title should follow the Conventional Commits naming convention (i.e. fix(alert): not alerting during SSR render, docs(badge): update pill examples, fix typos, chore: fix typo in README, etc). This is very important, as the CHANGELOG is generated from these messages.

If new features/enhancement/fixes are added or changed:

• Includes documentation updates (including updating the component's package.json for slot and event changes)
• Includes any needed TypeScript declaration file updates
• New/updated tests are included and passing (if required)
• Existing test suites are passing
• The changes have not impacted the functionality of other components or directives
• ARIA Accessibility has been taken into consideration (Does it affect screen reader users or keyboard only users? Clickable items should be in the tab index, etc.)

If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

[codecov]

Codecov Report

Merging #4409 into dev will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##              dev    #4409      +/-   ##
==========================================
+ Coverage   99.91%   99.91%   +<.01%     
==========================================
  Files         242      245       +3     
  Lines        4673     4818     +145     
  Branches     1310     1345      +35     
==========================================
+ Hits         4669     4814     +145     
  Misses          3        3              
  Partials        1        1

Impacted Files	Coverage Δ
src/components/index.js	100% <ø> (ø)	⬆️
src/index.js	100% <ø> (ø)	⬆️
src/components/form-tags/form-tags.js	100% <100%> (ø)
src/components/form-tags/index.js	100% <100%> (ø)
src/components/form-tags/form-tag.js	100% <100%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 833b028...71a9997. Read the comment docs.