renusify 1.1.2 → 1.1.4

package/components/form/json/JsonView.vue

@@ -13,26 +13,26 @@
         </template>
       </div>
       <div v-if="typeof value==='object'" class="flex-grow-1 w-full ps-10">
-        <r-json :tile="tile"
-                :model-value="value"
-                @update:model-value="emit(key,$event)"
-                :disableAdd="disableAdd||template!==undefined"
-                :disableDel="disableDel||template!==undefined"
-                :disableEditKey="disableEditKey"
-                :keyWidth="keyWidth"
-                :valueWidth="valueWidth"
-        ></r-json>
+        <r-json-input :tile="tile"
+                      :model-value="value"
+                      @update:model-value="emit(key,$event)"
+                      :disableAdd="disableAdd||template!==undefined"
+                      :disableDel="disableDel||template!==undefined"
+                      :disableEditKey="disableEditKey"
+                      :keyWidth="keyWidth"
+                      :valueWidth="valueWidth"
+        ></r-json-input>
       </div>
       <div v-else class="mb-1" :style="{'max-width': valueWidth}">
         <r-text-input v-if="typeof value==='string'"
                       :tile="tile"
                       :model-value="value" @update:model-value="emit(key,$event)"></r-text-input>
-        <r-number v-else-if="typeof value==='number'"
-                  :tile="tile"
-                  :model-value="value" @update:model-value="emit(key,$event)"></r-number>
-        <r-switch v-else-if="typeof value==='boolean'"
-                  :tile="tile"
-                  :model-value="value" @update:model-value="emit(key,$event)"></r-switch>
+        <r-number-input v-else-if="typeof value==='number'"
+                        :tile="tile"
+                        :model-value="value" @update:model-value="emit(key,$event)"></r-number-input>
+        <r-switch-input v-else-if="typeof value==='boolean'"
+                        :tile="tile"
+                        :model-value="value" @update:model-value="emit(key,$event)"></r-switch-input>
 
       </div>
 

package/components/form/json/index.vue

@@ -37,24 +37,24 @@
               class="w-30 pe-1"
               :label="keyLabel"></r-text-input>
           <div class="w-20" v-if="!valueType">
-            <r-select v-model="info.type"
-                      :tile="tile"
-                      class="me-1"
-                      :items="['text','number','boolean','json','array']"
-                      just-value
-                      @update:model-value="info.value=null"
-                      firstSelect></r-select>
+            <r-select-input v-model="info.type"
+                            :tile="tile"
+                            class="me-1"
+                            :items="['text','number','boolean','json','array']"
+                            just-value
+                            @update:model-value="info.value=null"
+                            firstSelect></r-select-input>
           </div>
           <r-text-input v-if="val_type==='text'"
                         :tile="tile"
                         :label="valueLabel"
                         v-model="info.value"></r-text-input>
-          <r-number v-else-if="val_type==='number'"
-                    :tile="tile"
-                    :label="$t('value','renusify')" v-model="info.value"></r-number>
-          <r-switch v-else-if="val_type==='boolean'"
-                    :tile="tile"
-                    :label="$t('value','renusify')" v-model="info.value"></r-switch>
+          <r-number-input v-else-if="val_type==='number'"
+                          :tile="tile"
+                          :label="$t('value','renusify')" v-model="info.value"></r-number-input>
+          <r-switch-input v-else-if="val_type==='boolean'"
+                          :tile="tile"
+                          :label="$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>

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"
@@ -32,7 +36,7 @@
         />
           </span>
       </div>
-      <r-progress-liner v-if="loading" color="color-two"></r-progress-liner>
+      <r-progress-line v-if="loading" color="color-two"></r-progress-line>
     </r-input>
     <r-card class="card-select" :class="{
             'card-select-active':genItems.length>0 && openList,
@@ -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/form/text-editor/index.vue

@@ -34,10 +34,10 @@
         </r-row>
         <r-row>
             <r-col class="col-12" v-if="selectElm&&!selectElm.classList.contains('editor-content')">
