135 lines
3 KiB
JavaScript
135 lines
3 KiB
JavaScript
|
// Styles
|
||
|
|
import "../../../src/components/VDataTable/VEditDialog.sass"; // Mixins
|
||
|
|
|
||
|
|
import Returnable from '../../mixins/returnable';
|
||
|
|
import Themeable from '../../mixins/themeable'; // Utils
|
||
|
|
|
||
|
|
import { keyCodes } from '../../util/helpers'; // Component
|
||
|
|
|
||
|
|
import VBtn from '../VBtn';
|
||
|
|
import VMenu from '../VMenu';
|
||
|
|
import mixins from '../../util/mixins';
|
||
|
|
/* @vue/component */
|
||
|
|
|
||
|
|
export default mixins(Returnable, Themeable).extend({
|
||
|
|
name: 'v-edit-dialog',
|
||
|
|
props: {
|
||
|
|
cancelText: {
|
||
|
|
default: 'Cancel'
|
||
|
|
},
|
||
|
|
large: Boolean,
|
||
|
|
eager: Boolean,
|
||
|
|
persistent: Boolean,
|
||
|
|
saveText: {
|
||
|
|
default: 'Save'
|
||
|
|
},
|
||
|
|
transition: {
|
||
|
|
type: String,
|
||
|
|
default: 'slide-x-reverse-transition'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isActive: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
watch: {
|
||
|
|
isActive(val) {
|
||
|
|
if (val) {
|
||
|
|
this.$emit('open');
|
||
|
|
setTimeout(this.focus, 50); // Give DOM time to paint
|
||
|
|
} else {
|
||
|
|
this.$emit('close');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
cancel() {
|
||
|
|
this.isActive = false;
|
||
|
|
this.$emit('cancel');
|
||
|
|
},
|
||
|
|
|
||
|
|
focus() {
|
||
|
|
const input = this.$refs.content.querySelector('input');
|
||
|
|
input && input.focus();
|
||
|
|
},
|
||
|
|
|
||
|
|
genButton(fn, text) {
|
||
|
|
return this.$createElement(VBtn, {
|
||
|
|
props: {
|
||
|
|
text: true,
|
||
|
|
color: 'primary',
|
||
|
|
light: true
|
||
|
|
},
|
||
|
|
on: {
|
||
|
|
click: fn
|
||
|
|
}
|
||
|
|
}, text);
|
||
|
|
},
|
||
|
|
|
||
|
|
genActions() {
|
||
|
|
return this.$createElement('div', {
|
||
|
|
class: 'v-small-dialog__actions'
|
||
|
|
}, [this.genButton(this.cancel, this.cancelText), this.genButton(() => {
|
||
|
|
this.save(this.returnValue);
|
||
|
|
this.$emit('save');
|
||
|
|
}, this.saveText)]);
|
||
|
|
},
|
||
|
|
|
||
|
|
genContent() {
|
||
|
|
return this.$createElement('div', {
|
||
|
|
staticClass: 'v-small-dialog__content',
|
||
|
|
on: {
|
||
|
|
keydown: e => {
|
||
|
|
const input = this.$refs.content.querySelector('input');
|
||
|
|
e.keyCode === keyCodes.esc && this.cancel();
|
||
|
|
|
||
|
|
if (e.keyCode === keyCodes.enter && input) {
|
||
|
|
this.save(input.value);
|
||
|
|
this.$emit('save');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
ref: 'content'
|
||
|
|
}, [this.$slots.input]);
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
render(h) {
|
||
|
|
return h(VMenu, {
|
||
|
|
staticClass: 'v-small-dialog',
|
||
|
|
class: this.themeClasses,
|
||
|
|
props: {
|
||
|
|
contentClass: 'v-small-dialog__menu-content',
|
||
|
|
transition: this.transition,
|
||
|
|
origin: 'top right',
|
||
|
|
right: true,
|
||
|
|
value: this.isActive,
|
||
|
|
closeOnClick: !this.persistent,
|
||
|
|
closeOnContentClick: false,
|
||
|
|
eager: this.eager,
|
||
|
|
light: this.light,
|
||
|
|
dark: this.dark
|
||
|
|
},
|
||
|
|
on: {
|
||
|
|
input: val => this.isActive = val
|
||
|
|
},
|
||
|
|
scopedSlots: {
|
||
|
|
activator: ({
|
||
|
|
on
|
||
|
|
}) => {
|
||
|
|
return h('span', {
|
||
|
|
staticClass: 'v-small-dialog__activator',
|
||
|
|
on
|
||
|
|
}, this.$slots.default);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [this.genContent(), this.large ? this.genActions() : null]);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=VEditDialog.js.map
|