@kizmann/nano-ui 3.0.0 → 3.0.1

package/src/draggable/js/draglist/NDraglistController.ts

@@ -1,4 +1,4 @@
-import { onMounted, SetupContext } from "vue";
+import { onMounted, provide, SetupContext } from "vue";
 import { Arr, Mix, Num, Obj, Run } from "@kizmann/pico-js";
 import { ProtoController, Pointer } from "../../../root/index.ts";
 import { NDragHandler } from "../drag/NDragHandler.ts";
@@ -30,11 +30,6 @@ export class NDraglistController extends ProtoController
      */
     drag : NDragReciever;
 
-    /**
-     * @type {string}
-     */
-    selectbuffer : string;
-
     constructor(props : any, context : SetupContext)
     {
         super(props, context);
@@ -45,7 +40,9 @@ export class NDraglistController extends ProtoController
             new NDraglistData(this),
         ];
 
-        this.setup();
+        if ( this.constructor.name === 'NDraglistController' ) {
+            this.setup();
+        }
     }
 
     setup()
@@ -58,6 +55,7 @@ export class NDraglistController extends ProtoController
             .cloneProp('current')
             .cloneProp('selected')
             .cloneProp('expanded')
+            .cloneProp('cascade')
             .cloneProp('group');
 
         this.makeRef('virtualbar');
@@ -106,6 +104,10 @@ export class NDraglistController extends ProtoController
             this.set('index', this.buildIndex());
         });
 
+        if ( this.data.cascade?.length ) {
+            this.buildCurrent();
+        }
+
         if ( this.data.group == null ) {
             this.set('group', [this.uid]);
         }
@@ -114,6 +116,8 @@ export class NDraglistController extends ProtoController
             this.set('allowGroups', this.data.group);
         }
 
+        provide('NDraglist', this.instance);
+
         return this;
     }
 
@@ -198,6 +202,48 @@ export class NDraglistController extends ProtoController
         ]);
     }
 
+    getItemById(id : string, fallback : any = null)
+    {
+        const { data } = this;
+
+        if ( id == null ) {
+            return fallback;
+        }
+
+        const value = this.getValue({
+            [data.uniqueProp]: id
+        });
+
+        if ( value == null ) {
+            return fallback;
+        }
+
+        return Obj.get(...[
+            data, value.route, fallback
+        ]);
+    }
+
+    getParentById(id : string, fallback : any = null)
+    {
+        const { data } = this;
+
+        if ( id == null ) {
+            return fallback;
+        }
+
+        const value = this.getValue({
+            [data.uniqueProp]: id
+        });
+
+        if ( value == null || value.depth === 0 ) {
+            return fallback;
+        }
+
+        return Obj.get(...[
+            data, Arr.slice(value.route, 0, -2), fallback
+        ]);
+    }
+
     buildIndex()
     {
         const { data } = this;
@@ -228,13 +274,47 @@ export class NDraglistController extends ProtoController
         return Object.freeze({ depth: -1, ...relation });
     }
 
+    buildCurrent()
+    {
+        const { data } = this;
+
+        const items = Arr.cascadeFind(data.items, data.childProp, (item : any) => {
+            return Arr.last(data.cascade) === item[data.uniqueProp];
+        });
+
+        if ( !Mix.isEmpty(items) ) {
+            this.update('current', items[0]);
+        }
+    }
+
+    onStopclick()
+    {
+        Run.frame(() => Pointer.stop());
+    }
+
     onCurrentclick(e : any, item : any)
     {
-        if ( e.metaKey ) {
-            this.onSelectclick(e, item);
+        let depth = this.data.relation?.depth;
+
+        if ( depth === -1 ) {
+            depth = item.depth;
+        }
+
+        if ( e && e.metaKey && depth === item.depth ) {
+            this.onStopclick(), this.onSelectclick(e, item);
+        }
+
+        const rainbow = [
+            item.cascade.join(','), this.data.cascade.join(',')
+        ];
+
+        if ( Arr.unique(rainbow).length == 2 ) {
+            Pointer.wait(() => this.update('cascade', item.cascade));
         }
 
-        this.update('current', this.getItem(item));
+        this.update('current', ...[
+            this.getItem(item)
+        ]);
     }
 
     onSelectclick(e : any, item : any)
@@ -249,12 +329,12 @@ export class NDraglistController extends ProtoController
             return Arr.has(data.selected, node.uid);
         });
 
