@modeltables/fontawesome-vuetify 1.0.1

package/README.md

@@ -0,0 +1,86 @@
+@modelforms/fontawesome-vuetify is a focused Vue library that
+modelforms-fontawesome-vuetify is a focused Vue library that brings Font Awesome icons into Vuetify-powered model forms with minimal fuss. It streamlines the process of decorating form fields with meaningful icons so forms feel polished and intuitive. Developers can rapidly prototype UIs by dropping in ready-made wrappers that handle both icon placement and Vuetify styling. Because it's built for the reactive Vue ecosystem, icons update predictably as form state changes. Customization is straightforward: swap icons, tweak sizes, or apply Vuetify themes without touching core logic. Accessibility is considered through aria-friendly patterns and clear visual affordances that help users understand form intent. The library’s lightweight design keeps your bundle lean while delivering a big UX payoff. Concise examples and clear documentation make it easy for new users to get productive in minutes. Whether you’re building an admin dashboard or a public-facing signup flow, it elevates both form clarity and aesthetics. In short, modelforms-fontawesome-vuetify is a practical toolkit for anyone who wants to combine the expressive power of Font Awesome with Vuetify’s polished components to make forms that both look and feel professional.
+
+#First step create component 
+
+```ts
+<template>
+    <FormComponent 
+        :form="form" 
+        @submit="submit($event)"/>
+
+</template>
+
+<script lang="ts">
+    import { FormPlate } from '@modelforms/fontawesome-vuetify';
+
+    export default {
+
+        components: {
+            FormComponent: FormPlate
+        },
+        data() {
+            return {
+                form: testForm
+            }
+        },
+        methods:{
+            submit(event){
+                console.log(event);
+            }
+        }
+    }
+</script>
+```
+
+#Second step create sub model
+
+```ts
+import { GridModel } from '@modelforms/fontawesome-vuetify';
+
+class UserModel {
+    name: string;
+    phone: any[] = []
+}
+
+export const testForm: GridModel<UserModel> = {
+  model: new UserModel(),
+  rows: [
+  {
+    colSize: 12,
+    cols: [
+      {
+        name: "name",
+        type: "text",
+        rules: {
+          rules: [(v) => v?.length <= 3 || "Not longer than 3!"]
+        },
+        label: "Name",
+        size: 12,
+      }
+    ]
+  },
+  {
+    colSize: 12,
+    cols: [
+      {
+        name: "Description",
+        type: "area",
+        label: "Description",
+        size: 6,
+      },
+      {
+        name: "phone",
+        type: "complete",
+        label: "Phone",
+        size: 12,
+        complete: {
+            items : [],
+            itemValue: [],
+            title: "title"
+        }
+      }
+    ]
+  }]
+}
+```

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>