@kizmann/nano-ui 3.0.0 → 3.0.1

package/src/preview/js/preview/NPreviewView.ts

@@ -1,6 +1,6 @@
 import { h } from "vue";
-import { Arr, Mix } from "@kizmann/pico-js";
-import { ProtoView, Styler } from "../../../root/index.ts";
+import { Arr, Mix, Obj } from "@kizmann/pico-js";
+import { Pointer, ProtoView, Styler } from "../../../root/index.ts";
 import { NPreviewController } from "./NPreviewController.ts";
 
 export class NPreviewView extends ProtoView
@@ -65,9 +65,8 @@ export class NPreviewView extends ProtoView
             props.class, classList,
         ]);
 
-        props.onPointerup = (e) => {
-            e.stopPropagation();
-            if ( data.preview ) scope.openPreview();
+        props.onClick = (e : any) => {
+            if ( e.which === 1 && data.preview ) scope.openPreview();
         };
 
         const preview = this.preview({
@@ -155,13 +154,10 @@ export class NPreviewView extends ProtoView
         let { data } = this.scope;
 
         let slots = [
-            this.mime()
+            this.mime(),
+            this.path(),
         ];
 
-        if ( fullscreen ) {
-            slots.push(this.path());
-        }
-
         if ( fullscreen ) {
             slots.push(this.link());
         }
@@ -177,7 +173,11 @@ export class NPreviewView extends ProtoView
     {
         let { data } = this.scope;
 
-        if ( ! Mix.isStr(data.safeFile) ) {
+        const path = Obj.get(...[
+            data.safeFile, 'name', data.safeFile
+        ]);
+
+        if ( ! Mix.isStr(path) ) {
             return null;
         }
 
@@ -189,9 +189,12 @@ export class NPreviewView extends ProtoView
             class: data.classPart('path')
         };
 
-        return h('li', props, [data.safeFile]);
+        return h('li', props, [
+            path.replace(/(.*?)([^\/]+)$/, '$2')
+        ]);
     }
 
+
     mime() : any
     {
         let { data } = this.scope;

package/src/preview/js/preview-module/NPreviewFileModule.ts

@@ -1,7 +1,7 @@
 import { h } from "vue";
 
 export const NPreviewFileModule = ({ scope, full }) => {
-    return h('ul', {}, [scope.view.meta(full)]);
+    return scope.view.meta(full);
 };
 
 export default NPreviewFileModule;

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

@@ -28,18 +28,10 @@
     margin-left: size('base-pad', 'calc($ * 1.2)');
 }
 
-.n-radio-group.n-radio-group--horizontal .n-radio:last-child {
-    padding-right: 0;
-}
-
 .n-radio-group.n-radio-group--vertical .n-radio {
     min-height: 0;
 }
 
 .n-radio-group.n-radio-group--vertical .n-radio:not(:first-child) {
     margin-top: size('base-pad-vertical', 'calc($ * 0.7)');
-}
-
-.n-radio-group.n-radio-group--vertical .n-radio:last-child {
-    padding-bottom: 0;
 }

package/src/radio/css/radio.scss

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

package/src/radio/js/radio/NRadio.ts

@@ -9,10 +9,17 @@ export const NRadioProps = {
     ...Props.Disabled,
 
     /**
-     * @type {PropType<null|string>}
+     * @type {PropType<null|string|number|boolean>}
      */
     value: {
-        type: [String], default: 'undefined'
+        type: [String,Number,Boolean], default: 'undefined'
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    view: {
+        type: [String], default: 'checkbox'
     },
 
 };

package/src/radio/js/radio/NRadioData.ts

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

package/src/radio/js/radio-group/NRadioGroup.ts

@@ -10,10 +10,17 @@ export const NRadioGroupProps = {
     ...Props.AlignHorizontal,
 
     /**
-     * @type {PropType<string|number>}
+     * @type {PropType<string|number|boolean>}
      */
     modelValue: {
-        type: [String,Number], default: ''
+        type: [String,Number,Boolean], default: ''
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    view: {
+        type: [String], default: 'checkbox'
     },
 
 };

package/src/radio/js/radio-group/NRadioGroupData.ts

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

package/src/resizer/css/resizer.scss

@@ -15,6 +15,10 @@
     width: 6px;
 }
 
+.n-resizer.n-disabled > .n-resizer__handle {
+    display: none !important;
+}
+
 .n-resizer.n-move > .n-resizer__handle {
     z-index: 99999;
 }

package/src/resizer/js/resizer/NResizerController.ts

@@ -122,7 +122,11 @@ export class NResizerController extends ProtoController
             target = Math.min(target, data.maxWidth);
         }
 
-        target = data.width = Math.round(target);
+        target = Math.round(target);
+
+        if ( target > 0 ) {
+            this.set('width', target);
+        }
 
         if ( data.direction === 'right' ) {
             return target;

package/src/resizer/js/resizer/NResizerData.ts

@@ -24,69 +24,34 @@ export class NResizerData extends ProtoData
         return this.scope.get('modelValue');
     }
 
-    set model(value : number)
-    {
-        this.scope.set('modelValue', value);
-    }
-
     get width() : number
     {
         return this.scope.get('width');
     }
 
-    set width(value : number)
-    {
-        this.scope.set('width', value);
-    }
-
     get minWidth() : number
     {
         return this.scope.get('minWidth');
     }
 
-    set minWidth(value : number)
-    {
-        this.scope.set('minWidth', value);
-    }
-
     get maxWidth() : number
     {
         return this.scope.get('maxWidth');
     }
 
-    set maxWidth(value : number)
-    {
-        this.scope.set('maxWidth', value);
-    }
-
     get group() : any[]
     {
         return this.scope.get('group');
     }
 
-    set group(value : any[])
-    {
-        this.scope.set('group', value);
-    }
-
     get flex() : string
     {
         return this.scope.get('flex');
     }
 
-    set flex(value : string)
-    {
-        this.scope.set('flex', value);
-    }
-
     get direction() : string
     {
         return this.scope.get('direction');
     }
 
-    set direction(value : string)
-    {
-        this.scope.set('direction', value);
-    }
-
 }

package/src/resizer/js/resizer/NResizerView.ts

@@ -59,6 +59,10 @@ export class NResizerView extends ProtoView
             name: 'handle', ref: scope.ref('handle'),
         };
 
+        props.onClick = (e : any) => {
+            e.stopPropagation();
+        };
+
         props.onPointerdown = (e : any) => {
             scope.onPointerdown(e);
         };

package/src/root/css/helpers.scss

@@ -1,5 +1,6 @@
 @use "sass:color";
 @use "sass:string";
+@use "sass:math";
 
 @mixin css-colors($colors, $prefix: '') {
     @each $name, $color in $colors {
@@ -39,3 +40,22 @@
 @function size($size, $context: '$') {
     @return string.unquote(string-replace($context, "$", "var(--n-size-#{$size})"));
 };
+
+@function fixed-number($number) {
+    @return math.div(math.round($number * 1000), 1000);
+}
+
+@function to-space-fixed($color, $space: rgb) {
+
+    $target: color.to-space($color, $space);
+
+    @if $space != rgb {
+        @return $target;
+    }
+
+    $r: fixed-number(color.channel($target, 'red'));
+    $g: fixed-number(color.channel($target, 'green'));
+    $b: fixed-number(color.channel($target, 'blue'));
+
+    @return color.change($target, $space: $space, $red: $r, $green: $g, $blue: $b);
+}

package/src/root/css/tooltip.scss

@@ -5,20 +5,16 @@
 }
 
 [data-tooltip=""]:before,
-[data-tooltip-ltr=""]:before,
-[data-tooltip-rtl=""]:before,
+[data-tooltip-inv=""]:before,
 [data-tooltip=""]:after,
-[data-tooltip-ltr=""]:after,
-[data-tooltip-rtl=""]:after {
+[data-tooltip-inv=""]:after {
     display: none !important;
 }
 
 [data-tooltip]:before,
-[data-tooltip-ltr]:before,
-[data-tooltip-rtl]:before,
+[data-tooltip-inv]:before,
 [data-tooltip]:after,
-[data-tooltip-ltr]:after,
-[data-tooltip-rtl]:after {
+[data-tooltip-inv]:after {
     z-index: 999999999;
     position: absolute;
     display: inline-flex;
@@ -26,50 +22,50 @@
     visibility: hidden;
 }
 
-[data-tooltip]:before,
-[data-tooltip-ltr]:before,
-[data-tooltip-rtl]:before {
+[data-tooltip]:before {
     bottom: calc(100% + 5px);
+}
+
+[data-tooltip-inv]:before {
+    top: calc(100% + 5px);
+}
+
+[data-tooltip]:before,
+[data-tooltip-inv]:before {
     padding: size('base-pad-vertical', 'calc($ * 0.5)') size('base-pad');
     font-size: size('base-fnt-label');
     border-radius: size('base-rad');
 }
 
 [data-tooltip]:after,
-[data-tooltip-ltr]:after,
-[data-tooltip-rtl]:after {
+[data-tooltip-inv]:after {
     content: '\00a0';
-    bottom: 100%;
     width: 28px;
     height: 6px;
 }
 
-[data-tooltip]:before {
-    content: attr(data-tooltip);
-}
-
-[data-tooltip]:before,
 [data-tooltip]:after {
-    left: 50%;
-    transform: translateX(-50%);
+    bottom: 100%;
 }
 
-[data-tooltip-ltr]:before {
-    content: attr(data-tooltip-ltr);
+[data-tooltip-inv]:after {
+    top: 100%;
 }
 
-[data-tooltip-ltr]:before,
-[data-tooltip-ltr]:after {
-    left: 0;
+[data-tooltip]:before{
+    content: attr(data-tooltip);
 }
 
-[data-tooltip-rtl]:before {
-    content: attr(data-tooltip-rtl);
+[data-tooltip-inv]:before {
+    content: attr(data-tooltip-inv);
 }
 
-[data-tooltip-rtl]:before,
-[data-tooltip-rtl]:after {
-    right: 0;
+[data-tooltip]:before,
+[data-tooltip-inv]:before,
+[data-tooltip]:after,
+[data-tooltip-inv]:after {
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 [data-tooltip]:hover:before,
@@ -80,37 +76,31 @@
     visibility: visible;
 }
 
-[data-tooltip-ltr]:hover:before,
-[data-tooltip-ltr]:hover:after,
-[data-tooltip-ltr].n-move:before,
-[data-tooltip-ltr].n-move:after,
-[data-tooltip-rtl]:hover:before,
-[data-tooltip-rtl]:hover:after,
-[data-tooltip-rtl].n-move:before,
-[data-tooltip-rtl].n-move:after {
+[data-tooltip-inv]:hover:before,
+[data-tooltip-inv]:hover:after,
+[data-tooltip-inv].n-move:before,
+[data-tooltip-inv].n-move:after {
     opacity: 1;
     visibility: visible;
-    transform: translateY(0);
 }
 
 [data-tooltip]:before,
-[data-tooltip-ltr]:before,
-[data-tooltip-rtl]:before,
+[data-tooltip-inv]:before,
 [data-tooltip]:after,
-[data-tooltip-ltr]:after,
-[data-tooltip-rtl]:after {
+[data-tooltip-inv]:after {
     background: color('tooltip', 0.95);
     transition: opacity 0.2s;
 }
 
 [data-tooltip]:before,
-[data-tooltip-ltr]:before,
-[data-tooltip-rtl]:before {
+[data-tooltip-inv]:before {
     color: color('white');
 }
 
-[data-tooltip]:after,
-[data-tooltip-ltr]:after,
-[data-tooltip-rtl]:after {
+[data-tooltip]:after{
     mask: svg-load('angle-down.svg') no-repeat center 0 / contain;
+}
+
+[data-tooltip-inv]:after {
+    mask: svg-load('angle-up.svg') no-repeat center 0 / contain;
 }

package/src/root/js/controller/GroupController.ts

@@ -17,7 +17,7 @@ export class GroupController extends ProtoController
 
     get childs() : any
     {
-        return this._childs.value;
+        return this._childs?.value ?? [];
     }
 
     set childs(value : any)

package/src/root/js/data/DragData.ts

@@ -39,6 +39,14 @@ export class DragData
         return this.scope.get('expanded');
     }
 
+    /**
+     * @returns {any[]}
+     */
+    get cascade() : any[]
+    {
+        return this.scope.get('cascade');
+    }
+
     /**
      * @returns {any[]}
      */

package/src/root/js/module/Pointer.ts

@@ -1,4 +1,5 @@
 import { Arr, Dom, For, Mix, Obj, Run } from "@kizmann/pico-js";
+import * as fs from "node:fs";
 
 export class Pointer
 {
@@ -29,6 +30,11 @@ export class Pointer
         clientX: 0, clientY: 0
     };
 
+    /**
+     * @type {any[]}
+     */
+    static waiter : any[] = [];
+
     static init() : Pointer
     {
         const el = Dom.find(window);
@@ -234,6 +240,18 @@ export class Pointer
         return index !== -1 && index !== this.chains.length - 1;
     }
 
+    static wait(cb : Function)
+    {
+        Arr.append(this.waiter, Run.delay(cb, 250));
+    }
+
+    static stop()
+    {
+        this.waiter = Arr.filter(this.waiter, (clear : Function) => {
+            return clear(), false;
+        });
+    }
+
 }
 
 if ( !globalThis.NPointer ) {

package/src/root/js/module/Styler.ts

@@ -116,4 +116,8 @@ export class Styler
 
 }
 
+if ( ! globalThis.NStyler ) {
+    globalThis.NStyler = Styler;
+}
+
 export default Styler;

package/src/root/js/prop/BaseProps.ts

@@ -77,6 +77,17 @@ export const ClearValue = {
 
 };
 
+export const ThemeNone = {
+
+    /**
+     * @type {PropType<string>}
+     */
+    theme: {
+        type: [String], default: null
+    },
+
+};
+
 export const ThemeDark = {
 
     /**
@@ -87,3 +98,25 @@ export const ThemeDark = {
     },
 
 };
+
+export const EmptyPropsInline = {
+
+    /**
+     * @type {PropType<object>}
+     */
+    emptyProps: {
+        type: [Object], default: () => ({ inline: true })
+    },
+
+};
+
+export const EmptyPropsStacked = {
+
+    /**
+     * @type {PropType<object>}
+     */
+    emptyProps: {
+        type: [Object], default: () => ({ inline: false })
+    },
+
+};

package/src/root/js/prop/DragProps.ts

@@ -30,6 +30,13 @@ export const Draglist = {
         type: [Array], default: () => []
     },
 
+    /**
+     * @type {PropType<array>}
+     */
+    cascade: {
+        type: [Array], default: () => []
+    },
+
     /**
      * @type {PropType<array>}
      */

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

@@ -116,6 +116,7 @@ export class ProtoView
             scope.applyClear();
             scope.set('search', '');
             scope.ref('input')?.value?.focus();
+            scope.emit('clear');
         };
 
         return this.div(config, [
@@ -138,8 +139,10 @@ export class ProtoView
     {
         const { scope } = this.scope;
 
-        const props = {
-            ...options, emptyText: scope.get('emptyText')
+        let props : any = scope.get('emptyProps') || {};
+
+        props = {
+            emptyText: scope.get('emptyText'), ...props, ...options
         };
 
         return this.div('empty', [

package/src/scrollbar/css/scrollbar.scss

@@ -3,6 +3,7 @@
 .n-scrollbar {
     position: relative;
     overflow: clip;
+    //overflow: hidden;
     scrollbar-gutter: stable;
 }
 
@@ -10,12 +11,16 @@ body.n-drag .n-scrollbar {
     overflow: hidden !important;
 }
 
+.n-scrollbar .n-scrollbar__empty {
+    padding: size('base-pad', 'calc($ * 3)') size('base-pad');
+}
+
 .n-scrollbar.is-paused .n-table__wrap {
     display: flex;
 }
 
 .n-scrollbar-spacer {
-    display: inline-block;
+    display: block;
 }
 
 .n-scrollbar-content {

package/src/scrollbar/js/handler/NScrollbarElement.ts

@@ -172,6 +172,10 @@ export class NScrollbarElement
 
     fireScroll()
     {
+        this.el.el.setAttribute('data-scolled', ...[
+            this.cl.el.scrollTop != 0
+        ]);
+
         Dom.find(window).fire('virtualscroll', {
             target: this.cl.el,
         });

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

@@ -4,6 +4,9 @@ import { NVirtualbarController } from "./NVirtualbarController.ts";
 
 export const NVirtualbarProps = {
 
+    ...Props.EmptyText,
+    ...Props.EmptyPropsStacked,
+
     /**
      * @type {PropType<array>}
      */

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

@@ -104,7 +104,7 @@ export class NVirtualbarController extends ProtoController
         const { el, data } = this;
 
         let [grid, width] : [number, number] = [
-            1, el.clientWidth
+            1, el?.clientWidth || 0
         ];
 
         if ( data.grid ) {