@kizmann/nano-ui 3.0.0 → 3.0.1

package/src/info/css/info-field.scss

@@ -2,9 +2,9 @@
 
 .n-info-cell {
     position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: stretch;
+    //display: flex;
+    //flex-direction: column;
+    //align-items: stretch;
+    //justify-content: stretch;
     font-size: size('base-fnt');
 }

package/src/info/js/info/NInfoView.ts

@@ -1,5 +1,4 @@
 import { h } from "vue";
-import { Arr } from "@kizmann/pico-js";
 import { ProtoView } from "../../../root/index.ts";
 import { NInfoController } from "./NInfoController.ts";
 
@@ -44,9 +43,7 @@ export class NInfoView extends ProtoView
             return this.div('body', [this.slot()]);
         }
 
-        return this.div('empty', [
-            this.empty({ inline: false })
-        ]);
+        return this.empty({ inline: false })
     }
 
 }

package/src/info/js/info-column/NInfoColumnView.ts

@@ -58,15 +58,19 @@ export class NInfoColumnView extends ProtoView
             class: ['n-info-cell']
         };
 
+        const item = Obj.get(...[
+            scope.ncx('info'), ['data', 'item'], {}
+        ]);
+
         const input = Obj.get(...[
-            scope.ncx('info').data.item, data.prop
+            item, data.prop
         ]);
 
         const cell = {
             bem: 'n-info-cell',
             props: props,
             input: input,
-            item: { item: data.item },
+            node: { item },
             column: scope,
             info: scope.ncx('info'),
             comp: this.comp,

package/src/input/css/input-number.scss

@@ -50,6 +50,11 @@
     justify-content: center;
 }
 
+.n-input-number .n-input-number__increase i,
+.n-input-number .n-input-number__decrease i {
+    font-size: size('base-fnt-icon');
+}
+
 .n-input-number .n-input-number__clear {
     display: none;
 }

package/src/input/js/input-number/NInputNumberController.ts

@@ -1,5 +1,5 @@
 import { SetupContext } from "vue";
-import { Mix } from "@kizmann/pico-js";
+import { Locale, Mix } from "@kizmann/pico-js";
 import { ProtoController } from "../../../root/index.ts";
 import { NInputNumberData } from "./NInputNumberData.ts";
 import { NInputNumberView } from "./NInputNumberView.ts";
@@ -57,17 +57,17 @@ export class NInputNumberController extends ProtoController
         }
 
         const match = input.match(...[
-            /[0-9]+([.,][0-9]+)?/
+            /[\s.,0-9]+/
         ]);
 
         let value = data.model;
 
         if ( match && data.precision > 0 ) {
-            value = Mix.num(match[0]);
+            value = Locale.num(match[0]);
         }
 
         if ( match && data.precision < 1 ) {
-            value = Mix.int(match[0]);
+            value = Locale.int(match[0]);
         }
 
         if ( value < this.data.min ) {

package/src/input/js/textarea/NTextareaView.ts

@@ -1,5 +1,5 @@
 import { h } from "vue";
-import { Obj } from "@kizmann/pico-js";
+import { Mix, Obj } from "@kizmann/pico-js";
 import { ProtoView } from "../../../root/index.ts";
 import { NTextareaController } from "./NTextareaController.ts";
 
@@ -61,14 +61,14 @@ export class NTextareaView extends ProtoView
             props.maxLength = data.maxLength;
         }
 
-        let currentRows = (data.model.match(/\n/g) || []).length + 1;
+        let currentRows = (Mix.str(data.model).match(/\n/g) || []).length + 1;
 
         if ( data.autoRows && props.rows < currentRows ) {
             props.rows = currentRows <= data.maxRows ? currentRows : data.maxRows;
         }
 
         props.onInput = (e : any) => {
-            data.model = e.target.value;
+            scope.update('modelValue', e.target.value);
             scope.emit('input', e);
         };
 

package/src/modal/css/modal.scss

@@ -122,6 +122,10 @@ body.n-backdrop {
     justify-content: stretch;
 }
 
+.n-modal__content {
+    min-height: 0;
+}
+
 .n-modal .n-modal__wrap {
     flex: 1 1 auto;
 }

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

@@ -1,4 +1,4 @@
-import { SetupContext, provide } from "vue";
+import { SetupContext, provide, onUnmounted } from "vue";
 import { Dom } from "@kizmann/pico-js";
 import { ProtoController } from "../../../root/index.ts";
 import { NDrawerView } from "./NDrawerView.ts";
@@ -37,7 +37,9 @@ export class NDrawerController extends ProtoController
             new NDrawerData(this),
         ];
 
-        this.setup();
+        if ( this.constructor.name === 'NDrawerController' ) {
+            this.setup();
+        }
     }
 
     setup()
