@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/checkbox/src/checkbox/checkbox.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-checkbox {
     cursor: default;
@@ -7,6 +6,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: stretch;
+    min-height: size('base-hgt');
+    font-size: size('base-fnt');
 }
 
 .n-checkbox.n-disabled {
@@ -25,6 +26,7 @@
 
 .n-checkbox__checkbox i {
     opacity: 0;
+    font-size: size('base-fnt-inline');
 }
 
 .n-checkbox.n-checked .n-checkbox__checkbox i,
@@ -32,33 +34,12 @@
     opacity: 1;
 }
 
-@each $suffix, $values in $form {
-
-    $-checkbox-font: map.get($values, 'font');
-    $-checkbox-size: map.get($values, 'size');
-    $-checkbox-radius: map.get($values, 'radius');
-    $-checkbox-ratio: map.get($values, 'ratio');
-
-    .n-checkbox--#{$suffix} {
-        min-height: $-checkbox-size;
-        font-size: $-checkbox-font;
-    }
-
-    .n-checkbox--#{$suffix} .n-checkbox__checkbox {
-        font-size: $-checkbox-font - 3;
-        width: $-checkbox-size - 14;
-        height: $-checkbox-size - 14;
-        border-radius: $-checkbox-radius - 1;
-    }
-
-    .n-checkbox--#{$suffix} .n-checkbox__checkbox i {
-
-    }
-
-    $-checkbox-padding: $-checkbox-size * $-checkbox-ratio;
-
-    .n-checkbox--#{$suffix} .n-checkbox__label {
-        padding: 0 0 0 $-checkbox-padding * 0.5;
-    }
+.n-checkbox .n-checkbox__checkbox {
+    width: size('base-hgt-inline');
+    height: size('base-hgt-inline');
+    border-radius: size('base-rad-inline');
+}
 
+.n-checkbox .n-checkbox__label {
+    padding-left: size('base-pad', 'calc($ * 0.8)');
 }

package/src/checkbox/src/checkbox-group/checkbox-group.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-checkbox-group {
     display: flex;
@@ -21,39 +20,30 @@
     align-items: flex-start;
 }
 
+.n-checkbox-group.n-checkbox-group--horizontal .n-checkbox {
+    min-height: 0;
+}
+
 .n-checkbox-group.n-checkbox-group--vertical .n-checkbox {
     width: 100%;
 }
 
-@each $suffix, $values in $form {
-
-    $-checkbox-group-font: map.get($values, 'font');
-    $-checkbox-group-size: map.get($values, 'size');
-    $-checkbox-group-radius: map.get($values, 'radius');
-    $-checkbox-group-ratio: map.get($values, 'ratio');
-
-    .n-checkbox-group--#{$suffix}.n-checkbox-group--horizontal .n-checkbox {
-        min-height: 0;
-    }
-
-    .n-checkbox-group--#{$suffix}.n-checkbox-group--horizontal .n-checkbox:not(:first-child) {
-        margin-left: $-checkbox-group-size * $-checkbox-group-ratio;
-    }
-
-    .n-checkbox-group--#{$suffix}.n-checkbox-group--horizontal .n-checkbox:last-child {
-        padding-right: 0;
-    }
+.n-checkbox-group.n-checkbox-group--horizontal .n-checkbox:not(:first-child) {
+    margin-left: size('base-pad', 'calc($ * 1.2)');
+}
 
-    .n-checkbox-group--#{$suffix}.n-checkbox-group--vertical .n-checkbox {
-        min-height: 0;
-    }
+.n-checkbox-group.n-checkbox-group--horizontal .n-checkbox:last-child {
+    padding-right: 0;
+}
 
-    .n-checkbox-group--#{$suffix}.n-checkbox-group--vertical .n-checkbox:not(:first-child) {
-        margin-top: $-checkbox-group-size * $-checkbox-group-ratio * 0.5;
-    }
+.n-checkbox-group.n-checkbox-group--vertical .n-checkbox {
+    min-height: 0;
+}
 
-    .n-checkbox-group--#{$suffix}.n-checkbox-group--vertical .n-checkbox:last-child {
-        padding-bottom: 0;
-    }
+.n-checkbox-group.n-checkbox-group--vertical .n-checkbox:not(:first-child) {
+    margin-top: size('base-pad-vertical', 'calc($ * 0.7)');
+}
 
+.n-checkbox-group.n-checkbox-group--vertical .n-checkbox:last-child {
+    padding-bottom: 0;
 }

package/src/collapse/index.scss

@@ -1,2 +1,2 @@
-@import "./src/collapse/collapse";
-@import "./src/collapse-item/collapse-item";
+@forward "./src/collapse/collapse";
+@forward "./src/collapse-item/collapse-item";

package/src/collapse/src/collapse/collapse.jsx

