@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/root/js/proto/ProtoController.ts

@@ -0,0 +1,430 @@
+import { onUnmounted, inject, watch, computed, ComponentInternalInstance, getCurrentInstance, isRef, onBeforeUnmount, onMounted, ref, SetupContext } from "vue";
+import { Run, Mix, Arr, Dom, Hash, Signal, Obj } from "@kizmann/pico-js";
+import { ProtoData, ProtoView } from "../../index.ts";
+
+export interface FakeInternalInstance extends ComponentInternalInstance
+{
+    ncx : ProtoController;
+    ctx : any;
+    setupState : Record<string, any>;
+}
+
+export class ProtoController
+{
+    /**
+     * @type {FakeInternalInstance}
+     */
+    instance : FakeInternalInstance;
+
+    /**
+     * @type {SetupContext}
+     */
+    context : SetupContext;
+
+    /**
+     * @type {any}
+     */
+    props : any;
+
+    scope : ProtoController;
+
+    /**
+     * @type {ProtoView}
+     */
+    view : ProtoView;
+
+    /**
+     * @type {ProtoData}
+     */
+    data : ProtoData;
+
+    vals : object = {};
+
+    /**
+     * @type {object}
+     */
+    refs : object = {};
+
+    /**
+     @type {object}
+     */
+    signals : object = {};
+
+    /**
+     * @type {string}
+     */
+    uid : string;
+
+    /**
+     * @type {HTMLElement | null}
+     */
+    el : HTMLElement | null;
+
+    constructor(props : object, context : SetupContext)
+    {
+        [this.props, this.context] = [
+            props, context,
+        ];
+    }
+
+    setup()
+    {
+        // @ts-ignore
+        this.instance = getCurrentInstance();
+
+        if ( !this.instance.ncx ) {
+            this.instance.ncx = this;
+        }
+
+        this.scope = this;
+
+        this.injectRef([
+            'form-item', 'NFormItem'
+        ]);
+
+        onMounted(() => {
+            this.el = this.ref('el')?.value;
+        });
+
+        onMounted(() => {
+            this.onMounted();
+        });
+
+        onUnmounted(() => {
+            this.onUnmounted();
+        });
+
+        onBeforeUnmount(() => {
+            Arr.each(this.signals, (v : any, k : string) => {
+                this.offSignal(k);
+            });
+        });
+
+        return this;
+    }
+
+    onMounted()
+    {
+        //
+    }
+
+    onUnmounted()
+    {
+        //
+    }
+
+    dispose(fn : Function)
+    {
+        onUnmounted(() => {
+            Run.delay(fn, 2000);
+        });
+    }
+
+    pass(keys : any = [])
+    {
+        Arr.each(keys, (fn: string, key : string) => {
+            this.instance.ctx[key] = (...args : any[]) => this[fn](...args);
+        });
+    }
+
+    unpack()
+    {
+        return {
+            scope: this.scope,
+            el: this.el,
+            view: this.view,
+            data: this.data,
+            refs: this.refs
+        };
+    }
+
+    render()
+    {
+        return () => this.view.default();
+    }
+
+    has(key : string)
+    {
+        return Mix.isUndef(this.vals[key]);
+    }
+
+    empty(key : string)
+    {
+        if ( !isRef(this.vals[key]) ) {
+            return Mix.isEmpty(this.vals[key]);
+        }
+
+        return Mix.isEmpty(this.vals[key].value);
+    }
+
+    get(key : string, fallback : any = undefined)
+    {
+        if ( this.vals[key] === undefined ) {
+            return this.prop(key, fallback);
+        }
+
+        if ( !isRef(this.vals[key]) ) {
+            return this.vals[key] ?? fallback;
+        }
+
+        return this.vals[key].value;
+    }
+
+    set(key : string, value : any)
+    {
+        if ( !isRef(this.vals[key]) ) {
+            return this.vals[key] = value;
+        }
+
+        return this.vals[key].value = value;
+    }
+
+    update(key : string, value : any)
+    {
+        this.context.emit(`update:${key}`, ...[
+            this.set(key, value)
+        ]);
+
+        return this.get(key);
+    }
+
+    prop(key : string, fallback : any = null)
+    {
+        if ( !isRef(this.props[key]) ) {
+            return this.props[key] ?? fallback;
+        }
+
+        return this.props[key].value;
+    }
+
+    ref(key : string, fallback : any = null)
+    {
+        return this.refs[key] ?? fallback;
+    }
+
+    ncx(key : string)
+    {
+        if ( this.refs[key]?.ncx ) {
+            return this.refs[key].ncx;
+        }
+
+        return this.refs[key]?.value?._?.ncx;
+    }
+
+    rel(key : string)
+    {
+        if ( this.refs[key]?.value?.$el ) {
+            return this.refs[key].value.$el;
+        }
+
+        return this.refs[key]?.value;
+    }
+
+    dom(key : string)
+    {
+        if ( this.refs[key]?.value?.$el ) {
+            // @ts-ignore
+            return Dom.make(this.refs[key].value.$el);
+        }
+
+        // @ts-ignore
+        return Dom.make(this.refs[key]?.value);
+    }
+
+    emit(event : string, ...args : any[])
+    {
+        return this.context.emit(event, ...args);
+    }
+
+    injectRef(key : string | string[], fallback : any = null)
+    {
+        if ( Mix.isStr(key) ) {
+            // @ts-ignore
+            key = [key, key];
+        }
+
+        return this.refs[key[0]] = inject(key[1], fallback);
+    }
+
+    cloneProp(key : string, options : any = {})
+    {
+        this.vals[key] = ref(this.props[key]);
+
+        if ( !Mix.isPrim(this.vals[key].value) ) {
+            options.deep ??= true;
+        }
+
+        watch(() => this.props[key], (value) => {
+            this.set(key, value);
+        }, options);
+
+        return this;
+    }
+
+    linkProp(key : string | string[], source : any = null, freeze : boolean = false)
+    {
+        if ( Mix.isStr(key) ) {
+            // @ts-ignore
+            key = [key, key];
+        }
+
+        if ( source == null ) {
+            source = this.props;
+        }
+
+        if ( source.ncx?.vals ) {
+            source = source.ncx.vals;
+        }
+
+        if ( isRef(source[key[1]]) ) {
+            this.vals[key[0]] = source[key[1]];
+        }
+
+        const fn = () => {
+
+            const value = source[key[1]];
+
+            if ( !freeze ) {
+                return value;
+            }
+
+            return Object.freeze(value);
+        };
+
+        if ( !this.vals[key[0]] ) {
+            this.vals[key[0]] = computed(fn);
+        }
+
+        return this;
+    }
+
+    watchProp(key : string, cb : Function, options : any = {})
+    {
+        if ( !Mix.isPrim(this.vals[key]?.value) ) {
+            options.deep ??= true;
+        }
+
+        watch(() => this.props[key], (v) => {
+            cb(v);
+        }, options);
+
+        return this;
+    }
+
+    watchData(key : string, cb : Function, options : any = {})
+    {
+        if ( !Mix.isPrim(this.vals[key]?.value) ) {
+            options.deep ??= true;
+        }
+
+        watch(this.vals[key], (v) => {
+            cb(v);
+        }, options);
+
+        return this;
+    }
+
+    makeLinkData(key : string, source : any, cb : Function, options : any = {})
+    {
+        this.vals[key] = ref(cb());
+
+        watch(() => this.vals[source], () => {
+            this.vals[key].value = cb();
+        }, options);
+
+        return this;
+    }
+
+    makeLinkProp(key : string, source : any, cb : Function, options : any = {})
+    {
+        this.vals[key] = ref(cb());
+
+        watch(() => this.props[source], () => {
+            this.vals[key].value = cb();
+        }, options);
+
+        return this;
+    }
+
+    compData(key : string, cb : Function)
+    {
+        this.vals[key] = computed(() => {
+            return cb.call(this);
+        });
+
+        return this;
+    }
+
+    makeData(key : string, value : any = null)
+    {
+        this.vals[key] = ref(value);
+
+        return this;
+    }
+
+    exposeData(key : string)
+    {
+        this.instance.setupState = {
+            ...this.instance.setupState ?? {}, [key]: this.vals[key]
+        };
+
+        return this;
+    }
+
+    makeRef(key : string)
+    {
+        this.refs[key] = ref(null);
+
+        return this;
+    }
+
+    makeUID()
+    {
+        this.uid = this.prop('uid') ?? Hash.uuid();
+    }
+
+    passProps(value : any, keys : string[] = [])
+    {
+        Arr.each(keys, (key) => {
+            value[key] = this.get(key);
+        });
+
+        return value;
+    }
+
+    onSignal(event : string, cb : Function)
+    {
+        const uid = Hash.uuid();
+        Signal.bind(event, cb, { uid });
+        this.signals[uid] = event;
+    }
+
+    offSignal(uid : string)
+    {
+        if ( this.signals[uid] ) {
+            Signal.unbind(this.signals[uid], { uid });
+        }
+    }
+
+    fireSignal(event : string, ...args : any[])
+    {
+        Signal.fire(event, ...args);
+    }
+
+    applyClear()
+    {
+        const clearValue = Obj.clone(...[
+            this.data.clearValue
+        ]);
+
+        this.update('modelValue', clearValue);
+    }
+
+    get attrs()
+    {
+        return this.context.attrs;
+    }
+
+}
+
+export default ProtoController;

