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

demo/components/advanceTableDemo.vue

@@ -18,6 +18,7 @@
           <n-advance-table
             :columns="columns0"
             :data="data"
+            :row-cls="rowCls"
           >
             <template #table-operation>
               <n-button>custom operation by v-slot:table-operation</n-button>
@@ -29,6 +30,7 @@
 <n-advance-table
   :columns="columns0"
   :data="data"
+  :rowCls="rowCls"
 >
   <template #table-operation>
     <n-button>custom operation by v-slot:table-operation</n-button>
@@ -46,6 +48,7 @@ export default {
       }
     })
     return {
+      rowCls:{'rowGreen': true, 'rowColor': false}, // ['rowGreen', 'rowColor'], 'rowGreen rowColor'
       columns: [
         {
           title: 'Name',
@@ -82,6 +85,11 @@ export default {
   }
 }
 </script>
+<style>
+  .rowGreen:hover {
+  background-color:rgb(37, 109, 85)!important
+}
+</style>
           </textarea>
         </div>
       </div>
@@ -409,6 +417,7 @@ export default {
             max-height="300px"
             :on-change="onChange"
             :pagination="{ total: data.length, limit: 10 }"
+            :loading="loading"
           />
         </div>
         <div class="n-doc-section__source">
@@ -419,6 +428,7 @@ export default {
   max-height="300px"
   :on-change="onChange"
    :pagination="{total:data.length,limit:10}"
+   :loading="loading"
 />
 //
 <script>
@@ -434,6 +444,7 @@ export default {
     })
     console.log(d)
     return {
+      loading:true,
       columns: [
         {
           title: 'Name',
@@ -688,12 +699,12 @@ export default {
           <div class="n-doc-section__view">
             <n-advance-table
               ref="table"
-              :columns="columns3"
+              :columns="columns4"
               :data="data"
               max-height="300px"
               :on-change="onChange1"
               :search="search"
-              :pagination="{ total: data.length, limit: 10 }"
+              :pagination="{ total: count, limit: 10 ,custom:true}"
             />
           </div>
           <div class="n-doc-section__source">
@@ -732,9 +743,56 @@ methods:{
 
 <script>
 import docCodeEditorMixin from './docCodeEditorMixin'
+const _columns3 = ($this) => {
+  return [
+    {
+      title: 'Name',
+      key: 'name',
+      filterMultiple: false,
+      filterItems: $this.filterItems,
+      onFilter: (value, record) => {
+        return value.includes(record.name + '')
+      }
+    },
+    {
+      title: 'Age',
+      key: 'age',
+      sortable: 'custom',
+      filterMultiple: true,
+      filterItems: [{
+        label: '14',
+        value: 14
+      }, {
+        label: '15',
+        value: 15
+      }],
+      onFilter: (value, record) => {
+        return true
+      },
+      render: (h, params) => {
+        return <b>{params.row.age}</b>
+      }
+    },
+    {
+      title: '#',
+      render: (h, params) => {
+        return (
+          <n-button
+            style="margin:0;"
+            size="small"
+            onClick={() => this.handleClick(params)}
+          >
+                delete
+          </n-button>
+        )
+      }
+    }
+  ]
+}
 export default {
   mixins: [docCodeEditorMixin],
   data () {
+    let columns4 = _columns3(this)
     let d = new Array(20).fill(0)
     d = d.map((item, idx) => {
       return {
@@ -744,6 +802,9 @@ export default {
     })
     console.log(d)
     return {
+      loading: false,
+      rowCls: { 'rowGreen': true, 'rowColor': false }, // ['rowGreen', 'rowColor'], 'rowGreen rowColor'
+      count: 0,
       search1: {
         columns: [
           { label: 'Name',
@@ -759,9 +820,7 @@ export default {
           { label: 'Name',
             value: 'name' }
         ],
-        onSearch: (key, word, row) => {
-          return row.name.includes(word)
-        }
+        onSearch: 'custom'
       },
       columns: [
         {
@@ -990,10 +1049,34 @@ export default {
             )
           }
         }
-      ]
+      ],
+      filterItems:
+      [{
+        label: '14',
+        value: 14
+      }, {
+        label: '15',
+        value: 15
+      }]
+    }
+  },
+  computed: {
+    columns4 () {
+      return _columns3(this)
     }
   },
   mounted () {
+    setTimeout(() => {
+      this.count = 80
+      this.filterItems = [
+        {
+          label: 'hahah',
+          value: 1
+        }
+      ]
+    }, 3000)
+    // this.$refs.table.setParams({ page: +this.$route.query.page || 5 })
+
     this.$refs.table.setParams({ filter: { age: [14] }, sorter: { key: 'age', type: -1 }, searcher: { key: 'name', value: 'xiaobai' }, page: 2 })
   },
   methods: {
@@ -1010,6 +1093,10 @@ export default {
     onChange ({ filter, sorter, pagination, search }) {
       alert('remote handler: \n' + JSON.stringify({ sorter, filter, pagination, search }, null, '\t'))
       console.log({ filter, sorter, pagination, search })
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 2000)
       this.data = [{
         name: 'form net',
         age: 0
@@ -1026,4 +1113,10 @@ export default {
 .higher {
   color: blue;
 }
+.rowGreen:hover {
+  background-color:rgb(37, 109, 85)!important
+}
+.rowColor{
+  color:bisque
+}
 </style>

package.json

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

packages/common/AdvanceTable/filterDropDown/index.vue

@@ -93,21 +93,12 @@ export default {
     }
   },
   watch: {
-    checkedIndexs: {
-      handler () {
-        let res = []
-        Object.keys(this.checkedIndexs).forEach((key) => {
-          if (this.checkedIndexs[key].isChecked === true) {
-            let index = this.checkedIndexs[key].index
-            res.push(this.filterItems[index].value)
-          }
-        })
-        res = res.length ? res : null
-        this.emitData = res
-        this.$emit('on-filter', { key: this.filterKey, value: res, filterFn: this.filterFn })
-      },
-      deep: true
-    },
+    // checkedIndexs: {
+    //   handler () {
+
+    //   },
+    //   deep: true
+    // },
     filterItems () {
       const checkedIndexs = {}
       this.filterItems.forEach((item, index) => {
@@ -117,10 +108,23 @@ export default {
     }
   },
   methods: {
+    emitFilter () {
+      let res = []
+      Object.keys(this.checkedIndexs).forEach((key) => {
+        if (this.checkedIndexs[key].isChecked === true) {
+          let index = this.checkedIndexs[key].index
+          res.push(this.filterItems[index].value)
+        }
+      })
+      res = res.length ? res : null
+      this.emitData = res
+      this.$emit('on-filter', { key: this.filterKey, value: res, filterFn: this.filterFn })
+    },
     setCheckedIndexs (arr) {
       arr.forEach(value => {
         this.checkedIndexs[value].isChecked !== undefined && Vue.set(this.checkedIndexs[value], 'isChecked', true)
       })
+      this.emitFilter()
     },
     reset () {
       Object.keys(this.checkedIndexs).forEach((key) => {
@@ -136,7 +140,7 @@ export default {
       !this.filterMultiple && this.reset()
       // this.checkedIndexs[item.value] = !isChecked
       Vue.set(this.checkedIndexs[item.value], 'isChecked', !isChecked)
-
+      this.emitFilter()
       // this.checkedIndexs[item.value] = !isChecked
 
       // if (!this.filterMultiple) {

packages/common/AdvanceTable/loading/index.vue

@@ -0,0 +1,195 @@
+/* eslint-disable vue/no-parsing-error */
+/* eslint-disable vue/no-parsing-error */
+<template>
+  <div class="section_loading"
+       :style="{height:svgCompute.height}">
+    <svg version="1.1"
+         viewBox="-1 -1 102 102"
+         enable-background="new 0 0 200 200"
+         :style="svgCompute"
+         xml:space="preserve">
+      <path id="circle"
+            class="circle"
+            :style="circleCompute"
+            d="M0 50
+            A50 50 0 1 1 100 50
+            A50 50 0 1 1 0   50" />
+      <path id="file"
+            class="file"
+            :d="animationPiece" />
+      <!-- <?
+      <polygon id="folder-top" class="folder-top"
+            points="25,8 25,6 14,6 14,4 5,4 5,8"/>
+      ?>
+      <?
+  <path id="folder-square" class="folder-square"
+        d="M3,10v18h26V10L3,10z M27,26H5V12h22V26z"/>
+  ?>
+      <?<path class="folder-top" d="M5 4 h8 v2 h12 v2 h-20 z"/>?> -->
+    </svg>
+    <h4 id="text">
+      {{ text }}
+    </h4>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    loadingText: {
+      type: [String],
+      default: 'Loading'
+    },
+    circle: {
+      type: [Object],
+      default: function () {
+        return {
+          color: '#63e2b7',
+          time: '1s'
+        }
+      }
+    },
+    svg: {
+      type: [Object],
+      default: function () {
+        return {
+          width: '150px',
+          height: '150px'
+        }
+      }
+    }
+
+  },
+  data () {
+    return {
+      text: this.loadingText,
+      texttime: 400,
+      intervalTextId: '',
+      intervalIconId: '',
+      backwards: false,
+      animationTime: 2000 / 30,
+      counter: 0,
+      circleAnimationTime: '1s',
+      animationPiece: 'M21 2 H5 v28 h22 l0 -22 z M25 28 H7 V4  h12 v6 h6 z',
+      animationchange: ['M21,2H5v28h22l0,-22z M25,28H7V4h12v6h6z', 'M21,2H5v28h22l0,-22z M25,28H7V4h12v6h6z', 'M21,2H5v28h22l0,-22z M25,28H7V4h12v6h6z', 'M21,2H5v28h22l0,-22z M25,28H7V4h12v6h6z', 'M21,2H5v28h22l0,-22z M25,28H7V4h12v6h6z', 'M21,2H5v28h22l0,-22z M25,28H7V4h12v6h6z', 'M21,2H5v28h22l0,-22z M25,28H7V4h12v6h6z', 'M21,2H5v28h22l0,-22z M25,28H7V4h12v6h6z', 'M21,2H5v28h22l0,-22z M25,28H7V4h12v6h6z', 'M21,2H5v28h22l0,-22z M25,28H7V4h12v6h6z', 'M21,2H5v28h22l0,-22z M25,28H7V4h12v6h6z', 'M21,3H5v26h22l0-20L21,3z M25,27H7V5h12v6h6V27z', 'M21,4H5v24h22l0-18L21,4z M25,26H7V6h12v6h6V26z', 'M21,5H5v23h22l0-17L21,5z M25,26H7V7h12v6h6V26z', 'M21,6H5v22h22l0-16L21,6z M25,26H7V8h12v6h6V26z', 'M21,7H5v21h22l0-15L21,7z M25,26H7V9h12v6h6V26z', 'M21,8H5v20h22l0-14L21,8z M25,26H7V10h12v6h6V26z', 'M23,9H5v19h22l0-15L23,9z M25,26H7V11h14v4h4V26z', 'M25,10H5v18h22l0-16L25,10z M25,26H7V12h15v3h3V26z', 'M28,10H4v18h24L28,10L28,10z M26,26H6V12h18v2h2V26z', 'M29,10H3v18h26L29,10L29,10z M27,26H5V12h22l0,0h0V26z', 'M3,10v18h26V10L3,10z M27,26H5V12h22V26z', 'M3,10v18h26V10L3,10z M27,26H5V12h22V26z M5,6h2h2v2h-4z', 'M3,10v18h26V10L3,10z M27,26H5V12h22V26z M5,6h4h4v2h-8z', 'M3,10v18h26V10L3,10z M27,26H5V12h22V26z M5,6h6h6v2h-12z', 'M3,10v18h26V10L3,10z M27,26H5V12h22V26z M5,6h8h8v2h-16z', 'M3,10v18h26V10L3,10z M27,26H5V12h22V26z M5,6h8h12v2h-20z', 'M3,10v18h26V10L3,10z M27,26H5V12h22V26z M5,4h4v2h16v2h-20z', 'M3,10v18h26V10L3,10z M27,26H5V12h22V26z M5,4h8v2h12v2h-20z', 'M3,10v18h26V10L3,10z M27,26H5V12h22V26z M5,4h8v2h12v2h-20z']
+    }
+  },
+  computed: {
+    svgCompute () {
+      return this.svg
+    },
+    circleCompute () {
+      return {
+        'animation-duration': this.circle.time,
+        stroke: this.circle.color
+      }
+    }
+  },
+  mounted () {
+    // clearInterval(this.intervalTextId)
+    // clearInterval(this.intervalIconId)
+    if (!this.intervalTextId) {
+      this.intervalTextId = setInterval(function () {
+        if (this.text.indexOf('...') !== -1) {
+          this.text = this.loadingText
+        } else {
+          this.text = this.text + '.'
+        }
+      }.bind(this), this.texttime)
+    }
+    if (!this.intervalIconId) {
+      this.intervalIconId = setInterval(this.iconAnimation.bind(this), this.animationTime)
+    }
+  },
+  beforeDestroy () {
+    if (this.intervalTextId) {
+      clearInterval(this.intervalTextId)
+      this.intervalTextId = null
+    }
+    if (this.intervalIconId) {
+      clearInterval(this.intervalIconId)
+      this.intervalTextId = null
+    }
+  },
+  methods: {
+    iconAnimation () {
+      if (this.counter === this.animationchange.length) {
+        this.backwards = true
+      } else if (this.counter === 0) {
+        this.backwards = false
+      }
+      if (this.backwards) {
+        this.animationPiece = this.animationchange[this.counter--]
+      } else {
+        this.animationPiece = this.animationchange[this.counter++]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.section_loading {
+  text-align: center;
+  position: relative;
+}
+h4 {
+  font-family: Arial;
+  font-weight: 100;
+  color: #63e2b7;
+  font-size: 12px;
+  position: relative;
+  top: -47%;
+  z-index: 9999;
+  margin-left: 4px;
+  text-align: center;
+}
+svg {
+  width: 150px;
+  height: 150px;
+  display: inline-block;
+  padding: 0px;
+  /*transform:rotate(180deg);
+    -webkit-transform:rotate(180deg);*/
+}
+.file {
+  fill: #63e2b7;
+  position: relative;
+  transform: translate(34px, 28px);
+}
+
+.folder-top {
+  fill: #ffffff;
+  position: relative;
+  transform: translate(34px, 28px);
+}
+
+.folder-square {
+  fill: #ffffff;
+  position: relative;
+  transform: translate(34px, 28px);
+}
+
+.circle {
+  fill: transparent;
+  stroke: #63e2b7;
+  stroke-width: 1px;
+  /*transform:rotate(180deg);
+    -webkit-transform:rotate(180deg);*/
+  -webkit-animation: 1s circle infinite cubic-bezier(0, 0.3, 0.7, 1);
+}
+@-webkit-keyframes circle {
+  0% {
+    stroke-dasharray: 800 400;
+    stroke-dashoffset: -400;
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+
+  100% {
+    stroke-dasharray: 0 400;
+    stroke-dashoffset: 0;
+  }
+}
+</style>

packages/common/AdvanceTable/src/main.vue

@@ -105,10 +105,11 @@
           :style="computeCustomWidthStl(column)"
         >
       </colgroup>
-      <n-tbody>
+      <n-tbody v-show="!loading">
         <n-tr
           v-for="(rowData, i) in showingData"
           :key="i"
+          :class="rowCls"
         >
           <n-td
             v-for="column in columns"
@@ -130,8 +131,21 @@
         >
           No data
         </div>
+        <!-- <tr style="display:inline-block;width:100%;"> -->
+
+        <!-- </tr> -->
       </n-tbody>
+      <template v-if="loading">
+        <div style="width:100%;display:table-caption;">
+          <Loading
+            style="margin-top:20px;"
+            :circle="{time:'1.5s'}"
+            :svg="{height: '150px', width: '250px'}"
+          />
+        </div>
+      </template>
     </n-table>
+
     <!-- 分页 -->
     <div
       v-if="pagination !== false && showingData.length"
@@ -150,6 +164,7 @@ import row from '../row/index.js'
 import SortIcon from '../sortIcon'
 import filterDropDown from '../filterDropDown'
 import searchInput from '../searchInput'
+import Loading from '../loading'
 
 export default {
   name: 'NAdvanceTable',
@@ -157,7 +172,8 @@ export default {
     row,
     SortIcon,
     filterDropDown,
-    searchInput
+    searchInput,
+    Loading
   },
   props: {
     search: {
@@ -216,6 +232,14 @@ export default {
     data: {
       type: Array,
       default: () => []
+    },
+    rowCls: {
+      type: [Array, String, Object],
+      default: ''
+    },
+    loading: {
+      type: [Boolean],
+      default: false
     }
   },
   data () {
@@ -367,7 +391,6 @@ export default {
     },
     currentSearchColumn () {
       this.searchData = this.computeShowingData()
-      console.log('currentSearchColumn')
     },
     currentSortColumn () {
       this.searchData = this.computeShowingData()
@@ -377,7 +400,6 @@ export default {
       handler () {
         this.searchData = this.computeShowingData()
         console.log('currentFilterColumn')
-
         // because after filter length maybe change , so need to reset current page
         this.currentPage = 1
       },
@@ -394,6 +416,7 @@ export default {
     console.log(this.wrapperWidth, this.tbodyWidth)
 
     this.init()
+
     // window.addEventListener('resize', this.init)
   },
   beforeDestroy () {
@@ -438,7 +461,11 @@ export default {
         ref.setCheckedIndexs(filter[key])
       })
       searcher && this.$refs.search.setSearch(searcher)
-      if (page) { this.currentPage = page }
+      if (page) {
+        this.$nextTick(() => {
+          this.currentPage = page
+        })
+      }
       // TODO:测试功能 有远程 无远程 ，半有半无
     },
     onBodyScrolll (event) {
@@ -466,8 +493,6 @@ export default {
       })
     },
     handleSearch ({ key, word }) {
-      console.log(key, word)
-
       this.currentSearchColumn = {
         key,
         word
@@ -591,6 +616,7 @@ export default {
         // remote filter
         this.useRemoteChange()
       }
+      console.log('on-filter')
     },
     onSortTypeChange ({ i, sortable, key, type, column }) {
       this.currentSortColumn = {

packages/common/Confirm/src/confirm.vue

@@ -37,7 +37,7 @@
       <div class="n-comfirm__footer">
         <n-button
           v-if="type === 'confirm'"
-          style="margin-bottom:0;"
+          style="margin-bottom:0;margin-right:12px;"
           round
           size="small"
           @click="handleCancel"
@@ -82,7 +82,7 @@ export default {
     iconType () {
       const colors = {
         'error': { type: 'ios-close-circle', color: '#FF92A4' },
-        'confirm': { type: 'ios-information-circle', color: '#FF92A4' },
+        'confirm': { type: 'md-alert', color: '#FF92A4' },
         'success': { type: 'ios-checkmark-circle', color: '#63E2B7' }
       }
       return colors[this.type]

packages/common/Select/src/MultipleSelect.vue

@@ -6,6 +6,7 @@
       [`n-select--${size}-size`]: true,
       'n-select--disabled': disabled
     }"
+    :style="{'cursor':cursor}"
     @click="handleActivatorClick"
     @keyup.up.prevent="handleActivatorKeyUpUp"
     @keyup.down.prevent="handleActivatorKeyUpDown"
@@ -201,6 +202,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    cursor: {
+      type: String,
+      default: 'inherit'
     }
   },
   data () {

packages/common/Select/src/SingleSelect.vue

@@ -6,6 +6,7 @@
       [`n-select--${size}-size`]: true,
       'n-select--disabled': disabled
     }"
+    :style="{'cursor':cursor}"
     @click="toggleMenu"
   >
     <div
@@ -152,7 +153,12 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    cursor: {
+      type: String,
+      default: 'inherit'
     }
+
   },
   data () {
     return {

packages/common/Select/src/main.vue

@@ -47,6 +47,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    cursor: {
+      type: String,
+      default: 'inherit'
     }
   },
   data () {