vuetifyjs / vuetify
1
// Styles
2 1
import './VEditDialog.sass'
3

4
// Mixins
5 1
import Returnable from '../../mixins/returnable'
6 1
import Themeable from '../../mixins/themeable'
7

8
// Utils
9 1
import { keyCodes } from '../../util/helpers'
10

11
// Component
12 1
import VBtn from '../VBtn'
13 1
import VMenu from '../VMenu'
14

15
// Types
16
import { VNode, VNodeChildren } from 'vue'
17 1
import mixins from '../../util/mixins'
18

19
/* @vue/component */
20 1
export default mixins(Returnable, Themeable).extend({
21
  name: 'v-edit-dialog',
22

23
  props: {
24
    cancelText: {
25
      default: 'Cancel',
26
    },
27
    large: Boolean,
28
    eager: Boolean,
29
    persistent: Boolean,
30
    saveText: {
31
      default: 'Save',
32
    },
33
    transition: {
34
      type: String,
35
      default: 'slide-x-reverse-transition',
36
    },
37
  },
38

39 1
  data () {
40 1
    return {
41
      isActive: false,
42
    }
43
  },
44

45
  watch: {
46 1
    isActive (val) {
47 1
      if (val) {
48 1
        this.$emit('open')
49 1
        setTimeout(this.focus, 50) // Give DOM time to paint
50
      } else {
51 1
        this.$emit('close')
52
      }
53
    },
54
  },
55

56
  methods: {
57 1
    cancel () {
58 1
      this.isActive = false
59 1
      this.$emit('cancel')
60
    },
61 1
    focus () {
62 1
      const input = (this.$refs.content as Element).querySelector('input')
63 1
      input && input.focus()
64
    },
65 1
    genButton (fn: Function, text: VNodeChildren): VNode {
66 1
      return this.$createElement(VBtn, {
67
        props: {
68
          text: true,
69
          color: 'primary',
70
          light: true,
71
        },
72
        on: { click: fn },
73
      }, text)
74
    },
75 1
    genActions (): VNode {
76 1
      return this.$createElement('div', {
77
        class: 'v-small-dialog__actions',
78
      }, [
79
        this.genButton(this.cancel, this.cancelText),
80 1
        this.genButton(() => {
81 1
          this.save(this.returnValue)
82 1
          this.$emit('save')
83
        }, this.saveText),
84
      ])
85
    },
86 1
    genContent (): VNode {
87 1
      return this.$createElement('div', {
88
        staticClass: 'v-small-dialog__content',
89
        on: {
90 1
          keydown: (e: KeyboardEvent) => {
91 1
            e.keyCode === keyCodes.esc && this.cancel()
92 1
            if (e.keyCode === keyCodes.enter) {
93 1
              this.save(this.returnValue)
94 1
              this.$emit('save')
95
            }
96
          },
97
        },
98
        ref: 'content',
99
      }, [this.$slots.input])
100
    },
101
  },
102

103 1
  render (h): VNode {
104 1
    return h(VMenu, {
105
      staticClass: 'v-small-dialog',
106
      class: this.themeClasses,
107
      props: {
108
        contentClass: 'v-small-dialog__menu-content',
109
        transition: this.transition,
110
        origin: 'top right',
111
        right: true,
112
        value: this.isActive,
113
        closeOnClick: !this.persistent,
114
        closeOnContentClick: false,
115
        eager: this.eager,
116
        light: this.light,
117
        dark: this.dark,
118
      },
119
      on: {
120 1
        input: (val: boolean) => (this.isActive = val),
121
      },
122
      scopedSlots: {
123 1
        activator: ({ on }) => {
124 1
          return h('div', {
125
            staticClass: 'v-small-dialog__activator',
126
            on,
127
          }, [
128
            h('span', {
129
              staticClass: 'v-small-dialog__activator__content',
130
            }, this.$slots.default),
131
          ])
132
        },
133
      },
134
    }, [
135
      this.genContent(),
136 1
      this.large ? this.genActions() : null,
137
    ])
138
  },
139
})

Read our documentation on viewing source code .

Loading