@kizmann/nano-ui 1.1.4 → 2.0.1

package/src/scrollbar/src/scrollbar/scrollbar.jsx

@@ -1,4 +1,4 @@
-import { Arr, Obj, Dom, Any, Str, Event, UUID } from "@kizmann/pico-js";
+import { Run, Arr, Obj, Dom, Mix, Str, Event, Hash } from "@kizmann/pico-js";
 
 export default {
 
@@ -101,7 +101,7 @@ export default {
     data()
     {
         return {
-            uid: UUID(), init: false, native: false, height: 0, width: 0
+            uid: Hash.uuid(), init: false, native: false, height: 0, width: 0
         };
     },
 
@@ -172,7 +172,7 @@ export default {
                 width: Math.round(rect.width), height: Math.round(rect.height)
             };
 
-            if ( Any.isEqual(this.state, now) ) {
+            if ( Mix.isEqual(this.state, now) ) {
                 return;
             }
 
@@ -200,7 +200,7 @@ export default {
                     Math.round(this.$refs.wrapper.getBoundingClientRect().height)
                 ];
 
-                Dom.find(this.$el).removeClass('is-paused');
+                Dom.find(this.$el).remClass('is-paused');
             });
 
             let outer = {
@@ -212,7 +212,7 @@ export default {
                 width === this.width, height === this.height
             ]
 
-            if ( ! Arr.has(rainbow, true) && Any.isEqual(this.outer, outer) ) {
+            if ( ! Arr.has(rainbow, true) && Mix.isEqual(this.outer, outer) ) {
                 return;
             }
 
@@ -242,7 +242,7 @@ export default {
                 styles.height = this.height + 'px';
             }
 
-            Dom.find(this.$refs.spacer).css(styles);
+            Dom.find(this.$refs.spacer).style(styles);
 
             this.adaptScrollHeight();
             this.adaptScrollWidth();
@@ -256,11 +256,11 @@ export default {
 
         scrollTo(x = 0, y = 0, delay = 0)
         {
-            if ( Any.isEmpty(delay) ) {
+            if ( Mix.isEmpty(delay) ) {
                 return this.scrollTo(x, y);
             }
 
-            Any.delay(() => this.onScrollTo(x, y), delay);
+            Run.delay(() => this.onScrollTo(x, y), delay);
         },
 
         onScrollTo(x = 0, y = 0)
@@ -277,7 +277,7 @@ export default {
 
         scrollIntoView(selector, delay = 0, padding = 0)
         {
-            Any.delay(() => this.onScrollIntoView(selector, padding), delay);
+            Run.delay(() => this.onScrollIntoView(selector, padding), delay);
         },
 
         onScrollIntoView(selector, padding = 0)
@@ -361,7 +361,7 @@ export default {
             this.heightRatio = (maxHeight - (barHeight - height)
                 - this.offsetY) / maxHeight;
 
-            Dom.find(this.$refs.vbar).css({
+            Dom.find(this.$refs.vbar).style({
                 height: (this.barHeight = Math.ceil(barHeight)) + 'px'
             });
 
@@ -372,7 +372,7 @@ export default {
             }
 
             if ( !this.hasVtrack ) {
-                Dom.find(this.$el).removeClass('has-vtrack');
+                Dom.find(this.$el).remClass('has-vtrack');
             }
 
             this.adaptScrollPosition();
@@ -411,7 +411,7 @@ export default {
             this.widthRatio = (maxWidth - (barWidth - width)
                 - this.offsetX) / maxWidth;
 
-            Dom.find(this.$refs.hbar).css({
+            Dom.find(this.$refs.hbar).style({
                 width: (this.barWidth = Math.ceil(barWidth)) + 'px'
             });
 
@@ -422,7 +422,7 @@ export default {
             }
 
             if ( !this.hasHtrack ) {
-                Dom.find(this.$el).removeClass('has-htrack');
+                Dom.find(this.$el).remClass('has-htrack');
             }
 
             this.adaptScrollPosition();
@@ -447,7 +447,7 @@ export default {
 
             if ( !this.vbarTop || vbarTop !== this.vbarTop ) {
 
-                Dom.find(this.$refs.vbar).css({
+                Dom.find(this.$refs.vbar).style({
                     transform: `translateY(${vbarTop}px) translateZ(0)`
                 });
 
@@ -459,7 +459,7 @@ export default {
 
             if ( !this.hbarLeft || hbarLeft !== this.hbarLeft ) {
 
-                Dom.find(this.$refs.hbar).css({
+                Dom.find(this.$refs.hbar).style({
                     transform: `translateX(${hbarLeft}px) translateZ(0)`
                 });
 
@@ -541,7 +541,7 @@ export default {
             Dom.find(document).off(this.mouseup,
                 null, this._.uid);
 
-            Dom.find(this.$refs.vbar).removeClass('is-active');
+            Dom.find(this.$refs.vbar).remClass('is-active');
         },
 
         onHbarMousedown(event)
@@ -593,7 +593,7 @@ export default {
             Dom.find(document).off(this.mouseup,
                 null, this._.uid);
 
-            Dom.find(this.$refs.hbar).removeClass('is-active');
+            Dom.find(this.$refs.hbar).remClass('is-active');
         },
 
     },

package/src/select/src/select/select.jsx

@@ -1,4 +1,4 @@
-import { Str, Arr, Obj, Any, Locale, Dom, Num } from "@kizmann/pico-js";
+import { Str, Arr, Obj, Mix, Locale, Dom, Num } from "@kizmann/pico-js";
 
 export default {
 
@@ -184,14 +184,14 @@ export default {
 
         empty()
         {
-            return Any.isEmpty(this.tempValue);
+            return Mix.isEmpty(this.tempValue);
         },
 
         custom()
         {
             let result = Arr.filter(this.elements, (element) => {
 
-                if ( Any.isArray(this.tempValue) ) {
+                if ( Mix.isArray(this.tempValue) ) {
                     return Arr.has(this.tempValue, element.value);
                 }
 
@@ -222,11 +222,11 @@ export default {
             this.generateOptions();
         }
 
-        if ( this.multiple && !Any.isArray(this.tempValue) ) {
+        if ( this.multiple && !Mix.isArray(this.tempValue) ) {
             this.tempValue = [];
         }
 
-        if ( this.multiple && !Any.isArray(this.clearValue) ) {
+        if ( this.multiple && !Mix.isArray(this.clearValue) ) {
             this.tempClear = [];
         }
 
@@ -244,11 +244,11 @@ export default {
 
         modelValue(value)
         {
-            if ( !this.multiple && Any.isArray(value) ) {
+            if ( !this.multiple && Mix.isArray(value) ) {
                 value = null;
             }
 
-            if ( this.multiple && !Any.isArray(value) ) {
+            if ( this.multiple && !Mix.isArray(value) ) {
                 value = [];
             }
 
@@ -368,20 +368,20 @@ export default {
         {
             this.index = - 1;
 
-            if ( Any.isEmpty(this.search) ) {
+            if ( Mix.isEmpty(this.search) ) {
                 return this.searched = this.elements;
             }
 
             let searchRegex = new RegExp(this.search, 'i');
 
             this.searched = Arr.filter(this.elements, (option) => {
-                return Any.string(option.label || '').match(searchRegex);
+                return Mix.string(option.label || '').match(searchRegex);
             });
         },
 
         toggleOption(value, event = null)
         {
-            if ( Any.isEmpty(value) ) {
+            if ( Mix.isEmpty(value) ) {
                 return;
             }
 
@@ -411,11 +411,11 @@ export default {
 
             let denyUpdate = this.tempValue === tempValue;
 
-            if ( this.multiple && !Any.isArray(this.modelValue) ) {
+            if ( this.multiple && !Mix.isArray(this.modelValue) ) {
                 denyUpdate = false;
             }
 
-            if ( !this.multiple && Any.isArray(this.modelValue) ) {
+            if ( !this.multiple && Mix.isArray(this.modelValue) ) {
                 denyUpdate = false;
             }
 
@@ -526,7 +526,7 @@ export default {
 
             let value = this.tempValue;
 
-            if ( Any.isArray(this.tempValue) ) {
+            if ( Mix.isArray(this.tempValue) ) {
                 value = Arr.first(this.tempValue);
             }
 
@@ -557,7 +557,7 @@ export default {
 
     renderLabelClear()
     {
-        if ( !this.clearable || Any.isEmpty(this.tempValue) ) {
+        if ( !this.clearable || Mix.isEmpty(this.tempValue) ) {
             return null;
         }
 
@@ -637,7 +637,7 @@ export default {
 
     renderLabelItems()
     {
-        if ( !Any.isArray(this.tempValue) ) {
+        if ( !Mix.isArray(this.tempValue) ) {
             return null;
         }
 
@@ -652,8 +652,8 @@ export default {
 
     renderMultiple()
     {
-        let isEmptyValue = Any.isEmpty(this.tempValue) &&
-            !Any.isNumber(this.tempValue);
+        let isEmptyValue = Mix.isEmpty(this.tempValue) &&
+            !Mix.isNumber(this.tempValue);
 
         let props = {
             value: this.search,
@@ -691,8 +691,8 @@ export default {
 
     renderSingle()
     {
-        let isEmptyValue = Any.isEmpty(this.tempValue) &&
-            !Any.isNumber(this.tempValue);
+        let isEmptyValue = Mix.isEmpty(this.tempValue) &&
+            !Mix.isNumber(this.tempValue);
 
         let modelLabel = this.getOptionLabel(
             this.tempValue);
@@ -780,7 +780,7 @@ export default {
 
         return (
             <NScrollbar ref="scrollbar" class="n-popover-shadow n-select__body" {...props}>
-                {Obj.values(options)}
+                {Mix.vals(options)}
             </NScrollbar>
         );
     },
@@ -803,7 +803,7 @@ export default {
             classList.push('n-active');
         }
 
-        if ( this.index === Num.int(index) ) {
+        if ( this.index === Mix.int(index) ) {
             classList.push('n-focus');
         }
 
@@ -877,7 +877,7 @@ export default {
             return null;
         }
 
-        if ( Any.isEmpty(this.options) ) {
+        if ( Mix.isEmpty(this.options) ) {
             return this.$slots.default && this.$slots.default();
         }
 
@@ -891,7 +891,7 @@ export default {
             return (<NSelectOption {...props}></NSelectOption>);
         };
 
-        return Obj.values(Obj.each(this.options, optionRender));
+        return Arr.each(this.options, optionRender);
     },
 
     render()
@@ -902,8 +902,8 @@ export default {
             'n-select--' + this.size,
         ];
 
-        let isEmptyValue = Any.isEmpty(this.tempValue) &&
-            !Any.isNumber(this.tempValue);
+        let isEmptyValue = Mix.isEmpty(this.tempValue) &&
+            !Mix.isNumber(this.tempValue);
 
         if ( isEmptyValue ) {
             classList.push('n-empty');

package/src/select/src/select-option/select-option.jsx

@@ -1,4 +1,4 @@
-import { Num, Arr, Obj, Any } from "@kizmann/pico-js";
+import { Num, Arr, Obj, Mix } from "@kizmann/pico-js";
 
 export default {
 
@@ -58,7 +58,7 @@ export default {
 
         tempValue()
         {
-            if ( Any.isEmpty(this.valueProp) ) {
+            if ( Mix.isEmpty(this.valueProp) ) {
                 return this.value;
             }
 
@@ -67,7 +67,7 @@ export default {
 
         tempLabel()
         {
-            if ( Any.isEmpty(this.labelProp) ) {
+            if ( Mix.isEmpty(this.labelProp) ) {
                 return this.label;
             }
 
@@ -129,7 +129,7 @@ export default {
             classList.push('n-active');
         }
 
-        if ( this.NSelect.index === Num.int(index) ) {
+        if ( this.NSelect.index === Mix.int(index) ) {
             classList.push('n-focus');
         }
 

package/src/slider/src/slider/slider.jsx

@@ -1,4 +1,4 @@
-import { Obj, Arr, Any, Num, Dom, Event } from "@kizmann/pico-js";
+import { Obj, Arr, Mix, Num, Dom, Run } from "@kizmann/pico-js";
 
 export default {
 
@@ -94,12 +94,12 @@ export default {
 
         fixmin()
         {
-            return Any.isArray(this.steps) ? Arr.first(this.steps) : this.min;
+            return Mix.isArray(this.steps) ? Arr.first(this.steps) : this.min;
         },
 
         fixmax()
         {
-            return Any.isArray(this.steps) ? Arr.last(this.steps) : this.max;
+            return Mix.isArray(this.steps) ? Arr.last(this.steps) : this.max;
         },
 
         minmax()
@@ -140,7 +140,7 @@ export default {
     mounted()
     {
         Dom.find(window).on('resize',
-            Any.debounce(this.onResize, 500), this._.uid);
+            Run.debounce(this.onResize, 500), this._.uid);
 
         this.onResize();
         this.getPseudoValue();
@@ -163,10 +163,10 @@ export default {
         {
             let value = this.modelValue;
 
-            if ( Any.isNull(value) ) {
+            if ( Mix.isNull(value) ) {
                 value = this.fixmax;
             }
-            if ( ! Any.isArray(value) ) {
+            if ( ! Mix.isArray(value) ) {
                 value = [this.fixmin, value];
             }
 
@@ -212,8 +212,8 @@ export default {
 
         getClosestValue(width)
         {
-            if ( Any.isNumber(this.steps) ) {
-                return Num.round(width / this.steps) * this.steps;
+            if ( Mix.isNumber(this.steps) ) {
+                return Math.round(width / this.steps) * this.steps;
             }
 
             let range = Arr.last(this.steps) -
@@ -254,10 +254,10 @@ export default {
             Dom.find(document.body).addClass('n-move');
 
             Dom.find(document).on(this.mouseup,
-                Any.framerate(this.onMouseup, 60), this._.uid);
+                this.onMouseup, this._.uid);
 
             Dom.find(document).on(this.mousemove,
-                Any.framerate(this.onMousemove, 60), this._.uid);
+                this.onMousemove, this._.uid);
         },
 
         onMousemove(event)
@@ -302,8 +302,8 @@ export default {
             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');
+            Dom.find(this.$el).find(this.selector).remClass('n-move');
+            Dom.find(document.body).remClass('n-move');
 
             this.setModelValue();
         },
@@ -312,6 +312,12 @@ export default {
 
     renderHandle(value, index)
     {
+        if ( value == null ) {
+            return null;
+        }
+
+        let key = Arr.findIndex(this.steps, value);
+
         let handleProps = {
             'data-value': value,
             'data-index': index,
@@ -322,12 +328,12 @@ export default {
             this.onMousedown(event, this.index = index);
         };
 
-        let [key, tooltip] = [
-            Arr.findIndex(this.steps, value), Obj.get(this.labels, key, value)
-        ];
+        handleProps = {
+            ...handleProps, 'data-tooltip': Obj.get(this.labels, key, value)
+        }
 
         return (
-            <div class="n-slider__handle" data-tooltip={tooltip} {...handleProps}>
+            <div class="n-slider__handle" {...handleProps}>
                 <span></span>
             </div>
         );

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

@@ -35,10 +35,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: size('base-hgt-inline', 'calc($ + 6px)');
-    height: size('base-hgt-inline', 'calc($ + 6px)');
-    margin-top: size('base-hgt-inline', 'calc(($ + 6px) * -0.5)');
-    margin-left: size('base-hgt-inline', 'calc(($ + 6px) * -0.5)');
+    width: size('base-hgt-inline');
+    height: size('base-hgt-inline');
+    margin-top: size('base-hgt-inline', 'calc($ * -0.5)');
+    margin-left: size('base-hgt-inline', 'calc($ * -0.5)');
     border-radius: 500px;
 }
 
@@ -49,28 +49,9 @@
 .n-slider__handle span {
     position: relative;
     display: block;
-    width: 8px;
-    height: 8px;
-}
-
-.n-slider__handle span:before,
-.n-slider__handle span:after {
-    content: '\00a0';
-    position: absolute;
-    top: 0;
-    display: block;
-    width: 3px;
-    height: 100%;
+    width: size('base-hgt-inline', 'calc($ - 10px)');
+    height: size('base-hgt-inline', 'calc($ - 10px)');
     border-radius: 500px;
-}
-
-.n-slider__handle span:before {
-    left: 0;
-    background: #fff;
-}
-
-.n-slider__handle span:after {
-    right: 0;
     background: #fff;
 }
 

package/src/switch/src/switch/switch.jsx

@@ -1,4 +1,4 @@
-import { Obj, Any } from "@kizmann/pico-js";
+import { Obj, Mix } from "@kizmann/pico-js";
 
 export default {
 

package/src/table/src/table/table.jsx

@@ -1,4 +1,4 @@
-import { Any, Arr, Obj, Dom, Event, UUID } from "@kizmann/pico-js";
+import { Mix, Arr, Obj, Dom, Event, Hash } from "@kizmann/pico-js";
 
 export default {
 
@@ -304,7 +304,7 @@ export default {
     data()
     {
         return {
-            uid: UUID(),
+            uid: Hash.uuid(),
             elements: [],
             tempVisible: this.visible,
             tempVisibleProps: [],
@@ -351,7 +351,7 @@ export default {
 
         getColumnIndex(column)
         {
-            if ( !Any.isString(column) ) {
+            if ( !Mix.isString(column) ) {
                 column = column['prop'];
             }
 
@@ -361,7 +361,7 @@ export default {
 
         getColumnVisiblity(column)
         {
-            if ( !Any.isString(column) ) {
+            if ( !Mix.isString(column) ) {
                 column = column.prop;
             }
 
@@ -372,11 +372,11 @@ export default {
         {
             let prop = column;
 
-            if ( !Any.isString(prop) ) {
+            if ( !Mix.isString(prop) ) {
                 prop = column.sortProp;
             }
 
-            if ( Any.isEmpty(prop) ) {
+            if ( Mix.isEmpty(prop) ) {
                 prop = column.prop;
             }
 
@@ -391,11 +391,11 @@ export default {
         {
             let prop = column;
 
-            if ( !Any.isString(prop) ) {
+            if ( !Mix.isString(prop) ) {
                 prop = column.filterProp;
             }
 
-            if ( Any.isEmpty(prop) ) {
+            if ( Mix.isEmpty(prop) ) {
                 prop = column.prop;
             }
 
@@ -408,11 +408,11 @@ export default {
         {
             let prop = column;
 
-            if ( !Any.isString(prop) ) {
+            if ( !Mix.isString(prop) ) {
                 prop = column.filterProp;
             }
 
-            if ( Any.isEmpty(prop) ) {
+            if ( Mix.isEmpty(prop) ) {
                 prop = column.prop;
             }
 
@@ -428,8 +428,11 @@ export default {
 
         makeVisibleProps()
         {
-            this.tempVisibleProps = Arr.intersect(
-                Arr.extract(this.elements, 'prop'), this.tempVisible);
+            let args = [
+                Arr.extract(this.elements, 'prop'), this.tempVisible
+            ];
+
+            this.tempVisibleProps = Arr.isect(...args);
 
             this.$nextTick(this.$refs.scrollbar.onResize);
         },
@@ -438,11 +441,11 @@ export default {
         {
             let prop = column;
 
-            if ( !Any.isString(prop) ) {
+            if ( !Mix.isString(prop) ) {
                 prop = column.sortProp;
             }
 
-            if ( Any.isEmpty(prop) ) {
+            if ( Mix.isEmpty(prop) ) {
                 prop = column.prop;
             }
 
@@ -566,7 +569,7 @@ export default {
             return column.disabled ? null : column.ctor('renderBody')(props);
         });
 
-        return Obj.values(columns);
+        return Mix.vals(columns);
     },
 
     renderContext()
@@ -590,7 +593,7 @@ export default {
                     {this.trans('Toggle column visiblity')}
                 </NPopoverGroup>
                 <NCheckboxGroup vModel={this.tempVisible} size="sm" align="vertical">
-                    {Obj.values(columns)}
+                    {Mix.vals(columns)}
                 </NCheckboxGroup>
             </NPopover>
         );
@@ -605,13 +608,13 @@ export default {
             this.ctor('renderContext')()
         ];
 
-        let columns = Obj.each(this.elements, (column) => {
+        let columns = Arr.each(this.elements, (column) => {
             return column.disabled ? null : column.ctor('renderHead')();
         });
 
         return (
             <div class="n-table__header">
-                {defaultRender} {Obj.values(columns)}
+                {defaultRender} {columns}
             </div>
         );
     },

package/src/table/src/table-cell/types/table-cell-boolean.jsx

@@ -1,5 +1,5 @@
 import TableCell from "../table-cell.jsx";
-import { Any } from "@kizmann/pico-js";
+import { Str } from "@kizmann/pico-js";
 
 export default {
 
@@ -21,7 +21,7 @@ export default {
 
         return (
             <div>
-                <span>{ Any.convertBoolean(this.input, this.column.trueText, this.column.falseText) }</span>
+                <span>{ Str.boolean(this.input, this.column.trueText, this.column.falseText) }</span>
             </div>
         );
     }

package/src/table/src/table-cell/types/table-cell-datetime.jsx

@@ -1,5 +1,5 @@
 import TableCell from "../table-cell.jsx";
-import { Any } from "@kizmann/pico-js";
+import { Str } from "@kizmann/pico-js";
 
 export default {
 
@@ -21,7 +21,7 @@ export default {
 
         return (
             <div>
-                <span>{ Any.convertDatetime(this.input, this.column.datetimeFormat, this.column.emptyText) }</span>
+                <span>{ Str.datetime(this.input, this.column.datetimeFormat, this.column.emptyText) }</span>
             </div>
         );
     }

package/src/table/src/table-cell/types/table-cell-image.jsx

@@ -1,5 +1,5 @@
 import TableCell from "../table-cell.jsx";
-import { Obj, Any } from "@kizmann/pico-js";
+import { Obj, Mix } from "@kizmann/pico-js";
 
 export default {