renusify 1.1.4 → 1.2.0

package/components/form/datePicker/month.vue

@@ -21,6 +21,7 @@ export default {
     locale: String,
     year: Number
   },
+  emits:['update:modelValue'],
   data() {
     return {
       p: 0

package/components/form/datePicker/year.vue

@@ -21,6 +21,7 @@ export default {
     locale: String,
     month: Number
   },
+  emits:['update:modelValue'],
   methods: {
     emit(n) {
       this.$emit('update:model-value', n)

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">
@@ -63,6 +64,7 @@ export default {
     meta: Array,
     metaRequired: {type: Boolean, default: true}
   },
+  emits:['update:modelValue','add'],
   components: {
     single
   },
@@ -81,6 +83,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
@@ -70,6 +70,7 @@ export default {
     },
     metaRequired: Boolean
   },
+  emits:['file-link','select'],
   data() {
     return {
       showAdd: true,
@@ -167,6 +168,7 @@ export default {
       height: 200px;
       z-index: -2;
       opacity: 0.8;
+      max-width: 100%;
     }
 
     .icon-100 {

package/components/form/form.vue

@@ -18,6 +18,7 @@ export default {
   props: {
     modelValue: Boolean
   },
+  emits:['update:modelValue'],
   data: () => ({
     inputs: [],
     watchers: [],

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="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>
+  <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 {
@@ -49,8 +51,10 @@ export default {
     size: Number,
     disableAdd: Boolean,
     translate: Boolean,
-    template: Object
+    template: Object,
+    addBtnClass: {'type': String, default: 'text-center'}
   },
+  emits:['update:modelValue','add','delete'],
   data() {
     return {
       disabledDel: {}
@@ -83,14 +87,14 @@ export default {
         let a = this.modelValue || []
         a.push(this.$helper.clearProxy(this.template))
         this.$emit('add', true)
-        this.$emit('update:model-value', a)
+        this.$emit('update:modelValue', a)
       }
     },
     del(i) {
       let a = this.modelValue || []
       a.splice(i, 1)
       this.$emit('delete', i)
-      this.$emit('update:model-value', a)
+      this.$emit('update:modelValue', a)
     },
     up(i) {
       if (i === 0) {
@@ -98,7 +102,7 @@ export default {
       }
       let a = this.modelValue || []
       a = this.array_move(a, i, i - 1)
-      this.$emit('update:model-value', a)
+      this.$emit('update:modelValue', a)
     },
     down(i) {
       if (i === this.modelValue.length - 1) {
@@ -106,7 +110,7 @@ export default {
       }
       let a = this.modelValue || []
       a = this.array_move(a, i, i + 1)
-      this.$emit('update:model-value', a)
+      this.$emit('update:modelValue', a)
     },
     array_move(arr, old_index, new_index) {
       if (new_index >= arr.length) {

package/components/form/input.vue

@@ -34,7 +34,6 @@
   </div>
 </template>
 <script>
-import './scss/input.scss'
 
 export default {
   name: 'r-input',
@@ -67,6 +66,7 @@ export default {
     },
     validateOnBlur: {type: Boolean, default: undefined}
   },
+  emits:['pre-icon','icon','update:modelValue'],
   data() {
     return {
       uid: 'input_' + this.$helper.uniqueId(),
@@ -283,3 +283,255 @@ export default {
 }
 
 </script>
+<style lang="scss">
+@import '../../style/include';
+
+
+.#{$prefix}input-container {
+  position: relative;
+  align-items: flex-start;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  line-height: 24px;
+  font-size: 1rem;
+  letter-spacing: normal;
+  margin-top: 20px;
+
+  &.input-ltr {
+    input {
+      direction: ltr;
+    }
+  }
+
+    &:not(.input-disabled) {
+      input,
+      textarea, .label, .#{$prefix}icon, .#{$prefix}btn {
+        color: var(--color-text-primary)
+      }
+    }
+
+    input::placeholder,
+    textarea::placeholder {
+      color: var(--color-text-disabled)
+    }
+
+    &.input-disabled {
+      * {
+        color: var(--color-text-disabled)
+      }
+    }
+
+    .input-control {
+      border: solid 1px var(--color-border)
+    }
+
+  &.input-disabled {
+    pointer-events: none;
+  }
+
+  input {
+    max-height: 32px
+  }
+
+  input,
+  textarea {
+    flex: 1 1 auto;
+    line-height: 20px;
+    padding: 8px 0 8px;
+    max-width: 100%;
+    min-width: 0px;
+    width: 100%;
+    outline: none;
+    position: relative;
+
+    &[type=text ]::-ms-clear {
+      display: none
+    }
+
+    &:invalid {
+      box-shadow: none
+    }
+
+    &:focus,
+    &:active {
+      outline: none
+    }
+  }
+
+  .input-control {
+    display: flex;
+    flex-direction: column;
+    height: 40px;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    width: 100%;
+    align-items: flex-start;
+    justify-content: center;
+    position: relative;
+    .after-icon {
+      position: absolute;
+      cursor: pointer;
+      @include ltr() {
+        right: 5px;
+      }
+      @include rtl() {
+        left: 5px;
+      }
+
+    }
+    .pre-icon {
+      position: absolute;
+      cursor: pointer;
+      @include ltr() {
+        left: 5px;
+      }
+      @include rtl() {
+        right: 5px;
+      }
+
+    }
+
+    &:not(.input-tile) {
+      padding: 0 16px;
+      border-radius: 20px;
+    }
+
+    &.input-tile {
+      padding: 0 8px;
+      border-radius: 4px;
+    }
+  }
+
+  &.hide-detail {
+
+    > .input-control {
+      border: unset !important;
+      height: auto;
+      padding: 0;
+    }
+  }
+
+  .label {
+    white-space: nowrap;
+    position: absolute;
+    z-index: 0;
+    top: 8px;
+    transition: $primary-transition;
+
+    @include ltr() {
+      left: 15px;
+      transform-origin: top left;
+    }
+
+    @include rtl() {
+      right: 15px;
+      transform-origin: top right;
+    }
+  }
+
+  :not(.input-tile) {
+    .label-active {
+      @include ltr() {
+        transform: translateY(-27px) translateX(5px) scale(.9);
+      }
+      @include rtl() {
+        transform: translateY(-27px) translateX(-5px) scale(.9);
+      }
+      transition: $primary-transition
+    }
+  }
+
+  .label-fixed {
+    transform: none !important;
+    top: -20px !important;
+    @include ltr() {
+      left: 0 !important;
+    }
+    @include rtl() {
+      right: 0 !important;
+    }
+  }
+
+  .input-tile {
+    .label-active {
+      @include ltr() {
+        transform: translateY(-27px) translateX(-8px) scale(.9);
+      }
+      @include rtl() {
+        transform: translateY(-27px) translateX(8px) scale(.9);
+      }
+      transition: $primary-transition
+    }
+  }
+
+  &.input-focused {
+    .input-control {
+      border: solid 1px currentColor;
+    }
+
+    .#{$prefix}icon, .#{$prefix}btn {
+      color: currentColor !important;
+    }
+
+    :not(.input-tile) {
+      .label {
+        color: currentColor !important;
+        @include ltr() {
+          transform: translateY(-27px) translateX(5px) scale(.9);
+        }
+        @include rtl() {
+          transform: translateY(-27px) translateX(-5px) scale(.9);
+        }
+        transition: $primary-transition
+      }
+    }
+
+    .input-tile {
+      .label {
+        color: currentColor !important;
+        @include ltr() {
+          transform: translateY(-27px) translateX(-8px) scale(.9);
+        }
+        @include rtl() {
+          transform: translateY(-27px) translateX(8px) scale(.9);
+        }
+        transition: $primary-transition
+      }
+    }
+  }
+
+  .massage {
+    display: none;
+    margin-left: 10px;
+
+    &-active {
+      display: block;
+    }
+  }
+
+
+  &.color-error-text {
+    .label {
+      color: currentColor;
+    }
+
+    .input-control {
+      border: solid 1px currentColor;
+    }
+  }
+
+  &.text-area {
+    .input-control {
+      height: auto;
+
+      &:not(.input-tile) {
+        border-radius: 15px;
+      }
+    }
+
+  }
+}
+
+
+</style>

package/components/form/inputTel/index.vue

@@ -20,17 +20,17 @@
         </r-list>
       </r-card>
     </r-modal>
-    <r-btn class="btn-country ltr mx-1"
-           :rounded="!tile" :disabled="!select||readonly" @click.stop="toggleDropdown" outlined>
+    <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="tile"
+                  :tile="c_tile"
                   :readonly="readonly"
-                  :rules="required?['required']:[]"
+                  :rules="required?['required','number']:['number']"
                   v-model="tel.phone"
     >
     </r-text-input>
@@ -56,7 +56,7 @@ export default {
       type: String,
       default: ''
     },
-    tile: Boolean,
+    tile: {type: Boolean, default: undefined},
     required: Boolean,
     readonly: Boolean,
     select: {
@@ -65,6 +65,7 @@ export default {
     }
 
   },
+  emits:['update:modelValue'],
   data() {
     return {
       tel: {
@@ -89,6 +90,14 @@ export default {
       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() {
       /**
@@ -143,15 +152,16 @@ export default {
         return
       }
       this.tel.country_code = this.activeCountry.dialCode
-      if (this.tel.phone.startsWith('0')) {
-        setTimeout(() => {
+
+      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)
-        }, 1)
-      } else {
-        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() {