@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/draggable/src/draglist/draglist.jsx

@@ -170,7 +170,7 @@ export default {
         offsetY: {
             default()
             {
-                return 10;
+                return 0;
             },
             type: [Number]
         },
@@ -903,8 +903,8 @@ export default {
         }
 
         let passed = [
-            'threshold', 'bufferItems', 'itemHeight', 
-            'overflowX', 'overflowY',  'offsetX', 'offsetY', 'useKeys'
+            'threshold', 'itemHeight', 'overflowX', 'overflowY', 'offsetX', 'offsetY',
+            'useKeys', 'uniqueProp'
         ];
 
         let props = Obj.only(this.$props, passed, {

package/src/draggable/src/draglist/draglist.scss

@@ -1,23 +1,6 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-draglist__empty {
     margin: auto;
-}
-
-@each $suffix, $values in $form {
-
-    $-draglist-font: map.get($values, 'font');
-    $-draglist-size: map.get($values, 'size');
-    $-draglist-radius: map.get($values, 'radius');
-    $-draglist-ratio: map.get($values, 'ratio');
-
-    .n-draglist--#{$suffix} {
-        font-size: $-draglist-font;
-    }
-
-    .n-draglist--#{$suffix} .n-draglist__empty {
-        padding: $-draglist-size $-draglist-size * 0.5;
-    }
-
-}
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad');
+}

package/src/draggable/src/draglist-item/draglist-item.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-draglist-item {
     cursor: default;
@@ -8,16 +7,13 @@
     align-items: stretch;
     justify-content: stretch;
     width: 100%;
+    font-size: size('base-fnt');
 }
 
 .n-draglist-item.n-nodrop > * > * {
     pointer-events: none;
 }
 
-.n-draglist-item.n-nodrop {
-    background: rgba($color-danger, 0.1);
-}
-
 .n-draglist-item__spacer {
     flex: 0 0 auto;
 }
@@ -72,36 +68,19 @@
     display: none;
 }
 
-@each $suffix, $values in $form {
-
-    $-draglist-font: map.get($values, 'font');
-    $-draglist-size: map.get($values, 'size');
-    $-draglist-radius: map.get($values, 'radius');
-    $-draglist-ratio: map.get($values, 'ratio');
-
-    .n-draglist--#{$suffix} {
-        font-size: $-draglist-font;
-    }
-
-    .n-draglist--#{$suffix} .n-draglist__empty {
-        padding: $-draglist-size $-draglist-size * 0.5;
-    }
-
-    .n-draglist--#{$suffix} .n-draglist-item__ellipsis,
-    .n-draglist--#{$suffix} .n-draglist-item__angle,
-    .n-draglist--#{$suffix} .n-draglist-item__checkbox {
-        width: $-draglist-size - 16;
-        height: $-draglist-size - 16;
-        border-radius: $-draglist-radius - 1;
-    }
-
-    .n-draglist--#{$suffix} .n-draglist-item__ellipsis,
-    .n-draglist--#{$suffix} .n-draglist-item__angle {
-        font-size: $-draglist-font - 2;
-    }
+.n-draglist-item__ellipsis,
+.n-draglist-item__angle,
+.n-draglist-item__checkbox {
+    width: size('base-hgt-inline');
+    height: size('base-hgt-inline');
+    border-radius: size('base-rad-inline');
+}
 
-    .n-draglist--#{$suffix} .n-draglist-item__checkbox {
-        font-size: $-draglist-font - 4;
-    }
+.n-draglist-item__ellipsis,
+.n-draglist-item__angle {
+    font-size: size('base-fnt-icon');
+}
 
+.n-draglist-item__checkbox {
+    font-size: size('base-fnt-inline');
 }

package/src/draggable/src/dropzone/dropzone.scss

