@heartfly/variants

@heartfly/variants is a library for Vue 3 that provides a simple and efficient way to manage and apply variants to your components. Inspired by Stitches variant, it allows you to define variants and their corresponding styles, and automatically recalculates the class based on the active variant.

Installation

You can install @heartfly/variants using npm or yarn:

npm install @heartfly/variants

or

yarn add @heartfly/variants

Usage

To use @heartfly/variants in your Vue 3 project, import the useVariants hook from the library and use it in your components.

<template>
  <div :class="classes">
    content here
  </div>
</template>

<script lang="ts" setup>
import { useVariants } from '@heartfly/variants';

const classes = useVariants(() => ({
  base: ['mx-4'],
  variants: {
    color: {
      primary: 'text-blue-500',
      secondary: 'text-green-500'
    },
    size: {
      sm: ['text-sm', 'px-2', 'py-1'],
      md: ['text-md', 'px-4', 'py-2']
    },
    disabled: {
      true: ['opacity-50', 'cursor-not-allowed']
    }
  },
  compoundVariants: [
    {
      class: 'hover:text-red-500',
      variants: {
        color: 'primary',
        size: 'md'
      }
    }
  ],
  factory: {
    color: 'primary',
    size: 'sm',
    disabled: true
  }
}));
</script>

In the above example, we use the useVariants hook to define variants and their corresponding styles. The classes variable returned by useVariants is a reactive var that contains the calculated class based on the active variant. We assign classes to classesRef, which is a ComputedRef<string>. This allows you to use classesRef as a computed property in your component and bind it to the component's class attribute.

The defined variants include color, size, and disabled. Each variant has multiple options with associated styles. We also define a compound variant that applies additional styles when specific variant combinations are active. The factory object specifies the initial variant values.

Contributing

Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please create an issue on the GitHub repository.

Contributors

• Guen (@guen)
• Email: [email protected]

License

This library is licensed under the MIT License.