@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/modal/{src/modal → css}/modal.scss

@@ -1,33 +1,38 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
-.n-modal {
+body.n-backdrop {
+    overflow: hidden;
+}
+
+.n-modal-backdrop {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 3%;
+    transition: opacity 0.2s;
 }
 
-.n-modal.n-hidden {
-    display: none;
+.n-modal-backdrop:not(.n-ready) {
+    pointer-events: none;
+    opacity: 0;
 }
 
-.n-modal__backdrop {
-    z-index: 10;
-    position: absolute;
+.n-modal {
+    position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-    transition: opacity 0.3s;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 3%;
 }
 
-.n-modal:not(.n-ready,.n-loop) .n-modal__backdrop {
-    opacity: 0;
+.n-modal.n-hidden {
+    display: none;
+    pointer-events: none;
 }
 
 .n-modal__frame {
@@ -37,13 +42,13 @@
     flex: 0 1 auto;
     display: flex;
     flex-direction: column;
-    min-width: 300px;
+    min-width: 0;
     max-width: 100%;
     min-height: 0;
     max-height: 100%;
     margin: auto;
     transform: translateY(0);
-    transition: opacity 0.2s 0.1s ease-out, transform 0.2s 0.1s ease-out;
+    transition: all 0.2s;
 }
 
 .n-modal:not(.n-ready,.n-loop) .n-modal__frame {

package/src/modal/index.scss

@@ -1 +1,2 @@
-@forward "./src/modal/modal";
+@forward "./css/modal";
+@forward "./css/drawer";

package/src/modal/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import NModal from "./js/modal/NModal.ts";
+import NDrawer from "./js/drawer/NDrawer.ts";
+
+export default function (App : App) {
+    App.component(NModal.name, NModal);
+    App.component(NDrawer.name, NDrawer);
+}

package/src/modal/js/drawer/NDrawer.ts

@@ -0,0 +1,122 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NDrawerController } from "./NDrawerController.ts";
+
+export const NDrawerProps = {
+
+    ...Props.Load,
+    ...Props.Size,
+    ...Props.Type,
+    ...Props.ThemeDark,
+    ...Props.PositionDrawer,
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    modelValue: {
+        type: [Boolean], default: false
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    mode: {
+        type: [String], default: 'modal'
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    listen: {
+        type: [Boolean], default: true
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    closable: {
+        type: [Boolean], default: true
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    scrollbar: {
+        type: [Boolean], default: true
+    },
+
+    /**
+     * @type {PropType<string|number>}
+     */
+    width: {
+        type: [String,Number], default: null
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    height: {
+        type: [String,Number], default: null
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    target: {
+        type: [String], default: null
+    },
+
+    /**
+     * @type {PropType<function>}
+     */
+    beforeOpen: {
+        type: [Function], default: null
+    },
+
+    /**
+     * @type {PropType<function>}
+     */
+    beforeClose: {
+        type: [Function], default: null
+    }
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NDrawer',
+
+    /**
+     * @type {typeof NDrawerProps}
+     */
+    props: NDrawerProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        'update:modelValue',
+        'open',
+        'close',
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NDrawerController(props, context);
+
+        ncx.pass({
+            open: 'superOpen',
+            close: 'superClose',
+        });
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/modal/js/drawer/NDrawerController.ts

@@ -0,0 +1,114 @@
+import { SetupContext, provide } from "vue";
+import { Dom } from "@kizmann/pico-js";
+import { ProtoController } from "../../../root/index.ts";
+import { NDrawerView } from "./NDrawerView.ts";
+import { NDrawerData } from "./NDrawerData.ts";
+import { NModalHandler } from "../handler/NModalHandler.ts";
+import { NModalElement } from "../handler/NModalElement.ts";
+
+export class NDrawerController extends ProtoController
+{
+    /**
+     * @type {NDrawerController}
+     */
+    declare scope : NDrawerController;
+
+    /**
+     * @type {NDrawerData}
+     */
+    declare data : NDrawerData;
+
+    /**
+     * @type {NDrawerView}
+     */
+    declare view : NDrawerView;
+
+    /**
+     * @type {NModalElement}
+     */
+    modal : NModalElement;
+
+    constructor(props : any, context : SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NDrawerView(this),
+            new NDrawerData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this.cloneProp('modelValue');
+
+        this
+            .makeRef('el')
+            .makeRef('frame');
+
+        provide('NModal', this.instance);
+
+        return this;
+    }
+
+    onMounted()
+    {
+        const { el, data } = this;
+
+        this.makeUID();
+
+        this.modal = NModalHandler.append(el, {
+            uid: this.uid,
+            target: data.target,
+            listen: data.listen,
+            closable: data.closable,
+            beforeOpen: data.beforeOpen,
+            beforeClose: data.beforeClose,
+        });
+
+        this.modal.on('open', () => {
+            this.onOpen();
+        });
+
+        this.modal.on('close', () => {
+            this.onClose();
+        });
+
+        Dom.find(el).appendTo(document.body);
+    }
+
+    onUnmounted()
+    {
+        NModalHandler.remove({ uid: this.uid });
+    }
+
+    onOpen()
+    {
+        this.update('modelValue', true);
+        this.emit('open');
+    }
+
+    onClose()
+    {
+        this.update('modelValue', false);
+        this.emit('close');
+    }
+
+    superOpen()
+    {
+        this.modal.open();
+    }
+
+    superClose(forceClose : boolean = false)
+    {
+        this.modal.close(forceClose);
+    }
+
+
+}
+
+export default NDrawerController;

package/src/modal/js/drawer/NDrawerData.ts

@@ -0,0 +1,13 @@
+import { NDrawerController } from "./NDrawerController.ts";
+import { NModalData } from "../modal/NModalData.ts";
+
+export class NDrawerData extends NModalData
+{
+    /**
+     * @type {NDrawerController}
+     */
+    declare scope : NDrawerController;
+
+}
+
+export default NDrawerData;

package/src/modal/js/drawer/NDrawerView.ts

@@ -0,0 +1,18 @@
+import { NDrawerController } from "./NDrawerController.ts";
+import { NModalView } from "../modal/NModalView.ts";
+
+export class NDrawerView extends NModalView
+{
+    /**
+     * @type {NDrawerController}
+     */
+    declare scope : NDrawerController;
+
+    /**
+     * @type {string}
+     */
+    bem : string = 'n-drawer';
+
+}
+
+export default NDrawerView;

package/src/modal/js/handler/NModalElement.ts

@@ -0,0 +1,253 @@
+import { Dom, Arr, Obj, Run, Hash, Str } from "@kizmann/pico-js";
+import { Pointer } from "../../../root/index.ts";
+import { NModalHandler } from "./NModalHandler.ts";
+
+export class NModalElement
+{
+    /**
+     * @type {boolean}
+     */
+    visible : boolean = false;
+
+    /**
+     * @type {boolean}
+     */
+    freeze : boolean = false;
+
+    /**
+     * @type {any}
+     */
+    options : any = {
+        target: null,
+        listen: true,
+        closable: true,
+        beforeOpen: null,
+        beforeClose: null,
+    };
+
+    get uid() : string
+    {
+        return this.options.uid;
+    }
+
+    constructor(el : HTMLElement, options : any = {})
+    {
+        if ( options.uid == null ) {
+            options.uid = Hash.uuid()
+        }
+
+        if ( options.target == null ) {
+            options.target = Dom.find(el).prev().get(0);
+        }
+
+        this.options = Obj.assign(this.options, options, {
+            el: Dom.find(el)
+        });
+
+        this.options.el.data('modal', options.uid);
+    }
+
+    renderBox()
+    {
+        let { uid, el } = this.options;
+
+        if ( !this.visible ) {
+            return el.remClass('n-ready').style(null);
+        }
+
+        let zindex = Pointer.zindex();
+
+        NModalHandler.open(...[
+            uid, zindex
+        ]);
+
+        el.style({
+            'z-index': zindex
+        });
+
+        el.addClass('n-ready');
+    }
+
+    getEventEls(event : any)
+    {
+        const { el, target, listen } = this.options;
+
+        const [ev, wrap] = [
+            Dom.find(event.target), el.child().get(0)
+        ];
+
+        let result : any = {
+            src: ev.closest(wrap),
+        };
+
+        if ( listen && target ) {
+            result.tgt = ev.closest(target);
+        }
+
+        return result;
+    }
+
+    onMousedown(event : any)
+    {
+        let { src, tgt } = this.getEventEls(event);
+
+        if ( !this.visible && !tgt && !src ) {
+            return;
+        }
+
+        let state = tgt || src;
+
+        if ( this.options.toggle ) {
+            state = !this.visible ? state : src;
+        }
+
+        const { closable } = this.options;
+
+        if ( !state && !closable ) {
+            return;
+        }
+
+        this.state(state);
+    }
+
+    onEscape(event : any)
+    {
+        if ( !this.visible ) {
+            return;
+        }
+
+        const { closable } = this.options;
+
+        if ( !closable ) {
+            return;
+        }
+
+        this.state(false);
+    }
+
+    on(event : string, cb : Function)
+    {
+        this.options[`on${Str.ucfirst(event)}`] = cb;
+    }
+
+    state(state : any)
+    {
+        if ( !this.visible && state ) {
+            this.open();
+        }
+
+        if ( this.visible && !state ) {
+            this.close();
+        }
+
+        // Idle if state and visible are equal
+    }
+
+    onPromise(prom : any, cb : Function)
+    {
+        if ( typeof prom !== 'function' ) {
+            return cb();
+        }
+
+        let response = prom();
+
+        if ( response == null ) {
+            return cb();
+        }
+
+        if ( typeof response === 'boolean' ) {
+            return response && cb();
+        }
+
+        this.freeze = true;
+
+        response
+            .then(() => {
+                cb();
+            })
+            .finally(() => {
+                this.freeze = false
+            });
+    }
+
+    open(silent : boolean = false)
+    {
+        if ( this.freeze ) {
+            return this;
+        }
+
+        const fn = () => {
+            this.openRun(silent);
+        };
+
+        this.onPromise(...[
+            this.options.beforeOpen, fn
+        ]);
+
+        return this;
+    }
+
+    openRun(silent : boolean = false)
+    {
+        const { uid } = this.options;
+
+        Run.frame(() => {
+            this.renderBox();
+        });
+
+        Pointer.prevent(uid, 'modal', null, () => {
+            this.close(true);
+        });
+
+        if ( !silent && this.options.onOpen ) {
+            this.options.onOpen();
+        }
+
+        this.visible = true;
+    }
+
+    close(forceClose : boolean = false, silent : boolean = false)
+    {
+        if ( this.freeze ) {
+            return this;
+        }
+
+        const fn = () => {
+            this.closeRun(forceClose, silent);
+        };
+
+        this.onPromise(...[
+            this.options.beforeClose, fn
+        ]);
+
+        return this;
+    }
+
+    closeRun(force : boolean = false, silent : boolean = false)
+    {
+        const { uid } = this.options;
+
+        if ( !force && Pointer.blocked(uid) ) {
+            return;
+        }
+
+        // Unblock parent el
+        Pointer.release(uid);
+
+        // Change backdrop index
+        NModalHandler.close(uid);
+
+        Run.frame(() => {
+            this.renderBox();
+        });
+
+        if ( !silent && this.options.onClose ) {
+            this.options.onClose();
+        }
+
+        this.visible = false;
+    }
+
+}
+
+export default NModalElement;