@kizmann/nano-ui 2.0.2 → 3.0.1

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

@@ -0,0 +1,94 @@
+import { ProtoExtend, ProtoData, DragData } from "../../../root/index.ts";
+import NDraglistController from "./NDraglistController.ts";
+
+export class NDraglistData extends ProtoExtend([ProtoData, DragData])
+{
+    /**
+     * @type {NDraglistController}
+     */
+    declare scope : NDraglistController;
+
+    get classList() : string[]
+    {
+        let classList = [];
+
+        return this.classRoot(classList);
+    }
+
+    get index() : number
+    {
+        return this.scope.get('index');
+    }
+
+    set index(value : number)
+    {
+        this.scope.set('index', value);
+    }
+
+    get virtuals() : any[]
+    {
+        return this.scope.get('virtuals');
+    }
+
+    set virtuals(value : any[])
+    {
+        this.scope.set('virtuals', value);
+    }
+
+    get visibles() : any[]
+    {
+        return this.scope.get('visibles');
+    }
+
+    set visibles(value : any[])
+    {
+        this.scope.set('visibles', value);
+    }
+
+    get relation() : any
+    {
+        return this.scope.get('relation');
+    }
+
+    set relation(value : any)
+    {
+        this.scope.set('relation', value);
+    }
+
+    get grid() : boolean
+    {
+        return this.scope.get('grid');
+    }
+
+    get itemHeight() : number
+    {
+        return this.scope.get('itemHeight');
+    }
+
+    get itemWidth() : number
+    {
+        return this.scope.get('itemWidth');
+    }
+
+    get itemOffset() : number
+    {
+        return this.scope.get('itemOffset');
+    }
+
+    get scrollPortal() : boolean
+    {
+        return this.scope.get('scrollPortal');
+    }
+
+    set scrollPortal(value : boolean)
+    {
+        this.scope.set('scrollPortal', value);
+    }
+
+}
+
+export interface NDraglistData extends ProtoData, DragData
+{
+}
+
+export default NDraglistData;

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

