refactor: CTable refactor:

- delete cleaner,
- rename notResponsive prop to responsive,
- rename noFilter and noSorting props to filterable and sortable,
- apply loading styles by one additional node, add slot loading,
- remove loading styles customization,
- rename prop small to size
- update test

Author: woothu

src/components/Table/CTable.vue

@@ -43,7 +43,7 @@
 
 
     <slot name="over-table"/>
-    <div :class="`position-relative ${notResponsive ? '' : 'table-responsive'}`">
+    <div :class="`position-relative ${responsive ? 'table-responsive' : '' }`">
       <table :class="tableClasses">
         <thead>
           <tr>
@@ -74,21 +74,12 @@
           </tr>
 
           <tr v-if="columnFilter" class="table-sm">
-            <th v-if="indexColumn" class="pb-2 pl-2">
-              <CIcon
-                v-if="indexColumn !== 'noCleaner'"
-                width="18"
-                name="ban"
-                @click.native="clear"
-                :class="isFiltered ? 'text-danger' : 'text-secondary'"
-                title="clear table"
-              />
-            </th>
+            <th v-if="indexColumn"></th>
             <template v-for="(colName, index) in rawColumnNames" >
               <th :class="headerClass(index)" :key="index">
                 <slot :name="`${rawColumnNames[index]}-filter`">
                   <input
-                    v-if="!fields || !fields[index].noFilter"
+                    v-if="!fields || !fields[index].filterable !== false"
                     class="w-100 table-filter"
                     @input="addColumnFilter(colName, $event.target.value)"
                     :value="columnFilterVal[colName]"
@@ -118,7 +109,7 @@
                   :index="firstItemIndex + itemIndex"
                 >
                   <td>
-                    {{indexColumn !== 'noIndexes' ? firstItemIndex + itemIndex + 1 : ''}}
+                    {{ firstItemIndex + itemIndex + 1 }}
                   </td>
                 </slot>
               <template v-for="(colName, index) in rawColumnNames" >
@@ -205,18 +196,14 @@
         <slot name="caption"/>
       </table>
 
+      <slot name="loading" v-if="loading">
+        <div style="position:absolute;left:0;top:0;bottom:0;right:0;background-color:rgb(255,255,255,0.4);">
+          <div style="position:absolute;bottom:50%;left:50%;transform:translateX(-50%);">
+            <CSpinner color="success"/>
+          </div>
+        </div>
+      </slot>
 
-      <div
-        v-if="loading"
-        :style="topLoadingPosition"
-        style="position:absolute;left:50%;transform:translateX(-50%);"
-      >
-        <CSpinner
-          color="success"
-          :style="spinnerSize"
-          role="status"
-        />
-      </div>
     </div>
     <slot name="under-table"/>
 
@@ -253,13 +240,16 @@ export default {
       default: 10
     },
     activePage: Number,    
-    indexColumn: [Boolean, String],
+    indexColumn: Boolean,
     columnFilter: Boolean,
     pagination: [Boolean, Object],
     addTableClasses: [String, Array, Object],
-    notResponsive: Boolean,
+    responsive: {
+      type: Boolean,
+      default: true
+    },
     sortable: Boolean,
-    small: Boolean,
+    size: String,
     dark: Boolean,
     striped: Boolean,
     fixed: Boolean,
