Refactor Customization Page

resources/assets/js/components/base/BasePrefixInput.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="base-prefix-input" @click="focusInput">
+    <font-awesome-icon v-if="icon" :icon="icon" class="icon" />
+    <p class="prefix-label"><span class="mr-1">{{ prefix }}</span>-</p>
+    <input
+      ref="basePrefixInput"
+      v-model="inputValue"
+      :type="type"
+      class="prefix-input-field"
+      @input="handleInput"
+      @change="handleChange"
+      @keyup="handleKeyupEnter"
+      @keydown="handleKeyDownEnter"
+      @blur="handleFocusOut"
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    prefix: {
+      type: String,
+      default: null,
+      required: true
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    value: {
+      type: [String, Number, File],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'text'
+    }
+  },
+  data () {
+    return {
+      inputValue: this.value
+    }
+  },
+  watch: {
+    'value' () {
+      this.inputValue = this.value
+    }
+  },
+  methods: {
+    focusInput () {
+      this.$refs.basePrefixInput.focus()
+    },
+    handleInput (e) {
+      this.$emit('input', this.inputValue)
+    },
+    handleChange (e) {
+      this.$emit('change', this.inputValue)
+    },
+    handleKeyupEnter (e) {
+      this.$emit('keyup', this.inputValue)
+    },
+    handleKeyDownEnter (e) {
+      this.$emit('keydown', e, this.inputValue)
+    },
+    handleFocusOut (e) {
+      this.$emit('blur', this.inputValue)
+    }
+  }
+}
+</script>

resources/assets/js/components/base/index.js

@@ -8,6 +8,7 @@ import BaseTextArea from './BaseTextArea.vue'
 import BaseSelect from './base-select/BaseSelect.vue'
 import BaseLoader from './BaseLoader.vue'
 import BaseCustomerSelect from './BaseCustomerSelect.vue'
+import BasePrefixInput from './BasePrefixInput.vue'
 
 import BasePopup from './popup/BasePopup.vue'
 import CustomerSelectPopup from './popup/CustomerSelectPopup.vue'
@@ -23,6 +24,7 @@ Vue.component('base-input', BaseInput)
 Vue.component('base-switch', BaseSwitch)
 Vue.component('base-text-area', BaseTextArea)
 Vue.component('base-loader', BaseLoader)
+Vue.component('base-prefix-input', BasePrefixInput)
 
 Vue.component('table-component', TableComponent)
 Vue.component('table-column', TableColumn)

resources/assets/js/components/base/modal/TaxTypeModal.vue

@@ -124,7 +124,7 @@ export default {
       },
       percent: {
         required,
-        between: between(0.10, 100)
+        between: between(-1, 100)
       },
       description: {
         maxLength: maxLength(255)