@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/timepicker/src/timepicker/timepicker.jsx

@@ -214,7 +214,7 @@ export default {
         }
 
         return (
-            <div class="n-timepicker__clear" {...props}>
+            <div class="n-timepicker__clear n-form-clear" {...props}>
                 <i class={ nano.Icons.times }></i>
             </div>
         );
@@ -223,7 +223,7 @@ export default {
     renderLabelAngle()
     {
         return (
-            <div class="n-timepicker__angle">
+            <div class="n-timepicker__angle n-form-angle">
                 <i class={ nano.Icons.angleDown }></i>
             </div>
         );
@@ -267,6 +267,9 @@ export default {
 
     renderPanel()
     {
+        let classList = [
+            'n-popover-shadow',
+        ];
         
         let props = Obj.except(this.$props, ['modelValue'], {
             modelValue: this.tempValue.format(this.format) || null,
@@ -275,7 +278,7 @@ export default {
         props['onUpdate:modelValue'] = this.onTimepickerInput;
 
         return (
-            <NTimepickerPanel class="n-timepicker__body" {...props}></NTimepickerPanel>
+            <NTimepickerPanel class={classList} {...props}></NTimepickerPanel>
         );
     },
 

package/src/timepicker/src/timepicker/timepicker.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-timepicker {
     display: flex;
@@ -20,7 +19,9 @@
     flex-direction: row;
     align-items: stretch;
     justify-content: stretch;
-    width: 100%;
+    width: calc(100% + 2px);
+    margin: -1px;
+    border: 1px solid transparent;
 }
 
 .n-timepicker__seperator {
@@ -111,7 +112,6 @@
 .n-timepicker__body,
 .n-timepicker__empty {
      overflow: hidden;
-     margin: 1px 0;
      border: 0;
 }
 
@@ -119,54 +119,22 @@
      text-align: center;
 }
 
-@each $suffix, $values in $form {
-
-    $-timepicker-font: map.get($values, 'font');
-    $-timepicker-size: map.get($values, 'size');
-    $-timepicker-radius: map.get($values, 'radius');
-    $-timepicker-ratio: map.get($values, 'ratio');
-
-    .n-timepicker--#{$suffix} {
-        min-height: $-timepicker-size;
-        font-size: $-timepicker-font;
-        border-radius: $-timepicker-radius;
-    }
-
-    $-timepicker-padding: $-timepicker-size * $-timepicker-ratio * 0.5;
-
-    .n-timepicker--#{$suffix} .n-timepicker__display,
-    .n-timepicker--#{$suffix} .n-timepicker__seperator,
-    .n-timepicker--#{$suffix} .n-timepicker__input input {
-        padding: 0 $-timepicker-padding;
-    }
-
-    .n-timepicker--#{$suffix} .n-timepicker__clear,
-    .n-timepicker--#{$suffix} .n-timepicker__angle {
-        width: $-timepicker-size;
-        margin: 0 -#{$-timepicker-padding} 0 -#{$-timepicker-padding};
-    }
-    .n-timepicker--#{$suffix} .n-timepicker__clear i,
-    .n-timepicker--#{$suffix} .n-timepicker__angle i {
-        width: $-timepicker-size - 14;
-        height: $-timepicker-size - 14;
-        line-height: $-timepicker-size - 14;
-    }
-
-    .n-timepicker--#{$suffix} .n-timepicker__angle i {
-        font-size: $-timepicker-font - 2;
-    }
-
-    .n-timepicker--#{$suffix} .n-timepicker__clear i {
-        font-size: $-timepicker-font - 4;
-    }
-
-    .n-popover--#{$suffix} .n-timepicker__body,
-    .n-popover--#{$suffix} .n-timepicker__empty {
-        border-radius: $-timepicker-radius;
-    }
-
-    .n-popover--#{$suffix} .n-timepicker__empty {
-        padding: $-timepicker-padding;
-    }
+.n-timepicker {
+    height: size('base-hgt');
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
+}
+
+.n-timepicker__seperator,
+.n-timepicker__input input {
+    padding: 0 size('base-pad');
+}
+
+.n-timepicker__clear,
+.n-timepicker__angle {
+    width: size('base-hgt');
+}
 
+.n-timepicker__body {
+    border-radius: size('base-rad');
 }

