@modeltables/fontawesome-vuetify 2.8.0 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +50 -53
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,70 +1,67 @@
1
- @modeltables/fontawesome-vuetify — focused Vue table toolkit
1
+ @modeltables/fontawesome-vuetify
2
2
 
3
- @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.
4
-
5
- Why use @modeltables/fontawesome-vuetify?
6
-
7
- - Easy to use: helpful wrappers for headers, filters and table views so your grids look intentional from the start.
8
- - Reactive by design: components update predictably with Vue reactivity as your data or form state changes.
9
- - Lightweight: small surface area and minimal runtime overhead so your bundle stays lean.
10
- - Customizable: swap icons, change sizes, or theme with your existing Vuetify setup without touching core logic.
11
- - Accessibility-minded: uses clear affordances and aria-friendly patterns to improve form and table clarity.
12
-
13
- Install
3
+ --Install
14
4
 
15
5
  ```bash
16
6
  pnpm add @modeltables/fontawesome-vuetify
17
7
  ```
18
8
 
19
- Quick start
20
-
21
- Import the components or helpers you need and register them in your app. Example (single-file component):
9
+ --Quick start
22
10
 
23
- ```vue
24
- <script setup lang="ts">
25
- import TableView from '@tablemodels/table/TableView.vue'
26
- </script>
27
-
28
- <template>
29
- <div>
30
- <SearchView />
31
- <TableView />
32
- </div>
33
- </template>
11
+ 1. Import table component
12
+ ```ts
13
+ <Table
14
+ v-if="dataItems.length"
15
+ :options="{
16
+ Key: 'OrderNumber',
17
+ Active: false,
18
+ ShowKey: true
19
+ }"
20
+ :dataheader="dataheader"
21
+ :showFilters="true"
22
+ :loading="loading"
23
+ :pagination="pagination"
24
+ v-bind:currentItem="currentItem"
25
+ :dataItems="dataItems"
26
+ :crud="false"
27
+ @load="load($event)"
28
+ @search="search($event)"
29
+ @rowClick="updateItem($event)">
34
30
  ```
35
-
36
- Core models
37
-
38
- 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:
39
-
40
- - HeaderModel — column metadata (title, key, sort).
41
- - PaginatonModel — pagination state (PageCount, PerPage, CurrentPage, TotalCount).
42
- - PaginatedResponse<T> — generic paged response with `Items: T[]`.
43
- - Options — a simple option shape (`Key`, `ShowKey`, `Name`, `Active`).
44
-
45
- Example TypeScript snippet
31
+ 2. Create Typed Model
46
32
 
47
33
  ```ts
48
- import { PaginatedResponse, HeaderModel } from 'tablemodels'
49
-
50
- type Item = { id: number; name: string }
34
+ import { HeaderModel } from "@modeltables/fontawesome-vuetify";
35
+
36
+ export const paymentHeader: HeaderModel[] = [
37
+ {
38
+ title: 'Order Number'
39
+ },
40
+ {
41
+ title: 'Price'
42
+ },
43
+ {
44
+ title: 'Order Name'
45
+ },
46
+ {
47
+ title: 'Order Description'
48
+ },
49
+ {
50
+ title: 'PaymentDate'
51
+ }
52
+ ];
53
+ ```
51
54
 
52
- const page: PaginatedResponse<Item> = {
53
- PageSize: 10,
54
- PageCount: 3,
55
- CurrentPage: 1,
56
- TotalCount: 25,
57
- Items: []
58
- }
55
+ --Documentation
56
+
57
+ You should probably import main component and make a quick look at model table in your database.
59
58
 
60
- const col = new HeaderModel()
61
- col.title = 'Name'
62
- col.key = 'name'
63
- ```
59
+ Before populating table, think about right types and order of models.
60
+ Table should exsist with at least one virtual element at runtime, with filter option enabled.
64
61
 
65
- Contributing
62
+ Default events for cordinate items are load and search, with accompanying events for follow table data.
66
63
 
67
- PRs and issues welcome open an issue to discuss larger changes first. Keep changes focused and lightweight.
64
+ Loading is mandatory while data items are retreving with option to use crud operation and right tool.
68
65
 
69
66
  License
70
67
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@modeltables/fontawesome-vuetify",
3
- "version": "2.8.0",
3
+ "version": "2.9.0",
4
4
  "description": "",
5
5
  "main": "./components/index.d.ts",
6
6
  "type": "module",