@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/grid/src/grid/grid.scss

@@ -0,0 +1,146 @@
+@use "sass:math";
+@use "../../../root/helpers" as *;
+
+:root {
+    --grid-display: flex;
+    --grid-direction: row;
+    --grid-wrap: wrap;
+    --grid-align: flex-start;
+    --grid-justify: flex-start;
+    --grid-col: 100%;
+    --grid-col-flex: 0 0 auto;
+    --grid-gap-h: 20px;
+    --grid-gap-v: 10px;
+}
+
+.n-grid {
+    display: var(--grid-display, flex);
+    flex-direction: var(--grid-direction, row);
+    flex-wrap: var(--grid-wrap, wrap);
+    align-items: var(--grid-align, flex-start);
+    justify-content: var(--grid-justify, flex-start);
+    margin-top: calc(var(--grid-gap-v) * -0.5);
+    margin-bottom: calc(var(--grid-gap-v) * -0.5);
+    margin-left: calc(var(--grid-gap-h) * -0.5);
+    margin-right: calc(var(--grid-gap-h) * -0.5);
+}
+
+.n-grid > [class*="col-"] {
+    flex: var(--grid-col-flex, 0 0 auto);
+    width: calc(var(--grid-col, 100%) - var(--grid-gap-h, 0));
+    margin-top: calc(var(--grid-gap-v) * 0.5);
+    margin-bottom: calc(var(--grid-gap-v) * 0.5);
+    margin-left: calc(var(--grid-gap-h) * 0.5);
+    margin-right: calc(var(--grid-gap-h) * 0.5);
+}
+
+@mixin grid($suffix: '') {
+
+    .n-grid.column#{$suffix} {
+        --grid-direction: column;
+    }
+
+    .n-grid.row#{$suffix} {
+        --grid-direction: row;
+    }
+
+    .n-grid.wrap#{$suffix} {
+        --grid-wrap: wrap;
+    }
+
+    .n-grid.nowrap#{$suffix} {
+        --grid-wrap: nowrap;
+    }
+
+    .n-grid.align-start#{$suffix} {
+        --grid-align: flex-start;
+    }
+
+    .n-grid.align-center#{$suffix} {
+        --grid-align: center;
+    }
+
+    .n-grid.align-end#{$suffix} {
+        --grid-align: flex-end;
+    }
+
+    .n-grid.justify-start#{$suffix} {
+        --grid-justify: flex-start;
+    }
+
+    .n-grid.justify-center#{$suffix} {
+        --grid-justify: center;
+    }
+
+    .n-grid.justify-end#{$suffix} {
+        --grid-justify: flex-end;
+    }
+
+}
+
+@mixin grid-gap($suffix: '') {
+
+    @each $step in (5, 10, 15, 20, 25, 30) {
+        .n-grid.gap-#{$step}#{$suffix} {
+            --grid-gap-h: #{$step}px;
+            --grid-gap-v: #{$step}px;
+        }
+
+        .n-grid.gap-h-#{$step}#{$suffix} {
+            --grid-gap-h: #{$step}px;
+        }
+
+        .n-grid.gap-v-#{$step}#{$suffix} {
+            --grid-gap-v: #{$step}px;
+        }
+    }
+
+}
+
+@mixin grid-column($suffix: '') {
+
+    .n-grid > .col-auto#{$suffix} {
+        --grid-col: auto;
+    }
+
+    @each $step in (1, 2) {
+        .n-grid > .col-#{$step}\-2#{$suffix} {
+            --grid-col: #{(math.div(100%, 2) * $step) - 0.001};
+        }
+    }
+
+    @each $step in (1, 2, 3) {
+        .n-grid > .col-#{$step}\-3#{$suffix} {
+            --grid-col: #{(math.div(100%, 3) * $step) - 0.001};
+        }
+    }
+
+    @each $step in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12) {
+        .n-grid > .col-#{$step}\-12#{$suffix} {
+            --grid-col: #{(math.div(100%, 12) * $step) - 0.001};
+        }
+    }
+
+}
+
+$breakpoints: (
+        'xs': 'screen and (min-width: 576px)',
+        'sm': 'screen and (min-width: 768px)',
+        'md': 'screen and (min-width: 992px)',
+        'lg': 'screen and (min-width: 1200px)',
+        'xl': 'screen and (min-width: 1440px)'
+);
+
+@include grid();
+@include grid-gap();
+@include grid-column();
+
+@each $name, $query in $breakpoints {
+    @media #{$query} {
+        @include grid(\@ + $name);
+        @include grid-gap(\@ + $name);
+        @include grid-column(\@ + $name);
+    }
+}
+
+

