@modeltables/fontawesome-vuetify 1.0.2 → 1.0.5

package/components/headerFilters/Filters.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+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';
+
+export default {
+    components: {
+        Date,
+        Number,
+        Text,
+        FontAwesomeIcon
+    },
+    props: {
+        item: {
+            type: Object,
+            required: true
+        },
+        filters: {
+            type: Object,
+            required: true
+        },
+        showFilters: {
+            type: Boolean,
+            required: true
+        },
+        key: {
+            type: String,
+            required: false
+        },
+        prop: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            item: this.item,
+            index: this.index,
+            filters: this.filters,
+            showFilters: this.showFilters,
+            key: this.key,
+            hashTag: faHashtag,
+            isString: isString,
+            isNumber: isNumber,
+            isDateTime: isDateTime
+        }
+    },
+    methods: {
+        filterValue(event: any, filter: any){
+            this.$emit('filterValue', event, filter);
+        },
+        filterDate(event: any, filter: any){
+            this.$emit('filterValue', event, filter);
+        }
+    }
+}
+</script>
+<template>
+    <span v-if="prop == key!">
+        <FontAwesomeIcon :icon="hashTag"></FontAwesomeIcon>
+    </span>
+    <span v-else>
+        <div v-if="isNumber(item[prop])">
+            <Number 
+                :filter="filters[prop]" 
+                :prop="prop":data="filters" 
+                @filterValue="filterValue($event, filters[prop])">
+            </Number>
+        </div>
+        <div v-else-if="isDateTime(item[prop])">
+            <Date 
+                :data="filters" 
+                :filter="filters[prop]" 
+                :prop="prop" 
+                @filterValue="filterDate($event, filters[prop])">
+            </Date>
+        </div>
+        <div v-else-if="isString(item[prop])">
+            <Text 
+                :data="filters" 
+                :filter="filters[prop]"
+                :prop="prop" 
+                @filterValue="filterValue($event, filters[prop])">
+            </Text>
+        </div>
+    </span>
+</template>

package/components/helpers/instances.ts

