@kizmann/nano-ui 1.0.10 → 1.0.12

package/src/form/src/form-frame/form-frame.jsx

@@ -1,4 +1,4 @@
-import { Arr, Any, Dom } from "@kizmann/pico-js";
+import { Arr, Any, Dom, Str, Locale } from "@kizmann/pico-js";
 
 export default {
 
@@ -14,17 +14,59 @@ export default {
 
     provide()
     {
-        return { NFrame: this };
+        return { NFormFrame: this };
+    },
+
+    props: {
+
+        showSearch: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+        searchPlaceholder: {
+            default()
+            {
+                return Locale.trans('Search ...');
+            },
+            type: [String]
+        },
+
+        searchIcon: {
+            default()
+            {
+                return 'fa fa-times';
+            },
+            type: [String]
+        },
+
+        kind: {
+            default()
+            {
+                return '';
+            },
+            type: [String]
+        },
+
     },
 
     data()
     {
-        return { inview: [] };
+        return { search: '' };
     },
 
     mounted()
     {
-        Any.delay(() => this.onScrollEvent());
+        this.$watch('search', () => {
+            this.onSearchInput();
+        });
+
+        this.$nextTick(() => {
+            this.onScrollEvent();
+        });
     },
 
     methods: {
@@ -45,27 +87,33 @@ export default {
                 this.$refs.menu.scrollIntoView(selector)
 
             }, this.$el);
-        }
+        },
 
