@kizmann/nano-ui 1.0.3 → 1.0.5

package/src/select/index.js

@@ -1,7 +1,5 @@
-import Vue from "vue";
-
-import Select from './src/select/select';
-import SelectOption from './src/select-option/select-option';
+import Select from "./src/select/select.jsx";
+import SelectOption from "./src/select-option/select-option.jsx";
 
 export default function (App) {
     App.component(Select.name, Select);

package/src/slider/index.js

@@ -1,6 +1,4 @@
-import Vue from "vue";
-
-import Slider from './src/slider/slider';
+import Slider from "./src/slider/slider.jsx";
 
 export default function (App) {
     App.component(Slider.name, Slider);

package/src/switch/index.js

@@ -1,6 +1,4 @@
-import Vue from "vue";
-
-import Switch from './src/switch/switch';
+import Switch from "./src/switch/switch.jsx";
 
 export default function (App) {
     App.component(Switch.name, Switch);

package/src/table/index.js

@@ -1,16 +1,16 @@
-import Table from './src/table/table';
-import TableColumn from './src/table-column/table-column';
-import TableCellString from './src/table-cell/types/table-cell-string';
-import TableCellBoolean from './src/table-cell/types/table-cell-boolean';
-import TableCellDatetime from './src/table-cell/types/table-cell-datetime';
-import TableCellOption from './src/table-cell/types/table-cell-option';
-import TableCellImage from './src/table-cell/types/table-cell-image';
-import TableCellMatrix from './src/table-cell/types/table-cell-matrix';
-import TableCellSelect from './src/table-cell/types/table-cell-select';
-import TableFilterString from './src/table-filter/types/table-filter-string';
-import TableFilterBoolean from './src/table-filter/types/table-filter-boolean';
-import TableFilterDatetime from './src/table-filter/types/table-filter-datetime';
-import TableFilterOption from './src/table-filter/types/table-filter-option';
+import Table from "./src/table/table.jsx";
+import TableColumn from "./src/table-column/table-column.jsx";
+import TableCellString from "./src/table-cell/types/table-cell-string.jsx";
+import TableCellBoolean from "./src/table-cell/types/table-cell-boolean.jsx";
+import TableCellDatetime from "./src/table-cell/types/table-cell-datetime.jsx";
+import TableCellOption from "./src/table-cell/types/table-cell-option.jsx";
+import TableCellImage from "./src/table-cell/types/table-cell-image.jsx";
+import TableCellMatrix from "./src/table-cell/types/table-cell-matrix.jsx";
+import TableCellSelect from "./src/table-cell/types/table-cell-select.jsx";
+import TableFilterString from "./src/table-filter/types/table-filter-string.jsx";
+import TableFilterBoolean from "./src/table-filter/types/table-filter-boolean.jsx";
+import TableFilterDatetime from "./src/table-filter/types/table-filter-datetime.jsx";
+import TableFilterOption from "./src/table-filter/types/table-filter-option.jsx";
 
 
 export default function (App) {

package/src/table/src/table/{table.js → table.jsx}

@@ -1,5 +1,4 @@
 import { Any, Arr, Obj, Dom, Event, UUID } from "@kizmann/pico-js";
-import { h, resolveComponent } from "vue";
 
 export default {
 

package/src/table/src/table-cell/types/{table-cell-boolean.js → table-cell-boolean.jsx}

@@ -1,4 +1,4 @@
-import TableCell from "../table-cell";
+import TableCell from "../table-cell.jsx";
 import { Any } from "@kizmann/pico-js";
 
 export default {

package/src/table/src/table-cell/types/{table-cell-datetime.js → table-cell-datetime.jsx}

@@ -1,4 +1,4 @@
-import TableCell from "../table-cell";
+import TableCell from "../table-cell.jsx";
 import { Any } from "@kizmann/pico-js";
 
 export default {

package/src/table/src/table-cell/types/{table-cell-image.js → table-cell-image.jsx}

@@ -1,4 +1,4 @@
-import TableCell from "../table-cell";
+import TableCell from "../table-cell.jsx";
 import { Obj, Any } from "@kizmann/pico-js";
 
 export default {

package/src/table/src/table-cell/types/{table-cell-matrix.js → table-cell-matrix.jsx}

@@ -1,4 +1,4 @@
-import TableCell from "../table-cell";
+import TableCell from "../table-cell.jsx";
 import { Num, Any, Obj, Arr, UUID } from "@kizmann/pico-js";
 
 export default {

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

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

package/src/table/src/table-cell/types/{table-cell-select.js → table-cell-select.jsx}

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

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

@@ -1,4 +1,4 @@
-import TableCell from "../table-cell";
+import TableCell from "../table-cell.jsx";
 import { Any } from "@kizmann/pico-js";
 
 export default {

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

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

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

@@ -1,4 +1,4 @@
-import TableFilter from "../table-filter";
+import TableFilter from "../table-filter.jsx";
 
 export default {
 

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