renusify 1.1.3 → 1.1.5

package/components/form/input.vue

@@ -3,7 +3,7 @@
       :class="{
         [`${$r.prefix}input-container`]:true,
         [c_color]:c_color&&!isDisabled,
-        'color-error-text':hasError&&genMessages.length>0,
+        'color-error-text':hasError&&validations.length>0,
         'hide-detail':c_hide,
         'input-focused':active,
         'input-disabled':isDisabled,
@@ -28,7 +28,7 @@
          :class="{
             'massage-active':genMessages.length>0,
         }">
-      <div :class="{'animation-shake-3':c_msgShake}">{{ genMessages[0] }}</div>
+      <div :class="{'animation-shake-3':c_msgShake}">{{ genMessages.join(',') }}</div>
 
     </div>
   </div>
@@ -113,10 +113,11 @@ export default {
       return this.errorBucket.length > 0
     },
     genMessages() {
+      let m = []
       if (this.msg) {
-        return [this.msg]
+        m = [this.msg]
       }
-      return this.hasMessages ? this.validations : []
+      return this.hasMessages ? this.validations : m
     },
     hasMessages() {
       return this.validationTarget.length > 0

package/components/form/inputTel/index.vue

@@ -1,181 +1,195 @@
 <template>
-    <div :class="`${$r.prefix}input-tel`">
-        <r-modal
-                v-model="open"
-        >
-            <r-card class="pa-2">
-                <r-text-input
-                        :label="$t('search','renusify')"
-                        v-model="search"
-                ></r-text-input>
-                <r-list :items="countries" :filter="search" @update:model-value="choose">
-                    <template v-slot="{item}">
-                        <div
-                                :class="item.iso2.toLowerCase()"
-                                class="iti-flag"></div>
-                        <div class="list-title">{{item.name}}</div>
-                        <r-spacer></r-spacer>
-                        <span class="ltr">+{{ item.dialCode }}</span>
-                    </template>
-                </r-list>
-            </r-card>
-        </r-modal>
-        <r-btn class="btn-country ltr mx-1"
-               :rounded="!tile" :disabled="!select" @click.stop="toggleDropdown" outlined>
-            <div :class="activeCountry.iso2.toLowerCase()" class="iti-flag"></div>
-            <span class="country-code pa-1"> +{{ activeCountry.dialCode }} </span>
-            <span class="dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
-        </r-btn>
-      <r-text-input class="input-phone" :label="label?label:$t('phone','renusify')"
-                    @update:model-value="emit"
-                    :tile="tile"
-                    :rules="[required&&'required']"
-                    v-model="tel.phone"
-      >
-      </r-text-input>
+  <div :class="`${$r.prefix}input-tel`">
+    <r-modal
+        v-model="open"
+    >
+      <r-card class="pa-2">
+        <r-text-input
+            :label="$t('search','renusify')"
+            v-model="search"
+        ></r-text-input>
+        <r-list :items="countries" :filter="search" @update:model-value="choose">
+          <template v-slot="{item}">
+            <div
+                :class="item.iso2.toLowerCase()"
+                class="iti-flag"></div>
+            <div class="list-title">{{ item.name }}</div>
+            <r-spacer></r-spacer>
+            <span class="ltr">+{{ item.dialCode }}</span>
+          </template>
+        </r-list>
+      </r-card>
+    </r-modal>
+    <r-btn class="btn-country ltr ms-1"
+           :rounded="!c_tile" :disabled="!select||readonly" @click.stop="toggleDropdown" outlined>
+      <div :class="activeCountry.iso2.toLowerCase()" class="iti-flag"></div>
+      <span class="country-code pa-1"> +{{ activeCountry.dialCode }} </span>
+      <span class="dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
+    </r-btn>
+    <r-text-input class="input-phone" :label="label?label:$t('phone','renusify')"
+                  @update:model-value="emit"
+                  :tile="c_tile"
+                  :readonly="readonly"
+                  :rules="required?['required','number']:['number']"
+                  v-model="tel.phone"
+    >
+    </r-text-input>
 
-    </div>
+  </div>
 </template>
 
 <script>
-    import allCountries from './assets/all-countries.js'
+import allCountries from './assets/all-countries.js'
 
-    export default {
-        name: 'inputTel',
-        props: {
-            label: {
-                type: String
-            },
-            modelValue: {
-                type: Object,
-                default: () => {
-                    return {
-                        'phone': '',
-                        'country_code': ''
-                    }
-                }
-            },
-            defaultCountry: {
-                // Default country code, ie: 'AU'
-                // Will override the current country of user
-                type: String,
-                default: ''
-            },
-            tile: Boolean,
-            required: Boolean,
-            select: {
-                type: Boolean,
-                default: false
-            }
-
-        },
-        data() {
-            return {
-                tel: this.modelValue,
-                search: '',
-                countries: [],
-                activeCountry: {iso2: 'US', dialCode: '1'},
-                open: false
-            }
-        },
-        mounted() {
-            this.initializeCountry()
-            this.countries = allCountries
-        },
-        created() {
-            if (this.modelValue) {
-                this.activeCountry.dialCode = this.modelValue.country_code
-            }
-        },
-        methods: {
-            initializeCountry() {
-                /**
-                 * 1. Use default country if passed from parent
-                 */
-                if (this.defaultCountry) {
-                    const defaultCountry = this.findCountry(this.defaultCountry)
-                    if (defaultCountry) {
-                        this.activeCountry = defaultCountry
-                        return
-                    }
-                }
-                /**
-                 * 2. Check if fetching country based on user's IP is allowed, set it as the default country
-                 */
-                fetch('http://ip-api.com/json/', {
-                    method: 'get'
-                }).then((response) => {
-                    const that = this
-                    response.json().then(function (data) {
-                        that.activeCountry = that.findCountry(data.countryCode) || that.activeCountry
-                    })
-                }).catch((error) => {
-                    return Promise.reject(error)
-                })
-            },
-            /**
-             * Get the list of countries from the list of iso2 code
-             */
-            getCountries(list = []) {
-                return list
-                    .map(countryCode => this.findCountry(countryCode))
-                    .filter(Boolean)
-            },
-            findCountry(iso = '') {
-                return allCountries.find(country => country.iso2 === iso)
-            },
+export default {
+  name: 'inputTel',
+  props: {
+    label: {
+      type: String
+    },
+    modelValue: {
+      type: String
+    },
+    defaultCountry: {
+      // Default country code, ie: 'AU'
+      // Will override the current country of user
+      type: String,
+      default: ''
+    },
+    tile: {type: Boolean, default: undefined},
+    required: Boolean,
+    readonly: Boolean,
+    select: {
+      type: Boolean,
+      default: false
+    }
 
-            choose(country) {
-                this.activeCountry = country
-                this.emit()
-                this.reset()
-            },
-            reset() {
-                this.search = ''
-                this.countries = allCountries
-                this.open = false
-            },
+  },
+  data() {
+    return {
+      tel: {
+        'phone': '',
+        'country_code': ''
+      },
+      search: '',
+      countries: [],
+      activeCountry: {iso2: 'US', dialCode: '1'},
+      open: false
+    }
+  },
+  mounted() {
+    this.initializeCountry()
+    this.countries = allCountries
+  },
+  created() {
+    if (this.modelValue) {
+      let a = this.modelValue.split(' ')
+      this.tel.country_code = a[0]
+      this.tel.phone = a[1]
+      this.activeCountry.dialCode = this.tel.country_code
+    }
+  },
+  computed: {
+    c_tile() {
+      if (this.tile === undefined && this.$r.inputs.tile) {
+        return this.$r.inputs.tile
+      }
+      return this.tile
+    },
+  },
+  methods: {
+    initializeCountry() {
+      /**
+       * 1. Use default country if passed from parent
+       */
+      if (this.defaultCountry) {
+        const defaultCountry = this.findCountry(this.defaultCountry)
+        if (defaultCountry) {
+          this.activeCountry = defaultCountry
+          return
+        }
+      }
+      /**
+       * 2. Check if fetching country based on user's IP is allowed, set it as the default country
+       */
+      fetch('http://ip-api.com/json/', {
+        method: 'get'
+      }).then((response) => {
+        const that = this
+        response.json().then(function (data) {
+          that.activeCountry = that.findCountry(data.countryCode) || that.activeCountry
+        })
+      }).catch((error) => {
+        return Promise.reject(error)
+      })
+    },
+    /**
+     * Get the list of countries from the list of iso2 code
+     */
+    getCountries(list = []) {
+      return list
+          .map(countryCode => this.findCountry(countryCode))
+          .filter(Boolean)
+    },
+    findCountry(iso = '') {
+      return allCountries.find(country => country.iso2 === iso)
+    },
 
-            emit(e) {
-                this.tel.country_code = this.activeCountry.dialCode
-                if (this.tel.phone.startsWith('0')) {
-                    setTimeout(() => {
-                        this.tel.phone = this.tel.phone.substr(1, this.tel.phone.length)
-                        this.$emit('update:modelValue', this.tel)
-                    }, 1)
-                } else {
-                    this.$emit('update:modelValue', this.tel)
+    choose(country) {
+      this.activeCountry = country
+      this.emit()
+      this.reset()
+    },
+    reset() {
+      this.search = ''
+      this.countries = allCountries
+      this.open = false
+    },
 
-                }
+    emit(e) {
+      if (this.readonly) {
+        return
+      }
+      this.tel.country_code = this.activeCountry.dialCode
 
-            },
-            toggleDropdown() {
-                this.open = !this.open
-            },
-            clickedOutside() {
-                this.open = false
-            }
+      setTimeout(() => {
+        this.tel.phone = this.$helper.replacer(this.tel.phone, ' ', '')
+        if (this.tel.phone.startsWith('0')) {
+          this.tel.phone = this.tel.phone.substr(1, this.tel.phone.length)
+          this.$emit('update:modelValue', this.tel.country_code + ' ' + this.tel.phone)
+        } else {
+          this.$emit('update:modelValue', this.tel.country_code + ' ' + this.tel.phone)
         }
+      }, 10)
+
+    },
+    toggleDropdown() {
+      this.open = !this.open
+    },
+    clickedOutside() {
+      this.open = false
     }
+  }
+}
 </script>
 
 <style src="./assets/sprite.css"></style>
 <style lang="scss">
-    @import "../../../style/include";
+@import "../../../style/include";
 
-    .#{$prefix}input-tel {
-        display: flex;
-        align-items: baseline;
-        direction: ltr;
+.#{$prefix}input-tel {
+  display: flex;
+  align-items: baseline;
+  direction: ltr;
 
-        .btn-country {
-          width: 120px;
-          border-color: var(--color-border)
+  .btn-country {
+    width: 120px;
+    border-color: var(--color-border)
 
-        }
+  }
 
-        .input-phone {
-            width: calc(100% - 120px);
-        }
-    }
-</style>
+  .input-phone {
+    width: calc(100% - 120px);
+  }
+}
+</style>

package/components/form/mask-input.vue

@@ -1,15 +1,16 @@
 <template>
-    <r-input :error="error?true:false" :rules="required?['required']:[]" :msg="error?error:undefined" :modelValue="lazyVal" :active="active" class="ltr">
-        <input
-                v-model="lazyVal"
-                @complete="onComplete"
-                @accept="onAccept"
-                @backspace="onBackspace"
-                autocomplete="no"
-                @paste.prevent="onPaste"
-                @focusin="active=true"
-                @focusout="active=false"
-                v-mask="mask"
+    <r-input :error="error?true:false" ltr :rules="required?['required']:[]" :msg="error?error:undefined"
+             :modelValue="lazyVal" :active="active">
+      <input
+          v-model="lazyVal"
+          @complete="onComplete"
+          @accept="onAccept"
+          @backspace="onBackspace"
+          autocomplete="no"
+          @paste.prevent="onPaste"
+          @focusin="active=true"
+          @focusout="active=false"
+          v-mask="mask"
         />
 
     </r-input>

package/components/form/number.vue

@@ -5,7 +5,7 @@
              :active="active"
              inputControlClass="v-center"
     >
-      <r-btn @click.prevent="minus" class="minus" icon :text="btnText">
+      <r-btn @click.prevent.stop="minus" class="minus" icon :text="btnText">
         <r-icon v-html="$r.icons.minus"></r-icon>
       </r-btn>
       <input @input="emit"
@@ -13,11 +13,11 @@
              @focusin="active=true"
              @focusout="active=false"
              ref="input"
-             type="number"
+             type="text"
              autocomplete="no"
-             v-model.number="number"
+             v-model="number"
       />
-      <r-btn @click.prevent="plus" class="plus" icon :text="btnText">
+      <r-btn @click.prevent.stop="plus" class="plus" icon :text="btnText">
         <r-icon v-html="$r.icons.plus"></r-icon>
       </r-btn>
     </r-input>
@@ -32,6 +32,7 @@ export default {
   props: {
     modelValue: Number,
     step: {type: Number, default: 1},
+    split: {type: Number, default: 0},
     min: {
       type: Number
     },
@@ -42,25 +43,38 @@ export default {
   },
   data() {
     return {
-      number: this.modelValue,
+      number: this.setSplit(this.modelValue),
       active: false
     }
   },
   watch: {
     'modelValue': function (newVal) {
       setTimeout(() => {
-        this.number = newVal
+        this.number = this.setSplit(newVal)
       })
     }
   },
   methods: {
+    setSplit(n) {
+      if (n && this.split > 0) {
+        const x = this.split
+        n = n.toString()
+        const step = n.indexOf('.')
+        const re = '\\d(?=(\\d{' + (x) + '})+' + (step > -1 ? '\\.' : '$') + ')';
+        return n.replace(new RegExp(re, 'g'), '$&,');
+      }
+      return n
+    },
+    removeSplit(n) {
+      return parseFloat(this.$helper.replacer(n.toString(), ',', ''))
+    },
     emit() {
       if (this.number === '' || this.number === null) {
         this.number = undefined
-        this.$emit('update:modelValue', d)
+        this.$emit('update:modelValue', this.number)
         return
       }
-      let d = this.number
+      let d = this.removeSplit(this.number)
       if (this.max !== undefined && d > this.max) {
         d = this.max
       }
@@ -68,13 +82,11 @@ export default {
         d = this.min
       }
       const n = ((1 / this.step) + '').length - 1
-      this.number = parseFloat(d.toFixed(n))
-      this.$emit('update:modelValue', this.number)
-
+      this.number = this.setSplit(d.toFixed(n))
+      this.$emit('update:modelValue', this.removeSplit(this.number))
     },
     plus() {
       let n = this.modelValue || 0
-
       this.number = n + this.step
       this.emit()
     },

package/components/form/range.vue

@@ -94,7 +94,7 @@ export default {
     this.width = this.$refs.range.getBoundingClientRect().width - 10
     this.preValue = this.min
     if (this.isRange && !this.modelValue) {
-      this.$emit('update:modelValue', [this.min, this.max])
+      this.$emit('update:modelValue', [])
       const r = this.$r.rtl ? -1 : 1
       this.x2 = this.width * r
       this.prePosition2 = this.width * r
@@ -241,6 +241,18 @@ export default {
       height: 10px;
       border-radius: 50%;
       cursor: grabbing;
+
+      &:hover {
+        width: 16px;
+        height: 16px;
+        @include rtl() {
+          transform: translate(2px, -2px);
+        }
+        @include ltr() {
+          transform: translate(-2px, -2px);
+        }
+        border: 3px solid var(--color-two) !important;
+      }
     }
 
     .dot-tooltip {
@@ -292,6 +304,18 @@ export default {
       border-radius: 50%;
       margin-top: -3px;
       cursor: grabbing;
+
+      &:hover {
+        width: 16px;
+        height: 16px;
+        @include rtl() {
+          transform: translate(2px, -2px);
+        }
+        @include ltr {
+          transform: translate(-2px, -2px);
+        }
+        border: 3px solid var(--color-two) !important;
+      }
     }
 
     .dot-tooltip {

package/components/form/select.vue

@@ -6,7 +6,10 @@
              :modelValue="$helper.ifHas(chips,null,0,value)"
              @click.prevent="handleClick()">
       <div class="select-wrap v-center"
-           :class="{'flex-nowrap':!multiple}">
+           :class="{
+        'h-center':disableSearch,
+        'flex-nowrap':!multiple
+      }">
         <r-chip
             class="my-0 ms-0"
             :close="multiple&&!textChip"
@@ -20,6 +23,7 @@
         </r-chip>
         <span>
         <input :type="type"
+               v-if="!disableSearch"
                @focusin="focusInput(true)"
                @focusout="focusInput(false)"
                @keydown.enter="add"
@@ -46,6 +50,8 @@
               :items="genItems"
               :multiple="multiple"
               :modelValue="chips"
+              :text="text"
+              :val="value"
               @update:modelValue="listInput"
               checked>
         <template v-slot="props">
@@ -85,7 +91,7 @@ export default {
       type: String,
       default: 'value'
     },
-    combo: Boolean,
+    disableSearch: Boolean,
     readonly: Boolean,
     textChip: Boolean,
     items: Array,
@@ -95,7 +101,8 @@ export default {
     justValue: Boolean,
     openToTop: Boolean,
     translate: Boolean,
-    firstSelect: Boolean
+    firstSelect: Boolean,
+    headers: Object
   },
   data() {
     return {
@@ -166,7 +173,8 @@ export default {
       return this.$axios.get(this.searchLink, {
         params: {
           s: (this.inputVal === null ? '' : this.inputVal)
-        }
+        },
+        headers: this.headers
       }).then(({data}) => {
         this.apiData = data
         this.loading = false
@@ -217,6 +225,8 @@ export default {
     handleClick() {
       if (this.$refs.input) {
         this.$refs.input.focus()
+      } else {
+        this.focusInput(true)
       }
     },
     add() {
@@ -225,7 +235,7 @@ export default {
         if (!this.multiple) {
           this.chips = []
         }
-        if (!this.combo && !this.tags) {
+        if (!this.tags) {
           const exist = this.$helper.searchArray(this.genItems, this.text, val[this.text])
           if (exist !== false) {
             this.chips.push(val)
@@ -242,8 +252,7 @@ export default {
       this.chips = this.$helper.uniqArray(this.chips)
 
       let val = this.chips
-
-      if (this.tags) {
+      if (this.justValue) {
         val = []
         for (let i in this.chips) {
           if (this.$helper.hasKey(this.chips, i)) {
@@ -251,12 +260,9 @@ export default {
           }
         }
       }
-      if (!this.multiple && !this.tags) {
+      if (!this.multiple) {
         val = val[0]
         if (val) {
-          if (this.justValue) {
-            val = val[this.value]
-          }
           this.closeList()
         }
       }