@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/alert/src/alert/alert-handler.mjs

@@ -0,0 +1,143 @@
+import { Any, Str, Obj, Dom, Locale, Arr, UUID } from "@kizmann/pico-js";
+
+
+export class AlertHandler
+{
+    static alias = 'Alert';
+
+    modal = null;
+
+    options = {
+        text: '', size: 'md', type: 'primary',
+    };
+
+    static make(text, type = 'primary', options = {})
+    {
+        options = {
+            text, type
+        };
+
+        return new AlertHandler(options).render();
+    }
+
+    constructor(options = {})
+    {
+        this.options = Obj.assign(this.options, options, {
+            uid: UUID(),
+        });
+    }
+
+    close()
+    {
+        this.unbindEvents();
+        this.modal.remove();
+
+        Dom.find(document.body).css({
+            'overflow': 'undefined'
+        });
+    }
+
+    renderIcon(el)
+    {
+        let icon = Obj.get(window.AlertIcons, this.options.type, 'fa fa-ghost');
+
+        let child = Dom.make('div', {
+            classList: 'n-alert__icon', innerHTML: `<i class="n-icon ${icon}"></i>`
+        });
+
+        child.appendTo(el);
+    }
+
+    renderText(el)
+    {
+        let child = Dom.make('div', {
+            classList: 'n-alert__text', innerHTML: `<p>${this.options.text}</p>`
+        });
+
+        child.appendTo(el);
+    }
+
+    bindEvents()
+    {
+        let { uid } = this.options;
+
+        Dom.find(window).on('keydown', (e) => {
+            if ( e.keyCode === 27 ) {
+                e.stopPropagation(); this.close();
+            }
+        }, { uid });
+
+        Dom.find(this.modal).on('click', (e) => {
+            if ( ! Dom.find(e.target).inside('.n-alert-frame') ) {
+                this.close();
+            }
+        }, { uid });
+
+        Any.delay(() => {
+            Dom.find(this.modal).addClass('n-ready');
+        });
+    }
+
+    unbindEvents()
+    {
+        let { uid } = this.options;
+
+        Dom.find(window).off('keydown', null, {
+            uid
+        });
+
+        Dom.find(this.modal).off('click', null, {
+            uid
+        });
+    }
+
+    render()
+    {
+        let cls = Obj.get(this.options, 'class', []);
+
+        if ( Any.isString(cls) ) {
+            cls = cls.split(' ');
+        }
+
+        let classList = [
+            'n-alert',
+            'n-alert--' + this.options.size,
+            'n-alert--' + this.options.type,
+        ];
+
+        classList.push('n-theme--dark');
+
+        let modal = Dom.make('div', {
+            classList: Arr.merge(classList, cls).join(' ')
+        });
+
+        let frame = Dom.make('div', {
+            classList: ['n-alert-frame']
+        });
+
+        frame.appendTo(modal);
+
+        let body = Dom.make('div', {
+            classList: ['n-alert__body']
+        });
+
+        body.appendTo(frame);
+
+        this.renderIcon(body);
+        this.renderText(body);
+
+        Dom.find(document.body).css({
+            'overflow': 'hidden'
+        });
+
+        modal.appendTo(document.body);
+
+        requestAnimationFrame(() => {
+            this.bindEvents();
+        });
+
+        this.modal = modal.get(0);
+    }
+}
+
+export default AlertHandler;

package/src/alert/src/alert/alert.scss