package/src/root/js/proto/ProtoData.ts

@@ -0,0 +1,108 @@
+import ProtoExtend from "./ProtoExtend.ts";
+import BaseData from "../data/BaseData.ts";
+import IconData from "../data/IconData.ts";
+import { ProtoController } from "../../index.ts";
+import { Arr, Mix } from "@kizmann/pico-js";
+
+export class ProtoData extends ProtoExtend([BaseData, IconData])
+{
+    /**
+     * @type {ProtoController}
+     */
+    scope : ProtoController;
+
+    constructor(scope : ProtoController)
+    {
+        super();
+
+        this.scope = scope;
+    }
+
+    classRoot(merge : string[] = []) : string[]
+    {
+        const { view } = this.scope;
+
+        const classList = [
+            view.bem
+        ];
+
+        if ( this.theme != null ) {
+            classList.push(`n-theme-${this.theme}`);
+        }
+
+        if ( this.size != null ) {
+            classList.push(`n-size-${this.size}`);
+        }
+
+        if ( this.type != null ) {
+            classList.push(`n-type-${this.type}`);
+        }
+
+        if ( this.$color != null ) {
+            classList.push(`n-color-${this.$color}`);
+        }
+
+        if ( this.load ) {
+            classList.push('n-load');
+        }
+
+        if ( this.superDisabled ) {
+            classList.push('n-disabled');
+        }
+
+        if ( this.clearable ) {
+            classList.push('n-clearable');
+        }
+
+        if ( this.icon && this.iconPosition ) {
+            classList.push(`n-icon-${this.iconPosition}`);
+        }
+
+        if ( typeof merge !== 'object' ) {
+            merge = [merge];
+        }
+
+        Arr.each(merge, (cls : string) => {
+            classList.push(cls.replace(':bem', view.bem));
+        });
+
+        return classList;
+    }
+
+    classPart(part : any, merge : string[] = []) : string[]
+    {
+        const { view } = this.scope;
+
+        const classList = [
+            //
+        ];
+
+        if ( !Mix.isEmpty(part) ) {
+            classList.push(`${view.bem}__${part}`);
+        }
+
+        if ( typeof merge !== 'object' ) {
+            merge = [merge];
+        }
+
+        Arr.each(merge, (cls : string) => {
+            classList.push(cls.replace(':bem', view.bem));
+        });
+
+        return classList;
+    }
+
+    get superDisabled() : boolean
+    {
+        const ncx = this.scope.ncx('form-item');
+
+        return this.scope.get('disabled') || ! (!ncx || ncx?.data.model);
+    }
+
+}
+
+export interface ProtoData extends BaseData, IconData {
+    //
+}
+
+export default ProtoData;

