@kizmann/nano-ui 1.0.15 → 1.1.2

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]
         },
@@ -77,7 +77,7 @@ export default {
         }
 
         return (
-            <i class={this.icon}></i>
+            <i class={'n-icon ' + this.icon}></i>
         );
     },
 
@@ -99,15 +99,14 @@ export default {
         let classList = [
             'n-tags-item',
             '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";

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.jsx

@@ -201,8 +201,12 @@ export default {
             return null;
         }
 
+        let scrollbarProps = {
+            offsetY: 0, wrapClass: 'n-timepicker-panel__wrap'
+        };
+
         return (
-            <NScrollbar ref="hour" class="n-timepicker-panel__panel" wrapClass="n-timepicker-panel__wrap">
+            <NScrollbar ref="hour" class="n-timepicker-panel__panel" {...scrollbarProps}>
                 {Arr.each(this.hoursGrid, this.ctor('renderHourItem'))}
             </NScrollbar>
         );
@@ -235,8 +239,12 @@ export default {
             return null;
         }
 
+        let scrollbarProps = {
+            offsetY: 0, wrapClass: 'n-timepicker-panel__wrap'
+        };
+
         return (
-            <NScrollbar ref="minute" class="n-timepicker-panel__panel" wrapClass="n-timepicker-panel__wrap">
+            <NScrollbar ref="minute" class="n-timepicker-panel__panel" {...scrollbarProps}>
                 {Arr.each(this.minutesGrid, this.ctor('renderMinuteItem'))}
             </NScrollbar>
         );
@@ -269,8 +277,12 @@ export default {
             return null;
         }
 
+        let scrollbarProps = {
+            offsetY: 0, wrapClass: 'n-timepicker-panel__wrap'
+        };
+
         return (
-            <NScrollbar ref="second" class="n-timepicker-panel__panel" wrapClass="n-timepicker-panel__wrap">
+            <NScrollbar ref="second" class="n-timepicker-panel__panel" {...scrollbarProps}>
                 {Arr.each(this.secondsGrid, this.ctor('renderSecondItem'))}
             </NScrollbar>
         );

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,11 +6,21 @@
     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;
@@ -19,7 +28,7 @@
 }
 
 .n-timepicker-panel__panel {
-flex: 1 0 auto;
+    flex: 1 0 auto;
     min-height: 0;
 }
 
@@ -31,46 +40,30 @@ flex: 1 0 auto;
     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";