@kizmann/nano-ui 1.0.1 → 1.0.3

package/src/draggable/src/draghandler/draghandler.js

@@ -1,6 +1,6 @@
 import { Arr, Obj, Num, Any, Dom, Event, Locale, UUID } from "@kizmann/pico-js";
 
-global.dragMods = [];
+window.dragMods = [];
 
 class NDragCounter
 {
@@ -38,21 +38,21 @@ class NDragCounter
 
     update()
     {
-        global.dragMods = global.keyMods;
+        window.dragMods = window.keyMods;
 
         let classList = [
             'n-draggable__counter'
         ];
 
-        if ( Arr.has(global.dragMods, 18) ) {
+        if ( Arr.has(window.dragMods, 18) ) {
             classList.push('n-modify--alt');
         }
 
-        if ( Arr.has(global.dragMods, 17) ) {
+        if ( Arr.has(window.dragMods, 17) ) {
             classList.push('n-modify--ctrl');
         }
 
-        if ( Arr.has(global.dragMods, 91) ) {
+        if ( Arr.has(window.dragMods, 91) ) {
             classList.push('n-modify--meta');
         }
 
@@ -61,7 +61,7 @@ class NDragCounter
 
 }
 
-global.DragCounter = new NDragCounter;
+window.DragCounter = new NDragCounter;
 
 class NDragIndicator
 {
@@ -154,8 +154,8 @@ class NDraghandler
     {
         this.DragIndicator = new NDragIndicator(frame || this.rootNode.$el);
 
-        if ( global.DragCache ) {
-            this.bindDragstart.call(this, ...global.DragCache);
+        if ( window.DragCache ) {
+            this.bindDragstart.call(this, ...window.DragCache);
         }
 
         Dom.find(this.rootNode.$el).on('dragenter', (event) => {
@@ -356,7 +356,7 @@ class NDraghandler
             return Arr.find(this.rootNode.virtuals, { [this.rootNode.uniqueProp]: id });
         });
 
-        global.DragCounter.get(event, cache.length);
+        window.DragCounter.get(event, cache.length);
 
         Arr.map(cache, (value) => {
             return { value, item: Obj.get(this.rootNode, value.route) };
@@ -365,7 +365,7 @@ class NDraghandler
         Event.fire('NDrag:start', this.rootNode.group,
             this.dropNodes = cache);
 
-        global.DragCache = [
+        window.DragCache = [
             this.rootNode.group, this.dropNodes
         ];
 
@@ -462,7 +462,7 @@ class NDraghandler
 
         Event.fire('NDrag:end');
 
-        global.DragCache = null;
+        window.DragCache = null;
     }
 
     onDragdropNode(event, node)
@@ -646,15 +646,15 @@ class NDraghandler
 
         let eventName = 'move';
 
-        if ( Arr.has(global.dragMods, 18) ) {
+        if ( Arr.has(window.dragMods, 18) ) {
             eventName = 'moveAlt';
         }
 
-        if ( Arr.has(global.dragMods, 17) ) {
+        if ( Arr.has(window.dragMods, 17) ) {
             eventName = 'moveCtrl';
         }
 
-        if ( Arr.has(global.dragMods, 91) ) {
+        if ( Arr.has(window.dragMods, 91) ) {
             eventName = 'moveMeta';
         }
 

package/src/draggable/src/draglist/draglist.js

@@ -1,7 +1,7 @@
 import { UUID, Num, Arr, Obj, Dom, Any, Event, Locale } from "@kizmann/pico-js";
 import NDraghandler from "../draghandler/draghandler";
 
-global.DEBUG_NDLIST = false;
+window.DEBUG_NDLIST = false;
 
 export default {
 
@@ -445,7 +445,7 @@ export default {
         {
             this.virtuals = this.drag.reduce(this.items);
 
-            if ( global.DEBUG_NDLIST ) {
+            if ( window.DEBUG_NDLIST ) {
                 console.log('Total virtual items mounted: ' + this.virtuals.length);
             }
         },

package/src/draggable/src/draglist-item/draglist-item.js

@@ -157,7 +157,7 @@ export default {
 
             this.NDraggable.setCurrent(this);
 
-            if ( Arr.has(global.keyMods, 91) ) {
+            if ( Arr.has(window.keyMods, 91) ) {
                 this.NDraggable.selectItem(this);
             }
 

package/src/draggable/src/dropzone/dropzone.js

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

package/src/drawer/src/drawer/drawer.js

@@ -192,7 +192,7 @@ export default {
             this.$emit('update:modelValue', true, source);
         },
 
-        closeModal(force = false, source = null)
+        closeDrawer(force = false, source = null)
         {
             if ( ! this.tempValue ) {
                 return;
@@ -266,7 +266,7 @@ export default {
             }
 
             if ( ! result ) {
-                return this.closeModal(false, 'escape');
+                return this.closeDrawer(false, 'escape');
             }
 
             if ( this.listen ) {
@@ -293,7 +293,7 @@ export default {
                 return;
             }
 
-            this.closeModal(false, 'escape');
+            this.closeDrawer(false, 'escape');
         },
 
     },
@@ -305,7 +305,7 @@ export default {
         }
 
         let props = {
-            onClick: () => this.closeModal(false, 'escape')
+            onClick: () => this.closeDrawer(false, 'escape')
         };
 
         return (
@@ -323,7 +323,7 @@ export default {
 
         return (
             <div class="n-drawer__header">
-                { [this.$slots.header && this.$slots.header({ closeModal: this.closeModal }) || this.title, this.ctor('renderClose')()] }
+                { [this.$slots.header && this.$slots.header({ closeDrawer: this.closeDrawer }) || this.title, this.ctor('renderClose')()] }
             </div>
         );
     },
@@ -336,7 +336,7 @@ export default {
 
         return (
             <div class="n-drawer__footer">
-                { this.$slots.footer({ closeModal: this.closeModal }) }
+                { this.$slots.footer({ closeDrawer: this.closeDrawer }) }
             </div>
         );
     },
@@ -345,12 +345,12 @@ export default {
     {
         let bodyHtml = (
             <NScrollbar ref="scrollbar" relative={true} wrapClass="n-drawer__wrap">
-                { this.$slots.default && this.$slots.default({ closeModal: this.closeModal }) }
+                { this.$slots.default && this.$slots.default({ closeDrawer: this.closeDrawer }) }
             </NScrollbar>
         );
 
         if ( this.$slots.body ) {
-            bodyHtml = this.$slots.body({ closeModal: this.closeModal });
+            bodyHtml = this.$slots.body({ closeDrawer: this.closeDrawer });
         }
 
         return (

package/src/drawer/src/drawer/drawer.scss

@@ -39,8 +39,7 @@
     flex-direction: column;
     min-width: 300px;
     max-width: 100%;
-    min-height: 0;
-    max-height: 100%;
+    height: 100vh;
     margin: auto;
     transform: translateX(0);
     transition: opacity 0.2s 0.1s ease-out, transform 0.2s 0.1s ease-out;
@@ -48,9 +47,16 @@
 
 .n-drawer:not(.n-ready) .n-drawer__frame {
     opacity: 0;
+}
+
+.n-drawer--right:not(.n-ready) .n-drawer__frame {
     transform: translateX(20px);
 }
 
+.n-drawer--left:not(.n-ready) .n-drawer__frame {
+    transform: translateX(-20px);
+}
+
 .n-drawer--right > .n-drawer__frame {
     margin: 0 0 0 auto;
 }

package/src/form/src/form-item/form-item.scss

@@ -66,7 +66,12 @@
 
     .n-form-item--#{$suffix} .n-form-item__label {
         font-size: $-form-item-font;
-        margin-bottom: $-form-item-size * $-form-item-ratio * 0.5;
+    }
+
+    .n-form-item--#{$suffix} .n-form-item__label,
+    .n-form-item--#{$suffix} .n-form-item__input {
+        margin-top: $-form-item-size * $-form-item-ratio * 0.25;
+        margin-bottom: $-form-item-size * $-form-item-ratio * 0.25;
     }
 
     .n-form-item--#{$suffix} .n-form-item__error {

package/src/index.js

@@ -31,17 +31,17 @@ export const Settings = {
     notifyPosition: 'bottom-start'
 };
 
-export function Install(App, Icons = {}, Styles = {})
+export function Install(App, Icons = {})
 {
     /**
-     * @const global.pi
+     * @const window.pi
      */
 
-    if ( typeof global.pi === 'undefined' ) {
+    if ( typeof window.pi === 'undefined' ) {
         return console.error('pico-js is not available.');
     }
 
-    Obj.each(global.pi, (value, key) => {
+    Obj.each(window.pi, (value, key) => {
         App.config.globalProperties[key] = value;
     });
 
@@ -52,8 +52,8 @@ export function Install(App, Icons = {}, Styles = {})
     App.config.globalProperties.trans = Locale.trans;
     App.config.globalProperties.choice = Locale.choice;
 
-    global.nano.Icons = Obj.assign(Icons, global.nano.Icons);
-    global.nano.Settings = Obj.assign(Settings, global.nano.Settings);
+    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);
@@ -103,26 +103,26 @@ export const Nano = {
     Icons: Icons, Settings: Settings, Install: Install
 };
 
-global.keyMods = [];
+window.keyMods = [];
 
 Dom.find(document).on('keydown', (event) => {
-    Arr.add(global.keyMods, event.which);
+    Arr.add(window.keyMods, event.which);
 });
 
 Dom.find(document).on('keyup', (event) => {
-    Arr.remove(global.keyMods, event.which);
+    Arr.remove(window.keyMods, event.which);
 });
 
 Dom.find(document).on('dragstart', (event) => {
-    Arr.add(global.keyMods, event.which);
+    Arr.add(window.keyMods, event.which);
 });
 
 Dom.find(document).on('dragend', (event) => {
-    global.keyMods = [];
+    window.keyMods = [];
 });
 
-if ( typeof global.nano === 'undefined' ) {
-    global.nano = Nano;
+if ( typeof window.nano === 'undefined' ) {
+    window.nano = Nano;
 }
 
 export default Nano;

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

@@ -2,6 +2,7 @@
 
 .n-map {
     position: relative;
+    color: $color-black !important;
 }
 
 .n-map:before {

package/src/map/src/map-marker/map-marker.js

@@ -137,7 +137,7 @@ export default {
     {
         return (
             <div style="display: none;">
-                { this.$slots.default }
+                { this.$slots.default && this.$slots.default() }
             </div>
         );
     }

package/src/preview/src/preview/preview.js

@@ -129,11 +129,11 @@ export default {
                 if ( Arr.has(exts, extension) ) fallback = key;
             });
 
-            if ( global.resolveVimeo(file) ) {
+            if ( window.resolveVimeo(file) ) {
                 fallback = 'video';
             }
 
-            if ( global.resolveYoutube(file) ) {
+            if ( window.resolveYoutube(file) ) {
                 fallback = 'video';
             }
 

package/src/preview/src/preview-video/preview-video.js

@@ -1,6 +1,6 @@
 import { Obj, Arr, Str, Any, Dom } from "@kizmann/pico-js";
 
-global.resolveYoutube = function(url, fallback = null) {
+window.resolveYoutube = function(url, fallback = null) {
 
     if ( ! Any.isString(url) ) {
         return fallback;
@@ -33,7 +33,7 @@ global.resolveYoutube = function(url, fallback = null) {
     return fallback;
 }
 
-global.resolveVimeo = function(url, fallback = null) {
+window.resolveVimeo = function(url, fallback = null) {
 
     if ( ! Any.isString(url) ) {
         return fallback;
@@ -117,7 +117,7 @@ export default {
 
         resolveYoutube()
         {
-            let youtube = global.resolveYoutube(this.src);
+            let youtube = window.resolveYoutube(this.src);
 
             if ( ! youtube ) {
                 return false;
@@ -132,7 +132,7 @@ export default {
 
         resolveVimeo()
         {
-            let vimeo = global.resolveVimeo(this.src);
+            let vimeo = window.resolveVimeo(this.src);
 
             if ( ! vimeo ) {
                 return false;

package/src/resizer/src/resizer/resizer.js

@@ -133,11 +133,13 @@ export default {
             this.bindSizechange();
         }
 
-        Event.bind('NResizer:move', 
-            this.forceWidth, this._.uid);
+        Event.bind('NResizer:move', (...args) => {
+            this.forceWidth(...args)
+        }, this._.uid);
 
-        Dom.find(window).on('resize', 
-            Any.debounce(this.onResize, 500), this._.uid);
+        Dom.find(window).on('resize', Any.debounce((...args) => {
+            this.onResize(...args)
+        }, 500), this._.uid);
     },
 
     updated()

package/src/root/vars.scss

@@ -34,7 +34,7 @@ $color-warning:         #FFBF3F !default;
 $color-danger:          #F9536E !default;
 $color-info:            #4BD6F9 !default;
 
-$color-shadow:              color.mix($color-black, $color-primary, 80%) !default;
+$color-shadow:              #000 !default;
 
 
 $color-white-light:         $color-white !default;

package/src/scrollbar/src/scrollbar/scrollbar.next.js

@@ -650,7 +650,7 @@ export default {
             }
 
             let width = $inner.actual(() => {
-                return $inner.scrollWidth();
+                return $inner.scrollWidth() - 1;
             });
 
             if ( width !== this.passedWidth ) {

package/src/scrollbar/src/scrollbar/scrollbar.scss

@@ -13,6 +13,7 @@
     overflow: scroll;
     -webkit-overflow-scrolling: touch;
 }
+
 .n-scrollbar-test > div {
     width: 16px;
     height: 16px;
@@ -70,14 +71,14 @@
 .n-scrollbar-v {
     top: 0;
     right: 0;
-    width: 10px;
+    width: 12px;
 }
 
 
 .n-scrollbar-h {
     left: 0;
     bottom: 0;
-    height: 10px;
+    height: 12px;
 }
 
 .n-scrollbar--native:not(.n-scrollbar--forced) > .n-scrollbar-v,

package/src/select/src/select/select.js

@@ -365,7 +365,7 @@ export default {
             let searchRegex = new RegExp(this.search, 'i');
 
             let searched = Arr.filter(this.elements, (option) => {
-                return option.label.match(searchRegex);
+                return Any.isString(option.label) && option.label.match(searchRegex);
             });
 
             this.searched = searched;

package/src/slider/src/slider/slider.js

@@ -239,6 +239,10 @@ export default {
 
         onMousedown(event)
         {
+            if ( this.disabled ) {
+                return;
+            }
+
             if ( ! Arr.has([0, 1], event.which) ) {
                 return;
             }
@@ -357,6 +361,7 @@ export default {
     {
         let classList = [
             'n-slider',
+            'n-slider--' + this.type,
             'n-slider--' + this.size
         ];
 

package/src/slider/src/slider/slider.scss

@@ -39,6 +39,10 @@
     border-radius: 500px;
 }
 
+.n-disabled .n-slider__handle {
+    cursor: not-allowed;
+}
+
 .n-slider__handle span {
     pointer-events: none;
     position: absolute;

package/src/table/src/table/table.scss

@@ -50,8 +50,12 @@
 }
 
 .n-table .n-table__wrap {
-    margin-right: -1px;
-    margin-bottom: -1px;
+    //margin-right: -1px;
+    //margin-bottom: -1px;
+}
+
+.n-table__header {
+    margin-left: -1px;
 }
 
 .n-table .n-table__inner {

package/src/table/src/table-column/table-column.scss

@@ -22,7 +22,6 @@
 // Column
 
 .n-table__header .n-table-column {
-    margin-left: -1px;
     border-left: 1px solid transparent;
     border-right: 1px solid transparent;
 }

package/src/virtualscroller/src/virtualscroller/virtualscroller.beta.js

@@ -1,6 +1,6 @@
 import { Arr, Obj, Any, Dom } from "@kizmann/pico-js";
 
-global.DEBUG_NVSCROLL = false;
+window.DEBUG_NVSCROLL = false;
 
 export default {
 

package/themes/macos/button/src/button/button.scss

@@ -5,6 +5,15 @@
     opacity: 0.7;
 }
 
+.n-button--default:not(.n-button--link) {
+    color: $color-foreground;
+    background: rgba($color-foreground, 0.05);
+}
+
+.n-button--default:not(.n-button--link):hover {
+    background: rgba($color-foreground, 0.15);
+}
+
 @each $color, $values in $colors {
 
     $-color-base: map.get($values, 'base');

package/themes/macos/radio/src/radio/radio.scss

@@ -12,7 +12,7 @@
 }
 
 .n-radio__radio span {
-    background: $color-black;
+    background: $color-foreground;
 }
 
 @each $color, $values in $colors {

package/themes/macos/root/vars-dark.scss

@@ -38,7 +38,7 @@ $color-warning:         #FFBF3F !default;
 $color-danger:          #F9536E !default;
 $color-info:            #4BD6F9 !default;
 
-$color-shadow:              color.mix($color-black, $color-primary, 80%) !default;
+$color-shadow:              #000 !default;
 
 
 $color-white-light:         $color-white !default;

package/themes/macos/root/vars-light.scss

@@ -38,7 +38,7 @@ $color-warning:         #FFBF3F !default;
 $color-danger:          #F9536E !default;
 $color-info:            #4BD6F9 !default;
 
-$color-shadow:              color.mix($color-black, $color-primary, 80%) !default;
+$color-shadow:              #000 !default;
 
 
 $color-white-light:         $color-white !default;

package/themes/macos/root/vars.scss

@@ -230,5 +230,4 @@ $colors-tags: (
         '16': color.mix($color-secondary, $color-warning, 65%),
         '17': color.mix($color-danger, $color-warning, 65%),
         '18': color.mix($color-success, $color-warning, 65%),
-        '19': color.mix($color-warning, $color-warning, 65%),
 ) !default;

package/themes/macos/scrollbar/src/scrollbar/scrollbar.scss

@@ -2,5 +2,5 @@
 
 .n-scrollbar-v:before,
 .n-scrollbar-h:before {
-    background: rgba($color-black, 0.3);
+    background: rgba($color-foreground, 0.4);
 }

package/themes/macos/select/src/select/select.scss

@@ -42,7 +42,7 @@
     }
 
     .n-select--#{$color} .n-select__item {
-        color: $color-foreground;
+        color: $color-white;
         background: $-color-base;
     }
 

package/themes/macos/slider/src/slider/slider.scss

@@ -1,21 +1,41 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-slider__bar {
     background: $color-gray-10;
 }
 
-.n-slider__range {
-    background: $color-primary;
+.n-slider.n-disabled .n-slider__range {
+    background: $color-gray-50;
 }
 
 .n-slider__handle {
     background: $color-white;
-    border: 6px solid $color-primary;
     box-shadow: 0 0 4px rgba($color-shadow, 0.15);
 }
 
+.n-slider.n-disabled .n-slider__handle {
+    border: 6px solid $color-gray-50;
+}
+
 .n-slider__handle span {
     color: $color-white;
     background: rgba($color-black, 0.8);
 }
 
+@each $color, $values in $colors {
+
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
+
+    .n-slider--#{$color}:not(.n-disabled) .n-slider__range {
+        background: $-color-base;
+    }
+
+    .n-slider--#{$color}:not(.n-disabled) .n-slider__handle {
+        border: 6px solid $-color-base;
+    }
+
+}
+

package/themes/macos/tags/src/tags-item/tags-item.scss

@@ -9,7 +9,8 @@
     $-color-dark: map.get($values, 'dark');
 
     .n-tags-item--color-#{$color} {
-        color: color.mix($-color-dark, $color-black, 70%);
+        color: color.mix($-color-base, $color-foreground, 35%);
+        //color: color.mix($-color-dark, $color-black, 70%);
         background: rgba($-color-base, 0.25);
     }
     .n-tags-item--color-#{$color} i {
@@ -21,7 +22,8 @@
 @each $-tags-index, $-tags-color in $colors-tags {
 
     .n-tags-item--color-#{$-tags-index} {
-        background: rgba($-tags-color, 0.15);
+        color: color.mix($-tags-color, $color-foreground, 35%);
+        background: rgba($-tags-color, 0.25);
     }
     .n-tags-item--color-#{$-tags-index} i {
         color: rgba($-tags-color, 0.75);