Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VEditDialog.js 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import '../../../src/stylus/components/_small-dialog.styl';
  2. // Mixins
  3. import Returnable from '../../mixins/returnable';
  4. import Themeable from '../../mixins/themeable';
  5. // Utils
  6. import { keyCodes } from '../../util/helpers';
  7. import VBtn from '../VBtn';
  8. import VMenu from '../VMenu';
  9. /* @vue/component */
  10. export default {
  11. name: 'v-edit-dialog',
  12. mixins: [Returnable, Themeable],
  13. props: {
  14. cancelText: {
  15. default: 'Cancel'
  16. },
  17. large: Boolean,
  18. lazy: Boolean,
  19. persistent: Boolean,
  20. saveText: {
  21. default: 'Save'
  22. },
  23. transition: {
  24. type: String,
  25. default: 'slide-x-reverse-transition'
  26. }
  27. },
  28. data: function data() {
  29. return {
  30. isActive: false
  31. };
  32. },
  33. watch: {
  34. isActive: function isActive(val) {
  35. if (val) {
  36. this.$emit('open');
  37. setTimeout(this.focus, 50); // Give DOM time to paint
  38. } else {
  39. this.$emit('close');
  40. }
  41. }
  42. },
  43. methods: {
  44. cancel: function cancel() {
  45. this.isActive = false;
  46. this.$emit('cancel');
  47. },
  48. focus: function focus() {
  49. var input = this.$refs.content.querySelector('input');
  50. input && input.focus();
  51. },
  52. genButton: function genButton(fn, text) {
  53. return this.$createElement(VBtn, {
  54. props: {
  55. flat: true,
  56. color: 'primary',
  57. light: true
  58. },
  59. on: { click: fn }
  60. }, text);
  61. },
  62. genActions: function genActions() {
  63. var _this = this;
  64. return this.$createElement('div', {
  65. 'class': 'v-small-dialog__actions'
  66. }, [this.genButton(this.cancel, this.cancelText), this.genButton(function () {
  67. _this.save(_this.returnValue);
  68. _this.$emit('save');
  69. }, this.saveText)]);
  70. },
  71. genContent: function genContent() {
  72. var _this2 = this;
  73. return this.$createElement('div', {
  74. on: {
  75. keydown: function keydown(e) {
  76. var input = _this2.$refs.content.querySelector('input');
  77. e.keyCode === keyCodes.esc && _this2.cancel();
  78. if (e.keyCode === keyCodes.enter && input) {
  79. _this2.save(input.value);
  80. _this2.$emit('save');
  81. }
  82. }
  83. },
  84. ref: 'content'
  85. }, [this.$slots.input]);
  86. }
  87. },
  88. render: function render(h) {
  89. var _this3 = this;
  90. return h(VMenu, {
  91. staticClass: 'v-small-dialog',
  92. class: this.themeClasses,
  93. props: {
  94. contentClass: 'v-small-dialog__content',
  95. transition: this.transition,
  96. origin: 'top right',
  97. right: true,
  98. value: this.isActive,
  99. closeOnClick: !this.persistent,
  100. closeOnContentClick: false,
  101. lazy: this.lazy,
  102. light: this.light,
  103. dark: this.dark
  104. },
  105. on: {
  106. input: function input(val) {
  107. return _this3.isActive = val;
  108. }
  109. }
  110. }, [h('a', {
  111. slot: 'activator'
  112. }, this.$slots.default), this.genContent(), this.large ? this.genActions() : null]);
  113. }
  114. };
  115. //# sourceMappingURL=VEditDialog.js.map