@kizmann/nano-ui 1.0.15 → 1.1.2

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

@@ -262,7 +262,7 @@ export default {
         useKeys: {
             default()
             {
-                return false;
+                return true;
             },
             type: [Boolean]
         },
@@ -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>
@@ -616,8 +619,7 @@ export default {
     render()
     {
         let except = [
-            'visible', 'filter', 'sortProp',
-            'sortDir', 'closeFilterOnEnter'
+            'visible', 'filter', 'sortProp', 'sortDir', 'closeFilterOnEnter'
         ];
 
         let props = Obj.except(this.$props, except, {
@@ -661,11 +663,9 @@ export default {
         );
 
         return (
-            <div class="n-table">
-                <NScrollbar ref="scrollbar" class="n-table__wrap" fixture={true} overflowY={false}>
-                    <div class="n-table__inner">
-                        {[this.ctor('renderHead')(), draggableHtml]}
-                    </div>
+            <div class="n-table n-table--md">
+                <NScrollbar ref="scrollbar" wrapClass="n-table__wrap" overflowY={false}>
+                    {[this.ctor('renderHead')(), draggableHtml]}
                 </NScrollbar>
                 {this.$slots.default && this.$slots.default()}
             </div>

package/src/table/src/table/table.scss

@@ -1,4 +1,4 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-table {
     overflow: hidden;
@@ -6,10 +6,11 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    border-radius: $md-radius + 2;
+    border-radius: size('base-rad');
 }
 
 .n-table:before {
+    z-index: 500;
     content: '\00a0';
     position: absolute;
     top: 0;
@@ -18,27 +19,24 @@
     height: 100%;
     width: 100%;
     background: transparent;
-    z-index: 50;
     pointer-events: none;
-    border-radius: $md-radius + 2;
     border: 1px solid transparent;
+    border-radius: size('base-rad');
 }
 
-.n-table .n-table__header {
-    border-radius: $md-radius + 2 $md-radius + 2 0 0;
+.n-table > .n-scrollbar {
+    flex: 1 1 auto;
 }
 
-.n-table .n-table__wrap,
-.n-table .n-table__inner,
-.n-table > .n-scrollbar,
-.n-table > .n-scrollbar > .n-scrollbar-content,
-.n-table > .n-scrollbar > .n-scrollbar-content > .n-scrollbar__wrap {
+.n-table .n-table__wrap {
     min-width: 100%;
-    flex: 1 1 auto;
-    display: flex;
+    min-height: 0;
+    max-height: 100%;
+    display: inline-flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
+    overflow: hidden;
 }
 
 .n-table > .n-scrollbar.n-windows > .n-scrollbar-content {
@@ -49,15 +47,6 @@
     bottom: 0 !important;
 }
 
-.n-table .n-table__wrap {
-    //margin-right: -1px;
-    //margin-bottom: -1px;
-}
-
-.n-table__header {
-    margin-left: -1px;
-}
-
 .n-table .n-table__inner {
     position: relative;
 }
@@ -90,6 +79,11 @@
 
 .n-table__body .n-scrollbar {
     flex: 1 1 auto;
+    max-height: 100%;
+}
+
+.n-table__body .n-scrollbar .n-scrollbar-spacer {
+    width: auto !important;
 }
 
 .n-table__body .n-scrollbar__wrap {
@@ -104,10 +98,10 @@
 .n-table .n-table__header {
     position: relative;
     flex: 0 0 auto;
-    height: 40px;
-    display: flex;
+    height: size('base-hgt', 'calc($ + 10px)');
+    display: inline-flex;
     flex-direction: row;
     align-items: stretch;
-    justify-content: stretch;
+    justify-content: flex-start;
     border-bottom: 1px solid transparent;
 }

package/src/table/src/table-cell/table-cell.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-table-cell {
     position: relative;
@@ -8,8 +7,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: stretch;
-    padding: 0 10px;
-    margin-left: -1px;
+    padding: 0 size('base-pad');
 }
 
 .n-table-cell.n-fluid {
@@ -74,18 +72,9 @@
     opacity: 0.7;
 }
 
-@each $suffix, $values in $form {
-
-    $-table-font: map.get($values, 'font');
-    $-table-size: map.get($values, 'size');
-    $-table-radius: map.get($values, 'radius');
-    $-table-ratio: map.get($values, 'ratio');
-
-    .n-draglist--#{$suffix} .n-table-cell--checkbox i {
-        width: $-table-size - 16;
-        height: $-table-size - 16;
-        border-radius: $-table-radius - 1;
-        font-size: $-table-font - 4;
-    }
-
+.n-table-cell--checkbox i {
+    width: size('base-hgt-inline');
+    height: size('base-hgt-inline');
+    border-radius: size('base-rad-inline');
+    font-size: size('base-fnt-inline');
 }

package/src/table/src/table-cell/types/table-cell-image.jsx

@@ -33,13 +33,19 @@ export default {
             'n-table-cell--' + this.column.type
         ];
 
-        let props = {
+        let previewProps = {
             fit: 'contain',
-        }
+            index: this.NDraggableItem.index,
+            group: this.column.uid,
+        };
+
+        previewProps['onSlide'] = () => {
+            this.NTable.$refs.draggable.setRawCurrent(this.NDraggableItem.index);
+        };
 
         return (
             <div class={classList}>
-                <NPreview file={this.preview || this.input} thumb={this.input} {...props} />
+                <NPreview file={this.preview || this.input} thumb={this.input} {...previewProps} />
             </div>
         );
     }

package/src/table/src/table-column/table-column.jsx

@@ -174,14 +174,6 @@ export default {
             type: [String]
         },
 
-        fluid: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
         fixedWidth: {
             default()
             {
@@ -353,10 +345,6 @@ export default {
             classList.push('n-sorted', 'n-' + sortDirection);
         }
 
-        if ( this.fluid || !this.width ) {
-            classList.push('n-fluid');
-        }
-
         if ( this.fixedWidth ) {
             classList.push('n-fixed');
         }
@@ -365,35 +353,39 @@ export default {
             classList.push('n-filtered');
         }
 
-        let style = {};
+        let flex = '1 1 auto';
 
-        if ( this.fixedWidth ) {
-            style.width = this.fixedWidth + 'px';
+        if ( this.width != 0 ) {
+            flex = `1 1 ${this.width}`;
         }
 
-        if ( this.width ) {
-            style.flexBasis = this.width + 'px';
+        if ( this.fixedWidth != 0 ) {
+            flex = `0 0 ${this.fixedWidth}px`;
         }
 
         let props = {
             modelValue: this.tempWidth,
-            width:      this.width,
+            flex:       flex,
             minWidth:   this.minWidth,
             maxWidth:   this.maxWidth,
             disabled:   !!this.fixedWidth,
             group:      ['n-table', this.NTable.uid],
         };
 
+        props['onUpdateWidth'] = (value) => {
+            this.tempWidth = value;
+        };
+
         props['onUpdate:modelValue'] = (value) => {
             this.tempWidth = value;
-        }
+        };
 
         if ( this.sort ) {
             props.onMousedown = this.sortByColumn;
         }
 
         return (
-            <NResizer ref="column" class={classList} style={style} {...props}>
+            <NResizer ref="column" class={classList} {...props}>
                 {this.ctor('renderHeadSort')()}
                 {this.ctor('renderHeadLabel')()}
                 {this.ctor('renderHeadFilter')()}
@@ -472,10 +464,6 @@ export default {
             'n-table-cell--' + this.type,
         ];
 
-        if ( this.fluid ) {
-            classList.push('n-fluid');
-        }
-
         if ( this.tempWidth ) {
             classList.push('n-fixed');
         }

package/src/table/src/table-column/table-column.scss

@@ -1,4 +1,4 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-table-column {
     cursor: default;
@@ -8,7 +8,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: stretch;
-    padding: 0 10px;
+    padding: 0 size('base-pad');
 }
 
 .n-table-column.n-fluid {
@@ -21,9 +21,10 @@
 
 // Column
 
-.n-table__header .n-table-column {
+.n-table__header .n-table-column,
+.n-table__body .n-table-cell {
     border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
+    //border-right: 1px solid transparent;
 }
 
 .n-table-column .n-table-column__label {
@@ -51,15 +52,15 @@
 
 .n-table-column .n-table-column__sort {
     flex: 0 0 auto;
-    margin-right: 5px;
+    margin-right: size('base-pad', 'calc($ * 0.5)');
 }
 
 .n-table-column .n-table-column__sort > i {
     position: relative;
     display: block;
-    width: 20px;
-    height: 20px;
-    border-radius: $md-radius;
+    width: size('base-hgt', 'calc($ - 12px)');
+    height: size('base-hgt', 'calc($ - 12px)');
+    border-radius: size('base-rad');
 }
 
 .n-table-column .n-table-column__sort > i:before {
@@ -90,7 +91,7 @@
 
 .n-table .n-table-column .n-table-column__filter {
     flex: 0 0 auto;
-    margin-left: 5px;
+    margin-left: size('base-pad', 'calc($ * 0.5)');
 }
 
 .n-table-column .n-table-column__label {
@@ -108,7 +109,7 @@
     bottom: 2px;
     left: 1px;
     right: 1px;
-    border-radius: 500px;
+    border-radius: size('base-rad-circle');
 }
 
 .n-table .n-table-column .n-table-column__filter > i {
@@ -116,9 +117,9 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    width: 20px;
-    height: 20px;
+    width: size('base-hgt', 'calc($ - 12px)');
+    height: size('base-hgt', 'calc($ - 12px)');
     text-align: center;
-    border-radius: $md-radius;
+    border-radius: size('base-rad-inline');
 }
 

package/src/table/src/table-filter/table-filter.jsx

@@ -184,7 +184,7 @@ export default {
     {
         let props = {
             type: 'primary',
-            link: true,
+            glass: true,
             size: 'xs',
             disabled: ! this.canApply
         };
@@ -199,8 +199,8 @@ export default {
     renderReset()
     {
         let props = {
-            type: 'danger',
-            link: true,
+            type: 'neutral',
+            glass: true,
             size: 'xs',
             disabled: this.canReset,
         };
@@ -227,7 +227,7 @@ export default {
         let props = {
             class: 'n-table-filter__popover',
             trigger: 'click',
-            size: 'sm',
+            size: 'md',
             width: 220,
         }
 

package/src/table/src/table-filter/table-filter.scss

@@ -1,6 +1,4 @@
-@import "../../../root/vars";
-
-$table-filter-height: 18px !default;
+@use "../../../root/helpers" as *;
 
 .n-table-filter__footer {
     position: relative;
@@ -20,8 +18,16 @@ $table-filter-height: 18px !default;
     margin-left: auto;
 }
 
+.n-popover.n-table-filter__popover {
+    --n-color-popover: var(--n-color-form);
+}
+
+.n-table-filter__popover {
+    width: 240px;
+}
+
 .n-table-filter__popover .n-form-item {
-    margin-bottom: 5px;
+    margin-bottom: size('base-pad-vertical');
 }
 
 .n-table-filter__popover .n-form-item:last-child {

package/src/tabs/index.scss

@@ -1,2 +1,2 @@
-@import "./src/tabs/tabs";
-@import "./src/tabs-item/tabs-item";
+@forward "./src/tabs/tabs";
+@forward "./src/tabs-item/tabs-item";

package/src/tabs/src/tabs/tabs.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-tabs {
     display: flex;
@@ -24,7 +23,7 @@
 }
 
 .n-tabs.n-float .n-tabs__header {
-    z-index: 10;
+    z-index: 100;
     position: absolute;
     top: 0;
     left: 0;
@@ -64,46 +63,38 @@
     flex-direction: row;
     align-items: center;
     justify-content: stretch;
+    font-size: size('base-fnt');
     transition: color 0.15s, background 0.15s;
 }
 
 .n-tabs__body {
     position: relative;
     flex: 1 1 auto;
+    min-height: 0;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
 }
 
-@each $suffix, $values in $form {
-
-    $-tabs-font: map.get($values, 'font');
-    $-tabs-size: map.get($values, 'size');
-    $-tabs-radius: map.get($values, 'radius');
-    $-tabs-ratio: map.get($values, 'ratio');
-
-    $-tabs-spacer: $-tabs-size * $-tabs-ratio;
-
-    .n-tabs--#{$suffix} .n-tabs__tab {
-        padding: $-tabs-spacer;
-    }
+.n-tabs__tab {
+    padding: size('base-pad-vertical', 'calc($ * 1.4)') size('base-pad');
+}
 
-    .n-tabs--#{$suffix}.n-float .n-tabs__tab {
-        border-radius: $-tabs-radius;
-        height: $-tabs-font * 2.4;
-        line-height: $-tabs-font * 2.4;
-        padding: 0 $-tabs-spacer;
-        margin: $-tabs-font * 0.6;
-    }
+.n-tabs.n-float .n-tabs__header {
+    padding: size('base-pad-vertical') 0;
+}
 
-    .n-tabs.n-float .n-tabs__tab:not(:first-child) {
-        margin-left: 0;
-    }
+.n-tabs.n-float .n-tabs__tab {
+    border-radius: size('base-rad');
+    height: size('base-hgt');
+    padding: 0 size('base-pad');
+}
 
-    .n-tabs.n-float .n-tabs-item:not(.n-scrollbar),
-    .n-tabs.n-float .n-tabs-item.n-scrollbar .n-scrollbar__wrap {
-        margin-top: $-tabs-font * 2.8;
-    }
+.n-tabs.n-float .n-tabs__tab:not(:last-child) {
+    margin-right: size('base-pad');
+}
 
+.n-tabs.n-float .n-tabs__tab:not(:first-child) {
+    margin-left: 0;
 }

package/src/tabs/src/tabs-item/tabs-item.jsx

@@ -61,10 +61,10 @@ export default {
             type: [Boolean]
         },
 
-        preload: {
+        lazy: {
             default()
             {
-                return false;
+                return true;
             },
             type: [Boolean]
         },
@@ -114,7 +114,7 @@ export default {
 
         return (
             <div class="n-tabs__tab-icon">
-                { this.$slots.icon && this.$slots.icon() || <i class={this.icon}></i> }
+                { this.$slots.icon && this.$slots.icon() || <i class={'n-icon ' + this.icon}></i> }
             </div>
         );
     },
@@ -154,11 +154,11 @@ export default {
     {
         let renderBody = this.NTabs.tempValue === this.name;
 
-        if ( this.NTabs.tempValue !== this.name && this.keep ) {
-            renderBody = this.init;
+        if ( this.keep ) {
+            renderBody |= this.init;
         }
 
-        if ( this.NTabs.tempValue !== this.name && this.preload ) {
+        if ( ! this.lazy ) {
             renderBody = true;
         }
 
@@ -188,6 +188,14 @@ export default {
             element = resolveComponent('NScrollbar');
         }
 
-        return h(element, { class: classList, style }, this.$slots);
+        let props = {
+            class: classList, style
+        }
+
+        if ( element !== 'div' ) {
+            props.wrapClass = 'n-tabs__wrap';
+        }
+
+        return h(element, props, this.$slots);
     }
 }