@kizmann/nano-ui 3.0.0 → 3.0.1

package/src/table/js/table-filter/NTableFilterString.ts

@@ -23,7 +23,7 @@ export const NTableFilterString = ({ model, comp, table }) => {
         Obj.set(model, 'value', value);
     };
 
-    const value = comp('n-form-item', valueProps, () => [
+    const value = comp('n-form-item', null, () => [
         comp('n-input', valueProps)
     ])
 

package/src/tabs/js/tabs/NTabsController.ts

@@ -2,7 +2,7 @@ import { provide, SetupContext } from "vue";
 import { GroupController } from "../../../root/index.ts";
 import { NTabsView } from "./NTabsView.ts";
 import { NTabsData } from "./NTabsData.ts";
-import { Arr, Num, Run } from "@kizmann/pico-js";
+import { Arr, Mix, Num, Run } from "@kizmann/pico-js";
 
 
 export class NTabsController extends GroupController
@@ -108,6 +108,10 @@ export class NTabsController extends GroupController
 
     updateIndicator()
     {
+        if ( this.childs.length < 2 ) {
+            return;
+        }
+
         const [el, pl] = [
             this.dom('indicator'), this.dom('indicator').parent()
         ];

package/src/tabs/js/tabs/NTabsView.ts

@@ -34,6 +34,10 @@ export class NTabsView extends ProtoView
     {
         const { scope, data } = this.scope;
 
+        if ( scope.childs.length < 2 ) {
+            return null;
+        }
+
         const items = Arr.each(data.sorted, (item: any) => {
             return item.view.header(scope);
         });

package/src/tabs/js/tabs-item/NTabsItemController.ts

@@ -2,7 +2,7 @@ import { provide, SetupContext } from "vue";
 import { ProtoController } from "../../../root/index.ts";
 import { NTabsItemView } from "./NTabsItemView.ts";
 import { NTabsItemData } from "./NTabsItemData.ts";
-import { Arr, Mix } from "@kizmann/pico-js";
+import { Arr, Mix, Run } from "@kizmann/pico-js";
 
 
 export class NTabsItemController extends ProtoController
@@ -52,6 +52,10 @@ export class NTabsItemController extends ProtoController
             'tabs', 'NTabs'
         ]);
 
+        this.injectRef([
+            'tabs-item', 'NTabsItem'
+        ]);
+
         const tabs = this.ncx('tabs');
 
         if ( this.data.scrollbar === null ) {
@@ -110,9 +114,19 @@ export class NTabsItemController extends ProtoController
         return Arr.has(tabs.data.value, data.name);
     }
 
-    superOpen() : void
+    superOpen(cb : Function = null) : void
     {
-        this.ncx('tabs')?.superToggle(this.data.name);
+        const { name } = this.data;
+
+        const [tabs, parent] = [
+            this.ncx('tabs'), this.ncx('tabs-item')
+        ];
+
+        const fn = () => {
+            tabs?.superToggle(name), cb && Run.frame(cb);
+        };
+
+        parent ? parent.superOpen(fn) : fn();
     }
 
 }

package/src/tabs/js/tabs-item/NTabsItemView.ts

@@ -20,26 +20,29 @@ export class NTabsItemView extends ProtoView
     {
         let { scope, data } = this.scope;
 
-        if ( ! scope.isActive() ) {
+        if ( !scope.isActive() ) {
             return null;
         }
 
-        if ( ! data.init ) {
+        if ( !data.init ) {
             scope.set('init', true);
         }
 
         let props : any = {
             class: data.classList,
-            wrapClass: `${this.bem}__wrap`,
         };
 
+        if ( data.scrollbar ) {
+            props.wrapClass = `${this.bem}__wrap`;
+        }
+
         const tabs = scope.ncx('tabs');
 
         if ( tabs.data.float ) {
             props.class.push('n-float');
         }
 
-        if ( ! scope.isVisible() ) {
+        if ( !scope.isVisible() ) {
             props.style = 'display: none;';
         }
 
@@ -47,7 +50,7 @@ export class NTabsItemView extends ProtoView
             return this.slot('default');
         };
 
-        if ( ! data.scrollbar ) {
+        if ( !data.scrollbar ) {
             return h('div', props, slot());
         }
 
@@ -56,7 +59,7 @@ export class NTabsItemView extends ProtoView
         ]);
     }
 
-    header(tabs: NTabsController) : any
+    header(tabs : NTabsController) : any
     {
         const { data } = this.scope
 
@@ -73,7 +76,7 @@ export class NTabsItemView extends ProtoView
         };
 
         props.onDragenter = () => {
-            if( tabs.data.dragOpen ) {
+            if ( tabs.data.dragOpen ) {
                 tabs.superToggle(data.name);
             }
         };
@@ -84,7 +87,7 @@ export class NTabsItemView extends ProtoView
         ]);
     }
 
