renusify 1.0.3 → 1.0.5

package/components/form/colorPicker/picker.vue

@@ -1,41 +1,51 @@
 <template>
   <div
       class="color-box"
-      :style="{ width: totalWidth + 'px' }"
   >
     <div class="color-set">
       <Saturation
           ref="saturation"
           :hsv="{h:h,s:s,v:v}"
           :color="rgbaString"
-          :size="hueHeight"
+          :size="200"
           @selectSaturation="selectSaturation"
       />
       <Hue
           ref="hue"
           :hsv="{h:h,s:s,v:v}"
-          :width="hueWidth"
-          :height="hueHeight"
+          :width="15"
+          :height="200"
           @selectHue="selectHue"
       />
       <Alpha
           ref="alpha"
           :color="rgbaString"
           :rgba="rgba"
-          :width="hueWidth"
-          :height="hueHeight"
+          :width="15"
+          :height="200"
           @selectAlpha="selectAlpha"
       />
     </div>
-    <div :style="{ height: previewHeight + 'px' }" class="color-show">
+    <div class="color-show">
       <Preview
           :color="rgbaString"
-          :width="previewWidth"
-          :height="previewHeight"
+          :width="238"
+          :height="28"
       />
     </div>
-    <Box name="HEX" :color="hexString" @inputColor="inputHex"/>
-    <Box name="RGBA" :color="rgbaString" @inputColor="inputRgba"/>
+    <div class="color-input">
+    <span class="name">
+      HEX
+    </span>
+      <input :value="hexString" @input="inputHex" class="value"/>
+    </div>
+    <div class="color-input">
+    <span class="name">
+      RGBA
+    </span>
+      <input :value="rgbaString" @input="inputRgba" class="value"/>
+    </div>
+
     <slot></slot>
   </div>
 </template>
@@ -47,29 +57,23 @@ import Saturation from './Saturation.vue'
 import Hue from './Hue.vue'
 import Alpha from './Alpha.vue'
 import Preview from './Preview.vue'
