renusify 1.3.1 → 1.4.0

package/components/form/check-input.vue

@@ -16,11 +16,12 @@
              ref="input"
       />
       <r-btn size="small"
+             :class="{'color-success-text':pass!==null && pass!==false,'color-error-text':pass===false}"
              :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-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-btn>
     </div>
   </r-input>

package/components/form/group-input.vue

@@ -9,7 +9,7 @@
           <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 :is="template[k]['type']" v-model="item[k]" :label="t(k)"
+                <component v-if="template[k]&&template[k]['type']" :is="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||validations.length>0,
         'hide-detail':c_hide,
         'input-focused':active,
         'input-disabled':isDisabled,
@@ -72,7 +72,7 @@ export default {
       uid: 'input_' + this.$helper.uniqueId(),
       lazyValue: this.modelValue,
       focused: false,
-      errorBucket: this.error || [],
+      errorBucket: [],
       hasColor: false,
       hasFocused: false,
       hasInput: false,

package/components/form/json/JsonView.vue

@@ -6,7 +6,7 @@
       <r-btn v-if="!disableDel" icon class="color-error-text" text @click="del(key)">
         <r-icon v-html="$r.icons.delete"></r-icon>
       </r-btn>
-      <div v-if="typeof value==='object'">{{ key }}</div>
+      <div v-if="typeof value==='object'">{{ t(key) }}</div>
     </div>
     <div v-if="typeof value==='object'" class="flex-grow-1 w-full ps-10">
       <r-json-input :tile="tile"
@@ -14,21 +14,22 @@
                     @update:model-value="emit(key,$event)"
                     :disableAdd="disableAdd||template!==undefined"
                     :disableDel="disableDel||template!==undefined"
+                    :translate="translate"
                     disableEditKey
       ></r-json-input>
     </div>
     <div v-else class="mb-1 flex-grow-1">
       <r-text-input v-if="typeof value==='string'"
                     :tile="tile"
-                    :label="!is_array?key:''"
+                    :label="!is_array?t(key):''"
                     :model-value="value" @update:model-value="emit(key,$event)"></r-text-input>
       <r-number-input v-else-if="typeof value==='number'"
                       :tile="tile"
-                      :label="!is_array?key:''"
+                      :label="!is_array?t(key):''"
                       :model-value="value" @update:model-value="emit(key,$event)"></r-number-input>
       <r-switch-input v-else-if="typeof value==='boolean'"
                       :tile="tile"
-                      :label="!is_array?key:''"
+                      :label="!is_array?t(key):''"
                       :model-value="value" @update:model-value="emit(key,$event)"></r-switch-input>
 
     </div>
@@ -43,7 +44,8 @@ export default {
     template: Object,
     disableAdd: Boolean,
     disableDel: Boolean,
-    tile: Boolean
+    tile: Boolean,
+    translate:Boolean
   },
   emits: ['update:modelValue'],
   data() {
@@ -57,6 +59,12 @@ export default {
     }
   },
   methods: {
+    t(key){
+      if(this.translate){
+        return this.$t(key)
+      }
+      return key
+    },
     del(key) {
       let o = this.modelValue
       if (this.is_array) {

package/components/form/json/index.vue

@@ -10,6 +10,7 @@
                  :template="template"
                  :disableAdd="disableAdd"
                  :disableDel="disableDel"
+                 :translate="translate"
                  :tile="tile"
       ></json-view>
       <r-btn
@@ -24,7 +25,7 @@
         <r-text-input
             v-if="!is_array"
             v-model="info.key"
-            :label="keyLabel"
+            :label="keyLabel||$t('key','renusify')"
             :tile="tile"
             class="w-30 pe-1"></r-text-input>
         <div class="w-20" v-if="!valueType">
@@ -34,31 +35,32 @@
                             :items="['text','number','boolean','json','array']"
                             just-value
                             disableSearch
+                            :translate="translate"
                             @update:model-value="info.value=null"
                             firstSelect></r-select-input>
           </div>
-          <r-text-input v-if="val_type==='text'"
+          <r-text-input v-if="info.type==='text'"
                         :tile="tile"
-                        :label="valueLabel"
+                        :label="valueLabel||$t('value','renusify')"
                         v-model="info.value"></r-text-input>
-        <r-number-input v-else-if="val_type==='number'"
+        <r-number-input v-else-if="info.type==='number'"
                         :tile="tile"
-                        :label="$t('value','renusify')" v-model="info.value"></r-number-input>
-        <r-switch-input v-else-if="val_type==='boolean'"
+                        :label="valueLabel||$t('value','renusify')" v-model="info.value"></r-number-input>
+        <r-switch-input v-else-if="info.type==='boolean'"
                         :tile="tile"
-                        :label="$t('value','renusify')" v-model="info.value"></r-switch-input>
+                        :label="valueLabel||$t('value','renusify')" v-model="info.value"></r-switch-input>
         <r-btn @click.prevent="add" class="ms-1 color-success" rounded>{{ $t('add', 'renusify') }}</r-btn>
       </div>
     </div>
     <textarea v-else :class="{'state-error':error}"
-              :rows="Object.keys(modelValue).length+5"
+              :rows="modelValue?Object.keys(modelValue).length+5:5"
               autocapitalize="off"
               autocomplete="off"
               autocorrect="off"
               class="ltr w-full"
               spellcheck="false"
               @input="emitt"
-              @keydown="setTab">{{ JSON.stringify(modelValue, null, 4) }}</textarea>
+              @keydown="setTab">{{ JSON.stringify(modelValue||{}, null, 4) }}</textarea>
   </div>
 </template>
 <script>
@@ -85,7 +87,8 @@ export default {
     disableAdd: Boolean,
     tile: Boolean,
     disableEditKey: Boolean,
-    disableDel: Boolean
+    disableDel: Boolean,
+    translate: Boolean
   },
   emits: ['update:modelValue'],
   data() {
@@ -98,12 +101,6 @@ export default {
     }
   },
   computed: {
-    val_type() {
-      if (this.valueType) {
-        return this.valueType
-      }
-      return this.info.type
-    },
     is_array() {
       if (this.baseArray) {
         return true
@@ -166,6 +163,9 @@ export default {
         d.push(Object.assign({}, {}, this.template))
         this.$emit('update:modelValue', d)
       } else {
+        if(this.valueType){
+          this.info.type=this.valueType
+        }
         this.show = true
       }
     },

package/components/form/rating.vue

@@ -1,8 +1,7 @@
 <template>
-  <div :class="`${$r.prefix}rating `">
+  <div :class="`${$r.prefix}rating size-${size} ms-n1`">
     <r-btn :class="`${Math.round(modelValue)>=i?'color-warning-text':''}`" :key="i"
            :readonly="readonly"
-           :size="size"
            @click="select(i)"
            icon
            text
@@ -34,7 +33,7 @@ export default {
   emits:['update:modelValue'],
   created(){
     if(!this.$r.icons.star) {
-      this.$r.icons.star = '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21L12 17.27Z"/></svg>'
+      this.$r.icons.star = '<svg xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21L12 17.27Z"/></svg>'
     }
   },
   methods: {
@@ -46,13 +45,31 @@ export default {
 </script>
 <style lang="scss">
 @import "../../style/include";
-
-
+$btn-sizes: (
+        'x-small': 20,
+        'small': 25,
+        'default': 30,
+        'large': 35,
+        'x-large': 40
+) !default;
 .#{$prefix}rating {
   max-width: 100%;
   white-space: nowrap;
   transition: 1s $primary-transition;
   color: var(--color-disabled);
+
+  @each $name, $size in $btn-sizes {
+    &.size-#{$name} {
+      .#{$prefix}btn{
+        height: #{$size}px;
+        width: #{$size}px
+      }
+      .#{$prefix}icon{
+        height: #{$size - 4px};
+        width: #{$size - 4px}
+      }
+    }
+  }
 }
 
 </style>

package/components/form/timepicker/timepicker.vue

@@ -10,7 +10,7 @@
           :key="i"
           class="number"
           :class="['number' + i,{'number-disabled':disableTime(parseInt(i),show,hour,min,sec)}]"
-          :ref="'number' + i"
+          ref="number"
           @click="set(i)"
       >
         {{ num }}
@@ -349,7 +349,7 @@ export default {
     set(h, next = true) {
       h = parseInt(h);
       const circle = this.$refs.circle;
-      const cl = this.$refs["number" + h];
+      const cl = this.$refs["number"][h];
       const hand = this.$refs.hand;
       const clock = this.$refs.clock.getBoundingClientRect();
 
@@ -440,7 +440,7 @@ export default {
       let cl = null;
       let po = null;
       for (let i = 1; i <= 12; i++) {
-        cl = this.$refs["number" + i];
+        cl = this.$refs["number"][i];
         po = this.print_point(i, 110);
         cl.style.left = po[0] - 10 + "px";
         cl.style.top = po[1] - 10 + "px";
@@ -448,13 +448,13 @@ export default {
       }
       if (this.is24Hour) {
         for (let i = 13; i <= 23; i++) {
-          cl = this.$refs["number" + i];
+          cl = this.$refs["number"][i];
           po = this.print_point(i, 70);
           cl.style.left = po[0] - 10 + "px";
           cl.style.top = po[1] - 10 + "px";
           cl.classList.add('number-show')
         }
-        cl = this.$refs["number0"];
+        cl = this.$refs["number"][0];
         po = this.print_point(0, 70);
         cl.style.left = po[0] - 10 + "px";
         cl.style.top = po[1] - 10 + "px";
@@ -473,7 +473,7 @@ export default {
       let cl = null;
       let po = null;
       for (let i = 0; i <= 59; i++) {
-        cl = this.$refs["number" + i];
+        cl = this.$refs["number"][i];
         po = this.print_point(i, 110, 60);
         cl.style.left = po[0] - 10 + "px";
         cl.style.top = po[1] - 10 + "px";

package/components/img/index.vue

@@ -14,8 +14,11 @@
         }"
     >{{ alt }}
     </div>
-    <img v-if="load &&!isSvg" ref="img" :src="link" :alt="alt" draggable="false" :width="size.width"
-         :height="size.height"/>
+    <img v-if="load &&!isSvg" ref="img" :src="link" :alt="alt" draggable="false" :width="size.width>0?size.width:'auto'"
+         :height="size.height>0?size.height:'auto'"
+         :style="{'height':size.height>0?undefined:'auto',
+         'width':size.width>0?undefined:'auto'
+         }"/>
     <svg-img v-else-if="load &&isSvg&&link" :link="link" :size="size">
     </svg-img>
   </div>
@@ -61,10 +64,7 @@ export default {
     titleVe: Boolean,
     isSvg: Boolean,
     svgCache: {type: Number, default: 86400},
-    wPH: {
-      type: Number,
-      default: 1
-    },
+    wPH: Number
   },
   data() {
     return {
@@ -97,7 +97,10 @@ export default {
         res += 'c=' + this.svgCache
       }
       if (!this.isSvg && ((this.autoSize && this.size.width > 0) || this.width)) {
-        res += `&w=${this.size.width}&h=${this.size.height}`
+        res += `&w=${this.size.width}`
+      }
+      if (!this.isSvg && ((this.autoSize && this.size.height > 0) || this.height)) {
+        res += `&h=${this.size.height}`
       }
       return res
     }
@@ -116,13 +119,29 @@ export default {
       if (this.height) {
         res["height"] = this.height
       }
-      if (res['width'] !== 0 && res['height'] === 0) {
-        res['height'] = res['width'] / this.wPH
+      let wPH=this.wPH
+      if(!wPH){
+        const ls=this.src.split('/')
+        if(ls.length>0){
+          const p=ls[ls.length-1].split('_')
+          if(p.length===3){
+            const p0=parseInt(p[0])
+            const p1=parseInt(p[1])
+            if(p0&&p1){
+              wPH=p0/p1
+            }
+          }
+        }
       }
-      if (res['width'] === 0 && res['height'] !== 0) {
-        res['width'] = res['height'] * this.wPH
+      if(wPH) {
+        if (res['width'] !== 0 && res['height'] === 0) {
+          res['height'] = res['width'] / wPH
+        }
+        if (res['width'] === 0 && res['height'] !== 0) {
+          res['width'] = res['height'] * wPH
+        }
       }
-      if (res['width'] !== 0) {
+      if (res['width'] !== 0||res['height']!== 0) {
         return this.size = res
       }
 
@@ -133,7 +152,7 @@ export default {
         let w = parseFloat((parseFloat(cs.getPropertyValue('width')) - paddingX - borderX).toFixed(2));
         return this.size = {
           width: w,
-          height: w / this.wPH
+          height: wPH?w / wPH:0
         }
       }
       return false
@@ -141,7 +160,7 @@ export default {
     },
     activate() {
       this.getSize()
-      if (this.size.width !== 0) {
+      if (this.size.width !== 0||this.size.height) {
         this.load = true
       } else {
         clearTimeout(this.time_id)
@@ -229,4 +248,4 @@ export default {
 
   }
 }
-</style>
+</style>

package/directive/animate/index.js

@@ -7,7 +7,7 @@ function mounted(el, binding) {
     const duration = value.duration || .5
     const timing = value.timing || null
     const delay = value.delay + 50 || 50
-    el.classList.add(`${window.app.$r.prefix}animate`)
+    el.classList.add(`r-directive-animate`)
     names.forEach((name) => {
         el.classList.add(name)
     })

package/directive/animate/style.scss

@@ -1,6 +1,6 @@
 @import '../../style/include';
 
-.#{$prefix}animate{
+.r-directive-animate{
   transition-timing-function: map_get($transition,'swing');
    transition-property: opacity,transform;
   &.fade{

package/directive/sortable/index.js

@@ -134,7 +134,7 @@ function mounted(el, binding) {
         end: value.end,
         grab: value.grab
     }
-    el.classList.add(`${window.app.$r.prefix}sortable`);
+    el.classList.add(`r-directive-sortable`);
     el.eventsHandler = {
         mousedown: e => mousestart(e, wrapper),
         touchstart: e => mousestart(e, wrapper)
@@ -169,7 +169,7 @@ function unmounted(el, binding) {
     let wrapper = {
         grab: value.grab
     }
-    el.classList.remove(`${window.app.$r.prefix}sortable`);
+    el.classList.remove(`r-directive-sortable`);
     const lng=children.length
     for(let i=0;i<lng;i++){
         let child=children[i]

package/directive/sortable/style.scss

@@ -1,6 +1,6 @@
 @import "../../style/include";
 
-.#{$prefix}sortable {
+.r-directive-sortable {
   position: relative;
   .dragable{
     .grab{

package/directive/title/index.js

@@ -8,10 +8,10 @@ function mousestart(el, binding) {
         d = binding.arg
     }
 
-    let $title = document.getElementById(`${window.app.$r.prefix}title`)
+    let $title = document.getElementById(`r-directive-title`)
     if (!$title) {
         $title = document.createElement('div')
-        $title.setAttribute('id', `${window.app.$r.prefix}title`)
+        $title.setAttribute('id', `r-directive-title`)
     } else {
         mouseleave(el, binding)
         mousestart(el, binding)
@@ -21,8 +21,7 @@ function mousestart(el, binding) {
     var $titleDimension = el.getBoundingClientRect()
     $title.innerHTML = binding.value
     $title.style.opacity = 1
-    const app=document.getElementsByClassName(`${window.app.$r.prefix}app`)
-    app[0].appendChild($title)
+    document.body.appendChild($title)
     const h = $title.getBoundingClientRect().height + 5
     const w = $title.getBoundingClientRect().width + 5
 
@@ -48,7 +47,7 @@ function mouseleave(el, binding) {
     if (['left', 'right', 'top', 'bottom'].includes(binding.arg)) {
         d = binding.arg
     }
-    let elm = document.getElementById(`${window.app.$r.prefix}title`)
+    let elm = document.getElementById(`r-directive-title`)
 
     if (elm === null) {
         return null
@@ -65,12 +64,11 @@ function mouseleave(el, binding) {
         elm.style.left = $titleDimension.left + $titleDimension.width + 'px'
     }
 
-    elm = document.getElementById(`${window.app.$r.prefix}title`)
+    elm = document.getElementById(`r-directive-title`)
     if (elm === null) {
         return null
     }
-    const app=document.getElementsByClassName(`${window.app.$r.prefix}app`)
-    app[0].removeChild(elm)
+    document.body.removeChild(elm)
 }
 
 function createHandlers(el, binding) {

package/directive/title/style.scss

@@ -1,6 +1,6 @@
 @import "../../style/include";
 
-##{$prefix}title {
+#r-directive-title {
   transition: all .2s ease-in-out;
   padding: 4px 8px;
   white-space: nowrap;
@@ -9,7 +9,7 @@
   position: fixed;
   border-radius: map-get($borders, 'sm');
   font-size: 14px;
-  font-family: inherit;
+  font-family: fontOne;
   transform: translateX(-50%);
   z-index: 50;
   opacity: 0;

package/index.js

@@ -101,17 +101,21 @@ export default {
         app.config.globalProperties.$toast = function (message, options) {
             Toast.show(message, options);
         }
+        // renusify storage
+        app.config.globalProperties.$storage = Storage
+
         // renusify helper
         app.config.globalProperties.$helper = helper
         // renusify translate
-        app.config.globalProperties.$translate = Translate
-        DateTime.langs = app.config.globalProperties.$r.langs
-        app.config.globalProperties.$dateTime = DateTime
-        app.config.globalProperties.$t = (key, package_name = null, lang = null) => Translate.get(key, package_name, lang)
-        app.config.globalProperties.$d = (value, key = 'long', local = null) => DateTime.formatLocal(value, key, local)
-        app.config.globalProperties.$n = (value) => Currency.formatLocal(value)
+        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)
+        app.config.globalProperties.$n = (value) => c.formatLocal(value)
         // renusify validation
-        app.config.globalProperties.$v = (names) => valid.checkType(names)
+        const v=new valid(app.config.globalProperties.$t)
+        app.config.globalProperties.$v = (names) => v.checkType(names)
 
         // install components
         let required_directive = register(app, options['components'] || []);
@@ -125,8 +129,6 @@ export default {
         // install directives
         registers(app, required_directive);
 
-        // renusify storage
-        app.config.globalProperties.$storage = Storage
 
         // renusify breakpoint
         function resize() {

package/package.json

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

package/plugins/trans/Currency.js

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

package/plugins/trans/DateTime.js

@@ -1,5 +1,6 @@
-class DateTime {
-    constructor() {
+export default class DateTime {
+    constructor($r,langs) {
+        this.$r=$r
         this.format = {
             narrow: {
                 weekday: 'narrow'
@@ -33,7 +34,7 @@ class DateTime {
         }
         }
 
-        this.langs = {};
+        this.langs = langs;
     }
 
     set_lang(name, lang) {
@@ -54,8 +55,8 @@ class DateTime {
     };
 
     formatLocal(value, type = 'long', local = null) {
-        if (local === null && window.app) {
-            local = window.app.$r.lang
+        if (local === null) {
+            local = this.$r.lang
         }
         if (!(local in this.langs)) {
             console.warn('set local:' + local + ' with this.$dateTime.set_lang("' + local + '",{\n' +
@@ -79,4 +80,3 @@ class DateTime {
     };
 }
 
-export default new DateTime();

package/plugins/trans/Translate.js

@@ -1,152 +1,161 @@
 import Axios from 'axios';
 
-class Translate {
-    constructor() {
-        this._count = 0;
-        this._messages = {};
-        this._local = 'en';
-        this._package = null;
-        this._store = []
-    }
+export default class Translate {
+  constructor($r,$storage) {
+    this.$r=$r
+    this.$storage=$storage
+    this._count = 0;
+    this._failed_messages = {};
+    this._messages = {};
+    this._local = 'en';
+    this._package = null;
+    this._store = []
+  }
 
-    get messages() {
-        return this._messages;
-    }
+  get messages() {
+    return this._messages;
+  }
 
-    get local() {
-        return this._local;
-    }
+  get failed_messages() {
+    return Object.keys(this._failed_messages);
+  }
 
-    set local(value) {
-        this._local = value;
-    }
+  get local() {
+    return this._local;
+  }
 
-    set package(value) {
-        this._package = value;
-    }
+  set local(value) {
+    this._local = value;
+  }
 
-    setMessages(obj, local) {
-        this._messages[local||this._local] = Object.assign({}, this._messages[local||this._local], obj);
-    }
+  set package(value) {
+    this._package = value;
+  }
 
-    add(key, value) {
-        if (!this._messages[this._local]) {
-            this._messages[this._local] = {}
-        }
-        this._messages[this._local][key] = value;
-    }
+  setMessages(obj, local) {
+    this._messages[local || this._local] = Object.assign({}, this._messages[local || this._local], obj);
+  }
 
-    replaceAll(string, search, replace) {
-        return string.split(search).join(replace);
+  add(key, value) {
+    if (!this._messages[this._local]) {
+      this._messages[this._local] = {}
     }
+    this._messages[this._local][key] = value;
+  }
 
-    get(key, package_name = null,lang = null) {
-        if(key===undefined||key===null){
-            return ''
-        }
-        let variable=[]
-        if (typeof key ==='object'){
-            variable=key[1]
-            key=key[0]
-            if(!variable){
-                console.error(
-                'object key must have variables. key:'+key+' variable:'+variable
-            )
-                return key
-            }
-        }
+  replaceAll(string, search, replace) {
+    return string.split(search).join(replace);
+  }
 
-        if (package_name && typeof package_name !== 'string') {
-            console.error(
-                'package name must be string. key:' + key + ' package_name:' + package_name
-            )
-            return key
-        }
-        if (typeof key !== 'string') {
-            return key
-        }
-        key = key.toLowerCase()
+  get(key, package_name = null, lang = null) {
+    if (key === undefined || key === null) {
+      return ''
+    }
+    let variable = []
+    if (typeof key === 'object') {
+      variable = key[1]
+      key = key[0]
+      if (!variable) {
+        console.error(
+          'object key must have variables. key:' + key + ' variable:' + variable
+        )
+        this._failed_messages[key] = true
+        return key
+      }
+    }
 
-        const local = lang !== null ? lang : this._local
-        const pack = package_name !== null ? package_name : this._package
-        if (!local) {
-            return key;
-        }
-        if (!this._messages[local]) {
-            return key;
-        }
-        if (this._messages[local][key]) {
-            let val = this._messages[local][key];
-            const lng = variable.length
-            for (let i = 0; i < lng; i++) {
-                val = this.replaceAll(val, '{' + i + '}', variable[i]);
-            }
+    if (package_name && typeof package_name !== 'string') {
+      console.error(
+        'package name must be string. key:' + key + ' package_name:' + package_name
+      )
+      this._failed_messages[key] = true
+      return key
+    }
+    if (typeof key !== 'string') {
+      this._failed_messages[key] = true
+      return key
+    }
+    key = key.toLowerCase()
 
-            if (val === null || val === '') {
-                return key;
-            }
-            return val;
-        } else if (window.app.$r && window.app.$r.autoAddTranslate && pack && this._count < 100 && /^([a-z_.])*$/.test(key)) {
-            if (!this._store.includes(key)) {
-                let url = '/translate/' + pack + '/' + key + '?v=';
-                const lng = variable.length
-                for (let i = 0; i < lng; i++) {
-                    url += '{' + i + '}';
-                }
-                Axios.post(url);
-                this._count++;
-                this._store.push(key)
-            }
+    const local = lang !== null ? lang : this._local
+    const pack = package_name !== null ? package_name : this._package
+    if (!local) {
+      this._failed_messages[key] = true
+      return key;
+    }
+    if (!this._messages[local]) {
+      this._failed_messages[key] = true
+      return key;
+    }
+    if (this._messages[local][key]) {
+      let val = this._messages[local][key];
+      const lng = variable.length
+      for (let i = 0; i < lng; i++) {
+        val = this.replaceAll(val, '{' + i + '}', variable[i]);
+      }
 
-            return key;
-        } else {
-            return key;
+      if (val === null || val === '') {
+        this._failed_messages[key] = true
+        return key;
+      }
+      return val;
+    } else if (this.$r && this.$r.autoAddTranslate && pack && this._count < 100 && /^([a-z_.])*$/.test(key)) {
+      if (!this._store.includes(key)) {
+        let url = '/translate/' + pack + '/' + key + '?v=';
+        const lng = variable.length
+        for (let i = 0; i < lng; i++) {
+          url += '{' + i + '}';
         }
+        Axios.post(url);
+        this._count++;
+        this._store.push(key)
+      }
+      this._failed_messages[key] = true
+      return key;
+    } else {
+      this._failed_messages[key] = true
+      return key;
     }
+  }
+
+  loads(packages = []) {
+    packages.forEach((p) => {
+      this.load(p)
+    })
+  }
 
-    loads(packages=[]){
-        packages.forEach((p)=>{
-            this.load(p)
-        })
+  load(p) {
+    const pack = p || this.$r.package;
+    if (!p) {
+      this.package = pack;
     }
-    load(p) {
-        if(!window.app||!window.app.$r){
-            console.error('need define window.app=vue Application')
-            return
-        }
-        const pack = p||window.app.$r.package;
-        if(!p){
-            this.package = pack;
-        }
-        if(!window.app.$r.store['langs_loaded']){
-                window.app.$r.store['langs_loaded']={}
-            }
-        window.app.$r.store['langs_loaded'][pack] = false;
-        let locale = window.app.$r.lang;
-        if (window.app.$storage.get("lang")) {
-            locale = window.app.$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];
-                    }
-                    this.local = locale;
-                    this.setMessages(lang);
-                } else {
-                    this.local = locale;
-                    this.setMessages({});
-                }
-                window.app.$r.store['langs_loaded'][pack] = true;
-            },
-            () => {
-                window.app.$r.store['langs_loaded'][pack] = true;
-            }
-        );
+    if (!this.$r.store['langs_loaded']) {
+      this.$r.store['langs_loaded'] = {}
+    }
+    this.$r.store['langs_loaded'][pack] = false;
+    let locale = this.$r.lang;
+    if (this.$storage.get("lang")) {
+      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];
+          }
+          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;
+      }
+    );
+  }
 }
-
-export default new Translate();

package/plugins/validation/Validate.js

@@ -1,22 +1,22 @@
-/* eslint-disable */
-import Translate from '../trans/Translate'
-
-class Validate {
+export default class Validate {
+  constructor($t) {
+    this.$t=$t
+  }
   required() {
-    let msg = Translate.get('required_error','renusify');
+    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) || Translate.get('required_error','renusify');
+    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) || Translate.get('validate_email','renusify');
+    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) || Translate.get('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 +24,49 @@ class Validate {
       if (v == val) {
         return true
       } else {
-        return Translate.get(['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) || Translate.get('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) || Translate.get('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) || Translate.get('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: Translate.get(['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: Translate.get(['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: Translate.get(['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: Translate.get(['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: Translate.get(['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) || Translate.get(['validate_eq', [num]],'renusify');
+    return v => (v ? parseFloat(v) === parseFloat(num) : true) || this.$t(['validate_eq', [num]],'renusify');
   }
 
   notDefined(name) {
-    return v => Translate.get(['validate_notDefined', [name]],'renusify');
+    return v => this.$t(['validate_notDefined', [name]],'renusify');
   }
 
   checkType(names) {
@@ -92,6 +92,4 @@ class Validate {
     }
     return filters
   }
-}
-
-export default new Validate()
+}

package/tools/helper.js

@@ -1,3 +1,5 @@
+import Toast from "../components/app/toast/toast";
+
 export function clearProxy(obj) {
     return JSON.parse(JSON.stringify(typeof obj === 'object' ? obj : {}))
 }
@@ -33,9 +35,9 @@ export function copy(text, msg = null) {
     }
 
     navigator.clipboard.writeText(text).then(function () {
-        window.app.$toast(msg || window.app.$t('copy_text_to_clipboard', 'renusify'), {type: 'success'})
+        Toast.show(msg ||'copy_text_to_clipboard', {type: 'success'});
     }, function () {
-        window.app.$toast(window.app.$t('text_not_copied!', 'renusify'), {type: 'error'})
+        Toast.show(msg ||'text_not_copied', {type: 'error'});
     })
 }
 

package/plugins/validation/index.js

@@ -1,10 +0,0 @@
-import valid from './Validate'
-
-export default {
-
-  // The install method will be called with the Vue constructor as the first argument, along with possible options
-  install (app, options) {
-    // Add $plugin instance method directly to Vue components
-    app.config.globalProperties.$v = (names) => valid.checkType(names)
-  }
-}