@kizmann/nano-ui 1.0.15 → 1.1.2

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

@@ -0,0 +1,556 @@
+import { UUID, Arr, Obj, Dom, Any, Str, Locale, Event, Num } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NResizer',
+
+    props: {
+
+        modelValue: {
+            default()
+            {
+                return 0;
+            },
+            type: [Number]
+        },
+
+        width: {
+            default()
+            {
+                return '';
+            },
+            type: [Number, 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]
+        },
+
+        type: {
+            default()
+            {
+                return 'primary';
+            },
+            type: [String]
+        },
+
+        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('NScrollbar:paused', (...args) => {
+            this.updateRemoteWidth(...args)
+        }, this._.uid);
+
+        Event.bind('NResizer:move', (...args) => {
+            this.forceWidth(...args)
+        }, this._.uid);
+
+        this.updateHandle();
+    },
+
+    unmounted()
+    {
+        this.observer.disconnect();
+
+        Event.unbind('NScrollbar:paused',
+            this._.uid);
+
+        Event.unbind('NResizer:move',
+            this._.uid);
+    },
+
+    methods: {
+
+        getWidthDebounced()
+        {
+            if ( Dom.find(this.$el).inside('.n-paused') ) {
+                return;
+            }
+
+            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);
+        },
+
+        updateRemoteWidth(el)
+        {
+            if ( Dom.find(el).contains(this.$el) ) {
+                this.updateWidth();
+            }
+        },
+
+        updateWidth()
+        {
+            let width = Dom.find(this.$el).width();
+
+            if ( width === this.tempValue ) {
+                return;
+            }
+
+            this.$emit('updateWidth', this.tempValue = width);
+
+            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 * 0.5);
+
+            if ( this.minWidth ) {
+                targetWidth = Math.max(targetWidth,
+                    this.minWidth - this.resizerWidth);
+            }
+
+            if ( this.maxWidth ) {
+                targetWidth = Math.min(targetWidth,
+                    this.maxWidth - this.resizerWidth);
+            }
+
+            console.log('aaaaa')
+
+            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 * 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);
+        },
+
+        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.type,
+            'n-resizer--' + this.position,
+        ];
+
+        let style = {};
+
+        if ( !Any.isEmpty(this.flex) ) {
+            style['flex'] = this.flex;
+        }
+
+        let width = this.width;
+
+        if ( Any.isNumber(width) ) {
+            width = width + 'px';
+        }
+
+        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.scss

