@ibiz-template/vue3-components 0.7.26-alpha.0 → 0.7.26-alpha.2

package/es/_virtual/localeData.mjs

@@ -0,0 +1,3 @@
+var localeData = {exports: {}};
+
+export { localeData as __module };

package/es/control/calendar/calendar.css

@@ -1 +1 @@
-.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}
+.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}

package/es/control/calendar/calendar.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { ISysCalendar } from '@ibiz/model-core';
 import './calendar.scss';
-import { CalendarController, ICalendarItemData, IControlProvider } from '@ibiz-template/runtime';
+import { CalendarController, IControlProvider } from '@ibiz-template/runtime';
 export declare const CalendarControl: import("vue").DefineComponent<{
     modelData: {
         type: PropType<ISysCalendar>;
@@ -30,9 +30,8 @@ export declare const CalendarControl: import("vue").DefineComponent<{
     c: CalendarController;
     ns: import("@ibiz-template/core").Namespace;
     calendarRef: import("vue").Ref<IData | undefined>;
-    popoverVisible: import("vue").Ref<boolean>;
     selectDate: (tag: string) => void;
-    calcItemStyle: (data: ICalendarItemData) => IData;
+    renderCalendar: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<ISysCalendar>;

package/es/control/calendar/calendar.mjs

@@ -3,6 +3,9 @@ import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './calendar.css';
 import { CalendarController } from '@ibiz-template/runtime';
 import dayjs from 'dayjs';
+import './components/util/index.mjs';
+import { IBizCustomCalendar } from './components/custom-calendar/index.mjs';
+import { fade } from './components/util/util.mjs';
 
 "use strict";
 function _isSlot(s) {
@@ -39,18 +42,14 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
     const c = useControlController((...args) => new CalendarController(...args));
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const calendarRef = ref();
-    const popoverVisible = ref(false);
     const selectDate = (tag) => {
       if (!calendarRef.value)
         return;
       calendarRef.value.selectDate(tag);
     };
-    c.evt.on("onActive", () => {
-      popoverVisible.value = false;
-    });
     watch(() => c.state.selectedDate, (oldVal, newVal) => {
-      const oldDateString = dayjs(oldVal).format("YYYY-MM");
-      const newDateString = dayjs(newVal).format("YYYY-MM");
+      const oldDateString = dayjs(oldVal).format("YYYY-MM-DD");
+      const newDateString = dayjs(newVal).format("YYYY-MM-DD");
       if (oldDateString === newDateString) {
         return;
       }
@@ -59,205 +58,129 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
     const calcItemStyle = (data) => {
       return {
         color: data.color,
-        backgroundColor: data.bkColor
+        backgroundColor: fade(data.bkColor, 10)
       };
     };
-    return {
-      c,
-      ns,
-      calendarRef,
-      popoverVisible,
-      selectDate,
-      calcItemStyle
-    };
-  },
-  render() {
-    let _slot6;
     const renderPanelItem = (item, modelData) => {
       const {
         context,
         params
-      } = this.c;
-      const findIndex = this.c.state.selectedData.findIndex((data) => {
+      } = c;
+      const {
+        calendarStyle
+      } = c.model;
+      const findIndex = c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
-      const itemClass = [this.ns.b("item"), this.ns.is("active", findIndex !== -1)];
-      const style = this.calcItemStyle(item);
+      const itemClass = [ns.b("item"), ns.is("active", findIndex !== -1)];
+      const style = calcItemStyle(item);
+      if (calendarStyle === "TIMELINE") {
+        return createVNode(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);
+      }
       return createVNode(resolveComponent("iBizControlShell"), {
-        "class": itemClass,
         "data": item.deData,
         "modelData": modelData,
         "context": context,
-        "params": params,
-        "style": style,
-        "onClick": (e) => {
-          e.stopPropagation();
-          return this.c.onRowClick(item);
-        },
-        "onDblclick": (e) => {
-          e.stopPropagation();
-          return this.c.onDbRowClick(item);
-        }
+        "params": params
       }, null);
     };
     const renderDefaultItem = (item) => {
-      const findIndex = this.c.state.selectedData.findIndex((data) => {
+      const {
+        calendarStyle
+      } = c.model;
+      const findIndex = c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
-      const itemClass = [this.ns.b("item"), this.ns.is("active", findIndex !== -1)];
-      const style = this.calcItemStyle(item);
+      const itemClass = [ns.b("item"), ns.is("active", findIndex !== -1)];
+      const style = calcItemStyle(item);
+      if (calendarStyle === "TIMELINE") {
+        return createVNode("div", {
+          "class": itemClass,
+          "key": item.deData.srfkey,
+          "style": style,
+          "onClick": () => c.onRowClick(item),
+          "onDblclick": () => c.onDbRowClick(item)
+        }, ["".concat(item.text)]);
+      }
       return createVNode("div", {
-        "class": itemClass,
-        "key": item.deData.srfkey,
-        "style": style,
-        "title": item.tips || item.text,
-        "onClick": () => this.c.onRowClick(item),
-        "onDblclick": () => this.c.onDbRowClick(item)
+        "key": item.deData.srfkey
       }, [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]), createVNode(resolveComponent("el-popover"), {
-          "trigger": "click",
-          "visible": this.popoverVisible,
-          "onUpdate:visible": ($event) => this.popoverVisible = $event
-        }, {
-          reference: () => {
-            return 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 = () => {
+      const slots = {};
+      const {
+        sysCalendarItems
+      } = 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) {
+          return renderPanelItem(data, targetCalendarItem.layoutPanel);
+        }
+        return renderDefaultItem(data);
+      };
       return createVNode("div", {
-        "class": this.ns.b("content")
-      }, [createVNode(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 [createVNode("span", {
-            "class": this.ns.b("content-title")
-          }, [date]), createVNode("div", {
-            "class": this.ns.b("content-header")
-          }, [createVNode(resolveComponent("el-date-picker"), {
-            "modelValue": this.c.state.selectedDate,
-            "onUpdate:modelValue": ($event) => this.c.state.selectedDate = $event,
-            "type": "month"
-          }, null), createVNode(resolveComponent("el-button-group"), null, {
-            default: () => [createVNode(resolveComponent("el-button"), {
-              "onClick": () => {
-                this.selectDate("prev-year");
-              }
-            }, _isSlot(_slot = ibiz.i18n.t("control.calendar.lastYear")) ? _slot : {
-              default: () => [_slot]
-            }), createVNode(resolveComponent("el-button"), {
-              "onClick": () => {
-                this.selectDate("prev-month");
-              }
-            }, _isSlot(_slot2 = ibiz.i18n.t("control.calendar.lastMonth")) ? _slot2 : {
-              default: () => [_slot2]
-            }), createVNode(resolveComponent("el-button"), {
-              "onClick": () => {
-                this.selectDate("today");
-              }
-            }, _isSlot(_slot3 = ibiz.i18n.t("control.calendar.today")) ? _slot3 : {
-              default: () => [_slot3]
-            }), createVNode(resolveComponent("el-button"), {
-              "onClick": () => {
-                this.selectDate("next-month");
-              }
-            }, _isSlot(_slot4 = ibiz.i18n.t("control.calendar.nextMonth")) ? _slot4 : {
-              default: () => [_slot4]
-            }), createVNode(resolveComponent("el-button"), {
-              "onClick": () => {
-                this.selectDate("next-year");
-              }
-            }, _isSlot(_slot5 = ibiz.i18n.t("control.calendar.nextYear")) ? _slot5 : {
-              default: () => [_slot5]
-            })]
-          })]), createVNode("div", {
-            "class": this.ns.b("legend")
-          }, [(_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 createVNode("div", {
-              "class": this.ns.e("calendar-item")
-            }, [createVNode("div", {
-              "class": this.ns.e("icon"),
-              "style": {
-                background: calendarItem.bkcolor,
-                color: calendarItem.color
-              }
-            }, null), label]);
-          })])];
+        "class": ns.b("content")
+      }, [createVNode(IBizCustomCalendar, {
+        "modelValue": c.state.selectedDate,
+        "onUpdate:modelValue": ($event) => c.state.selectedDate = $event,
+        "controller": c,
+        "ref": "calendarRef",
+        "viewType": c.model.calendarStyle,
+        "events": c.state.items,
+        "legends": c.state.legends,
+        "multiple": !c.state.singleSelect,
+        "selectedData": c.state.selectedData,
+        "onEventClick": (value) => {
+          const {
+            data
+          } = value;
+          c.onRowClick(data[0]);
         },
-        "date-cell": ({
-          data
-        }) => {
+        "onEventDblClick": (value) => {
           const {
-            date
-          } = data;
-          return createVNode("div", {
-            "class": this.ns.b("day")
-          }, [createVNode("p", {
-            "class": this.ns.b("date-text")
-          }, [date.getDate()]), createVNode("div", {
-            "class": this.ns.b("items")
-          }, [renderCalendarItems(date)])]);
+            data
+          } = value;
+          c.onDbRowClick(data[0]);
         }
+      }, _isSlot(slots) ? slots : {
+        default: () => [slots]
       })]);
     };
     const renderNoData = () => {
       const {
         isLoaded
-      } = this.c.state;
+      } = c.state;
       return isLoaded && createVNode(resolveComponent("iBizNoData"), {
-        "text": this.c.model.emptyText,
-        "emptyTextLanguageRes": this.c.model.emptyTextLanguageRes,
-        "enableShowImage": this.c.state.hideNoDataImage
+        "text": c.model.emptyText,
+        "emptyTextLanguageRes": c.model.emptyTextLanguageRes
       }, null);
     };
     const renderTimeLine = () => {
       return createVNode("div", {
-        "class": this.ns.b("timeline-content")
+        "class": ns.b("timeline-content")
       }, [createVNode(resolveComponent("el-timeline"), null, {
-        default: () => [this.c.state.items.length > 0 ? this.c.state.items.map((item) => {
+        default: () => [c.state.items.length > 0 ? c.state.items.map((item) => {
           var _a;
-          const model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((calendarItems) => {
+          const model = (_a = c.model.sysCalendarItems) == null ? void 0 : _a.find((calendarItems) => {
             return item.itemType === calendarItems.itemType;
           });
           return createVNode(resolveComponent("el-timeline-item"), {
@@ -272,19 +195,27 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       })]);
     };
     const renderCalendar = () => {
-      switch (this.c.model.calendarStyle) {
+      switch (c.model.calendarStyle) {
         case "TIMELINE":
           return renderTimeLine();
-          break;
         default:
           return renderElCalender();
-          break;
       }
     };
+    return {
+      c,
+      ns,
+      calendarRef,
+      selectDate,
+      renderCalendar
+    };
+  },
+  render() {
+    let _slot;
     return createVNode(resolveComponent("iBizControlBase"), {
       "controller": this.c
-    }, _isSlot(_slot6 = renderCalendar()) ? _slot6 : {
-      default: () => [_slot6]
+    }, _isSlot(_slot = this.renderCalendar()) ? _slot : {
+      default: () => [_slot]
     });
   }
 });

package/es/control/calendar/components/calendar-daily/calendar-daily.css

@@ -0,0 +1 @@
+.ibiz-calendar-daily{width:100%;height:100%;flex:1;display:flex;flex-direction:column;overflow:hidden}.ibiz-calendar-daily__calendar-daily__head{width:100%;height:58px;min-height:58px;padding-bottom:0;display:flex;position:relative;z-index:100}.ibiz-calendar-daily__allday-info{min-width:90px;height:100%;padding-left:40px;color:#999;overflow:hidden;display:flex;align-items:center}.ibiz-calendar-daily__allday-info--work-items{width:100%;height:100%;padding-top:5px;overflow:hidden}.ibiz-calendar-daily__allday-info--work-items-scroll{height:100%;overflow-y:scroll;overflow-x:hidden}.ibiz-calendar-daily__allday-info--work-items-body{height:auto}.ibiz-calendar-daily__allday-info--event-box{width:100%;height:22px;line-height:22px;padding:0 8px;margin-top:4px}.ibiz-calendar-daily__allday-info--event-box:nth-child(1){margin-top:0}.ibiz-calendar-daily__allday-info--event-content{display:block;width:100%;height:100%;border:none;outline:0;text-align:left;border-radius:4px;background:#f5f5f5;border-radius:4px;position:relative;cursor:pointer}.ibiz-calendar-daily__allday-info--event-content:active{animation:move 1s linear}.ibiz-calendar-daily__allday-info--morphing-animation{height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:pink;animation:move 1s linear}.ibiz-calendar-daily__allday-info--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-daily__allday-info--event-icon{margin-right:6px}.ibiz-calendar-daily__allday-info--event-name{margin-right:6px}.ibiz-calendar-daily__allday-info--time-range{margin-right:6px}.ibiz-calendar-daily__allday-info--check{color:var(--ibiz-color-primary);position:absolute;right:6px;top:50%;transform:translate(0,-50%)}.ibiz-calendar-daily__allday-resize-line{width:100%;height:3px;background-color:var(--ibiz-color-border)}.ibiz-calendar-daily__resizable-handle{width:100%;height:10px;position:absolute;bottom:-4px;display:flex;align-items:center;cursor:row-resize}.ibiz-calendar-daily__scroll-area{flex:1;overflow-y:scroll;overflow-x:hidden}.ibiz-calendar-daily__time-pane{height:auto;width:calc(100% - 5px);display:flex;flex-basis:0%;flex-grow:1;flex-shrink:1;position:relative}.ibiz-calendar-daily__time-pane--time-labels{width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-color-border);position:sticky;left:0}.ibiz-calendar-daily__time-pane--time-label{margin-top:38px;height:22px;text-align:left}.ibiz-calendar-daily__time-pane--time-label:nth-child(1){height:22px;margin-top:22px}.ibiz-calendar-daily__time-pane--time-columns{position:relative;flex:1;padding-bottom:59px}.ibiz-calendar-daily__time-pane--time-column{height:60px;border-top:1px dashed var(--ibiz-color-border)}.ibiz-calendar-daily__time-pane--time-column:first-child{border-top:none}.ibiz-calendar-daily__time-pane--time-column-last{border-bottom:1px dashed var(--ibiz-color-border)}.ibiz-calendar-daily__time-pane--event-timed-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.ibiz-calendar-daily__time-pane--container-scroll{position:relative;top:0;overflow:auto;height:100%;width:auto;overflow-y:hidden;overflow-x:auto}.ibiz-calendar-daily__time-pane--event-box{position:absolute;width:auto;height:auto;padding-left:4px}.ibiz-calendar-daily__time-pane--event-content{width:100%;height:100%;padding:12px 8px;line-height:100%;border:none;outline:0;text-align:left;overflow:hidden;position:relative;z-index:3;cursor:pointer}.ibiz-calendar-daily__time-pane--event-content:active{animation:pulse 1s linear}.ibiz-calendar-daily__time-pane--event-content.is-selected-event{border:1px solid var(--ibiz-color-primary)}.ibiz-calendar-daily__time-pane--event-summary{width:100%;height:100%;line-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-daily__time-pane--event-summary>span{margin-right:4px}.ibiz-calendar-daily__time-pane--current-time{width:calc(100% - 36px);margin-left:40px;position:absolute;top:38px;left:-3px;height:2px;background-color:var(--ibiz-color-primary);display:flex;align-items:center}.ibiz-calendar-daily__time-pane--current-time-label{width:48px;min-width:48px;max-width:18px;height:24px;text-align:center;line-height:24px;border:none;border-radius:4px;background:var(--ibiz-color-primary);color:#fff}.ibiz-calendar-daily__event-popover{padding:0;width:auto;height:auto;position:relative}.ibiz-calendar-daily__event-popover.el-popover.el-popper{padding:24px 12px 8px 12px}.ibiz-calendar-daily__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-daily__event-popover--scroll{width:auto;height:auto;min-width:200px;min-height:100px;overflow:auto}.ibiz-calendar-daily__event-popover--close{position:absolute;right:8px;top:8px;cursor:pointer}.ibiz-calendar-daily__event-popover--close:hover .el-icon{background:var(--ibiz-color-primary);border-radius:50%}.ibiz-calendar-daily__event-popover--close:hover .el-icon svg{fill:#fff}.ibiz-calendar-daily__event-popover .el-icon{font-size:20px;min-height:24px;min-width:24px;display:flex;justify-content:center;align-items:center}.ibiz-calendar-daily__event-popover .el-icon svg{fill:var(--el-text-color-secondary)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes move{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

package/es/control/calendar/components/calendar-daily/calendar-daily.d.ts

@@ -0,0 +1,18 @@
+import './calendar-daily.scss';
+export declare const CalendarDaily: import("vue").DefineComponent<IParams, {
+    ns: import("@ibiz-template/core").Namespace;
+    calendarDaily: import("vue").Ref<any>;
+    renderHeader: () => JSX.Element;
+    renderContent: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (value: import("dayjs").Dayjs) => boolean;
+    eventClick: (value: IParams) => IParams;
+    eventDblClick: (value: IParams) => IParams;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<IParams>> & {
+    onEventClick?: ((value: IParams) => any) | undefined;
+    onEventDblClick?: ((value: IParams) => any) | undefined;
+    onPick?: ((value: import("dayjs").Dayjs) => any) | undefined;
+}, {
+    [x: string]: any;
+    [x: symbol]: any;
+}, {}>;

package/es/control/calendar/components/calendar-daily/calendar-daily.mjs

@@ -0,0 +1,175 @@
+import { watch, onMounted, onUnmounted, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import '../interface/index.mjs';
+import '../util/index.mjs';
+import { useCalendarDaily } from './use-calendar-daily.mjs';
+import './calendar-daily.css';
+import { calendarDailyProps, calendarDailyEmits } from '../interface/calendar-daily.mjs';
+import { isToday } from '../util/util.mjs';
+
+"use strict";
+const CalendarDaily = /* @__PURE__ */ defineComponent({
+  name: "CalendarDaily",
+  props: calendarDailyProps,
+  emits: calendarDailyEmits,
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const ns = useNamespace("calendar-daily");
+    const {
+      drawData,
+      curTimeTop,
+      curTimeVal,
+      resizableHand,
+      events,
+      curTimeTimer,
+      calendarDaily,
+      selectedData,
+      eventClick,
+      handleDrag,
+      handleDragStart,
+      handleCurTime,
+      initDrawData
+    } = useCalendarDaily(props, emit);
+    watch(() => props.selectedData, () => {
+      if (props.selectedData && props.selectedData.length > 0) {
+        const data = props.selectedData.length > selectedData.value.length ? props.selectedData : selectedData.value;
+        selectedData.value = data;
+      } else {
+        selectedData.value = [];
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    onMounted(() => {
+      handleCurTime();
+      drawData.value = initDrawData();
+      curTimeTimer.value = setInterval(() => handleCurTime(), 1e3);
+    });
+    onUnmounted(() => {
+      const timer = curTimeTimer.value;
+      if (timer) {
+        clearInterval(timer);
+        curTimeTimer.value = null;
+      }
+    });
+    const renderEventItem = (location, eventBoxStyle, eventContentStyle, event, index, slotNme, classEName) => {
+      var _a;
+      return createVNode("div", {
+        "key": index,
+        "class": [ns.em(classEName, "event-box")],
+        "style": eventBoxStyle
+      }, [createVNode("button", {
+        "class": [ns.em(classEName, "event-content"), event.isSelectedEvent ? "is-selected-event" : "", event.classname],
+        "onClick": () => eventClick(event, "head"),
+        "style": eventContentStyle
+      }, [slots[slotNme] ? (_a = slots[slotNme]) == null ? void 0 : _a.call(slots, {
+        data: event
+      }) : createVNode("div", {
+        "class": [ns.em(classEName, "event-summary"), event.classname],
+        "title": "".concat(event.text || "", " ").concat(event.timeRange || "")
+      }, [event.icon && createVNode("span", {
+        "class": [event.icon, ns.em(classEName, "event-icon")],
+        "style": {
+          color: event.bkColor
+        }
+      }, null), event.text && createVNode("span", {
+        "class": [ns.em(classEName, "event-name")]
+      }, [event.text])]), location === "header" && event.isSelectedEvent ? createVNode("span", {
+        "class": ["fa fa-check", ns.em(classEName, "check")]
+      }, null) : ""])]);
+    };
+    const renderHeader = () => {
+      return createVNode("div", {
+        "class": [ns.e("calendar-daily__head")],
+        "ref": (el) => {
+          resizableHand.value = el;
+        }
+      }, [createVNode("div", {
+        "class": ns.e("allday-info")
+      }, [ibiz.i18n.t("control.calendar.calendardaily.tip")]), createVNode("div", {
+        "class": ns.em("allday-info", "work-items")
+      }, [createVNode("div", {
+        "class": ns.em("allday-info", "work-items-scroll")
+      }, [createVNode("div", {
+        "class": ns.em("allday-info", "work-items-body")
+      }, [events.value.map((event, index) => {
+        const eventBoxStyle = {};
+        const eventContentStyle = {
+          color: event.color,
+          background: event.bkColorFade
+        };
+        return renderEventItem("header", eventBoxStyle, eventContentStyle, event, index, "head-event", "allday-info");
+      })])])]), createVNode("div", {
+        "class": ns.e("resizable-handle"),
+        "draggable": "true",
+        "onDrag": (event) => handleDrag(event),
+        "onDragstart": (event) => handleDragStart(event)
+      }, [createVNode("div", {
+        "class": ns.e("allday-resize-line")
+      }, null)])]);
+    };
+    const renderContent = () => {
+      return createVNode("div", {
+        "class": [ns.e("scroll-area")]
+      }, [createVNode("div", {
+        "class": ns.e("time-pane")
+      }, [createVNode("div", {
+        "class": ns.em("time-pane", "time-labels")
+      }, [drawData.value.map((timescale) => createVNode("div", {
+        "key": timescale,
+        "class": [ns.em("time-pane", "time-label")]
+      }, [timescale]))]), createVNode("div", {
+        "class": ns.em("time-pane", "time-columns")
+      }, [drawData.value.map((timescale, index) => createVNode("div", {
+        "key": timescale,
+        "class": [ns.em("time-pane", "time-column"), index === drawData.value.length - 1 && ns.em("time-pane", "time-column-last")]
+      }, null)), createVNode("div", {
+        "class": ns.em("time-pane", "event-timed-container")
+      }, [createVNode("div", {
+        "class": ns.em("time-pane", "container-scroll")
+      }, [events.value.map((event, index) => {
+        const eventBoxStyle = {
+          top: "".concat(event.styleTop, "px"),
+          left: "".concat(event.styleLeft),
+          height: "".concat(event.height, "px"),
+          width: "".concat(event.width),
+          "min-height": "".concat(event.height, "px"),
+          "z-index": event.zIndex
+        };
+        const eventContentStyle = {
+          background: event.bkColorFade,
+          "border-left": "3px solid ".concat(event.bkColor),
+          color: event.color
+        };
+        const tempContent = renderEventItem("content", eventBoxStyle, eventContentStyle, event, index, "event", "time-pane");
+        return tempContent;
+      })])])]), isToday(props == null ? void 0 : props.selectedDay, /* @__PURE__ */ new Date()) ? createVNode("div", {
+        "class": ns.em("time-pane", "current-time"),
+        "style": {
+          top: "".concat(curTimeTop.value, "px")
+        }
+      }, [createVNode("div", {
+        "class": ns.em("time-pane", "current-time-label")
+      }, [curTimeVal.value])]) : ""])]);
+    };
+    return {
+      ns,
+      calendarDaily,
+      renderHeader,
+      renderContent
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": (el) => {
+        this.calendarDaily = el;
+      },
+      "class": this.ns.b()
+    }, [this.renderHeader(), this.renderContent()]);
+  }
+});
+
+export { CalendarDaily };

package/es/control/calendar/components/calendar-daily/index.d.ts

@@ -0,0 +1,18 @@
+export declare const IBizCalendarDaily: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<IParams, {
+    ns: import("@ibiz-template/core").Namespace;
+    calendarDaily: import("vue").Ref<any>;
+    renderHeader: () => JSX.Element;
+    renderContent: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (value: import("dayjs").Dayjs) => boolean;
+    eventClick: (value: IParams) => IParams;
+    eventDblClick: (value: IParams) => IParams;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<IParams>> & {
+    onEventClick?: ((value: IParams) => any) | undefined;
+    onEventDblClick?: ((value: IParams) => any) | undefined;
+    onPick?: ((value: import("dayjs").Dayjs) => any) | undefined;
+}, {
+    [x: string]: any;
+    [x: symbol]: any;
+}, {}>>;
+export default IBizCalendarDaily;

package/es/control/calendar/components/calendar-daily/index.mjs

@@ -0,0 +1,9 @@
+import { withInstall } from '@ibiz-template/vue3-util';
+import { CalendarDaily } from './calendar-daily.mjs';
+
+"use strict";
+const IBizCalendarDaily = withInstall(CalendarDaily, function(v) {
+  v.component(CalendarDaily.name, CalendarDaily);
+});
+
+export { IBizCalendarDaily, IBizCalendarDaily as default };