@modelforms/fontawesome-vuetify 1.0.0

package/src/form/complete/Complete.vue

@@ -0,0 +1,184 @@
+<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"
+      @update:search="select($event)"
+      @blur="blur($event)">
+        <template v-if="arrowDown" #append-inner>
+            <FontAwesomeIcon :icon="arrowDown" />
+        </template>
+        <template v-if="multiple" #item></template>
+        <template v-if="multiple" #append-item>
+            <v-container class="mb-6">
+                <v-row v-for="item in rows" v-bind:key="item.id" :v-bind="item" v-bind:class="item.props.row" @click="multiSelect(item.data!)">
+                    <v-col cols="2">
+                        <FontAwesomeIcon v-if="square" v-bind:icon="item.props.icon" />
+                    </v-col>
+                    <v-col cols="10">
+                        <span>{{ item.data?.title }}</span>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </template>
+    </v-autocomplete>
+  </v-container>
+
+</template>
+
+<script lang="ts">
+    import { faArrowAltCircleDown, faSquare } from '@fortawesome/free-regular-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 { useTemplateRef } from 'vue';
+    import { addItem, removeItem } from '../functions/complete';
+    import { valueEvent } from './../models/references';
+
+    export default{
+        props: {
+            value: {
+                type: String,
+                required: true,
+            },
+            model: {
+                type: Object
+            },
+            items: {
+                type: Array<CompleteItems>,
+                default: () => []
+            },
+            itemValue: {
+                type: Array<CompleteItems>,
+                default: () => []
+            },
+            title: {
+                type: String,
+            },
+            multiple: {
+                type: Boolean
+            },
+            label: {
+                type: String
+            },
+            rules: {
+                type: Array<String>,
+                default: () => []
+            }
+        },
+        components: {
+            FontAwesomeIcon: FontAwesomeIcon,
+        },
+        emits: [valueEvent],
+        mounted() {
+            if(this.multiple){
+                this.initAriaRows();
+            }
+        },
+        data() {
+            return {
+                selected: [] as CompleteItems[],
+                unSelected: [] as CompleteItems[],
+                rows: [] as RowItem[],
+                rule: setRule(this.rules),
+                value: this.value,
+                ref: useTemplateRef('template'),
+                arrowDown: faArrowAltCircleDown,
+                square: faSquare,
+                check: faCheck,
+                search: "",
+                template: {}
+            }
+        },
+        methods: {
+            select(event) {
+                if(event.length!) {
+                    console.log(event)
+                    this.value = event;
+                    this.$emit(valueEvent, this.items.find(item => item[this.title!] == event));
+                }
+            },
+            blur(event) {
+                this.$emit(valueEvent, this.selected);
+            },
+            multiSelect(value: CompleteItems) {
+                this.unSelected = [];
+                
+                if(!this.selected.length){
+                    this.unSelected = [value!];
+                    this.search = 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{
+                    this.unSelected = [...this.selected, value!];
+                    this.search += addItem(this.search, value, false)!;
+                }
+
+                this.value = this.search;
+                this.selected = this.unSelected;
+                this.changedRows(this.items);
+            },
+            initAriaRows(){
+                this.value = "";
+                this.ariaRows(this.items);
+
+                if(this.itemValue.length){
+                    for(let item of this.itemValue){
+                        this.multiSelect(item);
+                    }
+                }
+            },
+            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);
+                    }
+                }
+            },
+            ariaRows(selected: CompleteItems[]) {
+                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) {
+                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!],
+                }
+
+                this.rows = [...this.rows, row];
+
+                return index;
+            },
+        }
+    }
+
+</script>
+
+<style>
+    .active{
+        background-color: rgb(228, 223, 223);
+    }
+</style>

