Skip to content

Commit d2e1f8a

Browse files
tmorehousejacobmllr95
tmorehouse
authored and
jacobmllr95
committed
feat(card-img-lazy): new card-img-lazy sub-component (#2647)
* feat(card-img-lazy): New card lazy load image sub-component * Update index.js * Update package.json * Update card-img-lazy.js * Create card-img-lazy.spec.js * Update card-img-lazy.js * Update card-img-lazy.spec.js * Update README.md * Update README.md * Update card-img-lazy.js * Update card-img-lazy.js * Update card-img-lazy.js * lint * Add `omit()` util * Prettify
1 parent c3c65e4 commit d2e1f8a

File tree

7 files changed

+263
-7
lines changed

7 files changed

+263
-7
lines changed

‎docs/markdown/reference/images/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ transformAssetUrls: {
3232
'b-img-lazy': ['src', 'blank-src'],
3333
'b-card': 'img-src',
3434
'b-card-img': 'img-src',
35+
'b-card-img-lazy': ['src', 'blank-src'],
3536
'b-carousel-slide': 'img-src',
3637
'b-embed': 'src'
3738
}
@@ -68,6 +69,7 @@ module.exports = {
6869
'b-img-lazy': ['src', 'blank-src'],
6970
'b-card': 'img-src',
7071
'b-card-img': 'img-src',
72+
'b-card-img-lazy': ['src', 'blank-src'],
7173
'b-carousel-slide': 'img-src',
7274
'b-embed': 'src'
7375
}
@@ -95,6 +97,7 @@ build: {
9597
'b-img-lazy': ['src', 'blank-src'],
9698
'b-card': 'img-src',
9799
'b-card-img': 'img-src',
100+
'b-card-img-lazy': ['src', 'blank-src'],
98101
'b-carousel-slide': 'img-src',
99102
'b-embed': 'src'
100103
}

‎src/components/card/README.md

+13-4
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ following are examples of what’s supported inside a `<b-card>`
4444
The building block of a `<b-card>` is the `<b-card-body>` section which provides a padded section
4545
within a card.
4646

47-
By default the `<b-card>` content is automatically placed in a`<b-card-body>` section:
47+
By default the `<b-card>` content is automatically placed in a `<b-card-body>` section:
4848

4949
```html
5050
<div>
@@ -115,9 +115,12 @@ Links can be added and placed next to each other by adding the `.card-link` clas
115115

116116
### Images
117117

118-
The prop `img-src` places an image on the top of the card, and use the `img-alt` prop to specify a
119-
string to be placed in the image's `alt` attribute. The image specified by the `img-src` prop will
120-
be responsive and will adjust it's width when the width of the card is changed.
118+
The `<b-card>` prop `img-src` places an image on the top of the card, and use the `img-alt` prop to
119+
specify a string to be placed in the image's `alt` attribute. The image specified by the `img-src`
120+
prop will be responsive and will adjust it's width when the width of the card is changed.
121+
122+
Alternatively you can manually place images inside `<b-card>` using the sub-component
123+
`<b-card-img>`. See the kitchen sink example below for usage.
121124

122125
```html
123126
<div>
@@ -185,6 +188,12 @@ Place the image in the background of the card by setting the boolean prop `overl
185188
<!-- b-card-overlay-img-.vue -->
186189
```
187190

191+
#### Lazy loaded images
192+
193+
Use the `<b-card-img-lazy>` sub-component to lazy load images as they scroll into view.
194+
`<b-card-img-lazy>` supports the same props as `<b-card-img>` as well as many of the props of the
195+
[`<b-img-lazy>`](/docs/components/image#lazy-loaded-images) component.
196+
188197
### Header and footer
189198

190199
Add an optional header and/or footer within a card via the `header`/`footer` props or named slots.

‎src/components/card/card-img-lazy.js

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import BImgLazy from '../image/img-lazy'
2+
import { omit } from '../../utils/object'
3+
import { mergeData } from 'vue-functional-data-merge'
4+
5+
// Copy of `<b-img-lazy>` props, and remove conflicting/non-applicable props
6+
// The `omit()` util creates a new object, so we can just pass the original props
7+
const lazyProps = omit(BImgLazy.props, [
8+
'left',
9+
'right',
10+
'center',
11+
'block',
12+
'rounded',
13+
'thumbnail',
14+
'fluid',
15+
'fluidGrow'
16+
])
17+
18+
export const props = {
19+
...lazyProps,
20+
top: {
21+
type: Boolean,
22+
default: false
23+
},
24+
bottom: {
25+
type: Boolean,
26+
default: false
27+
},
28+
left: {
29+
type: Boolean,
30+
default: false
31+
},
32+
start: {
33+
type: Boolean,
34+
default: false
35+
// alias of 'left'
36+
},
37+
right: {
38+
type: Boolean,
39+
default: false
40+
},
41+
end: {
42+
type: Boolean,
43+
default: false
44+
// alias of 'right'
45+
}
46+
}
47+
48+
// @vue/component
49+
export default {
50+
name: 'BCardImgLazy',
51+
functional: true,
52+
props,
53+
render(h, { props, data }) {
54+
let baseClass = 'card-img'
55+
if (props.top) {
56+
baseClass += '-top'
57+
} else if (props.right || props.end) {
58+
baseClass += '-right'
59+
} else if (props.bottom) {
60+
baseClass += '-bottom'
61+
} else if (props.left || props.start) {
62+
baseClass += '-left'
63+
}
64+
65+
// False out the left/center/right props before passing to b-img-lazy
66+
const lazyProps = { ...props, left: false, right: false, center: false }
67+
return h(
68+
BImgLazy,
69+
mergeData(data, {
70+
class: [baseClass],
71+
props: lazyProps
72+
})
73+
)
74+
}
75+
}

‎src/components/card/card-img-lazy.spec.js

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import CardImgLazy from './card-img-lazy'
2+
import { mount } from '@vue/test-utils'
3+
4+
describe('card-image', async () => {
5+
it('default has tag "img"', async () => {
6+
const wrapper = mount(CardImgLazy, {
7+
context: {
8+
props: {
9+
src: 'https://picsum.photos/600/300/?image=25'
10+
}
11+
}
12+
})
13+
expect(wrapper.is('img')).toBe(true)
14+
})
15+
16+
it('default has data src attribute', async () => {
17+
const wrapper = mount(CardImgLazy, {
18+
context: {
19+
props: {
20+
src: 'https://picsum.photos/600/300/?image=25'
21+
}
22+
}
23+
})
24+
expect(wrapper.attributes('src')).toContain('data:image/svg+xml')
25+
})
26+
27+
it('default does not have alt attribute', async () => {
28+
const wrapper = mount(CardImgLazy, {
29+
context: {
30+
props: {
31+
src: 'https://picsum.photos/600/300/?image=25'
32+
}
33+
}
34+
})
35+
expect(wrapper.attributes('alt')).not.toBeDefined()
36+
})
37+
38+
it('default has attributes width and height set to 1', async () => {
39+
const wrapper = mount(CardImgLazy, {
40+
context: {
41+
props: {
42+
src: 'https://picsum.photos/600/300/?image=25'
43+
}
44+
}
45+
})
46+
expect(wrapper.attributes('width')).toBeDefined()
47+
expect(wrapper.attributes('width')).toBe('1')
48+
expect(wrapper.attributes('height')).toBeDefined()
49+
expect(wrapper.attributes('height')).toBe('1')
50+
})
51+
52+
it('default has class "card-img"', async () => {
53+
const wrapper = mount(CardImgLazy, {
54+
context: {
55+
props: {
56+
src: 'https://picsum.photos/600/300/?image=25'
57+
}
58+
}
59+
})
60+
expect(wrapper.classes()).toContain('card-img')
61+
})
62+
63+
it('has class "card-img-top" when prop top=true', async () => {
64+
const wrapper = mount(CardImgLazy, {
65+
context: {
66+
props: {
67+
src: 'https://picsum.photos/600/300/?image=25',
68+
top: true
69+
}
70+
}
71+
})
72+
expect(wrapper.classes()).toContain('card-img-top')
73+
})
74+
75+
it('has class "card-img-bottom" when prop bottom=true', async () => {
76+
const wrapper = mount(CardImgLazy, {
77+
context: {
78+
props: {
79+
src: 'https://picsum.photos/600/300/?image=25',
80+
bottom: true
81+
}
82+
}
83+
})
84+
expect(wrapper.classes()).toContain('card-img-bottom')
85+
})
86+
87+
it('has class "card-img-top" when props top=true and bottom=true', async () => {
88+
const wrapper = mount(CardImgLazy, {
89+
context: {
90+
props: {
91+
src: 'https://picsum.photos/600/300/?image=25',
92+
top: true,
93+
bottom: true
94+
}
95+
}
96+
})
97+
expect(wrapper.classes()).toContain('card-img-top')
98+
})
99+
100+
it('has class "card-img-left" when prop left=true', async () => {
101+
const wrapper = mount(CardImgLazy, {
102+
context: {
103+
props: {
104+
src: 'https://picsum.photos/600/300/?image=25',
105+
left: true
106+
}
107+
}
108+
})
109+
expect(wrapper.classes()).toContain('card-img-left')
110+
})
111+
112+
it('has class "card-img-right" when prop right=true', async () => {
113+
const wrapper = mount(CardImgLazy, {
114+
context: {
115+
props: {
116+
src: 'https://picsum.photos/600/300/?image=25',
117+
right: true
118+
}
119+
}
120+
})
121+
expect(wrapper.classes()).toContain('card-img-right')
122+
})
123+
124+
it('has attribute alt when prop alt set', async () => {
125+
const wrapper = mount(CardImgLazy, {
126+
context: {
127+
props: {
128+
src: 'https://picsum.photos/600/300/?image=25',
129+
alt: 'image'
130+
}
131+
}
132+
})
133+
expect(wrapper.attributes('alt')).toBeDefined()
134+
expect(wrapper.attributes('alt')).toBe('image')
135+
})
136+
137+
it('has attribute width when prop width set', async () => {
138+
const wrapper = mount(CardImgLazy, {
139+
context: {
140+
props: {
141+
src: 'https://picsum.photos/600/300/?image=25',
142+
width: '600'
143+
}
144+
}
145+
})
146+
expect(wrapper.attributes('width')).toBeDefined()
147+
expect(wrapper.attributes('width')).toBe('600')
148+
})
149+
150+
it('has attribute heigth when prop height set', async () => {
151+
const wrapper = mount(CardImgLazy, {
152+
context: {
153+
props: {
154+
src: 'https://picsum.photos/600/300/?image=25',
155+
height: '300'
156+
}
157+
}
158+
})
159+
expect(wrapper.attributes('height')).toBeDefined()
160+
expect(wrapper.attributes('height')).toBe('300')
161+
})
162+
})

‎src/components/card/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import BCardTitle from './card-title'
55
import BCardSubTitle from './card-sub-title'
66
import BCardFooter from './card-footer'
77
import BCardImg from './card-img'
8+
import BCardImgLazy from './card-img-lazy'
89
import BCardText from './card-text'
910
import BCardGroup from './card-group'
1011
import { registerComponents } from '../../utils/plugins'
@@ -17,6 +18,7 @@ const components = {
1718
BCardSubTitle,
1819
BCardFooter,
1920
BCardImg,
21+
BCardImgLazy,
2022
BCardText,
2123
BCardGroup
2224
}

‎src/components/card/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"BCardTitle",
1212
"BCardSubTitle",
1313
"BCardImg",
14+
"BCardImgLazy",
1415
"BCardText",
1516
"BCardGroup"
1617
],

‎src/utils/object.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ export const create = Object.create
6666
export const isFrozen = Object.isFrozen
6767
export const is = Object.is
6868

69-
export function readonlyDescriptor() {
70-
return { enumerable: true, configurable: false, writable: false }
71-
}
69+
// @link https://gist.github.com/bisubus/2da8af7e801ffd813fab7ac221aa7afc
70+
export const omit = (obj, props) =>
71+
Object.keys(obj)
72+
.filter(key => props.indexOf(key) === -1)
73+
.reduce((result, key) => ({ ...result, [key]: obj[key] }), {})
74+
75+
export const readonlyDescriptor = () => ({ enumerable: true, configurable: false, writable: false })

0 commit comments

Comments
 (0)