@@ -52,6 +54,10 @@ export class NDrawerController extends ProtoController
 
         provide('NModal', this.instance);
 
+        onUnmounted(() => {
+            this.el?.remove();
+        });
+
         return this;
     }
 
@@ -78,11 +84,19 @@ export class NDrawerController extends ProtoController
             this.onClose();
         });
 
+        if ( data.model ) {
+            this.modal.open();
+        }
+
         Dom.find(el).appendTo(document.body);
     }
 
     onUnmounted()
     {
+        if ( this.modal.visible ) {
+            this.modal.close(true, true);
+        }
+
         NModalHandler.remove({ uid: this.uid });
     }
 
@@ -108,7 +122,6 @@ export class NDrawerController extends ProtoController
         this.modal.close(forceClose);
     }
 
-
 }
 
 export default NDrawerController;

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

@@ -89,6 +89,10 @@ export class NModalElement
 
     onMousedown(event : any)
     {
+        if ( event.which !== 1 ) {
+            return;
+        }
+
         let { src, tgt } = this.getEventEls(event);
 
         if ( !this.visible && !tgt && !src ) {
@@ -132,6 +136,16 @@ export class NModalElement
 
     state(state : any)
     {
+        const { uid } = this.options;
+
+        const chain = Arr.last(Pointer.chains, [
+            uid
+        ]);
+
+        if ( ! state && chain[0] !== uid ) {
+            return;
+        }
+
         if ( !this.visible && state ) {
             this.open();
         }

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

@@ -2,6 +2,11 @@ import { Arr, Dom, Mix } from "@kizmann/pico-js";
 import { Pointer } from "../../../root/index.ts";
 import NModalElement from "./NModalElement.ts";
 
+globalThis.NModalIgnore = [
+    '.fr-popup',
+    '.fr-tooltip',
+];
+
 export class NModalHandler
 {
     /**
@@ -40,6 +45,14 @@ export class NModalHandler
 
     static mousedown(event : any)
     {
+        const ignore = Arr.each(globalThis.NModalIgnore, (selector : string) => {
+            return !! Dom.find(event.target).inside(selector);
+        });
+
+        if ( Arr.has(ignore, true) ) {
+            return;
+        }
+
         Arr.each(this.modals, (modal : NModalElement) => {
             modal.onMousedown(event);
         });

package/src/modal/js/modal/NModal.ts

@@ -24,6 +24,13 @@ export const NModalProps = {
         type: [Boolean], default: true
     },
 
+    /**
+     * @type {PropType<boolean>}
+     */
+    keep: {
+        type: [Boolean], default: false
+    },
+
     /**
      * @type {PropType<boolean>}
      */

package/src/modal/js/modal/NModalController.ts

@@ -1,4 +1,4 @@
-import { SetupContext, provide } from "vue";
+import { SetupContext, provide, onUnmounted } from "vue";
 import { Dom } from "@kizmann/pico-js";
 import { ProtoController } from "../../../root/index.ts";
 import { NModalView } from "./NModalView.ts";
@@ -37,7 +37,9 @@ export class NModalController extends ProtoController
             new NModalData(this),
         ];
 
-        this.setup();
+        if ( this.constructor.name === 'NModalController' ) {
+            this.setup();
+        }
     }
 
     setup()
@@ -54,6 +56,10 @@ export class NModalController extends ProtoController
 
         provide('NModal', this.instance);
 
+        onUnmounted(() => {
+            this.el?.remove();
+        });
+
         return this;
     }
 
@@ -78,11 +84,23 @@ export class NModalController extends ProtoController
             this.onClose();
         });
 
+        if ( data.model ) {
+            this.modal.open();
+        }
+
+        this.watchProp('modelValue', (value : boolean) => {
+            value ? this.modal.open() : this.modal.close();
+        });
+
         Dom.find(el).appendTo(document.body);
     }
 
     onUnmounted()
     {
+        if ( this.modal.visible ) {
+            this.modal.close(true, true);
+        }
+
         NModalHandler.remove(this.modal);
     }
 

package/src/modal/js/modal/NModalData.ts

@@ -1,5 +1,6 @@
 import { ProtoData } from "../../../root/index.ts";
 import { NModalController } from "./NModalController.ts";
+import { Mix } from "@kizmann/pico-js";
 
 export class NModalData extends ProtoData
 {
@@ -24,6 +25,11 @@ export class NModalData extends ProtoData
         return this.scope.get('modelValue');
     }
 
+    get keep() : boolean
+    {
+        return this.scope.get('keep');
+    }
+
     get listen() : boolean
     {
         return this.scope.get('listen');
@@ -39,16 +45,26 @@ export class NModalData extends ProtoData
         return this.scope.get('scrollbar');
     }
 
-    get width() : number
+    get width() : number | string
     {
         return this.scope.get('width');
     }
 
