@kizmann/nano-ui 1.0.14 → 1.1.0

package/src/scrollbar/src/scrollbar-next/scrollbar-next.scss

@@ -0,0 +1,148 @@
+@import "../../../root/vars";
+
+.n-scrollbar-next {
+    position: relative;
+    overflow: hidden;
+}
+
+.n-scrollbar-next-test {
+    opacity: 0;
+    position: fixed;
+    width: 15px;
+    height: 15px;
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+
+.n-scrollbar-next-test > div {
+    width: 16px;
+    height: 16px;
+}
+
+.n-scrollbar-next-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+
+.n-scrollbar-next:not(.n-scrollbar-next--native) > .n-scrollbar-next-content {
+    right: -15px;
+    bottom: -15px;
+}
+
+.n-scrollbar-next.n-windows:not(.n-scrollbar-next--native) > .n-scrollbar-next-content {
+    right: -17px;
+    bottom: -17px;
+}
+
+.n-scrollbar-next.n-scrollbar-next--forced.n-scrollbar-next--native > .n-scrollbar-next-content {
+    padding-right: 16px;
+    padding-bottom: 16px;
+    right: -16px;
+    bottom: -16px;
+}
+
+.n-scrollbar-next:not(.n-overflow-x) > .n-scrollbar-next-content {
+    bottom: 0;
+    overflow-x: hidden;
+}
+
+.n-scrollbar-next:not(.n-overflow-y) > .n-scrollbar-next-content {
+    right: 0;
+    overflow-y: hidden;
+}
+
+.n-scrollbar-next > .n-scrollbar-next-content > .n-scrollbar-next__wrap {
+    position: relative;
+}
+
+.n-scrollbar-next-v,
+.n-scrollbar-next-h {
+    cursor: default;
+    position: absolute;
+    z-index: 100;
+    user-select: none;
+}
+
+.n-scrollbar-next-v {
+    top: 0;
+    right: 0;
+    width: 14px;
+
+}
+
+.n-scrollbar-next-h {
+    left: 0;
+    bottom: 0;
+    height: 14px;
+}
+
+.n-scrollbar-next--native:not(.n-scrollbar-next--forced) > .n-scrollbar-next-v,
+.n-scrollbar-next:not(.has-vtrack) > .n-scrollbar-next-v,
+.n-scrollbar-next--native:not(.n-scrollbar-next--forced) > .n-scrollbar-next-h,
+.n-scrollbar-next:not(.has-htrack) > .n-scrollbar-next-h {
+    display: none;
+}
+
+.n-scrollbar-next-v:before,
+.n-scrollbar-next-h:before {
+    content: '\00a0';
+    position: absolute;
+    display: block;
+    border-radius: 500px;
+    opacity: 0;
+    transition: opacity 0.15s;
+    background: rgba(0, 255, 0, 0.4);
+}
+
+.n-scrollbar-next-v:before {
+    top: 2px;
+    bottom: 2px;
+    left: 5px;
+    right: 5px;
+}
+
+.n-scrollbar-next-h:before {
+    top: 5px;
+    bottom: 5px;
+    left: 2px;
+    right: 2px;
+}
+
+.n-scrollbar-next-v:after,
+.n-scrollbar-next-h:after {
+    content: '\00a0';
+    position: absolute;
+    top: 2px;
+    bottom: 2px;
+    left: 2px;
+    right: 2px;
+    display: block;
+    border-radius: 500px;
+    opacity: 0;
+    transition: opacity 0.15s;
+    background: rgba(255, 0, 0, 0.4);
+}
+
+.n-scrollbar-next-v.is-active:after,
+.n-scrollbar-next-h.is-active:after,
+.n-scrollbar-next-v:hover:after,
+.n-scrollbar-next-h:hover:after {
+    opacity: 1;
+}
+
+.n-scrollbar-next.has-vtrack > .n-scrollbar-next-v.is-active:before,
+.n-scrollbar-next.has-htrack > .n-scrollbar-next-h.is-active:before,
+.n-scrollbar-next.has-vtrack:hover > .n-scrollbar-next-v:before,
+.n-scrollbar-next.has-htrack:hover > .n-scrollbar-next-h:before {
+    opacity: 1;
+}
+
+.n-scrollbar-next--touch.has-vtrack > .n-scrollbar-next-v:before,
+.n-scrollbar-next--touch.has-htrack > .n-scrollbar-next-h:before {
+    opacity: 1;
+}

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

@@ -326,8 +326,6 @@ export default {
             if ( !this.focus ) {
                 this.$refs.popover.open();
             }
-
-            clearInterval(this.refresh);
         },
 
         onInputInput(event)
@@ -364,11 +362,9 @@ export default {
 
             let searchRegex = new RegExp(this.search, 'i');
 
-            let searched = Arr.filter(this.elements, (option) => {
-                return Any.isString(option.label) && option.label.match(searchRegex);
+            this.searched = Arr.filter(this.elements, (option) => {
+                return Any.string(option.label || '').match(searchRegex);
             });
-
-            this.searched = searched;
         },
 
         toggleOption(value, event = null)
@@ -505,8 +501,8 @@ export default {
                 this.$refs.scrollbar.scrollIntoView(`[data-option="${selected._.uid}"]`);
             }
 
-            if ( this.$refs.virtualbar ) {
-                this.$refs.virtualbar.scrollToIndex(this.index);
+            if ( this.$refs.virtualscroll ) {
+                this.$refs.virtualscroll.scrollToIndex(this.index);
             }
         },
 
@@ -534,14 +530,14 @@ export default {
                 return;
             }
 
-            if ( this.$refs.virtualbar ) {
-                this.$refs.virtualbar.scrollToIndex(index, 250);
+            if ( this.$refs.virtualscroll ) {
+                this.$refs.virtualscroll.scrollToIndex(index, 0);
             }
 
             let select = `[data-option="${Obj.get(this.elements[index], '_.uid', 0)}"]`;
 
             if ( this.$refs.scrollbar ) {
-                this.$refs.scrollbar.scrollIntoView(select, 250);
+                this.$refs.scrollbar.scrollIntoView(select, 0);
             }
         }
 
@@ -758,7 +754,7 @@ export default {
             return emptyHtml;
         }
 
-        if ( this.lazy ) {
+        if ( this.lazy || true ) {
             return this.ctor('renderLazyItems')();
         }
 
@@ -767,8 +763,8 @@ export default {
         });
 
         let props = {
-            relative: true, size: this.size
-        }
+            size: this.size
+        };
 
         return (
             <NScrollbar ref="scrollbar" class="n-select__body" {...props}>
@@ -822,7 +818,7 @@ export default {
     renderLazyItems()
     {
         let props = {
-            items: this.searched
+            items: this.searched, offsetY: 0
         };
 
         props.renderNode = ({ value, index }) => {
@@ -830,7 +826,7 @@ export default {
         };
 
         return (
-            <NVirtualscroller ref="virtualbar" class="n-select__body n-virtual" {...props} />
+            <NVirtualscroller ref="virtualscroll" class="n-select__body n-virtual" {...props} />
         );
     },
 

package/src/select/src/select/select.scss

@@ -119,7 +119,7 @@
 }
 
 .n-select__body.n-virtual {
-    min-height: 210px;
+    //min-height: 210px;
 }
 
  .n-select__empty {

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

@@ -262,7 +262,7 @@ export default {
         useKeys: {
             default()
             {
-                return false;
+                return true;
             },
             type: [Boolean]
         },
@@ -616,8 +616,7 @@ export default {
     render()
     {
         let except = [
-            'visible', 'filter', 'sortProp',
-            'sortDir', 'closeFilterOnEnter'
+            'visible', 'filter', 'sortProp', 'sortDir', 'closeFilterOnEnter'
         ];
 
         let props = Obj.except(this.$props, except, {
@@ -662,10 +661,8 @@ export default {
 
         return (
             <div class="n-table">
-                <NScrollbar ref="scrollbar" class="n-table__wrap" fixture={true} overflowY={false}>
-                    <div class="n-table__inner">
-                        {[this.ctor('renderHead')(), draggableHtml]}
-                    </div>
+                <NScrollbar ref="scrollbar" wrapClass="n-table__wrap" overflowY={false}>
+                    {[this.ctor('renderHead')(), draggableHtml]}
                 </NScrollbar>
                 {this.$slots.default && this.$slots.default()}
             </div>

package/src/table/src/table/table.scss

@@ -6,7 +6,6 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    border-radius: $md-radius + 2;
 }
 
 .n-table:before {
@@ -20,22 +19,23 @@
     background: transparent;
     z-index: 50;
     pointer-events: none;
-    border-radius: $md-radius + 2;
     border: 1px solid transparent;
 }
 
+.n-table > .n-scrollbar {
+    flex: 1 1 auto;
+}
+
 .n-table .n-table__header {
-    border-radius: $md-radius + 2 $md-radius + 2 0 0;
+    display: inline-flex;
 }
 
-.n-table .n-table__wrap,
-.n-table .n-table__inner,
-.n-table > .n-scrollbar,
-.n-table > .n-scrollbar > .n-scrollbar-content,
-.n-table > .n-scrollbar > .n-scrollbar-content > .n-scrollbar__wrap {
+.n-table .n-table__wrap {
     min-width: 100%;
+    min-height: 0;
+    max-height: 100%;
     flex: 1 1 auto;
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
@@ -54,10 +54,6 @@
     //margin-bottom: -1px;
 }
 
-.n-table__header {
-    margin-left: -1px;
-}
-
 .n-table .n-table__inner {
     position: relative;
 }
@@ -90,6 +86,7 @@
 
 .n-table__body .n-scrollbar {
     flex: 1 1 auto;
+    max-height: 100%;
 }
 
 .n-table__body .n-scrollbar__wrap {
@@ -108,6 +105,10 @@
     display: flex;
     flex-direction: row;
     align-items: stretch;
-    justify-content: stretch;
+    justify-content: flex-start;
     border-bottom: 1px solid transparent;
+}
+
+.n-table .n-fixed {
+    flex: 0 0 auto !important;
 }

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

@@ -33,13 +33,19 @@ export default {
             'n-table-cell--' + this.column.type
         ];
 
-        let props = {
+        let previewProps = {
             fit: 'contain',
-        }
+            index: this.NDraggableItem.index,
+            group: this.column.uid,
+        };
+
+        previewProps['onSlide'] = () => {
+            this.NTable.$refs.draggable.setRawCurrent(this.NDraggableItem.index);
+        };
 
         return (
             <div class={classList}>
-                <NPreview file={this.preview || this.input} thumb={this.input} {...props} />
+                <NPreview file={this.preview || this.input} thumb={this.input} {...previewProps} />
             </div>
         );
     }

package/src/table/src/table-column/table-column.jsx

@@ -174,14 +174,6 @@ export default {
             type: [String]
         },
 
-        fluid: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
         fixedWidth: {
             default()
             {
@@ -353,10 +345,6 @@ export default {
             classList.push('n-sorted', 'n-' + sortDirection);
         }
 
-        if ( this.fluid || !this.width ) {
-            classList.push('n-fluid');
-        }
-
         if ( this.fixedWidth ) {
             classList.push('n-fixed');
         }
@@ -365,35 +353,35 @@ export default {
             classList.push('n-filtered');
         }
 
-        let style = {};
+        let flex = '1 1 auto';
 
-        if ( this.fixedWidth ) {
-            style.width = this.fixedWidth + 'px';
-        }
-
-        if ( this.width ) {
-            style.flexBasis = this.width + 'px';
+        if ( ! Any.isEmpty(this.width) ) {
+            flex = `1 1 ${this.width}`;
         }
 
         let props = {
             modelValue: this.tempWidth,
-            width:      this.width,
+            flex:       flex,
             minWidth:   this.minWidth,
             maxWidth:   this.maxWidth,
             disabled:   !!this.fixedWidth,
-            group:      [this.NTable.uid],
+            group:      ['n-table', this.NTable.uid],
+        };
+
+        props['onUpdateWidth'] = (value) => {
+            this.tempWidth = value;
         };
 
         props['onUpdate:modelValue'] = (value) => {
             this.tempWidth = value;
-        }
+        };
 
         if ( this.sort ) {
             props.onMousedown = this.sortByColumn;
         }
 
         return (
-            <NResizer ref="column" class={classList} style={style} {...props}>
+            <NResizer ref="column" class={classList} {...props}>
                 {this.ctor('renderHeadSort')()}
                 {this.ctor('renderHeadLabel')()}
                 {this.ctor('renderHeadFilter')()}
@@ -472,10 +460,6 @@ export default {
             'n-table-cell--' + this.type,
         ];
 
-        if ( this.fluid ) {
-            classList.push('n-fluid');
-        }
-
         if ( this.tempWidth ) {
             classList.push('n-fixed');
         }

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

@@ -31,7 +31,7 @@ export default {
         return (
             <NForm>
                 <NFormItem>
-                    <NDatepicker size="sm" vModel={this.filter.value} format={this.column.datetimeFormat} />
+                    <NDatepicker size="sm" vModel={this.filter.value} />
                 </NFormItem>
                 <NFormItem>
                     <NSelect size="sm" vModel={this.filter.operator} options={options} />

package/src/tabs/src/tabs-item/tabs-item.jsx

@@ -114,7 +114,7 @@ export default {
 
         return (
             <div class="n-tabs__tab-icon">
-                { this.$slots.icon && this.$slots.icon() || <i class={this.icon}></i> }
+                { this.$slots.icon && this.$slots.icon() || <i class={'n-icon ' + this.icon}></i> }
             </div>
         );
     },

package/src/tags/src/tags-item/tags-item.jsx

@@ -77,7 +77,7 @@ export default {
         }
 
         return (
-            <i class={this.icon}></i>
+            <i class={'n-icon ' + this.icon}></i>
         );
     },
 
@@ -99,7 +99,6 @@ export default {
         let classList = [
             'n-tags-item',
             'n-tags-item--' + size,
-            ,
         ];
 
         if ( this.type === -1 ) {

package/src/timepicker/src/timepicker-panel/timepicker-panel.jsx

@@ -201,8 +201,12 @@ export default {
             return null;
         }
 
+        let scrollbarProps = {
+            offsetY: 0, wrapClass: 'n-timepicker-panel__wrap'
+        };
+
         return (
-            <NScrollbar ref="hour" class="n-timepicker-panel__panel" wrapClass="n-timepicker-panel__wrap">
+            <NScrollbar ref="hour" class="n-timepicker-panel__panel" {...scrollbarProps}>
                 {Arr.each(this.hoursGrid, this.ctor('renderHourItem'))}
             </NScrollbar>
         );
@@ -235,8 +239,12 @@ export default {
             return null;
         }
 
+        let scrollbarProps = {
+            offsetY: 0, wrapClass: 'n-timepicker-panel__wrap'
+        };
+
         return (
-            <NScrollbar ref="minute" class="n-timepicker-panel__panel" wrapClass="n-timepicker-panel__wrap">
+            <NScrollbar ref="minute" class="n-timepicker-panel__panel" {...scrollbarProps}>
                 {Arr.each(this.minutesGrid, this.ctor('renderMinuteItem'))}
             </NScrollbar>
         );
@@ -269,8 +277,12 @@ export default {
             return null;
         }
 
+        let scrollbarProps = {
+            offsetY: 0, wrapClass: 'n-timepicker-panel__wrap'
+        };
+
         return (
-            <NScrollbar ref="second" class="n-timepicker-panel__panel" wrapClass="n-timepicker-panel__wrap">
+            <NScrollbar ref="second" class="n-timepicker-panel__panel" {...scrollbarProps}>
                 {Arr.each(this.secondsGrid, this.ctor('renderSecondItem'))}
             </NScrollbar>
         );

package/src/timepicker/src/timepicker-panel/timepicker-panel.scss

@@ -16,10 +16,11 @@
     flex-direction: row;
     align-items: stretch;
     justify-content: stretch;
+    max-height: 260px;
 }
 
 .n-timepicker-panel__panel {
-flex: 1 0 auto;
+    flex: 1 0 auto;
     min-height: 0;
 }