@@ -1,23 +1,10 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
-.n-dropzone__empty {
-    margin: auto;
+.n-dropzone {
+    font-size: size('base-fnt');
 }
 
-@each $suffix, $values in $form {
-
-    $-dropzone-font: map.get($values, 'font');
-    $-dropzone-size: map.get($values, 'size');
-    $-dropzone-radius: map.get($values, 'radius');
-    $-dropzone-ratio: map.get($values, 'ratio');
-
-    .n-dropzone--#{$suffix} {
-        font-size: $-dropzone-font;
-    }
-
-    .n-dropzone--#{$suffix} .n-dropzone__empty {
-        padding: $-dropzone-size $-dropzone-size * 0.5;
-    }
-
+.n-dropzone__empty {
+    margin: auto;
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad');
 }

package/src/drawer/index.scss

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

package/src/drawer/src/drawer/drawer.jsx

@@ -71,10 +71,10 @@ export default {
             type: [String]
         },
 
-        type: {
+        theme: {
             default()
             {
-                return 'default';
+                return 'auto';
             },
             type: [String]
         },
@@ -405,10 +405,13 @@ export default {
         let classList = [
             'n-drawer',
             'n-drawer--' + this.size,
-            'n-drawer--' + this.type,
             'n-drawer--' + this.position
         ];
 
+        if ( this.theme ) {
+            classList.push('n-theme--' + this.theme);
+        }
+
         if ( this.tempValue ) {
             this.queueRefreshTimeout();
         }

package/src/drawer/src/drawer/drawer.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-drawer {
     position: fixed;
@@ -23,7 +22,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    transition: opacity 0.5s ease-in-out;
+    transition: opacity 0.3s;
 }
 
 .n-drawer:not(.n-ready) .n-drawer__backdrop {
@@ -104,39 +103,36 @@
     opacity: 0.6;
 }
 
-@each $suffix, $values in $form {
+.n-drawer {
+    font-size: size('base-fnt');
+}
 
-    $-drawer-font: map.get($values, 'font');
-    $-drawer-size: map.get($values, 'size');
-    $-drawer-radius: map.get($values, 'radius');
-    $-drawer-ratio: map.get($values, 'ratio');
+.n-drawer--left .n-drawer__frame {
+    //border-radius: 0 size('base-rad-window') size('base-rad-window') 0;
+}
 
-    .n-drawer--#{$suffix} {
-        font-size: $-drawer-font;
-    }
+.n-drawer--right .n-drawer__frame {
+    //border-radius: size('base-rad-window') 0 0 size('base-rad-window');
+}
 
-    $-drawer-padding: $-drawer-size * $-drawer-ratio;
+.n-drawer__header {
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad', 'calc($ * 2)');
+}
 
-    .n-drawer--#{$suffix} .n-drawer__header {
-        padding: $-drawer-padding * 1.5 $-drawer-padding * 2;
-    }
+.n-drawer.n-closable .n-drawer__header {
+    padding-right: calc(#{"(#{size('base-pad')} * 2) + #{size('base-hgt')}"});
+}
 
-    .n-drawer--#{$suffix}.n-closable .n-drawer__header {
-        padding-right: $-drawer-size + ($-drawer-padding * 2);
-    }
-    
-    .n-drawer--#{$suffix}:not(.n-raw) .n-drawer__wrap {
-        padding: $-drawer-padding * 1.5 $-drawer-padding * 2;
-    }
-    
-    .n-drawer--#{$suffix} .n-drawer__footer {
-        padding: $-drawer-padding * 1.5 $-drawer-padding * 2;
-    }
+.n-drawer:not(.n-raw) .n-drawer__wrap {
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad', 'calc($ * 2)');
+}
 
-    .n-drawer__close {
-        width: $-drawer-size;
-        height: $-drawer-size;
-        right: $-drawer-padding * 0.8;
-    }
+.n-drawer__footer {
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad', 'calc($ * 2)');
+}
 
+.n-drawer__close {
+    width: size('base-hgt');
+    height: size('base-hgt');
+    right: size('base-pad');
 }

package/src/durationpicker/index.scss

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

