renusify 2.2.5 → 2.3.0

package/components/form/ratingInput/index.vue

@@ -44,7 +44,7 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
 
 $btn-sizes: (
     'x-small': 20,
@@ -53,10 +53,10 @@ $btn-sizes: (
     'large': 35,
     'x-large': 40
 ) !default;
-.#{$prefix}rating {
+.#{base.$prefix}rating {
   max-width: 100%;
   white-space: nowrap;
-  transition: 1s $primary-transition;
+  transition: 1s base.$primary-transition;
 
   * {
     color: var(--color-on-sheet-low);
@@ -68,12 +68,12 @@ $btn-sizes: (
 
   @each $name, $size in $btn-sizes {
     &.size-#{$name} {
-      .#{$prefix}btn {
+      .#{base.$prefix}btn {
         height: #{$size}px;
         width: #{$size}px
       }
 
-      .#{$prefix}icon {
+      .#{base.$prefix}icon {
         height: #{$size - 4px};
         width: #{$size - 4px}
       }

package/components/form/selectInput/index.vue

@@ -342,10 +342,12 @@ export default {
 
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "sass:map";
+@use "../../../style/variables/base";
+
 
 $min-height: 40px;
-.#{$prefix}select-container {
+.#{base.$prefix}select-container {
   position: relative;
   scroll-margin: $min-height;
 
@@ -376,7 +378,7 @@ $min-height: 40px;
     position: relative;
   }
 
-  .#{$prefix}chip {
+  .#{base.$prefix}chip {
     flex: 0 1 auto;
     margin: 4px;
   }
@@ -385,10 +387,10 @@ $min-height: 40px;
     max-height: 0;
     overflow: auto;
     opacity: .5;
-    transition: all .3s $primary-transition;
+    transition: all .3s base.$primary-transition;
     position: absolute;
     left: 0;
-    z-index: map_get($z-index, 'default');
+    z-index: map.get(base.$z-index, 'default');
   }
 
   .to-top {
@@ -396,7 +398,7 @@ $min-height: 40px;
   }
 
   .card-select-active {
-    transition: all 0.3s $primary-transition;
+    transition: all 0.3s base.$primary-transition;
     max-height: 300px;
     opacity: 1;
   }

package/components/form/switchInput/index.vue

@@ -56,9 +56,11 @@ emits:['update:modelValue','change'],
 
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "sass:map";
+@use "../../../style/variables/base";
+@use "../../../style/mixins";
 
-.#{$prefix}switch {
+.#{base.$prefix}switch {
   .switch-label {
     color: var(--color-on-sheet);
   }
@@ -92,11 +94,11 @@ emits:['update:modelValue','change'],
     height: 20px;
     border-radius: 50%;
     background-color: #cdcbcb;
