@bagelink/vue 1.2.33 → 1.2.41

package/dist/index.cjs

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
   __name: "Accordion",
   setup(__props) {
     const state2 = vue.reactive({
@@ -22,7 +22,7 @@ const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$11 = ["aria-expanded", "aria-controls"];
 const _hoisted_2$L = { class: "accordion-label" };
 const _hoisted_3$E = ["id", "aria-hidden"];
-const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
   props: {
     label: {},
@@ -121,9 +121,9 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["__scopeId", "data-v-3334f637"]]);
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__scopeId", "data-v-3334f637"]]);
 const _hoisted_1$10 = { class: "relative" };
-const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
   setup(__props, { emit: __emit }) {
@@ -185,7 +185,7 @@ const _hoisted_1$$ = {
   key: 1,
   class: "bgl_btn-flex"
 };
-const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
   __name: "Btn",
   props: {
     disabled: { type: Boolean, default: false },
@@ -278,10 +278,10 @@ const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__scopeId", "data-v-99c4aa53"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-99c4aa53"]]);
 const _hoisted_1$_ = ["dismissable"];
 const _hoisted_2$K = { class: "m-0" };
-const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
   __name: "Alert",
   props: {
     message: {},
@@ -321,9 +321,9 @@ const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["__scopeId", "data-v-064bdd20"]]);
+const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__scopeId", "data-v-064bdd20"]]);
 const _hoisted_1$Z = ["src", "alt"];
-const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
     fallback: {},
@@ -349,8 +349,8 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-46ad8c25"]]);
-const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
+const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["__scopeId", "data-v-46ad8c25"]]);
+const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
   __name: "Badge",
   props: {
     color: {},
@@ -379,11 +379,11 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-689f051f"]]);
+const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-689f051f"]]);
 const _hoisted_1$Y = ["src"];
 const _hoisted_2$J = ["autoplay", "muted", "loop", "controls", "playsinline"];
 const _hoisted_3$D = ["src", "type"];
-const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
   __name: "BglVideo",
   props: {
     src: {},
@@ -480,7 +480,73 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-006552f6"]]);
+const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-006552f6"]]);
+const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
+  __name: "CalendarPopover",
+  props: {
+    event: {},
+    targetElement: {},
+    position: {},
+    show: { type: Boolean },
+    hasEventContentSlot: { type: Boolean }
+  },
+  emits: ["close", "eventClick"],
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const emit2 = __emit;
+    const { scrollY, scrollX, innerHeight, innerWidth } = useDevice();
+    const popoverRef = vue.ref();
+    const popoverPosition = vue.computed(() => {
+      const popoverWidth = 400;
+      const margin = 10;
+      if (props2.position) {
+        let { top: top2, left: left2 } = props2.position;
+        top2 -= 80;
+        top2 = Math.max(scrollY.value + margin, Math.min(top2, innerHeight.value + scrollY.value - 150 - 10));
+        left2 = Math.max(scrollX.value + margin, Math.min(left2, innerWidth.value + scrollX.value - popoverWidth - margin));
+        return { top: top2, left: left2, width: popoverWidth, height: 150 };
+      } else if (props2.targetElement && props2.show) {
+        const target = props2.targetElement;
+        const rect = target.getBoundingClientRect();
+        let top2 = rect.top + scrollY.value + rect.height / 2 - 150 / 2;
+        let left2 = rect.left + scrollX.value + rect.width + margin;
+        top2 = Math.max(scrollY.value + margin, Math.min(top2, innerHeight.value + scrollY.value - 150 - 10));
+        if (left2 + popoverWidth > innerWidth.value + scrollX.value) {
+          left2 = rect.left + scrollX.value - popoverWidth + rect.width - margin;
+        }
+        if (left2 < scrollX.value) left2 = rect.right + scrollX.value + margin;
+        return { top: top2, left: left2, width: popoverWidth, height: 150 };
+      }
+      return { top: 0, left: 0, width: popoverWidth, height: 150 };
+    });
+    function closePopover() {
+      emit2("close");
+    }
+    return (_ctx, _cache) => {
+      const _directive_click_outside = vue.resolveDirective("click-outside");
+      return _ctx.show && _ctx.event ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$10), {
+        key: 0,
+        ref_key: "popoverRef",
+        ref: popoverRef,
+        thin: "",
+        class: "custom-popover",
+        style: vue.normalizeStyle({
+          top: `${popoverPosition.value.top}px`,
+          left: `${popoverPosition.value.left}px`,
+          maxWidth: `${popoverPosition.value.width}px`
+        })
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "eventContent", { event: _ctx.event }, void 0, true)
+        ]),
+        _: 3
+      }, 8, ["style"])), [
+        [_directive_click_outside, closePopover]
+      ]) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const CalendarPopover = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-6f51f6b3"]]);
 const _hoisted_1$X = { class: "agenda-view" };
 const _hoisted_2$I = ["data-date", "onClick"];
 const _hoisted_3$C = { class: "event-content" };
@@ -493,10 +559,11 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
     events: {},
     startDate: {}
   },
-  emits: ["eventClick", "dateChange"],
+  emits: ["eventClick", "dateChange", "openPopover"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
+    const slots = vue.useSlots();
     const containerRef = vue.ref(null);
     const currentDate = vue.ref(null);
     const processedEvents = vue.computed(() => {
@@ -557,6 +624,22 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
         }
       }
     }