-    header_icon(tabs: NTabsController) : any
+    header_icon(tabs : NTabsController) : any
     {
         const { data } = this.scope;
 
@@ -97,7 +100,7 @@ export class NTabsItemView extends ProtoView
         ]);
     }
 
-    header_label(tabs: NTabsController) : any
+    header_label(tabs : NTabsController) : any
     {
         const { data } = this.scope;
 

package/src/transfer/js/transfer/NTransferController.ts

@@ -31,7 +31,9 @@ export class NTransferController extends ProtoController
             new NTransferData(this),
         ];
 
-        this.setup();
+        if ( this.constructor.name === 'NTransferController' ) {
+            this.setup();
+        }
     }
 
     setup()
@@ -45,6 +47,7 @@ export class NTransferController extends ProtoController
             .makeRef('target');
 
         this.cloneProp('modelValue');
+        this.cloneProp('options');
 
         this
             .makeData('source')
@@ -52,12 +55,10 @@ export class NTransferController extends ProtoController
             .makeData('target')
             .makeData('targetSearch', '');
 
-        this.watchData('modelValue', () => {
-            this.updateSource();
-            this.updateTarget();
-        });
+        this.updateSource();
+        this.updateTarget();
 
-        this.watchProp('options', () => {
+        this.watchData('modelValue', () => {
             this.updateSource();
             this.updateTarget();
         });
@@ -70,12 +71,16 @@ export class NTransferController extends ProtoController
             this.updateTarget();
         });
 
-        this.updateSource();
-        this.updateTarget();
-
         return this;
     }
 
