@kizmann/nano-ui 1.0.15 → 1.1.2

package/src/transfer/src/transfer/transfer.jsx

@@ -316,6 +316,7 @@ export default {
             <div class="n-transfer__header">
                 { this.ctor('renderSourceSelect')() }
                 { this.ctor('renderSourceTitle')() }
+                { this.ctor('renderSourceSearch')() }
             </div>
         );
     },
@@ -416,6 +417,7 @@ export default {
             <div class="n-transfer__header">
                 { this.ctor('renderTargetSelect')() }
                 { this.ctor('renderTargetTitle')() }
+                { this.ctor('renderTargetSearch')() }
             </div>
         );
     },
@@ -524,7 +526,6 @@ export default {
             <div class={classList}>
                 <div class="n-transfer__panel">
                     { this.ctor('renderSourceHeader')() }
-                    { this.ctor('renderSourceSearch')() }
                     { this.ctor('renderSourceBody')() }
                 </div>
                 <div class="n-transfer__controls">
@@ -533,7 +534,6 @@ export default {
                 </div>
                 <div class="n-transfer__panel">
                     { this.ctor('renderTargetHeader')() }
-                    { this.ctor('renderTargetSearch')() }
                     { this.ctor('renderTargetBody')() }
                 </div>
             </div>

package/src/transfer/src/transfer/transfer.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-transfer {
     display: flex;
@@ -10,12 +9,12 @@
 
 .n-transfer__panel {
     overflow: hidden;
-    flex: 1 1 auto;
+    flex: 1 1 50%;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
-    min-height: 360px;
+    height: 360px;
     //border: 1px solid transparent;
 }
 
@@ -52,17 +51,8 @@
 }
 
 .n-transfer__search {
-    flex: 0 0 auto;
-}
-
-.n-transfer__search .n-input {
-    border: 0;
-    border-radius: 0;
-    background: transparent !important;
-}
-
-.n-transfer__search .n-input input {
-    min-height: 36px;
+    flex:  1 0 30%;
+    max-width: 220px;
 }
 
 .n-transfer__body {
@@ -84,50 +74,40 @@
     content: ')';
 }
 
-@each $suffix, $values in $form {
-
-    $-transfer-font: map.get($values, 'font');
-    $-transfer-size: map.get($values, 'size');
-    $-transfer-radius: map.get($values, 'radius');
-    $-transfer-ratio: map.get($values, 'ratio');
-
-    .n-transfer--#{$suffix} {
-        font-size: $-transfer-font;
-    }
-
-    .n-transfer--#{$suffix} .n-transfer__panel {
-        border-radius: $-transfer-radius + 2;
-    }
-
-    $-transfer-padding:  $-transfer-size * $-transfer-ratio;
+.n-transfer {
+    font-size: size('base-fnt');
+}
 
-    .n-transfer--#{$suffix} .n-transfer__header {
-        font-size: $-transfer-font + 2;
-        padding: $-transfer-padding * 0.5;
-    }
+.n-transfer__panel {
+    border-radius: size('base-rad');
+}
 
-    .n-transfer--#{$suffix} .n-transfer__title {
-        padding: 0 $-transfer-padding * 0.5;
-    }
+.n-transfer__header {
+    height: size('base-hgt', 'calc($ * 1.6)');
+    padding: 0 size('base-pad');
+}
 
-    .n-transfer--#{$suffix} .n-transfer__item-count {
-        margin-left: $-transfer-padding * 0.5;
-    }
+.n-transfer__title {
+    font-size: 1.05em;
+    padding: 0 size('base-pad');
+}
 
-    .n-transfer--#{$suffix} .n-transfer__controls {
-        padding: 0 $-transfer-padding;
-    }
+.n-transfer__item-count {
+    margin-left: size('base-pad', 'calc($ * 0.5)');
+}
 
-    .n-transfer--#{$suffix} .n-transfer__controls > button:not(:last-child) {
-        margin-bottom: $-transfer-padding * 0.5;
-    }
+.n-transfer__controls {
+    padding: 0 size('base-pad');
+}
 
-    .n-transfer--#{$suffix} .n-draglist-item {
-        padding: 0 $-transfer-padding * 0.5;
-    }
+.n-transfer__controls > button:not(:last-child) {
+    margin-bottom: size('base-pad-vertical');
+}
 
-    .n-transfer--#{$suffix} .n-transfer__body .n-draglist-item__element {
-        padding: 0 $-transfer-padding * 0.5;
-    }
+.n-transfer__body .n-draglist-item {
+    padding: 0 size('base-pad');
+}
 
