renusify 1.1.5 → 1.2.1

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,

package/components/form/rating.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script>
-import './scss/rating.scss'
 
 export default {
   name: 'r-rating',
@@ -32,6 +31,7 @@ export default {
     modelValue: Number,
     readonly: Boolean
   },
+  emits:['update:modelValue'],
   created(){
     if(!this.$r.icons.star) {
       this.$r.icons.star = '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21L12 17.27Z"/></svg>'
@@ -44,3 +44,15 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+@import "../../style/include";
+
+
+.#{$prefix}rating {
+  max-width: 100%;
+  white-space: nowrap;
+  transition: 1s $primary-transition;
+  color: var(--color-text-disabled);
+}
+
+</style>

package/components/form/select.vue

@@ -72,7 +72,6 @@
   </div>
 </template>
 <script>
-import './scss/select.scss'
 
 export default {
   name: 'r-select',
@@ -104,6 +103,7 @@ export default {
     firstSelect: Boolean,
     headers: Object
   },
+  emits:['update:modelValue','del'],
   data() {
     return {
       apiData: [],
@@ -225,6 +225,7 @@ export default {
     handleClick() {
       if (this.$refs.input) {
         this.$refs.input.focus()
+        this.$refs.input.scrollIntoView()
       } else {
         this.focusInput(true)
       }
@@ -270,7 +271,7 @@ export default {
         val = null
       }
 
-      this.$emit('update:model-value', val)
+      this.$emit('update:modelValue', val)
 
     },
     focusInput(val) {
@@ -306,3 +307,61 @@ export default {
 }
 
 </script>
+<style lang="scss">
+@import "../../style/include";
+$min-height:40px;
+.#{$prefix}select-container {
+  position: relative;
+  .input-control {
+    min-height: $min-height;
+    height: auto;
+    flex-direction: row;
+    align-items: center;
+    display: flex;
+    flex: 1 1;
+    flex-wrap: wrap;
+    line-height: 24px;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .select-wrap {
+    max-width: 100%;
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+  }
+
+  input {
+    flex: 1 1;
+    margin-top: 0;
+    min-width: 140px;
+    position: relative;
+  }
+
+  .#{$prefix}chip {
+    flex: 0 1 auto;
+    margin: 4px;
+  }
+
+  .card-select {
+    max-height: 0;
+    overflow: auto;
+    opacity: .5;
+    transition: all .3s $primary-transition;
+    position: absolute;
+    left: 0;
+    z-index: map_get($z-index, 'default');
+  }
+  .to-top{
+    bottom: $min-height+2px;
+  }
+
+  .card-select-active {
+    transition: all 0.3s $primary-transition;
+    max-height: 300px;
+    opacity: 1;
+  }
+}
+
+</style>

package/components/form/switch.vue

@@ -20,7 +20,6 @@
     </r-input>
 </template>
 <script>
-    import './scss/switch.scss'
 
     export default {
         name: 'r-switch',
@@ -32,7 +31,7 @@
                 type: [Boolean, String]
             }
         },
-
+emits:['update:modelValue','change'],
         data() {
             return {
                 lazyValue: this.modelValue || false
@@ -62,3 +61,66 @@
     }
 
 </script>
+<style lang="scss">
+@import "renusify/style/_include.scss";
+
+.#{$prefix}switch {
+
+  .switch-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 30px;
+  }
+
+  .switch-holder {
+    width: 45px;
+    height: 13px;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .switch-line {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    background-color: var(--color-disabled);
+  }
+
+  .switch-dot {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #cdcbcb;
+    transition: .3s map_get($transition,'fast-in-fast-out');
+    @include rtl() {
+      right: 0;
+    }
+    @include ltr() {
+      left: 0;
+    }
+  }
+
+  .switch-active {
+    .switch-line {
+      background-color: currentColor;
+      opacity: 0.5;
+    }
+
+    .switch-dot {
+      background-color: currentColor;
+      @include rtl() {
+        right: 25px;
+      }
+      @include ltr() {
+        left: 25px;
+      }
+    }
+  }
+
+}
+</style>

package/components/form/text-area.vue

@@ -31,7 +31,7 @@ export default {
       default: '7'
     }
   },
-
+emits:['update:modelValue'],
   data() {
     return {
       lazyValue: this.modelValue,

package/components/form/text-editor/index.vue

@@ -37,6 +37,8 @@
                 <r-select-input :label="$t('class','renusify')" :model-value="[...selectElm.classList]"
                                 multiple
                                 tags
+                                disableSearch
+                                justValue
                                 @update:model-value="addClass"></r-select-input>
             </r-col>
             <r-col class="col-12 ltr">
@@ -183,9 +185,9 @@
 </template>
 
 <script>
-    import './style.scss'
+import './style.scss'
 
-    export default {
+export default {
         name: 'r-text-editor',
         inheritAttrs: false,
         props: {
@@ -200,6 +202,7 @@
           },
           headers: Object
         },
+      emits:['update:modelValue'],
         data() {
             return {
               id: 'text_editor_' + this.$helper.uniqueId(12),

package/components/form/text-input.vue

@@ -25,7 +25,7 @@ export default {
     modelValue: [String, Number],
     autofocus: Boolean,
   },
-
+emits:['update:modelValue'],
   data () {
     return {
       lazyValue: this.modelValue,

package/components/form/timepicker/index.vue

@@ -68,6 +68,7 @@ export default {
     noOverlay: Boolean,
     modelValue: String
   },
+  emits:['update:modelValue'],
   data() {
     return {
       active: false,
@@ -82,7 +83,7 @@ export default {
   },
   methods: {
     emit() {
-      this.$emit("update:model-value", this.lazyValue);
+      this.$emit("update:modelValue", this.lazyValue);
     }
   }
 };

package/components/form/timepicker/range.vue

@@ -75,6 +75,7 @@ export default {
     noOverlay: Boolean,
     modelValue: Array
   },
+  emits:['update:modelValue'],
   data() {
     return {
       state: 'from',
@@ -151,7 +152,7 @@ export default {
 
     },
     emit() {
-      this.$emit("update:model-value", this.lazyValue);
+      this.$emit("update:modelValue", this.lazyValue);
     }
   }
 };

package/components/form/timepicker/timepicker.vue

@@ -89,6 +89,7 @@ export default {
     is24Hour: Boolean,
     modelValue: String
   },
+  emits:['update:modelValue','finish'],
   data() {
     return {
       show: this.is24Hour ? "hours24" : "hours12",
@@ -307,7 +308,7 @@ export default {
       if (!this.is24Hour) {
         n += " " + this.meridiem;
       }
-      this.$emit("update:model-value", n);
+      this.$emit("update:modelValue", n);
       if ((min !== null && !this.withSec) || sec !== null) {
         this.$emit("finish", true);
       }

package/components/form/unique/index.vue

@@ -24,6 +24,7 @@ export default {
     },
     headers: Object
   },
+  emits:['update:modelValue'],
   data() {
     return {
       item: null,

package/components/form/unit-input.vue

@@ -18,6 +18,7 @@
       <r-select-input :readonly="disableUnit" :items="units" v-model="unit"
                       @update:model-value="emit" hide justValue :translate="translate"
                       class="mt-0"
+                      disableSearch
                       firstSelect></r-select-input>
     </div>
   </r-input>
@@ -47,7 +48,7 @@ export default {
     autofocus: Boolean,
     translate: Boolean
   },
-
+emits:['update:modelValue'],
   data() {
     return {
       lazyValue: this.modelValue.value,

package/components/formCreator/index.vue

@@ -1,7 +1,6 @@
 <template>
   <r-card v-if="!autoSend" class="overflow-auto">
     <r-container>
-      <r-message :items="errors" type="error"></r-message>
       <h1 class="title">{{ title }}</h1>
       <r-form ref="form" v-model="valid" @submit.prevent="save">
         <r-row>
@@ -16,7 +15,8 @@
             </r-col>
           </template>
         </r-row>
-        <r-row class="h-end my-12">
+        <r-message :items="errors" type="error"></r-message>
+        <div class="text-end my-12">
           <r-btn @click.prevent="close"
                  class="color-error-text mx-1"
                  outlined
@@ -29,7 +29,7 @@
               rounded>
             {{ $t('send', 'renusify') }}
           </r-btn>
-        </r-row>
+        </div>
       </r-form>
     </r-container>
   </r-card>
@@ -67,6 +67,7 @@ export default {
     },
     headers: Object
   },
+  emits:['update:modelValue','ok'],
   data() {
     return {
       loading: false,
@@ -92,7 +93,7 @@ export default {
     editedItem: {
       deep: true,
       handler: function (n) {
-        this.$emit('update:model-value', n)
+        this.$emit('update:modelValue', n)
       }
     }
   },

package/components/html2pdf/index.vue

@@ -60,6 +60,7 @@
             beforeClass: String,
             afterClass: String
         },
+      emits:['progress','has-downloaded','before-download'],
         data() {
             return {
                 show: true,