@ibiz-template/vue3-components 0.7.26-alpha.3 → 0.7.26

package/lib/common/emoji-select/icons/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var emoji = require('./emoji.cjs');
+var categories = require('./categories.cjs');
+var search = require('./search.cjs');
+
+"use strict";
+
+exports.emojisDefault = emoji.emojisDefault;
+exports.categoriesDefault = categories.categoriesDefault;
+exports.SearchSvg = search.SearchSvg;

package/lib/common/emoji-select/icons/search.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var vue = require('vue');
+
+"use strict";
+const SearchSvg = () => vue.createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "focusable": "false"
+}, [vue.createVNode("g", {
+  "stroke-width": "1"
+}, [vue.createVNode("path", {
+  "d": "M6.751 12.303A5.557 5.557 0 0 1 1.2 6.751C1.2 3.691 3.69 1.2 6.751 1.2a5.558 5.558 0 0 1 5.551 5.551 5.557 5.557 0 0 1-5.551 5.552M6.751 0a6.751 6.751 0 1 0 4.309 11.949l3.855 3.855a.6.6 0 1 0 .849-.849l-3.854-3.853A6.751 6.751 0 0 0 6.751 0"
+}, null)])]);
+
+exports.SearchSvg = SearchSvg;

package/lib/common/emoji-select/interface/category.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class Category {
+  constructor(name, icon, text) {
+    __publicField(this, "name");
+    __publicField(this, "icon");
+    __publicField(this, "text");
+    this.name = name;
+    this.icon = icon;
+    this.text = text;
+  }
+  get label() {
+    return this.name;
+  }
+}
+
+exports.Category = Category;

package/lib/common/emoji-select/interface/emoji.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class Emoji {
+  constructor(data, category, aliases) {
+    __publicField(this, "data");
+    __publicField(this, "category");
+    __publicField(this, "aliases");
+    this.data = data;
+    this.category = category;
+    this.aliases = aliases;
+  }
+}
+
+exports.Emoji = Emoji;

package/lib/common/emoji-select/interface/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var category = require('./category.cjs');
+var emoji = require('./emoji.cjs');
+require('./map-emojis.cjs');
+
+"use strict";
+
+exports.Category = category.Category;
+exports.Emoji = emoji.Emoji;

package/lib/common/emoji-select/interface/map-emojis.cjs

@@ -0,0 +1,3 @@
+'use strict';
+
+"use strict";

package/lib/common/index.cjs

@@ -25,11 +25,13 @@ var carousel = require('./carousel/carousel.cjs');
 var coopAlert = require('./coop-alert/coop-alert.cjs');
 var customTheme = require('./custom-theme/custom-theme.cjs');
 var carouselCard = require('./carousel-card/carousel-card.cjs');
