@i20/vue-uikit

Bibliothèque de composants UI réutilisables pour Vue.js 3, développée par i20 Technologies pour maintenir la cohérence de l'image de marque à travers les applications i20.

Installation

npm install @i20/vue-uikit vue@^3.5.0 remixicon flag-icons

Configuration requise

• Vue 3.5+
• Tailwind CSS
• RemixIcon
• Flag Icons

Démarrage rapide

1. Configurer Tailwind CSS

Ajoutez le package dans votre configuration Tailwind :

// tailwind.config.js
export default {
  content: [
    "./src/**/*.{vue,js,ts}",
    "./node_modules/@i20/vue-uikit/**/*.{vue,js,ts}"
  ],
  theme: {
    extend: {
      colors: {
        primary: '#000000',
        secondary: '#FFFFFF',
        background: '#F6F6F6',
        placeholder: '#D9D9D9',
        accent: '#0A30CF',
      },
      fontFamily: {
        sans: ['"Stack Sans Text"', 'system-ui'],
        heading: ['HiraginoKaku', 'system-ui'],
      },
    },
  },
}

2. Importer les styles

// main.js
import { createApp } from 'vue'
import '@i20/vue-uikit/styles'
import App from './App.vue'

createApp(App).mount('#app')

3. Utiliser les composants

<script setup>
import { Buttons, Inputs, Headers, Footers } from '@i20/vue-uikit'
</script>

<template>
  <Headers logo-url="/logo.png" />
  <Buttons label="Action" variant="primary" />
  <Inputs v-model="email" label="Email" type="email" />
  <Footers variant="dark" />
</template>

Composants disponibles

Navigation

• Headers - En-tête de page avec logo et navigation
• Footers - Pied de page avec liens et copyright

Formulaires

• Buttons - Boutons avec variantes (primary, outline, ghost)
• Inputs - Champs de saisie (text, email, password, select, toggle, date)
• Badges - Étiquettes avec icônes
• Texts - Typographie standardisée

Listes

• Listtiles - Éléments de liste avec icônes
• ListtileGroup - Groupe d'éléments de liste
• History - Liste d'historique

Overlays

• Modals - Fenêtres modales
• Alerts - Alertes avec actions

Cards

• FeatureCards - Cartes de fonctionnalités
• PricingCards - Cartes de tarification

Sections

• HeroSection - Section héro
• FeaturesGridSection - Grille de fonctionnalités
• VideoCarouselSection - Carrousel vidéo
• FeaturesCarouselSection - Carrousel de fonctionnalités
• ApplicationLogo - Logo d'application

Documentation complète

Pour la documentation détaillée, les props, les événements et les exemples d'utilisation, consultez le fichier STRUCTURE.md (documentation interne).

Support

Pour toute question ou problème, contactez : [email protected]

License

Propriétaire - i20 Technologies. Tous droits réservés.

Ce package est destiné à un usage interne pour les applications i20 Technologies.