-    },
+        onSearchInput()
+        {
+            let search = Str.lower(this.search);
 
-    renderMenu(item)
-    {
-        let labelHtml = (
-            <span>{item.label}</span>
-        );
+            Dom.find(this.$el).find(`[data-menu-key]`)
+                .removeClass('on-search');
 
-        let iconHtml = null;
+            if ( Any.isEmpty(search) ) {
+                return;
+            }
 
-        if ( item.icon ) {
-            iconHtml = (<i class={item.icon} />);
-        }
+            let groups = Arr.filter(this.NForm.groups, (group) => {
+                return Str.lower(group.label).indexOf(search) !== -1;
+            });
 
-        let buttonProps = {
-            href: '#' + item.key
-        }
+            Arr.each(groups, (group) => {
+                Dom.find(this.$el).find(`[data-menu-key="${group.key}"]`).addClass('on-search');
+            });
+        },
 
-        buttonProps['onClick'] = () => {
+        onClickEvent(item, event = null)
+        {
+            if ( ! Any.isEmpty(event) ) {
+                event.preventDefault();
+            }
 
             let selector = `[data-group-key="${item.key}"]`
 
@@ -83,7 +131,58 @@ export default {
                 Dom.find(selector).removeClass('on-search');
             }, 4000);
 
-            Dom.find(selector).addClass('on-search');
+            this.$nextTick(() => {
+                Dom.find(selector).addClass('on-search');
+            });
+
+            this.$refs.body.scrollIntoView(selector)
+        }
+
+    },
+
+    renderSearch()
+    {
+        if ( ! this.showSearch ) {
+            return null;
+        }
+
+        let searchProps = {
+            placeholder: this.searchPlaceholder
+        };
+
+        if ( ! Any.isEmpty(this.search) ) {
+            searchProps.icon = this.searchIcon;
+        }
+
+        searchProps['onIconClick'] = () => {
+            this.search = '';
+        }
+
+        return (
+            <div class="n-form-frame__search">
+                <NInput vModel={this.search} {...searchProps}></NInput>
+            </div>
+        )
+    },
+
+    renderMenu(item)
+    {
+        let labelHtml = (
+            <span>{item.label}</span>
+        );
+
+        let iconHtml = null;
+
+        if ( item.icon ) {
+            iconHtml = (<i class={item.icon} />);
+        }
+
+        let buttonProps = {
+            href: '#' + item.key
+        }
+
+        buttonProps['onClick'] = (e) => {
+            this.onClickEvent(item, e)
         };
 
         let classList = [
@@ -106,7 +205,7 @@ export default {
 
         return (
             <n-scrollbar ref="menu" class="n-form-frame__menus">
-                { items } { this.$slots.menu && this.$slots.menu() }
+                { this.ctor('renderSearch')() } { items } { this.$slots.menu && this.$slots.menu() }
             </n-scrollbar>
         );
     },
@@ -135,6 +234,10 @@ export default {
             'n-form-frame--' + this.NForm.size
         ];
 
+        if ( ! Any.isEmpty(this.search) ) {
+            classList.push('n-form-frame--search')
+        }
+
         return (
             <div class={classList}>
                 {[this.$slots.frame && this.$slots.frame(), this.ctor('renderMenus')(), this.ctor('renderBody')()]}

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

@@ -20,11 +20,34 @@
 
 .n-form-frame__menu {
     cursor: pointer;
+    position: relative;
     display: flex;
     align-items: center;
     width: 100%;
     border-radius: $md-radius;
     text-decoration: none;
+    transition: opacity 0.3s;
+}
+
+.n-form-frame--search .n-form-frame__menu:not(.on-search) {
+    opacity: 0.6;
+}
+
+.n-form-frame__menu:before {
+    content: '\00a0';
+    position: absolute;
+    top: 50%;
+    display: block;
+    width: 6px;
+    height: 6px;
+    margin-top: -3px;
+    border-radius: 500px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.n-form-frame__menu.on-search:before {
+    opacity: 1;
 }
 
 .n-form-frame__menu:not(:last-child) {
@@ -67,10 +90,19 @@
         padding: $-form-frame-size * 0.5 $-form-frame-size * 0.6;
     }
 
+    .n-form-frame--#{$suffix} .n-form-frame__search {
+        margin-bottom: $-form-frame-size * 0.4;
+    }
+
     .n-form-frame--#{$suffix} .n-form-frame__menu {
         height: $-form-frame-size;
         font-size: $-form-frame-font - 1;
         border-radius: $-form-frame-radius;
+        padding-right: $-form-frame-size * 0.6;
+    }
+
+    .n-form-frame--#{$suffix} .n-form-frame__menu:before {
+        right: $-form-frame-size * 0.3;
     }
 
     .n-form-frame--#{$suffix} .n-form-frame__menu i {
@@ -82,8 +114,4 @@
         padding: $-form-frame-size * 0.2 $-form-frame-size * 0.6 $-form-frame-size * 0.2 0;
     }
 
-    .n-form-frame--#{$suffix} .n-form-frame__body .n-form-group {
-        padding: $-form-frame-size * 0.2 $-form-frame-size * 0.6;
-    }
-
 }

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

@@ -8,6 +8,10 @@ export default {
 
         NForm: {
             default: undefined
+        },
+
+        NFormFrame: {
+            default: undefined
         }
 
     },
