@modelforms/fontawesome-vuetify 1.0.4 → 2.1.0

package/components/form/Form.vue

@@ -43,7 +43,7 @@
                         :model="form.model"
                         :itemValue="col.complete.itemValue"
                         :items="col.complete.items"
-                        :title="col.complete.title"
+                        :filterKeys="col.complete.filterOptions"
                         :multiple="col.complete.multiple"
                         :label="col.label"
                         :rules="col.rules" 
@@ -89,7 +89,7 @@ export default{
     },
     props: {
         form: {
-            type: Object as () => GridModel,
+            type: Object as () => GridModel<any>,
             required: true
         }
     },
@@ -107,7 +107,7 @@ export default{
         value(event: any, name: string) {
             this.model[name] = event;
         },
-        init(form: GridModel) {
+        init(form: GridModel<any>) {
             for(let row of form.rows){
                 for(let col of row.cols){
                     this.model[col.name] = col.value;

package/components/form/complete/Complete.vue

@@ -1,6 +1,5 @@
 <template>  <v-container fluid>
     <v-autocomplete
-      ref="template"
       :v-model="model"
       :items="items"
       :item-title="title"
@@ -8,7 +7,7 @@
       :rules="rule"
       :search="value"
       :multiple="multiple"
-      :filter-keys="filterKeys"
+      :filter-keys="controlKeys"
       :menu-icon="defaultIcon"
       v-bind:model-value="value"
       @update:search="select($event)"
@@ -24,7 +23,7 @@
                         <FontAwesomeIcon v-if="square" v-bind:icon="item.props.icon" />
                     </v-col>
                     <v-col cols="10">
-                        <span>{{ item.data?.title }}</span>
+                        <span>{{ item.data![filterKeys.title] }}</span>
                     </v-col>
                 </v-row>
             </v-container>
@@ -38,14 +37,12 @@
     import { faArrowAltCircleDown, faSquare } from '@fortawesome/free-regular-svg-icons';
     import { faCheck } from '@fortawesome/free-solid-svg-icons';
     import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-    import { setRule } from '../functions/rules';
+    import { getFilterKeys, setRule } from '../functions/rules';
     import { RowItem, RowProps } from '../models/completeModels';
-    import { useTemplateRef } from 'vue';
-    import { addItem, removeItem } from '../functions/complete';
-    import { empty, defaultIcon, valueEvent, filterKeys, template } from '../models/resources';
-    import { CompleteItems } from '../models/formModels';
+    import { empty, defaultIcon, valueEvent, template, searchError } from '../models/resources';
+    import { FilterOptions } from '../models/formModels';
     import { initComponent } from '../functions/init';
-    import { findFirst } from '../functions/helper';
+    import {isEqual, onMethod } from '../functions/methods';
 
     export default{
         name: "CompleteControl",
@@ -58,11 +55,11 @@
                 type: Object
             },
             items: {
-                type: Array<CompleteItems>,
+                type: Array<Object>,
                 default: () => []
             },
             itemValue: {
-                type: Array<CompleteItems>,
+                type: Array<Object>,
                 default: () => []
             },
             title: {
@@ -77,6 +74,10 @@
             rules: {
                 type: Array<String>,
                 default: () => []
+            },
+            filterKeys: {
+                type: FilterOptions,
+                default: () => new FilterOptions()
             }
         },
         components: {
@@ -93,18 +94,17 @@
         },
         data() {
             return {
-                selected: [] as CompleteItems[],
-                unSelected: [] as CompleteItems[],
+                selected: [] as Object[],
+                unSelected: [] as Object[],
                 rows: [] as RowItem[],
                 rule: setRule(this.rules),
                 value: this.value,
-                ref: useTemplateRef('template'),
                 arrowDown: faArrowAltCircleDown,
                 square: faSquare,
                 check: faCheck,
                 search: empty,
                 defaultIcon: defaultIcon,
-                filterKeys: filterKeys,
+                controlKeys: getFilterKeys(this.filterKeys),
                 template: template
             }
         },
@@ -118,68 +118,109 @@
             blur(event) {
                 this.$emit(valueEvent, this.selected);
             },
-            multiSelect(value: CompleteItems) {
+            multiSelect(value: Object) {
                 this.unSelected = [];
                 
                 if(!this.selected.length){
                     this.unSelected = [value!];
-                    this.search = addItem(this.search, value)!;
+                    this.search = this.addItem(this.search, value)!;
                 }
-                else if(this.selected.some(element => element == value)){
-                    this.unSelected = this.selected.filter(element => element != value);
-                    this.search = removeItem(this.search, value)!;
+                else if(this.selected.some(element => isEqual(value, element))){
+                    this.unSelected = this.selected.filter(element => !isEqual(value, element));
+                    this.search = this.removeItem(this.search, value)!;
                 }else{
                     this.unSelected = [...this.selected, value!];
-                    this.search += addItem(this.search, value, false)!;
+                    this.search += this.addItem(this.search, value, false)!;
                 }
 
                 this.value = this.search;
                 this.selected = this.unSelected;
-                this.changedRows(this.items);
+                this.updateState(value);
             },
             initAriaRows(){
                 this.value = "";
                 this.ariaRows(this.items);
 
                 if(this.itemValue.length){
+                    console.log(this.itemValue);
                     for(let item of this.itemValue){
                         this.multiSelect(item);
                     }
                 }
             },
-            changeRow(value: CompleteItems, index) {
+            updateState(value: Object) {
                 for(let item of this.rows){
-                    if(item.id == index){
-                        findFirst(item.row)(value);
-                        findFirst(item.icon)(value);
-                        findFirst(item.active)(value);
+                    if(isEqual(item.data!, value)){
+                       onMethod(item.active, value);
                     }
                 }
             },
-            ariaRows(selected: CompleteItems[]) {
+            ariaRows(selected: Object[]) {
                 for(let i = 0; i < selected.length; i++){
                     this.ariarows(selected[i], i);
                 }
             },
-            changedRows(selected: CompleteItems[]) {
-                for(let i = 0; i < selected.length; i++){
-                    this.changeRow(selected[i], i);
-                }
-            },
-            ariarows(value: CompleteItems, index) {
+            ariarows(value: Object, index) {
                 const row: RowItem = {
                     id: index,
                     data: value,
                     props: new RowProps(),
-                    row: [(item: CompleteItems) => this.selected.some(element => element == item) ? row.props.row = 'active' : row.props.row = ''],
-                    icon: [(item: CompleteItems) => this.selected.some(element => element == item) ? row.props.icon = this.check : row.props.icon = this.square],
-                    active: [(item: CompleteItems) => this.template = this.ref!],
+                    active: [(item: Object) => {
+                        if(this.selected.some(element => item == element)){
+                            row.props.icon = this.check;
+                            row.props.row = 'active';
+                        }else{
+                            row.props.icon = this.square
+                            row.props.row = '';
+                        }
+                    }],
                 }
 
                 this.rows = [...this.rows, row];
 
                 return index;
             },
+            removeItem(search: string, value: Object) {
+                if(search == null || search == undefined){
+                    search = empty;
+                }
+
+                let lastIndex = search.indexOf(', ' + value[this.filterKeys.title]);
+
+                if(lastIndex >= 0){
+                    let title = ', ' + value[this.filterKeys.title];
+                    let s = search.indexOf(title);
+                    return search.substring(0, s) + search.substring(s + title.length, search.length);
+                }
+                
+                let firstIndex = search.indexOf(value[this.filterKeys.title]!);
+
+                if(firstIndex >= 0){
+                    let title = value[this.filterKeys.title]!;
+                    let s = search.indexOf(title);
+                    let result = search.substring(0, s) + search.substring(s + title.length, search.length);
+                    
+                    if(result.substring(0, 2) == ', '){
+                        return result.substring(2, result.length);
+                    }
+
+                    return result;
+                }
+
+                new Error(`${searchError} CompleteControl`);
+            },
+            addItem(compare: string, value: Object, first = true) {
+                if(value[this.filterKeys.title] == undefined){
+                    return empty;
+                }
+
+                if(!first){
+                    return ', ' + value[this.filterKeys.title];
+                }
+
+                return value[this.filterKeys.title];
+            }
+            
         }
     }
 

package/components/form/date/Date.vue

@@ -7,7 +7,7 @@
         :model-value="value"
         :prepend-icon="defaultIcon"
         @save="select($event)">
-            <template v-if="faCalendar" #append-inner>
+            <template v-if="faCalendar" #prepend-inner>
                 <FontAwesomeIcon :icon="faCalendar" />
             </template>
         </v-date-input>

package/components/form/functions/methods.ts

@@ -0,0 +1,25 @@
+import { firstIndex, index } from "../models/resources";
+
+export const findLast = (entries: string[]) => {
+    return entries[entries.length - index];
+}
+
+export const findFirst = (entires: any[]) => {
+    for(let entry of entires){
+        return entry;
+    }
+}
+
+export const onMethod = (method: any, value: Object) => {
+    method[firstIndex](value);
+}
+
+export const isEqual = (object1: Object, object2: Object) => {
+    for(let prop1 of Object.keys(object1)){
+        if(object1[prop1] != object2[prop1]){
+            return false;
+        }
+    }
+
+    return true;
+}

package/components/form/functions/rules.ts

@@ -1,6 +1,7 @@
+import { FilterOptions } from "../models/formModels";
 import { index, ruleError } from "../models/resources";
 import { componentType } from "./init";
-import { findFirst, findLast } from './helper';
+import { findFirst, findLast } from './methods';
 
 export const setRule = (rules: any) => {
     if(rules.length > 0){
@@ -34,6 +35,10 @@ const parseRules = (rules: string[]) => {
     }
 }
 
+export const getFilterKeys = (models: FilterOptions): string[] => {
+    return [models.title, models.name];
+}
+
 const getRules = (value: any, error = '') => {
     return [
         {'maxLen': [(v: any) => v?.length <= value || `Not grater than ${value} characters!`]},

package/components/form/helpers/parsers.ts

@@ -0,0 +1,37 @@
+import { CompleteModels, GridModel } from "../models/formModels";
+
+export class GridModelHelper<T> {
+   populateGridModel(gridModel: GridModel<T>, model: T) {
+        
+        for(let row of gridModel.rows){
+            for(let col of row.cols){
+                let name = model[col.name];
+
+                if(name != undefined){
+                    if(col.type == 'complete'){
+                        col.complete.itemValue = model[name];
+                        continue;
+                    }
+
+                    col.value = model[name];
+                }
+            }
+        }
+        
+        return gridModel;
+   }
+
+   populateCompletes(gridModel: GridModel<T>, completeModels: CompleteModels[]) {
+        for(let row of gridModel.rows){
+            for(let col of row.cols.filter(x=> x.type == 'complete')){
+                let model = completeModels.find(model => model.name == col.name);
+
+                if(model != undefined){
+                    col.complete.items = model.items;
+                }
+            }
+        }
+        
+        return gridModel;
+   }
+}

package/components/form/models/completeModels.ts

@@ -1,12 +1,9 @@
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
-import type { CompleteItems } from "./formModels";
 
 export class RowItem{
     id: number = 0;
-    data?: CompleteItems;
-    row: ((v: CompleteItems) => void)[] = [];
-    icon: ((v: CompleteItems) => void)[] = [];
-    active: ((v: CompleteItems) => void)[] = [];
+    data?: Object;
+    active: ((v: Object) => void)[] = [];
     props: RowProps = new RowProps();
 }
 
@@ -14,4 +11,5 @@ export class RowProps{
     row: string = '';
     icon: any = faSquare;
     active: boolean = false;
-}
+}
+

package/components/form/models/formModels.ts

@@ -1,8 +1,6 @@
-
-
-export class GridModel {
+export class GridModel<T> {
     name: string = "";
-    model: any;
+    model: T = Object.assign({});
     rows: Row[] = [];
 }
 
@@ -11,11 +9,15 @@ export class Row{
     cols: Col[] = [];
 }
 
-export class CompleteItems{
-    title?: '';
-    abbr?: 0
+export class CompleteModels{
+    name: string = '';
+    items: any[] = [];
 }
 
+export class FilterOptions {
+    title: string = '';
+    name: string = '';
+}
 
 class Col{
     name: string = "";
@@ -24,12 +26,12 @@ class Col{
     label: string = "";
     rules: string[] = [];
     size: number = 4;
-    complete: Complete = new Complete();
+    complete: Complete<any> = new Complete<any>();
 }
 
-class Complete{
-    items: CompleteItems[] = [];
-    itemValue: CompleteItems[] = [];
+class Complete<T>{
+    items: T[] = [];
+    itemValue: T[] = [];
     multiple?: boolean = false;
-    title: "title" | "abbr" = "title";
+    filterOptions: FilterOptions = new FilterOptions();
 }

package/components/form/models/resources.ts

@@ -13,4 +13,5 @@ export const controlVariant = 'hidden';
 export const filterKeys = ['title'];
 
 export const template = {};
-export const index = 1;
+export const index = 1;
+export const firstIndex = 0;

package/components/index.d.ts

@@ -2,6 +2,7 @@
 
 export { default as FormPlate } from "./form/Form.vue";
 export { GridModel } from './form/models/formModels';
+export { GridModelHelper } from './form/helpers/parsers';
 
 /*! 
 * Vuetify Labs v3.4.0 by vuetify - https://vuetifyjs.com
@@ -11,4 +12,4 @@ export { GridModel } from './form/models/formModels';
 * Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free - MIT License
 * Copyright 2025 Fonticons, Inc.
-*/
+*/