@kizmann/nano-ui 1.0.15 → 1.1.2

package/src/form/src/form-group/form-group.jsx

@@ -81,6 +81,14 @@ export default {
             type: [String]
         },
 
+        grid: {
+            default()
+            {
+                return '';
+            },
+            type: [String, Number]
+        },
+
         collapse: {
             default()
             {
@@ -235,17 +243,19 @@ export default {
     renderLabel()
     {
         return (
-            <div class="n-form-group__legend" onClick={this.toggleGroup}>
-                { this.ctor('renderCollapse')() }
-                { this.ctor('renderText')() }
-                { this.ctor('renderAction')() }
+            <div class="n-form-group__header" onClick={this.toggleGroup}>
+                <div class="n-form-group__legend">
+                    {this.ctor('renderCollapse')()}
+                    {this.ctor('renderText')()}
+                    {this.ctor('renderAction')()}
+                </div>
             </div>
         );
     },
 
     renderTooltip()
     {
-        if ( ! this.tooltip ) {
+        if ( !this.tooltip ) {
             return null;
         }
 
@@ -258,8 +268,16 @@ export default {
 
     renderBody()
     {
+        let classList = [
+            'n-form-group__body'
+        ];
+
+        if ( this.grid ) {
+            classList.push(`n-grid gap-${this.grid}`);
+        }
+
         return (
-            <div class="n-form-group__body">
+            <div class={classList}>
                 { this.$slots.default && this.$slots.default() }
             </div>
         );

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

@@ -1,33 +1,25 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-form-group {
     position: relative;
 }
 
-.n-form-group:before {
-    pointer-events: none;
+.n-form-group.n-form-group--fieldset.n-form-group--collapse.n-hidden:after {
     z-index: 0;
     content: '\00a0';
     position: absolute;
-    top: 0;
+    top: 50%;
     left: 0;
     display: block;
     width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: opacity 0.4s;
-}
-
-.n-form-group.on-search:before {
-    opacity: 0.1;
+    height: 1px;
 }
 
 .n-form-group--collapse .n-form-group__legend {
     cursor: pointer;
 }
 
-.n-form-group--classic .n-form-group__legend {
+.n-form-group__legend {
     cursor: default;
     display: flex;
     flex-direction: row;
@@ -40,11 +32,11 @@
 }
 
 .n-form-group--fieldset .n-form-group__legend {
-    position: absolute;
     display: inline-flex;
 }
 
 .n-form-group__collapse {
+    order: 900;
     flex: 0 0 auto;
     display: flex;
     flex-direction: row;
@@ -62,6 +54,7 @@
 }
 
 .n-form-group__label {
+    overflow: hidden;
     flex: 1 1 auto;
     display: flex;
     flex-direction: row;
@@ -70,11 +63,18 @@
 }
 
 .n-form-group__icon {
-    flex: 0 1 auto;
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
 }
 
 .n-form-group__text {
     flex: 1 1 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     font-weight: bold;
 }
 
@@ -82,70 +82,89 @@
     display: none;
 }
 
-@each $suffix, $values in $form {
+.n-form-group {
+    font-size: size('base-fnt');
+    margin-bottom: size('base-pad-vertical');
+}
 
-    $-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__header {
+    z-index: 10;
+    position: relative;
+}
 
-    .n-form-group--#{$suffix},
-    .n-form-group--#{$suffix}:before {
-        border-radius: $-form-group-radius;
-    }
+.n-form-group__body {
+    border-radius: size('base-rad');
+}
 
-    .n-form-group--#{$suffix}.n-form-group--fieldset {
-        margin-bottom: $-form-group-size;
-        padding: 0 $-form-group-size * 0.6;
-    }
+.n-form-group--fieldset .n-form-group__body {
+    padding: 0 size('base-pad', 'calc($ * 2)');
+}
 
-    .n-form-group--#{$suffix}.n-form-group--fieldset:first-child {
-        margin-top: $-form-group-size * 0.8;
-    }
+.n-form-group--fieldset:not(:last-child) .n-form-group__body {
+    margin-bottom: size('base-hgt');
+}
 
-    .n-form-group--#{$suffix}.n-form-group--fieldset:not(:first-child) {
-        margin-top: $-form-group-size * 1.4;
-    }
+.n-form-group.n-form-group--classic .n-form-group__legend {
+    min-height: size('base-hgt');
+}
 
-    .n-form-group--#{$suffix}.n-form-group--classic .n-form-group__legend {
-        font-size: $-form-group-font;
-        min-height: $-form-group-size * 1.2;
-    }
+.n-form-group.n-form-group--fieldset .n-form-group__legend {
+    margin-left: size('base-pad', 'calc($ * 2)');
+    height: size('base-hgt');
+    border-radius: size('base-rad');
+    padding: 0 size('base-pad');
+}
 
-    .n-form-group--#{$suffix}.n-form-group--fieldset .n-form-group__legend {
-        min-height: $-form-group-size;
-        border-radius: $-form-group-radius;
-        top: $-form-group-size * -0.5;
-        padding: 0 $-form-group-size * 0.3;
-    }
+.n-form-group.n-form-group--classic .n-form-group__label span {
+    font-size: 1.2em;
+}
 
-    .n-form-group--#{$suffix}.n-form-group--classic .n-form-group__label span {
-        font-size: $-form-group-font + 1;
-    }
+.n-form-group.n-form-group--fieldset .n-form-group__label span {
+    font-size: 1em;
+}
 
-    .n-form-group--#{$suffix}.n-form-group--fieldset .n-form-group__label span {
-        font-size: $-form-group-font - 2;
-    }
+.n-form-group .n-form-group__icon,
+.n-form-group .n-form-group__collapse {
+    width: size('base-hgt-inline');
+    height: size('base-hgt-inline');
+}
 
-    .n-form-group--#{$suffix} .n-form-group__collapse {
-        width: $-form-group-size;
-        height: $-form-group-size;
-    }
+.n-form-group.n-form-group--fieldset .n-form-group__collapse {
+    margin-left: size('base-pad', 'calc($ * 0.7)');
+}
+
+.n-form-group .n-form-group__icon {
+    margin-right: size('base-pad', 'calc($ * 0.7)');
+}
+
+.n-form-group.n-form-group--classic .n-form-group__body {
+    padding-top: size('base-pad-vertical');
+}
 