@@ -56,7 +60,7 @@ export default {
         kind: {
             default()
             {
-                return 'classic';
+                return '';
             },
             type: [String]
         },
@@ -243,16 +247,26 @@ export default {
 
     render()
     {
-        let size = this.size ;
+        let size = this.size;
 
         if ( this.NForm ) {
             size = size || this.NForm.size;
         }
 
+        let kind = this.kind;
+
+        if ( this.NFormFrame ) {
+            kind = kind || this.NFormFrame.kind;
+        }
+
+        if ( this.NForm ) {
+            kind = kind || this.NForm.kind;
+        }
+
         let classList = [
             'n-form-group', 
             'n-form-group--' + size,
-            'n-form-group--' + this.kind,
+            'n-form-group--' + kind,
             'n-form-group--' + this.type,
             'n-form-group--' + this.align,
         ];

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

@@ -7,7 +7,7 @@
 
 .n-form-group:before {
     pointer-events: none;
-    z-index: -1;
+    z-index: 0;
     content: '\00a0';
     position: absolute;
     top: 0;
@@ -20,7 +20,11 @@
 }
 
 .n-form-group.on-search:before {
-    opacity: 0.15;
+    opacity: 0.1;
+}
+
+.n-form-group--collapse .n-form-group__legend {
+    cursor: pointer;
 }
 
 .n-form-group--classic .n-form-group__legend {
@@ -92,6 +96,7 @@
 
     .n-form-group--#{$suffix}.n-form-group--fieldset {
         margin-bottom: $-form-group-size;
+        padding: 0 $-form-group-size * 0.6;
     }
 
     .n-form-group--#{$suffix}.n-form-group--fieldset:first-child {
@@ -102,23 +107,23 @@
         margin-top: $-form-group-size * 1.4;
     }
 
-    .n-form-group--classic.n-form-group--#{$suffix} .n-form-group__legend {
+    .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--fieldset.n-form-group--#{$suffix} .n-form-group__legend {
+    .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--classic.n-form-group--#{$suffix} .n-form-group__label span {
+    .n-form-group--#{$suffix}.n-form-group--classic .n-form-group__label span {
         font-size: $-form-group-font + 1;
     }
 
-    .n-form-group--fieldset.n-form-group--#{$suffix} .n-form-group__label span {
+    .n-form-group--#{$suffix}.n-form-group--fieldset .n-form-group__label span {
         font-size: $-form-group-font - 2;
     }
 
@@ -127,7 +132,7 @@
         height: $-form-group-size;
     }
 
-    .n-form-group--fieldset.n-form-group--#{$suffix} .n-form-group__collapse {
+    .n-form-group--#{$suffix}.n-form-group--fieldset .n-form-group__collapse {
         margin-right: $-form-group-size * -0.3;
     }
 
@@ -135,12 +140,12 @@
         margin-right: $-form-group-size * $-form-group-ratio * 0.7;
     }
 
-    .n-form-group--classic.n-form-group--#{$suffix} .n-form-group__body {
+    .n-form-group--#{$suffix}.n-form-group--classic .n-form-group__body {
         padding-top: $-form-group-size * $-form-group-ratio;
     }
 
-    .n-form-group--fieldset.n-form-group--#{$suffix} .n-form-group__body {
-        padding-top: $-form-group-size * 0.6;
+    .n-form-group--#{$suffix}.n-form-group--fieldset .n-form-group__body {
+        padding-top: $-form-group-size;
     }
 
 }

package/src/scrollbar/src/scrollbar/scrollbar.jsx

@@ -196,12 +196,12 @@ export default {
             }
         },
 
-        scrollIntoView(selector, delay = 0)
+        scrollIntoView(selector, delay = 0, offset = 0)
         {
-            Any.delay(() => this.onScrollIntoView(selector), delay);
+            Any.delay(() => this.onScrollIntoView(selector, offset), delay);
         },
 
-        onScrollIntoView(selector)
+        onScrollIntoView(selector, offset = 0)
         {
             let $el = Dom.find(this.$el).find(selector);
 

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

@@ -15,6 +15,10 @@
     $-color-light: map.get($values, 'light');
     $-color-dark: map.get($values, 'dark');
 
+    .n-form-frame__menu--#{$color}.on-search:before {
+        background: $-color-base;
+    }
+
     .n-form-frame__menu--#{$color}.is-visible {
         background: rgba($-color-base, 0.15);
     }

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

@@ -1,7 +1,7 @@
 @use "sass:map";
 @import "../../../root/vars";
 
-.n-form-group--fieldset.n-form-group--collapse {
+.n-form-group--fieldset {
     border: 1px solid $color-gray-10;
 }
 
@@ -36,7 +36,7 @@
         color: $-color-base;
     }
 
-    .n-form-group--#{$color}.on-search:before {
+    .n-form-group--#{$color}:before {
         background: linear-gradient(135deg, $-color-base 0, transparent 300px);
     }