renusify 1.1.4 → 1.2.0

package/components/form/json/JsonView.vue

@@ -1,107 +1,108 @@
 <template>
-    <div :class="`${$r.prefix}json-view d-flex v-baseline flex-wrap`"
-         v-for="(value,key) in modelValue"
-         :key="key">
-      <div class="key d-flex v-baseline me-1" :style="{'max-width': keyWidth}">
-        <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>
-        <template v-if="!is_array">
-          <r-text-input :tile="tile" :readonly="disableEditKey" :model-value="key"
-                        @update:model-value="emitkey(key,$event)"></r-text-input>
-          :
-        </template>
-      </div>
-      <div v-if="typeof value==='object'" class="flex-grow-1 w-full ps-10">
-        <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'"
+  <div :class="`${$r.prefix}json-view d-flex v-baseline flex-wrap`"
+       v-for="(value,key) in modelValue"
+       :key="key">
+    <div class="key d-flex v-baseline me-1" :style="{'max-width': keyWidth}">
+      <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>
+      <template v-if="!is_array">
+        <r-text-input :tile="tile" :readonly="disableEditKey" :model-value="key"
+                      @update:model-value="emitkey(key,$event)"></r-text-input>
+        :
+      </template>
+    </div>
+    <div v-if="typeof value==='object'" class="flex-grow-1 w-full ps-10">
+      <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-input v-else-if="typeof value==='number'"
                       :tile="tile"
-                      :model-value="value" @update:model-value="emit(key,$event)"></r-text-input>
-        <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>
+                      :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>
+
+  </div>
 </template>
 <script>