+    function handleEventSelection(event, domEvent) {
+      if (!slots.eventContent) {
+        emit2("eventClick", event);
+        return;
+      }
+      if (domEvent) {
+        const rect = domEvent.currentTarget.getBoundingClientRect();
+        const position = {
+          top: rect.top + window.scrollY + rect.height / 2,
+          left: rect.left + window.scrollX + rect.width + 10
+        };
+        emit2("openPopover", event, position);
+      } else {
+        emit2("openPopover", event);
+      }
+    }
     vue.onMounted(() => {
       if (containerRef.value) {
         containerRef.value.addEventListener("scroll", handleScroll);
@@ -587,7 +670,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
                 backgroundColor: event.color || "var(--bgl-primary)"
               }),
               "data-date": event.start_time,
-              onClick: vue.withModifiers(($event) => emit2("eventClick", event), ["stop"])
+              onClick: vue.withModifiers(($event) => handleEventSelection(event, $event), ["stop"])
             }, [
               vue.createElementVNode("div", _hoisted_3$C, [
                 vue.createElementVNode("div", _hoisted_4$p, vue.toDisplayString(vue.unref(formatDate)(event.start_time, { fmt: "HH:mm" })), 1),
@@ -605,34 +688,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const AgendaView = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["__scopeId", "data-v-520aee85"]]);
-function calculatePopoverPosition(target, popoverWidth = 300, popoverHeight = 150) {
-  const rect = target.getBoundingClientRect();
-  const { scrollY, scrollX, innerHeight, innerWidth } = window;
-  let top2 = rect.top + scrollY + rect.height / 2 - popoverHeight / 2;
-  let left2 = rect.left + scrollX + rect.width + 10;
-  top2 = Math.max(scrollY + 10, Math.min(top2, innerHeight + scrollY - popoverHeight - 10));
-  if (left2 + popoverWidth > innerWidth + scrollX) {
-    left2 = rect.left + scrollX - popoverWidth - 10;
-  }
-  if (left2 < scrollX) {
-    left2 = rect.right + scrollX + 10;
-  }
-  return { top: top2, left: left2, width: popoverWidth, height: popoverHeight };
-}
-function openPopover(event, e, state2, hasEventContentSlot, emitEventClick) {
-  if (!hasEventContentSlot) {
-    emitEventClick(event);
-    return;
-  }
-  state2.activeEvent.value = event;
-  state2.popoverPosition.value = calculatePopoverPosition(e.currentTarget);
-  state2.showPopover.value = true;
-}
-function closePopover(state2) {
-  state2.showPopover.value = false;
-  state2.activeEvent.value = null;
-}
+const AgendaView = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["__scopeId", "data-v-1e2b483b"]]);
 const _hoisted_1$W = { class: "w-100p overflow-hidden m_overflow h-100p grid" };
 const _hoisted_2$H = { class: "border-bottom me-1 txt-center p-05 dayGrid" };
 const _hoisted_3$B = { class: "overflow h-100p pe-05" };
@@ -640,8 +696,9 @@ const _hoisted_4$o = { class: "time-column" };
 const _hoisted_5$n = { class: "events-column" };
 const _hoisted_6$k = ["onClick"];
 const _hoisted_7$g = { class: "event-content" };
-const _hoisted_8$8 = { class: "white-space ellipsis-1" };
+const _hoisted_8$9 = { class: "white-space ellipsis-1" };
 const _hoisted_9$7 = { class: "event-time opacity-8" };
+const _hoisted_10$6 = { class: "color-primary txt-12 p-025" };
 const slotHeight$1 = 60;
 const slotDuration$1 = 60;
 const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
@@ -650,7 +707,7 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
     events: {},
     startDate: {}
   },
-  emits: ["eventClick", "eventCreate"],
+  emits: ["eventClick", "eventCreate", "openPopover"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
@@ -666,15 +723,6 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
     const currentTimeTop = vue.ref(0);
     const isToday = vue.ref(false);
     const currentTimeInterval = vue.ref(null);
-    const activeEvent = vue.ref(null);
-    const showPopover = vue.ref(false);
-    const popoverPosition = vue.ref({ top: 0, left: 0, width: 0, height: 0 });
-    const popoverRef = vue.ref(null);
-    const popoverState = {
-      activeEvent,
-      showPopover,
-      popoverPosition
-    };
     const timeSlots = vue.computed(() => {
       const slots2 = [];
       for (let hour = timeRange.start; hour < timeRange.end; hour++) {
@@ -746,25 +794,32 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
       var _a;
       const rect = (_a = document.querySelector(".time-slots")) == null ? void 0 : _a.getBoundingClientRect();
       if (!rect) return /* @__PURE__ */ new Date();
-      const minutes = Math.floor((y2 - rect.top) / slotHeight$1) * slotDuration$1;
+      const relativeY = y2 - rect.top;
+      const minutesPerSlot = slotDuration$1;
+      const slotsFromTop = relativeY / slotHeight$1;
+      const minutes = Math.floor(slotsFromTop * minutesPerSlot);
       const date2 = new Date(props2.startDate);
       date2.setHours(Math.floor(minutes / 60));
       date2.setMinutes(minutes % 60);
+      date2.setSeconds(0);
+      date2.setMilliseconds(0);
       return date2;
     }
-    function openPopover$1(event, e) {
-      openPopover(
-        event,
-        e,
-        popoverState,
-        !!slots.eventContent,
-        (evt) => {
-          emit2("eventClick", evt);
-        }
-      );
-    }
-    function closePopover$1() {
-      closePopover(popoverState);
+    function handleEventSelection(event, domEvent) {
+      if (!slots.eventContent) {
+        emit2("eventClick", event);
+        return;
+      }
+      if (domEvent) {
+        const rect = domEvent.currentTarget.getBoundingClientRect();
+        const position = {
+          top: rect.top + window.scrollY + rect.height / 2,
+          left: rect.left + window.scrollX + rect.width + 10
+        };
+        emit2("openPopover", event, position);
+      } else {
+        emit2("openPopover", event);
+      }
     }
     vue.onMounted(() => {
       document.addEventListener("mousedown", handleMouseDown);
@@ -780,7 +835,6 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      const _directive_click_outside = vue.resolveDirective("click-outside");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
         vue.createElementVNode("div", _hoisted_2$H, [
           _cache[0] || (_cache[0] = vue.createElementVNode("div", null, null, -1)),
@@ -818,46 +872,35 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
                     height: `${event.height}px`,
                     backgroundColor: event.color || "var(--bgl-primary)"
                   }),
-                  onClick: vue.withModifiers(($event) => vue.unref(slots).eventContent ? openPopover$1(event, $event) : emit2("eventClick", event), ["stop"])
+                  onClick: vue.withModifiers(($event) => handleEventSelection(event, $event), ["stop"])
                 }, [
                   vue.createElementVNode("div", _hoisted_7$g, [
-                    vue.createElementVNode("div", _hoisted_8$8, vue.toDisplayString(event.title), 1),
-                    vue.createElementVNode("div", _hoisted_9$7, vue.toDisplayString(vue.unref(formatDate)(new Date(event.start_time))), 1)
+                    vue.createElementVNode("div", _hoisted_8$9, vue.toDisplayString(event.title), 1),
+                    vue.createElementVNode("div", _hoisted_9$7, vue.toDisplayString(vue.unref(formatDate)(new Date(event.start_time), { fmt: "HH:mm" })) + " - " + vue.toDisplayString(vue.unref(formatDate)(new Date(event.end_time), { fmt: "HH:mm" })), 1)
                   ])
                 ], 12, _hoisted_6$k);
               }), 128))
             ]),
             dragState.value.isDragging && dragState.value.start && dragState.value.end ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: "drag-preview absolute bg-primary pointer-events-none",
