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.

VWindow.js 3.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. // Styles
  2. import '../../../src/stylus/components/_windows.styl';
  3. // Components
  4. import { BaseItemGroup } from '../VItemGroup/VItemGroup';
  5. // Directives
  6. import Touch from '../../directives/touch';
  7. /* @vue/component */
  8. export default BaseItemGroup.extend({
  9. name: 'v-window',
  10. provide: function provide() {
  11. return {
  12. windowGroup: this
  13. };
  14. },
  15. directives: { Touch: Touch },
  16. props: {
  17. mandatory: {
  18. type: Boolean,
  19. default: true
  20. },
  21. reverse: {
  22. type: Boolean,
  23. default: undefined
  24. },
  25. touch: Object,
  26. touchless: Boolean,
  27. value: {
  28. required: false
  29. },
  30. vertical: Boolean
  31. },
  32. data: function data() {
  33. return {
  34. internalHeight: undefined,
  35. isActive: false,
  36. isBooted: false,
  37. isReverse: false
  38. };
  39. },
  40. computed: {
  41. computedTransition: function computedTransition() {
  42. if (!this.isBooted) return '';
  43. var axis = this.vertical ? 'y' : 'x';
  44. var direction = this.internalReverse === !this.$vuetify.rtl ? '-reverse' : '';
  45. return 'v-window-' + axis + direction + '-transition';
  46. },
  47. internalIndex: function internalIndex() {
  48. var _this = this;
  49. return this.items.findIndex(function (item, i) {
  50. return _this.internalValue === _this.getValue(item, i);
  51. });
  52. },
  53. internalReverse: function internalReverse() {
  54. if (this.reverse !== undefined) return this.reverse;
  55. return this.isReverse;
  56. }
  57. },
  58. watch: {
  59. internalIndex: 'updateReverse'
  60. },
  61. mounted: function mounted() {
  62. var _this2 = this;
  63. this.$nextTick(function () {
  64. return _this2.isBooted = true;
  65. });
  66. },
  67. methods: {
  68. genContainer: function genContainer() {
  69. return this.$createElement('div', {
  70. staticClass: 'v-window__container',
  71. class: {
  72. 'v-window__container--is-active': this.isActive
  73. },
  74. style: {
  75. height: this.internalHeight
  76. }
  77. }, this.$slots.default);
  78. },
  79. next: function next() {
  80. this.isReverse = false;
  81. var nextIndex = (this.internalIndex + 1) % this.items.length;
  82. var item = this.items[nextIndex];
  83. this.internalValue = this.getValue(item, nextIndex);
  84. },
  85. prev: function prev() {
  86. this.isReverse = true;
  87. var lastIndex = (this.internalIndex + this.items.length - 1) % this.items.length;
  88. var item = this.items[lastIndex];
  89. this.internalValue = this.getValue(item, lastIndex);
  90. },
  91. updateReverse: function updateReverse(val, oldVal) {
  92. this.isReverse = val < oldVal;
  93. }
  94. },
  95. render: function render(h) {
  96. var data = {
  97. staticClass: 'v-window',
  98. directives: []
  99. };
  100. if (!this.touchless) {
  101. var value = this.touch || {
  102. left: this.next,
  103. right: this.prev
  104. };
  105. data.directives.push({
  106. name: 'touch',
  107. value: value
  108. });
  109. }
  110. return h('div', data, [this.genContainer()]);
  111. }
  112. });
  113. //# sourceMappingURL=VWindow.js.map