@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/scrollbar/{src/scrollbar → css}/scrollbar.scss

@@ -1,26 +1,21 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 .n-scrollbar {
     position: relative;
-    overflow: hidden;
+    overflow: clip;
+    scrollbar-gutter: stable;
 }
 
-.n-scrollbar.is-paused .n-table__wrap {
-    display: flex;
+body.n-drag .n-scrollbar {
+    overflow: hidden !important;
 }
 
-.n-scrollbar-test {
-    opacity: 0;
-    position: fixed;
-    width: 15px;
-    height: 15px;
-    overflow: scroll;
-    -webkit-overflow-scrolling: touch;
+.n-scrollbar.is-paused .n-table__wrap {
+    display: flex;
 }
 
-.n-scrollbar-test > div {
-    width: 16px;
-    height: 16px;
+.n-scrollbar-spacer {
+    display: inline-block;
 }
 
 .n-scrollbar-content {
@@ -34,14 +29,13 @@
     -webkit-overflow-scrolling: touch;
 }
 
-.n-scrollbar:not(.n-scrollbar--native) > .n-scrollbar-content {
-    right: -15px;
-    bottom: -15px;
+.n-scrollbar.n-scrollbar-content::-webkit-scrollbar {
+    display: none;
 }
 
-.n-scrollbar.n-windows:not(.n-scrollbar--native) > .n-scrollbar-content {
-    right: -17px;
-    bottom: -17px;
+.n-scrollbar-content {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
 }
 
 .n-scrollbar:not(.n-overflow-x) > .n-scrollbar-content {
@@ -58,30 +52,37 @@
     position: relative;
 }
 
+.n-scrollbar > .n-scrollbar-content > div {
+    display: flow-root;
+}
+
 .n-scrollbar-v,
 .n-scrollbar-h {
     cursor: default;
     position: absolute;
     z-index: 500;
     user-select: none;
+    transition: transform 0.200s;
+}
+
+.n-scrollbar-v.is-active,
+.n-scrollbar-h.is-active {
+    transition: transform 0.125s;
 }
 
 .n-scrollbar-v {
     top: 0;
     right: 0;
-    width: 14px;
-
+    width: 15px;
 }
 
 .n-scrollbar-h {
     left: 0;
     bottom: 0;
-    height: 14px;
+    height: 15px;
 }
 
-.n-scrollbar--native > .n-scrollbar-v,
 .n-scrollbar:not(.has-vtrack) > .n-scrollbar-v,
-.n-scrollbar--native > .n-scrollbar-h,
 .n-scrollbar:not(.has-htrack) > .n-scrollbar-h {
     display: none;
 }

package/src/scrollbar/css/vitrualbar.scss

@@ -0,0 +1,47 @@
+@use "../../root/css/helpers" as *;
+
+.n-virtualbar__inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+}
+
+.n-virtualbar__row {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: flex-start;
+    height: var(--n-item-height);
+}
+
+.n-virtualbar__item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    overflow: hidden;
+    height: var(--n-item-height);
+}
+
+.n-virtualbar__row > .n-virtualbar__item {
+    flex: 0 0 auto;
+    width: var(--n-item-width);
+}
+
+div:not(.n-virtualbar__row) > .n-virtualbar__item {
+    flex-direction: row;
+}
+
+div:not(.n-virtualbar__row) > .n-virtualbar__item {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    flex-direction: row;
+}

package/src/scrollbar/index.scss

@@ -1 +1,2 @@
-@forward "./src/scrollbar/scrollbar";
+@forward "./css/scrollbar";
+@forward "./css/vitrualbar";

package/src/scrollbar/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import NScrollbar from "./js/scrollbar/NScrollbar.ts";
+import NVirtualbar from "./js/virtualbar/NVirtualbar.ts";
+
+export default function (App : App) {
+    App.component(NScrollbar.name, NScrollbar);
+    App.component(NVirtualbar.name, NVirtualbar);
+}

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

@@ -0,0 +1,441 @@
+import { Arr, Dom, Hash, Obj, Run } from "@kizmann/pico-js";
+import NScrollbarHelper from "./NScrollbarHelper.ts";
+
+export class NScrollbarElement
+{
+    /**
+     * @type {boolean}
+     */
+    native : boolean;
+
+    /**
+     * @type {ResizeObserver}
+     */
+    resize : ResizeObserver;
+
+    /**
+     * @type {MutationObserver}
+     */
+    mutate : MutationObserver;
+
+    /**
+     * @type {Dom}
+     */
+    el : Dom;
+
+    /**
+     * @type {Dom}
+     */
+    cl : Dom;
+
+    /**
+     * @type {Dom}
+     */
+    wl : Dom;
+
+    /**
+     * @type {Dom}
+     */
+    sbar : Dom;
+
+    /**
+     * @type {Dom}
+     */
+    hbar : Dom;
+
+    /**
+     * @type {Dom}
+     */
+    vbar : Dom;
+
+    /**
+     * @type {number}
+     */
+    width : number = -1;
+
+    /**
+     * @type {number}
+     */
+    height : number = -1;
+
+    /**
+     * @type {any}
+     */
+    buffer : any = {};
+
+    options : any = {
+        uid: null,
+        bem: 'n-scrollbar',
+        overflowX: true,
+        overflowY: true,
+        scrollPortal: false,
+        onReady: () => null,
+        onUpdate: () => null,
+    }
+
+    constructor(el : HTMLElement, options : any = {})
+    {
+        this.native = NScrollbarHelper.native;
+
+        if ( !options.uid ) {
+            options.uid = Hash.uuid();
+        }
+
+        this.options = {
+            ...this.options, ...options
+        };
+
+        this.el = Dom.find(el);
+        this.cl = Dom.find(this.el.childs()[0]);
+        this.wl = Dom.find(this.cl.childs()[0]);
+
+        if ( this.native ) {
+            this.el.addClass(`${this.options.bem}--native`);
+        }
+
+        this.makePseudo();
+        this.detectRect();
+        this.observeBox();
+
+        this.options.onReady({
+            target: this.cl.el,
+        });
+    }
+
+    destroy()
+    {
+        this.resize.disconnect();
+        this.resize = null;
+        this.mutate.disconnect();
+        this.mutate = null;
+        this.cl.off('scroll');
+        this.sbar.el.remove();
+        this.hbar.off('mousedown');
+        this.hbar.el.remove();
+        this.vbar.off('mousedown');
+        this.vbar.el.remove();
+    }
+
+    makePseudo()
+    {
+        const { bem, overflowX, overflowY, scrollPortal } = this.options;
+
+        const fn = Run.framerate(() => {
+            this.adaptBars();
+            this.fireScroll();
+        }, 24);
+
+        let portal = this.el;
+
+        if ( scrollPortal ) {
+            portal = this.el.parent().upnode('.n-scrollbar');
+        }
+
+        this.cl.on('scroll', fn, {
+            passive: true
+        });
+
+        this.cl.on('wheel', fn, {
+            passive: true
+        });
+
+        this.sbar = Dom.make('div', {
+            class: `${bem}-spacer`
+        });
+
+        this.sbar.appendTo(this.el);
+
+        this.hbar = Dom.make('div', {
+            class: `${bem}-h`,
+        });
+
+        this.hbar.on('mousedown', (e : any) => {
+            this.onMousedown(e, 'width', this.hbar);
+        });
+
+        if ( overflowX ) {
+            this.hbar.appendTo(portal);
+        }
+
+        this.vbar = Dom.make('div', {
+            class: `${bem}-v`
+        });
+
+        this.vbar.on('mousedown', (e:any) => {
+            this.onMousedown(e, 'height', this.vbar);
+        });
+
+        if ( overflowY ) {
+            this.vbar.appendTo(portal);
+        }
+    }
+
+    fireScroll()
+    {
+        Dom.find(window).fire('virtualscroll', {
+            target: this.cl.el,
+        });
+    }
+
+    returnRect()
+    {
+        this.el.addClass('is-paused');
+
+        const rect = Obj.only(this.wl.rect(), [
+            'width', 'height',
+        ]);
+
+        rect.height += Dom.num(this.wl.computed('margin-top'));
+        rect.height += Dom.num(this.wl.computed('margin-bottom'));
+
+        rect.width += Dom.num(this.wl.computed('margin-left'));
+        rect.width += Dom.num(this.wl.computed('margin-right'));
+
+        this.el.remClass('is-paused');
+
+        return rect;
+    }
+
+    equalRect(rect : any)
+    {
+        const { width, height } = this;
+
+        [this.width, this.height] = [
+            rect.width, rect.height
+        ];
+
+        if ( width !== rect.width ) {
+            return false;
+        }
+
+        if ( height !== rect.height ) {
+            return false;
+        }
+
+        return true;
+    }
+
+    detectRect()
+    {
+        const { overflowX, overflowY } = this.options;
+
+        const rect = Dom.find(this.sbar).actual(() => {
+            return this.returnRect();
+        });
+
+        if ( !this.equalRect(rect) ) {
+            Run.async(() => this.adaptBars());
+        }
+
+        if ( !overflowX ) {
+            delete rect.width;
+        }
+
+        if ( !overflowY ) {
+            delete rect.width;
+        }
+
+        this.sbar.style(rect);
+
+        this.options.onUpdate({
+            target: this.cl.el,
+        });
+    }
+
+    adaptBars()
+    {
+        const { overflowX, overflowY, scrollPortal } = this.options;
+
+        let portal : any = this.el;
+
+        if ( scrollPortal ) {
+            portal = this.el.parent().upnode('.n-scrollbar');
+        }
+
+        const yrect = {
+            scroll: this.cl.el.scrollHeight,
+            client: this.el.el.clientHeight,
+        };
+
+        yrect.scroll -= Dom.num(this.wl.computed('margin-bttom'));
+
+        const hasy = yrect.client < yrect.scroll;
+
+        if ( hasy ) {
+            this.applyBar('height', this.vbar, yrect, portal);
+        }
+
+        if ( overflowY ) {
+            portal.stateClass('has-vtrack', hasy);
+        }
+
+        const xrect = {
+            scroll: this.cl.el.scrollWidth,
+            client: this.el.el.clientWidth,
+        };
+
+        xrect.scroll -= Dom.num(this.wl.computed('margin-right'));
+
+        const hasx = xrect.client < xrect.scroll;
+
+        if ( hasx ) {
+            this.applyBar('width', this.hbar, xrect, portal);
+        }
+
+        if ( overflowX ) {
+            portal.stateClass('has-htrack', hasx);
+        }
+    }
+
+    applyBar(key : string, el : Dom, rect : any, portal : any)
+    {
+        if ( el == null ) {
+            return;
+        }
+
+        let size = (rect.client / rect.scroll) * rect.client;
+
+        let min = Math.max(...[
+            size, 50
+        ]);
+
+        let max = Math.ceil(...[
+            (rect.client / rect.scroll) *
+            (rect.scroll - rect.client)
+        ]);
+
+        let scroll = 0;
+
+        if ( key === 'width' ) {
+            scroll = this.cl.el.scrollLeft;
+        }
+
+        if ( key === 'height' ) {
+            scroll = this.cl.el.scrollTop;
+        }
+
+        const ratio = (max - (min - size) - 10) / max;
+
+        const offset = Math.ceil(...[
+            (rect.client / rect.scroll) * scroll * ratio
+        ]) || 0;
+
+        let style : any = {
+            [key]: (min = Math.ceil(min))
+        };
+
+        this.buffer[key] = {
+            min, max, scroll, ratio, offset, rect
+        };
+
+        const port = this.el.offset(null, portal);
+
+        if ( key === 'width' ) {
+            style.translate = [offset + port.left + 'px', 0];
+        }
+
+        if ( key === 'height' ) {
+            style.translate = [0, offset + port.top + 'px'];
+        }
+
+        const comp = style.translate.join('');
+
+        if ( this.buffer['fx' + key] !== comp ) {
+            Run.frame(() => el.style(style));
+        }
+
+        this.buffer['fx' + key] = comp;
+    }
+
+    observeBox()
+    {
+        // @ts-ignore
+        this.resize = new ResizeObserver(Run.debounce(() => {
+            Run.async(() => this.detectRect());
+        }, 30));
+
+        this.resize.observe(this.wl.el, {
+            box: 'border-box'
+        });
+
+        // @ts-ignore
+        this.mutate = new MutationObserver(() => {
+            this.detectRect();
+        });
+
+        this.mutate.observe(this.el.el, {
+            attributeFilter: ['style']
+        });
+    }
+
+    onMousedown(e : any, key : string, el : Dom)
+    {
+        const { uid } = this.options;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        if ( e.button !== 0 ) {
+            return;
+        }
+
+        let store = {
+            pos: 0, scroll: this.buffer[key].scroll
+        };
+
+        if ( key === 'width' ) {
+            store.pos = e.clientX;
+        }
+
+        if ( key === 'height' ) {
+            store.pos = e.clientY;
+        }
+
+        const doc = Dom.find(document.body);
+
+        doc.on('mousemove', (e : any) => {
+            this.onMousemove(e, key, store);
+        }, { uid, passive: true });
+
+        doc.once('mouseup', (e : any) => {
+            doc.off('mousemove', { uid });
+            el.remClass('is-active');
+        });
+
+        el.addClass('is-active');
+    }
+
+    onMousemove(e : any, key : string, { pos, scroll } : any)
+    {
+        const {
+            min, ratio, rect
+        } = this.buffer[key];
+
+        let newpos = 0;
+
+        if ( key === 'width' ) {
+            newpos = e.clientX;
+        }
+
+        if ( key === 'height' ) {
+            newpos = e.clientY;
+        }
+
+        const calc = (rect.client / rect.scroll) *
+            scroll * ratio;
+
+        const rela = (newpos - pos) + calc;
+
+        const result = rela / (rect.client - min - 10) *
+            (rect.scroll - rect.client);
+
+        if ( key === 'width' ) {
+            Run.frame(() => this.cl.el.scrollLeft = result);
+        }
+
+        if ( key === 'height' ) {
+            Run.frame(() => this.cl.el.scrollTop = result);
+        }
+    }
+
+}

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

@@ -0,0 +1,51 @@
+import { Arr, Dom } from "@kizmann/pico-js";
+
+export default class NScrollbarHelper
+{
+    /**
+     * @type {boolean}
+     */
+    static native : boolean;
+
+    static init()
+    {
+        if ( this.native == null ) {
+            this.detectNative();
+        }
+
+        return this;
+    }
+
+    static detectNative()
+    {
+        const el = Dom.make('div', {
+            classList: 'n-scrollbar-test', html: '<div></div>'
+        });
+
+        el.appendTo(document.body);
+
+        const vrect = {
+            client: el.el.clientHeight,
+            offset: el.el.offsetHeight,
+        };
+
+        const hrect = {
+            client: el.el.clientWidth,
+            offset: el.el.offsetWidth,
+        };
+
+        const rainbow = [
+            vrect.client === vrect.offset,
+            hrect.client === hrect.offset,
+        ];
+
+        this.native = !Arr.has(rainbow, false);
+
+        el.el.remove();
+    }
+
+}
+
+if ( !globalThis.NScrollbarHelper ) {
+    globalThis.NScrollbarHelper = NScrollbarHelper.init();
+}

package/src/scrollbar/js/scrollbar/NScrollbar.ts

@@ -0,0 +1,61 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NScrollbarController } from "./NScrollbarController.ts";
+
+export const NScrollbarProps = {
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    overflowX: {
+        type: [Boolean], default: true
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    overflowY: {
+        type: [Boolean], default: true
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    wrapClass: {
+        type: [String], default: ':bem__wrap'
+    },
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NScrollbar',
+
+    /**
+     * @type {typeof NScrollbarProps}
+     */
+    props: NScrollbarProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        'ready',
+        'scroll',
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NScrollbarController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});