@kizmann/nano-ui 1.0.4 → 1.0.6

package/package.json

@@ -1,7 +1,8 @@
 {
     "name": "@kizmann/nano-ui",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "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.js";
-
 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/index.js

@@ -4,6 +4,88 @@ 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',
     checked: 'fa fa-check',
@@ -31,7 +113,7 @@ export const Settings = {
     notifyPosition: 'bottom-start'
 };
 
-export function Install(App, Icons = {})
+export function Install(App, Icons = {}, Settings = {})
 {
     /**
      * @const window.pi
@@ -52,48 +134,12 @@ export function Install(App, Icons = {})
     App.config.globalProperties.trans = Locale.trans;
     App.config.globalProperties.choice = Locale.choice;
 
-    window.nano.Icons = Obj.assign(Icons, window.nano.Icons);
-    window.nano.Settings = Obj.assign(Settings, window.nano.Settings);
-
-    require('./alert/index.js').default(App);
-    require('./notification/index.js').default(App);
-    require('./empty/index.js').default(App);
-    require('./config/index.js').default(App); //!complex 17.1
-    require('./scrollbar/index.js').default(App);
-    require('./virtualscroller/index.js').default(App);
-    require('./draggable/index.js').default(App);
-    require('./loader/index.js').default(App);
-    require('./resizer/index.js').default(App);
-    require('./popover/index.js').default(App);
-    require('./modal/index.js').default(App);
-    require('./button/index.js').default(App);
-    require('./input/index.js').default(App);
-    require('./input-number/index.js').default(App);
-    require('./textarea/index.js').default(App);
-    require('./select/index.js').default(App);
-    require('./checkbox/index.js').default(App);
-    require('./radio/index.js').default(App);
-    require('./slider/index.js').default(App);
-    require('./switch/index.js').default(App);
-    require('./confirm/index.js').default(App);
-    require('./cascader/index.js').default(App);
-    require('./datepicker/index.js').default(App);
-    require('./timepicker/index.js').default(App);
-    require('./datetimepicker/index.js').default(App);
-    require('./durationpicker/index.js').default(App);
-    require('./transfer/index.js').default(App);
-    require('./form/index.js').default(App); // check
-    require('./tabs/index.js').default(App);
-    require('./tags/index.js').default(App);
-    require('./collapse/index.js').default(App);
-    require('./table/index.js').default(App); // 18.1 options
-    require('./paginator/index.js').default(App);
-    require('./info/index.js').default(App); //!complex 16.1
-    require('./preview/index.js').default(App);
-    require('./map/index.js').default(App);
-    require('./file/index.js').default(App);
-    require('./rating/index.js').default(App);
-    require('./drawer/index.js').default(App);
+    window.nano.Icons = Obj.assign(window.nano.Icons, Icons);
+    window.nano.Settings = Obj.assign(window.nano.Settings, Settings);
+
+    Arr.each(NanoImports, (NanoModule) => {
+        NanoModule(App);
+    });
 
     // require('./chart/index.js'); // Ignore
     // require('./wysiwyg/index.js'); // Ignore

package/src/notification/index.js

@@ -1,5 +1,5 @@
-import Notifcation from "./src/notification/notification.js";
-
 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/types/index.d.ts

@@ -1,5 +1,4 @@
 // types/index.d.ts
-// import Cookie from "./library/cookie";
 
 declare interface IconsInterface {
     handle: string;
@@ -23,9 +22,16 @@ declare interface IconsInterface {
     [key: string]: string;
 }
 
+declare interface SettingsInterface {
+    iconPosition: string;
+    notifySize: string;
+    notifyPosition: string;
+    [key: string]: string;
+}
+
 export declare module "@kizmann/nano-ui" {
 
-    function Install(App: any, Icons?: Partial<IconsInterface>): void;
+    function Install(App: any, Icons?: Partial<IconsInterface>, Settings?: Partial<SettingsInterface>): void;
 
     const Icons: typeof IconsInterface;
     const Settings: typeof SettingsInterface;
@@ -41,4 +47,15 @@ export declare module "@kizmann/nano-ui" {
         Settings,
         Install
     };
-}
+}
+
+export declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        ctor: (key: string, fallback?: any) => () => any
+        cmer: (classList: any) => () => any
+        cslo: (slot: string, props?: object) => () => any
+
+        trans: (key: string, values?: object) => string;
+        choice: (key: string, count?: number, values?: object) => () => any
+    }
+}