VCalendarInterval.mjs 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. import { createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VCalendarInterval.css";
  4. // Components
  5. import { VCalendarIntervalEvent } from "./VCalendarIntervalEvent.mjs"; // Composables
  6. import { useDate } from "../../composables/date/index.mjs"; // Utilities
  7. import { computed } from 'vue';
  8. import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
  9. export const makeVCalendarIntervalProps = propsFactory({
  10. day: {
  11. type: Object,
  12. default: () => ({})
  13. },
  14. dayIndex: Number,
  15. events: Array,
  16. intervalDivisions: {
  17. type: Number,
  18. default: 2
  19. },
  20. intervalDuration: {
  21. type: Number,
  22. default: 60
  23. },
  24. intervalHeight: {
  25. type: Number,
  26. default: 48
  27. },
  28. intervalFormat: {
  29. type: [String, Function],
  30. default: 'fullTime12h'
  31. },
  32. intervalStart: {
  33. type: Number,
  34. default: 0
  35. }
  36. }, 'VCalendarInterval');
  37. export const VCalendarInterval = genericComponent()({
  38. name: 'VCalendarInterval',
  39. props: {
  40. index: {
  41. type: Number,
  42. required: true
  43. },
  44. ...makeVCalendarIntervalProps()
  45. },
  46. setup(props, _ref) {
  47. let {
  48. emit,
  49. slots
  50. } = _ref;
  51. const adapter = useDate();
  52. const interval = computed(() => {
  53. const start = adapter.addMinutes(adapter.startOfDay(props.day.date), props.intervalDuration * (props.index + props.intervalStart));
  54. const end = adapter.addMinutes(adapter.startOfDay(props.day.date), props.intervalDuration * (props.index + props.intervalStart + 1) - 1);
  55. return {
  56. ...props.day,
  57. label: adapter.format(start, 'fullTime24h'),
  58. start,
  59. end,
  60. events: props.events ? props.events.filter(e => !e.allDay && (adapter.isEqual(start, e.start) || adapter.isWithinRange(e.start, [start, end]) || adapter.isWithinRange(start, [e.start, e.end]) || adapter.isEqual(end, e.end))).map(e => {
  61. return {
  62. ...e,
  63. first: adapter.isEqual(start, e.start) || adapter.isWithinRange(e.start, [start, end]),
  64. last: adapter.isEqual(end, e.end) || adapter.isWithinRange(e.end, [start, end])
  65. };
  66. }) : []
  67. };
  68. });
  69. useRender(() => {
  70. return props.dayIndex === 0 ? _createVNode("div", {
  71. "class": "v-calendar-day__row-with-label",
  72. "style": `height: ${convertToUnit(props.intervalHeight)}`
  73. }, [_createVNode("div", {
  74. "class": "v-calendar-day__row-label"
  75. }, [_createVNode("slot", {
  76. "name": "intervalFormat",
  77. "interval": interval.value
  78. }, [props.index ? props.intervalFormat ? typeof props.intervalFormat === 'string' ? adapter.format(interval.value.start, 'hours12h') : props.intervalFormat(interval.value) : interval.value.label : ''])]), _createVNode("div", {
  79. "class": "v-calendar-day__row-hairline"
  80. }, null), _createVNode("div", {
  81. "class": ['v-calendar-day__row-content', interval.value.events.some(e => !e.last) ? 'v-calendar-day__row-content-through' : '']
  82. }, [_createVNode("slot", {
  83. "name": "intervalBody",
  84. "interval": interval.value
  85. }, [interval.value.events?.map(event => _createVNode(VCalendarIntervalEvent, {
  86. "event": event,
  87. "interval": interval.value,
  88. "intervalDivisions": props.intervalDivisions,
  89. "intervalDuration": props.intervalDuration,
  90. "intervalHeight": props.intervalHeight
  91. }, null))])])]) : _createVNode("div", {
  92. "class": "v-calendar-day__row-without-label",
  93. "style": `height: ${convertToUnit(props.intervalHeight)}`
  94. }, [_createVNode("div", {
  95. "class": ['v-calendar-day__row-content', interval.value.events.some(e => !e.last) ? 'v-calendar-day__row-content-through' : '']
  96. }, [_createVNode("slot", {
  97. "name": "intervalBody",
  98. "interval": interval.value
  99. }, [interval.value.events?.filter(event => !event.allDay).map(event => _createVNode(VCalendarIntervalEvent, {
  100. "event": event,
  101. "interval": interval.value,
  102. "intervalDivisions": props.intervalDivisions,
  103. "intervalDuration": props.intervalDuration,
  104. "intervalHeight": props.intervalHeight
  105. }, null))])])]);
  106. });
  107. return {
  108. interval
  109. };
  110. }
  111. });
  112. //# sourceMappingURL=VCalendarInterval.mjs.map