@kizmann/nano-ui 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kizmann/nano-ui",
-    "version": "2.0.0",
+    "version": "2.0.2",
     "license": "MIT",
     "type": "module",
     "private": false,
@@ -56,6 +56,6 @@
         "webpack-dev-server": "^5.2.3"
     },
     "dependencies": {
-        "@kizmann/pico-js": "^2.0.3"
+        "@kizmann/pico-js": "^2.0.6"
     }
 }

package/src/draggable/src/draghandler/draghandler.js

@@ -164,27 +164,27 @@ class NDraghandler
 
         Dom.find(this.rootNode.$el).on('dragenter', Run.framebuffer((event) => {
             this.onDragenterRoot(event);
-        }, key + 'dragenter', 140));
+        }, key + 'dragenter', 100));
 
         Dom.find(this.rootNode.$el).on('dragover', Run.framebuffer((event) => {
             this.onDragoverRoot(event);
-        }, key + 'dragover', 240));
+        }, key + 'dragover', 200));
 
         Dom.find(this.rootNode.$el).on('dragleave', Run.framebuffer((event) => {
             this.onDragleaveRoot(event);
-        }, key + 'dragleave', 340));
+        }, key + 'dragleave', 300));
 
         Dom.find(this.rootNode.$el).on('dragend', Run.framebuffer((event) => {
             this.onDragendRoot(event);
-        }, key + 'dragend', 440));
+        }, key + 'dragend', 400));
 
         Dom.find(this.rootNode.$el).on('drop', Run.framebuffer((event) => {
             this.onDragdropRoot(event);
-        }, key + 'drop', 540));
+        }, key + 'drop', 500));
 
         Dom.find(this.rootNode.$el).on('dragdrop', Run.framebuffer((event) => {
             this.onDragdropRoot(event);
-        }, key + 'dragdrop', 640));
+        }, key + 'dragdrop', 600));
 
         Event.bind('NDrag:start', this.bindDragstart.bind(this),
             this.rootNode.uid);
@@ -510,65 +510,46 @@ class NDraghandler
             $handle = $handle.find('[draggable]');
         }
 
-        let $el = Dom.find(node.$el);
+        let [$el, id] = [
+            Dom.find(node.$el), node.uid
+        ];
 
         $handle.on('dragstart', (event) => {
             this.onDragstartNode(event, node);
-        });
-
-        let key = this.rootNode._.uid + '-dnode-';
+        }, { id });
 
         $el.on('dragenter', Run.framebuffer((event) => {
             this.onDragenterNode(event, node);
-        }, key + 'dragenter', 150));
+        }, `${id}-dnode-dragenter`, 150), { id });
 
         $el.on('dragover', Run.framebuffer((event) => {
             this.onDragoverNode(event, node);
-        }, key + 'dragover', 250));
+        }, `${id}-dnode-dragover`, 250), { id });
 
         $el.on('dragleave', Run.framebuffer((event) => {
             this.onDragleaveNode(event, node);
-        }, key + 'dragleave', 350));
+        }, `${id}-dnode-dragleave`, 350), { id });
 
         $el.on('dragend', Run.framebuffer((event) => {
             this.onDragendNode(event, node);
-        }, key + 'dragend', 450));
+        }, `${id}-dnode-dragend`, 450), { id });
 
         $el.on('drop', Run.framebuffer((event) => {
             this.onDragdropNode(event, node);
-        }, key + 'drop', 550));
+        }, `${id}-dnode-drop`, 550), { id });
 
         $el.on('dragdrop', Run.framebuffer((event) => {
             this.onDragdropNode(event, node);
-        }, key + 'dragdrop', 650));
+        }, `${id}-dnode-dragdrop`, 550), { id });
 
         this.childNodes[node.uid] = node;
     }
 
     unbindNode(node)
     {
-        let $handle = Dom.find(node.$el);
-
-        if ( this.rootNode.handle ) {
-            $handle = $handle.find('[draggable]');
-        }
-
-        $handle.off('dragstart');
-
-        let $el = Dom.find(node.$el);
-
-        $el.off([
-            'dragenter',
-            'dragover',
-            'dragleave',
-            'dragend',
-            'drop',
-            'dragdrop',
-        ]);
-
-        $el.remClass(['n-dragover', 'n-nodrop']);
-
-        this.DragIndicator.hide();
+        Dom.find().optoff({
+            id: node.uid
+        });
 
         delete this.childNodes[node.uid];
     }

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

