feat: add CElementCover component

Author: woothu

src/components/element-cover/CElementCover.vue

@@ -0,0 +1,92 @@
+<template>
+  <div :style="outerContainerStyles">
+    <div v-if="centeringWrapper" :style="centeringStyles">
+      <slot>
+        <CSpinner grow size="lg" color="primary"/>
+      </slot>
+    </div>
+    <slot v-else>
+      <CSpinner size="lg" color="primary"/>
+    </slot>
+  </div>
+</template>
+
+<script>
+import CSpinner from '../spinner/CSpinner'
+
+export default {
+  name: 'CElementCover',
+  props: {
+    boundaries: Array,
+    centeringWrapper: {
+      type: Boolean,
+      default: true
+    },
+    opacity: {
+      type: Number,
+      default: 0.4
+    }
+  },
+  components: {
+    CSpinner
+  },
+  data () {
+    return {
+      containerCoords: {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      },
+      parentCoords: null
+    }
+  },
+  mounted () {
+    if (this.boundaries) {
+      this.setOffsets()
+    }
+  },
+  computed: {
+    outerContainerStyles () {
+      return {
+        ...this.containerCoords,
+        position: 'absolute',
+        'background-color': `rgb(255,255,255,${this.opacity})`
+      }
+    },
+    centeringStyles () {
+      return {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translateX(-50%) translateY(-50%)'
+      }
+    }
+  },
+  methods: {
+    setOffsets () {
+      const parent = this.$el.parentElement
+      this.parentCoords = parent.getBoundingClientRect()
+      this.boundaries.forEach(cover => {
+        const element = this.getElement(parent, cover.tag, cover.class)
+        if (!element || !cover.sides) {
+          return
+        }
+        cover.sides.forEach(side => {
+          const sideMargin = Math.abs(element[side] - this.parentCoords[side])
+          this.containerCoords[side] = sideMargin + 'px'
+        })
+      })
+    },
+    getElement (node, tag, styleClass) {
+      let element = null
+      if (styleClass) {
+        element = node.getElementsByClassName(styleClass)[0]
+      } else if (tag) {
+        element = node.getElementsByTagName(tag)[0]
+      }
+      return element ? element.getBoundingClientRect() : null
+    }
+  }
+}
+</script>

src/components/element-cover/index.js

@@ -0,0 +1,5 @@
+import CElementCover from './CElementCover'
+
+export {
+  CElementCover
+}

src/components/element-cover/tests/CElementCover.spec.js

@@ -0,0 +1,50 @@
+// cannot do integration test without browser, due to 
+// .getBoundingClientRect() always returning 0
+import { mount, createLocalVue } from '@vue/test-utils'
+import Component from '../CElementCover'
+
+const localVue = new createLocalVue()
+const App = localVue.extend({
+  components: {
+    CElementCover: Component
+  },
+  render(h) {
+    return h('div', {}, [
+      h('div', { attrs: { class: 'first' }}),
+      h('CElementCover', {
+        props: {
+          boundaries: [
+            {
+              sides: ['top', 'left'],
+              class: 'first'
+            },
+            {
+              sides: ['bottom'],
+              tag: 'non-existing'
+            },
+            {
+              sides: ['bottom']
+            }
+          ]
+        }
+      })
+    ])
+  }
+})
+
+const customWrapper = mount(App, { localVue })
+const defaultWrapper = mount(Component)
+
+const ComponentName = 'CElementCover'
+
+describe(ComponentName, () => {
+  it('has a name', () => {
+    expect(Component.name).toBe(ComponentName)
+  })
+  it('renders correctly with default spinner', () => {
+    expect(defaultWrapper.element).toMatchSnapshot()
+  }) 
+  it('renders correctly with custom content', () => {
+    expect(customWrapper.element).toMatchSnapshot()
+  })
+})

src/components/element-cover/tests/__snapshots__/CElementCover.spec.js.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CElementCover renders correctly with custom content 1`] = `
+<div>
+  <div
+    class="first"
+  />
+  <div
+    style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute;"
+  >
+    <div
+      style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"
+    >
+      <div
+        aria-hidden="false"
+        aria-label="Loading"
+        class="spinner-grow spinner-grow-lg text-primary"
+        role="status"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CElementCover renders correctly with default spinner 1`] = `
+<div
+  style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute;"
+>
+  <div
+    style="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"
+  >
+    <div
+      aria-hidden="false"
+      aria-label="Loading"
+      class="spinner-grow spinner-grow-lg text-primary"
+      role="status"
+    />
+  </div>
+</div>
+`;

src/components/index.d.ts

@@ -149,6 +149,13 @@ export declare class CDropdownHeader extends Vue {
 
 export declare class CDropdownItem extends CLink {}
 
+export declare class CElementCover extends Vue {
+  boundaries: Array<{side: string[], tag?: string, class?: string}>
+  centeringWrapper: boolean
+  opacity: number
+}
+
+
 export declare class CEmbed extends Vue {
   type: string
   ratio: string

src/components/table/CDataTable.vue

@@ -188,14 +188,15 @@
       </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>
+        <CElementCover 
+          :boundaries="[
+            { sides: ['top'], tag: 'TD' },
+            { sides: ['bottom'], tag: 'TBODY' }
+          ]"
+        />
       </slot>
-
     </div>
+    
     <slot name="under-table"/>
 
 
@@ -210,7 +211,7 @@
 </template>
 
 <script>
-import CSpinner from '../spinner/CSpinner'
+import CElementCover from '../element-cover/CElementCover'
 import CPagination from '../pagination/CPagination'
 import CIcon from '@coreui/icons-vue/src/CIconRaw.vue'
 import { cilArrowTop, cilBan } from '@coreui/icons'
@@ -220,7 +221,7 @@ export default {
   icons: { cilArrowTop, cilBan },
   components: {
     CPagination,
-    CSpinner,
+    CElementCover,
     CIcon
   },
   props: {

src/components/table/tests/CDataTable.spec.js

@@ -80,7 +80,7 @@ describe(ComponentName, () => {
   })
   it('shows loading layer when loading prop is set', () => {
     customWrapper.setProps({ loading: true })
-    expect(customWrapper.contains('.spinner-border')).toBe(true)
+    expect(customWrapper.contains('.spinner-grow')).toBe(true)
     customWrapper.setProps({ loading: false })
   })
   it('emits event when items per page changes', () => {