renusify 1.1.0 → 1.1.2

package/components/avatar/index.vue

@@ -1,15 +1,15 @@
 <template>
-    <div :class="`${$r.prefix}avatar ${!flat?'elevation-'+elevation:''} ${tile?'avatar-tile':''}`"
+    <div :class="`${$r.prefix}avatar ${tile?'avatar-tile':''}`"
          :style="`height:${size}px;width:${size}px;`">
-        <div class="avatar-content" :key="k">
-            <slot></slot>
-        </div>
-        <r-btn :loading="loading" v-if="editable" @click.prevent.stop="pickFile" icon class="avatar-edit color-info">
-            <r-icon v-html="$r.icons.camera"></r-icon>
-        </r-btn>
-        <input v-if="editable" accept="image/*"
-               @change="addFile()"
-               ref="file"
+      <div class="avatar-content" :class="`${!flat?'elevation-'+elevation:''}`" :key="k">
+        <slot></slot>
+      </div>
+      <r-btn :loading="loading" v-if="editable" @click.prevent.stop="pickFile" icon class="avatar-edit color-info">
+        <r-icon v-html="$r.icons.camera"></r-icon>
+      </r-btn>
+      <input v-if="editable" accept="image/*"
+             @change="addFile()"
+             ref="file"
                class="d-none"
                type="file"
         >

package/components/button/style.scss

@@ -72,7 +72,8 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   }
 
   &:not(.btn-text):not(.btn-outlined) {
-    background-color: var(--color-sheet)
+    background-color: var(--color-sheet);
+    color: var(--color-text-primary)
   }
 
   &.btn-outlined.btn-text {

package/components/calendar/index.vue

@@ -255,7 +255,9 @@ export default {
       this.direction = currentDate !== oldDate
           ? (currentDate > oldDate ? 'next' : 'prev')
           : undefined
-      this.$emit('change', this.rangeLocalDate)
+      setTimeout(() => {
+        this.$emit('change', this.rangeLocalDate)
+      }, 10)
     }
   },
   methods: {

package/components/chip/index.vue

@@ -37,7 +37,7 @@ export default {
   },
   computed: {
     classes () {
-      let c = this.$r.prefix+'chip px-3 chip-size-' + this.size
+      let c = this.$r.prefix + 'chip chip-size-' + this.size
       if (this.selectable) {
         c += ' chip-selectable'
       }

package/components/chip/style.scss

@@ -47,7 +47,7 @@ $icon-sizes: (
   display: inline-flex;
   line-height: 20px;
   outline: none;
-  padding: 0;
+  padding: 0 12px;
   position: relative;
   text-decoration: none;
   transition-duration: $chip-transition-duration;

package/components/content/index.vue

@@ -2,20 +2,60 @@
   <main :class="{[$r.prefix+'content']:true,
   'flipped':flipped,
   'moved':moved,
-  'below-header':belowHeader}">
+  'below-header':belowHeader}" :style="{'--belowHeader':belowHeader}">
     <slot></slot>
   </main>
 </template>
 
 <script>
-import './style.scss'
 
 export default {
   name: 'r-content',
   props: {
-    belowHeader: Boolean,
+    belowHeader: String,
     flipped: Boolean,
     moved: Boolean
   }
 }
 </script>
+
+<style lang="scss">
+@import '../../style/_include';
+
+.#{$prefix}content {
+  --belowHeader: #{$toolbar-height};
+  width: 100%;
+  max-width: 100%;
+  transition: 0.2s map-get($transition, 'fast-out-slow-in');
+  position: relative;
+  @include firefox() {
+    @media print {
+      display: block
+    }
+  }
+
+  &.flipped {
+    @include rtl() {
+      padding-right: $navbar-width;
+    }
+    @include ltr() {
+      padding-left: $navbar-width;
+    }
+  }
+
+  &.moved {
+    width: calc(100% + #{$navbar-width});
+    @include rtl() {
+      margin-right: $navbar-width;
+    }
+    @include ltr() {
+      margin-left: $navbar-width;
+    }
+  }
+
+  &.below-header {
+    margin-top: var(--belowHeader);
+  }
+
+}
+</style>

package/components/form/fileUploader/single.vue

@@ -104,7 +104,7 @@ export default {
       is = image[0] === 'image'
       if (!is) {
         const p = this.fileLink.split('.')
-        is = ['jpg', 'jpeg', 'png', 'gif'].includes(p[p.length - 1])
+        is = ['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(p[p.length - 1])
       }
       return is
     },

package/components/form/input.vue

@@ -2,18 +2,18 @@
   <div
       :class="{
         [`${$r.prefix}input-container`]:true,
-        [color]:color&&!isDisabled,
+        [c_color]:c_color&&!isDisabled,
         'color-error-text':hasError&&genMessages.length>0,
-        'hide-detail':hide,
+        'hide-detail':c_hide,
         'input-focused':active,
         'input-disabled':isDisabled,
-        'input-ltr':ltr
+        'input-ltr':c_ltr
          }"
   >
-    <div ref="input" :class="[inputControlClass,{'input-tile':tile,'ps-8':preIcon}]" class="input-control">
+    <div ref="input" :class="[c_inputControlClass,{'input-tile':c_tile,'ps-8':preIcon}]" class="input-control">
       <label :for="computedId" class="label"
              v-if="label"
-             :class="[labelControlClass,
+             :class="[c_labelControlClass,
                    {'label-active':labelActive,
                    'ms-5':((preIcon&&!labelActive&&!active))
                    }]"
@@ -28,7 +28,7 @@
          :class="{
             'massage-active':genMessages.length>0,
         }">
