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

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