@kizmann/nano-ui 1.0.15 → 1.1.0

package/src/virtualscroller/src/virtualscroller/virtualscroller.jsx

@@ -107,7 +107,7 @@ export default {
         useKeys: {
             default()
             {
-                return false;
+                return true;
             },
             type: [Boolean]
         },
@@ -136,15 +136,15 @@ export default {
     beforeMount()
     {
         this.scrollTop = 0;
+        this.init = false;
+        this.ready = [];
     },
 
     mounted()
     {
-
         this.bindAdaptScroll()
     },
 
-
     beforeUnmount()
     {
         this.unbindAdaptScroll()
@@ -152,6 +152,25 @@ export default {
 
     methods: {
 
+        callWhenReady(cb)
+        {
+            if ( this.init ) {
+                return cb.call(this);
+            }
+
+            this.ready.push(cb);
+        },
+
+        clearWhenReady()
+        {
+            console.log('ready and clear', this.ready);
+            Arr.each(this.ready, cb => {
+                cb.call(this);
+            });
+
+            this.ready = [];
+        },
+
         bindAdaptScroll()
         {
             this.refreshScroll = setInterval(this.onScrollupdate,
@@ -192,9 +211,9 @@ export default {
             this.$refs.scrollbar.scrollIntoView(selector);
         },
 
-        scrollToIndex(index, delay = 0)
+        scrollToIndex(index)
         {
-            Any.delay(() => this.onScrollToIndex(index), delay);
+            this.callWhenReady(() => this.onScrollToIndex(index))
         },
 
         onScrollToIndex(index)
@@ -218,15 +237,18 @@ export default {
                 return this.scrollTo(0, targetTop);
             }
 
-            targetTop = targetTop - this.height +
-                this.itemHeight;
+            targetTop = targetTop - this.height;
+
+            if ( targetTop > this.scrollTop ) {
+                targetTop += this.itemHeight
+            }
 
             this.scrollTo(0, targetTop);
         },
 
-        scrollTo(x = 0, y = 0, delay = 0)
+        scrollTo(x = 0, y = 0)
         {
-            Any.delay(() => this.onScrollTo(x, y), delay);
+            this.callWhenReady(() => this.onScrollTo(x, y));
         },
 
         onScrollTo(x = 0, y = 0)
@@ -235,7 +257,13 @@ export default {
                 return;
             }
 
-            this.$refs.scrollbar.scrollTo(x, y);
+            this.scrollTop = y;
+
+            let cb = () => {
+                this.$refs.scrollbar.scrollTo(x, y);
+            };
+
+            this.refreshDriver(false, cb);
         },
 
         clearState()
@@ -252,7 +280,7 @@ export default {
             this.scrollTop = this.$refs.scrollbar.
                 $refs.content.scrollTop;
 
-            Any.async(this.refreshDriver);
+            this.refreshDriver(false);
         },
 
         onScrollupdate()
@@ -270,43 +298,44 @@ export default {
 
             this.scrollTop = scrollTop;
 
-            let offset = this.$refs.scrollbar.$el.offsetHeight -
-                this.$refs.scrollbar.$el.clientHeight;
-
-            let isOutOfRange = scrollTop < 0 || scrollTop + this.height
-                > this.$refs.inner.scrollHeight + offset;
-
-            if ( isOutOfRange ) {
-                return;
-            }
-
             Any.async(this.refreshDriver);
         },
 
-        onSizechange(height, width, el)
+        onSizechange(width, height)
         {
-            this.width = width;
-            this.height = height;
+            let init = [
+                this.width === 0, this.height === 0
+            ];
+
+            [this.width, this.height] = [
+                width, height
+            ];
+
+            this.init = Arr.has(init, true);
+
+            if ( this.init ) {
+                this.clearWhenReady();
+            }
 
             Any.async(this.refreshDriver);
         },
 
 
-        refreshDriver(queue = true)
+        refreshDriver(queue = true, callback = null)
         {
             if ( Any.isEmpty(this.timer) ) {
                 this.timer = Date.now();
             }
 
-            if ( Date.now() - this.timer > 20 ) {
+            if ( Date.now() - this.timer > 30 ) {
                 queue = false;
             }
 
             clearTimeout(this.to);
 
             this.to = setTimeout(() => {
-                this.refreshDriver(false);
-            }, 25);
+                this.refreshDriver(false, callback);
+            }, 35);
 
             if ( queue ) {
                 return;
@@ -356,6 +385,10 @@ export default {
             }
 
             this.state = state;
+
+            if ( Any.isFunction(callback) ) {
+                callback.call(this);
+            }
         },
 
     },
@@ -495,14 +528,14 @@ export default {
         };
 
         let style = {
-            'overflow-y': 'hidden'
+            'overflow-y': 'hidden',
         };
 
         let totalHeight = Math.ceil(this.items.length / this.state.grid) *
             this.itemHeight;
 
         if ( this.threshold && this.items.length ) {
-            style.height = Math.ceil(totalHeight + this.offsetY) + 'px';
+            style.height = totalHeight + 'px';
         }
 
         return (

package/src/virtualscroller/src/virtualscroller/virtualscroller.scss

@@ -9,6 +9,7 @@
 
 .n-virtualscroller__inner {
     position: relative;
+    width: 100%;
 }
 
 .n-virtualscroller__row {

package/themes/glossy/button/index.scss

@@ -0,0 +1,2 @@
+@import "./src/button/button";
+@import "./src/button-group/button-group";

package/themes/glossy/button/src/button/button.scss

@@ -0,0 +1,116 @@
+@use "sass:map";
+@import "../../../root/vars";
+
+.n-button.n-disabled {
+    opacity: 0.7;
+}
+
+.n-button {
+    overflow: hidden;
+    position: relative;
+    box-shadow: inset 0 -1px 3px rgba($color-foreground, 0.07);
+}
+
+.n-button--default:not(.n-button--link,.n-button--glass) {
+    color: rgba($color-foreground, 0.8);
+    background: rgba($color-foreground, 0.1);
+}
+
+.n-button--default:not(.n-button--link,.n-button--glass):hover {
+    color: rgba($color-foreground, 0.9);
+    background: rgba($color-foreground, 0.15);
+}
+
+.n-button--default:not(.n-button--link,.n-button--glass).n-disabled {
+    color: rgba($color-foreground, 0.8);
+    background: rgba($color-foreground, 0.1);
+}
+
+.n-button--default.n-button--link:not(.n-disabled) {
+    color: rgba($color-foreground, 0.8);
+}
+
+.n-button--default.n-button--link:not(.n-disabled):hover {
+    color: rgba($color-foreground, 0.9);
+}
+
+.n-button--default.n-button--glass:not(.n-disabled) {
+    color: rgba($color-foreground, 0.8);
+    background: rgba($color-foreground, 0.1);
+}
+
+.n-button--default.n-button--glass:not(.n-disabled):hover {
+    color: rgba($color-foreground, 0.9);
+    background: rgba($color-foreground, 0.15);
+}
+
+.n-button:not(.n-button--link,.n-button--glass,.n-disabled):before {
+    z-index: 1;
+    content: '\00a0';
+    position: absolute;
+    top: -20%;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 200%;
+    max-height: 60%;
+    mix-blend-mode: overlay;
+    filter: blur(10px);
+    opacity: 0.4;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+}
+
+.n-button:not(.n-button--link,.n-disabled):hover:before {
+    z-index: 0;
+    opacity: 0.7;
+    max-height: 120%;
+}
+
+.n-button:not(.n-button--link,.n-button--glass,.n-disabled):before {
+    background-image:
+            radial-gradient(at 100% 20%, rgba($color-white, 0.5), transparent 80%),
+            radial-gradient(at 0% 100%, rgba($color-white, 1.0), transparent 60%);
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
+
+    /**
+     * Button primary
+     */
+
+    .n-button--#{$color}:not(.n-button--link,.n-button--glass) {
+        color: $color-white;
+        background: $-color-base;
+    }
+
+    .n-button--#{$color}:not(.n-button--link,.n-button--glass).n-disabled {
+        background: $-color-base;
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--glass {
+        color: $-color-dark;
+        background: rgba($-color-base, 0.25);
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--glass:hover {
+        color: $-color-dark;
+        background: rgba($-color-base, 0.30);
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--link {
+        color: $-color-dark;
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--link:hover {
+        color: $-color-base;
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--link:focus {
+        color: $-color-light;
+    }
+
+}

package/themes/glossy/button/src/button-group/button-group.scss

@@ -0,0 +1 @@
+@import "../../../root/vars";

package/themes/glossy/index-dark.scss

@@ -0,0 +1,3 @@
+@import "./root/vars-dark";
+
+@import "./index";

package/themes/glossy/index-light.scss

@@ -0,0 +1,3 @@
+@import "./root/vars-light";
+
+@import "./index";

package/themes/glossy/index.scss

@@ -0,0 +1,43 @@
+@import "../../src/index";
+
+@import "../macos/empty/index";
+@import "../macos/alert/index";
+@import "../macos/notification/index";
+@import "../macos/scrollbar/index";
+@import "../macos/resizer/index";
+@import "../macos/virtualscroller/index";
+@import "../macos/draggable/index";
+@import "../macos/loader/index";
+@import "../macos/file/index";
+@import "../macos/form/index";
+@import "../macos/input/index";
+@import "../macos/input-number/index";
+@import "../macos/textarea/index";
+@import "../macos/switch/index";
+@import "../macos/checkbox/index";
+@import "../macos/radio/index";
+@import "../macos/select/index";
+@import "../macos/cascader/index";
+@import "../macos/datepicker/index";
+@import "../macos/timepicker/index";
+@import "../macos/datetimepicker/index";
+@import "../macos/durationpicker/index";
+@import "../macos/transfer/index";
+@import "../macos/popover/index";
+@import "../macos/modal/index";
+@import "../macos/confirm/index";
+@import "../macos/table/index";
+@import "../macos/paginator/index";
+@import "../macos/tabs/index";
+@import "../macos/tags/index";
+@import "../macos/collapse/index";
+@import "../macos/info/index";
+@import "../macos/map/index";
+@import "../macos/rating/index";
+@import "../macos/slider/index";
+@import "../macos/drawer/index";
+
+@import "./button/index";
+
+@import "../macos/demo/index";
+

package/themes/glossy/root/image/empty-default.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 320 320" style="enable-background:new 0 0 320 320;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{opacity:0.4;}
+	.st2{opacity:0.6;}
+	.st3{opacity:0.5;}
+	.st4{opacity:0.8;}
+</style>
+<g id="Ebene_1_5_">
+	<path class="st0" 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"/>
+	<path class="st1" d="M198.5,109.8h48.6l-75.4-75.4v48.6C171.8,97.9,183.7,109.8,198.5,109.8z"/>
+	<path class="st2" 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"/>
+	<path class="st2" 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"/>
+	<path class="st2" 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"/>
+</g>
+<path class="st3" 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"/>
+<g class="st4">
+	<polygon points="76.5,142 37,191.8 76.5,191.8 	"/>
+	<polygon points="247.1,142 247.1,191.8 286.6,191.8 	"/>
+</g>
+</svg>

package/themes/glossy/root/image/empty-space.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 320 320" style="enable-background:new 0 0 320 320;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.3;enable-background:new    ;}
+	.st1{display:none;fill:#898E93;}
+	.st2{opacity:0.7;}
+	.st3{opacity:0.15;enable-background:new    ;}
+	.st4{opacity:0.5;fill:url(#SVGID_1_);enable-background:new    ;}
+	.st5{opacity:0.6;}
+	.st6{opacity:0.3;}
+</style>
+<ellipse class="st0" cx="160.5" cy="270" rx="106.5" ry="32"/>
+<rect x="141.6" y="125.7" transform="matrix(0.4341 -0.9009 0.9009 0.4341 -36.7959 214.9154)" class="st1" width="22.1" height="22.1"/>
+<circle class="st1" cx="192.8" cy="187.3" r="15.1"/>
+<path class="st1" d="M124.8,262.5l-15.3-52l52.9,11.7L124.8,262.5z"/>
+<path class="st2" 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"/>
+<path class="st3" 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"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="160.5" y1="123.1656" x2="160.5" y2="220.5235" gradientTransform="matrix(1 0 0 -1 0 322)">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<path class="st4" d="M160.5,89.3c-9.7,0-18.8,0.7-26.6,2L108,203.2h105L187.1,91.4C179.3,90.1,170.2,89.3,160.5,89.3z"/>
+<path class="st5" 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"/>
+<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"/>
+<path class="st6" 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"/>
+<image style="overflow:visible;" width="352" height="368" xlink:href="../../../../../Desktop/Screen Shot 2021-01-22 at 4.55.46 PM.png"  transform="matrix(0.5 0 0 0.5 -202.8271 18.7864)">
+</image>
+</svg>

package/themes/glossy/root/image/star-default.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g>
+	<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"/>
+</g>
+</svg>

package/themes/glossy/root/image/test.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path fill='#171717' fill-rule='evenodd' d='M0,0 H80 V80 H0 Z M0,20 Q0,0 20,0 H80 V80 H0 Z'/></svg>