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:

npm install vue-chips-generator

Usage

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

<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>

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.