@@ -371,8 +361,7 @@ export default {
         'table',
         this.addTableClasses,
         {
-          'is-loading': this.loading,
-          'table-sm': this.small,
+          [`table-${this.size}`]: this.size,
           'table-dark': this.dark,
           'table-striped': this.striped,
           'b-table-fixed': this.fixed,
@@ -388,14 +377,6 @@ export default {
     colspan () {
       return this.rawColumnNames.length + (this.indexColumn ? 1 : 0)
     },
-    topLoadingPosition () {
-      const headerHeight = (this.columnFilter ? 38 : 0) + ( this.small ? 32 + 4 : 46 + 7)
-      return `top:${headerHeight}px`
-    },
-    spinnerSize () {
-      const size = this.small ? 1.4 : this.currentItems.length === 1 ? 2 : 3
-      return `width:${size + 'rem'};height:${size + 'rem'}`
-    },
     isFiltered () {
       return this.tableFilterVal || Object.values(this.columnFilterVal).join('')
     }
@@ -428,16 +409,16 @@ export default {
     addColumnFilter (colName, value) {
       this.$set(this.columnFilterVal, colName, value)
     },
-    clear () {
-      this.tableFilterVal = ''
-      this.columnFilterVal = {}
-      this.sorter.column = ''
-      this.sorter.asc = true
-      const inputs = this.$el.getElementsByClassName('table-filter')
-      for (let input of inputs) {
-        input.value = ''
-      }
-    },
+    // clear () {
+    //   this.tableFilterVal = ''
+    //   this.columnFilterVal = {}
+    //   this.sorter.column = ''
+    //   this.sorter.asc = true
+    //   const inputs = this.$el.getElementsByClassName('table-filter')
+    //   for (let input of inputs) {
+    //     input.value = ''
+    //   }
+    // },
     pretifyName (name) {
       return name.replace(/[-_.]/g, ' ')
         .replace(/ +/g, ' ')
@@ -457,7 +438,7 @@ export default {
       return classes
     },
     isSortable (index) {
-      return this.sortable && (!this.fields || !this.fields[index].notSortable)
+      return this.sortable && (!this.fields || this.fields[index].sortable !== false)
     },
     headerClass (index) {
       const fields = this.fields
@@ -505,9 +486,6 @@ export default {
   -webkit-transition: transform 0.3s;
   transition: transform 0.3s;
 }
-.is-loading {
-  opacity: .4;
-}
 .arrow-position {
   right: 0;
   top: 50%;

src/components/Table/tests/CTable.spec.js

@@ -26,7 +26,7 @@ const customWrapper = mount(Component, {
       'registered',
       { key: 'role', _style:'width:20%;' },
       { key: 'status', _style:'width:20%;' },
-      { key: 'show_details' , label:'', _style:'width:1%', notSortable: true, noFilter: true },
+      { key: 'show_details' , label:'', _style:'width:1%', sortable: false, filterable: false },
     ],
 
     indexColumn: true,
@@ -76,10 +76,6 @@ describe(ComponentName, () => {
     customWrapper.setProps({ fields: undefined })
     expect(customWrapper.vm.columnNames[0]).toBe('Username')
   })
-  it('clear table filters', () => {
-    customWrapper.findAll('tr').at(1).find('svg').trigger('click')
-    expect(customWrapper.vm.sorter.column).toBe('')
-  })
   it('changes colspan when indexColumn is switched', () => {
     const colspanWithIndexColumn = customWrapper.vm.colspan
     customWrapper.setProps({ indexColumn: false })
@@ -95,16 +91,6 @@ describe(ComponentName, () => {
     expect(customWrapper.contains('.spinner-border')).toBe(true)
     customWrapper.setProps({ loading: false })
   })
-  it('emits event when items per page changes', () => {
-    customWrapper.findAll('tr').at(1).find('input').setValue('Estavan')
-    expect(customWrapper.vm.spinnerSize.includes('2')).toBe(true)
-
-    customWrapper.findAll('tr').at(1).find('input').setValue('')
-    expect(customWrapper.vm.spinnerSize.includes('3')).toBe(true)
-
-    customWrapper.setProps({ small: true })
-    expect(customWrapper.vm.spinnerSize.includes('1.4')).toBe(true)
-  })
   it('emits event when items per page changes', () => {
     customWrapper.findAll('option').at(2).setSelected()
     expect(customWrapper.emitted()['pagination-change'][0][0]).toBe(10)

src/components/Table/tests/__snapshots__/CTable.spec.js.snap

@@ -273,25 +273,7 @@ exports[`CTable renders correctly 2`] = `
         <tr
           class="table-sm"
         >
-          <th
-            class="pb-2 pl-2"
-          >
-            <svg
-              class="text-danger"
-              style="fill: currentColor;"
-              title="clear table"
-              viewBox="0 0 64 64"
-              width="18"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                ban
-              </title>
-              <path
-                d="M53.213 10.787c-5.429-5.429-12.929-8.787-21.213-8.787-16.569 0-30 13.431-30 30 0 8.284 3.358 15.784 8.787 21.213v0c5.429 5.429 12.929 8.787 21.213 8.787 16.569 0 30-13.431 30-30 0-8.284-3.358-15.784-8.787-21.213v0zM32 6c0.007 0 0.015 0 0.023 0 6.483 0 12.409 2.383 16.951 6.32l-0.032-0.027-36.648 36.648c-3.91-4.509-6.293-10.435-6.293-16.918 0-0.008 0-0.016 0-0.024v0.001c0-14.336 11.664-26 26-26zM32 58c-0.007 0-0.014 0-0.022 0-6.452 0-12.352-2.36-16.885-6.264l0.034 0.028 36.637-36.637c3.876 4.499 6.236 10.399 6.236 16.851 0 0.008 0 0.016 0 0.024v-0.001c0 14.336-11.664 26-26 26z"
-              />
-            </svg>
-          </th>
+          <th />
            
           <th
             class="user-custom-class"
@@ -324,7 +306,9 @@ exports[`CTable renders correctly 2`] = `
           <th
             class=""
           >
-            <!---->
+            <input
+              class="w-100 table-filter"
+            />
           </th>
         </tr>
       </thead>