use select item button currency prefix..

public/css/custom.css

@@ -1000,11 +1000,11 @@ table .align-items-center td span.badge {
     background-color: #fff;
 }
 
-.aka-box__content>:last-child {
+.aka-box-content>:last-child {
     margin-bottom: 0;
 }
 
-.aka-box__content>:first-child {
+.aka-box-content>:first-child {
     margin-top: 0;
 }
 
@@ -1208,7 +1208,7 @@ table .align-items-center td span.badge {
     font-weight: bold;
 }
 
-.aka-select__footer {
+.aka-select-footer {
     text-align: center;
     border-top: 1px solid #b2c2cd;
     padding: 8px;
@@ -1248,3 +1248,95 @@ table .align-items-center td span.badge {
     background-color: #f8f9fe;
 }
 /* Document Finish */
+
+/* Akaunting Item Button Start */
+.aka-select.aka-select--fluid {
+    min-width: 160px;
+}
+
+.aka-select.aka-select--fluid {
+    max-width: 96%;
+    min-width: 0;
+}
+
+.product-select .aka-select-menu {
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+    top: 0;
+    overflow: hidden;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top-width: 0;
+}
+
+.aka-select-menu {
+    list-style: none;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    display: block;
+    visibility: hidden;
+    position: absolute;
+    top: 110%;
+    z-index: 1000;
+    min-width: 100%;
+    padding: 8px 0;
+    border-radius: 4px;
+    color: #1c252c;
+    background-color: white;
+    box-shadow: 0 0 0 1px rgba(77,101,117,0.1), 0 3px 10px 0 rgba(77,101,117,0.2);
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    height: 0;
+    -webkit-transform: translateY(4px);
+    transform: translateY(4px);
+    overflow: hidden;
+    padding: 0;
+    right: 0;
+    left: 0;
+    top: 100%;
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+}
+
+.product-select .aka-select.aka-select--fluid.is-open {
+    position: absolute;
+    display: block;
+}
+
+.item-select {
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.item-select-column {
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.item-select-price {
+    width: 135px;
+    text-align: right;
+}
+.item-select-info-description, .item-select-info-name {
+    width: 710px;
+    display: block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.item-select-column {
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.item-select .v-money.text-right.disabled-money {
+    color: #8898aa;
+}
+/* Akaunting Item Button Finish */

resources/assets/js/components/AkauntingContactCard.vue

@@ -1,15 +1,14 @@
 <template>
-    <div :id="'select-contact-card-' + _uid" class="form-group col-md-12 invoice-add__body__top-form__customer">
-        <div class="invoice-customer" :class="[{'fs-exclude': show.contact_selected}]">
+    <div :id="'select-contact-card-' + _uid" class="form-group col-md-12 document-add-body-form-contact">
+        <div class="document-contact" :class="[{'fs-exclude': show.contact_selected}]">
             <div class="document-contact-without-contact">
-                <div v-if="!show.contact_selected" class="document-contact-without-contact-box__customer-select fs-exclude">
+                <div v-if="!show.contact_selected" class="document-contact-without-contact-box-contact-select fs-exclude">
                     <div class="aka-select aka-select--medium is-open" tabindex="0">
                         <div>
                             <div class="aka-box aka-box--large">
-                                <div class="aka-box__content">
+                                <div class="aka-box-content">
                                     <div class="document-contact-without-contact-box">
-                                        <button type="button" class="btn-aka-link aka-btn--fluid document-contact-without-contact-box-btn"
-                                        @click="onContactList">
+                                        <button type="button" class="btn-aka-link aka-btn--fluid document-contact-without-contact-box-btn" @click="onContactList">
                                             <i class="far fa-user fa-2x"></i> {{ addContactText }}
                                         </button>
                                     </div>
@@ -58,7 +57,7 @@
                                 </div>
                             </ul>
                             
-                            <div class="aka-select__footer" tabindex="0" @click="onContactCreate">
+                            <div class="aka-select-footer" tabindex="0" @click="onContactCreate">
                                 <span>
                                     <i class="fas fa-plus"></i> {{ createNewContactText }}
                                 </span>
@@ -67,7 +66,7 @@
                     </div>
                 </div>
                 
-                <div v-else class="invoice-customer__with-customer__bill-to">
+                <div v-else class="document-contact-with-contact-bill-to">
                     <div>
                         <span class="aka-text aka-text--block-label">{{ contactInfoText }}</span>
                     </div>
@@ -104,8 +103,12 @@
                         </table>
                     </div>
 
-                    <button type="button" class="btn btn-link" @click="onContactEdit">{{ editContactText.replace(':contact_name', contact.name) }}</button>&nbsp;•&nbsp;
-                    <button type="button" class="btn btn-link" @click="onContactList">{{ chooseDifferentContactText }}</button>
+                    <button type="button" class="btn btn-link" @click="onContactEdit">
+                        {{ editContactText.replace(':contact_name', contact.name) }}
+                    </button>&nbsp;•&nbsp;
+                    <button type="button" class="btn btn-link" @click="onContactList">
+                        {{ chooseDifferentContactText }}
+                    </button>
                 </div>
             </div>
 
@@ -613,6 +616,3 @@ export default {
     },
 };
 </script>
-
-<style>
-</style>

resources/assets/js/components/AkauntingItemButton.vue

@@ -3,7 +3,7 @@
         <div class="aka-select aka-select--fluid" :class="[{'is-open': show.item_list}]" tabindex="-1">
             <div>
                 <button type="button" class="btn btn-link w-100" @click="onItemList">
-                    <i class="fas fa-plus-circle"></i> &nbsp; Add an item
+                    <i class="fas fa-plus-circle"></i> &nbsp; {{ addItemText }}
                 </button>
             </div>
 
@@ -34,28 +34,39 @@
 
                 <ul class="aka-select-menu-options">
                     <div class="aka-select-menu-option" v-for="(item, index) in sortItems" :key="index" @click="onItemSeleted(index, item.id)">
-                        <div class="product-select__product">
-                            <div class="product-select__product__column product-select__product__info">
-                                <b class="product-select__product__info__name"><span>{{ item.name }}</span></b>
+                        <div class="item-select w-100">
+                            <div class="item-select-column item-select-info w-75">
+                                <b class="item-select-info-name"><span>{{ item.name }}</span></b>
                             </div>
-                            <div class="product-select__product__column product-select__product__price">
-                                {{ item.price }}
+
+                            <div class="item-select-column item-select-price w-25">
+                                <money 
+                                    :name="'item-id-' + item.id"
+                                    :value="item.price"
+                                    v-bind="money"
+                                    masked
+                                    class="text-right disabled-money"
+                                ></money>
                             </div>
                         </div>
                     </div>
 
                     <div class="aka-select-menu-option" v-if="!sortItems.length">
                         <div>
-                            <strong class="text-strong" v-if="!items.length && !search"><span>{{ noDataText }}</span></strong>
+                            <strong class="text-strong" v-if="!items.length && !search">
+                                <span>{{ noDataText }}</span>
+                            </strong>
 
-                            <strong class="text-strong" v-else><span>{{ noMatchingDataText }}</span></strong>
+                            <strong class="text-strong" v-else>
+                                <span>{{ noMatchingDataText }}</span>
+                            </strong>
                         </div>
                     </div>
                 </ul>
 
-                <div class="aka-select__footer" tabindex="0" @click="onItemCreate">
+                <div class="aka-select-footer" @click="onItemCreate">
                     <span>
-                        <i class="fas fa-plus"></i> Create a new item
+                        <i class="fas fa-plus"></i> {{ createNewItemText }}
                     </span>
                 </div>
             </div>
@@ -124,6 +135,16 @@ export default {
             },
             description: "Selectbox Add New Item Feature"
         },
+        addItemText: {
+            type: String,
+            default: 'Add an item',
+            description: ""
+        },
+        createNewItemTax:{
+            type: String,
+            default: 'Create a new item',
+            description: ""
+        },
         noDataText: {
             type: String,
             default: 'No Data',
@@ -134,6 +155,19 @@ export default {
             default: 'No Matchign Data',
             description: "Selectbox search option not found item message"
         },
+        dynamicCurrency: {
+            type: Object,
+            default: function () {
+                return {
+                    decimal_mark: '.',
+                    thousands_separator: ',',
+                    symbol_first: 1,
+                    symbol: '$',
+                    precision: 2,
+                };
+            },
+            description: "Dynamic currency"
+        },
         currency: {
             type: Object,
             default: function () {
@@ -470,6 +504,21 @@ export default {
     },
 
     watch: {
+        dynamicCurrency: function (currency) {
+            if (!currency) {
+                return;
+            }
+
+            this.money = {
+                decimal: currency.decimal_mark,
+                thousands: currency.thousands_separator,
+                prefix: (currency.symbol_first) ? currency.symbol : '',
+                suffix: (!currency.symbol_first) ? currency.symbol : '',
+                precision: parseInt(currency.precision),
+                masked: this.masked
+            };
+        },
+
         show: {
             handler: function(newValue) {
                 if (newValue) {
@@ -481,91 +530,3 @@ export default {
     },
 };
 </script>
-
-<style>
-.aka-select.aka-select--fluid {
-    min-width: 160px;
-}
-
-.aka-select.aka-select--fluid {
-    max-width: 96%;
-    min-width: 0;
-}
-
-.product-select .aka-select-menu {
-    width: 100%;
-    min-width: 0;
-    padding: 0;
-    top: 0;
-    overflow: hidden;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-top-width: 0;
-}
-
-.aka-select-menu {
-    list-style: none;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    text-align: left;
-    display: block;
-    visibility: hidden;
-    position: absolute;
-    top: 110%;
-    z-index: 1000;
-    min-width: 100%;
-    padding: 8px 0;
-    border-radius: 4px;
-    color: #1c252c;
-    background-color: white;
-    box-shadow: 0 0 0 1px rgba(77,101,117,0.1), 0 3px 10px 0 rgba(77,101,117,0.2);
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    height: 0;
-    -webkit-transform: translateY(4px);
-    transform: translateY(4px);
-    overflow: hidden;
-    padding: 0;
-    right: 0;
-    left: 0;
-    top: 100%;
-    border-top: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-}
-
-.product-select .aka-select.aka-select--fluid.is-open {
-    position: absolute;
-    display: block;
-}
-
-.product-select__product {
-    display: flex;
-    flex-flow: row nowrap;
-}
-
-.product-select__product__column {
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.product-select__product__price {
-    width: 135px;
-    text-align: right;
-}
-.product-select__product__info__description, .product-select__product__info__name {
-    width: 710px;
-    display: block;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.product-select__product__column {
-    white-space: nowrap;
-    overflow: hidden;
-}
-</style>

resources/views/components/select-item-button.blade.php

@@ -4,6 +4,7 @@
     no-matching-data-text="{{ trans('general.no_matching_data') }}"
     type="{{ $type }}"
     price="{{ $price }}"
+    :dynamic-currency="currency"
     :items="{{ json_encode($items) }}"
     @item="onSelectedItem($event)"
 ></akaunting-item-button>