@modeltables/fontawesome-vuetify 1.0.1 → 1.0.4

package/README.md

@@ -1,86 +0,0 @@
-@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/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/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,15 +1,17 @@
 <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 { faRefresh, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { HeaderModel, PaginatonModel } from '../models/table-models';
 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: {
@@ -80,7 +82,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 +107,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 +130,6 @@ export default {
       page: this.pagination!.CurrentPage,
       pageCount: this.pagination!.PageCount,
       totalCount:this.pagination!.TotalCount,
-      hashTag: faHashtag,
       showTime: this.showTime,
     };
   },
@@ -192,23 +191,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 +280,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>>
             <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>