renusify 1.1.3 → 1.1.5

package/components/avatar/index.vue

@@ -24,17 +24,18 @@
         props: {
             size: {
                 type: [Number, String],
-                default: 48
+              default: 48
             },
-            elevation: {
-                type: String,
-                default: 'none'
-            },
-            editable: {
-                type: String
-            },
-            flat: Boolean,
-            tile: Boolean
+          elevation: {
+            type: String,
+            default: 'none'
+          },
+          editable: {
+            type: String
+          },
+          flat: Boolean,
+          tile: Boolean,
+          headers: Object
         },
         data() {
             return {
@@ -58,19 +59,24 @@
                 this.$refs.file.click()
             },
             saveImage() {
-                this.loading = true
-                let fileData = new FormData()
-                fileData.append('file', this.files[0])
-                this.$axios.post(this.editable, fileData,
-                    {
-                        headers: {'Content-Type': 'multipart/form-data'},
-                        onUploadProgress: function (progressEvent) {
-                            this.uploadPercentage = Math.min(parseInt(Math.floor((progressEvent.loaded * 100) / progressEvent.total)), 98)
-                        }.bind(this),
-                        cancelToken: this.CancelTokenSource.token
-                    }
-                )
-                    .then(() => {
+              this.loading = true
+              let fileData = new FormData()
+              fileData.append('file', this.files[0])
+              let headers = this.headers
+              if (!headers) {
+                headers = {}
+              }
+              headers['Content-Type'] = 'multipart/form-data'
+              this.$axios.post(this.editable, fileData,
+                  {
+                    headers: headers,
+                    onUploadProgress: function (progressEvent) {
+                      this.uploadPercentage = Math.min(parseInt(Math.floor((progressEvent.loaded * 100) / progressEvent.total)), 98)
+                    }.bind(this),
+                    cancelToken: this.CancelTokenSource.token
+                  }
+              )
+                  .then(() => {
                         this.loading = false
                         this.k+=1
                     }, () => {

package/components/bar/bottomNavigationCircle.vue

@@ -7,9 +7,13 @@
         :key="i"
     >
       <div class="navigation-item-icon">
-        <r-icon v-html="item.icon"></r-icon>
+        <slot name="icon" :item="item">
+          <r-icon v-html="item.icon"></r-icon>
+        </slot>
+      </div>
+      <div class="navigation-item-text">
+        <slot name="name" :item="item">{{ item.name }}</slot>
       </div>
-      <div class="navigation-item-text">{{ item.name }}</div>
     </router-link>
   </nav>
 </template>
@@ -77,7 +81,7 @@ export default {
       bottom: 31px;
       background-color: currentColor;
       border-radius: 50%;
-      padding: 15px;
+      padding: 12px;
       width: 50px;
       height: 50px;
       border: 3px solid white;

package/components/form/address.vue

@@ -2,10 +2,12 @@
   <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']:[]"
+      :headers="{'Authorization':''}"
       :tile="tile">
   </r-select-input>
   <r-select-input :label="$t('state','renusify')"
@@ -17,6 +19,7 @@
                   :searchLink="country&&`https://codenus.com/api/apps/address/${country['id']}?lang=${$r.lang}`"
                   :rules="required?['required']:[]"
                   value="id"
+                  :headers="{'Authorization':''}"
                   :tile="tile">
 
   </r-select-input>
@@ -29,6 +32,7 @@
                   :searchLink="state&&`https://codenus.com/api/apps/address/${country['id']}/${state['id']}?lang=${$r.lang}`"
                   :rules="required?['required']:[]"
                   value="id"
+                  :headers="{'Authorization':''}"
                   :tile="tile">
 
   </r-select-input>
@@ -55,12 +59,13 @@ export default {
     hideCity: Boolean,
     hideZipCode: Boolean,
     hideStreet: Boolean,
-    tile: Boolean,
+    tile: {type: Boolean, default: undefined},
+    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/camInput.vue

@@ -131,6 +131,7 @@ export default {
       default: 3,
       type: Number,
     },
+    headers: Object
   },
   data() {
     return {
@@ -240,9 +241,14 @@ export default {
       const blob = new Blob(this.recordedBlobs, {type: this.type});
       let fileData = new FormData();
       fileData.append("file", blob, "user.webm");
+      let headers = this.headers
+      if (!headers) {
+        headers = {}
+      }
+      headers['Content-Type'] = 'multipart/form-data'
       this.$axios
           .post(this.uploadLink, fileData, {
-            headers: {"Content-Type": "multipart/form-data"},
+            headers: headers,
             onUploadProgress: function (progressEvent) {
               this.uploadPercentage = Math.min(
                   parseInt(
@@ -329,7 +335,7 @@ export default {
       this.$axios
           .delete(this.uploadLink, {
             data: {link: link},
-          })
+          }, {headers: this.headers})
           .then(() => {
             this.files.splice(i, 1);
             this.emit();

package/components/form/check-input.vue

@@ -1,104 +1,105 @@
 <template>
-    <r-input :class="`${$r.prefix}check-input`" :active="active"
-             :model-value="lazyValue"
-             inputControlClass="pe-0"
-             :msg="msg"
-             :error="pass===false"
-             @click.prevent="handleClick">
-        <div class="check-input-container v-center">
-            <input :autofocus="autofocus"
-                   :type="type"
-                   @focusin="active=true"
-                   @focusout="active=false"
-                   @input="emit"
-                   :value="lazyValue"
-                   autocomplete="no"
-                   ref="input"
-            />
-            <r-btn size="small"
-                   :rounded="$attrs.tile===undefined||$attrs.tile===false"
-                   :loading="loading" @click.prevent="check()" class="elevation-none mx-1">
-                {{$t('check','renusify')}}
-                <r-icon v-if="pass!==null && pass!==false" v-html="$r.icons.check" exact width="20" height="20"></r-icon>
-                <r-icon v-if=" pass===false" v-html="$r.icons.close" width="20" height="20"></r-icon>
-            </r-btn>
-        </div>
-    </r-input>
+  <r-input :class="`${$r.prefix}check-input`" :active="active"
+           :model-value="lazyValue"
+           inputControlClass="pe-0"
+           :msg="msg"
+           :error="pass===false"
+           @click.prevent="handleClick">
+    <div class="check-input-container v-center">
+      <input :autofocus="autofocus"
+             :type="type"
+             @focusin="active=true"
+             @focusout="active=false"
+             @input="emit"
+             :value="lazyValue"
+             autocomplete="no"
+             ref="input"
+      />
+      <r-btn size="small"
+             :rounded="$attrs.tile===undefined||$attrs.tile===false"
+             :loading="loading" @click.prevent="check()" class="elevation-none mx-1">
+        {{ $t('check', 'renusify') }}
+        <r-icon v-if="pass!==null && pass!==false" v-html="$r.icons.check" exact width="20" height="20"></r-icon>
+        <r-icon v-if=" pass===false" v-html="$r.icons.close" width="20" height="20"></r-icon>
+      </r-btn>
+    </div>
+  </r-input>
 </template>
 <script>
-    export default {
-        name: 'r-check-input',
-        props: {
-            type: {
-                type: String,
-                default: 'text'
-            },
-            name: {
-                type: String,
-                default: 'text'
-            },
-            link: String,
-            modelValue: [String, Number],
-            autofocus: Boolean,
-        },
+export default {
+  name: 'r-check-input',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    name: {
+      type: String,
+      default: 'text'
+    },
+    link: String,
+    modelValue: [String, Number],
+    autofocus: Boolean,
+    headers: Object
+  },
 
-        data() {
-            return {
-                lazyValue: this.modelValue,
-                msg: null,
-                pass: null,
-                loading: false,
-                active: false
-            }
-        },
-        watch: {
-            modelValue() {
-                this.msg = null
-                this.pass = null
-                this.$emit('data', {})
-                this.lazyValue = this.modelValue
-            }
-        },
-        methods: {
-            check() {
-                if (this.link) {
-                    this.loading = true
-                    this.$axios.post(this.link, {
-                        [this.name]: this.lazyValue
-                    }).then(({data}) => {
-                        this.$emit('data', data)
-                        this.msg = null
-                        this.loading = false
-                        this.pass = true
-                    }, ({response}) => {
-                        if (response.data.msg) {
-                            this.msg = this.$t(response.data.msg,'renusify')
-                        }
-                        this.$emit('data', response.data)
-                        this.loading = false
-                        this.pass = false
-                    })
-                }
+  data() {
+    return {
+      lazyValue: this.modelValue,
+      msg: null,
+      pass: null,
+      loading: false,
+      active: false
+    }
+  },
+  watch: {
+    modelValue() {
+      this.msg = null
+      this.pass = null
+      this.$emit('data', {})
+      this.lazyValue = this.modelValue
+    }
+  },
+  methods: {
+    check() {
+      if (this.link) {
+        this.loading = true
+        this.$axios.post(this.link, {
+          [this.name]: this.lazyValue
+        }, {headers: this.headers}).then(({data}) => {
+          this.$emit('data', data)
+          this.msg = null
+          this.loading = false
+          this.pass = true
+        }, ({response}) => {
+          if (response.data.msg) {
+            this.msg = this.$t(response.data.msg, 'renusify')
+          }
+          this.$emit('data', response.data)
+          this.loading = false
+          this.pass = false
+        })
+      }
 
-            },
-            handleClick(e) {
-                this.$refs.input.focus()
-            },
-            emit(e) {
-                this.lazyValue=e.target.value
-                this.$emit('update:modelValue', this.lazyValue)
-            }
-        }
+    },
+    handleClick(e) {
+      this.$refs.input.focus()
+    },
+    emit(e) {
+      this.lazyValue = e.target.value
+      this.$emit('update:modelValue', this.lazyValue)
     }
+  }
+}
 
 </script>
 <style lang="scss">
-    @import "../../style/include";
+@import "../../style/include";
 
-    .#{$prefix}check-input {
-        .check-input-container {
-            display: flex;
-            width: 100%;
-        }
-    }
+.#{$prefix}check-input {
+  .check-input-container {
+    display: flex;
+    width: 100%;
+  }
+}
 </style>

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/file.js

@@ -1,4 +1,7 @@
 export default {
+    props: {
+        headers: Object
+    },
     data() {
         return {
             imageStatus: 'inProgress',
@@ -95,9 +98,23 @@ export default {
             this.imageStatus = 'inProgress'
             let fileData = new FormData()
             fileData.append('file', this.file)
-            this.$axios.post(this.uploadLink, fileData,
+            let headers = this.headers
+            if (!headers) {
+                headers = {}
+            }
+            headers['Content-Type'] = 'multipart/form-data'
+            let link = this.uploadLink
+            if (this.maxFileSize) {
+                if (link.indexOf('?') === -1) {
+                    link += '?'
+                } else {
+                    link += '&'
+                }
+                link += 'max_size=' + this.maxFileSize
+            }
+            this.$axios.post(link, fileData,
                 {
-                    headers: {'Content-Type': 'multipart/form-data'},
+                    headers: headers,
                     onUploadProgress: function (progressEvent) {
                         this.uploadPercentage = Math.min(parseInt(Math.floor((progressEvent.loaded * 100) / progressEvent.total)), 98)
                     }.bind(this),
@@ -117,7 +134,8 @@ export default {
         deleteImage() {
             this.$axios.delete(this.uploadLink,
                 {
-                    data: {link: this.fileLink}
+                    data: {link: this.fileLink},
+                    headers: this.headers
                 }
             )
         },

package/components/form/fileUploader/index.vue

@@ -1,8 +1,9 @@
 <template>
   <r-input :class="[`${$r.prefix}file-uploader`]"
-           :model-value="filesLinks.length>0?filesLinks:null" hide
+           :model-value="filesLinks.length>0?filesLinks:null"
+           hide
            :label="labelFile"
-           :rules="$attrs.rules"
+           v-bind="attrs"
            labelControlClass="label-fixed">
     <r-row no-gutters>
       <template :key="meta?file['url']:file" v-for="(file,n) in filesLinks">
@@ -81,6 +82,15 @@ export default {
     }
   },
   computed: {
+    attrs() {
+      let l = {}
+      for (let k in this.$attrs) {
+        if (k !== 'label') {
+          l[k] = this.$attrs[k]
+        }
+      }
+      return l
+    },
     labelFile() {
       let l = this.$attrs.label || ''
       if (this.maxFileSize) {

package/components/form/fileUploader/single.vue

@@ -14,8 +14,8 @@
         >
           {{ `% ${uploadPercentage}` }}
         </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 :href="'/'+fileLink" class="image-copy" icon>
+          <r-icon v-html="$r.icons.eye"></r-icon>
         </r-btn>
         <img v-if="isImg()" :class="`image ${imageStatus} `" :src="getUrl(file)">
         <r-icon v-else
@@ -167,6 +167,7 @@ export default {
       height: 200px;
       z-index: -2;
       opacity: 0.8;
+      max-width: 100%;
     }
 
     .icon-100 {

package/components/form/group-input.vue

@@ -1,43 +1,45 @@
 <template>
-  <div :class="`${$r.prefix}group-input`">
-    <label>{{ label }}</label>
-    <div class="group-holder" v-for="(item,i) in modelValue" :key="i">
-      <div class="group-slot">
-        <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"
-                            v-model="item[k]"></r-text-input>
-              <r-number-input v-else-if="typeof v==='number'" class="flex-grow-0 me-1" :label="k"
-                              v-model="item[k]"></r-number-input>
-              <r-switch-input v-else-if="typeof v==='boolean'" class="flex-grow-0 me-1" :label="k"
-                              v-model="item[k]"></r-switch-input>
+  <r-input :class="`${$r.prefix}group-input`"
+           :model-value="modelValue"
+           hide>
+    <div class="w-full">
+      <div class="group-holder" v-for="(item,i) in modelValue" :key="i">
+        <div class="group-slot">
+          <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="t(k)"
+                              v-model="item[k]"></r-text-input>
+                <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>
       </div>
-      <div class="group-action">
-        <r-btn icon text>
-          <r-icon v-html="$r.icons.chevron_up" :class="{'icon-disabled':i===0}" @click.prevent="up(i)"></r-icon>
-        </r-btn>
-        <r-btn icon text>
-          <r-icon v-html="$r.icons.chevron_down" :class="{'icon-disabled':i===modelValue.length-1}"
-                  @click.prevent="down(i)"></r-icon>
-        </r-btn>
-        <r-btn v-if="!disableItems.includes(item[itemKey])" icon class="color-error-text" text @click.prevent="del(i)">
-          <r-icon v-html="$r.icons.delete"></r-icon>
-        </r-btn>
+        <div class="group-action">
+          <r-btn icon text>
+            <r-icon v-html="$r.icons.chevron_up" :class="{'icon-disabled':i===0}" @click.prevent="up(i)"></r-icon>
+          </r-btn>
+          <r-btn icon text>
+            <r-icon v-html="$r.icons.chevron_down" :class="{'icon-disabled':i===modelValue.length-1}"
+                    @click.prevent="down(i)"></r-icon>
+          </r-btn>
+          <r-btn v-if="!disableItems.includes(item[itemKey])" icon text @click.prevent="del(i)">
+            <r-icon v-html="$r.icons.delete" class="color-error-text"></r-icon>
+          </r-btn>
+        </div>
+      </div>
+      <div class="mt-5" :class="addBtnClass">
+        <transition name="scale">
+          <r-btn v-if="show_add" class="color-success" icon @click.prevent="add">
+            <r-icon v-html="$r.icons.plus" class="color-white-text"></r-icon>
+          </r-btn>
+        </transition>
       </div>
     </div>
-    <div class="text-center mt-5">
-      <transition name="scale">
-        <r-btn v-if="show_add" class="color-success" icon @click.prevent="add">
-          <r-icon v-html="$r.icons.plus"></r-icon>
-        </r-btn>
-      </transition>
-    </div>
-
-  </div>
+  </r-input>
 </template>
 <script>
 export default {
@@ -48,7 +50,9 @@ export default {
     modelValue: Array,
     size: Number,
     disableAdd: Boolean,
-    template: Object
+    translate: Boolean,
+    template: Object,
+    addBtnClass: {'type': String, default: 'text-center'}
   },
   data() {
     return {
@@ -68,6 +72,12 @@ export default {
     }
   },
   methods: {
+    t(k) {
+      if (this.translate) {
+        return this.$t(k)
+      }
+      return k
+    },
     disDel(value) {
       this.disabledDel[value] = true
     },
@@ -133,4 +143,4 @@ export default {
     }
   }
 }
-</style>
+</style>