@kizmann/nano-ui 0.8.27 → 0.8.29

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kizmann/nano-ui",
-    "version": "0.8.27",
+    "version": "0.8.29",
     "license": "MIT",
     "private": false,
     "author": "Eduard Kizmann <kizmann@protonmail.ch>",

package/servy.json

@@ -0,0 +1,6 @@
+{
+    "hostname": "nano-ui.local",
+    "webroot": "",
+    "version": "php-8.2.8",
+    "engine": "apache"
+}

package/src/config/src/config/config-next.js

@@ -279,27 +279,33 @@ export default {
                 value.fallback);
         });
 
-        let element = alias.replace(/:.*?$/, '');
+        let component = alias.replace(/:.*?$/, '');
 
-        let component = null;
-
-        try {
-            component = resolveComponent(element);
-        } catch (e) {
-            component = element;
+        if ( !Arr.has(['div', 'p'], component) ) {
+            component = resolveComponent(component);
         }
 
         if ( Any.isEmpty(component) ) {
             return null;
         }
 
-        if ( ! this.propExists(setup['vShow']) ) {
+        if ( !this.propExists(setup['vShow']) ) {
             props.style = "display: none;";
         }
 
-        return h(component, props, () => {
-            return Arr.each(setup.content, (value, key) => this.ctor('renderSetup')(value, key));
+        let render = () => Arr.each(setup.content, (value, key) => {
+            return this.ctor('renderSetup')(value, key)
         });
+
+        if ( Any.isFunction(setup.content) ) {
+            render = setup.content.apply(this.scope);
+        }
+
+        if ( Any.isString(setup.content) ) {
+            render = setup.content;
+        }
+
+        return h(component, props, render);
     },
 
     render()

package/src/preview/src/preview-image/preview-image.js

@@ -27,6 +27,11 @@ export default {
         if ( ! window.ImageCache ) {
             window.ImageCache = [];
         }
+
+
+        if ( ! Arr.has(window.ImageCache, this.src) ) {
+            this.tempSrc = this.src;
+        }
     },
 
     mounted()
@@ -46,6 +51,10 @@ export default {
 
         resolveLoad()
         {
+            if ( ! Arr.has(window.ImageCache, this.src) ) {
+                return;
+            }
+
             this.tempSrc = null;
 
             if ( Any.isObject(this.src) ) {
@@ -65,7 +74,7 @@ export default {
                 Any.delay(() => this.load = false, 200);
             });
 
-            this.load = true;
+            this.laod = true;
         },
 
         resolveData()

package/src/scrollbar/src/scrollbar/scrollbar.next.js

@@ -97,7 +97,7 @@ export default {
     computed: {
 
         touch() {
-            return !! ('ontouchstart' in window || 
+            return !! ('ontouchstart' in window ||
                 navigator.msMaxTouchPoints);
         },
 
@@ -145,10 +145,10 @@ export default {
         Event.bind('NResizer:moved',
             this.onUpdate, this._.uid);
 
-        Dom.find(window).on('resize', 
+        Dom.find(window).on('resize',
             this.onResize, passive);
-    
-        Dom.find(this.$refs.content).on('scroll', 
+
+        Dom.find(this.$refs.content).on('scroll',
             this.onScroll, passive);
     },
 
@@ -168,16 +168,16 @@ export default {
             passive: true, uid: this._.uid
         };
 
-        Event.unbind('NScrollbar:resize', 
+        Event.unbind('NScrollbar:resize',
             this._.uid);
 
-        Event.unbind('NResizer:moved', 
+        Event.unbind('NResizer:moved',
             this._.uid);
 
-        Dom.find(window).off('resize', 
+        Dom.find(window).off('resize',
             null, passive);
 
-        Dom.find(this.$el).off('scroll', 
+        Dom.find(this.$el).off('scroll',
             null, passive);
     },
 
@@ -253,7 +253,7 @@ export default {
 
         adaptScrollHeight()
         {
-            if ( this.native ) {
+            if ( this.native && this.allowNative ) {
                 return;
             }
 
@@ -264,7 +264,11 @@ export default {
             //     this.$refs.content.offsetWidth;
 
             let outerHeight = this.$refs.content.
-                clientHeight|| 0;
+                clientHeight || 0;
+
+            if ( this.native && ! this.allowNative ) {
+                outerHeight -= 16;
+            }
 
             // if ( offsetHeight === 0 && this.overflowX ) {
             //     outerHeight -= 15;
@@ -273,11 +277,15 @@ export default {
             let innerHeight = this.$refs.content
                 .scrollHeight || 0;
 
+            if ( this.native && ! this.allowNative ) {
+                innerHeight -= 16;
+            }
+
             // if ( offsetHeight === 0 && this.overflowX ) {
             //     innerHeight -= 15;
             // }
 
-            let isSameOld = outerHeight === this.outerHeight && 
+            let isSameOld = outerHeight === this.outerHeight &&
                 innerHeight === this.innerHeight;
 
             if ( isSameOld ) {
@@ -287,15 +295,15 @@ export default {
             this.outerHeight = outerHeight;
             this.innerHeight = innerHeight;
 
-            let height = (outerHeight / innerHeight) 
+            let height = (outerHeight / innerHeight)
                 * outerHeight;
 
             let barHeight = Math.max(height, 50);
 
-            let maxHeight = Math.ceil((outerHeight / innerHeight) * 
+            let maxHeight = Math.ceil((outerHeight / innerHeight) *
                 (innerHeight - outerHeight));
-        
-            this.heightRatio = (maxHeight - (barHeight - height) 
+
+            this.heightRatio = (maxHeight - (barHeight - height)
                 - this.offsetY) / maxHeight;
 
             Dom.find(this.$refs.vbar).css({
@@ -331,7 +339,7 @@ export default {
 
         adaptScrollWidth()
         {
-            if ( this.native ) {
+            if ( this.native && this.allowNative ) {
                 return;
             }
 
@@ -343,7 +351,11 @@ export default {
 
             let outerWidth = this.$refs.content.
                 clientWidth || 0;
-                
+
+            if ( this.native && ! this.allowNative ) {
+                outerWidth -= 16;
+            }
+
             // if ( offsetWidth === 0 && this.overflowY ) {
             //     outerWidth -= 15;
             // }
@@ -351,11 +363,15 @@ export default {
             let innerWidth = this.$refs.content
                 .scrollWidth || 0;
 
+            if ( this.native && ! this.allowNative ) {
+                innerWidth -= 16;
+            }
+
             // if ( offsetWidth === 0 && this.overflowY ) {
             //     innerWidth -= 15;
             // }
 
-            let isSameOld = outerWidth === this.outerWidth && 
+            let isSameOld = outerWidth === this.outerWidth &&
                 innerWidth === this.innerWidth;
 
             if ( isSameOld ) {
@@ -365,15 +381,15 @@ export default {
             this.outerWidth = outerWidth;
             this.innerWidth = innerWidth;
 
-            let width = (outerWidth / innerWidth) 
+            let width = (outerWidth / innerWidth)
                 * outerWidth;
 
             let barWidth = Math.max(width, 50);
 
-            let maxWidth = Math.ceil((outerWidth / innerWidth) * 
+            let maxWidth = Math.ceil((outerWidth / innerWidth) *
                 (innerWidth - outerWidth));
-        
-            this.widthRatio = (maxWidth - (barWidth - width) 
+
+            this.widthRatio = (maxWidth - (barWidth - width)
                 - this.offsetX) / maxWidth;
 
             Dom.find(this.$refs.hbar).css({
@@ -381,7 +397,7 @@ export default {
             });
 
             // let hasNativeBar = offsetHeight && this.overflowX;
-    
+
             // if ( hasNativeBar ) {
             //     Dom.find(this.$el).addClass('has-native-hbar');
             // }
@@ -409,7 +425,7 @@ export default {
 
         adaptScrollPosition(scroll = {})
         {
-            if ( this.native ) {
+            if ( this.native && this.allowNative ) {
                 return;
             }
 
@@ -421,7 +437,7 @@ export default {
                 scroll.left = this.$refs.content.scrollLeft;
             }
 
-            let vbarTop= Math.ceil((this.outerHeight / this.innerHeight) * 
+            let vbarTop= Math.ceil((this.outerHeight / this.innerHeight) *
                 scroll.top * this.heightRatio) || 0;
 
             if ( ! this.vbarTop || vbarTop !== this.vbarTop ) {
@@ -433,7 +449,7 @@ export default {
                 this.vbarTop = vbarTop;
             }
 
-            let hbarLeft =  Math.ceil((this.outerWidth / this.innerWidth) * 
+            let hbarLeft =  Math.ceil((this.outerWidth / this.innerWidth) *
                 scroll.left * this.widthRatio) || 0;
 
             if ( ! this.hbarLeft || hbarLeft !== this.hbarLeft ) {
@@ -441,7 +457,7 @@ export default {
                 Dom.find(this.$refs.hbar).css({
                     transform: `translateX(${hbarLeft}px) translateZ(0)`
                 });
-                
+
                 this.hbarLeft = hbarLeft;
             }
         },
@@ -489,7 +505,7 @@ export default {
 
         bindAdaptHeight()
         {
-            this.refreshHeight = setInterval(this.adaptHeight, 
+            this.refreshHeight = setInterval(this.adaptHeight,
                 1000 / this.framerate);
         },
 
@@ -539,7 +555,7 @@ export default {
 
         bindAdaptWidth()
         {
-            this.refreshWidth = setInterval(this.adaptWidth, 
+            this.refreshWidth = setInterval(this.adaptWidth,
                 1000 / this.framerate);
         },
 
@@ -558,7 +574,7 @@ export default {
             let scrollUpdate = () => {
                 this.$emit('scrollupdate', scroll.top, scroll.left);
             }
-            
+
             this.$nextTick(scrollUpdate);
             this.adaptScrollPosition(scroll);
         },
@@ -592,7 +608,7 @@ export default {
 
             this.resizeTimer = setTimeout(
                 this.onUpdate, 500);
-            
+
             Dom.find(this.$el).fire('resized');
         },
 
@@ -641,10 +657,10 @@ export default {
 
             event.stopPropagation();
 
-            Dom.find(document).on(this.mousemove, 
+            Dom.find(document).on(this.mousemove,
                 this.onVbarMousemove, this._.uid);
 
-            Dom.find(document).on(this.mouseup, 
+            Dom.find(document).on(this.mouseup,
                 this.onVbarMouseup, this._.uid);
 
             this.scrollTop = this.$refs.content
@@ -659,24 +675,24 @@ export default {
             let clientY = this.getTouchEvent(event)
                 .clientY;
 
-            let top = (this.outerHeight / this.innerHeight) * 
+            let top = (this.outerHeight / this.innerHeight) *
                 this.scrollTop * this.heightRatio;
 
             let offset = (clientY - this.clientY) + top;
 
-            let height = (this.outerHeight - 
-                    this.barHeight - this.offsetY);
+            let height = (this.outerHeight -
+                this.barHeight - this.offsetY);
 
-            this.$refs.content.scrollTop = offset / height * 
+            this.$refs.content.scrollTop = offset / height *
                 (this.innerHeight - this.outerHeight);
         },
 
         onVbarMouseup(event)
         {
-            Dom.find(document).off(this.mousemove, 
+            Dom.find(document).off(this.mousemove,
                 null, this._.uid);
 
-            Dom.find(document).off(this.mouseup, 
+            Dom.find(document).off(this.mouseup,
                 null, this._.uid);
         },
 
@@ -685,13 +701,13 @@ export default {
             if ( ! Arr.has([0, 1], event.which) ) {
                 return;
             }
-            
+
             event.stopPropagation();
 
-            Dom.find(document).on(this.mousemove, 
+            Dom.find(document).on(this.mousemove,
                 this.onHbarMousemove, this._.uid);
 
-            Dom.find(document).on(this.mouseup, 
+            Dom.find(document).on(this.mouseup,
                 this.onHbarMouseup, this._.uid);
 
             this.scrollLeft = this.$refs.content
@@ -702,24 +718,24 @@ export default {
 
         onHbarMousemove(event)
         {
-            let top = (this.outerWidth / this.innerWidth) * 
+            let top = (this.outerWidth / this.innerWidth) *
                 this.scrollLeft * this.widthRatio;
 
             let offset = (event.clientX - this.clientX) + top;
 
-            let width = (this.outerWidth - 
-                    this.barWidth - this.offsetX);
+            let width = (this.outerWidth -
+                this.barWidth - this.offsetX);
 
-            this.$refs.content.scrollLeft = offset / width * 
+            this.$refs.content.scrollLeft = offset / width *
                 (this.innerWidth - this.outerWidth);
         },
 
         onHbarMouseup(event)
         {
-            Dom.find(document).off(this.mousemove, 
+            Dom.find(document).off(this.mousemove,
                 null, this._.uid);
 
-            Dom.find(document).off(this.mouseup, 
+            Dom.find(document).off(this.mouseup,
                 null, this._.uid);
         }
 
@@ -735,6 +751,10 @@ export default {
             classList.push('n-scrollbar--native');
         }
 
+        if ( ! this.allowNative ) {
+            classList.push('n-scrollbar--forced');
+        }
+
         if ( this.touch ) {
             classList.push('n-scrollbar--touch');
         }

package/src/scrollbar/src/scrollbar/scrollbar.scss

@@ -38,6 +38,13 @@
     bottom: -17px;
 }
 
+.n-scrollbar.n-scrollbar--forced.n-scrollbar--native > .n-scrollbar-content {
+    padding-right: 16px;
+    padding-bottom: 16px;
+    right: -16px;
+    bottom: -16px;
+}
+
 .n-scrollbar:not(.n-overflow-x) > .n-scrollbar-content {
     bottom: 0;
     overflow-x: hidden;
@@ -66,15 +73,16 @@
     width: 10px;
 }
 
+
 .n-scrollbar-h {
     left: 0;
     bottom: 0;
     height: 10px;
 }
 
-.n-scrollbar--native > .n-scrollbar-v,
+.n-scrollbar--native:not(.n-scrollbar--forced) > .n-scrollbar-v,
 .n-scrollbar:not(.has-vtrack) > .n-scrollbar-v,
-.n-scrollbar--native > .n-scrollbar-h,
+.n-scrollbar--native:not(.n-scrollbar--forced) > .n-scrollbar-h,
 .n-scrollbar:not(.has-htrack) > .n-scrollbar-h {
     display: none;
 }

package/src/timepicker/src/timepicker-panel/timepicker-panel.js

@@ -124,19 +124,41 @@ export default {
 
     data()
     {
+        let modelValue = Now.make(this.modelValue);
+
+        if ( Any.isEmpty(this.modelValue) ) {
+            modelValue = modelValue.resetTime();
+        }
+
         return {
-            tempValue: Now.make(this.modelValue),
+            tempValue: modelValue,
         }
     },
 
+    mounted()
+    {
+        this.scrollTo();
+    },
+
     methods: {
 
         eventSelect(now)
         {
-            this.$emit('update:modelValue', 
+            this.$emit('update:modelValue',
                 (this.tempValue = now.clone()).format(this.format));
         },
 
+        scrollTo()
+        {
+            let scrollbars = Obj.only(this.$refs, [
+                'hour', 'minute', 'second'
+            ]);
+
+            Arr.each(scrollbars, (ref, key) => {
+                ref.scrollIntoView(`[data-index="${this.tempValue[key]()}"]`);
+            });
+        }
+
     },
 
     renderToolbar()
@@ -145,7 +167,7 @@ export default {
             <div class="n-timepicker-panel__toolbar">
                 <div class="n-timepicker-panel__display">
                     <span class="n-timepicker-panel__time">
-                        { this.tempValue.format(this.displayFormat) || this.placeholder }
+                        {this.tempValue.format(this.displayFormat) || this.placeholder}
                     </span>
                 </div>
             </div>
@@ -167,21 +189,21 @@ export default {
         };
 
         return (
-            <div class={classList} {...props}>
-                <span>{ now.format('HH') }</span>
+            <div class={classList} {...props} data-index={now.hour()}>
+                <span>{now.format('HH')}</span>
             </div>
         );
     },
 
     renderHourPanel()
     {
-        if ( ! this.displayFormat.match('HH') ) {
+        if ( !this.displayFormat.match('HH') ) {
             return null;
         }
 
         return (
-            <NScrollbar class="n-timepicker-panel__panel" wrapClass="n-timepicker-panel__wrap">
-                { Arr.each(this.hoursGrid, this.ctor('renderHourItem')) }
+            <NScrollbar ref="hour" class="n-timepicker-panel__panel" wrapClass="n-timepicker-panel__wrap">
+                {Arr.each(this.hoursGrid, this.ctor('renderHourItem'))}
             </NScrollbar>
         );
     },
@@ -201,21 +223,21 @@ export default {
         };
 
         return (
-            <div class={classList} {...props}>
-                <span>{ now.format('mm') }</span>
+            <div class={classList} {...props} data-index={now.minute()}>
+                <span>{now.format('mm')}</span>
             </div>
         );
     },
 
     renderMinutePanel()
     {
-        if ( ! this.displayFormat.match('mm') ) {
+        if ( !this.displayFormat.match('mm') ) {
             return null;
         }
 
         return (
-            <NScrollbar class="n-timepicker-panel__panel" wrapClass="n-timepicker-panel__wrap">
-                { Arr.each(this.minutesGrid, this.ctor('renderMinuteItem')) }
+            <NScrollbar ref="minute" class="n-timepicker-panel__panel" wrapClass="n-timepicker-panel__wrap">
+                {Arr.each(this.minutesGrid, this.ctor('renderMinuteItem'))}
             </NScrollbar>
         );
     },
@@ -235,23 +257,21 @@ export default {
         };
 
         return (
-            <div class={classList} {...props}>
-                <span>{ now.format('ss') }</span>
+            <div class={classList} {...props} data-index={now.second()}>
+                <span>{now.format('ss')}</span>
             </div>
         );
     },
 
     renderSecondPanel()
     {
-        if ( ! this.displayFormat.match('ss') ) {
+        if ( !this.displayFormat.match('ss') ) {
             return null;
         }
 
         return (
-            <NScrollbar class="n-timepicker-panel__panel">
-                <div class="n-timepicker-panel__wrap">
-                    { Arr.each(this.secondsGrid, this.ctor('renderSecondItem')) }
-                </div>
+            <NScrollbar ref="second" class="n-timepicker-panel__panel" wrapClass="n-timepicker-panel__wrap">
+                {Arr.each(this.secondsGrid, this.ctor('renderSecondItem'))}
             </NScrollbar>
         );
     },
@@ -264,7 +284,7 @@ export default {
             'n-timepicker-panel--' + this.type,
         ];
 
-        if ( this.disabled ){
+        if ( this.disabled ) {
             classList.push('n-disabled');
         }
 
@@ -274,9 +294,9 @@ export default {
                     {this.ctor('renderToolbar')()}
                 </div>
                 <div class="n-timepicker-panel__body">
-                    { this.ctor('renderHourPanel')() }
-                    { this.ctor('renderMinutePanel')() }
-                    { this.ctor('renderSecondPanel')() }
+                    {this.ctor('renderHourPanel')()}
+                    {this.ctor('renderMinutePanel')()}
+                    {this.ctor('renderSecondPanel')()}
                 </div>
             </div>
         );

package/src/virtualscroller/src/virtualscroller/virtualscroller.beta.js

@@ -213,7 +213,7 @@ export default {
                 return this.scrollTo(0, targetTop);
             }
 
-            targetTop = targetTop - this.height + 
+            targetTop = targetTop - this.height +
                 this.itemHeight;
 
             this.scrollTo(0, targetTop);
@@ -324,7 +324,7 @@ export default {
             let startItem = Math.round(this.scrollTop /
                 this.itemHeight);
 
-            let endItem = Math.round((this.scrollTop + 
+            let endItem = Math.round((this.scrollTop +
                 this.height) / this.itemHeight);
 
             let start = (startItem - bufferItems);
@@ -355,7 +355,7 @@ export default {
         passed.index = (passed.index +
             this.state.start);
 
-        let topOffset = Math.round(this.itemHeight * 
+        let topOffset = Math.round(this.itemHeight *
             passed.index);
 
         let renderFunction = this.$slots.default;
@@ -388,7 +388,7 @@ export default {
         if ( this.state.grid !== 1 ) {
             style.width = this.itemWidth + 'px';
         }
-        
+
         return (
             <div class="n-virtualscroller__item" style={style} {...props}>
                 { renderFunction(passed) }
@@ -424,7 +424,7 @@ export default {
         let counter = passed.index * this.state.start;
 
         return (
-            <div class="n-virtualscroller__row" style={style}>
+            <div data-row={passed.index} class="n-virtualscroller__row" style={style}>
                 {
                     Arr.each(passed.chunk, (value, index) => {
                         return this.ctor('renderItem')({
@@ -444,7 +444,7 @@ export default {
         let items = Arr.slice(chunks, this.state.start,
             this.state.end);
 
-        if ( ! this.threshold || this.threshold > chunks.length ) {
+        if ( ! this.threshold || this.threshold > this.items.length ) {
             items = chunks;
         }
 
@@ -484,13 +484,15 @@ export default {
             onSizechange: this.onSizechange,
         };
 
-        let style = {};
+        let style = {
+            'overflow-y': 'hidden'
+        };
 
-        let totalHeight = this.items.length / this.state.grid *
+        let totalHeight = Math.ceil(this.items.length / this.state.grid) *
             this.itemHeight;
 
         if ( this.threshold && this.items.length ) {
-            style.height = Math.ceil(totalHeight) + 'px';
+            style.height = Math.ceil(totalHeight + this.offsetY) + 'px';
         }
 
         return (