@kizmann/nano-ui 1.1.0 → 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,7 +62,7 @@
 .n-scrollbar-h {
     cursor: default;
     position: absolute;
-    z-index: 100;
+    z-index: 500;
     user-select: none;
 }
 
@@ -81,9 +79,9 @@
     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;
 }

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,13 +325,13 @@ export default {
                 event.preventDefault();
             }
 
-            this.$refs.input.focus();
+            this.focus = true;
         },
 
         onFocusInput()
         {
             if ( !this.focus ) {
-                this.$refs.popover.open();
+                this.focus = true;
             }
         },
 
@@ -556,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>
         );
@@ -565,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>
         );
@@ -745,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>
         );
@@ -754,7 +761,7 @@ export default {
             return emptyHtml;
         }
 
-        if ( this.lazy || true ) {
+        if ( this.lazy ) {
             return this.ctor('renderLazyItems')();
         }
 
@@ -767,7 +774,7 @@ export default {
         };
 
         return (
-            <NScrollbar ref="scrollbar" class="n-select__body" {...props}>
+            <NScrollbar ref="scrollbar" class="n-popover-shadow n-select__body" {...props}>
                 {Obj.values(options)}
             </NScrollbar>
         );
@@ -818,7 +825,7 @@ export default {
     renderLazyItems()
     {
         let props = {
-            items: this.searched, offsetY: 0
+            items: this.searched, offsetY: 0, uniqueProp: 'tempValue'
         };
 
         props.renderNode = ({ value, index }) => {
@@ -826,14 +833,14 @@ export default {
         };
 
         return (
-            <NVirtualscroller ref="virtualscroll" 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 ) {
@@ -846,6 +853,7 @@ export default {
             width: - 1,
             listen: true,
             size: this.size,
+            position: this.position,
             scrollClose: true,
             disabled: this.deepDisabled,
             onClose: this.resetInput
@@ -915,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";

package/src/switch/src/switch/switch.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-switch {
     cursor: default;
@@ -7,6 +6,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: stretch;
+    min-height: size('base-hgt');
+    font-size: size('base-fnt');
 }
 
 .n-switch.n-disabled {
@@ -17,55 +18,27 @@
 .n-switch__switch {
     flex: 0 0 auto;
     position: relative;
+    width: size('base-hgt-inline', 'calc($ * 1.9)');
+    height: size('base-hgt-inline');
     border-radius: 500px;
-    border: 1px solid transparent;
-    transition: border 0.15s, background 0.15s;
+    transition: background 0.15s;
 }
 
 .n-switch__switch span {
     position: absolute;
-    top: 50%;
-    left: 3px;
+    top: 2px;
+    left: 2px;
     display: block;
+    width: size('base-hgt-inline', 'calc($ - 4px)');
+    height: size('base-hgt-inline', 'calc($ - 4px)');
     border-radius: 500px;
-    transform: translateY(-50%);
-    transition: left 0.15s, right 0.15s;
+    transition: left 0.15s;
 }
 
-@each $suffix, $values in $form {
-
-    $-switch-font: map.get($values, 'font');
-    $-switch-size: map.get($values, 'size');
-    $-switch-radius: map.get($values, 'radius');
-    $-switch-ratio: map.get($values, 'ratio');
-
-    .n-switch--#{$suffix} {
-        min-height: $-switch-size;
-        font-size: $-switch-font;
-    }
-
-    $-switch-frame: $-switch-font * 2.3;
-
-    .n-switch--#{$suffix} .n-switch__switch {
-        width: $-switch-frame;
-        height: $-switch-size - 14;
-    }
-
-    $-switch-circle: $-switch-size - 20;
-    
-    .n-switch--#{$suffix} .n-switch__switch span {
-        width: $-switch-circle;
-        height: $-switch-circle;
-    }
-
-    .n-switch--#{$suffix}.n-on .n-switch__switch span {
-        left: $-switch-frame - $-switch-circle - 4;
-    }
-
-    $-switch-padding: $-switch-size * $-switch-ratio;
-
-    .n-switch--#{$suffix} .n-switch__label {
-        padding: 0 0 0 $-switch-padding * 0.5;
-    }
-
+.n-switch.n-on .n-switch__switch span {
+    left: size('base-hgt-inline', 'calc(($ * 1.9) - $ + 2px)');
 }
+
+.n-switch .n-switch__label {
+    padding-left: size('base-pad');
+}

package/src/table/index.scss

@@ -1,4 +1,4 @@
-@import "./src/table/table";
-@import "./src/table-column/table-column";
-@import "./src/table-cell/table-cell";
-@import "./src/table-filter/table-filter";
+@forward "./src/table/table";
+@forward "./src/table-column/table-column";
+@forward "./src/table-cell/table-cell";
+@forward "./src/table-filter/table-filter";

package/src/table/src/table/table.jsx

@@ -586,7 +586,10 @@ export default {
 
         return (
             <NPopover trigger="context" width={220}>
-                <NCheckboxGroup vModel={this.tempVisible} align="vertical">
+                <NPopoverGroup>
+                    {this.trans('Toggle column visiblity')}
+                </NPopoverGroup>
+                <NCheckboxGroup vModel={this.tempVisible} size="sm" align="vertical">
                     {Obj.values(columns)}
                 </NCheckboxGroup>
             </NPopover>
@@ -660,7 +663,7 @@ export default {
         );
 
         return (
-            <div class="n-table">
+            <div class="n-table n-table--md">
                 <NScrollbar ref="scrollbar" wrapClass="n-table__wrap" overflowY={false}>
                     {[this.ctor('renderHead')(), draggableHtml]}
                 </NScrollbar>