@kizmann/nano-ui 1.0.3 → 1.0.5

package/src/file-list/src/file-list-item/file-list-item.scss

@@ -1,134 +0,0 @@
-@import "../../../root/vars";
-
-.n-file-list-item {
-    flex: 1 1 auto;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
-
-.n-file-list-item__remove {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 25px;
-    height: 25px;
-    color: $color-gray-35;
-    background: rgba($color-white, 0.5);
-}
-
-.n-file-list-item__preview {
-    flex: 0 0 auto;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-    font-size: 5vw;
-    background: $color-background;
-    color: rgba($color-primary, 0.5);
-    border-radius: $md-radius;
-}
-
-.n-file-list-item.n-file-list-item--exceed .n-file-list-item__preview {
-    background: rgba($color-danger, 0.1);
-    color: rgba($color-danger, 0.5);
-}
-
-.n-file-list-item__preview:before {
-    content: '\00a0';
-    display: block;
-    height: 0;
-    padding-bottom: 100%;
-}
-
-.n-file-list-item__preview-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    //width: 100%;
-    //height: 100%;
-}
-
-.n-file-list-item__preview-inner img {
-    position: relative;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-}
-
-.n-file-list-item__progress {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    height: 4px;
-    background: $color-background-dark;
-}
-
-
-.n-file-list-item.n-file-list-item--exceed .n-file-list-item__progress {
-    background: rgba($color-danger, 0.15);
-}
-
-.n-file-list-item__progress > span {
-    height: 4px;
-    background: $color-primary;
-}
-
-.n-file-list-item.n-file-list-item--done .n-file-list-item__progress > span {
-    background: $color-success;
-}
-
-.n-file-list-item.n-file-list-item--error .n-file-list-item__progress > span {
-    background: $color-danger;
-}
-
-.n-file-list-item__name {
-    flex: 0 0 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-
-.n-file-list-item__name-inner {
-    flex: 0 1 auto;
-    overflow: hidden;
-    font-size: 15px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 15px 5px 0;
-    color: $color-black;
-}
-
-.n-file-list-item.n-file-list-item--exceed .n-file-list-item__name-inner {
-    color: $color-danger;
-}
-
-.n-file-list-item__meta {
-    flex: 0 0 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-
-.n-file-list-item.n-file-list-item--exceed .n-file-list-item__meta-inner {
-    color: rgba($color-danger, 0.5);
-}
-
-.n-file-list-item__meta-inner {
-    flex: 0 1 auto;
-    overflow: hidden;
-    font-size: 13px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 0 5px 15px;
-    color: $color-gray-50;
-}

package/src/file-list/src/file-list-item/types/file-list-item-image.js

@@ -1,58 +0,0 @@
-import FileListItem from "../file-list-item";
-import { Str } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NFileListItemImage',
-
-    extends: FileListItem,
-
-    methods: {
-
-        getImagePreview()
-        {
-            let reader = new FileReader();
-
-            reader.onload = () => {
-                this.vePreview = reader.result;
-            };
-
-            reader.readAsDataURL(this.value.file);
-        },
-
-    },
-
-    computed: {
-
-        exceed()
-        {
-            return this.NFileList.imageLimit &&
-                (this.value.file.size / 1024) > this.NFileList.imageLimit;
-        }
-
-    },
-
-    data()
-    {
-        return {
-            vePreview: null
-        };
-    },
-
-    mounted()
-    {
-        if ( this.renderPreview && ! this.exceed ) {
-            this.getImagePreview();
-        }
-    },
-
-    renderPreview()
-    {
-        if ( this.vePreview ) {
-            return (<img src={this.vePreview} />);
-        }
-
-        return (<span class="fa fad fa-file-image"></span>);
-    }
-
-}

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>
-        );
-    }
-
-}