@kizmann/nano-ui 0.9.10 → 1.0.0

package/src/form/src/form-frame/form-frame.scss

@@ -0,0 +1,28 @@
+@import "../../../root/vars";
+
+.n-frame {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+}
+
+.n-frame-item {
+    position: relative;
+}
+
+.n-frame-item.is-resize {
+    flex: 0 0 auto;
+}
+
+.n-frame-item:not(.is-resize) {
+    flex: 1 1 auto;
+}
+
+.n-frame-item.is-scrollbar > .n-scrollbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

package/src/form/src/form-frame-item/form-frame-item.js

@@ -0,0 +1,114 @@
+import { Arr, Obj, Any, Dom, UUID, Locale } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NFrameItem',
+
+    inject: {
+
+        NFrame: {
+            default: undefined
+        },
+
+    },
+
+    props: {
+
+        width: {
+            default()
+            {
+                return 0;
+            },
+            type: [Number]
+        },
+
+        resize: {
+            default() {
+                return null;
+            },
+            type: [Boolean]
+        },
+
+        scrollbar: {
+            default() {
+                return null;
+            },
+            type: [Boolean]
+        }
+
+    },
+
+    computed: {
+
+        itemResize() {
+            return Any.isNull(this.resize) ? this.NFrame.resize : this.resize;
+        },
+
+        itemScrollbar() {
+            return Any.isNull(this.scrollbar) ? this.NFrame.scrollbar : this.scrollbar;
+        }
+
+    },
+
+    renderContent()
+    {
+        if ( ! this.itemScrollbar ) {
+            return this.$slots.default && this.$slots.default();
+        }
+
+        return (
+            <NScrollbar>{this.$slots.default && this.$slots.default()}</NScrollbar>
+        );
+    },
+
+    renderDiv(classList)
+    {
+        let style = {
+            //
+        };
+
+        if ( this.width ) {
+            style.width = this.width + 'px';
+        }
+
+        return (
+            <div class={classList} style={style}>
+                {this.ctor('renderContent')()}
+            </div>
+        );
+    },
+
+    renderResizer(classList, style)
+    {
+        let props = {
+            width: this.width
+        };
+
+        return (
+            <NResizer class={classList} {...props}>
+                {this.ctor('renderContent')()}
+            </NResizer>
+        );
+    },
+
+    render()
+    {
+        let classList = [
+            'n-frame-item'
+        ];
+
+        if ( this.itemResize ) {
+            classList.push('is-resize');
+        }
+
+        if ( this.itemScrollbar ) {
+            classList.push('is-scrollbar');
+        }
+
+        if ( this.itemResize ) {
+            return this.ctor('renderResizer')(classList);
+        }
+
+        return this.ctor('renderDiv')(classList);
+    }
+}

package/src/form/src/form-group/form-group.js

