@kizmann/nano-ui 1.1.3 → 2.0.0

package/src/config/src/reference-panel/reference-panel.jsx

@@ -1,4 +1,4 @@
-import { Arr, Obj, Any } from "@kizmann/pico-js";
+import { Arr, Obj, Mix } from "@kizmann/pico-js";
 
 export default {
 
@@ -45,7 +45,7 @@ export default {
         {
             let result = {};
 
-            if ( ! Any.isPlain(value) && ! Obj.get(value, '__v_skip') ) {
+            if ( ! Mix.isObj(value) && ! Obj.get(value, '__v_skip') ) {
                 return result;
             }
 
@@ -55,13 +55,13 @@ export default {
                     `${path}.${key}`, value[key]
                 ];
 
-                if ( Any.isPlain(val) ) {
+                if ( Mix.isObj(val) ) {
                     val = this.buildTree(val, ref);
                 }
 
                 let type = typeof val;
 
-                if ( Any.isArray(val) ) {
+                if ( Mix.isArray(val) ) {
                     type = 'array';
                 }
 

package/src/config/src/reference-picker/reference-picker.jsx

@@ -1,4 +1,4 @@
-import { Arr, Obj, Any } from "@kizmann/pico-js";
+import { Arr, Obj, Mix } from "@kizmann/pico-js";
 
 export default {
 

package/src/confirm/src/confirm/confirm-handler.mjs

@@ -1,4 +1,4 @@
-import { Any, Arr, Dom, Locale, Obj, UUID } from "@kizmann/pico-js";
+import { Run, Mix, Arr, Dom, Locale, Obj, Hash } from "@kizmann/pico-js";
 
 export class ConfirmHandler
 {
@@ -18,7 +18,7 @@ export class ConfirmHandler
     constructor(options = {})
     {
         this.options = Obj.assign(this.options, options, {
-            uid: UUID()
+            uid: Hash.uuid()
         });
     }
 
@@ -27,7 +27,7 @@ export class ConfirmHandler
         this.unbindEvents();
         this.modal.remove();
 
-        Dom.find(document.body).css({
+        Dom.find(document.body).style({
             'overflow': 'undefined'
         });
 
@@ -81,7 +81,7 @@ export class ConfirmHandler
 
         let text = Obj.get(this.options, 'confirmText');
 
-        if ( Any.isEmpty(text) ) {
+        if ( Mix.isEmpty(text) ) {
             text = Locale.trans('Okay');
         }
 
@@ -107,7 +107,7 @@ export class ConfirmHandler
 
         let text = Obj.get(this.options, 'cancelText');
 
-        if ( Any.isEmpty(text) ) {
+        if ( Mix.isEmpty(text) ) {
             text = Locale.trans('Cancel');
         }
 
@@ -141,7 +141,7 @@ export class ConfirmHandler
             }
         }, { uid });
 
-        Any.delay(() => {
+        Run.delay(() => {
             Dom.find(this.modal).addClass('n-ready');
         });
     }
@@ -163,7 +163,7 @@ export class ConfirmHandler
     {
         let cls = Obj.get(this.options, 'class', []);
 
-        if ( Any.isString(cls) ) {
+        if ( Mix.isString(cls) ) {
             cls = cls.split(' ');
         }
 
@@ -209,7 +209,7 @@ export class ConfirmHandler
         this.renderCancel(action, cancel);
         this.renderConfirm(action, confirm);
 
-        Dom.find(document.body).css({
+        Dom.find(document.body).style({
             'overflow': 'hidden'
         });
 
@@ -220,6 +220,7 @@ export class ConfirmHandler
         });
 
         this.modal = modal.get(0);
+        console.log(this.modal);
     }
 }
 

package/src/confirm/src/confirm/confirm.jsx

@@ -1,4 +1,4 @@
-import { Obj, Locale, Dom, Arr, Any } from "@kizmann/pico-js";
+import { Obj, Locale, Dom, Arr, Mix } from "@kizmann/pico-js";
 
 export default {
 
@@ -100,7 +100,7 @@ export default {
         });
 
         this.target = Dom.find(this.selector || this.$el)
-            .previous().get(0);
+            .prev().get(0);
 
         Dom.find(document.body).on('mousedown',
             this.eventClick, this._.uid);
@@ -124,7 +124,7 @@ export default {
 
             let nodes = this.$slots.default();
 
-            if ( Any.isEmpty(nodes) ) {
+            if ( Mix.isEmpty(nodes) ) {
                 return fallback;
             }
 
@@ -132,7 +132,7 @@ export default {
 
             nodes.map((el) => {
 
-                if ( !Any.isString(el.children) ) {
+                if ( !Mix.isString(el.children) ) {
                     return;
                 }
 

package/src/datepicker/src/datepicker-panel/datepicker-panel.jsx

@@ -1,4 +1,4 @@
-import { Arr, Str, Now, Any } from "@kizmann/pico-js";
+import { Arr, Str, Now, Mix } from "@kizmann/pico-js";
 
 export default {
 
@@ -137,12 +137,12 @@ export default {
 
         yearsGrid()
         {
-            return this.tempCache.getYears();
+            return this.tempCache.grid('years');
         },
 
         monthsGrid()
         {
-            return this.tempCache.getMonths();
+            return this.tempCache.grid('months');
         }
 
     },
@@ -205,12 +205,12 @@ export default {
 
         patchDate(now)
         {
-            if ( Any.isString(now) ) {
+            if ( Mix.isString(now) ) {
                 now = Now.make(now);
             }
 
-            if ( Any.isEmpty(this.modelValue) ) {
-                now.resetTime();
+            if ( Mix.isEmpty(this.modelValue) ) {
+                now.reset({ time: true });
             } else {
                 now.applyTime(this.tempValue);
             }
@@ -227,7 +227,7 @@ export default {
 
         patchMonth(now)
         {
-            if ( Any.isString(now) ) {
+            if ( Mix.isString(now) ) {
                 now = Now.make(now);
             }
 
@@ -243,7 +243,7 @@ export default {
 
         patchYear(now)
         {
-            if ( Any.isString(now) ) {
+            if ( Mix.isString(now) ) {
                 now = Now.make(now);
             }
 
@@ -319,14 +319,14 @@ export default {
         };
 
         let monthsHtml = [
-            this.months[this.tempCache.month()]
+            this.months[this.tempCache.month() -1]
         ];
 
         let month = this.tempCache.clone()
-            .addMonths(this.monthPanels - 1);
+            .add(this.monthPanels - 1, 'month');
 
         if ( month.month() !== this.tempCache.month() ) {
-            monthsHtml.push(this.months[month.month()]);
+            monthsHtml.push(this.months[month.month() -1]);
         }
 
         return (
@@ -347,7 +347,7 @@ export default {
         ];
 
         let month = this.tempCache.clone()
-            .addMonths(this.monthPanels - 1);
+            .add(this.monthPanels - 1, 'month');
 
         if ( month.year() !== this.tempCache.year() ) {
             yearsHtml.push(month.year());
@@ -388,7 +388,7 @@ export default {
             classList.push('n-today');
         }
 
-        let isSelected = this.tempValue.valid() && 
+        let isSelected = this.tempValue.valid() &&
             now.equalDate(this.tempValue);
 
         if ( isSelected ) {
@@ -539,7 +539,7 @@ export default {
         }
 
         let bodyHtml = (month) => (
-            Arr.each(Arr.chunk(month.getDatesGrid(), 7), (chunks) => {
+            Arr.each(Arr.chunk(month.grid('days'), 7), (chunks) => {
                 return (
                     <div class="n-datepicker-panel__week">
                         { Arr.each(chunks, (chunk) => renderItem(chunk, month)) }
@@ -552,7 +552,7 @@ export default {
             Arr.each(Arr.make(this.monthPanels), (offset) => {
 
                 let month = this.tempCache.clone()
-                    .addMonths(offset - 1);
+                    .add(offset, 'month');
 
                 return (
                     <div class="n-datepicker-panel__panel">
@@ -599,7 +599,7 @@ export default {
 
         return (
             <div class={classList} {...props}>
-                <span>{ this.trans(this.months[now.month()]) }</span>
+                <span>{ this.trans(this.months[now.month() -1]) }</span>
             </div>
         )
     },

package/src/datetimepicker/src/datetimepicker/datetimepicker.jsx

@@ -1,4 +1,4 @@
-import { Obj, Now, Any, Locale } from "@kizmann/pico-js";
+import { Obj, Now, Mix, Locale } from "@kizmann/pico-js";
 
 export default {
 

package/src/draggable/src/draggrid/draggrid.jsx

@@ -1,4 +1,4 @@
-import { UUID, Num, Arr, Obj, Dom, Any, Event, Locale } from "@kizmann/pico-js";
+import { Hash, Num, Arr, Obj, Dom, Mix, Event, Locale } from "@kizmann/pico-js";
 import NDraghandler from "../draghandler/draghandler.js";
 
 window.DEBUG_NDLIST = false;
@@ -139,7 +139,7 @@ export default {
         useKeys: {
             default()
             {
-                return true;
+                return false;
             },
             type: [Boolean]
         },
@@ -308,7 +308,7 @@ export default {
     data()
     {
         return {
-            uid: UUID(),
+            uid: Hash.uuid(),
             virtuals: [],
             visible: [],
             childNodes: {},
@@ -434,7 +434,7 @@ export default {
         {
             let canDrag = this.allowDrag;
 
-            if ( ! Any.isFunction(canDrag) ) {
+            if ( ! Mix.isFunction(canDrag) ) {
                 canDrag = () => this.allowDrag;
             }
 
@@ -595,7 +595,7 @@ export default {
         {
             let canSelect = this.allowSelect;
 
-            if ( ! Any.isFunction(canSelect) ) {
+            if ( ! Mix.isFunction(canSelect) ) {
                 canSelect = () => this.allowSelect;
             }
 

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

@@ -1,4 +1,4 @@
-import { Arr, Obj, Num, Any, Dom, Event, Locale, UUID } from "@kizmann/pico-js";
+import { Run, Num, Arr, Obj, Mix, Dom, Event, Locale, Hash } from "@kizmann/pico-js";
 
 window.dragMods = [];
 
@@ -116,12 +116,12 @@ class NDragIndicator
             style.top = offsetTop + Dom.find(el).height();
         }
 
-        this.$el.css(Obj.map(style, (item) => item + 'px'));
+        this.$el.style(Obj.map(style, (item) => item + 'px'));
     }
 
     hide()
     {
-        this.$el.css(null);
+        this.$el.style(null);
     }
 
     destroy()
@@ -160,29 +160,31 @@ class NDraghandler
             this.bindDragstart.call(this, ...window.DragCache);
         }
 
-        Dom.find(this.rootNode.$el).on('dragenter', (event) => {
+        let key = this.rootNode._.uid + '-droot-';
+
+        Dom.find(this.rootNode.$el).on('dragenter', Run.framebuffer((event) => {
             this.onDragenterRoot(event);
-        });
+        }, key + 'dragenter', 140));
 
-        Dom.find(this.rootNode.$el).on('dragover', (event) => {
+        Dom.find(this.rootNode.$el).on('dragover', Run.framebuffer((event) => {
             this.onDragoverRoot(event);
-        });
+        }, key + 'dragover', 240));
 
-        Dom.find(this.rootNode.$el).on('dragleave', (event) => {
+        Dom.find(this.rootNode.$el).on('dragleave', Run.framebuffer((event) => {
             this.onDragleaveRoot(event);
-        });
+        }, key + 'dragleave', 340));
 
-        Dom.find(this.rootNode.$el).on('dragend', (event) => {
+        Dom.find(this.rootNode.$el).on('dragend', Run.framebuffer((event) => {
             this.onDragendRoot(event);
-        });
+        }, key + 'dragend', 440));
 
-        Dom.find(this.rootNode.$el).on('drop', (event) => {
+        Dom.find(this.rootNode.$el).on('drop', Run.framebuffer((event) => {
             this.onDragdropRoot(event);
-        });
+        }, key + 'drop', 540));
 
-        Dom.find(this.rootNode.$el).on('dragdrop', (event) => {
+        Dom.find(this.rootNode.$el).on('dragdrop', Run.framebuffer((event) => {
             this.onDragdropRoot(event);
-        });
+        }, key + 'dragdrop', 640));
 
         Event.bind('NDrag:start', this.bindDragstart.bind(this),
             this.rootNode.uid);
@@ -216,6 +218,9 @@ class NDraghandler
     onDragenterRoot(event)
     {
         event.preventDefault();
+
+        Dom.find(this.rootNode.$el).find('.n-dragover')
+            .remClass('n-dragover');
     }
 
     onDragoverRoot(event)
@@ -229,13 +234,13 @@ class NDraghandler
 
         event.preventDefault();
 
-        if ( this.frames && Date.now() - this.frames < 135 ) {
-            return;
-        }
+        // if ( this.frames && Date.now() - this.frames < 35 ) {
+        //     return;
+        // }
 
         let allowDrop = this.rootNode.allowDrop;
 
-        if ( !Any.isFunction(allowDrop) ) {
+        if ( !Mix.isFunction(allowDrop) ) {
             allowDrop = () => this.rootNode.allowDrop;
         }
 
@@ -254,13 +259,13 @@ class NDraghandler
         if ( this.strategy !== 'nodrop' ) {
             Dom.find(this.rootNode.$el).addClass('n-dragover');
         } else {
-            Dom.find(this.rootNode.$el).removeClass('n-dragover');
+            Dom.find(this.rootNode.$el).remClass('n-dragover');
         }
 
         if ( this.strategy === 'nodrop' ) {
             Dom.find(this.rootNode.$el).addClass('n-nodrop');
         } else {
-            Dom.find(this.rootNode.$el).removeClass('n-nodrop');
+            Dom.find(this.rootNode.$el).remClass('n-nodrop');
         }
 
         this.frames = Date.now();
@@ -269,7 +274,10 @@ class NDraghandler
     onDragleaveRoot(event)
     {
         Dom.find(this.rootNode.$el)
-            .removeClass('n-dragover n-nodrop');
+            .remClass(['n-dragover', 'n-nodrop']);
+
+        Dom.find(this.rootNode.$el).find('.n-dragover')
+            .remClass('n-dragover');
     }
 
     onDragendRoot(event)
@@ -279,7 +287,7 @@ class NDraghandler
         }
 
         Dom.find(this.rootNode.$el)
-            .removeClass('n-dragover n-nodrop');
+            .remClass(['n-dragover', 'n-nodrop']);
 
         if ( this.strategy !== 'root' ) {
             return;
@@ -295,7 +303,7 @@ class NDraghandler
         }
 
         Dom.find(this.rootNode.$el)
-            .removeClass('n-dragover n-nodrop');
+            .remClass(['n-dragover', 'n-nodrop']);
 
         if ( this.strategy !== 'root' ) {
             return;
@@ -393,9 +401,9 @@ class NDraghandler
 
         event.preventDefault();
 
-        if ( this.frames && Date.now() - this.frames < 45 ) {
-            return;
-        }
+        // if ( this.frames && Date.now() - this.frames < 45 ) {
+        //     return;
+        // }
 
         let safezone = this.rootNode
             .safezone(node.$el.clientHeight);
@@ -409,7 +417,7 @@ class NDraghandler
 
         let allowDrop = this.rootNode.allowDrop;
 
-        if ( !Any.isFunction(allowDrop) ) {
+        if ( !Mix.isFunction(allowDrop) ) {
             allowDrop = () => this.rootNode.allowDrop;
         }
 
@@ -420,7 +428,9 @@ class NDraghandler
         let isInSelf = Arr.has(node.value.cascade,
             this.rootNode.tempSelected);
 
-        rainbow.push(!isInSelf);
+        if ( this.rootNode.tempSelected.length ) {
+            rainbow.push(!isInSelf);
+        }
 
         if ( Arr.has(rainbow, false) ) {
             this.strategy = 'nodrop';
@@ -432,11 +442,11 @@ class NDraghandler
 
         if ( this.strategy !== 'nodrop' ) {
             Dom.find(node.$el).addClass('n-dragover');
-            Dom.find(node.$el).removeClass('n-nodrop');
+            Dom.find(node.$el).remClass('n-nodrop');
         }
 
         if ( this.strategy === 'nodrop' ) {
-            Dom.find(node.$el).removeClass('n-dragover');
+            Dom.find(node.$el).remClass('n-dragover');
             Dom.find(node.$el).addClass('n-nodrop');
         }
 
@@ -451,14 +461,14 @@ class NDraghandler
             return;
         }
 
-        Dom.find(node.$el).removeClass('n-dragover n-nodrop');
+        Dom.find(node.$el).remClass(['n-dragover', 'n-nodrop']);
 
         this.DragIndicator.hide();
     }
 
     onDragendNode(event, node)
     {
-        Dom.find(node.$el).removeClass('n-dragover n-nodrop');
+        Dom.find(node.$el).remClass(['n-dragover', 'n-nodrop']);
 
         this.DragIndicator.hide();
 
@@ -473,7 +483,7 @@ class NDraghandler
             return;
         }
 
-        Dom.find(node.$el).removeClass('n-dragover n-nodrop');
+        Dom.find(node.$el).remClass(['n-dragover', 'n-nodrop']);
 
         this.DragIndicator.hide();
 
@@ -506,29 +516,31 @@ class NDraghandler
             this.onDragstartNode(event, node);
         });
 
-        $el.on('dragenter', (event) => {
+        let key = this.rootNode._.uid + '-dnode-';
+
+        $el.on('dragenter', Run.framebuffer((event) => {
             this.onDragenterNode(event, node);
-        });
+        }, key + 'dragenter', 150));
 
-        $el.on('dragover', (event) => {
+        $el.on('dragover', Run.framebuffer((event) => {
             this.onDragoverNode(event, node);
-        });
+        }, key + 'dragover', 250));
 
-        $el.on('dragleave', (event) => {
+        $el.on('dragleave', Run.framebuffer((event) => {
             this.onDragleaveNode(event, node);
-        });
+        }, key + 'dragleave', 350));
 
-        $el.on('dragend', (event) => {
+        $el.on('dragend', Run.framebuffer((event) => {
             this.onDragendNode(event, node);
-        });
+        }, key + 'dragend', 450));
 
-        $el.on('drop', (event) => {
+        $el.on('drop', Run.framebuffer((event) => {
             this.onDragdropNode(event, node);
-        });
+        }, key + 'drop', 550));
 
-        $el.on('dragdrop', (event) => {
+        $el.on('dragdrop', Run.framebuffer((event) => {
             this.onDragdropNode(event, node);
-        });
+        }, key + 'dragdrop', 650));
 
         this.childNodes[node.uid] = node;
     }
@@ -554,7 +566,7 @@ class NDraghandler
             'dragdrop',
         ]);
 
-        $el.removeClass('n-dragover n-nodrop');
+        $el.remClass(['n-dragover', 'n-nodrop']);
 
         this.DragIndicator.hide();
 
@@ -786,7 +798,7 @@ class NDraghandler
         let items = Obj.get(clone, targetRoute);
 
         let target = Obj.except(node.item, [], {
-            [this.rootNode.uniqueProp]: UUID()
+            [this.rootNode.uniqueProp]: Hash.uuid()
         });
 
         items.splice(node.value.index + 1,
@@ -817,15 +829,16 @@ class NDraghandler
 
     reduce(items, ...props)
     {
-        return Arr.reduce(items, (merge, item, index) =>
-            this.reduceItem(merge, item, Num.int(index), ...props), []);
+        return Arr.reduce(items, (merge, item, index) => {
+            return this.reduceItem(merge, item, Num.int(index), ...props);
+        }, []);
     }
 
     reduceItem(merge, item, index, depth = 0, route = 'items', cascades = [])
     {
         // Get a unique id
         let unique = Obj.get(item,
-            this.rootNode.uniqueProp, UUID());
+            this.rootNode.uniqueProp, Hash.uuid());
 
         // Add unique to cascader
         let tempCascade = Arr.merge(cascades,
@@ -844,7 +857,7 @@ class NDraghandler
         let children = Obj.get(item,
             this.rootNode.childProp, []);
 
-        if ( Any.isEmpty(children) ) {
+        if ( Mix.isEmpty(children) ) {
             return Arr.merge(merge, [virtual]);
         }