renusify 1.0.6 → 1.0.9

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'],
@@ -111,7 +112,7 @@ const list = {
     'r-html2pdf': {'p': 'html2pdf/index.vue', 'c': ['r-btn', 'r-icon', 'r-html2pdf-page-break'], 'd': []},
     'r-html2pdf-page-break': {'p': 'html2pdf/pageBreak.vue', 'c': [], 'd': []},
     'r-icon': {'p': 'icon/index.vue', 'c': [], 'd': []},
-    'r-img': {'p': 'img/index.vue', 'c': [], 'd': []},
+    'r-img': {'p': 'img/index.vue', 'c': [], 'd': ['intersect']},
     'r-infinite-div': {
         'p': 'infinite/div.vue',
         'c': ['r-container', 'r-row', 'r-col', 'r-progress-liner'],
@@ -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

@@ -138,38 +138,27 @@ export default {
 
   .menu-selected {
     position: relative;
-    color: var(--color-one-light);
+    color: var(--color-one);
 
     &:before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
-      background-color: var(--color-one-light);
+      background-color: var(--color-one);
       opacity: .1;
       width: 100%;
       height: 100%;
     }
   }
 
-  @include light() {
     .dropdown-menu {
-      border: 1px solid var(--color-border-light);
+      border: 1px solid var(--color-border);
 
       &-item:hover {
-        background-color: var(--color-table-hover-light);
+        background-color: var(--color-table-hover);
       }
     }
-  }
-  @include dark() {
-    .dropdown-menu {
-      border: 1px solid var(--color-border-dark);
-
-      &-item:hover {
-        background-color: var(--color-table-hover-dark);
-      }
-    }
-  }
 
   .menu-label {
     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/circular.vue

@@ -48,7 +48,7 @@ export default {
       default: 0
     },
     size: {
-      type: String,
+      type: [Number, String],
       default: '32'
     },
     width: {

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>

package/components/table/style.scss

@@ -8,33 +8,32 @@ $data-table-regular-header-height: 38px !default;
 .#{$prefix}table {
   position: relative;
 
-  @include light {
     .table-wrapper {
-      background-color: var(--color-cards-light);
-      color: var(--color-text-primary-light);
+      background-color: var(--color-sheet);
+      color: var(--color-text-primary);
     }
     .table-svg-path {
-      fill: var(--color-cards-light);
+      fill: var(--color-sheet);
     }
     .table-editable-icon {
-      background-color: var(--color-cards-light) !important;
-      color: var(--color-text-primary-light) !important;
+      background-color: var(--color-sheet) !important;
+      color: var(--color-text-primary) !important;
     }
     &.table-fixed-header {
       thead th {
-        background: var(--color-cards-light);
-        box-shadow: inset 0 -2px var(--color-divider-light)
+        background: var(--color-sheet);
+        box-shadow: inset 0 -2px var(--color-divider)
       }
     }
 
     thead {
       tr {
         &:last-child th {
-          border-bottom: 1px solid var(--color-divider-light)
+          border-bottom: 1px solid var(--color-divider)
         }
 
         th {
-          color: var(--color-text-secondary-light)
+          color: var(--color-text-secondary)
         }
       }
     }
@@ -42,16 +41,16 @@ $data-table-regular-header-height: 38px !default;
     &.table-fixed-first-columns {
       tr {
         th:first-child {
-          background: var(--color-cards-light)
+          background: var(--color-sheet)
         }
 
         td:first-child {
-          background: var(--color-cards-light)
+          background: var(--color-sheet)
         }
 
         &:hover {
           td:first-child {
-            background: var(--color-table-hover-light)
+            background: var(--color-table-hover)
           }
         }
       }
@@ -61,7 +60,7 @@ $data-table-regular-header-height: 38px !default;
       tbody {
         tr:nth-child(2n):not(:hover) {
           td {
-            background: var(--color-table-active-light)
+            background: var(--color-table-active)
           }
         }
       }
@@ -70,108 +69,25 @@ $data-table-regular-header-height: 38px !default;
     tbody {
       tr {
         &:active {
-          background: var(--color-table-active-light)
+          background: var(--color-table-active)
         }
 
         &:hover {
-          background: var(--color-table-hover-light)
+          background: var(--color-table-hover)
         }
       }
 
       tr:not(:last-child) {
         td {
-          border-bottom: 1px solid var(--color-divider-light)
+          border-bottom: 1px solid var(--color-divider)
         }
       }
     }
 
     &.table-bordered .table-wrapper {
-      border: 1px solid var(--color-divider-light);
+      border: 1px solid var(--color-divider);
       border-collapse: collapse;
     }
-  }
-  @include dark {
-    .table-wrapper {
-      background-color: var(--color-cards-dark);
-      color: var(--color-text-primary-dark);
-    }
-    .table-svg-path {
-      fill: var(--color-cards-dark);
-    }
-    .table-editable-icon {
-      background-color: var(--color-cards-dark) !important;
-      color: var(--color-text-primary-dark) !important;
-    }
-    &.table-fixed-header {
-      thead th {
-        background: var(--color-cards-dark);
-        box-shadow: inset 0 -2px var(--color-divider-dark)
-      }
-    }
-
-    thead {
-      tr {
-        &:last-child th {
-          border-bottom: 1px solid var(--color-divider-dark)
-        }
-
-        th {
-          color: var(--color-text-secondary-dark)
-        }
-      }
-    }
-
-    &.table-fixed-first-columns {
-      tr {
-        th:first-child {
-          background: var(--color-cards-dark)
-        }
-
-        td:first-child {
-          background: var(--color-cards-dark)
-        }
-
-        &:hover {
-          td:first-child {
-            background: var(--color-table-hover-dark)
-          }
-        }
-      }
-    }
-
-    &.table-stripped {
-      tbody {
-        tr:nth-child(2n):not(:hover) {
-          td {
-            background: var(--color-table-active-dark)
-          }
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        &:active {
-          background: var(--color-table-active-dark)
-        }
-
-        &:hover {
-          background: var(--color-table-hover-dark)
-        }
-      }
-
-      tr:not(:last-child) {
-        td {
-          border-bottom: 1px solid var(--color-divider-dark)
-        }
-      }
-    }
-
-    &.table-bordered .table-wrapper {
-      border: 1px solid var(--color-divider-dark);
-      border-collapse: collapse;
-    }
-  }
 
   .table-wrapper {
     border-radius: map_get($borders, 'lg');
@@ -367,20 +283,12 @@ $data-table-regular-header-height: 38px !default;
     width: 17px;
     height: 17px;
   }
-  @include light() {
-    .manage-footer {
-      .btn-page {
-        border: solid 1px var(--color-border-light);
-      }
-    }
-  }
-  @include dark() {
+
     .manage-footer {
       .btn-page {
-        border: solid 1px var(--color-border-dark);
+        border: solid 1px var(--color-border);
       }
     }
-  }
 
   th {
     position: relative;