renusify 1.0.5 → 1.0.8

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/index.js

@@ -10,6 +10,7 @@ const list = {
     'r-bottom-navigation-circle': {'p': 'bar/bottomNavigationCircle.vue', 'c': ['r-icon'], 'd': []},
     'r-breadcrumbs': {'p': 'breadcrumb/index.vue', 'c': ['r-icon'], 'd': []},
     'r-btn': {'p': 'button/index.vue', 'c': ['r-progress-circular'], 'd': ['ripple']},
+    'r-btn-confirm': {'p': 'button/buttonConfirm.vue', 'c': ['r-btn', 'r-confirm'], 'd': []},
     'r-btn-group': {
         'p': 'button/buttonGroup.vue',
         'c': ['r-btn', 'r-icon', 'r-card', 'r-list'],
@@ -142,6 +143,7 @@ const list = {
         'c': ['r-input', 'r-progress-liner', 'r-card', 'r-list', 'r-btn', 'r-icon'],
         'd': ['click-outside']
     },
+    'r-skeleton': {'p': 'skeleton/index.vue', 'c': [], 'd': []},
     'r-slider': {'p': 'slider/index.vue', 'c': ['r-progress-liner', 'r-btn', 'r-icon'], 'd': ['touch']},
     'r-swiper': {'p': 'swiper/index.vue', 'c': [], 'd': ['touch']},
     'r-table': {

package/components/infinite/index.vue

@@ -36,7 +36,7 @@
         props: {
             color:{
               type:String,
-              default:'color-one'
+              default: 'color-two'
             },
             isChat:Boolean,
             title: {

package/components/list/style.scss

@@ -11,29 +11,15 @@ $item-height: 48px;
   position: relative;
   max-width: 100%;
 
-  @include light() {
     .list-item {
       &.list-item-active {
-        background-color: var(--color-table-active-light)
+        background-color: var(--color-table-active)
       }
 
       &:hover {
-        background-color: var(--color-table-hover-light)
+        background-color: var(--color-table-hover)
       }
     }
-  }
-
-  @include dark() {
-    .list-item {
-      &.list-item-active {
-        background-color: var(--color-table-active-dark)
-      }
-
-      &:hover {
-        background-color: var(--color-table-hover-dark)
-      }
-    }
-  }
 
   &.list-subheader {
     align-items: center;

package/components/map/route.vue

@@ -567,7 +567,7 @@
             cursor: pointer;
 
             &:hover {
-                color: var(--color-link-light);
+              color: var(--color-link);
             }
         }
     }

package/components/menu/index.vue

@@ -22,7 +22,7 @@
                 }">
         <r-card>
           <div class="dropdown-menu-item pa-2" v-for="(item,i) in list" :key="i"
-               :class="{'color-one-text':selected===item[value]}"
+               :class="{'menu-selected':selected===item[value]}"
                @click="emit(item)">
             <slot :item="item">
               {{ item }}
@@ -98,18 +98,18 @@ export default {
         this.top += elm.height
       }
       this.opacity = 0
-      let n = 80
-      if (!this.$r.rtl) {
-        this.left = 0
-      } else {
-        this.right = 0
-      }
       if (this.reverse) {
         if (!this.$r.rtl) {
           this.right = 0
         } else {
           this.left = 0
         }
+      } else {
+        if (!this.$r.rtl) {
+          this.left = 0
+        } else {
+          this.right = 0
+        }
       }
 
       this.show = true
@@ -136,24 +136,29 @@ export default {
 .#{$prefix}menu {
   position: relative;
 
-  @include light() {
-    .dropdown-menu {
-      border: 1px solid var(--color-border-light);
-
-      &-item:hover {
-        background-color: var(--color-table-hover-light);
-      }
+  .menu-selected {
+    position: relative;
+    color: var(--color-one);
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      background-color: var(--color-one);
+      opacity: .1;
+      width: 100%;
+      height: 100%;
     }
   }
-  @include dark() {
+
     .dropdown-menu {
-      border: 1px solid var(--color-border-dark);
+      border: 1px solid var(--color-border);
 
       &-item:hover {
-        background-color: var(--color-table-hover-dark);
+        background-color: var(--color-table-hover);
       }
     }
-  }
 
   .menu-label {
     cursor: pointer;
@@ -168,7 +173,7 @@ export default {
     max-height: 200px;
     overflow-y: auto;
     background-clip: padding-box;
-    border-radius: 4px;
+    border-radius: 8px;
 
     &-item {
       cursor: pointer;

package/components/modal/style.scss

@@ -12,22 +12,13 @@
   outline: none;
   bottom: 0;
 
-  @include light() {
-    &:not(.modal-no-overlay) {
-      background-color: var(--color-overlay-light);
-    }
-    .modal-content {
-      border: 1px solid var(--color-border-light);
-    }
-  }
-  @include dark() {
+
     &:not(.modal-no-overlay) {
-      background-color: var(--color-overlay-dark);
+      background-color: var(--color-overlay);
     }
     .modal-content {
-      border: 1px solid var(--color-border-dark);
+      border: 1px solid var(--color-border);
     }
-  }
 
   &:not(.modal-no-overlay) {
     backdrop-filter: blur(3px) grayscale(30%);

package/components/progress/style.scss

@@ -84,35 +84,19 @@ $progress-circular-overlay-transition: all .6s ease-in-out !default;
 
 .#{$prefix}progress {
   text-align: center;
-  @include light() {
     &.progress-outlined {
-      color: var(--color-divider-light)
+      color: var(--color-divider)
     }
     .liner-determinate {
-      background-color: var(--color-text-primary-light);
+      background-color: var(--color-text-primary);
     }
     .liner-indeterminate {
-      background-color: var(--color-text-primary-light);
+      background-color: var(--color-text-primary);
     }
 
-    .progress-background{
-      background-color: var(--color-divider-light);
+    .progress-background {
+      background-color: var(--color-divider);
     }
-  }
-  @include dark() {
-    &.progress-outlined {
-      color: var(--color-divider-dark)
-    }
-    .liner-determinate {
-      background-color: var(--color-text-primary-dark);
-    }
-    .liner-indeterminate {
-      background-color: var(--color-text-primary-dark);
-    }
-    .progress-background{
-      background-color: var(--color-divider-dark);
-    }
-  }
 
   &.progress-outlined {
     border: 1px solid;

package/components/skeleton/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div :class="[$r.prefix+'skeleton']">
+    <slot v-if="loading||showPreData"></slot>
+    <slot v-if="!loading" name="case">
+      <div :class="['sk-'+type]" :style="{width:width,height:height}"></div>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "r-skeleton",
+  props: {
+    showPreData: Boolean,
+    loading: Boolean,
+    width: String,
+    height: String,
+    type: {
+      type: String,
+      default: 'card',
+      validator: function (value) {
+        return ['line', 'avatar', 'card'].indexOf(value) !== -1
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+
+.#{$prefix}skeleton {
+  .sk-card, .sk-line, .sk-avatar {
+    background: rgba(0, 0, 0, 0.12);
+    overflow: hidden;
+    position: relative;
+
+    &:after {
+      animation: skeletonloading 1.5s infinite;
+      content: "";
+      height: 100%;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transform: translateX(-100%);
+      z-index: 1;
+      background: linear-gradient(
+              90deg,
+              hsla(0, 0%, 100%, 0),
+              hsla(0, 0%, 100%, 0.3),
+              hsla(0, 0%, 100%, 0)
+      );
+    }
+  }
+
+  .sk-card {
+    border-radius: 4px;
+  }
+
+  .sk-line {
+    height: 20px !important;
+    border-radius: 10px;
+    margin-bottom: 8px;
+  }
+
+  .sk-avatar {
+    border-radius: 50%;
+  }
+
+  @keyframes skeletonloading {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+</style>

package/components/swiper/index.vue

@@ -72,7 +72,7 @@ export default {
     }
     setTimeout(() => {
       this.slides = Math.ceil(this.$refs.container.scrollWidth / this.$refs.swiper.offsetWidth)
-    }, 500)
+    }, 1000)
   },
   computed: {
     itemWidth() {
@@ -89,7 +89,11 @@ export default {
   methods: {
     goToSlide(n) {
       this.inMove = false
-      this.x = this.$refs.swiper.offsetWidth * (n - 1)
+      let s = -1
+      if (this.$r.rtl) {
+        s = 1
+      }
+      this.x = this.$refs.swiper.offsetWidth * (n - 1) * s
       this.end()
     },
     right(x = null) {
@@ -137,7 +141,7 @@ export default {
         }
         this.prePosition = this.x
 
-        this.currentSlide = Math.ceil(this.x / this.$refs.swiper.offsetWidth) + 1
+        this.currentSlide = Math.ceil(this.x / this.$refs.swiper.offsetWidth * r) + 1
       }, 60)
 
     }
@@ -227,4 +231,4 @@ export default {
   }
 
 }
-</style>
+</style>