+              class: "drag-preview absolute bg-primary-tint pointer-events-none z-1",
               style: vue.normalizeStyle({
                 top: `${Math.min(dragState.value.start.y, dragState.value.end.y)}px`,
-                height: `${Math.abs(dragState.value.end.y - dragState.value.start.y)}px`
+                height: `${Math.abs(dragState.value.end.y - dragState.value.start.y)}px`,
+                left: "10px",
+                right: "10px"
               })
-            }, null, 4)) : vue.createCommentVNode("", true)
+            }, [
+              vue.createElementVNode("div", _hoisted_10$6, vue.toDisplayString(dragState.value.startTime ? vue.unref(formatDate)(dragState.value.startTime, { fmt: "HH:mm" }) : "") + " - " + vue.toDisplayString(dragState.value.endTime ? vue.unref(formatDate)(dragState.value.endTime, { fmt: "HH:mm" }) : ""), 1)
+            ], 4)) : vue.createCommentVNode("", true)
           ], 32)
         ]),
-        showPopover.value && activeEvent.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          ref_key: "popoverRef",
-          ref: popoverRef,
-          class: "custom-popover",
-          style: vue.normalizeStyle({
-            top: `${popoverPosition.value.top}px`,
-            left: `${popoverPosition.value.left}px`,
-            maxWidth: `${popoverPosition.value.width}px`
-          })
-        }, [
-          vue.renderSlot(_ctx.$slots, "eventContent", { event: activeEvent.value }, void 0, true)
-        ], 4)), [
-          [_directive_click_outside, closePopover$1]
-        ]) : vue.createCommentVNode("", true),
         _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "border-bottom me-1" }, null, -1))
       ]);
     };
   }
 });
-const DayView = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-bc647d79"]]);
+const DayView = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-8b1a770f"]]);
 const _hoisted_1$V = { class: "month-view" };
 const _hoisted_2$G = { class: "month-header" };
 const _hoisted_3$A = { class: "month-grid" };
@@ -868,7 +911,7 @@ const _hoisted_6$j = {
   class: "event-dot"
 };
 const _hoisted_7$f = ["onClick"];
-const _hoisted_8$7 = { class: "event-title" };
+const _hoisted_8$8 = { class: "event-title" };
 const _hoisted_9$6 = { class: "event-time" };
 const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
   __name: "MonthView",
@@ -876,21 +919,12 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
     events: {},
     startDate: {}
   },
-  emits: ["eventClick"],
+  emits: ["eventClick", "openPopover"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
     const slots = vue.useSlots();
     const isMobile = vue.computed(() => window.innerWidth < 768);
-    const activeEvent = vue.ref(null);
-    const showPopover = vue.ref(false);
-    const popoverPosition = vue.ref({ top: 0, left: 0, width: 0, height: 0 });
-    const popoverRef = vue.ref(null);
-    const popoverState = {
-      activeEvent,
-      showPopover,
-      popoverPosition
-    };
     const weekDays = vue.computed(() => ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]);
     const currentMonth = vue.computed(() => {
       const year = props2.startDate.getFullYear();
@@ -936,22 +970,23 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
       }
       return days;
     });
-    function openPopover$1(event, e) {
-      openPopover(
-        event,
-        e,
-        popoverState,
-        !!slots.eventContent,
-        (evt) => {
-          emit2("eventClick", evt);
-        }
-      );
-    }
-    function closePopover$1() {
-      closePopover(popoverState);
+    function handleEventSelection(event, domEvent) {
+      if (!slots.eventContent) {
+        emit2("eventClick", event);
+        return;
+      }
+      if (domEvent) {
+        const rect = domEvent.currentTarget.getBoundingClientRect();
+        const position = {
+          top: rect.top + window.scrollY + rect.height / 2,
+          left: rect.left + window.scrollX + rect.width + 10
+        };
+        emit2("openPopover", event, position);
+      } else {
+        emit2("openPopover", event);
+      }
     }
     return (_ctx, _cache) => {
-      const _directive_click_outside = vue.resolveDirective("click-outside");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
         vue.createElementVNode("div", _hoisted_2$G, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(weekDays.value, (day) => {
@@ -980,47 +1015,29 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
                     key: event.id,
                     class: "event-item",
                     style: vue.normalizeStyle({ backgroundColor: event.color || "var(--bgl-primary)" }),
-                    onClick: vue.withModifiers(($event) => vue.unref(slots).eventContent ? openPopover$1(event, $event) : emit2("eventClick", event), ["stop"])
+                    onClick: vue.withModifiers(($event) => handleEventSelection(event, $event), ["stop"])
                   }, [
-                    vue.createElementVNode("div", _hoisted_8$7, vue.toDisplayString(event.title), 1),
+                    vue.createElementVNode("div", _hoisted_8$8, vue.toDisplayString(event.title), 1),
                     vue.createElementVNode("div", _hoisted_9$6, vue.toDisplayString(vue.unref(fmtDate)(event.start_time, { fmt: "HH:mm" })), 1)
                   ], 12, _hoisted_7$f);
                 }), 128))
               ])
             ], 2);
           }), 128))
-        ]),
-        showPopover.value && activeEvent.value ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$10), {
-          key: 0,
-          ref_key: "popoverRef",
-          ref: popoverRef,
-          thin: "",
-          class: "custom-popover",
-          style: vue.normalizeStyle({
-            top: `${popoverPosition.value.top}px`,
-            left: `${popoverPosition.value.left}px`,
-            maxWidth: `${popoverPosition.value.width}px`
-          })
-        }, {
-          default: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "eventContent", { event: activeEvent.value }, void 0, true)
-          ]),
-          _: 3
-        }, 8, ["style"])), [
-          [_directive_click_outside, closePopover$1]
-        ]) : vue.createCommentVNode("", true)
+        ])
       ]);
     };
   }
 });
-const MonthView = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-e972943e"]]);
+const MonthView = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-0b1117c4"]]);
 const _hoisted_1$U = { class: "w-100p overflow-hidden m_overflow h-100p grid" };
-const _hoisted_2$F = { class: "weekGrid border-bottom me-1" };
-const _hoisted_3$z = { class: "overflow h-100p pe-05" };
+const _hoisted_2$F = { class: "overflow h-100p pe-05" };
+const _hoisted_3$z = ["onMousedown"];
 const _hoisted_4$m = ["onClick"];