@@ -0,0 +1,370 @@
+import { h } from "vue";
+import { Pointer, ProtoView, Styler } from "../../../root/index.ts";
+import { NDraglistController } from "./NDraglistController.ts";
+import { Arr, Mix, Obj } from "@kizmann/pico-js";
+
+export class NDraglistView extends ProtoView
+{
+    /**
+     * @type {NDraglistController}
+     */
+    declare scope : NDraglistController;
+
+    /**
+     * @type {string}
+     */
+    bem : string = 'n-draglist';
+
+    /**
+     * @type {string}
+     */
+    iem : string = 'n-draglist-item';
+
+    cache = [];
+
+    default()
+    {
+        let { scope, data } = this.scope;
+
+        this.bem = data.grid ? 'n-draggrid' :
+            'n-draglist';
+
+        this.iem = data.grid ? 'n-draggrid-item' :
+            'n-draglist-item';
+
+        let props = {
+            ref: scope.ref('virtualbar'),
+            class: data.classList,
+            items: data.visibles,
+            grid: data.grid,
+            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,
+        };
+
+        const slots : any = {};
+
+        slots.default = (node : any) => {
+            return this.node(node);
+        };
+
+        return this.comp('n-virtualbar', props, slots);
+    }
+
+    header()
+    {
+        let props = {
+            class: ['n-draglist-head']
+        };
+
+        return h('div', props, [
+            this.header_handle(),
+            this.header_expand(),
+            this.header_select(),
+        ]);
+    }
+
+    header_handle()
+    {
+        const { data } = this.scope;
+
+        if ( !data.renderHandle ) {
+            return null;
+        }
+
+        let props = {
+            class: ['n-draglist-item__handle'],
+        };
+
+        return h('div', props);
+    }
+
+    header_expand()
+    {
+        const { data } = this.scope;
+
+        if ( !data.renderExpand ) {
+            return null;
+        }
+
+        let props = {
+            class: ['n-draglist-item__expand'],
+        };
+
+        return h('div', props);
+    }
+
+    header_select()
+    {
+        const { data } = this.scope;
+
+        if ( !data.renderSelect ) {
+            return null;
+        }
+
+        let props : any= {
+            class: ['n-draglist-item__checkbox']
+        }
+
+        props.onClick = (e : any) => {
+            this.scope.selectAll();
+        };
+
+        let parent = {
+            class: ['n-draglist-item__select'],
+        };
+
+        const state = this.scope.selectState();
+
+        if ( state ) {
+            Arr.append(parent.class, 'n-selected');
+        }
+
+        if ( ! data.items.length ) {
+            Arr.append(parent.class, 'n-disabled');
+        }
+
+        let icon = Styler.icon('check');
+
+        if ( state === 1 ) {
+            icon = Styler.icon('minus');
+        }
+
+        return h('div', parent, [
+            h('div', props, [
+                h('i', { class: icon })
+            ])
+        ]);
+    }
+
+    node({ value, props })
+    {
+        if ( ! value ) {
+            return null;
+        }
+
+        let { scope, data } = this.scope;
+
+        props = {
+            class: [], dropitem: value.uid
+        };
+
+        let allowDrag : any = data.allowDrag;
+
+        if ( Mix.isFunc(allowDrag) ) {
+            allowDrag = allowDrag({ value });
+        }
+
+        if ( !data.renderHandle ) {
+            props.draggable = allowDrag;
+        }
+
+        if ( Arr.has(data.selected, value.uid) ) {
+            Arr.append(props.class, 'n-selected');
+        }
+
+        if ( value.childs ) {
+            Arr.append(props.class, 'n-children');
+        }
+
+        const uid = Obj.get(data.current, data.uniqueProp);
+
+        if ( data.allowCurrent && uid === value.uid ) {
+            Arr.append(props.class, 'n-current');
+        }
+
+        if ( Arr.has(data.expanded, value.uid) ) {
+            Arr.append(props.class, 'n-expanded');
+        }
+
+        Arr.append(props.class, scope.view.iem);
+
+        props.onClick = (e : any) => {
+            scope.onCurrentclick(e, value);
+            scope.emit('row-click', data.current, e);
+            scope.emit('node-click', { value, item: data.current }, e);
+        };
+
+        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) => {
+            scope.nodeDragstart(e, value);
+        };
+
+        return h('div', props, [
+            this.node_spacer(value),
+            this.node_handle(value),
+            this.node_expand(value),
+            this.node_select(value),
+            this.node_element(value),
+        ]);
+    }
+
+    node_spacer(value : any)
+    {
+        if ( !value.depth ) {
+            return null;
+        }
+
+        const { data } = this.scope;
+
+        const props : any = {
+            class: `${this.iem}__spacer`
+        };
+
+        props.style = {
+            'width': `${value.depth * data.itemOffset}px`
+        };
+
+        return h('div', props);
+    }
+
+    node_handle(value : any)
+    {
+        const { scope, data } = this.scope;
+
+        if ( !data.renderHandle ) {
+            return null;
+        }
+
+        const parent : any = {
+            class: `${this.iem}__handle`,
+        };
+
+        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 : 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' })
+            ])
+        ]);
+    }
+
+    node_expand(value : any)
+    {
+        const { scope, data } = this.scope;
+
+        if ( !data.renderExpand ) {
+            return null;
+        }
+
+        const parent = {
+            class: `${this.iem}__expand`
+        };
+
+        const props : any = {
+            class: `${this.iem}__angle`
+        };
+
+        props.onPointerdown = (e : any) => {
+            scope.onExpandclick(e, value);
+        };
+
+        props.onClick = (e : any) => {
+            e.stopPropagation();
+        };
+
+        return h('div', parent, [
+            h('div', props, [
+                h('i', { class: 'fa fa-angle-right' })
+            ])
+        ]);
+    }
+
+    node_select(value : any)
+    {
+        const { scope, data } = this.scope;
+
+        if ( !data.renderSelect ) {
+            return null;
+        }
+
+        const parent : any = {
+            class: [`${this.iem}__select`]
+        };
+
+        if ( !scope.nodeAllowSelect(value) ) {
+            Arr.append(parent.class, 'n-disabled');
+        }
+
+        if ( Arr.has(data.selected, value.uid) ) {
+            Arr.append(parent.class, 'n-selected');
+        }
+
+        const props : any = {
+            class: [`${this.iem}__checkbox`]
+        };
+
+        props.onPointerdown = (e : any) => {
+            e.preventDefault();
+            scope.onSelectclick(e, value);
+        };
+
+        return h('div', parent, [
+            h('div', props, [
+                h('i', { class: 'fa fa-check' })
+            ])
+        ]);
+    }
+
+    node_element(value : any)
+    {
+        const { data, scope } = this.scope;
+
+        const props = {
+            class: `${this.iem}__element`
+        };
+
+        const item = Obj.get(data, value.route);
+
+        const passed : any = {
+            value, item
+        };
+
+        passed.copy = () => {
+            console.log('BUILD copy');
+        };
+
+        passed.remove = () => {
+            console.log('BUILD remove');
+        };
+
+        let renderNode = () => {
+            return scope.context.slots.default({ value, item });
+        };
+
+        return h('div', props, [renderNode()]);
+    }
+
+
+}
+
+export default NDraglistView;

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