package/src/index.js

@@ -43,6 +43,7 @@ import Map from "./map/index.js";
 import File from "./file/index.js";
 import Rating from "./rating/index.js";
 import Drawer from "./drawer/index.js";
+import Chart from "./chart/index.js";
 
 const NanoImports = [
     Alert,
@@ -83,7 +84,8 @@ const NanoImports = [
     Map,
     File,
     Rating,
-    Drawer
+    Drawer,
+    Chart
 ];
 
 export const Icons = {
@@ -95,6 +97,7 @@ export const Icons = {
     calendar: 'fa fa-calendar',
     times: 'fa fa-times',
     primary: 'fa fa-info-circle',
+    secondary: 'fa fa-info-circle',
     success: 'fa fa-check-circle',
     warning: 'fa fa-exclamation-circle',
     danger: 'fa fa-times-circle',

package/src/index.scss

@@ -1,40 +1,46 @@
-@import "./empty/index";
-@import "./alert/index";
-@import "./notification/index";
-@import "./scrollbar/index";
-@import "./resizer/index";
-@import "./virtualscroller/index";
-@import "./draggable/index";
-@import "./loader/index";
-@import "./form/index";
-@import "./button/index";
-@import "./input/index";
-@import "./input-number/index";
-@import "./textarea/index";
-@import "./slider/index";
-@import "./switch/index";
-@import "./checkbox/index";
-@import "./radio/index";
-@import "./select/index";
-@import "./cascader/index";
-@import "./datepicker/index";
-@import "./timepicker/index";
-@import "./datetimepicker/index";
-@import "./durationpicker/index";
-@import "./transfer/index";
-@import "./file/index";
-@import "./popover/index";
-@import "./modal/index";
-@import "./confirm/index";
-@import "./table/index";
-@import "./paginator/index";
-@import "./tabs/index";
-@import "./tags/index";
-@import "./collapse/index";
-@import "./info/index";
-@import "./map/index";
-@import "./preview/index";
-@import "./rating/index";
-@import "./config/index";
-@import "./drawer/index";
+@forward "./empty/index";
+@forward "./alert/index";
+@forward "./notification/index";
+@forward "./scrollbar/index";
+@forward "./resizer/index";
+@forward "./virtualscroller/index";
+@forward "./draggable/index";
+@forward "./loader/index";
+@forward "./form/index";
+@forward "./button/index";
+@forward "./input/index";
+@forward "./input-number/index";
+@forward "./textarea/index";
+@forward "./slider/index";
+@forward "./switch/index";
+@forward "./checkbox/index";
+@forward "./radio/index";
+@forward "./select/index";
+@forward "./cascader/index";
+@forward "./datepicker/index";
+@forward "./timepicker/index";
+@forward "./datetimepicker/index";
+@forward "./durationpicker/index";
+@forward "./transfer/index";
+@forward "./file/index";
+@forward "./popover/index";
+@forward "./modal/index";
+@forward "./confirm/index";
+@forward "./table/index";
+@forward "./paginator/index";
+@forward "./tabs/index";
+@forward "./tags/index";
+@forward "./collapse/index";
+@forward "./info/index";
+@forward "./map/index";
+@forward "./preview/index";
+@forward "./rating/index";
+@forward "./config/index";
+@forward "./drawer/index";
+@forward "./tooltip/index";
+@forward "./grid/index";
+@forward "./chart/index";
+
+
+
 

package/src/info/index.scss

@@ -1,3 +1,3 @@
-@import "./src/info/info";
-@import "./src/info-column/info-column";
-@import "./src/info-field/info-field";
+@forward "./src/info/info";
+@forward "./src/info-column/info-column";
+@forward "./src/info-field/info-field";

package/src/info/src/info/info.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-info {
     position: relative;
@@ -8,6 +7,8 @@
     align-items: stretch;
     justify-content: stretch;
     border: 1px solid transparent;
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
 }
 
 .n-info__body {
@@ -15,34 +16,14 @@
     flex-direction: column;
     align-items: stretch;
     justify-content: flex-start;
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad', 'calc($ * 2)');
 }
 
 .n-info__empty {
     margin: auto;
+    padding: size('base-pad', 'calc($ * 2)') size('base-pad');
 }
 
-@each $suffix, $values in $form {
-
-    $-info-font: map.get($values, 'font');
-    $-info-size: map.get($values, 'size');
-    $-info-radius: map.get($values, 'radius');
-    $-info-ratio: map.get($values, 'ratio');
-
-    .n-info--#{$suffix} {
-        font-size: $-info-font;
-        border-radius: $-info-radius + 2;
-    }
-
-    .n-info--#{$suffix} .n-info__body {
-        padding: $-info-size * 0.3 $-info-size * 0.5;
-    }
-
-    .n-info--#{$suffix} .n-info__empty {
-        padding: $-info-size $-info-size * 0.5;
-    }
-
-    .n-info--#{$suffix} .n-info__column:not(:last-child) {
-        margin-bottom: $-info-size * 0.5;
-    }
-
+.n-info__column:not(:last-child) {
+    margin-bottom: size('base-pad');
 }