-    export default {
-        name: 'jsonView',
-        props: {
-          modelValue: Object,
-          template: Object,
-          disableEditKey: Boolean,
-          disableAdd: Boolean,
-          disableDel: Boolean,
-          tile: Boolean,
-          keyWidth: {
-            type: String,
-            default: '140px'
-          }, valueWidth: {
-            type: String,
-            default: '300px'
-          }
-        },
-        data() {
-            return {
-                time_id: null
-            }
-        },
-        computed:{
-            is_array(){
-              return Array.isArray(this.modelValue)
-          }
-        },
-        methods: {
-            del(key) {
-                let o = this.modelValue
-                if (this.is_array) {
-                    o.splice(key, 1)
-                } else {
-                    delete o[key]
-                }
-                this.$emit('update:model-value', o)
-            },
-            emitkey(oldKey, newKey) {
-                clearTimeout(this.time_id)
-                let o = this.modelValue
-                let n = {};
+export default {
+  name: 'jsonView',
+  props: {
+    modelValue: Object,
+    template: Object,
+    disableEditKey: Boolean,
+    disableAdd: Boolean,
+    disableDel: Boolean,
+    tile: Boolean,
+    keyWidth: {
+      type: String,
+      default: '140px'
+    }, valueWidth: {
+      type: String,
+      default: '300px'
+    }
+  },
+  emits: ['update:model-value'],
+  data() {
+    return {
+      time_id: null
+    }
+  },
+  computed: {
+    is_array() {
+      return Array.isArray(this.modelValue)
+    }
+  },
+  methods: {
+    del(key) {
+      let o = this.modelValue
+      if (this.is_array) {
+        o.splice(key, 1)
+      } else {
+        delete o[key]
+      }
+      this.$emit('update:model-value', o)
+    },
+    emitkey(oldKey, newKey) {
+      clearTimeout(this.time_id)
+      let o = this.modelValue
+      let n = {};
 
-                Object.keys(o).forEach(key => {
-                    if (key === oldKey) {
-                        let newPair = {[newKey]: o[oldKey]};
-                        n = {...n, ...newPair}
-                    } else {
-                        n = {...n, [key]: o[key]}
-                    }
-                });
-                this.time_id = setTimeout(() => {
-                    this.$emit('update:model-value', n)
-                }, 1000)
-            },
-            emit(k, v) {
-                let d = this.modelValue
-                d[k] = v
-                this.$emit('update:model-value', d)
-            }
+      Object.keys(o).forEach(key => {
+        if (key === oldKey) {
+          let newPair = {[newKey]: o[oldKey]};
+          n = {...n, ...newPair}
+        } else {
+          n = {...n, [key]: o[key]}
         }
+      });
+      this.time_id = setTimeout(() => {
+        this.$emit('update:model-value', n)
+      }, 1000)
+    },
+    emit(k, v) {
+      let d = this.modelValue
+      d[k] = v
+      this.$emit('update:model-value', d)
     }
+  }
+}
 </script>
 <style lang="scss">
-    @import "../../../style/include";
+@import "../../../style/include";
 
 </style>

package/components/form/json/index.vue

@@ -42,6 +42,7 @@
                             class="me-1"
                             :items="['text','number','boolean','json','array']"
                             just-value
+                            disableSearch
                             @update:model-value="info.value=null"
                             firstSelect></r-select-input>
           </div>
@@ -100,6 +101,7 @@ export default {
     disableEditKey: Boolean,
     disableDel: Boolean
   },
+  emits:['update:modelValue'],
   data() {
     return {
       show: false,

package/components/form/mask-input.vue

@@ -34,6 +34,7 @@
                 type: Boolean
             },
         },
+      emits:['update:modelValue','complete'],
         data() {
             return {
                 lazyVal: this.modelValue?this.build_mask(this.modelValue, this.mask):null,

package/components/form/number.vue

@@ -5,7 +5,7 @@
              :active="active"
              inputControlClass="v-center"
     >
-      <r-btn @click.prevent="minus" class="minus" icon :text="btnText">
+      <r-btn @click.prevent.stop="minus" class="minus" icon :text="btnText">
         <r-icon v-html="$r.icons.minus"></r-icon>
       </r-btn>
       <input @input="emit"
@@ -13,11 +13,11 @@
              @focusin="active=true"
              @focusout="active=false"
              ref="input"
-             type="number"
+             type="text"
              autocomplete="no"
-             v-model.number="number"
+             v-model="number"
       />
-      <r-btn @click.prevent="plus" class="plus" icon :text="btnText">
+      <r-btn @click.prevent.stop="plus" class="plus" icon :text="btnText">
         <r-icon v-html="$r.icons.plus"></r-icon>
       </r-btn>
     </r-input>
@@ -32,6 +32,7 @@ export default {
   props: {
     modelValue: Number,
     step: {type: Number, default: 1},
+    split: {type: Number, default: 0},
     min: {
       type: Number
     },
@@ -40,27 +41,41 @@ export default {
     },
     btnText: Boolean
   },
+  emits:['update:modelValue'],
   data() {
     return {
-      number: this.modelValue,
+      number: this.setSplit(this.modelValue),
       active: false
     }
   },
   watch: {
     'modelValue': function (newVal) {
       setTimeout(() => {
-        this.number = newVal
+        this.number = this.setSplit(newVal)
       })
     }
   },
   methods: {
+    setSplit(n) {
+      if (n && this.split > 0) {
+        const x = this.split
+        n = n.toString()
+        const step = n.indexOf('.')
+        const re = '\\d(?=(\\d{' + (x) + '})+' + (step > -1 ? '\\.' : '$') + ')';
+        return n.replace(new RegExp(re, 'g'), '$&,');
+      }
+      return n
+    },
+    removeSplit(n) {
+      return parseFloat(this.$helper.replacer(n.toString(), ',', ''))
+    },
     emit() {
       if (this.number === '' || this.number === null) {
         this.number = undefined
-        this.$emit('update:modelValue', d)
+        this.$emit('update:modelValue', this.number)
         return
       }
-      let d = this.number
+      let d = this.removeSplit(this.number)
       if (this.max !== undefined && d > this.max) {
         d = this.max
       }
@@ -68,13 +83,11 @@ export default {
         d = this.min
       }
       const n = ((1 / this.step) + '').length - 1
-      this.number = parseFloat(d.toFixed(n))
-      this.$emit('update:modelValue', this.number)
-
+      this.number = this.setSplit(d.toFixed(n))
+      this.$emit('update:modelValue', this.removeSplit(this.number))
     },
     plus() {
       let n = this.modelValue || 0
-
       this.number = n + this.step
       this.emit()
     },

package/components/form/password.vue

@@ -1,129 +1,129 @@
 <template>
-    <div :class="$r.prefix+'password'" >
-        <r-input v-bind="$attrs"
-                 :active="active"
-                 :model-value="modelValue"
-                 @click.prevent="handleClick"
-                 :error="errorState"
-                 :preIcon="show?$r.icons.eye_off:$r.icons.eye"
-                 ltr
-                 @preIcon="show=!show"
-        >
-            <input :autofocus="autofocus"
-                   :type="show?'text':'password'"
-                   class="pb-0"
-                   @focusin="active=true"
-                   @focusout="active=false"
-                   @input="emit"
-                   autocomplete="no"
-                   ref="input"
-                   v-model="lazyValue"
-            />
-        </r-input>
-        <template v-if="!hideLine">
-        <div :class="{'color-success-text':hasLength,'color-error-text':!hasLength}">
-            <r-icon v-if="hasLength" exact v-html="$r.icons.check"></r-icon>
-            <r-icon v-else v-html="$r.icons.close"></r-icon>
-            {{$t(['min_length_password',[minLength]])}}
-        </div>
-        <div v-if="lowerCase" :class="{'color-success-text':hasLowerCase,'color-error-text':!hasLowerCase}">
-            <r-icon v-if="hasLowerCase" exact v-html="$r.icons.check"></r-icon>
-            <r-icon v-else v-html="$r.icons.close"></r-icon>
-            {{$t('lower_case_password')}}
-        </div>
-        <div v-if="number" :class="{'color-success-text':hasNumber,'color-error-text':!hasNumber}">
-            <r-icon v-if="hasNumber" exact v-html="$r.icons.check"></r-icon>
-            <r-icon v-else v-html="$r.icons.close"></r-icon>
-            {{$t('number_password')}}
-        </div>
-        <div v-if="upperCase" :class="{'color-success-text':hasUpperCase,'color-error-text':!hasUpperCase}">
-            <r-icon v-if="hasUpperCase" exact v-html="$r.icons.check"></r-icon>
-            <r-icon v-else v-html="$r.icons.close"></r-icon>
-            {{$t('upper_case_password')}}
-        </div>
-        <div v-if="specialChar" :class="{'color-success-text':hasSpecialChar,'color-error-text':!hasSpecialChar}">
-            <r-icon v-if="hasSpecialChar" exact v-html="$r.icons.check"></r-icon>
-            <r-icon v-else v-html="$r.icons.close"></r-icon>
-            {{$t('special_char_password')}}
-        </div>
-            </template>
-    </div>
+  <div :class="$r.prefix+'password'">
+    <r-input v-bind="$attrs"
+             :active="active"
+             :model-value="modelValue"
+             @click.prevent="handleClick"
+             :error="errorState"
+             :preIcon="show?$r.icons.eye_off:$r.icons.eye"
+             ltr
+             @preIcon="show=!show"
+    >
+      <input :autofocus="autofocus"
+             :type="show?'text':'password'"
+             class="pb-0"
+             @focusin="active=true"
+             @focusout="active=false"
+             @input="emit"
+             autocomplete="no"
+             ref="input"
+             v-model="lazyValue"
+      />
+    </r-input>
+    <template v-if="!hideLine">
+      <div :class="{'color-success-text':hasLength,'color-error-text':!hasLength}">
+        <r-icon v-if="hasLength" exact v-html="$r.icons.check"></r-icon>
+        <r-icon v-else v-html="$r.icons.close"></r-icon>
+        {{ $t(['min_length_password', [minLength]]) }}
+      </div>
+      <div v-if="lowerCase" :class="{'color-success-text':hasLowerCase,'color-error-text':!hasLowerCase}">
+        <r-icon v-if="hasLowerCase" exact v-html="$r.icons.check"></r-icon>
+        <r-icon v-else v-html="$r.icons.close"></r-icon>
+        {{ $t('lower_case_password') }}
+      </div>
+      <div v-if="number" :class="{'color-success-text':hasNumber,'color-error-text':!hasNumber}">
+        <r-icon v-if="hasNumber" exact v-html="$r.icons.check"></r-icon>
+        <r-icon v-else v-html="$r.icons.close"></r-icon>
+        {{ $t('number_password') }}
+      </div>
+      <div v-if="upperCase" :class="{'color-success-text':hasUpperCase,'color-error-text':!hasUpperCase}">
+        <r-icon v-if="hasUpperCase" exact v-html="$r.icons.check"></r-icon>
+        <r-icon v-else v-html="$r.icons.close"></r-icon>
+        {{ $t('upper_case_password') }}
+      </div>
+      <div v-if="specialChar" :class="{'color-success-text':hasSpecialChar,'color-error-text':!hasSpecialChar}">
+        <r-icon v-if="hasSpecialChar" exact v-html="$r.icons.check"></r-icon>
+        <r-icon v-else v-html="$r.icons.close"></r-icon>
+        {{ $t('special_char_password') }}
+      </div>
+    </template>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'r-password',
-        props: {
-            modelValue: [String, Number],
-            hideLine: Boolean,
-            autofocus: Boolean,
-            lowerCase: {type:Boolean,default:true},
-            upperCase: Boolean,
-            specialChar: Boolean,
-            number: Boolean,
-            minLength: {type:Number,default:8},
-        },
-
-        data() {
-            return {
-                lazyValue: this.modelValue,
-                show: false,
-                active: false,
-                p: 0,
-                errorState: false
-            }
-        },
-        computed: {
-            hasLength(){
-                if(!this.lazyValue){
-                    return false
-                }
-                return this.lazyValue.length>=this.minLength
-            },
-            hasUpperCase(){
-                return new RegExp("^(?=.*[A-Z])").test(this.lazyValue)
-            },
-            hasNumber(){
-                return new RegExp("^(?=.*[0-9])").test(this.lazyValue)
-            },
-            hasLowerCase(){
-                return new RegExp("^(?=.*[a-z])").test(this.lazyValue)
-            },
-            hasSpecialChar(){
-                return new RegExp("^(?=.*[!@#\$%\^&\*])").test(this.lazyValue)
-            }
-        },
+export default {
+  name: 'r-password',
+  props: {
+    modelValue: [String, Number],
+    hideLine: Boolean,
+    autofocus: Boolean,
+    lowerCase: {type: Boolean, default: true},
+    upperCase: Boolean,
+    specialChar: Boolean,
+    number: Boolean,
+    minLength: {type: Number, default: 8},
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      lazyValue: this.modelValue,
+      show: false,
+      active: false,
+      p: 0,
+      errorState: false
+    }
+  },
+  computed: {
+    hasLength() {
+      if (!this.lazyValue) {
+        return false
+      }
+      return this.lazyValue.length >= this.minLength
+    },
+    hasUpperCase() {
+      return new RegExp("^(?=.*[A-Z])").test(this.lazyValue)
+    },
+    hasNumber() {
+      return new RegExp("^(?=.*[0-9])").test(this.lazyValue)
+    },
+    hasLowerCase() {
+      return new RegExp("^(?=.*[a-z])").test(this.lazyValue)
+    },
+    hasSpecialChar() {
+      return new RegExp("^(?=.*[!@#\$%\^&\*])").test(this.lazyValue)
+    }
+  },
 
-        methods: {
-            check() {
-                if (!this.hasLength) {
-                    this.errorState = true
-                }
-                if (this.lowerCase&&!this.hasLowerCase) {
-                    this.errorState = true
-                }
-                if (this.number&&!this.hasNumber) {
-                    this.errorState = true
-                }
-                if (this.upperCase&&!this.hasUpperCase) {
-                    this.errorState = true
-                }
-                if (this.specialChar&&!this.hasSpecialChar) {
-                    this.errorState = true
-                }
+  methods: {
+    check() {
+      if (!this.hasLength) {
+        this.errorState = true
+      }
+      if (this.lowerCase && !this.hasLowerCase) {
+        this.errorState = true
+      }
+      if (this.number && !this.hasNumber) {
+        this.errorState = true
+      }
+      if (this.upperCase && !this.hasUpperCase) {
+        this.errorState = true
+      }
+      if (this.specialChar && !this.hasSpecialChar) {
+        this.errorState = true
+      }
 
-            },
-            handleClick(e) {
-                this.$refs.input.focus()
-            },
-            emit() {
-                this.$emit('update:modelValue', this.lazyValue)
-                this.errorState = false
-                this.msg = null
-                if (this.lazyValue&& !this.hideLine) {
-                    this.check()
-                }
-            }
-        }
+    },
+    handleClick(e) {
+      this.$refs.input.focus()
+    },
+    emit() {
+      this.$emit('update:modelValue', this.lazyValue)
+      this.errorState = false
+      this.msg = null
+      if (this.lazyValue && !this.hideLine) {
+        this.check()
+      }
     }
+  }
+}
 
 </script>

package/components/form/radioInput.vue

@@ -34,6 +34,7 @@ export default {
     translate: Boolean,
     modelValue: [String, Number, Object]
   },
+  emits:['update:modelValue'],
   computed: {
     current() {
       if (!this.modelValue) {

package/components/form/range.vue

@@ -77,6 +77,7 @@ export default {
     isRange: Boolean
 
   },
+  emits:['update:modelValue'],
   data() {
     return {
       width: 0,
@@ -94,7 +95,7 @@ export default {
     this.width = this.$refs.range.getBoundingClientRect().width - 10
     this.preValue = this.min
     if (this.isRange && !this.modelValue) {
-      this.$emit('update:modelValue', [this.min, this.max])
+      this.$emit('update:modelValue', [])
       const r = this.$r.rtl ? -1 : 1
       this.x2 = this.width * r
       this.prePosition2 = this.width * r
@@ -241,6 +242,18 @@ export default {
       height: 10px;
       border-radius: 50%;
       cursor: grabbing;
+
+      &:hover {
+        width: 16px;
+        height: 16px;
+        @include rtl() {
+          transform: translate(2px, -2px);
+        }
+        @include ltr() {
+          transform: translate(-2px, -2px);
+        }
+        border: 3px solid var(--color-two) !important;
+      }
     }
 
     .dot-tooltip {
@@ -292,6 +305,18 @@ export default {
       border-radius: 50%;
       margin-top: -3px;
       cursor: grabbing;
+
+      &:hover {
+        width: 16px;
+        height: 16px;
+        @include rtl() {
+          transform: translate(2px, -2px);
+        }
+        @include ltr {
+          transform: translate(-2px, -2px);
+        }
+        border: 3px solid var(--color-two) !important;
+      }
     }
 
     .dot-tooltip {