package/src/form/date/Date.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-container fluid>
+      <v-date-input
+        :v-model="model"
+        :model-value="value"
+        :rules="rule"
+        :label="label"
+        @save="select($event)">
+            <template v-if="faCalendar" #append-inner>
+                <FontAwesomeIcon :icon="faCalendar" />
+            </template>
+        </v-date-input>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { faCalendar } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { setRule } from '../functions/rules';
+import { valueEvent } from './../models/references';
+
+export default {
+    components: {
+    FontAwesomeIcon
+    },
+    props: {
+    value: {
+        type: [String, Date],
+        required: true
+    },
+    label: {
+        type: String,
+        required: true
+    },
+    model: {
+        type: Object,
+        required: true
+    },
+    rules:{
+        type: Array,
+        required: false,
+        default: () => []
+    }
+    },
+    emits: [valueEvent],
+    data() {
+    return {
+        rule: setRule(this.rules),
+        faCalendar: faCalendar
+    }
+    },
+    methods: {
+    select(event: any) {
+        this.$emit(valueEvent, event);
+    }
+    },
+}
+
+</script>

package/src/form/form.json

@@ -0,0 +1,22 @@
+{
+    "name":"",
+    "model": {},
+    "rows": [
+        {
+            "colSize": 2,
+            "cols": [
+                {
+                    "name": "",
+                    "type": "",
+                    "label": "",
+                    "rules": [""],
+                    "size": 2,
+                    "complete": {
+                        "items": [{}],
+                        "title": ""
+                    }
+                }
+            ]
+        }
+    ]
+}

package/src/form/functions/complete.ts

