Merge branch 'develop' of ***REMOVED*** into develop

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.

demo/components/advanceTableDemo.vue

@@ -571,7 +571,14 @@ export default {
             :on-change="onChange"
             :search="search"
             :pagination="{ total: data.length, limit: 10 }"
-          />
+          >
+            <div slot="table-operation">
+              custom
+            </div>
+            <div slot="table-operation-search-right">
+              right custom
+            </div>
+          </n-advance-table>
         </div>
         <div class="n-doc-section__source">
           <textarea>
@@ -804,7 +811,19 @@ export default {
           }, {
             label: '15',
             value: 15
-          }],
+          }, {
+            label: '16',
+            value: 16
+          }, {
+            label: '17',
+            value: 17
+          }, {
+            label: '18',
+            value: 18
+          }, {
+            label: '19',
+            value: 19
+          } ],
           onFilter: (value, record) => {
             return value.includes(record.age)
             // switch (value) {

demo/debugComponents/scrollbarDebug/case1.demo.vue

@@ -9,7 +9,7 @@
     >
       <!--EXAMPLE_START-->
       <div style="width: 400px; height: 300px;">
-        <n-scrollbar>
+        <n-scrollbar style="max-height: 200px;">
           <div style="background: linear-gradient(red, blue); width: 800px; height: 500px;">
             666
           </div>

demo/debugComponents/scrollbarDebug/index.vue

@@ -9,17 +9,17 @@
       </n-gradient-text>
     </div>
     <div class="n-doc-body">
-      <scaffold />
+      <case1 />
     </div>
   </div>
 </template>
 
 <script>
-import scaffold from './scaffold.demo.vue'
+import case1 from './case1.demo.vue'
 
 export default {
   components: {
-    scaffold
+    case1
   },
   data () {
     return {

demo/debugComponents/scrollbarDebug2/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <div style="height: 10px; width: 100%; background-color: red; min-width: 1000px;" />
+    <case2 />
+  </div>
+</template>
+
+<script>
+import case2 from './case2.demo.vue'
+
+export default {
+  components: {
+    case2
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+  }
+}
+</script>

demo/demo.vue

@@ -195,6 +195,10 @@ export default {
             {
               name: 'ScrollbarDebug',
               path: '/n-scrollbar-debug'
+            },
+            {
+              name: 'ScrollbarDebug2',
+              path: '/n-scrollbar-debug2'
             }
           ]
         }

demo/index.js

@@ -34,6 +34,7 @@ import timePickerDemo from './components/timePickerDemo'
 import confirmDemo from './components/confirmDemo'
 
 import scrollbarDebug from './debugComponents/scrollbarDebug'
+import scrollbarDebug2 from './debugComponents/scrollbarDebug2'
 import badgeDemo from './components/badgeDemo'
 import stepsDemo from './components/stepsDemo'
 import notificationDemo from './components/notificationDemo'
@@ -107,7 +108,9 @@ const routes = [
       { path: '/n-collapse', component: collapseDemo },
       { path: '/n-progress', component: progressDemo },
       { path: '/n-tag', component: tagDemo },
-      { path: '/n-timeline', component: timelineDemo }
+      { path: '/n-timeline', component: timelineDemo },
+      { path: '/n-scrollbar-debug2', component: scrollbarDebug2 }
+
     ]
   },
   {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.2.81",
+  "version": "0.2.82",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/AdvanceTable/filterDropDown/index.vue

@@ -1,6 +1,9 @@
 <template>
   <filterIcon :status="filterStatus">
-    <ul class="n-table-filter-item">
+    <!-- <n-scrollbar> -->
+    <ul
+      class="n-table-filter-item"
+    >
       <li
         v-for="(item, idx) in items"
         :key="item.value"
@@ -15,6 +18,7 @@
         />
       </li>
     </ul>
+    <!-- </n-scrollbar> -->
   </filterIcon>
 </template>
 
@@ -27,6 +31,10 @@ export default {
     filterIcon
   },
   props: {
+    maxHeight: {
+      type: [String, Number],
+      default: 27 * 3
+    },
     filterItems: {
       type: Array,
       default: () => []
@@ -56,6 +64,14 @@ export default {
     }
   },
   computed: {
+    dropDownContent () {
+      let stl = {}
+      if (this.maxHeight !== 'unset') {
+        let maxHeight = typeof this.maxHeight === 'string' ? this.maxHeight : this.maxHeight + 'px'
+        stl.maxHeight = maxHeight
+      }
+      return stl
+    },
     filterStatus () {
       return !!this.emitData
     },
@@ -144,12 +160,38 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+// .n-table-filter-item {
+
+//   &::-webkit-scrollbar {
+//     width: 5px;
+//   }
+//   &::-webkit-scrollbar-track {
+//     background: transparent;
+//   }
+//   &::-webkit-scrollbar-thumb {
+//     background: rgba(255, 255, 255, 0.2);
+//     border-radius: 2.5px;
+//   }
+//   &::-webkit-scrollbar-thumb:hover {
+//     background: rgba(255, 255, 255, 0.3);
+//   }
+//   &::-webkit-scrollbar-corner {
+//     background: transparent;
+//   }
+//   &::-webkit-scrollbar:horizontal {
+//     height: 5px;
+//   }
+// }
+</style>
 
 <style scoped>
+
 .n-table-filter-item {
   margin: 0;
   padding: 0;
   border-radius: 6px;
+  /* overflow-y: scroll; */
 }
 .n-table-filter-item li:first-of-type {
   border-top-left-radius: 6px;

packages/common/AdvanceTable/src/main.vue

@@ -4,20 +4,27 @@
     class="n-advance-tabel__wrapper"
   >
     <div class="n-advance-table__operation">
-      <section class="n-advance-table__operation__bacth" />
-      <div class="n-advance-table__operation__custom">
-        <slot name="table-operation" />
+      <div class="n-advance-table__operation__left">
+        <slot name="table-operation-batch-left" />
+        <section class="n-advance-table__operation__bacth" />
+        <slot name="table-operation-batch-right" />
       </div>
       <div
-        v-if="search"
-        class="n-advance-table__operation__search"
+        class="n-advance-table__operation__right"
+        :style="search?'margin-bottom: 18px;':''"
       >
-        <searchInput
-          ref="search"
-          style=" margin-bottom: 18px;"
-          :options="search"
-          @on-change="handleSearch"
-        />
+        <slot name="table-operation" />
+        <div
+          v-if="search"
+          class="n-advance-table__operation__search"
+        >
+          <searchInput
+            ref="search"
+            :options="search"
+            @on-change="handleSearch"
+          />
+        </div>
+        <slot name="table-operation-search-right" />
       </div>
     </div>
     <n-table
@@ -65,6 +72,7 @@
             <filterDropDown
               v-if="column.filterItems && !column.filterDropdown"
               :ref="'filterDropDown_' + (column.key || i)"
+              :max-height="column.filterDropDownMaxHeight"
               :filter-fn="column.onFilter"
               :filter-key="column.key || i"
               :filter-items="column.filterItems"

packages/common/Scrollbar/src/main.vue

@@ -1,9 +1,6 @@
 <template>
   <div
     class="n-scrollbar"
-    :style="maxHeight === null ? {} : {
-      maxHeight: maxHeight + 'px'
-    }"
     @mouseenter="enterScrollWrapper"
     @mouseleave="leaveScrollWrapper"
     @dragstart.capture="handleDragStart"
@@ -11,9 +8,6 @@
     <div
       ref="scrollContainer"
       class="n-scrollbar-container"
-      :style="maxHeight === null ? {} : {
-        maxHeight: maxHeight + 'px'
-      }"
       @scroll="handleScroll"
     >
       <div
@@ -54,7 +48,8 @@
           :style="{
             height: scrollbarSize,
             width: horizontalScrollbarWidthPx,
-            left: horizontalScrollbarLeftPx
+            left: horizontalScrollbarLeftPx,
+            borderRadius: scrollbarBorderRadius
           }"
           @mousedown="handleHorizontalScrollMouseDown"
           @mouseup="handleHorizontalScrollMouseUp"
@@ -77,10 +72,6 @@ export default {
     duration: {
       type: Number,
       default: 0
-    },
-    maxHeight: {
-      type: Number,
-      default: null
     }
   },
   data () {

packages/nimbus/ServiceLayout/src/main.vue

@@ -40,7 +40,7 @@
             <div
               v-if="!item.childItems"
               class="n-nimbus-service-layout-drawer__item"
-              :class="{ 'n-nimbus-service-layout-drawer__item--active': activeItemName === item.name }"
+              :class="{ 'n-nimbus-service-layout-drawer__item--active': activeItemPath === item.path }"
               @click="makeActive(item)"
             >
               <div class="n-nimbus-service-layout-drawer-item__icon" />
@@ -52,7 +52,7 @@
               <div
                 class="n-nimbus-service-layout-drawer__item n-nimbus-service-layout-drawer__item--is-group-header"
                 :class="{
-                  'n-nimbus-service-layout-drawer__item--group-item-is-choosed': !!(1 + item.childItems.findIndex(item => item.name === activeItemName)),
+                  'n-nimbus-service-layout-drawer__item--group-item-is-choosed': !!(1 + item.childItems.findIndex(item => item.name === activeItemPath)),
                   'n-nimbus-service-layout-drawer__item--collapsed': item.isCollapsed
                 }"
                 @click="toggleGroupHeaderCollapse(item.name)"
@@ -74,7 +74,7 @@
                     v-for="childItem in item.childItems"
                     :key="childItem.name"
                     class="n-nimbus-service-layout-drawer__item n-nimbus-service-layout-drawer__item--is-group-item"
-                    :class="{ 'n-nimbus-service-layout-drawer__item--active': activeItemName === childItem.name }"
+                    :class="{ 'n-nimbus-service-layout-drawer__item--active': activeItemPath === childItem.path }"
                     @click="makeActive(childItem)"
                   >
                     <span>{{ childItem.name }}</span>
@@ -124,7 +124,7 @@ export default {
   data () {
     return {
       isCollapsed: false,
-      activeItemName: '',
+      activeItemPath: null,
       itemsWithCollapseStatus: this.items.map(item => ({
         ...item,
         isCollapsed: false
@@ -150,13 +150,13 @@ export default {
     syncActiveItemWithPath (path) {
       for (const item of this.items) {
         if (item.path === path) {
-          this.activeItemName = item.name
+          this.activeItemPath = item.path
           return
         }
         if (item.childItems) {
           for (const childItem of item.childItems) {
             if (childItem.path === path) {
-              this.activeItemName = childItem.name
+              this.activeItemPath = childItem.path
               return
             }
           }
@@ -167,7 +167,7 @@ export default {
       this.isCollapsed = !this.isCollapsed
     },
     makeActive (item) {
-      this.activeItemName = item.name
+      this.activeItemPath = item.path
       this.$emit('input', item.name)
       if (this.$router) {
         this.$router.push(item.path)

styles/AdvancedTable.scss

@@ -63,7 +63,11 @@
   }
   .n-advance-table__operation {
     display: flex;
-    justify-content: space-between;
+    justify-content:space-between;
+  }
+  .n-advance-table__operation__right {
+    display: flex;
+    align-items: center;
   }
   .n-no-data-tip {
     padding: 5px;

styles/Scrollbar.scss

@@ -44,6 +44,7 @@
   width: 100%;
   overflow: scroll;
   height: 100%;
+  max-height: inherit;
   scrollbar-width: none;
   &::-webkit-scrollbar {
     width: 0;