@@ -0,0 +1,20 @@
+export const isNumber = (n: any) => { 
+    return !isNaN(parseFloat(n)) && !isNaN(n - 0) 
+}
+
+export const isDateTime = (d: any) =>{
+    if(/^[\d]{4}-[\d]{2}-[\d]{2}T[\d]{2}:[\d]{2}:[\d]{2}.[\d]+$/.test(d)){
+        let datetime = new window.Date(d);
+        return datetime instanceof window.Date;
+    }
+    return false;
+}
+
+export const isString = (s: any) =>{
+    return typeof s === 'string' || s instanceof String;
+}
+
+export const toDate = (value: any) => {
+    const date = new Date(value);
+    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+}

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/table-models';
+export { HeaderModel, PaginatonModel, PaginatedResponse } from './models/tablemodels';
 
 /*! 
 * Vuetify Labs v3.4.0 by vuetify - https://vuetifyjs.com

package/components/index.js

@@ -0,0 +1,7 @@
+// Minimal build entry for Vue CLI pages
+console.log('components/index.js loaded for build');
+
+// If you want to mount a demo app during build, import Vue and mount here.
+// import { createApp } from 'vue';
+// import App from './App.vue';
+// createApp(App).mount('#app');

package/components/models/tablemodels.d.ts

@@ -0,0 +1,20 @@
+export declare class HeaderModel {
+    title: string;
+    key?: string;
+    sort?: any;
+}
+
+export declare class PaginatonModel {
+    PageCount: number;
+    PerPage: number;
+    CurrentPage: number;
+    TotalCount: number;
+}
+
+export declare class PaginatedResponse<T> {
+    PageSize?: number;
+    PageCount?: number;
+    CurrentPage?: number;
+    TotalCount?: number;
+    Items: Array<T>;
+}

package/components/models/tablemodels.js

@@ -0,0 +1,26 @@
+export class HeaderModel {
+  constructor() {
+    this.title = '';
+    this.key = undefined;
+    this.sort = undefined;
+  }
+}
+
+export class PaginatonModel {
+  constructor() {
+    this.PageCount = 1;
+    this.PerPage = 10;
+    this.CurrentPage = 1;
+    this.TotalCount = 0;
+  }
+}
+
+export class PaginatedResponse {
+  constructor() {
+    this.PageSize = undefined;
+    this.PageCount = undefined;
+    this.CurrentPage = undefined;
+    this.TotalCount = undefined;
+    this.Items = [];
+  }
+}

package/components/pagination/PaginationView.vue

@@ -1,8 +1,12 @@
 <script lang="ts">
 import { faArrowAltCircleDown } from '@fortawesome/free-regular-svg-icons';
 import { faChevronLeft, faChevronRight, faFastBackward, faFastForward } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default {
+    components: {
+        FontAwesomeIcon: FontAwesomeIcon
+    },
     props: {
         totalCount: {
             type: Number,

package/components/search/SearchView.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+import { faRefresh, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+export default {
+    components: {
+        FontAwesomeIcon: FontAwesomeIcon
+    },
+    props: {
+        showFilters: {
+            type: Boolean,
+            required: true
+        }
+    },
+    data() {
+        return {
+            showFilters: this.showFilters,
+            faSearch: faSearch,
+            reload: faRefresh
+        }
+    },
+    methods: {
+        search(){
+            this.$emit('search');
+        },
+        refresh(){
+            this.$emit('refresh');
+        }
+    }
+}
+</script>
+
+<template>
+    <v-btn @click="search()" style="margin-right: 10px" color="#1697f6" v-if="showFilters" v-tooltip="'Search'">
+        <FontAwesomeIcon :icon="faSearch"></FontAwesomeIcon>
+    </v-btn>
+    <v-btn @click="refresh()" style="margin-right: 10px" color="#1697f6" v-if="showFilters" v-tooltip="'Refresh'">
+        <FontAwesomeIcon :icon="reload"></FontAwesomeIcon>
+    </v-btn>
+
+</template>

package/components/table/TableView.vue

@@ -1,44 +1,43 @@
 <script lang="ts">
 import { ref } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { faCalendar } from '@fortawesome/free-regular-svg-icons';
-import { faRefresh, faSearch, faHashtag } from '@fortawesome/free-solid-svg-icons';
-import { HeaderModel, PaginatonModel } from '../models/table-models';
+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';
 
 export default {
   props: {
     dataheader: {
-      type: Array<HeaderModel>,
+      type: Array<HeaderModel[]>,
+      default: () => []
     },
     key: {
       type: String,
-      required: true,
       default: () => 'Id'
     },
     name: {
       type: String
     },
     dataItems: {
-      type: Array as () => any[],
-      reactive: true,
+      type: Array<Object[]>,
       required: true
     },
     currentItem: {
       type: Object,
-      reactive: true,
       required: false
-      
     },
     currentId: {
       type: Number,
-        reactive: true,
-        required: false
+      required: false
     },
     loading: {
       type: Boolean,
@@ -80,7 +79,10 @@ export default {
     Text: Text,
     Number: Number,
     SortView: SortView,
-    PaginationView: PaginationView
+    PaginationView: PaginationView,
+    Filters: Filters,
+    DataItem: DataItem,
+    Search: Search
   },
   mounted() {
     this.firstChange = true;
@@ -102,14 +104,9 @@ export default {
     }
   },
   emits: [change, load, rowClick, search],
-  setup(props, params) {
-    const modelValue = ref([]);
-    return { modelValue };
-  },
   data() {
     return {
       dataheader: this.dataheader,
-      calendar: faCalendar,
       dataItems: this.dataItems,
       dialog: false,
       new: true,
@@ -130,7 +127,6 @@ export default {
       page: this.pagination!.CurrentPage,
       pageCount: this.pagination!.PageCount,
       totalCount:this.pagination!.TotalCount,
-      hashTag: faHashtag,
       showTime: this.showTime,
     };
   },
@@ -192,23 +188,6 @@ export default {
     isNumber(n: any) { 
       return !isNaN(parseFloat(n)) && !isNaN(n - 0) 
     },
-    isDateTime(d: any){
-      if(/^[\d]{4}-[\d]{2}-[\d]{2}T[\d]{2}:[\d]{2}:[\d]{2}.[\d]+$/.test(d)){
-        let datetime = new window.Date(d);
-        return datetime instanceof window.Date;
-      }
-      return false;
-    },
-    isString(s: any){
-      return typeof s === 'string' || s instanceof String;
-    },
-    toDate(d: any){
-      if(this.showTime){
-        return (new window.Date(d).toLocaleDateString()) + " " + (new window.Date(d).toLocaleTimeString());
-      }
-
-      return (new window.Date(d).toLocaleDateString());
-    },
     options(event: any){
       this.page = event!.page;
       this.filters.CurrentPage = this.page;
@@ -298,47 +277,24 @@ export default {
             </tr>
             <tr v-if="index == 0 && showFilters" class="filter-items" >
               <td v-for="(prop, index) in Object.keys(item)">
-                <span v-if="prop == key!">
-                  <FontAwesomeIcon :icon="hashTag"></FontAwesomeIcon>
-                </span>
-                <span v-else>
-                  <div v-if="isNumber(item[prop])">
-                    <Number 
-                      :filter="filters[prop]" 
-                      :prop="prop":data="filters" 
-                      @filterValue="filterValue($event, filters[prop])">
-                    </Number>
-                  </div>
-                  <div v-else-if="isDateTime(item[prop])">
-                    <Date 
-                      :data="filters" 
-                      :filter="filters[prop]" 
-                      :prop="prop" 
-                      @filterValue="filterDate($event, filters[prop])">
-                    </Date>
-                  </div>
-                  <div v-else-if="isString(item[prop])">
-                    <Text 
-                      :data="filters" 
-                      :filter="filters[prop]"
-                      :prop="prop" 
-                      @filterValue="filterValue($event, filters[prop])">
-                    </Text>
-                  </div>
-                </span>
+                <Filters 
+                  :item="item" 
+                  :filters="filters" 
+                  :showFilters="showFilters" 
+                  :key="key"
+                  :prop="prop"
+                  @filterValue="filterValue($event, filters[prop])">
+                </Filters>
               </td>
             </tr>
             <tr @dblclick="updateItem(item, $event)">
               <td v-for="(prop) in Object.keys(item)">
-                <span v-if="prop == key!">
-                    {{ index + 1 }}
-                </span>
-                <span v-else-if="isDateTime(item[prop])">
-                    {{ toDate(item[prop]) }}
-                </span>
-                <span v-else>
-                    {{ item[prop] }}
-                </span>
+                <DataItem 
+                  :item="item" 
+                  :prop="prop" 
+                  :key="key"
+                  :index="index">
+                </DataItem>
               </td>
             </tr>
           </template>

package/components/table/data/ItemView.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { isDateTime, toDate } from '../../helpers/instances';
+    export default {
+        props: {
+            item: {
+                type: Object,
+                required: true
+            },
+            index: {
+                type: Number,
+                required: true
+            },
+            prop: {
+                type: String,
+                required: true
+            },
+            key: {
+                type: String,
+                required: false
+            }
+        },
+        data() {
+            return {
+                item: this.item,
+                index: this.index,
+                prop: this.prop,
+                key: this.key,
+                isDateTime: isDateTime,
+                toDate: toDate
+            }
+        }
+    }
+
+</script>
+<template>
+    <span v-if="prop == key!">
+        {{ index + 1 }}
+    </span>
+    <span v-else-if="isDateTime(item[prop])">
+        {{ toDate(item[prop]) }}
+    </span>
+    <span v-else>
+        {{ item[prop] }}
+    </span>
+</template>