@kizmann/nano-ui 0.7.17 → 0.7.18

package/package.json

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

package/src/index.js

@@ -73,6 +73,7 @@ export function Install(App, Icons = {}, Styles = {})
     require('./select/index').default(App);
     require('./checkbox/index').default(App);
     require('./radio/index').default(App);
+    require('./slider/index').default(App);
     require('./switch/index').default(App);
     require('./confirm/index').default(App);
     require('./cascader/index').default(App);

package/src/index.scss

@@ -11,6 +11,7 @@
 @import "./input/index";
 @import "./input-number/index";
 @import "./textarea/index";
+@import "./slider/index";
 @import "./switch/index";
 @import "./checkbox/index";
 @import "./radio/index";

package/src/slider/index.js

@@ -0,0 +1,7 @@
+import Vue from "vue";
+
+import Slider from './src/slider/slider';
+
+export default function (App) {
+    App.component(Slider.name, Slider);
+}

package/src/slider/index.scss

@@ -0,0 +1 @@
+@import "./src/slider/slider";

package/src/slider/src/slider/slider.js

@@ -0,0 +1,377 @@
+import { Obj, Arr, Any, Num, Dom, Event } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NSlider',
+
+    props: {
+
+        modelValue: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        range: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+        steps: {
+            default()
+            {
+                return 1;
+            }
+        },
+
+        labels: {
+            default()
+            {
+                return [];
+            },
+            type: [Array]
+        },
+
+        min: {
+            default()
+            {
+                return 0;
+            },
+            type: [Number]
+        },
+
+        max: {
+            default()
+            {
+                return 100;
+            },
+            type: [Number]
+        },
+
+        type: {
+            default()
+            {
+                return 'primary';
+            },
+            type: [String]
+        },
+
+        size: {
+            default()
+            {
+                return 'md';
+            },
+            type: [String]
+        },
+
+        disabled: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+    },
+
+    data()
+    {
+        return {
+            index: 0, width: null, tempValue: [null, null]
+        };
+    },
+
+    computed: {
+
+        selector()
+        {
+            return `[data-index="${this.index}"]`;
+        },
+
+        fixmin()
+        {
+            return Any.isArray(this.steps) ? Arr.first(this.steps) : this.min;
+        },
+
+        fixmax()
+        {
+            return Any.isArray(this.steps) ? Arr.last(this.steps) : this.max;
+        },
+
+        minmax()
+        {
+            return this.fixmax - this.fixmin;
+        },
+
+        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';
+        }
+    },
+
+    watch: {
+
+        modelValue()
+        {
+            this.getPseudoValue();
+        }
+
+    },
+
+    mounted()
+    {
+        Dom.find(window).on('resize',
+            Any.debounce(this.onResize, 500), this._.uid);
+
+        this.onResize();
+        this.getPseudoValue();
+    },
+
+    unmounted()
+    {
+        Dom.find(window).off('resize',
+            null, this._.uid);
+    },
+
+    methods: {
+
+        onResize()
+        {
+            this.width = Dom.find(this.$el).width();
+        },
+
+        getPseudoValue()
+        {
+            let value = this.modelValue;
+
+            if ( Any.isNull(value) ) {
+                value = this.fixmax;
+            }
+            if ( ! Any.isArray(value) ) {
+                value = [this.fixmin, value];
+            }
+
+            return this.tempValue = value;
+        },
+
+        setModelValue()
+        {
+            let value = this.tempValue;
+
+            if ( ! this.range ) {
+                value = this.tempValue[1];
+            }
+
+            this.$emit('update:modelValue', value);
+        },
+
+        getValPos(value)
+        {
+            return Num.fixed(this.width / this.minmax * value, 2) + 'px';
+        },
+
+        getValStyle(value)
+        {
+            return 'transform: translateX(' + this.getValPos(value) + ');';
+        },
+
+        getBarPos()
+        {
+            return Num.fixed(this.width / this.minmax * this.tempValue[0], 2) + 'px';
+        },
+
+        getBarWidth()
+        {
+            return Num.fixed(this.width / this.minmax * (this.tempValue[1] - this.tempValue[0]), 2) + 'px';
+        },
+
+        getBarStyle()
+        {
+            return 'max-width: ' + this.getBarWidth() + '; ' +
+                'transform: translateX(' + this.getBarPos() + ');';
+        },
+
+        getClosestValue(width)
+        {
+            if ( Any.isNumber(this.steps) ) {
+                return Num.round(width / this.steps) * this.steps;
+            }
+
+            let range = Arr.last(this.steps) -
+                Arr.first(this.steps);
+
+            let diff = Arr.each(this.steps, (step) => {
+                return Math.abs((range / 100 * width) - step);
+            });
+
+            let index = Arr.findIndex(diff, Math.min(...diff));
+
+            return this.steps[index];
+        },
+
+        getTouchEvent(event)
+        {
+            if ( ! this.touch ) {
+                return event;
+            }
+
+            return event.touches[0] || event.changedTouches[0];
+        },
+
+        onMousedown(event)
+        {
+            if ( ! Arr.has([0, 1], event.which) ) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+
+            Dom.find(this.$el).find(this.selector).addClass('n-move');
+            Dom.find(document.body).addClass('n-move');
+
+            Dom.find(document).on(this.mouseup,
+                Any.framerate(this.onMouseup, 60), this._.uid);
+
+            Dom.find(document).on(this.mousemove,
+                Any.framerate(this.onMousemove, 60), this._.uid);
+        },
+
+        onMousemove(event)
+        {
+            this.clientX = this.getTouchEvent(event).clientX;
+
+            let offsetX = Dom.find(this.$el)
+                .offset('left');
+
+            let relativeWidth = (this.clientX - offsetX) / this.width * 100;
+
+            let closestValue = this.getClosestValue(relativeWidth);
+
+            if ( closestValue < this.fixmin ) {
+                closestValue = this.fixmin;
+            }
+
+            if ( closestValue > this.fixmax ) {
+                closestValue = this.fixmax;
+            }
+
+            let stepMin = this.tempValue[0] + this.steps;
+
+            if ( this.index === 1 && closestValue < stepMin ) {
+                closestValue = stepMin;
+            }
+
+            let stepMax = this.tempValue[1] - this.steps;
+
+            if ( this.index === 0 && closestValue > stepMax ) {
+                closestValue = stepMax;
+            }
+
+            this.tempValue[this.index] = closestValue;
+        },
+
+        onMouseup(event)
+        {
+            event.preventDefault();
+            event.stopPropagation();
+
+            Dom.find(document).off(this.mouseup, null, this._.uid);
+            Dom.find(document).off(this.mousemove, null, this._.uid);
+
+            Dom.find(this.$el).find(this.selector).removeClass('n-move');
+            Dom.find(document.body).removeClass('n-move');
+
+            this.setModelValue();
+        },
+
+    },
+
+    renderHandle(value, index)
+    {
+        let handleProps = {
+            'data-value': value,
+            'data-index': index,
+            style: this.getValStyle(value)
+        };
+
+        handleProps['onMousedown'] = (event) => {
+            this.onMousedown(event, this.index = index);
+        };
+
+        return (
+            <div class="n-slider__handle" {...handleProps}>
+                <span>{ Obj.get(this.labels, value, value) }</span>
+            </div>
+        );
+    },
+
+    renderHandles()
+    {
+        let values = Arr.clone(this.tempValue);
+
+        if ( ! this.range ) {
+            delete values[0];
+        }
+
+        return Arr.each(values, (value, index) => {
+            return this.ctor('renderHandle')(value, index);
+        });
+    },
+
+    renderBar()
+    {
+        let barProps = {
+            style: this.getBarStyle()
+        };
+
+        return (
+            <div class="n-slider__bar">
+                <div class="n-slider__range" {...barProps}></div>
+            </div>
+        );
+    },
+
+    render()
+    {
+        let classList = [
+            'n-slider',
+            'n-slider--' + this.size
+        ];
+
+        if ( this.range ) {
+            classList.push('n-range');
+        }
+
+        if ( this.disabled ) {
+            classList.push('n-disabled');
+        }
+
+        return (
+            <div class={classList}>
+                { this.ctor('renderBar')() }
+                { this.ctor('renderHandles')() }
+            </div>
+        );
+    }
+
+}

