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.

VPagination.js 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  2. function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
  3. import '../../../src/stylus/components/_pagination.styl';
  4. import VIcon from '../VIcon';
  5. // Directives
  6. import Resize from '../../directives/resize';
  7. // Mixins
  8. import mixins from '../../util/mixins';
  9. import Colorable from '../../mixins/colorable';
  10. import Themeable from '../../mixins/themeable';
  11. /* @vue/component */
  12. export default mixins(Colorable, Themeable).extend({
  13. name: 'v-pagination',
  14. directives: { Resize: Resize },
  15. props: {
  16. circle: Boolean,
  17. disabled: Boolean,
  18. length: {
  19. type: Number,
  20. default: 0,
  21. validator: function validator(val) {
  22. return val % 1 === 0;
  23. }
  24. },
  25. totalVisible: [Number, String],
  26. nextIcon: {
  27. type: String,
  28. default: '$vuetify.icons.next'
  29. },
  30. prevIcon: {
  31. type: String,
  32. default: '$vuetify.icons.prev'
  33. },
  34. value: {
  35. type: Number,
  36. default: 0
  37. }
  38. },
  39. data: function data() {
  40. return {
  41. maxButtons: 0,
  42. selected: null
  43. };
  44. },
  45. computed: {
  46. classes: function classes() {
  47. return _extends({
  48. 'v-pagination': true,
  49. 'v-pagination--circle': this.circle,
  50. 'v-pagination--disabled': this.disabled
  51. }, this.themeClasses);
  52. },
  53. items: function items() {
  54. var maxLength = parseInt(this.totalVisible, 10) || this.maxButtons;
  55. if (this.length <= maxLength) {
  56. return this.range(1, this.length);
  57. }
  58. var even = maxLength % 2 === 0 ? 1 : 0;
  59. var left = Math.floor(maxLength / 2);
  60. var right = this.length - left + 1 + even;
  61. if (this.value > left && this.value < right) {
  62. var start = this.value - left + 2;
  63. var end = this.value + left - 2 - even;
  64. return [1, '...'].concat(_toConsumableArray(this.range(start, end)), ['...', this.length]);
  65. } else if (this.value === left) {
  66. var _end = this.value + left - 1 - even;
  67. return [].concat(_toConsumableArray(this.range(1, _end)), ['...', this.length]);
  68. } else if (this.value === right) {
  69. var _start = this.value - left + 1;
  70. return [1, '...'].concat(_toConsumableArray(this.range(_start, this.length)));
  71. } else {
  72. return [].concat(_toConsumableArray(this.range(1, left)), ['...'], _toConsumableArray(this.range(right, this.length)));
  73. }
  74. }
  75. },
  76. watch: {
  77. value: function value() {
  78. this.init();
  79. }
  80. },
  81. mounted: function mounted() {
  82. this.init();
  83. },
  84. methods: {
  85. init: function init() {
  86. var _this = this;
  87. this.selected = null;
  88. this.$nextTick(this.onResize);
  89. // TODO: Change this (f75dee3a, cbdf7caa)
  90. setTimeout(function () {
  91. return _this.selected = _this.value;
  92. }, 100);
  93. },
  94. onResize: function onResize() {
  95. var width = this.$el && this.$el.parentElement ? this.$el.parentElement.clientWidth : window.innerWidth;
  96. this.maxButtons = Math.floor((width - 96) / 42);
  97. },
  98. next: function next(e) {
  99. e.preventDefault();
  100. this.$emit('input', this.value + 1);
  101. this.$emit('next');
  102. },
  103. previous: function previous(e) {
  104. e.preventDefault();
  105. this.$emit('input', this.value - 1);
  106. this.$emit('previous');
  107. },
  108. range: function range(from, to) {
  109. var range = [];
  110. from = from > 0 ? from : 1;
  111. for (var i = from; i <= to; i++) {
  112. range.push(i);
  113. }
  114. return range;
  115. },
  116. genIcon: function genIcon(h, icon, disabled, fn) {
  117. return h('li', [h('button', {
  118. staticClass: 'v-pagination__navigation',
  119. class: {
  120. 'v-pagination__navigation--disabled': disabled
  121. },
  122. attrs: {
  123. type: 'button'
  124. },
  125. on: disabled ? {} : { click: fn }
  126. }, [h(VIcon, [icon])])]);
  127. },
  128. genItem: function genItem(h, i) {
  129. var _this2 = this;
  130. var color = i === this.value && (this.color || 'primary');
  131. return h('button', this.setBackgroundColor(color, {
  132. staticClass: 'v-pagination__item',
  133. class: {
  134. 'v-pagination__item--active': i === this.value
  135. },
  136. attrs: {
  137. type: 'button'
  138. },
  139. on: {
  140. click: function click() {
  141. return _this2.$emit('input', i);
  142. }
  143. }
  144. }), [i.toString()]);
  145. },
  146. genItems: function genItems(h) {
  147. var _this3 = this;
  148. return this.items.map(function (i, index) {
  149. return h('li', { key: index }, [isNaN(Number(i)) ? h('span', { class: 'v-pagination__more' }, [i.toString()]) : _this3.genItem(h, i)]);
  150. });
  151. }
  152. },
  153. render: function render(h) {
  154. var children = [this.genIcon(h, this.$vuetify.rtl ? this.nextIcon : this.prevIcon, this.value <= 1, this.previous), this.genItems(h), this.genIcon(h, this.$vuetify.rtl ? this.prevIcon : this.nextIcon, this.value >= this.length, this.next)];
  155. return h('ul', {
  156. directives: [{
  157. modifiers: { quiet: true },
  158. name: 'resize',
  159. value: this.onResize
  160. }],
  161. class: this.classes
  162. }, children);
  163. }
  164. });
  165. //# sourceMappingURL=VPagination.js.map