package/src/root/js/proto/ProtoExtend.ts

@@ -0,0 +1,20 @@
+import { Arr, Mix } from "@kizmann/pico-js";
+
+type Constructor = new (...args: any[]) => any;
+
+export const ProtoExtend: any = (values: Constructor[], construct: boolean = true): Constructor => {
+
+    let First: Constructor = class { };
+
+    if ( values.length && construct ) {
+        First = values[0];
+    }
+
+    Arr.each(values, (value: Constructor) => {
+        Mix.extend(First.prototype, value.prototype);
+    });
+
+    return First;
+}
+
+export default ProtoExtend;

package/src/root/js/proto/ProtoView.ts

@@ -0,0 +1,152 @@
+import { ProtoController, Styler } from "../../index.ts";
+import { Mix } from "@kizmann/pico-js";
+import { Obj } from "@kizmann/pico-js";
+import { h } from "vue";
+import { resolveComponent } from "vue";
+
+export class ProtoView
+{
+    /**
+     * @type {ProtoController}
+     */
+    scope : ProtoController;
+
+    /**
+     * @type {string}
+     */
+    declare bem : string;
+
+    constructor(scope : ProtoController)
+    {
+        this.scope = scope;
+    }
+
+    default() : any
+    {
+        return null;
+    }
+
+    slot(key : string = 'default', ...args : any[]) : any
+    {
+        const { slots } = this.scope.context;
+
+        if ( slots[key] == null ) {
+            return null;
+        }
+
+        return slots[key](...args);
+    }
+
+    icon(props : any = undefined) : any
+    {
+        if ( ! Mix.isObj(props) ) {
+            props = { icon: props };
+        }
+
+        if ( !props.icon ) {
+            return null;
+        }
+
+        const [icon, classList] = [
+            Obj.pluck(props, 'icon', ''),
+            Obj.pluck(props, 'class', [])
+        ];
+
+        props.class = [
+            `n-icon ${icon}`, ...classList
+        ].join(' ');
+
+        return h('i', props);
+    }
+
+    comp(el : any, props : any = null, slot : any = null) : any
+    {
+        let component = null;
+
+        try {
+            component = resolveComponent(el);
+        } catch (e) {
+            console.error(`Failed to resolve component: ${el}`);
+        }
+
+        if ( component == null ) {
+            return null;
+        }
+
+        return h(component, props, slot);
+    }
+
+    div(props : any = 'div', slot : any = null, type : string = 'div') : any
+    {
+        const { data } = this.scope;
+
+        if ( ! Mix.isObj(props) ) {
+            props = { name: props };
+        }
+
+        let [name, classList] = [
+            Obj.pluck(props, 'name', null),
+            Obj.pluck(props, 'class', [])
+        ];
+
+        props.class = data.classPart(...[
+            name, classList
+        ]);
+
+        return h(type, props, slot);
+    }
+
+    clear(value : any = true) : any
+    {
+        let { scope, data } = this.scope;
+
+        if ( Mix.isEmpty(value) ) {
+            return null;
+        }
+
+        if ( !scope.get('clearable') ) {
+            return null;
+        }
+
+        let config : any = {
+            name: 'clear', class: ['n-form-clear']
+        };
+
+        config.onClick = () => {
+            scope.applyClear();
+            scope.set('search', '');
+            scope.ref('input')?.value?.focus();
+        };
+
+        return this.div(config, [
+            this.icon(Styler.icon('times'))
+        ]);
+    }
+
+    angle() : any
+    {
+        let config = {
+            name: 'angle', class: ['n-form-angle']
+        };
+
+        return this.div(config, [
+            this.icon(Styler.icon('angle-down'))
+        ]);
+    }
+
+    empty(options : any = {}) : any
+    {
+        const { scope } = this.scope;
+
+        const props = {
+            ...options, emptyText: scope.get('emptyText')
+        };
+
+        return this.div('empty', [
+            this.comp('n-empty-icon', props)
+        ]);
+    }
+
+}
+
+export default ProtoView;

package/src/scrollbar/NScrollbar.md

@@ -0,0 +1,7 @@
+### Good to know
+
+- First and last item in virtualbar are always visible, this is for components like `NPreview` because when you register the elements you dont know how many items will be in the list. When doing this you can just jump to first or last and then the other items will be loaded.
+
+### Ideas
+
+- Check for travel distance and run full calculation function only every 50px