package/src/slider/src/slider/slider.scss

@@ -0,0 +1,93 @@
+@import "../../../root/vars";
+
+.n-slider {
+    position: relative;
+    width: 100%;
+}
+
+.n-slider__bar {
+    z-index: 1;
+    position: absolute;
+    overflow: hidden;
+    top: 50%;
+    left: 0;
+    right: 0;
+    margin-top: -3px;
+    height: 6px;
+    background: $color-gray-10;
+    border-radius: 500px;
+}
+
+.n-slider__range {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: $color-primary;
+}
+
+.n-slider__handle {
+    cursor: grab;
+    z-index: 2;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    margin: -10px 0 0 -10px;
+    background: $color-white;
+    border: 2px solid $color-primary;
+    border-radius: 500px;
+}
+
+.n-slider__handle span {
+    pointer-events: none;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    padding: 4px 8px;
+    border-radius: 3px;
+    font-size: 13px;
+    display: inline-block;
+    opacity: 0;
+    color: $color-white;
+    transform: translate(-50%, -25%);
+    background: rgba($color-black, 0.8);
+    transition: opacity 0.3s;
+}
+
+.n-slider__handle:hover span,
+.n-slider__handle.n-move span {
+    opacity: 1;
+}
+
+@each $suffix, $values in $form {
+
+    $-slider-font: map-get($values, 'font');
+    $-slider-size: map-get($values, 'size');
+    $-slider-radius: map-get($values, 'radius');
+    $-slider-ratio: map-get($values, 'ratio');
+
+    .n-slider--#{$suffix} {
+        height: 32px;
+    }
+
+    .n-slider--#{$suffix} .n-slider__bar {
+        margin-top: -#{$-slider-size * 0.1};
+        height: $-slider-size * 0.2;
+    }
+
+    .n-slider--#{$suffix} .n-slider__handle {
+        width: $-slider-size * 0.6;
+        height: $-slider-size * 0.6;
+        margin: -#{$-slider-size * 0.3} 0 0 -#{$-slider-size * 0.3};
+    }
+
+    .n-slider--#{$suffix} .n-slider__handle span {
+        padding: $-slider-size * 0.15 $-slider-size * 0.3;
+        border-radius: $-slider-radius;
+        font-size: $-slider-font - 2;
+    }
+
+}

package/src/table/src/table-cell/table-cell.js

@@ -54,18 +54,18 @@ export default {
 
     data()
     {
-        return { init: true };
+        return { init: false };
     },
 
-    // mounted()
-    // {
-    //     this.timer = setTimeout(() => this.init = true, 5);
-    // },
-    //
-    // beforeUnmount()
-    // {
-    //     clearTimeout(this.timer);
-    // },
+    mounted()
+    {
+        this.timer = setTimeout(() => this.init = true, 20);
+    },
+
+    beforeUnmount()
+    {
+        clearTimeout(this.timer);
+    },
 
     methods: {
 

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

@@ -99,7 +99,7 @@ export default {
         framerate: {
             default()
             {
-                return 60;
+                return 65;
             },
             type: [Number]
         },