@@ -1,8 +1,7 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
-.n-alert-frame {
-    z-index: 999999999;
+.n-alert {
+    z-index: 999999998;
     position: fixed;
     top: 0;
     left: 0;
@@ -14,21 +13,7 @@
     height: 100%;
 }
 
-.n-alert-backdrop {
-    z-index: 10;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transition: opacity 0.3s;
-}
-
-.n-alert-frame:not(.n-active) .n-alert-backdrop {
-    opacity: 0;
-}
-
-.n-alert {
+.n-alert-frame {
     z-index: 100;
     cursor: default;
     position: relative;
@@ -47,38 +32,45 @@
     transform: translateY(40%);
 }
 
-.n-alert__icon {
-    flex: 0 0 auto;
+.n-alert__body {
+    width: 100%;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    flex-direction: column;
 }
 
-.n-alert__text {
-    overflow: hidden;
-    flex: 1 1 auto;
-    line-height: 1.3;
-    overflow-wrap: break-word;
+.n-alert__icon {
+    z-index: 0;
+    position: relative;
+    text-align: center;
 }
 
-@each $suffix, $values in $form {
+.n-alert__icon i {
+    z-index: 10;
+    position: relative;
+    font-size: 2em;
+}
 
-    $-alert-font: map.get($values, 'font');
-    $-alert-size: map.get($values, 'size');
-    $-alert-radius: map.get($values, 'radius');
-    $-alert-ratio: map.get($values, 'ratio');
+.n-alert__text {
+    z-index: 10;
+    position: relative;
+    text-align: center;
+}
 
-    $-alert-padding:  $-alert-size * $-alert-ratio;
+.n-alert__text p {
+    font-size: 1em;
+}
 
-    .n-alert-frame--#{$suffix} .n-alert {
-        font-size: $-alert-font;
-        padding: $-alert-padding * 1.5 $-alert-padding * 1.5;
-        border-radius: $-alert-radius;
-    }
+.n-alert {
+    font-size: size('base-fnt');
+    padding: size('base-pad', 'calc($ * 3)');
+}
 
-    .n-alert-frame--#{$suffix} .n-alert .n-alert__icon {
-        font-size: $-alert-font + 3;
-        margin-right: $-alert-padding;
-    }
+.n-alert-frame {
+    width: size('base-hgt', 'calc($ * 12)');
+    padding: size('base-pad-vertical', 'calc($ * 3)') size('base-pad', 'calc($ * 3)');
+    border-radius: size('base-rad-window');
+}
 
+.n-alert__icon {
+    margin-bottom: size('base-pad-vertical', 'calc($ * 2)');
 }

package/src/button/index.scss

@@ -1,2 +1,2 @@
-@import "./src/button/button";
-@import "./src/button-group/button-group";
+@forward "./src/button/button";
+@forward "./src/button-group/button-group";

package/src/button/src/button/button.jsx

@@ -39,6 +39,14 @@ export default {
             type: [Boolean]
         },
 
+        round: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
         square: {
             default()
             {
@@ -116,6 +124,10 @@ export default {
             classList.push('n-button--link');
         }
 
+        if ( this.round ) {
+            classList.push('n-button--round');
+        }
+
         if ( this.square ) {
             classList.push('n-button--square');
         }

package/src/button/src/button/button.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-button {
     appearance: none;
@@ -8,50 +7,47 @@
     justify-content: center;
     white-space: nowrap;
     text-decoration: none;
+    font-size: size('base-fnt');
     line-height: 1.2;
     background: transparent;
     border: 1px solid transparent;
     transition: border 0.10s, background 0.10s;
 }
 
-.n-button.n-disabled {
-    cursor: not-allowed;
+.n-button:not(.n-button--link),
+.n-button.n-button--glass.n-button--link {
+    height: size('base-hgt');
+    border-radius: size('base-rad');
 }
 
-.n-button .n-icon {
-    font-size: 0.8em;
+.n-button.n-button--square:not(.n-button--link),
+.n-button.n-button--square.n-button--glass.n-button--link {
+    width: size('base-hgt');
 }
 
-@each $suffix, $values in $form {
-
-    $-button-font: map.get($values, 'font');
-    $-button-size: map.get($values, 'size');
-    $-button-radius: map.get($values, 'radius');
-    $-button-ratio: map.get($values, 'ratio');
-
-    .n-button--#{$suffix} {
-        font-size: $-button-font;
-    }
-
-    .n-button--#{$suffix}:not(.n-button--link) {
-        height: $-button-size;
-        border-radius: $-button-radius;
-    }
+.n-button.n-button--round:not(.n-button--link),
+.n-button.n-button--round.n-button.n-button--glass.n-button--link {
+    padding: 0 size('base-pad', 'calc($ * 1.3)');
+    border-radius: 500px;
+}
 
-    .n-button--#{$suffix}.n-button--square:not(.n-button--link) {
-        width: $-button-size;
-    }
+.n-button:not(.n-button--link,.n-button--square,.n-button--round),
+.n-button.n-button--glass.n-button--link:not(.n-button--square,.n-button--round) {
+    padding: 0 size('base-pad');
+}
 
-    .n-button--#{$suffix}:not(.n-button--link):not(.n-button--square) {
-        padding: 0 $-button-size * $-button-ratio;
-    }
+.n-button.n-disabled {
+    cursor: not-allowed;
+}
 
-    .n-button--#{$suffix} .n-icon.n-icon--before:not(:last-child) {
-        margin-right: $-button-font * $-button-ratio;
-    }
+.n-button .n-icon {
+    font-size: size('base-fnt-icon');
+}
 
-    .n-button--#{$suffix} .n-icon.n-icon--after:not(:first-child) {
-        margin-left: $-button-font * $-button-ratio;
-    }
+.n-button .n-icon.n-icon--before:not(:last-child) {
+    margin-right: size('base-pad', 'calc($ * 0.8)');
+}
 
+.n-button .n-icon.n-icon--after:not(:first-child) {
+    margin-left: size('base-pad', 'calc($ * 0.8)');
 }

package/src/button/src/button-group/button-group.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-button-group {
     display: flex;
@@ -11,6 +10,14 @@
     border-radius: 0;
 }
 
+.n-button-group > *:not(:first-child):last-child {
+    border-radius: 0 size('base-rad') size('base-rad') 0;
+}
+
+.n-button-group > *:not(:last-child):first-child {
+    border-radius: size('base-rad') 0 0 size('base-rad');
+}
+
 .n-button-group > *:not(:last-child) {
     margin-right: -1px;
 }
@@ -22,21 +29,4 @@
 .n-button-group > *:hover,
 .n-button-group > *.n-focus {
     z-index: 10;
-}
-
-@each $suffix, $values in $form {
-
-    $-button-group-font: map.get($values, 'font');
-    $-button-group-size: map.get($values, 'size');
-    $-button-group-radius: map.get($values, 'radius');
-    $-button-group-ratio: map.get($values, 'ratio');
-
-    .n-button-group--#{$suffix} > *:not(:first-child):last-child {
-        border-radius: 0 $-button-group-radius $-button-group-radius 0;
-    }
-
-    .n-button-group--#{$suffix} > *:not(:last-child):first-child {
-        border-radius: $-button-group-radius 0 0 $-button-group-radius;
-    }
-
 }

