refactor: CElementCover - change boundaries API

Author: woothu

src/components/element-cover/CElementCover.vue

@@ -67,25 +67,17 @@ export default {
     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) {
+      this.boundaries.forEach(({sides, query}) => {
+        const element = parent.querySelector(query)
+        if (!element || !sides) {
           return
         }
-        cover.sides.forEach(side => {
-          const sideMargin = Math.abs(element[side] - this.parentCoords[side])
+        const coords = element.getBoundingClientRect()
+        sides.forEach(side => {
+          const sideMargin = Math.abs(coords[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
     }
   }
 }

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

@@ -16,11 +16,11 @@ const App = localVue.extend({
           boundaries: [
             {
               sides: ['top', 'left'],
-              class: 'first'
+              query: '.first'
             },
             {
               sides: ['bottom'],
-              tag: 'non-existing'
+              query: 'non-existing'
             },
             {
               sides: ['bottom']

src/components/index.d.ts

@@ -150,7 +150,7 @@ 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}>
+  boundaries: Array<{side: string[], query: string }>
   centered: boolean
   opacity: number
 }

src/components/table/CDataTable.vue

@@ -190,8 +190,8 @@
       <slot name="loading" v-if="loading">
         <CElementCover 
           :boundaries="[
-            { sides: ['top'], tag: 'TD' },
-            { sides: ['bottom'], tag: 'TBODY' }
+            { sides: ['top'], query: 'td' },
+            { sides: ['bottom'], query: 'tbody' }
           ]"
         />
       </slot>