Dofic Vue - Bibliothèque de composants Vue 3 pour Laravel

Bibliothèque de composants Vue 3 avec Tailwind CSS, incluant un système de thème Dark/Light et des composants réutilisables pour vos projets Laravel.

Installation

Ajouter la dépendance

Dans le package.json de votre projet Laravel :

npm i @dofic/dofic-vue

Utilisation des composants

Composant ThemeToggle

<template>
  <theme-toggle></theme-toggle>
</template>

Composant Button

<template>
  <dofic-button variant="primary" size="md" @click="handleClick">
    Cliquez-moi
  </dofic-button>
</template>

Composant Table

<template>
  <dofic-table
    :columns="columns"
    :data="data"
    :searchable="true"
    :pagination="true"
  />
</template>

<script setup lang="ts">
const columns = [
  { key: "id", label: "ID", sortable: true },
  { key: "name", label: "Nom", sortable: true },
  { key: "email", label: "Email" },
];

const data = [
  { id: 1, name: "John Doe", email: "[email protected]" },
  { id: 2, name: "Jane Smith", email: "[email protected]" },
];
</script>

Utiliser le composable useTheme

Pour gérer le thème directement dans vos composants :

<script setup lang="ts">
import { useTheme } from "dofic-vue";

const { isDark, toggleTheme, theme } = useTheme();
</script>

<template>
  <div>
    <p>Thème actuel : {{ theme }}</p>
    <p>Mode sombre : {{ isDark }}</p>
    <button @click="toggleTheme">Changer le thème</button>
  </div>
</template>

Composants disponibles

• <dofic-button> - Bouton avec plusieurs variants (primary, secondary, danger, etc.)
• <dofic-table> - Table de données avec tri, recherche et pagination
• <theme-toggle> - Bouton pour basculer entre mode clair/sombre
• <dofic-navigation> - Composant de navigation
• <dofic-search> - Barre de recherche

Composables disponibles

• useTheme() - Gestion du thème (light/dark)
• useAppearance() - Gestion de l'apparence de l'application
• useUtils() - Fonctions utilitaires