@tablemodels/fontawesome-vuetify 1.0.5

package/components/headerFilters/Date.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { faCalendar } from '@fortawesome/free-regular-svg-icons';
+    export default {
+        props: {
+            data: {
+                type: Object,
+                required: true
+            },
+            filter: {
+                type: Object,
+                required: true
+            },
+            prop: {
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                data: this.data,
+                filter: this.filter,
+                prop: this.prop,
+                calendar: faCalendar
+            }
+        },
+        methods: {
+            filterDate(event: any){
+                this.data[this.prop] = event.target.value;
+                this.$emit('filterValue', event);
+            }
+        }
+    }
+</script>
+
+<template>
+    <v-date-input :prepend-icon="''" label="Date input" @save="filterDate($event)" :v-model="data" :model-value="filter">
+        <template v-if="calendar" #prepend-inner>
+            <FontAwesomeIcon :icon="calendar" />
+        </template>
+    </v-date-input>
+</template>

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/headerFilters/Number.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+    export default {
+        props: {
+            data: {
+                type: Object,
+                required: true
+            },
+            filter: {
+                type: Object,
+                required: true
+            },
+            prop: {
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                data: this.data,
+                filter: this.filter,
+                prop: this.prop
+            }
+        },
+        methods: {
+            filterValue(event: any, prop: string){
+                this.data[this.prop] = event.target.value;
+                this.$emit('filterValue', event, prop);
+            }
+        }
+    }
+</script>
+
+<template>
+    <v-number-input 
+        @blur="filterValue($event, prop)" 
+        :v-model="data" 
+        :model-value="filter" 
+        :precision="2" 
+        control-variant="hidden">
+    </v-number-input>
+</template>

package/components/headerFilters/Text.vue

@@ -0,0 +1,39 @@
+<script lang="ts">
+    export default {
+        props: {
+            data: {
+                type: Object,
+                required: true
+            },
+            filter: {
+                type: Object,
+                required: true
+            },
+            prop: {
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                data: this.data,
+                filter: this.filter,
+                prop: this.prop
+            }
+        },
+        methods: {
+            filterValue(event: any){
+                this.data[this.prop] = event.target.value;
+                this.$emit('filterValue', event);
+            }
+        }
+    }
+</script>
+
+<template>
+    <v-text-field 
+        @blur="filterValue($event)" 
+        :v-model="data" 
+        :model-value="filter">
+    </v-text-field>
+</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/helpers/resources.ts

@@ -0,0 +1,5 @@
+export const change = 'change';
+export const load = 'load';
+export const rowClick = 'rowClick';
+export const search = 'search';
+export const Id = 'Id';

package/components/index.d.ts

@@ -0,0 +1,14 @@
+/*! @licence MIT */
+
+export { default as TableView } from "./table/TableView.vue";
+export { HeaderModel, PaginatonModel, PaginatedResponse } from './models/tablemodels';
+
+/*! 
+* Vuetify Labs v3.4.0 by vuetify - https://vuetifyjs.com
+* Licensed under the MIT License (MIT), see LICENSE.
+* Copyright 2025S Vuetify Labs, Inc.
+
+* Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com
+* License - https://fontawesome.com/license/free - MIT License
+* Copyright 2025 Fonticons, Inc.
+*/

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/models/tablemodels.ts

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

package/components/pagination/PaginationView.vue

@@ -0,0 +1,118 @@
+<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,
+            required: true
+        },
+        pageCount: {
+            type: Number,
+            required: true
+        },
+        perPage: {
+            type: Number,
+            required: true
+        },
+        page: {
+            type: Number,
+            required: true
+        }
+    },
+    data() {
+        return {
+            totalCount: this.totalCount,
+            pageCount: this.pageCount,
+            perPage: this.perPage,
+            page: this.page,
+            arrowDown: faArrowAltCircleDown,
+            chevronLeft: faChevronLeft,
+            chevronRight: faChevronRight,
+            fastBackward: faFastBackward,
+            fastForward: faFastForward
+        }
+    },
+    methods: {
+        pageChange(event: any){
+            this.$emit('pageChange', event);
+        },
+        pageSize(event: any){
+            this.$emit('pageSize', event);
+        },
+        firstPage(event: any){
+            this.$emit('firstPage', event);
+        },
+        lastPage(event: any){
+            this.$emit('lastPage', event);
+        },
+        previousPage(event: any){
+            this.$emit('previousPage', event);
+        },
+        nextPage(event: any){
+            this.$emit('nextPage', event);
+        }
+    }
+}
+
+</script>
+
+<template>
+    <v-row class="text-center px-4 align-center" wrap>
+        <v-col class="text-truncate" cols="12" md="2">
+            Total {{ totalCount }} records
+        </v-col>
+        <v-col cols="12" md="8">
+            <v-pagination
+                v-model="page"
+                :prev-icon="''"
+                :next-icon="''"
+                :width="'200px'"
+                :length="pageCount"
+                @update:model-value="pageChange($event)">
+                <template v-if="fastBackward" #prev>
+                    <div style="display:flex; margin-top: 6px;">
+                    <v-btn v-if="pageCount > 1" @click="firstPage($event)" style="margin-right: 10px;">
+                        <FontAwesomeIcon :icon="fastBackward" color="#303133"/>
+                    </v-btn>
+                    <v-btn v-if="pageCount > 1" @click="previousPage($event)">
+                        <FontAwesomeIcon color="#303133" :icon="chevronLeft"/>
+                    </v-btn>
+                    </div>
+                </template>
+                <template v-if="chevronLeft" #next>
+                    <div style="display:flex; margin-top: 6px;">
+                    <v-btn v-if="pageCount > 1" @click="nextPage($event)">
+                        <FontAwesomeIcon color="#303133" :icon="chevronRight"/>
+                    </v-btn>
+                    <v-btn v-if="pageCount > 1" @click="lastPage($event)" style="margin-left: 10px;">
+                        <FontAwesomeIcon color="#303133" :icon="fastForward"/>
+                    </v-btn>
+                    </div>
+                </template>
+            </v-pagination>
+        </v-col>
+        <v-col cols="12" md="2">
+            <v-select 
+                v-if="pageCount > 1"
+                dense
+                outlined
+                hide-details
+                :value="perPage"
+                :menu-icon="''"
+                label="Items per page"
+                :items="[10,20,50,100]"
+                @update:modelValue="pageSize($event)">
+                <template v-if="arrowDown" #append-inner>
+                    <FontAwesomeIcon :icon="arrowDown" />
+                </template>
+            </v-select>
+        </v-col>
+    </v-row>
+
+</template>

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/sort/SortView.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons';
+export default {
+    components: {
+        FontAwesomeIcon
+    },
+    props: {
+        prop: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            required: true
+        }
+    },
+    data() {
+        return {
+            prop: this.prop,
+            index: this.index,
+            carretDown: faCaretDown,
+            carretUp: faCaretUp
+        }
+    },
+    methods: {
+        sort(event: any, prop: any, index: number){
+            this.$emit('sort', event, prop, index);
+        }
+    }
+}
+</script>
+
+<template>
+    <div style="display: flex">
+        {{ prop.title }} 
+        <div v-if="prop.sort">
+            <FontAwesomeIcon @click="sort($event, prop, index)" :icon="carretDown"></FontAwesomeIcon>
+        </div>
+        <div v-else>
+            <FontAwesomeIcon @click="sort($event, prop, index)" :icon="carretUp"></FontAwesomeIcon>
+        </div>
+    </div>
+    
+</template>