-    transition: .3s map_get($transition,'fast-in-fast-out');
-    @include rtl() {
+    transition: .3s map.get(base.$transition,'fast-in-fast-out');
+    @include mixins.rtl() {
       right: 0;
     }
-    @include ltr() {
+    @include mixins.ltr() {
       left: 0;
     }
   }
@@ -109,10 +111,10 @@ emits:['update:modelValue','change'],
 
     .switch-dot {
       background-color: currentColor;
-      @include rtl() {
+      @include mixins.rtl() {
         right: 25px;
       }
-      @include ltr() {
+      @include mixins.ltr() {
         left: 25px;
       }
     }

package/components/form/telInput/index.vue

@@ -148,9 +148,9 @@ export default {
 
 <style src="./assets/sprite.css"></style>
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
 
-.#{$prefix}input-tel {
+.#{base.$prefix}input-tel {
   display: flex;
   align-items: baseline;
   direction: ltr;

package/components/form/text-editor/style.scss

@@ -1,20 +1,23 @@
-@import '../../../style/include';
+@use "sass:map";
+@use "../../../style/variables/base";
+@use "../../../style/mixins";
 
-.#{$prefix}text-editor {
+
+.#{base.$prefix}text-editor {
   &:not(.text-editor-preview) {
     background-color: var(--color-sheet-container);
     margin-top: 20px;
   }
 
   &.input-tile {
-    border-radius: map-get($borders, 'sm');
+    border-radius: map.get(base.$borders, 'sm');
   }
 
   &:not(.input-tile) {
-    border-radius: map-get($borders, 'xl');
+    border-radius: map.get(base.$borders, 'xl');
 
     .editor-content {
-      border-radius: map-get($borders, 'lg');
+      border-radius: map.get(base.$borders, 'lg');
     }
   }
 
@@ -23,7 +26,7 @@
     background-color: var(--color-sheet-container-low);
   }
 
-  @include typography($headings, 'body-2');
+  @include mixins.typography(base.$headings, 'body-2');
 
   a {
     color: var(--color-one)
@@ -54,7 +57,7 @@
     display: inline-block;
     position: relative;
 
-    .#{$prefix}btn {
+    .#{base.$prefix}btn {
       position: absolute;
       top: 0;
       left: 0;

package/components/form/textArea/index.vue

@@ -54,9 +54,9 @@ emits:['update:modelValue'],
 
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
 
-.#{$prefix}text-area {
+.#{base.$prefix}text-area {
   .no-resize {
     resize: none;
   }

package/components/form/timeInput/timepicker.vue

@@ -513,9 +513,10 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
+@use "../../../style/mixins";
 
-.#{$prefix}timepicker-clock {
+.#{base.$prefix}timepicker-clock {
 
   --color-timepicker: var(--color-one);
 
@@ -683,7 +684,7 @@ export default {
 
 
   .number-disabled {
-    @include disable-states()
+    @include mixins.disable-states()
   }
 }
 </style>

package/components/form/unitInput/index.vue

@@ -77,11 +77,13 @@ emits:['update:modelValue'],
 
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
+@use "../../../style/mixins";
+@use "../../../style/functions";
 
-.#{$prefix}unit-input {
+.#{base.$prefix}unit-input {
   .input-shadow, .input-shadow * {
-    @include disable-states()
+    @include mixins.disable-states()
   }
 
   input {
@@ -97,17 +99,17 @@ emits:['update:modelValue'],
     overflow-x: clip;
 
     * {
-      font-size: map-metro-get($headings, 'label-3', 'size') !important;
+      font-size: functions.map-metro-get(base.$headings, 'label-3', 'size') !important;
     }
 
     .input-control {
       border-radius: 0;
       padding: 4px;
-      @include rtl() {
+      @include mixins.rtl() {
         border-right: 1px solid var(--c-unit) !important;
       }
 
-      @include ltr() {
+      @include mixins.ltr() {
         border-left: 1px solid var(--c-unit) !important;
       }
     }

package/components/icon/style.scss

@@ -1,14 +1,15 @@
-@import "../../style/include";
+@use "../../style/variables/base";
+@use "../../style/mixins";
 
-.#{$prefix}icon {
+.#{base.$prefix}icon {
   display: inline-flex;
   vertical-align: -.5rem;
 
   &.icon-disabled {
-    @include disable-states();
+    @include mixins.disable-states();
   }
 
-  @include rtl() {
+  @include mixins.rtl() {
     &:not(.exact-icon) {
       transform: scale(-1, 1);
     }

package/components/img/index.vue

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

package/components/index.js

@@ -52,8 +52,6 @@ export * as rTextArea from './form/textArea/index.js'
 export * as rTextInput from './form/textInput/index.js'
 export * as rUnitInput from './form/unitInput/index.js'
 export * as rFormCreator from './formCreator/index.js'
-export * as rHtml2pdf from './html2pdf/index.js'
-export * as rHtml2pdfPageBreak from './html2pdf/pageBreak.js'
 export * as rIcon from './icon/index.js'
 export * as rImg from './img/index.js'
 export * as rInfiniteDiv from './infinite/div.js'

package/components/list/index.vue

@@ -24,7 +24,7 @@
 
 <script>
 import './style.scss'
-import Ripple from '../../directive/ripple/index'
+import Ripple from '../../directive/ripple/index.js'
 
 export default {
   name: 'r-list',

package/components/list/style.scss

@@ -1,9 +1,10 @@
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
 
 $item-height: 48px;
 
-.#{$prefix}list {
-  border-radius: map-get($borders, 'sm');
+.#{base.$prefix}list {
+  border-radius: map.get(base.$borders, 'sm');
   display: block;
   padding: 8px 0;
   will-change: box-shadow;
@@ -45,7 +46,7 @@ $item-height: 48px;
       background-color: var(--color-one-container);
       color: var(--color-on-one-container);
 
-      .#{$prefix}icon {
+      .#{base.$prefix}icon {
         color: inherit;
       }
     }
@@ -59,7 +60,7 @@ $item-height: 48px;
 
   &.list-rounded {
     .list-item {
-      border-radius: map-get($borders, 'xl');
+      border-radius: map.get(base.$borders, 'xl');
     }
   }
 }

package/components/map/index.vue

@@ -302,7 +302,7 @@ export default {
     },
     add() {
       import('./leaflet.css')
-      import('./leaflet').then(()=>{
+      import('./leaflet.js').then(()=>{
         this.L = global.L
         this.run();
       })
@@ -312,9 +312,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../style/include";
+@use "../../style/variables/base";
 
-.#{$prefix}map {
+.#{base.$prefix}map {
   position: relative;
 
   .leaflet-popup {

package/components/map/route.vue

@@ -565,9 +565,9 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "../../style/variables/base";
 
-.#{$prefix}map-route {
+.#{base.$prefix}map-route {
   display: flex;
   background-color: var(--color-sheet-container);
   color: var(--color-on-sheet);

package/components/menu/index.vue

@@ -131,10 +131,11 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
 
 
-.#{$prefix}menu {
+.#{base.$prefix}menu {
   position: relative;
 
   .menu-selected {
@@ -174,7 +175,7 @@ export default {
     max-height: 200px;
     overflow-y: auto;
     background-clip: padding-box;
-    border-radius: map-get($borders, 'sm');
+    border-radius: map.get(base.$borders, 'sm');
 
     &-item {
       cursor: pointer;

package/components/modal/style.scss

@@ -1,18 +1,22 @@
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
+@use "../../style/mixins";
+@use "../../style/mixins/container" as mixins2;
 
-.#{$prefix}modal-overlay {
+
+.#{base.$prefix}modal-overlay {
   width: 100%;
   height: 100%;
   position: fixed;
   left: 0;
   right: 0;
   top:0;
-  z-index: map_get($z-index, 'important');
+  z-index: map.get(base.$z-index, 'important');
   background-color: var(--color-overlay);
   backdrop-filter: blur(3px) grayscale(30%);
 }
 
-.#{$prefix}modal {
+.#{base.$prefix}modal {
   align-items: center;
   flex-direction: column;
   display: flex;
@@ -22,7 +26,7 @@
   height: 100%;
   justify-content: center;
   position: fixed;
-  z-index: map_get($z-index, 'important');
+  z-index: map.get(base.$z-index, 'important');
   outline: none;
 
   .modal-content {
@@ -36,14 +40,14 @@
     width: 100%;
     position: relative;
 
-    .#{$prefix}btn {
+    .#{base.$prefix}btn {
       position: absolute;
       bottom: -40px;
-      z-index: map_get($z-index, 'important')+1;
-      @include rtl() {
+      z-index: map.get(base.$z-index, 'important')+1;
+      @include mixins.rtl() {
         left: 5px;
       }
-      @include ltr() {
+      @include mixins.ltr() {
         right: 5px;
       }
     }
@@ -53,18 +57,18 @@
     width: 95%;
     max-width: 100vw;
     max-height: 90vh;
-    z-index: map_get($z-index, 'important');
+    z-index: map.get(base.$z-index, 'important');
   }
 
   .modal-content {
     position: relative;
-    border-radius: $border-modal;
+    border-radius: base.$border-modal;
     overflow-y: auto;
     overflow-x: hidden;
     height: 100%;
   }
 
-  @include media-breakpoint-up('md') {
+  @include mixins2.media-breakpoint-up('md') {
     .modal-container {
       width: 75%;
       max-width: 75vw;
@@ -89,10 +93,10 @@
   }
 
   .modal-bottom {
-    border-radius: $border-modal $border-modal 0 0;
+    border-radius: base.$border-modal base.$border-modal 0 0;
 
     &:not(.modal-full-width) {
-      max-width: map_get($container-max-widths, 'lg');
+      max-width: map.get(base.$container-max-widths, 'lg');
     }
   }
 }
@@ -100,7 +104,7 @@
 .animate-modal-vibrate {
   animation-duration: .15s !important;
   animation-name: animate-modal-vibrate !important;
-  animation-timing-function: map-get($transition, 'fast-in-fast-out') !important;
+  animation-timing-function: map.get(base.$transition, 'fast-in-fast-out') !important;
   @keyframes animate-modal-vibrate {
     0% {
       transform: scale(1)

package/components/nestable/index.vue

@@ -36,8 +36,8 @@
 
 <script>
 import {defineAsyncComponent} from 'vue'
-import methods from "./methods";
-import editable from "./editable";
+import methods from "./methods.js";
+import editable from "./editable.js";
 
 export default {
   name: "r-nestable",
@@ -89,9 +89,9 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "../../style/include";
+@use "../../style/variables/base";
 
-.#{$prefix}nestable {
+.#{base.$prefix}nestable {
   .nestable-handle {
     cursor: grab;
   }