CalendarDay.mjs 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. import { computed, defineComponent, createVNode as _createVNode } from "vue";
  2. import { makeNumberProp, createNamespace, makeRequiredProp } from "../utils/index.mjs";
  3. import { bem } from "./utils.mjs";
  4. const [name] = createNamespace("calendar-day");
  5. var stdin_default = defineComponent({
  6. name,
  7. props: {
  8. item: makeRequiredProp(Object),
  9. color: String,
  10. index: Number,
  11. offset: makeNumberProp(0),
  12. rowHeight: String
  13. },
  14. emits: ["click", "clickDisabledDate"],
  15. setup(props, {
  16. emit,
  17. slots
  18. }) {
  19. const style = computed(() => {
  20. var _a;
  21. const {
  22. item,
  23. index,
  24. color,
  25. offset,
  26. rowHeight
  27. } = props;
  28. const style2 = {
  29. height: rowHeight
  30. };
  31. if (item.type === "placeholder") {
  32. style2.width = "100%";
  33. return style2;
  34. }
  35. if (index === 0) {
  36. style2.marginLeft = `${100 * offset / 7}%`;
  37. }
  38. if (color) {
  39. switch (item.type) {
  40. case "end":
  41. case "start":
  42. case "start-end":
  43. case "multiple-middle":
  44. case "multiple-selected":
  45. style2.background = color;
  46. break;
  47. case "middle":
  48. style2.color = color;
  49. break;
  50. }
  51. }
  52. if (offset + (((_a = item.date) == null ? void 0 : _a.getDate()) || 1) > 28) {
  53. style2.marginBottom = 0;
  54. }
  55. return style2;
  56. });
  57. const onClick = () => {
  58. if (props.item.type !== "disabled") {
  59. emit("click", props.item);
  60. } else {
  61. emit("clickDisabledDate", props.item);
  62. }
  63. };
  64. const renderTopInfo = () => {
  65. const {
  66. topInfo
  67. } = props.item;
  68. if (topInfo || slots["top-info"]) {
  69. return _createVNode("div", {
  70. "class": bem("top-info")
  71. }, [slots["top-info"] ? slots["top-info"](props.item) : topInfo]);
  72. }
  73. };
  74. const renderBottomInfo = () => {
  75. const {
  76. bottomInfo
  77. } = props.item;
  78. if (bottomInfo || slots["bottom-info"]) {
  79. return _createVNode("div", {
  80. "class": bem("bottom-info")
  81. }, [slots["bottom-info"] ? slots["bottom-info"](props.item) : bottomInfo]);
  82. }
  83. };
  84. const renderText = () => {
  85. return slots.text ? slots.text(props.item) : props.item.text;
  86. };
  87. const renderContent = () => {
  88. const {
  89. item,
  90. color,
  91. rowHeight
  92. } = props;
  93. const {
  94. type
  95. } = item;
  96. const Nodes = [renderTopInfo(), renderText(), renderBottomInfo()];
  97. if (type === "selected") {
  98. return _createVNode("div", {
  99. "class": bem("selected-day"),
  100. "style": {
  101. width: rowHeight,
  102. height: rowHeight,
  103. background: color
  104. }
  105. }, [Nodes]);
  106. }
  107. return Nodes;
  108. };
  109. return () => {
  110. const {
  111. type,
  112. className
  113. } = props.item;
  114. if (type === "placeholder") {
  115. return _createVNode("div", {
  116. "class": bem("day"),
  117. "style": style.value
  118. }, null);
  119. }
  120. return _createVNode("div", {
  121. "role": "gridcell",
  122. "style": style.value,
  123. "class": [bem("day", type), className],
  124. "tabindex": type === "disabled" ? void 0 : -1,
  125. "onClick": onClick
  126. }, [renderContent()]);
  127. };
  128. }
  129. });
  130. export {
  131. stdin_default as default
  132. };