package/src/cascader/index.scss

@@ -1,2 +1,2 @@
-@import "./src/cascader-panel/cascader-panel";
-@import "./src/cascader/cascader";
+@forward "./src/cascader-panel/cascader-panel";
+@forward "./src/cascader/cascader";

package/src/cascader/src/cascader/cascader.jsx

@@ -45,6 +45,14 @@ export default {
             type: [String]
         },
 
+        emptyText: {
+            default()
+            {
+                return 'No items';
+            },
+            type: [String]
+        },
+
         disabled: {
             default()
             {
@@ -190,7 +198,7 @@ export default {
         }
 
         return (
-            <div class="n-cascader__clear" {...props}>
+            <div class="n-cascader__clear n-form-clear" {...props}>
                 <i class={ nano.Icons.times }></i>
             </div>
         );
@@ -199,7 +207,7 @@ export default {
     renderLabelAngle()
     {
         return (
-            <div class="n-cascader__angle">
+            <div class="n-cascader__angle n-form-angle">
                 <i class={ nano.Icons.angleDown }></i>
             </div>
         );
@@ -262,6 +270,16 @@ export default {
 
     renderItems()
     {
+        let emptyHtml = (
+            <div class="n-popover-shadow n-cascader__empty">
+                <NEmptyIcon inline={true}>{this.trans(this.emptyText)}</NEmptyIcon>
+            </div>
+        );
+
+        if ( Any.isEmpty(this.options) ) {
+            return emptyHtml;
+        }
+
         let props = Obj.except(this.$props, ['modelValue'], {
             hover: this.tempHover,
             modelValue: this.tempValue,
@@ -271,7 +289,7 @@ export default {
         props['onUpdate:modelValue'] = this.onCascaderInput;
 
         return (
-            <NCascaderPanel class="n-cascader__body" {...props}></NCascaderPanel>
+            <NCascaderPanel class="n-popover-shadow" {...props}></NCascaderPanel>
         );
     },
 
@@ -320,7 +338,7 @@ export default {
         return (
             <div class={classList}>
                 { this.ctor('renderDisplay')() }
-                { this.ctor('renderPopover')() }
+                {this.ctor('renderPopover')()}
             </div>
         );
     }

package/src/cascader/src/cascader/cascader.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-cascader {
     cursor: default;
@@ -8,6 +7,9 @@
     align-items: stretch;
     justify-content: stretch;
     width: 100%;
+    min-height: size('base-hgt');
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
     border: 1px solid transparent;
 }
 
@@ -22,7 +24,9 @@
     flex-direction: row;
     align-items: stretch;
     justify-content: stretch;
-    width: 100%;
+    width: calc(100% + 2px);
+    margin: -1px;
+    border: 1px solid transparent;
 }
 
 .n-cascader__clear,
@@ -30,9 +34,6 @@
     order: 100;
     flex: 0 0 auto;
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
 }
 
 .n-cascader__clear {
@@ -57,15 +58,6 @@
     transform: scaleY(-1);
 }
 
-.n-cascader__clear i,
-.n-cascader__angle i {
-    text-align: center;
-}
-
-.n-cascader__clear i {
-    border-radius: 500px;
-}
-
 .n-cascader__items,
 .n-cascader__placeholder {
     overflow: hidden;
@@ -88,6 +80,8 @@
 .n-cascader__item:not(:last-child):after {
     content: '/';
     opacity: 0.3;
+    display: inline-block;
+    text-align: center;
 }
 
 .n-cascader__item span {
@@ -99,75 +93,29 @@
 .n-cascader__body,
 .n-cascader__empty {
      overflow: hidden;
-     margin: 1px 0;
      max-height: 210px;
      border: 0;
 }
 
-.n-cascader__empty {
-     text-align: center;
-     color: $color-gray-60;
+.n-cascader__items,
+.n-cascader__placeholder {
+    padding: 0 size('base-pad');
 }
 
-@each $suffix, $values in $form {
-
-    $-cascader-font: map.get($values, 'font');
-    $-cascader-size: map.get($values, 'size');
-    $-cascader-radius: map.get($values, 'radius');
-    $-cascader-ratio: map.get($values, 'ratio');
-
-    .n-cascader--#{$suffix} {
-        min-height: $-cascader-size;
-        font-size: $-cascader-font;
-        border-radius: $-cascader-radius;
-    }
-
-    $-cascader-padding: $-cascader-size * $-cascader-ratio * 0.5;
-
-    .n-cascader--#{$suffix} .n-cascader__display,
-    .n-cascader--#{$suffix} .n-cascader__placeholder {
-        padding: 0 $-cascader-padding;
-    }
-
-    .n-cascader--#{$suffix} .n-cascader__clear,
-    .n-cascader--#{$suffix} .n-cascader__angle {
-        width: $-cascader-size;
-        margin: 0 -#{$-cascader-padding} 0 -#{$-cascader-padding};
-    }
-    .n-cascader--#{$suffix} .n-cascader__clear i,
-    .n-cascader--#{$suffix} .n-cascader__angle i {
-        width: $-cascader-size - 14;
-        height: $-cascader-size - 14;
-        line-height: $-cascader-size - 14;
-    }
-
-    .n-cascader--#{$suffix} .n-cascader__angle i {
-        font-size: $-cascader-font - 2;
-    }
-
-    .n-cascader--#{$suffix} .n-cascader__clear i {
-        font-size: $-cascader-font - 4;
-    }
-
-    .n-cascader--#{$suffix} .n-cascader__items {
-        padding: 0 $-cascader-padding * 0.5;
-    }
-
-    .n-cascader--#{$suffix} .n-cascader__item {
-        padding: 0 $-cascader-padding * 0.5;
-    }
-
-    .n-cascader--#{$suffix} .n-cascader__item:after {
-        margin-left: $-cascader-padding;
-    }
-
-    .n-popover--#{$suffix} .n-cascader__body,
-    .n-popover--#{$suffix} .n-cascader__empty {
-        border-radius: $-cascader-radius;
-    }
+.n-cascader__clear,
+.n-cascader__angle {
+    width: size('base-hgt');
+}
 
