@modeltables/fontawesome-vuetify 1.3.1 → 1.4.0

package/README.md

@@ -0,0 +1,73 @@
+@modeltables/fontawesome-vuetify — focused Vue table toolkit
+
+@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
+
+```bash
+pnpm add @modeltables/fontawesome-vuetify
+```
+
+Quick start
+
+Import the components or helpers you need and register them in your app. Example (single-file component):
+
+```vue
+<script setup lang="ts">
+import TableView from '@tablemodels/table/TableView.vue'
+</script>
+
+<template>
+	<div>
+		<SearchView />
+		<TableView />
+	</div>
+</template>
+```
+
+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
+
+```ts
+import { PaginatedResponse, HeaderModel } from 'tablemodels'
+
+type Item = { id: number; name: string }
+
+const page: PaginatedResponse<Item> = {
+	PageSize: 10,
+	PageCount: 3,
+	CurrentPage: 1,
+	TotalCount: 25,
+	Items: []
+}
+
+const col = new HeaderModel()
+col.title = 'Name'
+col.key = 'name'
+```
+
+Contributing
+
+PRs and issues welcome — open an issue to discuss larger changes first. Keep changes focused and lightweight.
+
+License
+
+ISC
+
+

package/components/headerFilters/Filters.vue

@@ -66,7 +66,7 @@ export default {
 }
 </script>
 <template>
-    <span v-if="prop == options.Key!">
+    <span v-if="prop == options.Key! && options.Active">
         <FontAwesomeIcon :icon="hashTag"></FontAwesomeIcon>
     </span>
     <span v-else>

package/components/models/tablemodels.d.ts

@@ -21,5 +21,7 @@ export declare class PaginatedResponse<T> {
 
 export declare class Options {
     Key?: string;
+    ShowKey: boolean;
     Name?: string;
+    Active: boolean;
 }

package/components/models/tablemodels.js

@@ -29,5 +29,7 @@ export class Options {
   constructor() {
     this.Key = "Id";
     this.Name = undefined;
+    this.ShowKey = false;
+    this.Active = true;
   }
 }

package/components/models/tablemodels.ts

@@ -21,5 +21,7 @@ export class PaginatedResponse<T>{
 
 export class Options{
     Key?: string;
+    ShowKey: boolean;
     Name?: string;
+    Active: boolean;
 }

package/components/sort/SortView.vue

@@ -54,6 +54,9 @@ export default {
             <FontAwesomeIcon @click="sort($event, prop, index)" :icon="carretUp"></FontAwesomeIcon>
         </div>
     </div>
+    <div v-else-if="options.Active">
+        {{ prop.title }}
+    </div>
     <div v-else>
         {{ prop.title }}
     </div>

package/components/table/data/ItemView.vue

@@ -48,7 +48,13 @@
 </script>
 <template>
     <span v-if="prop == options.Key!">
-        {{ index + 1 }}
+        <template v-if="options.ShowKey">
+            {{ item[prop] }}
+
+        </template>
+        <template v-else>
+            {{ index + 1 }}
+        </template>
     </span>
     <span v-else-if="isDateTime(item[prop])">
         {{ toDate(item[prop]) }}