renusify 2.2.5 → 2.3.0

package/components/card/style.scss

@@ -1,6 +1,9 @@
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
+@use "../../style/mixins";
 
-.#{$prefix}card {
+
+.#{base.$prefix}card {
   display: block;
   position: relative;
   color: inherit;
@@ -10,12 +13,12 @@
   word-break: break-word;
   overflow-wrap: break-word;
   white-space: normal;
-  transition: $primary-transition;
+  transition: base.$primary-transition;
   transition-property: box-shadow, opacity;
 
   &.card-sheet {
-    @include elevation('md');
-    border-radius: map_get($borders, 'md');
+    @include mixins.elevation('md');
+    border-radius: map.get(base.$borders, 'md');
     background-color: var(--color-sheet-container);
     border-color: var(--color-sheet-container);
     color: var(--color-on-sheet);
@@ -23,30 +26,30 @@
 
   &.card-tile {
     border-radius: 0;
-    @include elevation('none');
+    @include mixins.elevation('none');
   }
 
   &.card-outlined {
     border: 1px solid var(--color-border)
   }
 
-  @include states();
+  @include mixins.states();
 
   &.card-hover {
     cursor: pointer;
     transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1);
 
     &:hover {
-      @include elevation('xl', true)
+      @include mixins.elevation('xl', true)
     }
   }
 
-  > *:first-child:not(.#{$prefix}btn):not(.#{$prefix}chip) {
+  > *:first-child:not(.#{base.$prefix}btn):not(.#{base.$prefix}chip) {
     border-top-left-radius: inherit;
     border-top-right-radius: inherit
   }
 
-  > *:last-child:not(.#{$prefix}btn):not(.#{$prefix}chip) {
+  > *:last-child:not(.#{base.$prefix}btn):not(.#{base.$prefix}chip) {
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit
   }
@@ -68,7 +71,7 @@
       position: absolute;
       right: 0;
       top: 0;
-      transition: .2s opacity map-get($transition, 'fast-in-slow-out');
+      transition: .2s opacity map.get(base.$transition, 'fast-in-slow-out');
     }
   }
 

package/components/chart/chart.vue