package/src/durationpicker/src/durationpicker/durationpicker.jsx

@@ -331,7 +331,7 @@ export default {
         }
 
         return (
-            <div class="n-durationpicker__clear" {...props}>
+            <div class="n-durationpicker__clear n-form-clear" {...props}>
                 <i class={ nano.Icons.times }></i>
             </div>
         );
@@ -340,7 +340,7 @@ export default {
     renderLabelAngle()
     {
         return (
-            <div class="n-durationpicker__angle">
+            <div class="n-durationpicker__angle n-form-angle">
                 <i class={ nano.Icons.angleDown }></i>
             </div>
         );
@@ -417,7 +417,7 @@ export default {
             }
 
             return (
-                <NScrollbar ref="scrollbar" class="n-durationpicker__body" {...scrollProps}>
+                <NScrollbar ref="scrollbar" class="n-popover-shadow n-durationpicker-panel" {...scrollProps}>
                     {this.ctor('renderItems')()}
                 </NScrollbar>
             )

package/src/durationpicker/src/durationpicker/durationpicker.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-durationpicker {
     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-durationpicker__input {
@@ -100,64 +101,26 @@
     width: 100%;
 }
 
-.n-durationpicker__body,
-.n-durationpicker__empty {
+.n-durationpicker-panel {
     overflow: hidden;
-    margin: 1px 0;
     max-height: 210px;
 }
 
-.n-durationpicker__empty {
-     text-align: center;
+.n-durationpicker {
+    height: size('base-hgt');
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
 }
 
-@each $suffix, $values in $form {
-
-    $-duration-font: map.get($values, 'font');
-    $-duration-size: map.get($values, 'size');
-    $-duration-radius: map.get($values, 'radius');
-    $-duration-ratio: map.get($values, 'ratio');
-
-    .n-durationpicker--#{$suffix} {
-        min-height: $-duration-size;
-        font-size: $-duration-font;
-        border-radius: $-duration-radius;
-    }
-
-    $-duration-padding: $-duration-size * $-duration-ratio * 0.5;
-
-    .n-durationpicker--#{$suffix} .n-durationpicker__display,
-    .n-durationpicker--#{$suffix} .n-durationpicker__input input {
-        padding: 0 $-duration-padding;
-    }
-
-    .n-durationpicker--#{$suffix} .n-durationpicker__clear,
-    .n-durationpicker--#{$suffix} .n-durationpicker__angle {
-        width: $-duration-size;
-        margin: 0 -#{$-duration-padding} 0 -#{$-duration-padding};
-    }
-    .n-durationpicker--#{$suffix} .n-durationpicker__clear i,
-    .n-durationpicker--#{$suffix} .n-durationpicker__angle i {
-        width: $-duration-size - 14;
-        height: $-duration-size - 14;
-        line-height: $-duration-size - 14;
-    }
-
-    .n-durationpicker--#{$suffix} .n-durationpicker__angle i {
-        font-size: $-duration-font - 2;
-    }
-
-    .n-durationpicker--#{$suffix} .n-durationpicker__clear i {
-        font-size: $-duration-font - 4;
-    }
-
-    .n-popover--#{$suffix} .n-durationpicker__body,
-    .n-popover--#{$suffix} .n-durationpicker__empty {
-        border-radius: $-duration-radius;
-    }
+.n-durationpicker__input input {
+    padding: 0 size('base-pad');
+}
 
-    .n-popover--#{$suffix} .n-durationpicker__empty {
-        padding: $-duration-padding;
-    }
+.n-durationpicker__clear,
+.n-durationpicker__angle {
+    width: size('base-hgt');
+}
 
+.n-durationpicker-panel {
+    border-radius: size('base-rad');
 }

package/src/empty/index.scss

@@ -1 +1 @@
-@import "./src/empty-icon/empty-icon";
+@forward "./src/empty-icon/empty-icon";

package/src/empty/src/empty-icon/empty-icon.jsx