package/src/timepicker/src/timepicker-panel/timepicker-panel.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-timepicker-panel {
     cursor: default;
@@ -7,16 +6,25 @@
     flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
-    border: 1px solid transparent;
+    max-height: 270px;
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
+}
+
+.n-timepicker-panel__header {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .n-timepicker-panel__body {
-    flex: 1 0 auto;
+    flex: 1 1 auto;
+    min-height: 0;
     display: flex;
     flex-direction: row;
     align-items: stretch;
     justify-content: stretch;
-    max-height: 260px;
 }
 
 .n-timepicker-panel__panel {
@@ -32,46 +40,30 @@
     justify-content: center;
 }
 
-.n-timepicker-panel__item {
-    margin: 2px;
+.n-timepicker-panel__panel {
+    width: size('base-hgt', 'calc($ * 2)');
+    min-height: size('base-hgt', 'calc($ * 5)');
 }
 
-@each $suffix, $values in $form {
-
-    $-timepicker-panel-font: map.get($values, 'font');
-    $-timepicker-panel-size: map.get($values, 'size');
-    $-timepicker-panel-radius: map.get($values, 'radius');
-    $-timepicker-panel-ratio: map.get($values, 'ratio');
-
-    .n-timepicker-panel--#{$suffix} {
-        font-size: $-timepicker-panel-font;
-        border-radius: $-timepicker-panel-radius;
-    }
-
-    .n-timepicker-panel--#{$suffix} .n-timepicker-panel__panel {
-        width: $-timepicker-panel-size * 2;
-        min-height: $-timepicker-panel-size * 5;
-    }
-
-    .n-timepicker-panel--#{$suffix} .n-timepicker-panel__display {
-        height: $-timepicker-panel-size - 4;
-    }
-
-    $-timepicker-panel-padding: $-timepicker-panel-size * $-timepicker-panel-ratio;
+.n-timepicker-panel__display {
+    height: size('base-hgt', 'calc($ - 4px)');
+}
 
-    .n-timepicker-panel--#{$suffix} .n-timepicker-panel__header,
-    .n-timepicker-panel--#{$suffix} .n-timepicker-panel__footer {
-        padding: $-timepicker-panel-padding * 0.7 $-timepicker-panel-padding;
-    }
+.n-timepicker-panel__header {
+    height: size('base-hgt', 'calc($ * 1.5)');
+    padding: 0 size('base-pad');
+}
 
-    .n-timepicker-panel--#{$suffix} .n-timepicker-panel__wrap {
-        padding: ($-timepicker-panel-padding - 2) * 0.25 ($-timepicker-panel-padding - 2);
-    }
+.n-timepicker-panel__footer {
+    padding: size('base-pad-vertical') size('base-pad');
+}
 
-    .n-timepicker-panel--#{$suffix} .n-timepicker-panel__item {
-        height: $-timepicker-panel-size - 4;
-        padding: 0 $-timepicker-panel-padding;
-        border-radius: $-timepicker-panel-radius;
-    }
+.n-timepicker-panel__wrap {
+    padding: size('base-pad-vertical') size('base-pad', 'calc($ * 0.8)');
+}
 
+.n-timepicker-panel__item {
+    height: size('base-hgt', 'calc($ - 4px)');
+    padding: 0 size('base-pad', 'calc($ * 0.8)');
+    border-radius: size('base-rad');
 }

package/src/tooltip/index.scss

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

package/src/tooltip/src/tooltip/tooltip.scss

@@ -0,0 +1,116 @@
+@use "../../../root/helpers" as *;
+
+[data-tooltip] {
+    position: relative;
+}
+
+[data-tooltip=""]:before,
+[data-tooltip-ltr=""]:before,
+[data-tooltip-rtl=""]:before,
+[data-tooltip=""]:after,
+[data-tooltip-ltr=""]:after,
+[data-tooltip-rtl=""]:after {
+    display: none !important;
+}
+
+[data-tooltip]:before,
+[data-tooltip-ltr]:before,
+[data-tooltip-rtl]:before,
+[data-tooltip]:after,
+[data-tooltip-ltr]:after,
+[data-tooltip-rtl]:after {
+    z-index: 999999999;
+    position: absolute;
+    display: inline-flex;
+    opacity: 0;
+    visibility: hidden;
+}
+
+[data-tooltip]:before,
+[data-tooltip-ltr]:before,
+[data-tooltip-rtl]:before {
+    bottom: calc(100% + 5px);
+    padding: size('base-pad-vertical', 'calc($ * 0.5)') size('base-pad');
+    font-size: size('base-fnt-label');
+    border-radius: size('base-rad');
+}
+
+[data-tooltip]:after,
+[data-tooltip-ltr]:after,
+[data-tooltip-rtl]:after {
+    content: '\00a0';
+    bottom: 100%;
+    width: 28px;
+    height: 6px;
+}
+
+[data-tooltip]:before {
+    content: attr(data-tooltip);
+}
+
+[data-tooltip]:before,
+[data-tooltip]:after {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+[data-tooltip-ltr]:before {
+    content: attr(data-tooltip-ltr);
+}
+
+[data-tooltip-ltr]:before,
+[data-tooltip-ltr]:after {
+    left: 0;
+}
+
+[data-tooltip-rtl]:before {
+    content: attr(data-tooltip-rtl);
+}
+
+[data-tooltip-rtl]:before,
+[data-tooltip-rtl]:after {
+    right: 0;
+}
+
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after,
+[data-tooltip].n-move:before,
+[data-tooltip].n-move:after {
+    opacity: 1;
+    visibility: visible;
+}
+
+[data-tooltip-ltr]:hover:before,
+[data-tooltip-ltr]:hover:after,
+[data-tooltip-ltr].n-move:before,
+[data-tooltip-ltr].n-move:after,
+[data-tooltip-rtl]:hover:before,
+[data-tooltip-rtl]:hover:after,
+[data-tooltip-rtl].n-move:before,
+[data-tooltip-rtl].n-move:after {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+[data-tooltip]:before,
+[data-tooltip-ltr]:before,
+[data-tooltip-rtl]:before,
+[data-tooltip]:after,
+[data-tooltip-ltr]:after,
+[data-tooltip-rtl]:after {
+    background: color('tooltip', 0.95);
+    transition: opacity 0.2s;
+}
+
+[data-tooltip]:before,
+[data-tooltip-ltr]:before,
+[data-tooltip-rtl]:before {
+    color: color('white');
+}
+
+[data-tooltip]:after,
+[data-tooltip-ltr]:after,
+[data-tooltip-rtl]:after {
+    mask: svg-load('angle-down.svg') no-repeat center 0 / contain;
+}

package/src/transfer/index.scss

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

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]
         },
