@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/input-number/src/input-number/input-number.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-input-number {
     position: relative;
@@ -7,6 +6,8 @@
     align-items: stretch;
     justify-content: stretch;
     width: 100%;
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
     border: 1px solid transparent;
 }
 
@@ -19,9 +20,12 @@
     appearance: none;
     display: block;
     width: 100%;
+    height: size('base-hgt', 'calc($ - 2px)');
     white-space: nowrap;
     text-decoration: none;
+    font-size: 1em;
     line-height: 1.2;
+    padding: 0 size('base-pad', 'calc($ * 0.5)');
     border: none;
     background: transparent;
     box-shadow: none;
@@ -36,69 +40,20 @@
     border-radius: 0;
 }
 
-.n-input-number .n-button:not(.n-disabled) {
-    cursor: default;
+.n-input-number .n-button.n-button--reset {
+    width: size('base-hgt', 'calc($ - 2px)');
+    height: size('base-hgt', 'calc($ - 2px)');
 }
 
-.n-input-number__clear {
-    flex: 0 0 auto;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
+.n-input-number .n-button:not(.n-disabled) {
+    cursor: default;
 }
 
-.n-input-number__clear {
+.n-input-number .n-input-number__clear {
     display: none;
+    width: size('base-hgt', 'calc($ - 2px)');
 }
 
-.n-input-number__clear i {
-    display: inline-block;
-    text-align: center;
-    border-radius: 500px;
-}
-
-.n-input-number:hover.n-clearable:not(.n-empty) .n-input-number__clear {
+.n-input-number.n-clearable:not(.n-empty):hover .n-input-number__clear {
     display: flex;
 }
-
-
-
-@each $suffix, $values in $form {
-
-    $-input-number-font: map.get($values, 'font');
-    $-input-number-size: map.get($values, 'size');
-    $-input-number-radius: map.get($values, 'radius');
-    $-input-number-ratio: map.get($values, 'ratio');
-
-    .n-input-number--#{$suffix} {
-        font-size: $-input-number-font;
-        border-radius: $-input-number-radius;
-    }
-
-    .n-input-number--#{$suffix} input {
-        height: $-input-number-size - 2;
-        padding: 0 $-input-number-size * $-input-number-ratio;
-    }
-
-    .n-input-number--#{$suffix} .n-button {
-        font-size: $-input-number-font - 4;
-    }
-
-    .n-input-number--#{$suffix} .n-button.n-button--square:not(.n-button--link) {
-        width: $-input-number-size - 2;
-        height: $-input-number-size - 2;
-    }
-
-    .n-input-number--#{$suffix} .n-input-number__clear {
-        margin-right: $-input-number-size * $-input-number-ratio * 0.5;
-    }
-
-    .n-input-number--#{$suffix} .n-input-number__clear i {
-        font-size: $-input-number-font - 4;
-        width: $-input-number-size - 14;
-        height: $-input-number-size - 14;
-        line-height: $-input-number-size - 14;
-    }
-
-}

package/src/loader/index.scss

@@ -1 +1 @@
-@import "./src/loader/loader";
+@forward "./src/loader/loader";

package/src/loader/src/loader/loader.scss