@@ -1,4 +1,4 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-resizer {
     position: relative;

package/src/root/helpers.scss

@@ -0,0 +1,41 @@
+@use "sass:color";
+@use "sass:string";
+
+@mixin css-colors($colors, $prefix: '') {
+    @each $name, $color in $colors {
+        --n-color#{$prefix}-#{$name}: #{color.channel($color, 'red')}, #{color.channel($color, 'green')}, #{color.channel($color, 'blue')};
+    }
+}
+
+@mixin css-sizes($sizes, $prefix: '') {
+    @each $name, $value in $sizes {
+        --n-size#{$prefix}-#{$name}: #{$value};
+    }
+}
+
+@mixin css-remaps($values, $source: '-color-default', $target: '-color-base') {
+    @each $name, $value in $values {
+        --n#{$target}-#{$name}: var(--n#{$source}-#{$name});
+    }
+}
+
+@function string-replace($string, $search, $replace: "") {
+    $i: string.index($string, $search);
+
+    @if not $i {
+        @return $string;
+    }
+
+    $string: string.slice($string, 1, $i - 1) + $replace +
+        string.slice($string, $i + string.length($search));
+
+    @return string-replace($string, $search, $replace);
+}
+
+@function color($color, $opacity: 1) {
+    @return string.unquote("rgba(var(--n-color-#{$color}), #{$opacity})")
+};
+
+@function size($size, $context: '$') {
+    @return string.unquote(string-replace($context, "$", "var(--n-size-#{$size})"));
+};

package/src/root/image/angle-down-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 1 L8 8 L15 1 Z" fill="#000" />
+</svg>

package/src/root/image/angle-down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 0 L8 7 L15 0 Z" fill="#000" />
+</svg>

package/src/root/image/angle-left-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 15 L0 8 L7 1 Z" fill="#000" />
+</svg>

package/src/root/image/angle-left.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 15 L1 8 L8 1 Z" fill="#000" />
+</svg>

package/src/root/image/angle-right-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 15 L8 8 L1 1 Z" fill="#000" />
+</svg>

package/src/root/image/angle-right.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 15 L7 8 L0 1 Z" fill="#000" />
+</svg>

package/src/root/image/angle-up-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 7 L8 0 L15 7 Z" fill="#000" />
+</svg>

package/src/root/image/angle-up.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 8 L8 1 L15 8 Z" fill="#000" />
+</svg>

package/src/root/image/empty-ufo.svg

@@ -0,0 +1,8 @@
+<svg width="320" height="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="160.5" cy="270" rx="106.5" ry="32" fill-opacity="0.3" />
+<path d="M216.8,94.2c0-8.7-25.2-15.8-56.3-15.8s-56.3,7.1-56.3,15.8l3.6,10c0-8.2,23.6-14.8,52.8-14.8 s52.8,6.6,52.8,14.8L216.8,94.2z" fill-opacity="0.7" />
+<path d="M160.5,238c51.7,0,94.9,11.1,104.5,25.8l-51.7-159.6c0-8.2-23.6-14.8-52.8-14.8s-52.8,6.6-52.8,14.8L56,263.8 C65.6,249.1,108.8,238,160.5,238z" fill-opacity="0.15" />
+<path d="M160.5,40c17.2,0,33.2,1.8,47.4,4.8c-5.2-14.9-24.4-26-47.4-26s-42.2,11.1-47.4,26 C127.3,41.9,143.3,40,160.5,40z" fill-opacity="0.6" />
+<path d="M160.5,50.7C100,50.7,51,64,51,80.4c0,11.2,22.6,20.9,56,26l0.7-2.3l-3.6-10c0-8.7,25.2-15.8,56.3-15.8s56.3,7.1,56.3,15.8 l-3.6,10l0.7,2.3c33.4-5.1,56-14.8,56-26C270,64,221,50.7,160.5,50.7z" fill-opacity="1" />
+<path d="M160.5,50.7C221,50.7,270,64,270,80.4C270,64,223.2,40,160.5,40S51,64,51,80.4C51,64,100,50.7,160.5,50.7z" fill-opacity="0.3" />
+</svg>

package/src/root/image/empty.svg

@@ -0,0 +1,10 @@
+<svg width="320" height="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
+    <path d="M99,191.8c1.7,0,3.3,1,3.9,2.6l6.8,15.7c1.7,3.9,5.6,6.5,9.9,6.5H204c4.3,0,8.2-2.5,9.9-6.5l6.8-15.7 c0.7-1.6,2.2-2.6,3.9-2.6h22.5v-82h-48.6c-14.8,0-26.7-12-26.7-26.7V34.5H94.3c-9.8,0-17.8,8-17.8,17.8v139.5H99z" fill-opacity="0.2" />
+    <path d="M198.5,109.8h48.6l-75.4-75.4v48.6C171.8,97.9,183.7,109.8,198.5,109.8z" fill-opacity="0.4"/>
+    <path d="M141.8,107.4h-24.1c-3.8,0-7-3.1-7-7l0,0c0-3.8,3.1-7,7-7h24.1c3.8,0,7,3.1,7,7l0,0 C148.7,104.3,145.6,107.4,141.8,107.4z" fill-opacity="0.6" />
+    <path d="M210.9,152.2h-92.5c-4.2,0-7.6-3.4-7.6-7.6v0c0-4.2,3.4-7.6,7.6-7.6h92.5c4.2,0,7.6,3.4,7.6,7.6v0 C218.6,148.8,215.2,152.2,210.9,152.2z" fill-opacity="0.6" />
+    <path d="M210.9,188.6h-92.5c-4.2,0-7.6-3.4-7.6-7.6v0c0-4.2,3.4-7.6,7.6-7.6h92.5c4.2,0,7.6,3.4,7.6,7.6v0 C218.6,185.1,215.2,188.6,210.9,188.6z" fill-opacity="0.6" />
+    <path d="M220.7,194.4l-6.8,15.7c-1.7,3.9-5.6,6.5-9.9,6.5h-84.3c-4.3,0-8.2-2.5-9.9-6.5l-6.8-15.7 c-0.7-1.6-2.2-2.6-3.9-2.6H37V278c0,5.9,4.8,10.8,10.8,10.8h228.1c5.9,0,10.8-4.8,10.8-10.8v-86.1h-62 C222.9,191.8,221.4,192.8,220.7,194.4z" fill-opacity="0.5" />
+    <polygon points="76.5,142 37,191.8 76.5,191.8" fill-opacity="1" />
+    <polygon points="247.1,142 247.1,191.8 286.6,191.8" fill-opacity="1" />
+</svg>

package/src/root/image/star.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+	<path d="M15.891,0.561l4.097,8.408l9.16,1.348c0.815,0.12,1.14,1.135,0.551,1.717l-6.629,6.545l1.565,9.242
+		c0.139,0.822-0.713,1.449-1.442,1.061L15,24.519l-8.193,4.363c-0.729,0.388-1.581-0.239-1.442-1.061l1.565-9.242l-6.629-6.545
+		c-0.59-0.582-0.264-1.597,0.551-1.717l9.16-1.348l4.097-8.408C14.473-0.187,15.527-0.187,15.891,0.561z" fill="#000" />
+</svg>

package/src/root/vars.scss

@@ -34,8 +34,10 @@ $color-warning:         #FFBF3F !default;
 $color-danger:          #F9536E !default;
 $color-info:            #4BD6F9 !default;
 
-$color-shadow:              #000 !default;
-
+$color-shadow:          #000000 !default;
+$color-form:            $color-gray-05 !default;
+$color-input:           $color-white !default;
+$color-input-off:       $color-gray-10 !default;
 
 $color-white-light:         $color-white !default;
 $color-white-lighter:       $color-white !default;
@@ -183,4 +185,4 @@ $colors-tags: (
         '17': color.mix($color-danger, $color-warning, 65%),
         '18': color.mix($color-success, $color-warning, 65%),
         '19': color.mix($color-warning, $color-warning, 65%),
-) !default;
+) !default;

package/src/scrollbar/index.scss

@@ -1 +1 @@
-@import "./src/scrollbar/scrollbar";
+@forward "./src/scrollbar/scrollbar";