renusify 1.4.0 → 1.4.2

package/components/form/check-input.vue

@@ -20,8 +20,9 @@
              :rounded="$attrs.tile===undefined||$attrs.tile===false"
              :loading="loading" @click.prevent="check()" class="elevation-none mx-1">
         {{ $t('check', 'renusify') }}
-        <r-icon class="color-success-text" v-if="pass!==null && pass!==false" v-html="$r.icons.check" exact width="20" height="20"></r-icon>
-        <r-icon class="color-error-text" v-if=" pass===false" v-html="$r.icons.close" width="20" height="20"></r-icon>
+        <r-icon v-if="pass!==null && pass!==false" class="color-success-text" exact height="20" width="20"
+                v-html="$r.icons.check"></r-icon>
+        <r-icon v-if=" pass===false" class="color-error-text" height="20" width="20" v-html="$r.icons.close"></r-icon>
       </r-btn>
     </div>
   </r-input>

package/components/form/group-input.vue

@@ -9,7 +9,8 @@
           <slot :item="item" :index="i" :disableDel="disDel">
             <div v-if="template" class="d-flex flex-wrap pt-5 v-start">
               <template v-for="(v,k) in item" :key="i+'-'+k">
-                <component v-if="template[k]&&template[k]['type']" :is="template[k]['type']" v-model="item[k]" :label="t(k)"
+                <component :is="template[k]['type']" v-if="template[k]&&template[k]['type']" v-model="item[k]"
+                           :label="t(k)"
                            class="flex-grow-0 me-1" v-bind="template[k]['props']"></component>
               </template>
             </div>

package/components/form/input.vue

@@ -3,7 +3,7 @@
       :class="{
         [`${$r.prefix}input-container`]:true,
         [c_color]:c_color&&!isDisabled,
-        'color-error-text':hasError||validations.length>0,
+        'color-error-text':hasError&&genMessages.length>0,
         'hide-detail':c_hide,
         'input-focused':active,
         'input-disabled':isDisabled,

package/components/form/json/JsonView.vue