+var emojiSelect = require('./emoji-select/emoji-select.cjs');
 
 "use strict";
 const IBizCommonComponents = {
   install: (v) => {
     v.component(vue3Util.IBizControlBase.name, vue3Util.IBizControlBase);
+    v.component(emojiSelect.IBizEmojiSelect.name, emojiSelect.IBizEmojiSelect);
     v.component(vue3Util.IBizIcon.name, vue3Util.IBizIcon);
     v.component(doingNotice.DoingNotice.name, doingNotice.DoingNotice);
     v.component(row.IBizRow.name, row.IBizRow);

package/lib/control/calendar/calendar.cjs

@@ -2,12 +2,10 @@
 
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
-require('./calendar.css');
 var runtime = require('@ibiz-template/runtime');
 var dayjs = require('dayjs');
-require('./components/util/index.cjs');
 var index = require('./components/custom-calendar/index.cjs');
-var util = require('./components/util/util.cjs');
+require('./calendar.css');
 
 "use strict";
 function _isSlot(s) {
@@ -44,14 +42,18 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new runtime.CalendarController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const calendarRef = vue.ref();
+    const popoverVisible = vue.ref(false);
     const selectDate = (tag) => {
       if (!calendarRef.value)
         return;
       calendarRef.value.selectDate(tag);
     };
+    c.evt.on("onActive", () => {
+      popoverVisible.value = false;
+    });
     vue.watch(() => c.state.selectedDate, (oldVal, newVal) => {
-      const oldDateString = dayjs(oldVal).format("YYYY-MM-DD");
-      const newDateString = dayjs(newVal).format("YYYY-MM-DD");
+      const oldDateString = dayjs(oldVal).format("YYYY-MM");
+      const newDateString = dayjs(newVal).format("YYYY-MM");
       if (oldDateString === newDateString) {
         return;
       }
@@ -60,129 +62,250 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     const calcItemStyle = (data) => {
       return {
         color: data.color,
-        backgroundColor: util.fade(data.bkColor, 10)
+        backgroundColor: data.bkColor
       };
     };
+    return {
+      c,
+      ns,
+      calendarRef,
+      popoverVisible,
+      selectDate,
+      calcItemStyle
+    };
+  },
+  render() {
+    let _slot6;
     const renderPanelItem = (item, modelData) => {
       const {
         context,
         params
-      } = c;
-      const {
-        calendarStyle
-      } = c.model;
-      const findIndex = c.state.selectedData.findIndex((data) => {
+      } = this.c;
+      const findIndex = this.c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
-      const itemClass = [ns.b("item"), ns.is("active", findIndex !== -1)];
-      const style = calcItemStyle(item);
-      if (calendarStyle === "TIMELINE") {
-        return vue.createVNode(vue.resolveComponent("iBizControlShell"), {
-          "class": itemClass,
-          "data": item.deData,
-          "modelData": modelData,
-          "context": context,
-          "params": params,
-          "style": style,
-          "onClick": (e) => {
-            e.stopPropagation();
-            return c.onRowClick(item);
-          },
-          "onDblclick": (e) => {
-            e.stopPropagation();
-            return c.onDbRowClick(item);
-          }
-        }, null);
-      }
+      const itemClass = [this.ns.b("item"), this.ns.is("active", findIndex !== -1)];
+      const style = this.calcItemStyle(item);
       return vue.createVNode(vue.resolveComponent("iBizControlShell"), {
+        "class": itemClass,
         "data": item.deData,
         "modelData": modelData,
         "context": context,
-        "params": params
+        "params": params,
+        "style": style,
+        "onClick": (e) => {
+          e.stopPropagation();
+          return this.c.onRowClick(item);
+        },
+        "onDblclick": (e) => {
+          e.stopPropagation();
+          return this.c.onDbRowClick(item);
+        }
       }, null);
     };
     const renderDefaultItem = (item) => {
-      const {
-        calendarStyle
-      } = c.model;
-      const findIndex = c.state.selectedData.findIndex((data) => {
+      const findIndex = this.c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
-      const itemClass = [ns.b("item"), ns.is("active", findIndex !== -1)];
-      const style = calcItemStyle(item);
-      if (calendarStyle === "TIMELINE") {
-        return vue.createVNode("div", {
-          "class": itemClass,
-          "key": item.deData.srfkey,
-          "style": style,
-          "onClick": () => c.onRowClick(item),
-          "onDblclick": () => c.onDbRowClick(item)
-        }, ["".concat(item.text)]);
-      }
+      const itemClass = [this.ns.b("item"), this.ns.is("active", findIndex !== -1)];
+      const style = this.calcItemStyle(item);
       return vue.createVNode("div", {
-        "key": item.deData.srfkey
+        "class": itemClass,
+        "key": item.deData.srfkey,
+        "style": style,
+        "title": item.tips || item.text,
+        "onClick": () => this.c.onRowClick(item),
+        "onDblclick": () => this.c.onDbRowClick(item)
       }, [item.text]);
     };
+    const renderCalendarItem = (item) => {
+      var _a;
+      const model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((calendarItems) => {
+        return item.itemType === calendarItems.itemType;
+      });
+      const panel = model.layoutPanel;
+      return panel ? renderPanelItem(item, panel) : renderDefaultItem(item);
+    };
+    const renderCalendarList = (items) => {
+      if (items.length > 1) {
+        return [renderCalendarItem(items[0]), vue.createVNode(vue.resolveComponent("el-popover"), {
+          "trigger": "click",
+          "visible": this.popoverVisible,
+          "onUpdate:visible": ($event) => this.popoverVisible = $event
+        }, {
+          reference: () => {
+            return vue.createVNode("span", {
+              "class": this.ns.b("more")
+            }, ["+".concat(items.length - 1, " ").concat(ibiz.i18n.t("app.more"), "...")]);
+          },
+          default: () => {
+            return items.map((item) => {
+              return renderCalendarItem(item);
+            });
+          }
+        })];
+      }
+      return items.map((item) => {
+        return renderCalendarItem(item);
+      });
+    };
+    const renderCalendarItems = (date) => {
+      const dateString = dayjs(date).format("YYYY-MM-DD");
+      const items = this.c.state.items.filter((item) => {
+        const begin = new Date(item.beginTime);
+        return dateString === dayjs(begin).format("YYYY-MM-DD");
+      });
+      return renderCalendarList(items);
+    };
     const renderElCalender = () => {
+      return vue.createVNode("div", {
+        "class": this.ns.b("content")
+      }, [vue.createVNode(vue.resolveComponent("el-calendar"), {
+        "modelValue": this.c.state.selectedDate,
+        "onUpdate:modelValue": ($event) => this.c.state.selectedDate = $event,
+        "ref": "calendarRef"
+      }, {
+        header: ({
+          date
+        }) => {
+          var _a;
+          let _slot, _slot2, _slot3, _slot4, _slot5;
+          return [vue.createVNode("span", {
+            "class": this.ns.b("content-title")
+          }, [date]), vue.createVNode("div", {
+            "class": this.ns.b("content-header")
+          }, [vue.createVNode(vue.resolveComponent("el-date-picker"), {
+            "modelValue": this.c.state.selectedDate,
+            "onUpdate:modelValue": ($event) => this.c.state.selectedDate = $event,
+            "type": "month"
+          }, null), vue.createVNode(vue.resolveComponent("el-button-group"), null, {
+            default: () => [vue.createVNode(vue.resolveComponent("el-button"), {
+              "onClick": () => {
+                this.selectDate("prev-year");
+              }
+            }, _isSlot(_slot = ibiz.i18n.t("control.calendar.lastYear")) ? _slot : {
+              default: () => [_slot]
+            }), vue.createVNode(vue.resolveComponent("el-button"), {
+              "onClick": () => {
+                this.selectDate("prev-month");
+              }
+            }, _isSlot(_slot2 = ibiz.i18n.t("control.calendar.lastMonth")) ? _slot2 : {
+              default: () => [_slot2]
+            }), vue.createVNode(vue.resolveComponent("el-button"), {
+              "onClick": () => {
+                this.selectDate("today");
+              }
+            }, _isSlot(_slot3 = ibiz.i18n.t("control.calendar.today")) ? _slot3 : {
+              default: () => [_slot3]
+            }), vue.createVNode(vue.resolveComponent("el-button"), {
+              "onClick": () => {
+                this.selectDate("next-month");
+              }
+            }, _isSlot(_slot4 = ibiz.i18n.t("control.calendar.nextMonth")) ? _slot4 : {
+              default: () => [_slot4]
+            }), vue.createVNode(vue.resolveComponent("el-button"), {
+              "onClick": () => {
+                this.selectDate("next-year");
+              }
+            }, _isSlot(_slot5 = ibiz.i18n.t("control.calendar.nextYear")) ? _slot5 : {
+              default: () => [_slot5]
+            })]
+          })]), vue.createVNode("div", {
+            "class": this.ns.b("legend")
+          }, [this.c.model.sysCalendarItems && this.c.model.sysCalendarItems.length > 1 && ((_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.map((calendarItem) => {
+            let label = calendarItem.name;
+            if (calendarItem.nameLanguageRes) {
+              label = ibiz.i18n.t(calendarItem.nameLanguageRes.lanResTag, calendarItem.name);
+            }
+            return vue.createVNode("div", {
+              "class": this.ns.e("calendar-item")
+            }, [vue.createVNode("div", {
+              "class": this.ns.e("icon"),
+              "style": {
+                background: calendarItem.bkcolor,
+                color: calendarItem.color
+              }
+            }, null), label]);
+          }))])];
+        },
+        "date-cell": ({
+          data
+        }) => {
+          const {
+            date
+          } = data;
+          return vue.createVNode("div", {
+            "class": this.ns.b("day")
+          }, [vue.createVNode("p", {
+            "class": this.ns.b("date-text")
+          }, [date.getDate()]), vue.createVNode("div", {
+            "class": this.ns.b("items")
+          }, [renderCalendarItems(date)])]);
+        }
+      })]);
+    };
+    const renderNoData = () => {
+      const {
+        isLoaded
+      } = this.c.state;
+      return isLoaded && vue.createVNode(vue.resolveComponent("iBizNoData"), {
+        "text": this.c.model.emptyText,
+        "emptyTextLanguageRes": this.c.model.emptyTextLanguageRes,
+        "enableShowImage": this.c.state.hideNoDataImage
+      }, null);
+    };
+    const renderWeekDay = () => {
       const slots = {};
       const {
         sysCalendarItems
-      } = c.model;
+      } = this.c.model;
       slots.event = ({
         data
       }) => {
         const targetCalendarItem = sysCalendarItems == null ? void 0 : sysCalendarItems.find((item) => {
           return item.id === data.itemType;
         });
-        if (c.state.showDetail && targetCalendarItem && targetCalendarItem.layoutPanel) {
+        if (targetCalendarItem && targetCalendarItem.layoutPanel) {
           return renderPanelItem(data, targetCalendarItem.layoutPanel);
         }
         return renderDefaultItem(data);
       };
       return vue.createVNode("div", {
-        "class": ns.b("content")
+        "class": this.ns.b("content")
       }, [vue.createVNode(index.IBizCustomCalendar, {
-        "modelValue": c.state.selectedDate,
-        "onUpdate:modelValue": ($event) => c.state.selectedDate = $event,
-        "controller": c,
+        "modelValue": this.c.state.selectedDate,
+        "onUpdate:modelValue": ($event) => this.c.state.selectedDate = $event,
+        "showDetail": this.c.state.showDetail,
+        "calendarTitle": this.c.state.calendarTitle,
         "ref": "calendarRef",
-        "viewType": c.model.calendarStyle,
-        "events": c.state.items,
-        "legends": c.state.legends,
-        "multiple": !c.state.singleSelect,
-        "selectedData": c.state.selectedData,
+        "viewType": this.c.model.calendarStyle,
+        "events": this.c.state.items,
+        "legends": this.c.state.legends,
+        "multiple": !this.c.state.singleSelect,
+        "selectedData": this.c.state.selectedData,
         "onEventClick": (value) => {
           const {
             data
           } = value;
-          c.onRowClick(data[0]);
+          this.c.onRowClick(data[0]);
         },
         "onEventDblClick": (value) => {
           const {
             data
           } = value;
-          c.onDbRowClick(data[0]);
+          this.c.onDbRowClick(data[0]);
         }
       }, _isSlot(slots) ? slots : {
         default: () => [slots]
       })]);
     };
-    const renderNoData = () => {
-      const {
-        isLoaded
-      } = c.state;
-      return isLoaded && vue.createVNode(vue.resolveComponent("iBizNoData"), {
-        "text": c.model.emptyText,
-        "emptyTextLanguageRes": c.model.emptyTextLanguageRes
-      }, null);
-    };
     const renderTimeLine = () => {
       return vue.createVNode("div", {
-        "class": ns.b("timeline-content")
+        "class": this.ns.b("timeline-content")
       }, [vue.createVNode(vue.resolveComponent("el-timeline"), null, {
-        default: () => [c.state.items.length > 0 ? c.state.items.map((item) => {
+        default: () => [this.c.state.items.length > 0 ? this.c.state.items.map((item) => {
           var _a;
-          const model = (_a = c.model.sysCalendarItems) == null ? void 0 : _a.find((calendarItems) => {
+          const model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((calendarItems) => {
             return item.itemType === calendarItems.itemType;
           });
           return vue.createVNode(vue.resolveComponent("el-timeline-item"), {
@@ -197,27 +320,21 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       })]);
     };
     const renderCalendar = () => {
-      switch (c.model.calendarStyle) {
+      switch (this.c.model.calendarStyle) {
         case "TIMELINE":
           return renderTimeLine();
+        case "WEEK":
+        case "DAY":
+          return renderWeekDay();
+        case "MONTH":
         default:
           return renderElCalender();
       }
     };
-    return {
-      c,
-      ns,
-      calendarRef,
-      selectDate,
-      renderCalendar
-    };
-  },
-  render() {
-    let _slot;
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
       "controller": this.c
-    }, _isSlot(_slot = this.renderCalendar()) ? _slot : {
-      default: () => [_slot]
+    }, _isSlot(_slot6 = renderCalendar()) ? _slot6 : {
+      default: () => [_slot6]
     });
   }
 });

package/lib/control/calendar/calendar.css

@@ -1 +1 @@
-.ibiz-control-light-calendar{--ibiz-control-light-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-light-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-light-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-light-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-light-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-light-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-light-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-light-calendar-margin:var(--ibiz-spacing-extra-tight);width:100%;height:100%}.ibiz-control-light-calendar__calendar-item{display:flex;gap:var(--ibiz-spacing-base-tight);align-items:center;padding:var(--ibiz-control-light-calendar-item-padding)}.ibiz-control-light-calendar__icon{width:10px;height:10px;border-radius:50%}.ibiz-control-light-calendar-content{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-control-light-calendar-content .el-calendar{display:flex;flex-direction:column}.ibiz-control-light-calendar-content .el-calendar-table,.ibiz-control-light-calendar-content .el-calendar-table .el-calendar-day{width:100%;height:100%;cursor:pointer}.ibiz-control-light-calendar-content .el-calendar-table{flex:1;width:-moz-fit-content;width:fit-content}.ibiz-control-light-calendar-content .el-calendar-table .el-calendar-day:hover{cursor:pointer;background-color:var(--el-calendar-selected-bg-color)}.ibiz-control-light-calendar-content .el-calendar__body{display:flex;flex:1;padding:0}.ibiz-control-light-calendar-item{--ibiz-control-light-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-light-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-light-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-light-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-light-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-light-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-light-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-light-calendar-margin:var(--ibiz-spacing-extra-tight);height:100%;padding:var(--ibiz-control-light-calendar-item-padding);margin-bottom:var(--ibiz-control-light-calendar-margin);overflow:hidden;font-size:var(--ibiz-control-light-calendar-font-size);color:var(--ibiz-control-light-calendar-text-color);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border:solid .5px transparent;border-radius:var(--ibiz-control-light-calendar-border-radius)}.ibiz-control-light-calendar-item:hover{background-color:var(--ibiz-control-light-calendar-hover-bg-color)}.ibiz-control-light-calendar-item.is-active{background-color:var(--ibiz-control-light-calendar-active-bg-color);border:solid .5px var(--ibiz-control-light-calendar-border-color)}.ibiz-control-light-calendar-date-text{--ibiz-control-light-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-light-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-light-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-light-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-light-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-light-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-light-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-light-calendar-margin:var(--ibiz-spacing-extra-tight);padding:var(--ibiz-control-light-calendar-item-padding);margin-top:0}.ibiz-control-light-calendar-day{height:-moz-fit-content;height:fit-content}.ibiz-control-light-calendar-content-header{--ibiz-control-light-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-light-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-light-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-light-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-light-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-light-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-light-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-light-calendar-margin:var(--ibiz-spacing-extra-tight);display:flex;gap:var(--ibiz-control-light-calendar-item-padding);align-items:center}.ibiz-control-light-calendar-timeline-content .el-timeline{padding-left:0}
+.ibiz-control-calendar{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);width:100%;height:100%}.ibiz-control-calendar__calendar-item{display:flex;align-items:center;padding:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar__icon{width:var(--ibiz-width-icon-small);height:var(--ibiz-width-icon-small);margin-right:var(--ibiz-spacing-base-tight);border-radius:var(--ibiz-border-radius-circle)}.ibiz-control-calendar .ibiz-control-calendar-item{margin:0}.ibiz-control-calendar-content{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-control-calendar-content .el-calendar{display:flex;flex-direction:column;height:100%}.ibiz-control-calendar-content .el-calendar__header{flex-wrap:wrap}.ibiz-control-calendar-content .el-calendar-table,.ibiz-control-calendar-content .el-calendar-table .el-calendar-day{width:100%;height:100%;min-height:90px;cursor:pointer}.ibiz-control-calendar-content .el-calendar-table{flex:1;width:-moz-fit-content;width:fit-content}.ibiz-control-calendar-content .el-calendar-table .el-calendar-day:hover{cursor:pointer;background-color:var(--el-calendar-selected-bg-color)}.ibiz-control-calendar-content .el-calendar__body{display:flex;flex:1;padding:0;overflow:auto}.ibiz-control-calendar-more{width:100%;font-size:var(--ibiz-font-size-small);border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);height:100%;padding:var(--ibiz-control-calendar-item-padding);margin-bottom:var(--ibiz-control-calendar-margin);overflow:hidden;font-size:var(--ibiz-control-calendar-font-size);color:var(--ibiz-control-calendar-text-color);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border:solid .5px transparent;border-radius:var(--ibiz-control-calendar-border-radius)}.ibiz-control-calendar-item:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item.is-active{background-color:var(--ibiz-control-calendar-active-bg-color);border:solid .5px var(--ibiz-control-calendar-border-color)}.ibiz-control-calendar-date-text{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);padding-bottom:var(--ibiz-control-calendar-item-padding);margin:0;text-align:center}.ibiz-control-calendar-day{height:-moz-fit-content;height:fit-content}.ibiz-control-calendar-content-title{line-height:var(--ibiz-editor-default-line-height)}.ibiz-control-calendar-content-header{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-calendar-content-header>*+*{margin-left:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar-legend{display:flex;justify-content:flex-end;width:100%}.ibiz-control-calendar-legend>*+*{margin-left:var(--ibiz-spacing-base-loose)}.ibiz-control-calendar-timeline-content .el-timeline{padding-left:0}

package/lib/control/calendar/components/calendar-week/calendar-week.cjs

@@ -29,7 +29,6 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
       selectedData,
       legends,
       rowsHeader,
-      popVisible,
       eventClick,
       handleDrag,
       handleDragStart,
@@ -38,9 +37,7 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
       handleUIEvents
     } = useCalendarWeek.useCalendarWeek(props, emit);
     const hoverItem = vue.ref("");
-    props.controller._evt.on("onActive", () => {
-      popVisible.value = false;
-    });
+    const visible = vue.ref(false);
     vue.watch(() => props.selectedData, () => {
       if (props.selectedData && props.selectedData.length > 0) {
         const data = props.selectedData.length > selectedData.value.length ? props.selectedData : selectedData.value;
@@ -79,11 +76,14 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
     });
     const onMouseenter = (event) => {
       hoverItem.value = String(event.id);
-      popVisible.value = true;
+      visible.value = true;
+    };
+    const onClickCalendarItem = () => {
+      visible.value = false;
     };
     const onMouseleavee = () => {
       hoverItem.value = "";
-      popVisible.value = false;
+      visible.value = false;
     };
     const renderEventItem = (location, eventBoxStyle, eventContentStyle, event, index, slotNme, classEName) => {
       var _a;
@@ -92,10 +92,13 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
         "class": [ns.em(classEName, "event-box")],
         "style": eventBoxStyle,
         "onMouseenter": () => onMouseenter(event),
-        "onMouseleave": onMouseleavee
+        "onMouseleave": onMouseleavee,
+        "onClick": onClickCalendarItem
       }, [vue.createVNode("button", {
         "class": [ns.em(classEName, "event-content"), event.isSelectedEvent ? "is-selected-event" : "", event.classname],
-        "onClick": () => eventClick(event, "head"),
+        "onClick": () => {
+          eventClick(event, "head");
+        },
         "style": eventContentStyle
       }, [slots[slotNme] ? (_a = slots[slotNme]) == null ? void 0 : _a.call(slots, {
         data: event
@@ -114,15 +117,15 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
       }, null) : ""])]);
     };
     const renderPopover = (content, event) => {
-      if (!props.controller.state.showDetail) {
+      if (!props.showDetail) {
         return content;
       }
       return vue.createVNode(vue.resolveComponent("el-popover"), {
-        "visible": popVisible.value && event.id === hoverItem.value,
-        "show-after": 1e3,
+        "visible": visible.value && event.id === hoverItem.value,
+        "show-after": 100,
         "offset": 4,
         "width": "auto",
-        "popper-class": ns.e("event-popover"),
+        "popper-class": [ns.e("event-popover")],
         "placement": "right-start"
       }, {
         reference: () => content,

package/lib/control/calendar/components/calendar-week/use-calendar-week.cjs

@@ -361,6 +361,7 @@ const useCalendarWeek = (props, emit) => {
     return tempDrawData;
   };
   const eventClick = async (item, location) => {
+    popVisible.value = false;
     const res = await util.handleEVentClick(
       item,
       location,