-    .n-popover--#{$suffix} .n-cascader__empty {
-        padding: $-cascader-padding;
-    }
+.n-cascader__body,
+.n-cascader__empty {
+    border-radius: size('base-rad');
+}
 
+.n-cascader__empty {
+    padding: size('base-pad-vertical') size('base-pad');
 }
+
+.n-cascader__item:after {
+    width: size('base-pad', 'calc($ * 2)');
+}

package/src/cascader/src/cascader-panel/cascader-panel.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-cascader-panel {
     overflow: hidden;
@@ -8,6 +7,7 @@
     align-items: stretch;
     justify-content: stretch;
     border: 1px solid transparent;
+    border-radius: size('base-rad');
 }
 
 .n-cascader-panel__items {
@@ -16,18 +16,4 @@
     flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
-}
-
-@each $suffix, $values in $form {
-
-    $-cascader-panel-font: map.get($values, 'font');
-    $-cascader-panel-size: map.get($values, 'size');
-    $-cascader-panel-radius: map.get($values, 'radius');
-    $-cascader-panel-ratio: map.get($values, 'ratio');
-
-    .n-cascader-panel--#{$suffix} {
-        border-radius: $-cascader-panel-radius;
-        font-size: $-cascader-panel-font;
-    }
-
 }

package/src/chart/index.js

@@ -0,0 +1,9 @@
+import ChartItem from "./src/chart-item/chart-item.jsx";
+import ChartDonut from "./src/chart-donut/chart-donut.jsx";
+import ChartBar from "./src/chart-bar/chart-bar.jsx";
+
+export default function (App) {
+    App.component(ChartItem.name, ChartItem);
+    App.component(ChartDonut.name, ChartDonut);
+    App.component(ChartBar.name, ChartBar);
+}

package/src/chart/index.scss

@@ -0,0 +1,3 @@
+@forward "./src/chart-item/chart-item";
+@forward "./src/chart-donut/chart-donut";
+@forward "./src/chart-bar/chart-bar";