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.

date-picker-table.js 8.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  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. // Utils
  9. require('../../../../src/stylus/components/_date-picker-table.styl');
  10. var _touch = require('../../../directives/touch');
  11. var _touch2 = _interopRequireDefault(_touch);
  12. var _colorable = require('../../../mixins/colorable');
  13. var _colorable2 = _interopRequireDefault(_colorable);
  14. var _themeable = require('../../../mixins/themeable');
  15. var _themeable2 = _interopRequireDefault(_themeable);
  16. var _isDateAllowed = require('../util/isDateAllowed');
  17. var _isDateAllowed2 = _interopRequireDefault(_isDateAllowed);
  18. var _mixins = require('../../../util/mixins');
  19. var _mixins2 = _interopRequireDefault(_mixins);
  20. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  21. exports.default = (0, _mixins2.default)(_colorable2.default, _themeable2.default
  22. /* @vue/component */
  23. ).extend({
  24. directives: { Touch: _touch2.default },
  25. props: {
  26. allowedDates: Function,
  27. current: String,
  28. disabled: Boolean,
  29. format: Function,
  30. events: {
  31. type: [Array, Function, Object],
  32. default: function _default() {
  33. return null;
  34. }
  35. },
  36. eventColor: {
  37. type: [Array, Function, Object, String],
  38. default: function _default() {
  39. return 'warning';
  40. }
  41. },
  42. locale: {
  43. type: String,
  44. default: 'en-us'
  45. },
  46. min: String,
  47. max: String,
  48. readonly: Boolean,
  49. scrollable: Boolean,
  50. tableDate: {
  51. type: String,
  52. required: true
  53. },
  54. value: [String, Array]
  55. },
  56. data: function data() {
  57. return {
  58. isReversing: false
  59. };
  60. },
  61. computed: {
  62. computedTransition: function computedTransition() {
  63. return this.isReversing === !this.$vuetify.rtl ? 'tab-reverse-transition' : 'tab-transition';
  64. },
  65. displayedMonth: function displayedMonth() {
  66. return Number(this.tableDate.split('-')[1]) - 1;
  67. },
  68. displayedYear: function displayedYear() {
  69. return Number(this.tableDate.split('-')[0]);
  70. }
  71. },
  72. watch: {
  73. tableDate: function tableDate(newVal, oldVal) {
  74. this.isReversing = newVal < oldVal;
  75. }
  76. },
  77. methods: {
  78. genButtonClasses: function genButtonClasses(isAllowed, isFloating, isSelected, isCurrent) {
  79. return _extends({
  80. 'v-btn--active': isSelected,
  81. 'v-btn--flat': !isSelected,
  82. 'v-btn--icon': isSelected && isAllowed && isFloating,
  83. 'v-btn--floating': isFloating,
  84. 'v-btn--depressed': !isFloating && isSelected,
  85. 'v-btn--disabled': !isAllowed || this.disabled && isSelected,
  86. 'v-btn--outline': isCurrent && !isSelected
  87. }, this.themeClasses);
  88. },
  89. genButtonEvents: function genButtonEvents(value, isAllowed, mouseEventType) {
  90. var _this = this;
  91. if (this.disabled) return undefined;
  92. return {
  93. click: function click() {
  94. isAllowed && !_this.readonly && _this.$emit('input', value);
  95. _this.$emit('click:' + mouseEventType, value);
  96. },
  97. dblclick: function dblclick() {
  98. return _this.$emit('dblclick:' + mouseEventType, value);
  99. }
  100. };
  101. },
  102. genButton: function genButton(value, isFloating, mouseEventType, formatter) {
  103. var isAllowed = (0, _isDateAllowed2.default)(value, this.min, this.max, this.allowedDates);
  104. var isSelected = value === this.value || Array.isArray(this.value) && this.value.indexOf(value) !== -1;
  105. var isCurrent = value === this.current;
  106. var setColor = isSelected ? this.setBackgroundColor : this.setTextColor;
  107. var color = (isSelected || isCurrent) && (this.color || 'accent');
  108. return this.$createElement('button', setColor(color, {
  109. staticClass: 'v-btn',
  110. 'class': this.genButtonClasses(isAllowed, isFloating, isSelected, isCurrent),
  111. attrs: {
  112. type: 'button'
  113. },
  114. domProps: {
  115. disabled: this.disabled || !isAllowed
  116. },
  117. on: this.genButtonEvents(value, isAllowed, mouseEventType)
  118. }), [this.$createElement('div', {
  119. staticClass: 'v-btn__content'
  120. }, [formatter(value)]), this.genEvents(value)]);
  121. },
  122. getEventColors: function getEventColors(date) {
  123. var arrayize = function arrayize(v) {
  124. return Array.isArray(v) ? v : [v];
  125. };
  126. var eventData = void 0;
  127. var eventColors = [];
  128. if (Array.isArray(this.events)) {
  129. eventData = this.events.includes(date);
  130. } else if (this.events instanceof Function) {
  131. eventData = this.events(date) || false;
  132. } else if (this.events) {
  133. eventData = this.events[date] || false;
  134. } else {
  135. eventData = false;
  136. }
  137. if (!eventData) {
  138. return [];
  139. } else if (eventData !== true) {
  140. eventColors = arrayize(eventData);
  141. } else if (typeof this.eventColor === 'string') {
  142. eventColors = [this.eventColor];
  143. } else if (typeof this.eventColor === 'function') {
  144. eventColors = arrayize(this.eventColor(date));
  145. } else if (Array.isArray(this.eventColor)) {
  146. eventColors = this.eventColor;
  147. } else {
  148. eventColors = arrayize(this.eventColor[date]);
  149. }
  150. return eventColors.filter(function (v) {
  151. return v;
  152. });
  153. },
  154. genEvents: function genEvents(date) {
  155. var _this2 = this;
  156. var eventColors = this.getEventColors(date);
  157. return eventColors.length ? this.$createElement('div', {
  158. staticClass: 'v-date-picker-table__events'
  159. }, eventColors.map(function (color) {
  160. return _this2.$createElement('div', _this2.setBackgroundColor(color));
  161. })) : null;
  162. },
  163. wheel: function wheel(e, calculateTableDate) {
  164. e.preventDefault();
  165. this.$emit('tableDate', calculateTableDate(e.deltaY));
  166. },
  167. touch: function touch(value, calculateTableDate) {
  168. this.$emit('tableDate', calculateTableDate(value));
  169. },
  170. genTable: function genTable(staticClass, children, calculateTableDate) {
  171. var _this3 = this;
  172. var transition = this.$createElement('transition', {
  173. props: { name: this.computedTransition }
  174. }, [this.$createElement('table', { key: this.tableDate }, children)]);
  175. var touchDirective = {
  176. name: 'touch',
  177. value: {
  178. left: function left(e) {
  179. return e.offsetX < -15 && _this3.touch(1, calculateTableDate);
  180. },
  181. right: function right(e) {
  182. return e.offsetX > 15 && _this3.touch(-1, calculateTableDate);
  183. }
  184. }
  185. };
  186. return this.$createElement('div', {
  187. staticClass: staticClass,
  188. class: _extends({
  189. 'v-date-picker-table--disabled': this.disabled
  190. }, this.themeClasses),
  191. on: !this.disabled && this.scrollable ? {
  192. wheel: function wheel(e) {
  193. return _this3.wheel(e, calculateTableDate);
  194. }
  195. } : undefined,
  196. directives: [touchDirective]
  197. }, [transition]);
  198. }
  199. }
  200. });
  201. //# sourceMappingURL=date-picker-table.js.map