@modeltables/fontawesome-vuetify 1.3.2 → 1.5.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

@@ -60,16 +60,16 @@ export default {
             this.$emit('filterValue', event, filter);
         },
         filterDate(event: any, filter: any){
-            this.$emit('filterValue', event, filter);
+            this.$emit('filterDate', event, filter);
         }
     }
 }
 </script>
 <template>
-    <span v-if="prop == options.Key!">
+    <span v-if="prop == options.Key! && options.Active">
         <FontAwesomeIcon :icon="hashTag"></FontAwesomeIcon>
     </span>
-    <span v-else>
+    <span v-else-if="prop">
         <div v-if="isNumber(item[prop])">
             <Number 
                 :filter="filters[prop]" 

package/components/models/tablemodels.d.ts

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

package/components/models/tablemodels.js

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

package/components/models/tablemodels.ts

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

package/components/sort/SortView.vue

@@ -57,5 +57,8 @@ export default {
     <div v-else-if="options.Active">
         {{ prop.title }}
     </div>
+    <div v-else>
+        {{ prop.title }}
+    </div>
     
 </template>

package/components/table/TableView.vue

@@ -173,25 +173,27 @@ export default {
         this.$emit(change, item);
       }
     },
-    filterValue(event: any, dataItem: any){
+    filterDate(event: any, dataItem: any){
       let item = dataItem;
-      let value = event.target.value;
       if(item != null){
-        dataItem = value == '' ? null : value;
+        dataItem = event == '' ? null : new window.Date(event);
       }else{
-        dataItem = value;
+        dataItem = new window.Date(event);
       }
     },
-    filterDate(event: any, dataItem: any){
+    filterValue(event: any, dataItem: any){
       let item = dataItem;
+      let value = event.target.value;
       if(item != null){
-        dataItem = event == '' ? null : new window.Date(event);
+        dataItem = value == '' ? null : value;
       }else{
-        dataItem = new window.Date(event);
+        dataItem = value;
       }
     },
-    isNumber(n: any) { 
-      return !isNaN(parseFloat(n)) && !isNaN(n - 0) 
+    isActive(index){
+      if(!this.options.Active && !this.options.ShowKey){
+        return index > 0;
+      }
     },
     optionschange(event: any){
       this.page = event!.page;
@@ -272,7 +274,8 @@ export default {
           return-object> 
           <template v-slot:item="{ item, index }" >
             <tr v-if="index == 0 && showFilters" class="filter-items" >
-              <td v-for="(prop, index) in dataheader">
+              <td v-for="(prop, index) in dataheader" 
+                  v-if="isActive(index)">
                 <SortView 
                   :prop="prop" 
                   :index="index" 
@@ -281,20 +284,23 @@ export default {
               </td>
             </tr>
             <tr v-if="index == 0 && showFilters" class="filter-items" >
-              <td v-for="(prop, index) in Object.keys(item)">
-                <Filters 
+              <td v-for="(prop, index) in Object.keys(item)" 
+                  v-if="isActive(index)">
+                <Filters
                   :item="item" 
                   :filters="filters" 
                   :showFilters="showFilters" 
                   :options="options"
                   :prop="prop"
+                  @filterDate="filterDate($event, filters[prop])"
                   @filterValue="filterValue($event, filters[prop])">
                 </Filters>
               </td>
             </tr>
             <tr @dblclick="updateItem(item, $event)">
-              <td v-for="(prop) in Object.keys(item)">
-                <DataItem 
+              <td v-for="(prop, index) in Object.keys(item)"  
+                  v-if="isActive(index)">
+                <DataItem
                   :item="item" 
                   :prop="prop" 
                   :options="options"

package/components/table/data/ItemView.vue

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