@kizmann/nano-ui 0.8.28 → 0.8.30

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kizmann/nano-ui",
-    "version": "0.8.28",
+    "version": "0.8.30",
     "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/paginator/src/paginator/paginator.js

@@ -216,6 +216,10 @@ export default {
 
     renderGoto()
     {
+        if ( this.pageOptions.length > 500 ) {
+            return null;
+        }
+
         let props = {
             modelValue:     this.tempPage,
             size:           this.size,

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()
@@ -87,9 +96,9 @@ export default {
             'n-preview-image'
         ];
 
-        // if ( Arr.has(window.ImageCache, this.src) ) {
-        //     classList.push('n-cached');
-        // }
+        if ( Arr.has(window.ImageCache, this.src) ) {
+            classList.push('n-cached');
+        }
 
         if ( ! this.load ) {
             classList.push('n-ready');

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 (