@kizmann/nano-ui 1.0.14 → 1.1.0

package/src/resizer/src/resizer/resizer-next.jsx

@@ -0,0 +1,536 @@
+import { UUID, Arr, Obj, Dom, Any, Str, Locale, Event, Num } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NResizer',
+
+    inject: {
+
+        NScrollbar: {
+            default: undefined
+        }
+
+    },
+
+    props: {
+
+        modelValue: {
+            default()
+            {
+                return 0;
+            },
+            type: [Number]
+        },
+
+        width: {
+            default()
+            {
+                return '';
+            },
+            type: [String]
+        },
+
+        flex: {
+            default()
+            {
+                return '';
+            },
+            type: [String]
+        },
+
+        minWidth: {
+            default()
+            {
+                return 60;
+            },
+            type: [Number]
+        },
+
+        maxWidth: {
+            default()
+            {
+                return 0;
+            },
+            type: [Number]
+        },
+
+        group: {
+            default()
+            {
+                return [];
+            },
+            type: [Array]
+        },
+
+        disabled: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+        position: {
+            default()
+            {
+                return 'right';
+            },
+            type: [String]
+        },
+
+        resizerWidth: {
+            default()
+            {
+                return 6;
+            },
+            type: [Number]
+        }
+
+    },
+
+    computed: {
+
+        touch()
+        {
+            return !!('ontouchstart' in window ||
+                navigator.msMaxTouchPoints);
+        },
+
+        mousedown()
+        {
+            return this.touch ? 'touchstart' :
+                'mousedown';
+        },
+
+        mousemove()
+        {
+            return this.touch ? 'touchmove' :
+                'mousemove';
+        },
+
+        mouseup()
+        {
+            return this.touch ? 'touchend' :
+                'mouseup';
+        }
+
+    },
+
+    data()
+    {
+        return {
+            sizeFixed: false, tempValue: this.modelValue,
+        };
+    },
+
+    watch: {
+
+        modelValue(value)
+        {
+            if ( value !== this.tempValue ) {
+                this.tempValue = value;
+            }
+        },
+
+    },
+
+    mounted()
+    {
+        this.observer = new ResizeObserver(() => {
+            this.getWidthDebounced();
+        });
+
+        this.observer.observe(this.$el);
+
+        if ( !this.modelValue ) {
+            this.getWidthDebounced();
+        }
+
+        Event.bind('NResizer:move', (...args) => {
+            this.forceWidth(...args)
+        }, this._.uid);
+
+        this.updateHandle();
+    },
+
+    updated()
+    {
+        this.getWidthDebounced();
+    },
+
+    unmounted()
+    {
+        this.observer.disconnect();
+
+        Event.unbind('NResizer:move',
+            this._.uid);
+    },
+
+    methods: {
+
+        getWidthDebounced()
+        {
+            let now = this.$el.getBoundingClientRect();
+
+            if ( Any.isEqual(this.last || {}, now) ) {
+                return;
+            }
+
+            this.last = now;
+
+            clearInterval(this.interval);
+
+            this.interval = setTimeout(() => {
+                this.updateWidth();
+            }, 5);
+        },
+
+        forceWidth(group)
+        {
+            if ( !Arr.has(group, this.group) ) {
+                return;
+            }
+
+            if ( !this.tempValue || !this.group.length ) {
+                return;
+            }
+
+            this.sizeFixed = true;
+
+            let style = {
+                width: this.tempValue + 'px', flex: '0 0 auto'
+            };
+
+            Dom.find(this.$el).css(style);
+        },
+
+        updateWidth()
+        {
+            let width = Dom.find(this.$el).width();
+
+            if ( width === this.tempValue ) {
+                return;
+            }
+
+            this.$emit('updateWidth', this.tempValue = width);
+
+            Event.fire('NResizer:changed');
+
+            this.updateHandle();
+        },
+
+        updateHandle()
+        {
+            let style = {};
+
+            if ( this.position === 'left' ) {
+                style.transform = `translateX(-${this.tempValue - this.resizerWidth}px)`
+            }
+
+            if ( this.position === 'right' ) {
+                style.transform = `translateX(${this.tempValue - this.resizerWidth}px)`
+            }
+
+            Dom.find(this.$refs.handle).css(style);
+        },
+
+        getTouchEvent(event)
+        {
+            if ( !this.touch ) {
+                return event;
+            }
+
+            return event.touches[0] || event.changedTouches[0];
+        },
+
+        onLeftMousedown(event)
+        {
+            if ( !Arr.has([0, 1], event.which) ) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+
+            if ( this.group.length ) {
+                Event.fire('NResizer:move', this.group);
+            }
+
+            Dom.find(this.$el).addClass('n-move');
+            Dom.find(document.body).addClass('n-move');
+
+            Dom.find(document).on(this.mouseup,
+                Any.framerate(this.onLeftMouseup, 60), this._.uid);
+
+            Dom.find(document).on(this.mousemove,
+                Any.framerate(this.onLeftMousemove, 60), this._.uid);
+        },
+
+        onLeftMousemove(event)
+        {
+            this.clientX = (window.innerWidth -
+                this.getTouchEvent(event).clientX);
+
+            let offsetX = Dom.find(this.$el)
+                .offset('right');
+
+            let scrollX = Dom.find(this.$el)
+                .scroll('right');
+
+            let targetWidth = (this.clientX + scrollX - offsetX) -
+                (this.resizerWidth * 2);
+
+            if ( this.minWidth ) {
+                targetWidth = Math.max(targetWidth,
+                    this.minWidth - this.resizerWidth);
+            }
+
+            if ( this.maxWidth ) {
+                targetWidth = Math.min(targetWidth,
+                    this.maxWidth - this.resizerWidth);
+            }
+
+            let style = {
+                transform: `translateX(-${targetWidth - this.resizerWidth}px)`
+            };
+
+            Dom.find(this.$refs.handle).css(style);
+        },
+
+        onLeftMouseup(event)
+        {
+            event.preventDefault();
+            event.stopPropagation();
+
+            Dom.find(document).off(this.mouseup, null, this._.uid);
+            Dom.find(document).off(this.mousemove, null, this._.uid);
+
+            if ( !this.clientX ) {
+                return;
+            }
+
+            let offsetX = Dom.find(this.$el)
+                .offset('right');
+
+            let scrollX = Dom.find(this.$el)
+                .scroll('right');
+
+            let targetWidth = this.clientX + scrollX - offsetX -
+                (this.resizerWidth * 2);
+
+            if ( this.minWidth ) {
+                targetWidth = Math.max(targetWidth, this.minWidth);
+            }
+
+            if ( this.maxWidth ) {
+                targetWidth = Math.min(targetWidth, this.maxWidth);
+            }
+
+            this.tempValue = Math.round(targetWidth);
+
+            Dom.find(this.$el).removeClass('n-move');
+
+            let style = {
+                transform: `translateX(-${targetWidth - this.resizerWidth}px)`
+            };
+
+            Dom.find(this.$refs.handle).css(style);
+
+            let frameStyle = {
+                width: this.tempValue + 'px', flex: '0 0 auto'
+            };
+
+            Dom.find(this.$el).css(frameStyle);
+
+            delete this.clientX;
+
+            if ( this.group.length ) {
+                Event.fire('NResizer:moved', this.group);
+            }
+
+            this.sizeFixed = true;
+
+            this.$emit('update:modelValue', this.tempValue);
+        },
+
+        onRightMousedown(event)
+        {
+            if ( !Arr.has([0, 1], event.which) ) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+
+            if ( this.group.length ) {
+                Event.fire('NResizer:move', this.group);
+            }
+
+            Dom.find(this.$el).addClass('n-move');
+            Dom.find(document.body).addClass('n-move');
+
+            Dom.find(document).on(this.mouseup,
+                Any.framerate(this.onRightMouseup, 60), this._.uid);
+
+            Dom.find(document).on(this.mousemove,
+                Any.framerate(this.onRightMousemove, 60), this._.uid);
+        },
+
+        onRightMousemove(event)
+        {
+            this.clientX = this.getTouchEvent(event).clientX;
+
+            let offsetX = Dom.find(this.$el)
+                .offset('left');
+
+            let scrollX = Dom.find(this.$el)
+                .scroll('left');
+
+            let targetWidth = (this.clientX + scrollX - offsetX) +
+                (this.resizerWidth * 0.5);
+
+            if ( this.minWidth ) {
+                targetWidth = Math.max(targetWidth,
+                    this.minWidth - this.resizerWidth);
+            }
+
+            if ( this.maxWidth ) {
+                targetWidth = Math.min(targetWidth,
+                    this.maxWidth - this.resizerWidth);
+            }
+
+            let style = {
+                transform: `translateX(${targetWidth - this.resizerWidth}px)`
+            };
+
+            Dom.find(this.$refs.handle).css(style);
+        },
+
+        onRightMouseup(event)
+        {
+            event.preventDefault();
+            event.stopPropagation();
+
+            Dom.find(document).off(this.mousemove, null, this._.uid);
+            Dom.find(document).off(this.mouseup, null, this._.uid);
+
+            if ( !this.clientX ) {
+                return;
+            }
+
+            let offsetX = Dom.find(this.$el)
+                .offset('left');
+
+            let scrollX = Dom.find(this.$el)
+                .scroll('left');
+
+            let targetWidth = (this.clientX + scrollX - offsetX) +
+                (this.resizerWidth * 0.5);
+
+            if ( this.minWidth ) {
+                targetWidth = Math.max(targetWidth, this.minWidth);
+            }
+
+            if ( this.maxWidth ) {
+                targetWidth = Math.min(targetWidth, this.maxWidth);
+            }
+
+            this.tempValue = Math.round(targetWidth);
+
+            Dom.find(this.$el).removeClass('n-move');
+
+            let style = {
+                transform: `translateX(${targetWidth - this.resizerWidth}px)`
+            };
+
+            Dom.find(this.$refs.handle).css(style);
+
+            let frameStyle = {
+                width: this.tempValue + 'px', flex: '0 0 auto'
+            };
+
+            Dom.find(this.$el).css(frameStyle);
+
+            delete this.clientX;
+
+            if ( this.group.length ) {
+                Event.fire('NResizer:moved', this.group);
+            }
+
+            this.sizeFixed = true;
+
+            this.$emit('update:modelValue', this.tempValue);
+        }
+
+    },
+
+    renderHandle()
+    {
+        if ( this.disabled ) {
+            return null;
+        }
+
+        let classList = [
+            'n-resizer__handle',
+        ];
+
+        let props = {};
+
+        if ( this.position === 'right' ) {
+            props['on' + Str.ucfirst(this.mousedown)] = this.onRightMousedown;
+        }
+
+        if ( this.position === 'left' ) {
+            props['on' + Str.ucfirst(this.mousedown)] = this.onLeftMousedown;
+        }
+
+        if ( this.resizerWidth ) {
+            props.width = this.resizerWidth + 'px';
+        }
+
+        return (
+            <div ref="handle" class={classList} {...props} />
+        );
+    },
+
+    render()
+    {
+        let classList = [
+            'n-resizer',
+            'n-resizer--' + this.position,
+        ];
+
+        let style = {};
+
+        if ( !Any.isEmpty(this.flex) ) {
+            style['flex'] = this.flex;
+        }
+
+        if ( !Any.isEmpty(this.width) ) {
+            style['width'] = this.width;
+        }
+
+        if ( this.sizeFixed && this.tempValue ) {
+            style['flex'] = `0 0 ${this.tempValue}px`;
+        }
+
+        if ( this.sizeFixed && this.tempValue ) {
+            style['width'] = `${this.tempValue}px`;
+        }
+
+        if ( this.minWidth ) {
+            style['min-width'] = `${this.minWidth}px`;
+        }
+
+        if ( this.maxWidth ) {
+            style['max-width'] = `${this.maxWidth}px`;
+        }
+
+        return (
+            <div class={classList} style={style}>
+                {[this.$slots.default && this.$slots.default(), this.ctor('renderHandle')()]}
+            </div>
+        );
+    }
+
+}