-        if ( ! e.shiftKey || ! first || item.depth ) {
+        if ( !e.shiftKey || !first || item.depth ) {
             return this.update('selected', selected);
         }
 
         const items = Arr.filter(data.visibles, (node : any) => {
-            return ! node.depth;
+            return !node.depth;
         });
 
         let last = item;
@@ -308,11 +388,13 @@ export class NDraglistController extends ProtoController
 
     onDragdrop(e : any, result : any, config : any)
     {
+        const { data } = this;
+
         let clone = {
-            items: Arr.clone(this.data.items),
+            items: Arr.clone(data.items),
         };
 
-        let transformDrop = this.data.transformDrop;
+        let transformDrop = data.transformDrop;
 
         if ( typeof transformDrop !== 'function' ) {
             transformDrop = (value : any) => value;
@@ -346,8 +428,37 @@ export class NDraglistController extends ProtoController
             clone = NDragHelper.afterNodes(...args);
         }
 
+        const valid = [
+            'inside', 'before', 'after', 'append'
+        ];
+
+        if ( !Arr.has(valid, result.mode) ) {
+            return result;
+        }
+
+        const ids = Arr.extract(...[
+            config.items, 'value.uid'
+        ]);
+
+        if ( result.mode !== 'append' ) {
+            config.uid = result.uids.item;
+        }
+
+        const options = {
+            ...result, group: config.group, items: config.items
+        };
+
+        if ( config.uid && result.mode === 'inside' ) {
+            options.item = this.getItemById(config.uid);
+        }
+
+        if ( config.uid && result.mode !== 'inside' ) {
+            options.item = this.getParentById(config.uid);
+        }
+
         this.emit('update:items', clone.items);
-        this.update('current', null);
+        this.emit('move', config.uid, ids, options);
+        this.set('current', null);
         this.update('selected', []);
 
         return result;
@@ -359,6 +470,10 @@ export class NDraglistController extends ProtoController
             return result;
         }
 
+        if ( Arr.has(['deny', 'ignore'], result.mode) ) {
+            return result;
+        }
+
         let clone = {
             items: Arr.clone(this.data.items),
         };
@@ -374,7 +489,7 @@ export class NDraglistController extends ProtoController
         NDragHelper.removeNodes(...args);
 
         this.emit('update:items', clone.items);
-        this.update('current', null);
+        this.set('current', null);
         this.update('selected', []);
 
         return result;
@@ -405,6 +520,8 @@ export class NDraglistController extends ProtoController
         Run.frame(() => {
             this.update('selected', selected);
         });
+
+        this.onStopclick();
     }
 
     nodeDragmove(e : any, result : any, config : any, els : any)
@@ -428,7 +545,7 @@ export class NDraglistController extends ProtoController
         });
 
         const node = {
-            item, value: Obj.get(data, item.route)
+            value: item, item: Obj.get(data, item.route)
         };
 
         let rainbow = Arr.each(config.items ?? [], (el : any) => {
@@ -439,12 +556,16 @@ export class NDraglistController extends ProtoController
             return { ...result, mode: 'self' };
         }
 
-        if ( !this.nodeAllowDrop(node, result, config) ) {
-            result.mode = 'deny';
-        }
+        const args : [any, any, any] = [
+            els.item, data.safezone, [{ node, result, config }]
+        ];
 
         if ( !result.mode ) {
-            result.mode = this.drag.getMode(e, els.item, data.safezone);
+            result.mode = this.drag.getMode(e, ...args);
+        }
+
+        if ( !this.nodeAllowDrop(node, result, config) ) {
+            result.mode = 'deny';
         }
 
         return result;
@@ -455,7 +576,7 @@ export class NDraglistController extends ProtoController
         let allowDrop = this.data.allowDrop;
 
         if ( typeof allowDrop !== 'function' ) {
-            allowDrop = () => allowDrop;
+            allowDrop = () => this.data.allowDrop;
         }
 
         let rainbow = Arr.each(config.items, (node : any) => {
@@ -488,7 +609,7 @@ export class NDraglistController extends ProtoController
         });
     }
 
