@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/signal/js/confirm/NConfirmElement.ts

@@ -0,0 +1,204 @@
+import { Dom, Hash, Locale, Obj, Run } from "@kizmann/pico-js";
+import { Styler } from "../../../root/index.ts";
+import NModalHandler from "../../../modal/js/handler/NModalHandler.ts";
+import NModalElement from "../../../modal/js/handler/NModalElement.ts";
+
+export class NConfirmElement
+{
+    /**
+     * @var {Dom}
+     */
+    el : Dom;
+
+    /**
+     * @var {NModalElement}
+     */
+    modal : NModalElement;
+
+    /**
+     * @type {Function}
+     */
+    signal : Function;
+
+    /**
+     * @var {any}
+     */
+    options : any = {
+        uid: null,
+        text: null,
+        theme: 'dark',
+        size: null,
+        type: null,
+        cancelText: null,
+        confirmText: null,
+    };
+
+    /**
+     * @type {string}
+     */
+    get uid() : string
+    {
+        return this.options.uid;
+    }
+
+    constructor(options : any)
+    {
+        if ( options.uid == null ) {
+            options.uid = Hash.uuid();
+        }
+
+        const texts = {
+            cancelText: Locale.trans('Cancel'),
+            confirmText: Locale.trans('Confirm'),
+        };
+
+        this.options = Obj.assign(...[
+            this.options, texts, options
+        ]);
+
+        this.signal = () => {
+            console.warn('Confirm calling empty signal!');
+        };
+
+        this.el = this.render();
+    }
+
+    promise()
+    {
+        return new Promise((resolve, reject) => {
+
+            const confirm = () => {
+                this.close(), Run.frame(() => resolve(1));
+            };
+
+            const cancel = () => {
+                this.close(), Run.frame(() => reject(0));
+            };
+
+            this.signal = (val : boolean) => {
+                val ? confirm() : cancel();
+            }
+
+            this.open();
+        });
+    }
+
+    open()
+    {
+        let modalProps : any = {
+            uid: this.options.uid, listen: false,
+        };
+
+        modalProps.onClose = () => {
+            this.signal(false);
+        };
+
+        this.modal = NModalHandler.append(...[
+            this.el.get(0), modalProps
+        ]);
+
+        Run.frame(() => {
+            this.modal.openRun(true);
+        });
+    }
+
+    close()
+    {
+        if ( this.modal.visible ) {
+            this.modal.closeRun(false, true);
+        }
+
+        // Remove modal blocking
+        NModalHandler.remove(this.modal);
+
+        // Remove element from dom
+        this.el.get(0).remove();
+
+        // Clear for memory
+        [this.el, this.modal] = [null, null];
+    }
+
+    render()
+    {
+        const root = Dom.make('div', {
+            class: Styler.bem('n-confirm', this.options),
+        });
+
+        root.appendTo(document.body);
+
+        const frame = Dom.make('div', {
+            class: 'n-confirm__frame',
+        });
+
+        frame.appendTo(root);
+
+        const body = Dom.make('div', {
+            class: 'n-confirm__body',
+        });
+
+        body.appendTo(frame);
+
+        const iconCls = Styler.icon(...[
+            this.options.type, 'confirm'
+        ]);
+
+        const icon = Dom.make('div', {
+            class: 'n-confirm__icon',
+            html: `<i class="${iconCls}"></i>`,
+        });
+
+        icon.appendTo(body);
+
+        const text = Dom.make('div', {
+            class: 'n-confirm__text',
+            html: `<p>${this.options.text}</p>`,
+        });
+
+        text.appendTo(body);
+
+        const action = Dom.make('div', {
+            class: 'n-confirm__action',
+        });
+
+        action.appendTo(frame);
+
+        const cancelCls = Styler.button({
+            glass: true, type: 'neutral'
+        });
+
+        const cancel = Dom.make('button', {
+            class: cancelCls.join(' '),
+        });
+
+        cancel.on('mousedown', () => {
+            this.signal(false);
+        });
+
+        cancel.html(...[
+            `<span>${this.options.cancelText}</span>`
+        ]);
+
+        cancel.appendTo(action);
+
+        const confirmCls = Styler.button({
+            //
+        });
+
+        const confirm = Dom.make('button', {
+            class: confirmCls.join(' '),
+        });
+
+        confirm.on('mousedown', () => {
+            this.signal(true);
+        });
+
+        confirm.html(...[
+            `<span>${this.options.confirmText}</span>`
+        ]);
+
+        confirm.appendTo(action);
+
+        return root;
+    }
+
+}

package/src/signal/js/confirm/NConfirmHandler.ts

@@ -0,0 +1,26 @@
+import { Mix } from "@kizmann/pico-js";
+import { NConfirmElement } from "./NConfirmElement.ts";
+
+export class NConfirmHandler
+{
+
+    static make(options : any = {}, type : string = null)
+    {
+        if ( Mix.isString(options) ) {
+            options = { text: options };
+        }
+
+        if ( type != null ) {
+            options.type = type;
+        }
+
+        const modal = new NConfirmElement(...[
+            options
+        ]);
+
+        return modal.promise();
+    }
+
+}
+
+export default NConfirmHandler;