package/src/resizer/src/resizer/resizer.jsx

@@ -83,7 +83,7 @@ export default {
     computed: {
 
         touch() {
-            return !! ('ontouchstart' in window || 
+            return !! ('ontouchstart' in window ||
                 navigator.msMaxTouchPoints);
         },
 
@@ -140,6 +140,8 @@ export default {
         Dom.find(window).on('resize', Any.debounce((...args) => {
             this.onResize(...args)
         }, 500), this._.uid);
+
+        this.updateHandle();
     },
 
     updated()
@@ -153,10 +155,10 @@ export default {
             this.unbindSizechange();
         }
 
-        Event.unbind('NResizer:move', 
+        Event.unbind('NResizer:move',
             this._.uid);
-        
-        Dom.find(window).off('resize', 
+
+        Dom.find(window).off('resize',
             null, this._.uid);
     },
 
@@ -167,7 +169,7 @@ export default {
             if ( ! Arr.has(group, this.group) ) {
                 return;
             }
-            
+
             if ( ! this.tempValue || ! this.group.length ) {
                 return;
             }
@@ -190,9 +192,9 @@ export default {
                 return;
             }
 
-            this.$emit('update:modelValue', 
+            this.$emit('update:modelValue',
                 this.tempValue = width);
-            
+
             this.updateHandle();
         },
 
@@ -203,7 +205,7 @@ export default {
             if ( this.position === 'left' ) {
                 style.transform =`translateX(-${this.tempValue - this.resizerWidth}px)`
             }
-    
+
             if ( this.position === 'right' ) {
                 style.transform = `translateX(${this.tempValue - this.resizerWidth}px)`
             }
@@ -213,7 +215,7 @@ export default {
 
         bindSizechange()
         {
-            Dom.find(this.NScrollbar.$el).on('resized', 
+            Dom.find(this.NScrollbar.$el).on('resized',
                 Any.debounce(this.updateWidth, 50), this._.uid);
         },
 
@@ -267,7 +269,7 @@ export default {
 
         onLeftMousemove(event)
         {
-            this.clientX = (window.innerWidth - 
+            this.clientX = (window.innerWidth -
                 this.getTouchEvent(event).clientX);
 
             let offsetX = Dom.find(this.$el)
@@ -462,7 +464,7 @@ export default {
         if ( this.disabled ) {
             return null;
         }
-        
+
         let classList = [
             'n-resizer__handle',
         ];
@@ -503,6 +505,10 @@ export default {
             style['flex-basis'] = this.width + 'px';
         }
 
+        if ( this.modelValue == this.tempValue ) {
+            style['flex-basis'] = this.modelValue + 'px';
+        }
+
         if ( this.minWidth ) {
             style['min-width'] = this.minWidth + 'px';
         }

package/src/scrollbar/index.js

@@ -1,5 +1,7 @@
 import Scrollbar from "./src/scrollbar/scrollbar.jsx";
+import ScrollbarNext from "./src/scrollbar-next/scrollbar-next.jsx";
 
 export default function (App) {
-    App.component(Scrollbar.name, Scrollbar);
+    // App.component(Scrollbar.name, Scrollbar);
+    App.component(ScrollbarNext.name, ScrollbarNext);
 }

package/src/scrollbar/index.scss

@@ -1 +1,2 @@
 @import "./src/scrollbar/scrollbar";
+@import "./src/scrollbar-next/scrollbar-next";

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

@@ -71,14 +71,14 @@
 .n-scrollbar-v {
     top: 0;
     right: 0;
-    width: 12px;
-}
+    width: 14px;
 
+}
 
 .n-scrollbar-h {
     left: 0;
     bottom: 0;
-    height: 12px;
+    height: 14px;
 }
 
 .n-scrollbar--native:not(.n-scrollbar--forced) > .n-scrollbar-v,
@@ -92,16 +92,22 @@
 .n-scrollbar-h:before {
     content: '\00a0';
     position: absolute;
-    top: 2px;
-    bottom: 2px;
-    left: 2px;
-    right: 2px;
     display: block;
     border-radius: 500px;
     opacity: 0;
-    transition: opacity 0.15s;
+    transition: opacity 0.15s, transform 0.15s;
+}
+
+.n-scrollbar-v:before,
+.n-scrollbar-h:before {
+    top: 4px;
+    bottom: 4px;
+    left: 4px;
+    right: 4px;
 }
 
+.n-scrollbar.has-vtrack > .n-scrollbar-v.is-active:before,
+.n-scrollbar.has-htrack > .n-scrollbar-h.is-active:before,
 .n-scrollbar.has-vtrack:hover > .n-scrollbar-v:before,
 .n-scrollbar.has-htrack:hover > .n-scrollbar-h:before {
     opacity: 1;