CalendarHeader.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default
  21. });
  22. module.exports = __toCommonJS(stdin_exports);
  23. var import_vue = require("vue");
  24. var import_utils = require("../utils");
  25. var import_utils2 = require("./utils");
  26. var import_icon = require("../icon");
  27. const [name] = (0, import_utils.createNamespace)("calendar-header");
  28. var stdin_default = (0, import_vue.defineComponent)({
  29. name,
  30. props: {
  31. date: Date,
  32. minDate: Date,
  33. maxDate: Date,
  34. title: String,
  35. subtitle: String,
  36. showTitle: Boolean,
  37. showSubtitle: Boolean,
  38. firstDayOfWeek: Number,
  39. switchMode: (0, import_utils.makeStringProp)("none")
  40. },
  41. emits: ["clickSubtitle", "panelChange"],
  42. setup(props, {
  43. slots,
  44. emit
  45. }) {
  46. const prevMonthDisabled = (0, import_vue.computed)(() => props.date && props.minDate && (0, import_utils2.compareMonth)((0, import_utils2.getPrevMonth)(props.date), props.minDate) < 0);
  47. const prevYearDisabled = (0, import_vue.computed)(() => props.date && props.minDate && (0, import_utils2.compareMonth)((0, import_utils2.getPrevYear)(props.date), props.minDate) < 0);
  48. const nextMonthDisabled = (0, import_vue.computed)(() => props.date && props.maxDate && (0, import_utils2.compareMonth)((0, import_utils2.getNextMonth)(props.date), props.maxDate) > 0);
  49. const nextYearDisabled = (0, import_vue.computed)(() => props.date && props.maxDate && (0, import_utils2.compareMonth)((0, import_utils2.getNextYear)(props.date), props.maxDate) > 0);
  50. const renderTitle = () => {
  51. if (props.showTitle) {
  52. const text = props.title || (0, import_utils2.t)("title");
  53. const title = slots.title ? slots.title() : text;
  54. return (0, import_vue.createVNode)("div", {
  55. "class": (0, import_utils2.bem)("header-title")
  56. }, [title]);
  57. }
  58. };
  59. const onClickSubtitle = (event) => emit("clickSubtitle", event);
  60. const onPanelChange = (date) => emit("panelChange", date);
  61. const renderAction = (isNext) => {
  62. const showYearAction = props.switchMode === "year-month";
  63. const monthSlot = slots[isNext ? "next-month" : "prev-month"];
  64. const yearSlot = slots[isNext ? "next-year" : "prev-year"];
  65. const monthDisabled = isNext ? nextMonthDisabled.value : prevMonthDisabled.value;
  66. const yearDisabled = isNext ? nextYearDisabled.value : prevYearDisabled.value;
  67. const monthIconName = isNext ? "arrow" : "arrow-left";
  68. const yearIconName = isNext ? "arrow-double-right" : "arrow-double-left";
  69. const onMonthChange = () => onPanelChange((isNext ? import_utils2.getNextMonth : import_utils2.getPrevMonth)(props.date));
  70. const onYearChange = () => onPanelChange((isNext ? import_utils2.getNextYear : import_utils2.getPrevYear)(props.date));
  71. const MonthAction = (0, import_vue.createVNode)("view", {
  72. "class": (0, import_utils2.bem)("header-action", {
  73. disabled: monthDisabled
  74. }),
  75. "onClick": monthDisabled ? void 0 : onMonthChange
  76. }, [monthSlot ? monthSlot({
  77. disabled: monthDisabled
  78. }) : (0, import_vue.createVNode)(import_icon.Icon, {
  79. "class": {
  80. [import_utils.HAPTICS_FEEDBACK]: !monthDisabled
  81. },
  82. "name": monthIconName
  83. }, null)]);
  84. const YearAction = showYearAction && (0, import_vue.createVNode)("view", {
  85. "class": (0, import_utils2.bem)("header-action", {
  86. disabled: yearDisabled
  87. }),
  88. "onClick": yearDisabled ? void 0 : onYearChange
  89. }, [yearSlot ? yearSlot({
  90. disabled: yearDisabled
  91. }) : (0, import_vue.createVNode)(import_icon.Icon, {
  92. "class": {
  93. [import_utils.HAPTICS_FEEDBACK]: !yearDisabled
  94. },
  95. "name": yearIconName
  96. }, null)]);
  97. return isNext ? [MonthAction, YearAction] : [YearAction, MonthAction];
  98. };
  99. const renderSubtitle = () => {
  100. if (props.showSubtitle) {
  101. const title = slots.subtitle ? slots.subtitle({
  102. date: props.date,
  103. text: props.subtitle
  104. }) : props.subtitle;
  105. const canSwitch = props.switchMode !== "none";
  106. return (0, import_vue.createVNode)("div", {
  107. "class": (0, import_utils2.bem)("header-subtitle", {
  108. "with-switch": canSwitch
  109. }),
  110. "onClick": onClickSubtitle
  111. }, [canSwitch ? [renderAction(), (0, import_vue.createVNode)("div", {
  112. "class": (0, import_utils2.bem)("header-subtitle-text")
  113. }, [title]), renderAction(true)] : title]);
  114. }
  115. };
  116. const renderWeekDays = () => {
  117. const {
  118. firstDayOfWeek
  119. } = props;
  120. const weekdays = (0, import_utils2.t)("weekdays");
  121. const renderWeekDays2 = [...weekdays.slice(firstDayOfWeek, 7), ...weekdays.slice(0, firstDayOfWeek)];
  122. return (0, import_vue.createVNode)("div", {
  123. "class": (0, import_utils2.bem)("weekdays")
  124. }, [renderWeekDays2.map((text) => (0, import_vue.createVNode)("span", {
  125. "class": (0, import_utils2.bem)("weekday")
  126. }, [text]))]);
  127. };
  128. return () => (0, import_vue.createVNode)("div", {
  129. "class": (0, import_utils2.bem)("header")
  130. }, [renderTitle(), renderSubtitle(), renderWeekDays()]);
  131. }
  132. });