@kizmann/nano-ui 1.1.0 → 1.1.2

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

@@ -1,4 +1,4 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-table {
     overflow: hidden;
@@ -6,9 +6,11 @@
     width: 100%;
     display: flex;
     flex-direction: column;
+    border-radius: size('base-rad');
 }
 
 .n-table:before {
+    z-index: 500;
     content: '\00a0';
     position: absolute;
     top: 0;
@@ -17,28 +19,24 @@
     height: 100%;
     width: 100%;
     background: transparent;
-    z-index: 50;
     pointer-events: none;
     border: 1px solid transparent;
+    border-radius: size('base-rad');
 }
 
 .n-table > .n-scrollbar {
     flex: 1 1 auto;
 }
 
-.n-table .n-table__header {
-    display: inline-flex;
-}
-
 .n-table .n-table__wrap {
     min-width: 100%;
     min-height: 0;
     max-height: 100%;
-    flex: 1 1 auto;
     display: inline-flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
+    overflow: hidden;
 }
 
 .n-table > .n-scrollbar.n-windows > .n-scrollbar-content {
@@ -49,11 +47,6 @@
     bottom: 0 !important;
 }
 
-.n-table .n-table__wrap {
-    //margin-right: -1px;
-    //margin-bottom: -1px;
-}
-
 .n-table .n-table__inner {
     position: relative;
 }
@@ -89,6 +82,10 @@
     max-height: 100%;
 }
 
+.n-table__body .n-scrollbar .n-scrollbar-spacer {
+    width: auto !important;
+}
+
 .n-table__body .n-scrollbar__wrap {
     padding-bottom: 0 !important;
 }
@@ -101,14 +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: flex-start;
     border-bottom: 1px solid transparent;
-}
-
-.n-table .n-fixed {
-    flex: 0 0 auto !important;
 }

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-column/table-column.jsx

@@ -355,10 +355,14 @@ export default {
 
         let flex = '1 1 auto';
 
-        if ( ! Any.isEmpty(this.width) ) {
+        if ( this.width != 0 ) {
             flex = `1 1 ${this.width}`;
         }
 
+        if ( this.fixedWidth != 0 ) {
+            flex = `0 0 ${this.fixedWidth}px`;
+        }
+
         let props = {
             modelValue: this.tempWidth,
             flex:       flex,

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]
         },
@@ -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);
     }
 }

package/src/tabs/src/tabs-item/tabs-item.scss

@@ -1,12 +1,18 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-tabs-item {
-    flex: 1 0 auto;
+    flex: 1 1 auto;
+    min-height: 0;
 }
 
-.n-tabs__tab-icon {
-    color: $color-gray-40;
+.n-tabs-item:not(.n-scrollbar),
+.n-tabs-item.n-scrollbar .n-tabs__wrap {
+    margin-top: size('base-pad-vertical', 'calc($ * 2)');
+}
+
+.n-tabs.n-float .n-tabs-item:not(.n-scrollbar),
+.n-tabs.n-float .n-tabs-item.n-scrollbar .n-tabs__wrap {
+    margin-top: calc(#{"(#{size('base-pad-vertical')} * 2) + #{size('base-hgt')}"});
 }
 
 .n-tabs__tab-label span {
@@ -15,24 +21,10 @@
     text-overflow: ellipsis;
 }
 
-@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');
-
-    .n-tabs--#{$suffix} .n-tabs-item {
-        margin-top: $-tabs-size * $-tabs-ratio;
-    }
-
-    .n-tabs--#{$suffix} .n-tabs__tab-icon {
-        font-size: $-tabs-font - 2;
-        margin-right: $-tabs-size * $-tabs-ratio * 0.7;
-    }
-
-    .n-tabs--#{$suffix} .n-tabs__tab-label {
-        font-size: $-tabs-font;
-    }
-
+.n-tabs__tab-icon {
+    margin-right: size('base-pad');
 }
+
+.n-tabs__tab-icon i {
+    font-size: size('base-fnt-icon');
+}

package/src/tags/index.scss

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

package/src/tags/src/tags/tags.jsx