+    onMounted() {
+        this.watchData('options', () => {
+            this.updateSource();
+            this.updateTarget();
+        });
+    }
+
     updateSource()
     {
         const { data } = this.scope;
@@ -116,7 +121,6 @@ export class NTransferController extends ProtoController
 
     moveToSource(item : any)
     {
-        console.log(item);
         const { uniqueProp } = this.data;
 
         const result = Arr.clone(...[

package/src/transfer/js/transfer/NTransferView.ts

@@ -117,7 +117,7 @@ export class NTransferView extends ProtoView
         let slots : any = {};
 
         slots.default = ({ item }) => {
-            return Obj.get(item, 'label');
+            return Obj.get(item, data.labelProp);
         };
 
         const header = this.source_header();
@@ -187,7 +187,7 @@ export class NTransferView extends ProtoView
         let slots : any = {};
 
         slots.default = ({ item }) => {
-            return Obj.get(item, 'label', 'foobar');
+            return Obj.get(item, data.labelProp);
         };
 
         const header = this.target_header();

package/src/visuals/css/message.scss

@@ -0,0 +1,99 @@
+@use "../../root/css/helpers" as *;
+
+.n-message {
+    position: relative;
+    overflow: hidden;
+    border-radius: size('base-rad');
+    background: color('base-color', 0.3);
+    transition: max-height 0.2s;
+    max-height: var(--n-message-height);
+}
+
+.n-message__wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    height: var(--n-message-height);
+    padding: 0 size('base-pad', 'calc($ * 0.5)') 0 size('base-pad');
+}
+
+
+.n-message:not(.n-active) {
+    max-height: 0 !important;
+}
+
+.n-message:before {
+    content: '\00a0';
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 4px;
+    height: 100%;
+    background: color('base-color');
+}
+
+.n-message__symbol,
+.n-message__close,
+.n-message__body {
+    display: inline-flex;
+    min-height: size('base-hgt-inline', 'calc($ * 2.5)');
+}
+
+.n-message__body {
+    flex: 1 1 auto;
+    align-items: flex-start;
+    justify-content: center;
+    flex-direction: column;
+    padding: size('base-pad');
+}
+
+.n-message__symbol,
+.n-message__close {
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 size('base-pad', 'calc($ * 0.5)');
+}
+
+.n-message.with-title .n-message__symbol,
+.n-message.with-title .n-message__close {
+    //padding: 0 size('base-pad', 'calc($ * 0.5)');
+}
+
+.n-message__symbol {
+    margin-left: 4px;
+}
+
+.n-message__symbol .n-icon {
+    color: color('base-color-fg-20');
+    font-size: 1.2em;
+}
+
+.n-message__close {
+    cursor: pointer;
+    flex: 0 0 auto;
+}
+
+.n-message__close a {
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: size('base-hgt-inline');
+    height: size('base-hgt-inline');
+}
+
+.n-message__close .n-icon {
+    color: color('base-color-fg-20');
+    font-size: size('base-fnt-icon');
+}
+
+.n-message__title {
+    font-size: 1.1em;
+    color: color('base-color-fg-20');
+}
+
+.n-message__text {
+    color: color('text', 0.75);
+}

package/src/visuals/css/progress.scss

@@ -0,0 +1,39 @@
+@use "../../root/css/helpers" as *;
+
+@keyframes NProgress {
+    0% {
+        background-position: -200% 0;
+    }
+    50% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+.n-progress {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: size('base-hgt-inline');
+    background: color('gray-50', 0.15);
+    border-radius: size('base-rad');
+}
+
+.n-progress__bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--n-progress-width, 0%);
+    height: 100%;
+    background-size: 200% 100%;
+    background-position: -200% 0;
+    background-repeat: no-repeat;
+    background-color: color('base-color-bg-10');
+    background-image: linear-gradient(90deg, color('base-color-bg-10') 0%, color('base-color-fg-20') 50%, color('base-color-bg-10') 100%);
+}
+
+.n-progress.n-active .n-progress__bar {
+    animation: NProgress 2s linear infinite;
+}

package/src/visuals/index.scss

@@ -1,2 +1,4 @@
 @forward "./css/tag";
 @forward "./css/rating";
+@forward "./css/message";
+@forward "./css/progress";

package/src/visuals/index.ts

@@ -1,8 +1,12 @@
 import { App } from "vue";
 import NTag from "./js/tag/NTag.ts";
 import NRating from "./js/rating/NRating.ts";
+import NMessage from "./js/message/NMessage.ts";
+import NProgress from "./js/progress/NProgress.ts";
 
 export default function (App : App) {
     App.component(NTag.name, NTag);
     App.component(NRating.name, NRating);
+    App.component(NMessage.name, NMessage);
+    App.component(NProgress.name, NProgress);
 }

package/src/visuals/js/message/NMessage.ts

@@ -0,0 +1,65 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NMessageController } from "./NMessageController.ts";
+
+export const NMessageProps = {
+
+    ...Props.Size,
+    ...Props.Type,
+    ...Props.Icon,
+    ...Props.IconPositionBefore,
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    modelValue: {
+        type: [Boolean], default: true
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    closable: {
+        type: [Boolean], default: false
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    title: {
+        type: [String], default: null
+    },
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NMessage',
+
+    /**
+     * @type {typeof NMessageProps}
+     */
+    props: NMessageProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        //
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NMessageController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/visuals/js/message/NMessageController.ts

@@ -0,0 +1,96 @@
+import { SetupContext } from "vue";
+import { ProtoController } from "../../../root/index.ts";
+import { NMessageView } from "./NMessageView.ts";
+import { NMessageData } from "./NMessageData.ts";
+import { Run } from "@kizmann/pico-js";
+
+
+export class NMessageController extends ProtoController
+{
+    /**
+     * @type {NMessageController}
+     */
+    declare scope : NMessageController;
+
+    /**
+     * @type {NMessageData}
+     */
+    declare data: NMessageData;
+
+    /**
+     * @type {NMessageView}
+     */
+    declare view: NMessageView;
+
+    /**
+     * @type {ResizeObserver}
+     */
+    observer : ResizeObserver;
+
+    /**
+     * @type {boolean}
+     */
+    transition : boolean = false;
+
+    constructor(props:any, context:SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NMessageView(this),
+            new NMessageData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this.makeRef('el');
+        this.cloneProp('modelValue');
+
+        return this;
+    }
+
+    onMounted()
+    {
+        this.dom('el').on('transitionrun', () => {
+            this.transition = true;
+        });
+
+        this.dom('el').on('transitionend', () => {
+            Run.frame(() => this.transition = false);
+        });
+
+        this.observer = new ResizeObserver(() => {
+            this.applyMaxHeight();
+        });
+
+        this.observer.observe(this.rel('el'))
+    }
+
+    onUnmounted()
+    {
+        this.observer.disconnect();
+    }
+
+    applyMaxHeight() : void
+    {
+        const height = this.dom('el').actual((el : any) => {
+            return el.clientHeight;
+        });
+
+        if ( ! height || this.transition ) {
+            return;
+        }
+
+        this.dom('el').style({
+            '--n-message-height': height + 'px',
+        });
+    }
+
+}
+
+export default NMessageController;

package/src/visuals/js/message/NMessageData.ts

@@ -0,0 +1,43 @@
+import { ProtoData } from "../../../root/index.ts";
+import NMessageController from "./NMessageController.ts";
+
+export class NMessageData extends ProtoData
+{
+    /**
+     * @type {NMessageController}
+     */
+    declare scope : NMessageController;
+
+    get classList() : string[]
+    {
+        let classList = [];
+
+        if ( this.model ) {
+            classList.push('n-active');
+        }
+
+        if ( this.title ) {
+            classList.push('with-title');
+        }
+
+        return this.classRoot(classList);
+    }
+
+    get model() : boolean
+    {
+        return this.scope.get('modelValue');
+    }
+
+    get title() : string
+    {
+        return this.scope.get('title');
+    }
+
+    get closable() : boolean
+    {
+        return this.scope.get('closable');
+    }
+
+}
+
+export default NMessageData;

package/src/visuals/js/message/NMessageView.ts

@@ -0,0 +1,101 @@
+import { h } from "vue";
+import { ProtoView, Styler } from "../../../root/index.ts";
+import { NMessageController } from "./NMessageController.ts";
+
+export class NMessageView extends ProtoView
+{
+    /**
+     * @type {NMessageController}
+     */
+    declare scope : NMessageController;
+
+    /**
+     * @type {string}
+     */
+    bem : string = 'n-message';
+
+    default() : any
+    {
+        let { scope, data } = this.scope;
+
+        let props : any = {
+            ref: scope.ref('el'),
+            class: data.classList,
+        };
+
+        return h('div', props, [
+            this.wrapper()
+        ]);
+    }
+
+    wrapper() : any
+    {
+        return this.div('wrapper', [
+            this.symbol(), this.body(), this.close()
+        ]);
+    }
+
+    symbol() : any
+    {
+        let { scope, data } = this.scope;
+
+        if ( ! data.icon ) {
+            return null;
+        }
+
+        return this.div('symbol', [
+            this.icon(data.icon)
+        ]);
+    }
+
+    body() : any
+    {
+        return this.div('body', [
+            this.title(), this.text()
+        ]);
+    }
+
+    title() : any
+    {
+        let { scope, data } = this.scope;
+
+        if ( ! data.title ) {
+            return null;
+        }
+
+        return this.div('title', [
+            h('span', null, [data.title])
+        ]);
+    }
+
+    text() : any
+    {
+        return this.div('text', [
+            this.slot('default')
+        ]);
+    }
+
+    close() : any
+    {
+        const { scope, data } = this.scope;
+
+        if ( ! data.closable ) {
+            return null;
+        }
+
+        let props : any = {
+            href: 'javascript:void(0);'
+        };
+
+        props.onPointerdown = (e : any) => {
+            scope.update('modelValue', false);
+        };
+
+        return this.div('close', [
+            h('a', props, [this.icon(Styler.icon('times'))])
+        ]);
+    }
+
+}
+
+export default NMessageView;