@kizmann/nano-ui 0.9.10 → 1.0.0

package/src/collapse/src/collapse-item/collapse-item.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-collapse__header-icon {
@@ -27,10 +28,10 @@
 
 @each $suffix, $values in $form {
 
-    $-collapse-font: map-get($values, 'font');
-    $-collapse-size: map-get($values, 'size');
-    $-collapse-radius: map-get($values, 'radius');
-    $-collapse-ratio: map-get($values, 'ratio');
+    $-collapse-font: map.get($values, 'font');
+    $-collapse-size: map.get($values, 'size');
+    $-collapse-radius: map.get($values, 'radius');
+    $-collapse-ratio: map.get($values, 'ratio');
 
     .n-collapse--#{$suffix} .n-collapse-item {
         margin-top: $-collapse-size * $-collapse-ratio;

package/src/config/src/builder/builder.scss

@@ -1,3 +1,7 @@
+@use 'sass:map';
+@use "sass:color";
+@import "../../../root/vars";
+
 .n-builder {
     overflow: hidden;
     border: 1px solid rgba($color-black, 0.1);
@@ -29,39 +33,39 @@
 }
 
 .n-builder__element > .n-builder__frame {
-    background: mix($color-gray-05, map-get($colors-tags, '0'), 90%);
+    background: color.mix($color-gray-05, map.get($colors-tags, '0'), 90%);
 }
 
 .n-builder__element > .n-builder__frame .n-builder__element {
-    border-left: 2px solid map-get($colors-tags, '0');
-    border-right: 2px solid map-get($colors-tags, '0');
+    border-left: 2px solid map.get($colors-tags, '0');
+    border-right: 2px solid map.get($colors-tags, '0');
 }
 
 .n-builder__element .n-builder__element > .n-builder__frame {
-    background: mix($color-gray-05, map-get($colors-tags, '1'), 90%);
+    background: color.mix($color-gray-05, map.get($colors-tags, '1'), 90%);
 }
 
 .n-builder__element .n-builder__element > .n-builder__frame .n-builder__element {
-    border-left: 2px solid map-get($colors-tags, '1');
-    border-right: 2px solid map-get($colors-tags, '1');
+    border-left: 2px solid map.get($colors-tags, '1');
+    border-right: 2px solid map.get($colors-tags, '1');
 }
 
 .n-builder__element .n-builder__element .n-builder__element > .n-builder__frame {
-    background: mix($color-gray-05, map-get($colors-tags, '2'), 90%);
+    background: color.mix($color-gray-05, map.get($colors-tags, '2'), 90%);
 }
 
 .n-builder__element .n-builder__element .n-builder__element > .n-builder__frame .n-builder__element {
-    border-left: 2px solid map-get($colors-tags, '2');
-    border-right: 2px solid map-get($colors-tags, '2');
+    border-left: 2px solid map.get($colors-tags, '2');
+    border-right: 2px solid map.get($colors-tags, '2');
 }
 
 .n-builder__element .n-builder__element .n-builder__element .n-builder__element > .n-builder__frame {
-    background: mix($color-gray-05, map-get($colors-tags, '3'), 90%);
+    background: color.mix($color-gray-05, map.get($colors-tags, '3'), 90%);
 }
 
 .n-builder__element .n-builder__element .n-builder__element .n-builder__element > .n-builder__frame .n-builder__element {
-    border-left: 2px solid map-get($colors-tags, '3');
-    border-right: 2px solid map-get($colors-tags, '3');
+    border-left: 2px solid map.get($colors-tags, '3');
+    border-right: 2px solid map.get($colors-tags, '3');
 }
 
 div:not(.n-builder__body) > .n-builder__frame {
@@ -219,7 +223,7 @@ div:not(.n-builder__body) > .n-builder__frame {
 
 .n-builder__output {
     padding: 20px;
-    color: mix($color-primary, $color-white, 50%);
+    color: color.mix($color-primary, $color-white, 50%);
     background: $color-black;
     border-radius: $md-radius;
 }

package/src/config/src/reference-panel/reference-panel.scss

@@ -1,3 +1,6 @@
+@use "sass:color";
+@import "../../../root/vars";
+
 .n-reference-panel {
     position: relative;
     display: flex;
@@ -153,24 +156,24 @@
 }
 
 .n-reference-panel__item--function .n-reference-panel__type {
-    color: rgba(darken($color-success, 20%), 0.7);
+    color: rgba(color.adjust($color-success, $lightness: -20%), 0.7);
     background: rgba($color-success, 0.2);
 }
 
 .n-reference-panel__item--string .n-reference-panel__type,
 .n-reference-panel__item--boolean .n-reference-panel__type,
 .n-reference-panel__item--number .n-reference-panel__type {
-    color: rgba(darken($color-warning, 20%), 0.7);
+    color: rgba(color.adjust($color-warning, $lightness: -20%), 0.7);
     background: rgba($color-warning, 0.2);
 }
 
 .n-reference-panel__item--array .n-reference-panel__type {
-    color: rgba(darken($color-danger, 20%), 0.7);
+    color: rgba(color.adjust($color-danger, $lightness: -20%), 0.7);
     background: rgba($color-danger, 0.2);
 }
 
 .n-reference-panel__item--object .n-reference-panel__type {
-    color: rgba(darken($color-info, 30%), 0.7);
+    color: rgba(color.adjust($color-info, $lightness: -30%), 0.7);
     background: rgba($color-info, 0.2);
 }
 

package/src/confirm/src/confirm/confirm.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-confirm {
@@ -33,10 +34,10 @@
 
 @each $suffix, $values in $form {
 
-    $-confirm-font: map-get($values, 'font');
-    $-confirm-size: map-get($values, 'size');
-    $-confirm-radius: map-get($values, 'radius');
-    $-confirm-ratio: map-get($values, 'ratio');
+    $-confirm-font: map.get($values, 'font');
+    $-confirm-size: map.get($values, 'size');
+    $-confirm-radius: map.get($values, 'radius');
+    $-confirm-ratio: map.get($values, 'ratio');
 
     .n-confirm--#{$suffix} {
         font-size: $-confirm-font;

package/src/datepicker/src/datepicker/datepicker.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-datepicker {
@@ -120,10 +121,10 @@
 
 @each $suffix, $values in $form {
 
-    $-datepicker-font: map-get($values, 'font');
-    $-datepicker-size: map-get($values, 'size');
-    $-datepicker-radius: map-get($values, 'radius');
-    $-datepicker-ratio: map-get($values, 'ratio');
+    $-datepicker-font: map.get($values, 'font');
+    $-datepicker-size: map.get($values, 'size');
+    $-datepicker-radius: map.get($values, 'radius');
+    $-datepicker-ratio: map.get($values, 'ratio');
 
     .n-datepicker--#{$suffix} {
         min-height: $-datepicker-size;

package/src/datepicker/src/datepicker-panel/datepicker-panel.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-datepicker-panel {
@@ -121,10 +122,10 @@
 
 @each $suffix, $values in $form {
 
-    $-datepicker-panel-font: map-get($values, 'font');
-    $-datepicker-panel-size: map-get($values, 'size');
-    $-datepicker-panel-radius: map-get($values, 'radius');
-    $-datepicker-panel-ratio: map-get($values, 'ratio');
+    $-datepicker-panel-font: map.get($values, 'font');
+    $-datepicker-panel-size: map.get($values, 'size');
+    $-datepicker-panel-radius: map.get($values, 'radius');
+    $-datepicker-panel-ratio: map.get($values, 'ratio');
 
     .n-datepicker-panel--#{$suffix} {
         font-size: $-datepicker-panel-font;

package/src/datetimepicker/src/datetimepicker/datetimepicker.js

@@ -309,10 +309,6 @@ export default {
             'n-datetimepicker__display'
         ];
 
-        if ( this.range ) {
-            classList.push('n-range');
-        }
-
         return (
             <div class={classList}>
                 { this.ctor('renderLabelClear')() }

package/src/datetimepicker/src/datetimepicker/datetimepicker.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-datetimepicker {
@@ -137,10 +138,10 @@
 
 @each $suffix, $values in $form {
 
-    $-datepicker-font: map-get($values, 'font');
-    $-datepicker-size: map-get($values, 'size');
-    $-datepicker-radius: map-get($values, 'radius');
-    $-datepicker-ratio: map-get($values, 'ratio');
+    $-datepicker-font: map.get($values, 'font');
+    $-datepicker-size: map.get($values, 'size');
+    $-datepicker-radius: map.get($values, 'radius');
+    $-datepicker-ratio: map.get($values, 'ratio');
 
     .n-datetimepicker--#{$suffix} {
         min-height: $-datepicker-size;

package/src/draggable/src/draggrid/draggrid.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-draggrid__empty {
@@ -6,10 +7,10 @@
 
 @each $suffix, $values in $form {
 
-    $-draggrid-font: map-get($values, 'font');
-    $-draggrid-size: map-get($values, 'size');
-    $-draggrid-radius: map-get($values, 'radius');
-    $-draggrid-ratio: map-get($values, 'ratio');
+    $-draggrid-font: map.get($values, 'font');
+    $-draggrid-size: map.get($values, 'size');
+    $-draggrid-radius: map.get($values, 'radius');
+    $-draggrid-ratio: map.get($values, 'ratio');
 
     .n-draggrid--#{$suffix} {
         font-size: $-draggrid-font;

package/src/draggable/src/draggrid-item/draggrid-item.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-draggrid-item {
@@ -60,10 +61,10 @@
 
 @each $suffix, $values in $form {
 
-    $-draggrid-font: map-get($values, 'font');
-    $-draggrid-size: map-get($values, 'size');
-    $-draggrid-radius: map-get($values, 'radius');
-    $-draggrid-ratio: map-get($values, 'ratio');
+    $-draggrid-font: map.get($values, 'font');
+    $-draggrid-size: map.get($values, 'size');
+    $-draggrid-radius: map.get($values, 'radius');
+    $-draggrid-ratio: map.get($values, 'ratio');
 
     .n-draggrid--#{$suffix} {
         font-size: $-draggrid-font;

package/src/draggable/src/draglist/draglist.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-draglist__empty {
@@ -6,10 +7,10 @@
 
 @each $suffix, $values in $form {
 
-    $-draglist-font: map-get($values, 'font');
-    $-draglist-size: map-get($values, 'size');
-    $-draglist-radius: map-get($values, 'radius');
-    $-draglist-ratio: map-get($values, 'ratio');
+    $-draglist-font: map.get($values, 'font');
+    $-draglist-size: map.get($values, 'size');
+    $-draglist-radius: map.get($values, 'radius');
+    $-draglist-ratio: map.get($values, 'ratio');
 
     .n-draglist--#{$suffix} {
         font-size: $-draglist-font;

package/src/draggable/src/draglist-item/draglist-item.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-draglist-item {
@@ -73,10 +74,10 @@
 
 @each $suffix, $values in $form {
 
-    $-draglist-font: map-get($values, 'font');
-    $-draglist-size: map-get($values, 'size');
-    $-draglist-radius: map-get($values, 'radius');
-    $-draglist-ratio: map-get($values, 'ratio');
+    $-draglist-font: map.get($values, 'font');
+    $-draglist-size: map.get($values, 'size');
+    $-draglist-radius: map.get($values, 'radius');
+    $-draglist-ratio: map.get($values, 'ratio');
 
     .n-draglist--#{$suffix} {
         font-size: $-draglist-font;

package/src/draggable/src/dropzone/dropzone.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-dropzone__empty {
@@ -6,10 +7,10 @@
 
 @each $suffix, $values in $form {
 
-    $-dropzone-font: map-get($values, 'font');
-    $-dropzone-size: map-get($values, 'size');
-    $-dropzone-radius: map-get($values, 'radius');
-    $-dropzone-ratio: map-get($values, 'ratio');
+    $-dropzone-font: map.get($values, 'font');
+    $-dropzone-size: map.get($values, 'size');
+    $-dropzone-radius: map.get($values, 'radius');
+    $-dropzone-ratio: map.get($values, 'ratio');
 
     .n-dropzone--#{$suffix} {
         font-size: $-dropzone-font;

package/src/drawer/index.js

@@ -0,0 +1,5 @@
+import Modal from './src/drawer/drawer';
+
+export default function (App) {
+    App.component(Modal.name, Modal);
+}

package/src/drawer/index.scss

@@ -0,0 +1 @@
+@import "./src/drawer/drawer";