@kizmann/nano-ui 3.0.0 → 3.0.1

package/src/scrollbar/js/virtualbar/NVirtualbarView.ts

@@ -1,11 +1,7 @@
 import { h, withMemo } from "vue";
 import { ProtoView } from "../../../root/index.ts";
 import { NVirtualbarController } from "./NVirtualbarController.ts";
-import { Arr } from "@kizmann/pico-js";
-
-const VirtualRow = () => {
-
-};
+import { Arr, Mix } from "@kizmann/pico-js";
 
 export class NVirtualbarView extends ProtoView
 {
@@ -73,7 +69,7 @@ export class NVirtualbarView extends ProtoView
         };
 
         return h('div', props, [
-            this.wrapper()
+            data.items.length ? this.wrapper() : this.empty()
         ]);
     }
 
@@ -114,12 +110,20 @@ export class NVirtualbarView extends ProtoView
 
     grid()
     {
-        const [{ data }, { start, end, grid, total }] = [
-            this.scope, this.scope.data.state
+        const [data, state] = [
+            this.scope.data, this.scope.data.state
+        ];
+
+        if ( state.total == null ) {
+            return null;
+        }
+
+        const [start, end] = [
+            Math.max(1, state.start), Math.min(state.end, state.total - 1)
         ];
 
         const rows = Arr.chunk(...[
-            data.items, grid
+            data.items, state.grid
         ]);
 
         let items = Arr.slice(...[
@@ -130,12 +134,24 @@ export class NVirtualbarView extends ProtoView
             return this.row(value, index + start);
         });
 
-        return [...result];
+        const first = this.row(...[
+            rows[0], 0
+        ]);
+
+        const last = this.row(...[
+            rows[state.total - 1], state.total - 1
+        ]);
+
+        return [first, ...result, state.total > 1 && last];
     }
 
     row(row : any[], index : number) : any
     {
-        const { context, data } = this.scope;
+        const { scope, context, data } = this.scope;
+
+        if ( Mix.isEmpty(row) ) {
+            return null;
+        }
 
         let fn = () => null;
 
@@ -144,7 +160,7 @@ export class NVirtualbarView extends ProtoView
         }
 
         let props : any = {
-            class: [`${this.vem}__row`]
+            key: scope.uid + index, class: [`${this.vem}__row`]
         };
 
         props.style = {
@@ -162,11 +178,16 @@ export class NVirtualbarView extends ProtoView
 
     list()
     {
-        const { context, data } = this.scope;
+        const [data, state] = [
+            this.scope.data, this.scope.data.state
+        ];
+
+        if ( state.total == null ) {
+            return null;
+        }
 
         const [start, end] = [
-            Math.max(1, data.state.start),
-            Math.min(data.state.end, data.items.length - 1)
+            Math.max(1, state.start), Math.min(state.end, state.total - 1)
         ];
 
         let items = Arr.slice(...[
@@ -175,63 +196,44 @@ export class NVirtualbarView extends ProtoView
 
         let fn = () => null;
 
-        if ( context.slots.default ) {
-            fn = context.slots.default;
+        if ( this.scope.context.slots.default ) {
+            fn = this.scope.context.slots.default;
         }
 
         const result = Arr.each(items, (value : any, index : number) => {
             return this.node({ value, index: index + start }, fn);
         });
 
-        return [
-            this.first(), ...result, this.last()
-        ];
-    }
-
-    first() : any
-    {
-        const { context, data } = this.scope;
-
-        let fn = () => null;
-
-        if ( context.slots.default ) {
-            fn = context.slots.default;
-        }
-
-        return this.node({
-            value: Arr.first(data.items), index: 0
-        }, fn);
-    }
-
-    last() : any
-    {
-        const { context, data } = this.scope;
-
-        let fn = () => null;
+        const first = this.node(...[
+            { value: data.items[0], index: 0 }, fn
+        ]);
 
-        if ( context.slots.default ) {
-            fn = context.slots.default;
-        }
+        const last = this.node(...[
+            { value: data.items[state.total - 1], index: state.total - 1 }, fn
+        ]);
 
-        return this.node({
-            value: Arr.last(data.items), index: data.items.length-1
-        }, fn);
+        return [
+            first, ...result, state.total > 1 && last
+        ];
     }
 
     node(item : any, fn : Function, row : boolean = false)
     {
         const { data } = this.scope;
 
+        if ( Mix.isEmpty(item.value) ) {
+            return null;
+        }
+
         let props : any = {
             key: this.scope.uid + item.index,
             class: [`${this.vem}__item`],
-            style: {}
         };
 
         const height = data.itemHeight;
 
-        if ( ! row ) {
-            props.style.top = `${item.index * height}px`;
+        if ( !row ) {
+            props.style = { top: `${item.index * height}px` };
         }
 
         return h('div', props, [fn(item)]);

package/src/select/js/select/NSelectController.ts

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

package/src/signal/js/alert/NAlertElement.ts

@@ -20,10 +20,12 @@ export class NAlertElement
      */
     options : any = {
         uid: null,
+        icon: null,
         text: null,
         theme: 'dark',
         size: null,
         type: null,
+        closable: true,
         okayText: null,
     };
 
@@ -55,7 +57,7 @@ export class NAlertElement
     open()
     {
         let modalProps : any = {
-            uid: this.options.uid, listen: false, closable: false
+            uid: this.options.uid, listen: false, closable: this.options.closable,
         };
 
         this.modal = NModalHandler.append(...[
@@ -107,7 +109,7 @@ export class NAlertElement
 
         body.appendTo(frame);
 
-        const iconCls = Styler.icon(...[
+        const iconCls = this.options.icon || Styler.icon(...[
             this.options.type, 'alert'
         ]);
 

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

@@ -170,8 +170,8 @@ export class NConfirmElement
             class: cancelCls.join(' '),
         });
 
-        cancel.on('mousedown', () => {
-            this.signal(false);
+        cancel.on('pointerdown', (e : any) => {
+            if ( e.which === 1 ) this.signal(false);
         });
 
         cancel.html(...[
@@ -188,8 +188,8 @@ export class NConfirmElement
             class: confirmCls.join(' '),
         });
 
-        confirm.on('mousedown', () => {
-            this.signal(true);
+        confirm.on('pointerdown', (e : any) => {
+            if ( e.which === 1 ) this.signal(true);
         });
 
         confirm.html(...[

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

@@ -48,7 +48,7 @@ export class NNotifyElement
         ]);
 
         Run.frame(() => {
-            this.el.addClass('n-active');
+            this.el?.addClass('n-active');
         });
 
         this.el.appendTo(frame);

package/src/switch/js/switch/NSwitchController.ts

@@ -21,7 +21,7 @@ export class NSwitchController extends ProtoController
      */
     declare view : NSwitchView;
 
-    constructor(props:any, context:SetupContext)
+    constructor(props : any, context : SetupContext)
     {
         super(props, context);
 
@@ -37,12 +37,28 @@ export class NSwitchController extends ProtoController
     {
         super.setup();
 
-        this
-            .cloneProp('modelValue');
+        this.cloneProp('modelValue');
+
+        this.resetValue();
 
         return this;
     }
 
+    resetValue()
+    {
+        const { data } = this;
+
+        if ( data.model === data.onValue ) {
+            return;
+        }
+
+        if ( data.model === data.offValue ) {
+            return;
+        }
+
+        this.set('modelValue', data.offValue);
+    }
+
     toggle()
     {
         let value = this.data.model;
@@ -59,7 +75,7 @@ export class NSwitchController extends ProtoController
             this.data.onValue, this.data.offValue
         ];
 
-        if ( ! Arr.has(both, value) ) {
+        if ( !Arr.has(both, value) ) {
             value = this.data.onValue;
         }
 

package/src/table/css/table.scss

@@ -75,12 +75,6 @@
     width: 32px;
 }
 
-.n-table__checkbox .n-checkbox__label {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
 .n-table__body {
     overflow: hidden;
     flex: 1 1 auto;
@@ -118,4 +112,43 @@
     align-items: stretch;
     justify-content: flex-start;
     border-bottom: 1px solid transparent;
+}
+
+.n-table-context .n-popover__frame {
+    width: 160px;
+}
+
+.n-table-context .n-popover__body {
+    max-height: calc(100vh - 60px);
+}
+
+.n-table-context .n-checkbox__label {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.n-table-filter .n-form-item {
+    margin-bottom: size('base-pad-vertical');
+}
+
+.n-table-filter .n-popover__frame {
+    width: 210px;
+}
+
+.n-table-filter .n-popover__body {
+    max-height: calc(100vh - 60px);
+}
+
+.n-table-filter .n-popover__footer {
+    display: flex;
+    flex-direction: row;
+}
+
+.n-table-filter .n-popover__footer > *:first-child {
+    margin-right: auto;
+}
+
+.n-table-filter .n-popover__footer > *:last-child {
+    margin-left: auto;
 }

package/src/table/js/table/NTable.ts

@@ -65,13 +65,16 @@ export default defineComponent({
         'update:current',
         'update:selected',
         'update:expanded',
+        'update:cascade',
         'update:filter',
         'update:sortProp',
         'update:sortDir',
         'filter',
         'sort',
         'row-click',
+        'node-click',
         'row-dblclick',
+        'node-dblclick',
     ],
 
     setup(props, context)

package/src/table/js/table/NTableController.ts

@@ -1,5 +1,5 @@
 import { onMounted, provide, SetupContext } from "vue";
-import { Arr, Mix } from "@kizmann/pico-js";
+import { Arr, Mix, Obj } from "@kizmann/pico-js";
 import { GroupController } from "../../../root/index.ts";
 import { NTableView } from "./NTableView.ts";
 import { NTableData } from "./NTableData.ts";
@@ -38,6 +38,8 @@ export class NTableController extends GroupController
     {
         super.setup();
 
+        this.makeUID();
+
         this
             .cloneProp('visible')
             .cloneProp('filter')
@@ -88,7 +90,7 @@ export class NTableController extends GroupController
         });
 
         const visible = Arr.each(columns, (column : any) => {
-            return column.uid;
+            return column.data.prop;
         });
 
         this.update('visible', visible);
@@ -113,13 +115,13 @@ export class NTableController extends GroupController
             value: null, type: data.type, property: data.filterProp,
         };
 
-        const active = Arr.find({
+        const active = Arr.find(this.data.filter, {
             // @ts-ignore
             property: value.property
         });
 
         if ( merge && active ) {
-            value = Object.assign(value, active);
+            value = Obj.assign(value, Obj.clone(active));
         }
 
         return value;

package/src/table/js/table/NTableView.ts

@@ -75,10 +75,11 @@ export class NTableView extends ProtoView
         const { scope, data } = this.scope;
 
         let contextProps = {
+            class: `${this.bem}-context`,
             size: 'sm',
             trigger: 'context',
             toggle: true,
-            width: 160,
+            scrollbar: true,
         };
 
         const group = this.comp('n-popover-group', null, () => {
@@ -95,14 +96,14 @@ export class NTableView extends ProtoView
         };
 
         const values = Arr.each(scope.childs, (column : any) => {
-            return this.comp('n-checkbox', { value: column.uid }, () => {
+            return this.comp('n-checkbox', { value: column.data.prop }, () => {
                 return column.data.label;
             });
         });
 
         const checkbox = this.comp('n-checkbox-group', groupProps, () => {
             return values;
-        })
+        });
 
         return this.comp('n-popover', contextProps, () => [
             group, checkbox
@@ -113,12 +114,18 @@ export class NTableView extends ProtoView
     {
         const { scope, data } = this.scope;
 
-        if ( !Arr.has(data.visible, column.uid) ) {
+        if ( !Arr.has(data.visible, column.data.prop) ) {
             return null;
         }
 
+        const classList = [
+            `${this.bem}-column`,
+            `${this.bem}-column--${column.data.type}`,
+            `${this.bem}-column--${column.data.align}`,
+        ]
+
         let props : any = {
-            class: [`${this.bem}-column`],
+            class: classList,
         };
 
         const sorted = [
@@ -141,12 +148,16 @@ export class NTableView extends ProtoView
             'z-index': scope.childs.length - index
         };
 
+        if ( column.data.tooltip ) {
+            props['data-tooltip-inv'] = column.data.tooltip;
+        }
+
         if ( column.data.fixedWidth ) {
             props.disabled = true;
         }
 
         props = {
-            ...props, ...scope.getStyle(column),
+            group: [scope.uid], ...props, ...scope.getStyle(column),
         };
 
         if ( !Mix.isEmpty(data.fixedWidth) ) {
@@ -210,7 +221,7 @@ export class NTableView extends ProtoView
             class: [`${this.bem}-column__filter`],
         };
 
-        angleProps.onClick = (e) => {
+        angleProps.onClick = (e : any) => {
             e.stopPropagation();
         };
 
@@ -265,8 +276,9 @@ export class NTableView extends ProtoView
         ]);
 
         const props = {
+            class: `${this.bem}-filter`,
             toggle: true,
-            width: 220,
+            scrollbar: true,
         };
 
         const component = this.resolve(...[
@@ -278,7 +290,7 @@ export class NTableView extends ProtoView
         };
 
         let slots = {
-            default: () => h(component, compProps),
+            default: () => component(compProps),
             footer: () => [reset, apply]
         };
 
@@ -289,7 +301,7 @@ export class NTableView extends ProtoView
     {
         let { scope, data } = this.scope;
 
-        let props = {
+        let props : any = {
             ref: scope.ref('draglist'),
             items: data.items,
             overflowX: false,
@@ -297,17 +309,49 @@ export class NTableView extends ProtoView
         };
 
         const passed = [
-            'itemHeight',
-            'itemOffset',
+            'group',
+            'expanded',
+            'cascade',
+            'allowGroup',
+            'safezone',
             'renderHandle',
             'renderExpand',
             'renderSelect',
+            'allowDrop',
+            'allowDrag',
+            'allowSelect',
+            'allowCurrent',
+            'transformDrop',
+            'insertNode',
+            'removeNode',
+            'itemSkip',
+            'rootSkip',
+            'uniqueProp',
+            'childProp',
+            'itemHeight',
+            'itemOffset',
         ];
 
         Arr.each(passed, (key : any) => {
             props[key] = scope.props[key];
         });
 
+        props.onRowClick = (node : any) => {
+            this.scope.emit('row-click', node);
+        };
+
+        props.onRowDblclick = (node : any) => {
+            this.scope.emit('row-dblclick', node);
+        };
+
+        props.onNodeClick = (node : any) => {
+            this.scope.emit('node-click', node);
+        };
+
+        props.onNodeDblclick = (node : any) => {
+            this.scope.emit('node-dblclick', node);
+        };
+
         props['onUpdate:items'] = (value : any) => {
             scope.emit('update:items', value);
         };
@@ -324,6 +368,10 @@ export class NTableView extends ProtoView
             scope.emit('update:expanded', value);
         };
 
+        props['onUpdate:cascade'] = (value : any) => {
+            scope.emit('update:cascade', value);
+        };
+
         return this.comp('n-draglist', props, (node : any) => {
             return this.rows(node)
         });
@@ -334,7 +382,7 @@ export class NTableView extends ProtoView
         const { scope, data } = this.scope;
 
         const columns = Arr.filter(scope.childs, (column : any) => {
-            return Arr.has(data.visible, column.uid);
+            return Arr.has(data.visible, column.data.prop);
         });
 
         return Arr.each(columns, (column : any, index : number) => {
@@ -359,7 +407,7 @@ export class NTableView extends ProtoView
         ];
 
         let props : any = {
-            class: classList
+            key: column.uid, class: classList
         };
 
         let width = this.scope.getWidth(column.uid);

package/src/table/js/table-cell/NTableCellImage.ts

@@ -19,7 +19,7 @@ export const NTableCellImage = ({ node, table, column, props, input, comp }) =>
     }
 
     if ( Obj.has(data, 'thumbProp') ) {
-        image.thumb = Obj.get(node.item, data.thumbProp);
+        image.thumb = Obj.get(node?.item, data.thumbProp);
     }
 
     image.onFocus = () => {

package/src/table/js/table-cell/NTableCellOption.ts

@@ -4,7 +4,7 @@ export const NTableCellOption = ({ props, input, column }) => {
 
     let value = column.getOption(input)
 
-    if ( value === input ) {
+    if ( value === null ) {
         value = column.data.undefinedText;
     }
 

package/src/table/js/table-column/NTableColumn.ts

@@ -52,6 +52,13 @@ export const NTableColumnProps = {
         type: [String], default: null
     },
 
+    /**
+     * @type {PropType<string>}
+     */
+    tooltip: {
+        type: [String], default: null
+    },
+
     /**
      * @type {PropType<string>}
      */

package/src/table/js/table-column/NTableColumnData.ts

@@ -43,6 +43,11 @@ export class NTableColumnData extends ProtoExtend([ProtoData, OptionData, TextDa
         return this.scope.get('label');
     }
 
+    get tooltip():string
+    {
+        return this.scope.get('tooltip');
+    }
+
     get prop():string
     {
         return this.scope.get('prop');

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

@@ -1,7 +1,7 @@
 import { h } from "vue";
 import { Arr, Locale, Mix, Obj } from "@kizmann/pico-js";
 
-export const NTableFilterOption = ({ model, comp, column, table }) => {
+export const NTableFilterOption = ({ model, comp, column, table, options }) => {
 
     if ( !Mix.isArr(model.value) ) {
         Obj.set(model, 'value', []);
@@ -20,11 +20,11 @@ export const NTableFilterOption = ({ model, comp, column, table }) => {
         Obj.set(model, 'value', value);
     };
 
-    const values = Arr.each(column.getOptions(), ({ label, value }) => {
+    const values = Arr.each(options ?? column.getOptions(), ({ label, value }) => {
         return comp('n-checkbox', { value }, () => label);
     });
 
-    const value = comp('n-form-item', valueProps, [
+    const value = comp('n-form-item', null, () => [
         comp('n-checkbox-group', valueProps, () => values),
     ]);
 
@@ -41,13 +41,11 @@ export const NTableFilterOption = ({ model, comp, column, table }) => {
         'ni': Locale.trans('Excludes value'),
     };
 
-    const operator = comp('n-form-item', operatorProps, [
+    const operator = comp('n-form-item', null, () => [
         comp('n-select', operatorProps)
     ]);
 
-    return h('div', null, [
-        value, operator
-    ]);
+    return [value, operator];
 };
 
 export default NTableFilterOption;