vue-chips-generator/README.md

A Vue 3 component for creating and managing keyword chips. This component allows users to input keywords, automatically handles uniqueness, and provides customizable styles.

## Vue 3 Keyword Chips Component

A Vue 3 component for creating and managing keyword chips. This component allows users to input keywords, automatically handles uniqueness, and provides customizable styles.

### Features

- **Keyword Input**: Users can input keywords separated by spaces or commas.
- **Unique Keywords**: Ensures that each keyword is unique if the unique prop is set to true.
- **Customizable Styles**: Customize the appearance of chips through the chipStyle prop.
- **Error Handling**: Displays error messages when duplicate keywords are entered.
- **Events**: Listed the events emitted by the `TextField` component.
- **Dynamic Colors**: Chips are assigned random colors from a predefined palette.

## Installation

You can install the component via npm:

```bash
npm install vue-chips-generator
```

## Usage

<h3>1. Import and Register</h3>
<h6>In your Vue component file, import the KeywordChips component:</h6>

```
<script setup>
import KeywordChips from 'vue-chips-generator';
</script>

```

<h3>2.Register the Component</h3>
<h6>If you're using Vue's script setup, you can use it directly. Otherwise, register it globally or locally in your component:</h6>

```
<template>
  <KeywordChips
    v-model="keywords"
    label="Enter keywords"
    unique
    :chipStyle="chipStyle"
    uniqueError="This keyword is already in the list"
  />
</template>

<script setup>
import { ref } from 'vue';
import KeywordChips from 'vue-chips-generator';

const keywords = ref([]);
const chipStyle = {
  backgroundColor: '#FF5733',
  color: '#FFFFFF',
};
</script>

```

 <h2>Props</h2>
  <table>
    <thead>
      <tr>
        <th>Prop</th>
        <th>Type</th>
        <th>Description</th>
        <th>Default</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>modelValue</code></td>
        <td>String, Number, Array</td>
        <td>Initial value for the chips. Can be a string of comma-separated values, an array of strings, or a number.</td>
        <td>-</td>
      </tr>
      <tr>
        <td><code>label</code></td>
        <td>String</td>
        <td>Label to display above the text field.</td>
        <td>""</td>
      </tr>
      <tr>
        <td><code>unique</code></td>
        <td>Boolean</td>
        <td>If <code>true</code>, ensures all keywords are unique.</td>
        <td><code>true</code></td>
      </tr>
      <tr>
        <td><code>chipStyle</code></td>
        <td>Object</td>
        <td>Object to customize the style of chips. Can include properties like <code>backgroundColor</code> and <code>color</code>.</td>
        <td>-</td>
      </tr>
      <tr>
        <td><code>uniqueError</code></td>
        <td>String</td>
        <td>Error message displayed when a duplicate keyword is entered.</td>
        <td><code>"Text is already in List"</code></td>
      </tr>
    </tbody>
  </table>

  <h2>Events</h2>

<h3>
The TextField component emits the following events:</h3>
<table>
  <thead>
    <tr>
      <th>Event</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>update:modelValue</code></td>
      <td>Emitted when the value of the input changes.</td>
    </tr>
  </tbody>
</table>


## Explanation:

- **Usage**: Added a section to show how to import, register, and use the `ChipsGenerator` component with various props.
- **Props**: Provided a detailed table of all the props supported by the `ChipsGenerator` component, including their types, default values, and descriptions.
- **Example**: Included an example that demonstrates how to use the component and call its methods.
- **Events**: Listed the events emitted by the `ChipsGenerator` component.
- **License**: Mentioned the license under which the package is released.


By following this structure, users will have a comprehensive guide on how to use your `vue-chips-generator` package effectively.