-    get height() : number
+    get safeWidth() : string
+    {
+        return Mix.isNum(this.width) ? this.width + 'px' : Mix.str(this.width);
+    }
+
+    get height() : number | string
     {
         return this.scope.get('height');
     }
 
+    get safeHeight() : string
+    {
+        return Mix.isNum(this.height) ? this.height + 'px' : Mix.str(this.height);
+    }
+
     get target() : any
     {
         return this.scope.get('target');

package/src/modal/js/modal/NModalView.ts

@@ -36,28 +36,26 @@ export class NModalView extends ProtoView
     {
         const { scope, data } = this.scope;
 
-        if ( !data.model ) {
+        if ( !data.keep && !data.model ) {
             return null;
         }
 
         const props : any = {
-            name: 'frame',
+            name: 'frame', style: {}
         };
 
-        let style = [];
-
         if ( data.width ) {
-            style.push(`width: ${data.width}px;`);
+            props.style.width = data.safeWidth;
         }
 
         if ( data.height ) {
-            style.push(`height: ${data.height}px;`);
+            props.style.height = data.safeHeight;
         }
 
         const { slots } = this.scope.context;
 
         if ( slots.raw ) {
-            return slots.raw();
+            return slots.raw({ props });
         }
 
         const html = [];
@@ -74,7 +72,7 @@ export class NModalView extends ProtoView
             html.push(this.div('footer', this.slot('footer')));
         }
 
-        return this.div({ ...props, style: style.join(' ') }, html);
+        return this.div(props, html);
     }
 
     content() : any
@@ -85,7 +83,7 @@ export class NModalView extends ProtoView
             class: data.classPart('content')
         };
 
-        if ( ! data.scrollbar ) {
+        if ( !data.scrollbar ) {
             return h('div', props, this.slot('default'));
         }
 

package/src/popover/css/popover.scss

@@ -252,7 +252,8 @@
     padding: size('base-pad-vertical') size('base-pad');
 }
 
-.n-popover .n-popover__body {
+.n-popover .n-popover__body:not(.n-scrollbar),
+.n-popover .n-popover__body.n-scrollbar > .n-scrollbar-content > .n-scrollbar__wrap {
     padding: size('base-pad-vertical') size('base-pad');
 }
 
@@ -276,17 +277,11 @@
     margin: 0 size('base-pad', 'calc($ * -1)');
 }
 
-.n-popover-option .n-image {
-    width: size('base-pad', 'calc($ * 2)');
-    height: size('base-pad', 'calc($ * 2)');
-}
-
-.n-popover-option .n-image--before,
-.n-popover-option .n-icon--before {
+.n-popover-option.n-icon-before .n-icon {
     margin-right: size('base-pad');
 }
 
-.n-popover-option .n-image--after,
-.n-popover-option .n-icon--after {
+.n-popover-option.n-icon-after .n-icon {
     margin-left: size('base-pad');
 }
+

package/src/popover/js/handler/NPopoverElement.ts

@@ -152,6 +152,10 @@ export class NPopoverElement
             return this.onContext(event);
         }
 
+        if ( event.which !== 1 ) {
+            return;
+        }
+
         let { src, tgt } = this.getEventEls(event);
 
         if ( !this.visible && !tgt && !src ) {

package/src/popover/js/popover/NPopover.ts

@@ -45,6 +45,13 @@ export const NPopoverProps = {
         type: [Boolean], default: false
     },
 
+    /**
+     * @type {PropType<boolean>}
+     */
+    scrollbar: {
+        type: [Boolean], default: false
+    },
+
     /**
      * @type {PropType<boolean>}
      */

package/src/popover/js/popover/NPopoverController.ts

@@ -1,4 +1,4 @@
-import { SetupContext, onBeforeUnmount, onMounted, provide } from "vue";
+import { SetupContext, onUnmounted, onMounted, provide } from "vue";
 import { Dom } from "@kizmann/pico-js";
 import { ProtoController } from "../../../root/index.ts";
 import { NPopoverView } from "./NPopoverView.ts";
@@ -49,6 +49,10 @@ export class NPopoverController extends ProtoController
 
         provide('NPopover', this.instance);
 
+        onUnmounted(() => {
+            this.el?.remove();
+        });
+
         return this;
     }
 
@@ -83,7 +87,11 @@ export class NPopoverController extends ProtoController
 
     onUnmounted()
     {
-        NPopoverHandler.remove({ uid: this.uid });
+        if ( this.popel.visible ) {
+            this.popel.close(true, true);
+        }
+
+        NPopoverHandler.remove(this);
     }
 
     onOpen()

package/src/popover/js/popover/NPopoverData.ts

@@ -24,6 +24,11 @@ export class NPopoverData extends ProtoData
         return this.scope.get('modelValue');
     }
 
