@modeltables/fontawesome-vuetify 1.1.2 → 1.2.0

package/components/headerFilters/Filters.vue

@@ -2,9 +2,10 @@
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { isDateTime, isNumber, isString } from '../helpers/instances';
-import Date from '../headerFilters/Date.vue';
-import Number from '../headerFilters/Number.vue';
-import Text from '../headerFilters/Text.vue';
+import Date from '@/components/headerFilters/Date.vue';
+import Number from '@/components/headerFilters/Number.vue';
+import Text from '@/components/headerFilters/Text.vue';
+import { TableOptions } from '@/components/models/tablemodels';
 
 export default {
     components: {
@@ -26,9 +27,10 @@ export default {
             type: Boolean,
             required: true
         },
-        key: {
-            type: String,
-            required: false
+        options: {
+            type: TableOptions,
+            required: true,
+            default: () => new TableOptions()
         },
         prop: {
             type: String,
@@ -48,6 +50,11 @@ export default {
             isDateTime: isDateTime
         }
     },
+    watch: {
+        key(newVal: any) {
+            this.key = newVal;
+        },
+    },
     methods: {
         filterValue(event: any, filter: any){
             this.$emit('filterValue', event, filter);
@@ -59,7 +66,7 @@ export default {
 }
 </script>
 <template>
-    <span v-if="prop == key!">
+    <span v-if="prop == options.Key!">
         <FontAwesomeIcon :icon="hashTag"></FontAwesomeIcon>
     </span>
     <span v-else>

package/components/headerFilters/Number.vue

@@ -6,7 +6,7 @@
                 required: true
             },
             filter: {
-                type: Object,
+                type: Number,
                 required: true
             },
             prop: {
@@ -15,6 +15,7 @@
             }
         },
         data() {
+            console.log(this.filter);
             return {
                 data: this.data,
                 filter: this.filter,

package/components/index.d.ts

@@ -1,7 +1,7 @@
 /*! @licence MIT */
 
-export { default as TableView } from "./table/TableView.vue";
-export { HeaderModel, PaginatonModel, PaginatedResponse } from './models/tablemodels';
+export { default as TableView } from "@/components/table/TableView.vue";
+export { HeaderModel, PaginatonModel, PaginatedResponse, TableOptions } from '@/components/models/tablemodels';
 
 /*! 
 * Vuetify Labs v3.4.0 by vuetify - https://vuetifyjs.com

package/components/models/tablemodels.d.ts

@@ -18,3 +18,8 @@ export declare class PaginatedResponse<T> {
     TotalCount?: number;
     Items: Array<T>;
 }
+
+export declare class TableOptions {
+    Key?: string;
+    Name?: string;
+}

package/components/models/tablemodels.js

@@ -24,3 +24,10 @@ export class PaginatedResponse {
     this.Items = [];
   }
 }
+
+export class TableOptions {
+  constructor() {
+    this.Key = "Id";
+    this.Name = undefined;
+  }
+}

package/components/models/tablemodels.ts

@@ -17,4 +17,9 @@ export class PaginatedResponse<T>{
     CurrentPage?: number;
     TotalCount?: number;
     Items: Array<T> = []
+}
+
+export class TableOptions{
+    Key?: string;
+    Name?: string;
 }

package/components/sort/SortView.vue

@@ -1,11 +1,17 @@
 <script lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons';
+import { TableOptions } from '@/components/models/tablemodels';
 export default {
     components: {
         FontAwesomeIcon
     },
     props: {
+        options: {
+            type: TableOptions,
+            required: true,
+            default: () => new TableOptions()
+        },
         prop: {
             type: Object,
             required: true
@@ -17,12 +23,18 @@ export default {
     },
     data() {
         return {
+            key: this.key,
             prop: this.prop,
             index: this.index,
             carretDown: faCaretDown,
             carretUp: faCaretUp
         }
     },
+    watch: {
+        key(newVal: any) {
+            this.key = newVal;
+        },
+    },
     methods: {
         sort(event: any, prop: any, index: number){
             this.$emit('sort', event, prop, index);

package/components/table/TableView.vue

@@ -2,17 +2,17 @@
 import { ref } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { faRefresh, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { HeaderModel } from './../models/tablemodels';
-import { PaginatonModel } from './../models/tablemodels';
-import { change, Id, load, rowClick, search } from '../helpers/resources';
-import Date from '../headerFilters/Date.vue';
-import Search from '../search/SearchView.vue';
-import Text from '../headerFilters/Text.vue';
-import Number from '../headerFilters/Number.vue';
-import Filters from '../headerFilters/Filters.vue';
-import SortView from '../sort/SortView.vue';
-import PaginationView from '../pagination/PaginationView.vue';
-import DataItem from './data/ItemView.vue';
+import { HeaderModel, TableOptions } from '@/components/models/tablemodels';
+import { PaginatonModel } from '@/components/models/tablemodels';
+import { change, load, rowClick, search } from '@/components/helpers/resources';
+import Date from '@/components/headerFilters/Date.vue';
+import Search from '@/components/search/SearchView.vue';
+import Text from '@/components/headerFilters/Text.vue';
+import Number from '@/components/headerFilters/Number.vue';
+import Filters from '@/components/headerFilters/Filters.vue';
+import SortView from '@/components/sort/SortView.vue';
+import PaginationView from '@/components/pagination/PaginationView.vue';
+import DataItem from '@/components/table/data/ItemView.vue';
 
 export default {
   props: {
@@ -20,9 +20,10 @@ export default {
       type: Array<HeaderModel>,
       default: () => []
     },
-    key: {
-      type: String,
-      default: () => 'Id'
+    options: {
+      type: TableOptions,
+      required: false,
+      default: () => new TableOptions()
     },
     name: {
       type: String
@@ -108,12 +109,13 @@ export default {
   },
   emits: [change, load, rowClick, search],
   data() {
+    console.log(this.options);
     return {
       dataheader: this.dataheader,
       dataItems: this.dataItems,
       dialog: false,
       new: true,
-      key: this.key ?? Id,
+      options: this.options,
       name: this.name,
       currentId: this.currentId,
       currentItem: this.currentItem,
@@ -167,7 +169,7 @@ export default {
       if(!this.crud){
         this.rowClick(item);
       }else{
-        this.currentId = item[this.key!];
+        this.currentId = item[this.options.Key!];
         this.$emit(change, item);
       }
     },
@@ -191,7 +193,7 @@ export default {
     isNumber(n: any) { 
       return !isNaN(parseFloat(n)) && !isNaN(n - 0) 
     },
-    options(event: any){
+    optionschange(event: any){
       this.page = event!.page;
       this.filters.CurrentPage = this.page;
       this.search();
@@ -261,7 +263,7 @@ export default {
           :loading="loading"
           :v-bind:model-value="modelValue"
           :items="dataItems"
-          @update:options="options($event)"
+          @update:options="optionschange($event)"
           :items-per-page="perPage"
           :page="page"
           hide-default-header
@@ -284,7 +286,7 @@ export default {
                   :item="item" 
                   :filters="filters" 
                   :showFilters="showFilters" 
-                  :key="key"
+                  :options="options"
                   :prop="prop"
                   @filterValue="filterValue($event, filters[prop])">
                 </Filters>
@@ -295,7 +297,7 @@ export default {
                 <DataItem 
                   :item="item" 
                   :prop="prop" 
-                  :key="key"
+                  :options="options"
                   :index="index">
                 </DataItem>
               </td>

package/components/table/data/ItemView.vue

@@ -1,5 +1,7 @@
 <script lang="ts">
-    import { isDateTime, toDate } from '../../helpers/instances';
+    import { isDateTime, toDate } from '@/components/helpers/instances';
+    import { TableOptions } from '@/components/models/tablemodels';
+    
     export default {
         props: {
             item: {
@@ -14,9 +16,10 @@
                 type: String,
                 required: true
             },
-            key: {
-                type: String,
-                required: false
+            options: {
+                type: TableOptions,
+                required: false,
+                default: () => new TableOptions()
             }
         },
         watch: {
@@ -35,7 +38,7 @@
                 item: this.item,
                 index: this.index,
                 prop: this.prop,
-                key: this.key,
+                options: this.options,
                 isDateTime: isDateTime,
                 toDate: toDate
             }
@@ -44,7 +47,7 @@
 
 </script>
 <template>
-    <span v-if="prop == key!">
+    <span v-if="prop == options.Key!">
         {{ index + 1 }}
     </span>
     <span v-else-if="isDateTime(item[prop])">