form-text-tags

form-text-tags

A simple tagged textbox Vue.js component derived from the @odyzeo/form-autocomplete component.

Installation

npm

npm install --save form-text-tags

yarn

yarn add form-text-tags

Import the component where you want to use it and register it:

import 'FormTextTags' from 'form-text-tags';
export default {
  components: {
    FormTextTags,
  },
}

Import styles or make your own.

import 'form-text-tags/dist/form-text-tags.css';

Usage

<template>
  <div
          id="app"
          class="app"
  >
    <div class="container">
      <h1>Demo</h1>

      <p>Adding and removing tags:</p>

      <form-text-tags
              v-model="textBoxTags"
              :close-on-add="false"
              :hide-text-on-blur="false"
              :clear-text-on-blur="false"
              :placeholder="'Add tags here'"
      >
        <template #label>
          Tags
        </template>
      </form-text-tags>

        <p>Textbox value:</p>

        <pre>{{ textBoxTags }}</pre>
    </div>
  </div>
</template>

<script>
  import FormTextTags from '@/components/FormTextTags';

  export default {
    name: 'App',
    components: {
      FormTextTags,
    },
    data() {
      return {
        textBoxTags: [
                "Apple",
                "Orange",
                "Banana",
        ],
      };
    },
  };
</script>

<style lang="less">
  @import '../src/less/app.less';
</style>

Events

Entered

Returns the text of the item entered as a tag

Props

Property name	Type	Default value	Description
value or v-model	array	[]	Array of initial selected option(s)
placeholder	string		Input placeholder attribute
formErrors	array	[]	Array of errors to display
blurOnAdd	boolean	false	Whether to blur the element after a tag has been added
hideTextOnBlur	boolean	false	Whether to collapse the input area when the element is blurred
clearTextOnBlur	boolean	false	Whether to clear the input area when the element is blurred

Slots

label

Label value for the input element.

prepend

Div block before the input element, use it to display an icon

append

Div block after the input element, use it to display an icon

Development

npm run serve

or

yarn serve