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.7KB

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