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 1
      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 1
      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 1
    if (this.isClickable) {
83 1
      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 .

Loading