@kizmann/nano-ui 3.0.0 → 3.0.1

package/src/cascader/js/cascader/NCascaderController.ts

@@ -1,6 +1,5 @@
-import { onMounted, SetupContext } from "vue";
-import { Arr, Locale, Mix, Obj, Run, Str } from "@kizmann/pico-js";
-import { ProtoExtend } from "../../../root/index.ts";
+import { provide, SetupContext } from "vue";
+import { Mix, Obj, Run } from "@kizmann/pico-js";
 import { NPopoverPanelController } from "../../../popover/js/popover-panel/NPopoverPanelController.ts";
 import { NCascaderView } from "./NCascaderView.ts";
 import { NCascaderData } from "./NCascaderData.ts";
@@ -34,36 +33,53 @@ export class NCascaderController extends NPopoverPanelController
             new NCascaderData(this),
         ];
 
-        this.setup();
+        if ( this.constructor.name === 'NCascaderController' ) {
+            this.setup();
+        }
     }
 
     setup()
     {
         super.setup();
 
-        this
-            .cloneProp('modelValue')
-            .cloneProp('splitValue');
+        this.cloneProp('options');
+        this.cloneProp('modelValue');
+        this.cloneProp('splitValue');
 
         this.makeRef('panel');
 
-        let { model, split } = this.data;
+        this.compData('virtuals', () => {
+            return NCascaderHelper.getCascade(this);
+        });
 
-        if ( Mix.isEmpty(model) && ! Mix.isEmpty(split) ) {
-            NCascaderHelper.buildModelFromSplit(this);
-        }
+        this.detectModel();
 
-        if ( ! Mix.isEmpty(model) && Mix.isEmpty(split) ) {
-            NCascaderHelper.buildSplitFromModel(this);
-        }
+        this.watchProp('splitValue', () => {
+            Run.frame(() => this.detectModel());
+        });
 
-        this.compData('virtuals', () => {
-            return NCascaderHelper.getCascade(this);
+        this.watchData('options', () => {
+            Run.frame(() => this.detectModel());
         });
 
+        provide('NCascader', this.instance);
+
         return this;
     }
 
+    detectModel() : void
+    {
+        let { model, split } = this.data;
+
+        if ( ! Mix.isEmpty(model) && Mix.isEmpty(split) ) {
+            NCascaderHelper.buildSplitFromModel(this);
+        }
+
+        if ( Mix.isEmpty(model) && ! Mix.isEmpty(split) ) {
+            NCascaderHelper.buildModelFromSplit(this);
+        }
+    }
+
 }
 
 export default NCascaderController;

package/src/cascader/js/cascader/NCascaderView.ts

@@ -46,7 +46,7 @@ export class NCascaderView extends NPopoverPanelView
             Mix.len(items) - data.collapse,
         ];
 
