@modeltables/fontawesome-vuetify 1.0.0

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/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/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/table-models';
+
+/*! 
+* 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/models/table-models.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,114 @@
+<script lang="ts">
+import { faArrowAltCircleDown } from '@fortawesome/free-regular-svg-icons';
+import { faChevronLeft, faChevronRight, faFastBackward, faFastForward } from '@fortawesome/free-solid-svg-icons';
+
+export default {
+    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/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>