@opentinyvue/vue-calendar-view 3.25.0 → 3.26.0

package/lib/mobile-first.js

@@ -6,7 +6,7 @@ import SliderButton from '@opentinyvue/vue-slider-button';
 import SliderButtonGroup from '@opentinyvue/vue-slider-button-group';
 import Tooltip from '@opentinyvue/vue-tooltip';
 import { IconCheckedSur, IconPlus, IconChevronLeft, IconChevronRight, IconDayView, IconAgendaView, IconMonthView } from '@opentinyvue/vue-icon';
-import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, toDisplayString, createCommentVNode, createBlock, createTextVNode, normalizeClass, renderSlot, Fragment, renderList, resolveDynamicComponent, normalizeStyle } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeStyle, createVNode, withCtx, createElementVNode, toDisplayString, createCommentVNode, createBlock, createTextVNode, normalizeClass, renderSlot, Fragment, renderList, resolveDynamicComponent } from 'vue';
 
 function _createForOfIteratorHelperLoose(r, e) {
   var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
@@ -98,110 +98,106 @@ var _sfc_main = defineComponent({
   }
 });
 var _hoisted_1 = {
-  "data-tag": "tiny-calendar-view",
-  class: "w-full h-auto"
-};
-var _hoisted_2 = {
   class: "p-2 max-h-[80vh] overflow-auto"
 };