-const _hoisted_5$l = { class: "overflow-hidden color-text-light p-025 txt12 h-100p" };
+const _hoisted_5$l = { class: "overflow-hidden color-white p-025 txt12 h-100p" };
 const _hoisted_6$i = { class: "white-space ellipsis-1" };
 const _hoisted_7$e = { class: "txt10 opacity-8" };
+const _hoisted_8$7 = { class: "color-primary txt-12 p-025" };
 const slotHeight = 60;
 const slotDuration = 60;
 const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
@@ -1030,7 +1047,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
     startDate: { default: () => /* @__PURE__ */ new Date() },
     weekStart: { default: "Sunday" }
   },
-  emits: ["eventClick", "eventCreate"],
+  emits: ["eventClick", "eventCreate", "openPopover"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
@@ -1038,29 +1055,29 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
     const timeRange = { start: 0, end: 24 };
     const dragState = vue.ref({
       isDragging: false,
-      start: null,
-      end: null,
-      startTime: null,
-      endTime: null
+      startDay: -1,
+      // Index of the starting day
+      endDay: -1,
+      // Index of the ending day
+      start: void 0,
+      end: void 0,
+      startTime: void 0,
+      endTime: void 0
     });
-    const activeEvent = vue.ref(null);
-    const showPopover = vue.ref(false);
-    const popoverPosition = vue.ref({ top: 0, left: 0, width: 0, height: 0 });
-    const popoverRef = vue.ref(null);
-    const popoverState = {
-      activeEvent,
-      showPopover,
-      popoverPosition
-    };
     const currentTimeTop = vue.ref(0);
     const isToday = vue.ref(false);
-    const currentTimeInterval = vue.ref(null);
+    const currentTimeInterval = vue.ref();
+    const timeSlotsContainer = vue.ref();
+    const calendarGrid = vue.ref();
+    const dayColumns = vue.ref([]);
+    const dayColumnsContainer = vue.ref();
     const weekDays = vue.computed(() => {
       const days = [];
       const start = new Date(props2.startDate);
       const weekStartOffset = props2.weekStart === "Sunday" ? 0 : 1;
       const dayOfWeek = start.getDay();
       start.setDate(start.getDate() - dayOfWeek + weekStartOffset);
+      start.setHours(0, 0, 0, 0);
       for (let i2 = 0; i2 < 7; i2++) {
         const date2 = new Date(start);
         date2.setDate(start.getDate() + i2);
@@ -1093,14 +1110,14 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
         if (dayIndex === -1) return;
         const startMinutes = startDate.getHours() * 60 + startDate.getMinutes();
         const endMinutes = endDate.getHours() * 60 + endDate.getMinutes();
-        const top2 = startMinutes / slotDuration * (slotHeight / 2);
-        const height = Math.max((endMinutes - startMinutes) / slotDuration * (slotHeight / 2), 30);
+        const top2 = startMinutes / slotDuration * slotHeight;
+        const height = Math.max((endMinutes - startMinutes) / slotDuration * slotHeight, 30);
         const weekEvent = {
           ...event,
           top: top2,
           height,
           left: 0,
-          width: 95,
+          width: 100,
           overlappingEvents: 0,
           position: 0
         };
@@ -1124,45 +1141,111 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
       });
       return events;
     });
