1
// Styles
2
import './VSheet.sass'
3

4
// Mixins
5
import BindsAttrs from '../../mixins/binds-attrs'
6
import Colorable from '../../mixins/colorable'
7
import Elevatable from '../../mixins/elevatable'
8
import Measurable from '../../mixins/measurable'
9
import Roundable from '../../mixins/roundable'
10
import Themeable from '../../mixins/themeable'
11

12
// Helpers
13
import mixins from '../../util/mixins'
14

15
// Types
16
import { VNode } from 'vue'
17

18
/* @vue/component */
19
export default mixins(
20
  BindsAttrs,
21
  Colorable,
22
  Elevatable,
23
  Measurable,
24
  Roundable,
25
  Themeable
26
).extend({
27
  name: 'v-sheet',
28

29
  props: {
30
    outlined: Boolean,
31
    shaped: Boolean,
32
    tag: {
33
      type: String,
34
      default: 'div',
35
    },
36
  },
37

38
  computed: {
39 1
    classes (): object {
40 1
      return {
41
        'v-sheet': true,
42
        'v-sheet--outlined': this.outlined,
43
        'v-sheet--shaped': this.shaped,
44
        ...this.themeClasses,
45
        ...this.elevationClasses,
46
        ...this.roundedClasses,
47
      }
48
    },
49 1
    styles (): object {
50 1
      return this.measurableStyles
51
    },
52
  },
53

54 1
  render (h): VNode {
55 1
    const data = {
56
      class: this.classes,
57
      style: this.styles,
58
      on: this.listeners$,
59
    }
60

61 1
    return h(
62
      this.tag,
63
      this.setBackgroundColor(this.color, data),
64
      this.$slots.default
65
    )
66
  },
67
})

Read our documentation on viewing source code .

Loading