renusify 2.2.5 → 2.3.0

package/components/notify/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="{
+  <div :class="{
         [$r.prefix+'notify']:true,
         'top-pos':top,
         'bottom-pos':!top,
@@ -8,33 +8,33 @@
         'flex-column-reverse':!top,
         'flex-column':top,
     }" :style="{ 'min-width': width }">
-        <r-btn v-if="list.length>0" class="color-error" rounded
-               @click.prevent="handleClose(list[list.length-1].on_close_all)">
-          {{ $t('clear', 'renusify') }}
-        </r-btn>
-        <notification v-for="item in list" :key="item.id"
-                      :pos="left?'left':'right'"
-                      :permanent="item.permanent"
-                      :status="`color-${item.status}`"
-                      :width="item.width"
-                      :timeout="item.timeout"
-                      :content="item.content"
-                      @click.prevent="handle(item.on_click)"
-                      @hide="hideChild(item.id,item.on_close)">
+    <r-btn v-if="list.length>0" class="color-error" rounded
+           @click.prevent="handleClose(list[list.length-1].on_close_all)">
+      {{ $t('clear', 'renusify') }}
+    </r-btn>
+    <notification v-for="item in list" :key="item.id"
+                  :pos="left?'left':'right'"
+                  :permanent="item.permanent"
+                  :status="`color-${item.status}`"
+                  :width="item.width"
+                  :timeout="item.timeout"
+                  :content="item.content"
+                  @click.prevent="handle(item.on_click)"
+                  @hide="hideChild(item.id,item.on_close)">
 
-          <slot :data="item">
-            {{ item }}
-          </slot>
+      <slot :data="item">
+        {{ item }}
+      </slot>
 
