renusify 1.1.2 → 1.1.4

package/components/button/index.vue

@@ -16,7 +16,7 @@
 
       </span>
     <span class="btn-loader" v-if="loading">
-        <r-progress-circular :size="(size==='x-small')?'15':'23'" indeterminate width="2"></r-progress-circular></span>
+        <r-progress-circle :size="(size==='x-small')?'15':'23'" indeterminate width="2"></r-progress-circle></span>
   </component>
 </template>
 

package/components/button/style.scss

@@ -73,7 +73,6 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 
   &:not(.btn-text):not(.btn-outlined) {
     background-color: var(--color-sheet);
-    color: var(--color-text-primary)
   }
 
   &.btn-outlined.btn-text {

package/components/chat/chatInput.vue

@@ -18,7 +18,7 @@
                text>
           <r-icon v-html="$r.icons.attachment"></r-icon>
         </r-btn>
-        <r-progress-circular
+        <r-progress-circle
             v-else
             @click.prevent="fileDelete()"
             :indeterminate=false
@@ -27,7 +27,7 @@
             size="30"
         >
           <r-icon v-html="$r.icons.close"></r-icon>
-        </r-progress-circular>
+        </r-progress-circle>
       </template>
       <r-btn class="color-success-text"
              :disabled="!text"

package/components/form/address.vue

@@ -1,37 +1,38 @@
 <template>
-  <r-select
+  <r-select-input
       :label="$t('country','renusify')"
       v-model="country"
+      v-if="!defaultCountry"
       @update:model-value="emit(true,true)"
       value="id"
       :searchLink="`https://codenus.com/api/apps/address?lang=${$r.lang}`"
       :rules="required?['required']:[]"
       :tile="tile">
-  </r-select>
-  <r-select :label="$t('state','renusify')"
-            v-model="state"
-            :disabled="!country"
-            :key="country&&country['id']"
-            v-if="!hideState"
-            @update:model-value="emit(false,true)"
-            :searchLink="country&&`https://codenus.com/api/apps/address/${country['id']}?lang=${$r.lang}`"
-            :rules="required?['required']:[]"
-            value="id"
-            :tile="tile">
+  </r-select-input>
+  <r-select-input :label="$t('state','renusify')"
+                  v-model="state"
+                  :disabled="!country"
+                  :key="country&&country['id']"
+                  v-if="!hideState"
+                  @update:model-value="emit(false,true)"
+                  :searchLink="country&&`https://codenus.com/api/apps/address/${country['id']}?lang=${$r.lang}`"
+                  :rules="required?['required']:[]"
+                  value="id"
+                  :tile="tile">
 
-  </r-select>
-  <r-select v-if="!hideCity"
-            v-model="city"
-            :disabled="!state"
-            :key="state&&(country['id']+'-'+state['id'])"
-            @update:model-value="emit(false,false)"
-            :label="$t('city','renusify')"
-            :searchLink="state&&`https://codenus.com/api/apps/address/${country['id']}/${state['id']}?lang=${$r.lang}`"
-            :rules="required?['required']:[]"
-            value="id"
-            :tile="tile">
+  </r-select-input>
+  <r-select-input v-if="!hideCity"
+                  v-model="city"
+                  :disabled="!state"
+                  :key="state&&(country['id']+'-'+state['id'])"
+                  @update:model-value="emit(false,false)"
+                  :label="$t('city','renusify')"
+                  :searchLink="state&&`https://codenus.com/api/apps/address/${country['id']}/${state['id']}?lang=${$r.lang}`"
+                  :rules="required?['required']:[]"
+                  value="id"
+                  :tile="tile">
 
-  </r-select>
+  </r-select-input>
   <r-text-input v-if="!hideZipCode" @update:model-value="emit(false,false)"
                 :label="$t('zip_code','renusify')"
                 v-model="zip_code"
@@ -56,11 +57,12 @@ export default {
     hideZipCode: Boolean,
     hideStreet: Boolean,
     tile: Boolean,
+    defaultCountry: Object,
     modelValue: Object
   },
   data() {
     return {
-      country: this.modelValue ? this.modelValue.country : null,
+      country: this.modelValue ? this.modelValue.country : this.defaultCountry,
       state: this.modelValue ? this.modelValue.state : null,
       city: this.modelValue ? this.modelValue.city : null,
       zip_code: this.modelValue ? this.modelValue.zip_code : null,

package/components/form/address_ir.vue

@@ -1,5 +1,5 @@
 <template>
-  <r-select :label="$t('state','renusify')"
+  <r-select-input :label="$t('state','renusify')"
             v-model="state"
             @update:model-value="emit"
             :items="Object.keys(states)"
@@ -7,8 +7,8 @@
             :tile="tile"
             justValue>
 
-  </r-select>
-  <r-select v-if="state"
+  </r-select-input>
+  <r-select-input v-if="state"
             @update:model-value="emit"
             :label="$t('city','renusify')"
             v-model="city"
@@ -17,7 +17,7 @@
             :tile="tile"
             justValue>
 
-  </r-select>
+  </r-select-input>
   <r-text-area v-if="city && !hideAddress" @update:model-value="emit"
                :label="$t('address','renusify')"
                v-model="address"

package/components/form/checkbox.vue

@@ -18,7 +18,7 @@
             </span>
         <span class="ms-2 color-primary-text" @click="emit">
                 <span class="color-error-text" v-if="isRequired">*</span>
-                {{ label }}
+          <slot name="label">{{ label }}</slot>
             </span>
       </div>
     </template>

package/components/form/datePicker/index.vue

@@ -5,17 +5,17 @@
         />
     </r-input>
     <r-modal :model-value="show" @update:model-value="close()" :closebtn="false" closable class="text-center">
-        <div v-if="!showTime" :class="`${$r.prefix}date-picker`">
-            <div class="sheet">
-                <r-container>
-                    <r-row>
-                      <r-col class="col-auto">
-                        <r-btn v-if="tab!=='month'" icon
-                               @click.prevent="tab==='day'?incrementMonth(-1):incrementYear(-12)">
-                          <r-icon v-html="$r.icons.arrow_left"></r-icon>
-                        </r-btn>
-                      </r-col>
-                      <r-col class="text-center">
+        <div v-if="!showTime" :class="`${$r.prefix}date-input`">
+          <div class="sheet">
+            <r-container>
+              <r-row>
+                <r-col class="col-auto">
+                  <r-btn v-if="tab!=='month'" icon
+                         @click.prevent="tab==='day'?incrementMonth(-1):incrementYear(-12)">
+                    <r-icon v-html="$r.icons.arrow_left"></r-icon>
+                  </r-btn>
+                </r-col>
+                <r-col class="text-center">
                         <r-btn class="me-2" text @click.prevent="tab==='month'?tab='day':tab='month'">
                           <r-icon v-html="tab==='month'?$r.icons.chevron_up:$r.icons.chevron_down"></r-icon>
                           {{
@@ -370,17 +370,17 @@ export default {
 <style lang="scss">
     @import "../../../style/include";
 
-    .#{$prefix}date-picker {
-        position: relative;
-        display: inline-block;
-        font-size: 10px;
-        color: #303030;
+    .#{$prefix}date-input {
+      position: relative;
+      display: inline-block;
+      font-size: 10px;
+      color: #303030;
 
-            .cell {
-                &.today {
-                  color: var(--color-one);
+      .cell {
+        &.today {
+          color: var(--color-one);
 
-                  .cellContent {
+          .cellContent {
                     border: solid 1px var(--color-one);
                   }
                 }

package/components/form/fileUploader/single.vue

@@ -5,7 +5,7 @@
         <r-btn icon class="image-close color-white">
           <r-icon @click.prevent="fileDelete()" class="color-error-text" v-html="$r.icons.delete"></r-icon>
         </r-btn>
-        <r-progress-circular
+        <r-progress-circle
             :indeterminate=false
             :modelValue="uploadPercentage"
             :width="2"
@@ -13,7 +13,7 @@
             size="50"
         >
           {{ `% ${uploadPercentage}` }}
-        </r-progress-circular>
+        </r-progress-circle>
         <r-btn @click.prevent="$helper.copy(fileLink)" class="image-copy" icon>
           <r-icon v-html="$r.icons.copy"></r-icon>
         </r-btn>

package/components/form/group-input.vue

@@ -6,12 +6,12 @@
         <slot :item="item" :index="i" :disableDel="disDel">
           <div class="d-flex flex-wrap pt-5">
             <template v-for="(v,k) in item" :key="i+'-'+k">
-              <r-text-input v-if="typeof v==='string'" class="flex-grow-0 me-1" :label="k"
+              <r-text-input v-if="typeof v==='string'" class="flex-grow-0 me-1" :label="t(k)"
                             v-model="item[k]"></r-text-input>
-              <r-number v-else-if="typeof v==='number'" class="flex-grow-0 me-1" :label="k"
-                        v-model="item[k]"></r-number>
-              <r-switch v-else-if="typeof v==='boolean'" class="flex-grow-0 me-1" :label="k"
-                        v-model="item[k]"></r-switch>
+              <r-number-input v-else-if="typeof v==='number'" class="flex-grow-0 me-1" :label="t(k)"
+                              v-model="item[k]"></r-number-input>
+              <r-switch-input v-else-if="typeof v==='boolean'" class="flex-grow-0 me-1" :label="t(k)"
+                              v-model="item[k]"></r-switch-input>
             </template>
           </div>
         </slot>
@@ -48,6 +48,7 @@ export default {
     modelValue: Array,
     size: Number,
     disableAdd: Boolean,
+    translate: Boolean,
     template: Object
   },
   data() {
@@ -68,6 +69,12 @@ export default {
     }
   },
   methods: {
+    t(k) {
+      if (this.translate) {
+        return this.$t(k)
+      }
+      return k
+    },
     disDel(value) {
       this.disabledDel[value] = true
     },
@@ -133,4 +140,4 @@ export default {
     }
   }
 }
-</style>
+</style>

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,186 @@
 <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 mx-1"
+           :rounded="!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="tile"
+                  :readonly="readonly"
+                  :rules="required?['required']:[]"
+                  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
-            }
+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: Boolean,
+    required: Boolean,
+    readonly: 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)
-            },
+  },
+  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
+    }
+  },
+  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)
+    },
 
-            choose(country) {
-                this.activeCountry = country
-                this.emit()
-                this.reset()
-            },
-            reset() {
-                this.search = ''
-                this.countries = allCountries
-                this.open = false
-            },
+    choose(country) {
+      this.activeCountry = country
+      this.emit()
+      this.reset()
+    },
+    reset() {
+      this.search = ''
+      this.countries = allCountries
+      this.open = false
+    },
 
-            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)
+    emit(e) {
+      if (this.readonly) {
+        return
+      }
+      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.country_code + ' ' + this.tel.phone)
+        }, 1)
+      } else {
+        this.$emit('update:modelValue', this.tel.country_code + ' ' + this.tel.phone)
 
-                }
+      }
 
-            },
-            toggleDropdown() {
-                this.open = !this.open
-            },
-            clickedOutside() {
-                this.open = false
-            }
-        }
+    },
+    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>