@kizmann/nano-ui 2.0.2 → 3.0.1

package/src/root/js/data/IconData.ts

@@ -0,0 +1,62 @@
+import { ProtoController } from "../../index.ts";
+
+export type IconPosition = 'before' | 'after';
+
+export class IconData
+{
+    /**
+     * @type {ProtoController}
+     */
+    declare scope : ProtoController;
+
+    /**
+     * @returns {string}
+     */
+    get icon() : IconPosition
+    {
+        return this.scope.get('icon');
+    }
+
+    /**
+     * @param {string} value
+     */
+    set icon(value : string)
+    {
+        this.scope.set('icon', value);
+    }
+
+    /**
+     * @returns {IconPosition}
+     */
+    get iconPosition() : IconPosition
+    {
+        return this.scope.get('iconPosition');
+    }
+
+    /**
+     * @param {IconPosition} value
+     */
+    set iconPosition(value : IconPosition)
+    {
+        this.scope.set('iconPosition', value);
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    get iconDisabled() : boolean
+    {
+        return this.scope.get('iconDisabled');
+    }
+
+    /**
+     * @param {boolean} value
+     */
+    set iconDisabled(value : boolean)
+    {
+        this.scope.set('iconDisabled', value);
+    }
+
+}
+
+export default IconData;

package/src/root/js/data/OptionData.ts

@@ -0,0 +1,60 @@
+import { ProtoController } from "../../index.ts";
+
+export class OptionData
+{
+    /**
+     * @type {ProtoController}
+     */
+    declare scope : ProtoController;
+
+    /**
+     * @returns {any}
+     */
+    get options() : any
+    {
+        return this.scope.get('options');
+    }
+
+    /**
+     * @param {any} value
+     */
+    set options(value : any)
+    {
+        this.scope.set('options', value);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get optionsValue() : string
+    {
+        return this.scope.get('optionsValue');
+    }
+
+    /**
+     * @param {string} value
+     */
+    set optionsValue(value : string)
+    {
+        this.scope.set('optionsValue', value);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get optionsLabel() : string
+    {
+        return this.scope.get('optionsLabel');
+    }
+
+    /**
+     * @param {string} value
+     */
+    set optionsLabel(value : string)
+    {
+        this.scope.set('optionsLabel', value);
+    }
+
+}
+
+export default OptionData;

package/src/root/js/data/PositionData.ts

@@ -0,0 +1,64 @@
+import { ProtoController } from "../../index.ts";
+
+export type PopoverPositionTop =
+    'top-start' |
+    'top-center' |
+    'top-end';
+
+export type PopoverPositionBottom =
+    'bottom-start' |
+    'bottom-center' |
+    'bottom-end';
+
+export type PopoverPositionLeft =
+    'left-start' |
+    'left-center' |
+    'left-end';
+
+export type PopoverPositionRight =
+    'right-start' |
+    'right-center' |
+    'right-end';
+
+export type PopoverPosition =
+    PopoverPositionTop |
+    PopoverPositionBottom |
+    PopoverPositionLeft |
+    PopoverPositionRight;
+
+export type DrawerPosition =
+    'top' |
+    'bottom' |
+    'left' |
+    'right';
+
+export type ModalPosition =
+    PopoverPosition |
+    'center-center';
+
+export class PositionData
+{
+    /**
+     * @type {ProtoController}
+     */
+    declare scope : ProtoController;
+
+    /**
+     * @returns {PopoverPosition|DrawerPosition|ModalPosition}
+     */
+    get position() : PopoverPosition | DrawerPosition | ModalPosition
+    {
+        return this.scope.get('position');
+    }
+
+    /**
+     * @param {PopoverPosition|DrawerPosition|ModalPosition} value
+     */
+    set position(value : PopoverPosition | DrawerPosition | ModalPosition)
+    {
+        this.scope.set('position', value);
+    }
+
+}
+
+export default PositionData;

package/src/root/js/data/TextData.ts

@@ -0,0 +1,76 @@
+import { ProtoController } from "../../index.ts";
+
+export class TextData
+{
+    /**
+     * @type {ProtoController}
+     */
+    declare scope : ProtoController;
+
+    /**
+     * @returns {string}
+     */
+    get undefinedText() : string
+    {
+        return this.scope.get('undefinedText');
+    }
+
+    /**
+     * @param {string} value
+     */
+    set undefinedText(value : string)
+    {
+        this.scope.set('undefinedText', value);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get emptyText() : string
+    {
+        return this.scope.get('emptyText');
+    }
+
+    /**
+     * @param {string} value
+     */
+    set emptyText(value : string)
+    {
+        this.scope.set('emptyText', value);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get trueText() : string
+    {
+        return this.scope.get('trueText');
+    }
+
+    /**
+     * @param {string} value
+     */
+    set trueText(value : string)
+    {
+        this.scope.set('trueText', value);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get falseText() : string
+    {
+        return this.scope.get('falseText');
+    }
+
+    /**
+     * @param {string} value
+     */
+    set falseText(value : string)
+    {
+        this.scope.set('falseText', value);
+    }
+
+}
+
+export default TextData;

package/src/root/js/helper/OptionHelper.ts

@@ -0,0 +1,102 @@
+import { Arr, Mix, Obj, Str } from "@kizmann/pico-js";
+
+export class OptionHelper
+{
+
+    static getList(scope : any) : any[]
+    {
+        const { options } = scope.data;
+
+        const result = Arr.each(options, (v : any, i : any) => {
+            return { $index: i, $value: v };
+        });
+
+        return result ?? [];
+    }
+
+    static getFlat(scope : any, list : any[] = null) : any[]
+    {
+        const { optionsLabel: ol, optionsValue: ov } = scope.data;
+
+        if ( list == null ) {
+            list = this.getList(scope);
+        }
+
+        const result = Arr.each(list, (item : any) => {
+            return {
+                label: Obj.get(item, ol), value: Obj.get(item, ov),
+            };
+        });
+
+        return result ?? [];
+    }
+
+    static getCombineList(scope : any, list : any[]) : any[]
+    {
+        let value = scope.data.model;
+
+        if ( Mix.isEmpty(value) ) {
+            return list;
+        }
+
+        if ( !Mix.isArr(value) ) {
+            value = Arr.all(value);
+        }
+
+        let values = Arr.diff(...[
+            value, Arr.extract(list, 'value')
+        ]);
+
+        const { allowCreate, undefinedText } = scope.data;
+
+        const fn = (v:any) => {
+            return allowCreate ? Mix.str(v) : undefinedText;
+        };
+
+        const result = Arr.clone(list);
+
+        Arr.each(values, (v : any) => {
+            result.push({ label: fn(v), value: Mix.str(v) });
+        });
+
+        return result ?? [];
+    }
+
+    static getFilterList(scope : any, list : any[]) : any[]
+    {
+        let search = scope.data.search;
+
+        if ( Mix.isEmpty(search) ) {
+            return list;
+        }
+
+        const result = Arr.filter(list, (item : any) => {
+            return Str.has(item.label, search);
+        });
+
+        return result ?? [];
+    }
+
+    static getListItem(scope : any, list : any[], value : any) : any
+    {
+        const { optionsValue } = scope.data;
+
+        const result = Arr.find(list, (v : any) => {
+            return Obj.get(v, optionsValue) === value;
+        });
+
+        return result ?? null;
+    }
+
+    static getFlatItem(scope : any, list : any[], value : any) : any
+    {
+        const result = Arr.find(list, (v : any) => {
+            return v.value === value;
+        });
+
+        return result ?? null;
+    }
+
+}
+
+export default OptionHelper;

package/src/root/js/legacy/cmer.ts

@@ -0,0 +1,34 @@
+import { Arr, Obj, Mix } from "@kizmann/pico-js";
+
+export const cmer = function(classList : any) {
+
+    let attrsList = {};
+
+    if ( Mix.isStr(classList) ) {
+        attrsList[classList] = true;
+    }
+
+    if ( Mix.isArr(classList) ) {
+        Arr.each(classList, (value : any) => attrsList[value] = true);
+    }
+
+    if ( Mix.isObj(classList) ) {
+        Obj.assign(attrsList, classList);
+    }
+
+    if ( Mix.isStr(this.$attrs.class) ) {
+        attrsList[this.$attrs.class] = true;
+    }
+
+    if ( Mix.isArr(this.$attrs.class) ) {
+        Arr.each(this.$attrs.class, (value : any) => attrsList[value] = true);
+    }
+
+    if ( Mix.isObj(this.$attrs.class) ) {
+        Obj.assign(attrsList, this.$attrs.class);
+    }
+
+    return attrsList;
+}
+
+export default cmer;

package/src/root/js/legacy/cslo.ts

@@ -0,0 +1,14 @@
+import { Comment } from "vue";
+
+export const cslo = function (slot : string = 'default', props : any = {}) {
+
+    if ( ! this.$slots[slot] ) {
+        return false;
+    }
+
+    return this.$slots[slot](props).findIndex((o : any) => {
+        return o.type !== Comment;
+    }) !== -1;
+}
+
+export default cslo;

package/src/root/js/legacy/ctor.ts

@@ -0,0 +1,23 @@
+import { Arr, Obj } from "@kizmann/pico-js";
+
+export const ctor = function (key : string, fallback = null) {
+
+    let ctor = Obj.get(this.$options, key.split('.'), -1);
+
+    // if ( ctor === -1 ) {
+    //     ctor = Obj.get(this.$vnode.componentOptions.Ctor,
+    //         Arr.merge(['options'], key.split('.')), -1);
+    // }
+
+    if ( ctor === -1 ) {
+        ctor = fallback;
+    }
+
+    if ( typeof ctor !== 'function' ) {
+        return ctor;
+    }
+
+    return (...args : [...any]) => ctor.apply(this, args);
+}
+
+export default ctor;

package/src/root/js/module/Pointer.ts

@@ -0,0 +1,261 @@
+import { Arr, Dom, For, Mix, Obj, Run } from "@kizmann/pico-js";
+import * as fs from "node:fs";
+
+export class Pointer
+{
+    /**
+     * @type {number}
+     */
+    static index : number = 10000;
+
+    /**
+     * @type {any[]}
+     */
+    static signals : any[] = [];
+
+    /**
+     * @type {any[]}
+     */
+    static chains : any[] = [];
+
+    /**
+     * @type {any[]}
+     */
+    static groups : any[] = [];
+
+    /**
+     * @type {any}
+     */
+    static cursor : any = {
+        clientX: 0, clientY: 0
+    };
+
+    /**
+     * @type {any[]}
+     */
+    static waiter : any[] = [];
+
+    static init() : Pointer
+    {
+        const el = Dom.find(window);
+
+        el.on('keydown', ...[
+            (e : any) => this.on(e),
+        ]);
+
+        el.on('keyup', ...[
+            (e : any) => this.on(e),
+        ]);
+
+        el.on('pointerdown', ...[
+            (e : any) => this.on(e),
+        ]);
+
+        el.on('pointerup', ...[
+            (e : any) => this.on(e),
+        ]);
+
+        el.on('contextmenu', ...[
+            (e : any) => this.on(e)
+        ]);
+
+        el.on('pointermove', ...[
+            Run.framebuffer((e : any) => this.on(e), 'NPointer'),
+        ], { passive: true });
+
+        el.on('scroll', ...[
+            Run.framebuffer((e : any) => this.on(e), 'NPointer'),
+        ], { passive: true });
+
+        el.on('virtualscroll', ...[
+            Run.framebuffer((e : any) => this.on(e), 'NPointer'),
+        ], { passive: true });
+
+        return this;
+    }
+
+    static zindex() : number
+    {
+        return 10000 + this.chains.length;
+    }
+
+    static on(e : any) : void
+    {
+        const cursor = {
+            clientX: e.clientX, clientY: e.clientY
+        };
+
+        if ( e.clientX || e.clientY ) {
+            this.cursor = cursor;
+        }
+
+        let targets = Dom.getNodePoint(this.cursor);
+
+        let v = {
+            type: e.type, targets, target: Arr.first(targets)
+        };
+
+        if ( e.type === 'pointerdown' ) {
+            v.type = 'mousedown';
+        }
+
+        if ( e.type === 'pointerup' ) {
+            v.type = 'mouseup';
+        }
+
+        if ( e.type === 'pointermove' ) {
+            v.type = 'mousemove';
+        }
+
+        if ( e.type === 'keydown' && e.which === 27 ) {
+            v = { ...v, type: 'keyescape' };
+        }
+
+        if ( e.type === 'keydown' && e.which === 13 ) {
+            v = { ...v, type: 'keyenter' };
+        }
+
+        let [prevent, pl] = [
+            false, Dom.find(v.target).upnode('[prevent]')
+        ];
+
+        if ( !e.metaKey && !pl.empty() ) {
+            prevent = this.preventCodes(e, pl);
+        }
+
+        if ( prevent ) {
+            e && e.preventDefault();
+        }
+
+        for ( const { type, cb } of this.signals ) {
+            if ( type === v.type ) cb(e, v);
+        }
+    }
+
+    static preventCodes(e : any, el : Dom) : boolean
+    {
+        const keycode = For.parseOptions(...[
+            el.attr('prevent') || ''
+        ]);
+
+        const prevent = Obj.get(keycode, e.type);
+
+        if ( Mix.isArr(prevent) ) {
+            return Arr.has(prevent, e.which);
+        }
+
+        return !! prevent;
+    }
+
+    static findGesture(e : any)
+    {
+        // distinguish which gesture is executed
+    }
+
+    static bind(id : string, type : string, cb : Function) : void
+    {
+        Arr.append(this.signals, { id, type, cb });
+    }
+
+    static unbind(id : string) : void
+    {
+        Arr.remove(this.signals, { id });
+    }
+
+    static deblock(uid : string, type : string = 'none', group : string, cb : Function = null)
+    {
+        if ( group == null ) {
+            group = uid;
+        }
+
+        let items = [];
+
+        const sames = Arr.find(this.groups, (val : any) => {
+            return Arr.has(val, group);
+        }, []);
+
+        const fn = (val : any) => {
+            return val[1] === type && !Arr.has(sames, val[0]);
+        };
+
+        for ( let item of Arr.clone(this.chains).reverse() ) {
+            if ( !fn(item) ) break; else items.push(item);
+        }
+
+        let loop : any = cb, next = (cb : any, nx : any) => {
+            Run.frame(() => ((cb && cb()), (nx && nx())));
+        };
+
+        Arr.each(items.reverse(), (val : any) => {
+            loop = ((p) => () => next(val[2], p))(loop);
+        });
+
+        loop && loop();
+    }
+
+    static prevent(uid : string, type : string = 'none', group : string, cb : Function = null)
+    {
+        if ( group == null ) {
+            group = uid;
+        }
+
+        const index = Arr.findIndex(this.groups, (val : any) => {
+            return Arr.has(val, group);
+        });
+
+        if ( index === -1 ) {
+            Arr.append(this.groups, [group]);
+        }
+
+        if ( index !== -1 ) {
+            Arr.add(this.groups[index], uid);
+        }
+
+        this.chains.push([uid, type, cb]);
+    }
+
+    static release(uid : string, cb : Function = null)
+    {
+        const index = Arr.findIndex(this.groups, (val : any) => {
+            return Arr.has(val, uid);
+        });
+
+        if ( index !== -1 ) {
+            Arr.remove(this.groups[index], uid);
+        }
+
+        this.groups = Arr.filter(this.groups);
+
+        Run.frame(() => {
+            (Arr.remove(this.chains, [uid]), cb && cb());
+        });
+    }
+
+    static blocked(uid : string)
+    {
+        const index = Arr.findIndex(this.chains, (val : any) => {
+            return val[0] === uid;
+        });
+
+        return index !== -1 && index !== this.chains.length - 1;
+    }
+
+    static wait(cb : Function)
+    {
+        Arr.append(this.waiter, Run.delay(cb, 250));
+    }
+
+    static stop()
+    {
+        this.waiter = Arr.filter(this.waiter, (clear : Function) => {
+            return clear(), false;
+        });
+    }
+
+}
+
+if ( !globalThis.NPointer ) {
+    globalThis.NPointer = Pointer.init();
+}
+
+export default Pointer;