package/src/signal/js/notify/NNotifyElement.ts

@@ -0,0 +1,106 @@
+import { Dom, Hash, Locale, Obj, Run } from "@kizmann/pico-js";
+import { Styler } from "../../../root/index.ts";
+import NNotifyHandler from "./NNotifyHandler.ts";
+
+export class NNotifyElement
+{
+    /**
+     * @var {Dom}
+     */
+    el : Dom;
+
+    /**
+     * @var {any}
+     */
+    options : any = {
+        text: null,
+        theme: null,
+        size: null,
+        type: null,
+        position: null,
+        duration: 4500,
+    };
+
+    constructor(options : any)
+    {
+        this.options = Obj.assign(...[
+            this.options, options
+        ]);
+    }
+
+    open()
+    {
+        const {duration} = this.options;
+
+        const frame = NNotifyHandler.frame(...[
+            this.options.position
+        ]);
+
+        this.el = this.render();
+
+        this.el.on('pointerdown', (e:any) => {
+            e.stopPropagation();
+            this.close();
+        });
+
+        Run.delay(...[
+            () => this.close(), duration
+        ]);
+
+        Run.frame(() => {
+            this.el.addClass('n-active');
+        });
+
+        this.el.appendTo(frame);
+    }
+
+    close()
+    {
+        if ( this.el == null ) {
+            return;
+        }
+
+        // Remove element from dom
+        this.el.get(0).remove();
+
+        // Clear for memory
+        this.el = null;
+
+        // Remove frame if necessary
+        Run.frame(() => NNotifyHandler.clear());
+    }
+
+    render()
+    {
+        const root = Dom.make('div', {
+            class: Styler.bem('n-notify', this.options),
+        });
+
+        const icon = Dom.make('div', {
+            class: 'n-notify__icon',
+        });
+
+        const iconCls = Styler.icon(...[
+            this.options.type, 'notify'
+        ]);
+
+        icon.html(...[
+            `<i class="${iconCls}"></i>`
+        ]);
+
+        icon.appendTo(root);
+
+        const text = Dom.make('div', {
+            class: 'n-notify__text',
+        });
+
+        text.html(...[
+            `<p>${this.options.text}</p>`
+        ]);
+
+        text.appendTo(root);
+
+        return root;
+    }
+
+}

package/src/signal/js/notify/NNotifyHandler.ts

@@ -0,0 +1,64 @@
+import { Dom, Mix } from "@kizmann/pico-js";
+import { NNotifyElement } from "./NNotifyElement.ts";
+import { Styler } from "../../../root/index.ts";
+
+export class NNotifyHandler
+{
+    static make(options : any = {}, type : string = null)
+    {
+        if ( Mix.isString(options) ) {
+            options = { text: options };
+        }
+
+        if ( type != null ) {
+            options.type = type;
+        }
+
+        const notification = new NNotifyElement(...[
+            options
+        ]);
+
+        return notification.open();
+    }
+
+    static create(position : string)
+    {
+        const el = Dom.make('div', {
+            class: Styler.bem('n-notify-frame'),
+        });
+
+        el.data('notify', position);
+
+        // Append to body
+        el.appendTo(document.body);
+
+        return el;
+    }
+
+    static frame(position : string)
+    {
+        if ( position == null ) {
+            position = 'bottom-start';
+        }
+
+        let el = Dom.find(`[data-notify="${position}"]`);
+
+        if ( el.el == null ) {
+            el = this.create(position);
+        }
+
+        return el;
+    }
+
+    static clear()
+    {
+        Dom.find('[data-notify]').each((el : HTMLElement) => {
+            if ( !Dom.find(el).childs().length ) {
+                el.remove();
+            }
+        });
+    }
+
+}
+
+export default NNotifyHandler;

package/src/slider/NSlider.md

@@ -0,0 +1,3 @@
+### Planned
+
+- [ ] Add stepdistance to prevent overlapping

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

