@kizmann/nano-ui 0.7.10 → 0.7.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kizmann/nano-ui",
-    "version": "0.7.10",
+    "version": "0.7.13",
     "license": "MIT",
     "private": false,
     "author": "Eduard Kizmann <kizmann@protonmail.ch>",

package/src/form/src/form-item/form-item.js

@@ -78,13 +78,13 @@ export default {
         {
             let $input = Dom.find(this.$el).find('input');
 
-            if ( ! $input.empty() ) {
+            if ( !$input.empty() ) {
                 return $input.get(0).focus();
             }
 
             $input = Dom.find(this.$refs.input).childs();
 
-            if ( ! $input.empty() ) {
+            if ( !$input.empty() ) {
                 return $input.get(0).click();
             }
 
@@ -99,7 +99,7 @@ export default {
                 return;
             }
 
-            if ( ! this.NTabs || ! this.NTabsItem ) {
+            if ( !this.NTabs || !this.NTabsItem ) {
                 return;
             }
 
@@ -123,23 +123,28 @@ export default {
 
     beforeMount()
     {
-        this.NForm.addItem(this);
+        if ( this.NForm ) {
+            this.NForm.addItem(this);
+        }
     },
 
     mounted()
     {
-        this.NForm.$watch('errors', this.gotoInput,
-            { deep: true });
+        if ( this.NForm ) {
+            this.NForm.$watch('errors', this.gotoInput, { deep: true });
+        }
     },
 
     beforeUnmount()
     {
-        this.NForm.removeItem(this);
+        if ( this.NForm ) {
+            this.NForm.removeItem(this);
+        }
     },
 
     renderTooltip()
     {
-        if ( ! this.tooltip && ! this.$slots.tooltip ) {
+        if ( !this.tooltip && !this.$slots.tooltip ) {
             return null;
         }
 
@@ -150,21 +155,21 @@ export default {
 
         return (
             <NPopover type="tooltip" {...props}>
-                { this.$slots.tooltip && this.$slots.tooltip() || this.tooltip }
+                {this.$slots.tooltip && this.$slots.tooltip() || this.tooltip}
             </NPopover>
         );
     },
 
     renderLabel()
     {
-        if ( ! this.label && ! this.$slots.label ) {
+        if ( !this.label && !this.$slots.label ) {
             return null;
         }
 
         let labelHtml = (
             <div class="n-form-item__label">
                 <label onClick={this.focusInput}>
-                    { this.$slots.label && this.$slots.label() || this.label }
+                    {this.$slots.label && this.$slots.label() || this.label}
                 </label>
             </div>
         );
@@ -176,13 +181,13 @@ export default {
 
     renderError()
     {
-        if ( ! Obj.has(this.NForm.errors, this.prop) ) {
+        if ( !this.NForm || !Obj.has(this.NForm.errors, this.prop) ) {
             return null;
         }
 
         return (
             <div class="n-form-item__error">
-                { Obj.get(this.NForm.errors, this.prop) }
+                {Obj.get(this.NForm.errors, this.prop)}
             </div>
         );
     },
@@ -191,14 +196,15 @@ export default {
     {
         return (
             <div ref="input" class="n-form-item__input">
-                { this.$slots.default && this.$slots.default() }
+                {this.$slots.default && this.$slots.default()}
             </div>
         );
     },
 
     render()
     {
-        let size = this.size || this.NForm.size;
+        let size = this.size || Obj.get(this.NForm, 'size', 'md');
+
 
         let classList = [
             'n-form-item',
@@ -206,9 +212,9 @@ export default {
         ]
 
         return <div class={classList}>
-            { this.ctor('renderLabel')() }
-            { this.ctor('renderInput')() }
-            { this.ctor('renderError')() }
+            {this.ctor('renderLabel')()}
+            {this.ctor('renderInput')()}
+            {this.ctor('renderError')()}
         </div>;
     }
 }

package/src/info/src/info/info.js

@@ -64,7 +64,7 @@ export default {
             uid: UUID(),
             elements: [],
             options: [],
-            tempValue: this.item, 
+            tempValue: this.item,
         };
     },
 
@@ -89,11 +89,16 @@ export default {
         this.unbindSyncEvent();
     },
 
+    updated()
+    {
+        Any.delay(() => this.$refs.scrollbar.adaptHeight(), 500);
+    },
+
     methods: {
 
         bindSyncEvent()
         {
-            if ( ! this.syncEvent ) {
+            if ( !this.syncEvent ) {
                 return;
             }
 
@@ -109,7 +114,7 @@ export default {
                 }
             };
 
-            Event.bind(this.options[0], syncFunction, 
+            Event.bind(this.options[0], syncFunction,
                 this.uid);
         },
 
@@ -120,19 +125,19 @@ export default {
 
         setValue(value)
         {
-            this.$emit('update:modelValue', 
+            this.$emit('update:modelValue',
                 this.tempValue = value);
         },
 
         addColumn(column)
         {
-            Arr.add(this.elements, 
+            Arr.add(this.elements,
                 column, { uid: column.uid });
         },
 
         removeColumn(column)
         {
-            Arr.remove(this.elements, 
+            Arr.remove(this.elements,
                 { uid: column.uid });
         },
 
@@ -148,8 +153,8 @@ export default {
     renderEmpty()
     {
         return (
-            <NEmptyIcon disabled={! this.showEmptyIcon} class="n-info__empty">
-                 { this.$slots.empty && this.$slots.empty() || this.trans('No entry') }
+            <NEmptyIcon disabled={!this.showEmptyIcon} class="n-info__empty">
+                {this.$slots.empty && this.$slots.empty() || this.trans('No entry')}
             </NEmptyIcon>
         );
     },
@@ -163,16 +168,16 @@ export default {
         let elements = Obj.each(this.elements, (column) => {
             return (
                 <div class="n-info__column">
-                    { column.ctor('renderLabel')({ item: this.tempValue }) }
-                    { column.ctor('renderBody')({ item: this.tempValue }) }
+                    {column.ctor('renderLabel')({ item: this.tempValue })}
+                    {column.ctor('renderBody')({ item: this.tempValue })}
                 </div>
             );
         });
 
         return (
-                <div class="n-info__body">
-                    { Any.vals(elements)}
-                </div>
+            <div class="n-info__body">
+                {Any.vals(elements)}
+            </div>
         );
     },
 
@@ -184,12 +189,15 @@ export default {
             'n-info--' + this.size,
         ];
 
+        let infoHtml = (
+            <NScrollbar ref="scrollbar" relative={this.relative}>
+                {this.ctor('renderBody')()}
+            </NScrollbar>
+        );
+
         return (
             <div class={classList}>
-                <NScrollbar relative={this.relative}>
-                    { this.ctor('renderBody')() }
-                </NScrollbar>
-                { this.$slots.default() }
+                {[infoHtml, this.$slots.default()]}
             </div>
         );
     }

package/src/scrollbar/src/scrollbar/scrollbar.next.js

@@ -80,7 +80,7 @@ export default {
         framerate: {
             default()
             {
-                return 30;
+                return 24;
             },
             type: [Number]
         },
@@ -310,7 +310,7 @@ export default {
             //     Dom.find(this.$el).addClass('has-native-hbar');
             // }
 
-            let hasVtrack = outerHeight && outerHeight < innerHeight - 1;
+            let hasVtrack = outerHeight && outerHeight < innerHeight;
 
             if ( hasVtrack ) {
                 Dom.find(this.$el).addClass('has-vtrack');
@@ -388,7 +388,7 @@ export default {
             //     Dom.find(this.$el).addClass('has-native-vbar');
             // }
 
-            let hasHtrack = outerWidth && outerWidth < innerWidth - 1;
+            let hasHtrack = outerWidth && outerWidth < innerWidth;
 
             if ( hasHtrack ) {
                 Dom.find(this.$el).addClass('has-htrack');
@@ -446,16 +446,26 @@ export default {
 
         adaptHeight()
         {
-            let height = Dom.find(this.$refs.content)
-                .child().height();
+            if ( ! this.cacheChildEl ) {
+                this.cacheChildEl = Dom.find(this.$refs.content).child();
+            }
 
-            let window = Dom.find(this.$el)
+            let height = this.cacheChildEl
+                .height();
+
+            if ( ! this.cacheWindwoEl ) {
+                this.cacheWindwoEl = Dom.find(this.$el);
+            }
+
+            let window = this.cacheWindwoEl
                 .innerHeight();
 
-            if ( height === this.passedHeight ) {
+            if ( height === this.passedHeight && window === this.windowCache ) {
                 return;
             }
 
+            this.windowCache = window;
+
             if ( this.overflowY ) {
                 this.adaptScrollHeight();
             }