renusify 2.2.5 → 2.3.0

package/directive/sortable/style.scss

@@ -1,4 +1,7 @@
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
+@use "../../style/mixins";
+
 
 .r-directive-sortable {
   position: relative;
@@ -16,11 +19,12 @@
   .sortable-holder {
     background-color: rgba(20, 200, 255, 0.5);
   }
+
   .on-drag {
     position: fixed;
     z-index: 100;
-    @include elevation('xl');
-    border-radius: map_get($borders, 'md');
+    @include mixins.elevation('xl');
+    border-radius: map.get(base.$borders, 'md');
     user-select: none;
     cursor: grabbing;
   }

package/directive/title/style.scss

@@ -1,4 +1,6 @@
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
+
 
 #r-directive-title {
   transition: all .2s ease-in-out;
@@ -7,7 +9,7 @@
   background: #181818;
   color: #FFF;
   position: fixed;
-  border-radius: map-get($borders, 'sm');
+  border-radius: map.get(base.$borders, 'sm');
   font-size: 14px;
   font-family: inherit;
   transform: translateX(-50%);

package/index.js

@@ -1,16 +1,16 @@
 import {reactive} from 'vue'
-import * as helper from './tools/helper';
-import Translate from './plugins/trans/Translate';
-import Storage from './plugins/storage/index';
-import DateTime from './plugins/trans/DateTime';
-import Currency from './plugins/trans/Currency';
+import * as helper from './tools/helper.js';
+import Translate from './plugins/trans/Translate.js';
+import Storage from './plugins/storage/index.js';
+import DateTime from './plugins/trans/DateTime.js';
+import Currency from './plugins/trans/Currency.js';
 import Notify from './components/notify/notify.js';
-import valid from './plugins/validation/Validate';
+import valid from './plugins/validation/Validate.js';
 import Toast from './components/app/toast/toast.js';
-import event from './plugins/event';
-import {_register} from './components';
-import {_registers} from './directive';
-import {Icons} from "./tools/icons";
+import event from './plugins/event.js';
+import {_register} from './components/index.js';
+import {_registers} from './directive/index.js';
+import {Icons} from "./tools/icons.js";
 
 window.renusifyBus = event;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renusify",
-  "version": "2.2.5",
+  "version": "2.3.0",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",

package/style/app.scss

@@ -1,9 +1,17 @@
-@import "./_include";
+@use "sass:map";
+@use "sass:meta";
+@use "functions";
+@use "mixins";
+@use "mixins/container";
+@use "mixins/utilities" as utilities2;
+@use "variables/base";
+@use "variables/utilities";
+
 
 html {
-  font-size: $font-size-root;
-  @include media-breakpoint-down('md') {
-    font-size: $font-size-root-mobile;
+  font-size: base.$font-size-root;
+  @include container.media-breakpoint-down('md') {
+    font-size: base.$font-size-root-mobile;
   }
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -29,12 +37,12 @@ body {
 
 ::-webkit-scrollbar-track:hover {
   border: 1px solid rgba(100, 100, 100, 0.4);
-  border-radius: map-get($borders, 'sm');
+  border-radius: map.get(base.$borders, 'sm');
 }
 
 ::-webkit-scrollbar-thumb {
   background: rgba(100, 100, 100, 0.4);
-  border-radius: map-get($borders, 'sm');
+  border-radius: map.get(base.$borders, 'sm');
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -54,9 +62,9 @@ $color-text: var(--color-on-one);
   background: $color;
 }
 
-.#{$prefix}app {
-  font-family: $body-font-family;
-  line-height: $line-height-root;
+.#{base.$prefix}app {
+  font-family: base.$body-font-family;
+  line-height: base.$line-height-root;
 
 
   ::-ms-clear,
@@ -86,8 +94,8 @@ $color-text: var(--color-on-one);
 }
 
 //curser
-.#{$prefix}app {
-  @each $name in $cursor {
+.#{base.$prefix}app {
+  @each $name in base.$cursor {
     .cursor-#{$name} {
       cursor: #{$name};
     }
@@ -95,8 +103,8 @@ $color-text: var(--color-on-one);
 }
 
 //display
-.#{$prefix}app {
-  @each $size, $media_query in $display-breakpoints {
+.#{base.$prefix}app {
+  @each $size, $media_query in base.$display-breakpoints {
     .hidden {
       &-#{$size} {
         @media #{$media_query}{
@@ -108,8 +116,8 @@ $color-text: var(--color-on-one);
 }
 
 //text
-.#{$prefix}app {
-  @each $name, $weight in $font-weights {
+.#{base.$prefix}app {
+  @each $name, $weight in base.$font-weights {
     .font-weight {
       &-#{$name} {
         font-weight: $weight !important
@@ -123,84 +131,84 @@ $color-text: var(--color-on-one);
 }
 
 //typography
-.#{$prefix}app {
-  @include typography($headings, 'body-2');
+.#{base.$prefix}app {
+  @include mixins.typography(base.$headings, 'body-2');
 
   .display-1 {
-    @include typography($headings, 'display-1')
+    @include mixins.typography(base.$headings, 'display-1')
   }
 
   .display-2 {
-    @include typography($headings, 'display-2')
+    @include mixins.typography(base.$headings, 'display-2')
   }
 
   .display-3 {
-    @include typography($headings, 'display-3')
+    @include mixins.typography(base.$headings, 'display-3')
   }
 
   .headline-1 {
-    @include typography($headings, 'headline-1')
+    @include mixins.typography(base.$headings, 'headline-1')
   }
 
   .headline-2 {
-    @include typography($headings, 'headline-2')
+    @include mixins.typography(base.$headings, 'headline-2')
   }
 
   .headline-3 {
-    @include typography($headings, 'headline-3')
+    @include mixins.typography(base.$headings, 'headline-3')
   }
 
   .title-1 {
-    @include typography($headings, 'title-1')
+    @include mixins.typography(base.$headings, 'title-1')
   }
 
   .title-2 {
-    @include typography($headings, 'title-2');
+    @include mixins.typography(base.$headings, 'title-2');
   }
 
   .title-3 {
-    @include typography($headings, 'title-3');
+    @include mixins.typography(base.$headings, 'title-3');
   }
 
   .body-1 {
-    @include typography($headings, 'body-1');
+    @include mixins.typography(base.$headings, 'body-1');
   }
 
   .body-2 {
-    @include typography($headings, 'body-2');
+    @include mixins.typography(base.$headings, 'body-2');
   }
 
   .body-3 {
-    @include typography($headings, 'body-3');
+    @include mixins.typography(base.$headings, 'body-3');
   }
 
 
   .label-1 {
-    @include typography($headings, 'label-1')
+    @include mixins.typography(base.$headings, 'label-1')
   }
 
   .label-2 {
-    @include typography($headings, 'label-2')
+    @include mixins.typography(base.$headings, 'label-2')
   }
 
   .label-3 {
-    @include typography($headings, 'label-3')
+    @include mixins.typography(base.$headings, 'label-3')
   }
 
   p {
-    margin-bottom: $spacer * 4
+    margin-bottom: base.$spacer * 4
   }
 
 }
 
 //width
-.#{$prefix}app {
-  @each $name, $value in $widths {
+.#{base.$prefix}app {
+  @each $name, $value in base.$widths {
     .w-#{$name} {
       width: $value !important
     }
   }
-  @each $name, $value in $heights {
+  @each $name, $value in base.$heights {
     .h-#{$name} {
       height: $value !important
     }
@@ -208,8 +216,8 @@ $color-text: var(--color-on-one);
 }
 
 //transition
-.#{$prefix}app {
-  @each $name, $bezier in $transition {
+.#{base.$prefix}app {
+  @each $name, $bezier in base.$transition {
     .timing-#{$name} {
       transition-timing-function: $bezier !important
     }
@@ -217,8 +225,8 @@ $color-text: var(--color-on-one);
 }
 
 //z-index
-.#{$prefix}app {
-  @each $name, $value in $z-index {
+.#{base.$prefix}app {
+  @each $name, $value in base.$z-index {
     .z-#{$name} {
       z-index: $value !important;
     }
@@ -226,12 +234,12 @@ $color-text: var(--color-on-one);
 }
 
 // Utilities
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-min-name($breakpoint, $grid-breakpoints);
-    @each $key, $utility in $utilities {
-      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
-        @include build-utility($utility, $infix)
+@each $breakpoint in map.keys(base.$grid-breakpoints) {
+  @include container.media-breakpoint-up($breakpoint) {
+    $infix: functions.breakpoint-min-name($breakpoint, base.$grid-breakpoints);
+    @each $key, $utility in utilities.$utilities {
+      @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
+        @include utilities2.build-utility($utility, $infix)
       }
     }
   }
@@ -241,23 +249,23 @@ $color-text: var(--color-on-one);
 
 // Print utilities
 @media print {
-  @each $key, $utility in $utilities {
-    @if type-of($utility) == "map" and map-get($utility, print) == true {
-      @include build-utility($utility, "-print")
+  @each $key, $utility in utilities.$utilities {
+    @if meta.type-of($utility) == "map" and map.get($utility, print) == true {
+      @include utilities2.build-utility($utility, "-print")
     }
 
   }
 }
 
-.#{$prefix}app {
-  @each $name, $value in $box-shadows {
+.#{base.$prefix}app {
+  @each $name, $value in base.$box-shadows {
     .elevation-#{$name} {
-      @include elevation($name, $important: true);
+      @include mixins.elevation($name, $important: true);
     }
   }
 }
 
-.#{$prefix}app {
+.#{base.$prefix}app {
   * {
     scroll-margin: 100px;
   }
@@ -277,7 +285,7 @@ $color-text: var(--color-on-one);
     font-size: 17px;
     line-height: 22px;
     border: 2px solid grey;
-    border-radius: map-get($borders, 'sm');
+    border-radius: map.get(base.$borders, 'sm');
     background-color: #283739;
     color: white;
     padding: 0em 1em;
@@ -349,7 +357,7 @@ $color-text: var(--color-on-one);
       transition: .2s all ease-in-out, .4s transform ease-in-out;
     }
 
-    @include ltr() {
+    @include mixins.ltr() {
       border-right-width: 0;
       border-bottom-width: 0;
       border-top-width: 0;
@@ -360,7 +368,7 @@ $color-text: var(--color-on-one);
         left: -0.5em;
       }
     }
-    @include rtl() {
+    @include mixins.rtl() {
       border-bottom-width: 0;
       border-left-width: 0;
       border-top-width: 0;

package/style/colors.scss

@@ -1,4 +1,8 @@
-@import "./_include";
+@use "sass:map";
+@use "mixins";
+@use "variables/base";
+@use "variables/color";
+
 //Surface – A role used for backgrounds and large, low-emphasis areas of the screen.
 //Primary, Secondary, Tertiary – Accent color roles used to emphasize or de-emphasize foreground elements.
 //Container – Roles used as a fill color for foreground elements like buttons. They should not be used for text or icons.
@@ -55,48 +59,48 @@ $colorsList: (
   }
 }
 
-@each $color_name, $color_value in $gradient {
-  .#{$prefix}app .color-gradient-#{$color_name} {
-    background: linear-gradient(map_get($color_value, '0'), map_get($color_value, '1')) !important;
+@each $color_name, $color_value in color.$gradient {
+  .#{base.$prefix}app .color-gradient-#{$color_name} {
+    background: linear-gradient(map.get($color_value, '0'), map.get($color_value, '1')) !important;
     color: white !important;
   }
-  .#{$prefix}app .color-gradient-#{$color_name}-45 {
-    background: linear-gradient(45deg, map_get($color_value, '0'), map_get($color_value, '1')) !important;
+  .#{base.$prefix}app .color-gradient-#{$color_name}-45 {
+    background: linear-gradient(45deg, map.get($color_value, '0'), map.get($color_value, '1')) !important;
     color: white !important;
   }
-  .#{$prefix}app .color-gradient-#{$color_name}-90 {
-    background: linear-gradient(90deg, map_get($color_value, '0'), map_get($color_value, '1')) !important;
+  .#{base.$prefix}app .color-gradient-#{$color_name}-90 {
+    background: linear-gradient(90deg, map.get($color_value, '0'), map.get($color_value, '1')) !important;
     color: white !important;
   }
 }
 
-@each $color_name, $color_value in $shades {
-  .#{$prefix}app .color-#{$color_name} {
-    @include background-color($color_value, true);
+@each $color_name, $color_value in color.$shades {
+  .#{base.$prefix}app .color-#{$color_name} {
+    @include mixins.background-color($color_value, true);
   }
 
-  .#{$prefix}app .color-#{$color_name}-text {
-    @include text-color($color_value, true);
+  .#{base.$prefix}app .color-#{$color_name}-text {
+    @include mixins.text-color($color_value, true);
   }
 }
 
-@each $color_name, $color_value in $grey {
-  .#{$prefix}app .color-grey-#{$color_name} {
-    @include background-color($color_value, true);
+@each $color_name, $color_value in color.$grey {
+  .#{base.$prefix}app .color-grey-#{$color_name} {
+    @include mixins.background-color($color_value, true);
   }
 
-  .#{$prefix}app .color-grey-#{$color_name}-text {
-    @include text-color($color_value, true);
+  .#{base.$prefix}app .color-grey-#{$color_name}-text {
+    @include mixins.text-color($color_value, true);
   }
 }
 
-@each $color_name, $color_value in $colorMain {
+@each $color_name, $color_value in color.$colorMain {
   .color-#{$color_name} {
-    @include background-color(var(--color-#{$color_name}), true);
-    @include text-color(var(--color-on-#{$color_name}), true);
+    @include mixins.background-color(var(--color-#{$color_name}), true);
+    @include mixins.text-color(var(--color-on-#{$color_name}), true);
   }
   .color-#{$color_name}-text {
-    @include text-color(var(--color-#{$color_name}), true);
+    @include mixins.text-color(var(--color-#{$color_name}), true);
   }
 }
 

package/style/functions/index.scss

@@ -1,20 +1,20 @@
-@use 'sass:math';
-@function div($value,$value2){
-  @return math.div($value , $value2)
-}
+@use "../variables/base";
+
+@use "sass:map";
+
 
-@function breakpoint-min-width($name, $breakpoints: $grid-breakpoints) {
-  $min: map-get($breakpoints, $name);
+@function breakpoint-min-width($name, $breakpoints: base.$grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
   @return if($min != 0, $min, null)
 }
 
-@function breakpoint-min-name($name, $breakpoints: $grid-breakpoints,$prefix:'-') {
+@function breakpoint-min-name($name, $breakpoints: base.$grid-breakpoints,$prefix:'-') {
   @return if(breakpoint-min-width($name, $breakpoints) == null, "", "#{$prefix}#{$name}")
 }
 
 @function map-metro-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
   @return $map
 }

package/style/mixins/container.scss

@@ -1,5 +1,10 @@
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min-width($name, $breakpoints) ;
+@use "../functions";
+@use "../variables/base";
+
+@use "sass:math";
+@use "sass:map";
+@mixin media-breakpoint-up($name, $breakpoints: base.$grid-breakpoints) {
+  $min: functions.breakpoint-min-width($name, $breakpoints) ;
   @if $min {
     @media (min-width: $min) {
       @content
@@ -9,8 +14,8 @@
   }
 }
 
-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min-width($name, $breakpoints) ;
+@mixin media-breakpoint-down($name, $breakpoints: base.$grid-breakpoints) {
+  $min: functions.breakpoint-min-width($name, $breakpoints) ;
   @if $min {
     @media (max-width: $min) {
       @content
@@ -20,7 +25,7 @@
   }
 }
 
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+@mixin make-container-max-widths($max-widths: base.$container-max-widths, $breakpoints: base.$grid-breakpoints) {
   @each $breakpoint, $container-max-width in $max-widths {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       max-width: $container-max-width
@@ -28,35 +33,35 @@
   }
 }
 
-@mixin make-row($gutter: $grid-gutter) {
+@mixin make-row($gutter: base.$grid-gutter) {
   display: flex;
-  margin-right: div($gutter, -2);
-  margin-left: div($gutter , -2);
+  margin-right: math.div($gutter, -2);
+  margin-left: math.div($gutter , -2);
   flex-wrap: wrap;
   flex: 1 1 auto;
 }
 
-@mixin make-col($size, $columns: $grid-columns) {
-  max-width: percentage(div($size , $columns));
-  flex: 0 0 percentage(div($size , $columns));
+@mixin make-col($size, $columns: base.$grid-columns) {
+  max-width: math.percentage(math.div($size , $columns));
+  flex: 0 0 math.percentage(math.div($size , $columns));
 }
 
 
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
-    $bName: breakpoint-min-name($breakpoint, $breakpoints);
-    $bNameClear: breakpoint-min-name($breakpoint, $breakpoints, '');
+@mixin make-grid-columns($columns: base.$grid-columns, $gutter: base.$grid-gutter, $breakpoints: base.$grid-breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
+    $bName: functions.breakpoint-min-name($breakpoint, $breakpoints);
+    $bNameClear: functions.breakpoint-min-name($breakpoint, $breakpoints, '');
 
     @for $i from 1 through $columns {
       @if ($bName=='') {
         .col.col-#{$i} {
           width: 100%;
-          padding: div($gutter , 2);
+          padding: math.div($gutter , 2);
         }
       } @else {
         .col.#{$bNameClear}-#{$i} {
           width: 100%;
-          padding: div($gutter , 2);
+          padding: math.div($gutter , 2);
         }
       }
 
@@ -66,13 +71,13 @@
       .col,
       .col-auto {
         width: 100%;
-        padding: div($gutter, 2);
+        padding: math.div($gutter, 2);
       }
     } @else {
       .col.#{$bNameClear},
       .col.#{$bNameClear}-auto {
         width: 100%;
-        padding: div($gutter, 2);
+        padding: math.div($gutter, 2);
       }
     }
     @include media-breakpoint-up($breakpoint, $breakpoints) {

package/style/mixins/index.scss

@@ -1,5 +1,9 @@
-@import "utilities";
-@import 'container';
+@use "sass:map";
+@use "utilities";
+@use 'container';
+@use "../functions";
+@use "../variables/base";
+
 
 @mixin rtl() {
   .app-rtl & {
@@ -24,23 +28,23 @@
 }
 
 @mixin typography($headings,$key) {
-  font-size: map-metro-get($headings, $key, 'size');
-  font-weight: map-metro-get($headings, $key, 'weight');
-  line-height: map-metro-get($headings, $key, 'line-height');
-  letter-spacing: map-metro-get($headings, $key, 'letter-spacing');
+  font-size: functions.map-metro-get($headings, $key, 'size');
+  font-weight: functions.map-metro-get($headings, $key, 'weight');
+  line-height: functions.map-metro-get($headings, $key, 'line-height');
+  letter-spacing: functions.map-metro-get($headings, $key, 'letter-spacing');
 }
 
 @mixin elevation($name, $important: false) {
-  box-shadow: map-get($box-shadows, $name) if($important, !important, null);
-  -webkit-box-shadow: map-get($box-shadows, $name) if($important, !important, null)
+  box-shadow: map.get(base.$box-shadows, $name) if($important, !important, null);
+  -webkit-box-shadow: map.get(base.$box-shadows, $name) if($important, !important, null)
 }
 
 @mixin states() {
   &:hover::before {
-    opacity: map-metro-get($states, 'hover', 'state', 'opacity')
+    opacity: functions.map-metro-get(base.$states, 'hover', 'state', 'opacity')
   }
   &:focus::before {
-    opacity: map-metro-get($states, 'focus', 'state', 'opacity')
+    opacity: functions.map-metro-get(base.$states, 'focus', 'state', 'opacity')
   }
   &-active {
     @include active-states()
@@ -49,19 +53,19 @@
 
 @mixin active-states() {
   &:hover::before, &::before {
-    opacity: map-metro-get($states, 'activated', 'state', 'opacity')
+    opacity: functions.map-metro-get(base.$states, 'activated', 'state', 'opacity')
   }
   &:focus::before {
-    opacity: map-metro-get($states, 'pressed', 'state', 'opacity')
+    opacity: functions.map-metro-get(base.$states, 'pressed', 'state', 'opacity')
   }
 }
 
 @mixin disable-states() {
   &::before {
-    opacity: map-metro-get($states, 'disabled', 'state', 'opacity') !important;
+    opacity: functions.map-metro-get(base.$states, 'disabled', 'state', 'opacity') !important;
   }
-  opacity: map-metro-get($states, 'disabled', 'text', 'opacity') !important;
-  color: var(--color-#{map-metro-get($states, 'disabled','text','color')}) !important;
+  opacity: functions.map-metro-get(base.$states, 'disabled', 'text', 'opacity') !important;
+  color: var(--color-#{functions.map-metro-get(base.$states, 'disabled','text','color')}) !important;
   pointer-events: none;
   user-select: none;
   box-shadow: none;