+.n-transfer__body .n-draglist-item__element {
+    padding: 0 size('base-pad');
 }

package/src/virtualscroller/index.scss

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

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

@@ -75,7 +75,7 @@ export default {
         offsetY: {
             default()
             {
-                return 10;
+                return 0;
             },
             type: [Number]
         },
@@ -112,6 +112,14 @@ export default {
             type: [Boolean]
         },
 
+        uniqueProp: {
+            default()
+            {
+                return 'id';
+            },
+            type: [String]
+        },
+
     },
 
     data()
@@ -121,7 +129,7 @@ export default {
         };
 
         return {
-            state, buffer: [], width: 0, height: 0, load: true
+            state, buffer: [], width: 0, height: 0, init: false
         };
     },
 
@@ -136,15 +144,14 @@ export default {
     beforeMount()
     {
         this.scrollTop = 0;
+        this.ready = [];
     },
 
     mounted()
     {
-
         this.bindAdaptScroll()
     },
 
-
     beforeUnmount()
     {
         this.unbindAdaptScroll()
@@ -152,6 +159,24 @@ export default {
 
     methods: {
 
+        callWhenReady(cb)
+        {
+            if ( this.init ) {
+                return cb.call(this);
+            }
+
+            this.ready.push(cb);
+        },
+
+        clearWhenReady()
+        {
+            Arr.each(this.ready, cb => {
+                cb.call(this);
+            });
+
+            this.ready = [];
+        },
+
         bindAdaptScroll()
         {
             this.refreshScroll = setInterval(this.onScrollupdate,
@@ -192,17 +217,13 @@ 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)
         {
-            if ( ! this.$refs.scrollbar ) {
-                return;
-            }
-
             let total = Math.ceil(this.items.length /
                 this.state.grid);
 
@@ -215,27 +236,24 @@ export default {
             let targetTop = index * this.itemHeight;
 
             if ( this.scrollTop > targetTop ) {
-                return this.scrollTo(0, targetTop);
+                return this.onScrollTo(0, targetTop);
             }
 
-            targetTop = targetTop - this.height +
-                this.itemHeight;
-
-            this.scrollTo(0, targetTop);
+            this.onScrollTo(0, targetTop - this.height + this.itemHeight);
         },
 
-        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)
         {
-            if ( ! this.$refs.scrollbar ) {
-                return;
+            if ( this.$refs.scrollbar ) {
+                this.$refs.scrollbar.scrollTo(x, this.scrollTop = y);
             }
 
-            this.$refs.scrollbar.scrollTo(x, y);
+            this.refreshDriver(true);
         },
 
         clearState()
@@ -252,7 +270,7 @@ export default {
             this.scrollTop = this.$refs.scrollbar.
                 $refs.content.scrollTop;
 
-            Any.async(this.refreshDriver);
+            this.refreshDriver(false);
         },
 
         onScrollupdate()
@@ -270,43 +288,44 @@ export default {
 
             this.scrollTop = scrollTop;
 
-            let offset = this.$refs.scrollbar.$el.offsetHeight -
-                this.$refs.scrollbar.$el.clientHeight;
+            this.refreshDriver(true);
+        },
 
-            let isOutOfRange = scrollTop < 0 || scrollTop + this.height
-                > this.$refs.inner.scrollHeight + offset;
+        onSizechange(width, height)
+        {
+            let init = [
+                this.width === 0, this.height === 0
+            ];
 
-            if ( isOutOfRange ) {
-                return;
-            }
+            [this.width, this.height] = [
+                width, height
+            ];
 
-            Any.async(this.refreshDriver);
-        },
+            this.init |= Arr.has(init, true);
 
-        onSizechange(height, width, el)
-        {
-            this.width = width;
-            this.height = height;
+            if ( this.init ) {
+                this.clearWhenReady();
+            }
 
-            Any.async(this.refreshDriver);
+            this.refreshDriver(false);
         },
 
 
-        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 > 5 ) {
                 queue = false;
             }
 
             clearTimeout(this.to);
 
             this.to = setTimeout(() => {
-                this.refreshDriver(false);
-            }, 25);
+                this.refreshDriver(false, callback);
+            }, 10);
 
             if ( queue ) {
                 return;
@@ -356,6 +375,10 @@ export default {
             }
 
             this.state = state;
+
+            if ( Any.isFunction(callback) ) {
+                callback.call(this);
+            }
         },
 
     },
@@ -378,8 +401,8 @@ export default {
             'data-index': passed.index
         };
 
-        if ( this.NDraggable && this.useKeys ) {
-            props.key = passed.value[this.NDraggable.uniqueProp];
+        if ( this.uniqueProp && this.useKeys ) {
+            props.key = passed.value[this.uniqueProp];
         }
 
         let style = {};
@@ -395,7 +418,7 @@ export default {
             style.height = this.itemHeight + 'px';
         }
 
-        if ( this.state.grid !== 1 ) {
+        if ( this.itemWidth ) {
             style.width = this.itemWidth + 'px';
         }
 
@@ -486,6 +509,10 @@ export default {
             classList.push('n-virtualscroller--absolute');
         }
 
+        if ( this.init ) {
+            classList.push('n-state');
+        }
+
         let props = {
             overflowY: this.overflowY,
             overflowX: this.overflowX,
@@ -495,14 +522,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

@@ -1,4 +1,4 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-virtualscroller:before {
     z-index: 10 !important;
@@ -9,6 +9,7 @@
 
 .n-virtualscroller__inner {
     position: relative;
+    width: 100%;
 }
 
 .n-virtualscroller__row {
@@ -30,7 +31,8 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    justify-content: stretch;
+    justify-content: flex-start;
+    overflow: hidden;
 }
 
 .n-virtualscroller__row > .n-virtualscroller__item {

package/themes/default/alert/index.scss

@@ -0,0 +1 @@
+@forward "./src/alert/alert";

package/themes/default/alert/src/alert/alert.scss

@@ -0,0 +1,29 @@
+@use "../../../root/helpers" as *;
+
+.n-alert {
+    background: color('shadow', 0.8);
+    backdrop-filter: blur(1.5px);
+    transition: opacity 0.3s;
+}
+
+.n-alert:not(.n-ready) {
+    opacity: 0;
+}
+
+.n-alert-frame {
+    background: color('background');
+    transition: transform 0.3s;
+    box-shadow: 0 2px 20px color('shadow', 0.1), 0 0 2px color('shadow', 0.15);
+}
+
+.n-alert:not(.n-ready) .n-alert-frame {
+    transform: translateY(50px) scale(0.6);
+}
+
+.n-alert__text {
+    color: color('gray-40');
+}
+
+.n-alert__icon {
+    color: color('base-color');
+}

package/themes/default/button/index.scss

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

package/themes/default/button/src/button/button.scss

@@ -0,0 +1,87 @@
+@use "../../../root/helpers" as *;
+
+.n-button {
+    transition: opacity 0.2s, color 0.2s, background 0.2s;
+}
+
+.n-button.n-disabled {
+    color: color('text', 0.7);
+    opacity: 0.7;
+}
+
+.n-button:not(.n-button--reset,.n-button--link,.n-button--glass) {
+    color: color('base-text');
+    background: color('base-color');
+    border-color: color('base-color');
+}
+
+.n-button:not(.n-button--reset,.n-button--link,.n-button--glass):hover {
+    background: color('base-color-bg-10');
+    border-color: color('base-color-bg-10');
+}
+
+//.n-button:not(.n-button--reset,.n-button--link,.n-button--glass):focus {
+//    background: color('base-color-fg-10');
+//    border-color: color('base-color-fg-10');
+//}
+
+.n-button:not(.n-button--reset,.n-button--link,.n-button--glass).n-disabled {
+    background: color('base-color');
+    border-color: color('base-color');
+}
+
+.n-button.n-disabled:not(.n-button--reset,.n-button--glass).n-button--link {
+    color: color('text');
+}
+
+.n-button:not(.n-button--reset,.n-disabled,.n-button--glass).n-button--link {
+    color: color('base-color-fg-10');
+}
+
+.n-button.n-button--neutral:not(.n-disabled,.n-button--glass).n-button--link {
+    color: color('base-color-fg-30');
+}
+
+.n-button:not(.n-button--reset,.n-disabled,.n-button--glass).n-button--link:hover {
+    color: color('base-color');
+}
+
+//.n-button:not(.n-button--reset,.n-disabled,.n-button--glass).n-button--link:focus {
+//    color: color('base-color-bg-10');
+//}
+
+.n-button:not(.n-button--reset,.n-button--link).n-button--glass {
+    color: color('base-color-fg-10');
+}
+
+.n-button:not(.n-button--reset,.n-disabled,.n-button--link).n-button--glass {
+    background: color('base-color', 0.25);
+}
+
+.n-button.n-button--neutral:not(.n-disabled,.n-button--link).n-button--glass {
+    color: color('base-color-fg-30');
+}
+
+.n-button:not(.n-button--reset,.n-disabled,.n-button--link).n-button--glass:hover {
+    background: color('base-color', 0.30);
+}
+
+//.n-button:not(.n-button--reset,.n-disabled,.n-button--link).n-button--glass:focus {
+//    background: color('base-color', 0.35);
+//}
+
+.n-button:not(.n-button--reset).n-button--link.n-button--glass {
+    color: color('base-color-fg-10');
+}
+
+.n-button.n-button--neutral:not(.n-disabled).n-button--link.n-button--glass {
+    color: color('base-color-fg-20');
+}
+
+.n-button:not(.n-button--reset,.n-disabled).n-button--link.n-button--glass:hover {
+    background: color('base-color', 0.30);
+}
+
+//.n-button:not(.n-button--reset,.n-disabled).n-button--link.n-button--glass:focus {
+//    background: color('base-color', 0.35);
+//}

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

@@ -0,0 +1 @@
+@use "../../../root/helpers" as *;

package/themes/default/cascader/index.scss

@@ -0,0 +1,2 @@
+@forward "./src/cascader-panel/cascader-panel";
+@forward "./src/cascader/cascader";

package/themes/default/cascader/src/cascader/cascader.scss

@@ -0,0 +1,31 @@
+@use "../../../root/helpers" as *;
+
+.n-cascader {
+    background: color('form-input');
+    border: 1px solid color('gray-15');
+}
+
+.n-cascader:not(.n-disabled):hover {
+    border-color: color('base-color-bg-30');
+}
+
+.n-cascader:not(.n-disabled).n-focus {
+    border-color: color('base-color');
+}
+
+.n-cascader.n-disabled {
+    background: color('form-disabled');
+}
+
+.n-cascader__placeholder {
+    color: color('foreground', 0.6);
+}
+
+.n-cascader__body,
+.n-cascader__empty {
+     background: color('popover');
+}
+
+.n-cascader__empty {
+     color: color('gray-60');
+}

package/themes/default/cascader/src/cascader-panel/cascader-panel.scss

@@ -0,0 +1,21 @@
+@use "../../../root/helpers" as *;
+
+.n-cascader-panel {
+    background: color('form-input');
+}
+
+.n-popover > .n-cascader-panel {
+    background: color('popover');
+}
+
+div:not(.n-popover) > .n-cascader-panel {
+    border: 1px solid color('gray-15');
+}
+
+.n-cascader-panel .n-popover-option:not(.n-active) i {
+    color: color('gray-40');
+}
+
+.n-cascader-panel__items:not(:first-child) {
+    border-left: 1px solid color('gray-15');
+}

package/themes/default/chart/index.scss

@@ -0,0 +1,2 @@
+@forward "./src/chart-item/chart-item";
+@forward "./src/chart-donut/chart-donut";

package/themes/default/chart/src/chart-donut/chart-donut.scss

@@ -0,0 +1,22 @@
+@use "../../../root/helpers" as *;
+
+.n-chart-donut circle.n-chart-item {
+    stroke: color('base-color');
+    transition: opacity 0.2s;
+}
+
+.n-chart-donut circle.n-chart-item--other {
+    stroke: color('foreground', 0.2);
+}
+
+circle.n-chart-hover:hover + circle.n-chart-item {
+    opacity: 0.5;
+}
+
+.n-chart-donut__text span:first-child {
+    color: color('text');
+}
+
+.n-chart-donut__text span:last-child {
+    color: color('text', 0.5);
+}

package/themes/default/chart/src/chart-item/chart-item.scss

@@ -0,0 +1,11 @@
+@use "../../../root/helpers" as *;
+
+.n-chart-item--other, .n-chart-legend--other {
+    --n-color-base-color: var(--n-color-gray-50);
+}
+
+@for $i from 0 through 20 {
+    .n-chart-item--color-#{$i}, .n-chart-legend--color-#{$i} {
+        --n-color-base-color: var(--n-color-tag-#{$i});
+    }
+}

package/themes/default/checkbox/index.scss

@@ -0,0 +1,2 @@
+@forward "./src/checkbox/checkbox";
+@forward "./src/checkbox-group/checkbox-group";