@@ -1,4 +1,4 @@
-import { Str, Obj, Arr, Dom } from "@kizmann/pico-js";
+import { Str, Obj, Arr, Dom, Run } from "@kizmann/pico-js";
 
 export default {
 
@@ -9,7 +9,7 @@ export default {
         NDraggable: {
             default: undefined
         }
-    
+
     },
 
     inheritAttrs: false,
@@ -45,22 +45,26 @@ export default {
             return Obj.get(this.NDraggable, this.value.route);
         },
 
-        touch() {
-            return !! ('ontouchstart' in window ||
+        touch()
+        {
+            return !!('ontouchstart' in window ||
                 navigator.msMaxTouchPoints);
         },
 
-        mousedown() {
+        mousedown()
+        {
             return this.touch ? 'touchstart' :
                 'mousedown';
         },
 
-        mousemove() {
+        mousemove()
+        {
             return this.touch ? 'touchmove' :
                 'mousemove';
         },
 
-        mouseup() {
+        mouseup()
+        {
             return this.touch ? 'touchend' :
                 'mouseup';
         }
@@ -70,29 +74,26 @@ export default {
     data()
     {
         return {
-            init: ! this.NDraggable.lazyload
+            init: !this.NDraggable.lazyload
         };
     },
 
     mounted()
     {
-        this.timer = setTimeout(() => {
-
-            if ( this.NDraggable.draggable ) {
-                this.timer = setTimeout(() => {
-                    this.NDraggable.drag.bindNode(this);
-                }, 10);
-            }
+        if ( this.NDraggable.lazyload ) {
+            Run.frame(() => this.init = true);
+        }
 
-            this.init = true;
-        }, 5);
+        if ( this.NDraggable.draggable ) {
+            this.NDraggable.drag.bindNode(this);
+        }
     },
 
-    beforeUnmount()
+    unmounted()
     {
-        clearTimeout(this.timer);
-
-        this.NDraggable.drag.unbindNode(this);
+        if ( this.NDraggable.draggable ) {
+            this.NDraggable.drag.unbindNode(this);
+        }
     },
 
     methods: {
@@ -185,7 +186,7 @@ export default {
             'n-draglist-item__element'
         ];
 
-        if ( ! this.init ) {
+        if ( !this.init ) {
             return (<div class={classList} />);
         }
 
@@ -204,17 +205,17 @@ export default {
 
         return (
             <div class={classList}>
-                { renderFunction(props) }
+                {renderFunction(props)}
             </div>
         );
     },
 
     renderSpacer()
     {
-        let width = this.value.depth * 
+        let width = this.value.depth *
             this.NDraggable.itemOffset;
 
-        if ( ! width ) {
+        if ( !width ) {
             return null;
         }
 
@@ -224,14 +225,14 @@ export default {
 
         return (
             <div class="n-draglist-item__spacer" style={style}>
-                { /* SPACER */ }
+                { /* SPACER */}
             </div>
         );
     },
 
     renderHandle()
     {
-        if ( ! this.NDraggable.renderHandle ) {
+        if ( !this.NDraggable.renderHandle ) {
             return null;
         }
 
@@ -244,7 +245,7 @@ export default {
         return (
             <div class="n-draglist-item__handle" {...props}>
                 <div class="n-draglist-item__ellipsis">
-                    <i class={ nano.Icons.handle }></i>
+                    <i class={nano.Icons.handle}></i>
                 </div>
             </div>
         );
@@ -252,7 +253,7 @@ export default {
 
     renderExpand()
     {
-        if ( ! this.NDraggable.renderExpand ) {
+        if ( !this.NDraggable.renderExpand ) {
             return null;
         }
 
@@ -263,7 +264,7 @@ export default {
         return (
             <div class="n-draglist-item__expand" {...props}>
                 <div class="n-draglist-item__angle">
-                    <i class={ nano.Icons.angleRight }></i>
+                    <i class={nano.Icons.angleRight}></i>
                 </div>
             </div>
         );
@@ -271,7 +272,7 @@ export default {
 
     renderSelect()
     {
-        if ( ! this.NDraggable.renderSelect ) {
+        if ( !this.NDraggable.renderSelect ) {
             return null;
         }
 
@@ -282,7 +283,7 @@ export default {
         return (
             <div class="n-draglist-item__select" {...props}>
                 <div class="n-draglist-item__checkbox">
-                    <i class={ nano.Icons.checked }></i>
+                    <i class={nano.Icons.checked}></i>
                 </div>
             </div>
         );
@@ -322,7 +323,7 @@ export default {
             onClick: this.onClick, onDblclick: this.onDblclick,
         };
 
-        if ( this.NDraggable.draggable && ! this.NDraggable.handle && this.isDraggable() ) {
+        if ( this.NDraggable.draggable && !this.NDraggable.handle && this.isDraggable() ) {
             props.draggable = true;
         }
 
@@ -330,11 +331,11 @@ export default {
 
         return (
             <div class={classList} {...props}>
-                { this.ctor('renderHandle')() }
-                { this.ctor('renderSpacer')() }
-                { this.ctor('renderExpand')() }
-                { this.ctor('renderSelect')() }
-                { this.ctor('renderElement')() }
+                {this.ctor('renderHandle')()}
+                {this.ctor('renderSpacer')()}
+                {this.ctor('renderExpand')()}
+                {this.ctor('renderSelect')()}
+                {this.ctor('renderElement')()}
             </div>
         );
     }

package/src/popover/src/popover/popover-element.mjs

@@ -139,11 +139,9 @@ export class PopoverElement
             this.events['open'].apply({}, [event]);
         }
 
-        requestAnimationFrame(() => {
-            this.updatePosition();
-        });
+        this.updatePosition();
 
-        requestAnimationFrame(() => {
+        requestIdleCallback(() => {
             this.bindResizeObserver();
         });
 

package/src/preview/src/preview/preview-handler.mjs

@@ -75,7 +75,7 @@ export class PreviewHandler
 
     static create()
     {
-        el = Dom.find('.n-preview-modal');
+        let el = Dom.find('.n-preview-modal');
 
         if ( el.length() ) {
             return el;
@@ -88,7 +88,7 @@ export class PreviewHandler
             'n-theme--dark'
         ];
 
-        let el = Dom.make('div', {
+        el = Dom.make('div', {
             classList: classList.join(' ')
         });
 

package/src/select/src/select/select.jsx

@@ -891,7 +891,7 @@ export default {
             return (<NSelectOption {...props}></NSelectOption>);
         };
 
-        return Mix.vals(Obj.map(this.options, optionRender));
+        return Arr.each(this.options, optionRender);
     },
 
     render()

package/src/slider/src/slider/slider.jsx

@@ -312,6 +312,10 @@ export default {
 
     renderHandle(value, index)
     {
+        if ( value == null ) {
+            return null;
+        }
+
         let key = Arr.findIndex(this.steps, value);
 
         let handleProps = {

package/src/table/src/table/table.jsx

@@ -608,13 +608,13 @@ export default {
             this.ctor('renderContext')()
         ];
 
-        let columns = Obj.map(this.elements, (column) => {
+        let columns = Arr.each(this.elements, (column) => {
             return column.disabled ? null : column.ctor('renderHead')();
         });
 
         return (
             <div class="n-table__header">
-                {defaultRender} {Mix.vals(columns)}
+                {defaultRender} {columns}
             </div>
         );
     },

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

@@ -92,7 +92,7 @@ export default {
     data()
     {
         return {
-            _key: null, init: false
+            init: false
         }
     },