@kizmann/nano-ui 1.0.3 → 1.0.5

package/package.json

@@ -1,7 +1,8 @@
 {
     "name": "@kizmann/nano-ui",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "license": "MIT",
+    "type": "module",
     "private": false,
     "author": "Eduard Kizmann <kizmann@protonmail.ch>",
     "repository": "https://github.com/vankizmann/nano-ui",

package/src/alert/index.js

@@ -1,5 +1,5 @@
-import Alert from './src/alert/alert';
-
 export default function (App) {
-    App.config.globalProperties[Alert.alias] = window[Alert.alias] = Alert.handle;
+    import("./src/alert/alert.js").then(({ Alert }) => {
+        App.config.globalProperties[Alert.alias] = window[Alert.alias] = Alert.handle;
+    });
 }

package/src/alert/src/alert/alert.js

@@ -10,21 +10,24 @@ class AlertFrame {
 
     type = '';
 
-    options = {
-        iconPrimary: nano.Icons.info,
-        iconSecondary: nano.Icons.info,
-        iconSuccess: nano.Icons.success,
-        iconWarning: nano.Icons.warning,
-        iconDanger: nano.Icons.danger,
-        iconInfo: nano.Icons.info
-    };
+    options = {};
 
     constructor(text, type = 'primary', options = {})
     {
+        let defaultIcons = {
+            iconPrimary: window.nano.Icons.info,
+            iconSecondary: window.nano.Icons.info,
+            iconSuccess: window.nano.Icons.success,
+            iconWarning: window.nano.Icons.warning,
+            iconDanger: window.nano.Icons.danger,
+            iconInfo: window.nano.Icons.info
+        };
+
         this.text = text;
         this.type = type;
 
-        this.options = Obj.assign(this.options, options);
+        this.options = Obj.assign(this.options,
+            defaultIcons, options);
 
         this.render();
     }
@@ -104,11 +107,11 @@ class AlertFrame {
 
 }
 
-export default class Alert {
+export class Alert {
 
     static alias = 'Alert';
 
-    static size = nano.Settings.notifySize;
+    static size = window.nano.Settings.notifySize;
 
     static alert = null;
 
@@ -126,3 +129,5 @@ export default class Alert {
     }
 
 }
+
+export default Alert;

package/src/button/index.js

@@ -1,5 +1,5 @@
-import Button from './src/button/button';
-import ButtonGroup from './src/button-group/button-group';
+import Button from "./src/button/button.jsx";
+import ButtonGroup from "./src/button-group/button-group.jsx";
 
 export default function (App) {
     App.component(Button.name, Button);

package/src/cascader/index.js

@@ -1,5 +1,5 @@
-import CascaderPanel from './src/cascader-panel/cascader-panel';
-import Cascader from './src/cascader/cascader';
+import CascaderPanel from "./src/cascader-panel/cascader-panel.jsx";
+import Cascader from "./src/cascader/cascader.jsx";
 
 export default function (App) {
     App.component(CascaderPanel.name, CascaderPanel);

package/src/checkbox/index.js

@@ -1,7 +1,5 @@
-import Vue from "vue";
-
-import Checkbox from './src/checkbox/checkbox';
-import CheckboxGroup from './src/checkbox-group/checkbox-group';
+import Checkbox from "./src/checkbox/checkbox.jsx";
+import CheckboxGroup from "./src/checkbox-group/checkbox-group.jsx";
 
 export default function (App) {
     App.component(Checkbox.name, Checkbox);

package/src/collapse/index.js

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

package/src/config/index.js

@@ -1,8 +1,8 @@
-import NConfig from "./src/config/config";
-import NConfigNext from "./src/config/config-next";
-import NBuilder from "./src/builder/builder";
-import NRefrencePanel from "./src/reference-panel/reference-panel";
-import NRefrencePicker from "./src/reference-picker/reference-picker";
+import NConfig from "./src/config/config.jsx";
+import NConfigNext from "./src/config/config-next.jsx";
+import NBuilder from "./src/builder/builder.jsx";
+import NRefrencePanel from "./src/reference-panel/reference-panel.jsx";
+import NRefrencePicker from "./src/reference-picker/reference-picker.jsx";
 
 export default function(App) {
     App.component(NConfig.name, NConfig);

package/src/confirm/index.js

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

package/src/datepicker/index.js

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

package/src/datetimepicker/index.js

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

package/src/draggable/index.js

@@ -1,8 +1,8 @@
-import Draglist from './src/draglist/draglist';
-import DraglistItem from './src/draglist-item/draglist-item';
-import Draggrid from './src/draggrid/draggrid';
-import DraggridItem from './src/draggrid-item/draggrid-item';
-import Dropzone from './src/dropzone/dropzone';
+import Draglist from "./src/draglist/draglist.jsx";
+import DraglistItem from "./src/draglist-item/draglist-item.jsx";
+import Draggrid from "./src/draggrid/draggrid.jsx";
+import DraggridItem from "./src/draggrid-item/draggrid-item.jsx";
+import Dropzone from "./src/dropzone/dropzone.jsx";
 
 export default function (App) {
     App.component(Draglist.name, Draglist);

package/src/draggable/src/draggrid/{draggrid.js → draggrid.jsx}

@@ -1,5 +1,5 @@
 import { UUID, Num, Arr, Obj, Dom, Any, Event, Locale } from "@kizmann/pico-js";
-import NDraghandler from "../draghandler/draghandler";
+import NDraghandler from "../draghandler/draghandler.js";
 
 window.DEBUG_NDLIST = false;
 

package/src/draggable/src/draglist/{draglist.js → draglist.jsx}

@@ -1,5 +1,5 @@
 import { UUID, Num, Arr, Obj, Dom, Any, Event, Locale } from "@kizmann/pico-js";
-import NDraghandler from "../draghandler/draghandler";
+import NDraghandler from "../draghandler/draghandler.js";
 
 window.DEBUG_NDLIST = false;
 

package/src/draggable/src/dropzone/{dropzone.js → dropzone.jsx}

@@ -1,5 +1,5 @@
 import { UUID, Num, Arr, Obj, Dom, Any, Event, Locale } from "@kizmann/pico-js";
-import NDraghandler from "../draghandler/draghandler";
+import NDraghandler from "../draghandler/draghandler.js";
 
 window.DEBUG_NDLIST = false;
 

package/src/drawer/index.js

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

package/src/durationpicker/index.js

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

package/src/empty/index.js

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

package/src/file/index.js

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

package/src/form/index.js

@@ -1,9 +1,9 @@
-import Form from './src/form/form';
-import FormGroup from './src/form-group/form-group';
-import FormItem from './src/form-item/form-item';
-import FormMenu from './src/form-menu/form-menu';
-import FormFrame from './src/form-frame/form-frame';
-import FormFrameItem from './src/form-frame-item/form-frame-item';
+import Form from "./src/form/form.jsx";
+import FormGroup from "./src/form-group/form-group.jsx";
+import FormItem from "./src/form-item/form-item.jsx";
+import FormMenu from "./src/form-menu/form-menu.jsx";
+import FormFrame from "./src/form-frame/form-frame.jsx";
+import FormFrameItem from "./src/form-frame-item/form-frame-item.jsx";
 
 export default function (App) {
     App.component(Form.name, Form);

package/src/index.js

@@ -1,8 +1,90 @@
 import { Arr, Obj, Dom, Locale } from "@kizmann/pico-js";
 
-import CtorMixin from "./mixins/src/ctor";
-import CmerMixin from "./mixins/src/cmer";
-import CsloMixin from "./mixins/src/cslo";
+import CtorMixin from "./mixins/src/ctor.js";
+import CmerMixin from "./mixins/src/cmer.js";
+import CsloMixin from "./mixins/src/cslo.js";
+
+import Alert from "./alert/index.js";
+import Notification from "./notification/index.js";
+import Empty from "./empty/index.js";
+import Config from "./config/index.js";
+import Scrollbar from "./scrollbar/index.js";
+import Virtualscroller from "./virtualscroller/index.js";
+import Draggable from "./draggable/index.js";
+import Loader from "./loader/index.js";
+import Resizer from "./resizer/index.js";
+import Popover from "./popover/index.js";
+import Modal from "./modal/index.js";
+import Button from "./button/index.js";
+import Input from "./input/index.js";
+import InputNumber from "./input-number/index.js";
+import Textarea from "./textarea/index.js";
+import Select from "./select/index.js";
+import Checkbox from "./checkbox/index.js";
+import Radio from "./radio/index.js";
+import Slider from "./slider/index.js";
+import Switch from "./switch/index.js";
+import Confirm from "./confirm/index.js";
+import Cascader from "./cascader/index.js";
+import Datepicker from "./datepicker/index.js";
+import Timepicker from "./timepicker/index.js";
+import Datetimepicker from "./datetimepicker/index.js";
+import Durationpicker from "./durationpicker/index.js";
+import Transfer from "./transfer/index.js";
+import Form from "./form/index.js";
+import Tabs from "./tabs/index.js";
+import Tags from "./tags/index.js";
+import Collapse from "./collapse/index.js";
+import Table from "./table/index.js";
+import Paginator from "./paginator/index.js";
+import Info from "./info/index.js";
+import Preview from "./preview/index.js";
+import Map from "./map/index.js";
+import File from "./file/index.js";
+import Rating from "./rating/index.js";
+import Drawer from "./drawer/index.js";
+
+const NanoImports = [
+    Alert,
+    Notification,
+    Empty,
+    Config,
+    Scrollbar,
+    Virtualscroller,
+    Draggable,
+    Loader,
+    Resizer,
+    Popover,
+    Modal,
+    Button,
+    Input,
+    InputNumber,
+    Textarea,
+    Select,
+    Checkbox,
+    Radio,
+    Slider,
+    Switch,
+    Confirm,
+    Cascader,
+    Datepicker,
+    Timepicker,
+    Datetimepicker,
+    Durationpicker,
+    Transfer,
+    Form,
+    Tabs,
+    Tags,
+    Collapse,
+    Table,
+    Paginator,
+    Info,
+    Preview,
+    Map,
+    File,
+    Rating,
+    Drawer
+];
 
 export const Icons = {
     handle: 'fa fa-ellipsis-v',
@@ -55,48 +137,12 @@ export function Install(App, Icons = {})
     window.nano.Icons = Obj.assign(Icons, window.nano.Icons);
     window.nano.Settings = Obj.assign(Settings, window.nano.Settings);
 
-    require('./alert/index').default(App);
-    require('./notification/index').default(App);
-    require('./empty/index').default(App);
-    require('./config/index').default(App); //!complex 17.1
-    require('./scrollbar/index').default(App);
-    require('./virtualscroller/index').default(App);
-    require('./draggable/index').default(App);
-    require('./loader/index').default(App);
-    require('./resizer/index').default(App);
-    require('./popover/index').default(App);
-    require('./modal/index').default(App);
-    require('./button/index').default(App);
-    require('./input/index').default(App);
-    require('./input-number/index').default(App);
-    require('./textarea/index').default(App);
-    require('./select/index').default(App);
-    require('./checkbox/index').default(App);
-    require('./radio/index').default(App);
-    require('./slider/index').default(App);
-    require('./switch/index').default(App);
-    require('./confirm/index').default(App);
-    require('./cascader/index').default(App);
-    require('./datepicker/index').default(App);
-    require('./timepicker/index').default(App);
-    require('./datetimepicker/index').default(App);
-    require('./durationpicker/index').default(App);
-    require('./transfer/index').default(App);
-    require('./form/index').default(App); // check
-    require('./tabs/index').default(App);
-    require('./tags/index').default(App);
-    require('./collapse/index').default(App);
-    require('./table/index').default(App); // 18.1 options
-    require('./paginator/index').default(App);
-    require('./info/index').default(App); //!complex 16.1
-    require('./preview/index').default(App);
-    require('./map/index').default(App);
-    require('./file/index').default(App);
-    require('./rating/index').default(App);
-    require('./drawer/index').default(App);
-
-    // require('./chart/index'); // Ignore
-    // require('./wysiwyg/index'); // Ignore
+    Arr.each(NanoImports, (NanoModule) => {
+        NanoModule(App);
+    });
+
+    // require('./chart/index.js'); // Ignore
+    // require('./wysiwyg/index.js'); // Ignore
 }
 
 export const Nano = {

package/src/index.scss

@@ -32,7 +32,6 @@
 @import "./tags/index";
 @import "./collapse/index";
 @import "./info/index";
-@import "./file-list/index";
 @import "./map/index";
 @import "./preview/index";
 @import "./rating/index";

package/src/info/index.js

@@ -1,10 +1,10 @@
-import Info from './src/info/info';
-import InfoColumn from './src/info-column/info-column';
-import InfoFieldString from './src/info-field/types/info-field-string';
-import InfoFieldBoolean from './src/info-field/types/info-field-boolean';
-import InfoFieldDatetime from './src/info-field/types/info-field-datetime';
-import InfoFieldOption from './src/info-field/types/info-field-option';
-import InfoFieldImage from './src/info-field/types/info-field-image';
+import Info from "./src/info/info.jsx";
+import InfoColumn from "./src/info-column/info-column.jsx";
+import InfoFieldString from "./src/info-field/types/info-field-string.jsx";
+import InfoFieldBoolean from "./src/info-field/types/info-field-boolean.jsx";
+import InfoFieldDatetime from "./src/info-field/types/info-field-datetime.jsx";
+import InfoFieldOption from "./src/info-field/types/info-field-option.jsx";
+import InfoFieldImage from "./src/info-field/types/info-field-image.jsx";
 
 export default function (App) {
     App.component(Info.name, Info);

package/src/info/src/info-field/{info-field.js → info-field.jsx}

@@ -1,5 +1,4 @@
 import { Obj } from "@kizmann/pico-js";
-import CtorMixin from "../../../mixins/src/ctor";
 
 export default {
 

package/src/info/src/info-field/types/{info-field-boolean.js → info-field-boolean.jsx}

@@ -1,5 +1,5 @@
 import { Any } from "@kizmann/pico-js";
-import InfoField from "../info-field";
+import InfoField from "../info-field.jsx";
 
 export default {
 

package/src/info/src/info-field/types/{info-field-datetime.js → info-field-datetime.jsx}

@@ -1,5 +1,5 @@
 import { Any } from "@kizmann/pico-js";
-import InfoField from "../info-field";
+import InfoField from "../info-field.jsx";
 
 export default {
 

package/src/info/src/info-field/types/{info-field-image.js → info-field-image.jsx}

@@ -1,4 +1,4 @@
-import InfoField from "../info-field";
+import InfoField from "../info-field.jsx";
 import { Obj } from "@kizmann/pico-js";
 
 export default {

package/src/info/src/info-field/types/{info-field-option.js → info-field-option.jsx}

@@ -1,5 +1,5 @@
 import { Arr, Obj, Any } from "@kizmann/pico-js";
-import InfoField from "../info-field";
+import InfoField from "../info-field.jsx";
 
 export default {
 

package/src/info/src/info-field/types/{info-field-string.js → info-field-string.jsx}

@@ -1,5 +1,5 @@
 import { Any } from "@kizmann/pico-js";
-import InfoField from "../info-field";
+import InfoField from "../info-field.jsx";
 
 export default {
 

package/src/input/index.js

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

package/src/input-number/index.js

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

package/src/loader/index.js

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

package/src/map/index.js

@@ -1,5 +1,5 @@
-import Map from './src/map/map';
-import MapMarker from './src/map-marker/map-marker';
+import Map from "./src/map/map.jsx";
+import MapMarker from "./src/map-marker/map-marker.jsx";
 
 export default function (App) {
     App.component(Map.name, Map);

package/src/mixins/src/cslo.js

@@ -1,5 +1,5 @@
 import { Arr, Obj, Any } from "@kizmann/pico-js";
-import { Comment } from 'vue';
+import { Comment } from "vue";
 
 export default {
 

package/src/modal/index.js

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

package/src/notification/index.js

@@ -1,5 +1,5 @@
-import Notifcation from './src/notification/notification';
-
 export default function (App) {
-    App.config.globalProperties[Notifcation.alias] = window[Notifcation.alias] = Notifcation.handle;
+    import("./src/notification/notification.js").then(({ Notify }) => {
+        App.config.globalProperties[Notify.alias] = window[Notify.alias] = Notify.handle;
+    });
 }

package/src/notification/src/notification/notification.js

@@ -12,20 +12,24 @@ class Notification {
 
     options = {
         duration: 4500,
-        iconPrimary: nano.Icons.info,
-        iconSecondary: nano.Icons.info,
-        iconSuccess: nano.Icons.success,
-        iconWarning: nano.Icons.warning,
-        iconDanger: nano.Icons.danger,
-        iconInfo: nano.Icons.info
     };
 
     constructor(text, type = 'primary', options = {})
     {
+        let defaultIcons = {
+            iconPrimary: window.nano.Icons.info,
+            iconSecondary: window.nano.Icons.info,
+            iconSuccess: window.nano.Icons.success,
+            iconWarning: window.nano.Icons.warning,
+            iconDanger: window.nano.Icons.danger,
+            iconInfo: window.nano.Icons.info
+        };
+
         this.text = text;
         this.type = type;
 
-        this.options = Obj.assign(this.options, options);
+        this.options = Obj.assign(this.options,
+            defaultIcons, options);
 
         this.render();
     }
@@ -85,13 +89,13 @@ class Notification {
 
 }
 
-export default class Notify {
+export class Notify {
 
     static alias = 'Notify';
 
-    static size = nano.Settings.notifySize;
+    static size = window.nano.Settings.notifySize;
 
-    static position = nano.Settings.notifyPosition;
+    static position = window.nano.Settings.notifyPosition;
 
     static notifications = {};
 
@@ -157,3 +161,5 @@ export default class Notify {
     }
 
 }
+
+export default Notify;

package/src/paginator/index.js

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

package/src/popover/index.js

@@ -1,6 +1,6 @@
-import Popover from './src/popover/popover';
-import PopoverGroup from './src/popover-group/popover-group';
-import PopoverOption from './src/popover-option/popover-option';
+import Popover from "./src/popover/popover.jsx";
+import PopoverGroup from "./src/popover-group/popover-group.jsx";
+import PopoverOption from "./src/popover-option/popover-option.jsx";
 
 export default function (App) {
     App.component(Popover.name, Popover);

package/src/preview/index.js

@@ -1,7 +1,7 @@
-import Preview from './src/preview/preview';
-import PreviewPlain from './src/preview-plain/preview-plain';
-import PreviewImage from './src/preview-image/preview-image';
-import PreviewVideo from './src/preview-video/preview-video';
+import Preview from "./src/preview/preview.jsx";
+import PreviewPlain from "./src/preview-plain/preview-plain.jsx";
+import PreviewImage from "./src/preview-image/preview-image.jsx";
+import PreviewVideo from "./src/preview-video/preview-video.jsx";
 
 export default function (App) {
     App.component(Preview.name, Preview);

package/src/radio/index.js

@@ -1,5 +1,5 @@
-import NRadio from './src/radio/radio';
-import NRadioGroup from './src/radio-group/radio-group';
+import NRadio from "./src/radio/radio.jsx";
+import NRadioGroup from "./src/radio-group/radio-group.jsx";
 
 export default function (App) {
     App.component(NRadio.name, NRadio);

package/src/rating/index.js

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

package/src/resizer/index.js

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

package/src/scrollbar/index.js

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