-                <r-select :label="$t('class','renusify')" :model-value="[...selectElm.classList]"
-                          multiple
-                          tags
-                          @update:model-value="addClass"></r-select>
+                <r-select-input :label="$t('class','renusify')" :model-value="[...selectElm.classList]"
+                                multiple
+                                tags
+                                @update:model-value="addClass"></r-select-input>
             </r-col>
             <r-col class="col-12 ltr">
                 <span class="cursor-pointer" v-for="(item,i) in currentPath" :key="i" @click="borderd(item)">
@@ -86,10 +86,10 @@
                                           :label="$t('link','renusify')"
                                           :rules="['required']"></r-text-input>
                         </r-col>
-                        <r-col class="col-12">
-                            <r-switch :label="$t('open_new_tab','renusify')"
-                                      v-model="target"></r-switch>
-                        </r-col>
+                      <r-col class="col-12">
+                        <r-switch-input :label="$t('open_new_tab','renusify')"
+                                        v-model="target"></r-switch-input>
+                      </r-col>
                     </r-row>
                     <r-row class="h-end">
                         <r-col class="col-auto">
@@ -113,29 +113,29 @@
                  :closebtn="false"
                  v-model="showImg">
             <r-form v-model="valid2">
-                <r-container class="sheet">
-                    <r-file-uploader v-model="image"
-                                     :label="$t('image','renusify')"
-                                     :size="1"
-                                     :upload-link="uploadLink"
-                                     accept="image/*"></r-file-uploader>
-                    <r-text-input v-model="img_alt"
-                                  :label="$t('img_alt','renusify')"
-                                  :rules="['required']"></r-text-input>
-                    <r-number v-model="img_width" :label="$t('width','renusify')"
-                              :rules="['required']"></r-number>
-                    <r-number v-model="img_height" :label="$t('height','renusify')"
-                              :rules="['required']"></r-number>
-                    <r-row class="h-end">
-                        <r-col class="col-auto">
-                            <r-btn class="color-error-text"
-                                   outlined
-                                   @click.prevent="showImg=false">{{$t('cancel','renusify')}}
-                            </r-btn>
-                        </r-col>
-                        <r-col class="col-auto">
-                          <r-btn class="color-success-text"
-                                 :disabled="!valid2"
+              <r-container class="sheet">
+                <r-file-input v-model="image"
+                              :label="$t('image','renusify')"
+                              :size="1"
+                              :upload-link="uploadLink"
+                              accept="image/*"></r-file-input>
+                <r-text-input v-model="img_alt"
+                              :label="$t('img_alt','renusify')"
+                              :rules="['required']"></r-text-input>
+                <r-number-input v-model="img_width" :label="$t('width','renusify')"
+                                :rules="['required']"></r-number-input>
+                <r-number-input v-model="img_height" :label="$t('height','renusify')"
+                                :rules="['required']"></r-number-input>
+                <r-row class="h-end">
+                  <r-col class="col-auto">
+                    <r-btn class="color-error-text"
+                           outlined
+                           @click.prevent="showImg=false">{{ $t('cancel', 'renusify') }}
+                    </r-btn>
+                  </r-col>
+                  <r-col class="col-auto">
+                    <r-btn class="color-success-text"
+                           :disabled="!valid2"
                                  outlined
                                  @click.prevent="handleImageForm()">{{ $t('send', 'renusify') }}
                           </r-btn>
@@ -149,15 +149,15 @@
                v-model="showVideo">
         <r-form v-model="valid2">
           <r-container class="sheet">
