renusify 1.1.3 → 1.1.4

package/components/form/address.vue

@@ -2,6 +2,7 @@
   <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}`"
@@ -56,11 +57,12 @@ export default {
     hideZipCode: Boolean,
     hideStreet: Boolean,
     tile: Boolean,
+    defaultCountry: Object,
     modelValue: Object
   },
   data() {
     return {
-      country: this.modelValue ? this.modelValue.country : null,
+      country: this.modelValue ? this.modelValue.country : this.defaultCountry,
       state: this.modelValue ? this.modelValue.state : null,
       city: this.modelValue ? this.modelValue.city : null,
       zip_code: this.modelValue ? this.modelValue.zip_code : null,

package/components/form/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/group-input.vue

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

package/components/form/input.vue

@@ -3,7 +3,7 @@
       :class="{
         [`${$r.prefix}input-container`]:true,
         [c_color]:c_color&&!isDisabled,
-        'color-error-text':hasError&&genMessages.length>0,
+        'color-error-text':hasError&&validations.length>0,
         'hide-detail':c_hide,
         'input-focused':active,
         'input-disabled':isDisabled,
@@ -28,7 +28,7 @@
          :class="{
             'massage-active':genMessages.length>0,
         }">
-      <div :class="{'animation-shake-3':c_msgShake}">{{ genMessages[0] }}</div>
+      <div :class="{'animation-shake-3':c_msgShake}">{{ genMessages.join(',') }}</div>
 
     </div>
   </div>
@@ -113,10 +113,11 @@ export default {
       return this.errorBucket.length > 0
     },
     genMessages() {
+      let m = []
       if (this.msg) {
-        return [this.msg]
+        m = [this.msg]
       }
-      return this.hasMessages ? this.validations : []
+      return this.hasMessages ? this.validations : m
     },
     hasMessages() {
       return this.validationTarget.length > 0

package/components/form/inputTel/index.vue

@@ -1,181 +1,186 @@
 <template>
-    <div :class="`${$r.prefix}input-tel`">
-        <r-modal
-                v-model="open"
-        >
-            <r-card class="pa-2">
-                <r-text-input
-                        :label="$t('search','renusify')"
-                        v-model="search"
-                ></r-text-input>
-                <r-list :items="countries" :filter="search" @update:model-value="choose">
-                    <template v-slot="{item}">
-                        <div
-                                :class="item.iso2.toLowerCase()"
-                                class="iti-flag"></div>
-                        <div class="list-title">{{item.name}}</div>
-                        <r-spacer></r-spacer>
-                        <span class="ltr">+{{ item.dialCode }}</span>
-                    </template>
-                </r-list>
-            </r-card>
-        </r-modal>
-        <r-btn class="btn-country ltr mx-1"
-               :rounded="!tile" :disabled="!select" @click.stop="toggleDropdown" outlined>
-            <div :class="activeCountry.iso2.toLowerCase()" class="iti-flag"></div>
-            <span class="country-code pa-1"> +{{ activeCountry.dialCode }} </span>
-            <span class="dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
-        </r-btn>
-      <r-text-input class="input-phone" :label="label?label:$t('phone','renusify')"
-                    @update:model-value="emit"
-                    :tile="tile"
-                    :rules="[required&&'required']"
-                    v-model="tel.phone"
-      >
-      </r-text-input>
+  <div :class="`${$r.prefix}input-tel`">
+    <r-modal
+        v-model="open"
+    >
+      <r-card class="pa-2">
+        <r-text-input
+            :label="$t('search','renusify')"
+            v-model="search"
+        ></r-text-input>
+        <r-list :items="countries" :filter="search" @update:model-value="choose">
+          <template v-slot="{item}">
+            <div
+                :class="item.iso2.toLowerCase()"
+                class="iti-flag"></div>
+            <div class="list-title">{{ item.name }}</div>
+            <r-spacer></r-spacer>
+            <span class="ltr">+{{ item.dialCode }}</span>
+          </template>
+        </r-list>
+      </r-card>
+    </r-modal>
+    <r-btn class="btn-country ltr mx-1"
+           :rounded="!tile" :disabled="!select||readonly" @click.stop="toggleDropdown" outlined>
+      <div :class="activeCountry.iso2.toLowerCase()" class="iti-flag"></div>
+      <span class="country-code pa-1"> +{{ activeCountry.dialCode }} </span>
+      <span class="dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
+    </r-btn>
+    <r-text-input class="input-phone" :label="label?label:$t('phone','renusify')"
+                  @update:model-value="emit"
+                  :tile="tile"
+                  :readonly="readonly"
+                  :rules="required?['required']:[]"
+                  v-model="tel.phone"
+    >
+    </r-text-input>
 
-    </div>
+  </div>
 </template>
 
 <script>
-    import allCountries from './assets/all-countries.js'
+import allCountries from './assets/all-countries.js'
 
-    export default {
-        name: 'inputTel',
-        props: {
-            label: {
-                type: String
-            },
-            modelValue: {
-                type: Object,
-                default: () => {
-                    return {
-                        'phone': '',
-                        'country_code': ''
-                    }
-                }
-            },
-            defaultCountry: {
-                // Default country code, ie: 'AU'
-                // Will override the current country of user
-                type: String,
-                default: ''
-            },
-            tile: Boolean,
-            required: Boolean,
-            select: {
-                type: Boolean,
-                default: false
-            }
+export default {
+  name: 'inputTel',
+  props: {
+    label: {
+      type: String
+    },
+    modelValue: {
+      type: String
+    },
+    defaultCountry: {
+      // Default country code, ie: 'AU'
+      // Will override the current country of user
+      type: String,
+      default: ''
+    },
+    tile: Boolean,
+    required: Boolean,
+    readonly: Boolean,
+    select: {
+      type: Boolean,
+      default: false
+    }
 
-        },
-        data() {
-            return {
-                tel: this.modelValue,
-                search: '',
-                countries: [],
-                activeCountry: {iso2: 'US', dialCode: '1'},
-                open: false
-            }
-        },
-        mounted() {
-            this.initializeCountry()
-            this.countries = allCountries
-        },
-        created() {
-            if (this.modelValue) {
-                this.activeCountry.dialCode = this.modelValue.country_code
-            }
-        },
-        methods: {
-            initializeCountry() {
-                /**
-                 * 1. Use default country if passed from parent
-                 */
-                if (this.defaultCountry) {
-                    const defaultCountry = this.findCountry(this.defaultCountry)
-                    if (defaultCountry) {
-                        this.activeCountry = defaultCountry
-                        return
-                    }
-                }
-                /**
-                 * 2. Check if fetching country based on user's IP is allowed, set it as the default country
-                 */
-                fetch('http://ip-api.com/json/', {
-                    method: 'get'
-                }).then((response) => {
-                    const that = this
-                    response.json().then(function (data) {
-                        that.activeCountry = that.findCountry(data.countryCode) || that.activeCountry
-                    })
-                }).catch((error) => {
-                    return Promise.reject(error)
-                })
-            },
-            /**
-             * Get the list of countries from the list of iso2 code
-             */
-            getCountries(list = []) {
-                return list
-                    .map(countryCode => this.findCountry(countryCode))
-                    .filter(Boolean)
-            },
-            findCountry(iso = '') {
-                return allCountries.find(country => country.iso2 === iso)
-            },
+  },
+  data() {
+    return {
+      tel: {
+        'phone': '',
+        'country_code': ''
+      },
+      search: '',
+      countries: [],
+      activeCountry: {iso2: 'US', dialCode: '1'},
+      open: false
+    }
+  },
+  mounted() {
+    this.initializeCountry()
+    this.countries = allCountries
+  },
+  created() {
+    if (this.modelValue) {
+      let a = this.modelValue.split(' ')
+      this.tel.country_code = a[0]
+      this.tel.phone = a[1]
+      this.activeCountry.dialCode = this.tel.country_code
+    }
+  },
+  methods: {
+    initializeCountry() {
+      /**
+       * 1. Use default country if passed from parent
+       */
+      if (this.defaultCountry) {
+        const defaultCountry = this.findCountry(this.defaultCountry)
+        if (defaultCountry) {
+          this.activeCountry = defaultCountry
+          return
+        }
+      }
+      /**
+       * 2. Check if fetching country based on user's IP is allowed, set it as the default country
+       */
+      fetch('http://ip-api.com/json/', {
+        method: 'get'
+      }).then((response) => {
+        const that = this
+        response.json().then(function (data) {
+          that.activeCountry = that.findCountry(data.countryCode) || that.activeCountry
+        })
+      }).catch((error) => {
+        return Promise.reject(error)
+      })
+    },
+    /**
+     * Get the list of countries from the list of iso2 code
+     */
+    getCountries(list = []) {
+      return list
+          .map(countryCode => this.findCountry(countryCode))
+          .filter(Boolean)
+    },
+    findCountry(iso = '') {
+      return allCountries.find(country => country.iso2 === iso)
+    },
 
-            choose(country) {
-                this.activeCountry = country
-                this.emit()
-                this.reset()
-            },
-            reset() {
-                this.search = ''
-                this.countries = allCountries
-                this.open = false
-            },
+    choose(country) {
+      this.activeCountry = country
+      this.emit()
+      this.reset()
+    },
+    reset() {
+      this.search = ''
+      this.countries = allCountries
+      this.open = false
+    },
 
-            emit(e) {
-                this.tel.country_code = this.activeCountry.dialCode
-                if (this.tel.phone.startsWith('0')) {
-                    setTimeout(() => {
-                        this.tel.phone = this.tel.phone.substr(1, this.tel.phone.length)
-                        this.$emit('update:modelValue', this.tel)
-                    }, 1)
-                } else {
-                    this.$emit('update:modelValue', this.tel)
+    emit(e) {
+      if (this.readonly) {
+        return
+      }
+      this.tel.country_code = this.activeCountry.dialCode
+      if (this.tel.phone.startsWith('0')) {
+        setTimeout(() => {
+          this.tel.phone = this.tel.phone.substr(1, this.tel.phone.length)
+          this.$emit('update:modelValue', this.tel.country_code + ' ' + this.tel.phone)
+        }, 1)
+      } else {
+        this.$emit('update:modelValue', this.tel.country_code + ' ' + this.tel.phone)
 
-                }
+      }
 
-            },
-            toggleDropdown() {
-                this.open = !this.open
-            },
-            clickedOutside() {
-                this.open = false
-            }
-        }
+    },
+    toggleDropdown() {
+      this.open = !this.open
+    },
+    clickedOutside() {
+      this.open = false
     }
+  }
+}
 </script>
 
 <style src="./assets/sprite.css"></style>
 <style lang="scss">
-    @import "../../../style/include";
+@import "../../../style/include";
 
-    .#{$prefix}input-tel {
-        display: flex;
-        align-items: baseline;
-        direction: ltr;
+.#{$prefix}input-tel {
+  display: flex;
+  align-items: baseline;
+  direction: ltr;
 
-        .btn-country {
-          width: 120px;
-          border-color: var(--color-border)
+  .btn-country {
+    width: 120px;
+    border-color: var(--color-border)
 
-        }
+  }
 
-        .input-phone {
-            width: calc(100% - 120px);
-        }
-    }
-</style>
+  .input-phone {
+    width: calc(100% - 120px);
+  }
+}
+</style>

package/components/form/mask-input.vue

@@ -1,15 +1,16 @@
 <template>
-    <r-input :error="error?true:false" :rules="required?['required']:[]" :msg="error?error:undefined" :modelValue="lazyVal" :active="active" class="ltr">
-        <input
-                v-model="lazyVal"
-                @complete="onComplete"
-                @accept="onAccept"
-                @backspace="onBackspace"
-                autocomplete="no"
-                @paste.prevent="onPaste"
-                @focusin="active=true"
-                @focusout="active=false"
-                v-mask="mask"
+    <r-input :error="error?true:false" ltr :rules="required?['required']:[]" :msg="error?error:undefined"
+             :modelValue="lazyVal" :active="active">
+      <input
+          v-model="lazyVal"
+          @complete="onComplete"
+          @accept="onAccept"
+          @backspace="onBackspace"
+          autocomplete="no"
+          @paste.prevent="onPaste"
+          @focusin="active=true"
+          @focusout="active=false"
+          v-mask="mask"
         />
 
     </r-input>

package/components/form/select.vue

@@ -6,7 +6,10 @@
              :modelValue="$helper.ifHas(chips,null,0,value)"
              @click.prevent="handleClick()">
       <div class="select-wrap v-center"
-           :class="{'flex-nowrap':!multiple}">
+           :class="{
+        'h-center':disableSearch,
+        'flex-nowrap':!multiple
+      }">
         <r-chip
             class="my-0 ms-0"
             :close="multiple&&!textChip"
@@ -20,6 +23,7 @@
         </r-chip>
         <span>
         <input :type="type"
+               v-if="!disableSearch"
                @focusin="focusInput(true)"
                @focusout="focusInput(false)"
                @keydown.enter="add"
@@ -85,7 +89,7 @@ export default {
       type: String,
       default: 'value'
     },
-    combo: Boolean,
+    disableSearch: Boolean,
     readonly: Boolean,
     textChip: Boolean,
     items: Array,
@@ -217,6 +221,8 @@ export default {
     handleClick() {
       if (this.$refs.input) {
         this.$refs.input.focus()
+      } else {
+        this.focusInput(true)
       }
     },
     add() {
@@ -225,7 +231,7 @@ export default {
         if (!this.multiple) {
           this.chips = []
         }
-        if (!this.combo && !this.tags) {
+        if (!this.tags) {
           const exist = this.$helper.searchArray(this.genItems, this.text, val[this.text])
           if (exist !== false) {
             this.chips.push(val)
@@ -242,8 +248,7 @@ export default {
       this.chips = this.$helper.uniqArray(this.chips)
 
       let val = this.chips
-
-      if (this.tags) {
+      if (this.justValue) {
         val = []
         for (let i in this.chips) {
           if (this.$helper.hasKey(this.chips, i)) {
@@ -251,12 +256,9 @@ export default {
           }
         }
       }
-      if (!this.multiple && !this.tags) {
+      if (!this.multiple) {
         val = val[0]
         if (val) {
-          if (this.justValue) {
-            val = val[this.value]
-          }
           this.closeList()
         }
       }

package/components/formCreator/index.vue

@@ -6,10 +6,10 @@
       <r-form ref="form" v-model="valid" @submit.prevent="save">
         <r-row>
           <template :key="key" v-for="(item,key) in options">
-            <r-col class="col-12" v-if="item['formInput']!==false">
+            <r-col class="col-12" v-if="item['formInput']!==false&&iff(options[key])">
               <component
                   :is="'r-'+item['type']"
-                  :label="$t(key,'renusify')"
+                  :label="$t(key)"
                   v-model="editedItem[key]"
                   v-bind="getAttr(options[key])"
               ></component>
@@ -96,11 +96,64 @@ export default {
     }
   },
   methods: {
+    iff(data) {
+      const that = this
+
+      function get(item, key) {
+        if (key.toString().startsWith('$')) {
+          return that.$helper.ifHas(item, null, ...key.substring(1).split('.'))
+        }
+        return key
+      }
+
+      if ('$if' in data) {
+        for (let i = 0; i < data['$if'].length; i++) {
+          const item = data['$if'][i]
+          let can = true
+          const one = get(this.editedItem, item[0])
+          const op = item[1]
+          const two = get(this.editedItem, item[2])
+          if (op === '===' || op === '==') {
+            can = one === two
+          } else if (op === '>') {
+            can = one > two
+          } else if (op === '>=') {
+            can = one >= two
+          } else if (op === '<') {
+            can = one < two
+          } else if (op === '<=') {
+            can = one <= two
+          } else if (op === '!=') {
+            can = one !== two
+          } else if (op === 'in') {
+            if (two && typeof two === 'object') {
+              can = two.includes(one)
+            } else {
+              can = false
+            }
+          } else {
+            can = false
+            console.error(`operator '${op}' is not defined.(form creator)`)
+          }
+          if (can === false) {
+            return false
+          }
+        }
+      }
+      return true
+    },
     getAttr(data) {
       let res = {}
       for (let i in data) {
-        if (this.$helper.hasKey(data, i) && !['formInput', 'sortable', 'type', 'tableShow', 'priority'].includes(i)) {
-          res[i] = data[i]
+        if (this.$helper.hasKey(data, i) && !['formInput', 'sortable', 'type', 'tableShow', 'priority', '$if'].includes(i)) {
+          if (i === '$bind') {
+            data[i].forEach((item) => {
+              res[item[0]] = this.editedItem[item[1]]
+            })
+
+          } else {
+            res[i] = data[i]
+          }
         }
       }
       return res

package/components/table/crud/footer.vue

@@ -10,6 +10,7 @@
                       {name: '100', value: 100},
                       {name: '200', value: 200},
               ]"
+                                    disable-search
                                     @update:modelValue="perPageE"
                                     :modelValue="perPage"></r-select-input>
                 </r-col>
@@ -22,7 +23,7 @@
                             <r-icon v-html="this.$r.icons.chevron_left"></r-icon>
 
                         </r-btn>
-                        <input type="text" :value="page" @input="pageN" class="input-page text-center">
+                      <input name="input-page" type="text" :value="page" @input="pageN" class="input-page text-center">
                         <r-btn :disabled="endPage" @click.prevent="pageBtn('next')" class="btn-shaped"
                                icon
                                text>

package/components/table/crud/header.vue

@@ -125,7 +125,7 @@
                             </r-btn>
                           </r-col>
                         </r-row>
-                      <r-row class="v-baseline" v-else-if="['date-picker','time-ago'].includes(item.option.type)">
+                      <r-row class="v-baseline" v-else-if="['date-input','time-ago'].includes(item.option.type)">
                         <r-col class="col-5 md-3" :a="item.advance.t='date'">
                           <r-select-input v-model="item.advance.action"
                                           :items="[
@@ -214,7 +214,7 @@
             header() {
                 let res = []
                 this.headerTable.forEach((item) => {
-                  if (['text-input', 'text-area', 'number', 'switch', 'select', 'date-picker', 'time-ago'].includes(item.option.type)) {
+                  if (['text-input', 'text-area', 'number', 'switch', 'select', 'date-input', 'time-ago'].includes(item.option.type)) {
                     res.push(item)
                   }
                 })

package/components/table/crud/index.vue

@@ -102,24 +102,25 @@
                             <r-icon v-html="props.opened!==props.key?$r.icons.plus:$r.icons.minus"></r-icon>
                         </r-btn>
                         <slot name="cell" :value="value" :item="props.item" :editItem="editItem">
-                            <div v-if="value['option']['type']==='date-picker' && props.item[value['value']]!==undefined">
-                                {{$d(new Date(props.item[value['value']]),value['option']['format']||'short')}}
-                            </div>
-                            <div v-else-if="value['option']['type']==='time-ago' && props.item[value['value']]!==undefined">
-                                <r-time-ago :time="props.item[value['value']]"></r-time-ago>
-                            </div>
-                            <div v-else-if="value['option']['type']==='switch'">
-                                <r-switch
-                                        :readonly="value['option']['formInput']===false"
-                                        :modelValue="props.item[value['value']]"
-                                        @update:modelValue="value['option']['formInput']!==false?editItem(props.item,true,value['value']):''"
-                                        class="mt-0"
-                                ></r-switch>
-                            </div>
-                            <div v-else-if="value['option']['type'] === 'number'">
-                                {{ $n(props.item[value["value"]]) }}
-                            </div>
-                            <div v-else-if="value['option']['type']!=='action'">
+                          <div v-if="value['option']['type']==='date-input' && props.item[value['value']]!==undefined">
+                            {{ $d(new Date(props.item[value['value']]), value['option']['format'] || 'short') }}
+                          </div>
+                          <div
+                              v-else-if="value['option']['type']==='time-ago' && props.item[value['value']]!==undefined">
+                            <r-time-ago :time="props.item[value['value']]"></r-time-ago>
+                          </div>
+                          <div v-else-if="value['option']['type']==='switch-input'">
+                            <r-switch-input
+                                :readonly="value['option']['formInput']===false"
+                                :modelValue="props.item[value['value']]"
+                                @update:modelValue="value['option']['formInput']!==false?editItem(props.item,true,value['value']):''"
+                                class="mt-0"
+                            ></r-switch-input>
+                          </div>
+                          <div v-else-if="value['option']['type'] === 'number-input'">
+                            {{ $n(props.item[value["value"]]) }}
+                          </div>
+                          <div v-else-if="value['option']['type']!=='action'">
                                 {{value['value'] in cast?
                                 $helper.ifHas(props.item,'',value['value'],cast[value['value']])
                                 :props.item[value['value']]}}

package/package.json

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