@@ -98,6 +98,7 @@ export default {
     {
         let classList = [
             'n-tags',
+            'n-tags--' + this.size,
         ];
 
         return (

package/src/tags/src/tags/tags.scss

@@ -1,5 +1,9 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
+
+.n-tags {
+    margin-bottom: size('base-pad-vertical', 'calc($ * -1)');
+}
 
 .n-tags .n-tags-item {
-    margin: 0 6px 6px 0;
+    margin: 0 size('base-pad-vertical') size('base-pad-vertical') 0;
 }

package/src/tags/src/tags-item/tags-item.jsx

@@ -33,15 +33,15 @@ export default {
         type: {
             default()
             {
-                return -1;
+                return null;
             },
-            type: [String, Number]
+            type: [String]
         },
 
         color: {
             default()
             {
-                return 0;
+                return null;
             },
             type: [String, Number]
         },
@@ -101,12 +101,12 @@ export default {
             'n-tags-item--' + size,
         ];
 
-        if ( this.type === -1 ) {
-            classList.push('n-tags-item--color-' + this.color);
+        if ( this.type !== null ) {
+            classList.push('n-tags-item--' + this.type);
         }
 
-        if ( this.type !== -1 ) {
-            classList.push('n-tags-item--color-' + this.type);
+        if ( this.color !== null ) {
+            classList.push('n-tags-item--color-' + this.color);
         }
 
         return (

package/src/tags/src/tags-item/tags-item.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-tags-item {
     overflow: hidden;
@@ -8,12 +7,10 @@
     align-items: center;
     justify-content: flex-start;
     max-width: 160px;
-    background: $color-gray-10;
 }
 
 .n-tags-item i {
     flex: 0 0 auto;
-    color: $color-gray-40;
     text-align: center;
 }
 
@@ -25,32 +22,14 @@
     flex: 1 1 auto;
 }
 
-@each $suffix, $values in $form {
-
-    $-tags-item-font: map.get($values, 'font');
-    $-tags-item-size: map.get($values, 'size');
-    $-tags-item-radius: map.get($values, 'radius');
-    $-tags-item-ratio: map.get($values, 'ratio');
-
-    .n-tags-item--#{$suffix} {
-        border-radius: $-tags-item-radius;
-        padding: 0 $-tags-item-size * 0.3 0 $-tags-item-size * 0.3;
-    }
-
-    .n-tags-item--#{$suffix} i,
-    .n-tags-item--#{$suffix} span {
-        height:  $-tags-item-size * 0.8;
-        line-height:  $-tags-item-size * 0.8;
-    }
-
-    .n-tags-item--#{$suffix} i {
-        height:  $-tags-item-size * 0.8;
-        margin-right: $-tags-item-size * 0.2;
-        font-size: $-tags-item-font - 2;
-    }
+.n-tags-item {
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
+    padding: 0 size('base-pad');
+    height: size('base-hgt', 'calc($ * 0.9)');
+}
 
-    .n-tags-item--#{$suffix} span {
-        font-size: $-tags-item-font - 1;
-        margin-left: 2px;
-    }
+.n-tags-item i {
+    margin-right: size('base-pad', 'calc($ * 0.6)');
+    font-size: size('base-fnt-icon');
 }

package/src/textarea/index.scss

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

package/src/textarea/src/textarea/textarea.jsx

@@ -5,6 +5,8 @@ export default {
 
     name: 'NTextarea',
 
+    inheritAttrs: false,
+
     props: {
 
         modelValue: {

package/src/textarea/src/textarea/textarea.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-textarea {
     position: relative;
@@ -7,6 +6,7 @@
     align-items: stretch;
     justify-content: stretch;
     width: 100%;
+    font-size: size('base-fnt');
 }
 
 .n-textarea.n-disabled {
@@ -18,34 +18,17 @@
     appearance: none;
     display: block;
     width: 100%;
+    min-height: size('base-hgt');
     text-decoration: none;
+    font-size: 1em;
     line-height: 1.2;
     background: transparent;
     box-shadow: none;
+    border-radius: size('base-rad');
     border: 1px solid transparent;
+    padding: size('base-hgt', 'calc($ * 0.2)') size('base-pad');
 }
 
 .n-textarea.n-disabled textarea {
     cursor: not-allowed;
 }
-
-@each $suffix, $values in $form {
-
-    $-textarea-font: map.get($values, 'font');
-    $-textarea-size: map.get($values, 'size');
-    $-textarea-radius: map.get($values, 'radius');
-    $-textarea-ratio: map.get($values, 'ratio');
-
-    .n-textarea--#{$suffix} {
-        font-size: $-textarea-font;
-    }
-
-    $-textarea-line: $-textarea-size - 2 - ($-textarea-font * 1.2);
-
-    .n-textarea--#{$suffix} textarea {
-        min-height: $-textarea-size;
-        padding: $-textarea-line * 0.5 $-textarea-size * $-textarea-ratio;
-        border-radius: $-textarea-radius;
-    }
-
-}

package/src/timepicker/index.scss

@@ -1,2 +1,2 @@
-@import "./src/timepicker-panel/timepicker-panel";
-@import "./src/timepicker/timepicker";
+@forward "./src/timepicker-panel/timepicker-panel";
+@forward "./src/timepicker/timepicker";