@kizmann/nano-ui 1.0.15 → 1.1.2

package/src/scrollbar/src/scrollbar/scrollbar.scss

@@ -1,10 +1,14 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-scrollbar {
     position: relative;
     overflow: hidden;
 }
 
+.n-scrollbar.is-paused .n-table__wrap {
+    display: flex;
+}
+
 .n-scrollbar-test {
     opacity: 0;
     position: fixed;
@@ -20,6 +24,7 @@
 }
 
 .n-scrollbar-content {
+    z-index: 50;
     position: absolute;
     top: 0;
     left: 0;
@@ -39,13 +44,6 @@
     bottom: -17px;
 }
 
-.n-scrollbar.n-scrollbar--forced.n-scrollbar--native > .n-scrollbar-content {
-    padding-right: 16px;
-    padding-bottom: 16px;
-    right: -16px;
-    bottom: -16px;
-}
-
 .n-scrollbar:not(.n-overflow-x) > .n-scrollbar-content {
     bottom: 0;
     overflow-x: hidden;
@@ -64,26 +62,26 @@
 .n-scrollbar-h {
     cursor: default;
     position: absolute;
-    z-index: 100;
+    z-index: 500;
     user-select: none;
 }
 
 .n-scrollbar-v {
     top: 0;
     right: 0;
-    width: 12px;
-}
+    width: 14px;
 
+}
 
 .n-scrollbar-h {
     left: 0;
     bottom: 0;
-    height: 12px;
+    height: 14px;
 }
 
-.n-scrollbar--native:not(.n-scrollbar--forced) > .n-scrollbar-v,
+.n-scrollbar--native > .n-scrollbar-v,
 .n-scrollbar:not(.has-vtrack) > .n-scrollbar-v,
-.n-scrollbar--native:not(.n-scrollbar--forced) > .n-scrollbar-h,
+.n-scrollbar--native > .n-scrollbar-h,
 .n-scrollbar:not(.has-htrack) > .n-scrollbar-h {
     display: none;
 }
@@ -92,16 +90,22 @@
 .n-scrollbar-h:before {
     content: '\00a0';
     position: absolute;
-    top: 2px;
-    bottom: 2px;
-    left: 2px;
-    right: 2px;
     display: block;
     border-radius: 500px;
     opacity: 0;
-    transition: opacity 0.15s;
+    transition: opacity 0.15s, transform 0.15s;
+}
+
+.n-scrollbar-v:before,
+.n-scrollbar-h:before {
+    top: 4px;
+    bottom: 4px;
+    left: 4px;
+    right: 4px;
 }
 