@@ -56,10 +56,32 @@ export default {
 
     methods: {
 
+        getIndex(tab)
+        {
+            if ( tab.sort !== -1 ) {
+                return 1000 + tab.sort;
+            }
+
+            return Arr.findIndex(this.elements, {
+                name: tab.name
+            });
+        },
+
+        getSorted()
+        {
+            // Fix for vue constructor prop warning
+            let indexies = Arr.each(Any.keys(this.elements), (key) => {
+                return { name: this.elements[key]['name'], index: this.getIndex(this.elements[key]) };
+            });
+
+            return Arr.sort(indexies, 'index');
+        },
+
         addTab(tab)
         {
-            Arr.add(this.elements, tab,
-                { name: tab.name });
+            Arr.add(this.elements, tab, {
+                name: tab.name
+            });
 
             if ( this.init) {
                 this.$nextTick(this.$forceUpdate);
@@ -68,8 +90,9 @@ export default {
 
         removeTab(tab)
         {
-            Arr.remove(this.elements,
-                { name: tab.name });
+            Arr.remove(this.elements, {
+                name: tab.name
+            });
 
             if ( this.init) {
                 this.$nextTick(this.$forceUpdate);

package/src/collapse/src/collapse/collapse.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-collapse {
     overflow: hidden;
@@ -7,6 +6,7 @@
     flex-direction: column;
     align-items: stretch;
     justify-content: flex-start;
+    font-size: size('base-fnt');
 }
 
 .n-collapse__header {
@@ -17,36 +17,28 @@
     flex-direction: row;
     align-items: center;
     justify-content: stretch;
+    border-bottom: 1px solid transparent;
 }
 
 .n-collapse__body {
     position: relative;
-    flex: 1 1 auto;
+    flex: 1 1 100%;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
 }
 
-@each $suffix, $values in $form {
-
-    $-collapse-font: map.get($values, 'font');
-    $-collapse-size: map.get($values, 'size');
-    $-collapse-radius: map.get($values, 'radius');
-    $-collapse-ratio: map.get($values, 'ratio');
-
-    .n-collapse--#{$suffix} {
-        border-radius: $-collapse-radius;
-    }
-
-    $-collapse-padding: $-collapse-size * $-collapse-ratio;
-
-    .n-collapse--#{$suffix} .n-collapse__header {
-        padding: $-collapse-padding * 0.8 $-collapse-padding * 1.2;
-    }
+.n-collapse {
+    border-radius: size('base-rad');
+}
 
-    .n-collapse--#{$suffix} .n-collapse__body > .n-scrollbar-content {
-        padding: $-collapse-padding * 1.2;
-    }
+.n-collapse__header {
+    height: size('base-hgt', 'calc($ + 10px)');
+    padding: 0 size('base-pad');
+}
 
+.n-collapse__body:not(.n-scrollbar),
+.n-scrollbar.n-collapse__body > .n-scrollbar-content {
+    padding: size('base-pad-vertical', 'calc($ * 1.4)') size('base-pad');
 }

package/src/collapse/src/collapse-item/collapse-item.jsx

@@ -49,7 +49,7 @@ export default {
         sort: {
             default()
             {
-                return 0;
+                return - 1;
             },
             type: [Number]
         },
@@ -62,10 +62,10 @@ export default {
             type: [Boolean]
         },
 
-        preload: {
+        lazy: {
             default()
             {
-                return false;
+                return true;
             },
             type: [Boolean]
         },
@@ -102,7 +102,7 @@ export default {
     data()
     {
         return {
-            _key: null, init: false, dragger: 0
+            init: false, dragger: 0
         }
     },
 
@@ -138,6 +138,19 @@ export default {
         );
     },
 
+    renderHeaderAction()
+    {
+        if ( ! this.$slots.action ) {
+            return null;
+        }
+
+        return (
+            <div class="n-collapse__header-action">
+                {this.$slots.action && this.$slots.action()}
+            </div>
+        );
+    },
+
     renderHeaderAngle()
     {
         return (
@@ -153,10 +166,20 @@ export default {
             return null;
         }
 
+        let sorted = this.NCollapse.getSorted();
+
         let classList = [
             'n-collapse__header'
         ];
 
+        if ( Arr.first(sorted)['name'] === this.name ) {
+            classList.push('is-first');
+        }
+
+        if ( Arr.last(sorted)['name'] === this.name ) {
+            classList.push('is-last');
+        }
+
         if ( Arr.has(this.NCollapse.tempValue, this.name) ) {
             classList.push('n-active');
         }
@@ -190,13 +213,14 @@ export default {
         };
 
         props.style = {
-            order: this.sort + 1,
+            order: (Arr.find(sorted, { name: this.name })['index'] * 10) + 1
         };
 
         return (
             <div ref="header" class={classList} {...props}>
                 {this.ctor('renderHeaderIcon')()}
                 {this.ctor('renderHeaderLabel')()}
+                {this.ctor('renderHeaderAction')()}
                 {this.ctor('renderHeaderAngle')()}
             </div>
         );
@@ -204,10 +228,20 @@ export default {
 
     renderBody()
     {
+        let sorted = this.NCollapse.getSorted();
+
         let classList = [
             'n-collapse__body'
         ];
 
+        if ( Arr.first(sorted)['name'] === this.name ) {
+            classList.push('is-first');
+        }
+
+        if ( Arr.last(sorted)['name'] === this.name ) {
+            classList.push('is-last');
+        }
+
         let tempValue = Arr.clone(this.NCollapse.tempValue);
 
         if ( !this.label && !this.$slots.label ) {
@@ -216,11 +250,11 @@ export default {
 
         let renderBody = Arr.has(tempValue, this.name);
 
-        if ( !Arr.has(tempValue, this.name) && this.keep ) {
+        if ( this.keep ) {
             renderBody = this.init;
         }
 
-        if ( !Arr.has(tempValue, this.name) && this.preload ) {
+        if ( ! this.lazy ) {
             renderBody = true;
         }
 
@@ -231,7 +265,7 @@ export default {
         this.init = true;
 
         let style = {
-            order: this.sort + 2
+            order: (Arr.find(sorted, { name: this.name })['index'] * 10) + 2
         };
 
         if ( !Arr.has(tempValue, this.name) ) {

package/src/collapse/src/collapse-item/collapse-item.scss

@@ -1,24 +1,30 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
-.n-collapse__header-icon {
-    flex: 0 0 auto;
-    color: $color-gray-40;
+.n-collapse__header.is-last {
+    margin-bottom: -1px;
 }
 
 .n-collapse__header-label {
     flex: 1 1 auto;
 }
 
-.n-collapse__header-label span {
+.n-collapse__header-label {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
+.n-collapse__header-icon,
 .n-collapse__header-angle {
     flex: 0 0 auto;
-    color: $color-gray-40;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: size('base-hgt-inline');
+    height: size('base-hgt-inline');
+}
+
+.n-collapse__header-angle {
     transition: transform 0.3s;
 }
 
@@ -26,29 +32,25 @@
     transform: rotate(90deg);
 }
 
-@each $suffix, $values in $form {
-
-    $-collapse-font: map.get($values, 'font');
-    $-collapse-size: map.get($values, 'size');
-    $-collapse-radius: map.get($values, 'radius');
-    $-collapse-ratio: map.get($values, 'ratio');
-
-    .n-collapse--#{$suffix} .n-collapse-item {
-        margin-top: $-collapse-size * $-collapse-ratio;
-    }
-
-    .n-collapse--#{$suffix} .n-collapse__header-icon {
-        font-size: $-collapse-font - 2;
-        margin-right: $-collapse-size * $-collapse-ratio * 0.7;
-    }
+.n-collapse__header-icon {
+    font-size: size('base-fnt-icon');
+    margin-right: size('base-pad', 'calc($ * 0.6)');
+}
 
-    .n-collapse--#{$suffix} .n-collapse__header-label {
-        font-size: $-collapse-font + 1;
-    }
+.n-collapse__header-label {
+    font-size: 1.05em;
+}
 
-    .n-collapse--#{$suffix} .n-collapse__header-angle {
-        font-size: $-collapse-font - 2;
-        margin-left: $-collapse-size * $-collapse-ratio * 0.7;
-    }
+.n-collapse__header-angle {
+    font-size: size('base-fnt-icon');
+    margin-left: size('base-pad', 'calc($ * 0.6)');
+}
 
+.n-collapse__header-action {
+    flex: 0 0 auto;
+    margin: 0 size('base-pad', 'calc($ * 0.6)');
 }
+
+.n-collapse__header-action > *:not(:last-child) {
+    margin-right: size('base-pad');
+}

package/src/config/index.scss

@@ -1,3 +1,3 @@
-@import "./src/builder/builder";
-@import "./src/reference-panel/reference-panel";
-@import "./src/reference-picker/reference-picker";
+//@use "./src/builder/builder";
+//@use "./src/reference-panel/reference-panel";
+//@use "./src/reference-picker/reference-picker";

package/src/config/src/builder/builder.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use "sass:color";
-@import "../../../root/vars";
+@use "../../../root/vars";
 
 .n-builder {
     overflow: hidden;

package/src/config/src/reference-panel/reference-panel.scss

@@ -1,5 +1,5 @@
 @use "sass:color";
-@import "../../../root/vars";
+@use "../../../root/vars";
 
 .n-reference-panel {
     position: relative;

package/src/confirm/index.js

@@ -1,5 +1,27 @@
 import Confirm from "./src/confirm/confirm.jsx";
+import ConfirmHandler from "./src/confirm/confirm-handler.mjs";
 
 export default function (App) {
+
+    let ConfirmIcons = {
+        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.ConfirmIcons = pi.Obj.assign(ConfirmIcons,
+        window.ConfirmIcons || {});
+
+    let directives = [
+        ConfirmHandler
+    ];
+
+    pi.Arr.each(directives, (glob) => {
+        App.config.globalProperties[glob.alias] = window[glob.alias] = glob;
+    });
+
     App.component(Confirm.name, Confirm);
-}
+}

package/src/confirm/index.scss

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