-            <r-file-uploader v-model="video"
-                             :label="$t('video','renusify')"
-                             :size="1"
-                             :upload-link="uploadLink"
-                             accept="video/mp4,video/webm"></r-file-uploader>
-            <r-number v-model="img_width" :label="$t('width','renusify')"
-                      :rules="['required']"></r-number>
-            <r-number v-model="img_height" :label="$t('height','renusify')"
-                      :rules="['required']"></r-number>
+            <r-file-input v-model="video"
+                          :label="$t('video','renusify')"
+                          :size="1"
+                          :upload-link="uploadLink"
+                          accept="video/mp4,video/webm"></r-file-input>
+            <r-number-input v-model="img_width" :label="$t('width','renusify')"
+                            :rules="['required']"></r-number-input>
+            <r-number-input v-model="img_height" :label="$t('height','renusify')"
+                            :rules="['required']"></r-number-input>
             <r-row class="h-end">
               <r-col class="col-auto">
                 <r-btn class="color-error-text"

package/components/form/unit-input.vue

@@ -15,10 +15,10 @@
            class="me-1"
     />
     <div class="select-unit" :class="{'input-shadow':disableUnit}">
-      <r-select :readonly="disableUnit" :items="units" v-model="unit"
-                @update:model-value="emit" hide justValue :translate="translate"
-                class="mt-0"
-                firstSelect></r-select>
+      <r-select-input :readonly="disableUnit" :items="units" v-model="unit"
+                      @update:model-value="emit" hide justValue :translate="translate"
+                      class="mt-0"
+                      firstSelect></r-select-input>
     </div>
   </r-input>
 </template>

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

