@kizmann/nano-ui 1.0.11 → 1.0.13

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 {
 
@@ -19,6 +19,30 @@ export default {
 
     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()
             {
@@ -27,10 +51,27 @@ export default {
             type: [String]
         },
 
+        multiple: {
+            default()
+            {
+                return true;
+            },
+            type: [Boolean]
+        }
+
+    },
+
+    data()
+    {
+        return { search: '' };
     },
 
     mounted()
     {
+        this.$watch('search', () => {
+            this.onSearchInput();
+        });
+
         this.$nextTick(() => {
             this.onScrollEvent();
         });
@@ -44,37 +85,51 @@ export default {
                 Dom.find(el).removeClass('is-visible');
             });
 
-            Dom.inviewMaxY(`[data-group-key]`, (el, attr) => {
+            let options = {
+                el: `[data-group-key]`, parent: this.$el
+            }
+
+            Dom.inviewMaxY(options, (el) => {
 
-                let selector = `[data-menu-key="${attr}"]`;
+                let selector = `[data-menu-key="${el.attr}"]`;
 
                 Dom.find(this.$el).find(selector)
                     .addClass('is-visible');
 
                 this.$refs.menu.scrollIntoView(selector)
+            });
+        },
 
-            }, this.$el);
-        }
+        handleVisibleItems(els)
+        {
 
-    },
+        },
 
-    renderMenu(item)
-    {
-        let labelHtml = (
-            <span>{item.label}</span>
-        );
+        onSearchInput()
+        {
+            let search = Str.lower(this.search);
 
-        let iconHtml = null;
+            Dom.find(this.$el).find(`[data-menu-key]`)
+                .removeClass('on-search');
 
-        if ( item.icon ) {
-            iconHtml = (<i class={item.icon} />);
-        }
+            if ( Any.isEmpty(search) ) {
+                return;
+            }
 
-        let buttonProps = {
-            href: '#' + item.key
-        }
+            let groups = Arr.filter(this.NForm.groups, (group) => {
+                return Str.lower(group.label).indexOf(search) !== -1;
+            });
+
+            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}"]`
 
@@ -95,6 +150,55 @@ export default {
             this.$nextTick(() => {
                 Dom.find(selector).addClass('on-search');
             });
+
+            this.$refs.body.scrollIntoView(selector, 0, 100);
+        }
+
+    },
+
+    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 = [
@@ -117,7 +221,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>
         );
     },
@@ -146,6 +250,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.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, padding = 0)
         {
-            Any.delay(() => this.onScrollIntoView(selector), delay);
+            Any.delay(() => this.onScrollIntoView(selector, padding), delay);
         },
 
-        onScrollIntoView(selector)
+        onScrollIntoView(selector, padding = 0)
         {
             let $el = Dom.find(this.$el).find(selector);
 
@@ -214,11 +214,11 @@ export default {
             let offsetTop = $el.offsetTop(this.$el);
 
             if ( offsetTop < scrollTop ) {
-                this.$refs.content.scrollTop = offsetTop;
+                this.$refs.content.scrollTop = offsetTop - padding;
             }
 
             if ( offsetTop + $el.height() >= scrollTop + outerHeight ) {
-                this.$refs.content.scrollTop = offsetTop - outerHeight + $el.height();
+                this.$refs.content.scrollTop = offsetTop - outerHeight + $el.height() + padding;
             }
 
             let scrollLeft = this.$refs.content
@@ -230,11 +230,11 @@ export default {
             let offsetLeft = $el.offsetLeft(this.$el);
 
             if ( offsetLeft < scrollLeft ) {
-                this.$refs.content.scrollLeft = offsetLeft;
+                this.$refs.content.scrollLeft = offsetLeft - padding;
             }
 
             if ( offsetLeft + $el.width() >= scrollLeft + outerWidth ) {
-                this.$refs.content.scrollLeft = offsetLeft - outerWidth + $el.width();
+                this.$refs.content.scrollLeft = offsetLeft - outerWidth + $el.width() + padding;
             }
         },
 

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);
     }