Admins Components Library

Professzionális Vue 3 komponens könyvtár Bootstrap 5 és Vueform alapokon, magyar tartalom kezelő rendszerekhez.

🎯 Áttekintés

Az Admins Components egy átfogó, újrafelhasználható Vue 3 komponens könyvtár, amely kifejezetten magyar admin felületek és tartalomkezelő rendszerek számára készült. A könyvtár két fő kategóriába szervezett komponenseket tartalmaz:

• UI Komponensek: Önálló, Bootstrap 5 alapú Vue komponensek
• Vueform Elemek: Egyedi form elemek Vueform integrációval

Főbb Jellemzők

✨ Vue 3 Composition API - Modern <script setup> szintaxis
🎨 Bootstrap 5 Design - Professzionális UI készlet
📝 Vueform Integráció - Haladó form elemek
🔒 TypeScript - Teljes típusbiztonság
🌐 Magyar Lokalizáció - Minden szöveg és hibaüzenet magyarul
🏪 Pinia State Management - Beépített user store
📦 Dual Build - ES és UMD formátum

🚀 Gyors Kezdés

Telepítés

npm install admins-components

Alapvető Használat

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import AdminsComponents from 'admins-components'
import 'admins-components/dist/style.css'

const app = createApp(App)
app.use(createPinia())
app.use(AdminsComponents) // Regisztrálja az összes komponenst globálisan
app.mount('#app')

Szelektív Import

<script setup lang="ts">
import { TableToList, FilterControl, useCurrentUser } from 'admins-components'
</script>

<template>
  <TableToList :items="items" :config="config" />
</template>

📚 Komponensek

UI Komponensek (25+)

Táblázatok

• TableToList - Reszponzív táblázat card nézettel, localStorage perzisztenciával
• TableToListOptions - Oszlop láthatóság beállítások
• PaginatorControl - Lapozó vezérlő

Form Kontrollok

• DropDown - Legördülő menü szűréssel és billentyűzet támogatással
• DropDownButton - Legördülő + akciógomb kombó
• CheckBox / CheckBoxList - Checkbox komponensek
• RadioButton / RadioButtonGroup - Radio gomb komponensek
• DateRangePicker / DateTimePicker - Dátum választók

Egyéb

• HeaderComponent - Fejléc gombok és címmel
• ToastWrapper / ToastComponent - Értesítések
• FilterControl / FilterCompact - Univerzális szűrők
• SpinningProgress - Betöltő animáció

Vueform Elemek

• ImagePickerElement - Kép választó külső widget integrációval
• ArticlePickerElement - Cikk választó
• PartnerPickerElement - Partner választó
• GalleryImageSelectorElement - Galéria kép választó
• És még sok más...

🔧 Szolgáltatások

User Store (Pinia)

import { useCurrentUser } from 'admins-components'

const userStore = useCurrentUser()
await userStore.initialize('https://api.example.com')

// Használat (nincs .value!)
console.log(userStore.displayName)
console.log(userStore.isAuthenticated)
if (userStore.hasRole('admin')) { ... }

HTTP Services

import { useArticleEditorService } from 'admins-components'

const service = useArticleEditorService('https://api.example.com')
service.searchPosts.successCallback = (data) => { ... }
service.searchPosts.execute()

🔨 Fejlesztés

npm install          # Függőségek
npm run dev          # Dev szerver (App.vue demo)
npm run build        # Library build
npm run preview      # Preview build

💡 Példák

Nézd meg az src/App.vue fájlt működő példákért minden komponenshez!

Made with ❤️ for Hungarian content management systems