Akaunting money vue component added for all create/ edit formGroup

resources/assets/js/components/AkauntingMoney.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="form-group"
+        :class="[{'has-error': error}, {'required': required}, {'readonly': readonly}, {'disabled': disabled}, col]">
+        <label v-if="title" :for="name" class="form-control-label">{{ title }}</label>
+
+        <div class="input-group input-group-merge" :class="group_class">
+            <div v-if="icon" class="input-group-prepend">
+                <span class="input-group-text">
+                    <i class="fa fa-" :class="icon"></i>
+                </span>
+            </div>
+
+            <money :name="name" :placeholder="placeholder" v-model="model" v-bind="money" class="form-control"></money>
+        </div>
+
+        <div class="invalid-feedback d-block" v-if="error" v-html="error"></div>
+    </div>
+</template>
+
+<script>
+import {Money} from 'v-money';
+
+export default {
+    name: "akaunting-money",
+
+    components: {
+        Money
+    },
+
+    props: {
+        title: {
+            type: String,
+            default: '',
+            description: "Selectbox label text"
+        },
+        placeholder: {
+            type: String,
+            default: '',
+            description: "Selectbox input placeholder text"
+        },
+        name: {
+            type: String,
+            default: null,
+            description: "Selectbox attribute name"
+        },
+        value: {
+            type: String,
+            default: null,
+            description: "Selectbox selected value"
+        },
+        icon: {
+            type: String,
+            description: "Prepend icon (left)"
+        },
+        group_class: {
+            type: String,
+            default: null,
+            description: "Selectbox disabled status"
+        },
+        col: {
+            type: String,
+            default: null,
+            description: "Selectbox disabled status"
+        },
+        error: {
+            type: String,
+            default: null,
+            description: "Selectbox disabled status"
+        },
+        readonly: {
+            type: Boolean,
+            default: false,
+            description: "Selectbox disabled status"
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+            description: "Selectbox disabled status"
+        },
+        currency: {
+            type: Object,
+            default: function () {
+                return {
+                    decimal_mark: '.',
+                    thousands_separator: ',',
+                    symbol_first: 1,
+                    symbol: '$',
+                    precision: '2',
+                };
+            },
+            description: "Default currency"
+        },
+        masked: {
+            type: Boolean,
+            default: false,
+            description: "Money result value"
+        },
+    },
+
+    data() {
+        return {
+            model: this.value,
+            money: {
+                decimal: this.currency.decimal_mark,
+                thousands: this.currency.thousands_separator,
+                prefix: (this.currency.symbol_first) ? this.currency.symbol : '',
+                suffix: (!this.currency.symbol_first) ? this.currency.symbol : '',
+                precision: this.currency.precision,
+                masked: this.masked
+            }
+        }
+    },
+
+    mounted() {
+        this.$emit('interface', this.model);
+    },
+
+    methods: {
+        change() {
+            this.$emit('change', this.model);
+            this.$emit('interface', this.model);
+        },
+    },
+
+    watch: {
+        model: function (options) {
+
+            this.$emit('interface', this.model);
+        }
+    },
+}
+</script>

resources/assets/js/mixins/global.js

@@ -2,6 +2,7 @@ import axios from 'axios';
 
 import AkauntingSearch from './../components/AkauntingSearch';
 import AkauntingModal from './../components/AkauntingModal';
+import AkauntingMoney from './../components/AkauntingMoney';
 import AkauntingModalAddNew from './../components/AkauntingModalAddNew';
 import AkauntingRadioGroup from './../components/forms/AkauntingRadioGroup';
 import AkauntingSelect from './../components/AkauntingSelect';
@@ -13,7 +14,6 @@ import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import NProgressAxios from './../plugins/nprogress-axios';
 
-import {VMoney} from 'v-money';
 import { Select, Option, Steps, Step, Button } from 'element-ui';
 
 import Form from './../plugins/form';
@@ -24,6 +24,7 @@ export default {
         AkauntingRadioGroup,
         AkauntingSelect,
         AkauntingSelectRemote,
+        AkauntingMoney,
         AkauntingModal,
         AkauntingModalAddNew,
         AkauntingDate,
@@ -37,32 +38,16 @@ export default {
 
     data: function () {
         return {
-            money: {
-                decimal: '.',
-                thousands: ',',
-                prefix: '$ ',
-                suffix: '',
-                precision: 2,
-                masked: false /* doesn't work with directive */
-            },
             component: '',
         }
     },
 
     directives: {
-        money: VMoney
+        //money: VMoney
     },
 
     mounted() {
         this.checkNotify();
-
-        if (aka_currency) {
-            this.money.decimal = aka_currency.decimal_mark;
-            this.money.thousands = aka_currency.thousands_separator;
-            this.money.prefix = (aka_currency.symbol_first) ? aka_currency.symbol : '';
-            this.money.suffix = !(aka_currency.symbol_first) ? aka_currency.symbol : '';
-            this.money.precision = aka_currency.precision;
-        }
     },
 
     methods: {