-      <div :class="{'animation-shake-3':msgShake}">{{ genMessages[0] }}</div>
+      <div :class="{'animation-shake-3':c_msgShake}">{{ genMessages[0] }}</div>
 
     </div>
   </div>
@@ -50,24 +50,23 @@ export default {
     msg: String,
     labelControlClass: [String, Object, Array],
     inputControlClass: [String, Object, Array],
-    color: {type: String, default: 'color-one-text'},
+    color: String,
     label: String,
     modelValue: [String, Boolean, Number, Array, Object],
     active: Boolean,
-    hide: Boolean,
-    tile: Boolean,
+    hide: {type: Boolean, default: undefined},
+    tile: {type: Boolean, default: undefined},
     disabled: Boolean,
     readonly: Boolean,
     error: Boolean,
-    ltr: Boolean,
-    msgShake: {type: Boolean, default: true},
+    ltr: {type: Boolean, default: undefined},
+    msgShake: {type: Boolean, default: undefined},
     rules: {
       type: [Array, Function],
       default: () => []
     },
-    validateOnBlur: Boolean
+    validateOnBlur: {type: Boolean, default: undefined}
   },
-
   data() {
     return {
       uid: 'input_' + this.$helper.uniqueId(),
@@ -94,7 +93,6 @@ export default {
   created() {
     this.form && this.form.register(this)
   },
-
   beforeUnmount() {
     this.form && this.form.unregister(this)
   },
@@ -123,16 +121,13 @@ export default {
     hasMessages() {
       return this.validationTarget.length > 0
     },
-
     shouldValidate() {
       if (this.isResetting) return false
-      return this.validateOnBlur ? this.hasFocused && !this.isFocused : this.hasInput || this.hasFocused
+      return this.c_validateOnBlur ? this.hasFocused && !this.isFocused : this.hasInput || this.hasFocused
     },
-
     validations() {
       return this.validationTarget.slice(0, 1)
     },
-
     validationTarget() {
       if (this.shouldValidate) {
         return this.errorBucket
@@ -140,6 +135,54 @@ export default {
     },
     labelActive() {
       return (this.lazyValue !== undefined && this.lazyValue !== '' && this.lazyValue !== null)
+    },
+    c_labelControlClass() {
+      if (this.labelControlClass === undefined && this.$r.inputs.labelControlClass) {
+        return this.$r.inputs.labelControlClass
+      }
+      return this.labelControlClass
+    },
+    c_inputControlClass() {
+      if (this.inputControlClass === undefined && this.$r.inputs.inputControlClass) {
+        return this.$r.inputs.inputControlClass
+      }
+      return this.inputControlClass
+    },
+    c_color() {
+      if (this.color === undefined && this.$r.inputs.color) {
+        return this.$r.inputs.color
+      }
+      return this.color || 'color-one-text'
+    },
+    c_hide() {
+      if (this.hide === undefined && this.$r.inputs.hide) {
+        return this.$r.inputs.hide
+      }
+      return this.hide
+    },
+    c_tile() {
+      if (this.tile === undefined && this.$r.inputs.tile) {
+        return this.$r.inputs.tile
+      }
+      return this.tile
+    },
+    c_ltr() {
+      if (this.ltr === undefined && this.$r.inputs.ltr) {
+        return this.$r.inputs.ltr
+      }
+      return this.ltr
+    },
+    c_msgShake() {
+      if (this.msgShake === undefined && this.$r.inputs.msgShake) {
+        return this.$r.inputs.msgShake
+      }
+      return this.msgShake === undefined ? true : this.msgShake
+    },
+    c_validateOnBlur() {
+      if (this.validateOnBlur === undefined && this.$r.inputs.validateOnBlur) {
+        return this.$r.inputs.validateOnBlur
+      }
+      return this.validateOnBlur
     }
   },
   watch: {
@@ -157,7 +200,7 @@ export default {
       // if disabled
       if (!val && !this.isDisabled) {
         this.hasFocused = true
-        this.validateOnBlur && this.validate()
+        this.c_validateOnBlur && this.validate()
       }
     },
 

package/components/form/select.vue

@@ -12,6 +12,7 @@
             :close="multiple&&!textChip"
             :key="key"
             :text="textChip || !multiple"
+            :class="{'px-0':!multiple}"
             @update:modelValue="handleChip($event,key)"
             selectable
             v-for="(item,key) in chips">

package/components/form/timepicker/index.vue

@@ -25,6 +25,7 @@
       <r-card class="pt-3">
         <timepicker
             class="mb-2 mx-3"
+            :disableTime="disableTime"
             :is24-hour="is24Hour"
             :withSec="withSec"
             v-model="lazyValue"
@@ -57,6 +58,11 @@ export default {
   name: "r-time-picker",
   components: {Timepicker},
   props: {
+    disableTime: {
+      type: Function, default: () => {
+        return false
+      }
+    },
     withSec: Boolean,
     is24Hour: {type: Boolean, default: true},
     noOverlay: Boolean,

package/components/form/timepicker/range.vue

@@ -0,0 +1,166 @@
+<template>
+  <div :class="`${$r.prefix}timepicker-range`">
+    <r-input
+        v-bind="$attrs"
+        :active="active"
+        :model-value="lazyValue[1]"
+        @click.prevent="show_modal = true"
+    >
+      <input
+          type="text"
+          @focusin="active = true"
+          @focusout="active = false"
+          autocomplete="no"
+          ref="input"
+          :value="strVal"
+      />
+    </r-input>
+    <r-modal
+        class="modal-timepicker"
+        v-model="show_modal"
+        :closebtn="false"
+        :no-overlay="noOverlay"
+    >
+      <r-card class="pt-3">
+        <div class="px-2 title">
+          <span>{{ $t('from', 'renusify') }}: </span>
+          <span v-if="lazyValue[0]">{{ lazyValue[0] }} - </span>
+          <span>{{ $t('to', 'renusify') }}: </span>
+          <span v-if="lazyValue[1]">{{ lazyValue[1] }}</span>
+        </div>
+        <timepicker
+            v-if="state==='from'"
+            class="mb-2 mx-3"
+            is24Hour
+            :withSec="withSec"
+            v-model="lazyValue[0]"
+        ></timepicker>
+        <timepicker
+            v-if="state==='to'"
+            class="mb-2 mx-3"
+            is24Hour
+            :withSec="withSec"
+            :disableTime="disableTime"
+            v-model="lazyValue[1]"
+        ></timepicker>
+        <r-btn
+            class="color-success-text ml-7 mr-9 mb-3 mt-3"
+            outlined
+            @click="accept"
+        >
+          {{ $t('accept', 'renusify') }}
+        </r-btn
+        >
+        <r-btn
+            class="color-warning-text mr-7 ml-4 mb-3 mt-3"
+            outlined
+            @click="(show_modal = false), (lazyValue = []),emit()"
+        >
+          {{ $t('cancel', 'renusify') }}
+        </r-btn
+        >
+      </r-card>
+    </r-modal>
+  </div>
+</template>
+
+<script>
+import Timepicker from "./timepicker";
+
+export default {
+  name: "r-time-picker-range",
+  components: {Timepicker},
+  props: {
+    withSec: Boolean,
+    noOverlay: Boolean,
+    modelValue: Array
+  },
+  data() {
+    return {
+      state: 'from',
+      active: false,
+      show_modal: false,
+      lazyValue: this.modelValue || []
+    };
+  },
+  watch: {
+    modelValue: function () {
+      this.lazyValue = this.modelValue
+    }
+  },
+  computed: {
+    strVal() {
+      if (this.lazyValue.length > 0) {
+        return this.lazyValue[0] + ' - ' + this.lazyValue[1]
+      }
+      return ''
+    },
+    fromH() {
+      if (!this.lazyValue[0]) {
+        return 0
+      }
+      return this.lazyValue[0].split(':')[0]
+    },
+    fromM() {
+      if (!this.lazyValue[0]) {
+        return 0
+      }
+      return this.lazyValue[0].split(':')[1]
+    },
+    fromS() {
+      if (!this.lazyValue[0]) {
+        return 0
+      }
+      return this.lazyValue[0].split(':')[2]
+    }
+  },
+  methods: {
+    disableTime(n, t, h, m) {
+      if (t === 'hours24' && n < this.fromH && n > 0) {
+        return true
+      }
+
+      if (t === 'mins' && h.toString() === this.fromH && (this.withSec ? n < this.fromM : n <= this.fromM)) {
+        return true
+      }
+
+      if (this.withSec) {
+        if (t === 'seconds' && h.toString() === this.fromH && m.toString() === this.fromM && n <= this.fromS) {
+          return true
+        }
+      }
+    },
+    str2int(s) {
+      if (!s) {
+        return 0
+      }
+      return parseInt(this.$helper.replacer(s, ':', ''))
+    },
+    accept() {
+      if (this.state === 'to') {
+        if (this.lazyValue.length === 2 && this.str2int(this.lazyValue[0]) < this.str2int(this.lazyValue[1])) {
+          this.state = 'from'
+          this.show_modal = false
+          this.emit()
+        } else {
+          console.error(`from:${this.str2int(this.lazyValue[0])} > to:${this.str2int(this.lazyValue[1])}`)
+        }
+      } else {
+        this.state = 'to'
+      }
+
+    },
+    emit() {
+      this.$emit("update:model-value", this.lazyValue);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.modal-timepicker {
+  .modal-mini {
+    max-width: 285px !important;
+  }
+}
+</style>