-    setTotalCurrent(total: number)
+    setTotalCurrent(total : number)
     {
         const { data } = this;
 
@@ -498,6 +619,10 @@ export class NDraglistController extends ProtoController
 
         this.ncx('virtualbar')?.scrollTo(index);
 
+        this.update('cascade', [
+            ...data.visibles[index]['cascade']
+        ]);
+
         this.update('current', ...[
             this.getItem(data.visibles[index])
         ]);
@@ -513,6 +638,10 @@ export class NDraglistController extends ProtoController
 
         this.ncx('virtualbar')?.scrollTo(index);
 
+        this.update('cascade', [
+            ...data.visibles[index]['cascade']
+        ]);
+
         this.update('current', ...[
             this.getItem(data.visibles[index])
         ]);
@@ -528,6 +657,10 @@ export class NDraglistController extends ProtoController
 
         this.ncx('virtualbar')?.scrollTo(index);
 
+        this.update('cascade', [
+            ...data.visibles[index]['cascade']
+        ]);
+
         this.update('current', ...[
             this.getItem(data.visibles[index])
         ]);
@@ -548,7 +681,7 @@ export class NDraglistController extends ProtoController
         this.update('selected', ids);
     }
 
-    selectState(): number
+    selectState() : number
     {
         const { items, selected } = this.data;
 

package/src/draggable/js/draglist/NDraglistView.ts

@@ -1,7 +1,7 @@
 import { h } from "vue";
-import { ProtoView, Styler } from "../../../root/index.ts";
+import { Pointer, ProtoView, Styler } from "../../../root/index.ts";
 import { NDraglistController } from "./NDraglistController.ts";
-import { Arr, Obj } from "@kizmann/pico-js";
+import { Arr, Mix, Obj } from "@kizmann/pico-js";
 
 export class NDraglistView extends ProtoView
 {
@@ -40,6 +40,8 @@ export class NDraglistView extends ProtoView
             itemHeight: data.itemHeight,
             itemWidth: data.itemWidth,
             scrollPortal: data.scrollPortal,
+            emptyText: scope.get('emptyText'),
+            emptyProps: scope.get('emptyProps'),
             prevent: 'keydown:[37,38,39,40]',
             dropzone: scope.uid,
         };
@@ -148,11 +150,21 @@ export class NDraglistView extends ProtoView
         let { scope, data } = this.scope;
 
         props = {
-            dropitem: value.uid, class: [],
+            class: [], dropitem: value.uid
         };
 
+        let allowDrag : any = data.allowDrag;
+
+        if ( Mix.isFunc(allowDrag) ) {
+            allowDrag = allowDrag({ value });
+        }
+
         if ( !data.renderHandle ) {
-            props.draggable = !data.renderHandle;
+            props.draggable = allowDrag;
+        }
+
+        if ( Arr.has(data.selected, value.uid) ) {
+            Arr.append(props.class, 'n-selected');
         }
 
         if ( value.childs ) {
@@ -171,13 +183,16 @@ export class NDraglistView extends ProtoView
 
         Arr.append(props.class, scope.view.iem);
 
-        props.onPointerdown = (e : any) => {
+        props.onClick = (e : any) => {
             scope.onCurrentclick(e, value);
-            scope.emit('row-click', data.current);
+            scope.emit('row-click', data.current, e);
+            scope.emit('node-click', { value, item: data.current }, e);
         };
 
-        props.onDblclick = () => {
-            scope.emit('row-dblclick', data.current);
+        props.onDblclick = (e : any) => {
+            scope.onStopclick();
+            scope.emit('row-dblclick', data.current, e);
+            scope.emit('node-dblclick', { value, item: data.current }, e);
         };
 
         props.onDragstart = (e : any) => {
@@ -220,19 +235,32 @@ export class NDraglistView extends ProtoView
             return null;
         }
 
-        const parent = {
+        const parent : any = {
             class: `${this.iem}__handle`,
-            draggable: true,
         };
 
+        let allowDrag : any = data.allowDrag;
+
+        if ( Mix.isFunc(allowDrag) ) {
+            allowDrag = allowDrag({ value });
+        }
+
+        if ( allowDrag ) {
+            parent.draggable = true;
+        }
+
         const props : any = {
             class: `${this.iem}__ellipsis`
         };
 
-        props.onDragstart = (e) => {
+        props.onDragstart = (e : any) => {
             scope.nodeDragstart(e, value);
         };
 
+        props.onClick = (e : any) => {
+            e.stopPropagation();
+        };
+
         return h('div', parent, [
             h('div', props, [
                 h('i', { class: 'fa fa-ellipsis-v' })
@@ -257,10 +285,13 @@ export class NDraglistView extends ProtoView
         };
 
         props.onPointerdown = (e : any) => {
-            e.preventDefault();
             scope.onExpandclick(e, value);
         };
 
+        props.onClick = (e : any) => {
+            e.stopPropagation();
+        };
+
         return h('div', parent, [
             h('div', props, [
                 h('i', { class: 'fa fa-angle-right' })

package/src/draggable/js/dropzone/NDropzone.ts

@@ -21,6 +21,20 @@ export const NDropzone = {
         type: [Array], default: null
     },
 
+    /**
+     * @type {PropType<boolean|function>}
+     */
+    allowDrop: {
+        type: [Boolean, Function], default: true
+    },
+
+    /**
+     * @type {PropType<object>}
+     */
+    mode: {
+        type: [String], default: null
+    }
+
 };
 
 export default defineComponent({

package/src/draggable/js/dropzone/NDropzoneController.ts

@@ -92,9 +92,13 @@ export class NDropzoneController extends ProtoController
         }
 
         result = {
-            ...result, target: els.zone, mode: 'inside'
+            ...result, target: els.zone, mode: 'append'
         };
 
+        if ( !this.nodeAllowDrop(null, result, config) ) {
+            result.mode = 'deny';
+        }
+
         return result;
     }
 
@@ -104,15 +108,37 @@ export class NDropzoneController extends ProtoController
 
         this.update('item', node.item);
 
+        if ( this.data.mode ) {
+            result.mode = this.data.mode;
+        }
+
         return result;
     }
 
     onDragend(e : any, result : any, config : any)
     {
+        if ( this.data.mode ) {
+            result.mode = this.data.mode;
+        }
 
         return result;
     }
 
+    nodeAllowDrop(target : any, result : any, config : any)
+    {
+        let allowDrop = this.data.allowDrop;
+
+        if ( typeof allowDrop !== 'function' ) {
+            allowDrop = () => this.data.allowDrop;
+        }
+
+        let rainbow = Arr.each(config.items, (node : any) => {
+            return !!allowDrop(node, target, result.mode);
+        });
+
+        return !Arr.has(rainbow, false);
+    }
+
 }
 
 export default NDropzoneController;

package/src/draggable/js/dropzone/NDropzoneData.ts

@@ -18,11 +18,21 @@ export class NDropzoneData extends ProtoData
         return this.scope.get('item');
     }
 
+    get mode() : string
+    {
+        return this.scope.get('mode');
+    }
+
     get allowGroups() : string[]
     {
         return this.scope.get('allowGroups');
     }
 
+    get allowDrop() : any
+    {
+        return this.scope.get('allowDrop');
+    }
+
 }
 
 export default NDropzoneData;

package/src/draggable/js/dropzone/NDropzoneView.ts

@@ -29,13 +29,9 @@ export class NDropzoneView extends ProtoView
 
     body() : any
     {
-        let { data, context } = this.scope;
-
-        if ( data.item == null ) {
-            return null;
-        }
-
-        return context.slots.default(data.item);
+        return this.scope.context.slots?.default(...[
+            this.scope.data.item
+        ]);
     }
 
 }

package/src/empty/js/empty-icon/NEmptyIcon.ts

@@ -17,7 +17,7 @@ export const NEmptyIconProps = {
      * @type {PropType<boolean>}
      */
     inline: {
-        type: [Boolean], default: true
+        type: [Boolean], default: false
     },
 
     /**

package/src/form/js/form/NForm.ts

@@ -69,7 +69,7 @@ export default defineComponent({
     /**
      * @type {boolean}
      */
-    inheritAttrs: false,
+    //inheritAttrs: false,
 
     /**
      * @type {string[]}

package/src/form/js/form/NFormController.ts

@@ -2,7 +2,7 @@ import { provide, ref, SetupContext, watch } from "vue";
 import { GroupController } from "../../../root/index.ts";
 import { NFormView } from "./NFormView.ts";
 import { NFormData } from "./NFormData.ts";
-import { Arr, Hash, Obj } from "@kizmann/pico-js";
+import { Arr, Hash, Mix, Obj } from "@kizmann/pico-js";
 import NFormRuleHandler from "../form-rules/NFormRuleHandler.ts";
 
 
@@ -120,6 +120,25 @@ export class NFormController extends GroupController
         return messages;
     }
 
+    gotoFirstError()
+    {
+        const messages = this.getMessages();
+
+        if ( Mix.isEmpty(messages) ) {
+            return;
+        }
+
+        const first = Arr.first(...[
+            Mix.keys(messages)
+        ]);
+
+        let child = Arr.find(this.childs, (child : any) => {
+            return child.data.prop == first;
+        });
+
+        child?.superView();
+    }
+
 }
 
 export default NFormController;

package/src/form/js/form-bag/NFormBagController.ts

@@ -41,6 +41,10 @@ export class NFormBagController extends ProtoController
             'form', 'NForm'
         ]);
 
+        this.injectRef([
+            'popover', 'NPopover'
+        ]);
+
         return this;
     }
 

package/src/form/js/form-bag/NFormBagView.ts

@@ -48,7 +48,7 @@ export class NFormBagView extends ProtoView
             return null;
         }
 
-        const { data } = this.scope;
+        const { scope, data } = this.scope;
 
         let props : any = {
             name: 'item'
@@ -56,6 +56,7 @@ export class NFormBagView extends ProtoView
 
         props.onPointerdown = () => {
             field.superView();
+            scope.ncx('popover')?.superClose();
         };
 
         const items = Arr.each(errors[prop], (err : string) => {

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

@@ -73,7 +73,7 @@ export class NFormItemView extends ProtoView
         const { data } = this.scope;
 
         return this.div('label', [
-            h('span', null, data.label)
+            h('label', null, data.label)
         ]);
     }
 

package/src/form/js/form-rules/module/NFormRuleRequiredIf.ts

@@ -14,6 +14,10 @@ export const NFormRuleRequiredIf = {
             return true;
         }
 
+        if ( ! Mix.isTrue(target) ) {
+            return true;
+        }
+
         if ( Mix.isBool(value) ) {
             return value === true;
         }

package/src/form/js/form-rules/module/NFormRuleRequiredUnless.ts

@@ -14,6 +14,10 @@ export const NFormRuleRequiredUnless = {
             return true;
         }
 
+        if ( Mix.isTrue(target) ) {
+            return true;
+        }
+
         if ( Mix.isBool(value) ) {
             return value === true;
         }

package/src/index.scss

@@ -27,7 +27,7 @@
 @forward "./root/index";
 @forward "./chart/index";
 
-.n-disabled:not(.n-draglist-item) {
+.n-disabled:not(.n-draglist-item,.n-resizer) {
     pointer-events: none;
 }