@modelforms/fontawesome-vuetify 1.0.2 → 1.0.4

package/components/form/Form.vue

@@ -76,8 +76,8 @@ import Number  from './../form/number/Number.vue';
 import Date  from './../form/date/Date.vue';
 import Complete  from './../form/complete/Complete.vue';
 import Area  from './../form/area/Area.vue';
-import { GridModel } from './models/model';
-import { button, event } from './models/references';
+import { GridModel } from './models/formModels';
+import { button, event } from './models/resources';
 
 export default{
     components: {

package/components/form/area/Area.vue

@@ -2,9 +2,9 @@
   <v-container fluid>
     <v-textarea
         :v-model="model"
-        :model-value="value"
         :rules="rule"
         :label="label"
+        :model-value="value"
         @blur="blur($event)"
         counter
       ></v-textarea>
@@ -12,10 +12,12 @@
 </template>
 
 <script lang="ts">
+import { initComponent } from '../functions/init';
 import { setRule } from '../functions/rules';
-import { valueEvent } from './../models/references';
+import { valueEvent } from '../models/resources';
 
 export default{
+  name: "AreaControl",
   props: {
     value: {
       type: String,
@@ -36,6 +38,9 @@ export default{
     }
   },
   emits: [valueEvent],
+  setup(data){
+    initComponent(data, name);
+  },
   data() {
     return {
       rule: setRule(this.rules)

package/components/form/complete/Complete.vue

@@ -1,16 +1,16 @@
 <template>  <v-container fluid>
     <v-autocomplete
       ref="template"
-      menu-icon=""
       :v-model="model"
-      :filter-keys="['title']"
       :items="items"
       :item-title="title"
       :label="label"
       :rules="rule"
-      v-bind:model-value="value"
       :search="value"
       :multiple="multiple"
+      :filter-keys="filterKeys"
+      :menu-icon="defaultIcon"
+      v-bind:model-value="value"
       @update:search="select($event)"
       @blur="blur($event)">
         <template v-if="arrowDown" #append-inner>
@@ -36,15 +36,19 @@
 
 <script lang="ts">
     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 { CompleteItems, RowItem, RowProps } from './../models/h-model';
-    import { faCheck } from '@fortawesome/free-solid-svg-icons';
+    import { RowItem, RowProps } from '../models/completeModels';
     import { useTemplateRef } from 'vue';
     import { addItem, removeItem } from '../functions/complete';
-    import { valueEvent } from './../models/references';
+    import { empty, defaultIcon, valueEvent, filterKeys, template } from '../models/resources';
+    import { CompleteItems } from '../models/formModels';
+    import { initComponent } from '../functions/init';
+    import { findFirst } from '../functions/helper';
 
     export default{
+        name: "CompleteControl",
         props: {
             value: {
                 type: String,
@@ -84,6 +88,9 @@
                 this.initAriaRows();
             }
         },
+        setup(data){
+            initComponent(data, name);
+        },
         data() {
             return {
                 selected: [] as CompleteItems[],
@@ -95,14 +102,15 @@
                 arrowDown: faArrowAltCircleDown,
                 square: faSquare,
                 check: faCheck,
-                search: "",
-                template: {}
+                search: empty,
+                defaultIcon: defaultIcon,
+                filterKeys: filterKeys,
+                template: template
             }
         },
         methods: {
             select(event) {
                 if(event.length!) {
-                    console.log(event)
                     this.value = event;
                     this.$emit(valueEvent, this.items.find(item => item[this.title!] == event));
                 }
@@ -142,9 +150,9 @@
             changeRow(value: CompleteItems, index) {
                 for(let item of this.rows){
                     if(item.id == index){
-                        item.row[0](value);
-                        item.icon[0](value);
-                        item.active[0](value);
+                        findFirst(item.row)(value);
+                        findFirst(item.icon)(value);
+                        findFirst(item.active)(value);
                     }
                 }
             },

package/components/form/date/Date.vue

@@ -2,9 +2,10 @@
   <v-container fluid>
       <v-date-input
         :v-model="model"
-        :model-value="value"
         :rules="rule"
         :label="label"
+        :model-value="value"
+        :prepend-icon="defaultIcon"
         @save="select($event)">
             <template v-if="faCalendar" #append-inner>
                 <FontAwesomeIcon :icon="faCalendar" />
@@ -17,9 +18,11 @@
 import { faCalendar } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { setRule } from '../functions/rules';
-import { valueEvent } from './../models/references';
+import { defaultIcon, valueEvent } from '../models/resources';
+import { initComponent } from '../functions/init';
 
 export default {
+    name: "DateControl",
     components: {
     FontAwesomeIcon
     },
@@ -43,10 +46,14 @@ export default {
     }
     },
     emits: [valueEvent],
+    setup(data){
+        initComponent(data, name);
+    },
     data() {
     return {
         rule: setRule(this.rules),
-        faCalendar: faCalendar
+        faCalendar: faCalendar,
+        defaultIcon: defaultIcon
     }
     },
     methods: {

package/components/form/functions/complete.ts

@@ -1,8 +1,10 @@
-import { CompleteItems } from "../models/h-model";
+import { CompleteItems } from "../models/formModels";
+import { empty, searchError } from "../models/resources";
+import { componentType } from "./init";
 
 export const removeItem = (search: string, value: CompleteItems) => {
     if(search == null || search == undefined){
-        search = '';
+        search = empty;
     }
 
     let lastIndex = search.indexOf(', ' + value.title);
@@ -27,12 +29,12 @@ export const removeItem = (search: string, value: CompleteItems) => {
         return result;
     }
 
-    new Error('');
+    new Error(`${searchError} ${componentType.component}`);
 }
 
 export const addItem = (compare: string, value: CompleteItems, first = true) => {
     if(value.title == undefined){
-        return '';
+        return empty;
     }
 
     if(!first){

package/components/form/functions/helper.ts

@@ -0,0 +1,11 @@
+import { 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;
+    }
+}

package/components/form/functions/init.ts

@@ -0,0 +1,4 @@
+export let componentType;
+export const initComponent = (control, name) => {
+    componentType = { type: control, component: name };
+}

package/components/form/functions/rules.ts

@@ -1,3 +1,7 @@
+import { index, ruleError } from "../models/resources";
+import { componentType } from "./init";
+import { findFirst, findLast } from './helper';
+
 export const setRule = (rules: any) => {
     if(rules.length > 0){
         let rule = parseRules(rules);
@@ -7,10 +11,9 @@ export const setRule = (rules: any) => {
     }
 }
 
-const index = 1;
 const parseRules = (rules: string[]) => {
     for(let rule of rules){
-        let parts = rule.split(':');
+        let parts = rule.split(":");
 
         let rules = getRules(findLast(parts), parts[index]).map((value) => {
             var entries = Object.keys(value);
@@ -26,17 +29,8 @@ const parseRules = (rules: string[]) => {
             return findFirst(rules);
         }
 
-        new Error('');
-    }
-}
-
-const findLast = (entries: string[]) => {
-    return entries[entries.length - index];
-}
+        new Error(`${ruleError} ${componentType.component}`);
 
-const findFirst = (entires: any[]) => {
-    for(let entry of entires){
-        return entry;
     }
 }
 

package/components/form/models/{h-model.ts → completeModels.ts}

@@ -1,9 +1,5 @@
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
-
-export class CompleteItems{
-    title?: '';
-    abbr?: 0
-}
+import type { CompleteItems } from "./formModels";
 
 export class RowItem{
     id: number = 0;

package/components/form/models/{model.ts → formModels.ts}

@@ -1,4 +1,4 @@
-import { CompleteItems } from "./h-model";
+
 
 export class GridModel {
     name: string = "";
@@ -11,6 +11,12 @@ export class Row{
     cols: Col[] = [];
 }
 
+export class CompleteItems{
+    title?: '';
+    abbr?: 0
+}
+
+
 class Col{
     name: string = "";
     type: "text" | "number" | "date" | "complete" | "area" = "text";
@@ -26,4 +32,4 @@ class Complete{
     itemValue: CompleteItems[] = [];
     multiple?: boolean = false;
     title: "title" | "abbr" = "title";
-}
+}

package/components/form/models/resources.ts

@@ -0,0 +1,16 @@
+export const button = 'SUBMIT';
+export const event = 'submit';
+export const valueEvent = 'value';
+
+export const searchError = 'Wrong search parameter type!';
+export const ruleError = 'Wrong rule parameter type! ';
+
+export const empty = '';
+
+export const defaultIcon = '';
+
+export const controlVariant = 'hidden';
+export const filterKeys = ['title'];
+
+export const template = {};
+export const index = 1;

package/components/form/number/Number.vue

@@ -6,7 +6,7 @@
         :rules="rule"
         :label="label"
         :precision="2" 
-        control-variant="hidden"
+        :control-variant="controlVariant"
         @blur="blur($event)">
     </v-number-input>
   </v-container>
@@ -14,9 +14,11 @@
 
 <script lang="ts">
 import { setRule } from '../functions/rules';
-import { valueEvent } from './../models/references';
+import { initComponent } from '../functions/init';
+import { controlVariant, valueEvent } from '../models/resources';
 
 export default {
+  name: "NumberControl",
   props: {
     value: {
       type: Number,
@@ -37,9 +39,13 @@ export default {
     }
   },
   emits: [valueEvent],
+  setup(data){
+    initComponent(data, name);
+  },
   data() {
     return {
-      rule: setRule(this.rules)
+      rule: setRule(this.rules),
+      controlVariant: controlVariant
     }
   },
   methods: {

package/components/form/text/Text.vue

@@ -12,10 +12,12 @@
 
 
 <script lang="ts">
+import { initComponent } from '../functions/init';
 import { setRule } from '../functions/rules';
-import { valueEvent } from './../models/references';
+import { valueEvent } from '../models/resources';
 
 export default {
+  name: "TextControl",
   props: {
     value: {
       type: String,
@@ -36,6 +38,9 @@ export default {
     }
   },
   emits: [valueEvent],
+  setup(data){
+    initComponent(data, name);
+  },
   data() {
     return {
       rule: setRule(this.rules)

package/components/index.d.ts

@@ -1,7 +1,7 @@
 /*! @licence MIT */
 
 export { default as FormPlate } from "./form/Form.vue";
-export { GridModel } from './form/models/model';
+export { GridModel } from './form/models/formModels';
 
 /*! 
 * Vuetify Labs v3.4.0 by vuetify - https://vuetifyjs.com

package/components/test/form.test.ts

@@ -1,4 +1,4 @@
-import { GridModel } from './../form/models/model';
+import { GridModel } from '../form/models/formModels';
 
 export const testForm: GridModel = {
   name: "",