package/src/info/src/info-column/info-column.scss

@@ -1,19 +1,5 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-info-column {
-    color: $color-gray-60;
-}
-
-@each $suffix, $values in $form {
-
-    $-info-font: map.get($values, 'font');
-    $-info-size: map.get($values, 'size');
-    $-info-radius: map.get($values, 'radius');
-    $-info-ratio: map.get($values, 'ratio');
-
-    .n-info--#{$suffix} .n-info-column {
-        font-size: $-info-font - 2;
-    }
-
+    font-size: size('base-fnt-label');
 }

package/src/info/src/info-field/info-field.scss

@@ -1,4 +1,4 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-info-field {
     position: relative;

package/src/input/index.scss

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

package/src/input/src/input/input.jsx

@@ -180,7 +180,7 @@ export default {
         }
 
         let props = {
-            type: 'input',
+            type: 'reset',
             icon: this.icon,
             size: this.size,
             square: true,

package/src/input/src/input/input.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-input {
     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,55 +20,29 @@
     appearance: none;
     display: block;
     width: 100%;
+    height: size('base-hgt', 'calc($ - 2px)');
     white-space: nowrap;
     text-decoration: none;
     line-height: 1.2;
+    padding: 0 size('base-pad');
     border: none;
     background: transparent;
     box-shadow: none;
 }
 
-.n-input.n-disabled input {
-    cursor: not-allowed;
+.n-input.n-input--icon.n-input--icon-before input {
+    padding-left: size('base-pad');
 }
 
-.n-input .n-button {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
+.n-input.n-input--icon.n-input--icon-after input {
+    padding-right: size('base-pad');
 }
 
-.n-input.n-input--icon.n-input--icon-before .n-button {
-    left: 1px;
-}
-
-.n-input.n-input--icon.n-input--icon-after .n-button {
-    right: 1px;
+.n-input.n-disabled input {
+    cursor: not-allowed;
 }
 
-@each $suffix, $values in $form {
-
-    $-input-font: map.get($values, 'font');
-    $-input-size: map.get($values, 'size');
-    $-input-radius: map.get($values, 'radius');
-    $-input-ratio: map.get($values, 'ratio');
-
-    .n-input--#{$suffix} {
-        font-size: $-input-font;
-        border-radius: $-input-radius;
-    }
-
-    .n-input--#{$suffix} input {
-        height: $-input-size - 2;
-        padding: 0 $-input-size * $-input-ratio;
-    }
-
-    .n-input--#{$suffix}.n-input--icon.n-input--icon-before input {
-        padding-left: $-input-size + ($-input-size * $-input-ratio);
-    }
-    
-    .n-input--#{$suffix}.n-input--icon.n-input--icon-after input {
-        padding-right: $-input-size + ($-input-size * $-input-ratio);
-    }
-
-}
+.n-input .n-button {
+    width: size('base-hgt', 'calc($ - 2px)');
+    height: size('base-hgt', 'calc($ - 2px)');
+}

package/src/input-number/index.scss

@@ -1 +1 @@
-@import "./src/input-number/input-number";
+@forward "./src/input-number/input-number";

package/src/input-number/src/input-number/input-number.jsx

@@ -12,7 +12,7 @@ export default {
         NFormItem: {
             default: undefined
         }
-        
+
     },
 
 
@@ -124,7 +124,8 @@ export default {
 
     computed: {
 
-        deepDisabled() {
+        deepDisabled()
+        {
             return this.NFormItem ? this.NFormItem.disabled(this.disabled) :
                 this.disabled;
         }
@@ -136,7 +137,7 @@ export default {
         modelValue(value)
         {
             if ( value !== this.tempValue ) {
-                this.tempValue = this.getValue(value);
+                this.tempValue = value;
             }
         }
 
@@ -145,7 +146,7 @@ export default {
     data()
     {
         return {
-            focus: false, tempValue: this.getValue(),
+            focus: false, tempValue: this.modelValue,
         }
     },
 
@@ -171,8 +172,7 @@ export default {
 
         getDisplayValue()
         {
-
-            if ( Any.isEmpty(this.modelValue) ) {
+            if ( Any.isEmpty(this.tempValue) ) {
                 return null;
             }
 
@@ -202,23 +202,31 @@ export default {
 
         onNextDown()
         {
+            clearTimeout(this.prevTimeout);
+            clearInterval(this.prevInterval);
+
             this.nextStep();
 
             this.nextTimeout = setTimeout(() => {
                 this.nextInterval = setInterval(this.nextStep, 100);
             }, 400);
 
-            Dom.find(document).on('mouseup', this.onNextUp,
-                this._.uid);
+            Dom.find(window).on('mouseup', this.onNextUp, {
+                uid: this._.uid + 'next'
+            });
         },
 
-        onNextUp()
+        onNextUp(event)
         {
+            event.preventDefault();
+            event.stopPropagation();
+
             clearTimeout(this.nextTimeout);
             clearInterval(this.nextInterval);
 
-            Dom.find(document).off('mouseup', null,
-                this._.uid);
+            Dom.find(window).off('mouseup', null, {
+                uid: this._.uid + 'next'
+            });
         },
 
         prevStep()
@@ -235,29 +243,36 @@ export default {
 
             value = Num.float(value).toFixed(this.precision);
 
-            this.$emit('update:modelValue',
-                this.tempValue = Num.float(value));
+            this.$emit('update:modelValue', this.tempValue = Num.float(value));
         },
 
         onPrevDown()
         {
+            clearTimeout(this.nextTimeout);
+            clearInterval(this.nextInterval);
+
             this.prevStep();
 
             this.prevTimeout = setTimeout(() => {
                 this.prevInterval = setInterval(this.prevStep, 100);
             }, 400);
 
-            Dom.find(document).on('mouseup', this.onPrevUp,
-                this._.uid);
+            Dom.find(window).on('mouseup', this.onPrevUp, {
+                uid: this._.uid + 'prev'
+            });
         },
 
-        onPrevUp()
+        onPrevUp(event)
         {
+            event.preventDefault();
+            event.stopPropagation();
+
             clearTimeout(this.prevTimeout);
             clearInterval(this.prevInterval);
 
-            Dom.find(document).off('mouseup', null,
-                this._.uid);
+            Dom.find(window).off('mouseup', null, {
+                uid: this._.uid + 'prev'
+            });
         },
 
         onKeydown(event)
@@ -325,7 +340,7 @@ export default {
             this.tempValue <= this.min;
 
         let props = {
-            type: 'input-number',
+            type: 'reset',
             size: this.size,
             icon: 'fa fa-minus',
             square: true,
@@ -342,7 +357,7 @@ export default {
             this.tempValue >= this.max;
 
         let props = {
-            type: 'input-number',
+            type: 'reset',
             size: this.size,
             icon: 'fa fa-plus',
             square: true,
@@ -355,8 +370,9 @@ export default {
 
     renderInput()
     {
-        let props = Obj.except(this.$attrs,
-            ['class', 'style']);
+        let props = Obj.except(this.$attrs, [
+            'class', 'style'
+        ]);
 
         Obj.assign(props, {
             value: this.getDisplayValue(),
@@ -383,7 +399,7 @@ export default {
         }
 
         return (
-            <div class="n-input-number__clear" {...props}>
+            <div class="n-input-number__clear n-form-clear" {...props}>
                 <i class={nano.Icons.times}></i>
             </div>
         );