VCalendarIntervalEvent.mjs 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import { createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VCalendarIntervalEvent.css";
  4. // Components
  5. import { VSheet } from "../../components/VSheet/index.mjs"; // Composables
  6. import { useDate } from "../../composables/date/index.mjs"; // Utilities
  7. import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
  8. export const makeVCalendarIntervalEventProps = propsFactory({
  9. allDay: Boolean,
  10. interval: Object,
  11. intervalDivisions: {
  12. type: Number,
  13. required: true
  14. },
  15. intervalDuration: {
  16. type: Number,
  17. required: true
  18. },
  19. intervalHeight: {
  20. type: Number,
  21. required: true
  22. },
  23. event: Object
  24. }, 'VCalendarIntervalEvent');
  25. export const VCalendarIntervalEvent = genericComponent()({
  26. name: 'VCalendarIntervalEvent',
  27. props: makeVCalendarIntervalEventProps(),
  28. setup(props) {
  29. const adapter = useDate();
  30. const calcHeight = () => {
  31. if (!props.event?.first && !props.event?.last || adapter.isEqual(props.event?.start, props.interval?.start)) {
  32. return {
  33. height: '100%',
  34. margin: convertToUnit(0)
  35. };
  36. } else {
  37. const {
  38. height,
  39. margin
  40. } = Array.from({
  41. length: props.intervalDivisions
  42. }, x => x * (props.intervalDuration / props.intervalDivisions)).reduce((total, div, index) => {
  43. if (adapter.isBefore(adapter.addMinutes(props.interval?.start, div), props.event?.start)) {
  44. return {
  45. height: convertToUnit(props.intervalHeight / props.intervalDivisions * index),
  46. margin: convertToUnit(props.intervalHeight / props.intervalDivisions * index)
  47. };
  48. }
  49. return {
  50. height: total.height,
  51. margin: total.margin
  52. };
  53. }, {
  54. height: '',
  55. margin: ''
  56. });
  57. return {
  58. height,
  59. margin
  60. };
  61. }
  62. };
  63. useRender(() => {
  64. return _createVNode(VSheet, {
  65. "height": calcHeight().height,
  66. "density": "comfortable",
  67. "style": `margin-top: ${calcHeight().margin}`,
  68. "class": "v-calendar-internal-event",
  69. "color": props.event?.color ?? undefined,
  70. "rounded": props.event?.first && props.event?.last ? true : props.event?.first ? 't' : props.event?.last ? 'b' : false
  71. }, {
  72. default: () => [props.event?.first ? props.event?.title : '']
  73. });
  74. });
  75. return {};
  76. }
  77. });
  78. //# sourceMappingURL=VCalendarIntervalEvent.mjs.map