@squirkle-ui/calendar 0.0.0-stage → 0.1.0

package/dist/vue3/index.cjs

@@ -0,0 +1,651 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const core = require("@squirkle-ui/core");
+const ui = require("@squirkle-ui/ui");
+function normalizeEvent(ev) {
+  const start = new Date(ev.start);
+  const end = ev.end ? new Date(ev.end) : new Date(start.getTime() + (ev.allDay ? 864e5 : 36e5));
+  return { ev, start, end: end > start ? end : new Date(start.getTime() + 15 * 6e4) };
+}
+function layoutDay(events, day) {
+  const d0 = new Date(day.getFullYear(), day.getMonth(), day.getDate()).getTime();
+  const d1 = d0 + 864e5;
+  const items = events.filter((e) => !e.ev.allDay && e.start.getTime() < d1 && e.end.getTime() > d0).map((e) => ({ ...e, s: Math.max(e.start.getTime(), d0), f: Math.min(e.end.getTime(), d1) })).sort((a, b) => a.s - b.s || b.f - a.f);
+  const out = [];
+  let cluster = [];
+  let clusterEnd = -1;
+  const flush = () => {
+    const cols = Math.max(1, ...cluster.map((c) => c.col + 1));
+    for (const c of cluster) out.push({ ev: c.ev, start: c.start, end: c.end, col: c.col, cols, top: (c.s - d0) / 6e4, height: Math.max(15, (c.f - c.s) / 6e4) });
+    cluster = [];
+  };
+  for (const it of items) {
+    if (it.s >= clusterEnd && cluster.length) flush();
+    const used = new Set(cluster.filter((c) => c.f > it.s).map((c) => c.col));
+    let col = 0;
+    while (used.has(col)) col++;
+    cluster.push({ ...it, col });
+    clusterEnd = Math.max(clusterEnd, it.f);
+  }
+  if (cluster.length) flush();
+  return out;
+}
+const eventsOnDay = (events, day) => {
+  const d0 = new Date(day.getFullYear(), day.getMonth(), day.getDate()).getTime();
+  const d1 = d0 + 864e5;
+  return events.filter((e) => e.start.getTime() < d1 && e.end.getTime() > d0).sort((a, b) => Number(!!b.ev.allDay) - Number(!!a.ev.allDay) || a.start.getTime() - b.start.getTime());
+};
+const _sfc_main = vue.defineComponent({
+  name: "SqCalendar",
+  components: { SqBtn: ui.SqBtn, SqBtnToggle: ui.SqBtnToggle, SqShape: ui.SqShape },
+  model: ui.vModel,
+  props: {
+    /** Focused date (ISO `YYYY-MM-DD`). */
+    modelValue: { type: String, default: void 0 },
+    view: { type: String, default: "month" },
+    views: { type: Array, default: () => ["month", "week", "day"] },
+    events: { type: Array, default: () => [] },
+    firstDayOfWeek: { type: Number, default: 0 },
+    editable: Boolean,
+    /** Minutes the drag snaps to. */
+    snap: { type: Number, default: 15 },
+    hourHeight: { type: Number, default: 48 },
+    height: { type: [Number, String], default: 560 },
+    maxEvents: { type: Number, default: 3 },
+    locale: { type: String, default: void 0 },
+    hour12: { type: Boolean, default: void 0 }
+  },
+  emits: ["update:modelValue", "update:view", "click:event", "click:date", "click:time", "event-change"],
+  setup(props, { emit }) {
+    const dateModel = ui.useProxiedModel(props, emit, "modelValue", () => core.toISODate(/* @__PURE__ */ new Date()));
+    const viewModel = ui.useProxiedModel(props, emit, "view");
+    const loc = vue.computed(() => props.locale ?? ui.config.locale.code);
+    const focus = vue.computed(() => {
+      const [y, m, d] = (dateModel.value ?? core.toISODate(/* @__PURE__ */ new Date())).split("-").map(Number);
+      return new Date(y, m - 1, d);
+    });
+    const norm = vue.computed(() => props.events.map(normalizeEvent));
+    const weekdays = vue.computed(() => core.weekdayNames(loc.value, props.firstDayOfWeek, "short"));
+    const viewLabels = { month: "Month", week: "Week", day: "Day" };
+    const now = vue.ref(/* @__PURE__ */ new Date());
+    let timer;
+    vue.onMounted(() => timer = setInterval(() => now.value = /* @__PURE__ */ new Date(), 6e4));
+    vue.onBeforeUnmount(() => clearInterval(timer));
+    const title = vue.computed(() => {
+      const f = focus.value;
+      if (viewModel.value === "day") return new Intl.DateTimeFormat(loc.value, { dateStyle: "full" }).format(f);
+      if (viewModel.value === "week") {
+        const a = core.startOfWeek(f, props.firstDayOfWeek);
+        const b = core.addDays(a, 6);
+        const fmt = new Intl.DateTimeFormat(loc.value, { month: "short", day: "numeric" });
+        return `${fmt.format(a)} – ${fmt.format(b)}, ${b.getFullYear()}`;
+      }
+      return new Intl.DateTimeFormat(loc.value, { month: "long", year: "numeric" }).format(f);
+    });
+    const monthDays = vue.computed(
+      () => core.monthGrid(focus.value, props.firstDayOfWeek).map((date) => ({ date, key: core.toISODate(date), inMonth: core.isSameMonth(date, focus.value), today: core.isSameDay(date, now.value), events: eventsOnDay(norm.value, date) }))
+    );
+    const columns = vue.computed(() => {
+      const start = viewModel.value === "day" ? focus.value : core.startOfWeek(focus.value, props.firstDayOfWeek);
+      const count = viewModel.value === "day" ? 1 : 7;
+      const wfmt = new Intl.DateTimeFormat(loc.value, { weekday: "short" });
+      return Array.from({ length: count }, (_, i) => {
+        const date = core.addDays(start, i);
+        return { date, key: core.toISODate(date), weekday: wfmt.format(date), today: core.isSameDay(date, now.value), placed: layoutDay(norm.value, date), allDay: eventsOnDay(norm.value, date).filter((e) => e.ev.allDay) };
+      });
+    });
+    const shift = (d) => {
+      const f = focus.value;
+      dateModel.value = core.toISODate(viewModel.value === "month" ? core.addMonths(f, d) : core.addDays(f, d * (viewModel.value === "week" ? 7 : 1)));
+    };
+    const today = () => dateModel.value = core.toISODate(/* @__PURE__ */ new Date());
+    const goDay = (d) => {
+      dateModel.value = core.toISODate(d);
+      viewModel.value = "day";
+    };
+    const colorOf = (ev) => ui.colorValue(ev.color ?? "primary");
+    const time = (d) => new Intl.DateTimeFormat(loc.value, { hour: "numeric", minute: "2-digit", hour12: props.hour12 }).format(d);
+    const hourLabel = (h) => new Intl.DateTimeFormat(loc.value, { hour: "numeric", hour12: props.hour12 }).format(new Date(2024, 0, 1, h));
+    const nowTop = vue.computed(() => (now.value.getHours() * 60 + now.value.getMinutes()) / 60 * props.hourHeight);
+    const dragId = vue.ref(null);
+    const dropKey = vue.ref("");
+    const onMonthDrop = (date) => {
+      dropKey.value = "";
+      const e = norm.value.find((x) => x.ev.id === dragId.value);
+      dragId.value = null;
+      if (!e || !props.editable) return;
+      const delta = Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(e.start.getFullYear(), e.start.getMonth(), e.start.getDate()).getTime()) / 864e5);
+      if (delta) emit("event-change", { event: e.ev, start: core.addDays(e.start, delta), end: core.addDays(e.end, delta) });
+    };
+    const scroller = vue.ref(null);
+    const dragState = vue.ref(null);
+    const moved = vue.ref(false);
+    let origin = { x: 0, y: 0, colWidth: 1, placed: null };
+    const snapMin = (m) => Math.round(m / props.snap) * props.snap;
+    const onDragMove = (e) => {
+      if (!dragState.value) return;
+      const dy = e.clientY - origin.y;
+      const dx = e.clientX - origin.x;
+      if (Math.abs(dy) + Math.abs(dx) > 4) moved.value = true;
+      dragState.value = { ...dragState.value, dMin: snapMin(dy / props.hourHeight * 60), dDay: dragState.value.mode === "move" ? Math.round(dx / origin.colWidth) : 0 };
+    };
+    const onDragEnd = () => {
+      window.removeEventListener("pointermove", onDragMove);
+      window.removeEventListener("pointerup", onDragEnd);
+      const s = dragState.value;
+      const p = origin.placed;
+      dragState.value = null;
+      if (!s || !p || !moved.value) return;
+      const start = new Date(p.start.getTime() + (s.mode === "move" ? s.dMin * 6e4 : 0) + s.dDay * 864e5);
+      const end = new Date(p.end.getTime() + s.dMin * 6e4 + s.dDay * 864e5);
+      if (end > start) emit("event-change", { event: p.ev, start, end });
+      setTimeout(() => moved.value = false, 0);
+    };
+    const startDrag = (e, p, mode) => {
+      if (!props.editable || e.button !== 0) return;
+      const col = e.currentTarget.closest(".sq-calendar__col");
+      origin = { x: e.clientX, y: e.clientY, colWidth: col?.offsetWidth || 1, placed: p };
+      moved.value = false;
+      dragState.value = { id: p.ev.id, mode, dMin: 0, dDay: 0 };
+      window.addEventListener("pointermove", onDragMove);
+      window.addEventListener("pointerup", onDragEnd);
+    };
+    vue.onBeforeUnmount(onDragEnd);
+    const previewStart = (p) => dragState.value?.id === p.ev.id && dragState.value.mode === "move" ? new Date(p.start.getTime() + dragState.value.dMin * 6e4) : p.start;
+    const previewEnd = (p) => dragState.value?.id === p.ev.id ? new Date(p.end.getTime() + dragState.value.dMin * 6e4) : p.end;
+    const eventStyle = (p) => {
+      const ds = dragState.value?.id === p.ev.id ? dragState.value : null;
+      const top = (p.top + (ds && ds.mode === "move" ? ds.dMin : 0)) / 60 * props.hourHeight;
+      const height = Math.max(18, (p.height + (ds && ds.mode === "resize" ? ds.dMin : 0)) / 60 * props.hourHeight - 2);
+      return {
+        top: `${top}px`,
+        height: `${height}px`,
+        left: `calc(${p.col / p.cols * 100}% + 2px)`,
+        width: `calc(${100 / p.cols}% - 4px)`,
+        transform: ds && ds.dDay ? `translateX(${ds.dDay * 100}%)` : void 0,
+        "--sq-ev": colorOf(p.ev)
+      };
+    };
+    const onSlotClick = (e, date) => {
+      const col = e.currentTarget;
+      const minutes = snapMin((e.clientY - col.getBoundingClientRect().top) / props.hourHeight * 60);
+      emit("click:time", new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, minutes));
+    };
+    const scrollToNow = () => vue.nextTick(() => scroller.value && (scroller.value.scrollTop = Math.max(0, nowTop.value - 120)));
+    vue.onMounted(scrollToNow);
+    vue.watch(viewModel, (v) => v !== "month" && scrollToNow());
+    return {
+      viewModel,
+      viewLabels,
+      weekdays,
+      title,
+      monthDays,
+      columns,
+      shift,
+      today,
+      goDay,
+      colorOf,
+      time,
+      hourLabel,
+      nowTop,
+      dragId,
+      dropKey,
+      onMonthDrop,
+      scroller,
+      dragState,
+      moved,
+      startDrag,
+      previewStart,
+      previewEnd,
+      eventStyle,
+      onSlotClick,
+      toUnit: core.toUnit,
+      messages: vue.computed(() => ui.config.locale.messages)
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  class: "sq-calendar sq-surface",
+  style: { "--sq-r": "var(--sq-radius-xl)", "--sq-bg": "var(--sq-surface)", "--sq-bd": "var(--sq-border)", "--sq-bw": "1px" }
+};
+const _hoisted_2 = { class: "sq-calendar__toolbar" };
+const _hoisted_3 = { class: "sq-calendar__title" };
+const _hoisted_4 = {
+  key: 0,
+  class: "sq-calendar__month"
+};
+const _hoisted_5 = ["onClick", "onDragover", "onDragleave", "onDrop"];
+const _hoisted_6 = { class: "sq-calendar__date sq-squircle" };
+const _hoisted_7 = ["draggable", "title", "onDragstart", "onClick"];
+const _hoisted_8 = {
+  key: 0,
+  class: "sq-calendar__chip-time"
+};
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "sq-calendar__time-head" };
+const _hoisted_11 = { class: "sq-squircle" };
+const _hoisted_12 = { class: "sq-calendar__allday" };
+const _hoisted_13 = ["onClick"];
+const _hoisted_14 = { class: "sq-calendar__gutter sq-calendar__hours" };
+const _hoisted_15 = { key: 0 };
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = ["onPointerdown", "onClick"];
+const _hoisted_18 = { class: "sq-calendar__event-title" };
+const _hoisted_19 = { class: "sq-calendar__event-time" };
+const _hoisted_20 = ["onPointerdown"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SqShape = vue.resolveComponent("SqShape");
+  const _component_SqBtn = vue.resolveComponent("SqBtn");
+  const _component_SqBtnToggle = vue.resolveComponent("SqBtnToggle");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.createVNode(_component_SqShape, { clip: "" }),
+    vue.createElementVNode("div", _hoisted_2, [
+      vue.createVNode(_component_SqBtn, {
+        variant: "tonal",
+        size: "small",
+        onClick: _ctx.today
+      }, {
+        default: vue.withCtx(() => [
+          vue.createTextVNode(
+            vue.toDisplayString(_ctx.messages.today),
+            1
+            /* TEXT */
+          )
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["onClick"]),
+      vue.createVNode(_component_SqBtn, {
+        icon: "chevronLeft",
+        variant: "text",
+        color: "surface",
+        size: "small",
+        "aria-label": _ctx.messages.previous,
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.shift(-1))
+      }, null, 8, ["aria-label"]),
+      vue.createVNode(_component_SqBtn, {
+        icon: "chevronRight",
+        variant: "text",
+        color: "surface",
+        size: "small",
+        "aria-label": _ctx.messages.next,
+        onClick: _cache[1] || (_cache[1] = ($event) => _ctx.shift(1))
+      }, null, 8, ["aria-label"]),
+      vue.createElementVNode(
+        "div",
+        _hoisted_3,
+        vue.toDisplayString(_ctx.title),
+        1
+        /* TEXT */
+      ),
+      _cache[3] || (_cache[3] = vue.createElementVNode(
+        "span",
+        { class: "sq-spacer" },
+        null,
+        -1
+        /* CACHED */
+      )),
+      vue.createVNode(_component_SqBtnToggle, {
+        modelValue: _ctx.viewModel,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.viewModel = $event),
+        mandatory: ""
+      }, {
+        default: vue.withCtx(() => [
+          (vue.openBlock(true), vue.createElementBlock(
+            vue.Fragment,
+            null,
+            vue.renderList(_ctx.views, (v) => {
+              return vue.openBlock(), vue.createBlock(_component_SqBtn, {
+                key: v,
+                value: v,
+                size: "small",
+                variant: "text",
+                color: "surface"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(
+                    vue.toDisplayString(_ctx.viewLabels[v]),
+                    1
+                    /* TEXT */
+                  )
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["value"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["modelValue"])
+    ]),
+    vue.createCommentVNode(" month "),
+    _ctx.viewModel === "month" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+      (vue.openBlock(true), vue.createElementBlock(
+        vue.Fragment,
+        null,
+        vue.renderList(_ctx.weekdays, (w, wi) => {
+          return vue.openBlock(), vue.createElementBlock(
+            "div",
+            {
+              key: wi,
+              class: "sq-calendar__weekday"
+            },
+            vue.toDisplayString(w),
+            1
+            /* TEXT */
+          );
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      )),
+      (vue.openBlock(true), vue.createElementBlock(
+        vue.Fragment,
+        null,
+        vue.renderList(_ctx.monthDays, (d) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: d.key,
+            class: vue.normalizeClass(["sq-calendar__day", { "sq-calendar__day--outside": !d.inMonth, "sq-calendar__day--today": d.today, "sq-calendar__day--drop": _ctx.dropKey === d.key }]),
+            onClick: ($event) => _ctx.$emit("click:date", d.key),
+            onDragover: vue.withModifiers(($event) => _ctx.dropKey = d.key, ["prevent"]),
+            onDragleave: ($event) => _ctx.dropKey === d.key && (_ctx.dropKey = ""),
+            onDrop: vue.withModifiers(($event) => _ctx.onMonthDrop(d.date), ["prevent"])
+          }, [
+            vue.createElementVNode(
+              "span",
+              _hoisted_6,
+              vue.toDisplayString(d.date.getDate()),
+              1
+              /* TEXT */
+            ),
+            (vue.openBlock(true), vue.createElementBlock(
+              vue.Fragment,
+              null,
+              vue.renderList(d.events.slice(0, _ctx.maxEvents), (e) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: String(e.ev.id),
+                  class: vue.normalizeClass(["sq-calendar__chip sq-squircle", { "sq-calendar__chip--allday": e.ev.allDay }]),
+                  style: vue.normalizeStyle({ "--sq-ev": _ctx.colorOf(e.ev) }),
+                  draggable: _ctx.editable,
+                  title: e.ev.title,
+                  onDragstart: ($event) => _ctx.dragId = e.ev.id,
+                  onClick: vue.withModifiers(($event) => _ctx.$emit("click:event", e.ev), ["stop"])
+                }, [
+                  !e.ev.allDay ? (vue.openBlock(), vue.createElementBlock(
+                    "span",
+                    _hoisted_8,
+                    vue.toDisplayString(_ctx.time(e.start)),
+                    1
+                    /* TEXT */
+                  )) : vue.createCommentVNode("v-if", true),
+                  vue.createTextVNode(
+                    vue.toDisplayString(e.ev.title),
+                    1
+                    /* TEXT */
+                  )
+                ], 46, _hoisted_7);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )),
+            d.events.length > _ctx.maxEvents ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: "sq-calendar__more",
+              onClick: vue.withModifiers(($event) => _ctx.goDay(d.date), ["stop"])
+            }, "+" + vue.toDisplayString(d.events.length - _ctx.maxEvents) + " more", 9, _hoisted_9)) : vue.createCommentVNode("v-if", true)
+          ], 42, _hoisted_5);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ])) : (vue.openBlock(), vue.createElementBlock(
+      vue.Fragment,
+      { key: 1 },
+      [
+        vue.createCommentVNode(" week / day "),
+        vue.createElementVNode(
+          "div",
+          {
+            class: "sq-calendar__time",
+            style: vue.normalizeStyle({ "--sq-cal-cols": _ctx.columns.length })
+          },
+          [
+            vue.createElementVNode("div", _hoisted_10, [
+              _cache[4] || (_cache[4] = vue.createElementVNode(
+                "div",
+                { class: "sq-calendar__gutter" },
+                null,
+                -1
+                /* CACHED */
+              )),
+              (vue.openBlock(true), vue.createElementBlock(
+                vue.Fragment,
+                null,
+                vue.renderList(_ctx.columns, (c) => {
+                  return vue.openBlock(), vue.createElementBlock(
+                    "div",
+                    {
+                      key: c.key,
+                      class: vue.normalizeClass(["sq-calendar__col-head", { "sq-calendar__col-head--today": c.today }])
+                    },
+                    [
+                      vue.createElementVNode(
+                        "span",
+                        null,
+                        vue.toDisplayString(c.weekday),
+                        1
+                        /* TEXT */
+                      ),
+                      vue.createElementVNode(
+                        "b",
+                        _hoisted_11,
+                        vue.toDisplayString(c.date.getDate()),
+                        1
+                        /* TEXT */
+                      )
+                    ],
+                    2
+                    /* CLASS */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            vue.createElementVNode("div", _hoisted_12, [
+              _cache[5] || (_cache[5] = vue.createElementVNode(
+                "div",
+                { class: "sq-calendar__gutter" },
+                "all-day",
+                -1
+                /* CACHED */
+              )),
+              (vue.openBlock(true), vue.createElementBlock(
+                vue.Fragment,
+                null,
+                vue.renderList(_ctx.columns, (c) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: c.key,
+                    class: "sq-calendar__allday-col"
+                  }, [
+                    (vue.openBlock(true), vue.createElementBlock(
+                      vue.Fragment,
+                      null,
+                      vue.renderList(c.allDay, (e) => {
+                        return vue.openBlock(), vue.createElementBlock("div", {
+                          key: String(e.ev.id),
+                          class: "sq-calendar__chip sq-calendar__chip--allday sq-squircle",
+                          style: vue.normalizeStyle({ "--sq-ev": _ctx.colorOf(e.ev) }),
+                          onClick: ($event) => _ctx.$emit("click:event", e.ev)
+                        }, vue.toDisplayString(e.ev.title), 13, _hoisted_13);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            vue.createElementVNode(
+              "div",
+              {
+                ref: "scroller",
+                class: "sq-calendar__scroll",
+                style: vue.normalizeStyle({ height: _ctx.toUnit(_ctx.height) })
+              },
+              [
+                vue.createElementVNode(
+                  "div",
+                  {
+                    class: "sq-calendar__grid",
+                    style: vue.normalizeStyle({ height: 24 * _ctx.hourHeight + "px" })
+                  },
+                  [
+                    vue.createElementVNode("div", _hoisted_14, [
+                      (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        null,
+                        vue.renderList(24, (h) => {
+                          return vue.createElementVNode(
+                            "div",
+                            {
+                              key: h,
+                              class: "sq-calendar__hour",
+                              style: vue.normalizeStyle({ height: _ctx.hourHeight + "px" })
+                            },
+                            [
+                              h > 1 ? (vue.openBlock(), vue.createElementBlock(
+                                "span",
+                                _hoisted_15,
+                                vue.toDisplayString(_ctx.hourLabel(h - 1)),
+                                1
+                                /* TEXT */
+                              )) : vue.createCommentVNode("v-if", true)
+                            ],
+                            4
+                            /* STYLE */
+                          );
+                        }),
+                        64
+                        /* STABLE_FRAGMENT */
+                      ))
+                    ]),
+                    (vue.openBlock(true), vue.createElementBlock(
+                      vue.Fragment,
+                      null,
+                      vue.renderList(_ctx.columns, (c) => {
+                        return vue.openBlock(), vue.createElementBlock("div", {
+                          key: c.key,
+                          class: "sq-calendar__col",
+                          onClick: ($event) => _ctx.onSlotClick($event, c.date)
+                        }, [
+                          (vue.openBlock(), vue.createElementBlock(
+                            vue.Fragment,
+                            null,
+                            vue.renderList(24, (h) => {
+                              return vue.createElementVNode(
+                                "div",
+                                {
+                                  key: h,
+                                  class: "sq-calendar__slot",
+                                  style: vue.normalizeStyle({ height: _ctx.hourHeight + "px" })
+                                },
+                                null,
+                                4
+                                /* STYLE */
+                              );
+                            }),
+                            64
+                            /* STABLE_FRAGMENT */
+                          )),
+                          c.today ? (vue.openBlock(), vue.createElementBlock(
+                            "div",
+                            {
+                              key: 0,
+                              class: "sq-calendar__now",
+                              style: vue.normalizeStyle({ top: _ctx.nowTop + "px" })
+                            },
+                            null,
+                            4
+                            /* STYLE */
+                          )) : vue.createCommentVNode("v-if", true),
+                          (vue.openBlock(true), vue.createElementBlock(
+                            vue.Fragment,
+                            null,
+                            vue.renderList(c.placed, (p) => {
+                              return vue.openBlock(), vue.createElementBlock("div", {
+                                key: String(p.ev.id),
+                                class: vue.normalizeClass(["sq-calendar__event sq-squircle", { "sq-calendar__event--dragging": _ctx.dragState && _ctx.dragState.id === p.ev.id }]),
+                                style: vue.normalizeStyle(_ctx.eventStyle(p)),
+                                onPointerdown: vue.withModifiers(($event) => _ctx.startDrag($event, p, "move"), ["stop"]),
+                                onClick: vue.withModifiers(($event) => !_ctx.moved && _ctx.$emit("click:event", p.ev), ["stop"])
+                              }, [
+                                vue.createElementVNode(
+                                  "div",
+                                  _hoisted_18,
+                                  vue.toDisplayString(p.ev.title),
+                                  1
+                                  /* TEXT */
+                                ),
+                                vue.createElementVNode(
+                                  "div",
+                                  _hoisted_19,
+                                  vue.toDisplayString(_ctx.time(_ctx.previewStart(p))) + " – " + vue.toDisplayString(_ctx.time(_ctx.previewEnd(p))),
+                                  1
+                                  /* TEXT */
+                                ),
+                                _ctx.editable ? (vue.openBlock(), vue.createElementBlock("div", {
+                                  key: 0,
+                                  class: "sq-calendar__resize",
+                                  onPointerdown: vue.withModifiers(($event) => _ctx.startDrag($event, p, "resize"), ["stop"])
+                                }, null, 40, _hoisted_20)) : vue.createCommentVNode("v-if", true)
+                              ], 46, _hoisted_17);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ], 8, _hoisted_16);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ],
+                  4
+                  /* STYLE */
+                )
+              ],
+              4
+              /* STYLE */
+            )
+          ],
+          4
+          /* STYLE */
+        )
+      ],
+      2112
+      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+    ))
+  ]);
+}
+const SqCalendar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const componentNames = ["SqCalendar"];
+exports.SqCalendar = SqCalendar;
+exports.componentNames = componentNames;
+exports.default = SqCalendar;
+exports.eventsOnDay = eventsOnDay;
+exports.layoutDay = layoutDay;
+exports.normalizeEvent = normalizeEvent;
+//# sourceMappingURL=index.cjs.map