admins-components 5.0.21 → 5.2.0

package/README.md

@@ -1,5 +1,162 @@
-# Vue 3 + TypeScript + Vite
+# Admins Components Library
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+> Professzionális Vue 3 komponens könyvtár Bootstrap 5 és Vueform alapokon, magyar tartalom kezelő rendszerekhez.
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+[![Version](https://img.shields.io/badge/version-5.1.0-blue.svg)](package.json)
+[![Vue](https://img.shields.io/badge/vue-3.5+-green.svg)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/typescript-5.7+-blue.svg)](https://www.typescriptlang.org/)
+
+## 🎯 Á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
+
+```bash
+npm install admins-components
+```
+
+### Alapvető Használat
+
+```typescript
+// 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
+
+```vue
+<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...
+
+[Teljes komponens lista →](docs/COMPONENTS.md)
+
+## 🔧 Szolgáltatások
+
+### User Store (Pinia)
+
+```typescript
+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')) { ... }
+```
+
+[Részletes dokumentáció →](docs/CURRENT_USER_STORE.md)
+
+### HTTP Services
+
+```typescript
+import { useArticleEditorService } from 'admins-components'
+
+const service = useArticleEditorService('https://api.example.com')
+service.searchPosts.successCallback = (data) => { ... }
+service.searchPosts.execute()
+```
+
+[Részletes dokumentáció →](docs/SERVICES.md)
+
+## 📖 Teljes Dokumentáció
+
+### 🎯 Alapvető Dokumentáció
+- **[User Store](docs/CURRENT_USER_STORE.md)** - Felhasználó kezelés és jogosultságok (Pinia)
+- **[Komponensek](docs/COMPONENTS.md)** - Összes komponens referencia (25+ komponens)
+- **[Vueform Elemek](docs/VUEFORM_ELEMENTS.md)** - Custom form elemek (9 element)
+- **[Szolgáltatások](docs/SERVICES.md)** - HTTP service layer és API integráció
+
+### 🔧 További Dokumentáció
+- **[Segédprogramok](docs/UTILITIES.md)** - Toast, dátumkezelés, debounce, persister
+- **[API Referencia](docs/API_REFERENCE.md)** - Teljes típus és interface dokumentáció
+- **[Fejlesztői Útmutató](docs/DEVELOPMENT.md)** - Komponens/service hozzáadása, build folyamat
+- **[Példák](docs/EXAMPLES.md)** - Komplex használati esetek és teljes munkamenet példák
+- **[Hibaelhárítás](docs/TROUBLESHOOTING.md)** - Gyakori problémák és megoldások
+
+### 📌 Gyors Linkek
+- [CRUD Táblázat Példa](docs/EXAMPLES.md#admin-táblázat-crud)
+- [Vueform Integráció](docs/EXAMPLES.md#cikkválasztó-űrlap)
+- [User Auth Pattern](docs/EXAMPLES.md#felhasználó-kezelés)
+- [Komponens Hozzáadása](docs/DEVELOPMENT.md#komponens-hozzáadása)
+- [Service Létrehozása](docs/DEVELOPMENT.md#service-hozzáadása)
+- [TypeScript Típusok](docs/API_REFERENCE.md)
+- [Gyakori Hibák](docs/TROUBLESHOOTING.md)
+
+## 🔨 Fejlesztés
+
+```bash
+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