@@ -1,5 +1,13 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
+
+@keyframes NLoading {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
 
 .n-loader {
     position: relative;
@@ -7,7 +15,7 @@
 
 .n-load:before {
     content: '\00a0';
-    z-index: 8001;
+    z-index: 8010;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -16,7 +24,6 @@
     height: 30px;
     margin: -15px 0 0 -15px;
     border-radius: 500px;
-    border: 2px solid transparent;
     border-bottom-color: transparent !important;
     animation: NLoading 1s linear infinite;
 }
@@ -40,29 +47,9 @@
     display: none !important;
 }
 
-@keyframes NLoading {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-
-@each $suffix, $values in $form {
-
-    $-loader-font: map.get($values, 'font');
-    $-loader-size: map.get($values, 'size');
-    $-loader-radius: map.get($values, 'radius');
-    $-loader-ratio: map.get($values, 'ratio');
-
-    $-loader-calc: round(($-loader-size / 1px) * ($-loader-font / 2px) * 0.085);
-
-    .n-loader--#{$suffix}.n-load:before {
-        width: #{($-loader-calc * 2)  + 'px'};
-        height: #{($-loader-calc * 2)  + 'px'};
-        margin: -#{$-loader-calc + 'px'} 0 0 -#{$-loader-calc + 'px'};
-    }
-
+.n-loader.n-load:before {
+    width: size('base-hgt-loader');
+    height: size('base-hgt-loader');
+    margin-top: size('base-hgt-loader', 'calc($ * -0.5)');
+    margin-left: size('base-hgt-loader', 'calc($ * -0.5)');
 }

package/src/map/index.scss

@@ -1 +1 @@
-@import "./src/map/map";
+@forward "./src/map/map";

package/src/map/src/map/map.scss

@@ -1,8 +1,7 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-map {
     position: relative;
-    color: $color-black !important;
 }
 
 .n-map:before {

package/src/modal/index.scss

@@ -1 +1 @@
-@import "./src/modal/modal";
+@forward "./src/modal/modal";

package/src/modal/src/modal/modal.jsx

@@ -77,10 +77,10 @@ export default {
             type: [String]
         },
 
-        type: {
+        theme: {
             default()
             {
-                return 'default';
+                return 'auto';
             },
             type: [String]
         },
@@ -407,10 +407,13 @@ export default {
         let classList = [
             'n-modal',
             'n-modal--' + this.size,
-            'n-modal--' + this.type,
             'n-modal--' + this.position,
         ];
 
+        if ( this.theme ) {
+            classList.push('n-theme--' + this.theme);
+        }
+
         if ( this.tempValue ) {
             this.queueRefreshTimeout();
         }

package/src/modal/src/modal/modal.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-modal {
     position: fixed;
@@ -24,7 +23,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    transition: opacity 0.5s ease-in-out;
+    transition: opacity 0.3s;
 }
 
 .n-modal:not(.n-ready,.n-loop) .n-modal__backdrop {
@@ -143,44 +142,32 @@
     opacity: 0.6;
 }
 
+.n-modal {
+    font-size: size('base-fnt');
+}
 
-@each $suffix, $values in $form {
-
-    $-modal-font: map.get($values, 'font');
-    $-modal-size: map.get($values, 'size');
-    $-modal-radius: map.get($values, 'radius');
-    $-modal-ratio: map.get($values, 'ratio');
-
-    .n-modal--#{$suffix} {
-        font-size: $-modal-font;
-    }
-
-    .n-modal--#{$suffix} .n-modal__frame {
-        border-radius: $-modal-radius + 2;
-    }
-
-    $-modal-padding: $-modal-size * $-modal-ratio;
+.n-modal__frame {
+    border-radius: size('base-rad-window');
+}
 
-    .n-modal--#{$suffix} .n-modal__header {
-        padding: $-modal-padding * 1.5 $-modal-padding * 2;
-    }
+.n-modal__header {
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad', 'calc($ * 2)');
+}
 
-    .n-modal--#{$suffix}.n-closable .n-modal__header {
-        padding-right: $-modal-size + ($-modal-padding * 2);
-    }
-    
-    .n-modal--#{$suffix}:not(.n-raw) .n-modal__wrap {
-        padding: $-modal-padding * 1.5 $-modal-padding * 2;
-    }
-    
-    .n-modal--#{$suffix} .n-modal__footer {
-        padding: $-modal-padding * 1.5 $-modal-padding * 2;
-    }
+.n-modal.n-closable .n-modal__header {
+    padding-right: calc(#{"(#{size('base-pad')} * 2) + #{size('base-hgt')}"});
+}
 
-    .n-modal__close {
-        width: $-modal-size;
-        height: $-modal-size;
-        right: $-modal-padding * 0.8;
-    }
+.n-modal:not(.n-raw) .n-modal__wrap {
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad', 'calc($ * 2)');
+}
 
+.n-modal__footer {
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad', 'calc($ * 2)');
 }
+
+.n-modal__close {
+    width: size('base-hgt');
+    height: size('base-hgt');
+    right: size('base-pad');
+}

package/src/notification/index.js

@@ -1,5 +1,25 @@
+import NotificationElement from "./src/notification/notification-element.mjs";
+import NotificationHandler from "./src/notification/notification-handler.mjs";
+
 export default function (App) {
-    import("./src/notification/notification.js").then(({ Notify }) => {
-        App.config.globalProperties[Notify.alias] = window[Notify.alias] = Notify.handle;
+
+    const NotifcationIcons = {
+        primary: window.nano.Icons.info,
+        secondary: window.nano.Icons.info,
+        success: window.nano.Icons.success,
+        warning: window.nano.Icons.warning,
+        danger: window.nano.Icons.danger,
+        info: window.nano.Icons.info
+    };
+
+    window.NotifcationIcons = pi.Obj.assign(NotifcationIcons,
+        window.NotifcationIcons || {});
+
+    let directives = [
+        NotificationElement, NotificationHandler
+    ];
+
+    pi.Arr.each(directives, (glob) => {
+        App.config.globalProperties[glob.alias] = window[glob.alias] = glob;
     });
-}
+}

package/src/notification/index.scss

@@ -1 +1 @@
-@import "./src/notification/notification";
+@forward "./src/notification/notification";

package/src/notification/src/notification/notification-element.mjs

@@ -0,0 +1,74 @@
+import { Dom, Obj } from "@kizmann/pico-js";
+
+export class NotificationElement
+{
+    static alias = 'NotificationElement';
+
+    el = null;
+
+    options = {
+        text: '', icon: '', type: 'primary', duration: 4500,
+    };
+
+    constructor(text, type = 'primary', options = {})
+    {
+        this.options = Obj.assign(this.options, options, {
+            text, type
+        });
+
+        this.render();
+    }
+
+    append(el = document.body)
+    {
+        this.el.appendTo(el);
+
+        setTimeout(() => this.el.addClass('n-active'), 100);
+
+        return this;
+    }
+
+    remove()
+    {
+        this.el.get(0).remove();
+
+        return this;
+    }
+
+    render()
+    {
+        let classList = [
+            'n-notification',
+            'n-notification--' + this.options.type
+        ];
+
+        this.el = Dom.make('div', {
+            classList: classList.join(' ')
+        });
+
+        this.el.on('click', () => {
+            this.remove();
+        });
+
+        let iconClass = Obj.get(window.NotifcationIcons, this.options.type, 'fa fa-ghost');
+
+        let icon = Dom.make('div', {
+            classList: 'n-notification__icon', innerHTML: `<i class="n-icon ${iconClass}"></i>`
+        });
+
+        icon.appendTo(this.el);
+
+        let text = Dom.make('div', {
+            classList: 'n-notification__text', innerHTML: `<p>${this.options.text}</p>`
+        });
+
+        text.appendTo(this.el);
+    }
+
+}
+
+if ( ! window[NotificationElement.alias] ) {
+    window[NotificationElement.alias] = NotificationElement;
+}
+
+export default NotificationElement;

package/src/notification/src/notification/notification-handler.mjs

@@ -0,0 +1,75 @@
+import { UUID, Str, Obj, Dom, Any } from "@kizmann/pico-js";
+import NotificationElement from "./notification-element.mjs";
+
+window.NotificationBag = {};
+
+export class NotificationHandler
+{
+
+    static alias = 'Notification';
+
+    static notifications = {};
+
+    static make(...args)
+    {
+        let { uid, el } = NotificationHandler.create(undefined, ...args);
+
+        let wrapper = NotificationHandler.element();
+
+        // Append element to dom
+        window.NotificationBag[uid].append(wrapper);
+
+        // Queue remove
+        Any.delay(() => {
+            NotificationHandler.remove(uid);
+        }, el.options.duration);
+
+        return uid;
+    }
+
+    static create(uid = UUID(), ...args)
+    {
+        window.NotificationBag[uid] = new NotificationElement(...args);
+
+        return { uid, el: window.NotificationBag[uid] };
+    }
+
+    static remove(uid)
+    {
+        if ( window.NotificationBag[uid] === undefined ) {
+            return;
+        }
+
+        // Remove dom element
+        window.NotificationBag[uid].remove();
+
+        // Remove from list
+        delete window.NotificationBag[uid];
+    }
+
+    static element()
+    {
+        let el = Dom.find('.n-notification-frame');
+
+        if ( !el.empty() ) {
+            return el;
+        }
+
+        let classList = [
+            'n-notification-frame',
+            'n-notification-frame--' + window.nano.Settings.notifySize,
+            'n-notification-frame--' + window.nano.Settings.notifyPosition,
+        ];
+
+        el = Dom.make('div', {
+            classList: classList.join(' ')
+        });
+
+        el.appendTo(document.body);
+
+        return el;
+    }
+
+}
+
+export default NotificationHandler;

package/src/notification/src/notification/notification.scss

@@ -1,7 +1,7 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-notification-frame {
+    z-index: 999999999;
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -53,10 +53,18 @@
     justify-content: flex-start;
     width: 100%;
     max-width: 280px;
-    margin: 5px;
+    margin: size('base-pad');
+    padding: size('base-pad-vertical', 'calc($ * 1.6)') size('base-pad', 'calc($ * 1.6)');
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
     transition: transform 0.15s;
 }
 
+.n-notification:not(:first-child) {
+    margin-bottom: 0;
+}
+
+
 .n-notification-frame.n-notification-frame--top-start .n-notification:not(.n-active),
 .n-notification-frame.n-notification-frame--bottom-start .n-notification:not(.n-active) {
     transform: translateX(-150%);
@@ -72,6 +80,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-right: size('base-pad');
+    font-size: 1.15em;
 }
 
 .n-notification__text {
@@ -79,26 +89,4 @@
     flex: 1 1 auto;
     line-height: 1.2;
     overflow-wrap: break-word;
-}
-
-@each $suffix, $values in $form {
-
-    $-notification-font: map.get($values, 'font');
-    $-notification-size: map.get($values, 'size');
-    $-notification-radius: map.get($values, 'radius');
-    $-notification-ratio: map.get($values, 'ratio');
-
-    $-notification-padding:  $-notification-size * $-notification-ratio;
-
-    .n-notification-frame--#{$suffix} .n-notification {
-        font-size: $-notification-font;
-        padding: $-notification-padding $-notification-padding;
-        border-radius: $-notification-radius;
-    }
-
-    .n-notification-frame--#{$suffix} .n-notification .n-notification__icon {
-        font-size: $-notification-font + 2;
-        margin-right: $-notification-padding;
-    }
-
 }

