@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/datepicker/src/datepicker/datepicker.jsx

@@ -420,7 +420,7 @@ export default {
         }
 
         return (
-            <div class="n-datepicker__clear" {...props}>
+            <div class="n-datepicker__clear n-form-clear" {...props}>
                 <i class={ nano.Icons.times }></i>
             </div>
         );
@@ -429,7 +429,7 @@ export default {
     renderLabelAngle()
     {
         return (
-            <div class="n-datepicker__angle">
+            <div class="n-datepicker__angle n-form-angle">
                 <i class={ nano.Icons.angleDown }></i>
             </div>
         );
@@ -528,8 +528,22 @@ export default {
 
     renderItems()
     {
+        let classList = [
+            'n-popover-shadow',
+        ];
+
+        let excludes = [
+            'modelValue',
+            'placeholder',
+            'placeholderArrive',
+            'placeholderDepart',
+            'rangeSeparator',
+            'position',
+            'clearable',
+            'displayFormat'
+        ];
         
-        let props = Obj.except(this.$props, ['modelValue'], {
+        let props = Obj.except(this.$props, excludes, {
             arrive: this.tempArrive.format(this.format) || null,
             depart: this.tempDepart.format(this.format) || null,
             modelValue: this.tempValue.format(this.format) || null,
@@ -540,13 +554,18 @@ export default {
         props['onUpdate:modelValue'] = this.onDatepickerInput;
 
         return (
-            <NDatepickerPanel class="n-datepicker__body" {...props}></NDatepickerPanel>
+            <NDatepickerPanel class={classList} {...props}></NDatepickerPanel>
         );
     },
 
     renderPopover()
     {
+        let classList = [
+            'n-popover--datepicker',
+        ];
+
         let props = {
+            class: classList,
             trigger: 'click',
             width: 0,
             size: this.size,

package/src/datepicker/src/datepicker/datepicker.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-datepicker {
     display: flex;
@@ -20,7 +19,9 @@
     flex-direction: row;
     align-items: stretch;
     justify-content: stretch;
-    width: 100%;
+    width: calc(100% + 2px);
+    margin: -1px;
+    border: 1px solid transparent;
 }
 
 .n-datepicker__seperator {
@@ -111,7 +112,6 @@
 .n-datepicker__body,
 .n-datepicker__empty {
      overflow: hidden;
-     margin: 1px 0;
      border: 0;
 }
 
@@ -119,54 +119,23 @@
      text-align: center;
 }
 
-@each $suffix, $values in $form {
-
-    $-datepicker-font: map.get($values, 'font');
-    $-datepicker-size: map.get($values, 'size');
-    $-datepicker-radius: map.get($values, 'radius');
-    $-datepicker-ratio: map.get($values, 'ratio');
-
-    .n-datepicker--#{$suffix} {
-        min-height: $-datepicker-size;
-        font-size: $-datepicker-font;
-        border-radius: $-datepicker-radius;
-    }
-
-    $-datepicker-padding: $-datepicker-size * $-datepicker-ratio * 0.5;
-
-    .n-datepicker--#{$suffix} .n-datepicker__display,
-    .n-datepicker--#{$suffix} .n-datepicker__seperator,
-    .n-datepicker--#{$suffix} .n-datepicker__input input {
-        padding: 0 $-datepicker-padding;
-    }
-
-    .n-datepicker--#{$suffix} .n-datepicker__clear,
-    .n-datepicker--#{$suffix} .n-datepicker__angle {
-        width: $-datepicker-size;
-        margin: 0 -#{$-datepicker-padding} 0 -#{$-datepicker-padding};
-    }
-    .n-datepicker--#{$suffix} .n-datepicker__clear i,
-    .n-datepicker--#{$suffix} .n-datepicker__angle i {
-        width: $-datepicker-size - 14;
-        height: $-datepicker-size - 14;
-        line-height: $-datepicker-size - 14;
-    }
-
-    .n-datepicker--#{$suffix} .n-datepicker__angle i {
-        font-size: $-datepicker-font - 2;
-    }
-
-    .n-datepicker--#{$suffix} .n-datepicker__clear i {
-        font-size: $-datepicker-font - 4;
-    }
+.n-datepicker {
+    height: size('base-hgt');
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
+}
 
-    .n-popover--#{$suffix} .n-datepicker__body,
-    .n-popover--#{$suffix} .n-datepicker__empty {
-        border-radius: $-datepicker-radius;
-    }
+//.n-datepicker__seperator,
+.n-datepicker__input input {
+    padding: 0 size('base-pad');
+}
 
-    .n-popover--#{$suffix} .n-datepicker__empty {
-        padding: $-datepicker-padding;
-    }
+.n-datepicker__clear,
+.n-datepicker__angle {
+    width: size('base-hgt');
+}
 
+.n-datepicker__body {
+    border-radius: size('base-rad');
 }
+

package/src/datepicker/src/datepicker-panel/datepicker-panel.jsx

@@ -290,7 +290,8 @@ export default {
     {
         let props = {
             type: this.type,
-            link: true,
+            glass: true,
+            square: true,
             icon: nano.Icons.angleLeft,
             onClick: closure
         };
@@ -302,7 +303,8 @@ export default {
     {
         let props = {
             type: this.type,
-            link: true,
+            glass: true,
+            square: true,
             icon: nano.Icons.angleRight,
             onClick: closure
         };

package/src/datepicker/src/datepicker-panel/datepicker-panel.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-datepicker-panel {
     cursor: default;
@@ -7,9 +6,21 @@
     flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
+}
+
+div:not(.n-popover,.n-datetimepicker-panel) > .n-datepicker-panel {
     border: 1px solid transparent;
 }
 
+.n-datepicker-panel__header {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: stretch;
+}
+
 .n-datepicker-panel__body,
 .n-datepicker-panel__dateview {
     display: flex;
@@ -20,12 +31,17 @@
 
 .n-datepicker-panel__panels,
 .n-datepicker-panel__toolbar {
+    width: 100%;
     display: flex;
     flex-direction: row;
     align-items: stretch;
     justify-content: stretch;
 }
 
+.n-datepicker-panel__toolbar > div:not(:last-child) {
+    margin-right: 5px;
+}
+
 .n-datepicker-panel__display {
     flex: 1 1 auto;
 }
@@ -53,6 +69,21 @@
     flex-direction: row;
     align-items: stretch;
     justify-content: flex-end;
+    margin-top: auto;
+}
+
+.n-datepicker-panel__monthview,
+.n-datepicker-panel__yearview {
+    flex: 1 0 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+}
+
+.n-datepicker-panel__legend {
+    font-size: 0.95em;
 }
 
 .n-datepicker-panel__legend,
@@ -97,12 +128,12 @@
 
 .n-datepicker-panel__dateview .n-datepicker-panel__day:not(:last-child).n-arrive:not(.n-depart),
 .n-datepicker-panel__dateview .n-datepicker-panel__day:first-child.n-between {
-    border-radius: 500px 0 0 500px !important;
+    border-radius: size('base-rad-circle') 0 0 size('base-rad-circle') !important;
 }
 
 .n-datepicker-panel__dateview .n-datepicker-panel__day:not(:first-child).n-depart:not(.n-arrive),
 .n-datepicker-panel__dateview .n-datepicker-panel__day:last-child.n-between {
-    border-radius: 0 500px 500px 0 !important;
+    border-radius: 0 size('base-rad-circle') size('base-rad-circle') 0 !important;
 }
 
 .n-datepicker-panel__year > .n-datepicker-panel__month,
@@ -120,62 +151,57 @@
     font-weight: bold;
 }
 
-@each $suffix, $values in $form {
-
-    $-datepicker-panel-font: map.get($values, 'font');
-    $-datepicker-panel-size: map.get($values, 'size');
-    $-datepicker-panel-radius: map.get($values, 'radius');
-    $-datepicker-panel-ratio: map.get($values, 'ratio');
-
-    .n-datepicker-panel--#{$suffix} {
-        font-size: $-datepicker-panel-font;
-        border-radius: $-datepicker-panel-radius;
-    }
-
-    $-datepicker-panel-padding: $-datepicker-panel-size * $-datepicker-panel-ratio;
+.n-datepicker-panel__display .n-datepicker-panel__month,
+.n-datepicker-panel__display .n-datepicker-panel__year {
+    height: size('base-hgt', 'calc($ - 4px)');
+    padding: 0 size('base-pad', 'calc($ * 0.5)');
+    border-radius: size('base-rad');
+}
 
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__display .n-datepicker-panel__month,
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__display .n-datepicker-panel__year {
-        height: $-datepicker-panel-size - 4;
-        padding: 0 $-datepicker-panel-padding * 0.5;
-        border-radius: $-datepicker-panel-radius;
-    }
+.n-datepicker-panel__toolbar .n-button {
+    width: size('base-hgt', 'calc($ - 4px)') !important;
+    height: size('base-hgt', 'calc($ - 4px)') !important;
+}
 
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__toolbar .n-button {
-        width: $-datepicker-panel-size - 4;
-        height: $-datepicker-panel-size - 4;
-    }
+.n-datepicker-panel__header {
+    height: size('base-hgt', 'calc($ * 1.5)');
+    padding: 0 size('base-pad');
+}
 
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__header,
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__footer {
-        padding: $-datepicker-panel-padding * 0.7 $-datepicker-panel-padding;
-    }
+.n-datepicker-panel__footer {
+    padding: size('base-pad-vertical') size('base-pad');
+}
 
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__dateview .n-datepicker-panel__panel,
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__monthview .n-datepicker-panel__body,
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__yearview .n-datepicker-panel__body {
-        width: ($-datepicker-panel-size * 7) + ($-datepicker-panel-padding * 2);
-    }
+.n-datepicker-panel__dateview .n-datepicker-panel__panel,
+.n-datepicker-panel__monthview .n-datepicker-panel__body,
+.n-datepicker-panel__yearview .n-datepicker-panel__body {
+    //width: calc(#{"(#{size('base-hgt')} * 7) + (#{size('base-pad')} * 2)"});
+}
 
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__monthview .n-datepicker-panel__body,
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__yearview .n-datepicker-panel__body {
-        padding: $-datepicker-panel-padding - 2;
-    }
-    
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__dateview .n-datepicker-panel__panel {
-        padding: $-datepicker-panel-padding * 0.5;
-    }
+.n-datepicker-panel__monthview .n-datepicker-panel__body,
+.n-datepicker-panel__yearview .n-datepicker-panel__body {
+    padding:size('base-pad');
+}
 
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__dateview .n-datepicker-panel__day {
-        width: $-datepicker-panel-size;
-        height: $-datepicker-panel-size;
-    }
+.n-datepicker-panel__dateview .n-datepicker-panel__panel {
+    padding: size('base-pad');
+}
 
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__year > .n-datepicker-panel__month,
-    .n-datepicker-panel--#{$suffix} .n-datepicker-panel__decade > .n-datepicker-panel__year { 
-        height: $-datepicker-panel-size;
-        border-radius: $-datepicker-panel-radius;
-    }
+.n-datepicker-panel__dateview .n-datepicker-panel__day {
+    width: size('base-hgt');
+    height: size('base-hgt');
+}
 
+.n-datepicker-panel__year > .n-datepicker-panel__month,
+.n-datepicker-panel__decade > .n-datepicker-panel__year {
+    height: size('base-hgt');
+    border-radius: size('base-rad');
 }
 
+.n-popover--datepicker {
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    min-width: var(--n-node-width);
+    min-height: var(--n-node-height);
+}

package/src/datetimepicker/index.scss

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

package/src/datetimepicker/src/datetimepicker/datetimepicker.jsx

@@ -267,7 +267,7 @@ export default {
         }
 
         return (
-            <div class="n-datetimepicker__clear" {...props}>
+            <div class="n-datetimepicker__clear n-form-clear" {...props}>
                 <i class={ nano.Icons.times }></i>
             </div>
         );
@@ -276,7 +276,7 @@ export default {
     renderLabelAngle()
     {
         return (
-            <div class="n-datetimepicker__angle">
+            <div class="n-datetimepicker__angle n-form-angle">
                 <i class={ nano.Icons.angleDown }></i>
             </div>
         );
@@ -321,7 +321,7 @@ export default {
     renderPanels()
     {
         return (
-            <div class="n-datetimepicker__body">
+            <div class="n-popover-shadow n-datetimepicker-panel">
                 {[this.ctor('renderDatePanel')(), this.ctor('renderTimePanel')()]}
             </div>
         );

package/src/datetimepicker/src/datetimepicker/datetimepicker.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-datetimepicker {
     display: flex;
@@ -7,7 +6,6 @@
     align-items: stretch;
     justify-content: stretch;
     width: 100%;
-    border: 1px solid transparent;
 }
 
 .n-datetimepicker.n-disabled {
@@ -20,7 +18,9 @@
     flex-direction: row;
     align-items: stretch;
     justify-content: stretch;
-    width: 100%;
+    width: calc(100% + 2px);
+    margin: -1px;
+    border: 1px solid transparent;
 }
 
 .n-datetimepicker__seperator {
@@ -108,14 +108,8 @@
     width: 100%;
 }
 
-.n-datetimepicker__body,
-.n-datetimepicker__empty {
-     overflow: hidden;
-     margin: 1px 0;
-     border: 0;
-}
-
-.n-datetimepicker__body {
+.n-datetimepicker-panel {
+    overflow: hidden;
     display: flex;
     flex-direction: row;
     justify-content: stretch;
@@ -130,60 +124,28 @@
 .n-datetimepicker__time-panel.n-timepicker-panel {
     border: none;
     border-radius: 0;
+    max-height: size('base-hgt', 'calc($ * 10)');
 }
 
 .n-datetimepicker__empty {
      text-align: center;
 }
 
-@each $suffix, $values in $form {
-
-    $-datepicker-font: map.get($values, 'font');
-    $-datepicker-size: map.get($values, 'size');
-    $-datepicker-radius: map.get($values, 'radius');
-    $-datepicker-ratio: map.get($values, 'ratio');
-
-    .n-datetimepicker--#{$suffix} {
-        min-height: $-datepicker-size;
-        font-size: $-datepicker-font;
-        border-radius: $-datepicker-radius;
-    }
-
-    $-datepicker-padding: $-datepicker-size * $-datepicker-ratio * 0.5;
-
-    .n-datetimepicker--#{$suffix} .n-datetimepicker__display,
-    .n-datetimepicker--#{$suffix} .n-datetimepicker__seperator,
-    .n-datetimepicker--#{$suffix} .n-datetimepicker__input input {
-        padding: 0 $-datepicker-padding;
-    }
-
-    .n-datetimepicker--#{$suffix} .n-datetimepicker__clear,
-    .n-datetimepicker--#{$suffix} .n-datetimepicker__angle {
-        width: $-datepicker-size;
-        margin: 0 -#{$-datepicker-padding} 0 -#{$-datepicker-padding};
-    }
-    .n-datetimepicker--#{$suffix} .n-datetimepicker__clear i,
-    .n-datetimepicker--#{$suffix} .n-datetimepicker__angle i {
-        width: $-datepicker-size - 14;
-        height: $-datepicker-size - 14;
-        line-height: $-datepicker-size - 14;
-    }
-
-    .n-datetimepicker--#{$suffix} .n-datetimepicker__angle i {
-        font-size: $-datepicker-font - 2;
-    }
-
-    .n-datetimepicker--#{$suffix} .n-datetimepicker__clear i {
-        font-size: $-datepicker-font - 4;
-    }
-
-    .n-popover--#{$suffix} .n-datetimepicker__body,
-    .n-popover--#{$suffix} .n-datetimepicker__empty {
-        border-radius: $-datepicker-radius;
-    }
-
-    .n-popover--#{$suffix} .n-datetimepicker__empty {
-        padding: $-datepicker-padding;
-    }
+.n-datetimepicker {
+    height: size('base-hgt');
+    font-size: size('base-fnt');
+    border-radius: size('base-rad');
+}
+
+.n-datetimepicker__input input {
+    padding: 0 size('base-pad');
+}
+
+.n-datetimepicker__clear,
+.n-datetimepicker__angle {
+    width: size('base-hgt');
+}
 
+.n-datetimepicker-panel {
+    border-radius: size('base-rad');
 }

package/src/draggable/index.scss

@@ -1,10 +1,10 @@
-@import "./src/draghandler/draghandler";
+@forward "./src/draghandler/draghandler";
 
-@import "./src/draglist/draglist";
-@import "./src/draglist-item/draglist-item";
+@forward "./src/draglist/draglist";
+@forward "./src/draglist-item/draglist-item";
 
-@import "./src/draggrid/draggrid";
-@import "./src/draggrid-item/draggrid-item";
+@forward "./src/draggrid/draggrid";
+@forward "./src/draggrid-item/draggrid-item";
 
 
-@import "./src/dropzone/dropzone";
+@forward "./src/dropzone/dropzone";

package/src/draggable/src/draggrid/draggrid.jsx

@@ -139,7 +139,7 @@ export default {
         useKeys: {
             default()
             {
-                return false;
+                return true;
             },
             type: [Boolean]
         },
@@ -171,7 +171,7 @@ export default {
         offsetY: {
             default()
             {
-                return 10;
+                return 0;
             },
             type: [Number]
         },
@@ -734,8 +734,8 @@ export default {
         }
 
         let passed = [
-            'threshold', 'deathzone', 'itemHeight', 'itemWidth',
-            'overflowX', 'overflowY',  'offsetX', 'offsetY', 'useKeys'
+            'threshold', 'deathzone', 'itemHeight', 'itemWidth', 'overflowX', 'overflowY',
+            'offsetX', 'offsetY', 'useKeys', 'uniqueProp'
         ];
 
         let props = Obj.only(this.$props, passed, {

package/src/draggable/src/draggrid/draggrid.scss

@@ -1,23 +1,6 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-draggrid__empty {
     margin: auto;
-}
-
-@each $suffix, $values in $form {
-
-    $-draggrid-font: map.get($values, 'font');
-    $-draggrid-size: map.get($values, 'size');
-    $-draggrid-radius: map.get($values, 'radius');
-    $-draggrid-ratio: map.get($values, 'ratio');
-
-    .n-draggrid--#{$suffix} {
-        font-size: $-draggrid-font;
-    }
-
-    .n-draggrid--#{$suffix} .n-draggrid__empty {
-        padding: $-draggrid-size $-draggrid-size * 0.5;
-    }
-
+    padding: size('base-pad-vertical', 'calc($ * 2)') size('base-pad');
 }

package/src/draggable/src/draggrid-item/draggrid-item.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-draggrid-item {
     cursor: default;
@@ -14,10 +13,6 @@
     pointer-events: none;
 }
 
-.n-draggrid-item.n-nodrop {
-    background: rgba($color-danger, 0.1);
-}
-
 .n-draggrid-item__element {
     position: relative;
     flex: 1 1 auto;
@@ -59,34 +54,17 @@
     display: none;
 }
 
-@each $suffix, $values in $form {
-
-    $-draggrid-font: map.get($values, 'font');
-    $-draggrid-size: map.get($values, 'size');
-    $-draggrid-radius: map.get($values, 'radius');
-    $-draggrid-ratio: map.get($values, 'ratio');
-
-    .n-draggrid--#{$suffix} {
-        font-size: $-draggrid-font;
-    }
-
-    .n-draggrid--#{$suffix} .n-draggrid__empty {
-        padding: $-draggrid-size $-draggrid-size * 0.5;
-    }
-
-    .n-draggrid--#{$suffix} .n-draggrid-item__ellipsis,
-    .n-draggrid--#{$suffix} .n-draggrid-item__checkbox {
-        width: $-draggrid-size - 16;
-        height: $-draggrid-size - 16;
-        border-radius: $-draggrid-radius - 1;
-    }
-
-    .n-draggrid--#{$suffix} .n-draggrid-item__ellipsis {
-        font-size: $-draggrid-font - 2;
-    }
+.n-draggrid-item__ellipsis,
+.n-draggrid-item__checkbox {
+    width: size('base-hgt-inline');
+    height: size('base-hgt-inline');
+    border-radius: size('base-rad-inline');
+}
 
-    .n-draggrid--#{$suffix} .n-draggrid-item__checkbox {
-        font-size: $-draggrid-font - 4;
-    }
+.n-draggrid-item__ellipsis {
+    font-size: size('base-fnt-icon');
+}
 
+.n-draggrid-item__checkbox {
+    font-size: size('base-fnt-inline');
 }

package/src/draggable/src/draghandler/draghandler.scss

@@ -1,4 +1,4 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-draggable__indicator {
     pointer-events: none;