fix(b-skeleton): accepts custom attributes (#6858)

serialine · xanf · web-flow · commit 9b1edc978f70 · 2021-12-15T21:24:38.000+02:00
* fix(b-skeleton): root element accept custom attributes

* fix(b-skeleton-img): pass attributes only image element

Co-authored-by: Illya Klymov &lt;xanf@xanf.me&gt;
diff --git a/src/components/skeleton/skeleton-icon.js b/src/components/skeleton/skeleton-icon.js
@@ -1,4 +1,4 @@
-import { Vue } from '../../vue'
+import { Vue, mergeData } from '../../vue'
 import { NAME_SKELETON_ICON } from '../../constants/components'
 import { PROP_TYPE_OBJECT, PROP_TYPE_STRING } from '../../constants/props'
 import { makeProp, makePropsConfigurable } from '../../utils/props'
@@ -22,7 +22,7 @@ export const BSkeletonIcon = /*#__PURE__*/ Vue.extend({
   name: NAME_SKELETON_ICON,
   functional: true,
   props,
-  render(h, { props }) {
+  render(h, { data, props }) {
     const { icon, animation } = props
 
     const $icon = h(BIcon, {
@@ -35,10 +35,10 @@ export const BSkeletonIcon = /*#__PURE__*/ Vue.extend({
 
     return h(
       'div',
-      {
+      mergeData(data, {
         staticClass: 'b-skeleton-icon-wrapper position-relative d-inline-block overflow-hidden',
         class: { [`b-skeleton-animate-${animation}`]: animation }
-      },
+      }),
       [$icon]
     )
   }
diff --git a/src/components/skeleton/skeleton-icon.spec.js b/src/components/skeleton/skeleton-icon.spec.js
@@ -72,4 +72,17 @@ describe('skeleton-icon', () => {
 
     wrapper.destroy()
   })
+
+  it('accepts custom classes', async () => {
+    const wrapper = mount(BSkeletonIcon, {
+      context: {
+        class: ['foobar']
+      }
+    })
+
+    expect(wrapper.classes()).toContain('b-skeleton-icon-wrapper')
+    expect(wrapper.classes()).toContain('foobar')
+
+    wrapper.destroy()
+  })
 })
diff --git a/src/components/skeleton/skeleton-img.js b/src/components/skeleton/skeleton-img.js
@@ -1,4 +1,4 @@
-import { Vue } from '../../vue'
+import { Vue, mergeData } from '../../vue'
 import { NAME_SKELETON_IMG } from '../../constants/components'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
 import { makeProp, makePropsConfigurable } from '../../utils/props'
@@ -27,19 +27,22 @@ export const BSkeletonImg = /*#__PURE__*/ Vue.extend({
   name: NAME_SKELETON_IMG,
   functional: true,
   props,
-  render(h, { props }) {
+  render(h, { data, props }) {
     const { aspect, width, height, animation, variant, cardImg } = props
 
-    const $img = h(BSkeleton, {
-      props: {
-        type: 'img',
-        width,
-        height,
-        animation,
-        variant
-      },
-      class: { [`card-img-${cardImg}`]: cardImg }
-    })
+    const $img = h(
+      BSkeleton,
+      mergeData(data, {
+        props: {
+          type: 'img',
+          width,
+          height,
+          animation,
+          variant
+        },
+        class: { [`card-img-${cardImg}`]: cardImg }
+      })
+    )
 
     return props.noAspect ? $img : h(BAspect, { props: { aspect } }, [$img])
   }
diff --git a/src/components/skeleton/skeleton-img.spec.js b/src/components/skeleton/skeleton-img.spec.js
@@ -123,4 +123,17 @@ describe('skeleton-img', () => {
 
     wrapper.destroy()
   })
+
+  it('accepts custom classes', async () => {
+    const wrapper = mount(BSkeletonImg, {
+      context: {
+        class: ['foobar']
+      }
+    })
+
+    expect(wrapper.find('.b-aspect-content > .b-skeleton-img').exists()).toBe(true)
+    expect(wrapper.find('.b-aspect-content > .b-skeleton-img').classes()).toContain('foobar')
+
+    wrapper.destroy()
+  })
 })
diff --git a/src/components/skeleton/skeleton-table.js b/src/components/skeleton/skeleton-table.js
@@ -1,4 +1,4 @@
-import { Vue } from '../../vue'
+import { Vue, mergeData } from '../../vue'
 import { NAME_SKELETON_TABLE } from '../../constants/components'
 import {
   PROP_TYPE_BOOLEAN,
@@ -36,7 +36,7 @@ export const BSkeletonTable = /*#__PURE__*/ Vue.extend({
   name: NAME_SKELETON_TABLE,
   functional: true,
   props,
-  render(h, { props }) {
+  render(h, { data, props }) {
     const { animation, columns } = props
 
     const $th = h('th', [h(BSkeleton, { props: { animation } })])
@@ -49,6 +49,10 @@ export const BSkeletonTable = /*#__PURE__*/ Vue.extend({
     const $thead = !props.hideHeader ? h('thead', [$thTr]) : h()
     const $tfoot = props.showFooter ? h('tfoot', [$thTr]) : h()
 
-    return h(BTableSimple, { props: { ...props.tableProps } }, [$thead, $tbody, $tfoot])
+    return h(BTableSimple, mergeData(data, { props: { ...props.tableProps } }), [
+      $thead,
+      $tbody,
+      $tfoot
+    ])
   }
 })
diff --git a/src/components/skeleton/skeleton-table.spec.js b/src/components/skeleton/skeleton-table.spec.js
@@ -103,4 +103,17 @@ describe('skeleton-table', () => {
 
     wrapper.destroy()
   })
+
+  it('accepts custom classes', async () => {
+    const wrapper = mount(BSkeletonTable, {
+      context: {
+        class: ['foobar']
+      }
+    })
+
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes()).toContain('foobar')
+
+    wrapper.destroy()
+  })
 })