-import Box from './Box.vue'
 
 export default {
   components: {
     Saturation,
     Hue,
     Alpha,
-    Preview,
-    Box
+    Preview
   },
-  emits: ['changeColor'],
   mixins: [color],
   props: {
     color: {
       type: String,
-      default: '#DD0FB2',
+      default: '#2F1DCC',
     }
   },
   data() {
     return {
-      hueWidth: 15,
-      hueHeight: 200,
-      previewHeight: 30,
       r: 0,
       g: 0,
       b: 0,
@@ -80,12 +84,6 @@ export default {
     }
   },
   computed: {
-    totalWidth() {
-      return this.hueHeight + (this.hueWidth + 14) * 2
-    },
-    previewWidth() {
-      return this.totalWidth - 20
-    },
     rgba() {
       return {
         r: this.r,
@@ -133,7 +131,11 @@ export default {
       this.a = a
     },
     inputHex(color) {
-      this.setColorValue(color)
+      const value = color.target.value
+      if (value.length !== 7) {
+        return
+      }
+      this.setColorValue(value)
       this.$nextTick(() => {
 
         this.$refs.saturation.renderColor()
@@ -144,26 +146,16 @@ export default {
       })
     },
     inputRgba(color) {
-      this.setColorValue(color)
-      this.$nextTick(() => {
-        this.$refs.saturation.renderColor()
-
-        this.$refs.saturation.renderSlide()
-
-        this.$refs.hue.renderSlide()
-      })
-    },
-    selectColor(color) {
-      this.setColorValue(color)
+      const value = color.target.value
+      this.setColorValue(value)
       this.$nextTick(() => {
-
         this.$refs.saturation.renderColor()
 
         this.$refs.saturation.renderSlide()
 
         this.$refs.hue.renderSlide()
       })
-    },
+    }
   },
 }
 </script>
@@ -196,5 +188,54 @@ export default {
     margin-top: 8px;
     display: flex;
   }
+
+  .color-input {
+    display: flex;
+    margin-top: 8px;
+    font-size: 12px;
+
+    .name {
+      width: 60px;
+      height: 30px;
+      float: left;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .value {
+      flex: 1;
+      height: 30px;
+      min-width: 100px;
+      padding: 0 12px;
+      border: 0;
+      box-sizing: border-box;
+      text-align: left;
+      direction: ltr;
+    }
+
+    @include light() {
+      .name {
+        color: #999;
+        background: #e7e8e9;
+      }
+      .value {
+        color: #666;
+        background: #eceef0;
+      }
+    }
+    @include dark() {
+      .name {
+        color: #999;
+        background: #252930;
+      }
+      .value {
+        color: #fff;
+        background: #2e333a;
+      }
+    }
+  }
 }
+
+
 </style>

package/components/form/group-input.vue

@@ -1,118 +1,136 @@
 <template>
-    <div :class="`${$r.prefix}group-input`">
-        <label>{{label}}</label>
-        <div class="group-holder" v-for="(item,i) in modelValue" :key="i">
-            <div class="group-slot">
-              <slot :item="item" :index="i">
-                <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"
-                                  v-model="item[k]"></r-text-input>
-                    <r-number v-else-if="typeof v==='number'" class="flex-grow-0 me-1" :label="k"
-                              v-model="item[k]"></r-number>
-                    <r-switch v-else-if="typeof v==='boolean'" class="flex-grow-0 me-1" :label="k"
-                              v-model="item[k]"></r-switch>
-                  </template>
-                </div>
-              </slot>
-            </div>
-            <div class="group-action">
-                <r-btn icon text>
-                    <r-icon v-html="$r.icons.chevron_up" :class="{'icon-disabled':i===0}" @click.prevent="up(i)"></r-icon>
-                </r-btn>
-                <r-btn icon text>
-                    <r-icon v-html="$r.icons.chevron_down" :class="{'icon-disabled':i===modelValue.length-1}" @click.prevent="down(i)"></r-icon>
-                </r-btn>
-                <r-btn icon class="color-error-text" text @click.prevent="del(i)">
-                    <r-icon v-html="$r.icons.delete"></r-icon>
-                </r-btn>
-            </div>
-        </div>
-        <div class="text-center mt-5">
-            <transition name="scale">
-                <r-btn v-if="show_add" class="color-success" icon @click.prevent="add">
-                    <r-icon v-html="$r.icons.plus"></r-icon>
-                </r-btn>
-            </transition>
-        </div>
-
+  <div :class="`${$r.prefix}group-input`">
+    <label>{{ label }}</label>
+    <div class="group-holder" v-for="(item,i) in modelValue" :key="i">
+      <div class="group-slot">
+        <slot :item="item" :index="i" :disableDel="disDel">
+          <div class="d-flex flex-wrap pt-5">
+            <template v-for="(v,k) in item" :key="i+'-'+k">
+              <r-text-input v-if="typeof v==='string'" class="flex-grow-0 me-1" :label="k"
+                            v-model="item[k]"></r-text-input>
+              <r-number v-else-if="typeof v==='number'" class="flex-grow-0 me-1" :label="k"
+                        v-model="item[k]"></r-number>
+              <r-switch v-else-if="typeof v==='boolean'" class="flex-grow-0 me-1" :label="k"
+                        v-model="item[k]"></r-switch>
+            </template>
+          </div>
+        </slot>
+      </div>
+      <div class="group-action">
+        <r-btn icon text>
+          <r-icon v-html="$r.icons.chevron_up" :class="{'icon-disabled':i===0}" @click.prevent="up(i)"></r-icon>
+        </r-btn>
+        <r-btn icon text>
+          <r-icon v-html="$r.icons.chevron_down" :class="{'icon-disabled':i===modelValue.length-1}"
+                  @click.prevent="down(i)"></r-icon>
+        </r-btn>
+        <r-btn v-if="!disableItems.includes(item[itemKey])" icon class="color-error-text" text @click.prevent="del(i)">
+          <r-icon v-html="$r.icons.delete"></r-icon>
+        </r-btn>
+      </div>
+    </div>
+    <div class="text-center mt-5">
+      <transition name="scale">
+        <r-btn v-if="show_add" class="color-success" icon @click.prevent="add">
+          <r-icon v-html="$r.icons.plus"></r-icon>
+        </r-btn>
+      </transition>
     </div>
+
+  </div>
 </template>
 <script>
-    export default {
-        name: 'rGroupInput',
-        props: {
-            label: String,
-            modelValue: Array,
-            size: Number,
-          template: Object
-        },
-        computed: {
-            show_add() {
-                const l = this.$helper.ifHas(this.modelValue, 0, 'length')
-                return !(this.size && l >= this.size);
-            }
-        },
-        methods: {
-            add() {
-                if (this.show_add) {
-                    let a = this.modelValue || []
-                  a.push(this.$helper.clearProxy(this.template))
-                  this.$emit('update:model-value', a)
-                }
-
-            },
-            del(i) {
-                let a = this.modelValue || []
-                a.splice(i, 1)
-                this.$emit('update:model-value', a)
-            },
-            up(i) {
-                if(i===0){
-                    return
-                }
-                let a = this.modelValue || []
-                a = this.array_move(a, i, i-1)
-                this.$emit('update:model-value', a)
-            },
-            down(i) {
-                if(i===this.modelValue.length-1){
-                    return
-                }
-                let a = this.modelValue || []
-                a = this.array_move(a, i, i+1)
-                this.$emit('update:model-value', a)
-            },
-            array_move(arr, old_index, new_index) {
-                if (new_index >= arr.length) {
-                    let k = new_index - arr.length + 1;
-                    while (k--) {
-                        arr.push(undefined);
-                    }
-                }
-                arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
-                return arr;
-            }
+export default {
+  name: 'rGroupInput',
+  props: {
+    label: String,
+    itemKey: String,
+    modelValue: Array,
+    size: Number,
+    disableAdd: Boolean,
+    template: Object
+  },
+  data() {
+    return {
+      disabledDel: {}
+    }
+  },
+  computed: {
+    disableItems() {
+      return Object.keys(this.disabledDel)
+    },
+    show_add() {
+      if (this.disableAdd) {
+        return false
+      }
+      const l = this.$helper.ifHas(this.modelValue, 0, 'length')
+      return !(this.size && l >= this.size);
+    }
+  },
+  methods: {
+    disDel(value) {
+      this.disabledDel[value] = true
+    },
+    add() {
+      if (this.show_add) {
+        let a = this.modelValue || []
+        a.push(this.$helper.clearProxy(this.template))
+        this.$emit('add', true)
+        this.$emit('update:model-value', a)
+      }
+    },
+    del(i) {
+      let a = this.modelValue || []
+      a.splice(i, 1)
+      this.$emit('delete', i)
+      this.$emit('update:model-value', a)
+    },
+    up(i) {
+      if (i === 0) {
+        return
+      }
+      let a = this.modelValue || []
+      a = this.array_move(a, i, i - 1)
+      this.$emit('update:model-value', a)
+    },
+    down(i) {
+      if (i === this.modelValue.length - 1) {
+        return
+      }
+      let a = this.modelValue || []
+      a = this.array_move(a, i, i + 1)
+      this.$emit('update:model-value', a)
+    },
+    array_move(arr, old_index, new_index) {
+      if (new_index >= arr.length) {
+        let k = new_index - arr.length + 1;
+        while (k--) {
+          arr.push(undefined);
         }
+      }
+      arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
+      return arr;
     }
+  }
+}
 </script>
 <style lang="scss">
-    @import "../../style/include";
+@import "../../style/include";
 
-    .#{$prefix}group-input {
-        .group-holder {
-            position: relative;
+.#{$prefix}group-input {
+  .group-holder {
+    position: relative;
 
-            .group-action {
-                position: absolute;
-                top: 0;
-                @include ltr() {
-                    right: 0;
-                }
-                @include rtl() {
-                    left: 0;
-                }
-            }
-        }
+    .group-action {
+      position: absolute;
+      top: 0;
+      @include ltr() {
+        right: 0;
+      }
+      @include rtl() {
+        left: 0;
+      }
     }
+  }
+}
 </style>

package/components/form/inputTel/index.vue

@@ -15,7 +15,7 @@
                                 class="iti-flag"></div>
                         <div class="list-title">{{item.name}}</div>
                         <r-spacer></r-spacer>
-                        <span>+{{ item.dialCode }}</span>
+                        <span class="ltr">+{{ item.dialCode }}</span>
                     </template>
                 </r-list>
             </r-card>
@@ -26,14 +26,13 @@
             <span class="country-code pa-1"> +{{ activeCountry.dialCode }} </span>
             <span class="dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
         </r-btn>
-        <r-mask-input class="input-phone" :label="label?label:$t('phone','renusify')"
-                      @update:model-value="emit"
-                      :mask="'+'+activeCountry.dialCode+' NNN NNN NNNN'"
-                      :tile="tile"
-                      :required="required"
-                      v-model="tel.phone"
-        >
-        </r-mask-input>
+      <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>
 </template>
@@ -143,7 +142,6 @@
                     setTimeout(() => {
                         this.tel.phone = this.tel.phone.substr(1, this.tel.phone.length)
                         this.$emit('update:modelValue', this.tel)
-                        this.$toast(this.$t('phone_ex', 'renusify'))
                     }, 1)
                 } else {
                     this.$emit('update:modelValue', this.tel)

package/components/form/json/JsonView.vue

@@ -20,20 +20,21 @@
                 :disableDel="disableDel||template!==undefined"
                 :disableEditKey="disableEditKey"
                 :keyWidth="keyWidth"
+                :valueWidth="valueWidth"
         ></r-json>
       </div>
-        <div v-else class="mb-1">
-            <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'"
+      <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-number>
-            <r-switch v-else-if="typeof value==='boolean'"
-                      :tile="tile"
-                      :model-value="value" @update:model-value="emit(key,$event)"></r-switch>
+                      :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>
 
-        </div>
+      </div>
 
     </div>
 </template>
@@ -50,6 +51,9 @@
           keyWidth: {
             type: String,
             default: '140px'
+          }, valueWidth: {
+            type: String,
+            default: '300px'
           }
         },
         data() {
@@ -100,4 +104,4 @@
 <style lang="scss">
     @import "../../../style/include";
 
-</style>
+</style>

package/components/form/json/index.vue

@@ -18,6 +18,7 @@
                    :disableDel="disableDel"
                    :tile="tile"
                    :keyWidth="keyWidth"
+                   :valueWidth="valueWidth"
         ></json-view>
         <div v-if="!show &&!disableAdd" class="text-end mb-3">
           <r-btn
@@ -33,28 +34,28 @@
               v-if="!is_array"
               v-model="info.key"
               :tile="tile"
-              class="w-30"
-              :label="$t('key','renusify')"></r-text-input>
-          <div class="w-20">
+              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="mx-1"
+                      class="me-1"
                       :items="['text','number','boolean','json','array']"
                       just-value
                       @update:model-value="info.value=null"
                       firstSelect></r-select>
           </div>
-          <r-text-input v-if="info.type==='text'"
+          <r-text-input v-if="val_type==='text'"
                         :tile="tile"
-                        :label="$t('value','renusify')"
+                        :label="valueLabel"
                         v-model="info.value"></r-text-input>
-          <r-number v-else-if="info.type==='number'"
+          <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="info.type==='boolean'"
+          <r-switch v-else-if="val_type==='boolean'"
                     :tile="tile"
                     :label="$t('value','renusify')" v-model="info.value"></r-switch>
-          <r-btn @click.prevent="add" class="ms-1">{{ $t('add', 'renusify') }}</r-btn>
+          <r-btn @click.prevent="add" class="ms-1 color-success" rounded>{{ $t('add', 'renusify') }}</r-btn>
         </div>
       </div>
       <div class="display-5 d-flex v-end pb-2" :style="{'color':color}" :class="{
@@ -73,6 +74,8 @@ export default {
   components: {JsonView},
   props: {
     label: String,
+    keyLabel: {type: String, default: 'key'},
+    valueLabel: {type: String, default: 'value'},
     modelValue: {
       type: Object, Array
     },
@@ -80,6 +83,16 @@ export default {
       type: String,
       default: '140px'
     },
+    valueWidth: {
+      type: String,
+      default: '300px'
+    },
+    valueType: {
+      type: String,
+      validator: function (value) {
+        return ['text', 'number', 'boolean'].indexOf(value) !== -1
+      }
+    },
     template: Object,
     baseArray: Boolean,
     disableAdd: Boolean,
@@ -95,6 +108,12 @@ export default {
     }
   },
   computed: {
+    val_type() {
+      if (this.valueType) {
+        return this.valueType
+      }
+      return this.info.type
+    },
     is_array() {
       if (this.baseArray) {
         return true
@@ -152,4 +171,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/components/form/mask-input.vue

@@ -16,13 +16,8 @@
 </template>
 
 <script>
-    import Mask from '../../directive/mask'
-
     export default {
         name: 'r-mask-input',
-        directives: {
-            mask: Mask
-        },
         props: {
             modelValue: String,
             mask: {

package/components/form/number.vue

@@ -9,7 +9,7 @@
         <r-icon v-html="$r.icons.minus"></r-icon>
       </r-btn>
       <input @input="emit"
-             class="text-center"
+             class="text-center ltr"
              @focusin="active=true"
              @focusout="active=false"
              ref="input"

package/components/form/range.vue

@@ -48,11 +48,9 @@
   </r-input>
 </template>
 <script>
-import touch from '../../directive/touch'
 
 export default {
   name: 'r-range',
-  directives: {touch},
   props: {
     modelValue: {
       type: [Number, Array]