-        </notification>
-    </div>
+    </notification>
+  </div>
 </template>
 <script>
 import {defineAsyncComponent} from 'vue'
 
 export default {
   components: {
-    notification: defineAsyncComponent(()=>import('./notification.vue'))
+    notification: defineAsyncComponent(() => import('./notification.vue'))
   },
   props: {
     permanent: {
@@ -61,24 +61,24 @@ export default {
       default: 4000
     }
   },
-  data () {
+  data() {
     return {
       list: []
     }
   },
   methods: {
-    handleClose (close) {
+    handleClose(close) {
       if (close !== null) {
         close()
       }
       this.$notify()
     },
-    handle (click) {
+    handle(click) {
       if (click !== null) {
         click()
       }
     },
-    showMe (obj) {
+    showMe(obj) {
       const item = {
         id: this.$helper.uniqueId(),
         permanent: obj.permanent || this.permanent,
@@ -93,10 +93,10 @@ export default {
       }
       this.list.push(item)
     },
-    hideMe () {
+    hideMe() {
       this.list = []
     },
-    hideChild (id, close) {
+    hideChild(id, close) {
       if (close !== null) {
         close()
       }
@@ -108,46 +108,48 @@ export default {
         }
       }
     },
-    registerBusMethods () {
+    registerBusMethods() {
       window.renusifyBus.on('r-notify', this.showMe)
       window.renusifyBus.on('hide-r-notify', this.hideMe)
     }
   },
-  created () {
+  created() {
     this.registerBusMethods()
   }
 }
 </script>
-<style lang="scss" scoped>
-@import '../../style/include';
+<style lang="scss" >
+@use "sass:map";
+@use "../../style/variables/base";
 
-    .#{$prefix}notify {
-      display: flex;
-      align-items: center;
-      padding: 10px;
-      position: fixed;
-      width: auto;
-      height: auto;
-      z-index: map_get($z-index, 'medium');
-      overflow-y: auto;
-      max-height: 100%;
 
-      &.bottom-pos {
-        bottom: 0;
-      }
+.#{base.$prefix}notify {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  position: fixed;
+  width: auto;
+  height: auto;
+  z-index: map.get(base.$z-index, 'medium');
+  overflow-y: auto;
+  max-height: 100%;
 
-      &.top-pos {
-        top: 0;
-      }
+  &.bottom-pos {
+    bottom: 0;
+  }
 
-        &.right-pos {
-            right: 0;
-        }
+  &.top-pos {
+    top: 0;
+  }
 
-        &.left-pos {
-            left: 0;
-        }
+  &.right-pos {
+    right: 0;
+  }
 
-    }
+  &.left-pos {
+    left: 0;
+  }
+
+}
 
 </style>

package/components/notify/notification.vue

@@ -62,16 +62,18 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
+
 
 .notify-msg {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 10px;
-  border-radius: map-get($borders, 'md');
+  border-radius: map.get(base.$borders, 'md');
   position: relative;
-  z-index: map_get($z-index, 'important');
+  z-index: map.get(base.$z-index, 'important');
   margin: 0.3rem 0;
 }
 </style>

package/components/progress/style.scss

@@ -1,12 +1,15 @@
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
+@use "../../style/variables/color";
+
 
 $progress-circle-rotate-animation: progress-circle-rotate 1.4s linear infinite !default;
 $progress-circle-rotate-dash: progress-circle-dash 1.4s ease-in-out infinite !default;
 $process-circle-intermediate-svg-transition: all .2s ease-in-out !default;
-$progress-circle-underlay-stroke: rgba(map-get($shades, 'black'), 0.1) !default;
+$progress-circle-underlay-stroke: rgba(map.get(color.$shades, 'black'), 0.1) !default;
 $progress-circle-overlay-transition: all .6s ease-in-out !default;
 
-.#{$prefix}progress-circle {
+.#{base.$prefix}progress-circle {
   position: relative;
   display: inline-flex;
   vertical-align: middle;
@@ -32,7 +35,7 @@ $progress-circle-overlay-transition: all .6s ease-in-out !default;
       transition: $process-circle-intermediate-svg-transition;
     }
 
-    .#{$prefix}progress-circle-overlay {
+    .#{base.$prefix}progress-circle-overlay {
       animation: $progress-circle-rotate-dash;
       stroke-linecap: round;
       stroke-dasharray: 80, 200;
@@ -82,7 +85,7 @@ $progress-circle-overlay-transition: all .6s ease-in-out !default;
 
 //line
 
-.#{$prefix}progress {
+.#{base.$prefix}progress {
   text-align: center;
 
   .progress-outlined {

package/components/searchBox/index.vue

@@ -158,15 +158,18 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
+@use "../../style/mixins";
 
-.#{$prefix}search-box {
+
+.#{base.$prefix}search-box {
   position: relative;
 
   &.to-top {
     .card-search {
       bottom: 47px;
-      border-radius: map-get($borders, "md") map-get($borders, "md") 0 0;
+      border-radius: map.get(base.$borders, "md") map.get(base.$borders, "md") 0 0;
     }
 
     .search-open {
@@ -178,7 +181,7 @@ export default {
   &:not(&.to-top) {
     .card-search {
       top: 47px;
-      border-radius: 0 0 map-get($borders, "md") map-get($borders, "md");
+      border-radius: 0 0 map.get(base.$borders, "md") map.get(base.$borders, "md");
     }
 
     .search-open {
@@ -193,7 +196,7 @@ export default {
     border: solid 1px var(--color-border);
     color: var(--color-on-sheet);
     position: relative;
-    border-radius: map-get($borders, "md");
+    border-radius: map.get(base.$borders, "md");
   }
 
 
@@ -219,33 +222,33 @@ export default {
     position: fixed;
     width: 100vw;
     height: 100vh;
-    z-index: map_get($z-index, "medium");
+    z-index: map.get(base.$z-index, "medium");
     top: 0;
     left: 0;
     backdrop-filter: blur(3px) grayscale(30%);
   }
 
-  .#{$prefix}select-container {
+  .#{base.$prefix}select-container {
     .input-control {
       border-radius: 0;
       min-height: 30px;
-      @include ltr() {
+      @include mixins.ltr() {
         border-right: 1px solid var(--color-sheet-container-low) !important;
       }
 
-      @include rtl() {
+      @include mixins.rtl() {
         border-left: 1px solid var(--color-sheet-container-low) !important;
       }
     }
 
     .card-select {
       top: -6px;
-      border-radius: map-get($borders, "md");
-      @include ltr() {
+      border-radius: map.get(base.$borders, "md");
+      @include mixins.ltr() {
         border-top-right-radius: 0 !important;
       }
 
-      @include rtl() {
+      @include mixins.rtl() {
         border-top-left-radius: 0 !important;
       }
     }

package/components/skeleton/index.vue

@@ -27,9 +27,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
 
-.#{$prefix}skeleton {
+
+.#{base.$prefix}skeleton {
   .sk-card, .sk-line, .sk-avatar {
     background: rgba(0, 0, 0, 0.12);
     overflow: hidden;
@@ -55,7 +57,7 @@ export default {
   }
 
   .sk-card {
-    border-radius: map-get($borders, 'sm');
+    border-radius: map.get(base.$borders, 'sm');
   }
 
   .sk-line {

package/components/slider/index.vue

@@ -187,7 +187,10 @@ export default {
 }
 </script>
 <style lang="scss">
-@import '../../style/include';
+@use "sass:map";
+@use "../../style/variables/base";
+@use "../../style/mixins";
+
 
 .slider-progress {
   width: 100%;
@@ -199,25 +202,25 @@ export default {
 .btn-left-arrow {
   position: absolute;
   top: 50%;
-  @include ltr() {
+  @include mixins.ltr() {
     left: 20px;
   }
-  @include rtl() {
+  @include mixins.rtl() {
     right: 20px
   }
-  z-index: map-get($z-index, 'low');
+  z-index: map.get(base.$z-index, 'low');
 }
 
 .btn-right-arrow {
   position: absolute;
   top: 50%;
-  @include rtl() {
+  @include mixins.rtl() {
     left: 20px;
   }
-  @include ltr() {
+  @include mixins.ltr() {
     right: 20px
   }
-  z-index: map-get($z-index, 'low');
+  z-index: map.get(base.$z-index, 'low');
 }
 
 .slider-right {
@@ -230,10 +233,10 @@ export default {
   }
 
   &-enter-from {
-    @include rtl() {
+    @include mixins.rtl() {
       transform: translateX(-200px);
     }
-    @include ltr() {
+    @include mixins.ltr() {
       transform: translateX(200px);
     }
 
@@ -241,10 +244,10 @@ export default {
   }
 
   &-leave-to {
-    @include rtl() {
+    @include mixins.rtl() {
       transform: translateX(200px);
     }
-    @include ltr() {
+    @include mixins.ltr() {
       transform: translateX(-200px);
     }
 
@@ -262,10 +265,10 @@ export default {
   }
 
   &-enter-from {
-    @include rtl() {
+    @include mixins.rtl() {
       transform: translateX(200px);
     }
-    @include ltr() {
+    @include mixins.ltr() {
       transform: translateX(-200px);
     }
 
@@ -273,10 +276,10 @@ export default {
   }
 
   &-leave-to {
-    @include rtl() {
+    @include mixins.rtl() {
       transform: translateX(-200px);
     }
-    @include ltr() {
+    @include mixins.ltr() {
       transform: translateX(200px);
     }
 

package/components/swiper/index.vue

@@ -149,9 +149,9 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "../../style/variables/base";
 
-.#{$prefix}swiper {
+.#{base.$prefix}swiper {
   width: 100%;
   max-width: 100%;
   height: 100%;

package/components/table/crud/index.vue

@@ -221,9 +221,9 @@ export default {
   name: 'r-table-crud',
   components: {
     ManageHeader: defineAsyncComponent(() =>
-        import("./header")
+        import("./header.vue")
     ), ManageFooter: defineAsyncComponent(() =>
-        import("./footer")
+        import("./footer.vue")
     )
   },
   props: {