+.n-scrollbar.has-vtrack > .n-scrollbar-v.is-active:before,
+.n-scrollbar.has-htrack > .n-scrollbar-h.is-active:before,
 .n-scrollbar.has-vtrack:hover > .n-scrollbar-v:before,
 .n-scrollbar.has-htrack:hover > .n-scrollbar-h:before {
     opacity: 1;

package/src/select/index.scss

@@ -1,2 +1,2 @@
-@import "./src/select/select";
-@import "./src/select-option/select-option";
+@forward "./src/select/select";
+@forward "./src/select-option/select-option";

package/src/select/src/select/select.jsx

@@ -36,6 +36,14 @@ export default {
             type: [String]
         },
 
+        theme: {
+            default()
+            {
+                return 'dark';
+            },
+            type: [String]
+        },
+
         lazy: {
             default()
             {
@@ -55,7 +63,7 @@ export default {
         position: {
             default()
             {
-                return 'bottom-center';
+                return 'bottom-start';
             },
             type: [String]
         },
@@ -208,7 +216,6 @@ export default {
         };
     },
 
-
     beforeMount()
     {
         if ( this.lazy ) {
@@ -255,7 +262,7 @@ export default {
 
         focus()
         {
-            this.$nextTick(this.scrollToClosest);
+            this.$nextTick(() => this.scrollToClosest());
         },
 
     },
@@ -318,16 +325,14 @@ export default {
                 event.preventDefault();
             }
 
-            this.$refs.input.focus();
+            this.focus = true;
         },
 
         onFocusInput()
         {
             if ( !this.focus ) {
-                this.$refs.popover.open();
+                this.focus = true;
             }
-
-            clearInterval(this.refresh);
         },
 
         onInputInput(event)
@@ -364,11 +369,9 @@ export default {
 
             let searchRegex = new RegExp(this.search, 'i');
 
-            let searched = Arr.filter(this.elements, (option) => {
-                return Any.isString(option.label) && option.label.match(searchRegex);
+            this.searched = Arr.filter(this.elements, (option) => {
+                return Any.string(option.label || '').match(searchRegex);
             });
-
-            this.searched = searched;
         },
 
         toggleOption(value, event = null)
@@ -505,8 +508,8 @@ export default {
                 this.$refs.scrollbar.scrollIntoView(`[data-option="${selected._.uid}"]`);
             }
 
-            if ( this.$refs.virtualbar ) {
-                this.$refs.virtualbar.scrollToIndex(this.index);
+            if ( this.$refs.virtualscroll ) {
+                this.$refs.virtualscroll.scrollToIndex(this.index);
             }
         },
 
@@ -534,14 +537,14 @@ export default {
                 return;
             }
 
-            if ( this.$refs.virtualbar ) {
-                this.$refs.virtualbar.scrollToIndex(index, 250);
+            if ( this.$refs.virtualscroll ) {
+                this.$refs.virtualscroll.scrollToIndex(index, 0);
             }
 
             let select = `[data-option="${Obj.get(this.elements[index], '_.uid', 0)}"]`;
 
             if ( this.$refs.scrollbar ) {
-                this.$refs.scrollbar.scrollIntoView(select, 250);
+                this.$refs.scrollbar.scrollIntoView(select, 0);
             }
         }
 
@@ -560,7 +563,7 @@ export default {
         }
 
         return (
-            <div class="n-select__clear" {...props}>
+            <div class="n-select__clear n-form-clear" {...props}>
                 <i class={nano.Icons.times}></i>
             </div>
         );
@@ -569,7 +572,7 @@ export default {
     renderLabelAngle()
     {
         return (
-            <div class="n-select__angle">
+            <div class="n-select__angle n-form-angle">
                 <i class={nano.Icons.angleDown}></i>
             </div>
         );
@@ -749,7 +752,7 @@ export default {
     renderItems()
     {
         let emptyHtml = (
-            <div class="n-select__empty">
+            <div class="n-popover-shadow n-select__empty">
                 <NEmptyIcon inline={true}>{this.trans(this.emptyText)}</NEmptyIcon>
             </div>
         );
@@ -767,11 +770,11 @@ export default {
         });
 
         let props = {
-            relative: true, size: this.size
-        }
+            size: this.size
+        };
 
         return (
-            <NScrollbar ref="scrollbar" class="n-select__body" {...props}>
+            <NScrollbar ref="scrollbar" class="n-popover-shadow n-select__body" {...props}>
                 {Obj.values(options)}
             </NScrollbar>
         );
@@ -822,7 +825,7 @@ export default {
     renderLazyItems()
     {
         let props = {
-            items: this.searched
+            items: this.searched, offsetY: 0, uniqueProp: 'tempValue'
         };
 
         props.renderNode = ({ value, index }) => {
@@ -830,14 +833,14 @@ export default {
         };
 
         return (
-            <NVirtualscroller ref="virtualbar" class="n-select__body n-virtual" {...props} />
+            <NVirtualscroller ref="virtualscroll" class="n-popover-shadow n-select__body" {...props} />
         );
     },
 
     renderPopover()
     {
         let classList = [
-            'n-popover--select'
+            'n-popover--select',
         ];
 
         if ( this.lazy ) {
@@ -850,6 +853,7 @@ export default {
             width: - 1,
             listen: true,
             size: this.size,
+            position: this.position,
             scrollClose: true,
             disabled: this.deepDisabled,
             onClose: this.resetInput
@@ -919,6 +923,6 @@ export default {
                 {this.ctor('renderOptions')()}
             </div>
         );
-    }
+    },
 
 }

package/src/select/src/select/select.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-select {
     display: flex;
@@ -7,6 +6,9 @@
     align-items: stretch;
     justify-content: stretch;
     width: 100%;
+    min-height: size('base-hgt');
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
     border: 1px solid transparent;
 }
 
@@ -20,17 +22,15 @@
     flex-direction: row;
     align-items: stretch;
     justify-content: stretch;
-    width: 100%;
+    width: calc(100% + 2px);
+    margin: -1px;
+    border: 1px solid transparent;
 }
 
 .n-select__clear,
 .n-select__angle {
     order: 100;
-    flex: 0 0 auto;
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
 }
 
 .n-select__clear {
@@ -55,15 +55,6 @@
     transform: scaleY(-1);
 }
 
-.n-select__clear i,
-.n-select__angle i {
-    text-align: center;
-}
-
-.n-select__clear i {
-    border-radius: 500px;
-}
-
 .n-select__input {
     flex: 1 1 auto;
     display: flex;
@@ -80,6 +71,7 @@
     width: 100%;
     white-space: nowrap;
     text-decoration: none;
+    font-size: 1em;
     line-height: 1.2;
     border: none;
     background: transparent;
@@ -107,106 +99,59 @@
     justify-content: center;
 }
 
-.n-select__item i { 
+.n-select__item i {
     opacity: 0.7;
 }
 
 .n-select__body,
 .n-select__empty {
-     overflow: hidden;
-     margin: 1px 0;
-     max-height: 210px;
+    overflow: hidden;
+    max-height: 210px;
+    border-radius: size('base-rad');
 }
 
-.n-select__body.n-virtual {
-    min-height: 210px;
+.n-select__empty {
+    text-align: center;
+    padding: size('base-pad-vertical') size('base-pad');
 }
 
- .n-select__empty {
-     text-align: center;
+.n-popover--select > .n-scrollbar {
+    width: 100%;
 }
 
-.n-popover--select.n-virtual {
-    overflow: hidden;
+.n-select__display.n-multiple .n-select__input input {
+    min-height: size('base-hgt', 'calc($ - 6px)');
 }
 
-@each $suffix, $values in $form {
-
-    $-select-font: map.get($values, 'font');
-    $-select-size: map.get($values, 'size');
-    $-select-radius: map.get($values, 'radius');
-    $-select-ratio: map.get($values, 'ratio');
-
-    .n-select--#{$suffix} {
-        min-height: $-select-size;
-        font-size: $-select-font;
-        border-radius: $-select-radius;
-    }
-
-    .n-select--#{$suffix} .n-select__display.n-multiple .n-select__input input {
-        min-height: $-select-size - 6;
-    }
-
-    $-select-padding: $-select-size * $-select-ratio * 0.5;
-
-    .n-select--#{$suffix} .n-select__display {
-        padding: 0 $-select-padding;
-    }
-
-    .n-select--#{$suffix} .n-select__clear,
-    .n-select--#{$suffix} .n-select__angle {
-        width: $-select-size;
-        margin: 0 -#{$-select-padding} 0 -#{$-select-padding};
-    }
-
-    .n-select--#{$suffix} .n-select__clear i,
-    .n-select--#{$suffix} .n-select__angle i {
-        width: $-select-size - 14;
-        height: $-select-size - 14;
-        line-height: $-select-size - 14;
-    }
-
-    .n-select--#{$suffix} .n-select__angle i {
-        font-size: $-select-font - 2;
-    }
-
-    .n-select--#{$suffix} .n-select__clear i {
-        font-size: $-select-font - 4;
-    }
-
-    .n-select--#{$suffix} .n-select__input input {
-        padding: 0 $-select-padding;
-    }
-
-    .n-select--#{$suffix} .n-select__items {
-        padding: 2px 0;
-        margin-left: -#{$-select-padding * 0.25};
-    }
-
-    .n-select--#{$suffix} .n-select__item {
-        height: $-select-size - 10;
-        margin: 2px 0 2px $-select-padding * 0.5;
-        padding: 0 $-select-padding * 0.5;
-        border-radius: $-select-radius - 1;
-    }
-
-    .n-select--#{$suffix} .n-select__item span {
-        font-size: $-select-font - 3;
-        padding: 0 $-select-padding * 0.5;
-    }
-
-    .n-select--#{$suffix} .n-select__item i {
-        font-size: $-select-font - 5;
-        padding: 0 $-select-padding * 0.5;
-    }
-
-    .n-popover--#{$suffix} .n-select__body,
-    .n-popover--#{$suffix} .n-select__empty {
-        border-radius: $-select-radius;
-    }
-
-    .n-popover--#{$suffix} .n-select__empty {
-        padding: $-select-padding * 2 $-select-padding;
-    }
+.n-select__clear,
+.n-select__angle {
+    width: size('base-hgt');
+}
+
+.n-select__input input {
+    padding: 0 size('base-pad');
+}
+
+.n-select__items {
+    padding: 2px 0;
+    margin-left: size('base-pad', 'calc($ * -0.25)');
+}
+
+.n-select__item {
+    margin: 2px -2px 2px 7px;
+    height: size('base-hgt', 'calc($ - 10px)');
+    padding: 0 size('base-pad', 'calc($ * 0.8)');
+    border-radius: size('base-rad', 'calc($ - 2px)');
+}
+
+.n-select__item span {
+    font-size: size('base-fnt-icon');
+}
+
+.n-select__item i {
+    font-size: size('base-fnt-icon');
+}
 