@@ -107,11 +107,19 @@ export default {
         useKeys: {
             default()
             {
-                return true;
+                return false;
             },
             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,7 +144,6 @@ export default {
     beforeMount()
     {
         this.scrollTop = 0;
-        this.init = false;
         this.ready = [];
     },
 
@@ -163,7 +170,6 @@ export default {
 
         clearWhenReady()
         {
-            console.log('ready and clear', this.ready);
             Arr.each(this.ready, cb => {
                 cb.call(this);
             });
@@ -218,10 +224,6 @@ export default {
 
         onScrollToIndex(index)
         {
-            if ( ! this.$refs.scrollbar ) {
-                return;
-            }
-
             let total = Math.ceil(this.items.length /
                 this.state.grid);
 
@@ -234,16 +236,10 @@ export default {
             let targetTop = index * this.itemHeight;
 
             if ( this.scrollTop > targetTop ) {
-                return this.scrollTo(0, targetTop);
-            }
-
-            targetTop = targetTop - this.height;
-
-            if ( targetTop > this.scrollTop ) {
-                targetTop += this.itemHeight
+                return this.onScrollTo(0, targetTop);
             }
 
-            this.scrollTo(0, targetTop);
+            this.onScrollTo(0, targetTop - this.height + this.itemHeight);
         },
 
         scrollTo(x = 0, y = 0)
@@ -253,17 +249,11 @@ export default {
 
         onScrollTo(x = 0, y = 0)
         {
-            if ( ! this.$refs.scrollbar ) {
-                return;
+            if ( this.$refs.scrollbar ) {
+                this.$refs.scrollbar.scrollTo(x, this.scrollTop = y);
             }
 
-            this.scrollTop = y;
-
-            let cb = () => {
-                this.$refs.scrollbar.scrollTo(x, y);
-            };
-
-            this.refreshDriver(false, cb);
+            this.refreshDriver(true);
         },
 
         clearState()
@@ -298,7 +288,7 @@ export default {
 
             this.scrollTop = scrollTop;
 
-            Any.async(this.refreshDriver);
+            this.refreshDriver(true);
         },
 
         onSizechange(width, height)
@@ -311,13 +301,13 @@ export default {
                 width, height
             ];
 
-            this.init = Arr.has(init, true);
+            this.init |= Arr.has(init, true);
 
             if ( this.init ) {
                 this.clearWhenReady();
             }
 
-            Any.async(this.refreshDriver);
+            this.refreshDriver(false);
         },
 
 
@@ -327,7 +317,7 @@ export default {
                 this.timer = Date.now();
             }
 
-            if ( Date.now() - this.timer > 30 ) {
+            if ( Date.now() - this.timer > 5 ) {
                 queue = false;
             }
 
@@ -335,7 +325,7 @@ export default {
 
             this.to = setTimeout(() => {
                 this.refreshDriver(false, callback);
-            }, 35);
+            }, 10);
 
             if ( queue ) {
                 return;
@@ -411,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 = {};
@@ -428,7 +418,7 @@ export default {
             style.height = this.itemHeight + 'px';
         }
 
-        if ( this.state.grid !== 1 ) {
+        if ( this.itemWidth ) {
             style.width = this.itemWidth + 'px';
         }
 
@@ -519,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,