@@ -0,0 +1,43 @@
+import { CompleteItems } from "../models/h-model";
+
+export const removeItem = (search: string, value: CompleteItems) => {
+    if(search == null || search == undefined){
+        search = '';
+    }
+
+    let lastIndex = search.indexOf(', ' + value.title);
+
+    if(lastIndex >= 0){
+        let title = ', ' + value.title;
+        let s = search.indexOf(title);
+        return search.substring(0, s) + search.substring(s + title.length, search.length);
+    }
+    
+    let firstIndex = search.indexOf(value.title!);
+
+    if(firstIndex >= 0){
+        let title = value.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('');
+}
+
+export const addItem = (compare: string, value: CompleteItems, first = true) => {
+    if(value.title == undefined){
+        return '';
+    }
+
+    if(!first){
+        return ', ' + value.title;
+    }
+
+    return value.title;
+}

package/src/form/functions/rules.ts

@@ -0,0 +1,54 @@
+export const setRule = (rules: any) => {
+    if(rules.length > 0){
+        let rule = parseRules(rules);
+        if(rule != undefined && rule != null){
+            return rule;
+        }
+    }
+}
+
+const index = 1;
+const parseRules = (rules: string[]) => {
+    for(let rule of rules){
+        let parts = rule.split(':');
+
+        let rules = getRules(findLast(parts), parts[index]).map((value) => {
+            var entries = Object.keys(value);
+            let entry = findFirst(entries);
+
+            if(entry == findFirst(parts)){
+                let output = findLast(entries)!;
+                return value[output];
+            }
+        })
+
+        if(rules.length){
+            return findFirst(rules);
+        }
+
+        new Error('');
+    }
+}
+
+const findLast = (entries: string[]) => {
+    return entries[entries.length - index];
+}
+
+const findFirst = (entires: any[]) => {
+    for(let entry of entires){
+        return entry;
+    }
+}
+
+const getRules = (value: any, error = '') => {
+    return [
+        {'maxLen': [(v: any) => v?.length <= value || `Not grater than ${value} characters!`]},
+        {'minLen': [(v: any) => v?.length >= value || `Not less ${value} characters!`]},
+        {'maxValue': [(v: any) => v <= value || `Not grater than ${value}!`]},
+        {'minValue': [(v: any) => v >= value || `Not less than ${value}!`]},
+        {'maxDate': [(v: any) => v <= new Date(value) || `Not grater than ${value}!`]},
+        {'minDate': [(v: any) => v >= new Date(value) || `Not less than ${value}!`]},
+        {'required': [(v: any) => (v != '' && v != null && v != undefined) || `Field is required!`]},
+        {'pattern': [(v: any) => new RegExp(value, 'g').test(v) || error]}
+    ];
+}

package/src/form/models/h-model.ts

@@ -0,0 +1,21 @@
+import { faSquare } from "@fortawesome/free-regular-svg-icons";
+
+export class CompleteItems{
+    title?: '';
+    abbr?: 0
+}
+
+export class RowItem{
+    id: number = 0;
+    data?: CompleteItems;
+    row: ((v: CompleteItems) => void)[] = [];
+    icon: ((v: CompleteItems) => void)[] = [];
+    active: ((v: CompleteItems) => void)[] = [];
+    props: RowProps = new RowProps();
+}
+
+export class RowProps{
+    row: string = '';
+    icon: any = faSquare;
+    active: boolean = false;
+}

package/src/form/models/model.ts

@@ -0,0 +1,29 @@
+import { CompleteItems } from "./h-model";
+
+export class GridModel {
+    name: string = "";
+    model: any;
+    rows: Row[] = [];
+}
+
+export class Row{
+    colSize: number = 12;
+    cols: Col[] = [];
+}
+
+class Col{
+    name: string = "";
+    type: "text" | "number" | "date" | "complete" | "area" = "text";
+    value?: any;
+    label: string = "";
+    rules: string[] = [];
+    size: number = 4;
+    complete: Complete = new Complete();
+}
+
+class Complete{
+    items: CompleteItems[] = [];
+    itemValue: CompleteItems[] = [];
+    multiple?: boolean = false;
+    title: "title" | "abbr" = "title";
+}

package/src/form/models/references.ts

@@ -0,0 +1,4 @@
+export const button = 'SUBMIT';
+export const event = 'submit';
+export const valueEvent = 'value';
+export let templateRef = 'template';

package/src/form/number/Number.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-container fluid>
+    <v-number-input 
+        :model-value="value"
+        :v-model="model"
+        :rules="rule"
+        :label="label"
+        :precision="2" 
+        control-variant="hidden"
+        @blur="blur($event)">
+    </v-number-input>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { setRule } from '../functions/rules';
+import { valueEvent } from './../models/references';
+
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    rules:{
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  emits: [valueEvent],
+  data() {
+    return {
+      rule: setRule(this.rules)
+    }
+  },
+  methods: {
+    blur(event: any) {
+      this.$emit(valueEvent, event.target.value);
+    }
+  },
+
+}
+</script>

package/src/form/text/Text.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-container fluid>
+    <v-text-field 
+        :v-model="model"
+        :model-value="value"
+        :rules="rule"
+        :label="label"
+        @blur="blur($event)">
+    </v-text-field>
+  </v-container>
+</template>
+
+
+<script lang="ts">
+import { setRule } from '../functions/rules';
+import { valueEvent } from './../models/references';
+
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    rules:{
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  emits: [valueEvent],
+  data() {
+    return {
+      rule: setRule(this.rules)
+    }
+  },
+  methods: {
+    blur(event: any) {
+      this.$emit(valueEvent, event.target.value);
+    }
+  },
+
+}
+</script>

package/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+</html>

package/tsconfig.json

@@ -0,0 +1,50 @@
+{
+  "include": [
+    "src",
+    "types"
+  ],
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    // File Layout
+    // "rootDir": "./src",
+    "outDir": "./dist",
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "target": "es2020",
+    "types": [],
+    // For nodejs:
+    // "lib": ["esnext"],
+    // "types": ["node"],
+    // and npm install -D @types/node
+
+    // Other Outputs
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": false,
+
+    // Style Options
+    // "noImplicitReturns": true,
+    // "noImplicitOverride": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+    // "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+    "strict": false,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+  }
+}

package/vite.config.js

@@ -0,0 +1,44 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
+
+export default defineConfig({
+    plugins: [
+        vue(),
+        vuetify({
+            autoImport: { 
+                labs: true
+            }
+        })
+    ],
+    build: {
+        transpile: ['vuetify'],
+        lib: {
+            entry: path.resolve(__dirname, 'index.d.ts'),
+            name: '@test',
+            formats: ['amd', 'cjs'],
+            fileName: (format) => `index.${format}.ts`
+        },
+        css: {
+            filename: 'styles/[name].css',
+            chunkFilename: 'styles/[name].css',
+        },
+        js: {
+            entryFileNames: 'js/[name].js',
+            chunkFileNames: 'js/[name].js',
+        },
+        rollupOptions: {
+                // make sure to externalize deps that shouldn't be bundled
+                // into your library
+                external: ['vue'],
+                output: {
+                // Provide global variables to use in the UMD build
+                // for externalized deps
+                globals: {
+                    vue: 'Vue'
+                }
+            }
+        }
+    }
+})