@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/radio/src/radio-group/radio-group.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-radio-group {
     display: flex;
@@ -21,35 +20,26 @@
     align-items: flex-start;
 }
 
-@each $suffix, $values in $form {
-
-    $-radio-group-font: map.get($values, 'font');
-    $-radio-group-size: map.get($values, 'size');
-    $-radio-group-radius: map.get($values, 'radius');
-    $-radio-group-ratio: map.get($values, 'ratio');
-
-    .n-radio-group--#{$suffix}.n-radio-group--horizontal .n-radio {
-        $min-height: 0;
-    }
-
-    .n-radio-group--#{$suffix}.n-radio-group--horizontal .n-radio:not(:first-child) {
-        margin-left: $-radio-group-size * $-radio-group-ratio;
-    }
+.n-radio-group.n-radio-group--horizontal .n-radio {
+    min-height: 0;
+}
 
-    .n-radio-group--#{$suffix}.n-radio-group--horizontal .n-radio:last-child {
-        padding-right: 0;
-    }
+.n-radio-group.n-radio-group--horizontal .n-radio:not(:first-child) {
+    margin-left: size('base-pad', 'calc($ * 1.2)');
+}
 
-    .n-radio-group--#{$suffix}.n-radio-group--vertical .n-radio {
-        min-height: 0;
-    }
+.n-radio-group.n-radio-group--horizontal .n-radio:last-child {
+    padding-right: 0;
+}
 
-    .n-radio-group--#{$suffix}.n-radio-group--vertical .n-radio:not(:first-child) {
-        margin-top: $-radio-group-size * $-radio-group-ratio * 0.5;
-    }
+.n-radio-group.n-radio-group--vertical .n-radio {
+    min-height: 0;
+}
 
-    .n-radio-group--#{$suffix}.n-radio-group--vertical .n-radio:last-child {
-        padding-bottom: 0;
-    }
+.n-radio-group.n-radio-group--vertical .n-radio:not(:first-child) {
+    margin-top: size('base-pad-vertical', 'calc($ * 0.7)');
+}
 
+.n-radio-group.n-radio-group--vertical .n-radio:last-child {
+    padding-bottom: 0;
 }

package/src/rating/index.scss

@@ -1 +1 @@
-@import "./src/rating/rating";
+@forward "./src/rating/rating";

package/src/rating/src/rating/rating.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-rating {
     overflow: hidden;
@@ -8,6 +7,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
+    font-size: size('base-font');
 }
 
 .n-rating__stars {
@@ -22,6 +22,12 @@
     flex: 0 0 auto;
     position: relative;
     display: block;
+    width: size('base-hgt', 'calc($ * 0.45)');
+    height: size('base-hgt', 'calc($ * 0.45)');
+}
+
+.n-rating__stars span:not(:last-child) {
+    margin-right: size('base-pad', 'calc($ * 0.3)');
 }
 
 .n-rating__stars span:before,
@@ -65,35 +71,11 @@
     text-overflow: ellipsis;
 }
 
-@each $suffix, $values in $form {
-
-    $-rating-font: map.get($values, 'font');
-    $-rating-size: map.get($values, 'size');
-    $-rating-radius: map.get($values, 'radius');
-    $-rating-ratio: map.get($values, 'ratio');
-
-    $-rating-star: $-rating-size * $-rating-ratio * 1.2;
-
-    .n-rating--#{$suffix} {
-        font-size: $-rating-font;
-    }
-
-    .n-rating--#{$suffix} .n-rating__stars span {
-        width: $-rating-star;
-        height: $-rating-star;
-    }
-
-    .n-rating--#{$suffix} .n-rating__stars span:not(:last-child) {
-        margin-right: $-rating-star / 4;
-    }
-
-    .n-rating--#{$suffix} .n-rating__stars span:before,
-    .n-rating--#{$suffix} .n-rating__stars span:after {
-        background-size: $-rating-star $-rating-star;
-    }
-
-    .n-rating--#{$suffix} .n-rating__value {
-        margin-left: $-rating-star;
-    }
-
+.n-rating .n-rating__value {
+    margin-left: size('base-pad');
 }
+
+.n-rating .n-rating__value {
+    font-size: size('base-fnt');
+    margin-left: size('base-pad');
+}

package/src/resizer/index.scss

