@jotnar/m-chip v0.1.1

@jotnar/m-chip

A reusable Vue 3 chip component with Tailwind CSS 4 styling and Font Awesome support. Customize your chips with sizes, colors, variants, and icons effortlessly!

📦 Installation

Install the package via npm:

npm i @jotnar/m-chip@latest

Prerequisites: Ensure your project has Vue 3 (version 3.4.0 or higher) and Tailwind CSS 4 set up, as this component relies on Tailwind CSS classes for styling and Vue 3 for functionality.

🧑‍💻 Usage

You can use the m-chip component in your Vue 3 application either by registering it globally or locally in specific components.

🌐 Global Registration

Register the m-chip component globally in your Vue app:

1. Import the component in your main JavaScript file (e.g., main.js):

import { createApp } from 'vue';
import App from './App.vue';
import { MChip } from '@jotnar/m-chip';

const app = createApp(App);
app.component('m-chip', MChip);
app.mount('#app');

2. Import the styles in your main CSS file (e.g., main.css):

@import '@jotnar/m-chip/style';
@import 'tailwindcss';;

Once these steps are complete, you can use the component anywhere in your app.

📦 Local Registration

Import and use the component in specific components:

<template>
  <m-chip color="primary" rounded label="Click Me" />
</template>

<script setup>
import { MChip } from '@jotnar/m-chip';
</script>

🎛️ Props

The m-chip component offers a range of props to customize its appearance and behavior:

✨ Examples

<template>
  <div class="flex gap-2 flex-wrap">
    <!-- Basic Chips -->
    <m-chip label="Primary" color="primary" />
    <m-chip label="Secondary" color="secondary" md />
    <m-chip label="Error" color="error" lg />

    <!-- Variants -->
    <m-chip label="Outline" color="info" outline rounded />
    <m-chip label="Text" color="success" text />
    <m-chip label="Elevated" color="primary" elevated />

    <!-- Icons -->
    <m-chip label="Filter" color="info" licon="fas fa-filter" rounded />
    <m-chip color="success" icon="fas fa-check" onlyIcon />

    <!-- Selectable -->
    <m-chip
      label="Selectable"
      color="accent"
      selectable
      :selected="selected"
      @update:selected="selected = $event"
    />

    <!-- Dismissible -->
    <m-chip label="Dismissible" color="warning" dismissible @dismiss="onDismiss" />

    <!-- Link -->
    <m-chip label="Link" color="tertiary" link="https://example.com"部分

<script setup>
  import { ref } from 'vue';
  const selected = ref(false);
  const onDismiss = () => console.log('Chip dismissed');
</script>

ℹ️ Notes

• Custom Classes:
  If a custom class prop (e.g., class="bg-blue-500 text-white"), the color prop will be ignored, allowing your custom styles to take precedence.

• Icon Support:
  Icons require Font Awesome to be set up in your project. Use the format fa-solid fa-icon-name (e.g., fa-solid fa-code).

• Accessibility:
  For icon-only chips (onlyIcon), the label prop is used as the aria-label and title to ensure accessibility for screen readers.

🔨 Under Construction

The homepage for this project is currently under construction. In the meantime, you can find the source code and report issues on GitHub:

• GitHub Repository
• Report Issues

⚖️ License

MIT

👤 Author

Jotnar