@@ -9,7 +9,7 @@ const list = {
     'r-bottom-navigation': {'p': 'bar/bottomNav.vue', 'c': [], 'd': []},
     'r-bottom-navigation-circle': {'p': 'bar/bottomNavigationCircle.vue', 'c': ['r-icon'], 'd': []},
     'r-breadcrumbs': {'p': 'breadcrumb/index.vue', 'c': ['r-icon'], 'd': []},
-    'r-btn': {'p': 'button/index.vue', 'c': ['r-progress-circular'], 'd': ['ripple']},
+    'r-btn': {'p': 'button/index.vue', 'c': ['r-progress-circle'], 'd': ['ripple']},
     'r-btn-confirm': {'p': 'button/buttonConfirm.vue', 'c': ['r-btn', 'r-confirm'], 'd': []},
     'r-btn-group': {
         'p': 'button/buttonGroup.vue',
@@ -25,7 +25,7 @@ const list = {
     'r-chart': {'p': 'chart/chart.vue', 'c': [], 'd': []},
     'r-chat': {
         'p': 'chat/index.vue',
-        'c': ['r-btn', 'r-icon', 'r-progress-circular', 'r-img'],
+        'c': ['r-btn', 'r-icon', 'r-progress-circle', 'r-img'],
         'd': ['intersect', 'scroll']
     },
     'r-chip': {'p': 'chip/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
@@ -44,67 +44,67 @@ const list = {
     'r-count-down': {'p': 'countdown/index.vue', 'c': [], 'd': []},
     'r-float': {'p': 'float/index.vue', 'c': [], 'd': []},
     'r-form': {'p': 'form/form.vue', 'c': [], 'd': []},
-    'r-color-picker': {
+    'r-color-input': {
         'p': 'form/colorPicker/index.vue',
         'c': ['r-input', 'r-modal', 'r-btn', 'r-icon'],
         'd': ['touch']
     },
-    'r-date-picker': {
+    'r-date-input': {
         'p': 'form/datePicker/index.vue',
         'c': ['r-input', 'r-modal', 'r-container', 'r-row', 'r-col', 'r-btn', 'r-icon'],
         'd': []
     },
-    'r-file-uploader': {
+    'r-file-input': {
         'p': 'form/fileUploader/index.vue',
-        'c': ['r-input', 'r-row', 'r-btn', 'r-icon', 'r-progress-circular', 'r-text-input'],
+        'c': ['r-input', 'r-row', 'r-btn', 'r-icon', 'r-progress-circle', 'r-text-input'],
         'd': []
     },
-    'r-tel': {
+    'r-tel-input': {
         'p': 'form/inputTel/index.vue',
         'c': ['r-modal', 'r-card', 'r-text-input', 'r-list', 'r-spacer', 'r-btn'],
         'd': []
     },
-    'r-json': {
+    'r-json-input': {
         'p': 'form/json/index.vue',
-        'c': ['r-btn', 'r-icon', 'r-text-input', 'r-select', 'r-number', 'r-switch'],
+        'c': ['r-btn', 'r-icon', 'r-text-input', 'r-select-input', 'r-number-input', 'r-switch-input'],
         'd': []
     },
     'r-text-editor': {
         'p': 'form/text-editor/index.vue',
         'c': ['r-container', 'r-row', 'r-col', 'r-btn-group', 'r-btn',
-            'r-icon', 'r-select', 'r-input', 'r-img', 'r-modal',
-            'r-form', 'r-file-uploader', 'r-text-input', 'r-switch', 'r-number'],
+            'r-icon', 'r-select-input', 'r-input', 'r-img', 'r-modal',
+            'r-form', 'r-file-input', 'r-text-input', 'r-switch-input', 'r-number-input'],
         'd': []
     },
     'r-text-editor-preview': {'p': 'form/text-editor/preview.vue', 'c': [], 'd': []},
-    'r-time-picker': {'p': 'form/timepicker/index.vue', 'c': ['r-input', 'r-modal', 'r-card', 'r-btn'], 'd': []},
-    'r-time-picker-range': {'p': 'form/timepicker/range.vue', 'c': ['r-input', 'r-modal', 'r-card', 'r-btn'], 'd': []},
-    'r-unique-feild': {'p': 'form/uniqueFeild/index.vue', 'c': ['r-text-input'], 'd': []},
-    'r-address': {'p': 'form/address.vue', 'c': ['r-select', 'r-text-area', 'r-text-input'], 'd': []},
+    'r-time-input': {'p': 'form/timepicker/index.vue', 'c': ['r-input', 'r-modal', 'r-card', 'r-btn'], 'd': []},
+    'r-time-range-input': {'p': 'form/timepicker/range.vue', 'c': ['r-input', 'r-modal', 'r-card', 'r-btn'], 'd': []},
+    'r-unique-input': {'p': 'form/unique/index.vue', 'c': ['r-text-input'], 'd': []},
+    'r-address-input': {'p': 'form/address.vue', 'c': ['r-select-input', 'r-text-area', 'r-text-input'], 'd': []},
     'r-cam-input': {'p': 'form/camInput', 'c': ['r-input', 'r-btn', 'r-icon'], 'd': []},
     'r-check-input': {'p': 'form/check-input.vue', 'c': ['r-input', 'r-btn', 'r-icon'], 'd': []},
-    'r-checkbox': {'p': 'form/checkbox.vue', 'c': ['r-input', 'r-icon'], 'd': []},
+    'r-checkbox-input': {'p': 'form/checkbox.vue', 'c': ['r-input', 'r-icon'], 'd': []},
     'r-group-input': {
         'p': 'form/group-input.vue',
-        'c': ['r-text-input', 'r-number', 'r-switch', 'r-btn', 'r-icon'],
+        'c': ['r-text-input', 'r-number-input', 'r-switch-input', 'r-btn', 'r-icon'],
         'd': []
     },
     'r-input': {'p': 'form/input.vue', 'c': ['r-icon'], 'd': []},
     'r-mask-input': {'p': 'form/mask-input.vue', 'c': ['r-input'], 'd': ['mask']},
-    'r-number': {'p': 'form/number.vue', 'c': ['r-input', 'r-btn', 'r-icon'], 'd': []},
-    'r-password': {'p': 'form/password.vue', 'c': ['r-input', 'r-icon'], 'd': []},
+    'r-number-input': {'p': 'form/number.vue', 'c': ['r-input', 'r-btn', 'r-icon'], 'd': []},
+    'r-password-input': {'p': 'form/password.vue', 'c': ['r-input', 'r-icon'], 'd': []},
     'r-radio-input': {'p': 'form/radioInput.vue', 'c': ['r-input', 'r-icon'], 'd': []},
-    'r-range': {'p': 'form/range.vue', 'c': ['r-input'], 'd': ['touch']},
-    'r-rating': {'p': 'form/rating.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
-    'r-select': {
+    'r-range-input': {'p': 'form/range.vue', 'c': ['r-input'], 'd': ['touch']},
+    'r-rating-input': {'p': 'form/rating.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
+    'r-select-input': {
         'p': 'form/select.vue',
-        'c': ['r-input', 'r-chip', 'r-progress-liner', 'r-card', 'r-list', 'r-icon'],
+        'c': ['r-input', 'r-chip', 'r-progress-line', 'r-card', 'r-list', 'r-icon'],
         'd': ['click-outside']
     },
-    'r-switch': {'p': 'form/switch.vue', 'c': ['r-input'], 'd': []},
+    'r-switch-input': {'p': 'form/switch.vue', 'c': ['r-input'], 'd': []},
     'r-text-area': {'p': 'form/text-area.vue', 'c': ['r-input'], 'd': []},
     'r-text-input': {'p': 'form/text-input.vue', 'c': ['r-input'], 'd': []},
-    'r-unit-input': {'p': 'form/unit-input.vue', 'c': ['r-input', 'r-select'], 'd': []},
+    'r-unit-input': {'p': 'form/unit-input.vue', 'c': ['r-input', 'r-select-input'], 'd': []},
     'r-form-creator': {
         'p': 'formCreator/index.vue',
         'c': ['r-card', 'r-container', 'r-message', 'r-form', 'r-row', 'r-col', 'r-btn'],
@@ -116,13 +116,13 @@ const list = {
     'r-img': {'p': 'img/index.vue', 'c': [], 'd': ['intersect']},
     'r-infinite-div': {
         'p': 'infinite/div.vue',
-        'c': ['r-container', 'r-row', 'r-col', 'r-progress-liner'],
+        'c': ['r-container', 'r-row', 'r-col', 'r-progress-line'],
         'd': ['scroll']
     },
-    'r-infinite-page': {'p': 'infinite/page.vue', 'c': ['r-progress-liner'], 'd': ['scroll']},
+    'r-infinite-page': {'p': 'infinite/page.vue', 'c': ['r-progress-line'], 'd': ['scroll']},
     'r-infinite-box': {
         'p': 'infinite/index.vue',
-        'c': ['r-card', 'r-container', 'r-row', 'r-col', 'r-switch', 'r-infinite-div'],
+        'c': ['r-card', 'r-container', 'r-row', 'r-col', 'r-switch-input', 'r-infinite-div'],
         'd': []
     },
     'r-list': {'p': 'list/index.vue', 'c': ['r-icon'], 'd': ['ripple']},
@@ -137,36 +137,35 @@ const list = {
     'r-message': {'p': 'message/index.vue', 'c': ['r-container', 'r-row', 'r-col'], 'd': []},
     'r-meta': {'p': 'meta/index.js', 'c': [], 'd': []},
     'r-modal': {'p': 'modal/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
-    'r-progress-circular': {'p': 'progress/circular.vue', 'c': [], 'd': []},
-    'r-progress-liner': {'p': 'progress/liner.vue', 'c': [], 'd': []},
+    'r-progress-circle': {'p': 'progress/circle.vue', 'c': [], 'd': []},
+    'r-progress-line': {'p': 'progress/line.vue', 'c': [], 'd': []},
     'r-search-box': {
         'p': 'searchBox/index.vue',
-        'c': ['r-input', 'r-progress-liner', 'r-card', 'r-list', 'r-btn', 'r-icon'],
+        'c': ['r-input', 'r-progress-line', 'r-card', 'r-list', 'r-btn', 'r-icon'],
         'd': ['click-outside']
     },
     'r-skeleton': {'p': 'skeleton/index.vue', 'c': [], 'd': []},
-    'r-slider': {'p': 'slider/index.vue', 'c': ['r-progress-liner', 'r-btn', 'r-icon'], 'd': ['touch']},
+    'r-slider': {'p': 'slider/index.vue', 'c': ['r-progress-line', 'r-btn', 'r-icon'], 'd': ['touch']},
     'r-swiper': {'p': 'swiper/index.vue', 'c': [], 'd': ['touch']},
     'r-table': {
         'p': 'table/index.vue',
-        'c': ['r-btn', 'r-icon', 'r-switch', 'r-progress-liner', 'r-modal', 'r-card', 'r-container', 'r-row', 'r-col'],
+        'c': ['r-btn', 'r-icon', 'r-switch-input', 'r-progress-line', 'r-modal', 'r-card', 'r-container', 'r-row', 'r-col'],
         'd': ['sortable']
     },
     'r-table-crud': {
         'p': 'table/crud/index.vue',
-        'c': ['r-card', 'r-modal', 'r-form-creator', 'r-json', 'r-divider', 'r-number', 'r-btn', 'r-table', 'r-icon',
-            'r-time-ago', 'r-switch', 'r-confirm', 'r-container', 'r-row', 'r-col', 'r-text-input', 'r-select', 'r-date-picker',
-            'r-progress-liner'],
+        'c': ['r-card', 'r-modal', 'r-form-creator', 'r-json-input', 'r-divider', 'r-number-input', 'r-btn', 'r-table', 'r-icon',
+            'r-time-ago', 'r-switch-input', 'r-confirm', 'r-container', 'r-row', 'r-col', 'r-text-input', 'r-select-input', 'r-date-input',
+            'r-progress-line'],
         'd': []
     },
     'r-tabs': {'p': 'tabs/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
     'r-time-ago': {'p': 'timeAgo/index.vue', 'c': [], 'd': []},
     'r-timeline': {'p': 'timeline/index.vue', 'c': ['r-container', 'r-row', 'r-col'], 'd': []},
     'r-tour': {'p': 'tour/index.vue', 'c': ['r-container', 'r-spacer', 'r-btn'], 'd': []},
-
     'r-tree': {
         'p': 'tree/index.vue',
-        'c': ['r-container', 'r-row', 'r-col', 'r-select', 'r-float', 'r-tree-element'],
+        'c': ['r-container', 'r-row', 'r-col', 'r-select-input', 'r-float', 'r-tree-element'],
         'd': []
     },
     'r-tree-element': {'p': 'tree/tree-element.vue', 'c': ['r-container', 'r-row', 'r-col', 'r-btn', 'r-icon'], 'd': []}

package/components/infinite/div.vue

@@ -13,8 +13,8 @@
                             <slot v-bind:item="item">{{item}}</slot>
                         </r-col>
                         <r-col class="col-12" key="loading">
-                            <r-progress-liner color="color-two"
-                                              v-show="loading"></r-progress-liner>
+                          <r-progress-line color="color-two"
+                                           v-show="loading"></r-progress-line>
                         </r-col>
                     </transition-group>
                 </div>

package/components/infinite/index.vue

@@ -6,10 +6,10 @@
                     <h3 class="title px-2">{{ title }}</h3>
                 </r-col>
                 <r-col class="col-auto">
-                    <r-switch
-                            label="live"
-                            v-model="live"
-                    ></r-switch>
+                    <r-switch-input
+                        label="live"
+                        v-model="live"
+                    ></r-switch-input>
                 </r-col>
             </r-row>
         </r-container>

package/components/infinite/page.vue

@@ -3,10 +3,10 @@
         <div class="infinite-page-container" v-scroll="onScroll">
             <slot :items="datacollection"></slot>
         </div>
-        <r-progress-liner color="color-two"
-                          v-show="loading"
+        <r-progress-line color="color-two"
+                         v-show="loading"
 
-        ></r-progress-liner>
+        ></r-progress-line>
         <div class="text-center subtitle-1"
              v-if="noItem"
         >{{noItemMsg}}