-    function handleMouseDown(e) {
-      const target = e.target;
-      if (!target.closest(".time-slot")) return;
+    function handleMouseDown(e, day) {
+      if (!calendarGrid.value || !dayColumnsContainer.value) return;
+      let clickedDayIndex = -1;
+      for (let i2 = 0; i2 < dayColumns.value.length; i2++) {
+        const columnEl = dayColumns.value[i2];
+        if (!columnEl) continue;
+        const rect = columnEl.getBoundingClientRect();
+        if (e.clientX >= rect.left && e.clientX <= rect.right) {
+          clickedDayIndex = i2;
+          break;
+        }
+      }
+      if (clickedDayIndex === -1) return;
+      const dayColumnRect = dayColumns.value[clickedDayIndex].getBoundingClientRect();
+      const dayColumnsRect = dayColumnsContainer.value.getBoundingClientRect();
       dragState.value.isDragging = true;
-      dragState.value.start = { x: e.clientX, y: e.clientY };
-      dragState.value.startTime = getTimeFromPosition(e.clientX, e.clientY);
+      dragState.value.startDay = clickedDayIndex;
+      dragState.value.endDay = clickedDayIndex;
+      dragState.value.start = {
+        x: dayColumnRect.left - dayColumnsRect.left,
+        // Left edge of the day column
+        y: e.clientY - dayColumnsRect.top
+      };
+      dragState.value.end = {
+        x: dayColumnRect.right - dayColumnsRect.left,
+        // Right edge of the day column
+        y: e.clientY - dayColumnsRect.top
+      };
+      const cleanDay = new Date(day);
+      cleanDay.setHours(0, 0, 0, 0);
+      const startTime = getTimeFromPosition(e.clientY, cleanDay);
+      dragState.value.startTime = startTime;
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
     }
     function handleMouseMove(e) {
-      if (!dragState.value.isDragging) return;
-      dragState.value.end = { x: e.clientX, y: e.clientY };
-      dragState.value.endTime = getTimeFromPosition(e.clientX, e.clientY);
+      if (!dragState.value.isDragging || !dragState.value.start || !dayColumns.value.length || !calendarGrid.value || !dayColumnsContainer.value) return;
+      let targetDayIndex = -1;
+      for (let i2 = 0; i2 < dayColumns.value.length; i2++) {
+        const columnEl = dayColumns.value[i2];
+        if (!columnEl) continue;
+        const rect = columnEl.getBoundingClientRect();
+        if (e.clientX >= rect.left && e.clientX <= rect.right) {
+          targetDayIndex = i2;
+          break;
+        }
+      }
+      if (targetDayIndex === -1) return;
+      const dayColumnsRect = dayColumnsContainer.value.getBoundingClientRect();
+      const minDayIndex = Math.min(dragState.value.startDay, targetDayIndex);
+      const maxDayIndex = Math.max(dragState.value.startDay, targetDayIndex);
+      const leftDayEl = dayColumns.value[minDayIndex];
+      if (!leftDayEl) return;
+      const leftDayRect = leftDayEl.getBoundingClientRect();
+      const leftEdge = leftDayRect.left - dayColumnsRect.left;
+      const rightDayEl = dayColumns.value[maxDayIndex];
+      if (!rightDayEl) return;
+      const rightDayRect = rightDayEl.getBoundingClientRect();
+      const rightEdge = rightDayRect.right - dayColumnsRect.left;
+      dragState.value.endDay = targetDayIndex;
+      dragState.value.end = {
+        x: rightEdge,
+        y: e.clientY - dayColumnsRect.top
+      };
+      dragState.value.start.x = leftEdge;
+      if (targetDayIndex >= 0 && targetDayIndex < weekDays.value.length) {
+        const targetDay = new Date(weekDays.value[targetDayIndex]);
+        targetDay.setHours(0, 0, 0, 0);
+        const endTime = getTimeFromPosition(e.clientY, targetDay);
+        dragState.value.endTime = endTime;
+      }
     }
     function handleMouseUp() {
       if (!dragState.value.isDragging || !dragState.value.startTime || !dragState.value.endTime) return;
       let start = new Date(dragState.value.startTime);
       let end = new Date(dragState.value.endTime);
-      if (end < start) [start, end] = [end, start];
+      if (dragState.value.startDay > dragState.value.endDay || dragState.value.startDay === dragState.value.endDay && end < start) {
+        [start, end] = [end, start];
+      }
       emit2("eventCreate", { start_time: start, end_time: end });
       dragState.value = {
         isDragging: false,
-        start: null,
-        end: null,
-        startTime: null,
-        endTime: null
+        startDay: -1,
+        endDay: -1,
+        start: void 0,
+        end: void 0,
+        startTime: void 0,
+        endTime: void 0
       };
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
     }
-    function getTimeFromPosition(x2, y2) {
-      var _a;
-      const rect = (_a = document.querySelector(".time-slots")) == null ? void 0 : _a.getBoundingClientRect();
-      if (!rect) return /* @__PURE__ */ new Date();
-      const dayIndex = Math.floor((x2 - rect.left) / (rect.width / 7));
-      const minutes = Math.floor((y2 - rect.top) / (slotHeight / 2)) * slotDuration;
-      const date2 = new Date(weekDays.value[dayIndex]);
-      date2.setHours(Math.floor(minutes / 60));
-      date2.setMinutes(minutes % 60);
+    function getTimeFromPosition(y2, day) {
+      if (!calendarGrid.value || !timeSlotsContainer.value) return new Date(day);
+      const gridRect = calendarGrid.value.getBoundingClientRect();
+      const relativeY = y2 - gridRect.top;
+      const minutesPerSlot = slotDuration;
+      const slotsFromTop = relativeY / slotHeight;
+      const minutes = Math.floor(slotsFromTop * minutesPerSlot);
+      const date2 = new Date(day);
+      date2.setHours(Math.floor(minutes / 60) - 1);
+      const roundedMinutes = Math.round(minutes % 60 / 5) * 5;
+      date2.setMinutes(roundedMinutes);
+      date2.setSeconds(0);
+      date2.setMilliseconds(0);
       return date2;
     }
     function updateCurrentTimeIndicator() {
@@ -1171,29 +1254,39 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
         (day) => day.getDate() === now.getDate() && day.getMonth() === now.getMonth() && day.getFullYear() === now.getFullYear()
       );
       const minutes = now.getHours() * 60 + now.getMinutes();
-      currentTimeTop.value = minutes / slotDuration * (slotHeight / 2);
-    }
-    function openPopover$1(event, e) {
-      openPopover(
-        event,
-        e,
-        popoverState,
-        !!slots.eventContent,
-        (evt) => {
-          emit2("eventClick", evt);
-        }
-      );
+      currentTimeTop.value = minutes / slotDuration * slotHeight;
+    }
+    function handleEventSelection(event, domEvent) {
+      if (!slots.eventContent) {
+        emit2("eventClick", event);
+        return;
+      }
+      if (domEvent) {
+        const rect = domEvent.currentTarget.getBoundingClientRect();
+        const position = {
+          top: rect.top + window.scrollY + rect.height / 2,
+          left: rect.left + window.scrollX + rect.width + 10
+        };
+        emit2("openPopover", event, position);
+      } else {
+        emit2("openPopover", event);
+      }
     }
-    function closePopover$1() {
-      closePopover(popoverState);
+    function setDayColumnRef(el, index2) {
+      while (dayColumns.value.length <= index2) {
+        dayColumns.value.push(null);
+      }
+      if (el) {
+        dayColumns.value[index2] = el instanceof Element ? el : el.$el;
+      } else {
+        dayColumns.value[index2] = null;
+      }
     }
     vue.onMounted(() => {
-      document.addEventListener("mousedown", handleMouseDown);
       updateCurrentTimeIndicator();
       currentTimeInterval.value = setInterval(updateCurrentTimeIndicator, 6e4);
     });
     vue.onUnmounted(() => {
-      document.removeEventListener("mousedown", handleMouseDown);
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
       if (currentTimeInterval.value) {
@@ -1201,31 +1294,38 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      const _directive_click_outside = vue.resolveDirective("click-outside");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$U, [
-        vue.createElementVNode("div", _hoisted_2$F, [
-          _cache[0] || (_cache[0] = vue.createElementVNode("div", null, null, -1)),
+        vue.createElementVNode("div", {
+          ref_key: "calendarGrid",
+          ref: calendarGrid,
+          class: "weekGrid border-bottom me-1"
+        }, [
+          _cache[1] || (_cache[1] = vue.createElementVNode("div", null, null, -1)),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(weekDays.value, (day) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: day.toISOString(),
               class: "day-header p-05 txt-center"
             }, [
-              vue.createTextVNode(vue.toDisplayString(vue.unref(fmtDate)(day, { fmt: "DDD" })) + " ", 1),
+              vue.createTextVNode(vue.toDisplayString(vue.unref(formatDate)(day, { fmt: "DDD" })) + " ", 1),
               vue.createElementVNode("span", {
                 class: vue.normalizeClass(["txt-12 round p-025", {
                   "color-gray": day.toDateString() !== (/* @__PURE__ */ new Date()).toDateString(),
                   "bg-primary color-white": day.toDateString() === (/* @__PURE__ */ new Date()).toDateString()
                 }])
-              }, vue.toDisplayString(vue.unref(fmtDate)(day, { fmt: "DD" })), 3)
+              }, vue.toDisplayString(vue.unref(formatDate)(day, { fmt: "DD" })), 3)
             ]);
           }), 128))
-        ]),
-        vue.createElementVNode("div", _hoisted_3$z, [
+        ], 512),
+        vue.createElementVNode("div", _hoisted_2$F, [
           vue.createElementVNode("div", {
-            class: "weekGrid border-end relative",
-            onMousedown: handleMouseDown
+            ref_key: "dayColumnsContainer",
+            ref: dayColumnsContainer,
+            class: "weekGrid border-end relative"
           }, [
-            vue.createElementVNode("div", null, [
+            vue.createElementVNode("div", {
+              ref_key: "timeSlotsContainer",
+              ref: timeSlotsContainer
+            }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(timeSlots.value, (slot) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: slot.time,
@@ -1233,19 +1333,22 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
                   style: vue.normalizeStyle({ height: `${slotHeight}px` })
                 }, vue.toDisplayString(slot.time), 5);
               }), 128))
-            ]),
+            ], 512),
             isToday.value ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
               class: "absolute end w-100p z-2 flex pointer-events-none ps-4-5",
               style: vue.normalizeStyle({ top: `${currentTimeTop.value}px` })