+.n-select__item > *:not(:last-child) {
+    margin-right: size('base-pad', 'calc($ * 0.5)');
 }

package/src/select/src/select-option/select-option.scss

@@ -1 +1 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;

package/src/slider/index.scss

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

package/src/slider/src/slider/slider.jsx

@@ -322,11 +322,13 @@ export default {
             this.onMousedown(event, this.index = index);
         };
 
-        let key = Arr.findIndex(this.steps, value);
+        let [key, tooltip] = [
+            Arr.findIndex(this.steps, value), Obj.get(this.labels, key, value)
+        ];
 
         return (
-            <div class="n-slider__handle" {...handleProps}>
-                <span>{ Obj.get(this.labels, key, value) }</span>
+            <div class="n-slider__handle" data-tooltip={tooltip} {...handleProps}>
+                <span></span>
             </div>
         );
     },

package/src/slider/src/slider/slider.scss

@@ -1,9 +1,9 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-slider {
     position: relative;
     width: 100%;
+    height: size('base-hgt');
 }
 
 .n-slider__bar {
@@ -28,14 +28,17 @@
 
 .n-slider__handle {
     cursor: grab;
-    z-index: 2;
-    position: absolute;
+    z-index: 10;
+    position: absolute !important;
     left: 0;
     top: 50%;
-    width: 20px;
-    height: 20px;
-    margin: -10px 0 0 -10px;
-    border: 2px solid transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: size('base-hgt-inline', 'calc($ + 6px)');
+    height: size('base-hgt-inline', 'calc($ + 6px)');
+    margin-top: size('base-hgt-inline', 'calc(($ + 6px) * -0.5)');
+    margin-left: size('base-hgt-inline', 'calc(($ + 6px) * -0.5)');
     border-radius: 500px;
 }
 
@@ -44,17 +47,31 @@
 }
 
 .n-slider__handle span {
-    pointer-events: none;
+    position: relative;
+    display: block;
+    width: 8px;
+    height: 8px;
+}
+
+.n-slider__handle span:before,
+.n-slider__handle span:after {
+    content: '\00a0';
     position: absolute;
-    bottom: 100%;
-    left: 50%;
-    padding: 4px 8px;
-    border-radius: 3px;
-    font-size: 13px;
-    display: inline-block;
-    opacity: 0;
-    transform: translate(-50%, -25%);
-    transition: opacity 0.3s;
+    top: 0;
+    display: block;
+    width: 3px;
+    height: 100%;
+    border-radius: 500px;
+}
+
+.n-slider__handle span:before {
+    left: 0;
+    background: #fff;
+}
+
+.n-slider__handle span:after {
+    right: 0;
+    background: #fff;
 }
 
 .n-slider__handle:hover span,
@@ -62,32 +79,6 @@
     opacity: 1;
 }
 
-@each $suffix, $values in $form {
-
-    $-slider-font: map.get($values, 'font');
-    $-slider-size: map.get($values, 'size');
-    $-slider-radius: map.get($values, 'radius');
-    $-slider-ratio: map.get($values, 'ratio');
-
-    .n-slider--#{$suffix} {
-        height: 32px;
-    }
-
-    .n-slider--#{$suffix} .n-slider__bar {
-        margin-top: -#{$-slider-size * 0.1};
-        height: $-slider-size * 0.2;
-    }
-
-    .n-slider--#{$suffix} .n-slider__handle {
-        width: $-slider-size * 0.6;
-        height: $-slider-size * 0.6;
-        margin: -#{$-slider-size * 0.3} 0 0 -#{$-slider-size * 0.3};
-    }
-
-    .n-slider--#{$suffix} .n-slider__handle span {
-        padding: $-slider-size * 0.15 $-slider-size * 0.3;
-        border-radius: $-slider-radius;
-        font-size: $-slider-font - 2;
-    }
-
+.n-slider__bar {
+    height: 6px;
 }

package/src/switch/index.scss

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