package/src/paginator/index.scss

@@ -1 +1 @@
-@import "./src/paginator/paginator";
+@forward "./src/paginator/paginator";

package/src/paginator/src/paginator/paginator.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-paginator {
     display: flex;
@@ -8,6 +7,11 @@
     justify-content: stretch;
 }
 
+
+.n-paginator .n-button {
+    min-width: size('base-hgt');
+}
+
 .n-paginator__spacer {
     flex: 1 1 auto;
 }
@@ -35,47 +39,38 @@
     align-items: center;
 }
 
-@each $suffix, $values in $form {
-
-    $-paginator-font: map.get($values, 'font');
-    $-paginator-size: map.get($values, 'size');
-    $-paginator-radius: map.get($values, 'radius');
-    $-paginator-ratio: map.get($values, 'ratio');
-
-    .n-paginator--#{$suffix} .n-paginator__count {
-        font-size: $-paginator-font;
-    }
-
-    .n-paginator--#{$suffix} > div {
-        padding: 0 $-paginator-size * $-paginator-ratio * 0.5;
-    }
-    
-    .n-paginator--#{$suffix} > div:first-child {
-        padding-left: 0;
-    }
-    
-    .n-paginator--#{$suffix} > div:last-child {
-        padding-right: 0;
-    }
-
-    .n-paginator--#{$suffix} .n-paginator__limit .n-select {
-        width: $-paginator-size * 4.2;
-    }
-
-    .n-paginator--#{$suffix} .n-paginator__goto .n-select {
-        width: $-paginator-size * 3.2;
-    }
-
-    .n-paginator--#{$suffix} .n-paginator__pages > button {
-        margin: 0 $-paginator-size * $-paginator-ratio * 0.2;
-    }
-    
-    .n-paginator--#{$suffix} .n-paginator__pages > button:first-child {
-        margin-left: 0;
-    }
-    
-    .n-paginator--#{$suffix} .n-paginator__pages > button:last-child {
-        margin-right: 0;
-    }
+.n-paginator__count {
+    font-size: size('base-fnt');
+}
+
+.n-paginator > div {
+    padding: 0 size('base-pad', 'calc($ * 0.5)');
+}
+
+.n-paginator > div:first-child {
+    padding-left: 0;
+}
+
+.n-paginator > div:last-child {
+    padding-right: 0;
+}
+
+.n-paginator__limit .n-select {
+    width: size('base-hgt-inline', 'calc($ * 8)');
+}
+
+.n-paginator__goto .n-select {
+    width: size('base-hgt-inline', 'calc($ * 5)');
+}
+
+.n-paginator__pages > button:not(:last-child) {
+    margin-right: size('base-pad', 'calc($ * 0.4)');
+}
+
+.n-paginator__pages > button:first-child {
+    margin-left: 0;
+}
 
+.n-paginator__pages > button:last-child {
+    margin-right: 0;
 }

package/src/popover/index.js

@@ -2,8 +2,25 @@ 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";
 
+import PopoverElement from "./src/popover/popover-element.mjs";
+import PopoverHandler from "./src/popover/popover-handler.mjs";
+import PopoverHelper from "./src/popover/popover-helper.mjs";
+
 export default function (App) {
-    App.component(Popover.name, Popover);
-    App.component(PopoverGroup.name, PopoverGroup);
-    App.component(PopoverOption.name, PopoverOption);
+
+    let directives = [
+        PopoverElement, PopoverHandler, PopoverHelper
+    ];
+
+    pi.Arr.each(directives, (glob) => {
+        App.config.globalProperties[glob.alias] = window[glob.alias] = glob;
+    });
+
+    let components = [
+        Popover, PopoverGroup, PopoverOption
+    ];
+
+    pi.Arr.each(components, (comp) => {
+        App.component(comp.name, comp);
+    });
 }