-            }, _cache[1] || (_cache[1] = [
+            }, _cache[2] || (_cache[2] = [
               vue.createElementVNode("div", { class: "current-time-dot h-10px aspect-ratio-1 round bg-primary" }, null, -1),
               vue.createElementVNode("div", { class: "current-time-line w-100p bg-primary" }, null, -1)
             ]), 4)) : vue.createCommentVNode("", true),
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(weekDays.value, (day) => {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(weekDays.value, (day, index2) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: day.toISOString(),
-                class: "day-column top bottom border-start relative"
+                ref_for: true,
+                ref: (el) => setDayColumnRef(el, index2),
+                class: "day-column top bottom border-start relative",
+                onMousedown: ($event) => handleMouseDown($event, day)
               }, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(processedEvents.value.filter((e) => new Date(e.start_time).toDateString() === day.toDateString()), (event) => {
                   return vue.openBlock(), vue.createElementBlock("div", {
@@ -1258,53 +1361,38 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
                       width: `${event.width}%`,
                       backgroundColor: event.color || "var(--bgl-primary)"
                     }),
-                    onClick: vue.withModifiers(($event) => vue.unref(slots).eventContent ? openPopover$1(event, $event) : emit2("eventClick", event), ["stop"])
+                    onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                    }, ["stop"])),
+                    onClick: vue.withModifiers(($event) => handleEventSelection(event, $event), ["stop"])
                   }, [
                     vue.createElementVNode("div", _hoisted_5$l, [
                       vue.createElementVNode("div", _hoisted_6$i, vue.toDisplayString(event.title), 1),
-                      vue.createElementVNode("div", _hoisted_7$e, vue.toDisplayString(vue.unref(fmtDate)(event.start_time, { fmt: "HH:mm" })), 1)
+                      vue.createElementVNode("div", _hoisted_7$e, vue.toDisplayString(vue.unref(formatDate)(event.start_time, { fmt: "HH:mm" })) + " - " + vue.toDisplayString(vue.unref(formatDate)(event.end_time, { fmt: "HH:mm" })), 1)
                     ])
-                  ], 12, _hoisted_4$m);
+                  ], 44, _hoisted_4$m);
                 }), 128))
-              ]);
+              ], 40, _hoisted_3$z);
             }), 128)),
             dragState.value.isDragging && dragState.value.start && dragState.value.end ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 1,
-              class: "drag-preview absolute bg-primary pointer-events-none",
+              class: "drag-preview absolute bg-primary-tint pointer-events-none overflow-hidden opacity-7 z-1",
               style: vue.normalizeStyle({
                 left: `${Math.min(dragState.value.start.x, dragState.value.end.x)}px`,
                 top: `${Math.min(dragState.value.start.y, dragState.value.end.y)}px`,
                 width: `${Math.abs(dragState.value.end.x - dragState.value.start.x)}px`,
                 height: `${Math.abs(dragState.value.end.y - dragState.value.start.y)}px`
               })
-            }, null, 4)) : vue.createCommentVNode("", true)
-          ], 32)
+            }, [
+              vue.createElementVNode("div", _hoisted_8$7, vue.toDisplayString(dragState.value.startTime ? vue.unref(formatDate)(dragState.value.startTime, { fmt: "HH:mm" }) : "") + " - " + vue.toDisplayString(dragState.value.endTime ? vue.unref(formatDate)(dragState.value.endTime, { fmt: "HH:mm" }) : ""), 1)
+            ], 4)) : vue.createCommentVNode("", true)
+          ], 512)
         ]),
-        showPopover.value && activeEvent.value ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$10), {
-          key: 0,
-          ref_key: "popoverRef",
-          ref: popoverRef,
-          thin: "",
-          class: "custom-popover fixed z-999 radius-05 bg-white w350",
-          style: vue.normalizeStyle({
-            top: `${popoverPosition.value.top}px`,
-            left: `${popoverPosition.value.left}px`,
-            maxWidth: `${popoverPosition.value.width}px`
-          })
-        }, {
-          default: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "eventContent", { event: activeEvent.value }, void 0, true)
-          ]),
-          _: 3
-        }, 8, ["style"])), [
-          [_directive_click_outside, closePopover$1]
-        ]) : vue.createCommentVNode("", true),
-        _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "border-bottom me-1" }, null, -1))
+        _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "border-bottom me-1" }, null, -1))
       ]);
     };
   }
 });
-const WeekView = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-c29ed3b2"]]);
+const WeekView = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-1cd041ac"]]);
 const _hoisted_1$T = { class: "calendar" };
 const _hoisted_2$E = { class: "flex m_block m_pb-1" };
 const _hoisted_3$y = { class: "txt-light my-0" };
@@ -1312,17 +1400,20 @@ const _hoisted_4$l = { class: "ms-auto flex gap-025" };
 const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   __name: "Index",
   props: {
-    events: {},
+    events: { default: () => [] },
     startDate: { default: () => /* @__PURE__ */ new Date() },
     view: { default: "Week" },
     weekStart: { default: "Sunday" }
   },
