@kizmann/nano-ui 1.0.2 → 1.0.4

package/src/scrollbar/src/scrollbar/scrollbar.js

@@ -1,311 +0,0 @@
-import { UUID, Arr, Obj, Dom, Any, Locale, Event, Num } from "@kizmann/pico-js";
-import Optiscroll from 'optiscroll';
-
-export default {
-
-    name: 'NScrollbar',
-
-    provide()
-    {
-        return {
-            NScrollbar: this
-        };
-    },
-
-    props: {
-
-        options: {
-            default()
-            {
-                return {};
-            },
-            type: [Object]
-        },
-
-        relative: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        fixture: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        framerate: {
-            default()
-            {
-                return 5;
-            },
-            type: [Number]
-        },
-
-        wrapClass: {
-            default()
-            {
-                return 'n-scrollbar__wrap';
-            }
-        }
-
-    },
-
-    mounted()
-    {
-        this.bindAdaptHeight();
-        this.bindAdaptWidth();
-        this.bindOptiscroll();
-
-        Event.bind('NScrollbar:resize',
-            this.onResize, this._.uid);
-
-        Event.bind('NResizer:moved',
-            this.onUpdate, this._.uid);
-
-        Dom.find(window).on('resize', 
-            this.onResize, this._.uid);
-
-        Dom.find(this.$el).on('sizechange', 
-            this.onSizechange, this._.uid);
-
-        Dom.find(this.$el).on('scroll', 
-            this.onScroll, this._.uid);
-    },
-
-    updated()
-    {
-        if ( this.optiscroll ) {
-            Dom.find(this.$el).addClass('is-enabled');
-        }
-
-        if ( this.passedHeight || this.passedWidth ) {
-            Dom.find(this.$el).addClass('is-ready');
-        }
-    },
-
-    beforeUnmount()
-    {
-        this.unbindAdaptHeight();
-        this.unbindAdaptWidth();
-        this.unbindOptiscroll();
-
-        Event.unbind('NScrollbar:resize', 
-            this._.uid);
-
-        Event.unbind('NResizer:moved', 
-            this._.uid);
-
-        Dom.find(window).off('resize', 
-            null, this._.uid);
-
-        Dom.find(this.$el).off('sizechange', 
-            null, this._.uid);
-
-        Dom.find(this.$el).off('scroll', 
-            null, this._.uid);
-    },
-
-    methods: {
-
-        scrollTo(x = 0, y = 0, delay = 0)
-        {
-            Any.delay(() => this.onScrollTo(x, y), delay);
-        },
-
-        onScrollTo(x = 0, y = 0)
-        {
-            this.optiscroll.scrollTo(x, y, 0);
-        },
-
-        scrollIntoView(selector, delay = 200)
-        {
-            Any.delay(() => this.onScrollIntoView(selector), delay);
-        },
-
-        onScrollIntoView(selector)
-        {
-            this.optiscroll.scrollIntoView(selector, 0);
-        },
-        
-        adaptHeight()
-        {
-            let height = Dom.find(this.$refs.content)
-                .child().innerHeight();
-
-            let window = Dom.find(this.$el)
-                .height();
-
-            if ( height === this.passedHeight ) {
-                return;
-            }
-
-            if ( window ) {
-                this.passedHeight = height;
-            }
-
-            let style = {
-                height: height + 'px'
-            };
-
-            if ( this.fixture ) {
-                Dom.find(this.$refs.content).child().css(style);
-            }
-
-            if ( ! this.relative ) {
-                return Any.delay(this.onSizechange, 100);
-            }
-
-            Dom.find(this.$refs.spacer).child().css(style);
-        },
-
-        bindAdaptHeight()
-        {
-            this.refreshHeight = setInterval(this.adaptHeight, 
-                1000 / this.framerate);
-        },
-
-        unbindAdaptHeight()
-        {
-            clearInterval(this.refreshHeight);
-        },
-
-        adaptWidth()
-        {
-            if ( this.resizeTimer ) {
-                return;
-            }
-
-            let width = Dom.find(this.$refs.content)
-                .child().innerWidth();
-
-            let window = Dom.find(this.$el)
-                .width();
-
-            if ( width === this.passedWidth ) {
-                return;
-            }
-
-            if ( window ) {
-                this.passedWidth = width;
-            }
-
-            let style = {
-                width: width + 'px'
-            };
-
-            if ( this.fixture ) {
-                this.onUpdate();
-            }
-
-            if ( ! this.relative ) {
-                return Any.delay(this.onSizechange, 100);
-            }
-
-            Dom.find(this.$refs.spacer).child().css(style);
-        },
-
-        bindAdaptWidth()
-        {
-            this.refreshWidth = setInterval(this.adaptWidth, 
-                1000 / this.framerate);
-        },
-
-        unbindAdaptWidth()
-        {
-            clearInterval(this.refreshWidth);
-        },
-
-        onScroll(event)
-        {
-            let scrollTop = this.$refs.content
-                .scrollTop;
-
-            this.$emit('scrollupdate', scrollTop);
-        },
-
-        onSizechange(event)
-        {
-            let height = Dom.find(this.$el).height();
-
-            if ( this.passedHeight || this.passedWidth ) {
-                Dom.find(this.$el).addClass('is-ready');
-            }
-
-            this.$emit('sizechange', height);
-        },
-
-        onResize(event)
-        {
-            if ( ! this.fixture ) {
-                return;
-            }
-
-            Dom.find(this.$refs.content)
-                .child().css(null);
-
-            clearTimeout(this.resizeTimer);
-
-            this.resizeTimer = setTimeout(
-                this.onUpdate, 500);
-            
-            Dom.find(this.$el).fire('resized');
-        },
-
-        onUpdate()
-        {
-            if ( ! this.fixture ) {
-                return;
-            }
-
-            let $child = Dom.find(this.$refs.content)
-                .child();
-
-            let height = $child.actual(() => {
-                return $child.scrollHeight();
-            });
-
-            if ( height !== this.passedHeight ) {
-                $child.css({ height: height + 'px' });
-            }
-
-            let width = $child.actual(() => {
-                return $child.scrollWidth();
-            });
-
-            if ( width !== this.passedWidth ) {
-                $child.css({ width: width + 'px' });
-            }
-
-            delete this.resizeTimer;
-        }
-
-    },
-
-    render()
-    {
-        let classList = [
-            'n-scrollbar'
-        ];
-
-        return (
-            <div class={classList} {...Obj.except(this.$attrs, ['class'])}>
-                <div class="n-scrollbar-content" ref="content">
-                    <div class={this.wrapClass}>
-                        { this.$slots.default && this.$slots.default() }
-                    </div>
-                </div>
-                <div class="n-scrollbar-spacer" ref="spacer">
-                    <div class={this.wrapClass}>
-                        { /* Adapt inner height */ }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-}

package/src/virtualscroller/src/virtualscroller/virtualscroller.js

@@ -1,267 +0,0 @@
-import { UUID, Arr, Obj, Num, Dom, Any, Locale, Event } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NVirtualscroller',
-
-    model: {
-        prop: 'items'
-    },
-
-    props: {
-
-        items: {
-            default()
-            {
-                return [];
-            }
-        },
-
-        itemHeight: {
-            default()
-            {
-                return 30;
-            }
-        },
-
-        viewportHeight: {
-            default()
-            {
-                return false;
-            }
-        },
-
-        renderNode: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        bufferItems: {
-            default()
-            {
-                return 8;
-            },
-            type: [Number]
-        },
-
-        frameRate: {
-            default()
-            {
-                return 10;
-            },
-            type: [Number]
-        }
-
-    },
-
-    methods: {
-
-        limitedRefreshDriver(forceUpdate = false, overrideBuffer = false)
-        {
-            let framerateTimer = (val = null) => {
-
-                if ( ! Any.isEmpty(val) ) {
-                    this.refreshDriverFramerate = val;
-                }
-
-                return this.refreshDriverFramerate;
-            };
-
-            Any.framerate(() => {
-
-                clearTimeout(this.refreshDriverDebounce);
-
-                this.refreshDriverDebounce = setTimeout(() => {
-                    this.refreshDriver(forceUpdate, overrideBuffer);
-                }, (1000 / this.frameRate) + 50);
-
-                this.refreshDriver(forceUpdate, overrideBuffer);
-
-            }, this.frameRate, framerateTimer)();
-        },
-
-        refreshDriver(forceUpdate = false, overrideBuffer = false)
-        {
-            if ( ! this.$refs.viewport ) {
-                return;
-            }
-
-            this.latestBufferItems = this.latestBufferItems || this.bufferItems;
-
-            if ( overrideBuffer ) {
-                this.latestBufferItems = this.bufferItems / 2;
-            }
-
-            let scrollTop = 0, scrollFix = this.scrollFix || scrollTop;
-
-            if ( this.$refs.viewport ) {
-                scrollTop = this.$refs.viewport.$el.scrollTop;
-            }
-
-            let scrollBuffer = (this.latestBufferItems / 2 * this.itemHeight);
-
-            if ( scrollTop > scrollFix + scrollBuffer || scrollTop < scrollFix - scrollBuffer ) {
-                scrollFix = scrollTop;
-            }
-
-            let options = {
-                bufferItems: this.latestBufferItems,
-                totalItems: this.items.length,
-                viewportHeight: this.height,
-                minRowHeight: this.itemHeight,
-                scrollTop: scrollTop,
-            };
-
-            if ( this.scrollFix === scrollFix && ! forceUpdate ) {
-                return;
-            }
-
-            this.scrollFix = scrollFix;
-
-            let newState = virtualScrollDriver(options, this.state, () => {
-                return this.itemHeight;
-            });
-
-            let isEqualState = Arr.reduce(Any.keys(newState), (merge, key) => {
-                return merge && this.state[key] === newState[key];
-            }, true);
-
-            this.state = newState;
-
-            if ( isEqualState ) {
-                return;
-            }
-
-            this.veUpdate++;
-        },
-
-        discoverHeight()
-        {
-            if ( this.viewportHeight ) {
-                this.height = Dom.find(this.$el).height();
-            }
-
-            if ( ! this.viewportHeight ) {
-                this.height = this.items.length * this.itemHeight;
-            }
-
-            if ( this.height === 0 ) {
-                return Any.delay(this.discoverHeight, 100);
-            }
-
-            Any.async(() => this.limitedRefreshDriver(true, false));
-        },
-
-        eventScroll()
-        {
-            Any.async(() => this.limitedRefreshDriver(false, false));
-        },
-
-        eventScrollstop()
-        {
-            Any.async(() => this.limitedRefreshDriver(false, false));
-        }
-
-    },
-
-    data()
-    {
-        return {
-            height: 0, scrollFix: -1, veUpdate: 0
-        };
-    },
-
-    beforeMount()
-    {
-        this.state = {
-            items: Arr.make(this.items.length)
-        };
-    },
-
-    mounted()
-    {
-        this.$watch('items', this.discoverHeight);
-
-        let ident = {
-            _uid: this.uid
-        };
-
-        Dom.find(this.$el).on('scrollstop', this.eventScrollstop, ident);
-
-        Dom.find(this.$el).observerResize(this.discoverHeight)(this.$el);
-    },
-
-    beforeDestroy()
-    {
-        let ident = {
-            _uid: this.uid
-        };
-
-        Dom.find(this.$el).off('scrollstop', null, ident);
-    },
-
-    renderItems(start, count)
-    {
-        return Arr.each(this.items.slice(start, start + count), (value, index) => {
-            return this.renderNode({ value, index });
-        });
-    },
-
-    renderBody()
-    {
-        if ( ! this.items.length ) {
-            return this.$slots.empty || null;
-        }
-
-        if ( this.viewportHeight === false ) {
-            return Arr.each(this.items, (value, index) => {
-                return this.renderNode({ value, index });
-            });
-        }
-
-        let targetHeight = Obj.get(this.state, 'targetHeight');
-
-        let style = {
-            overflow: 'auto', overflowAnchor: 'none', outline: 'none', height: this.height + 'px'
-        };
-
-        let events = {
-            scroll: this.eventScroll
-        };
-
-        return (
-            <NScrollbar ref="viewport" on={events} style={style}>
-                <div key={this.veUpdate} style={{ height: targetHeight ? targetHeight + 'px' : 'auto', overflow: 'hidden' }}>
-                    { ! Any.isEmpty(this.state.topPlaceholderHeight) &&
-                        <div draggable={false} style={{ height: this.state.topPlaceholderHeight + 'px' }}></div>
-                    }
-                    { ! Any.isEmpty(this.state.middleItemCount) &&
-                        this.ctor('renderItems')(this.state.firstMiddleItem, this.state.middleItemCount)
-                    }
-                    { ! Any.isEmpty(this.state.middlePlaceholderHeight) &&
-                        <div draggable={false} style={{ height: this.state.middlePlaceholderHeight + 'px' }}></div>
-                    }
-                    { ! Any.isEmpty(this.state.lastItemCount) &&
-                        this.ctor('renderItems')(this.items.length - this.state.lastItemCount, this.state.lastItemCount)
-                    }
-                </div>
-            </NScrollbar>
-        );
-    },
-
-    render($render)
-    {
-        this.$render = $render;
-
-        return (
-            <div class="n-virtualscroller">
-                { this.$slots.before || null }
-                { this.ctor('renderBody')() }
-                { this.$slots.default || null }
-            </div>
-        );
-    }
-
-}