+    get scrollbar() : boolean
+    {
+        return this.scope.get('scrollbar');
+    }
+
     get width() : number
     {
         return this.scope.get('width');

package/src/popover/js/popover/NPopoverView.ts

@@ -28,11 +28,11 @@ export class NPopoverView extends ProtoView
         }
 
         return h('div', props, [
-            this.body(),
+            this.frame(),
         ]);
     }
 
-    body() : any
+    frame() : any
     {
         const { data } = this.scope;
 
@@ -61,7 +61,7 @@ export class NPopoverView extends ProtoView
         }
 
         if ( slots.default ) {
-            html.push(this.div('body', this.slot('default')));
+            html.push(this.body());
         }
 
         if ( slots.footer ) {
@@ -71,6 +71,25 @@ export class NPopoverView extends ProtoView
         return this.div(props, html);
     }
 
+    body() : any
+    {
+        const { data } = this.scope;
+
+        const slots = [
+            this.slot('default')
+        ];
+
+        if ( ! data.scrollbar ) {
+            return this.div('body', slots)
+        }
+
+        let props : any = {
+            class: data.classPart('body')
+        };
+
+        return this.comp('n-scrollbar', props, () => slots);
+    }
+
 }
 
 export default NPopoverView;

package/src/popover/js/popover-panel/NPopoverPanelController.ts

@@ -30,7 +30,9 @@ export class NPopoverPanelController extends ProtoController
             new NPopoverPanelData(this),
         ];
 
-        this.setup();
+        if ( this.constructor.name === 'NPopoverPanelController' ) {
+            this.setup();
+        }
     }
 
     setup()

package/src/preview/css/preview.scss

@@ -196,12 +196,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: size('base-fnt');
-    color: color('white', 0.7);
-}
-
-.n-preview.n-preview-image .n-preview__title span {
-    color: color('white');
-    text-shadow: 0 0 6px color('shadow', 0.7);
 }
 
 .n-preview__meta li {

package/src/preview/js/handler/NPreviewHandler.ts

@@ -121,12 +121,12 @@ export class NPreviewHandler
             this.root.addClass('n-multi');
         }
 
-        const zIndex = Pointer.zindex();
-
         Pointer.prevent(...[
             this.uid, 'preview', this.uid
         ]);
 
+        const zIndex = Pointer.zindex();
+
         this.root.style({
             'z-index': zIndex
         });
@@ -164,7 +164,7 @@ export class NPreviewHandler
     static render(): [Dom, Dom]
     {
         const root = Dom.make('div', {
-            class: 'n-preview-modal',
+            class: 'n-preview-modal n-theme-dark',
         });
 
         const close = Dom.make('div', {

package/src/preview/js/preview/NPreview.ts

@@ -8,7 +8,7 @@ export const NPreviewProps = {
     ...Props.Load,
     ...Props.Size,
     ...Props.Type,
-    ...Props.ThemeDark,
+    ...Props.ThemeNone,
 
     /**
      * @type {PropType<any>}
@@ -49,7 +49,7 @@ export const NPreviewProps = {
      * @type {PropType<string>}
      */
     fit: {
-        type: [String], default: 'cover'
+        type: [String], default: 'contain'
     },
 
     /**

package/src/preview/js/preview/NPreviewController.ts

@@ -1,6 +1,6 @@
 import { SetupContext, provide } from "vue";
 import { Dom, Run } from "@kizmann/pico-js";
-import { ProtoController } from "../../../root/index.ts";
+import { Pointer, ProtoController } from "../../../root/index.ts";
 import { NPreviewView } from "./NPreviewView.ts";
 import { NPreviewData } from "./NPreviewData.ts";
 import NPreviewHandler from "../handler/NPreviewHandler.ts";
@@ -45,12 +45,9 @@ export class NPreviewController extends ProtoController
 
         this.makeUID();
 
-        this
-            .makeRef('preview')
-            .makeRef('portal');
-
-        this
-            .makeData('visible', false);
+        this.makeRef('preview');
+        this.makeRef('portal');
+        this.makeData('visible', false);
 
         this.watchProp('index', () => {
             this.onChange();
@@ -94,7 +91,9 @@ export class NPreviewController extends ProtoController
 
     openPreview()
     {
-        NPreviewHandler.open(this.preview);
+        Pointer.wait(() => {
+            NPreviewHandler.open(this.preview);
+        });
     }
 
     openPortal(el : Dom)

package/src/preview/js/preview/NPreviewData.ts

@@ -12,11 +12,18 @@ export class NPreviewData extends ProtoData
 
     get classList() : string[]
     {
-        let classList = [];
+        let classList = [
+            `${this.scope.view.bem}--${this.fit}`
+        ];
 
         return this.classRoot(classList);
     }
 
+    get fit() : string
+    {
+        return this.scope.get('fit');
+    }
+
     get index(): number
     {
         return this.scope.get('index');