-  emits: ["eventClick", "eventCreate", "eventUpdate", "eventDelete", "dateChange", "viewChange"],
+  emits: ["eventClick", "eventCreate", "eventUpdate", "eventDelete", "dateChange", "viewChange", "ready"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
     const currentDate = vue.ref(new Date(props2.startDate));
     const currentView = vue.ref(props2.view);
+    const activeEvent = vue.ref();
+    const showPopover = vue.ref(false);
+    const popoverPosition = vue.ref();
     const views = {
       Week: WeekView,
       Month: MonthView,
@@ -1332,21 +1423,39 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     const visibleDateRange = vue.computed(() => {
       const start = new Date(currentDate.value);
       let end = new Date(currentDate.value);
-      if (currentView.value === "Week") {
-        const dayOfWeek = start.getDay();
-        const weekStartOffset = props2.weekStart === "Sunday" ? 0 : 1;
-        start.setDate(start.getDate() - dayOfWeek + weekStartOffset);
-        end = new Date(start);
-        end.setDate(end.getDate() + 6);
-      } else if (["Month", "Agenda"].includes(currentView.value)) {
-        start.setDate(1);
-        start.setDate(start.getDate() - 7);
-        end = new Date(start.getFullYear(), start.getMonth() + 2, 7);
-      } else if (currentView.value === "Day") {
-        end.setDate(end.getDate() + 1);
+      const addSunday = props2.weekStart === "Sunday" ? 0 : 1;
+      switch (currentView.value) {
+        case "Week":
+          start.setDate(start.getDate() - start.getDay() + addSunday);
+          end.setDate(start.getDate() + 6);
+          break;
+        case "Month":
+        case "Agenda":
+          start.setDate(-6);
+          end = new Date(start.getFullYear(), start.getMonth() + 2, 7);
+          break;
+        case "Day":
+          end.setDate(end.getDate() + 1);
+          break;
+        default:
+          console.error(`Invalid view: ${currentView.value}`);
       }
       return { start, end };
     });
+    const state2 = vue.computed(() => ({
+      visibleDateRange: visibleDateRange.value,
+      currentDate: currentDate.value,
+      currentView: currentView.value
+    }));
+    function handleDateChange(date2) {
+      console.log("handleDateChange", date2);
+      currentDate.value = new Date(date2);
+      emit2("dateChange", state2.value);
+    }
+    function handleViewChange(view) {
+      currentView.value = view;
+      emit2("viewChange", state2.value);
+    }
     function handleEventClick(event) {
       emit2("eventClick", event);
     }
@@ -1359,15 +1468,26 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     function handleEventDelete(eventId) {
       emit2("eventDelete", eventId);
     }
-    function handleDateChange(date2) {
-      currentDate.value = new Date(date2);
-      emit2("dateChange", currentDate.value);
+    function openPopover(event, position) {
+      activeEvent.value = event;
+      popoverPosition.value = position;
+      showPopover.value = true;
     }
-    function handleViewChange(view) {
-      currentView.value = view;
-      emit2("viewChange", view);
+    function closePopover() {
+      showPopover.value = false;
+      activeEvent.value = void 0;
+      popoverPosition.value = void 0;
     }
-    __expose({ visibleDateRange });
+    __expose({
+      visibleDateRange,
+      currentView,
+      currentDate,
+      openPopover,
+      closePopover
+    });
+    vue.onMounted(() => {
+      emit2("ready", state2.value);
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [
         vue.createElementVNode("div", _hoisted_2$E, [
@@ -1422,18 +1542,32 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
           onEventCreate: handleEventCreate,
           onEventUpdate: handleEventUpdate,
           onEventDelete: handleEventDelete,
-          onDateChange: handleDateChange
+          onDateChange: handleDateChange,
+          onOpenPopover: openPopover
         }, {
           eventContent: vue.withCtx(({ event }) => [
             vue.renderSlot(_ctx.$slots, "eventContent", { event }, void 0, true)
           ]),
           _: 3
-        }, 40, ["events", "start-date", "week-start"]))
+        }, 40, ["events", "start-date", "week-start"])),
+        vue.createVNode(CalendarPopover, {
+          event: activeEvent.value,
+          position: popoverPosition.value,
+          show: showPopover.value,
+          "has-event-content-slot": !!_ctx.$slots.eventContent,
+          onClose: closePopover,
+          onEventClick: handleEventClick
+        }, {
+          eventContent: vue.withCtx(({ event }) => [
+            vue.renderSlot(_ctx.$slots, "eventContent", { event }, void 0, true)
+          ]),
+          _: 3
+        }, 8, ["event", "position", "show", "has-event-content-slot"])
       ]);
     };
   }
 });
