mcdmaster
| Navigation | Overlay |
|---|---|
| t Navigate files | h Toggle hits |
| y Change url to tip of branch | m Toggle misses |
| b / v Jump to prev/next hit line | p Toggle partial |
| z / x Jump to prev/next missed or partial line | 1..9 Toggle flags |
| shift + o Open current page in GitHub | a Toggle all on |
| / or ? Show keyboard shortcuts dialog | c Toggle context lines or commits |
| 1 |
// Styles
|
|
| 2 | 1 |
import './VCard.sass' |
| 3 |
|
|
| 4 |
// Extensions
|
|
| 5 | 1 |
import VSheet from '../VSheet' |
| 6 |
|
|
| 7 |
// Mixins
|
|
| 8 | 1 |
import Loadable from '../../mixins/loadable' |
| 9 | 1 |
import Routable from '../../mixins/routable' |
| 10 |
|
|
| 11 |
// Helpers
|
|
| 12 | 1 |
import mixins from '../../util/mixins' |
| 13 |
|
|
| 14 |
// Types
|
|
| 15 |
import { VNode } from 'vue' |
|
| 16 |
|
|
| 17 |
/* @vue/component */
|
|
| 18 | 1 |
export default mixins( |
| 19 |
Loadable, |
|
| 20 |
Routable, |
|
| 21 |
VSheet
|
|
| 22 |
).extend({ |
|
| 23 |
name: 'v-card', |
|
| 24 |
|
|
| 25 |
props: { |
|
| 26 |
flat: Boolean, |
|
| 27 |
hover: Boolean, |
|
| 28 |
img: String, |
|
| 29 |
link: Boolean, |
|
| 30 |
loaderHeight: { |
|
| 31 |
type: [Number, String], |
|
| 32 |
default: 4, |
|
| 33 |
},
|
|
| 34 |
raised: Boolean, |
|
| 35 |
},
|
|
| 36 |
|
|
| 37 |
computed: { |
|
| 38 | 1 |
classes (): object { |
| 39 | 1 |
return { |
| 40 |
'v-card': true, |
|
| 41 |
...Routable.options.computed.classes.call(this), |
|
| 42 |
'v-card--flat': this.flat, |
|
| 43 |
'v-card--hover': this.hover, |
|
| 44 |
'v-card--link': this.isClickable, |
|
| 45 |
'v-card--loading': this.loading, |
|
| 46 |
'v-card--disabled': this.disabled, |
|
| 47 |
'v-card--raised': this.raised, |
|
| 48 |
...VSheet.options.computed.classes.call(this), |
|
| 49 |
}
|
|
| 50 |
},
|
|
| 51 | 1 |
styles (): object { |
| 52 | 1 |
const style: Dictionary<string> = { |
| 53 |
...VSheet.options.computed.styles.call(this), |
|
| 54 |
}
|
|
| 55 |
|
|
| 56 |
if (this.img) { |
|
| 57 | 1 |
style.background = `url("${this.img}") center center / cover no-repeat` |
| 58 |
}
|
|
| 59 |
|
|
| 60 | 1 |
return style |
| 61 |
},
|
|
| 62 |
},
|
|
| 63 |
|
|
| 64 |
methods: { |
|
| 65 | 1 |
genProgress () { |
| 66 | 1 |
const render = Loadable.options.methods.genProgress.call(this) |
| 67 |
|
|
| 68 |
if (!render) return null |
|
| 69 |
|
|
| 70 | 1 |
return this.$createElement('div', { |
| 71 |
staticClass: 'v-card__progress', |
|
| 72 |
key: 'progress', |
|
| 73 |
}, [render]) |
|
| 74 |
},
|
|
| 75 |
},
|
|
| 76 |
|
|
| 77 | 1 |
render (h): VNode { |
| 78 | 1 |
const { tag, data } = this.generateRouteLink() |
| 79 |
|
|
| 80 | 1 |
data.style = this.styles |
| 81 |
|
|
| 82 |
if (this.isClickable) { |
|
| 83 |
data.attrs = data.attrs || {} |
|
| 84 | 1 |
data.attrs.tabindex = 0 |
| 85 |
}
|
|
| 86 |
|
|
| 87 | 1 |
return h(tag, this.setBackgroundColor(this.color, data), [ |
| 88 |
this.genProgress(), |
|
| 89 |
this.$slots.default, |
|
| 90 |
])
|
|
| 91 |
},
|
|
| 92 |
})
|
Read our documentation on viewing source code .