renusify 2.2.6 → 2.3.1

package/components/table/style.scss

@@ -1,99 +1,104 @@
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
+@use "../../style/mixins";
 
 $data-table-thin-header-height: 38px !default;
 $data-table-thin-row-height: 32px !default;
 $data-table-regular-row-height: 42px !default;
 $data-table-regular-header-height: 38px !default;
 
-.#{$prefix}table {
+.#{base.$prefix}table {
   position: relative;
 
-    .table-wrapper {
-      background-color: var(--color-sheet-container-lowest);
-      color: var(--color-on-sheet);
-    }
-    .table-svg-path {
-      fill: var(--color-sheet);
-    }
-    .table-editable-icon {
-      background-color: var(--color-sheet);
-      color: var(--color-on-sheet);
-    }
-    &.table-fixed-header {
-      thead th {
-        box-shadow: inset 0 -2px var(--color-border)
-      }
+  .table-wrapper {
+    background-color: var(--color-sheet-container-lowest);
+    color: var(--color-on-sheet);
+  }
+
+  .table-svg-path {
+    fill: var(--color-sheet);
+  }
+
+  .table-editable-icon {
+    background-color: var(--color-sheet);
+    color: var(--color-on-sheet);
+  }
+
+  &.table-fixed-header {
+    thead th {
+      box-shadow: inset 0 -2px var(--color-border)
     }
+  }
 
-    thead {
-      tr {
-        &:last-child th {
-          border-bottom: 1px solid var(--color-border)
-        }
+  thead {
+    tr {
+      &:last-child th {
+        border-bottom: 1px solid var(--color-border)
+      }
 
-        th {
-          background-color: var(--color-sheet);
-          color: var(--color-on-sheet)
-        }
+      th {
+        background-color: var(--color-sheet);
+        color: var(--color-on-sheet)
       }
     }
+  }
 
-    &.table-fixed-first-columns {
-      tr {
-        th:first-child {
-          background: var(--color-sheet);
-          color: var(--color-on-sheet)
-        }
+  &.table-fixed-first-columns {
+    tr {
+      th:first-child {
+        background: var(--color-sheet);
+        color: var(--color-on-sheet)
+      }
 
+      td:first-child {
+        background: var(--color-sheet);
+        color: var(--color-on-sheet)
+      }
+
+      &:hover {
         td:first-child {
-          background: var(--color-sheet);
+          background: var(--color-sheet-container);
           color: var(--color-on-sheet)
         }
-
-        &:hover {
-          td:first-child {
-            background: var(--color-sheet-container);
-            color: var(--color-on-sheet)
-          }
-        }
       }
     }
+  }
 
-    &.table-stripped {
-      tbody {
-        tr:nth-child(2n):not(:hover) {
-          td {
-            background: var(--color-sheet-container-low)
-          }
+  &.table-stripped {
+    tbody {
+      tr:nth-child(2n):not(:hover) {
+        td {
+          background: var(--color-sheet-container-low)
         }
       }
     }
+  }
 
-    tbody {
-      tr {
-        &:active {
-          background: var(--color-sheet-container)
-        }
-
-        &:hover {
-          background: var(--color-sheet-container)
-        }
+  tbody {
+    tr {
+      &:active {
+        background: var(--color-sheet-container)
       }
 
-      tr:not(:last-child) {
-        td {
-          border-bottom: 1px solid var(--color-border)
-        }
+      &:hover {
+        background: var(--color-sheet-container)
       }
     }
 
-    &.table-bordered .table-wrapper {
-      border: 1px solid var(--color-border);
-      border-collapse: collapse;
+    tr:not(:last-child) {
+      td {
+        border-bottom: 1px solid var(--color-border)
+      }
     }
+  }
+
+  &.table-bordered .table-wrapper {
+    border: 1px solid var(--color-border);
+    border-collapse: collapse;
+  }
 
   .table-wrapper {
-    border-radius: map_get($borders, 'lg');
+    border-radius: map.get(base.$borders, 'lg');
     overflow: hidden;
   }
 
@@ -105,10 +110,10 @@ $data-table-regular-header-height: 38px !default;
 
   td, th {
     padding: 0 16px;
-    @include ltr() {
+    @include mixins.ltr() {
       text-align: left
     }
-    @include rtl() {
+    @include mixins.rtl() {
       text-align: right
     }
   }
@@ -174,26 +179,26 @@ $data-table-regular-header-height: 38px !default;
         min-width: 300px !important;
         position: sticky;
         width: 300px;
-        @include rtl() {
+        @include mixins.rtl() {
           right: 0;
         }
-        @include ltr() {
+        @include mixins.ltr() {
           left: 0;
         }
-        z-index: map_get($z-index, 'medium');
+        z-index: map.get(base.$z-index, 'medium');
       }
 
       td:first-child {
         position: sticky;
         width: 300px;
-        @include rtl() {
+        @include mixins.rtl() {
           right: 0;
         }
-        @include ltr() {
+        @include mixins.ltr() {
           left: 0;
         }
         height: auto;
-        z-index: map_get($z-index, 'low');
+        z-index: map.get(base.$z-index, 'low');
       }
     }
   }
@@ -217,16 +222,16 @@ $data-table-regular-header-height: 38px !default;
     }
 
     .table-wrapper {
-      @include rtl() {
+      @include mixins.rtl() {
         border-top-left-radius: 0;
       }
-      @include ltr() {
+      @include mixins.ltr() {
         border-top-right-radius: 0;
       }
     }
 
     .table-svg {
-      @include ltr() {
+      @include mixins.ltr() {
         transform: rotateY(180deg);
       }
     }
@@ -276,21 +281,21 @@ $data-table-regular-header-height: 38px !default;
   }
 }
 
-.#{$prefix}table-manage {
+.#{base.$prefix}table-manage {
   white-space: nowrap;
 
-  .table-checkbox{
+  .table-checkbox {
     width: 17px;
     height: 17px;
   }
 
-    .manage-footer {
-      .btn-page {
-        color: var(--color-on-sheet);
-        border: solid 1px var(--color-sheet-low);
-        background-color: var(--color-sheet-container);
-      }
+  .manage-footer {
+    .btn-page {
+      color: var(--color-on-sheet);
+      border: solid 1px var(--color-sheet-low);
+      background-color: var(--color-sheet-container);
     }
+  }
 
   th {
     position: relative;

package/components/tabs/index.vue

@@ -96,11 +96,11 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "../../style/variables/base";
 
 $btnTabsWidth: 50px;
 
-.#{$prefix}tabs {
+.#{base.$prefix}tabs {
   max-width: 100%;
   display: flex;
   flex-direction: row;

package/components/timeline/index.vue

@@ -1,73 +1,76 @@
 <template>
-    <r-container full-width :class="`${$r.prefix}timeline`">
-        <r-row no-gutters class="timeline-item" v-for="(item,i) in items" :key="i">
-            <r-col class="md-5" v-if="$r.breakpoint.mdAndUp">
-                <slot name="back" :item="item" :k="i"></slot>
-            </r-col>
-            <r-col class="col-2 md-2">
-                <slot name="counter" :item="item" :k="i">
-                    <div class="d-flex h-center v-center h-full">
-                        <div class="timeline-counter color-one d-flex h-center v-center">{{ i + 1 }}</div>
-                    </div>
-                </slot>
-            </r-col>
-            <r-col class="col-10 md-5">
-                <slot :item="item" :k="i">{{item}}</slot>
-            </r-col>
-        </r-row>
-    </r-container>
+  <r-container :class="`${$r.prefix}timeline`" full-width>
+    <r-row v-for="(item,i) in items" :key="i" class="timeline-item" no-gutters>
+      <r-col v-if="$r.breakpoint.mdAndUp" class="md-5">
+        <slot :item="item" :k="i" name="back"></slot>
+      </r-col>
+      <r-col class="col-2 md-2">
+        <slot :item="item" :k="i" name="counter">
+          <div class="d-flex h-center v-center h-full">
+            <div class="timeline-counter color-one d-flex h-center v-center">{{ i + 1 }}</div>
+          </div>
+        </slot>
+      </r-col>
+      <r-col class="col-10 md-5">
+        <slot :item="item" :k="i">{{ item }}</slot>
+      </r-col>
+    </r-row>
+  </r-container>
 </template>
 <script>
-    export default {
-        name: "rTimeline",
-        props: {
-            items: {
-                type: Array
-            }
-        }
+export default {
+  name: "rTimeline",
+  props: {
+    items: {
+      type: Array
     }
+  }
+}
 </script>
 <style lang="scss">
-    @import "../../style/include";
+@use "sass:math";
+@use "../../style/variables/base";
+@use "../../style/mixins";
+@use "../../style/mixins/container" as mixins2;
 
-    .#{$prefix}timeline {
-        .timeline-item {
-            position: relative;
-            padding: 30px 0;
+.#{base.$prefix}timeline {
+  .timeline-item {
+    position: relative;
+    padding: 30px 0;
 
-            &:not(:last-child):before {
-              content: '';
-              width: 1px;
-              height: 40%;
-              border-right: 2px solid var(--color-border);
-              position: absolute;
-              bottom: -20%;
-              z-index: 0;
-              @include rtl() {
-                right: percentage(div(1, $grid-columns));
-              }
-              @include ltr() {
-                left: percentage(div(1, $grid-columns));
-              }
-            }
+    &:not(:last-child):before {
+      content: '';
+      width: 1px;
+      height: 40%;
+      border-right: 2px solid var(--color-border);
+      position: absolute;
+      bottom: -20%;
+      z-index: 0;
+      @include mixins.rtl() {
+        right: math.percentage(math.div(1, base.$grid-columns));
+      }
+      @include mixins.ltr() {
+        left: math.percentage(math.div(1, base.$grid-columns));
+      }
+    }
 
-            @include media-breakpoint-up('md') {
-                &:nth-child(2n) {
-                    flex-direction: row-reverse;
-                }
-                &:not(:last-child):before {
-                    left: 50% !important;
-                    right: unset !important;
-                }
-            }
+    @include mixins2.media-breakpoint-up('md') {
+      &:nth-child(2n) {
+        flex-direction: row-reverse;
+      }
+      &:not(:last-child):before {
+        left: 50% !important;
+        right: unset !important;
+      }
+    }
 
-        }
+  }
 
-        .timeline-counter {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            z-index: 1;
-        }
-    }
+  .timeline-counter {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    z-index: 1;
+  }
+}
 </style>

package/components/tree/index.vue

@@ -116,21 +116,21 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "../../style/variables/base";
 
 $distance: 20px;
-.#{$prefix}tree {
+.#{base.$prefix}tree {
     position: relative;
     width: 100%;
     height: 100%;
 
     &.tree-searchable {
-        .#{$prefix}float {
+      .#{base.$prefix}float {
             height: calc(100% - 70px)
         }
     }
 
-    .#{$prefix}float {
+  .#{base.$prefix}float {
         direction: ltr;
     }
 

package/components/tree/tree-element.vue

@@ -162,10 +162,10 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "../../style/variables/base";
 
 $distance: 20px;
-.#{$prefix}tree-element {
+.#{base.$prefix}tree-element {
   direction: ltr;
   position: relative;
   display: table;

package/directive/animate/style.scss

@@ -1,7 +1,9 @@
-@import '../../style/include';
+@use "sass:map";
+@use "../../style/variables/base";
+
 
 .r-directive-animate {
-  transition-timing-function: map_get($transition, 'swing');
+  transition-timing-function: map.get(base.$transition, 'swing');
   transition-property: opacity, transform;
 
   &.fade {
@@ -14,96 +16,125 @@
 
   &.scaleIn {
     transform: scale(.5);
-    &.animate{
-     transform:translateZ(0) scale(1);
+
+    &.animate {
+      transform: translateZ(0) scale(1);
     }
   }
-  &.scaleOut{
+
+  &.scaleOut {
     transform: scale(1.3);
-    &.animate{
-     transform:translateZ(0) scale(1);
+
+    &.animate {
+      transform: translateZ(0) scale(1);
     }
   }
-  &.up{
-    transform: translate3d(0,100px,0);
-    &.animate{
-      transform: translate3d(0,0,0);
+
+  &.up {
+    transform: translate3d(0, 100px, 0);
+
+    &.animate {
+      transform: translate3d(0, 0, 0);
     }
   }
-  &.down{
-    transform: translate3d(0,-100px,0);
-    &.animate{
-      transform: translate3d(0,0,0);
+
+  &.down {
+    transform: translate3d(0, -100px, 0);
+
+    &.animate {
+      transform: translate3d(0, 0, 0);
     }
   }
-  &.right{
-    transform: translate3d(-100px,0,0);
-    &.animate{
-      transform: translate3d(0,0,0);
+
+  &.right {
+    transform: translate3d(-100px, 0, 0);
+
+    &.animate {
+      transform: translate3d(0, 0, 0);
     }
   }
-  &.left{
-    transform: translate3d(100px,0,0);
-    &.animate{
-      transform: translate3d(0,0,0);
+
+  &.left {
+    transform: translate3d(100px, 0, 0);
+
+    &.animate {
+      transform: translate3d(0, 0, 0);
     }
   }
-  &.flipLeft{
+
+  &.flipLeft {
     transform: perspective(2500px) rotateY(-100deg);
     backface-visibility: hidden;
-    &.animate{
+
+    &.animate {
       transform: perspective(2500px) rotateY(0deg);
     }
   }
-  &.flipRight{
+
+  &.flipRight {
     transform: perspective(2500px) rotateY(100deg);
     backface-visibility: hidden;
-    &.animate{
+
+    &.animate {
       transform: perspective(2500px) rotateY(0deg);
     }
   }
-  &.flipUp{
+
+  &.flipUp {
     transform: perspective(2500px) rotateX(100deg);
     backface-visibility: hidden;
-    &.animate{
+
+    &.animate {
       transform: perspective(2500px) rotateX(0deg);
     }
   }
-  &.flipDown{
+
+  &.flipDown {
     transform: perspective(2500px) rotateX(-100deg);
     backface-visibility: hidden;
-    &.animate{
+
+    &.animate {
       transform: perspective(2500px) rotateX(0deg);
     }
   }
-  &.du-100{
+
+  &.du-100 {
     transition-duration: 0.1s;
   }
-  &.du-200{
+
+  &.du-200 {
     transition-duration: 0.2s;
   }
-  &.du-300{
+
+  &.du-300 {
     transition-duration: 0.3s;
   }
-  &.du-400{
+
+  &.du-400 {
     transition-duration: 0.4s;
   }
-  &.du-500{
+
+  &.du-500 {
     transition-duration: 0.5s;
   }
-  &.du-600{
+
+  &.du-600 {
     transition-duration: 0.6s;
   }
-  &.du-700{
+
+  &.du-700 {
     transition-duration: 0.7s;
   }
-  &.du-800{
+
+  &.du-800 {
     transition-duration: 0.8s;
   }
-  &.du-900{
+
+  &.du-900 {
     transition-duration: 0.9s;
   }
-  &.du-1000{
+
+  &.du-1000 {
     transition-duration: 1s;
   }
 }

package/directive/drag/index.js

@@ -1,4 +1,4 @@
-import {ifHas} from '../../tools/helper'
+import {ifHas} from '../../tools/helper.js'
 
 let wrapper = {}
 let current=null

package/directive/ripple/style.scss

@@ -1,8 +1,10 @@
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
 
-$ripple-animation-transition-in: transform .25s map-get($transition, 'fast-in-slow-out'),
-opacity .1s map-get($transition, 'fast-in-slow-out') !default;
-$ripple-animation-transition-out: opacity .3s map-get($transition, 'fast-in-slow-out') !default;
+
+$ripple-animation-transition-in: transform .25s map.get(base.$transition, 'fast-in-slow-out'),
+opacity .1s map.get(base.$transition, 'fast-in-slow-out') !default;
+$ripple-animation-transition-out: opacity .3s map.get(base.$transition, 'fast-in-slow-out') !default;
 
 .ripple {
   &-container {

package/directive/skeleton/style.scss

@@ -1,15 +1,15 @@
-@import "~renusify/style/include";
-
 .r-skeleton {
   * {
     opacity: 0 !important;
   }
 
-  -webkit-text-fill-color: transparent !important;
-
-  background-color: rgba(0, 0, 0, 0.12) !important;
-  overflow: hidden !important;
-  position: relative !important;
+  & {
+    -webkit-text-fill-color: transparent !important;
+    background-color: rgba(0, 0, 0, 0.12) !important;
+    overflow: hidden !important;
+    position: relative !important;
+  }
+;
 
   &:after {
     animation: skeletonloading 1.5s infinite;