-        if ( ! data.collapseFirst ) {
+        if ( ! data.collapseFirst && offset > 0  ) {
             offset = offset + 1;
         }
 

package/src/cascader/js/cascader-panel/NCascaderPanelController.ts

@@ -39,12 +39,15 @@ export class NCascaderPanelController extends GroupController
     {
         super.setup();
 
-        this
-            .cloneProp('modelValue')
-            .cloneProp('splitValue');
+        this.makeRef('el');
 
-        this
-            .makeRef('el');
+        this.cloneProp('modelValue');
+        this.cloneProp('splitValue');
+        this.makeData('virtuals', []);
+
+        this.injectRef([
+            'popover', 'NPopover'
+        ]);
 
         const { model, split } = this.data;
 
@@ -56,10 +59,12 @@ export class NCascaderPanelController extends GroupController
             NCascaderHelper.buildSplitFromModel(this);
         }
 
-        this.compData('virtuals', () => {
-            return NCascaderHelper.getCascade(this);
+        this.watchProp('options', () => {
+            this.buildVirtuals();
         });
 
+        this.buildVirtuals();
+
         this.makeData('visible', ...[
             Obj.clone(this.data.model)
         ]);
@@ -67,58 +72,84 @@ export class NCascaderPanelController extends GroupController
         return this;
     }
 
-    onMouseenter(item : any)
+    buildVirtuals()
+    {
+        this.set('virtuals', ...[
+            NCascaderHelper.getCascade(this)
+        ]);
+    }
+
+    onMouseenter(item : any, depth : number)
     {
         const { data } = this;
 
         if ( data.trigger === 'hover' ) {
-            this.updateVisible(item);
+            this.updateVisible(item, depth);
         }
     }
 
-    onClick(item : any)
+    onClick(item : any, depth : number)
     {
         const { data } = this;
 
         if ( data.trigger === 'click' ) {
-            this.updateVisible(item);
+            this.updateVisible(item, depth);
         }
 
         if ( data.trigger === 'hover' ) {
-            this.updateCascade(item);
+            this.updateCascade(item, depth);
         }
     }
 
-    onDblclick(item : any)
+    onDblclick(item : any, depth : number)
     {
         const { data } = this;
 
         if ( data.trigger === 'click' ) {
-            this.updateCascade(item);
+            this.updateCascade(item, depth);
         }
     }
 
-    updateVisible(item : any)
+    updateVisible(item : any, depth : number)
     {
-        const cascade = NCascaderHelper.getPath(...[
-            this, item
+        const { data } = this;
+
+        const visible = Arr.slice(...[
+            data.visible || [], 0, depth
         ]);
 
-        this.set('visible', cascade);
+        this.set('visible', [
+            ...visible, item[data.valueProp]
+        ]);
+
+        const virtuals = Arr.slice(...[
+            data.virtuals || [], 0, depth
+        ]);
+
+        this.set('virtuals', [
+            ...virtuals, item
+        ]);
     }
 
-    updateCascade(item : any)
+    updateCascade(item : any, depth : number = 0)
     {
-        const cascade = NCascaderHelper.getPath(...[
-            this, item
+        const { data } = this;
+
+        const cascade = Arr.slice(...[
+            data.visible || [], 0, depth
         ]);
 
-        const [total, split] = [
-            cascade, Arr.last(cascade)
+        const total = [
+            ...cascade, item[data.valueProp]
         ];
 
-        this.update('splitValue', split);
+        this.update('splitValue', ...[
+            Arr.last(total)
+        ]);
+
         this.update('modelValue', total);
+
+        this.ncx('popover')?.superClose();
     }
 
 }

package/src/cascader/js/cascader-panel/NCascaderPanelView.ts

@@ -23,16 +23,16 @@ export class NCascaderPanelView extends ProtoView
             class: data.classList
         };
 
-        const slots = Arr.each(data.virtuals, (val : any) => {
-            return this.items(val[data.childProp] ?? []);
+        const slots = Arr.each(data.virtuals, (val : any, index : number) => {
+            return this.items(val[data.childProp] ?? [], index + 1);
         });
 
         return h('div', props, [
-            this.items(data.options), ...slots
+            this.items(data.options, 0), ...slots
         ]);
     }
 
-    items(items : any) : any
+    items(items : any, depth : number) : any
     {
         const { data } = this.scope;
 
@@ -46,15 +46,16 @@ export class NCascaderPanelView extends ProtoView
         };
 
         return this.comp('n-virtualbar', props, ({ value }) => {
-            return this.item(value);
+            return this.item(value, depth);
         });
     }
 
-    item(item : any) : any
+    item(item : any, depth : number) : any
     {
         const { scope, data } = this.scope;
 
         let props : any = {
+            clickClose: false,
             disabled: item[data.disabledProp],
         };
 
@@ -83,17 +84,17 @@ export class NCascaderPanelView extends ProtoView
         }
 
         props.onPointerenter = () => {
-            scope.onMouseenter(item);
+            scope.onMouseenter(item, depth);
         };
 
         props.onClick = (e : any) => {
             e.preventDefault();
-            scope.onClick(item);
+            scope.onClick(item, depth);
         };
 
         props.onDblclick = (e : any) => {
             e.preventDefault();
-            scope.onDblclick(item);
+            scope.onDblclick(item, depth);
         };
 
         return this.comp('n-popover-option', props, () => [

package/src/cascader/js/helper/NCascaderHelper.ts

@@ -11,7 +11,7 @@ export class NCascaderHelper
             return this;
         }
 
-        scope.set('splitValue', ...[
+        scope.update('splitValue', ...[
             Arr.last(model)
         ]);
 
@@ -30,12 +30,8 @@ export class NCascaderHelper
             return val[valueProp] === split;
         });
 
-        if ( Mix.isEmpty(result) ) {
-            result = [{ [valueProp]: split }];
-        }
-
-        scope.set('modelValue', ...[
-            Arr.extract(result, valueProp)
+        scope.update('modelValue', ...[
+            Mix.isEmpty(result) ? null : Arr.extract(result, valueProp)
         ]);
 
         return this;

package/src/checkbox/css/checkbox-group.scss

@@ -32,10 +32,6 @@
     margin-left: size('base-pad', 'calc($ * 1.2)');
 }
 
-.n-checkbox-group.n-checkbox-group--horizontal .n-checkbox:last-child {
-    padding-right: 0;
-}
-
 .n-checkbox-group.n-checkbox-group--vertical .n-checkbox {
     min-height: 0;
 }
@@ -43,7 +39,3 @@
 .n-checkbox-group.n-checkbox-group--vertical .n-checkbox:not(:first-child) {
     margin-top: size('base-pad-vertical', 'calc($ * 0.7)');
 }
-
-.n-checkbox-group.n-checkbox-group--vertical .n-checkbox:last-child {
-    padding-bottom: 0;
-}

package/src/checkbox/css/checkbox.scss

@@ -43,3 +43,9 @@
 .n-checkbox .n-checkbox__label {
     padding-left: size('base-pad', 'calc($ * 0.8)');
 }
+
+.n-checkbox.n-checkbox--button {
+    padding: size('base-pad-vertical') size('base-pad');
+    border: 1px solid transparent;
+    border-radius: size('base-rad');
+}

package/src/checkbox/js/checkbox/NCheckbox.ts

@@ -37,6 +37,13 @@ export const NCheckboxProps = {
         type: [Boolean], default: false
     },
 
+    /**
+     * @type {PropType<string>}
+     */
+    view: {
+        type: [String], default: 'checkbox'
+    },
+
 };
 
 export default defineComponent({

package/src/checkbox/js/checkbox/NCheckboxData.ts

@@ -11,7 +11,9 @@ export class NCheckboxData extends ProtoData
 
     get classList() : string[]
     {
-        let classList = this.classRoot();
+        let classList = this.classRoot([
+            `${this.scope.view.bem}--${this.view}`
+        ]);
 
         if ( this.model ) {
             Arr.append(classList, 'n-checked');
@@ -53,4 +55,9 @@ export class NCheckboxData extends ProtoData
         return this.scope.get('intermediate');
     }
 
+    get view() : string
+    {
+        return this.scope.ncx('group')?.data.view || this.scope.get('view');
+    }
+
 }

package/src/checkbox/js/checkbox-group/NCheckboxGroup.ts

@@ -17,6 +17,13 @@ export const NCheckboxGroupProps = {
         type: [Array], default: () => []
     },
 
+    /**
+     * @type {PropType<string>}
+     */
+    view: {
+        type: [String], default: 'checkbox'
+    },
+
 };
 
 export default defineComponent({

package/src/checkbox/js/checkbox-group/NCheckboxGroupData.ts

@@ -39,4 +39,9 @@ export class NCheckboxGroupData extends ProtoData
         return this.scope.get('align');
     }
 
+    get view() : string
+    {
+        return this.scope.get('view');
+    }
+
 }

package/src/collapse/css/collapse-item.scss

@@ -8,7 +8,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: stretch;
-    height: size('base-hgt', 'calc($ + 10px)');
+    height: size('base-hgt', 'calc($ + 11px)');
     padding: 0 size('base-pad');
     border-bottom: 1px solid transparent;
 }

package/src/collapse/js/collapse-item/NCollapseItem.ts

@@ -67,6 +67,11 @@ export default defineComponent({
      */
     props: NCollapseItemProps,
 
+    /**
+     * @type {boolean}
+     */
+    inheritAttrs: false,
+
     /**
      * @type {string[]}
      */

package/src/collapse/js/collapse-item/NCollapseItemView.ts

@@ -76,10 +76,10 @@ export class NCollapseItemView extends ProtoView
 
     header_label(collapse : NCollapseController) : any
     {
-        const { data } = this.scope;
+        const { context, data } = this.scope;
 
         return this.div('label', [
-            data.label
+            context.slots.label ? context.slots.label() : data.label
         ]);
     }
 
@@ -119,9 +119,12 @@ export class NCollapseItemView extends ProtoView
 
         let props : any = {
             class: data.classPart('content'),
-            wrapClass: `${this.bem}__wrap`,
         };
 
+        if ( data.scrollbar ) {
+            props.wrapClass = `${this.bem}__wrap`;
+        }
+
         if ( !scope.isVisible() ) {
             props.style = 'display: none;';
         }

package/src/config/js/config/NConfig.ts

@@ -46,6 +46,11 @@ export default defineComponent({
      */
     props: NConfigProps,
 
+    /**
+     * @type {boolean}
+     */
+    inheritAttrs: false,
+
     /**
      * @type {string[]}
      */

package/src/config/js/config/NConfigController.ts

@@ -190,11 +190,11 @@ export class NConfigController extends ProtoController
         ]);
 
         if ( value.match(/^!!\$/) ) {
-            result = Mix.isEmpty(result);
+            result = Mix.isTrue(result);
         }
 
         if ( value.match(/^!\$/) ) {
-            result = Mix.isEmpty(result);
+            result = ! Mix.isTrue(result);
         }
 
         return result;

package/src/config/js/config/NConfigView.ts

@@ -95,7 +95,7 @@ export class NConfigView extends ProtoView
 
         let component : any = alias.replace(/:.*?$/, '');
 
-        if ( !Arr.has(['div', 'p', 'span'], component) ) {
+        if ( !Arr.has(['div', 'a', 'p', 'span', 'iframe'], component) ) {
             component = resolveComponent(component);
         }
 
@@ -128,6 +128,10 @@ export class NConfigView extends ProtoView
             render = () => callback.apply(this.scope);
         }
 
+        if ( Mix.isArr(callback) && callback.length === 1 ) {
+            callback = callback[0];
+        }
+
         if ( Mix.isStr(callback) ) {
             render = () => this.scope.getString(callback);
         }

package/src/draggable/css/draghandler.scss

@@ -1,7 +1,11 @@
 @use "../../root/css/helpers" as *;
 
-.n-drag-indicator,
-.n-draggable__indicator {
+body:not(.n-drag) .n-drag-counter,
+body:not(.n-drag) .n-drag-indicator {
+    display: none !important;
+}
+
+.n-drag-indicator {
     pointer-events: none;
     z-index: 9999998;
     position: absolute;
@@ -31,7 +35,7 @@
 }
 
 .n-drag-indicator:not(.n-view-grid).n-mode-before:before {
-    top: 2px;
+    top: -1px;
     left: 2px;
     right: 2px;
     height: 2px;
@@ -40,12 +44,12 @@
 .n-drag-indicator.n-view-grid.n-mode-before:before {
     top: 2px;
     bottom: 2px;
-    left: 2px;
+    left: -1px;
     width: 2px;
 }
 
 .n-drag-indicator:not(.n-view-grid).n-mode-after:before {
-    bottom: 2px;
+    bottom: -1px;
     left: 2px;
     right: 2px;
     height: 2px;
@@ -54,12 +58,11 @@
 .n-drag-indicator.n-view-grid.n-mode-after:before {
     top: 2px;
     bottom: 2px;
-    right: 2px;
+    right: -1px;
     width: 2px;
 }
 
-.n-drag-counter,
-.n-draggable__counter {
+.n-drag-counter {
     cursor: none;
     pointer-events: none;
     will-change: transform;

package/src/draggable/js/drag/NDragIndicator.ts

@@ -91,6 +91,10 @@ export class NDragIndicator
 
         let boundry = target.el.offsetParent;
 
+        if ( boundry?.matches('.n-virtualbar__item') ) {
+            boundry = boundry.offsetParent;
+        }
+
         if ( boundry == null ) {
             boundry = document.body;
         }

package/src/draggable/js/drag/NDragReciever.ts

@@ -95,7 +95,7 @@ export class NDragReciever
         NDragHandler.dragstart(e, config);
     }
 
-    getMode(event : any, el : HTMLElement, safezone : Function | number = 0.5)
+    getMode(event : any, el : HTMLElement, safezone : Function | number = 0.5, args : any[] = [])
     {
         let [fn, mode] = [safezone, 'inside'];
 
@@ -114,7 +114,7 @@ export class NDragReciever
             grid ? event.clientX : event.clientY,
         ];
 
-        const padding = fn(size);
+        const padding = fn(size, ...args);
 
         if ( scale < offset + padding ) {
             mode = 'before';

package/src/draggable/js/draglist/NDraglist.ts

@@ -7,6 +7,8 @@ export const NDraglistProps = {
     ...Props.Size,
     ...Props.Type,
     ...Props.Draglist,
+    ...Props.EmptyText,
+    ...Props.EmptyPropsStacked,
 
     /**
      * @type {PropType<boolean>}
@@ -62,11 +64,15 @@ export default defineComponent({
      */
     emits: [
         'update:items',
+        'update:cascade',
         'update:current',
         'update:selected',
         'update:expanded',
+        'move',
         'row-click',
+        'node-click',
         'row-dblclick',
+        'node-dblclick',
     ],
 
     setup(props, context)