@@ -1 +1 @@
-@import "./src/resizer/resizer";
+@forward "./src/resizer/resizer";

package/src/resizer/src/resizer/resizer-next.jsx

@@ -4,14 +4,6 @@ export default {
 
     name: 'NResizer',
 
-    inject: {
-
-        NScrollbar: {
-            default: undefined
-        }
-
-    },
-
     props: {
 
         modelValue: {
@@ -27,7 +19,7 @@ export default {
             {
                 return '';
             },
-            type: [String]
+            type: [Number, String]
         },
 
         flex: {
@@ -70,6 +62,14 @@ export default {
             type: [Boolean]
         },
 
+        type: {
+            default()
+            {
+                return 'primary';
+            },
+            type: [String]
+        },
+
         position: {
             default()
             {
@@ -146,6 +146,10 @@ export default {
             this.getWidthDebounced();
         }
 
+        Event.bind('NScrollbar:paused', (...args) => {
+            this.updateRemoteWidth(...args)
+        }, this._.uid);
+
         Event.bind('NResizer:move', (...args) => {
             this.forceWidth(...args)
         }, this._.uid);
@@ -153,15 +157,13 @@ export default {
         this.updateHandle();
     },
 
-    updated()
-    {
-        this.getWidthDebounced();
-    },
-
     unmounted()
     {
         this.observer.disconnect();
 
+        Event.unbind('NScrollbar:paused',
+            this._.uid);
+
         Event.unbind('NResizer:move',
             this._.uid);
     },
@@ -170,6 +172,10 @@ export default {
 
         getWidthDebounced()
         {
+            if ( Dom.find(this.$el).inside('.n-paused') ) {
+                return;
+            }
+
             let now = this.$el.getBoundingClientRect();
 
             if ( Any.isEqual(this.last || {}, now) ) {
@@ -204,6 +210,13 @@ export default {
             Dom.find(this.$el).css(style);
         },
 
+        updateRemoteWidth(el)
+        {
+            if ( Dom.find(el).contains(this.$el) ) {
+                this.updateWidth();
+            }
+        },
+
         updateWidth()
         {
             let width = Dom.find(this.$el).width();
@@ -214,8 +227,6 @@ export default {
 
             this.$emit('updateWidth', this.tempValue = width);
 
-            Event.fire('NResizer:changed');
-
             this.updateHandle();
         },
 
@@ -277,8 +288,8 @@ export default {
             let scrollX = Dom.find(this.$el)
                 .scroll('right');
 
-            let targetWidth = (this.clientX + scrollX - offsetX) -
-                (this.resizerWidth * 2);
+            let targetWidth = (this.clientX + scrollX - offsetX) +
+                (this.resizerWidth * 0.5);
 
             if ( this.minWidth ) {
                 targetWidth = Math.max(targetWidth,
@@ -290,6 +301,8 @@ export default {
                     this.maxWidth - this.resizerWidth);
             }
 
+            console.log('aaaaa')
+
             let style = {
                 transform: `translateX(-${targetWidth - this.resizerWidth}px)`
             };
@@ -315,8 +328,8 @@ export default {
             let scrollX = Dom.find(this.$el)
                 .scroll('right');
 
-            let targetWidth = this.clientX + scrollX - offsetX -
-                (this.resizerWidth * 2);
+            let targetWidth = this.clientX + scrollX - offsetX +
+                (this.resizerWidth * 0.5);
 
             if ( this.minWidth ) {
                 targetWidth = Math.max(targetWidth, this.minWidth);
@@ -497,6 +510,7 @@ export default {
     {
         let classList = [
             'n-resizer',
+            'n-resizer--' + this.type,
             'n-resizer--' + this.position,
         ];
 
@@ -506,6 +520,12 @@ export default {
             style['flex'] = this.flex;
         }
 
+        let width = this.width;
+
+        if ( Any.isNumber(width) ) {
+            width = width + 'px';
+        }
+
         if ( !Any.isEmpty(this.width) ) {
             style['width'] = this.width;
         }

package/src/resizer/src/resizer/resizer.scss

@@ -1,4 +1,4 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-resizer {
     position: relative;

package/src/root/helpers.scss

@@ -0,0 +1,41 @@
+@use "sass:color";
+@use "sass:string";
+
+@mixin css-colors($colors, $prefix: '') {
+    @each $name, $color in $colors {
+        --n-color#{$prefix}-#{$name}: #{color.channel($color, 'red')}, #{color.channel($color, 'green')}, #{color.channel($color, 'blue')};
+    }
+}
+
+@mixin css-sizes($sizes, $prefix: '') {
+    @each $name, $value in $sizes {
+        --n-size#{$prefix}-#{$name}: #{$value};
+    }
+}
+
+@mixin css-remaps($values, $source: '-color-default', $target: '-color-base') {
+    @each $name, $value in $values {
+        --n#{$target}-#{$name}: var(--n#{$source}-#{$name});
+    }
+}
+
+@function string-replace($string, $search, $replace: "") {
+    $i: string.index($string, $search);
+
+    @if not $i {
+        @return $string;
+    }
+
+    $string: string.slice($string, 1, $i - 1) + $replace +
+        string.slice($string, $i + string.length($search));
+
+    @return string-replace($string, $search, $replace);
+}
+
+@function color($color, $opacity: 1) {
+    @return string.unquote("rgba(var(--n-color-#{$color}), #{$opacity})")
+};
+
+@function size($size, $context: '$') {
+    @return string.unquote(string-replace($context, "$", "var(--n-size-#{$size})"));
+};

package/src/root/image/angle-down-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 1 L8 8 L15 1 Z" fill="#000" />
+</svg>

package/src/root/image/angle-down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 0 L8 7 L15 0 Z" fill="#000" />
+</svg>

package/src/root/image/angle-left-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 15 L0 8 L7 1 Z" fill="#000" />
+</svg>

package/src/root/image/angle-left.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 15 L1 8 L8 1 Z" fill="#000" />
+</svg>

package/src/root/image/angle-right-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 15 L8 8 L1 1 Z" fill="#000" />
+</svg>

package/src/root/image/angle-right.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 15 L7 8 L0 1 Z" fill="#000" />
+</svg>

package/src/root/image/angle-up-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 7 L8 0 L15 7 Z" fill="#000" />
+</svg>

package/src/root/image/angle-up.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 8 L8 1 L15 8 Z" fill="#000" />
+</svg>

package/src/root/image/empty-ufo.svg

@@ -0,0 +1,8 @@
+<svg width="320" height="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="160.5" cy="270" rx="106.5" ry="32" fill-opacity="0.3" />
+<path d="M216.8,94.2c0-8.7-25.2-15.8-56.3-15.8s-56.3,7.1-56.3,15.8l3.6,10c0-8.2,23.6-14.8,52.8-14.8 s52.8,6.6,52.8,14.8L216.8,94.2z" fill-opacity="0.7" />
+<path d="M160.5,238c51.7,0,94.9,11.1,104.5,25.8l-51.7-159.6c0-8.2-23.6-14.8-52.8-14.8s-52.8,6.6-52.8,14.8L56,263.8 C65.6,249.1,108.8,238,160.5,238z" fill-opacity="0.15" />
+<path d="M160.5,40c17.2,0,33.2,1.8,47.4,4.8c-5.2-14.9-24.4-26-47.4-26s-42.2,11.1-47.4,26 C127.3,41.9,143.3,40,160.5,40z" fill-opacity="0.6" />
+<path d="M160.5,50.7C100,50.7,51,64,51,80.4c0,11.2,22.6,20.9,56,26l0.7-2.3l-3.6-10c0-8.7,25.2-15.8,56.3-15.8s56.3,7.1,56.3,15.8 l-3.6,10l0.7,2.3c33.4-5.1,56-14.8,56-26C270,64,221,50.7,160.5,50.7z" fill-opacity="1" />
+<path d="M160.5,50.7C221,50.7,270,64,270,80.4C270,64,223.2,40,160.5,40S51,64,51,80.4C51,64,100,50.7,160.5,50.7z" fill-opacity="0.3" />
+</svg>

package/src/root/image/empty.svg

@@ -0,0 +1,10 @@
+<svg width="320" height="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
+    <path d="M99,191.8c1.7,0,3.3,1,3.9,2.6l6.8,15.7c1.7,3.9,5.6,6.5,9.9,6.5H204c4.3,0,8.2-2.5,9.9-6.5l6.8-15.7 c0.7-1.6,2.2-2.6,3.9-2.6h22.5v-82h-48.6c-14.8,0-26.7-12-26.7-26.7V34.5H94.3c-9.8,0-17.8,8-17.8,17.8v139.5H99z" fill-opacity="0.2" />
+    <path d="M198.5,109.8h48.6l-75.4-75.4v48.6C171.8,97.9,183.7,109.8,198.5,109.8z" fill-opacity="0.4"/>
+    <path d="M141.8,107.4h-24.1c-3.8,0-7-3.1-7-7l0,0c0-3.8,3.1-7,7-7h24.1c3.8,0,7,3.1,7,7l0,0 C148.7,104.3,145.6,107.4,141.8,107.4z" fill-opacity="0.6" />
+    <path d="M210.9,152.2h-92.5c-4.2,0-7.6-3.4-7.6-7.6v0c0-4.2,3.4-7.6,7.6-7.6h92.5c4.2,0,7.6,3.4,7.6,7.6v0 C218.6,148.8,215.2,152.2,210.9,152.2z" fill-opacity="0.6" />
+    <path d="M210.9,188.6h-92.5c-4.2,0-7.6-3.4-7.6-7.6v0c0-4.2,3.4-7.6,7.6-7.6h92.5c4.2,0,7.6,3.4,7.6,7.6v0 C218.6,185.1,215.2,188.6,210.9,188.6z" fill-opacity="0.6" />
+    <path d="M220.7,194.4l-6.8,15.7c-1.7,3.9-5.6,6.5-9.9,6.5h-84.3c-4.3,0-8.2-2.5-9.9-6.5l-6.8-15.7 c-0.7-1.6-2.2-2.6-3.9-2.6H37V278c0,5.9,4.8,10.8,10.8,10.8h228.1c5.9,0,10.8-4.8,10.8-10.8v-86.1h-62 C222.9,191.8,221.4,192.8,220.7,194.4z" fill-opacity="0.5" />
+    <polygon points="76.5,142 37,191.8 76.5,191.8" fill-opacity="1" />
+    <polygon points="247.1,142 247.1,191.8 286.6,191.8" fill-opacity="1" />
+</svg>

package/src/root/image/star.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+	<path d="M15.891,0.561l4.097,8.408l9.16,1.348c0.815,0.12,1.14,1.135,0.551,1.717l-6.629,6.545l1.565,9.242
+		c0.139,0.822-0.713,1.449-1.442,1.061L15,24.519l-8.193,4.363c-0.729,0.388-1.581-0.239-1.442-1.061l1.565-9.242l-6.629-6.545
+		c-0.59-0.582-0.264-1.597,0.551-1.717l9.16-1.348l4.097-8.408C14.473-0.187,15.527-0.187,15.891,0.561z" fill="#000" />
+</svg>

package/src/root/vars.scss

@@ -34,8 +34,10 @@ $color-warning:         #FFBF3F !default;
 $color-danger:          #F9536E !default;
 $color-info:            #4BD6F9 !default;
 
-$color-shadow:              #000 !default;
-
+$color-shadow:          #000000 !default;
+$color-form:            $color-gray-05 !default;
+$color-input:           $color-white !default;
+$color-input-off:       $color-gray-10 !default;
 
 $color-white-light:         $color-white !default;
 $color-white-lighter:       $color-white !default;
@@ -183,4 +185,4 @@ $colors-tags: (
         '17': color.mix($color-danger, $color-warning, 65%),
         '18': color.mix($color-success, $color-warning, 65%),
         '19': color.mix($color-warning, $color-warning, 65%),
-) !default;
+) !default;

package/src/scrollbar/index.js

@@ -1,7 +1,5 @@
 import Scrollbar from "./src/scrollbar/scrollbar.jsx";
-import ScrollbarNext from "./src/scrollbar-next/scrollbar-next.jsx";
 
 export default function (App) {
-    // App.component(Scrollbar.name, Scrollbar);
-    App.component(ScrollbarNext.name, ScrollbarNext);
+    App.component(Scrollbar.name, Scrollbar);
 }

package/src/scrollbar/index.scss

@@ -1,2 +1 @@
-@import "./src/scrollbar/scrollbar";
-@import "./src/scrollbar-next/scrollbar-next";
+@forward "./src/scrollbar/scrollbar";