renusify 1.0.6 → 1.0.9

package/components/form/timepicker/timepicker.vue

@@ -482,23 +482,18 @@
     @import "../../../style/include";
 
     .#{$prefix}timepicker-clock {
-        @include light() {
-            --color-timepicker: var(--color-one-light);
-        }
-
-        @include dark() {
-            --color-timepicker: var(--color-one-dark);
-        }
 
-        .text-time {
-            display: flex;
-            justify-content: center;
-            align-content: center;
-            margin-top: 40px;
-            width: 260px;
-            height: 60px;
-            color: #818181;
-            font-size: 30px;
+      --color-timepicker: var(--color-one);
+
+      .text-time {
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        margin-top: 40px;
+        width: 260px;
+        height: 60px;
+        color: #818181;
+        font-size: 30px;
         }
 
         .text-time > .time-show {

package/components/form/unit-input.vue

@@ -1,121 +1,118 @@
 <template>
-    <r-input :class="`${$r.prefix}unit-input`" :active="active"
-             :model-value="lazyValue"
-             @click.prevent="handleClick">
-        <input :autofocus="autofocus"
-               :type="type"
-               @focusin="active=true"
-               @focusout="active=false"
-               @input="emit"
-               autocomplete="no"
-               ref="input"
-               v-model="lazyValue"
-               :readonly="disableInput"
-               :class="{'input-shadow':disableInput}"
-               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>
-      </div>
-    </r-input>
+  <r-input :class="`${$r.prefix}unit-input`" :active="active"
+           :model-value="lazyValue"
+           @click.prevent="handleClick">
+    <input :autofocus="autofocus"
+           :type="type"
+           @focusin="active=true"
+           @focusout="active=false"
+           @input="emit"
+           autocomplete="no"
+           ref="input"
+           v-model="lazyValue"
+           :readonly="disableInput"
+           :class="{'input-shadow':disableInput}"
+           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>
+    </div>
+  </r-input>
 </template>
 <script>
-    export default {
-        name: 'r-unit-input',
-        props: {
-            type: {
-                type: String,
-                default: 'text'
-            },
-            units: {
-                type: Array,
-              required: true
-            },
-          modelValue: {
-            type: Object, default: () => {
-              return {
-                value: null,
-                unit: null
-              }
-            }
-          },
-          disableInput: Boolean,
-          disableUnit: Boolean,
-          autofocus: Boolean,
-          translate: Boolean
-        },
-
-        data() {
-            return {
-                lazyValue: this.modelValue.value,
-                active: false,
-              unit: this.modelValue.unit
-            }
-        },
-        watch: {
-            modelValue() {
-              this.lazyValue = this.modelValue.value
-              this.unit = this.modelValue.unit
-            }
-        },
-        methods: {
-            handleClick(e) {
-                this.$refs.input.focus()
-            },
-            emit() {
-                this.$emit('update:modelValue', {value: this.lazyValue, unit: this.unit})
-            }
+export default {
+  name: 'r-unit-input',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    units: {
+      type: Array,
+      required: true
+    },
+    modelValue: {
+      type: Object, default: () => {
+        return {
+          value: null,
+          unit: null
         }
+      }
+    },
+    disableInput: Boolean,
+    disableUnit: Boolean,
+    autofocus: Boolean,
+    translate: Boolean
+  },
+
+  data() {
+    return {
+      lazyValue: this.modelValue.value,
+      active: false,
+      unit: this.modelValue.unit
+    }
+  },
+  watch: {
+    modelValue() {
+      this.lazyValue = this.modelValue.value
+      this.unit = this.modelValue.unit
+    }
+  },
+  methods: {
+    handleClick(e) {
+      this.$refs.input.focus()
+    },
+    emit() {
+      this.$emit('update:modelValue', {value: this.lazyValue, unit: this.unit})
     }
+  }
+}
 
 </script>
 <style lang="scss">
-    @import "../../style/include";
+@import "../../style/include";
 
-    .#{$prefix}unit-input {
-      .input-shadow, .input-shadow * {
-        color: var(--color-text-disabled-light) !important
-      }
+.#{$prefix}unit-input {
+  .input-shadow, .input-shadow * {
+    color: var(--color-text-disabled) !important
+  }
 
-      input {
-        width: calc(65% - 4px);
-      }
+  input {
+    width: calc(65% - 4px);
+  }
 
-      @include dark() {
-        --c-unit: var(--color-border-dark)
-      }
-      @include light() {
-        --c-unit: var(--color-border-light)
-      }
 
-      .select-unit {
-        width: calc(35% + 16px);
-        overflow-x: clip;
+  --c-unit: var(--color-border);
 
-        * {
-          font-size: map-metro-get($headings, 'overline', 'size') !important;
-        }
 
-        .input-control {
-          border-radius: 0;
-          @include rtl() {
-            border-right: 1px solid var(--c-unit) !important;
-          }
-
-          @include ltr() {
-            border-left: 1px solid var(--c-unit) !important;
-          }
-        }
+  .select-unit {
+    width: calc(35% + 16px);
+    overflow-x: clip;
 
+    * {
+      font-size: map-metro-get($headings, 'overline', 'size') !important;
+    }
 
-        .card-select {
-          border-top-right-radius: 0;
-          border-top-left-radius: 0;
+    .input-control {
+      border-radius: 0;
+      @include rtl() {
+        border-right: 1px solid var(--c-unit) !important;
+      }
 
-        }
+      @include ltr() {
+        border-left: 1px solid var(--c-unit) !important;
       }
     }
+
+
+    .card-select {
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
+
+    }
+  }
+}
 </style>

package/components/icon/style.scss

@@ -7,12 +7,8 @@
   &.icon-disabled {
     pointer-events: none;
     opacity: .6;
-    @include light() {
-      color: var(--color-disabled-light) !important
-    }
-    @include dark() {
-      color: var(--color-disabled-dark) !important
-    }
+    color: var(--color-disabled) !important
+
   }
 
   @include rtl() {

package/components/img/index.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="{
+  <div v-intersect[modifier]="check" :class="{
         [$r.prefix+'img']:true,
         'img-hoverZoom':hoverZoom,'img-hoverDark':hoverDark,'img-hoverTitle':hoverTitle}"
-         ref="rImg">
-        <div v-if="hoverTitle" class="title color-white-text img-title w-full"
-             :class="{
+       ref="rImg">
+    <div v-if="hoverTitle" class="title color-white-text img-title w-full"
+         :class="{
             'title-hs':titleHs,
             'title-hc':titleHc,
             'title-he':titleHe,
@@ -12,193 +12,210 @@
             'title-vc':titleVc,
             'title-ve':titleVe
         }"
-        >{{alt}}
-        </div>
-        <img v-if="load" ref="img" :src="link" :alt="alt" draggable="false" :width="size.width" :height="size.height"/>
+    >{{ alt }}
     </div>
+    <img v-if="load" ref="img" :src="link" :alt="alt" draggable="false" :width="size.width" :height="size.height"/>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'r-img',
-        props: {
-            src: {
-                type: String,
-                required: true
-            },
-            alt: {
-                type: String,
-                required: true
-            },
-            width: {
-                type: [String, Number]
-            },
-            height: {
-                type: [String, Number]
-            },
-            query: String,
-            autoSize: Boolean,
-            hoverZoom: Boolean,
-            hoverDark: Boolean,
-            hoverTitle: Boolean,
-            titleHs: Boolean,
-            titleHc: Boolean,
-            titleHe: Boolean,
-            titleVs: Boolean,
-            titleVc: Boolean,
-            titleVe: Boolean,
-            wPH: {
-                type: Number,
-                default: 1
-            },
-        },
-        data() {
-            return {
-                load: false,
-                time_id: null,
-                size:{width:0,height:0}
-            }
-        },
-        created() {
-            this.activate()
-        },
-        computed: {
-            link() {
-              let res = this.src
-              if (!(res.startsWith('/') || res.startsWith('http://') || res.startsWith('https://'))) {
-                res = '/' + res
-              }
-              if (this.src.search('[?]') === -1) {
-                res += '?'
-              }
-              if (this.query) {
-                res += this.query
-              }
-              if ((this.autoSize && this.size.width > 0) || this.width) {
-                res += `&w=${this.size.width}&h=${this.size.height}`
-              }
-              return res
-            }
-        },
-        methods: {
-            getSize() {
-                let res = {width: 0, height: 0}
-                if (this.width) {
-                    res["width"] = this.width
-                }
-                if (this.height) {
-                    res["height"] = this.height
-                }
-                if (res['width'] !== 0 && res['height'] === 0) {
-                    res['height'] = res['width'] / this.wPH
-                }
-                if (res['width'] === 0 && res['height'] !== 0) {
-                    res['width'] = res['height'] * this.wPH
-                }
-                if (res['width'] !== 0) {
-                    return this.size=res
-                }
-
-                if (this.$refs.rImg && this.$refs.rImg.parentElement && this.$refs.rImg.parentElement.clientWidth > 0) {
-                    let cs=window.getComputedStyle(this.$refs.rImg.parentElement)
-                    let paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
-                    let borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
-                    let w = parseFloat((parseFloat(cs.getPropertyValue('width'))-paddingX-borderX).toFixed(2));
-                    return this.size= {
-                        width: w,
-                        height: w / this.wPH
-                    }
-                }
-                return false
-
-            },
-            activate() {
-                this.getSize()
-                if (this.size.width!==0) {
-                    this.load = true
-                } else {
-                    clearTimeout(this.time_id)
-                    this.time_id=setTimeout(() => {
-                        this.activate()
-                    }, 100)
-                }
-
-            }
-        },
-        beforeUnmount(){
-            clearTimeout(this.time_id)
+export default {
+  name: 'r-img',
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+    alt: {
+      type: String,
+      required: true
+    },
+    lazy: {
+      type: String,
+      default: 'create',
+      validator: function (value) {
+        return ['no', 'create'].indexOf(value) !== -1
+      }
+    },
+    width: {
+      type: [String, Number]
+    },
+    height: {
+      type: [String, Number]
+    },
+    query: String,
+    autoSize: Boolean,
+    hoverZoom: Boolean,
+    hoverDark: Boolean,
+    hoverTitle: Boolean,
+    titleHs: Boolean,
+    titleHc: Boolean,
+    titleHe: Boolean,
+    titleVs: Boolean,
+    titleVc: Boolean,
+    titleVe: Boolean,
+    wPH: {
+      type: Number,
+      default: 1
+    },
+  },
+  data() {
+    return {
+      load: false,
+      view: false,
+      modifier: this.lazy !== 'no' ? 'once' : 'pre',
+      time_id: null,
+      size: {width: 0, height: 0}
+    }
+  },
+  created() {
+    this.activate()
+  },
+  computed: {
+    link() {
+      if (this.lazy !== 'no' && !this.view) {
+        return null
+      }
+      let res = this.src
+      if (!(res.startsWith('/') || res.startsWith('http://') || res.startsWith('https://'))) {
+        res = '/' + res
+      }
+      if (this.src.search('[?]') === -1) {
+        res += '?'
+      }
+      if (this.query) {
+        res += this.query
+      }
+      if ((this.autoSize && this.size.width > 0) || this.width) {
+        res += `&w=${this.size.width}&h=${this.size.height}`
+      }
+      return res
+    }
+  },
+  methods: {
+    check(isIntersecting) {
+      if (isIntersecting) {
+        this.view = true
+      }
+    },
+    getSize() {
+      let res = {width: 0, height: 0}
+      if (this.width) {
+        res["width"] = this.width
+      }
+      if (this.height) {
+        res["height"] = this.height
+      }
+      if (res['width'] !== 0 && res['height'] === 0) {
+        res['height'] = res['width'] / this.wPH
+      }
+      if (res['width'] === 0 && res['height'] !== 0) {
+        res['width'] = res['height'] * this.wPH
+      }
+      if (res['width'] !== 0) {
+        return this.size = res
+      }
+
+      if (this.$refs.rImg && this.$refs.rImg.parentElement && this.$refs.rImg.parentElement.clientWidth > 0) {
+        let cs = window.getComputedStyle(this.$refs.rImg.parentElement)
+        let paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+        let borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
+        let w = parseFloat((parseFloat(cs.getPropertyValue('width')) - paddingX - borderX).toFixed(2));
+        return this.size = {
+          width: w,
+          height: w / this.wPH
         }
+      }
+      return false
+
+    },
+    activate() {
+      this.getSize()
+      if (this.size.width !== 0) {
+        this.load = true
+      } else {
+        clearTimeout(this.time_id)
+        this.time_id = setTimeout(() => {
+          this.activate()
+        }, 100)
+      }
+
     }
+  },
+  beforeUnmount() {
+    clearTimeout(this.time_id)
+  }
+}
 </script>
 <style lang="scss">
-    @import "../../style/include";
-
-    .#{$prefix}img {
-        position: relative;
-        display: inline-flex;
-        max-width: 100%;
-        overflow: hidden;
-        z-index: 0;
-
-        img {
-            transition: 0.3s all ease-in-out;
-        }
-
-        &.img-hoverZoom {
-            &:hover {
-                img {
-                    transform: scale(1.1);
-                }
-            }
-        }
-
-        &.img-hoverDark {
-            &:hover {
-                background-color: black;
+@import "../../style/include";
+
+.#{$prefix}img {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  overflow: hidden;
+  z-index: 0;
+
+  img {
+    transition: 0.3s all ease-in-out;
+  }
+
+  &.img-hoverZoom {
+    &:hover {
+      img {
+        transform: scale(1.1);
+      }
+    }
+  }
 
-                img {
-                    opacity: 0.5;
-                }
-            }
-        }
+  &.img-hoverDark {
+    &:hover {
+      background-color: black;
 
-        &.img-hoverTitle {
-            &:hover {
-                .img-title {
-                    max-width: 100%;
-                }
-            }
-        }
+      img {
+        opacity: 0.5;
+      }
+    }
+  }
 
-        .img-title {
-            position: absolute;
-            z-index: 1;
-            max-width: 0;
-            overflow: hidden;
+  &.img-hoverTitle {
+    &:hover {
+      .img-title {
+        max-width: 100%;
+      }
+    }
+  }
 
-            &.title-hs {
-                text-align: start;
-            }
+  .img-title {
+    position: absolute;
+    z-index: 1;
+    max-width: 0;
+    overflow: hidden;
 
-            &.title-hc {
-                text-align: center;
-            }
+    &.title-hs {
+      text-align: start;
+    }
 
-            &.title-he {
-                text-align: end;
-            }
+    &.title-hc {
+      text-align: center;
+    }
 
-            &.title-vs {
-                top: 10px
-            }
+    &.title-he {
+      text-align: end;
+    }
 
-            &.title-vc {
-                top: 50%
-            }
+    &.title-vs {
+      top: 10px
+    }
 
-            &.title-ve {
-                bottom: 10px
-            }
+    &.title-vc {
+      top: 50%
+    }
 
-        }
+    &.title-ve {
+      bottom: 10px
     }
+
+  }
+}
 </style>