@@ -16,7 +16,7 @@ export default {
     };
   },
   mounted(){
-    import('./apexcharts').then((d)=>{
+    import('./apexcharts.js').then((d)=>{
       this.Chart=d.default;
       this.build()
     })
@@ -33,9 +33,8 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "../../style/include";
-
-.#{$prefix}chart {
+@use "../../style/variables/base";
+.#{base.$prefix}chart {
   position: relative;
   direction: ltr;
   text-align: left;

package/components/chart/worldMap.vue

@@ -1082,9 +1082,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../style/include";
+@use "../../style/variables/base";
 
-.#{$prefix}world-map {
+.#{base.$prefix}world-map {
   position: relative;
   background-color: #e7f2fe;
 

package/components/chat/MessageList.vue

@@ -1,16 +1,16 @@
 <template>
-    <div ref="containerMessage"
-         v-scroll.window="handle" class="container-message-list">
-        <div v-for="message in messages" :key="message._id" class="message-container">
-            <r-chat-message @see="$emit('see', $event)" :message="message" :is-me="message.user_id===myself.id"
-                        :user="message.user_id===myself.id?myself:participants[message.user_id]"></r-chat-message>
-        </div>
+  <div ref="containerMessage"
+       v-scroll.window="handle" class="container-message-list">
+    <div v-for="message in messages" :key="message._id" class="message-container">
+      <r-chat-message @see="$emit('see', $event)" :message="message" :is-me="message.user_id===myself.id"
+                      :user="message.user_id===myself.id?myself:participants[message.user_id]"></r-chat-message>
     </div>
-    <transition name="scale" v-if="!hideBottomBtn">
-        <r-btn v-if="!is_bottom" fab class="go-buttom" :label="newMsg.num" @click.prevent="goTo(newMsg.first_id)">
-            <r-icon v-html="$r.icons.chevron_down"></r-icon>
-        </r-btn>
-    </transition>
+  </div>
+  <transition name="scale" v-if="!hideBottomBtn">
+    <r-btn v-if="!is_bottom" fab class="go-buttom" :label="newMsg.num" @click.prevent="goTo(newMsg.first_id)">
+      <r-icon v-html="$r.icons.chevron_down"></r-icon>
+    </r-btn>
+  </transition>
 </template>
 
 <script>
@@ -33,128 +33,131 @@ export default {
   },
   data() {
     return {
-                timeout_id: null,
-                timeout_scroll: null,
-                is_bottom: false
-            }
-        },
-        mounted() {
-            setTimeout(() => {
-                this.goTo(this.newMsg.first_id);
-            }, 10)
-        },
-        watch: {
-            messages: function (n, o) {
-                clearTimeout(this.timeout_id)
-                this.timeout_id = setTimeout(() => {
-                    const scrollDiv = this.$refs.containerMessage;
-                    const offset = scrollDiv.scrollHeight - scrollDiv.scrollTop - scrollDiv.clientHeight
-                    if (offset < 100 || o.length === 0) {
-                        this.goToBottom()
-                    }
-                }, 300)
-            }
-        },
-        methods: {
-            handle(e) {
-                clearTimeout(this.timeout_scroll)
-                this.timeout_scroll = setTimeout(() => {
-                    const scrollDiv = this.$refs.containerMessage;
-                    const offset = scrollDiv.scrollHeight - scrollDiv.scrollTop - scrollDiv.clientHeight
-                    this.is_bottom = offset === 0;
-                }, 100)
-            },
-            goTo(id) {
-                let f = document.getElementById('msg-' + id)
-                if (f) {
-                    this.hover(f)
-                    f = f.getBoundingClientRect()
-                    const scrollDiv = this.$refs.containerMessage;
-                    scrollDiv.scrollTop = scrollDiv.scrollTop - scrollDiv.clientHeight + f.top + f.height
-                } else {
-                    this.goToBottom()
-                }
-            },
-            hover(elm) {
-                elm.classList.add('msg-select')
-                setTimeout(() => {
-                    elm.classList.remove('msg-select')
-                }, 2000)
-            },
-            goToBottom() {
-                let scrollDiv = this.$refs.containerMessage;
-                if (scrollDiv !== null) {
-                    scrollDiv.scrollTop = scrollDiv.scrollHeight;
-                }
-            }
+      timeout_id: null,
+      timeout_scroll: null,
+      is_bottom: false
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.goTo(this.newMsg.first_id);
+    }, 10)
+  },
+  watch: {
+    messages: function (n, o) {
+      clearTimeout(this.timeout_id)
+      this.timeout_id = setTimeout(() => {
+        const scrollDiv = this.$refs.containerMessage;
+        const offset = scrollDiv.scrollHeight - scrollDiv.scrollTop - scrollDiv.clientHeight
+        if (offset < 100 || o.length === 0) {
+          this.goToBottom()
         }
+      }, 300)
+    }
+  },
+  methods: {
+    handle(e) {
+      clearTimeout(this.timeout_scroll)
+      this.timeout_scroll = setTimeout(() => {
+        const scrollDiv = this.$refs.containerMessage;
+        const offset = scrollDiv.scrollHeight - scrollDiv.scrollTop - scrollDiv.clientHeight
+        this.is_bottom = offset === 0;
+      }, 100)
+    },
+    goTo(id) {
+      let f = document.getElementById('msg-' + id)
+      if (f) {
+        this.hover(f)
+        f = f.getBoundingClientRect()
+        const scrollDiv = this.$refs.containerMessage;
+        scrollDiv.scrollTop = scrollDiv.scrollTop - scrollDiv.clientHeight + f.top + f.height
+      } else {
+        this.goToBottom()
+      }
+    },
+    hover(elm) {
+      elm.classList.add('msg-select')
+      setTimeout(() => {
+        elm.classList.remove('msg-select')
+      }, 2000)
+    },
+    goToBottom() {
+      let scrollDiv = this.$refs.containerMessage;
+      if (scrollDiv !== null) {
+        scrollDiv.scrollTop = scrollDiv.scrollHeight;
+      }
     }
+  }
+}
 </script>
 
 <style lang="scss">
-    @import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
+@use "../../style/mixins";
 
-    .#{$prefix}chat .container-message-list {
-        scroll-behavior: smooth;
-        flex: 1;
-        overflow-y: scroll;
-        overflow-x: hidden;
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 10px;
-        max-height: 100%;
-        /************** Safari 10.1+ ********************/
-        @media not all and (min-resolution: .001dpcm) {
-            @supports (-webkit-appearance:none) {
 
-                .message-container {
-                    display: -webkit-box !important;
-                }
+.#{base.$prefix}chat .container-message-list {
+  scroll-behavior: smooth;
+  flex: 1;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 10px;
+  max-height: 100%;
+  /************** Safari 10.1+ ********************/
+  @media not all and (min-resolution: .001dpcm) {
+    @supports (-webkit-appearance:none) {
 
-            }
-        }
+      .message-container {
+        display: -webkit-box !important;
+      }
 
-        .message-container {
-            display: flex;
-            flex-direction: column;
-        }
+    }
+  }
 
-        .msg-select {
-          animation: color .7s;
-          animation-iteration-count: infinite;
-          border-radius: map-get($borders, 'sm');
+  .message-container {
+    display: flex;
+    flex-direction: column;
+  }
 
-          .message-text {
-            opacity: .4;
-          }
-        }
+  .msg-select {
+    animation: color .7s;
+    animation-iteration-count: infinite;
+    border-radius: map.get(base.$borders, 'sm');
+
+    .message-text {
+      opacity: .4;
     }
+  }
+}
 