-const Index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-98cddf40"]]);
+const Index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-840b6594"]]);
 const _hoisted_1$S = {
   key: 0,
   class: "card_label"
@@ -8086,7 +8220,7 @@ ${indent}}`;
       richtext: RichText,
       upload: UploadInput,
       file: UploadInput,
-      date: DateInput,
+      date: _sfc_main$L,
       tabs: TabsNav,
       form: _sfc_main$T,
       range: RangeInput
@@ -15089,7 +15223,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-9c8816c6"]]);
+const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-17319f4d"]]);
 const _hoisted_1$E = ["title"];
 const _hoisted_2$s = { key: 0 };
 const _hoisted_3$o = {
@@ -15213,7 +15347,6 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
         (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args))
       }, [
         _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$s, [
-          vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
           _ctx.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$o, "*")) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true),
         vue.createVNode(vue.unref(_sfc_main$W), {
@@ -15234,7 +15367,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
             }, [
               vue.createVNode(vue.unref(TextInput), {
                 modelValue: vue.unref(formatDisplayDate)(selectedDate.value),
-                icon: "calendar",
+                iconStart: "calendar",
                 min: vue.unref(formatDisplayDate)(_ctx.min),
                 max: vue.unref(formatDisplayDate)(_ctx.max),
                 required: _ctx.required,
@@ -15275,7 +15408,6 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-a0f799e6"]]);
 const _hoisted_1$D = { class: "bagel-input" };
 const _hoisted_2$r = {
   key: 0,
@@ -34906,19 +35038,30 @@ function useBagelFormState(injectionKey = FORM_STATE_KEY) {
 function useDevice() {
   const innerWidth = vue.ref(window.innerWidth);
   const isMobile = vue.ref(window.innerWidth < 768);
+  const scrollY = vue.ref(window.scrollY);
+  const scrollX = vue.ref(window.scrollX);
+  const innerHeight = vue.ref(window.innerHeight);
   function updateDeviceInfo() {
     innerWidth.value = window.innerWidth;
     isMobile.value = window.innerWidth < 768;
+    scrollY.value = window.scrollY;
+    scrollX.value = window.scrollX;
+    innerHeight.value = window.innerHeight;
   }
   vue.onMounted(() => {
     window.addEventListener("resize", updateDeviceInfo);
+    window.addEventListener("scroll", updateDeviceInfo);
   });
   vue.onUnmounted(() => {
     window.removeEventListener("resize", updateDeviceInfo);
+    window.removeEventListener("scroll", updateDeviceInfo);
   });
   return {
     innerWidth,
-    isMobile
+    isMobile,
+    scrollY,
+    scrollX,
+    innerHeight
   };
 }
 const SECONDS = 1e3;
@@ -36232,27 +36375,27 @@ const allCountries = countryArray.map(
 );
 function timeDelta(date2, options) {
   date2 = new Date(date2);
-  const { day, hour, minute, second, week, month, year } = options;
-  if (day) {
-    date2.setDate(date2.getDate() + day);
+  const { Day, Hour, Minute, Second, Week, Month, Year } = options;
+  if (Day) {
+    date2.setDate(date2.getDate() + Day);
   }
-  if (hour) {
-    date2.setHours(date2.getHours() + hour);
+  if (Hour) {
+    date2.setHours(date2.getHours() + Hour);
   }
-  if (minute) {
-    date2.setMinutes(date2.getMinutes() + minute);
+  if (Minute) {
+    date2.setMinutes(date2.getMinutes() + Minute);
   }
-  if (second) {
-    date2.setSeconds(date2.getSeconds() + second);
+  if (Second) {
+    date2.setSeconds(date2.getSeconds() + Second);
   }
-  if (week) {
-    date2.setDate(date2.getDate() + week * 7);
+  if (Week) {
+    date2.setDate(date2.getDate() + Week * 7);
   }
-  if (month) {
-    date2.setMonth(date2.getMonth() + month);
+  if (Month) {
+    date2.setMonth(date2.getMonth() + Month);
   }
-  if (year) {
-    date2.setFullYear(date2.getFullYear() + year);
+  if (Year) {
+    date2.setFullYear(date2.getFullYear() + Year);
   }
   return date2;
 }
@@ -36354,23 +36497,14 @@ function getBrowserNavigatorLocale() {
   if (typeof navigator !== "object") return "en-US";
   return navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
 }
-function handleTimezone(date2, timeZone) {
-  if (timeZone === "UTC") {
+function handleTimezone(date2, locale2, intFmtOpt) {
+  if (intFmtOpt.timeZone === "UTC") {
     const utcDate = new Date(date2.getTime());
     utcDate.setMinutes(utcDate.getMinutes() + date2.getTimezoneOffset());
     return utcDate;
   }
   try {
-    const formatter = new Intl.DateTimeFormat("en-US", {
-      timeZone,
-      timeZoneName: "short",
-      year: "numeric",
-      month: "numeric",
-      day: "numeric",
-      hour: "numeric",
-      minute: "numeric",
-      second: "numeric"
-    });
+    const formatter = new Intl.DateTimeFormat(locale2, intFmtOpt);
     const formattedParts = formatter.formatToParts(date2);
     const parts = {};
     formattedParts.forEach((part) => {
@@ -36389,12 +36523,12 @@ function handleTimezone(date2, timeZone) {
     );
     return adjustedDate;
   } catch (error) {
-    console.warn(`Error handling timezone ${timeZone}:`, error);
+    console.warn(`Error handling timezone ${intFmtOpt.timeZone}:`, error);
     return date2;
   }
 }
-function getDatePartsMap(date2, locale2, timeZone) {
-  const d2 = timeZone ? handleTimezone(date2, timeZone) : date2;
+function getDatePartsMap(date2, locale2, intFmtOpt) {
+  const d2 = (intFmtOpt == null ? void 0 : intFmtOpt.timeZone) ? handleTimezone(date2, locale2, intFmtOpt) : date2;
   return {
     AmPm: d2.toLocaleString(locale2, { hour: "numeric", hour12: true, minute: "numeric" }).split(" ")[1],
     DD: String(d2.getDate()).padStart(2, "0"),
@@ -36415,7 +36549,7 @@ const _datePartsMapNow = getDatePartsMap(/* @__PURE__ */ new Date(), getBrowserN
 const _orderedDateTokens = Object.keys(_datePartsMapNow).sort((a2, b2) => b2.length - a2.length);
 const _tokenRegExPattern = new RegExp(_orderedDateTokens.map((token) => token).join("|"), "g");
 function formatDate(date2, opts = {}) {
-  let { fmt: format2, locale: locale2, tz: timeZone } = opts;
+  let { fmt: format2, locale: locale2, tz: timeZone, ...rest } = opts;
   if (!date2) return "";
   format2 = format2 || "DD.MM.YY";
   locale2 = locale2 || getBrowserNavigatorLocale();
@@ -36425,11 +36559,12 @@ function formatDate(date2, opts = {}) {
       console.warn("Invalid date provided to formatDate:", date2);
       return "";
     }
-    const datePartsMap = getDatePartsMap(d2, locale2, timeZone);
-    const formatter = new Intl.DateTimeFormat(locale2, {
+    const intFmtOpt = {
       day: "numeric",
       hour: "2-digit",
-      hour12: true,
+      // Set default hour12 to true if not explicitly set
+      // hour12: true,
+      hour12: rest.hour12 === void 0 ? true : rest.hour12,
       minute: "2-digit",
       month: "long",
       second: "2-digit",
@@ -36437,7 +36572,9 @@ function formatDate(date2, opts = {}) {
       // Add timeZone if provided
       weekday: "long",
       year: "numeric"
-    });
+    };
+    const datePartsMap = getDatePartsMap(d2, locale2, intFmtOpt);
+    const formatter = new Intl.DateTimeFormat(locale2, intFmtOpt);
     const formattedParts = formatter.formatToParts(d2);
     const partsMap = {};
     formattedParts.forEach((part) => {
@@ -36470,9 +36607,9 @@ const IMAGE_FORMATS = ["jpeg", "png", "webp", "avif", "apng", "gif", "avifs", "s
 const IMAGE_FORMATS_REGEXP = new RegExp(`(${IMAGE_FORMATS.join("|")})$`, "i");
 const VIDEO_FORMATS = ["mp4", "webm", "ogg", "mov", "avi", "flv", "wmv", "mkv", "ts", "m3u8"];
 const VIDEO_FORMATS_REGEXP = new RegExp(`(${VIDEO_FORMATS.join("|")})$`, "i");
-exports.Accordion = _sfc_main$1d;
+exports.Accordion = _sfc_main$1e;
 exports.AccordionItem = AccordionItem;
-exports.AddressSearch = _sfc_main$1b;
+exports.AddressSearch = _sfc_main$1c;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
@@ -36492,7 +36629,7 @@ exports.CodeEditor = CodeEditor;
 exports.ColorInput = _sfc_main$N;
 exports.DataPreview = DataPreview;
 exports.DataTable = DataTable;
-exports.DateInput = DateInput;
+exports.DateInput = _sfc_main$L;
 exports.DatePicker = DatePicker;
 exports.Draggable = _sfc_main$X;
 exports.Dropdown = _sfc_main$W;