Skip to content

Commit

Permalink
fix(b-skeleton): accepts custom attributes (#6858)
Browse files Browse the repository at this point in the history
* fix(b-skeleton): root element accept custom attributes

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

Co-authored-by: Illya Klymov <xanf@xanf.me>
  • Loading branch information
serialine and xanf committed Dec 15, 2021
1 parent 14e413c commit 9b1edc9
Show file tree
Hide file tree
Showing 6 changed files with 65 additions and 19 deletions.
8 changes: 4 additions & 4 deletions src/components/skeleton/skeleton-icon.js
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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, {
Expand All @@ -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]
)
}
Expand Down
13 changes: 13 additions & 0 deletions src/components/skeleton/skeleton-icon.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
})
27 changes: 15 additions & 12 deletions src/components/skeleton/skeleton-img.js
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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])
}
Expand Down
13 changes: 13 additions & 0 deletions src/components/skeleton/skeleton-img.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
})
10 changes: 7 additions & 3 deletions src/components/skeleton/skeleton-table.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Vue } from '../../vue'
import { Vue, mergeData } from '../../vue'
import { NAME_SKELETON_TABLE } from '../../constants/components'
import {
PROP_TYPE_BOOLEAN,
Expand Down Expand Up @@ -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 } })])
Expand All @@ -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
])
}
})
13 changes: 13 additions & 0 deletions src/components/skeleton/skeleton-table.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
})

0 comments on commit 9b1edc9

Please sign in to comment.