@@ -0,0 +1,70 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NDropzoneController } from "./NDropzoneController.ts";
+
+export const NDropzone = {
+
+    ...Props.Size,
+    ...Props.Type,
+
+    /**
+     * @type {PropType<object>}
+     */
+    item: {
+        type: [Object], default: null
+    },
+
+    /**
+     * @type {PropType<array>}
+     */
+    allowGroups: {
+        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({
+
+    /**
+     * @type {string}
+     */
+    name: 'NDropzone',
+
+    /**
+     * @type {typeof NDropzone}
+     */
+    props: NDropzone,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        'update:item',
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NDropzoneController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

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

@@ -0,0 +1,144 @@
+import { SetupContext } from "vue";
+import { Pointer, ProtoController } from "../../../root/index.ts";
+import { NDropzoneView } from "./NDropzoneView.ts";
+import { NDropzoneData } from "./NDropzoneData.ts";
+import { NDragReciever } from "../drag/NDragReciever.ts";
+import { NDragHandler } from "../drag/NDragHandler.ts";
+import { Arr } from "@kizmann/pico-js";
+
+
+export class NDropzoneController extends ProtoController
+{
+    /**
+     * @type {NDropzoneController}
+     */
+    declare scope : NDropzoneController;
+
+    /**
+     * @type {NDropzoneData}
+     */
+    declare data: NDropzoneData;
+
+    /**
+     * @type {NDropzoneView}
+     */
+    declare view: NDropzoneView;
+
+    /**
+     * @type {NDragReciever}
+     */
+    drag : NDragReciever;
+
+    constructor(props:any, context:SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NDropzoneView(this),
+            new NDropzoneData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this.makeUID();
+
+        if ( this.data.allowGroups == null ) {
+            this.set('allowGroups', [this.uid]);
+        }
+
+        return this;
+    }
+
+    onMounted()
+    {
+        const { uid } = this;
+
+        let config : any = {};
+
+        config.dragmove = (...args : any[]) => {
+            // @ts-ignore
+            return this.onDragmove(...args);
+        };
+
+        config.dragdrop = (...args : any[]) => {
+            // @ts-ignore
+            return this.onDragdrop(...args);
+        };
+
+        config.dragend = (...args : any[]) => {
+            // @ts-ignore
+            return this.onDragend(...args);
+        };
+
+        this.drag = NDragHandler.append(uid, config);
+    }
+
+    onUnmounted()
+    {
+        NDragHandler.remove(this.uid);
+    }
+
+    onDragmove(e : any, result : any, config : any, els : any)
+    {
+        const { data } = this;
+
+        if ( !Arr.has(config.group, data.allowGroups) ) {
+            return result;
+        }
+
+        result = {
+            ...result, target: els.zone, mode: 'append'
+        };
+
+        if ( !this.nodeAllowDrop(null, result, config) ) {
+            result.mode = 'deny';
+        }
+
+        return result;
+    }
+
+    onDragdrop(e : any, result : any, config : any)
+    {
+        const node = Arr.first(config.items);
+
+        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

@@ -0,0 +1,38 @@
+import { ProtoData } from "../../../root/index.ts";
+import NDropzoneController from "./NDropzoneController.ts";
+
+export class NDropzoneData extends ProtoData
+{
+    /**
+     * @type {NDropzoneController}
+     */
+    declare scope : NDropzoneController;
+
+    get classList() : string[]
+    {
+        return this.classRoot([]);
+    }
+
+    get item() : any
+    {
+        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;