-    .n-form-group--#{$suffix}.n-form-group--fieldset .n-form-group__collapse {
-        margin-right: $-form-group-size * -0.3;
-    }
+.n-form-group.n-form-group--fieldset .n-form-group__body {
+    padding-top: size('base-hgt');
+    padding-bottom: size('base-pad-vertical');
+    margin-top: size('base-hgt', 'calc($ * -0.5)');
+}
 
-    .n-form-group--#{$suffix} .n-form-group__icon {
-        margin-right: $-form-group-size * $-form-group-ratio * 0.7;
-    }
+.n-form-group__action {
+    flex: 0 0 auto;
+    padding: 0 size('base-pad');
+}
 
-    .n-form-group--#{$suffix}.n-form-group--classic .n-form-group__body {
-        padding-top: $-form-group-size * $-form-group-ratio;
-    }
+.n-form-group.n-form-group--fieldset .n-form-group__action {
+    position: absolute;
+    top: 0;
+    right: size('base-pad');
+    display: inline-flex;
+    align-items: center;
+    height: size('base-hgt');
+}
 
-    .n-form-group--#{$suffix}.n-form-group--fieldset .n-form-group__body {
-        padding-top: $-form-group-size;
-    }
+.n-form-group.n-form-group--fieldset .n-form-group__action {
+    order: 1000;
+}
 
+.n-form-group__action > *:not(:last-child) {
+    margin-right: size('base-pad');
 }

package/src/form/src/form-item/form-item.jsx