@@ -1,3 +1,5 @@
+import { UUID } from "@kizmann/pico-js";
+
 export default {
 
     name: 'NFormGroup',
@@ -20,6 +22,14 @@ export default {
             type: [Boolean]
         },
 
+        key: {
+            default()
+            {
+                return UUID();
+            },
+            type: [String]
+        },
+
         label: {
             default()
             {
@@ -43,6 +53,14 @@ export default {
             type: [String]
         },
 
+        kind: {
+            default()
+            {
+                return 'classic';
+            },
+            type: [String]
+        },
+
         type: {
             default()
             {
@@ -85,6 +103,20 @@ export default {
 
     },
 
+    mounted()
+    {
+        if ( this.NForm ) {
+            this.NForm.registerGroup(this);
+        }
+    },
+
+    unmounted()
+    {
+        if ( this.NForm ) {
+            this.NForm.unregisterGroup(this);
+        }
+    },
+
     data()
     {
         return {
@@ -227,7 +259,7 @@ export default {
         }
 
         return (
-            <fieldset class={classList}>
+            <fieldset id={this.key} class={classList} data-group-key={this.key}>
                 { this.ctor('renderLabel')() }
                 { this.ctor('renderTooltip')() }
                 { this.ctor('renderBody')() }

package/src/form/src/form-group/form-group.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-form-group__legend {
@@ -49,10 +50,10 @@
 
 @each $suffix, $values in $form {
 
-    $-form-group-font: map-get($values, 'font');
-    $-form-group-size: map-get($values, 'size');
-    $-form-group-radius: map-get($values, 'radius');
-    $-form-group-ratio: map-get($values, 'ratio');
+    $-form-group-font: map.get($values, 'font');
+    $-form-group-size: map.get($values, 'size');
+    $-form-group-radius: map.get($values, 'radius');
+    $-form-group-ratio: map.get($values, 'ratio');
 
     .n-form-group--#{$suffix} .n-form-group__legend {
         font-size: $-form-group-font;

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

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-form-item {
@@ -49,10 +50,10 @@
 
 @each $suffix, $values in $form {
 
-    $-form-item-font: map-get($values, 'font');
-    $-form-item-size: map-get($values, 'size');
-    $-form-item-radius: map-get($values, 'radius');
-    $-form-item-ratio: map-get($values, 'ratio');
+    $-form-item-font: map.get($values, 'font');
+    $-form-item-size: map.get($values, 'size');
+    $-form-item-radius: map.get($values, 'radius');
+    $-form-item-ratio: map.get($values, 'ratio');
 
     .n-form-item--#{$suffix} {
         margin-bottom: $-form-item-size * $-form-item-ratio * 2.2;

package/src/form/src/form-menu/form-menu.js

@@ -0,0 +1,89 @@
+import { Arr, Obj, Any, Dom, UUID, Locale } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NFormMenu',
+
+    inject: {
+
+        NForm: {
+            default: undefined
+        },
+
+    },
+
+    props: {
+
+        size: {
+            default()
+            {
+                return '';
+            },
+            type: [String]
+        },
+
+    },
+
+    mounted()
+    {
+
+        Dom.find(document).on('scroll', Any.debounce(() => {
+
+            let loop = true;
+
+            Arr.each(this.NForm.groups, (item) => {
+                loop = loop && ! this.bindInviewEvent(item);
+            })
+        }));
+    },
+
+    methods: {
+
+        bindInviewEvent(item)
+        {
+            let [menu, group] = [
+                `[data-menu-key="${item.key}"]`,
+                `[data-group-key="${item.key}"]`
+            ];
+
+            let inview = Dom.find(group).inviewY(0.1);
+
+            Dom.find('[data-menu-key]')
+                .removeClass('is-visible');
+
+            if ( inview ) {
+                Dom.find(menu).addClass('is-visible');
+            }
+
+            return inview;
+        }
+
+    },
+
+    renderMenu(item)
+    {
+        return (
+           <div data-menu-key={item.key}>
+               <a href={'#' + item.key}>{item.label}</a>
+           </div>
+        );
+    },
+
+    renderMenus()
+    {
+        return Arr.each(this.NForm.groups, (item) => {
+            return this.ctor('renderMenu')(item);
+        })
+    },
+
+    render()
+    {
+        let classList = [
+            'n-form-menu'
+        ];
+
+        return <div class={classList}>
+            {this.ctor('renderMenus')()}
+        </div>;
+    }
+}

package/src/form/src/form-menu/form-menu.scss

@@ -0,0 +1,9 @@
+@import "../../../root/vars";
+
+.n-form-menu [data-menu-key] a {
+    color: red;
+}
+
+.n-form-menu [data-menu-key].is-visible a {
+    color: green;
+}

package/src/index.js

@@ -93,6 +93,7 @@ export function Install(App, Icons = {}, Styles = {})
     require('./map/index').default(App);
     require('./file/index').default(App);
     require('./rating/index').default(App);
+    require('./drawer/index').default(App);
 
     // require('./chart/index'); // Ignore
     // require('./wysiwyg/index'); // Ignore

package/src/index.scss

@@ -37,4 +37,5 @@
 @import "./preview/index";
 @import "./rating/index";
 @import "./config/index";
+@import "./drawer/index";
 

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

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-info {
@@ -22,10 +23,10 @@
 
 @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');
+    $-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;

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

@@ -1,13 +1,16 @@
+@use 'sass:map';
+@import "../../../root/vars";
+
 .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');
+    $-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;

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

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-input {
@@ -46,10 +47,10 @@
 
 @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');
+    $-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;

package/src/input-number/src/input-number/input-number.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-input-number {
@@ -65,10 +66,10 @@
 
 @each $suffix, $values in $form {
 
-    $-input-number-font: map-get($values, 'font');
-    $-input-number-size: map-get($values, 'size');
-    $-input-number-radius: map-get($values, 'radius');
-    $-input-number-ratio: map-get($values, 'ratio');
+    $-input-number-font: map.get($values, 'font');
+    $-input-number-size: map.get($values, 'size');
+    $-input-number-radius: map.get($values, 'radius');
+    $-input-number-ratio: map.get($values, 'ratio');
 
     .n-input-number--#{$suffix} {
         font-size: $-input-number-font;

package/src/loader/src/loader/loader.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-loader {
@@ -51,10 +52,10 @@
 
 @each $suffix, $values in $form {
 
-    $-loader-font: map-get($values, 'font');
-    $-loader-size: map-get($values, 'size');
-    $-loader-radius: map-get($values, 'radius');
-    $-loader-ratio: map-get($values, 'ratio');
+    $-loader-font: map.get($values, 'font');
+    $-loader-size: map.get($values, 'size');
+    $-loader-radius: map.get($values, 'radius');
+    $-loader-ratio: map.get($values, 'ratio');
 
     $-loader-calc: round(($-loader-size / 1px) * ($-loader-font / 2px) * 0.085);
 

package/src/modal/src/modal/modal.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-modal {
@@ -145,10 +146,10 @@
 
 @each $suffix, $values in $form {
 
-    $-modal-font: map-get($values, 'font');
-    $-modal-size: map-get($values, 'size');
-    $-modal-radius: map-get($values, 'radius');
-    $-modal-ratio: map-get($values, 'ratio');
+    $-modal-font: map.get($values, 'font');
+    $-modal-size: map.get($values, 'size');
+    $-modal-radius: map.get($values, 'radius');
+    $-modal-ratio: map.get($values, 'ratio');
 
     .n-modal--#{$suffix} {
         font-size: $-modal-font;

package/src/notification/src/notification/notification.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-notification-frame {
@@ -81,10 +82,10 @@
 
 @each $suffix, $values in $form {
 
-    $-notification-font: map-get($values, 'font');
-    $-notification-size: map-get($values, 'size');
-    $-notification-radius: map-get($values, 'radius');
-    $-notification-ratio: map-get($values, 'ratio');
+    $-notification-font: map.get($values, 'font');
+    $-notification-size: map.get($values, 'size');
+    $-notification-radius: map.get($values, 'radius');
+    $-notification-ratio: map.get($values, 'ratio');
 
     $-notification-padding:  $-notification-size * $-notification-ratio;
 

package/src/paginator/src/paginator/paginator.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-paginator {
@@ -36,10 +37,10 @@
 
 @each $suffix, $values in $form {
 
-    $-paginator-font: map-get($values, 'font');
-    $-paginator-size: map-get($values, 'size');
-    $-paginator-radius: map-get($values, 'radius');
-    $-paginator-ratio: map-get($values, 'ratio');
+    $-paginator-font: map.get($values, 'font');
+    $-paginator-size: map.get($values, 'size');
+    $-paginator-radius: map.get($values, 'radius');
+    $-paginator-ratio: map.get($values, 'ratio');
 
     .n-paginator--#{$suffix} .n-paginator__count {
         font-size: $-paginator-font;

package/src/popover/src/popover/popover.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-popover {
@@ -100,10 +101,10 @@
 
 @each $suffix, $values in $form {
 
-    $-popover-font: map-get($values, 'font');
-    $-popover-size: map-get($values, 'size');
-    $-popover-radius: map-get($values, 'radius');
-    $-popover-ratio: map-get($values, 'ratio');
+    $-popover-font: map.get($values, 'font');
+    $-popover-size: map.get($values, 'size');
+    $-popover-radius: map.get($values, 'radius');
+    $-popover-ratio: map.get($values, 'ratio');
 
     .n-popover--#{$suffix} {
         font-size: $-popover-font;

package/src/radio/src/radio/radio.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-radio {
@@ -38,10 +39,10 @@
 
 @each $suffix, $values in $form {
 
-    $-radio-font: map-get($values, 'font');
-    $-radio-size: map-get($values, 'size');
-    $-radio-radius: map-get($values, 'radius');
-    $-radio-ratio: map-get($values, 'ratio');
+    $-radio-font: map.get($values, 'font');
+    $-radio-size: map.get($values, 'size');
+    $-radio-radius: map.get($values, 'radius');
+    $-radio-ratio: map.get($values, 'ratio');
 
     .n-radio--#{$suffix} {
         min-height: $-radio-size;

package/src/radio/src/radio-group/radio-group.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-radio-group {
@@ -22,10 +23,10 @@
 
 @each $suffix, $values in $form {
 
-    $-radio-group-font: map-get($values, 'font');
-    $-radio-group-size: map-get($values, 'size');
-    $-radio-group-radius: map-get($values, 'radius');
-    $-radio-group-ratio: map-get($values, 'ratio');
+    $-radio-group-font: map.get($values, 'font');
+    $-radio-group-size: map.get($values, 'size');
+    $-radio-group-radius: map.get($values, 'radius');
+    $-radio-group-ratio: map.get($values, 'ratio');
 
     .n-radio-group--#{$suffix}.n-radio-group--horizontal .n-radio {
         $min-height: 0;

package/src/rating/src/rating/rating.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-rating {
@@ -66,10 +67,10 @@
 
 @each $suffix, $values in $form {
 
-    $-rating-font: map-get($values, 'font');
-    $-rating-size: map-get($values, 'size');
-    $-rating-radius: map-get($values, 'radius');
-    $-rating-ratio: map-get($values, 'ratio');
+    $-rating-font: map.get($values, 'font');
+    $-rating-size: map.get($values, 'size');
+    $-rating-radius: map.get($values, 'radius');
+    $-rating-ratio: map.get($values, 'ratio');
 
     $-rating-star: $-rating-size * $-rating-ratio * 1.2;