@@ -45,7 +45,7 @@ export default {
     disableAdd: Boolean,
     disableDel: Boolean,
     tile: Boolean,
-    translate:Boolean
+    translate: Boolean
   },
   emits: ['update:modelValue'],
   data() {
@@ -59,8 +59,8 @@ export default {
     }
   },
   methods: {
-    t(key){
-      if(this.translate){
+    t(key) {
+      if (this.translate) {
         return this.$t(key)
       }
       return key

package/components/form/json/index.vue

@@ -38,17 +38,17 @@
                             :translate="translate"
                             @update:model-value="info.value=null"
                             firstSelect></r-select-input>
-          </div>
-          <r-text-input v-if="info.type==='text'"
-                        :tile="tile"
-                        :label="valueLabel||$t('value','renusify')"
-                        v-model="info.value"></r-text-input>
+        </div>
+        <r-text-input v-if="info.type==='text'"
+                      :tile="tile"
+                      :label="valueLabel||$t('value','renusify')"
+                      v-model="info.value"></r-text-input>
         <r-number-input v-else-if="info.type==='number'"
                         :tile="tile"
-                        :label="valueLabel||$t('value','renusify')" v-model="info.value"></r-number-input>
+                        v-model="info.value" :label="valueLabel||$t('value','renusify')"></r-number-input>
         <r-switch-input v-else-if="info.type==='boolean'"
                         :tile="tile"
-                        :label="valueLabel||$t('value','renusify')" v-model="info.value"></r-switch-input>
+                        v-model="info.value" :label="valueLabel||$t('value','renusify')"></r-switch-input>
         <r-btn @click.prevent="add" class="ms-1 color-success" rounded>{{ $t('add', 'renusify') }}</r-btn>
       </div>
     </div>
@@ -163,8 +163,8 @@ export default {
         d.push(Object.assign({}, {}, this.template))
         this.$emit('update:modelValue', d)
       } else {
-        if(this.valueType){
-          this.info.type=this.valueType
+        if (this.valueType) {
+          this.info.type = this.valueType
         }
         this.show = true
       }

package/components/form/rating.vue

@@ -45,12 +45,13 @@ export default {
 </script>
 <style lang="scss">
 @import "../../style/include";
+
 $btn-sizes: (
-        'x-small': 20,
-        'small': 25,
-        'default': 30,
-        'large': 35,
-        'x-large': 40
+    'x-small': 20,
+    'small': 25,
+    'default': 30,
+    'large': 35,
+    'x-large': 40
 ) !default;
 .#{$prefix}rating {
   max-width: 100%;
@@ -60,11 +61,12 @@ $btn-sizes: (
 
   @each $name, $size in $btn-sizes {
     &.size-#{$name} {
-      .#{$prefix}btn{
+      .#{$prefix}btn {
         height: #{$size}px;
         width: #{$size}px
       }
-      .#{$prefix}icon{
+
+      .#{$prefix}icon {
         height: #{$size - 4px};
         width: #{$size - 4px}
       }

package/components/img/index.vue

@@ -135,12 +135,13 @@ export default {
       }
       if(wPH) {
         if (res['width'] !== 0 && res['height'] === 0) {
-          res['height'] = res['width'] / wPH
+          res['height'] = parseInt(res['width'] / wPH)
         }
         if (res['width'] === 0 && res['height'] !== 0) {
-          res['width'] = res['height'] * wPH
+          res['width'] = parseInt(res['height'] * wPH)
         }
       }
+
       if (res['width'] !== 0||res['height']!== 0) {
         return this.size = res
       }
@@ -149,10 +150,10 @@ export default {
         let cs = window.getComputedStyle(this.$refs.rImg.parentElement)
         let paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
         let borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
-        let w = parseFloat((parseFloat(cs.getPropertyValue('width')) - paddingX - borderX).toFixed(2));
+        let w = parseInt(parseFloat(cs.getPropertyValue('width')) - paddingX - borderX);
         return this.size = {
           width: w,
-          height: wPH?w / wPH:0
+          height: parseInt(wPH?w / wPH:0)
         }
       }
       return false

package/components/index.js

@@ -23,6 +23,7 @@ const list = {
     },
     'r-card': {'p': 'card/index.vue', 'c': [], 'd': ['ripple']},
     'r-chart': {'p': 'chart/chart.vue', 'c': [], 'd': []},
+    'r-world-map': {'p': 'chart/worldMap.vue', 'c': [], 'd': []},
     'r-chat': {
         'p': 'chat/index.vue',
         'c': ['r-btn', 'r-icon', 'r-progress-circle', 'r-img'],

package/components/slider/index.vue

@@ -1,24 +1,26 @@
 <template>
   <div class="slider-container"
+       :style="{
+        width:width+'px',
+        height:(width/wPH)+'px'
+           }"
        ref="slider"
        v-touch="{
                 'left':$r.rtl?prev:next,
                 'right':$r.rtl?next:prev
             }">
-    <r-progress-line v-if="autoplay &&progress" :model-value="remain" color="color-two"></r-progress-line>
+
     <r-btn v-if="arrow" icon @click="prev" class="btn-left-arrow">
       <r-icon v-html="$r.icons.chevron_left"></r-icon>
     </r-btn>
     <r-btn v-if="arrow" icon @click="next" class="btn-right-arrow">
       <r-icon v-html="$r.icons.chevron_right"></r-icon>
     </r-btn>
-    <transition :name="direction" mode="out-in" appear>
+    <transition :name="direction" :mode="mode" :appear="appear">
       <div :key="`slider-${currentIndex}`"
-           :class="{'slide-loaded':loaded,'slide-loading':!loaded}"
-           class="slider-slides" :style="{
-        width:width+'px',
-        height:(width/wPH)+'px'
-           }">
+           :class="[[slidesClass],{'slide-loaded':loaded,'slide-loading':!loaded}]"
+           class="slider-slides" >
+        <r-progress-line v-if="autoplay&&progress" class="slider-progress" :model-value="remain" color="color-one"></r-progress-line>
         <slot v-if="width>0" :item="currentSlide" :width="width" :height="width/wPH">
           {{ currentSlide }}
         </slot>
@@ -58,6 +60,10 @@ export default {
       type: Number,
       default: 2
     },
+    startIndex: {
+      type: Number,
+      default: 0
+    },
     autoplay: {
       type: Boolean,
       default: false
@@ -73,14 +79,22 @@ export default {
     dots: {
       type: Boolean,
       default: true
-    }
+    },
+    appear: {
+      type: Boolean,
+      default: true
+    },
+    slidesClass:{type:String,default:'out-in'},
+    mode:{type:String,default:'out-in'},
+    transitionRight:{type:String,default:'slider-right'},
+    transitionLeft:{type:String,default:'slider-left'}
   },
   emits:['index'],
   data() {
     return {
-      direction: 'slider-right',
+      direction: this.transitionRight,
       loaded: false,
-      currentIndex: 0,
+      currentIndex: this.startIndex,
       loaded_timer: null,
       timer: null,
       width: null,
@@ -113,7 +127,7 @@ export default {
     toggle() {
       clearInterval(this.timer)
       this.loaded = false
-      clearInterval(this.loaded_timer)
+      clearTimeout(this.loaded_timer)
       this.loaded_timer = setTimeout(() => {
         this.loaded = true
       }, 500)
@@ -128,7 +142,7 @@ export default {
 
     next: function () {
       this.toggle()
-      this.direction = 'slider-right'
+      this.direction = this.transitionRight
       if (this.currentIndex > this.slides.length - 2) {
         this.currentIndex = 0
       } else {
@@ -138,7 +152,7 @@ export default {
     },
     prev: function () {
       this.toggle()
-      this.direction = 'slider-left'
+      this.direction = this.transitionLeft
       if (this.currentIndex === 0) {
         this.currentIndex = this.slides.length - 1
       } else {
@@ -149,9 +163,9 @@ export default {
     goToSlide(i) {
       this.toggle()
       if (i < this.currentIndex) {
-        this.direction = 'slider-left'
+        this.direction = this.transitionLeft
       } else {
-        this.direction = 'slider-right'
+        this.direction = this.transitionRight
       }
 
       this.currentIndex = i
@@ -165,13 +179,20 @@ export default {
     }
   },
   beforeUnmount() {
+    clearInterval(this.timer)
+    clearTimeout(this.loaded_timer)
     clearInterval(this.remain_id)
   }
 }
 </script>
 <style lang="scss">
 @import '../../style/include';
-
+.slider-progress{
+  width: 100%;
+    position: absolute;
+    top: 0;
+    z-index: 1;
+}
 .btn-left-arrow {
   position: absolute;
   top: 50%;

package/directive/animate/style.scss

@@ -1,15 +1,18 @@
 @import '../../style/include';
 
-.r-directive-animate{
-  transition-timing-function: map_get($transition,'swing');
-   transition-property: opacity,transform;
-  &.fade{
+.r-directive-animate {
+  transition-timing-function: map_get($transition, 'swing');
+  transition-property: opacity, transform;
+
+  &.fade {
     opacity: 0;
-    &.animate{
+
+    &.animate {
       opacity: 1;
     }
   }
-  &.scaleIn{
+
+  &.scaleIn {
     transform: scale(.5);
     &.animate{
      transform:translateZ(0) scale(1);

package/directive/sortable/index.js

@@ -1,5 +1,5 @@
 import './style.scss'
-import {keys, ifHas, cleanArray} from '../../tools/helper'
+import {cleanArray, ifHas, keys} from '../../tools/helper'
 
 let scopeObj;
 

package/directive/sortable/style.scss

@@ -2,15 +2,18 @@
 
 .r-directive-sortable {
   position: relative;
-  .dragable{
-    .grab{
+
+  .dragable {
+    .grab {
       cursor: grab;
     }
-    &.grab{
+
+    &.grab {
       cursor: grab;
     }
   }
-  .sortable-holder{
+
+  .sortable-holder {
     background-color: rgba(20, 200, 255, 0.5);
   }
   .on-drag {

package/directive/title/style.scss

@@ -9,7 +9,7 @@
   position: fixed;
   border-radius: map-get($borders, 'sm');
   font-size: 14px;
-  font-family: fontOne;
+  font-family: inherit;
   transform: translateX(-50%);
   z-index: 50;
   opacity: 0;

package/index.js

@@ -107,14 +107,14 @@ export default {
         // renusify helper
         app.config.globalProperties.$helper = helper
         // renusify translate
-        app.config.globalProperties.$translate = new Translate(app.config.globalProperties.$r,app.config.globalProperties.$storage)
-        app.config.globalProperties.$dateTime = new DateTime(app.config.globalProperties.$r,app.config.globalProperties.$r.langs)
+        app.config.globalProperties.$translate = new Translate(app.config.globalProperties.$r, app.config.globalProperties.$storage)
+        app.config.globalProperties.$dateTime = new DateTime(app.config.globalProperties.$r, app.config.globalProperties.$r.langs)
         app.config.globalProperties.$t = (key, package_name = null, lang = null) => app.config.globalProperties.$translate.get(key, package_name, lang)
         app.config.globalProperties.$d = (value, key = 'long', local = null) => app.config.globalProperties.$dateTime.formatLocal(value, key, local)
-        const c=new Currency(app.config.globalProperties.$r)
+        const c = new Currency(app.config.globalProperties.$r)
         app.config.globalProperties.$n = (value) => c.formatLocal(value)
         // renusify validation
-        const v=new valid(app.config.globalProperties.$t)
+        const v = new valid(app.config.globalProperties.$t)
         app.config.globalProperties.$v = (names) => v.checkType(names)
 
         // install components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renusify",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",

package/plugins/trans/Currency.js

@@ -1,13 +1,14 @@
 export default class Currency {
-  constructor($r) {
-    this.$r=$r
-  }
-  formatLocal (value) {
-    try {
-          return new Intl.NumberFormat(this.$r.lang).format(value);
-    }catch (e) {
-      console.error(e)
-      return value
+    constructor($r) {
+        this.$r = $r
+    }
+
+    formatLocal(value) {
+        try {
+            return new Intl.NumberFormat(this.$r.lang).format(value);
+        } catch (e) {
+            console.error(e)
+            return value
+        }
     }
-  }
 }

package/plugins/trans/DateTime.js

@@ -1,6 +1,6 @@
 export default class DateTime {
-    constructor($r,langs) {
-        this.$r=$r
+    constructor($r, langs) {
+        this.$r = $r
         this.format = {
             narrow: {
                 weekday: 'narrow'

package/plugins/trans/Translate.js

@@ -1,9 +1,9 @@
 import Axios from 'axios';
 
 export default class Translate {
-  constructor($r,$storage) {
-    this.$r=$r
-    this.$storage=$storage
+  constructor($r, $storage) {
+    this.$r = $r
+    this.$storage = $storage
     this._count = 0;
     this._failed_messages = {};
     this._messages = {};
@@ -57,7 +57,7 @@ export default class Translate {
       key = key[0]
       if (!variable) {
         console.error(
-          'object key must have variables. key:' + key + ' variable:' + variable
+            'object key must have variables. key:' + key + ' variable:' + variable
         )
         this._failed_messages[key] = true
         return key
@@ -66,7 +66,7 @@ export default class Translate {
 
     if (package_name && typeof package_name !== 'string') {
       console.error(
-        'package name must be string. key:' + key + ' package_name:' + package_name
+          'package name must be string. key:' + key + ' package_name:' + package_name
       )
       this._failed_messages[key] = true
       return key
@@ -138,24 +138,24 @@ export default class Translate {
       locale = this.$storage.get("lang");
     }
     Axios.get(`/translate/${pack}/${locale}`).then(
-      res => {
-        if (res.data.length !== 0) {
-          const lang = {};
-          const lng = res.data.length
-          for (let i = 0; i < lng; i++) {
-            lang[res.data[i].key] = res.data[i][locale];
+        res => {
+          if (res.data.length !== 0) {
+            const lang = {};
+            const lng = res.data.length
+            for (let i = 0; i < lng; i++) {
+              lang[res.data[i].key] = res.data[i][locale];
+            }
+            this.local = locale;
+            this.setMessages(lang);
+          } else {
+            this.local = locale;
+            this.setMessages({});
           }
-          this.local = locale;
-          this.setMessages(lang);
-        } else {
-          this.local = locale;
-          this.setMessages({});
+          this.$r.store['langs_loaded'][pack] = true;
+        },
+        () => {
+          this.$r.store['langs_loaded'][pack] = true;
         }
-        this.$r.store['langs_loaded'][pack] = true;
-      },
-      () => {
-        this.$r.store['langs_loaded'][pack] = true;
-      }
     );
   }
 }

package/plugins/validation/Validate.js

@@ -1,22 +1,23 @@
 export default class Validate {
-  constructor($t) {
-    this.$t=$t
-  }
-  required() {
-    let msg = this.$t('required_error','renusify');
-    return (v) => !!(v !== undefined && v !== null && v !== '') || msg
-  }
+    constructor($t) {
+        this.$t = $t
+    }
 
-  requiredArray() {
-    return (v) => (v !== undefined && v !== null && v.length > 0) || this.$t('required_error','renusify');
-  }
+    required() {
+        let msg = this.$t('required_error', 'renusify');
+        return (v) => !!(v !== undefined && v !== null && v !== '') || msg
+    }
+
+    requiredArray() {
+        return (v) => (v !== undefined && v !== null && v.length > 0) || this.$t('required_error', 'renusify');
+    }
 
-  email() {
-    return (v) => (v && v.length > 0 ? /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) : true) || this.$t('validate_email','renusify');
+    email() {
+        return (v) => (v && v.length > 0 ? /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) : true) || this.$t('validate_email', 'renusify');
   }
 
   url() {
-    return (v) => (v && v.length > 0 ? /^((https?|ftp|smtp):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$/.test(v) : true) || this.$t('validate_url','renusify');
+      return (v) => (v && v.length > 0 ? /^((https?|ftp|smtp):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$/.test(v) : true) || this.$t('validate_url', 'renusify');
   }
 
   match(val) {
@@ -24,49 +25,49 @@ export default class Validate {
       if (v == val) {
         return true
       } else {
-        return this.$t(['validate_match', [val]],'renusify');
+          return this.$t(['validate_match', [val]], 'renusify');
       }
     }
   }
 
   phone() {
-    return (v) => (v && v.length > 0 ? /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4}$/.test(v) : true) || this.$t('validate_phone','renusify');
+      return (v) => (v && v.length > 0 ? /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4}$/.test(v) : true) || this.$t('validate_phone', 'renusify');
   }
 
   number() {
-    return (v) => (v && v.length > 0 ? /^([0-9.])*$/.test(v) : true) || this.$t('numeric_error','renusify');
+      return (v) => (v && v.length > 0 ? /^([0-9.])*$/.test(v) : true) || this.$t('numeric_error', 'renusify');
   }
 
   english() {
-    return (v) => (v && v.length > 0 ? /^([0-9a-zA-Z])*$/.test(v) : true) || this.$t('english_error','renusify');
+      return (v) => (v && v.length > 0 ? /^([0-9a-zA-Z])*$/.test(v) : true) || this.$t('english_error', 'renusify');
   }
 
   min_len(num) {
-    return v => (v && v.length > 0 ? v.length >= parseInt(num)?true: this.$t(['min_len_error', [num,v.length]],'renusify') : true)
+      return v => (v && v.length > 0 ? v.length >= parseInt(num) ? true : this.$t(['min_len_error', [num, v.length]], 'renusify') : true)
   }
 
   max_len(num) {
-    return v => (v && v.length > 0 ? v.length <= parseInt(num)?true: this.$t(['max_len_error', [num,v.length]],'renusify') : true)
+      return v => (v && v.length > 0 ? v.length <= parseInt(num) ? true : this.$t(['max_len_error', [num, v.length]], 'renusify') : true)
   }
 
   len(num) {
-    return v => (v && v.length > 0 ? v.length === parseInt(num)?true: this.$t(['len_error', [num,v.length]],'renusify') : true) || msg
+      return v => (v && v.length > 0 ? v.length === parseInt(num) ? true : this.$t(['len_error', [num, v.length]], 'renusify') : true) || msg
   }
 
   min(num) {
-    return v => (v ? parseFloat(v) >= parseFloat(num)?true: this.$t(['min_error', [num,parseFloat(v)]],'renusify') : true)
+      return v => (v ? parseFloat(v) >= parseFloat(num) ? true : this.$t(['min_error', [num, parseFloat(v)]], 'renusify') : true)
   }
 
   max(num) {
-    return v => (v ? parseFloat(v) <= parseFloat(num)?true: this.$t(['max_error', [num,parseFloat(v)]],'renusify') : true)
+      return v => (v ? parseFloat(v) <= parseFloat(num) ? true : this.$t(['max_error', [num, parseFloat(v)]], 'renusify') : true)
   }
 
   eq(num) {
-    return v => (v ? parseFloat(v) === parseFloat(num) : true) || this.$t(['validate_eq', [num]],'renusify');
+      return v => (v ? parseFloat(v) === parseFloat(num) : true) || this.$t(['validate_eq', [num]], 'renusify');
   }
 
   notDefined(name) {
-    return v => this.$t(['validate_notDefined', [name]],'renusify');
+      return v => this.$t(['validate_notDefined', [name]], 'renusify');
   }
 
   checkType(names) {

package/tools/helper.js

@@ -35,9 +35,9 @@ export function copy(text, msg = null) {
     }
 
     navigator.clipboard.writeText(text).then(function () {
-        Toast.show(msg ||'copy_text_to_clipboard', {type: 'success'});
+        Toast.show(msg || 'text copied.', {type: 'success'});
     }, function () {
-        Toast.show(msg ||'text_not_copied', {type: 'error'});
+        Toast.show('text not copied.', {type: 'error'});
     })
 }