@kizmann/nano-ui 1.0.14 → 1.1.0

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

@@ -63,7 +63,7 @@ export default {
 
     data()
     {
-        return { search: '' };
+        return { search: '', star: '', block: false };
     },
 
     mounted()
@@ -75,10 +75,48 @@ export default {
         this.$nextTick(() => {
             this.onScrollEvent();
         });
+
+        this.onMoveEvent();
     },
 
     methods: {
 
+        applyStar(id, block = false)
+        {
+            if ( this.block ) {
+                return;
+            }
+
+            this.block = block;
+
+            if ( ! Any.isEmpty(this.timeout) ) {
+                clearTimeout(this.timeout);
+            }
+
+            if ( block ) {
+                this.star = id;
+            }
+
+            this.timeout = setTimeout(() => {
+                this.star = id; this.block = false;
+            }, 500);
+        },
+
+        onMoveEvent()
+        {
+            Dom.find(window).on('mousemove', Any.debounce(e => {
+
+                let el = Dom.find(e.target).closest('[data-group-key]');
+
+                if ( Any.isEmpty(el) ) {
+                    return;
+                }
+
+                this.applyStar(Dom.find(el).attr('data-group-key'), true);
+
+            }, 100));
+        },
+
         onScrollEvent()
         {
             Dom.find(this.$el).find('[data-menu-key]').each((el) => {
@@ -107,12 +145,7 @@ export default {
                 this.$refs.menu.scrollIntoView(selector)
             });
 
-            let star = {
-                el: el, attr: Dom.find(el).attr('data-group-key')
-            };
-
-            Dom.find(`[data-menu-key="${star.attr}"]`)
-                .addClass('is-star');
+            this.applyStar(Dom.find(el).attr('data-group-key'), false);
         },
 
         onSearchInput()
@@ -127,7 +160,12 @@ export default {
             }
 
             let groups = Arr.filter(this.NForm.groups, (group) => {
-                return Str.lower(group.label).indexOf(search) !== -1;
+
+                let labels = Arr.extract(group.items, 'label')
+                    .join("\n");
+
+                return Str.lower(group.label + "\n" + labels)
+                    .indexOf(search) !== -1;
             });
 
             Arr.each(groups, (group) => {
@@ -147,20 +185,10 @@ export default {
                 item.openGroup();
             }
 
-            if ( ! Any.isEmpty(this.timeout) ) {
-                clearTimeout(this.timeout);
+            if ( this.star !== item.key ) {
+                this.applyStar(item.key, true);
             }
 
-            Dom.find('[data-group-key]').removeClass('on-search');
-
-            this.timeout = setTimeout(() => {
-                Dom.find(selector).removeClass('on-search');
-            }, 4000);
-
-            this.$nextTick(() => {
-                Dom.find(selector).addClass('on-search');
-            });
-
             this.$refs.body.scrollIntoView(selector, 0, 100);
         }
 
@@ -214,7 +242,11 @@ export default {
         let classList = [
             'n-form-frame__menu',
             'n-form-frame__menu--' + item.type
-        ]
+        ];
+
+        if ( this.star === item.key ) {
+            classList.push('is-star');
+        }
 
         return (
             <a class={classList} data-menu-key={item.key} {...buttonProps}>

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

@@ -57,6 +57,13 @@
 .n-form-frame__menu i {
     flex: 0 0 auto;
     text-align: center;
+    transition: opacity 0.3s;
+    opacity: 0.7;
+}
+
+.n-form-frame__menu.on-search i,
+.n-form-frame__menu.is-visible i {
+    opacity: 1;
 }
 
 .n-form-frame__menu span {

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

@@ -1,4 +1,4 @@
-import { UUID } from "@kizmann/pico-js";
+import { Arr, UUID } from "@kizmann/pico-js";
 
 export default {
 
@@ -107,27 +107,32 @@ export default {
 
     },
 
+    data()
+    {
+        return {
+            uid: UUID(), tempValue: this.modelValue, items: []
+        };
+    },
+
+    provide()
+    {
+        return { NFormGroup: this };
+    },
+
     mounted()
     {
         if ( this.NForm ) {
-            this.NForm.registerGroup(this);
+            this.NForm.appendGroup(this);
         }
     },
 
     unmounted()
     {
         if ( this.NForm ) {
-            this.NForm.unregisterGroup(this);
+            this.NForm.removeGroup(this);
         }
     },
 
-    data()
-    {
-        return {
-            tempValue: this.modelValue
-        };
-    },
-
     watch: {
 
         modelValue(value)
@@ -141,6 +146,21 @@ export default {
 
     methods: {
 
+        getItems()
+        {
+            return this.items;
+        },
+
+        appendItem(item)
+        {
+            this.items[item.uid] = item;
+        },
+
+        removeItem(item)
+        {
+            delete this.items[item.uid];
+        },
+
         toggleGroup()
         {
             this.$emit('update:modelValue', this.tempValue = ! this.tempValue);
@@ -154,7 +174,7 @@ export default {
         closeGroup()
         {
             this.$emit('update:modelValue', this.tempValue = true);
-        }
+        },
 
     },
 

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

@@ -6,11 +6,15 @@ export default {
 
     inject: {
 
+        NTabs: {
+            default: undefined
+        },
+
         NForm: {
             default: undefined
         },
 
-        NTabs: {
+        NFormGroup: {
             default: undefined
         },
 
@@ -175,8 +179,8 @@ export default {
 
     beforeMount()
     {
-        if ( this.NForm ) {
-            this.NForm.addItem(this);
+        if ( this.NFormGroup ) {
+            this.NFormGroup.appendItem(this);
         }
     },
 
@@ -189,8 +193,8 @@ export default {
 
     beforeUnmount()
     {
-        if ( this.NForm ) {
-            this.NForm.removeItem(this);
+        if ( this.NFormGroup ) {
+            this.NFormGroup.removeItem(this);
         }
     },
 

package/src/info/src/info/info.jsx

@@ -93,7 +93,7 @@ export default {
     {
         Any.delay(() => {
             if ( this.$refs.scrollbar ) {
-                this.$refs.scrollbar.adaptHeight();
+                // this.$refs.scrollbar.adaptHeight();
             }
         }, 500);
     },

package/src/modal/src/modal/modal.jsx

@@ -408,7 +408,7 @@ export default {
             'n-modal',
             'n-modal--' + this.size,
             'n-modal--' + this.type,
-            'n-modal--' + this.position
+            'n-modal--' + this.position,
         ];
 
         if ( this.tempValue ) {

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

@@ -27,7 +27,7 @@
     transition: opacity 0.5s ease-in-out;
 }
 
-.n-modal:not(.n-ready) .n-modal__backdrop {
+.n-modal:not(.n-ready,.n-loop) .n-modal__backdrop {
     opacity: 0;
 }
 
@@ -47,7 +47,7 @@
     transition: opacity 0.2s 0.1s ease-out, transform 0.2s 0.1s ease-out;
 }
 
-.n-modal:not(.n-ready) .n-modal__frame {
+.n-modal:not(.n-ready,.n-loop) .n-modal__frame {
     opacity: 0;
     transform: translateY(20px);
 }

package/src/paginator/src/paginator/paginator.jsx

@@ -95,7 +95,6 @@ export default {
     },
 
 
-
     methods: {
 
         forcePage(page)
@@ -175,11 +174,11 @@ export default {
     renderLimit()
     {
         let props = {
-            modelValue:     this.tempLimit,
-            size:           this.size,
-            type:           this.type,
-            optionsValue:  '$value.value',
-            optionsLabel:  '$value.label',
+            modelValue: this.tempLimit,
+            size: this.size,
+            type: this.type,
+            optionsValue: '$value.value',
+            optionsLabel: '$value.label',
         };
 
         props.options = Arr.each(this.limitOptions, (limit) => {
@@ -201,7 +200,7 @@ export default {
     {
         return (
             <div class="n-paginator__count">
-                { this.choice('No items|Total :count item|Total :count items', this.total) }
+                {this.choice('No items|Total :count item|Total :count items', this.total)}
             </div>
         );
     },
@@ -210,7 +209,7 @@ export default {
     {
         return (
             <div class="n-paginator__spacer">
-                { /* Nothing :( */ }
+                { /* Nothing :( */}
             </div>
         );
     },
@@ -218,28 +217,24 @@ export default {
     renderGoto()
     {
         if ( this.pageOptions.length > 500 ) {
-            return null;
+            // return null;
         }
 
         let props = {
-            modelValue:     this.tempPage,
-            size:           this.size,
-            type:           this.type,
-            undefinedText:  '?',
-            optionsValue:   '$value.value',
-            optionsLabel:   '$value.label',
+            modelValue: this.tempPage,
+            size: this.size,
+            type: this.type,
+            undefinedText: '?',
+            lazy: true,
+            options: this.pageOptions,
+            optionsValue: '$value',
+            optionsLabel: '$value',
         };
 
-        props.options = Arr.reduce(this.pageOptions, (merge, index) => {
-            return Arr.push(merge, {
-                value: index, label: index
-            });
-        }, []);
-
         props['onUpdate:modelValue'] = this.onPageInput;
 
         return (
-            <div class="n-paginator__goto">
+            <div class="n-paginator__goto" key={'paginate' + this.pageOptions.length}>
                 <NSelect {...props} />
             </div>
         );
@@ -369,7 +364,7 @@ export default {
         };
 
         return (
-            <NButton {...props}>{ current }</NButton>
+            <NButton {...props}>{current}</NButton>
         );
     },
 
@@ -381,18 +376,18 @@ export default {
 
         return (
             <div class="n-paginator__pages">
-                { this.ctor('renderFirst')() }
-                { this.ctor('renderPrev')() }
-                { ...pages }
-                { this.ctor('renderNext')() }
-                { this.ctor('renderLast')() }
+                {this.ctor('renderFirst')()}
+                {this.ctor('renderPrev')()}
+                {...pages}
+                {this.ctor('renderNext')()}
+                {this.ctor('renderLast')()}
             </div>
         );
     },
 
     renderSlot(view)
     {
-        let renderFunction = this.ctor('render' + 
+        let renderFunction = this.ctor('render' +
             Str.ucfirst(view));
 
         if ( Any.isFunction(renderFunction) ) {

package/src/preview/index.js

@@ -2,9 +2,11 @@ import Preview from "./src/preview/preview.jsx";
 import PreviewPlain from "./src/preview-plain/preview-plain.jsx";
 import PreviewImage from "./src/preview-image/preview-image.jsx";
 import PreviewVideo from "./src/preview-video/preview-video.jsx";
+import PreviewModal from "./src/preview-modal/preview-modal.jsx";
 
 export default function (App) {
     App.component(Preview.name, Preview);
+    App.component(PreviewModal.name, PreviewModal);
     App.component(PreviewPlain.name, PreviewPlain);
     App.component(PreviewImage.name, PreviewImage);
     App.component(PreviewVideo.name, PreviewVideo);

package/src/preview/index.scss

@@ -1,4 +1,5 @@
 @import "./src/preview/preview";
+@import "./src/preview-modal/preview-modal";
 @import "./src/preview-plain/preview-plain";
 @import "./src/preview-image/preview-image";
 @import "./src/preview-video/preview-video";

package/src/preview/src/_tools/preview-handler.js

@@ -0,0 +1,193 @@
+import { Any, Arr, Obj, Dom } from "@kizmann/pico-js";
+
+window.NPreviewCacheGroups = {};
+
+export class NPreviewHandler
+{
+    current = null;
+
+    static append(item)
+    {
+        if ( !window.NPreviewCacheGroups[item.group] ) {
+            window.NPreviewCacheGroups[item.group] = {};
+        }
+
+        window.NPreviewCacheGroups[item.group][item.uid] = item;
+    }
+
+    static remove(item)
+    {
+        delete window.NPreviewCacheGroups[item.group][item.uid];
+    }
+
+    static get(group)
+    {
+        if ( !window.NPreviewCacheGroups[group] ) {
+            window.NPreviewCacheGroups[group] = {};
+        }
+
+        return Arr.sort(window.NPreviewCacheGroups[group], 'index');
+    }
+
+    static next()
+    {
+        if ( ! Any.isObject(this.current) ) {
+            return null;
+        }
+
+        let items = NPreviewHandler.get(this.current.group);
+
+        let index = Arr.findIndex(items, {
+            uid: this.current.uid
+        });
+
+        let next = Arr.first(items);
+
+        if ( items.length > index + 1 ) {
+            next = Arr.get(items, index + 1);
+        }
+
+        return NPreviewHandler.switch(next);
+    }
+
+    static prev()
+    {
+        if ( ! Any.isObject(this.current) ) {
+            return null;
+        }
+
+        let items = NPreviewHandler.get(this.current.group);
+
+        let index = Arr.findIndex(items, {
+            uid: this.current.uid
+        });
+
+        let prev = Arr.last(items);
+
+        if ( 0 <= index - 1 ) {
+            prev = Arr.get(items, index - 1);
+        }
+
+        return NPreviewHandler.switch(prev);
+    }
+
+    static create()
+    {
+        el = Dom.find('.n-preview-modal');
+
+        if ( el.length() ) {
+            return el;
+        }
+
+        let el = Dom.make('div', {
+            classList: 'n-preview-modal'
+        });
+
+        el.attr('data-preview', 'nano');
+
+        let close = Dom.make('div', {
+            classList: 'n-preview-modal__close',
+            innerHTML: `<i class="${nano.Icons.times}"></i>`
+        });
+
+        close.on('click', () => {
+            NPreviewHandler.close()
+        });
+
+        close.appendTo(el);
+
+        let prev = Dom.make('div', {
+            classList: 'n-preview-modal__prev',
+            innerHTML: `<i class="${nano.Icons.angleLeft}"></i>`
+        });
+
+        prev.on('click', () => {
+            NPreviewHandler.prev()
+        });
+
+        prev.appendTo(el);
+
+        let next = Dom.make('div', {
+            classList: 'n-preview-modal__next',
+            innerHTML: `<i class="${nano.Icons.angleRight}"></i>`
+        });
+
+        next.on('click', () => {
+            NPreviewHandler.next()
+        });
+
+        next.appendTo(el);
+
+        el.appendTo(document.body);
+
+        return el;
+    }
+
+    static open(item)
+    {
+        let el = NPreviewHandler.create();
+
+        el.css({
+            'z-index': window.zIndex++
+        });
+
+        let keydownFn = (e) => {
+
+            if ( e.keyCode === 27 ) {
+                return NPreviewHandler.close();
+            }
+
+            if ( e.keyCode === 37 ) {
+                return NPreviewHandler.prev();
+            }
+
+            if ( e.keyCode === 39 ) {
+                return NPreviewHandler.next();
+            }
+
+        }
+
+        Dom.find(window).on('keydown', keydownFn, {
+            uid: 'n-preview-modal'
+        });
+
+        NPreviewHandler.switch(item);
+
+        el.addClass('n-ready');
+    }
+
+    static close()
+    {
+        let el = NPreviewHandler.create();
+
+        Dom.find(window).off('keydown', null, {
+            uid: 'n-preview-modal'
+        });
+
+        NPreviewHandler.switch(null);
+
+        el.removeClass('n-ready');
+    }
+
+    static switch(item)
+    {
+        if ( Any.isObject(this.current) ) {
+            Obj.set(this.current, 'visible', false);
+        }
+
+        this.current = item;
+
+        if ( Any.isObject(this.current) ) {
+            Obj.set(this.current, 'visible', true);
+        }
+
+        return item;
+    }
+
+}
+
+export default { NPreviewHandler }
+
+if ( ! window.NPreviewHandler ) {
+    window.NPreviewHandler = NPreviewHandler;
+}