@@ -31,7 +31,7 @@ export default {
         inline: {
             default()
             {
-                return false;
+                return true;
             },
             type: [Boolean]
         }

package/src/empty/src/empty-icon/empty-icon.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-empty-icon {
     pointer-events: none;
@@ -9,6 +8,7 @@
     justify-content: center;
     width: 100%;
     margin: 0 auto;
+    font-size: size('base-fnt');
 }
 
 .n-empty-icon.n-inline {
@@ -18,15 +18,17 @@
 
 .n-empty-icon__frame {
     display: block;
-    width: 35%;
-    min-width: 36px;
-    margin: 0 auto;
-    opacity: 0.3;
+    opacity: 0.5;
+}
+
+.n-empty-icon:not(.n-inline) .n-empty-icon__frame {
+    width: size('base-pad', 'calc($ * 4.5)');
+    height: size('base-pad', 'calc($ * 4.5)');
 }
 
 .n-empty-icon.n-inline .n-empty-icon__frame {
-    width: 36px;
-    margin: 0 10px 0 0;
+    width: size('base-pad', 'calc($ * 2.5)');
+    height: size('base-pad', 'calc($ * 2.5)');
 }
 
 .n-empty-icon.n-disabled .n-empty-icon__frame {
@@ -41,21 +43,6 @@
     padding-bottom: 100%;
 }
 
-@each $suffix, $values in $form {
-
-    $-empty-icon-font: map.get($values, 'font');
-    $-empty-icon-size: map.get($values, 'size');
-    $-empty-icon-radius: map.get($values, 'radius');
-    $-empty-icon-ratio: map.get($values, 'ratio');
-
-    .n-empty-icon--#{$suffix} {
-        font-size: $-empty-icon-font;
-    }
-
-    .n-empty-icon--#{$suffix} .n-empty-icon__frame {
-        max-width: $-empty-icon-size * 2.5;
-        max-height: $-empty-icon-size * 2.5;
-        margin-bottom: $-empty-icon-size * 0.2;
-    }
-
-}
+.n-empty-icon.n-inline .n-empty-icon__text {
+    margin-left: size('base-pad');
+}

package/src/file/index.scss

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

package/src/file/src/file/file.jsx

@@ -37,6 +37,14 @@ export default {
             type: [String]
         },
 
+        glass: {
+            default()
+            {
+                return true;
+            },
+            type: [Boolean]
+        },
+
         disabled: {
             default()
             {
@@ -167,6 +175,7 @@ export default {
             size: this.size,
             disabled: this.disabled,
             icon: this.icon,
+            glass: this.glass,
             onClick: this.openContext
         };
 

package/src/file/src/file/file.scss

@@ -1,4 +1,4 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-file {
     position: relative;
@@ -17,7 +17,7 @@
 
 .n-file > .n-button {
     flex: 0 0 auto;
-    margin-left: 7px;
+    margin-left: size('base-pad');
 }
 
 .n-file .n-file__input {

package/src/form/index.js

@@ -1,10 +1,12 @@
 import Form from "./src/form/form.jsx";
+import FormBag from "./src/form-bag/form-bag.jsx";
 import FormGroup from "./src/form-group/form-group.jsx";
 import FormItem from "./src/form-item/form-item.jsx";
 import FormFrame from "./src/form-frame/form-frame.jsx";
 
 export default function (App) {
     App.component(Form.name, Form);
+    App.component(FormBag.name, FormBag);
     App.component(FormGroup.name, FormGroup);
     App.component(FormItem.name, FormItem);
     App.component(FormFrame.name, FormFrame);

package/src/form/index.scss

@@ -1,4 +1,5 @@
-@import "./src/form/form";
-@import "./src/form-group/form-group";
-@import "./src/form-item/form-item";
-@import "./src/form-frame/form-frame";
+@forward "./src/form/form";
+@forward "./src/form-bag/form-bag";
+@forward "./src/form-group/form-group";
+@forward "./src/form-item/form-item";
+@forward "./src/form-frame/form-frame";