@@ -1,4 +1,4 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 .n-slider {
     position: relative;

package/src/slider/index.scss

@@ -1 +1 @@
-@forward "./src/slider/slider";
+@forward "./css/slider";

package/src/slider/index.ts

@@ -0,0 +1,6 @@
+import { App } from "vue";
+import NSlider from "./js/slider/NSlider.ts";
+
+export default function (App : App) {
+    App.component(NSlider.name, NSlider);
+}

package/src/slider/js/slider/NSlider.ts

@@ -0,0 +1,86 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NSliderController } from "./NSliderController.ts";
+
+export const NSliderProps = {
+
+    ...Props.Size,
+    ...Props.Type,
+    ...Props.Disabled,
+
+    /**
+     * @type {PropType<string|number|array>}
+     */
+    modelValue: {
+        type: [String,Number,Array], default: null
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    range: {
+        type: [Boolean], default: false
+    },
+
+    /**
+     * @type {PropType<array>}
+     */
+    labels: {
+        type: [Array], default: () => []
+    },
+
+    /**
+     * @type {PropType<number|array>}
+     */
+    steps: {
+        type: [Number,Array], default: 1
+    },
+
+    /**
+     * @type {PropType<number>}
+     */
+    min: {
+        type: [Number], default: 0
+    },
+
+    /**
+     * @type {PropType<number>}
+     */
+    max: {
+        type: [Number], default: 100
+    },
+
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NSlider',
+
+    /**
+     * @type {typeof NSliderProps}
+     */
+    props: NSliderProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NSliderController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/slider/js/slider/NSliderController.ts

@@ -0,0 +1,204 @@
+import { SetupContext } from "vue";
+import { ProtoController } from "../../../root/index.ts";
+import { NSliderView } from "./NSliderView.ts";
+import { NSliderData } from "./NSliderData.ts";
+import { Arr, Dom, Mix, Num } from "@kizmann/pico-js";
+
+
+export class NSliderController extends ProtoController
+{
+    /**
+     * @type {NSliderController}
+     */
+    declare scope : NSliderController;
+
+    /**
+     * @type {NSliderData}
+     */
+    declare data : NSliderData;
+
+    /**
+     * @type {NSliderView}
+     */
+    declare view : NSliderView;
+
+    /**
+     * @type {ResizeObserver}
+     */
+    observer : ResizeObserver;
+
+    constructor(props : any, context : SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NSliderView(this),
+            new NSliderData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this.makeRef('el');
+
+        this.cloneProp('modelValue');
+
+        this.makeData('width', null);
+        this.makeData('index', 0);
+        this.makeData('values', []);
+
+        this.updateValues();
+
+        return this;
+    }
+
+    onMounted()
+    {
+        this.observer = new ResizeObserver(() => {
+            this.onResize();
+        });
+
+        this.observer.observe(this.rel('el'));
+    }
+
+    onUnmounted()
+    {
+        this.observer.disconnect();
+    }
+
+    onResize()
+    {
+        this.set('width', this.dom('el').width());
+    }
+
+    onPointerdown(e : any, index : number)
+    {
+        const uid = this.uid;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        const [el, db] = [
+            Dom.find(e.target).upnode('[data-handle]'),
+            Dom.find(document.body)
+        ];
+
+        db.on('pointermove', (e : any) => {
+            this.onPointermove(e, index);
+        }, { passive: true, uid });
+
+        db.once('pointerup', (e : any) => {
+            this.onPointerup(e);
+            db.off('pointermove', { uid });
+            el.remClass('n-move');
+        });
+
+        el.addClass('n-move');
+    }
+
+    onPointermove(e : any, index : number)
+    {
+        const { data } = this;
+
+        let [cursor, offset] = [
+            e.clientX, this.dom('el').offset('left')
+        ];
+
+        let width = (cursor - offset) /
+            data.width * 100;
+
+        let closest = this.getClosestStep(...[
+            width, index
+        ]);
+
+        if ( closest < data.minfix ) {
+            closest = data.minfix;
+        }
+
+        if ( closest > data.maxfix ) {
+            closest = data.maxfix;
+        }
+
+        const min = data.values[0];
+
+        if ( index === 1 && closest < min ) {
+            closest = min;
+        }
+
+        const max = data.values[1];
+
+        if ( index === 0 && closest > max ) {
+            closest = max;
+        }
+
+        const values = Arr.clone(data.values);
+
+        Arr.splice(values, ...[
+            index, 1, closest
+        ]);
+
+        this.set('values', values);
+    }
+
+    onPointerup(e : any)
+    {
+        const { data } = this;
+
+        this.update('modelValue', ...[
+            data.range ? data.values : Arr.last(data.values)
+        ]);
+    }
+
+    updateValues()
+    {
+        const { data } = this;
+
+        let values : [number, number] = [
+            data.minfix, null
+        ];
+
+        if ( Mix.isArr(data.model) ) {
+            values = data.model;
+        }
+
+        let value = Arr.last(...[
+            Arr.all(data.model)
+        ]);
+
+        if ( Mix.isNull(value) ) {
+            value = data.maxfix;
+        }
+
+        this.set('values', [values[0], value]);
+    }
+
+    getClosestStep(width : number, index : number)
+    {
+        const { data } = this;
+
+        if ( Mix.isNum(data.steps) ) {
+            return Math.round(width / data.steps) * data.steps;
+        }
+
+        const ranges = [
+            Arr.last(data.steps), Arr.first(data.steps),
+        ];
+
+        const step = (Num.subtract(ranges) / 100 * width);
+
+        let diff = Arr.each(data.steps, (val : number) => {
+            return Math.abs(step - val + data.minfix);
+        });
+
+        let target = Arr.findIndex(diff, Math.min(...diff));
+
+        return data.steps[target];
+    }
+
+}
+
+export default NSliderController;