-var _hoisted_3 = {
+var _hoisted_2 = {
   class: "px-1.5 mb-1.5 border-l-2 border-color-brand"
 };
-var _hoisted_4 = {
+var _hoisted_3 = {
   key: 0,
   class: "mb-1.5 px-2 text-color-text-placeholder"
 };
-var _hoisted_5 = {
+var _hoisted_4 = {
   class: "px-2 text-color-icon-primary"
 };
-var _hoisted_6 = {
+var _hoisted_5 = {
   "data-tag": "tiny-calendar-view-today",
   class: "flex justify-around items-center mb-3"
 };
-var _hoisted_7 = {
+var _hoisted_6 = {
   class: "flex-1 mx-5",
   "data-tag": "tiny-calendar-view-tool"
 };
-var _hoisted_8 = {
+var _hoisted_7 = {
   key: 0,
   "data-tag": "tiny-calendar-view-monthbox",
   class: "shadow-sm"
 };
-var _hoisted_9 = {
+var _hoisted_8 = {
   "data-tag": "tiny-calendar-view-month",
   class: "flex relative justify-around h-10 shadow-sm"
 };
-var _hoisted_10 = {
+var _hoisted_9 = {
   "data-tag": "tiny-calendar-view-monthlist",
   class: "flex justify-around flex-1 h-full"
 };
-var _hoisted_11 = {
+var _hoisted_10 = {
   class: "text-sm text-color-text-primary"
 };
-var _hoisted_12 = {
+var _hoisted_11 = {
   "data-tag": "tiny-calendar-view-calendarbox",
   class: "w-full overflow-hidden"
 };
-var _hoisted_13 = {
+var _hoisted_12 = {
   class: "w-full mt-0.5"
 };
-var _hoisted_14 = ["onClick"];
-var _hoisted_15 = {
+var _hoisted_13 = ["onClick"];
+var _hoisted_14 = {
   key: 0,
   "data-tag": "tiny-calendar-view-multiselect",
   class: "absolute top-0 right-0 bg-color-brand h-4 w-4 overflow-hidden rounded-bl-lg"
 };
-var _hoisted_16 = {
+var _hoisted_15 = {
   "data-tag": "tiny-calendar-view-timebox",
   class: "overflow-y-auto scrollbar-size-0 w-full",
   style: {
     "max-height": "calc(100% - 26px)"
   }
 };
-var _hoisted_17 = ["onMouseenter", "onMouseleave"];
-var _hoisted_18 = {
+var _hoisted_16 = ["onMouseenter", "onMouseleave"];
+var _hoisted_17 = {
   key: 1,
   "data-tag": "tiny-calendar-view-not-month",
   class: "shadow-sm"
 };
-var _hoisted_19 = {
+var _hoisted_18 = {
   class: "flex justify-around items-center h-10 shadow-sm"
 };
-var _hoisted_20 = {
+var _hoisted_19 = {
   "data-tag": "tiny-calendar-view-weekdates",
   class: "flex justify-around flex-1 h-full"
 };
-var _hoisted_21 = ["onClick"];
-var _hoisted_22 = {
+var _hoisted_20 = ["onClick"];
+var _hoisted_21 = {
   class: "w-12",
   "data-tag": "tiny-calendar-view-timelinelist"
 };
-var _hoisted_23 = {
+var _hoisted_22 = {
   class: "text-sm text-color-text-primary"
 };
-var _hoisted_24 = {
+var _hoisted_23 = {
   class: "flex-1",
   "data-tag": "tiny-calendar-view-timelinelist"
 };
-var _hoisted_25 = {
+var _hoisted_24 = {
   class: "w-full flex justify-around"
 };
-var _hoisted_26 = {
+var _hoisted_25 = {
   class: "flex w-full",
   "data-tag": "tiny-calendar-view-schedulelist"
 };
-var _hoisted_27 = {
+var _hoisted_26 = {
   class: "px-1.5 mb-1.5 border-l-2 border-color-brand break-all"
 };
-var _hoisted_28 = {
+var _hoisted_27 = {
   key: 0,
   class: "mb-1.5 px-2 text-color-text-placeholder"
 };
-var _hoisted_29 = {
+var _hoisted_28 = {
   class: "px-2 text-xs text-color-icon-primary line-clamp-2"
 };
-var _hoisted_30 = ["onClick"];
-var _hoisted_31 = {
+var _hoisted_29 = ["onClick"];
+var _hoisted_30 = {
   class: "ml-1 text-color-text-placeholder"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -214,468 +210,480 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_icon_chevron_right = resolveComponent("icon-chevron-right");
   var _component_icon_checked_sur = resolveComponent("icon-checked-sur");
   var _component_icon_plus = resolveComponent("icon-plus");
-  return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(
-    _component_tiny_tooltip,
+  return openBlock(), createElementBlock(
+    "div",
     {
-      ref: "tooltip",
-      "popper-class": "absolute max-w-[theme(spacing.80)]",
-      effect: "light",
-      placement: "right"
+      "data-tag": "tiny-calendar-view",
+      class: "w-full h-auto overflow-auto",
+      style: normalizeStyle({
+        "height": _ctx.height ? parseInt(_ctx.height) + "px" : "auto"
+      })
     },
-    {
-      content: withCtx(function() {
-        return [createElementVNode("div", _hoisted_2, [createElementVNode(
-          "div",
-          _hoisted_3,
-          toDisplayString(_ctx.state.eventTipContent.title),
-          1
-          /* TEXT */
-        ), _ctx.showTipTime ? (openBlock(), createElementBlock(
-          "div",
-          _hoisted_4,
-          toDisplayString(_ctx.state.eventTipContent.startDay) + " " + toDisplayString(_ctx.state.eventTipContent.startTime) + " ~ " + toDisplayString(_ctx.state.eventTipContent.endDay) + " " + toDisplayString(_ctx.state.eventTipContent.endTime),
-          1
-          /* TEXT */
-        )) : createCommentVNode("v-if", true), createElementVNode(
-          "p",
-          _hoisted_5,
-          toDisplayString(_ctx.state.eventTipContent.content || ""),
+    [createVNode(
+      _component_tiny_tooltip,
+      {
+        ref: "tooltip",
+        "popper-class": "absolute max-w-[theme(spacing.80)]",
+        effect: "light",
+        placement: "right"
+      },
+      {
+        content: withCtx(function() {
+          return [createElementVNode("div", _hoisted_1, [createElementVNode(
+            "div",
+            _hoisted_2,
+            toDisplayString(_ctx.state.eventTipContent.title),
+            1
+            /* TEXT */
+          ), _ctx.showTipTime ? (openBlock(), createElementBlock(
+            "div",
+            _hoisted_3,
+            toDisplayString(_ctx.state.eventTipContent.startDay) + " " + toDisplayString(_ctx.state.eventTipContent.startTime) + " ~ " + toDisplayString(_ctx.state.eventTipContent.endDay) + " " + toDisplayString(_ctx.state.eventTipContent.endTime),
+            1
+            /* TEXT */
+          )) : createCommentVNode("v-if", true), createElementVNode(
+            "p",
+            _hoisted_4,
+            toDisplayString(_ctx.state.eventTipContent.content || ""),
+            1
+            /* TEXT */
+          )])];
+        }),
+        _: 1
+        /* STABLE */
+      },
+      512
+      /* NEED_PATCH */
+    ), createElementVNode("div", _hoisted_5, [_ctx.showBackToday ? (openBlock(), createBlock(_component_tiny_button, {
+      key: 0,
+      onClick: _ctx.toToday
+    }, {
+      default: withCtx(function() {
+        return [createTextVNode(
+          toDisplayString(_ctx.t("ui.calendarView.backToday")),
           1
           /* TEXT */
-        )])];
+        )];
       }),
       _: 1
       /* STABLE */
-    },
-    512
-    /* NEED_PATCH */
-  ), createElementVNode("div", _hoisted_6, [_ctx.showBackToday ? (openBlock(), createBlock(_component_tiny_button, {
-    key: 0,
-    onClick: _ctx.toToday
-  }, {
-    default: withCtx(function() {
-      return [createTextVNode(
-        toDisplayString(_ctx.t("ui.calendarView.backToday")),
-        1
-        /* TEXT */
-      )];
-    }),
-    _: 1
-    /* STABLE */
-  }, 8, ["onClick"])) : createCommentVNode("v-if", true), createVNode(_component_tiny_date_picker, {
-    modelValue: _ctx.state.currentDate,
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = function($event) {
-      return _ctx.state.currentDate = $event;
-    }),
-    class: normalizeClass([_ctx.showBackToday ? "ml-5" : "", "shrink-0"]),
-    shape: "filter",
-    type: "month",
-    clearable: false,
-    onChange: _ctx.currentDateChange,
-    format: _ctx.t("ui.calendarView.dateFormat")
-  }, null, 8, ["modelValue", "class", "onChange", "format"]), createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "tool")]), _ctx.modes.length ? (openBlock(), createBlock(_component_tiny_slider_button_group, {
-    key: 1,
-    modelValue: _ctx.state.mode,
-    "onUpdate:modelValue": _cache[1] || (_cache[1] = function($event) {
-      return _ctx.state.mode = $event;
-    }),
-    type: "icon",
-    class: "shrink-0"
-  }, {
-    default: withCtx(function() {
-      return [(openBlock(true), createElementBlock(
-        Fragment,
-        null,
-        renderList(_ctx.modes, function(mode) {
-          return openBlock(), createBlock(_component_tiny_slider_button, {
-            key: mode,
-            label: mode
-          }, {
-            default: withCtx(function() {
-              return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.modesIcon[mode])))];
-            }),
-            _: 2
-            /* DYNAMIC */
-          }, 1032, ["label"]);
-        }),
-        128
-        /* KEYED_FRAGMENT */
-      ))];
-    }),
-    _: 1
-    /* STABLE */
-  }, 8, ["modelValue"])) : createCommentVNode("v-if", true)]), _ctx.state.mode === "month" ? (openBlock(), createElementBlock("div", _hoisted_8, [createElementVNode("div", _hoisted_9, [createElementVNode("div", {
-    "data-tag": "tiny-calendar-view-prevmonth",
-    class: "absolute left-3 top-2.5 cursor-pointer",
-    onClick: _cache[2] || (_cache[2] = function() {
-      return _ctx.goPrevMonth && _ctx.goPrevMonth.apply(_ctx, arguments);
-    })
-  }, [createVNode(_component_icon_chevron_left)]), createElementVNode("ul", _hoisted_10, [(openBlock(true), createElementBlock(
-    Fragment,
-    null,
-    renderList(_ctx.state.weekDays, function(day) {
-      return openBlock(), createElementBlock("li", {
-        "data-tag": "tiny-calendar-view-monthitem",
-        key: day,
-        class: "leading-10"
-      }, [createElementVNode(
-        "span",
-        _hoisted_11,
-        toDisplayString(_ctx.t("ui.calendarView.weekDays." + day)),
-        1
-        /* TEXT */
-      )]);
-    }),
-    128
-    /* KEYED_FRAGMENT */
-  ))]), createElementVNode("div", {
-    "data-tag": "tiny-calendar-view-nextmonth",
-    class: "absolute right-3 top-2.5 cursor-pointer",
-    onClick: _cache[3] || (_cache[3] = function() {
-      return _ctx.goNextMonth && _ctx.goNextMonth.apply(_ctx, arguments);
-    })
-  }, [createVNode(_component_icon_chevron_right)])]), createElementVNode("div", _hoisted_12, [createElementVNode("div", _hoisted_13, [(openBlock(true), createElementBlock(
-    Fragment,
-    null,
-    renderList(_ctx.state.calendar, function(item, index) {
-      return openBlock(), createElementBlock("ul", {
-        "data-tag": "tiny-calendar-view-calendarlist",
-        key: index,
-        class: "w-full flex justify-around border-b border-color-bg-2"
-      }, [(openBlock(true), createElementBlock(
-        Fragment,
-        null,
-        renderList(item, function(day, i) {
-          return openBlock(), createElementBlock("li", {
-            "data-tag": "tiny-calendar-view-calendaritem",
-            key: i,
-            onClick: function onClick($event) {
-              return _ctx.selectDay(day);
-            },
-            style: {
-              "width": "14.2857%"
-            },
-            class: normalizeClass(["py-0.5 relative h-20 overflow-hidden border-r border-color-bg-2", _ctx.m(i === 0 || i === 6 ? "bg-color-bg-6" : "bg-color-bg-1", day.isLast || day.isNext || day.disabled ? "" : _ctx.isSelectedDate(day) ? "bg-color-brand-hover-subtle hover:bg-color-brand-hover-subtle" : "hover:bg-color-brand-hover-subtler", _ctx.gcls("bg-" + _ctx.getDayBgColor(day)))])
-          }, [_ctx.multiSelect && _ctx.isSelectedDate(day) ? (openBlock(), createElementBlock("div", _hoisted_15, [createVNode(_component_icon_checked_sur, {
-            class: "fill-color-brand relative -right-px -top-0.5"
-          })])) : createCommentVNode("v-if", true), createElementVNode(
-            "div",
-            {
-              "data-tag": "tiny-calendar-view-daytag",
-              class: normalizeClass(["py-1.5 pl-2", _ctx.m(day.isLast || day.isNext ? "text-color-text-primary opacity-30" : _ctx.isToday(day) || _ctx.isSelectedDate(day) ? "text-color-brand" : "text-color-text-primary", day.disabled ? "text-color-none-hover" : "")])
-            },
-            toDisplayString(_ctx.isToday(day) ? _ctx.t("ui.datepicker.today") : day.value),
-            3
-            /* TEXT, CLASS */
-          ), createElementVNode("div", _hoisted_16, [(openBlock(true), createElementBlock(
-            Fragment,
-            null,
-            renderList(_ctx.getEventByTime(day, _ctx._constants.DAY_START_TIME, _ctx._constants.DAY_END_TIME), function(event, idx) {
-              return openBlock(), createElementBlock("div", {
-                key: idx,
-                onMouseenter: function onMouseenter($event) {
-                  return _ctx.handleMouseenter($event, event);
-                },
-                onMouseleave: function onMouseleave($event) {
-                  return _ctx.handleMouseleave($event, event);
-                },
-                class: "mb-0.5"
-              }, [_ctx.isStartOrEndDay("start", day.value, _ctx._constants.DAY_START_TIME, _ctx._constants.DAY_END_TIME, event) ? (openBlock(), createElementBlock(
-                "div",
-                {
-                  key: 0,
-                  class: normalizeClass(["pl-0.5", [event.dayNumber > 1 ? "pr-0" : "pr-0.5"]])
-                },
-                [createElementVNode(
-                  "span",
-                  {
-                    "data-tag": "tiny-calendar-view-time",
-                    class: normalizeClass(["px-1.5 inline-block rounded-sm leading-5 line-clamp-1", [_ctx.gcls("theme-" + event.theme)]])
-                  },
-                  toDisplayString(event.title),
-                  3
-                  /* TEXT, CLASS */
-                )],
-                2
-                /* CLASS */
-              )) : (openBlock(), createElementBlock(
-                "div",
-                {
-                  key: 1,
-                  "data-tag": "tiny-calendar-view-theme",
-                  class: normalizeClass(["h-5 leading-5", [_ctx.isStartOrEndDay("end", day.value, _ctx._constants.DAY_START_TIME, _ctx._constants.DAY_END_TIME, event) ? "mr-0.5" : "mr-0", _ctx.gcls("bg-" + event.theme)]])
-                },
-                null,
-                2
-                /* CLASS */
-              ))], 40, _hoisted_17);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          ))])], 10, _hoisted_14);
-        }),
-        128
-        /* KEYED_FRAGMENT */
-      ))]);
-    }),
-    128
-    /* KEYED_FRAGMENT */
-  ))])])])) : (openBlock(), createElementBlock("div", _hoisted_18, [createElementVNode("div", _hoisted_19, [createElementVNode("div", {
-    class: "w-7 shrink-0 text-right cursor-pointer",
-    "data-tag": "tiny-calendar-view-prevweek",
-    onClick: _cache[4] || (_cache[4] = function() {
-      return _ctx.getPrevWeek && _ctx.getPrevWeek.apply(_ctx, arguments);
-    })
-  }, [createVNode(_component_icon_chevron_left)]), createElementVNode("ul", _hoisted_20, [(openBlock(true), createElementBlock(
-    Fragment,
-    null,
-    renderList(_ctx.state.weekDates, function(date, index) {
-      return openBlock(), createElementBlock("li", {
-        "data-tag": "tiny-calendar-view-weekitem",
-        key: date.value,
-        class: "leading-10 cursor-pointer",
-        onClick: function onClick($event) {
-          return _ctx.selectDay(date);
-        }
-      }, [renderSlot(_ctx.$slots, "header", {
-        slotScope: {
-          date: date.value,
-          weekDay: _ctx.t("ui.calendarView.weekDays." + index)
-        }
-      }, function() {
-        return [createElementVNode(
-          "span",
-          {
-            class: normalizeClass(["relative mr-2.5 text-base", [_ctx.dateIsToday(date.value) || _ctx.computedSelectDay(date) ? "text-color-brand" : "text-color-text-primary"]])
-          },
-          [createElementVNode(
-            "span",
-            null,
-            toDisplayString(date.value.split("-")[2]),
-            1
-            /* TEXT */
-          ), _ctx.isShowMark(date.value) ? (openBlock(), createElementBlock(
-            "span",
-            {
-              key: 0,
-              class: normalizeClass(["w-1.5 h-1.5 absolute -bottom-2 rounded-full", [date.value.split("-")[2] > 9 ? "left-2" : "left-0.5", _ctx.gcls("mark-" + _ctx.markColor)]])
-            },
-            null,
-            2
-            /* CLASS */
-          )) : createCommentVNode("v-if", true)],
-          2
-          /* CLASS */
-        ), createElementVNode(
-          "span",
-          {
-            class: normalizeClass(["text-sm", [_ctx.dateIsToday(date.value) || _ctx.computedSelectDay(date) ? "text-color-brand" : "text-color-text-placeholder"]])
-          },
-          toDisplayString(_ctx.dateIsToday(date.value) ? _ctx.t("ui.datepicker.today") : _ctx.t("ui.calendarView.weekDays." + index)),
-          3
-          /* TEXT, CLASS */
-        )];
-      })], 8, _hoisted_21);
-    }),
-    128
-    /* KEYED_FRAGMENT */
-  ))]), createElementVNode("div", {
-    "data-tag": "tiny-calendar-view-nextvweek",
-    class: "w-7 shrink-0 text-left cursor-pointer",
-    onClick: _cache[5] || (_cache[5] = function() {
-      return _ctx.getNextWeek && _ctx.getNextWeek.apply(_ctx, arguments);
-    })
-  }, [createVNode(_component_icon_chevron_right)])]), _ctx.state.mode === "timeline" ? (openBlock(), createElementBlock(
-    "div",
-    {
-      key: 0,
-      "data-tag": "tiny-calendar-view-timeline",
-      class: "w-full h-112 flex overflow-y-auto mt-1",
-      style: normalizeStyle({
-        "height": _ctx.height
+    }, 8, ["onClick"])) : createCommentVNode("v-if", true), createVNode(_component_tiny_date_picker, {
+      modelValue: _ctx.state.currentDate,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = function($event) {
+        return _ctx.state.currentDate = $event;
+      }),
+      class: normalizeClass([_ctx.showBackToday ? "ml-5" : "", "shrink-0"]),
+      shape: "filter",
+      type: "month",
+      clearable: false,
+      onChange: _ctx.currentDateChange,
+      format: _ctx.t("ui.calendarView.dateFormat")
+    }, null, 8, ["modelValue", "class", "onChange", "format"]), createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "tool")]), _ctx.modes.length ? (openBlock(), createBlock(_component_tiny_slider_button_group, {
+      key: 1,
+      modelValue: _ctx.state.mode,
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = function($event) {
+        return _ctx.state.mode = $event;
+      }),
+      type: "icon",
+      class: "shrink-0"
+    }, {
+      default: withCtx(function() {
+        return [(openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(_ctx.modes, function(mode) {
+            return openBlock(), createBlock(_component_tiny_slider_button, {
+              key: mode,
+              label: mode
+            }, {
+              default: withCtx(function() {
+                return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.modesIcon[mode])))];
+              }),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["label"]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))];
+      }),
+      _: 1
+      /* STABLE */
+    }, 8, ["modelValue"])) : createCommentVNode("v-if", true)]), _ctx.state.mode === "month" ? (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode("div", _hoisted_8, [createElementVNode("div", {
+      "data-tag": "tiny-calendar-view-prevmonth",
+      class: "absolute left-3 top-2.5 cursor-pointer",
+      onClick: _cache[2] || (_cache[2] = function() {
+        return _ctx.goPrevMonth && _ctx.goPrevMonth.apply(_ctx, arguments);
       })
-    },
-    [createElementVNode("div", _hoisted_22, [createElementVNode("ul", null, [(openBlock(true), createElementBlock(
+    }, [createVNode(_component_icon_chevron_left)]), createElementVNode("ul", _hoisted_9, [(openBlock(true), createElementBlock(
       Fragment,
       null,
-      renderList(_ctx.state.dayTimes, function(item, i) {
-        return openBlock(), createElementBlock(
-          "li",
-          {
-            "data-tag": "tiny-calendar-view-timelineitem",
-            key: item.time,
-            class: normalizeClass(["h-5 text-center border-b", [i % 2 === 1 ? "border-color-bg-2" : "border-color-bg-1"]])
-          },
-          [createElementVNode(
-            "span",
-            _hoisted_23,
-            toDisplayString(item.text.includes("30") ? "" : item.text),
-            1
-            /* TEXT */
-          )],
-          2
-          /* CLASS */
-        );
+      renderList(_ctx.state.weekDays, function(day) {
+        return openBlock(), createElementBlock("li", {
+          "data-tag": "tiny-calendar-view-monthitem",
+          key: day,
+          class: "leading-10"
+        }, [createElementVNode(
+          "span",
+          _hoisted_10,
+          toDisplayString(_ctx.t("ui.calendarView.weekDays." + day)),
+          1
+          /* TEXT */
+        )]);
       }),
       128
       /* KEYED_FRAGMENT */
-    ))])]), createElementVNode("div", _hoisted_24, [createElementVNode("ul", _hoisted_25, [(openBlock(true), createElementBlock(
+    ))]), createElementVNode("div", {
+      "data-tag": "tiny-calendar-view-nextmonth",
+      class: "absolute right-3 top-2.5 cursor-pointer",
+      onClick: _cache[3] || (_cache[3] = function() {
+        return _ctx.goNextMonth && _ctx.goNextMonth.apply(_ctx, arguments);
+      })
+    }, [createVNode(_component_icon_chevron_right)])]), createElementVNode("div", _hoisted_11, [createElementVNode("div", _hoisted_12, [(openBlock(true), createElementBlock(
       Fragment,
       null,
-      renderList(_ctx.state.weekDates, function(date, index) {
-        return openBlock(), createElementBlock(
-          "li",
-          {
-            "data-tag": "tiny-calendar-view-timelineitem",
-            key: date.value,
-            class: normalizeClass(["relative", [index === 0 || index === 6 ? "bg-color-bg-6" : ""]]),
-            style: {
-              "width": "calc((100% - 10px) / 7)"
-            }
-          },
-          [renderSlot(_ctx.$slots, "timeline" + (index + 1), {
-            slotScope: {
-              date: date.value,
-              events: _ctx.state.curWeekEvents[date.value]
-            }
-          }, function() {
-            return [createElementVNode("ul", null, [(openBlock(true), createElementBlock(
+      renderList(_ctx.state.calendar, function(item, index) {
+        return openBlock(), createElementBlock("ul", {
+          "data-tag": "tiny-calendar-view-calendarlist",
+          key: index,
+          class: "w-full flex justify-around border-b border-color-bg-2"
+        }, [(openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(item, function(day, i) {
+            return openBlock(), createElementBlock("li", {
+              "data-tag": "tiny-calendar-view-calendaritem",
+              key: i,
+              onClick: function onClick($event) {
+                return _ctx.selectDay(day);
+              },
+              style: {
+                "width": "14.2857%"
+              },
+              class: normalizeClass(["py-0.5 relative h-20 overflow-hidden border-r border-color-bg-2", _ctx.m(i === 0 || i === 6 ? "bg-color-bg-6" : "bg-color-bg-1", day.isLast || day.isNext || day.disabled ? "" : _ctx.isSelectedDate(day) ? "bg-color-brand-hover-subtle hover:bg-color-brand-hover-subtle" : "hover:bg-color-brand-hover-subtler", _ctx.gcls("bg-" + _ctx.getDayBgColor(day)))])
+            }, [_ctx.multiSelect && _ctx.isSelectedDate(day) ? (openBlock(), createElementBlock("div", _hoisted_14, [createVNode(_component_icon_checked_sur, {
+              class: "fill-color-brand relative -right-px -top-0.5"
+            })])) : createCommentVNode("v-if", true), createElementVNode(
+              "div",
+              {
+                "data-tag": "tiny-calendar-view-daytag",
+                class: normalizeClass(["py-1.5 pl-2", _ctx.m(day.isLast || day.isNext ? "text-color-text-primary opacity-30" : _ctx.isToday(day) || _ctx.isSelectedDate(day) ? "text-color-brand" : "text-color-text-primary", day.disabled ? "text-color-none-hover" : "")])
+              },
+              toDisplayString(_ctx.isToday(day) ? _ctx.t("ui.datepicker.today") : day.value),
+              3
+              /* TEXT, CLASS */
+            ), createElementVNode("div", _hoisted_15, [(openBlock(true), createElementBlock(
               Fragment,
               null,
-              renderList(_ctx.state.dayTimes, function(item, i) {
-                return openBlock(), createElementBlock(
-                  "li",
+              renderList(_ctx.getEventByTime(day, _ctx._constants.DAY_START_TIME, _ctx._constants.DAY_END_TIME), function(event, idx) {
+                return openBlock(), createElementBlock("div", {
+                  key: idx,
+                  onMouseenter: function onMouseenter($event) {
+                    return _ctx.handleMouseenter($event, event);
+                  },
+                  onMouseleave: function onMouseleave($event) {
+                    return _ctx.handleMouseleave($event, event);
+                  },
+                  class: "mb-0.5"
+                }, [_ctx.isStartOrEndDay("start", day.value, _ctx._constants.DAY_START_TIME, _ctx._constants.DAY_END_TIME, event) ? (openBlock(), createElementBlock(
+                  "div",
                   {
-                    key: date.value + item.time,
-                    class: normalizeClass(["relative h-5 p-0.5 list-none border-b border-color-bg-2", [i % 2 === 0 ? "border-dashed" : "border-solid"]])
+                    key: 0,
+                    class: normalizeClass(["pl-0.5", [event.dayNumber > 1 ? "pr-0" : "pr-0.5"]])
                   },
-                  [(openBlock(true), createElementBlock(
-                    Fragment,
-                    null,
-                    renderList(_ctx.getEventByTime(date.value, item.time, _ctx.state.dayTimes[i + 1] && _ctx.state.dayTimes[i + 1].time), function(event, idx) {
-                      return openBlock(), createElementBlock(
-                        "div",
-                        {
-                          key: idx,
-                          class: normalizeClass(["w-11/12 flex items-center px-1.5 absolute top-0 left-0 z-10 leading-normal rounded-sm", [_ctx.gcls("theme-" + (event.theme || _ctx.blue))]]),
-                          style: normalizeStyle({
-                            "height": event.height + "px",
-                            "left": event.left + "px",
-                            "width": "calc(92% - " + event.left + "px)"
-                          })
-                        },
-                        [createElementVNode(
-                          "span",
-                          null,
-                          toDisplayString(event.title),
-                          1
-                          /* TEXT */
-                        )],
-                        6
-                        /* CLASS, STYLE */
-                      );
-                    }),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))],
+                  [createElementVNode(
+                    "span",
+                    {
+                      "data-tag": "tiny-calendar-view-time",
+                      class: normalizeClass(["px-1.5 inline-block rounded-sm leading-5 line-clamp-1", [_ctx.gcls("theme-" + event.theme)]])
+                    },
+                    toDisplayString(event.title),
+                    3
+                    /* TEXT, CLASS */
+                  )],
                   2
                   /* CLASS */
-                );
+                )) : (openBlock(), createElementBlock(
+                  "div",
+                  {
+                    key: 1,
+                    "data-tag": "tiny-calendar-view-theme",
+                    class: normalizeClass(["h-5 leading-5", [_ctx.isStartOrEndDay("end", day.value, _ctx._constants.DAY_START_TIME, _ctx._constants.DAY_END_TIME, event) ? "mr-0.5" : "mr-0", _ctx.gcls("bg-" + event.theme)]])
+                  },
+                  null,
+                  2
+                  /* CLASS */
+                ))], 40, _hoisted_16);
               }),
               128
               /* KEYED_FRAGMENT */
-            ))])];
-          })],
-          2
-          /* CLASS */
-        );
+            ))])], 10, _hoisted_13);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))]);
       }),
       128
       /* KEYED_FRAGMENT */
-    ))])])],
-    4
-    /* STYLE */
-  )) : createCommentVNode("v-if", true), _ctx.state.mode === "schedule" ? (openBlock(), createElementBlock(
-    "div",
-    {
-      key: 1,
-      "data-tag": "tiny-calendar-view-schedule",
-      class: "w-full px-6 pb-4 overflow-y-auto h-112",
-      style: normalizeStyle({
-        "height": _ctx.height
+    ))])])])) : (openBlock(), createElementBlock("div", _hoisted_17, [createElementVNode("div", _hoisted_18, [createElementVNode("div", {
+      class: "w-7 shrink-0 text-right cursor-pointer",
+      "data-tag": "tiny-calendar-view-prevweek",
+      onClick: _cache[4] || (_cache[4] = function() {
+        return _ctx.getPrevWeek && _ctx.getPrevWeek.apply(_ctx, arguments);
       })
-    },
-    [createElementVNode("ul", _hoisted_26, [(openBlock(true), createElementBlock(
+    }, [createVNode(_component_icon_chevron_left)]), createElementVNode("ul", _hoisted_19, [(openBlock(true), createElementBlock(
       Fragment,
       null,
       renderList(_ctx.state.weekDates, function(date, index) {
         return openBlock(), createElementBlock("li", {
-          "data-tag": "tiny-calendar-view-scheduleitem",
+          "data-tag": "tiny-calendar-view-weekitem",
           key: date.value,
-          class: "h-full py-3 px-2",
-          style: {
-            "width": "14.28%"
+          class: "leading-10 cursor-pointer",
+          onClick: function onClick($event) {
+            return _ctx.selectDay(date);
           }
-        }, [renderSlot(_ctx.$slots, "weekday" + (index + 1), {
+        }, [renderSlot(_ctx.$slots, "header", {
           slotScope: {
             date: date.value,
-            events: _ctx.state.curWeekEvents[date.value]
+            weekDay: _ctx.t("ui.calendarView.weekDays." + index)
           }
         }, function() {
-          return [(openBlock(true), createElementBlock(
-            Fragment,
-            null,
-            renderList(_ctx.state.curWeekEvents[date.value] || [], function(event, idx) {
-              return openBlock(), createElementBlock("div", {
-                "data-tag": "tiny-calendar-view-curWeek",
-                key: idx,
-                class: "py-1.5 h-auto border border-color-border-separator rounded mb-2 shadow-sm"
-              }, [createElementVNode(
-                "div",
-                _hoisted_27,
-                toDisplayString(event.title),
-                1
-                /* TEXT */
-              ), _ctx.showTipTime ? (openBlock(), createElementBlock(
-                "div",
-                _hoisted_28,
-                toDisplayString(_ctx.getEventShowTime("start", event, date.value)) + " - " + toDisplayString(_ctx.getEventShowTime("end", event, date.value)),
-                1
-                /* TEXT */
-              )) : createCommentVNode("v-if", true), createElementVNode(
-                "p",
-                _hoisted_29,
-                toDisplayString(event.content || ""),
-                1
-                /* TEXT */
-              )]);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          ))];
-        }), _ctx.isShowNewSchedule(date.value) ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          "data-tag": "tiny-calendar-view-newschedule",
-          class: "h-8 text-center leading-8 w-full mt-2 border border-color-border-separator rounded cursor-pointer",
-          onClick: function onClick($event) {
-            return _ctx.newSchedule(date.value);
-          }
-        }, [createVNode(_component_icon_plus, {
-          class: "align-sub fill-color-text-placeholder"
-        }), createElementVNode(
-          "span",
-          _hoisted_31,
-          toDisplayString(_ctx.t("ui.calendarView.new")),
-          1
-          /* TEXT */
-        )], 8, _hoisted_30)) : createCommentVNode("v-if", true)]);
+          return [createElementVNode(
+            "span",
+            {
+              class: normalizeClass(["relative mr-2.5 text-base", [_ctx.dateIsToday(date.value) || _ctx.computedSelectDay(date) ? "text-color-brand" : "text-color-text-primary"]])
+            },
+            [createElementVNode(
+              "span",
+              null,
+              toDisplayString(date.value.split("-")[2]),
+              1
+              /* TEXT */
+            ), _ctx.isShowMark(date.value) ? (openBlock(), createElementBlock(
+              "span",
+              {
+                key: 0,
+                class: normalizeClass(["w-1.5 h-1.5 absolute -bottom-2 rounded-full", [date.value.split("-")[2] > 9 ? "left-2" : "left-0.5", _ctx.gcls("mark-" + _ctx.markColor)]])
+              },
+              null,
+              2
+              /* CLASS */
+            )) : createCommentVNode("v-if", true)],
+            2
+            /* CLASS */
+          ), createElementVNode(
+            "span",
+            {
+              class: normalizeClass(["text-sm", [_ctx.dateIsToday(date.value) || _ctx.computedSelectDay(date) ? "text-color-brand" : "text-color-text-placeholder"]])
+            },
+            toDisplayString(_ctx.dateIsToday(date.value) ? _ctx.t("ui.datepicker.today") : _ctx.t("ui.calendarView.weekDays." + index)),
+            3
+            /* TEXT, CLASS */
+          )];
+        })], 8, _hoisted_20);
       }),
       128
       /* KEYED_FRAGMENT */
-    ))])],
+    ))]), createElementVNode("div", {
+      "data-tag": "tiny-calendar-view-nextvweek",
+      class: "w-7 shrink-0 text-left cursor-pointer",
+      onClick: _cache[5] || (_cache[5] = function() {
+        return _ctx.getNextWeek && _ctx.getNextWeek.apply(_ctx, arguments);
+      })
+    }, [createVNode(_component_icon_chevron_right)])]), _ctx.state.mode === "timeline" ? (openBlock(), createElementBlock(
+      "div",
+      {
+        key: 0,
+        "data-tag": "tiny-calendar-view-timeline",
+        class: "w-full h-112 flex overflow-y-auto mt-1",
+        style: normalizeStyle({
+          "height": _ctx.height
+        })
+      },
+      [createElementVNode("div", _hoisted_21, [createElementVNode("ul", null, [(openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.state.dayTimes, function(item, i) {
+          return openBlock(), createElementBlock(
+            "li",
+            {
+              "data-tag": "tiny-calendar-view-timelineitem",
+              key: item.time,
+              class: normalizeClass(["h-5 text-center border-b", [i % 2 === 1 ? "border-color-bg-2" : "border-color-bg-1"]])
+            },
+            [createElementVNode(
+              "span",
+              _hoisted_22,
+              toDisplayString(item.text.includes("30") ? "" : item.text),
+              1
+              /* TEXT */
+            )],
+            2
+            /* CLASS */
+          );
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))])]), createElementVNode("div", _hoisted_23, [createElementVNode("ul", _hoisted_24, [(openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.state.weekDates, function(date, index) {
+          return openBlock(), createElementBlock(
+            "li",
+            {
+              "data-tag": "tiny-calendar-view-timelineitem",
+              key: date.value,
+              class: normalizeClass(["relative", [index === 0 || index === 6 ? "bg-color-bg-6" : ""]]),
+              style: {
+                "width": "calc((100% - 10px) / 7)"
+              }
+            },
+            [renderSlot(_ctx.$slots, "timeline" + (index + 1), {
+              slotScope: {
+                date: date.value,
+                events: _ctx.state.curWeekEvents[date.value]
+              }
+            }, function() {
+              return [createElementVNode("ul", null, [(openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.state.dayTimes, function(item, i) {
+                  return openBlock(), createElementBlock(
+                    "li",
+                    {
+                      key: date.value + item.time,
+                      class: normalizeClass(["relative h-5 p-0.5 list-none border-b border-color-bg-2", [i % 2 === 0 ? "border-dashed" : "border-solid"]])
+                    },
+                    [(openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(_ctx.getEventByTime(date.value, item.time, _ctx.state.dayTimes[i + 1] && _ctx.state.dayTimes[i + 1].time), function(event, idx) {
+                        return openBlock(), createElementBlock(
+                          "div",
+                          {
+                            key: idx,
+                            class: normalizeClass(["w-11/12 flex items-center px-1.5 absolute top-0 left-0 z-10 leading-normal rounded-sm", [_ctx.gcls("theme-" + (event.theme || _ctx.blue))]]),
+                            style: normalizeStyle({
+                              "height": event.height + "px",
+                              "left": event.left + "px",
+                              "width": "calc(92% - " + event.left + "px)"
+                            })
+                          },
+                          [createElementVNode(
+                            "span",
+                            null,
+                            toDisplayString(event.title),
+                            1
+                            /* TEXT */
+                          )],
+                          6
+                          /* CLASS, STYLE */
+                        );
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))],
+                    2
+                    /* CLASS */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))])];
+            })],
+            2
+            /* CLASS */
+          );
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))])])],
+      4
+      /* STYLE */
+    )) : createCommentVNode("v-if", true), _ctx.state.mode === "schedule" ? (openBlock(), createElementBlock(
+      "div",
+      {
+        key: 1,
+        "data-tag": "tiny-calendar-view-schedule",
+        class: "w-full px-6 pb-4 overflow-y-auto h-112",
+        style: normalizeStyle({
+          "height": _ctx.height
+        })
+      },
+      [createElementVNode("ul", _hoisted_25, [(openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.state.weekDates, function(date, index) {
+          return openBlock(), createElementBlock("li", {
+            "data-tag": "tiny-calendar-view-scheduleitem",
+            key: date.value,
+            class: "h-full py-3 px-2",
+            style: {
+              "width": "14.28%"
+            }
+          }, [renderSlot(_ctx.$slots, "weekday" + (index + 1), {
+            slotScope: {
+              date: date.value,
+              events: _ctx.state.curWeekEvents[date.value]
+            }
+          }, function() {
+            return [(openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.state.curWeekEvents[date.value] || [], function(event, idx) {
+                return openBlock(), createElementBlock("div", {
+                  "data-tag": "tiny-calendar-view-curWeek",
+                  key: idx,
+                  class: "py-1.5 h-auto border border-color-border-separator rounded mb-2 shadow-sm"
+                }, [createElementVNode(
+                  "div",
+                  _hoisted_26,
+                  toDisplayString(event.title),
+                  1
+                  /* TEXT */
+                ), _ctx.showTipTime ? (openBlock(), createElementBlock(
+                  "div",
+                  _hoisted_27,
+                  toDisplayString(_ctx.getEventShowTime("start", event, date.value)) + " - " + toDisplayString(_ctx.getEventShowTime("end", event, date.value)),
+                  1
+                  /* TEXT */
+                )) : createCommentVNode("v-if", true), createElementVNode(
+                  "p",
+                  _hoisted_28,
+                  toDisplayString(event.content || ""),
+                  1
+                  /* TEXT */
+                )]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))];
+          }), _ctx.isShowNewSchedule(date.value) ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            "data-tag": "tiny-calendar-view-newschedule",
+            class: "h-8 text-center leading-8 w-full mt-2 border border-color-border-separator rounded cursor-pointer",
+            onClick: function onClick($event) {
+              return _ctx.newSchedule(date.value);
+            }
+          }, [createVNode(_component_icon_plus, {
+            class: "align-sub fill-color-text-placeholder"
+          }), createElementVNode(
+            "span",
+            _hoisted_30,
+            toDisplayString(_ctx.t("ui.calendarView.new")),
+            1
+            /* TEXT */
+          )], 8, _hoisted_29)) : createCommentVNode("v-if", true)]);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))])],
+      4
+      /* STYLE */
+    )) : createCommentVNode("v-if", true)]))],
     4
     /* STYLE */
-  )) : createCommentVNode("v-if", true)]))]);
+  );
 }
 var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/lib/pc.js

@@ -172,7 +172,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     {
       class: "tiny-calendar-view",
       style: normalizeStyle({
-        "height": typeof _ctx.height === "number" ? _ctx.height + "px" : _ctx.height
+        "height": _ctx.height ? parseInt(_ctx.height) + "px" : "auto"
       })
     },
     [createElementVNode("div", _hoisted_1, [createElementVNode("div", null, [_ctx.showBackToday ? (openBlock(), createBlock(_component_tiny_button, {

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@opentinyvue/vue-calendar-view",
-  "version": "3.25.0",
+  "type": "module",
+  "version": "3.26.0",
   "description": "",
+  "license": "MIT",
+  "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
-  "sideEffects": false,
-  "type": "module",
   "dependencies": {
-    "@opentinyvue/vue-common": "~3.25.0",
-    "@opentinyvue/vue-icon": "~3.25.0",
-    "@opentinyvue/vue-renderless": "~3.25.0",
-    "@opentinyvue/vue-tooltip": "~3.25.0",
-    "@opentinyvue/vue-button": "~3.25.0",
-    "@opentinyvue/vue-date-picker": "~3.25.0",
-    "@opentinyvue/vue-radio-button": "~3.25.0",
-    "@opentinyvue/vue-radio-group": "~3.25.0",
-    "@opentinyvue/vue-slider-button": "~3.25.0",
-    "@opentinyvue/vue-slider-button-group": "~3.25.0",
-    "@opentinyvue/vue-theme": "~3.25.0"
+    "@opentinyvue/vue-button": "~3.26.0",
+    "@opentinyvue/vue-common": "~3.26.0",
+    "@opentinyvue/vue-date-picker": "~3.26.0",
+    "@opentinyvue/vue-icon": "~3.26.0",
+    "@opentinyvue/vue-radio-button": "~3.26.0",
+    "@opentinyvue/vue-radio-group": "~3.26.0",
+    "@opentinyvue/vue-renderless": "~3.26.0",
+    "@opentinyvue/vue-slider-button": "~3.26.0",
+    "@opentinyvue/vue-slider-button-group": "~3.26.0",
+    "@opentinyvue/vue-theme": "~3.26.0",
+    "@opentinyvue/vue-tooltip": "~3.26.0"
   },
-  "license": "MIT",
   "types": "index.d.ts"
 }