-    .go-buttom {
-        position: absolute;
-        @include rtl() {
-            left: 20px;
-            bottom: 50px;
-        }
-        background-color: #eeeeee;
-        color: #0b8e6b;
+.go-buttom {
+  position: absolute;
+  @include mixins.rtl() {
+    left: 20px;
+    bottom: 50px;
+  }
+  background-color: #eeeeee;
+  color: #0b8e6b;
 
-        .label {
-            background-color: #0b8e6b;
-            color: white;
-        }
-    }
+  .label {
+    background-color: #0b8e6b;
+    color: white;
+  }
+}
 
-    @keyframes color {
-        0% {
-            background-color: #c6e6f5;
-        }
-        50% {
-            background-color: #7ad5ff;
-        }
-        100% {
-            background-color: #0aa6ee;
-        }
-    }
+@keyframes color {
+  0% {
+    background-color: #c6e6f5;
+  }
+  50% {
+    background-color: #7ad5ff;
+  }
+  100% {
+    background-color: #0aa6ee;
+  }
+}
 
 </style>

package/components/chat/chatInput.vue

@@ -49,7 +49,7 @@
   </div>
 </template>
 <script>
-import file from "../form/fileInput/file";
+import file from "../form/fileInput/file.js";
 
 export default {
   name: 'r-chat-input',
@@ -112,9 +112,9 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "../../style/variables/base";
 
-.#{$prefix}chat-input {
+.#{base.$prefix}chat-input {
   display: flex;
 
   box-shadow: black 0px 8px 15px;

package/components/chat/chatMsg.vue

@@ -86,7 +86,9 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
+@use "../../style/mixins";
 
 .message-body {
   display: flex;
@@ -119,7 +121,7 @@ export default {
     background: #fff;
     color: black;
     padding: 5px 10px;
-    border-radius: map-get($borders, 'lg');
+    border-radius: map.get(base.$borders, 'lg');
     max-width: 80%;
     overflow-wrap: break-word;
     white-space: pre-wrap;
@@ -146,7 +148,7 @@ export default {
     .message-text {
       margin-top: 0px;
       margin-bottom: 2px;
-      border-radius: map-get($borders, 'sm') !important;
+      border-radius: map.get(base.$borders, 'sm') !important;
     }
   }
 
@@ -180,37 +182,37 @@ export default {
   &:not(.is-me) {
     .is-end {
       background-color: #fff;
-      @include ltr() {
+      @include mixins.ltr() {
         left: -15px;
       }
-      @include rtl() {
+      @include mixins.rtl() {
         right: -15px;
       }
 
       &:after {
-        @include ltr() {
+        @include mixins.ltr() {
           left: -15px;
         }
-        @include rtl() {
+        @include mixins.rtl() {
           right: -15px;
         }
       }
     }
 
     .message-content {
-      @include ltr() {
+      @include mixins.ltr() {
         align-items: flex-end;
       }
-      @include rtl() {
+      @include mixins.rtl() {
         align-items: flex-start;
       }
     }
 
     .message-text {
-      @include ltr() {
+      @include mixins.ltr() {
         border-bottom-left-radius: 0px;
       }
-      @include rtl() {
+      @include mixins.rtl() {
         border-bottom-right-radius: 0px;
       }
     }
@@ -218,27 +220,27 @@ export default {
 
   &.is-me {
     flex-direction: row-reverse;
-    @include rtl() {
+    @include mixins.rtl() {
       margin-left: 15px;
     }
-    @include ltr() {
+    @include mixins.ltr() {
       margin-right: 15px;
     }
 
     .is-end {
       background-color: #4f98ec;
-      @include rtl() {
+      @include mixins.rtl() {
         left: -15px;
       }
-      @include ltr() {
+      @include mixins.ltr() {
         right: -15px;
       }
 
       &:after {
-        @include rtl() {
+        @include mixins.rtl() {
           left: -15px;
         }
-        @include ltr() {
+        @include mixins.ltr() {
           right: -15px;
         }
       }
@@ -247,10 +249,10 @@ export default {
     .message-text {
       background-color: #4f98ec;
       color: white;
-      @include ltr() {
+      @include mixins.ltr() {
         border-bottom-right-radius: 0px;
       }
-      @include rtl() {
+      @include mixins.rtl() {
         border-bottom-left-radius: 0px;
       }
     }
@@ -260,11 +262,11 @@ export default {
     }
 
     .message-content {
-      @include ltr() {
+      @include mixins.ltr() {
         align-items: flex-start;
 
       }
-      @include rtl() {
+      @include mixins.rtl() {
         align-items: flex-end;
 
       }

package/components/chat/index.vue

@@ -97,9 +97,9 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "../../style/variables/base";
 
-.#{$prefix}chat {
+.#{base.$prefix}chat {
   position: relative;
   display: flex;
   width: 100%;

package/components/chip/style.scss

@@ -1,4 +1,9 @@
-@import "renusify/style/_include.scss";
+@use "sass:math";
+@use "sass:map";
+@use "../../style/variables/base";
+@use "../../style/mixins";
+@use "../../style/functions";
+
 
 $chip-avatar-size: 24px !default;
 $chip-close-size: 18px !default;
@@ -7,14 +12,14 @@ $chip-icon-margin-before: -6px !default;
 $chip-icon-right-margin-after: -4px !default;
 $chip-icon-right-margin-before: 8px !default;
 $chip-icon-size: 24px !default;
-$chip-label-border-radius: map-get($borders, 'sm') !default;
+$chip-label-border-radius: map.get(base.$borders, 'sm') !default;
 $chip-link-focus-opacity: 0.32 !default;
 $chip-pill-avatar-margin-after: 8px !default;
 $chip-pill-avatar-margin-before: -12px !default;
 $chip-pill-avatar-size: 32px !default;
 $chip-pill-filter-margin: 0 16px 0 0 !default;
 $chip-transition-duration: 0.28s !default;
-$chip-transition-fn: map-get($transition, 'fast-out-slow-in') !default;
+$chip-transition-fn: map.get(base.$transition, 'fast-out-slow-in') !default;
 $icon-outlined-border-width: thin !default;
 $icon-sizes: (
         'x-small': (
@@ -40,7 +45,7 @@ $icon-sizes: (
 ) !default;
 
 
-.#{$prefix}chip {
+.#{base.$prefix}chip {
   align-items: center;
   cursor: default;
   white-space: nowrap;
@@ -60,13 +65,13 @@ $icon-sizes: (
     color: var(--color-on-sheet);
   }
 
-  @include states();
+  @include mixins.states();
 
   &.chip-disabled {
-    @include disable-states();
+    @include mixins.disable-states();
 
     &:not(.chip-text):not(.chip-outlined) {
-      background-color: var(--color-#{map-metro-get($states, 'disabled','state','color')}) !important;
+      background-color: var(--color-#{functions.map-metro-get(base.$states, 'disabled','state','color')}) !important;
     }
 
     &.btn-text, &.btn-outlined {
@@ -92,13 +97,13 @@ $icon-sizes: (
     cursor: pointer;
   }
 
-  .#{$prefix}icon {
+  .#{base.$prefix}icon {
     font-size: $chip-icon-size;
     transition: none;
   }
 
   .chip-close {
-    .#{$prefix}icon {
+    .#{base.$prefix}icon {
       font-size: $chip-close-size;
       max-height: $chip-close-size;
       max-width: $chip-close-size;
@@ -113,7 +118,7 @@ $icon-sizes: (
   }
 
   .chip-content {
-    transition: $secondary-transition;
+    transition: base.$secondary-transition;
     transition-duration: 0.05s;
     align-items: center;
     display: inline-flex;
@@ -128,7 +133,7 @@ $icon-sizes: (
       color: var(--color-on-one);
     }
 
-    .#{$prefix}icon {
+    .#{base.$prefix}icon {
       color: inherit;
       padding: 0 3px;
     }
@@ -151,7 +156,7 @@ $icon-sizes: (
       opacity: 0.08
     }
 
-    .#{$prefix}icon {
+    .#{base.$prefix}icon {
       color: inherit
     }
 
@@ -169,7 +174,7 @@ $icon-sizes: (
       opacity: 0.08
     }
 
-    .#{$prefix}icon {
+    .#{base.$prefix}icon {
       color: inherit
     }
 
@@ -185,9 +190,9 @@ $icon-sizes: (
 
   @each $name, $size in $icon-sizes {
     &.chip-size-#{$name} {
-      border-radius: #{div(map-get($size, 'height') , 2)}px;
-      font-size: #{map-get($size, 'font-size')}px;
-      min-height: #{map-get($size, 'height')}px;
+      border-radius: #{math.div(map.get($size, 'height') , 2)}px;
+      font-size: #{map.get($size, 'font-size')}px;
+      min-height: #{map.get($size, 'height')}px;
     }
   }
 }

package/components/codeEditor/highlightCss.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import mixin from './mixin'
+import mixin from './mixin.js'
 
 export default {
   name: "highlight-css",

package/components/codeEditor/highlightHtml.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import mixin from './mixin'
+import mixin from './mixin.js'
 
 export default {
   name: "highlight-html",

package/components/codeEditor/highlightJs.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import mixin from './mixin'
+import mixin from './mixin.js'
 
 export default {
   name: "highlight-script",