@modeltables/fontawesome-vuetify 2.8.0 → 3.0.0

package/README.md

@@ -1,70 +1,77 @@
-@modeltables/fontawesome-vuetify — focused Vue table toolkit
+@modeltables/fontawesome-vuetify
 
-@modeltables/fontawesome-vuetify is a small, practical Vue library that makes building polished data tables quick and painless. It provides ready-to-use components and TypeScript helpers you can drop into Vuetify or plain Vue apps to add filtering, sorting, searching and pagination with minimal setup.
-
-Why use @modeltables/fontawesome-vuetify?
-
-- Easy to use: helpful wrappers for headers, filters and table views so your grids look intentional from the start.
-- Reactive by design: components update predictably with Vue reactivity as your data or form state changes.
-- Lightweight: small surface area and minimal runtime overhead so your bundle stays lean.
-- Customizable: swap icons, change sizes, or theme with your existing Vuetify setup without touching core logic.
-- Accessibility-minded: uses clear affordances and aria-friendly patterns to improve form and table clarity.
-
-Install
+--Install
 
 ```bash
 pnpm add @modeltables/fontawesome-vuetify
 ```
 
-Quick start
+--Quick start
 
-Import the components or helpers you need and register them in your app. Example (single-file component):
+1. Create Header and DataItem Model
 
-```vue
-<script setup lang="ts">
-import TableView from '@tablemodels/table/TableView.vue'
-</script>
-
-<template>
-	<div>
-		<SearchView />
-		<TableView />
-	</div>
-</template>
+```ts
+import { HeaderModel } from "@modeltables/fontawesome-vuetify";
+
+export const header: HeaderModel[] = [
+  {
+    title: 'Order Number'
+  },
+  {
+    title: 'Price'
+  },
+  {
+    title: 'Order Name'
+  },
+  { 
+    title: 'Order Description'
+  },
+  { 
+    title: 'PaymentDate'
+  }
+];
+
+export const header: ExampleModel[] = [
+  	OrderNumber: number = 0;
+    Price?: number;
+	OrderName?: string;
+    OrderDescription?: string;
+	PaymentDate?: Date;
+];
 ```
 
-Core models
-
-The package includes a small TypeScript models module (see `components/models/tablemodels.ts`) that the components use and that you can reuse in your services:
-
-- HeaderModel — column metadata (title, key, sort).
-- PaginatonModel — pagination state (PageCount, PerPage, CurrentPage, TotalCount).
-- PaginatedResponse<T> — generic paged response with `Items: T[]`.
-- Options — a simple option shape (`Key`, `ShowKey`, `Name`, `Active`).
-
-Example TypeScript snippet
+2. Import table component
 
 ```ts
-import { PaginatedResponse, HeaderModel } from 'tablemodels'
-
-type Item = { id: number; name: string }
+<Table 
+	v-if="dataItems.length"
+	:options="{
+		Key: 'OrderNumber',
+		Active: false,
+		ShowKey: true
+	}"
+	:dataheader="dataheader" 
+	:showFilters="true"
+	:loading="loading"  
+	:pagination="pagination"
+	v-bind:currentItem="currentItem"
+	:dataItems="dataItems"
+	:crud="false"
+	@load="load($event)"
+	@search="search($event)"
+	@rowClick="rowClick($event)">
+```
 
-const page: PaginatedResponse<Item> = {
-	PageSize: 10,
-	PageCount: 3,
-	CurrentPage: 1,
-	TotalCount: 25,
-	Items: []
-}
+--Documentation
+ 
+You should probably import main component and make a quick look at model table in your database.
 
-const col = new HeaderModel()
-col.title = 'Name'
-col.key = 'name'
-```
+Before populating table, think about right types and order of models.
+Table should exsist with at least one virtual element at runtime with filter option enabled.
 
-Contributing
+Default events for coordinated items are load and search with accompanying events for follow table data.
 
-PRs and issues welcome — open an issue to discuss larger changes first. Keep changes focused and lightweight.
+Loading is mandatory while data items are retreving with option to use crud operation and right tool. 
 
 License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modeltables/fontawesome-vuetify",
-  "version": "2.8.0",
+  "version": "3.0.0",
   "description": "",
   "main": "./components/index.d.ts",
   "type": "module",