@kizmann/nano-ui 1.0.3 → 1.0.4

package/src/table/src/table-filter/types/{table-filter-option.js → table-filter-option.jsx}

@@ -1,4 +1,4 @@
-import TableFilter from "../table-filter";
+import TableFilter from "../table-filter.jsx";
 import { Arr, Obj, Any, Locale } from "@kizmann/pico-js";
 
 export default {

package/src/table/src/table-filter/types/{table-filter-string.js → table-filter-string.jsx}

@@ -1,4 +1,4 @@
-import TableFilter from "../table-filter";
+import TableFilter from "../table-filter.jsx";
 import { Dom, Any, Locale } from "@kizmann/pico-js";
 
 export default {

package/src/tabs/index.js

@@ -1,5 +1,5 @@
-import Tabs from './src/tabs/tabs';
-import TabsItem from './src/tabs-item/tabs-item';
+import Tabs from "./src/tabs/tabs.jsx";
+import TabsItem from "./src/tabs-item/tabs-item.jsx";
 
 export default function (App) {
     App.component(Tabs.name, Tabs);

package/src/tags/index.js

@@ -1,5 +1,5 @@
-import Tags from './src/tags/tags';
-import TagsItem from './src/tags-item/tags-item';
+import Tags from "./src/tags/tags.jsx";
+import TagsItem from "./src/tags-item/tags-item.jsx";
 
 export default function (App) {
     App.component(Tags.name, Tags);

package/src/textarea/index.js

@@ -1,4 +1,4 @@
-import Textarea from './src/textarea/textarea';
+import Textarea from "./src/textarea/textarea.jsx";
 
 export default function (App) {
     App.component(Textarea.name, Textarea);

package/src/timepicker/index.js

@@ -1,5 +1,5 @@
-import TimepickerPanel from "./src/timepicker-panel/timepicker-panel";
-import Timepicker from "./src/timepicker/timepicker";
+import TimepickerPanel from "./src/timepicker-panel/timepicker-panel.jsx";
+import Timepicker from "./src/timepicker/timepicker.jsx";
 
 export default function (App) {
     App.component(TimepickerPanel.name, TimepickerPanel);

package/src/transfer/index.js

@@ -1,4 +1,4 @@
-import Transfer from "./src/transfer/transfer";
+import Transfer from "./src/transfer/transfer.jsx";
 
 export default function (App) {
     App.component(Transfer.name, Transfer);

package/src/virtualscroller/index.js

@@ -1,4 +1,4 @@
-import Virtualscroller from './src/virtualscroller/virtualscroller.beta';
+import Virtualscroller from "./src/virtualscroller/virtualscroller.jsx";
 
 export default function (App) {
     App.component(Virtualscroller.name, Virtualscroller);

package/src/file-list/index.js

@@ -1,10 +0,0 @@
-import Vue from "vue";
-
-import FileList from './src/file-list/file-list';
-Vue.component(FileList.name, FileList);
-
-import FileListItem from './src/file-list-item/file-list-item';
-Vue.component(FileListItem.name, FileListItem);
-
-import FileListItemImage from './src/file-list-item/types/file-list-item-image';
-Vue.component(FileListItemImage.name, FileListItemImage);

package/src/file-list/index.scss

@@ -1,2 +0,0 @@
-@import "./src/file-list/file-list";
-@import "./src/file-list-item/file-list-item";

package/src/file-list/src/file-list/file-list.js

@@ -1,187 +0,0 @@
-import { Arr, Obj, Any } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NFileList',
-
-    model: {
-        prop: 'items'
-    },
-
-    props: {
-
-        items: {
-            default()
-            {
-                return [];
-            },
-            type: [Array]
-        },
-
-        useProgress: {
-            default()
-            {
-                return true;
-            },
-            type: [Boolean]
-        },
-
-        fileProp: {
-            default()
-            {
-                return 'file';
-            },
-            type: [String]
-        },
-
-        uniqueProp: {
-            default()
-            {
-                return 'id';
-            },
-            type: [String]
-        },
-
-        doneProp: {
-            default()
-            {
-                return 'done';
-            },
-            type: [String]
-        },
-
-        errorProp: {
-            default()
-            {
-                return 'error';
-            },
-            type: [String]
-        },
-
-        progressProp: {
-            default()
-            {
-                return 'progress';
-            },
-            type: [String]
-        },
-
-        imageLimit: {
-            default()
-            {
-                return 16000;
-            },
-            type: [Number]
-        },
-
-        fileLimit: {
-            default()
-            {
-                return 0;
-            },
-            type: [Number]
-        },
-
-        casts: {
-            default()
-            {
-                return [
-                    { match: 'image/*', use: 'NFileListItemImage' }
-                ];
-            },
-            type: [Array]
-        },
-
-        defaultCast: {
-            default()
-            {
-                return 'NFileListItem';
-            },
-            type: [String]
-        },
-
-        threshold: {
-            default()
-            {
-                return 20;
-            },
-            type: [Number]
-        }
-
-    },
-
-    provide()
-    {
-        return {
-            NFileList: this
-        };
-    },
-
-    methods: {
-
-        removeFile(unique)
-        {
-            if ( ! Any.isString(unique) ) {
-                unique = unique[this.uniqueProp]
-            }
-
-            Arr.remove(this.items, {
-                [this.uniqueProp]: unique
-            });
-        }
-
-    },
-
-    renderFile(value)
-    {
-        let file = Obj.get(value, this.fileProp);
-
-        let component = Arr.find(this.casts, (cast) => {
-            return file.type.match(
-                new RegExp('^' + cast.match.replace('*', '.*?') + '$')
-            );
-        });
-
-        let props = { value };
-
-        if ( this.threshold ) {
-            props.renderPreview = true;
-        }
-
-        return (
-            this.$render(component ? component.use : 'NFileListItem', {
-                key: value[this.uniqueProp], props: props
-            })
-        );
-    },
-
-    renderEmpty()
-    {
-        return (
-            <div class="n-file-list__empty">
-                <span>{ this.$slots.empty || this.trans('No entries') }</span>
-            </div>
-        );
-    },
-
-    renderBody()
-    {
-        return (
-            <NScrollbar class="n-file-list">
-                { Arr.each(this.items, this.ctor('renderFile')) }
-            </NScrollbar>
-        );
-    },
-
-    render($render)
-    {
-        this.$render = $render;
-
-        return (
-            <div class="n-file-list__wrapper">
-                { this.items.length ? this.ctor('renderBody')() : this.ctor('renderEmpty')() }
-            </div>
-        );
-    }
-
-}

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

@@ -1,47 +0,0 @@
-@import "../../../root/vars";
-
-.n-file-list__wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: stretch;
-}
-
-.n-file-list__empty {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.n-file-list__empty span {
-    color: $color-gray-50;
-}
-
-.n-file-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding: 5px;
-}
-
-.n-file-list > div {
-    flex: 0 0 auto;
-    display: flex;
-    flex-direction: column;
-    width: 25%;
-    padding: 5px;
-}
-
-@media (max-width: 640px) {
-    .n-file-list > div {
-        width: 50%;
-    }
-}
-
-@media (max-width: 420px) {
-    .n-file-list > div {
-        width: 100%;
-    }
-}

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

@@ -1,168 +0,0 @@
-import { Arr, Obj, Str, Any } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NFileListItem',
-
-    inject: {
-
-        NFileList: {
-            default: undefined
-        }
-
-    },
-
-    props: {
-
-        value: {
-            default()
-            {
-                return {};
-            },
-            type: [Object]
-        },
-
-        renderPreview: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        }
-
-    },
-
-    computed: {
-
-        file()
-        {
-            return Obj.get(this.value, this.NFileList.fileProp);
-        },
-
-        done()
-        {
-            return Obj.get(this.value, this.NFileList.doneProp);
-        },
-
-        error()
-        {
-            return Obj.get(this.value, this.NFileList.errorProp);
-        },
-
-        progress()
-        {
-            return Obj.get(this.value, this.NFileList.progressProp);
-        },
-
-        exceed()
-        {
-            return this.NFileList.fileLimit &&
-                (this.value.file.size / 1024) > this.NFileList.fileLimit;
-        }
-
-    },
-
-    methods: {
-
-        remove()
-        {
-            this.NFileList.removeFile(this.value);
-        }
-
-    },
-
-    data()
-    {
-        return {
-            classList: []
-        };
-    },
-
-    renderPreview()
-    {
-        return (
-            <span class="fa fad fa-file"></span>
-        );
-    },
-
-    renderName()
-    {
-        if ( ! this.file ) {
-            return null;
-        }
-
-        return (
-            <span>{ this.file.name }</span>
-        );
-    },
-
-    renderMeta()
-    {
-        let body = Str.filesize(this.file.size);
-
-        if ( ! this.file ) {
-            return null;
-        }
-
-        let limit = {
-            size: (this.NFileList.fileLimit || this.NFileList.imageLimit) / 1000
-        };
-
-        if ( this.exceed ) {
-            body = this.trans('File exceeds filelimit of :size mb', limit);
-        }
-
-        return (
-            <span>{ body }</span>
-        );
-    },
-
-    render($render)
-    {
-        this.$render = $render;
-
-        let classList = Arr.merge(['n-file-list-item'],
-            this.classList);
-
-        if ( this.exceed === true ) {
-            classList.push('n-file-list-item--exceed');
-        }
-
-        if ( this.done === true ) {
-            classList.push('n-file-list-item--done');
-        }
-
-        if ( this.error === true ) {
-            classList.push('n-file-list-item--error');
-        }
-
-        return (
-            <div class={classList}>
-                <div class="n-file-list-item__preview">
-                    <div class="n-file-list-item__preview-inner">
-                        { this.ctor('renderPreview')() }
-                    </div>
-                    { this.NFileList.useProgress &&
-                        <div class="n-file-list-item__progress">
-                            <span style={{ width: this.progress + '%' }}></span>
-                        </div>
-                    }
-                </div>
-                <div class="n-file-list-item__name">
-                    <div class="n-file-list-item__name-inner">
-                        { this.ctor('renderName')() }
-                    </div>
-                </div>
-                <div class="n-file-list-item__meta">
-                    <div class="n-file-list-item__meta-inner">
-                        { this.ctor('renderMeta')() }
-                    </div>
-                </div>
-                <a class="n-file-list-item__remove" href="javascript:void(0)" vOn:click={this.remove}>
-                    <span class={nano.Icons.times}></span>
-                </a>
-            </div>
-        );
-    }
-
-}

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