@@ -6,20 +6,32 @@ export default {
 
     inject: {
 
-        NTabs: {
+        NForm: {
             default: undefined
         },
 
-        NForm: {
+        NFormGroup: {
             default: undefined
         },
 
-        NFormGroup: {
+        NTabs: {
             default: undefined
         },
 
         NTabsItem: {
             default: undefined
+        },
+
+        NCollapse: {
+            default: undefined
+        },
+
+        NCollapseItem: {
+            default: undefined
+        },
+
+        NScrollbar: {
+            default: undefined
         }
 
     },
@@ -63,6 +75,14 @@ export default {
             type: [String]
         },
 
+        rules: {
+            default()
+            {
+                return [];
+            },
+            type: [Array]
+        },
+
         tooltip: {
             default()
             {
@@ -113,6 +133,42 @@ export default {
 
     },
 
+    data()
+    {
+        return {
+            uid: UUID()
+        };
+    },
+
+    beforeMount()
+    {
+        if ( this.NForm ) {
+            this.NForm.appendItem(this);
+        }
+
+        if ( this.NFormGroup ) {
+            this.NFormGroup.appendItem(this);
+        }
+    },
+
+    mounted()
+    {
+        if ( this.NForm ) {
+            this.NForm.$watch('errors', this.gotoInput, { deep: true });
+        }
+    },
+
+    beforeUnmount()
+    {
+        if ( this.NForm ) {
+            this.NForm.removeItem(this);
+        }
+
+        if ( this.NFormGroup ) {
+            this.NFormGroup.removeItem(this);
+        }
+    },
+
     methods: {
 
         enabled(component = false)
@@ -149,73 +205,25 @@ export default {
 
         gotoInput()
         {
-            let errors = this.NForm.errors;
+            let selector = `[data-form-field="${this.uid}"]`;
 
-            if ( Any.isEmpty(errors) ) {
-                return;
+            if ( this.NTabsItem ) {
+                this.NTabsItem.changeTab();
             }
 
-            if ( !this.NTabs || !this.NTabsItem ) {
-                return;
+            if ( this.NCollapseItem ) {
+                this.NCollapseItem.showTab();
             }
 
-            let keys = Any.keys(errors);
-
-            if ( Arr.first(keys) !== this.prop ) {
-                return;
+            if ( this.NScrollbar ) {
+                this.NScrollbar.scrollIntoView(selector, 0, 50);
             }
 
-            this.NTabs.changeTab(this.NTabsItem.name);
+            console.log(this.NScrollbar)
         }
 
     },
 
-    data()
-    {
-        return {
-            uid: UUID()
-        };
-    },
-
-    beforeMount()
-    {
-        if ( this.NFormGroup ) {
-            this.NFormGroup.appendItem(this);
-        }
-    },
-
-    mounted()
-    {
-        if ( this.NForm ) {
-            this.NForm.$watch('errors', this.gotoInput, { deep: true });
-        }
-    },
-
-    beforeUnmount()
-    {
-        if ( this.NFormGroup ) {
-            this.NFormGroup.removeItem(this);
-        }
-    },
-
-    renderTooltip()
-    {
-        if ( !this.tooltip && !this.$slots.tooltip ) {
-            return null;
-        }
-
-        let props = {
-            size: 'sm',
-            position: this.tooltipPosition,
-        };
-
-        return (
-            <NPopover type="tooltip" {...props}>
-                {this.$slots.tooltip && this.$slots.tooltip() || this.tooltip}
-            </NPopover>
-        );
-    },
-
     renderCondition()
     {
         if ( ! this.conditional ) {
@@ -235,28 +243,31 @@ export default {
             return null;
         }
 
-        let labelHtml = (
+        return (
             <div class="n-form-item__label">
-                <label onClick={this.focusInput}>
+                <label onClick={this.focusInput} data-tooltip-ltr={this.tooltip} data-required={Arr.has(this.rules, 'required')}>
                     {this.$slots.label && this.$slots.label() || this.label}
                 </label>
             </div>
         );
-
-        return [
-            labelHtml, this.ctor('renderTooltip')()
-        ]
     },
 
     renderError()
     {
-        if ( !this.NForm || !Obj.has(this.NForm.errors, this.prop) ) {
+        if ( !this.NForm ) {
             return null;
         }
 
+        let errors = Obj.get(this.NForm.getErrors(),
+            this.prop, []);
+
+        if ( Any.isEmpty(errors) ) {
+            return;
+        }
+
         return (
             <div class="n-form-item__error">
-                {Obj.get(this.NForm.errors, this.prop)}
+                {Arr.first(errors)}
             </div>
         );
     },
@@ -284,7 +295,7 @@ export default {
             classList.push('is-disabled');
         }
 
-        return <div class={classList}>
+        return <div class={classList} data-form-field={this.uid}>
             {this.ctor('renderCondition')()}
             {this.ctor('renderLabel')()}
             {this.ctor('renderInput')()}

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

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-form-item {
     position: relative;
@@ -28,8 +27,9 @@
     cursor: pointer;
     position: absolute;
     right: 0;
-    top: 0;
-    display: inline-block;
+    top: size('base-pad-vertical', 'calc($ * 0.25)');
+    display: inline-flex;
+    align-items: center;
     border-radius: 500px;
 }
 
@@ -43,39 +43,30 @@
 
 .n-form-item__error {
     position: absolute;
-    top: 100%;
+    bottom: 0;
     left: 0;
-    color: $color-danger;
+    transform: translateY(100%);
 }
 
-@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');
-
-    .n-form-item--#{$suffix} {
-        margin-bottom: $-form-item-size * $-form-item-ratio * 2.2;
-    }
-
-    .n-form-item--#{$suffix} .n-form-item__condition {
-        font-size: $-form-item-font - 2;
-        padding: $-form-item-size * $-form-item-ratio * 0.15 $-form-item-size * $-form-item-ratio * 0.75;
-    }
+.n-form-item:not([class*="col-"]) {
+    margin-bottom: size('base-hgt', 'calc($ * 0.7)');
+}
 
-    .n-form-item--#{$suffix} .n-form-item__label {
-        font-size: $-form-item-font;
-    }
+.n-form-item__condition {
+    font-size: size('base-fnt-label');
+    padding: 0 size('base-pad');
+    height: size('base-hgt', 'calc($ * 0.6)');
+}
 
-    .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__label {
+    font-size: size('base-fnt');
+}
 
-    .n-form-item--#{$suffix} .n-form-item__error {
-        font-size: $-form-item-font - 2;
-    }
+.n-form-item__label,
+.n-form-item__input {
+    margin: size('base-pad-vertical', 'calc($ * 0.25)') 0;
+}
 
+.n-form-item__error {
+    font-size: size('base-fnt-label');
 }

package/src/grid/index.scss

@@ -0,0 +1 @@
+@forward "./src/grid/grid";