@bagelink/vue 0.0.1216 → 0.0.1220
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Calendar/Index.vue.d.ts +510 -0
- package/dist/components/Calendar/Index.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/header/Header.vue.d.ts +117 -0
- package/dist/components/Calendar/components/header/Header.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/month/AgendaEventTile.vue.d.ts +37 -0
- package/dist/components/Calendar/components/month/AgendaEventTile.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/month/AgendaEvents.vue.d.ts +37 -0
- package/dist/components/Calendar/components/month/AgendaEvents.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/month/Day.vue.d.ts +84 -0
- package/dist/components/Calendar/components/month/Day.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/month/Event.vue.d.ts +69 -0
- package/dist/components/Calendar/components/month/Event.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/month/Month.vue.d.ts +134 -0
- package/dist/components/Calendar/components/month/Month.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/month/WeekDay.vue.d.ts +7 -0
- package/dist/components/Calendar/components/month/WeekDay.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/partials/EventFlyout.vue.d.ts +122 -0
- package/dist/components/Calendar/components/partials/EventFlyout.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/week/Day.vue.d.ts +152 -0
- package/dist/components/Calendar/components/week/Day.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/week/DayEvent.vue.d.ts +136 -0
- package/dist/components/Calendar/components/week/DayEvent.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/week/DayTimeline.vue.d.ts +23 -0
- package/dist/components/Calendar/components/week/DayTimeline.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/week/FullDayEvent.vue.d.ts +42 -0
- package/dist/components/Calendar/components/week/FullDayEvent.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/week/Week.vue.d.ts +196 -0
- package/dist/components/Calendar/components/week/Week.vue.d.ts.map +1 -0
- package/dist/components/Calendar/components/week/WeekTimeline.vue.d.ts +21 -0
- package/dist/components/Calendar/components/week/WeekTimeline.vue.d.ts.map +1 -0
- package/dist/components/Calendar/constants.d.ts +13 -0
- package/dist/components/Calendar/constants.d.ts.map +1 -0
- package/dist/components/Calendar/helpers/DayIntervals.d.ts +17 -0
- package/dist/components/Calendar/helpers/DayIntervals.d.ts.map +1 -0
- package/dist/components/Calendar/helpers/EDate.d.ts +10 -0
- package/dist/components/Calendar/helpers/EDate.d.ts.map +1 -0
- package/dist/components/Calendar/helpers/Errors.d.ts +18 -0
- package/dist/components/Calendar/helpers/Errors.d.ts.map +1 -0
- package/dist/components/Calendar/helpers/EventChange.d.ts +19 -0
- package/dist/components/Calendar/helpers/EventChange.d.ts.map +1 -0
- package/dist/components/Calendar/helpers/EventConcurrency.d.ts +12 -0
- package/dist/components/Calendar/helpers/EventConcurrency.d.ts.map +1 -0
- package/dist/components/Calendar/helpers/EventFlyoutPosition.d.ts +14 -0
- package/dist/components/Calendar/helpers/EventFlyoutPosition.d.ts.map +1 -0
- package/dist/components/Calendar/helpers/EventPosition.d.ts +11 -0
- package/dist/components/Calendar/helpers/EventPosition.d.ts.map +1 -0
- package/dist/components/Calendar/helpers/EventsFilter.d.ts +11 -0
- package/dist/components/Calendar/helpers/EventsFilter.d.ts.map +1 -0
- package/dist/components/Calendar/helpers/Helpers.d.ts +19 -0
- package/dist/components/Calendar/helpers/Helpers.d.ts.map +1 -0
- package/dist/components/Calendar/helpers/Time.d.ts +118 -0
- package/dist/components/Calendar/helpers/Time.d.ts.map +1 -0
- package/dist/components/Calendar/helpers/Week.d.ts +10 -0
- package/dist/components/Calendar/helpers/Week.d.ts.map +1 -0
- package/dist/components/Calendar/index.d.ts +4 -0
- package/dist/components/Calendar/index.d.ts.map +1 -0
- package/dist/components/Calendar/language/index.d.ts +6 -0
- package/dist/components/Calendar/language/index.d.ts.map +1 -0
- package/dist/components/Calendar/language/keys.d.ts +90 -0
- package/dist/components/Calendar/language/keys.d.ts.map +1 -0
- package/dist/components/Calendar/models/Event.d.ts +50 -0
- package/dist/components/Calendar/models/Event.d.ts.map +1 -0
- package/dist/components/Calendar/typings/config.interface.d.ts +77 -0
- package/dist/components/Calendar/typings/config.interface.d.ts.map +1 -0
- package/dist/components/Calendar/typings/interfaces/day.interface.d.ts +10 -0
- package/dist/components/Calendar/typings/interfaces/day.interface.d.ts.map +1 -0
- package/dist/components/Calendar/typings/interfaces/event.interface.d.ts +32 -0
- package/dist/components/Calendar/typings/interfaces/event.interface.d.ts.map +1 -0
- package/dist/components/Calendar/typings/interfaces/full-day-events-week.type.d.ts +7 -0
- package/dist/components/Calendar/typings/interfaces/full-day-events-week.type.d.ts.map +1 -0
- package/dist/components/Calendar/typings/interfaces/period.interface.d.ts +6 -0
- package/dist/components/Calendar/typings/interfaces/period.interface.d.ts.map +1 -0
- package/dist/components/Calendar/typings/interfaces/time-modes.d.ts +6 -0
- package/dist/components/Calendar/typings/interfaces/time-modes.d.ts.map +1 -0
- package/dist/components/Calendar/typings/types.d.ts +21 -0
- package/dist/components/Calendar/typings/types.d.ts.map +1 -0
- package/dist/components/DataTable/DataTable.vue.d.ts.map +1 -1
- package/dist/components/Draggable/useDraggable.d.ts.map +1 -1
- package/dist/components/form/inputs/DatePick.vue.d.ts +8 -0
- package/dist/components/form/inputs/DatePick.vue.d.ts.map +1 -1
- package/dist/components/form/inputs/NumberInput.vue.d.ts.map +1 -1
- package/dist/components/index.d.ts +2 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/directives/index.d.ts +2 -0
- package/dist/directives/index.d.ts.map +1 -1
- package/dist/directives/vResize.d.ts +18 -0
- package/dist/directives/vResize.d.ts.map +1 -0
- package/dist/index.cjs +3657 -169
- package/dist/index.mjs +3658 -170
- package/dist/style.css +843 -77
- package/package.json +2 -1
- package/src/components/Calendar/Index.vue +420 -0
- package/src/components/Calendar/assets/base.css +60 -0
- package/src/components/Calendar/components/header/Header.vue +274 -0
- package/src/components/Calendar/components/month/AgendaEventTile.vue +137 -0
- package/src/components/Calendar/components/month/AgendaEvents.vue +107 -0
- package/src/components/Calendar/components/month/Day.vue +271 -0
- package/src/components/Calendar/components/month/Event.vue +221 -0
- package/src/components/Calendar/components/month/Month.vue +278 -0
- package/src/components/Calendar/components/month/WeekDay.vue +25 -0
- package/src/components/Calendar/components/partials/EventFlyout.vue +429 -0
- package/src/components/Calendar/components/week/Day.vue +212 -0
- package/src/components/Calendar/components/week/DayEvent.vue +585 -0
- package/src/components/Calendar/components/week/DayTimeline.vue +86 -0
- package/src/components/Calendar/components/week/FullDayEvent.vue +121 -0
- package/src/components/Calendar/components/week/Week.vue +414 -0
- package/src/components/Calendar/components/week/WeekTimeline.vue +126 -0
- package/src/components/Calendar/constants.ts +13 -0
- package/src/components/Calendar/env.d.ts +8 -0
- package/src/components/Calendar/helpers/DayIntervals.ts +48 -0
- package/src/components/Calendar/helpers/EDate.ts +18 -0
- package/src/components/Calendar/helpers/Errors.ts +69 -0
- package/src/components/Calendar/helpers/EventChange.ts +88 -0
- package/src/components/Calendar/helpers/EventConcurrency.ts +69 -0
- package/src/components/Calendar/helpers/EventFlyoutPosition.ts +96 -0
- package/src/components/Calendar/helpers/EventPosition.ts +154 -0
- package/src/components/Calendar/helpers/EventsFilter.ts +50 -0
- package/src/components/Calendar/helpers/Helpers.ts +86 -0
- package/src/components/Calendar/helpers/Time.ts +588 -0
- package/src/components/Calendar/helpers/Week.ts +37 -0
- package/src/components/Calendar/index.ts +4 -0
- package/src/components/Calendar/language/index.ts +37 -0
- package/src/components/Calendar/language/keys.ts +90 -0
- package/src/components/Calendar/models/Event.ts +112 -0
- package/src/components/Calendar/styles/_mixins.css +21 -0
- package/src/components/Calendar/styles/_variables.css +51 -0
- package/src/components/Calendar/typings/config.interface.ts +87 -0
- package/src/components/Calendar/typings/interfaces/day.interface.ts +10 -0
- package/src/components/Calendar/typings/interfaces/event.interface.ts +32 -0
- package/src/components/Calendar/typings/interfaces/full-day-events-week.type.ts +8 -0
- package/src/components/Calendar/typings/interfaces/period.interface.ts +5 -0
- package/src/components/Calendar/typings/interfaces/time-modes.ts +9 -0
- package/src/components/Calendar/typings/types.ts +23 -0
- package/src/components/DataTable/DataTable.vue +4 -0
- package/src/components/Draggable/useDraggable.ts +53 -37
- package/src/components/form/inputs/DatePick.vue +189 -152
- package/src/components/form/inputs/NumberInput.vue +1 -3
- package/src/components/index.ts +3 -6
- package/src/directives/index.ts +2 -0
- package/src/directives/vResize.ts +205 -0
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
-
import { defineComponent, reactive, provide, openBlock, createElementBlock, renderSlot, ref, computed, inject, watch, normalizeClass, createElementVNode, unref, createVNode, createCommentVNode, toDisplayString, Transition, withCtx, isRef, Fragment, renderList, createBlock, useSlots, resolveDirective, withDirectives, resolveDynamicComponent, mergeProps, withModifiers, withKeys, createTextVNode, normalizeStyle, resolveComponent,
|
|
4
|
+
import { defineComponent, reactive, provide, openBlock, createElementBlock, renderSlot, ref, computed, inject, watch, normalizeClass, createElementVNode, unref, createVNode, createCommentVNode, toDisplayString, Transition, withCtx, isRef, Fragment, renderList, createBlock, useSlots, resolveDirective, withDirectives, resolveDynamicComponent, mergeProps, withModifiers, withKeys, createTextVNode, normalizeStyle, resolveComponent, Comment, Text, useCssVars, nextTick, onMounted, onBeforeUnmount, onUnmounted, h as h$2, getCurrentScope, onScopeDispose, toValue, getCurrentInstance, shallowRef, mergeModels, useModel, normalizeProps, vModelCheckbox, pushScopeId, popScopeId, guardReactiveProps, withScopeId, createApp, vModelText, toRef, createSlots, Teleport, render as render$e, onBeforeUpdate, vShow, vModelRadio, TransitionGroup, vModelDynamic, markRaw } from "vue";
|
|
5
5
|
import { RouterLink } from "vue-router";
|
|
6
6
|
const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
7
7
|
__proto__: null,
|
|
@@ -45,7 +45,7 @@ const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
|
|
|
45
45
|
return uploadField;
|
|
46
46
|
}
|
|
47
47
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
48
|
-
const _sfc_main$
|
|
48
|
+
const _sfc_main$1m = /* @__PURE__ */ defineComponent({
|
|
49
49
|
__name: "Accordion",
|
|
50
50
|
setup(__props) {
|
|
51
51
|
const state2 = reactive({
|
|
@@ -59,10 +59,10 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
|
|
|
59
59
|
};
|
|
60
60
|
}
|
|
61
61
|
});
|
|
62
|
-
const _hoisted_1$
|
|
63
|
-
const _hoisted_2$
|
|
64
|
-
const _hoisted_3$
|
|
65
|
-
const _sfc_main$
|
|
62
|
+
const _hoisted_1$19 = ["aria-expanded", "aria-controls"];
|
|
63
|
+
const _hoisted_2$Q = { class: "accordion-label" };
|
|
64
|
+
const _hoisted_3$F = ["id", "aria-hidden"];
|
|
65
|
+
const _sfc_main$1l = /* @__PURE__ */ defineComponent({
|
|
66
66
|
__name: "AccordionItem",
|
|
67
67
|
props: {
|
|
68
68
|
label: {},
|
|
@@ -128,7 +128,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
|
|
|
128
128
|
createVNode(unref(_sfc_main$q), { icon: computedIcon.value }, null, 8, ["icon"])
|
|
129
129
|
], 2)) : createCommentVNode("", true),
|
|
130
130
|
renderSlot(_ctx.$slots, "head", {}, () => [
|
|
131
|
-
createElementVNode("span", _hoisted_2$
|
|
131
|
+
createElementVNode("span", _hoisted_2$Q, toDisplayString(_ctx.label), 1)
|
|
132
132
|
], true),
|
|
133
133
|
iconPosition.value === "end" ? (openBlock(), createElementBlock("span", {
|
|
134
134
|
key: 1,
|
|
@@ -136,7 +136,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
|
|
|
136
136
|
}, [
|
|
137
137
|
createVNode(unref(_sfc_main$q), { icon: computedIcon.value }, null, 8, ["icon"])
|
|
138
138
|
], 2)) : createCommentVNode("", true)
|
|
139
|
-
], 8, _hoisted_1$
|
|
139
|
+
], 8, _hoisted_1$19),
|
|
140
140
|
createVNode(Transition, { name: "expand" }, {
|
|
141
141
|
default: withCtx(() => [
|
|
142
142
|
unref(isOpen) ? (openBlock(), createElementBlock("div", {
|
|
@@ -146,7 +146,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
|
|
|
146
146
|
"aria-hidden": unref(isOpen) ? "false" : "true"
|
|
147
147
|
}, [
|
|
148
148
|
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
149
|
-
], 8, _hoisted_3$
|
|
149
|
+
], 8, _hoisted_3$F)) : createCommentVNode("", true)
|
|
150
150
|
]),
|
|
151
151
|
_: 3
|
|
152
152
|
})
|
|
@@ -161,9 +161,9 @@ const _export_sfc = (sfc, props2) => {
|
|
|
161
161
|
}
|
|
162
162
|
return target;
|
|
163
163
|
};
|
|
164
|
-
const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$
|
|
165
|
-
const _hoisted_1$
|
|
166
|
-
const _sfc_main$
|
|
164
|
+
const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__scopeId", "data-v-3334f637"]]);
|
|
165
|
+
const _hoisted_1$18 = { class: "relative" };
|
|
166
|
+
const _sfc_main$1k = /* @__PURE__ */ defineComponent({
|
|
167
167
|
__name: "AddressSearch",
|
|
168
168
|
emits: ["addressSelected"],
|
|
169
169
|
setup(__props, { emit: __emit }) {
|
|
@@ -185,7 +185,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
|
|
|
185
185
|
(_a2 = suggestion.value) == null ? void 0 : _a2.show();
|
|
186
186
|
}
|
|
187
187
|
return (_ctx, _cache) => {
|
|
188
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
188
|
+
return openBlock(), createElementBlock("div", _hoisted_1$18, [
|
|
189
189
|
createVNode(unref(_sfc_main$U), {
|
|
190
190
|
ref_key: "suggestion",
|
|
191
191
|
ref: suggestion,
|
|
@@ -221,11 +221,11 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
|
|
|
221
221
|
};
|
|
222
222
|
}
|
|
223
223
|
});
|
|
224
|
-
const _hoisted_1$
|
|
224
|
+
const _hoisted_1$17 = {
|
|
225
225
|
key: 1,
|
|
226
226
|
class: "bgl_btn-flex"
|
|
227
227
|
};
|
|
228
|
-
const _sfc_main$
|
|
228
|
+
const _sfc_main$1j = /* @__PURE__ */ defineComponent({
|
|
229
229
|
__name: "Btn",
|
|
230
230
|
props: {
|
|
231
231
|
disabled: { type: Boolean, default: false },
|
|
@@ -291,7 +291,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
|
|
|
291
291
|
key: 0,
|
|
292
292
|
class: "h-100p",
|
|
293
293
|
size: "15"
|
|
294
|
-
})) : (openBlock(), createElementBlock("div", _hoisted_1$
|
|
294
|
+
})) : (openBlock(), createElementBlock("div", _hoisted_1$17, [
|
|
295
295
|
_ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$q), {
|
|
296
296
|
key: 0,
|
|
297
297
|
icon: _ctx.icon,
|
|
@@ -315,10 +315,10 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
|
|
|
315
315
|
};
|
|
316
316
|
}
|
|
317
317
|
});
|
|
318
|
-
const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$
|
|
319
|
-
const _hoisted_1$
|
|
320
|
-
const _hoisted_2$
|
|
321
|
-
const _sfc_main$
|
|
318
|
+
const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-7b18a02c"]]);
|
|
319
|
+
const _hoisted_1$16 = ["dismissable"];
|
|
320
|
+
const _hoisted_2$P = { class: "m-0" };
|
|
321
|
+
const _sfc_main$1i = /* @__PURE__ */ defineComponent({
|
|
322
322
|
__name: "Alert",
|
|
323
323
|
props: {
|
|
324
324
|
message: {},
|
|
@@ -346,7 +346,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
|
|
|
346
346
|
size: 2,
|
|
347
347
|
color: color2[_ctx.type]
|
|
348
348
|
}, null, 8, ["icon", "color"])) : createCommentVNode("", true),
|
|
349
|
-
createElementVNode("p", _hoisted_2$
|
|
349
|
+
createElementVNode("p", _hoisted_2$P, toDisplayString(_ctx.message), 1),
|
|
350
350
|
createVNode(Btn, {
|
|
351
351
|
flat: "",
|
|
352
352
|
thin: "",
|
|
@@ -354,13 +354,13 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
|
|
|
354
354
|
icon: "close",
|
|
355
355
|
onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
|
|
356
356
|
})
|
|
357
|
-
], 10, _hoisted_1$
|
|
357
|
+
], 10, _hoisted_1$16)) : createCommentVNode("", true);
|
|
358
358
|
};
|
|
359
359
|
}
|
|
360
360
|
});
|
|
361
|
-
const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$
|
|
362
|
-
const _hoisted_1$
|
|
363
|
-
const _sfc_main$
|
|
361
|
+
const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-064bdd20"]]);
|
|
362
|
+
const _hoisted_1$15 = ["src", "alt"];
|
|
363
|
+
const _sfc_main$1h = /* @__PURE__ */ defineComponent({
|
|
364
364
|
__name: "Avatar",
|
|
365
365
|
props: {
|
|
366
366
|
fallback: {},
|
|
@@ -378,7 +378,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
|
|
|
378
378
|
key: 0,
|
|
379
379
|
src: _ctx.src,
|
|
380
380
|
alt: _ctx.name
|
|
381
|
-
}, null, 8, _hoisted_1$
|
|
381
|
+
}, null, 8, _hoisted_1$15)) : (openBlock(), createElementBlock("p", {
|
|
382
382
|
key: 1,
|
|
383
383
|
style: normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
|
|
384
384
|
}, toDisplayString((_ctx.fallback || unref(initials)(_ctx.name || "")).toUpperCase()), 5))
|
|
@@ -386,8 +386,8 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
|
|
|
386
386
|
};
|
|
387
387
|
}
|
|
388
388
|
});
|
|
389
|
-
const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$
|
|
390
|
-
const _sfc_main$
|
|
389
|
+
const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["__scopeId", "data-v-46ad8c25"]]);
|
|
390
|
+
const _sfc_main$1g = /* @__PURE__ */ defineComponent({
|
|
391
391
|
__name: "Badge",
|
|
392
392
|
props: {
|
|
393
393
|
color: {},
|
|
@@ -416,9 +416,9 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
|
|
|
416
416
|
};
|
|
417
417
|
}
|
|
418
418
|
});
|
|
419
|
-
const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$
|
|
420
|
-
const _hoisted_1$
|
|
421
|
-
const _sfc_main$
|
|
419
|
+
const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["__scopeId", "data-v-689f051f"]]);
|
|
420
|
+
const _hoisted_1$14 = { key: 1 };
|
|
421
|
+
const _sfc_main$1f = /* @__PURE__ */ defineComponent({
|
|
422
422
|
__name: "BglComponent",
|
|
423
423
|
props: {
|
|
424
424
|
field: {},
|
|
@@ -564,7 +564,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
|
|
|
564
564
|
id: [props2.id, child.id].filter(Boolean).join("."),
|
|
565
565
|
field: child,
|
|
566
566
|
"parent-path": props2.id
|
|
567
|
-
}, null, 8, ["id", "field", "parent-path"])) : (openBlock(), createElementBlock("span", _hoisted_1$
|
|
567
|
+
}, null, 8, ["id", "field", "parent-path"])) : (openBlock(), createElementBlock("span", _hoisted_1$14, toDisplayString(child), 1))
|
|
568
568
|
], 64);
|
|
569
569
|
}), 128))
|
|
570
570
|
], 64))
|
|
@@ -574,10 +574,10 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
|
|
|
574
574
|
};
|
|
575
575
|
}
|
|
576
576
|
});
|
|
577
|
-
const _hoisted_1$
|
|
578
|
-
const _hoisted_2$
|
|
579
|
-
const _hoisted_3$
|
|
580
|
-
const _sfc_main
|
|
577
|
+
const _hoisted_1$13 = ["src"];
|
|
578
|
+
const _hoisted_2$O = ["autoplay", "muted", "loop", "controls", "playsinline"];
|
|
579
|
+
const _hoisted_3$E = ["src", "type"];
|
|
580
|
+
const _sfc_main$1e = /* @__PURE__ */ defineComponent({
|
|
581
581
|
__name: "BglVideo",
|
|
582
582
|
props: {
|
|
583
583
|
src: {},
|
|
@@ -654,7 +654,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
|
|
|
654
654
|
allowfullscreen: "",
|
|
655
655
|
title: "Video",
|
|
656
656
|
allow: "autoplay"
|
|
657
|
-
}, null, 12, _hoisted_1$
|
|
657
|
+
}, null, 12, _hoisted_1$13)) : _ctx.src ? (openBlock(), createElementBlock("video", {
|
|
658
658
|
key: 1,
|
|
659
659
|
ref_key: "video",
|
|
660
660
|
ref: video,
|
|
@@ -668,13 +668,3467 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
|
|
|
668
668
|
createElementVNode("source", {
|
|
669
669
|
src: _ctx.src,
|
|
670
670
|
type: `video/${videoFormat.value}`
|
|
671
|
-
}, null, 8, _hoisted_3$
|
|
672
|
-
], 12, _hoisted_2$
|
|
671
|
+
}, null, 8, _hoisted_3$E)
|
|
672
|
+
], 12, _hoisted_2$O)) : createCommentVNode("", true)
|
|
673
673
|
], 2);
|
|
674
674
|
};
|
|
675
675
|
}
|
|
676
676
|
});
|
|
677
|
-
const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main
|
|
677
|
+
const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-006552f6"]]);
|
|
678
|
+
const _hoisted_1$12 = { class: "calendar-header" };
|
|
679
|
+
const _hoisted_2$N = {
|
|
680
|
+
key: 0,
|
|
681
|
+
class: "calendar-header__period-name"
|
|
682
|
+
};
|
|
683
|
+
const _hoisted_3$D = { class: "flex gap-05" };
|
|
684
|
+
const _hoisted_4$q = { class: "calendar-header__chevron-arrows" };
|
|
685
|
+
const _hoisted_5$o = {
|
|
686
|
+
key: 0,
|
|
687
|
+
class: "calendar-header__mode-picker"
|
|
688
|
+
};
|
|
689
|
+
const _sfc_main$1d = /* @__PURE__ */ defineComponent({
|
|
690
|
+
__name: "Header",
|
|
691
|
+
props: {
|
|
692
|
+
config: {
|
|
693
|
+
type: Object,
|
|
694
|
+
default: () => ({})
|
|
695
|
+
},
|
|
696
|
+
mode: {
|
|
697
|
+
type: String,
|
|
698
|
+
default: "week"
|
|
699
|
+
},
|
|
700
|
+
time: {
|
|
701
|
+
type: Object,
|
|
702
|
+
default: () => ({})
|
|
703
|
+
},
|
|
704
|
+
period: {
|
|
705
|
+
type: Object,
|
|
706
|
+
required: true
|
|
707
|
+
},
|
|
708
|
+
isSmall: {
|
|
709
|
+
type: Boolean,
|
|
710
|
+
required: true
|
|
711
|
+
}
|
|
712
|
+
},
|
|
713
|
+
emits: ["changeMode", "updatedPeriod"],
|
|
714
|
+
setup(__props, { emit: __emit }) {
|
|
715
|
+
const props2 = __props;
|
|
716
|
+
const emit2 = __emit;
|
|
717
|
+
const periodSelect = ref();
|
|
718
|
+
const currentPeriod = ref(props2.period);
|
|
719
|
+
const modeOptions = ref(["month", "week", "day", "agenda"]);
|
|
720
|
+
const icons = {
|
|
721
|
+
chevronLeft: "chevron_left",
|
|
722
|
+
chevronRight: "chevron_right"
|
|
723
|
+
};
|
|
724
|
+
const periodName = computed(() => {
|
|
725
|
+
if (props2.mode === "week") {
|
|
726
|
+
const startMonth = props2.time.getLocalizedNameOfMonth(
|
|
727
|
+
currentPeriod.value.start,
|
|
728
|
+
"short"
|
|
729
|
+
);
|
|
730
|
+
const endMonth = props2.time.getLocalizedNameOfMonth(
|
|
731
|
+
currentPeriod.value.end,
|
|
732
|
+
"short"
|
|
733
|
+
);
|
|
734
|
+
return startMonth === endMonth ? startMonth : `${startMonth} - ${endMonth}`;
|
|
735
|
+
}
|
|
736
|
+
return `${props2.time.getLocalizedNameOfMonth(
|
|
737
|
+
currentPeriod.value.selectedDate,
|
|
738
|
+
"short"
|
|
739
|
+
)} ${currentPeriod.value.selectedDate.getFullYear()}`;
|
|
740
|
+
});
|
|
741
|
+
const modeLocal = ref(props2.mode);
|
|
742
|
+
const onlyDayModeIsEnabled = computed(() => {
|
|
743
|
+
var _a2, _b;
|
|
744
|
+
const weekIsDisabled = (_a2 = props2.config.disableModes) == null ? void 0 : _a2.includes("week");
|
|
745
|
+
const monthIsDisabled = (_b = props2.config.disableModes) == null ? void 0 : _b.includes("month");
|
|
746
|
+
return props2.config.disableModes && weekIsDisabled && monthIsDisabled;
|
|
747
|
+
});
|
|
748
|
+
watch(() => props2.isSmall, (value) => {
|
|
749
|
+
if (value) modeOptions.value = ["month", "day"];
|
|
750
|
+
else modeOptions.value = ["month", "week", "day", "agenda"];
|
|
751
|
+
}, { immediate: true });
|
|
752
|
+
function dateToPeriod(selectedDate) {
|
|
753
|
+
const period = {
|
|
754
|
+
start: /* @__PURE__ */ new Date(),
|
|
755
|
+
end: /* @__PURE__ */ new Date(),
|
|
756
|
+
selectedDate
|
|
757
|
+
};
|
|
758
|
+
if (props2.mode === "week") {
|
|
759
|
+
period.start = props2.time.getCalendarWeekDateObjects(selectedDate)[0];
|
|
760
|
+
period.end = props2.time.getCalendarWeekDateObjects(selectedDate)[6];
|
|
761
|
+
} else if (props2.mode === "month") {
|
|
762
|
+
period.start = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
|
|
763
|
+
period.end = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0);
|
|
764
|
+
} else {
|
|
765
|
+
period.start = selectedDate;
|
|
766
|
+
period.end = selectedDate;
|
|
767
|
+
}
|
|
768
|
+
return period;
|
|
769
|
+
}
|
|
770
|
+
function handlePeriodChange() {
|
|
771
|
+
if (!currentPeriod.value) return;
|
|
772
|
+
currentPeriod.value = dateToPeriod(currentPeriod.value.selectedDate);
|
|
773
|
+
emit2("updatedPeriod", currentPeriod.value);
|
|
774
|
+
}
|
|
775
|
+
function goToPeriod(direction) {
|
|
776
|
+
const date2 = currentPeriod.value.selectedDate;
|
|
777
|
+
if (props2.mode === "month") {
|
|
778
|
+
date2.setMonth(direction === "previous" ? date2.getMonth() - 1 : date2.getMonth() + 1);
|
|
779
|
+
} else if (props2.mode === "week") {
|
|
780
|
+
date2.setDate(direction === "previous" ? date2.getDate() - 7 : date2.getDate() + 7);
|
|
781
|
+
} else {
|
|
782
|
+
date2.setDate(direction === "previous" ? date2.getDate() - 1 : date2.getDate() + 1);
|
|
783
|
+
}
|
|
784
|
+
currentPeriod.value = dateToPeriod(date2);
|
|
785
|
+
emit2("updatedPeriod", currentPeriod.value);
|
|
786
|
+
}
|
|
787
|
+
return (_ctx, _cache) => {
|
|
788
|
+
return openBlock(), createElementBlock("div", _hoisted_1$12, [
|
|
789
|
+
periodName.value ? (openBlock(), createElementBlock("div", _hoisted_2$N, toDisplayString(periodName.value), 1)) : createCommentVNode("", true),
|
|
790
|
+
createElementVNode("div", _hoisted_3$D, [
|
|
791
|
+
createElementVNode("div", _hoisted_4$q, [
|
|
792
|
+
createVNode(unref(_sfc_main$q), {
|
|
793
|
+
class: "calendar-header__chevron-arrow calendar-header__chevron-arrow-left",
|
|
794
|
+
icon: icons.chevronLeft,
|
|
795
|
+
onClick: _cache[0] || (_cache[0] = ($event) => goToPeriod("previous"))
|
|
796
|
+
}, null, 8, ["icon"]),
|
|
797
|
+
createVNode(unref(_sfc_main$q), {
|
|
798
|
+
class: "calendar-header__chevron-arrow calendar-header__chevron-arrow-right",
|
|
799
|
+
icon: icons.chevronRight,
|
|
800
|
+
onClick: _cache[1] || (_cache[1] = ($event) => goToPeriod("next"))
|
|
801
|
+
}, null, 8, ["icon"])
|
|
802
|
+
]),
|
|
803
|
+
createVNode(unref(DatePick), {
|
|
804
|
+
ref_key: "periodSelect",
|
|
805
|
+
ref: periodSelect,
|
|
806
|
+
modelValue: currentPeriod.value.selectedDate,
|
|
807
|
+
"onUpdate:modelValue": [
|
|
808
|
+
_cache[2] || (_cache[2] = ($event) => currentPeriod.value.selectedDate = $event),
|
|
809
|
+
handlePeriodChange
|
|
810
|
+
],
|
|
811
|
+
mode: __props.mode
|
|
812
|
+
}, null, 8, ["modelValue", "mode"]),
|
|
813
|
+
!onlyDayModeIsEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_5$o, [
|
|
814
|
+
createVNode(unref(TabsNav), {
|
|
815
|
+
modelValue: modeLocal.value,
|
|
816
|
+
"onUpdate:modelValue": [
|
|
817
|
+
_cache[3] || (_cache[3] = ($event) => modeLocal.value = $event),
|
|
818
|
+
_cache[4] || (_cache[4] = ($event) => emit2("changeMode", $event))
|
|
819
|
+
],
|
|
820
|
+
tabs: modeOptions.value,
|
|
821
|
+
group: "mode"
|
|
822
|
+
}, null, 8, ["modelValue", "tabs"])
|
|
823
|
+
])) : createCommentVNode("", true)
|
|
824
|
+
])
|
|
825
|
+
]);
|
|
826
|
+
};
|
|
827
|
+
}
|
|
828
|
+
});
|
|
829
|
+
const AppHeader = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__scopeId", "data-v-34cb97da"]]);
|
|
830
|
+
class EDate extends Date {
|
|
831
|
+
get fullYear() {
|
|
832
|
+
return this.getFullYear();
|
|
833
|
+
}
|
|
834
|
+
get month() {
|
|
835
|
+
return this.getMonth();
|
|
836
|
+
}
|
|
837
|
+
get date() {
|
|
838
|
+
return this.getDate();
|
|
839
|
+
}
|
|
840
|
+
}
|
|
841
|
+
var DAY_TIME_POINT = /* @__PURE__ */ ((DAY_TIME_POINT2) => {
|
|
842
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["MIDNIGHT"] = 0] = "MIDNIGHT";
|
|
843
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["ONE_AM"] = 100] = "ONE_AM";
|
|
844
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["TWO_AM"] = 200] = "TWO_AM";
|
|
845
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["THREE_AM"] = 300] = "THREE_AM";
|
|
846
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["FOUR_AM"] = 400] = "FOUR_AM";
|
|
847
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["FIVE_AM"] = 500] = "FIVE_AM";
|
|
848
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["SIX_AM"] = 600] = "SIX_AM";
|
|
849
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["SEVEN_AM"] = 700] = "SEVEN_AM";
|
|
850
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["EIGHT_AM"] = 800] = "EIGHT_AM";
|
|
851
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["NINE_AM"] = 900] = "NINE_AM";
|
|
852
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["TEN_AM"] = 1e3] = "TEN_AM";
|
|
853
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["ELEVEN_AM"] = 1100] = "ELEVEN_AM";
|
|
854
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["TWELVE_PM"] = 1200] = "TWELVE_PM";
|
|
855
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["ONE_PM"] = 1300] = "ONE_PM";
|
|
856
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["TWO_PM"] = 1400] = "TWO_PM";
|
|
857
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["THREE_PM"] = 1500] = "THREE_PM";
|
|
858
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["FOUR_PM"] = 1600] = "FOUR_PM";
|
|
859
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["FIVE_PM"] = 1700] = "FIVE_PM";
|
|
860
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["SIX_PM"] = 1800] = "SIX_PM";
|
|
861
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["SEVEN_PM"] = 1900] = "SEVEN_PM";
|
|
862
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["EIGHT_PM"] = 2e3] = "EIGHT_PM";
|
|
863
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["NINE_PM"] = 2100] = "NINE_PM";
|
|
864
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["TEN_PM"] = 2200] = "TEN_PM";
|
|
865
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["ELEVEN_PM"] = 2300] = "ELEVEN_PM";
|
|
866
|
+
DAY_TIME_POINT2[DAY_TIME_POINT2["TWELVE_AM"] = 2400] = "TWELVE_AM";
|
|
867
|
+
return DAY_TIME_POINT2;
|
|
868
|
+
})(DAY_TIME_POINT || {});
|
|
869
|
+
var DAY_MODE = /* @__PURE__ */ ((DAY_MODE2) => {
|
|
870
|
+
DAY_MODE2["REGULAR"] = "regular";
|
|
871
|
+
DAY_MODE2["SHORTENED"] = "shortened";
|
|
872
|
+
DAY_MODE2["FLEXIBLE"] = "flexible";
|
|
873
|
+
return DAY_MODE2;
|
|
874
|
+
})(DAY_MODE || {});
|
|
875
|
+
const EVENT_COLORS = {
|
|
876
|
+
yellow: "rgb(244, 180, 0)",
|
|
877
|
+
blue: "rgb(38, 132, 255)",
|
|
878
|
+
green: "rgb(51, 182, 121)",
|
|
879
|
+
red: "rgb(255, 84, 86)",
|
|
880
|
+
pink: "rgb(239, 139, 239)",
|
|
881
|
+
purple: "rgb(157, 114, 245)",
|
|
882
|
+
turquoise: "rgb(64, 190, 190)",
|
|
883
|
+
brown: "rgb(169, 99, 30)"
|
|
884
|
+
};
|
|
885
|
+
const DATE_TIME_STRING_PATTERN = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/;
|
|
886
|
+
const DATE_TIME_STRING_FULL_DAY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
|
|
887
|
+
class Helpers {
|
|
888
|
+
/**
|
|
889
|
+
* If navigator.languages is present (correlating to the browser's Accept-Language header), then use it
|
|
890
|
+
* otherwise just use navigator.language
|
|
891
|
+
*/
|
|
892
|
+
static getBrowserNavigatorLocale() {
|
|
893
|
+
if (typeof navigator !== "object") return "en-US";
|
|
894
|
+
return navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
|
|
895
|
+
}
|
|
896
|
+
/**
|
|
897
|
+
* Solution from https://github.com/vuejs/core/issues/4733#issuecomment-1024816095
|
|
898
|
+
*/
|
|
899
|
+
static hasSlotContent(slot) {
|
|
900
|
+
if (!slot) return false;
|
|
901
|
+
return slot().some((vnode) => {
|
|
902
|
+
if (vnode.type === Comment) return false;
|
|
903
|
+
if (Array.isArray(vnode.children) && !vnode.children.length) return false;
|
|
904
|
+
return vnode.type !== Text || typeof vnode.children === "string" && vnode.children.trim() !== "";
|
|
905
|
+
});
|
|
906
|
+
}
|
|
907
|
+
static getEventType(event, time) {
|
|
908
|
+
const isTimedEvent = DATE_TIME_STRING_PATTERN.test(event.time.start) && DATE_TIME_STRING_PATTERN.test(event.time.end);
|
|
909
|
+
const isFullDayEvent = DATE_TIME_STRING_FULL_DAY_PATTERN.test(event.time.start) && DATE_TIME_STRING_FULL_DAY_PATTERN.test(event.time.end);
|
|
910
|
+
if (isTimedEvent) return this.getTimedEventType(event, time);
|
|
911
|
+
if (isFullDayEvent) return this.getFullDayEventType(event, time);
|
|
912
|
+
throw new Error("Event has invalid type");
|
|
913
|
+
}
|
|
914
|
+
static getTimedEventType(event, time) {
|
|
915
|
+
if (time.dateStringsHaveEqualDates(event.time.start, event.time.end)) {
|
|
916
|
+
return "SINGLE_DAY_TIMED";
|
|
917
|
+
}
|
|
918
|
+
if (time.dayMode === DAY_MODE.FLEXIBLE) {
|
|
919
|
+
const endBoundaryForSingleHybridDay = time.setHourInDateTimeString(
|
|
920
|
+
time.addDaysToDateTimeString(
|
|
921
|
+
1,
|
|
922
|
+
time.dateStringFrom(event.time.start)
|
|
923
|
+
),
|
|
924
|
+
Time.getHourFromTimePoints(time.DAY_END)
|
|
925
|
+
);
|
|
926
|
+
if (event.time.end < endBoundaryForSingleHybridDay) {
|
|
927
|
+
return "SINGLE_HYBRID_DAY_TIMED";
|
|
928
|
+
}
|
|
929
|
+
}
|
|
930
|
+
return "MULTI_DAY_TIMED";
|
|
931
|
+
}
|
|
932
|
+
static getFullDayEventType(event, time) {
|
|
933
|
+
if (time.dateStringsHaveEqualDates(event.time.start, event.time.end)) {
|
|
934
|
+
return "SINGLE_DAY_FULL_DAY";
|
|
935
|
+
}
|
|
936
|
+
return "MULTI_DAY_FULL_DAY";
|
|
937
|
+
}
|
|
938
|
+
static isUIEventTouchEvent(event) {
|
|
939
|
+
return "touches" in event && typeof event.touches === "object";
|
|
940
|
+
}
|
|
941
|
+
}
|
|
942
|
+
var WEEK_START_DAY = /* @__PURE__ */ ((WEEK_START_DAY2) => {
|
|
943
|
+
WEEK_START_DAY2["SUNDAY"] = "sunday";
|
|
944
|
+
WEEK_START_DAY2["MONDAY"] = "monday";
|
|
945
|
+
return WEEK_START_DAY2;
|
|
946
|
+
})(WEEK_START_DAY || {});
|
|
947
|
+
class Time {
|
|
948
|
+
constructor(firstDayOfWeek = "monday", locale2 = null, dayBoundaries = { start: 0, end: 2400 }) {
|
|
949
|
+
__publicField(this, "FIRST_DAY_OF_WEEK");
|
|
950
|
+
__publicField(this, "CALENDAR_LOCALE");
|
|
951
|
+
__publicField(this, "ALL_HOURS", [
|
|
952
|
+
0,
|
|
953
|
+
100,
|
|
954
|
+
200,
|
|
955
|
+
300,
|
|
956
|
+
400,
|
|
957
|
+
500,
|
|
958
|
+
600,
|
|
959
|
+
700,
|
|
960
|
+
800,
|
|
961
|
+
900,
|
|
962
|
+
1e3,
|
|
963
|
+
1100,
|
|
964
|
+
1200,
|
|
965
|
+
1300,
|
|
966
|
+
1400,
|
|
967
|
+
1500,
|
|
968
|
+
1600,
|
|
969
|
+
1700,
|
|
970
|
+
1800,
|
|
971
|
+
1900,
|
|
972
|
+
2e3,
|
|
973
|
+
2100,
|
|
974
|
+
2200,
|
|
975
|
+
2300
|
|
976
|
+
]);
|
|
977
|
+
__publicField(this, "DAY_START");
|
|
978
|
+
__publicField(this, "DAY_END");
|
|
979
|
+
__publicField(this, "HOURS_PER_DAY", 24);
|
|
980
|
+
__publicField(this, "MS_PER_DAY");
|
|
981
|
+
this.FIRST_DAY_OF_WEEK = firstDayOfWeek;
|
|
982
|
+
this.CALENDAR_LOCALE = locale2 || Helpers.getBrowserNavigatorLocale();
|
|
983
|
+
this.DAY_START = dayBoundaries.start;
|
|
984
|
+
this.DAY_END = dayBoundaries.end;
|
|
985
|
+
this.HOURS_PER_DAY = (() => {
|
|
986
|
+
const dayEnd = Time.getHourFromTimePoints(this.DAY_END);
|
|
987
|
+
const dayStart = Time.getHourFromTimePoints(this.DAY_START);
|
|
988
|
+
if (dayEnd > dayStart) return dayEnd - dayStart;
|
|
989
|
+
return this.HOURS_PER_DAY - dayStart + dayEnd;
|
|
990
|
+
})();
|
|
991
|
+
this.MS_PER_DAY = 864e5;
|
|
992
|
+
}
|
|
993
|
+
get dayMode() {
|
|
994
|
+
if (this.DAY_START === 0 && this.DAY_END === 2400) return DAY_MODE.REGULAR;
|
|
995
|
+
if (this.DAY_START >= this.DAY_END) return DAY_MODE.FLEXIBLE;
|
|
996
|
+
return DAY_MODE.SHORTENED;
|
|
997
|
+
}
|
|
998
|
+
getDatesBetweenTwoDates(start, end) {
|
|
999
|
+
let arr = [];
|
|
1000
|
+
let dt2 = new Date(start);
|
|
1001
|
+
while (dt2 <= end) {
|
|
1002
|
+
arr.push(new Date(dt2.getFullYear(), dt2.getMonth(), dt2.getDate()));
|
|
1003
|
+
dt2.setDate(dt2.getDate() + 1);
|
|
1004
|
+
}
|
|
1005
|
+
return arr;
|
|
1006
|
+
}
|
|
1007
|
+
getCalendarWeekDateObjects(date2) {
|
|
1008
|
+
let subtractedDaysToGetFirstDate;
|
|
1009
|
+
if (this.FIRST_DAY_OF_WEEK === "sunday") {
|
|
1010
|
+
subtractedDaysToGetFirstDate = date2.getDay();
|
|
1011
|
+
} else {
|
|
1012
|
+
subtractedDaysToGetFirstDate = date2.getDay() === 0 ? 6 : date2.getDay() - 1;
|
|
1013
|
+
}
|
|
1014
|
+
const dateOfFirstDayOfWeek = date2.getDate() - subtractedDaysToGetFirstDate;
|
|
1015
|
+
const firstDay = new Date(
|
|
1016
|
+
date2.getFullYear(),
|
|
1017
|
+
date2.getMonth(),
|
|
1018
|
+
dateOfFirstDayOfWeek
|
|
1019
|
+
);
|
|
1020
|
+
return this.getDatesBetweenTwoDates(
|
|
1021
|
+
firstDay,
|
|
1022
|
+
new Date(
|
|
1023
|
+
firstDay.getFullYear(),
|
|
1024
|
+
firstDay.getMonth(),
|
|
1025
|
+
firstDay.getDate() + 6
|
|
1026
|
+
)
|
|
1027
|
+
);
|
|
1028
|
+
}
|
|
1029
|
+
/**
|
|
1030
|
+
* Returns an array of the weeks that comprise a month
|
|
1031
|
+
*
|
|
1032
|
+
* @param {number} yyyy
|
|
1033
|
+
* @param {number} mm - zero indexed (January === 0)
|
|
1034
|
+
*/
|
|
1035
|
+
getCalendarMonthSplitInWeeks(yyyy, mm) {
|
|
1036
|
+
const month = [];
|
|
1037
|
+
const selectedDate = new Date(yyyy, mm, 1);
|
|
1038
|
+
const firstDateOfMonth = new Date(
|
|
1039
|
+
selectedDate.getFullYear(),
|
|
1040
|
+
selectedDate.getMonth(),
|
|
1041
|
+
1
|
|
1042
|
+
);
|
|
1043
|
+
const firstWeekOfMonth = this.getCalendarWeekDateObjects(firstDateOfMonth);
|
|
1044
|
+
month.push(firstWeekOfMonth);
|
|
1045
|
+
let isInMonth = true;
|
|
1046
|
+
let mondayOfWeekToPush = firstWeekOfMonth[0];
|
|
1047
|
+
const specifiedMonth = selectedDate.getMonth();
|
|
1048
|
+
while (isInMonth) {
|
|
1049
|
+
const newMonday = new Date(
|
|
1050
|
+
mondayOfWeekToPush.getFullYear(),
|
|
1051
|
+
mondayOfWeekToPush.getMonth(),
|
|
1052
|
+
mondayOfWeekToPush.getDate() + 7
|
|
1053
|
+
);
|
|
1054
|
+
if (newMonday.getMonth() === specifiedMonth) {
|
|
1055
|
+
month.push(this.getCalendarWeekDateObjects(newMonday));
|
|
1056
|
+
mondayOfWeekToPush = newMonday;
|
|
1057
|
+
} else {
|
|
1058
|
+
isInMonth = false;
|
|
1059
|
+
}
|
|
1060
|
+
}
|
|
1061
|
+
return month;
|
|
1062
|
+
}
|
|
1063
|
+
/**
|
|
1064
|
+
* Returns an array with the length of 12 dates,
|
|
1065
|
+
* one date for the first day of each month of the year
|
|
1066
|
+
*/
|
|
1067
|
+
getCalendarYearMonths(year) {
|
|
1068
|
+
const yearList = [];
|
|
1069
|
+
let month = 0;
|
|
1070
|
+
while (month <= 11) {
|
|
1071
|
+
yearList.push(new Date(year, month, 1));
|
|
1072
|
+
month++;
|
|
1073
|
+
}
|
|
1074
|
+
return yearList;
|
|
1075
|
+
}
|
|
1076
|
+
getHourAndMinutesFromTimePoints(timePoints) {
|
|
1077
|
+
const time = timePoints.toString();
|
|
1078
|
+
let hour = "0";
|
|
1079
|
+
let minutes = "0";
|
|
1080
|
+
if (time.length === 4) {
|
|
1081
|
+
hour = time[0] + time[1];
|
|
1082
|
+
minutes = time[2] + time[3];
|
|
1083
|
+
} else if (time.length === 3) {
|
|
1084
|
+
hour = time[0];
|
|
1085
|
+
minutes = time[1] + time[2];
|
|
1086
|
+
}
|
|
1087
|
+
return {
|
|
1088
|
+
hour: +hour,
|
|
1089
|
+
minutes: +minutes
|
|
1090
|
+
};
|
|
1091
|
+
}
|
|
1092
|
+
/**
|
|
1093
|
+
* Given timePoints (0, 100, 200 etc.), this function returns
|
|
1094
|
+
* a localized string with the respective hour
|
|
1095
|
+
* (in en-US for example: 0 => 12 AM, 1600 => 4 PM )
|
|
1096
|
+
*/
|
|
1097
|
+
getHourLocaleStringFromHourDigits(timePoints) {
|
|
1098
|
+
const { hour, minutes } = this.getHourAndMinutesFromTimePoints(timePoints);
|
|
1099
|
+
const hourLocaleString = new Date(
|
|
1100
|
+
2100,
|
|
1101
|
+
0,
|
|
1102
|
+
1,
|
|
1103
|
+
+hour,
|
|
1104
|
+
+minutes,
|
|
1105
|
+
0
|
|
1106
|
+
).toLocaleTimeString(this.CALENDAR_LOCALE, {
|
|
1107
|
+
hour: "2-digit"
|
|
1108
|
+
});
|
|
1109
|
+
if (hourLocaleString[0] === "0") return hourLocaleString.substring(1);
|
|
1110
|
+
return hourLocaleString;
|
|
1111
|
+
}
|
|
1112
|
+
getLocalizedNameOfWeekday(date2, weekdayNameLength = "short") {
|
|
1113
|
+
return date2.toLocaleDateString(this.CALENDAR_LOCALE, {
|
|
1114
|
+
weekday: weekdayNameLength
|
|
1115
|
+
});
|
|
1116
|
+
}
|
|
1117
|
+
getLocalizedNameOfMonth(date2, monthNameLength = "short") {
|
|
1118
|
+
return date2.toLocaleDateString(this.CALENDAR_LOCALE, {
|
|
1119
|
+
month: monthNameLength
|
|
1120
|
+
});
|
|
1121
|
+
}
|
|
1122
|
+
getLocalizedDateString(date2) {
|
|
1123
|
+
return date2.toLocaleDateString(this.CALENDAR_LOCALE);
|
|
1124
|
+
}
|
|
1125
|
+
/**
|
|
1126
|
+
* Takes a date object, and creates a time string from it, in the format of
|
|
1127
|
+
* YYYY-MM-DD hh:mm
|
|
1128
|
+
*/
|
|
1129
|
+
getDateTimeStringFromDate(date2, timeIsStartOrEndOfDay) {
|
|
1130
|
+
const y2 = date2.getFullYear();
|
|
1131
|
+
const m2 = date2.getMonth() + 1;
|
|
1132
|
+
const d2 = date2.getDate();
|
|
1133
|
+
const fullDate = `${y2}-${m2 >= 10 ? m2 : `0${m2}`}-${d2 >= 10 ? d2 : `0${d2}`}`;
|
|
1134
|
+
if (!timeIsStartOrEndOfDay) {
|
|
1135
|
+
const hour = date2.getHours();
|
|
1136
|
+
const minutes = date2.getMinutes();
|
|
1137
|
+
return `${fullDate} ${hour >= 10 ? hour : `0${hour}`}:${minutes >= 10 ? minutes : `0${minutes}`}`;
|
|
1138
|
+
}
|
|
1139
|
+
const fullTime = timeIsStartOrEndOfDay === "start" ? "00:00" : "23:59";
|
|
1140
|
+
return `${fullDate} ${fullTime}`;
|
|
1141
|
+
}
|
|
1142
|
+
getLocalizedTime(dateTimeString) {
|
|
1143
|
+
const {
|
|
1144
|
+
year,
|
|
1145
|
+
month,
|
|
1146
|
+
date: date2,
|
|
1147
|
+
hour,
|
|
1148
|
+
minutes
|
|
1149
|
+
} = this.getAllVariablesFromDateTimeString(dateTimeString);
|
|
1150
|
+
const d2 = new Date(year, month, date2, hour, minutes);
|
|
1151
|
+
return d2.toLocaleTimeString(this.CALENDAR_LOCALE, {
|
|
1152
|
+
hour: "numeric",
|
|
1153
|
+
minute: "numeric"
|
|
1154
|
+
});
|
|
1155
|
+
}
|
|
1156
|
+
getLocalizedHour(date2) {
|
|
1157
|
+
return date2.toLocaleTimeString(this.CALENDAR_LOCALE, { hour: "2-digit" });
|
|
1158
|
+
}
|
|
1159
|
+
getLocalizedTimeRange(start, end) {
|
|
1160
|
+
return `${this.getLocalizedTime(start)} - ${this.getLocalizedTime(end)}`;
|
|
1161
|
+
}
|
|
1162
|
+
/**
|
|
1163
|
+
* Returns numeric values for year, month, date, hour and minutes, given a dateTimeString
|
|
1164
|
+
* All variables are Date-Object compatible, meaning "month" is zero-indexed
|
|
1165
|
+
*/
|
|
1166
|
+
getAllVariablesFromDateTimeString(dateTimeString) {
|
|
1167
|
+
return {
|
|
1168
|
+
year: +dateTimeString.substring(0, 4),
|
|
1169
|
+
month: +dateTimeString.substring(5, 7) - 1,
|
|
1170
|
+
date: +dateTimeString.substring(8, 10),
|
|
1171
|
+
hour: this.hourFrom(dateTimeString),
|
|
1172
|
+
minutes: this.minutesFrom(dateTimeString)
|
|
1173
|
+
};
|
|
1174
|
+
}
|
|
1175
|
+
dateIsToday(date2) {
|
|
1176
|
+
const {
|
|
1177
|
+
fullYear: yearToday,
|
|
1178
|
+
month: monthToday,
|
|
1179
|
+
date: dateToday
|
|
1180
|
+
} = new EDate();
|
|
1181
|
+
const {
|
|
1182
|
+
fullYear: dateYear,
|
|
1183
|
+
month: dateMonth,
|
|
1184
|
+
date: dateDate
|
|
1185
|
+
} = new EDate(date2);
|
|
1186
|
+
return yearToday === dateYear && monthToday === dateMonth && dateToday === dateDate;
|
|
1187
|
+
}
|
|
1188
|
+
dateIsInWeek(dateToCheck, week) {
|
|
1189
|
+
const { date: date2, month, fullYear } = new EDate(dateToCheck);
|
|
1190
|
+
for (const weekDay of week) {
|
|
1191
|
+
const dateIsSame = date2 === weekDay.getDate();
|
|
1192
|
+
const monthIsSame = month === weekDay.getMonth();
|
|
1193
|
+
const yearIsSame = fullYear === weekDay.getFullYear();
|
|
1194
|
+
if (dateIsSame && monthIsSame && yearIsSame) return true;
|
|
1195
|
+
}
|
|
1196
|
+
return false;
|
|
1197
|
+
}
|
|
1198
|
+
getDateStringFromDate(date2) {
|
|
1199
|
+
const yyyy = date2.getFullYear();
|
|
1200
|
+
const mm = date2.getMonth() + 1;
|
|
1201
|
+
const dd = date2.getDate();
|
|
1202
|
+
return `${yyyy}-${mm >= 10 ? mm : `0${mm}`}-${dd >= 10 ? dd : `0${dd}`}`;
|
|
1203
|
+
}
|
|
1204
|
+
addMinutesToDateTimeString(minutes, dateTimeString) {
|
|
1205
|
+
const {
|
|
1206
|
+
year: oldYear,
|
|
1207
|
+
month: oldMonth,
|
|
1208
|
+
date: oldDate,
|
|
1209
|
+
hour: oldHour,
|
|
1210
|
+
minutes: oldMinutes
|
|
1211
|
+
} = this.getAllVariablesFromDateTimeString(dateTimeString);
|
|
1212
|
+
const oldDateObject = new Date(oldYear, oldMonth, oldDate, oldHour, oldMinutes);
|
|
1213
|
+
const newDateObject = new Date(oldDateObject.getTime() + minutes * 6e4);
|
|
1214
|
+
return this.getDateTimeStringFromDate(newDateObject);
|
|
1215
|
+
}
|
|
1216
|
+
addDaysToDateTimeString(days, dateTimeString) {
|
|
1217
|
+
return this.addMinutesToDateTimeString(days * 1440, dateTimeString);
|
|
1218
|
+
}
|
|
1219
|
+
dateStringsHaveEqualDates(dateTimeString1, dateTimeString2) {
|
|
1220
|
+
const { year: year1, month: month1, date: date1 } = this.getAllVariablesFromDateTimeString(dateTimeString1);
|
|
1221
|
+
const { year: year2, month: month2, date: date2 } = this.getAllVariablesFromDateTimeString(dateTimeString2);
|
|
1222
|
+
return year1 === year2 && month1 === month2 && date1 === date2;
|
|
1223
|
+
}
|
|
1224
|
+
setDateToEndOfDay(date2) {
|
|
1225
|
+
return new Date(
|
|
1226
|
+
date2.getFullYear(),
|
|
1227
|
+
date2.getMonth(),
|
|
1228
|
+
date2.getDate(),
|
|
1229
|
+
23,
|
|
1230
|
+
59,
|
|
1231
|
+
59,
|
|
1232
|
+
999
|
|
1233
|
+
);
|
|
1234
|
+
}
|
|
1235
|
+
turnMinutesIntoPercentageOfHour(minutes) {
|
|
1236
|
+
const oneMinutePercentage = 100 / 60;
|
|
1237
|
+
const minutePoints = oneMinutePercentage * minutes;
|
|
1238
|
+
if (minutePoints < 10) return `0${minutePoints}`;
|
|
1239
|
+
return minutePoints.toString();
|
|
1240
|
+
}
|
|
1241
|
+
/**
|
|
1242
|
+
* Every hour between 'dayStart' and 'dayEnd' is 100, in this function referred to as 100 points
|
|
1243
|
+
* If an event starts 30 minutes after 'dayStart', it should have 50 pointsIntoDay
|
|
1244
|
+
* If a day consists of 4 hours (400 points), we then have to count
|
|
1245
|
+
* (50 / 400) * 100 = 12.5 => event starts after 12.5 percent of the day
|
|
1246
|
+
*
|
|
1247
|
+
* Result is supposed to be a number between 0 and 100, and is used for setting the CSS- top- and height-attributes for events
|
|
1248
|
+
*/
|
|
1249
|
+
getPercentageOfDayFromDateTimeString(dateTimeString, dayStart, dayEnd) {
|
|
1250
|
+
const hour = this.hourFrom(dateTimeString);
|
|
1251
|
+
const hourPoints = hour * 100;
|
|
1252
|
+
const minutes = +dateTimeString.substring(14, 16);
|
|
1253
|
+
const minutesPoints = +this.turnMinutesIntoPercentageOfHour(+minutes);
|
|
1254
|
+
if (dayEnd > dayStart) {
|
|
1255
|
+
const pointsInDay2 = dayEnd - dayStart;
|
|
1256
|
+
const eventPoints2 = hourPoints + minutesPoints;
|
|
1257
|
+
const eventPointsIntoDay = eventPoints2 - dayStart;
|
|
1258
|
+
return eventPointsIntoDay / pointsInDay2 * 100;
|
|
1259
|
+
}
|
|
1260
|
+
const hourPointsInOriginalDay = DAY_TIME_POINT.TWELVE_AM - dayStart;
|
|
1261
|
+
const pointsInDay = hourPointsInOriginalDay + dayEnd;
|
|
1262
|
+
const eventPoints = hourPoints + minutesPoints;
|
|
1263
|
+
const pointsIntoDay = eventPoints >= dayStart ? eventPoints - dayStart : hourPointsInOriginalDay + eventPoints;
|
|
1264
|
+
return pointsIntoDay / pointsInDay * 100;
|
|
1265
|
+
}
|
|
1266
|
+
getTimeFromClick(clickOffsetY, weekHeight) {
|
|
1267
|
+
if (weekHeight <= 0) throw new Error("weekHeight cannot be a negative number");
|
|
1268
|
+
if (clickOffsetY < 0) throw new Error("clickOffsetY cannot be a negative number");
|
|
1269
|
+
const dayStartHour = this.DAY_START / 100;
|
|
1270
|
+
const hourHeight = weekHeight / this.HOURS_PER_DAY;
|
|
1271
|
+
const minutes = Math.floor(clickOffsetY % hourHeight / (hourHeight / 60));
|
|
1272
|
+
if (this.DAY_END <= this.DAY_START) {
|
|
1273
|
+
const dayEndHour = this.DAY_END / 100;
|
|
1274
|
+
const nightHeight = dayEndHour * hourHeight;
|
|
1275
|
+
const nightOffset = weekHeight - nightHeight;
|
|
1276
|
+
if (clickOffsetY > nightOffset) {
|
|
1277
|
+
const hour2 = Math.floor((clickOffsetY - nightOffset) / hourHeight);
|
|
1278
|
+
return `${this.doubleDigit(hour2)}:${this.doubleDigit(minutes)}`;
|
|
1279
|
+
}
|
|
1280
|
+
}
|
|
1281
|
+
const hour = Math.floor(clickOffsetY / hourHeight) + dayStartHour;
|
|
1282
|
+
return `${this.doubleDigit(hour)}:${this.doubleDigit(minutes)}`;
|
|
1283
|
+
}
|
|
1284
|
+
setSegmentOfDateTimeString(dateTimeString, segments) {
|
|
1285
|
+
if (segments.hour < 0 || segments.hour > 23) throw new Error("Invalid hour");
|
|
1286
|
+
const newHour = this.doubleDigit(segments.hour);
|
|
1287
|
+
dateTimeString = dateTimeString.replace(/\d{2}:/, `${newHour}:`);
|
|
1288
|
+
return dateTimeString;
|
|
1289
|
+
}
|
|
1290
|
+
isTrailingOrLeadingDate(date2, month) {
|
|
1291
|
+
const { month: dateMonth } = new EDate(date2);
|
|
1292
|
+
return month !== dateMonth;
|
|
1293
|
+
}
|
|
1294
|
+
static getTimePointsFromHour(boundary) {
|
|
1295
|
+
if (boundary < 0 || boundary > 24 || boundary % 1 !== 0) {
|
|
1296
|
+
throw new Error("Invalid day boundary");
|
|
1297
|
+
}
|
|
1298
|
+
if (boundary === 0) return boundary;
|
|
1299
|
+
return boundary * 100;
|
|
1300
|
+
}
|
|
1301
|
+
static getHourFromTimePoints(timePoints) {
|
|
1302
|
+
if (timePoints < 0 || timePoints > 2400 || timePoints % 100 !== 0) {
|
|
1303
|
+
throw new Error("Invalid time points");
|
|
1304
|
+
}
|
|
1305
|
+
if (timePoints === 0) return timePoints;
|
|
1306
|
+
return timePoints / 100;
|
|
1307
|
+
}
|
|
1308
|
+
getTimelineHours() {
|
|
1309
|
+
if (this.dayMode !== DAY_MODE.FLEXIBLE) {
|
|
1310
|
+
return this.ALL_HOURS.filter((hour) => {
|
|
1311
|
+
return hour >= this.DAY_START && hour < this.DAY_END;
|
|
1312
|
+
});
|
|
1313
|
+
}
|
|
1314
|
+
return [
|
|
1315
|
+
...this.ALL_HOURS.filter((hour) => hour >= this.DAY_START),
|
|
1316
|
+
...this.ALL_HOURS.filter((hour) => hour < this.DAY_END)
|
|
1317
|
+
];
|
|
1318
|
+
}
|
|
1319
|
+
dateStringFrom(dateTimeString) {
|
|
1320
|
+
return dateTimeString.substring(0, 10);
|
|
1321
|
+
}
|
|
1322
|
+
timeStringFrom(dateTimeString) {
|
|
1323
|
+
return dateTimeString.substring(11, 16);
|
|
1324
|
+
}
|
|
1325
|
+
hourFrom(dateTimeString) {
|
|
1326
|
+
return +dateTimeString.substring(11, 13);
|
|
1327
|
+
}
|
|
1328
|
+
minutesFrom(dateTimeString) {
|
|
1329
|
+
return +dateTimeString.substring(14, 16);
|
|
1330
|
+
}
|
|
1331
|
+
areDaysConsecutive(dayOne, dayTwo) {
|
|
1332
|
+
const dayOnePlusOneDay = this.dateStringFrom(this.addDaysToDateTimeString(1, dayOne));
|
|
1333
|
+
return dayOnePlusOneDay === this.dateStringFrom(dayTwo);
|
|
1334
|
+
}
|
|
1335
|
+
setHourInDateTimeString(dateTimeString, hour) {
|
|
1336
|
+
const hourString = this.doubleDigit(hour);
|
|
1337
|
+
dateTimeString = dateTimeString.replace(/\d{2}:/, `${hourString}:`);
|
|
1338
|
+
return dateTimeString;
|
|
1339
|
+
}
|
|
1340
|
+
setMinutesInDateTimeString(dateTimeString, minutes) {
|
|
1341
|
+
const minutesString = this.doubleDigit(minutes);
|
|
1342
|
+
dateTimeString = dateTimeString.replace(/:\d{2}/, `:${minutesString}`);
|
|
1343
|
+
return dateTimeString;
|
|
1344
|
+
}
|
|
1345
|
+
getDateTimeStringDayBoundariesFrom(dateString) {
|
|
1346
|
+
if (this.DAY_END <= this.DAY_START) {
|
|
1347
|
+
const nextDay = this.addDaysToDateTimeString(1, dateString);
|
|
1348
|
+
const endOfDay2 = this.setHourInDateTimeString(nextDay, this.getHourAndMinutesFromTimePoints(this.DAY_END).hour);
|
|
1349
|
+
const startOfDay22 = this.setHourInDateTimeString(dateString, this.getHourAndMinutesFromTimePoints(this.DAY_START).hour);
|
|
1350
|
+
return { start: startOfDay22, end: endOfDay2 };
|
|
1351
|
+
}
|
|
1352
|
+
const startOfDay2 = this.setHourInDateTimeString(dateString, this.getHourAndMinutesFromTimePoints(this.DAY_START).hour);
|
|
1353
|
+
let endOfDay;
|
|
1354
|
+
if (this.DAY_END === DAY_TIME_POINT.TWELVE_AM) {
|
|
1355
|
+
endOfDay = this.setHourInDateTimeString(dateString, 23);
|
|
1356
|
+
endOfDay = this.setMinutesInDateTimeString(endOfDay, 59);
|
|
1357
|
+
} else {
|
|
1358
|
+
endOfDay = this.setHourInDateTimeString(dateString, this.getHourAndMinutesFromTimePoints(this.DAY_END).hour);
|
|
1359
|
+
}
|
|
1360
|
+
return { start: startOfDay2, end: endOfDay };
|
|
1361
|
+
}
|
|
1362
|
+
doubleDigit(number2) {
|
|
1363
|
+
if (number2 < 0 || number2 > 60) throw new Error("Invalid number. This is not a valid hour or minute");
|
|
1364
|
+
return number2 < 10 ? `0${number2}` : String(number2);
|
|
1365
|
+
}
|
|
1366
|
+
}
|
|
1367
|
+
class EventPosition extends Time {
|
|
1368
|
+
/**
|
|
1369
|
+
* Yields a full calendar week, with all full-day events positioned in it
|
|
1370
|
+
*/
|
|
1371
|
+
positionFullDayEventsInWeek(weekStart, weekEnd, events) {
|
|
1372
|
+
const eventsWithJSDates = events.map((scheduleEvent) => {
|
|
1373
|
+
const { year: startYear, month: startMonth, date: startDate } = this.getAllVariablesFromDateTimeString(scheduleEvent.time.start);
|
|
1374
|
+
const { year: endYear, month: endMonth, date: endDate } = this.getAllVariablesFromDateTimeString(scheduleEvent.time.end);
|
|
1375
|
+
scheduleEvent.timeJS = {
|
|
1376
|
+
start: new Date(startYear, startMonth, startDate),
|
|
1377
|
+
end: new Date(endYear, endMonth, endDate)
|
|
1378
|
+
};
|
|
1379
|
+
return scheduleEvent;
|
|
1380
|
+
}).sort((a2, b2) => {
|
|
1381
|
+
if (a2.time.start < b2.time.start) return -1;
|
|
1382
|
+
if (a2.time.start > b2.time.start) return 1;
|
|
1383
|
+
return 0;
|
|
1384
|
+
});
|
|
1385
|
+
const allDatesOfWeek = this.getDatesBetweenTwoDates(weekStart, weekEnd);
|
|
1386
|
+
const week = allDatesOfWeek.map((d2) => ({ date: d2 }));
|
|
1387
|
+
for (const scheduleEvent of eventsWithJSDates) {
|
|
1388
|
+
for (const [dayIndex, day] of week.entries()) {
|
|
1389
|
+
const thisDayDateString = this.getDateStringFromDate(day.date);
|
|
1390
|
+
if (this.getDateStringFromDate(scheduleEvent.timeJS.start) <= thisDayDateString && this.getDateStringFromDate(scheduleEvent.timeJS.end) >= thisDayDateString) {
|
|
1391
|
+
let levelToStartOn = 1;
|
|
1392
|
+
while (typeof week[dayIndex][`level${levelToStartOn}`] !== "undefined") {
|
|
1393
|
+
levelToStartOn++;
|
|
1394
|
+
}
|
|
1395
|
+
let eventNDays = Math.ceil((scheduleEvent.timeJS.end.getTime() - day.date.getTime()) / this.MS_PER_DAY) + 1;
|
|
1396
|
+
const remainingDaysOfWeek = week.length - dayIndex;
|
|
1397
|
+
if (eventNDays > remainingDaysOfWeek) eventNDays = remainingDaysOfWeek;
|
|
1398
|
+
week[dayIndex][`level${levelToStartOn}`] = {
|
|
1399
|
+
...scheduleEvent,
|
|
1400
|
+
nDays: eventNDays
|
|
1401
|
+
// Denotes the number of days to display in the week, not the actual number of days
|
|
1402
|
+
};
|
|
1403
|
+
for (let i2 = 1; i2 < eventNDays; i2++) {
|
|
1404
|
+
week[dayIndex + i2][`level${levelToStartOn}`] = "blocked";
|
|
1405
|
+
}
|
|
1406
|
+
break;
|
|
1407
|
+
}
|
|
1408
|
+
}
|
|
1409
|
+
}
|
|
1410
|
+
const weekWithSortedLevelsInDays = [];
|
|
1411
|
+
for (const day of week) {
|
|
1412
|
+
weekWithSortedLevelsInDays.push(Object.keys(day).sort().reduce(
|
|
1413
|
+
(obj, key) => {
|
|
1414
|
+
obj[key] = day[key];
|
|
1415
|
+
return obj;
|
|
1416
|
+
},
|
|
1417
|
+
{}
|
|
1418
|
+
));
|
|
1419
|
+
}
|
|
1420
|
+
return weekWithSortedLevelsInDays;
|
|
1421
|
+
}
|
|
1422
|
+
positionFullDayEventsInMonth(calendarMonth, fullDayEvents) {
|
|
1423
|
+
const newMonth = [];
|
|
1424
|
+
const flatMonth = calendarMonth.flat();
|
|
1425
|
+
const monthMap = /* @__PURE__ */ new Map();
|
|
1426
|
+
flatMonth.forEach((day) => monthMap.set(this.dateStringFrom(day.dateTimeString), day));
|
|
1427
|
+
fullDayEvents = fullDayEvents.sort((a2, b2) => {
|
|
1428
|
+
if (a2.time.start < b2.time.start) return 1;
|
|
1429
|
+
if (a2.time.start > b2.time.start) return -1;
|
|
1430
|
+
return 0;
|
|
1431
|
+
});
|
|
1432
|
+
for (const fullDayEvent of fullDayEvents) {
|
|
1433
|
+
const { year: startYear, month: startMonth, date: startDate } = this.getAllVariablesFromDateTimeString(fullDayEvent.time.start);
|
|
1434
|
+
const { year: endYear, month: endMonth, date: endDate } = this.getAllVariablesFromDateTimeString(fullDayEvent.time.end);
|
|
1435
|
+
const allDatesOfEvent = this.getDatesBetweenTwoDates(
|
|
1436
|
+
new Date(startYear, startMonth, startDate),
|
|
1437
|
+
new Date(endYear, endMonth, endDate)
|
|
1438
|
+
);
|
|
1439
|
+
for (const date2 of allDatesOfEvent) {
|
|
1440
|
+
const dateString = this.getDateStringFromDate(date2);
|
|
1441
|
+
const dateInMap = monthMap.get(dateString);
|
|
1442
|
+
if (dateInMap) {
|
|
1443
|
+
monthMap.set(dateString, {
|
|
1444
|
+
...dateInMap,
|
|
1445
|
+
// Since we're iterating over the fullDayEvents sorted backwards, the earliest events will end up first (which is the wanted behavior)
|
|
1446
|
+
events: [fullDayEvent, ...dateInMap.events]
|
|
1447
|
+
});
|
|
1448
|
+
}
|
|
1449
|
+
}
|
|
1450
|
+
}
|
|
1451
|
+
let weekIterator = 0;
|
|
1452
|
+
monthMap.forEach((day) => {
|
|
1453
|
+
if (!newMonth.length) {
|
|
1454
|
+
newMonth.push([day]);
|
|
1455
|
+
} else if (newMonth[weekIterator] && newMonth[weekIterator].length < 7) {
|
|
1456
|
+
newMonth[weekIterator].push(day);
|
|
1457
|
+
} else if (newMonth[weekIterator] && newMonth[weekIterator].length === 7) {
|
|
1458
|
+
newMonth.push([day]);
|
|
1459
|
+
weekIterator++;
|
|
1460
|
+
}
|
|
1461
|
+
});
|
|
1462
|
+
return newMonth;
|
|
1463
|
+
}
|
|
1464
|
+
}
|
|
1465
|
+
const calendarDomRectForVitest = {
|
|
1466
|
+
x: 8,
|
|
1467
|
+
y: 26,
|
|
1468
|
+
width: 903,
|
|
1469
|
+
height: 702,
|
|
1470
|
+
top: 26,
|
|
1471
|
+
right: 911,
|
|
1472
|
+
bottom: 728,
|
|
1473
|
+
left: 8
|
|
1474
|
+
};
|
|
1475
|
+
const EVENT_FLYOUT_WIDTH = 400;
|
|
1476
|
+
class EventFlyoutPosition {
|
|
1477
|
+
calculateFlyoutPosition(eventElementDOMRect, flyoutDimensions, calendarDomRectParam = null) {
|
|
1478
|
+
const calendarDomRect = calendarDomRectParam || calendarDomRectForVitest;
|
|
1479
|
+
const spaceTop = eventElementDOMRect.top - calendarDomRect.top;
|
|
1480
|
+
const spaceRight = calendarDomRect.right - eventElementDOMRect.right;
|
|
1481
|
+
const spaceBottom = calendarDomRect.bottom - eventElementDOMRect.bottom;
|
|
1482
|
+
const spaceLeft = eventElementDOMRect.left - calendarDomRect.left;
|
|
1483
|
+
const flyoutNeededWidth = flyoutDimensions.width + 10;
|
|
1484
|
+
const topWhenSpaceToBottomIsNegative = spaceBottom < 0 ? calendarDomRect.bottom - flyoutDimensions.height - 10 : null;
|
|
1485
|
+
const topWhenSpaceTopIsNegative = spaceTop < 0 ? calendarDomRect.top + 10 : null;
|
|
1486
|
+
if (spaceBottom > flyoutDimensions.height && spaceRight > flyoutNeededWidth) {
|
|
1487
|
+
return {
|
|
1488
|
+
top: topWhenSpaceTopIsNegative || Math.round(eventElementDOMRect.top),
|
|
1489
|
+
left: Math.round(eventElementDOMRect.right) + 10
|
|
1490
|
+
};
|
|
1491
|
+
}
|
|
1492
|
+
if (spaceTop > flyoutDimensions.height && spaceRight > flyoutNeededWidth) {
|
|
1493
|
+
return {
|
|
1494
|
+
top: topWhenSpaceToBottomIsNegative || Math.round(eventElementDOMRect.bottom) - flyoutDimensions.height,
|
|
1495
|
+
left: Math.round(eventElementDOMRect.right) + 10
|
|
1496
|
+
};
|
|
1497
|
+
}
|
|
1498
|
+
if (spaceLeft > flyoutNeededWidth && spaceBottom > flyoutDimensions.height) {
|
|
1499
|
+
return {
|
|
1500
|
+
top: topWhenSpaceTopIsNegative || eventElementDOMRect.top,
|
|
1501
|
+
left: Math.round(
|
|
1502
|
+
eventElementDOMRect.left - (flyoutDimensions.width + 10)
|
|
1503
|
+
)
|
|
1504
|
+
};
|
|
1505
|
+
}
|
|
1506
|
+
if (spaceLeft > flyoutNeededWidth && spaceTop > flyoutDimensions.height) {
|
|
1507
|
+
return {
|
|
1508
|
+
top: topWhenSpaceToBottomIsNegative || Math.round(eventElementDOMRect.bottom - flyoutDimensions.height),
|
|
1509
|
+
left: Math.round(
|
|
1510
|
+
eventElementDOMRect.left - (flyoutDimensions.width + 10)
|
|
1511
|
+
)
|
|
1512
|
+
};
|
|
1513
|
+
}
|
|
1514
|
+
if (spaceBottom < flyoutDimensions.height) {
|
|
1515
|
+
return { top: calendarDomRect.bottom - flyoutDimensions.height, left: null };
|
|
1516
|
+
}
|
|
1517
|
+
return { top: eventElementDOMRect.top, left: null };
|
|
1518
|
+
}
|
|
1519
|
+
}
|
|
1520
|
+
const _hoisted_1$11 = {
|
|
1521
|
+
key: 0,
|
|
1522
|
+
class: "event-flyout__relative-wrapper"
|
|
1523
|
+
};
|
|
1524
|
+
const _hoisted_2$M = { class: "event-flyout__menu" };
|
|
1525
|
+
const _hoisted_3$C = {
|
|
1526
|
+
key: 0,
|
|
1527
|
+
class: "event-flyout__menu-editable"
|
|
1528
|
+
};
|
|
1529
|
+
const _hoisted_4$p = { class: "event-flyout__menu-close" };
|
|
1530
|
+
const _hoisted_5$n = {
|
|
1531
|
+
key: 0,
|
|
1532
|
+
class: "event-flyout__info-wrapper"
|
|
1533
|
+
};
|
|
1534
|
+
const _hoisted_6$g = {
|
|
1535
|
+
key: 0,
|
|
1536
|
+
class: "event-flyout__row is-title"
|
|
1537
|
+
};
|
|
1538
|
+
const _hoisted_7$c = {
|
|
1539
|
+
key: 1,
|
|
1540
|
+
class: "event-flyout__row is-time"
|
|
1541
|
+
};
|
|
1542
|
+
const _hoisted_8$7 = {
|
|
1543
|
+
key: 2,
|
|
1544
|
+
class: "event-flyout__row is-location"
|
|
1545
|
+
};
|
|
1546
|
+
const _hoisted_9$5 = {
|
|
1547
|
+
key: 3,
|
|
1548
|
+
class: "event-flyout__row is-with"
|
|
1549
|
+
};
|
|
1550
|
+
const _hoisted_10$5 = {
|
|
1551
|
+
key: 4,
|
|
1552
|
+
class: "event-flyout__row is-topic"
|
|
1553
|
+
};
|
|
1554
|
+
const _hoisted_11$4 = {
|
|
1555
|
+
key: 5,
|
|
1556
|
+
class: "event-flyout__row is-description"
|
|
1557
|
+
};
|
|
1558
|
+
const _hoisted_12$4 = ["innerHTML"];
|
|
1559
|
+
const _sfc_main$1c = /* @__PURE__ */ defineComponent({
|
|
1560
|
+
__name: "EventFlyout",
|
|
1561
|
+
props: {
|
|
1562
|
+
calendarEventProp: {
|
|
1563
|
+
type: Object,
|
|
1564
|
+
default: () => ({})
|
|
1565
|
+
},
|
|
1566
|
+
eventElement: {
|
|
1567
|
+
type: Object,
|
|
1568
|
+
default: null
|
|
1569
|
+
},
|
|
1570
|
+
time: {
|
|
1571
|
+
type: Object,
|
|
1572
|
+
required: true
|
|
1573
|
+
},
|
|
1574
|
+
config: {
|
|
1575
|
+
type: Object,
|
|
1576
|
+
required: true
|
|
1577
|
+
}
|
|
1578
|
+
},
|
|
1579
|
+
emits: ["hide", "editEvent", "deleteEvent"],
|
|
1580
|
+
setup(__props, { emit: __emit }) {
|
|
1581
|
+
useCssVars((_ctx) => ({
|
|
1582
|
+
"2bf9b46b": flyoutWidth
|
|
1583
|
+
}));
|
|
1584
|
+
const props2 = __props;
|
|
1585
|
+
const emit2 = __emit;
|
|
1586
|
+
const eventFlyoutPositionHelper = new EventFlyoutPosition();
|
|
1587
|
+
const isVisible = ref(false);
|
|
1588
|
+
const top2 = ref(0);
|
|
1589
|
+
const left2 = ref(0);
|
|
1590
|
+
const calendarEvent = ref(props2.calendarEventProp);
|
|
1591
|
+
const flyoutWidth = `${EVENT_FLYOUT_WIDTH}px`;
|
|
1592
|
+
const colors = EVENT_COLORS;
|
|
1593
|
+
const icons = {
|
|
1594
|
+
clock: "clock",
|
|
1595
|
+
user: "user",
|
|
1596
|
+
description: "comment",
|
|
1597
|
+
trash: "delete",
|
|
1598
|
+
edit: "edit",
|
|
1599
|
+
times: "close",
|
|
1600
|
+
topic: "help",
|
|
1601
|
+
location: "location_on"
|
|
1602
|
+
};
|
|
1603
|
+
const getEventTime = computed(() => {
|
|
1604
|
+
if (!calendarEvent.value || !calendarEvent.value.time) return null;
|
|
1605
|
+
const eventType = Helpers.getEventType(calendarEvent.value, props2.time);
|
|
1606
|
+
if (["MULTI_DAY_TIMED"].includes(eventType)) {
|
|
1607
|
+
const startLocalizedString = `${getDateFromDateString(
|
|
1608
|
+
calendarEvent.value.time.start
|
|
1609
|
+
)} ${props2.time.getLocalizedTime(calendarEvent.value.time.start)}`;
|
|
1610
|
+
const endLocalizedString = `${getDateFromDateString(
|
|
1611
|
+
calendarEvent.value.time.end
|
|
1612
|
+
)} ${props2.time.getLocalizedTime(calendarEvent.value.time.end)}`;
|
|
1613
|
+
return `${startLocalizedString} - ${endLocalizedString}`;
|
|
1614
|
+
}
|
|
1615
|
+
if (["SINGLE_DAY_FULL_DAY", "MULTI_DAY_FULL_DAY"].includes(eventType)) {
|
|
1616
|
+
const startDate = getDateFromDateString(calendarEvent.value.time.start);
|
|
1617
|
+
const endDate = getDateFromDateString(calendarEvent.value.time.end);
|
|
1618
|
+
if (startDate === endDate) return startDate;
|
|
1619
|
+
return `${startDate} - ${endDate}`;
|
|
1620
|
+
}
|
|
1621
|
+
const dateString = getDateFromDateString(calendarEvent.value.time.start);
|
|
1622
|
+
const timeString = props2.time.getLocalizedTimeRange(
|
|
1623
|
+
calendarEvent.value.time.start,
|
|
1624
|
+
calendarEvent.value.time.end
|
|
1625
|
+
);
|
|
1626
|
+
return `${dateString} ⋅ ${timeString}`;
|
|
1627
|
+
});
|
|
1628
|
+
const eventFlyoutInlineStyles = computed(() => {
|
|
1629
|
+
if (typeof top2.value === "number" && !left2.value) {
|
|
1630
|
+
return {
|
|
1631
|
+
top: `${top2.value}px`,
|
|
1632
|
+
left: "50%",
|
|
1633
|
+
position: "fixed",
|
|
1634
|
+
transform: "translateX(-50%)"
|
|
1635
|
+
};
|
|
1636
|
+
}
|
|
1637
|
+
return {
|
|
1638
|
+
top: `${top2.value}px`,
|
|
1639
|
+
left: `${left2.value}px`,
|
|
1640
|
+
position: "fixed"
|
|
1641
|
+
};
|
|
1642
|
+
});
|
|
1643
|
+
const isEditable = computed(() => {
|
|
1644
|
+
var _a2;
|
|
1645
|
+
return ((_a2 = props2.calendarEventProp) == null ? void 0 : _a2.isEditable) || false;
|
|
1646
|
+
});
|
|
1647
|
+
const eventBackgroundColor = computed(() => {
|
|
1648
|
+
var _a2, _b, _c;
|
|
1649
|
+
if (((_a2 = calendarEvent.value) == null ? void 0 : _a2.colorScheme) && ((_b = props2.config.style) == null ? void 0 : _b.colorSchemes) && props2.config.style.colorSchemes[calendarEvent.value.colorScheme]) {
|
|
1650
|
+
return props2.config.style.colorSchemes[calendarEvent.value.colorScheme].backgroundColor;
|
|
1651
|
+
}
|
|
1652
|
+
return colors[((_c = calendarEvent.value) == null ? void 0 : _c.color) || "blue"];
|
|
1653
|
+
});
|
|
1654
|
+
function setFlyoutPosition() {
|
|
1655
|
+
var _a2, _b;
|
|
1656
|
+
const calendar = (_a2 = props2.eventElement) == null ? void 0 : _a2.closest(".calendar-root");
|
|
1657
|
+
const flyout = document.querySelector(".event-flyout");
|
|
1658
|
+
if (!props2.eventElement) return;
|
|
1659
|
+
const flyoutPosition = eventFlyoutPositionHelper.calculateFlyoutPosition(
|
|
1660
|
+
(_b = props2.eventElement) == null ? void 0 : _b.getBoundingClientRect(),
|
|
1661
|
+
{
|
|
1662
|
+
height: (flyout == null ? void 0 : flyout.clientHeight) || 300,
|
|
1663
|
+
width: (flyout == null ? void 0 : flyout.clientWidth) || 0
|
|
1664
|
+
},
|
|
1665
|
+
calendar ? calendar.getBoundingClientRect() : null
|
|
1666
|
+
);
|
|
1667
|
+
top2.value = typeof (flyoutPosition == null ? void 0 : flyoutPosition.top) === "number" ? flyoutPosition.top : null;
|
|
1668
|
+
left2.value = typeof (flyoutPosition == null ? void 0 : flyoutPosition.left) === "number" ? flyoutPosition.left : null;
|
|
1669
|
+
}
|
|
1670
|
+
function editEvent() {
|
|
1671
|
+
var _a2;
|
|
1672
|
+
emit2("editEvent", (_a2 = calendarEvent.value) == null ? void 0 : _a2.id);
|
|
1673
|
+
closeFlyout();
|
|
1674
|
+
}
|
|
1675
|
+
function deleteEvent() {
|
|
1676
|
+
var _a2;
|
|
1677
|
+
emit2("deleteEvent", (_a2 = calendarEvent.value) == null ? void 0 : _a2.id);
|
|
1678
|
+
closeFlyout();
|
|
1679
|
+
}
|
|
1680
|
+
function closeFlyout() {
|
|
1681
|
+
isVisible.value = false;
|
|
1682
|
+
setTimeout(() => {
|
|
1683
|
+
emit2("hide");
|
|
1684
|
+
}, 100);
|
|
1685
|
+
}
|
|
1686
|
+
function getDateFromDateString(dateString) {
|
|
1687
|
+
const { year, month, date: date2 } = props2.time.getAllVariablesFromDateTimeString(dateString);
|
|
1688
|
+
return new Date(year, month, date2).toLocaleDateString(
|
|
1689
|
+
props2.time.CALENDAR_LOCALE,
|
|
1690
|
+
{
|
|
1691
|
+
year: "numeric",
|
|
1692
|
+
month: "long",
|
|
1693
|
+
day: "numeric"
|
|
1694
|
+
}
|
|
1695
|
+
);
|
|
1696
|
+
}
|
|
1697
|
+
function closeFlyoutOnClickOutside(e) {
|
|
1698
|
+
var _a2;
|
|
1699
|
+
const flyout = document.querySelector(".event-flyout");
|
|
1700
|
+
if (!flyout || !isVisible.value) return;
|
|
1701
|
+
const isClickOutside = !flyout.contains(e.target);
|
|
1702
|
+
const isClickOnEvent = !!e.target.closest(".is-event");
|
|
1703
|
+
const closeOnClickOutside = ((_a2 = props2.config.eventDialog) == null ? void 0 : _a2.closeOnClickOutside) ?? true;
|
|
1704
|
+
if (isVisible.value && isClickOutside && !isClickOnEvent && closeOnClickOutside) {
|
|
1705
|
+
closeFlyout();
|
|
1706
|
+
}
|
|
1707
|
+
}
|
|
1708
|
+
watch(
|
|
1709
|
+
() => props2.calendarEventProp,
|
|
1710
|
+
(value) => {
|
|
1711
|
+
setTimeout(() => {
|
|
1712
|
+
calendarEvent.value = value;
|
|
1713
|
+
isVisible.value = !!value;
|
|
1714
|
+
nextTick(() => {
|
|
1715
|
+
setFlyoutPosition();
|
|
1716
|
+
});
|
|
1717
|
+
}, 10);
|
|
1718
|
+
},
|
|
1719
|
+
{ deep: true }
|
|
1720
|
+
);
|
|
1721
|
+
onMounted(() => {
|
|
1722
|
+
document.addEventListener("click", closeFlyoutOnClickOutside);
|
|
1723
|
+
});
|
|
1724
|
+
onBeforeUnmount(() => {
|
|
1725
|
+
document.removeEventListener("click", closeFlyoutOnClickOutside);
|
|
1726
|
+
});
|
|
1727
|
+
return (_ctx, _cache) => {
|
|
1728
|
+
return openBlock(), createElementBlock("div", {
|
|
1729
|
+
class: normalizeClass(["event-flyout p-05 bg-white", { "is-visible": isVisible.value, "is-not-editable": !isEditable.value }]),
|
|
1730
|
+
style: normalizeStyle(eventFlyoutInlineStyles.value)
|
|
1731
|
+
}, [
|
|
1732
|
+
!__props.config.eventDialog || !__props.config.eventDialog.isCustom ? (openBlock(), createElementBlock("div", _hoisted_1$11, [
|
|
1733
|
+
createElementVNode("div", _hoisted_2$M, [
|
|
1734
|
+
isEditable.value ? (openBlock(), createElementBlock("span", _hoisted_3$C, [
|
|
1735
|
+
createVNode(unref(_sfc_main$q), {
|
|
1736
|
+
class: "event-flyout__menu-item is-edit-icon",
|
|
1737
|
+
icon: icons.edit,
|
|
1738
|
+
onClick: editEvent
|
|
1739
|
+
}, null, 8, ["icon"]),
|
|
1740
|
+
createVNode(unref(_sfc_main$q), {
|
|
1741
|
+
class: "event-flyout__menu-item is-trash-icon",
|
|
1742
|
+
icon: icons.trash,
|
|
1743
|
+
onClick: deleteEvent
|
|
1744
|
+
}, null, 8, ["icon"])
|
|
1745
|
+
])) : createCommentVNode("", true),
|
|
1746
|
+
createElementVNode("span", _hoisted_4$p, [
|
|
1747
|
+
createVNode(unref(_sfc_main$q), {
|
|
1748
|
+
class: "event-flyout__menu-item is-times-icon",
|
|
1749
|
+
icon: icons.times,
|
|
1750
|
+
onClick: closeFlyout
|
|
1751
|
+
}, null, 8, ["icon"])
|
|
1752
|
+
])
|
|
1753
|
+
]),
|
|
1754
|
+
calendarEvent.value ? (openBlock(), createElementBlock("div", _hoisted_5$n, [
|
|
1755
|
+
calendarEvent.value.title ? (openBlock(), createElementBlock("div", _hoisted_6$g, [
|
|
1756
|
+
createElementVNode("div", {
|
|
1757
|
+
class: "event-flyout__color-icon",
|
|
1758
|
+
style: normalizeStyle({ backgroundColor: eventBackgroundColor.value })
|
|
1759
|
+
}, null, 4),
|
|
1760
|
+
createTextVNode(" " + toDisplayString(calendarEvent.value.title), 1)
|
|
1761
|
+
])) : createCommentVNode("", true),
|
|
1762
|
+
calendarEvent.value.time ? (openBlock(), createElementBlock("div", _hoisted_7$c, toDisplayString(getEventTime.value), 1)) : createCommentVNode("", true),
|
|
1763
|
+
calendarEvent.value.location ? (openBlock(), createElementBlock("div", _hoisted_8$7, [
|
|
1764
|
+
createVNode(unref(_sfc_main$q), {
|
|
1765
|
+
icon: icons.location
|
|
1766
|
+
}, null, 8, ["icon"]),
|
|
1767
|
+
createTextVNode(" " + toDisplayString(calendarEvent.value.location), 1)
|
|
1768
|
+
])) : createCommentVNode("", true),
|
|
1769
|
+
calendarEvent.value.with ? (openBlock(), createElementBlock("div", _hoisted_9$5, [
|
|
1770
|
+
createVNode(unref(_sfc_main$q), {
|
|
1771
|
+
icon: icons.user
|
|
1772
|
+
}, null, 8, ["icon"]),
|
|
1773
|
+
createTextVNode(" " + toDisplayString(calendarEvent.value.with), 1)
|
|
1774
|
+
])) : createCommentVNode("", true),
|
|
1775
|
+
calendarEvent.value.topic ? (openBlock(), createElementBlock("div", _hoisted_10$5, [
|
|
1776
|
+
createVNode(unref(_sfc_main$q), {
|
|
1777
|
+
icon: icons.topic
|
|
1778
|
+
}, null, 8, ["icon"]),
|
|
1779
|
+
createTextVNode(" " + toDisplayString(calendarEvent.value.topic), 1)
|
|
1780
|
+
])) : createCommentVNode("", true),
|
|
1781
|
+
calendarEvent.value.description ? (openBlock(), createElementBlock("div", _hoisted_11$4, [
|
|
1782
|
+
createVNode(unref(_sfc_main$q), {
|
|
1783
|
+
icon: icons.description
|
|
1784
|
+
}, null, 8, ["icon"]),
|
|
1785
|
+
createElementVNode("p", {
|
|
1786
|
+
innerHTML: calendarEvent.value.description
|
|
1787
|
+
}, null, 8, _hoisted_12$4)
|
|
1788
|
+
])) : createCommentVNode("", true)
|
|
1789
|
+
])) : createCommentVNode("", true)
|
|
1790
|
+
])) : renderSlot(_ctx.$slots, "default", {
|
|
1791
|
+
key: 1,
|
|
1792
|
+
eventDialogData: calendarEvent.value,
|
|
1793
|
+
closeEventDialog: closeFlyout
|
|
1794
|
+
})
|
|
1795
|
+
], 6);
|
|
1796
|
+
};
|
|
1797
|
+
}
|
|
1798
|
+
});
|
|
1799
|
+
const languageKeys = {
|
|
1800
|
+
/** The following three keys, describe the calendar modes */
|
|
1801
|
+
week: {
|
|
1802
|
+
"it-IT": "Settimana",
|
|
1803
|
+
"en-US": "Week",
|
|
1804
|
+
"de-DE": "Woche",
|
|
1805
|
+
"sv-SE": "Vecka",
|
|
1806
|
+
"zh-CN": "周",
|
|
1807
|
+
"pt-BR": "Semana",
|
|
1808
|
+
"fr-FR": "Semaine",
|
|
1809
|
+
"th-TH": "สัปดาห์",
|
|
1810
|
+
"nl-NL": "Week",
|
|
1811
|
+
"ru-RU": "Неделя",
|
|
1812
|
+
"ar-YE": "إسبوع",
|
|
1813
|
+
"es-ES": "Semana",
|
|
1814
|
+
"ja-JP": "週",
|
|
1815
|
+
"pl-PL": "Tydzień",
|
|
1816
|
+
"hu-HU": "Hét"
|
|
1817
|
+
},
|
|
1818
|
+
month: {
|
|
1819
|
+
"it-IT": "Mese",
|
|
1820
|
+
"en-US": "Month",
|
|
1821
|
+
"de-DE": "Monat",
|
|
1822
|
+
"sv-SE": "Månad",
|
|
1823
|
+
"zh-CN": "月",
|
|
1824
|
+
"pt-BR": "Mês",
|
|
1825
|
+
"fr-FR": "Mois",
|
|
1826
|
+
"th-TH": "เดือน",
|
|
1827
|
+
"nl-NL": "Maand",
|
|
1828
|
+
"ru-RU": "Месяц",
|
|
1829
|
+
"ar-YE": "شهر",
|
|
1830
|
+
"es-ES": "Mes",
|
|
1831
|
+
"ja-JP": "月",
|
|
1832
|
+
"pl-PL": "Miesiąc",
|
|
1833
|
+
"hu-HU": "Hónap"
|
|
1834
|
+
},
|
|
1835
|
+
day: {
|
|
1836
|
+
"it-IT": "Giorno",
|
|
1837
|
+
"en-US": "Day",
|
|
1838
|
+
"de-DE": "Tag",
|
|
1839
|
+
"sv-SE": "Dag",
|
|
1840
|
+
"zh-CN": "日",
|
|
1841
|
+
"pt-BR": "Dia",
|
|
1842
|
+
"fr-FR": "Jour",
|
|
1843
|
+
"th-TH": "วัน",
|
|
1844
|
+
"nl-NL": "Dag",
|
|
1845
|
+
"ru-RU": "День",
|
|
1846
|
+
"ar-YE": "يوم",
|
|
1847
|
+
"es-ES": "Día",
|
|
1848
|
+
"ja-JP": "日",
|
|
1849
|
+
"pl-PL": "Dzień",
|
|
1850
|
+
"hu-HU": "Nap"
|
|
1851
|
+
},
|
|
1852
|
+
/** Other keys */
|
|
1853
|
+
moreEvents: {
|
|
1854
|
+
"it-IT": "+ altri eventi",
|
|
1855
|
+
"en-US": "+ more events",
|
|
1856
|
+
"de-DE": "+ weitere Ereignisse",
|
|
1857
|
+
"sv-SE": "+ fler event",
|
|
1858
|
+
"zh-CN": "列出其他结果",
|
|
1859
|
+
"pt-BR": "+ mais eventos",
|
|
1860
|
+
"fr-FR": "+ d'autres événements",
|
|
1861
|
+
"th-TH": "+ เหตุการณ์เพิ่มเติม",
|
|
1862
|
+
"nl-NL": "meer evenementen",
|
|
1863
|
+
"ru-RU": "+ ещё события",
|
|
1864
|
+
"ar-YE": "+ المزيد من الأحداث",
|
|
1865
|
+
"es-ES": "más eventos",
|
|
1866
|
+
"ja-JP": "その他イベント",
|
|
1867
|
+
"pl-PL": "+ więcej wydarzeń",
|
|
1868
|
+
"hu-HU": "További események"
|
|
1869
|
+
},
|
|
1870
|
+
noEvent: {
|
|
1871
|
+
"it-IT": "Nessun evento",
|
|
1872
|
+
"en-US": "No events",
|
|
1873
|
+
"de-DE": "Keine Ereignisse",
|
|
1874
|
+
"sv-SE": "Inga event",
|
|
1875
|
+
"zh-CN": "沒有活動",
|
|
1876
|
+
"pt-BR": "Sem eventos",
|
|
1877
|
+
"fr-FR": "Aucun Evènement",
|
|
1878
|
+
"th-TH": "ไม่มีกิจกรรม",
|
|
1879
|
+
"nl-NL": "Geen evenementen",
|
|
1880
|
+
"ru-RU": "Нет событий",
|
|
1881
|
+
"ar-YE": "لا أحداث",
|
|
1882
|
+
"es-ES": "No hay eventos",
|
|
1883
|
+
"ja-JP": "イベントなし",
|
|
1884
|
+
"pl-PL": "Brak wydarzeń",
|
|
1885
|
+
"hu-HU": "Nincs esemény"
|
|
1886
|
+
}
|
|
1887
|
+
};
|
|
1888
|
+
const localeMap = /* @__PURE__ */ new Map([
|
|
1889
|
+
["de", "de-DE"],
|
|
1890
|
+
["en", "en-US"],
|
|
1891
|
+
["it", "it-IT"],
|
|
1892
|
+
["sv", "sv-SE"],
|
|
1893
|
+
["zh", "zh-CN"],
|
|
1894
|
+
["pt", "pt-BR"],
|
|
1895
|
+
["fr", "fr-FR"],
|
|
1896
|
+
["th", "th-TH"],
|
|
1897
|
+
["nl", "nl-NL"],
|
|
1898
|
+
["ru", "ru-RU"],
|
|
1899
|
+
["ar", "ar-YE"],
|
|
1900
|
+
["es", "es-ES"],
|
|
1901
|
+
["ja", "ja-JP"],
|
|
1902
|
+
["pl", "pl-PL"],
|
|
1903
|
+
["hu", "hu-HU"]
|
|
1904
|
+
]);
|
|
1905
|
+
function overrideShortLocaleWithLongLocale(locale2) {
|
|
1906
|
+
if (localeMap.has(locale2)) {
|
|
1907
|
+
locale2 = localeMap.get(locale2);
|
|
1908
|
+
}
|
|
1909
|
+
return locale2;
|
|
1910
|
+
}
|
|
1911
|
+
function getLanguage(languageKeys2, locale2) {
|
|
1912
|
+
locale2 = overrideShortLocaleWithLongLocale(locale2);
|
|
1913
|
+
return languageKeys2[locale2] ? languageKeys2[locale2] : languageKeys2["en-US"];
|
|
1914
|
+
}
|
|
1915
|
+
const _hoisted_1$10 = ["id"];
|
|
1916
|
+
const _hoisted_2$L = {
|
|
1917
|
+
key: 0,
|
|
1918
|
+
class: "agenda__event-time"
|
|
1919
|
+
};
|
|
1920
|
+
const _hoisted_3$B = { class: "agenda__event-title" };
|
|
1921
|
+
const _hoisted_4$o = {
|
|
1922
|
+
key: 1,
|
|
1923
|
+
class: "agenda__event-with"
|
|
1924
|
+
};
|
|
1925
|
+
const _hoisted_5$m = {
|
|
1926
|
+
key: 2,
|
|
1927
|
+
class: "agenda__event-location"
|
|
1928
|
+
};
|
|
1929
|
+
const eventIdPrefix$1 = "agenda__event-";
|
|
1930
|
+
const _sfc_main$1b = /* @__PURE__ */ defineComponent({
|
|
1931
|
+
__name: "AgendaEventTile",
|
|
1932
|
+
props: {
|
|
1933
|
+
time: {
|
|
1934
|
+
type: Object,
|
|
1935
|
+
required: true
|
|
1936
|
+
},
|
|
1937
|
+
calendarEvent: {
|
|
1938
|
+
type: Object,
|
|
1939
|
+
required: true
|
|
1940
|
+
},
|
|
1941
|
+
config: {
|
|
1942
|
+
type: Object,
|
|
1943
|
+
required: true
|
|
1944
|
+
}
|
|
1945
|
+
},
|
|
1946
|
+
emits: ["eventWasClicked"],
|
|
1947
|
+
setup(__props, { emit: __emit }) {
|
|
1948
|
+
useCssVars((_ctx) => ({
|
|
1949
|
+
"6b656230": eventBackgroundColor.value,
|
|
1950
|
+
"2507007e": eventColor.value
|
|
1951
|
+
}));
|
|
1952
|
+
const props2 = __props;
|
|
1953
|
+
const emit2 = __emit;
|
|
1954
|
+
const icons = {
|
|
1955
|
+
clock: "clock",
|
|
1956
|
+
user: "user",
|
|
1957
|
+
description: "comment",
|
|
1958
|
+
trash: "delete",
|
|
1959
|
+
edit: "pen-to-square",
|
|
1960
|
+
times: "close",
|
|
1961
|
+
topic: "question-circle",
|
|
1962
|
+
location: "location_on"
|
|
1963
|
+
};
|
|
1964
|
+
const colors = EVENT_COLORS;
|
|
1965
|
+
const eventBackgroundColor = ref("");
|
|
1966
|
+
const eventColor = ref("#fff");
|
|
1967
|
+
const eventTime = computed(() => {
|
|
1968
|
+
return DATE_TIME_STRING_PATTERN.test(props2.calendarEvent.time.start) ? props2.time.getLocalizedTimeRange(
|
|
1969
|
+
props2.calendarEvent.time.start,
|
|
1970
|
+
props2.calendarEvent.time.end
|
|
1971
|
+
) : null;
|
|
1972
|
+
});
|
|
1973
|
+
const elementId = computed(() => {
|
|
1974
|
+
return eventIdPrefix$1 + props2.calendarEvent.id;
|
|
1975
|
+
});
|
|
1976
|
+
function setColors() {
|
|
1977
|
+
var _a2;
|
|
1978
|
+
if (props2.calendarEvent.colorScheme && ((_a2 = props2.config.style) == null ? void 0 : _a2.colorSchemes) && props2.config.style.colorSchemes[props2.calendarEvent.colorScheme]) {
|
|
1979
|
+
eventColor.value = props2.config.style.colorSchemes[props2.calendarEvent.colorScheme].color;
|
|
1980
|
+
eventBackgroundColor.value = props2.config.style.colorSchemes[props2.calendarEvent.colorScheme].backgroundColor;
|
|
1981
|
+
return;
|
|
1982
|
+
}
|
|
1983
|
+
if (props2.calendarEvent.color) {
|
|
1984
|
+
eventBackgroundColor.value = colors[props2.calendarEvent.color];
|
|
1985
|
+
return;
|
|
1986
|
+
}
|
|
1987
|
+
eventBackgroundColor.value = colors.blue;
|
|
1988
|
+
}
|
|
1989
|
+
function handleClickOnEvent() {
|
|
1990
|
+
const eventElement = document.getElementById(elementId.value);
|
|
1991
|
+
emit2("eventWasClicked", {
|
|
1992
|
+
clickedEvent: props2.calendarEvent,
|
|
1993
|
+
eventElement
|
|
1994
|
+
});
|
|
1995
|
+
}
|
|
1996
|
+
onMounted(() => {
|
|
1997
|
+
setColors();
|
|
1998
|
+
});
|
|
1999
|
+
return (_ctx, _cache) => {
|
|
2000
|
+
return openBlock(), createElementBlock("div", {
|
|
2001
|
+
id: elementId.value,
|
|
2002
|
+
class: "agenda__event is-event",
|
|
2003
|
+
onClick: withModifiers(handleClickOnEvent, ["prevent"])
|
|
2004
|
+
}, [
|
|
2005
|
+
eventTime.value && !__props.calendarEvent.originalEvent ? (openBlock(), createElementBlock("span", _hoisted_2$L, [
|
|
2006
|
+
createVNode(unref(_sfc_main$q), {
|
|
2007
|
+
icon: icons.clock
|
|
2008
|
+
}, null, 8, ["icon"]),
|
|
2009
|
+
createTextVNode(" " + toDisplayString(eventTime.value), 1)
|
|
2010
|
+
])) : createCommentVNode("", true),
|
|
2011
|
+
createElementVNode("span", _hoisted_3$B, toDisplayString(__props.calendarEvent.title), 1),
|
|
2012
|
+
__props.calendarEvent.with ? (openBlock(), createElementBlock("span", _hoisted_4$o, [
|
|
2013
|
+
createVNode(unref(_sfc_main$q), {
|
|
2014
|
+
icon: icons.user
|
|
2015
|
+
}, null, 8, ["icon"]),
|
|
2016
|
+
createTextVNode(" " + toDisplayString(__props.calendarEvent.with), 1)
|
|
2017
|
+
])) : createCommentVNode("", true),
|
|
2018
|
+
__props.calendarEvent.location ? (openBlock(), createElementBlock("span", _hoisted_5$m, [
|
|
2019
|
+
createVNode(unref(_sfc_main$q), {
|
|
2020
|
+
icon: icons.location
|
|
2021
|
+
}, null, 8, ["icon"]),
|
|
2022
|
+
createTextVNode(" " + toDisplayString(__props.calendarEvent.location), 1)
|
|
2023
|
+
])) : createCommentVNode("", true)
|
|
2024
|
+
], 8, _hoisted_1$10);
|
|
2025
|
+
};
|
|
2026
|
+
}
|
|
2027
|
+
});
|
|
2028
|
+
const AgendaEventTile = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-eb2ab566"]]);
|
|
2029
|
+
const _hoisted_1$$ = { class: "agenda__wrapper" };
|
|
2030
|
+
const _hoisted_2$K = { class: "agenda__header" };
|
|
2031
|
+
const _hoisted_3$A = { class: "agenda__header-day-name" };
|
|
2032
|
+
const _hoisted_4$n = { class: "agenda__header-date" };
|
|
2033
|
+
const _hoisted_5$l = { class: "agenda__content" };
|
|
2034
|
+
const _hoisted_6$f = {
|
|
2035
|
+
key: 0,
|
|
2036
|
+
class: "is-empty"
|
|
2037
|
+
};
|
|
2038
|
+
const _hoisted_7$b = {
|
|
2039
|
+
key: 1,
|
|
2040
|
+
class: "agenda__content-events-list"
|
|
2041
|
+
};
|
|
2042
|
+
const _sfc_main$1a = /* @__PURE__ */ defineComponent({
|
|
2043
|
+
__name: "AgendaEvents",
|
|
2044
|
+
props: {
|
|
2045
|
+
config: {
|
|
2046
|
+
type: Object,
|
|
2047
|
+
required: true
|
|
2048
|
+
},
|
|
2049
|
+
time: {
|
|
2050
|
+
type: Object,
|
|
2051
|
+
required: true
|
|
2052
|
+
},
|
|
2053
|
+
day: {
|
|
2054
|
+
type: Object,
|
|
2055
|
+
required: true
|
|
2056
|
+
}
|
|
2057
|
+
},
|
|
2058
|
+
emits: ["eventWasClicked"],
|
|
2059
|
+
setup(__props, { emit: __emit }) {
|
|
2060
|
+
const emit2 = __emit;
|
|
2061
|
+
return (_ctx, _cache) => {
|
|
2062
|
+
return openBlock(), createElementBlock("div", _hoisted_1$$, [
|
|
2063
|
+
createElementVNode("header", _hoisted_2$K, [
|
|
2064
|
+
createElementVNode("div", _hoisted_3$A, toDisplayString(__props.day.dayName), 1),
|
|
2065
|
+
createElementVNode("div", _hoisted_4$n, toDisplayString(__props.day.dateTimeString.substring(8, 10)), 1)
|
|
2066
|
+
]),
|
|
2067
|
+
createElementVNode("div", _hoisted_5$l, [
|
|
2068
|
+
__props.day.events.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_6$f, toDisplayString(unref(getLanguage)(unref(languageKeys).noEvent, __props.time.CALENDAR_LOCALE)), 1)) : (openBlock(), createElementBlock("div", _hoisted_7$b, [
|
|
2069
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.day.events, (dayEvent) => {
|
|
2070
|
+
return openBlock(), createBlock(AgendaEventTile, {
|
|
2071
|
+
key: `agenda_event_${dayEvent.id}`,
|
|
2072
|
+
day: __props.day,
|
|
2073
|
+
config: __props.config,
|
|
2074
|
+
"calendar-event": dayEvent,
|
|
2075
|
+
time: __props.time,
|
|
2076
|
+
onEventWasClicked: _cache[0] || (_cache[0] = ($event) => emit2("eventWasClicked", $event))
|
|
2077
|
+
}, null, 8, ["day", "config", "calendar-event", "time"]);
|
|
2078
|
+
}), 128))
|
|
2079
|
+
]))
|
|
2080
|
+
])
|
|
2081
|
+
]);
|
|
2082
|
+
};
|
|
2083
|
+
}
|
|
2084
|
+
});
|
|
2085
|
+
const AgendaEvents = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__scopeId", "data-v-25f23df1"]]);
|
|
2086
|
+
const _hoisted_1$_ = {
|
|
2087
|
+
key: 0,
|
|
2088
|
+
class: "calendar-month__event"
|
|
2089
|
+
};
|
|
2090
|
+
const _hoisted_2$J = ["id", "draggable"];
|
|
2091
|
+
const _hoisted_3$z = ["id", "draggable"];
|
|
2092
|
+
const _hoisted_4$m = {
|
|
2093
|
+
key: 0,
|
|
2094
|
+
class: "calendar-month__event-time"
|
|
2095
|
+
};
|
|
2096
|
+
const _hoisted_5$k = { class: "calendar-month__event-title" };
|
|
2097
|
+
const eventIdPrefix = "calendar-month__event-";
|
|
2098
|
+
const _sfc_main$19 = /* @__PURE__ */ defineComponent({
|
|
2099
|
+
__name: "Event",
|
|
2100
|
+
props: {
|
|
2101
|
+
time: {
|
|
2102
|
+
type: Object,
|
|
2103
|
+
required: true
|
|
2104
|
+
},
|
|
2105
|
+
calendarEvent: {
|
|
2106
|
+
type: Object,
|
|
2107
|
+
required: true
|
|
2108
|
+
},
|
|
2109
|
+
config: {
|
|
2110
|
+
type: Object,
|
|
2111
|
+
required: true
|
|
2112
|
+
},
|
|
2113
|
+
day: {
|
|
2114
|
+
type: Object,
|
|
2115
|
+
required: true
|
|
2116
|
+
}
|
|
2117
|
+
},
|
|
2118
|
+
emits: ["eventWasClicked"],
|
|
2119
|
+
setup(__props, { emit: __emit }) {
|
|
2120
|
+
useCssVars((_ctx) => ({
|
|
2121
|
+
"2920aa71": eventBackgroundColor.value
|
|
2122
|
+
}));
|
|
2123
|
+
const props2 = __props;
|
|
2124
|
+
const emit2 = __emit;
|
|
2125
|
+
const colors = ref(EVENT_COLORS);
|
|
2126
|
+
const eventBackgroundColor = ref("");
|
|
2127
|
+
const isCustomEvent = computed(() => {
|
|
2128
|
+
if (Array.isArray(props2.calendarEvent.isCustom)) {
|
|
2129
|
+
return props2.calendarEvent.isCustom.includes("month");
|
|
2130
|
+
}
|
|
2131
|
+
return props2.calendarEvent.isCustom || false;
|
|
2132
|
+
});
|
|
2133
|
+
const eventTimeStart = computed(() => {
|
|
2134
|
+
return DATE_TIME_STRING_PATTERN.test(props2.calendarEvent.time.start) ? props2.time.getLocalizedTime(props2.calendarEvent.time.start) : null;
|
|
2135
|
+
});
|
|
2136
|
+
const elementId = computed(() => eventIdPrefix + props2.calendarEvent.id + props2.time.dateStringFrom(props2.day.dateTimeString));
|
|
2137
|
+
const elementDraggableAttribute = computed(() => {
|
|
2138
|
+
const {
|
|
2139
|
+
year: startYear,
|
|
2140
|
+
month: startMonth,
|
|
2141
|
+
date: startDate
|
|
2142
|
+
} = props2.time.getAllVariablesFromDateTimeString(props2.calendarEvent.time.start);
|
|
2143
|
+
const {
|
|
2144
|
+
year: endYear,
|
|
2145
|
+
month: endMonth,
|
|
2146
|
+
date: endDate
|
|
2147
|
+
} = props2.time.getAllVariablesFromDateTimeString(props2.calendarEvent.time.end);
|
|
2148
|
+
const eventIsSingleDay = startYear === endYear && startMonth === endMonth && startDate === endDate;
|
|
2149
|
+
const dragAndDropIsDisabled = props2.calendarEvent.disableDnD && props2.calendarEvent.disableDnD.includes("month");
|
|
2150
|
+
return props2.calendarEvent.isEditable && eventIsSingleDay && !dragAndDropIsDisabled ? true : void 0;
|
|
2151
|
+
});
|
|
2152
|
+
function setColors() {
|
|
2153
|
+
var _a2;
|
|
2154
|
+
if (props2.calendarEvent.colorScheme && ((_a2 = props2.config.style) == null ? void 0 : _a2.colorSchemes) && props2.config.style.colorSchemes[props2.calendarEvent.colorScheme]) {
|
|
2155
|
+
return eventBackgroundColor.value = props2.config.style.colorSchemes[props2.calendarEvent.colorScheme].backgroundColor;
|
|
2156
|
+
}
|
|
2157
|
+
if (props2.calendarEvent.color) {
|
|
2158
|
+
return eventBackgroundColor.value = colors.value[props2.calendarEvent.color];
|
|
2159
|
+
}
|
|
2160
|
+
return eventBackgroundColor.value = colors.value.blue;
|
|
2161
|
+
}
|
|
2162
|
+
function handleClickOnEvent() {
|
|
2163
|
+
const eventElement = document.getElementById(elementId.value);
|
|
2164
|
+
emit2("eventWasClicked", {
|
|
2165
|
+
clickedEvent: props2.calendarEvent,
|
|
2166
|
+
eventElement
|
|
2167
|
+
});
|
|
2168
|
+
}
|
|
2169
|
+
function handleDragStart(dragEvent) {
|
|
2170
|
+
if (!dragEvent || !dragEvent.dataTransfer) return;
|
|
2171
|
+
dragEvent.dataTransfer.effectAllowed = "move";
|
|
2172
|
+
dragEvent.dataTransfer.setData("json", JSON.stringify(props2.calendarEvent));
|
|
2173
|
+
}
|
|
2174
|
+
onMounted(() => {
|
|
2175
|
+
setColors();
|
|
2176
|
+
});
|
|
2177
|
+
return (_ctx, _cache) => {
|
|
2178
|
+
return __props.config.isSmall ? (openBlock(), createElementBlock("div", _hoisted_1$_)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
2179
|
+
isCustomEvent.value ? (openBlock(), createElementBlock("div", {
|
|
2180
|
+
key: 0,
|
|
2181
|
+
id: elementId.value,
|
|
2182
|
+
class: normalizeClass(["is-event", { "is-draggable": elementDraggableAttribute.value }]),
|
|
2183
|
+
"data-ref": "custom-event",
|
|
2184
|
+
draggable: elementDraggableAttribute.value,
|
|
2185
|
+
onDragstart: handleDragStart,
|
|
2186
|
+
onClick: handleClickOnEvent
|
|
2187
|
+
}, [
|
|
2188
|
+
renderSlot(_ctx.$slots, "monthEvent", { eventData: __props.calendarEvent })
|
|
2189
|
+
], 42, _hoisted_2$J)) : (openBlock(), createElementBlock("div", {
|
|
2190
|
+
key: 1,
|
|
2191
|
+
id: elementId.value,
|
|
2192
|
+
"data-ref": "default-event",
|
|
2193
|
+
class: normalizeClass(["calendar-month__event is-event", { "is-draggable": elementDraggableAttribute.value }]),
|
|
2194
|
+
draggable: elementDraggableAttribute.value,
|
|
2195
|
+
onDragstart: handleDragStart,
|
|
2196
|
+
onClick: handleClickOnEvent
|
|
2197
|
+
}, [
|
|
2198
|
+
_cache[0] || (_cache[0] = createElementVNode("span", { class: "calendar-month__event-color" }, null, -1)),
|
|
2199
|
+
eventTimeStart.value && !__props.calendarEvent.originalEvent ? (openBlock(), createElementBlock("span", _hoisted_4$m, toDisplayString(eventTimeStart.value), 1)) : createCommentVNode("", true),
|
|
2200
|
+
createElementVNode("span", _hoisted_5$k, toDisplayString(__props.calendarEvent.title), 1)
|
|
2201
|
+
], 42, _hoisted_3$z))
|
|
2202
|
+
], 64));
|
|
2203
|
+
};
|
|
2204
|
+
}
|
|
2205
|
+
});
|
|
2206
|
+
const _hoisted_1$Z = ["id"];
|
|
2207
|
+
const _hoisted_2$I = { class: "calendar-month_events" };
|
|
2208
|
+
const _hoisted_3$y = {
|
|
2209
|
+
key: 1,
|
|
2210
|
+
class: "space-reserver"
|
|
2211
|
+
};
|
|
2212
|
+
const _sfc_main$18 = /* @__PURE__ */ defineComponent({
|
|
2213
|
+
__name: "Day",
|
|
2214
|
+
props: {
|
|
2215
|
+
config: {
|
|
2216
|
+
type: Object,
|
|
2217
|
+
required: true
|
|
2218
|
+
},
|
|
2219
|
+
time: {
|
|
2220
|
+
type: Object,
|
|
2221
|
+
required: true
|
|
2222
|
+
},
|
|
2223
|
+
day: {
|
|
2224
|
+
type: Object,
|
|
2225
|
+
required: true
|
|
2226
|
+
},
|
|
2227
|
+
isSelected: {
|
|
2228
|
+
type: Boolean,
|
|
2229
|
+
default: false
|
|
2230
|
+
}
|
|
2231
|
+
},
|
|
2232
|
+
emits: ["eventWasClicked", "eventWasDragged", "updatedPeriod", "dateWasClicked", "dayWasSelected"],
|
|
2233
|
+
setup(__props, { emit: __emit }) {
|
|
2234
|
+
const props2 = __props;
|
|
2235
|
+
const emit2 = __emit;
|
|
2236
|
+
const isActiveDroppable = ref(false);
|
|
2237
|
+
const canBeDropped = computed(() => isActiveDroppable.value);
|
|
2238
|
+
const hideLeadingAndTrailingDate = computed(
|
|
2239
|
+
() => {
|
|
2240
|
+
var _a2;
|
|
2241
|
+
return props2.day.isTrailingOrLeadingDate === true && ((_a2 = props2.config.month) == null ? void 0 : _a2.showTrailingAndLeadingDates) === false;
|
|
2242
|
+
}
|
|
2243
|
+
);
|
|
2244
|
+
const isToday = computed(() => {
|
|
2245
|
+
const { year, month, date: date2 } = props2.time.getAllVariablesFromDateTimeString(props2.day.dateTimeString);
|
|
2246
|
+
return props2.time.dateIsToday(new Date(year, month, date2));
|
|
2247
|
+
});
|
|
2248
|
+
function getMoreEvents() {
|
|
2249
|
+
const { date: date2, month, year } = props2.time.getAllVariablesFromDateTimeString(props2.day.dateTimeString);
|
|
2250
|
+
const selectedDate = new Date(year, month, date2);
|
|
2251
|
+
const week = props2.time.getCalendarWeekDateObjects(selectedDate);
|
|
2252
|
+
const start = week[0];
|
|
2253
|
+
const end = week[6];
|
|
2254
|
+
emit2("updatedPeriod", { start, end, selectedDate });
|
|
2255
|
+
}
|
|
2256
|
+
function handleDragLeave() {
|
|
2257
|
+
isActiveDroppable.value = false;
|
|
2258
|
+
}
|
|
2259
|
+
function handleDragEnd(mouseEvent) {
|
|
2260
|
+
isActiveDroppable.value = false;
|
|
2261
|
+
mouseEvent.stopPropagation();
|
|
2262
|
+
}
|
|
2263
|
+
function handleDrop(dropEvent) {
|
|
2264
|
+
isActiveDroppable.value = false;
|
|
2265
|
+
dropEvent.stopPropagation();
|
|
2266
|
+
if (!dropEvent || !dropEvent.dataTransfer) return;
|
|
2267
|
+
const calendarEvent = JSON.parse(dropEvent.dataTransfer.getData("json"));
|
|
2268
|
+
const eventDroppedOnSameDay = props2.time.dateStringsHaveEqualDates(
|
|
2269
|
+
calendarEvent.time.start,
|
|
2270
|
+
props2.time.dateStringFrom(props2.day.dateTimeString)
|
|
2271
|
+
);
|
|
2272
|
+
if (eventDroppedOnSameDay) return;
|
|
2273
|
+
calendarEvent.time.start = calendarEvent.time.start.replace(
|
|
2274
|
+
/^\d{4}-\d{2}-\d{2}/,
|
|
2275
|
+
props2.time.dateStringFrom(props2.day.dateTimeString)
|
|
2276
|
+
);
|
|
2277
|
+
calendarEvent.time.end = calendarEvent.time.end.replace(
|
|
2278
|
+
/^\d{4}-\d{2}-\d{2}/,
|
|
2279
|
+
props2.time.dateStringFrom(props2.day.dateTimeString)
|
|
2280
|
+
);
|
|
2281
|
+
emit2("eventWasDragged", calendarEvent);
|
|
2282
|
+
}
|
|
2283
|
+
function handleDragOver(e) {
|
|
2284
|
+
isActiveDroppable.value = true;
|
|
2285
|
+
e.preventDefault();
|
|
2286
|
+
return false;
|
|
2287
|
+
}
|
|
2288
|
+
function emitDayWasClicked() {
|
|
2289
|
+
emit2("dateWasClicked", props2.time.dateStringFrom(props2.day.dateTimeString));
|
|
2290
|
+
if (props2.config.isSmall) emit2("dayWasSelected", props2.day);
|
|
2291
|
+
}
|
|
2292
|
+
return (_ctx, _cache) => {
|
|
2293
|
+
return !hideLeadingAndTrailingDate.value ? (openBlock(), createElementBlock("div", {
|
|
2294
|
+
key: 0,
|
|
2295
|
+
id: `day-${__props.time.dateStringFrom(__props.day.dateTimeString)}`,
|
|
2296
|
+
class: normalizeClass(["calendar-month__weekday", {
|
|
2297
|
+
"is-droppable": canBeDropped.value,
|
|
2298
|
+
"trailing-or-leading": __props.day.isTrailingOrLeadingDate,
|
|
2299
|
+
"is-selected": __props.isSelected,
|
|
2300
|
+
"is-today": isToday.value
|
|
2301
|
+
}]),
|
|
2302
|
+
onClick: withModifiers(emitDayWasClicked, ["self"]),
|
|
2303
|
+
onDragleave: handleDragLeave,
|
|
2304
|
+
onDragover: handleDragOver,
|
|
2305
|
+
onDrop: handleDrop,
|
|
2306
|
+
onDragend: handleDragEnd
|
|
2307
|
+
}, [
|
|
2308
|
+
renderSlot(_ctx.$slots, "dayCell", { dayData: __props.day }, () => [
|
|
2309
|
+
createElementVNode("span", {
|
|
2310
|
+
class: "calendar-month__day-date",
|
|
2311
|
+
onClick: emitDayWasClicked
|
|
2312
|
+
}, toDisplayString(__props.day.dateTimeString.substring(8, 10).startsWith("0") ? __props.day.dateTimeString.substring(9, 10) : __props.day.dateTimeString.substring(8, 10)), 1),
|
|
2313
|
+
createElementVNode("div", _hoisted_2$I, [
|
|
2314
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.day.events, (calendarEvent, index2) => {
|
|
2315
|
+
return openBlock(), createElementBlock(Fragment, { key: index2 }, [
|
|
2316
|
+
index2 < 3 ? (openBlock(), createBlock(_sfc_main$19, {
|
|
2317
|
+
key: calendarEvent.id,
|
|
2318
|
+
"calendar-event": calendarEvent,
|
|
2319
|
+
config: __props.config,
|
|
2320
|
+
time: __props.time,
|
|
2321
|
+
day: __props.day,
|
|
2322
|
+
onEventWasClicked: _cache[0] || (_cache[0] = ($event) => emit2("eventWasClicked", $event.clickedEvent))
|
|
2323
|
+
}, {
|
|
2324
|
+
monthEvent: withCtx((p2) => [
|
|
2325
|
+
renderSlot(_ctx.$slots, "monthEvent", {
|
|
2326
|
+
eventData: p2.eventData
|
|
2327
|
+
}, void 0, true)
|
|
2328
|
+
]),
|
|
2329
|
+
_: 2
|
|
2330
|
+
}, 1032, ["calendar-event", "config", "time", "day"])) : createCommentVNode("", true)
|
|
2331
|
+
], 64);
|
|
2332
|
+
}), 128)),
|
|
2333
|
+
__props.day.events.length >= 4 ? (openBlock(), createElementBlock("div", {
|
|
2334
|
+
key: 0,
|
|
2335
|
+
class: "calendar-month__weekday-more",
|
|
2336
|
+
onClick: getMoreEvents
|
|
2337
|
+
}, toDisplayString(unref(getLanguage)(unref(languageKeys).moreEvents, __props.time.CALENDAR_LOCALE)), 1)) : createCommentVNode("", true)
|
|
2338
|
+
])
|
|
2339
|
+
], true)
|
|
2340
|
+
], 42, _hoisted_1$Z)) : (openBlock(), createElementBlock("div", _hoisted_3$y));
|
|
2341
|
+
};
|
|
2342
|
+
}
|
|
2343
|
+
});
|
|
2344
|
+
const Day$1 = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-057882e2"]]);
|
|
2345
|
+
const _hoisted_1$Y = { class: "calendar-month__day-name" };
|
|
2346
|
+
const _sfc_main$17 = /* @__PURE__ */ defineComponent({
|
|
2347
|
+
__name: "WeekDay",
|
|
2348
|
+
props: {
|
|
2349
|
+
day: {}
|
|
2350
|
+
},
|
|
2351
|
+
setup(__props) {
|
|
2352
|
+
return (_ctx, _cache) => {
|
|
2353
|
+
return openBlock(), createElementBlock("span", _hoisted_1$Y, toDisplayString(_ctx.day.dayName), 1);
|
|
2354
|
+
};
|
|
2355
|
+
}
|
|
2356
|
+
});
|
|
2357
|
+
const WeekDay = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-d96cc47c"]]);
|
|
2358
|
+
const _hoisted_1$X = { class: "calendar-month" };
|
|
2359
|
+
const _hoisted_2$H = { class: "calendar-month__week-day-names" };
|
|
2360
|
+
const _hoisted_3$x = { class: "calendar-month__weeks" };
|
|
2361
|
+
const _hoisted_4$l = {
|
|
2362
|
+
key: 0,
|
|
2363
|
+
class: "calendar-month__day_events"
|
|
2364
|
+
};
|
|
2365
|
+
const _sfc_main$16 = /* @__PURE__ */ defineComponent({
|
|
2366
|
+
__name: "Month",
|
|
2367
|
+
props: {
|
|
2368
|
+
config: {
|
|
2369
|
+
type: Object,
|
|
2370
|
+
required: true
|
|
2371
|
+
},
|
|
2372
|
+
time: {
|
|
2373
|
+
type: Object,
|
|
2374
|
+
required: true
|
|
2375
|
+
},
|
|
2376
|
+
period: {
|
|
2377
|
+
type: Object,
|
|
2378
|
+
required: true
|
|
2379
|
+
},
|
|
2380
|
+
eventsProp: {
|
|
2381
|
+
type: Array,
|
|
2382
|
+
default: () => []
|
|
2383
|
+
}
|
|
2384
|
+
},
|
|
2385
|
+
emits: ["editEvent", "deleteEvent", "updatedPeriod", "eventWasClicked", "eventWasDragged", "dateWasClicked"],
|
|
2386
|
+
setup(__props, { emit: __emit }) {
|
|
2387
|
+
const props2 = __props;
|
|
2388
|
+
const emit2 = __emit;
|
|
2389
|
+
const EventPositionHelper = new EventPosition();
|
|
2390
|
+
const month = ref([]);
|
|
2391
|
+
const selectedEvent = ref(null);
|
|
2392
|
+
const selectedEventElement = ref(null);
|
|
2393
|
+
const events = ref(props2.eventsProp);
|
|
2394
|
+
const fullDayEvents = ref([]);
|
|
2395
|
+
const selectedDay = ref(null);
|
|
2396
|
+
function initMonth() {
|
|
2397
|
+
month.value = [];
|
|
2398
|
+
sortOutFullDayEvents();
|
|
2399
|
+
setMonth2();
|
|
2400
|
+
if (props2.config.isSmall) setInitialSelectedDay();
|
|
2401
|
+
}
|
|
2402
|
+
function setMonth2() {
|
|
2403
|
+
const { month: currentMonth, fullYear } = new EDate(props2.period.selectedDate);
|
|
2404
|
+
const calendarMonth = props2.time.getCalendarMonthSplitInWeeks(
|
|
2405
|
+
fullYear,
|
|
2406
|
+
currentMonth
|
|
2407
|
+
);
|
|
2408
|
+
const monthWithEvents = calendarMonth.map((week) => {
|
|
2409
|
+
return week.map((day) => {
|
|
2410
|
+
const dateTimeString = props2.time.getDateTimeStringFromDate(day);
|
|
2411
|
+
const dayEvents = events.value.filter((event) => {
|
|
2412
|
+
return props2.time.dateStringsHaveEqualDates(event.time.start, dateTimeString);
|
|
2413
|
+
});
|
|
2414
|
+
return {
|
|
2415
|
+
isTrailingOrLeadingDate: props2.time.isTrailingOrLeadingDate(day, currentMonth),
|
|
2416
|
+
dayName: props2.time.getLocalizedNameOfWeekday(day),
|
|
2417
|
+
dateTimeString: props2.time.getDateTimeStringFromDate(day),
|
|
2418
|
+
events: dayEvents
|
|
2419
|
+
};
|
|
2420
|
+
});
|
|
2421
|
+
});
|
|
2422
|
+
month.value = EventPositionHelper.positionFullDayEventsInMonth(
|
|
2423
|
+
monthWithEvents,
|
|
2424
|
+
fullDayEvents.value
|
|
2425
|
+
);
|
|
2426
|
+
}
|
|
2427
|
+
function sortOutFullDayEvents() {
|
|
2428
|
+
const timedEvents = [];
|
|
2429
|
+
const fullDayEventsArray = [];
|
|
2430
|
+
for (const calendarEvent of events.value) {
|
|
2431
|
+
if (Helpers.getEventType(calendarEvent, props2.time) === "SINGLE_DAY_TIMED") {
|
|
2432
|
+
timedEvents.push(calendarEvent);
|
|
2433
|
+
} else {
|
|
2434
|
+
fullDayEventsArray.push(calendarEvent);
|
|
2435
|
+
}
|
|
2436
|
+
}
|
|
2437
|
+
events.value = timedEvents;
|
|
2438
|
+
fullDayEvents.value = fullDayEventsArray;
|
|
2439
|
+
}
|
|
2440
|
+
function handleClickOnEvent(event) {
|
|
2441
|
+
emit2("eventWasClicked", event);
|
|
2442
|
+
selectedEventElement.value = event.eventElement;
|
|
2443
|
+
selectedEvent.value = event.clickedEvent;
|
|
2444
|
+
}
|
|
2445
|
+
function handleEventWasDragged(calendarEvent) {
|
|
2446
|
+
emit2("eventWasDragged", calendarEvent);
|
|
2447
|
+
const newEvents = [...events.value, ...fullDayEvents.value].filter(
|
|
2448
|
+
(e) => e.id !== calendarEvent.id
|
|
2449
|
+
);
|
|
2450
|
+
newEvents.push(calendarEvent);
|
|
2451
|
+
events.value = [];
|
|
2452
|
+
fullDayEvents.value = [];
|
|
2453
|
+
events.value = newEvents;
|
|
2454
|
+
initMonth();
|
|
2455
|
+
}
|
|
2456
|
+
function setInitialSelectedDay() {
|
|
2457
|
+
const selectedDayDateString = props2.time.getDateStringFromDate(props2.period.selectedDate);
|
|
2458
|
+
selectedDay.value = month.value.flat().find((day) => {
|
|
2459
|
+
return props2.time.dateStringFrom(day.dateTimeString) === selectedDayDateString;
|
|
2460
|
+
}) || null;
|
|
2461
|
+
}
|
|
2462
|
+
onMounted(() => {
|
|
2463
|
+
initMonth();
|
|
2464
|
+
});
|
|
2465
|
+
return (_ctx, _cache) => {
|
|
2466
|
+
var _a2;
|
|
2467
|
+
return openBlock(), createElementBlock("div", _hoisted_1$X, [
|
|
2468
|
+
createElementVNode("div", _hoisted_2$H, [
|
|
2469
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(month.value[0], (day, dayIndex) => {
|
|
2470
|
+
return openBlock(), createBlock(WeekDay, {
|
|
2471
|
+
key: dayIndex,
|
|
2472
|
+
class: "calendar-month__week-day-name",
|
|
2473
|
+
config: __props.config,
|
|
2474
|
+
day,
|
|
2475
|
+
time: __props.time
|
|
2476
|
+
}, null, 8, ["config", "day", "time"]);
|
|
2477
|
+
}), 128))
|
|
2478
|
+
]),
|
|
2479
|
+
createElementVNode("div", _hoisted_3$x, [
|
|
2480
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(month.value, (week, weekIndex) => {
|
|
2481
|
+
return openBlock(), createElementBlock("div", {
|
|
2482
|
+
key: weekIndex,
|
|
2483
|
+
class: "calendar-month__week"
|
|
2484
|
+
}, [
|
|
2485
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(week, (day, dayIndex) => {
|
|
2486
|
+
var _a3;
|
|
2487
|
+
return openBlock(), createBlock(Day$1, {
|
|
2488
|
+
key: dayIndex,
|
|
2489
|
+
config: __props.config,
|
|
2490
|
+
day,
|
|
2491
|
+
time: __props.time,
|
|
2492
|
+
"is-selected": ((_a3 = selectedDay.value) == null ? void 0 : _a3.dateTimeString) === day.dateTimeString,
|
|
2493
|
+
onEventWasClicked: handleClickOnEvent,
|
|
2494
|
+
onEventWasDragged: handleEventWasDragged,
|
|
2495
|
+
onDateWasClicked: _cache[0] || (_cache[0] = ($event) => emit2("dateWasClicked", $event)),
|
|
2496
|
+
onDayWasSelected: _cache[1] || (_cache[1] = ($event) => selectedDay.value = $event),
|
|
2497
|
+
onUpdatedPeriod: _cache[2] || (_cache[2] = ($event) => emit2("updatedPeriod", $event))
|
|
2498
|
+
}, {
|
|
2499
|
+
monthEvent: withCtx(({ eventData }) => [
|
|
2500
|
+
renderSlot(_ctx.$slots, "monthEvent", { eventData })
|
|
2501
|
+
]),
|
|
2502
|
+
dayCell: withCtx(({ dayData }) => [
|
|
2503
|
+
renderSlot(_ctx.$slots, "dayCell", { dayData })
|
|
2504
|
+
]),
|
|
2505
|
+
_: 2
|
|
2506
|
+
}, 1032, ["config", "day", "time", "is-selected"]);
|
|
2507
|
+
}), 128))
|
|
2508
|
+
]);
|
|
2509
|
+
}), 128))
|
|
2510
|
+
]),
|
|
2511
|
+
!(((_a2 = __props.config.month) == null ? void 0 : _a2.showEventsOnMobileView) === false) ? (openBlock(), createElementBlock("div", _hoisted_4$l, [
|
|
2512
|
+
selectedDay.value ? (openBlock(), createBlock(AgendaEvents, {
|
|
2513
|
+
key: 0,
|
|
2514
|
+
config: __props.config,
|
|
2515
|
+
time: __props.time,
|
|
2516
|
+
day: selectedDay.value,
|
|
2517
|
+
onEventWasClicked: handleClickOnEvent
|
|
2518
|
+
}, null, 8, ["config", "time", "day"])) : createCommentVNode("", true)
|
|
2519
|
+
])) : createCommentVNode("", true),
|
|
2520
|
+
!__props.config.eventDialog || !__props.config.eventDialog.isDisabled ? (openBlock(), createBlock(_sfc_main$1c, {
|
|
2521
|
+
key: 1,
|
|
2522
|
+
"calendar-event-prop": selectedEvent.value,
|
|
2523
|
+
"event-element": selectedEventElement.value,
|
|
2524
|
+
time: __props.time,
|
|
2525
|
+
config: __props.config,
|
|
2526
|
+
onHide: _cache[3] || (_cache[3] = ($event) => selectedEvent.value = null),
|
|
2527
|
+
onEditEvent: _cache[4] || (_cache[4] = ($event) => emit2("editEvent", $event)),
|
|
2528
|
+
onDeleteEvent: _cache[5] || (_cache[5] = ($event) => emit2("deleteEvent", $event))
|
|
2529
|
+
}, {
|
|
2530
|
+
default: withCtx((p2) => [
|
|
2531
|
+
renderSlot(_ctx.$slots, "eventDialog", {
|
|
2532
|
+
eventDialogData: p2.eventDialogData,
|
|
2533
|
+
closeEventDialog: p2.closeEventDialog
|
|
2534
|
+
})
|
|
2535
|
+
]),
|
|
2536
|
+
_: 3
|
|
2537
|
+
}, 8, ["calendar-event-prop", "event-element", "time", "config"])) : createCommentVNode("", true)
|
|
2538
|
+
]);
|
|
2539
|
+
};
|
|
2540
|
+
}
|
|
2541
|
+
});
|
|
2542
|
+
class EventsFilter {
|
|
2543
|
+
constructor(events) {
|
|
2544
|
+
this.events = events;
|
|
2545
|
+
}
|
|
2546
|
+
getEventsForDay(timeInstance, startDateTimeString) {
|
|
2547
|
+
return this.events.filter((event) => this.isEventInDayBoundaries(event, timeInstance, startDateTimeString));
|
|
2548
|
+
}
|
|
2549
|
+
isEventInDayBoundaries(event, timeInstance, startDateTimeString) {
|
|
2550
|
+
const eventIsInDay = timeInstance.dateStringFrom(event.time.start) === timeInstance.dateStringFrom(startDateTimeString);
|
|
2551
|
+
if (timeInstance.dayMode === DAY_MODE.REGULAR) {
|
|
2552
|
+
return eventIsInDay;
|
|
2553
|
+
}
|
|
2554
|
+
if (eventIsInDay && timeInstance.dayMode === DAY_MODE.SHORTENED) {
|
|
2555
|
+
return this.handlePartialDayWithinOneDayBoundary(timeInstance, event);
|
|
2556
|
+
}
|
|
2557
|
+
if (timeInstance.dayMode === DAY_MODE.FLEXIBLE) {
|
|
2558
|
+
return this.handleDayStretchingTwoDates(timeInstance, event, startDateTimeString, eventIsInDay);
|
|
2559
|
+
}
|
|
2560
|
+
return false;
|
|
2561
|
+
}
|
|
2562
|
+
handleDayStretchingTwoDates(timeInstance, event, startDateTimeString, eventIsInDay) {
|
|
2563
|
+
const { hour: dayStartHour } = timeInstance.getHourAndMinutesFromTimePoints(timeInstance.DAY_START);
|
|
2564
|
+
const { hour: dayEndHour } = timeInstance.getHourAndMinutesFromTimePoints(timeInstance.DAY_END);
|
|
2565
|
+
const { hour: eventStartHour } = timeInstance.getAllVariablesFromDateTimeString(event.time.start);
|
|
2566
|
+
const nextDay = timeInstance.addDaysToDateTimeString(1, startDateTimeString);
|
|
2567
|
+
const eventStartsInNextDay = event.time.start.substring(0, 11) === nextDay.substring(0, 11);
|
|
2568
|
+
return eventIsInDay && eventStartHour >= dayStartHour || eventStartsInNextDay && eventStartHour < dayEndHour;
|
|
2569
|
+
}
|
|
2570
|
+
handlePartialDayWithinOneDayBoundary(timeInstance, event) {
|
|
2571
|
+
const { hour: dayStartHour } = timeInstance.getHourAndMinutesFromTimePoints(timeInstance.DAY_START);
|
|
2572
|
+
const { hour: dayEndHour } = timeInstance.getHourAndMinutesFromTimePoints(timeInstance.DAY_END);
|
|
2573
|
+
const { hour: eventStartHour } = timeInstance.getAllVariablesFromDateTimeString(event.time.start);
|
|
2574
|
+
return eventStartHour >= dayStartHour && eventStartHour < dayEndHour;
|
|
2575
|
+
}
|
|
2576
|
+
}
|
|
2577
|
+
class WeekHelper {
|
|
2578
|
+
static getNHoursIntoDayFromHour(hour, timeInstance) {
|
|
2579
|
+
const dayStartHour = Time.getHourFromTimePoints(timeInstance.DAY_START);
|
|
2580
|
+
if (timeInstance.dayMode === DAY_MODE.REGULAR) return hour;
|
|
2581
|
+
if (timeInstance.dayMode === DAY_MODE.SHORTENED || timeInstance.dayMode === DAY_MODE.FLEXIBLE && hour >= dayStartHour) {
|
|
2582
|
+
return hour - dayStartHour;
|
|
2583
|
+
}
|
|
2584
|
+
return 24 - dayStartHour + hour;
|
|
2585
|
+
}
|
|
2586
|
+
static eventSeparator(events, time) {
|
|
2587
|
+
const singleDayTimedEvents = [];
|
|
2588
|
+
const fullDayAndMultipleDayEvents = [];
|
|
2589
|
+
for (const scheduleEvent of events) {
|
|
2590
|
+
const eventType = Helpers.getEventType(scheduleEvent, time);
|
|
2591
|
+
if (["SINGLE_DAY_TIMED", "SINGLE_HYBRID_DAY_TIMED"].includes(eventType)) {
|
|
2592
|
+
singleDayTimedEvents.push(scheduleEvent);
|
|
2593
|
+
} else {
|
|
2594
|
+
fullDayAndMultipleDayEvents.push(scheduleEvent);
|
|
2595
|
+
}
|
|
2596
|
+
}
|
|
2597
|
+
return { fullDayAndMultipleDayEvents, singleDayTimedEvents };
|
|
2598
|
+
}
|
|
2599
|
+
}
|
|
2600
|
+
class DayIntervals extends Time {
|
|
2601
|
+
constructor(intervalMinutes, dayStartDateTimeString, hoursPerDay = 24) {
|
|
2602
|
+
super();
|
|
2603
|
+
__publicField(this, "INTERVAL_MINUTES");
|
|
2604
|
+
__publicField(this, "DAY_START_DATE_TIME_STRING");
|
|
2605
|
+
__publicField(this, "HOURS_PER_DAY", 24);
|
|
2606
|
+
this.INTERVAL_MINUTES = intervalMinutes;
|
|
2607
|
+
this.DAY_START_DATE_TIME_STRING = dayStartDateTimeString;
|
|
2608
|
+
this.HOURS_PER_DAY = hoursPerDay;
|
|
2609
|
+
}
|
|
2610
|
+
getIntervals() {
|
|
2611
|
+
const intervals = [];
|
|
2612
|
+
const numberOfIntervalsInDay = this.HOURS_PER_DAY * (60 / this.INTERVAL_MINUTES);
|
|
2613
|
+
let iteratorDateTimeString = this.DAY_START_DATE_TIME_STRING;
|
|
2614
|
+
while (intervals.length < numberOfIntervalsInDay) {
|
|
2615
|
+
const intervalEnd = this.addMinutesToDateTimeString(this.INTERVAL_MINUTES, iteratorDateTimeString);
|
|
2616
|
+
intervals.push({
|
|
2617
|
+
intervalStart: iteratorDateTimeString,
|
|
2618
|
+
intervalEnd,
|
|
2619
|
+
// Only show a border at the bottom of an interval, when the upcoming interval is not the start of a new hour.
|
|
2620
|
+
// This prevents double borders
|
|
2621
|
+
hasBorder: intervalEnd.substring(14, 16) !== "00"
|
|
2622
|
+
});
|
|
2623
|
+
iteratorDateTimeString = intervalEnd;
|
|
2624
|
+
}
|
|
2625
|
+
return intervals;
|
|
2626
|
+
}
|
|
2627
|
+
}
|
|
2628
|
+
class EventConcurrency {
|
|
2629
|
+
sortEventsAccordingToStartOfTime(events) {
|
|
2630
|
+
function compare2(a2, b2) {
|
|
2631
|
+
if (a2.time.start < b2.time.start) {
|
|
2632
|
+
return -1;
|
|
2633
|
+
}
|
|
2634
|
+
if (a2.time.start > b2.time.start) {
|
|
2635
|
+
return 1;
|
|
2636
|
+
}
|
|
2637
|
+
return 0;
|
|
2638
|
+
}
|
|
2639
|
+
return events.sort(compare2);
|
|
2640
|
+
}
|
|
2641
|
+
/**
|
|
2642
|
+
* Sets the "zIndex" and "nOfPreviousConcurrentEvents" properties on an event
|
|
2643
|
+
*
|
|
2644
|
+
* zIndex - lets the event know with which z-index it should be displayed
|
|
2645
|
+
* nOfPreviousConcurrentEvents - lets the event know, how many other, previous events, are competing for the same width
|
|
2646
|
+
*/
|
|
2647
|
+
calculateConcurrencyForEvents(events) {
|
|
2648
|
+
const updatedEvents = this.sortEventsAccordingToStartOfTime(events);
|
|
2649
|
+
if (!updatedEvents.length) return [];
|
|
2650
|
+
for (const [index2, calendarEvent] of updatedEvents.entries()) {
|
|
2651
|
+
if (index2 === 0) continue;
|
|
2652
|
+
updatedEvents[index2 - 1];
|
|
2653
|
+
let iterator = 0;
|
|
2654
|
+
let nOfConcurrentEvents = 0;
|
|
2655
|
+
while (iterator < index2) {
|
|
2656
|
+
if (updatedEvents[iterator].time.end > calendarEvent.time.start)
|
|
2657
|
+
nOfConcurrentEvents++;
|
|
2658
|
+
iterator++;
|
|
2659
|
+
}
|
|
2660
|
+
if (nOfConcurrentEvents)
|
|
2661
|
+
updatedEvents[index2].nOfPreviousConcurrentEvents = nOfConcurrentEvents;
|
|
2662
|
+
}
|
|
2663
|
+
for (let index2 = updatedEvents.length - 1; index2 >= 0; index2--) {
|
|
2664
|
+
let nOfUpcomingConcurrentEvents = 0;
|
|
2665
|
+
let iterator = updatedEvents.length - 1;
|
|
2666
|
+
while (iterator > index2) {
|
|
2667
|
+
if (updatedEvents[iterator].time.start < updatedEvents[index2].time.end) {
|
|
2668
|
+
nOfUpcomingConcurrentEvents++;
|
|
2669
|
+
}
|
|
2670
|
+
iterator--;
|
|
2671
|
+
}
|
|
2672
|
+
const nfOfPreviousEvents = updatedEvents[index2].nOfPreviousConcurrentEvents || 0;
|
|
2673
|
+
updatedEvents[index2].totalConcurrentEvents = nfOfPreviousEvents + nOfUpcomingConcurrentEvents + 1;
|
|
2674
|
+
}
|
|
2675
|
+
return events;
|
|
2676
|
+
}
|
|
2677
|
+
}
|
|
2678
|
+
var DRAG_N_RESIZE_DIRECTION = /* @__PURE__ */ ((DRAG_N_RESIZE_DIRECTION2) => {
|
|
2679
|
+
DRAG_N_RESIZE_DIRECTION2["BACKWARDS"] = "backwards";
|
|
2680
|
+
DRAG_N_RESIZE_DIRECTION2["FORWARDS"] = "forwards";
|
|
2681
|
+
return DRAG_N_RESIZE_DIRECTION2;
|
|
2682
|
+
})(DRAG_N_RESIZE_DIRECTION || {});
|
|
2683
|
+
class EventChange {
|
|
2684
|
+
constructor(timeInstance, date2) {
|
|
2685
|
+
__publicField(this, "dayStart", "");
|
|
2686
|
+
__publicField(this, "dayEnd", "");
|
|
2687
|
+
this.timeInstance = timeInstance;
|
|
2688
|
+
this.date = date2;
|
|
2689
|
+
this.setDayBoundariesTimeStrings();
|
|
2690
|
+
}
|
|
2691
|
+
canEventBeMoved(event, direction) {
|
|
2692
|
+
if (this.timeInstance.dayMode !== DAY_MODE.FLEXIBLE) {
|
|
2693
|
+
return this.handleNonFlexibleDays(direction, event);
|
|
2694
|
+
}
|
|
2695
|
+
return this.handleFlexibleDays(direction, event);
|
|
2696
|
+
}
|
|
2697
|
+
handleNonFlexibleDays(direction, event) {
|
|
2698
|
+
if (direction === DRAG_N_RESIZE_DIRECTION.FORWARDS) {
|
|
2699
|
+
return this.handleForwardsMoveForNonFlexibleDays(event);
|
|
2700
|
+
}
|
|
2701
|
+
return this.handleBackwardsMoveForNonFlexibleDays(event);
|
|
2702
|
+
}
|
|
2703
|
+
handleFlexibleDays(direction, event) {
|
|
2704
|
+
if (direction == DRAG_N_RESIZE_DIRECTION.FORWARDS) {
|
|
2705
|
+
return this.handleForwardsMoveForFlexibleDays(event);
|
|
2706
|
+
}
|
|
2707
|
+
return this.handleBackwardsMoveForFlexibleDays(event);
|
|
2708
|
+
}
|
|
2709
|
+
handleForwardsMoveForNonFlexibleDays(event) {
|
|
2710
|
+
const endTimePlus15Minutes = this.timeInstance.addMinutesToDateTimeString(15, event.time.end);
|
|
2711
|
+
const endTimeString = this.timeInstance.timeStringFrom(endTimePlus15Minutes);
|
|
2712
|
+
const newEndDateString = this.timeInstance.dateStringFrom(endTimePlus15Minutes);
|
|
2713
|
+
if (newEndDateString > this.date) return false;
|
|
2714
|
+
return endTimeString <= this.dayEnd;
|
|
2715
|
+
}
|
|
2716
|
+
handleBackwardsMoveForNonFlexibleDays(event) {
|
|
2717
|
+
const startTimeMinus15Minutes = this.timeInstance.addMinutesToDateTimeString(-15, event.time.start);
|
|
2718
|
+
const startTimeString = this.timeInstance.timeStringFrom(startTimeMinus15Minutes);
|
|
2719
|
+
const newStartDateString = this.timeInstance.dateStringFrom(startTimeMinus15Minutes);
|
|
2720
|
+
if (newStartDateString < this.date) return false;
|
|
2721
|
+
return startTimeString >= this.dayStart;
|
|
2722
|
+
}
|
|
2723
|
+
handleForwardsMoveForFlexibleDays(event) {
|
|
2724
|
+
const endTimePlus15Minutes = this.timeInstance.addMinutesToDateTimeString(15, event.time.end);
|
|
2725
|
+
const endTimeString = this.timeInstance.timeStringFrom(endTimePlus15Minutes);
|
|
2726
|
+
const newEndDateString = this.timeInstance.dateStringFrom(endTimePlus15Minutes);
|
|
2727
|
+
if (newEndDateString === this.date) return true;
|
|
2728
|
+
return endTimeString <= this.dayEnd;
|
|
2729
|
+
}
|
|
2730
|
+
handleBackwardsMoveForFlexibleDays(event) {
|
|
2731
|
+
const startTimeMinus15Minutes = this.timeInstance.addMinutesToDateTimeString(-15, event.time.start);
|
|
2732
|
+
const startTimeString = this.timeInstance.timeStringFrom(startTimeMinus15Minutes);
|
|
2733
|
+
const newStartDateString = this.timeInstance.dateStringFrom(startTimeMinus15Minutes);
|
|
2734
|
+
if (newStartDateString > this.date) return true;
|
|
2735
|
+
return startTimeString >= this.dayStart;
|
|
2736
|
+
}
|
|
2737
|
+
setDayBoundariesTimeStrings() {
|
|
2738
|
+
const startHour = this.timeInstance.getHourAndMinutesFromTimePoints(this.timeInstance.DAY_START).hour;
|
|
2739
|
+
const endHour = this.timeInstance.getHourAndMinutesFromTimePoints(this.timeInstance.DAY_END).hour;
|
|
2740
|
+
const startHourString = this.timeInstance.doubleDigit(startHour);
|
|
2741
|
+
this.dayStart = `${startHourString}:00`;
|
|
2742
|
+
const endHourString = this.timeInstance.doubleDigit(endHour);
|
|
2743
|
+
this.dayEnd = `${endHourString}:00`;
|
|
2744
|
+
}
|
|
2745
|
+
}
|
|
2746
|
+
const _hoisted_1$W = ["data-ref"];
|
|
2747
|
+
const _hoisted_2$G = { class: "calendar-week__event-row is-title" };
|
|
2748
|
+
const _hoisted_3$w = { class: "calendar-week__event-row is-time" };
|
|
2749
|
+
const _hoisted_4$k = {
|
|
2750
|
+
key: 0,
|
|
2751
|
+
class: "calendar-week__event-row is-location"
|
|
2752
|
+
};
|
|
2753
|
+
const _hoisted_5$j = {
|
|
2754
|
+
key: 1,
|
|
2755
|
+
class: "calendar-week__event-row is-with"
|
|
2756
|
+
};
|
|
2757
|
+
const _hoisted_6$e = {
|
|
2758
|
+
key: 2,
|
|
2759
|
+
class: "calendar-week__event-row is-topic"
|
|
2760
|
+
};
|
|
2761
|
+
const _hoisted_7$a = {
|
|
2762
|
+
key: 3,
|
|
2763
|
+
class: "calendar-week__event-row is-description"
|
|
2764
|
+
};
|
|
2765
|
+
const _hoisted_8$6 = ["innerHTML"];
|
|
2766
|
+
const _sfc_main$15 = /* @__PURE__ */ defineComponent({
|
|
2767
|
+
__name: "DayEvent",
|
|
2768
|
+
props: {
|
|
2769
|
+
eventProp: {
|
|
2770
|
+
type: Object,
|
|
2771
|
+
required: true
|
|
2772
|
+
},
|
|
2773
|
+
time: {
|
|
2774
|
+
type: Object,
|
|
2775
|
+
required: true
|
|
2776
|
+
},
|
|
2777
|
+
config: {
|
|
2778
|
+
type: Object,
|
|
2779
|
+
required: true
|
|
2780
|
+
},
|
|
2781
|
+
dayInfo: {
|
|
2782
|
+
type: Object,
|
|
2783
|
+
required: true
|
|
2784
|
+
},
|
|
2785
|
+
mode: {
|
|
2786
|
+
type: String,
|
|
2787
|
+
required: true
|
|
2788
|
+
}
|
|
2789
|
+
},
|
|
2790
|
+
emits: ["eventWasClicked", "eventWasResized", "eventWasDragged", "dragStart", "dragEnd"],
|
|
2791
|
+
setup(__props, { emit: __emit }) {
|
|
2792
|
+
const props2 = __props;
|
|
2793
|
+
const emit2 = __emit;
|
|
2794
|
+
const event = ref(props2.eventProp);
|
|
2795
|
+
const icons = ref({
|
|
2796
|
+
clock: "clock",
|
|
2797
|
+
user: "user",
|
|
2798
|
+
description: "description",
|
|
2799
|
+
location: "location_on",
|
|
2800
|
+
topic: "topic"
|
|
2801
|
+
});
|
|
2802
|
+
const showResizeElements = ref(false);
|
|
2803
|
+
const eventTransformValue = ref("initial");
|
|
2804
|
+
const eventZIndexValue = ref("initial");
|
|
2805
|
+
const dayElement = ref(null);
|
|
2806
|
+
const resizingStartingPoint = ref(void 0);
|
|
2807
|
+
const resizingStartingPointEndOfTime = ref(props2.eventProp.time.end);
|
|
2808
|
+
const resizingStartingPointStartOfTime = ref(props2.eventProp.time.start);
|
|
2809
|
+
const resizingDirection = ref("");
|
|
2810
|
+
const changeInQuarterHoursEventStart = ref(0);
|
|
2811
|
+
const changeInQuarterHoursEventEnd = ref(0);
|
|
2812
|
+
const isEditable = ref(props2.eventProp.isEditable || false);
|
|
2813
|
+
const colors = ref(EVENT_COLORS);
|
|
2814
|
+
const eventColor = ref("#fff");
|
|
2815
|
+
const eventBackgroundColor = ref("");
|
|
2816
|
+
const isResizing = ref(false);
|
|
2817
|
+
const canDrag = ref(false);
|
|
2818
|
+
const clientYDragStart = ref(null);
|
|
2819
|
+
const clientXDragStart = ref(null);
|
|
2820
|
+
const changeInQuartersOnDrag = ref(0);
|
|
2821
|
+
const changeInDaysOnDrag = ref(0);
|
|
2822
|
+
ref(false);
|
|
2823
|
+
const timeStartDragStart = ref(props2.eventProp.time.start);
|
|
2824
|
+
const timeEndDragStart = ref(props2.eventProp.time.end);
|
|
2825
|
+
const dragMoveListenerNameAndCallbacks = [
|
|
2826
|
+
["mousemove", handleDrag],
|
|
2827
|
+
["touchmove", handleDrag],
|
|
2828
|
+
["mouseup", onMouseUpWhenDragging],
|
|
2829
|
+
["touchend", onMouseUpWhenDragging]
|
|
2830
|
+
];
|
|
2831
|
+
const eventChangeHelper = computed(() => {
|
|
2832
|
+
const eventCurrentDay = props2.time.addDaysToDateTimeString(changeInDaysOnDrag.value, props2.dayInfo.dateTimeString);
|
|
2833
|
+
return new EventChange(props2.time, props2.time.dateStringFrom(eventCurrentDay));
|
|
2834
|
+
});
|
|
2835
|
+
const isCustomEvent = computed(() => {
|
|
2836
|
+
if (Array.isArray(props2.eventProp.isCustom)) {
|
|
2837
|
+
return props2.eventProp.isCustom.includes(props2.mode);
|
|
2838
|
+
}
|
|
2839
|
+
return props2.eventProp.isCustom || false;
|
|
2840
|
+
});
|
|
2841
|
+
const getEventTime = computed(() => {
|
|
2842
|
+
return `${props2.time.getLocalizedTime(event.value.time.start)} - ${props2.time.getLocalizedTime(event.value.time.end)}`;
|
|
2843
|
+
});
|
|
2844
|
+
const timePointsInDay = computed(() => props2.time.HOURS_PER_DAY * 100);
|
|
2845
|
+
const timePointsInOneMinute = computed(() => 100 / 60);
|
|
2846
|
+
const getLeftRule = computed(() => {
|
|
2847
|
+
if (!event.value.totalConcurrentEvents || !event.value.nOfPreviousConcurrentEvents) {
|
|
2848
|
+
return 0;
|
|
2849
|
+
}
|
|
2850
|
+
return event.value.nOfPreviousConcurrentEvents / event.value.totalConcurrentEvents * 100;
|
|
2851
|
+
});
|
|
2852
|
+
const getWidthRule = computed(() => 100 - getLeftRule.value);
|
|
2853
|
+
const getBorderRule = computed(() => !event.value.nOfPreviousConcurrentEvents ? "none" : "1px solid #fff");
|
|
2854
|
+
const eventIsLongerThan30Minutes = computed(() => {
|
|
2855
|
+
const { hour: startHour, minutes: startMinutes } = props2.time.getAllVariablesFromDateTimeString(event.value.time.start);
|
|
2856
|
+
const { hour: endHour, minutes: endMinutes } = props2.time.getAllVariablesFromDateTimeString(event.value.time.end);
|
|
2857
|
+
const startDateMS = new Date(0, 0, 0, startHour, startMinutes).getTime();
|
|
2858
|
+
const endDateMS = new Date(0, 0, 0, endHour, endMinutes).getTime();
|
|
2859
|
+
return endDateMS - startDateMS >= 18e5;
|
|
2860
|
+
});
|
|
2861
|
+
const hasDisabledDragAndDrop = computed(() => {
|
|
2862
|
+
return !!(props2.eventProp.disableDnD && props2.eventProp.disableDnD.includes(props2.mode));
|
|
2863
|
+
});
|
|
2864
|
+
const hasDisabledResize = computed(() => {
|
|
2865
|
+
return !!(props2.eventProp.disableResize && props2.eventProp.disableResize.includes(props2.mode));
|
|
2866
|
+
});
|
|
2867
|
+
const requiredStyles = computed(() => ({
|
|
2868
|
+
top: getPositionInDay(event.value.time.start),
|
|
2869
|
+
height: getLengthOfEvent(event.value.time.start, event.value.time.end),
|
|
2870
|
+
left: `${getLeftRule.value}%`,
|
|
2871
|
+
width: `${getWidthRule.value}%`,
|
|
2872
|
+
transform: eventTransformValue.value,
|
|
2873
|
+
zIndex: eventZIndexValue.value
|
|
2874
|
+
}));
|
|
2875
|
+
function getPositionInDay(dateTimeString) {
|
|
2876
|
+
return `${props2.time.getPercentageOfDayFromDateTimeString(dateTimeString, props2.time.DAY_START, props2.time.DAY_END).toString()}%`;
|
|
2877
|
+
}
|
|
2878
|
+
function getLengthOfEvent(start, end) {
|
|
2879
|
+
const startOfEvent = props2.time.getPercentageOfDayFromDateTimeString(start, props2.time.DAY_START, props2.time.DAY_END);
|
|
2880
|
+
const endOfEvent = props2.time.getPercentageOfDayFromDateTimeString(end, props2.time.DAY_START, props2.time.DAY_END);
|
|
2881
|
+
const length = Math.abs(endOfEvent - startOfEvent);
|
|
2882
|
+
return `${length}%`;
|
|
2883
|
+
}
|
|
2884
|
+
function handleClickOnEvent(event2) {
|
|
2885
|
+
const eventElement = getEventElementFromChildElement(event2);
|
|
2886
|
+
if (!eventElement) return;
|
|
2887
|
+
emit2("eventWasClicked", {
|
|
2888
|
+
clickedEvent: props2.eventProp,
|
|
2889
|
+
eventElement
|
|
2890
|
+
});
|
|
2891
|
+
}
|
|
2892
|
+
function getEventElementFromChildElement(event2) {
|
|
2893
|
+
const eventTarget = event2.target;
|
|
2894
|
+
if (!eventTarget || typeof eventTarget.className.includes !== "function") return null;
|
|
2895
|
+
if (eventTarget.className.includes(".calendar-week__event")) return event2.target;
|
|
2896
|
+
return eventTarget.closest(".calendar-week__event");
|
|
2897
|
+
}
|
|
2898
|
+
function onMouseMoveResize(event2) {
|
|
2899
|
+
const eventsContainer = document.querySelector(".calendar-week__events");
|
|
2900
|
+
if (!eventsContainer) return;
|
|
2901
|
+
if (typeof resizingStartingPoint.value === "undefined") {
|
|
2902
|
+
resizingStartingPoint.value = event2.clientY;
|
|
2903
|
+
}
|
|
2904
|
+
const cursorPositionY = event2.clientY;
|
|
2905
|
+
const nOfPixelsDistance = cursorPositionY - resizingStartingPoint.value;
|
|
2906
|
+
const eventsContainerHeight = eventsContainer.clientHeight;
|
|
2907
|
+
const percentageOfDayChanged = nOfPixelsDistance / eventsContainerHeight * 100;
|
|
2908
|
+
const changeInTimePoints = timePointsInDay.value / 100 * percentageOfDayChanged;
|
|
2909
|
+
const changeInMinutes = getMinutesFromTimePoints(changeInTimePoints);
|
|
2910
|
+
if (resizingDirection.value === "down") {
|
|
2911
|
+
changeInQuarterHoursEventEnd.value = Math.floor(changeInMinutes / 15);
|
|
2912
|
+
} else {
|
|
2913
|
+
changeInQuarterHoursEventStart.value = Math.floor(changeInMinutes / 15);
|
|
2914
|
+
}
|
|
2915
|
+
}
|
|
2916
|
+
function onMouseUpWhenResizing() {
|
|
2917
|
+
stopResizing();
|
|
2918
|
+
}
|
|
2919
|
+
function resizeEvent(direction) {
|
|
2920
|
+
isResizing.value = true;
|
|
2921
|
+
resizingDirection.value = direction;
|
|
2922
|
+
document.addEventListener("mousemove", onMouseMoveResize);
|
|
2923
|
+
document.addEventListener("mouseup", onMouseUpWhenResizing);
|
|
2924
|
+
}
|
|
2925
|
+
function stopResizing() {
|
|
2926
|
+
document.removeEventListener("mousemove", onMouseMoveResize);
|
|
2927
|
+
document.removeEventListener("mouseup", onMouseUpWhenResizing);
|
|
2928
|
+
resetResizingValues();
|
|
2929
|
+
emit2("eventWasResized", event.value);
|
|
2930
|
+
isResizing.value = false;
|
|
2931
|
+
}
|
|
2932
|
+
function resetResizingValues() {
|
|
2933
|
+
resizingStartingPoint.value = void 0;
|
|
2934
|
+
resizingStartingPointStartOfTime.value = props2.eventProp.time.start;
|
|
2935
|
+
resizingStartingPointEndOfTime.value = props2.eventProp.time.end;
|
|
2936
|
+
changeInQuarterHoursEventEnd.value = 0;
|
|
2937
|
+
}
|
|
2938
|
+
function getMinutesFromTimePoints(timePoints) {
|
|
2939
|
+
return timePoints / timePointsInOneMinute.value;
|
|
2940
|
+
}
|
|
2941
|
+
function setColors() {
|
|
2942
|
+
var _a2;
|
|
2943
|
+
if (event.value.colorScheme && ((_a2 = props2.config.style) == null ? void 0 : _a2.colorSchemes) && props2.config.style.colorSchemes[event.value.colorScheme]) {
|
|
2944
|
+
eventColor.value = props2.config.style.colorSchemes[event.value.colorScheme].color;
|
|
2945
|
+
eventBackgroundColor.value = props2.config.style.colorSchemes[event.value.colorScheme].backgroundColor;
|
|
2946
|
+
return;
|
|
2947
|
+
}
|
|
2948
|
+
if (event.value.color) {
|
|
2949
|
+
eventColor.value = "#fff";
|
|
2950
|
+
eventBackgroundColor.value = colors.value[event.value.color];
|
|
2951
|
+
return;
|
|
2952
|
+
}
|
|
2953
|
+
eventBackgroundColor.value = colors.value.blue;
|
|
2954
|
+
}
|
|
2955
|
+
function initDrag(domEvent) {
|
|
2956
|
+
if (!event.value.isEditable || hasDisabledDragAndDrop.value) return;
|
|
2957
|
+
emit2("dragStart");
|
|
2958
|
+
dragMoveListenerNameAndCallbacks.forEach(([name, callback]) => {
|
|
2959
|
+
document.addEventListener(name, callback);
|
|
2960
|
+
});
|
|
2961
|
+
if (Helpers.isUIEventTouchEvent(domEvent)) {
|
|
2962
|
+
setInitialDragValues(
|
|
2963
|
+
domEvent.touches[0].clientX,
|
|
2964
|
+
domEvent.touches[0].clientY
|
|
2965
|
+
);
|
|
2966
|
+
} else {
|
|
2967
|
+
setInitialDragValues(domEvent.clientX, domEvent.clientY);
|
|
2968
|
+
}
|
|
2969
|
+
}
|
|
2970
|
+
function setInitialDragValues(clientX, clientY) {
|
|
2971
|
+
canDrag.value = true;
|
|
2972
|
+
eventZIndexValue.value = 10;
|
|
2973
|
+
clientYDragStart.value = clientY;
|
|
2974
|
+
clientXDragStart.value = clientX;
|
|
2975
|
+
timeStartDragStart.value = event.value.time.start;
|
|
2976
|
+
timeEndDragStart.value = event.value.time.end;
|
|
2977
|
+
}
|
|
2978
|
+
function onMouseUpWhenDragging() {
|
|
2979
|
+
emit2("dragEnd");
|
|
2980
|
+
handleDragEnd();
|
|
2981
|
+
}
|
|
2982
|
+
function handleDragEnd() {
|
|
2983
|
+
canDrag.value = false;
|
|
2984
|
+
eventZIndexValue.value = "initial";
|
|
2985
|
+
dragMoveListenerNameAndCallbacks.forEach(([name, callback]) => {
|
|
2986
|
+
document.removeEventListener(name, callback);
|
|
2987
|
+
});
|
|
2988
|
+
const dayChanged = changeInDaysOnDrag.value <= -1 || changeInDaysOnDrag.value > 0;
|
|
2989
|
+
const timeChanged = changeInQuartersOnDrag.value <= -1 || changeInQuartersOnDrag.value > 0;
|
|
2990
|
+
if (dayChanged || timeChanged) emit2("eventWasDragged", event.value);
|
|
2991
|
+
}
|
|
2992
|
+
function handleDrag(mouseEvent) {
|
|
2993
|
+
if (isResizing.value || !canDrag.value || !clientYDragStart.value) return;
|
|
2994
|
+
if (Helpers.isUIEventTouchEvent(mouseEvent)) {
|
|
2995
|
+
handleVerticalDrag(mouseEvent.touches[0].clientY);
|
|
2996
|
+
handleHorizontalDrag(mouseEvent.touches[0].clientX);
|
|
2997
|
+
} else {
|
|
2998
|
+
handleVerticalDrag(mouseEvent.clientY);
|
|
2999
|
+
handleHorizontalDrag(mouseEvent.clientX);
|
|
3000
|
+
}
|
|
3001
|
+
}
|
|
3002
|
+
function handleVerticalDrag(clientY) {
|
|
3003
|
+
const eventsContainer = document.querySelector(".calendar-week__events");
|
|
3004
|
+
if (!eventsContainer || !clientYDragStart.value) return;
|
|
3005
|
+
const nOfPixelsDistance = clientY - clientYDragStart.value;
|
|
3006
|
+
const eventsContainerHeight = eventsContainer.clientHeight;
|
|
3007
|
+
const percentageOfDayChanged = nOfPixelsDistance / eventsContainerHeight * 100;
|
|
3008
|
+
const changeInTimePoints = timePointsInDay.value / 100 * percentageOfDayChanged;
|
|
3009
|
+
const changeInMinutes = getMinutesFromTimePoints(changeInTimePoints);
|
|
3010
|
+
changeInQuartersOnDrag.value = changeInMinutes < 0 ? Math.ceil(changeInMinutes / 15) : Math.floor(changeInMinutes / 15);
|
|
3011
|
+
}
|
|
3012
|
+
function handleHorizontalDrag(clientX) {
|
|
3013
|
+
if (!dayElement.value || !clientXDragStart.value) return;
|
|
3014
|
+
const dayWidth = dayElement.value.clientWidth;
|
|
3015
|
+
const changeInPixelsX = clientX - clientXDragStart.value;
|
|
3016
|
+
changeInDaysOnDrag.value = changeInPixelsX < 0 ? Math.ceil(changeInPixelsX / dayWidth) : Math.floor(changeInPixelsX / dayWidth);
|
|
3017
|
+
}
|
|
3018
|
+
function updatePositionOnDrag() {
|
|
3019
|
+
const minutesChangedVertically = changeInQuartersOnDrag.value * 15;
|
|
3020
|
+
const minutesChangedHorizontally = changeInDaysOnDrag.value * 1440;
|
|
3021
|
+
event.value.time.start = props2.time.addMinutesToDateTimeString(
|
|
3022
|
+
minutesChangedVertically + minutesChangedHorizontally,
|
|
3023
|
+
timeStartDragStart.value
|
|
3024
|
+
);
|
|
3025
|
+
event.value.time.end = props2.time.addMinutesToDateTimeString(
|
|
3026
|
+
minutesChangedVertically + minutesChangedHorizontally,
|
|
3027
|
+
timeEndDragStart.value
|
|
3028
|
+
);
|
|
3029
|
+
}
|
|
3030
|
+
watch(changeInQuarterHoursEventStart, (newValue, oldValue) => {
|
|
3031
|
+
const newStartOfTimeDateTimeString = props2.time.addMinutesToDateTimeString(
|
|
3032
|
+
15 * newValue,
|
|
3033
|
+
resizingStartingPointStartOfTime.value
|
|
3034
|
+
);
|
|
3035
|
+
const direction = newValue > oldValue ? DRAG_N_RESIZE_DIRECTION.FORWARDS : DRAG_N_RESIZE_DIRECTION.BACKWARDS;
|
|
3036
|
+
const eventCanBeResizedFurther = eventChangeHelper.value.canEventBeMoved(event.value, direction);
|
|
3037
|
+
if (newStartOfTimeDateTimeString < event.value.time.end && eventCanBeResizedFurther) {
|
|
3038
|
+
event.value.time.start = newStartOfTimeDateTimeString;
|
|
3039
|
+
}
|
|
3040
|
+
});
|
|
3041
|
+
watch(changeInQuarterHoursEventEnd, (newValue, oldValue) => {
|
|
3042
|
+
const newEndOfTimeDateTimeString = props2.time.addMinutesToDateTimeString(
|
|
3043
|
+
15 * newValue,
|
|
3044
|
+
resizingStartingPointEndOfTime.value
|
|
3045
|
+
);
|
|
3046
|
+
const direction = newValue > oldValue ? DRAG_N_RESIZE_DIRECTION.FORWARDS : DRAG_N_RESIZE_DIRECTION.BACKWARDS;
|
|
3047
|
+
const eventCanBeResizedFurther = eventChangeHelper.value.canEventBeMoved(event.value, direction);
|
|
3048
|
+
if (newEndOfTimeDateTimeString > event.value.time.start && eventCanBeResizedFurther) {
|
|
3049
|
+
event.value.time.end = newEndOfTimeDateTimeString;
|
|
3050
|
+
}
|
|
3051
|
+
});
|
|
3052
|
+
watch(changeInQuartersOnDrag, (newValue, oldValue) => {
|
|
3053
|
+
const direction = newValue > oldValue ? DRAG_N_RESIZE_DIRECTION.FORWARDS : DRAG_N_RESIZE_DIRECTION.BACKWARDS;
|
|
3054
|
+
const eventCanBeDraggedFurther = eventChangeHelper.value.canEventBeMoved(event.value, direction);
|
|
3055
|
+
if (!eventCanBeDraggedFurther) return;
|
|
3056
|
+
updatePositionOnDrag();
|
|
3057
|
+
});
|
|
3058
|
+
watch(changeInDaysOnDrag, (newValue) => {
|
|
3059
|
+
if (!dayElement.value) return;
|
|
3060
|
+
const upcomingDaysInWeek = props2.dayInfo.daysTotalN - (props2.dayInfo.thisDayIndex + 1);
|
|
3061
|
+
const previousDaysInWeek = 0 - props2.dayInfo.thisDayIndex;
|
|
3062
|
+
if (newValue > upcomingDaysInWeek || newValue < previousDaysInWeek) return;
|
|
3063
|
+
const pixelsToTransform = newValue * dayElement.value.clientWidth;
|
|
3064
|
+
eventTransformValue.value = `translateX(${pixelsToTransform}px)`;
|
|
3065
|
+
updatePositionOnDrag();
|
|
3066
|
+
});
|
|
3067
|
+
onMounted(() => {
|
|
3068
|
+
dayElement.value = document.querySelector(".calendar-week__day");
|
|
3069
|
+
setColors();
|
|
3070
|
+
});
|
|
3071
|
+
function handleFocus() {
|
|
3072
|
+
if (isEditable.value && !hasDisabledResize.value) {
|
|
3073
|
+
showResizeElements.value = true;
|
|
3074
|
+
}
|
|
3075
|
+
}
|
|
3076
|
+
function handleBlur() {
|
|
3077
|
+
showResizeElements.value = false;
|
|
3078
|
+
}
|
|
3079
|
+
return (_ctx, _cache) => {
|
|
3080
|
+
return openBlock(), createElementBlock("div", {
|
|
3081
|
+
class: normalizeClass(["calendar-week__event is-event", {
|
|
3082
|
+
"is-editable": isEditable.value,
|
|
3083
|
+
"has-disabled-dnd": hasDisabledDragAndDrop.value
|
|
3084
|
+
}]),
|
|
3085
|
+
style: normalizeStyle({
|
|
3086
|
+
...requiredStyles.value,
|
|
3087
|
+
border: getBorderRule.value
|
|
3088
|
+
}),
|
|
3089
|
+
"data-ref": `event-${event.value.id}`,
|
|
3090
|
+
tabindex: "0",
|
|
3091
|
+
onClick: handleClickOnEvent,
|
|
3092
|
+
onMouseenter: handleFocus,
|
|
3093
|
+
onMouseleave: handleBlur,
|
|
3094
|
+
onFocus: handleFocus,
|
|
3095
|
+
onBlur: handleBlur,
|
|
3096
|
+
onMousedown: initDrag,
|
|
3097
|
+
onTouchstart: initDrag
|
|
3098
|
+
}, [
|
|
3099
|
+
!isCustomEvent.value ? (openBlock(), createElementBlock("div", {
|
|
3100
|
+
key: 0,
|
|
3101
|
+
class: "calendar-week__event-info-wrapper p-05",
|
|
3102
|
+
style: normalizeStyle({
|
|
3103
|
+
color: eventColor.value,
|
|
3104
|
+
width: "100%",
|
|
3105
|
+
height: "100%",
|
|
3106
|
+
backgroundColor: eventBackgroundColor.value
|
|
3107
|
+
})
|
|
3108
|
+
}, [
|
|
3109
|
+
createElementVNode("div", _hoisted_2$G, toDisplayString(event.value.title), 1),
|
|
3110
|
+
createElementVNode("div", _hoisted_3$w, [
|
|
3111
|
+
createVNode(unref(_sfc_main$q), {
|
|
3112
|
+
icon: icons.value.clock,
|
|
3113
|
+
class: "calendar-week__event-icon"
|
|
3114
|
+
}, null, 8, ["icon"]),
|
|
3115
|
+
createElementVNode("span", null, toDisplayString(getEventTime.value), 1)
|
|
3116
|
+
]),
|
|
3117
|
+
event.value.location ? (openBlock(), createElementBlock("div", _hoisted_4$k, [
|
|
3118
|
+
createVNode(unref(_sfc_main$q), {
|
|
3119
|
+
icon: icons.value.location,
|
|
3120
|
+
class: "calendar-week__event-icon"
|
|
3121
|
+
}, null, 8, ["icon"]),
|
|
3122
|
+
createElementVNode("span", null, toDisplayString(event.value.location), 1)
|
|
3123
|
+
])) : createCommentVNode("", true),
|
|
3124
|
+
event.value.with ? (openBlock(), createElementBlock("div", _hoisted_5$j, [
|
|
3125
|
+
createVNode(unref(_sfc_main$q), {
|
|
3126
|
+
icon: icons.value.user,
|
|
3127
|
+
class: "calendar-week__event-icon"
|
|
3128
|
+
}, null, 8, ["icon"]),
|
|
3129
|
+
createElementVNode("span", null, toDisplayString(event.value.with), 1)
|
|
3130
|
+
])) : createCommentVNode("", true),
|
|
3131
|
+
event.value.topic ? (openBlock(), createElementBlock("div", _hoisted_6$e, [
|
|
3132
|
+
createVNode(unref(_sfc_main$q), {
|
|
3133
|
+
icon: icons.value.topic,
|
|
3134
|
+
class: "calendar-week__event-icon"
|
|
3135
|
+
}, null, 8, ["icon"]),
|
|
3136
|
+
createElementVNode("span", null, toDisplayString(event.value.topic), 1)
|
|
3137
|
+
])) : createCommentVNode("", true),
|
|
3138
|
+
event.value.description ? (openBlock(), createElementBlock("div", _hoisted_7$a, [
|
|
3139
|
+
createVNode(unref(_sfc_main$q), {
|
|
3140
|
+
icon: icons.value.description,
|
|
3141
|
+
class: "calendar-week__event-icon"
|
|
3142
|
+
}, null, 8, ["icon"]),
|
|
3143
|
+
createElementVNode("p", {
|
|
3144
|
+
innerHTML: event.value.description
|
|
3145
|
+
}, null, 8, _hoisted_8$6)
|
|
3146
|
+
])) : createCommentVNode("", true),
|
|
3147
|
+
eventIsLongerThan30Minutes.value ? (openBlock(), createElementBlock("div", {
|
|
3148
|
+
key: 4,
|
|
3149
|
+
class: "calendar-week__event-blend-out",
|
|
3150
|
+
style: normalizeStyle({
|
|
3151
|
+
backgroundImage: `linear-gradient(to bottom, transparent, ${eventBackgroundColor.value})`
|
|
3152
|
+
})
|
|
3153
|
+
}, null, 4)) : createCommentVNode("", true)
|
|
3154
|
+
], 4)) : renderSlot(_ctx.$slots, "weekDayEvent", {
|
|
3155
|
+
key: 1,
|
|
3156
|
+
eventData: event.value
|
|
3157
|
+
}, void 0, true),
|
|
3158
|
+
showResizeElements.value ? (openBlock(), createElementBlock("div", {
|
|
3159
|
+
key: 2,
|
|
3160
|
+
class: "calendar-week__event-resize calendar-week__event-resize-up",
|
|
3161
|
+
onMousedown: _cache[0] || (_cache[0] = ($event) => resizeEvent("up"))
|
|
3162
|
+
}, null, 32)) : createCommentVNode("", true),
|
|
3163
|
+
showResizeElements.value ? (openBlock(), createElementBlock("div", {
|
|
3164
|
+
key: 3,
|
|
3165
|
+
class: "calendar-week__event-resize calendar-week__event-resize-down",
|
|
3166
|
+
onMousedown: _cache[1] || (_cache[1] = ($event) => resizeEvent("down"))
|
|
3167
|
+
}, null, 32)) : createCommentVNode("", true)
|
|
3168
|
+
], 46, _hoisted_1$W);
|
|
3169
|
+
};
|
|
3170
|
+
}
|
|
3171
|
+
});
|
|
3172
|
+
const DayEvent = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["__scopeId", "data-v-7f22cf49"]]);
|
|
3173
|
+
const _hoisted_1$V = ["id", "onClick"];
|
|
3174
|
+
const _sfc_main$14 = /* @__PURE__ */ defineComponent({
|
|
3175
|
+
__name: "Day",
|
|
3176
|
+
props: {
|
|
3177
|
+
day: {
|
|
3178
|
+
type: Object,
|
|
3179
|
+
required: true
|
|
3180
|
+
},
|
|
3181
|
+
time: {
|
|
3182
|
+
type: Object,
|
|
3183
|
+
required: true
|
|
3184
|
+
},
|
|
3185
|
+
config: {
|
|
3186
|
+
type: Object,
|
|
3187
|
+
required: true
|
|
3188
|
+
},
|
|
3189
|
+
dayInfo: {
|
|
3190
|
+
type: Object,
|
|
3191
|
+
required: true
|
|
3192
|
+
},
|
|
3193
|
+
mode: {
|
|
3194
|
+
type: String,
|
|
3195
|
+
required: true
|
|
3196
|
+
},
|
|
3197
|
+
dayIntervals: {
|
|
3198
|
+
type: Object,
|
|
3199
|
+
required: true
|
|
3200
|
+
},
|
|
3201
|
+
weekHeight: {
|
|
3202
|
+
type: Number,
|
|
3203
|
+
required: true
|
|
3204
|
+
}
|
|
3205
|
+
},
|
|
3206
|
+
emits: [
|
|
3207
|
+
"eventWasClicked",
|
|
3208
|
+
"eventWasResized",
|
|
3209
|
+
"eventWasDragged",
|
|
3210
|
+
"intervalWasClicked",
|
|
3211
|
+
"dayWasClicked",
|
|
3212
|
+
"datetimeWasClicked",
|
|
3213
|
+
"dragStart",
|
|
3214
|
+
"dragEnd"
|
|
3215
|
+
],
|
|
3216
|
+
setup(__props, { emit: __emit }) {
|
|
3217
|
+
const props2 = __props;
|
|
3218
|
+
const emit2 = __emit;
|
|
3219
|
+
const eventConcurrencyHelper = new EventConcurrency();
|
|
3220
|
+
const events = ref([]);
|
|
3221
|
+
const intervals = ref([]);
|
|
3222
|
+
const intervalStyles = computed(() => {
|
|
3223
|
+
var _a2;
|
|
3224
|
+
return ((_a2 = props2.config.dayIntervals) == null ? void 0 : _a2.intervalStyles) ? props2.config.dayIntervals.intervalStyles : {};
|
|
3225
|
+
});
|
|
3226
|
+
function calculateEventConcurrency() {
|
|
3227
|
+
events.value = eventConcurrencyHelper.calculateConcurrencyForEvents(
|
|
3228
|
+
props2.day.events
|
|
3229
|
+
);
|
|
3230
|
+
}
|
|
3231
|
+
function handleEventWasResized(event) {
|
|
3232
|
+
emit2("eventWasResized", event);
|
|
3233
|
+
calculateEventConcurrency();
|
|
3234
|
+
}
|
|
3235
|
+
function handleClickOnInterval(payload) {
|
|
3236
|
+
const { intervalStart, intervalEnd } = payload;
|
|
3237
|
+
emit2("intervalWasClicked", { intervalStart, intervalEnd });
|
|
3238
|
+
}
|
|
3239
|
+
function setClickableIntervals() {
|
|
3240
|
+
let dayStartTimeString = props2.day.dateTimeString;
|
|
3241
|
+
if (props2.time.DAY_START !== 0) {
|
|
3242
|
+
const { hour: startHour } = props2.time.getHourAndMinutesFromTimePoints(props2.time.DAY_START);
|
|
3243
|
+
dayStartTimeString = props2.time.setSegmentOfDateTimeString(dayStartTimeString, { hour: startHour });
|
|
3244
|
+
}
|
|
3245
|
+
intervals.value = new DayIntervals(
|
|
3246
|
+
props2.dayIntervals.length || 60,
|
|
3247
|
+
dayStartTimeString,
|
|
3248
|
+
props2.time.HOURS_PER_DAY
|
|
3249
|
+
).getIntervals();
|
|
3250
|
+
}
|
|
3251
|
+
function getDateStringForFlexibleDayBoundaries(dateString, timeClickedHHMM) {
|
|
3252
|
+
const hourTwoDigits = props2.time.doubleDigit(props2.time.DAY_START / 100);
|
|
3253
|
+
const dayStartTimeHHMM = `${hourTwoDigits}:00`;
|
|
3254
|
+
const isClickOnNextDay = timeClickedHHMM < dayStartTimeHHMM;
|
|
3255
|
+
if (isClickOnNextDay) {
|
|
3256
|
+
dateString = props2.time.dateStringFrom(
|
|
3257
|
+
props2.time.addDaysToDateTimeString(1, dateString)
|
|
3258
|
+
);
|
|
3259
|
+
}
|
|
3260
|
+
return dateString;
|
|
3261
|
+
}
|
|
3262
|
+
function handleClickOnDay(event) {
|
|
3263
|
+
const timeClicked = props2.time.getTimeFromClick(event.offsetY, props2.weekHeight);
|
|
3264
|
+
let dateString = props2.time.dateStringFrom(props2.day.dateTimeString);
|
|
3265
|
+
const isFlexibleDay = props2.time.DAY_END <= props2.time.DAY_START;
|
|
3266
|
+
if (isFlexibleDay) dateString = getDateStringForFlexibleDayBoundaries(dateString, timeClicked);
|
|
3267
|
+
const dateTimeString = `${dateString} ${timeClicked}`;
|
|
3268
|
+
emit2("dayWasClicked", dateString);
|
|
3269
|
+
emit2("datetimeWasClicked", dateTimeString);
|
|
3270
|
+
}
|
|
3271
|
+
onMounted(() => {
|
|
3272
|
+
calculateEventConcurrency();
|
|
3273
|
+
if (props2.dayIntervals.displayClickableInterval) setClickableIntervals();
|
|
3274
|
+
});
|
|
3275
|
+
return (_ctx, _cache) => {
|
|
3276
|
+
return openBlock(), createElementBlock("div", {
|
|
3277
|
+
class: "calendar-week__day",
|
|
3278
|
+
onClick: withModifiers(handleClickOnDay, ["self"])
|
|
3279
|
+
}, [
|
|
3280
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(events.value, (event, eventIndex) => {
|
|
3281
|
+
return openBlock(), createBlock(DayEvent, {
|
|
3282
|
+
key: eventIndex,
|
|
3283
|
+
"data-test": "day-event",
|
|
3284
|
+
"event-prop": event,
|
|
3285
|
+
day: __props.day,
|
|
3286
|
+
time: __props.time,
|
|
3287
|
+
config: __props.config,
|
|
3288
|
+
"day-info": __props.dayInfo,
|
|
3289
|
+
mode: __props.mode,
|
|
3290
|
+
onEventWasClicked: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("eventWasClicked", $event)),
|
|
3291
|
+
onEventWasDragged: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("eventWasDragged", $event)),
|
|
3292
|
+
onEventWasResized: handleEventWasResized,
|
|
3293
|
+
onDragStart: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("dragStart")),
|
|
3294
|
+
onDragEnd: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("dragEnd"))
|
|
3295
|
+
}, {
|
|
3296
|
+
weekDayEvent: withCtx((p2) => [
|
|
3297
|
+
renderSlot(_ctx.$slots, "weekDayEvent", {
|
|
3298
|
+
eventData: p2.eventData
|
|
3299
|
+
}, void 0, true)
|
|
3300
|
+
]),
|
|
3301
|
+
_: 2
|
|
3302
|
+
}, 1032, ["event-prop", "day", "time", "config", "day-info", "mode"]);
|
|
3303
|
+
}), 128)),
|
|
3304
|
+
__props.dayIntervals && __props.dayIntervals.displayClickableInterval ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(intervals.value, (interval, intervalIndex) => {
|
|
3305
|
+
return openBlock(), createElementBlock("div", {
|
|
3306
|
+
id: `interval-${intervalIndex}`,
|
|
3307
|
+
key: interval.intervalStart,
|
|
3308
|
+
class: normalizeClass(["calendar-week__day-interval", { "has-border": interval.hasBorder }]),
|
|
3309
|
+
style: normalizeStyle(intervalStyles.value),
|
|
3310
|
+
onClick: ($event) => handleClickOnInterval(interval)
|
|
3311
|
+
}, toDisplayString(__props.time.getLocalizedTime(interval.intervalStart)), 15, _hoisted_1$V);
|
|
3312
|
+
}), 128)) : createCommentVNode("", true)
|
|
3313
|
+
]);
|
|
3314
|
+
};
|
|
3315
|
+
}
|
|
3316
|
+
});
|
|
3317
|
+
const Day = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-12350119"]]);
|
|
3318
|
+
const _hoisted_1$U = { class: "day-timeline" };
|
|
3319
|
+
const _hoisted_2$F = { class: "day-timeline__hour-text" };
|
|
3320
|
+
const _sfc_main$13 = /* @__PURE__ */ defineComponent({
|
|
3321
|
+
__name: "DayTimeline",
|
|
3322
|
+
props: {
|
|
3323
|
+
time: {
|
|
3324
|
+
type: Object,
|
|
3325
|
+
required: true
|
|
3326
|
+
},
|
|
3327
|
+
weekHeight: {
|
|
3328
|
+
type: String,
|
|
3329
|
+
required: true
|
|
3330
|
+
}
|
|
3331
|
+
},
|
|
3332
|
+
setup(__props) {
|
|
3333
|
+
useCssVars((_ctx) => ({
|
|
3334
|
+
"73f3c772": __props.weekHeight
|
|
3335
|
+
}));
|
|
3336
|
+
const props2 = __props;
|
|
3337
|
+
const timelineHours = ref([]);
|
|
3338
|
+
onMounted(() => {
|
|
3339
|
+
timelineHours.value = props2.time.getTimelineHours();
|
|
3340
|
+
});
|
|
3341
|
+
function getLocaleTimeString(time) {
|
|
3342
|
+
const { hour } = props2.time.getHourAndMinutesFromTimePoints(time);
|
|
3343
|
+
return props2.time.getLocalizedHour(new Date(2100, 1, 1, hour));
|
|
3344
|
+
}
|
|
3345
|
+
return (_ctx, _cache) => {
|
|
3346
|
+
return openBlock(), createElementBlock("div", _hoisted_1$U, [
|
|
3347
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(timelineHours.value, (hour) => {
|
|
3348
|
+
return openBlock(), createElementBlock("div", {
|
|
3349
|
+
key: hour,
|
|
3350
|
+
class: "day-timeline__hour"
|
|
3351
|
+
}, [
|
|
3352
|
+
createElementVNode("span", _hoisted_2$F, toDisplayString(getLocaleTimeString(hour)), 1)
|
|
3353
|
+
]);
|
|
3354
|
+
}), 128))
|
|
3355
|
+
]);
|
|
3356
|
+
};
|
|
3357
|
+
}
|
|
3358
|
+
});
|
|
3359
|
+
const DayTimeline = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-a4d8d28d"]]);
|
|
3360
|
+
const _hoisted_1$T = ["id"];
|
|
3361
|
+
const _hoisted_2$E = {
|
|
3362
|
+
key: 1,
|
|
3363
|
+
class: "week-timeline__event"
|
|
3364
|
+
};
|
|
3365
|
+
const eventElementIdPrefix = "week-timeline__event-id-";
|
|
3366
|
+
const _sfc_main$12 = /* @__PURE__ */ defineComponent({
|
|
3367
|
+
__name: "FullDayEvent",
|
|
3368
|
+
props: {
|
|
3369
|
+
scheduleEvent: {
|
|
3370
|
+
type: Object,
|
|
3371
|
+
default: null
|
|
3372
|
+
},
|
|
3373
|
+
config: {
|
|
3374
|
+
type: Object,
|
|
3375
|
+
required: true
|
|
3376
|
+
},
|
|
3377
|
+
mode: {
|
|
3378
|
+
type: String,
|
|
3379
|
+
required: true
|
|
3380
|
+
}
|
|
3381
|
+
},
|
|
3382
|
+
emits: ["eventWasClicked"],
|
|
3383
|
+
setup(__props, { emit: __emit }) {
|
|
3384
|
+
const props2 = __props;
|
|
3385
|
+
const emit2 = __emit;
|
|
3386
|
+
const colors = EVENT_COLORS;
|
|
3387
|
+
const eventColor = ref("#fff");
|
|
3388
|
+
const eventBackgroundColor = ref("");
|
|
3389
|
+
const eventWidth = computed(() => {
|
|
3390
|
+
if (props2.mode !== "day")
|
|
3391
|
+
return `calc(${props2.scheduleEvent.nDays * 100}% - 6px)`;
|
|
3392
|
+
return "calc(100% - 6px)";
|
|
3393
|
+
});
|
|
3394
|
+
function setColors() {
|
|
3395
|
+
var _a2;
|
|
3396
|
+
if (props2.scheduleEvent.colorScheme && ((_a2 = props2.config.style) == null ? void 0 : _a2.colorSchemes) && props2.config.style.colorSchemes[props2.scheduleEvent.colorScheme]) {
|
|
3397
|
+
eventColor.value = props2.config.style.colorSchemes[props2.scheduleEvent.colorScheme].color;
|
|
3398
|
+
eventBackgroundColor.value = props2.config.style.colorSchemes[props2.scheduleEvent.colorScheme].backgroundColor;
|
|
3399
|
+
return;
|
|
3400
|
+
}
|
|
3401
|
+
if (props2.scheduleEvent.color) {
|
|
3402
|
+
eventColor.value = "#fff";
|
|
3403
|
+
eventBackgroundColor.value = colors[props2.scheduleEvent.color];
|
|
3404
|
+
return;
|
|
3405
|
+
}
|
|
3406
|
+
eventBackgroundColor.value = colors.blue;
|
|
3407
|
+
}
|
|
3408
|
+
function handleClickOnEvent() {
|
|
3409
|
+
const eventElement = document.getElementById(
|
|
3410
|
+
eventElementIdPrefix + props2.scheduleEvent.id
|
|
3411
|
+
);
|
|
3412
|
+
emit2("eventWasClicked", {
|
|
3413
|
+
clickedEvent: props2.scheduleEvent,
|
|
3414
|
+
eventElement
|
|
3415
|
+
});
|
|
3416
|
+
}
|
|
3417
|
+
onMounted(() => {
|
|
3418
|
+
setColors();
|
|
3419
|
+
});
|
|
3420
|
+
return (_ctx, _cache) => {
|
|
3421
|
+
return __props.scheduleEvent ? (openBlock(), createElementBlock("div", {
|
|
3422
|
+
key: 0,
|
|
3423
|
+
id: `${eventElementIdPrefix}${__props.scheduleEvent.id}`,
|
|
3424
|
+
class: "week-timeline__event is-event",
|
|
3425
|
+
style: normalizeStyle({
|
|
3426
|
+
width: eventWidth.value,
|
|
3427
|
+
color: eventColor.value,
|
|
3428
|
+
backgroundColor: eventBackgroundColor.value,
|
|
3429
|
+
zIndex: 1
|
|
3430
|
+
}),
|
|
3431
|
+
onClick: handleClickOnEvent
|
|
3432
|
+
}, toDisplayString(__props.scheduleEvent.title), 13, _hoisted_1$T)) : (openBlock(), createElementBlock("div", _hoisted_2$E));
|
|
3433
|
+
};
|
|
3434
|
+
}
|
|
3435
|
+
});
|
|
3436
|
+
const FullDayEvent = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-511747c2"]]);
|
|
3437
|
+
const _hoisted_1$S = { class: "week-timeline" };
|
|
3438
|
+
const _hoisted_2$D = ["onClick"];
|
|
3439
|
+
const _hoisted_3$v = { class: "week-timeline__day-name" };
|
|
3440
|
+
const _hoisted_4$j = { class: "week-timeline__date" };
|
|
3441
|
+
const _hoisted_5$i = { class: "week-timeline__events" };
|
|
3442
|
+
const _sfc_main$11 = /* @__PURE__ */ defineComponent({
|
|
3443
|
+
__name: "WeekTimeline",
|
|
3444
|
+
props: {
|
|
3445
|
+
days: {},
|
|
3446
|
+
time: {},
|
|
3447
|
+
fullDayEvents: {},
|
|
3448
|
+
config: {},
|
|
3449
|
+
mode: {}
|
|
3450
|
+
},
|
|
3451
|
+
emits: ["eventWasClicked", "dayWasClicked"],
|
|
3452
|
+
setup(__props, { emit: __emit }) {
|
|
3453
|
+
const props2 = __props;
|
|
3454
|
+
const emit2 = __emit;
|
|
3455
|
+
const now = ref(/* @__PURE__ */ new Date());
|
|
3456
|
+
function getDaysDate(day) {
|
|
3457
|
+
const { date: date2 } = props2.time.getAllVariablesFromDateTimeString(
|
|
3458
|
+
day.dateTimeString
|
|
3459
|
+
);
|
|
3460
|
+
return date2;
|
|
3461
|
+
}
|
|
3462
|
+
return (_ctx, _cache) => {
|
|
3463
|
+
return openBlock(), createElementBlock("div", _hoisted_1$S, [
|
|
3464
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.days, (day, dayIndex) => {
|
|
3465
|
+
return openBlock(), createElementBlock("div", {
|
|
3466
|
+
key: dayIndex,
|
|
3467
|
+
class: normalizeClass(["week-timeline__day", {
|
|
3468
|
+
"is-today": _ctx.time.getDateTimeStringFromDate(now.value, "start") === day.dateTimeString
|
|
3469
|
+
}]),
|
|
3470
|
+
onClick: ($event) => emit2("dayWasClicked", _ctx.time.dateStringFrom(day.dateTimeString))
|
|
3471
|
+
}, [
|
|
3472
|
+
createElementVNode("div", _hoisted_3$v, toDisplayString(day.dayName.substring(0, 2).toUpperCase()), 1),
|
|
3473
|
+
createElementVNode("div", _hoisted_4$j, toDisplayString(getDaysDate(day)), 1),
|
|
3474
|
+
createElementVNode("div", _hoisted_5$i, [
|
|
3475
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(day.fullDayEvents, (event, key) => {
|
|
3476
|
+
return openBlock(), createElementBlock(Fragment, { key }, [
|
|
3477
|
+
key !== "date" ? (openBlock(), createBlock(FullDayEvent, {
|
|
3478
|
+
key: 0,
|
|
3479
|
+
"schedule-event": typeof event === "object" ? event : null,
|
|
3480
|
+
config: _ctx.config,
|
|
3481
|
+
mode: _ctx.mode,
|
|
3482
|
+
onEventWasClicked: _cache[0] || (_cache[0] = ($event) => emit2("eventWasClicked", $event))
|
|
3483
|
+
}, null, 8, ["schedule-event", "config", "mode"])) : createCommentVNode("", true)
|
|
3484
|
+
], 64);
|
|
3485
|
+
}), 128))
|
|
3486
|
+
])
|
|
3487
|
+
], 10, _hoisted_2$D);
|
|
3488
|
+
}), 128))
|
|
3489
|
+
]);
|
|
3490
|
+
};
|
|
3491
|
+
}
|
|
3492
|
+
});
|
|
3493
|
+
const WeekTimeline = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-0e7c9832"]]);
|
|
3494
|
+
const _hoisted_1$R = { class: "calendar-week__wrapper" };
|
|
3495
|
+
const _hoisted_2$C = { class: "calendar-week" };
|
|
3496
|
+
const _hoisted_3$u = { class: "calendar-week__events" };
|
|
3497
|
+
const _sfc_main$10 = /* @__PURE__ */ defineComponent({
|
|
3498
|
+
__name: "Week",
|
|
3499
|
+
props: {
|
|
3500
|
+
config: {
|
|
3501
|
+
type: Object,
|
|
3502
|
+
required: true
|
|
3503
|
+
},
|
|
3504
|
+
eventsProp: {
|
|
3505
|
+
type: Array,
|
|
3506
|
+
default: () => []
|
|
3507
|
+
},
|
|
3508
|
+
period: {
|
|
3509
|
+
type: Object,
|
|
3510
|
+
required: true
|
|
3511
|
+
},
|
|
3512
|
+
modeProp: {
|
|
3513
|
+
type: String,
|
|
3514
|
+
default: "week"
|
|
3515
|
+
},
|
|
3516
|
+
time: {
|
|
3517
|
+
type: Object,
|
|
3518
|
+
required: true
|
|
3519
|
+
}
|
|
3520
|
+
},
|
|
3521
|
+
emits: [
|
|
3522
|
+
"eventWasClicked",
|
|
3523
|
+
"eventWasResized",
|
|
3524
|
+
"eventWasDragged",
|
|
3525
|
+
"editEvent",
|
|
3526
|
+
"deleteEvent",
|
|
3527
|
+
"intervalWasClicked",
|
|
3528
|
+
"dayWasClicked",
|
|
3529
|
+
"datetimeWasClicked"
|
|
3530
|
+
],
|
|
3531
|
+
setup(__props, { emit: __emit }) {
|
|
3532
|
+
useCssVars((_ctx) => ({
|
|
3533
|
+
"6f3e0f98": weekHeight.value
|
|
3534
|
+
}));
|
|
3535
|
+
const props2 = __props;
|
|
3536
|
+
const emit2 = __emit;
|
|
3537
|
+
const eventPosition = new EventPosition();
|
|
3538
|
+
const days = ref([]);
|
|
3539
|
+
const mode = ref(props2.modeProp);
|
|
3540
|
+
const selectedEvent = ref(null);
|
|
3541
|
+
const selectedEventElement = ref(null);
|
|
3542
|
+
const events = ref(props2.eventsProp);
|
|
3543
|
+
const fullDayEvents = ref([]);
|
|
3544
|
+
const weekVersion = ref(0);
|
|
3545
|
+
const dayIntervals = ref({
|
|
3546
|
+
length: 60,
|
|
3547
|
+
height: 66
|
|
3548
|
+
});
|
|
3549
|
+
const weekHeight = ref("1584px");
|
|
3550
|
+
const currentTimePercentage = ref(0);
|
|
3551
|
+
const showCurrentTime = ref(!!props2.config.showCurrentTime);
|
|
3552
|
+
const hasCustomCurrentTimeSlot = computed(() => {
|
|
3553
|
+
return Helpers.hasSlotContent(useSlots().customCurrentTime);
|
|
3554
|
+
});
|
|
3555
|
+
const nDays = computed(() => {
|
|
3556
|
+
var _a2;
|
|
3557
|
+
return ((_a2 = props2.config.week) == null ? void 0 : _a2.nDays) || 7;
|
|
3558
|
+
});
|
|
3559
|
+
watch(() => props2.period, () => {
|
|
3560
|
+
setInitialEvents(mode.value);
|
|
3561
|
+
}, { deep: true });
|
|
3562
|
+
watch(() => props2.modeProp, (value) => {
|
|
3563
|
+
mode.value = value;
|
|
3564
|
+
setInitialEvents(value);
|
|
3565
|
+
}, { deep: true });
|
|
3566
|
+
onMounted(() => {
|
|
3567
|
+
setDayIntervals();
|
|
3568
|
+
separateFullDayEventsFromOtherEvents();
|
|
3569
|
+
setInitialEvents(props2.modeProp);
|
|
3570
|
+
if (props2.config.showCurrentTime || hasCustomCurrentTimeSlot.value) setCurrentTime();
|
|
3571
|
+
});
|
|
3572
|
+
function separateFullDayEventsFromOtherEvents() {
|
|
3573
|
+
const {
|
|
3574
|
+
singleDayTimedEvents,
|
|
3575
|
+
fullDayAndMultipleDayEvents
|
|
3576
|
+
} = WeekHelper.eventSeparator(events.value, props2.time);
|
|
3577
|
+
events.value = singleDayTimedEvents;
|
|
3578
|
+
positionFullDayEvents(fullDayAndMultipleDayEvents);
|
|
3579
|
+
}
|
|
3580
|
+
function positionFullDayEvents(fullDayAndMultipleDayEvents) {
|
|
3581
|
+
const weekEndDate = nDays.value === 5 ? new Date(
|
|
3582
|
+
props2.period.end.getFullYear(),
|
|
3583
|
+
props2.period.end.getMonth(),
|
|
3584
|
+
props2.period.end.getDate() - 2
|
|
3585
|
+
) : props2.period.end;
|
|
3586
|
+
fullDayEvents.value = fullDayAndMultipleDayEvents.length ? eventPosition.positionFullDayEventsInWeek(
|
|
3587
|
+
props2.period.start,
|
|
3588
|
+
weekEndDate,
|
|
3589
|
+
fullDayAndMultipleDayEvents
|
|
3590
|
+
) : [];
|
|
3591
|
+
}
|
|
3592
|
+
function setDays() {
|
|
3593
|
+
const daysArray = props2.time.getCalendarWeekDateObjects(props2.period.start).map((day) => {
|
|
3594
|
+
const dayName = props2.time.getLocalizedNameOfWeekday(day, "long");
|
|
3595
|
+
const dateTimeString = props2.time.getDateTimeStringFromDate(
|
|
3596
|
+
day,
|
|
3597
|
+
"start"
|
|
3598
|
+
);
|
|
3599
|
+
const dayEvents = new EventsFilter(events.value).getEventsForDay(props2.time, dateTimeString);
|
|
3600
|
+
return { dayName, dateTimeString, events: dayEvents };
|
|
3601
|
+
});
|
|
3602
|
+
if (nDays.value === 5 && props2.time.FIRST_DAY_OF_WEEK === WEEK_START_DAY.MONDAY) {
|
|
3603
|
+
daysArray.splice(5, 2);
|
|
3604
|
+
fullDayEvents.value.splice(5, 2);
|
|
3605
|
+
} else if (nDays.value === 5 && props2.time.FIRST_DAY_OF_WEEK === WEEK_START_DAY.SUNDAY) {
|
|
3606
|
+
daysArray.splice(6, 1);
|
|
3607
|
+
fullDayEvents.value.splice(6, 1);
|
|
3608
|
+
daysArray.splice(0, 1);
|
|
3609
|
+
fullDayEvents.value.splice(0, 1);
|
|
3610
|
+
}
|
|
3611
|
+
days.value = daysArray;
|
|
3612
|
+
}
|
|
3613
|
+
function mergeFullDayEventsIntoDays() {
|
|
3614
|
+
for (const [dayIndex] of days.value.entries()) {
|
|
3615
|
+
days.value[dayIndex].fullDayEvents = fullDayEvents.value[dayIndex];
|
|
3616
|
+
}
|
|
3617
|
+
}
|
|
3618
|
+
function setDay2() {
|
|
3619
|
+
const dayDateTimeString = props2.time.getDateTimeStringFromDate(
|
|
3620
|
+
props2.period.selectedDate
|
|
3621
|
+
);
|
|
3622
|
+
days.value = [
|
|
3623
|
+
{
|
|
3624
|
+
dayName: new Date(props2.period.selectedDate).toLocaleDateString(
|
|
3625
|
+
props2.time.CALENDAR_LOCALE,
|
|
3626
|
+
{ weekday: "long" }
|
|
3627
|
+
),
|
|
3628
|
+
dateTimeString: props2.time.getDateTimeStringFromDate(
|
|
3629
|
+
props2.period.selectedDate,
|
|
3630
|
+
"start"
|
|
3631
|
+
),
|
|
3632
|
+
events: new EventsFilter(events.value).getEventsForDay(props2.time, dayDateTimeString)
|
|
3633
|
+
}
|
|
3634
|
+
];
|
|
3635
|
+
if (!fullDayEvents.value.length) return;
|
|
3636
|
+
for (const day of fullDayEvents.value) {
|
|
3637
|
+
const dayDateString = props2.time.getDateTimeStringFromDate(day.date);
|
|
3638
|
+
if (dayDateString.substring(0, 11) === dayDateTimeString.substring(0, 11)) {
|
|
3639
|
+
fullDayEvents.value = [day];
|
|
3640
|
+
return;
|
|
3641
|
+
}
|
|
3642
|
+
}
|
|
3643
|
+
}
|
|
3644
|
+
function setInitialEvents(currentMode) {
|
|
3645
|
+
if (currentMode === "day") setDay2();
|
|
3646
|
+
if (currentMode === "week") setDays();
|
|
3647
|
+
mergeFullDayEventsIntoDays();
|
|
3648
|
+
}
|
|
3649
|
+
function handleClickOnEvent(event) {
|
|
3650
|
+
emit2("eventWasClicked", event);
|
|
3651
|
+
selectedEventElement.value = event.eventElement;
|
|
3652
|
+
selectedEvent.value = event.clickedEvent;
|
|
3653
|
+
}
|
|
3654
|
+
function handleEventWasDragged(event) {
|
|
3655
|
+
const cleanedUpEvent = event;
|
|
3656
|
+
delete cleanedUpEvent.totalConcurrentEvents;
|
|
3657
|
+
delete cleanedUpEvent.nOfPreviousConcurrentEvents;
|
|
3658
|
+
const filteredEvents = events.value.filter((e) => e.id !== event.id);
|
|
3659
|
+
events.value = [
|
|
3660
|
+
cleanedUpEvent,
|
|
3661
|
+
...filteredEvents.map((e) => {
|
|
3662
|
+
delete e.nOfPreviousConcurrentEvents;
|
|
3663
|
+
delete e.totalConcurrentEvents;
|
|
3664
|
+
return e;
|
|
3665
|
+
})
|
|
3666
|
+
];
|
|
3667
|
+
setInitialEvents(mode.value);
|
|
3668
|
+
weekVersion.value = weekVersion.value + 1;
|
|
3669
|
+
emit2("eventWasDragged", event);
|
|
3670
|
+
}
|
|
3671
|
+
function setDayIntervals() {
|
|
3672
|
+
if (props2.config.dayIntervals) {
|
|
3673
|
+
for (const [key, value] of Object.entries(props2.config.dayIntervals)) {
|
|
3674
|
+
dayIntervals.value[key] = value;
|
|
3675
|
+
}
|
|
3676
|
+
}
|
|
3677
|
+
setWeekHeightBasedOnIntervals();
|
|
3678
|
+
}
|
|
3679
|
+
function setWeekHeightBasedOnIntervals() {
|
|
3680
|
+
if (![15, 30, 60].includes(dayIntervals.value.length)) {
|
|
3681
|
+
dayIntervals.value.length = 60;
|
|
3682
|
+
dayIntervals.value.height = 66;
|
|
3683
|
+
console.warn(
|
|
3684
|
+
"The dayIntervals configuration is faulty. It has been reset to default values."
|
|
3685
|
+
);
|
|
3686
|
+
}
|
|
3687
|
+
let intervalMultiplier = 1;
|
|
3688
|
+
if (dayIntervals.value.length === 15) intervalMultiplier = 4;
|
|
3689
|
+
if (dayIntervals.value.length === 30) intervalMultiplier = 2;
|
|
3690
|
+
weekHeight.value = `${dayIntervals.value.height * intervalMultiplier * props2.time.HOURS_PER_DAY}px`;
|
|
3691
|
+
}
|
|
3692
|
+
function setCurrentTime() {
|
|
3693
|
+
const setTime = () => {
|
|
3694
|
+
const nowString = props2.time.getDateTimeStringFromDate(/* @__PURE__ */ new Date());
|
|
3695
|
+
const currentTimePercentage2 = props2.time.getPercentageOfDayFromDateTimeString(
|
|
3696
|
+
nowString,
|
|
3697
|
+
props2.time.DAY_START,
|
|
3698
|
+
props2.time.DAY_END
|
|
3699
|
+
);
|
|
3700
|
+
if (currentTimePercentage2 < 0 || currentTimePercentage2 > 100) {
|
|
3701
|
+
showCurrentTime.value = false;
|
|
3702
|
+
return;
|
|
3703
|
+
}
|
|
3704
|
+
showCurrentTime.value = true;
|
|
3705
|
+
currentTimePercentage2.value = currentTimePercentage2;
|
|
3706
|
+
};
|
|
3707
|
+
setTime();
|
|
3708
|
+
setInterval(() => {
|
|
3709
|
+
setTime();
|
|
3710
|
+
}, 6e4);
|
|
3711
|
+
}
|
|
3712
|
+
return (_ctx, _cache) => {
|
|
3713
|
+
return openBlock(), createElementBlock(Fragment, null, [
|
|
3714
|
+
createVNode(WeekTimeline, {
|
|
3715
|
+
days: days.value,
|
|
3716
|
+
time: __props.time,
|
|
3717
|
+
"full-day-events": fullDayEvents.value,
|
|
3718
|
+
config: __props.config,
|
|
3719
|
+
mode: mode.value,
|
|
3720
|
+
onEventWasClicked: handleClickOnEvent,
|
|
3721
|
+
onDayWasClicked: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("dayWasClicked", $event))
|
|
3722
|
+
}, null, 8, ["days", "time", "full-day-events", "config", "mode"]),
|
|
3723
|
+
createElementVNode("div", _hoisted_1$R, [
|
|
3724
|
+
!__props.config.eventDialog || !__props.config.eventDialog.isDisabled ? (openBlock(), createBlock(_sfc_main$1c, {
|
|
3725
|
+
key: 0,
|
|
3726
|
+
"calendar-event-prop": selectedEvent.value,
|
|
3727
|
+
"event-element": selectedEventElement.value,
|
|
3728
|
+
time: __props.time,
|
|
3729
|
+
config: __props.config,
|
|
3730
|
+
onHide: _cache[1] || (_cache[1] = ($event) => selectedEvent.value = null),
|
|
3731
|
+
onEditEvent: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("editEvent", $event)),
|
|
3732
|
+
onDeleteEvent: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("deleteEvent", $event))
|
|
3733
|
+
}, {
|
|
3734
|
+
default: withCtx((p2) => [
|
|
3735
|
+
renderSlot(_ctx.$slots, "eventDialog", {
|
|
3736
|
+
eventDialogData: p2.eventDialogData,
|
|
3737
|
+
closeEventDialog: p2.closeEventDialog
|
|
3738
|
+
}, void 0, true)
|
|
3739
|
+
]),
|
|
3740
|
+
_: 3
|
|
3741
|
+
}, 8, ["calendar-event-prop", "event-element", "time", "config"])) : createCommentVNode("", true),
|
|
3742
|
+
createElementVNode("section", _hoisted_2$C, [
|
|
3743
|
+
hasCustomCurrentTimeSlot.value && showCurrentTime.value ? (openBlock(), createElementBlock("div", {
|
|
3744
|
+
key: 0,
|
|
3745
|
+
class: "custom-current-time",
|
|
3746
|
+
style: normalizeStyle({ top: `${currentTimePercentage.value}%` })
|
|
3747
|
+
}, [
|
|
3748
|
+
renderSlot(_ctx.$slots, "customCurrentTime", {}, void 0, true)
|
|
3749
|
+
], 4)) : __props.config && __props.config.showCurrentTime && showCurrentTime.value ? (openBlock(), createElementBlock("div", {
|
|
3750
|
+
key: 1,
|
|
3751
|
+
class: "current-time-line",
|
|
3752
|
+
style: normalizeStyle({ top: `${currentTimePercentage.value}%` })
|
|
3753
|
+
}, _cache[8] || (_cache[8] = [
|
|
3754
|
+
createElementVNode("div", { class: "current-time-line__circle" }, null, -1)
|
|
3755
|
+
]), 4)) : createCommentVNode("", true),
|
|
3756
|
+
(openBlock(), createBlock(DayTimeline, {
|
|
3757
|
+
key: __props.period.start.getTime() + __props.period.end.getTime() + mode.value,
|
|
3758
|
+
time: __props.time,
|
|
3759
|
+
"day-intervals": dayIntervals.value,
|
|
3760
|
+
"week-height": weekHeight.value
|
|
3761
|
+
}, null, 8, ["time", "day-intervals", "week-height"])),
|
|
3762
|
+
createElementVNode("div", _hoisted_3$u, [
|
|
3763
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(days.value, (day, dayIndex) => {
|
|
3764
|
+
return openBlock(), createBlock(Day, {
|
|
3765
|
+
key: day.dateTimeString + mode.value + weekVersion.value,
|
|
3766
|
+
day,
|
|
3767
|
+
time: __props.time,
|
|
3768
|
+
config: __props.config,
|
|
3769
|
+
"day-info": { daysTotalN: days.value.length, thisDayIndex: dayIndex, dateTimeString: day.dateTimeString },
|
|
3770
|
+
mode: mode.value,
|
|
3771
|
+
"day-intervals": dayIntervals.value,
|
|
3772
|
+
"week-height": +weekHeight.value.replace("px", ""),
|
|
3773
|
+
onEventWasClicked: handleClickOnEvent,
|
|
3774
|
+
onEventWasResized: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("eventWasResized", $event)),
|
|
3775
|
+
onEventWasDragged: handleEventWasDragged,
|
|
3776
|
+
onIntervalWasClicked: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("intervalWasClicked", $event)),
|
|
3777
|
+
onDayWasClicked: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("dayWasClicked", $event)),
|
|
3778
|
+
onDatetimeWasClicked: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("datetimeWasClicked", $event))
|
|
3779
|
+
}, {
|
|
3780
|
+
weekDayEvent: withCtx((p2) => [
|
|
3781
|
+
renderSlot(_ctx.$slots, "weekDayEvent", {
|
|
3782
|
+
eventData: p2.eventData
|
|
3783
|
+
}, void 0, true)
|
|
3784
|
+
]),
|
|
3785
|
+
_: 2
|
|
3786
|
+
}, 1032, ["day", "time", "config", "day-info", "mode", "day-intervals", "week-height"]);
|
|
3787
|
+
}), 128))
|
|
3788
|
+
])
|
|
3789
|
+
])
|
|
3790
|
+
])
|
|
3791
|
+
], 64);
|
|
3792
|
+
};
|
|
3793
|
+
}
|
|
3794
|
+
});
|
|
3795
|
+
const Week = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__scopeId", "data-v-21b8e443"]]);
|
|
3796
|
+
const _Errors = class _Errors {
|
|
3797
|
+
static checkEventProperties(event) {
|
|
3798
|
+
var _a2, _b, _c, _d;
|
|
3799
|
+
if (!event.id) console.warn(this.MISSING_ID_WARNING);
|
|
3800
|
+
if (!event.title) console.warn(this.MISSING_TITLE_WARNING);
|
|
3801
|
+
if (!event.time) console.warn(this.MISSING_TIME_WARNING);
|
|
3802
|
+
if (!((_a2 = event.time) == null ? void 0 : _a2.start)) console.warn(this.MISSING_TIME_START_WARNING);
|
|
3803
|
+
if (!((_b = event.time) == null ? void 0 : _b.end)) console.warn(this.MISSING_TIME_END_WARNING);
|
|
3804
|
+
if (((_c = event.time) == null ? void 0 : _c.start) && event.time.end && !DATE_TIME_STRING_PATTERN.test(event.time.start) && !DATE_TIME_STRING_FULL_DAY_PATTERN.test(event.time.start)) {
|
|
3805
|
+
console.warn(
|
|
3806
|
+
`${this.PREFIX} event property 'time.start' expects a string formatted like 'YYYY-MM-DD hh:mm', or 'YYYY-MM-DD', received ${event.time.start}
|
|
3807
|
+
${this.SUFFIX}`
|
|
3808
|
+
);
|
|
3809
|
+
}
|
|
3810
|
+
if (((_d = event.time) == null ? void 0 : _d.start) && event.time.end && !DATE_TIME_STRING_PATTERN.test(event.time.end) && !DATE_TIME_STRING_FULL_DAY_PATTERN.test(event.time.end)) {
|
|
3811
|
+
console.warn(
|
|
3812
|
+
`${this.PREFIX} event property 'time.end' expects a string formatted like 'YYYY-MM-DD hh:mm', or 'YYYY-MM-DD', received ${event.time.end}
|
|
3813
|
+
${this.SUFFIX}`
|
|
3814
|
+
);
|
|
3815
|
+
}
|
|
3816
|
+
}
|
|
3817
|
+
static checkConfig(config) {
|
|
3818
|
+
if (config.locale && !/^[a-z]{2}-[A-Z]{2}$/.test(config.locale)) {
|
|
3819
|
+
console.warn(
|
|
3820
|
+
`${this.PREFIX} config.locale expects a string of format xx-XX, received: ${config.locale}`
|
|
3821
|
+
);
|
|
3822
|
+
}
|
|
3823
|
+
if (config.defaultMode && !["month", "week", "day"].includes(config.defaultMode)) {
|
|
3824
|
+
console.warn(
|
|
3825
|
+
`${this.PREFIX} config.defaultMode expects either one of the values "day", "week" or "month"`
|
|
3826
|
+
);
|
|
3827
|
+
}
|
|
3828
|
+
}
|
|
3829
|
+
};
|
|
3830
|
+
__publicField(_Errors, "PREFIX", "[Qalendar warning]");
|
|
3831
|
+
// public static SUFFIX = 'This is a development warning, which will never be displayed in production environments'
|
|
3832
|
+
__publicField(_Errors, "SUFFIX", "");
|
|
3833
|
+
__publicField(_Errors, "MISSING_ID_WARNING", `${_Errors.PREFIX} required event property 'id' is missing
|
|
3834
|
+
${_Errors.SUFFIX}`);
|
|
3835
|
+
__publicField(_Errors, "MISSING_TITLE_WARNING", `${_Errors.PREFIX} required event property 'title' is missing
|
|
3836
|
+
${_Errors.SUFFIX}`);
|
|
3837
|
+
__publicField(_Errors, "MISSING_TIME_WARNING", `${_Errors.PREFIX} required event property 'time' is missing
|
|
3838
|
+
${_Errors.SUFFIX}`);
|
|
3839
|
+
__publicField(_Errors, "MISSING_TIME_START_WARNING", `${_Errors.PREFIX} required event property 'time.start' is missing
|
|
3840
|
+
${_Errors.SUFFIX}`);
|
|
3841
|
+
__publicField(_Errors, "MISSING_TIME_END_WARNING", `${_Errors.PREFIX} required event property 'time.end' is missing
|
|
3842
|
+
${_Errors.SUFFIX}`);
|
|
3843
|
+
let Errors = _Errors;
|
|
3844
|
+
const _hoisted_1$Q = { class: "calendar-root-wrapper" };
|
|
3845
|
+
const _hoisted_2$B = ["data-lang"];
|
|
3846
|
+
const _hoisted_3$t = {
|
|
3847
|
+
key: 0,
|
|
3848
|
+
class: "top-bar-loader"
|
|
3849
|
+
};
|
|
3850
|
+
const _sfc_main$$ = /* @__PURE__ */ defineComponent({
|
|
3851
|
+
__name: "Index",
|
|
3852
|
+
props: {
|
|
3853
|
+
config: {
|
|
3854
|
+
type: Object,
|
|
3855
|
+
default: () => ({})
|
|
3856
|
+
},
|
|
3857
|
+
events: {
|
|
3858
|
+
type: Array,
|
|
3859
|
+
default: () => []
|
|
3860
|
+
},
|
|
3861
|
+
selectedDate: {
|
|
3862
|
+
type: Date,
|
|
3863
|
+
default: /* @__PURE__ */ new Date()
|
|
3864
|
+
},
|
|
3865
|
+
isLoading: {
|
|
3866
|
+
type: Boolean,
|
|
3867
|
+
default: false
|
|
3868
|
+
}
|
|
3869
|
+
},
|
|
3870
|
+
emits: [
|
|
3871
|
+
"eventWasClicked",
|
|
3872
|
+
"eventWasResized",
|
|
3873
|
+
"eventWasDragged",
|
|
3874
|
+
"updatedPeriod",
|
|
3875
|
+
"updatedMode",
|
|
3876
|
+
"editEvent",
|
|
3877
|
+
"deleteEvent",
|
|
3878
|
+
"intervalWasClicked",
|
|
3879
|
+
"dayWasClicked",
|
|
3880
|
+
// TODO: remove with v4. day-was-clicked is deprecated
|
|
3881
|
+
"dateWasClicked",
|
|
3882
|
+
"datetimeWasClicked"
|
|
3883
|
+
],
|
|
3884
|
+
setup(__props, { emit: __emit }) {
|
|
3885
|
+
var _a2, _b, _c;
|
|
3886
|
+
const props2 = __props;
|
|
3887
|
+
const emit2 = __emit;
|
|
3888
|
+
const wasInitialized = ref(0);
|
|
3889
|
+
const period = ref({
|
|
3890
|
+
start: /* @__PURE__ */ new Date(),
|
|
3891
|
+
end: /* @__PURE__ */ new Date(),
|
|
3892
|
+
selectedDate: props2.selectedDate
|
|
3893
|
+
});
|
|
3894
|
+
const mode = ref(props2.config.defaultMode || "week");
|
|
3895
|
+
const time = ref(new Time((_a2 = props2.config.week) == null ? void 0 : _a2.startsOn, props2.config.locale || null, {
|
|
3896
|
+
start: setTimePointsFromDayBoundary(((_b = props2.config.dayBoundaries) == null ? void 0 : _b.start) || 0),
|
|
3897
|
+
end: setTimePointsFromDayBoundary(((_c = props2.config.dayBoundaries) == null ? void 0 : _c.end) || 24)
|
|
3898
|
+
}));
|
|
3899
|
+
computed(() => {
|
|
3900
|
+
var _a3;
|
|
3901
|
+
return ((_a3 = props2.config.style) == null ? void 0 : _a3.fontFamily) || "'Verdana', 'Open Sans', serif";
|
|
3902
|
+
});
|
|
3903
|
+
const eventRenderingKey = ref(0);
|
|
3904
|
+
const eventsDataProperty = ref(props2.events);
|
|
3905
|
+
const isSmall = ref(false);
|
|
3906
|
+
const ErrorsHelper = Errors;
|
|
3907
|
+
const appHeaderRef = ref();
|
|
3908
|
+
const enhancedConfig = computed(() => {
|
|
3909
|
+
return { ...props2.config, isSmall: isSmall.value };
|
|
3910
|
+
});
|
|
3911
|
+
watch(() => props2.events, (newVal, oldVal) => {
|
|
3912
|
+
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
|
3913
|
+
eventsDataProperty.value = newVal;
|
|
3914
|
+
eventRenderingKey.value = eventRenderingKey.value + 1;
|
|
3915
|
+
}
|
|
3916
|
+
if (props2.config.isSilent) return;
|
|
3917
|
+
props2.events.forEach((e) => {
|
|
3918
|
+
ErrorsHelper.checkEventProperties(e);
|
|
3919
|
+
});
|
|
3920
|
+
}, { deep: true, immediate: true });
|
|
3921
|
+
watch(() => props2.config, (value) => {
|
|
3922
|
+
ErrorsHelper.checkConfig(value);
|
|
3923
|
+
}, { deep: true, immediate: true });
|
|
3924
|
+
onMounted(() => {
|
|
3925
|
+
setConfigOnMount();
|
|
3926
|
+
onCalendarResize();
|
|
3927
|
+
setPeriodOnMount();
|
|
3928
|
+
window.addEventListener("resize", onCalendarResize);
|
|
3929
|
+
});
|
|
3930
|
+
onBeforeUnmount(() => {
|
|
3931
|
+
window.removeEventListener("resize", onCalendarResize);
|
|
3932
|
+
});
|
|
3933
|
+
function setConfigOnMount() {
|
|
3934
|
+
wasInitialized.value = 1;
|
|
3935
|
+
}
|
|
3936
|
+
function handleUpdatedPeriod(value, leaveMonthMode = false) {
|
|
3937
|
+
emit2("updatedPeriod", { start: value.start, end: value.end });
|
|
3938
|
+
period.value = value;
|
|
3939
|
+
if (leaveMonthMode) mode.value = "day";
|
|
3940
|
+
}
|
|
3941
|
+
function handleChangeMode(payload) {
|
|
3942
|
+
if (payload === "day") {
|
|
3943
|
+
period.value.start = period.value.selectedDate;
|
|
3944
|
+
period.value.end = time.value.setDateToEndOfDay(period.value.selectedDate);
|
|
3945
|
+
}
|
|
3946
|
+
if (payload === "week") {
|
|
3947
|
+
const week = time.value.getCalendarWeekDateObjects(period.value.selectedDate);
|
|
3948
|
+
period.value.start = week[0];
|
|
3949
|
+
period.value.end = time.value.setDateToEndOfDay(week[6]);
|
|
3950
|
+
}
|
|
3951
|
+
if (payload === "month") {
|
|
3952
|
+
const month = time.value.getCalendarMonthSplitInWeeks(
|
|
3953
|
+
period.value.selectedDate.getFullYear(),
|
|
3954
|
+
period.value.selectedDate.getMonth()
|
|
3955
|
+
);
|
|
3956
|
+
period.value.start = month[0][0];
|
|
3957
|
+
const lastWeek = month[month.length - 1];
|
|
3958
|
+
period.value.end = time.value.setDateToEndOfDay(lastWeek[lastWeek.length - 1]);
|
|
3959
|
+
}
|
|
3960
|
+
mode.value = payload;
|
|
3961
|
+
emit2("updatedMode", { mode: payload, period: period.value });
|
|
3962
|
+
}
|
|
3963
|
+
const calendarRoot = ref();
|
|
3964
|
+
function onCalendarResize() {
|
|
3965
|
+
const documentRoot = document.documentElement;
|
|
3966
|
+
const documentFontSize = +window.getComputedStyle(documentRoot).fontSize.split("p")[0];
|
|
3967
|
+
const breakPointFor1RemEquals16px = 700;
|
|
3968
|
+
const multiplier = 16 / documentFontSize;
|
|
3969
|
+
const smallCalendarBreakpoint = breakPointFor1RemEquals16px / multiplier;
|
|
3970
|
+
if (!calendarRoot.value) return;
|
|
3971
|
+
isSmall.value = calendarRoot.value.clientWidth < smallCalendarBreakpoint;
|
|
3972
|
+
if (isSmall.value && !["day", "month"].includes(mode.value)) {
|
|
3973
|
+
mode.value = "day";
|
|
3974
|
+
}
|
|
3975
|
+
}
|
|
3976
|
+
function setPeriodOnMount() {
|
|
3977
|
+
if (mode.value === "week") {
|
|
3978
|
+
const currentWeek = time.value.getCalendarWeekDateObjects(period.value.selectedDate);
|
|
3979
|
+
period.value.start = currentWeek[0];
|
|
3980
|
+
period.value.end = currentWeek[6];
|
|
3981
|
+
} else if (mode.value === "month") {
|
|
3982
|
+
const month = time.value.getCalendarMonthSplitInWeeks(
|
|
3983
|
+
period.value.selectedDate.getFullYear(),
|
|
3984
|
+
period.value.selectedDate.getMonth()
|
|
3985
|
+
);
|
|
3986
|
+
period.value.start = month[0][0];
|
|
3987
|
+
const lastWeek = month[month.length - 1];
|
|
3988
|
+
period.value.end = lastWeek[lastWeek.length - 1];
|
|
3989
|
+
}
|
|
3990
|
+
}
|
|
3991
|
+
function handleEventWasUpdated(calendarEvent, eventType) {
|
|
3992
|
+
const newEvents = eventsDataProperty.value.filter(
|
|
3993
|
+
(e) => e.id !== calendarEvent.id
|
|
3994
|
+
);
|
|
3995
|
+
eventsDataProperty.value = [calendarEvent, ...newEvents];
|
|
3996
|
+
emit2(eventType === "dragged" ? "eventWasDragged" : "eventWasResized", calendarEvent);
|
|
3997
|
+
}
|
|
3998
|
+
function setTimePointsFromDayBoundary(boundary) {
|
|
3999
|
+
return Time.getTimePointsFromHour(boundary);
|
|
4000
|
+
}
|
|
4001
|
+
const day = computed(() => {
|
|
4002
|
+
return {
|
|
4003
|
+
dayName: time.value.getLocalizedNameOfWeekday(period.value.selectedDate, "long"),
|
|
4004
|
+
dateTimeString: period.value.selectedDate.toLocaleDateString("en-US", {
|
|
4005
|
+
day: "2-digit",
|
|
4006
|
+
month: "2-digit",
|
|
4007
|
+
year: "numeric"
|
|
4008
|
+
}),
|
|
4009
|
+
events: eventsDataProperty.value.filter((e) => {
|
|
4010
|
+
const eventDate = new Date(e.time.start);
|
|
4011
|
+
return eventDate >= period.value.start && eventDate <= period.value.end;
|
|
4012
|
+
}),
|
|
4013
|
+
fullDayEvents: {
|
|
4014
|
+
date: period.value.selectedDate,
|
|
4015
|
+
events: eventsDataProperty.value.filter((e) => {
|
|
4016
|
+
const eventDate = new Date(e.time.start);
|
|
4017
|
+
return eventDate >= period.value.start && eventDate <= period.value.end;
|
|
4018
|
+
})
|
|
4019
|
+
}
|
|
4020
|
+
};
|
|
4021
|
+
});
|
|
4022
|
+
function handleDateWasClicked(payload) {
|
|
4023
|
+
emit2("dayWasClicked", payload);
|
|
4024
|
+
emit2("dateWasClicked", payload);
|
|
4025
|
+
}
|
|
4026
|
+
return (_ctx, _cache) => {
|
|
4027
|
+
var _a3, _b2;
|
|
4028
|
+
return openBlock(), createElementBlock("div", _hoisted_1$Q, [
|
|
4029
|
+
createElementVNode("div", {
|
|
4030
|
+
ref_key: "calendarRoot",
|
|
4031
|
+
ref: calendarRoot,
|
|
4032
|
+
class: normalizeClass(["calendar-root", {
|
|
4033
|
+
"mode-is-day": mode.value === "day",
|
|
4034
|
+
"mode-is-week": mode.value === "week",
|
|
4035
|
+
"mode-is-month": mode.value === "month",
|
|
4036
|
+
"qalendar-is-small": isSmall.value
|
|
4037
|
+
}]),
|
|
4038
|
+
"data-lang": ((_b2 = (_a3 = __props.config) == null ? void 0 : _a3.locale) == null ? void 0 : _b2.substring(0, 2)) || "en"
|
|
4039
|
+
}, [
|
|
4040
|
+
createVNode(Transition, { name: "loading" }, {
|
|
4041
|
+
default: withCtx(() => [
|
|
4042
|
+
__props.isLoading ? (openBlock(), createElementBlock("div", _hoisted_3$t)) : createCommentVNode("", true)
|
|
4043
|
+
]),
|
|
4044
|
+
_: 1
|
|
4045
|
+
}),
|
|
4046
|
+
(openBlock(), createBlock(AppHeader, {
|
|
4047
|
+
ref_key: "appHeaderRef",
|
|
4048
|
+
ref: appHeaderRef,
|
|
4049
|
+
key: wasInitialized.value + mode.value,
|
|
4050
|
+
config: __props.config,
|
|
4051
|
+
mode: mode.value,
|
|
4052
|
+
time: time.value,
|
|
4053
|
+
period: period.value,
|
|
4054
|
+
"is-small": isSmall.value,
|
|
4055
|
+
onChangeMode: handleChangeMode,
|
|
4056
|
+
onUpdatedPeriod: handleUpdatedPeriod
|
|
4057
|
+
}, null, 8, ["config", "mode", "time", "period", "is-small"])),
|
|
4058
|
+
mode.value === "agenda" ? (openBlock(), createBlock(AgendaEvents, {
|
|
4059
|
+
key: 0,
|
|
4060
|
+
"events-prop": eventsDataProperty.value,
|
|
4061
|
+
period: period.value,
|
|
4062
|
+
config: __props.config,
|
|
4063
|
+
time: time.value,
|
|
4064
|
+
day: unref(day)
|
|
4065
|
+
}, null, 8, ["events-prop", "period", "config", "time", "day"])) : createCommentVNode("", true),
|
|
4066
|
+
["week", "day"].includes(mode.value) ? (openBlock(), createBlock(Week, {
|
|
4067
|
+
key: period.value.start.getTime() + period.value.end.getTime() + eventRenderingKey.value,
|
|
4068
|
+
"events-prop": eventsDataProperty.value,
|
|
4069
|
+
period: period.value,
|
|
4070
|
+
config: __props.config,
|
|
4071
|
+
"mode-prop": mode.value,
|
|
4072
|
+
time: time.value,
|
|
4073
|
+
onEventWasClicked: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("eventWasClicked", $event)),
|
|
4074
|
+
onEventWasResized: _cache[1] || (_cache[1] = ($event) => handleEventWasUpdated($event, "resized")),
|
|
4075
|
+
onEventWasDragged: _cache[2] || (_cache[2] = ($event) => handleEventWasUpdated($event, "dragged")),
|
|
4076
|
+
onEditEvent: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("editEvent", $event)),
|
|
4077
|
+
onDeleteEvent: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("deleteEvent", $event)),
|
|
4078
|
+
onIntervalWasClicked: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("intervalWasClicked", $event)),
|
|
4079
|
+
onDayWasClicked: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("dayWasClicked", $event)),
|
|
4080
|
+
onDatetimeWasClicked: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("datetimeWasClicked", $event))
|
|
4081
|
+
}, {
|
|
4082
|
+
weekDayEvent: withCtx((p2) => [
|
|
4083
|
+
renderSlot(_ctx.$slots, "weekDayEvent", {
|
|
4084
|
+
eventData: p2.eventData
|
|
4085
|
+
})
|
|
4086
|
+
]),
|
|
4087
|
+
eventDialog: withCtx((p2) => [
|
|
4088
|
+
renderSlot(_ctx.$slots, "eventDialog", {
|
|
4089
|
+
eventDialogData: p2.eventDialogData,
|
|
4090
|
+
closeEventDialog: p2.closeEventDialog
|
|
4091
|
+
})
|
|
4092
|
+
]),
|
|
4093
|
+
customCurrentTime: withCtx(() => [
|
|
4094
|
+
renderSlot(_ctx.$slots, "customCurrentTime")
|
|
4095
|
+
]),
|
|
4096
|
+
_: 3
|
|
4097
|
+
}, 8, ["events-prop", "period", "config", "mode-prop", "time"])) : createCommentVNode("", true),
|
|
4098
|
+
mode.value === "month" ? (openBlock(), createBlock(_sfc_main$16, {
|
|
4099
|
+
key: period.value.start.getTime() + period.value.end.getTime() + eventRenderingKey.value,
|
|
4100
|
+
"events-prop": eventsDataProperty.value,
|
|
4101
|
+
time: time.value,
|
|
4102
|
+
config: enhancedConfig.value,
|
|
4103
|
+
period: period.value,
|
|
4104
|
+
onEventWasClicked: _cache[8] || (_cache[8] = ($event) => _ctx.$emit("eventWasClicked", $event)),
|
|
4105
|
+
onDateWasClicked: handleDateWasClicked,
|
|
4106
|
+
onEventWasDragged: _cache[9] || (_cache[9] = ($event) => handleEventWasUpdated($event, "dragged")),
|
|
4107
|
+
onUpdatedPeriod: _cache[10] || (_cache[10] = ($event) => handleUpdatedPeriod($event, true)),
|
|
4108
|
+
onEditEvent: _cache[11] || (_cache[11] = ($event) => _ctx.$emit("editEvent", $event)),
|
|
4109
|
+
onDeleteEvent: _cache[12] || (_cache[12] = ($event) => _ctx.$emit("deleteEvent", $event))
|
|
4110
|
+
}, {
|
|
4111
|
+
eventDialog: withCtx((p2) => [
|
|
4112
|
+
renderSlot(_ctx.$slots, "eventDialog", {
|
|
4113
|
+
eventDialogData: p2.eventDialogData,
|
|
4114
|
+
closeEventDialog: p2.closeEventDialog
|
|
4115
|
+
})
|
|
4116
|
+
]),
|
|
4117
|
+
monthEvent: withCtx((p2) => [
|
|
4118
|
+
renderSlot(_ctx.$slots, "monthEvent", {
|
|
4119
|
+
eventData: p2.eventData
|
|
4120
|
+
})
|
|
4121
|
+
]),
|
|
4122
|
+
dayCell: withCtx(({ dayData }) => [
|
|
4123
|
+
renderSlot(_ctx.$slots, "dayCell", { dayData })
|
|
4124
|
+
]),
|
|
4125
|
+
_: 3
|
|
4126
|
+
}, 8, ["events-prop", "time", "config", "period"])) : createCommentVNode("", true)
|
|
4127
|
+
], 10, _hoisted_2$B)
|
|
4128
|
+
]);
|
|
4129
|
+
};
|
|
4130
|
+
}
|
|
4131
|
+
});
|
|
678
4132
|
const _hoisted_1$P = {
|
|
679
4133
|
key: 0,
|
|
680
4134
|
class: "card_label"
|
|
@@ -5504,21 +8958,21 @@ function styleInject(css2, ref2) {
|
|
|
5504
8958
|
return;
|
|
5505
8959
|
}
|
|
5506
8960
|
var head = document.head || document.getElementsByTagName("head")[0];
|
|
5507
|
-
var
|
|
5508
|
-
|
|
8961
|
+
var style = document.createElement("style");
|
|
8962
|
+
style.type = "text/css";
|
|
5509
8963
|
if (insertAt === "top") {
|
|
5510
8964
|
if (head.firstChild) {
|
|
5511
|
-
head.insertBefore(
|
|
8965
|
+
head.insertBefore(style, head.firstChild);
|
|
5512
8966
|
} else {
|
|
5513
|
-
head.appendChild(
|
|
8967
|
+
head.appendChild(style);
|
|
5514
8968
|
}
|
|
5515
8969
|
} else {
|
|
5516
|
-
head.appendChild(
|
|
8970
|
+
head.appendChild(style);
|
|
5517
8971
|
}
|
|
5518
|
-
if (
|
|
5519
|
-
|
|
8972
|
+
if (style.styleSheet) {
|
|
8973
|
+
style.styleSheet.cssText = css2;
|
|
5520
8974
|
} else {
|
|
5521
|
-
|
|
8975
|
+
style.appendChild(document.createTextNode(css2));
|
|
5522
8976
|
}
|
|
5523
8977
|
}
|
|
5524
8978
|
var css_248z$1 = "\n.chart {\n position: relative;\n}\n";
|
|
@@ -5692,8 +9146,8 @@ var script$9 = defineComponent({
|
|
|
5692
9146
|
}
|
|
5693
9147
|
function computeDotStyle(active) {
|
|
5694
9148
|
const dotStyle = props2.dotStyle;
|
|
5695
|
-
const
|
|
5696
|
-
return Object.assign({ r: active ? 5 : 3, stroke:
|
|
9149
|
+
const style = getStyle.value();
|
|
9150
|
+
return Object.assign({ r: active ? 5 : 3, stroke: style.stroke, strokeWidth: style.strokeWidth, fill: "white" }, dotStyle);
|
|
5697
9151
|
}
|
|
5698
9152
|
const getStyle = computed(() => {
|
|
5699
9153
|
if (is$1(Function, props2.lineStyle)) {
|
|
@@ -5896,11 +9350,11 @@ var script$7 = defineComponent({
|
|
|
5896
9350
|
const getStyle = computed(() => {
|
|
5897
9351
|
return () => Object.assign({ colors: ["#4daf4a", "#377eb8", "#ff7f00", "#984ea3", "#e41a1c"], innerRadius: 2, cornerRadius: 0, padAngle: 0.01 }, props2.pieStyle);
|
|
5898
9352
|
});
|
|
5899
|
-
const
|
|
9353
|
+
const style = getStyle.value();
|
|
5900
9354
|
const arcs = ref([]);
|
|
5901
9355
|
const colors = ordinal(getStyle.value().colors);
|
|
5902
9356
|
const arcGen = () => {
|
|
5903
|
-
return arc().outerRadius(size2.value).innerRadius(
|
|
9357
|
+
return arc().outerRadius(size2.value).innerRadius(style.innerRadius).cornerRadius(style.cornerRadius).padAngle(style.padAngle);
|
|
5904
9358
|
};
|
|
5905
9359
|
const transform = ref(`translate(${size2.value + chart.canvas.x}, ${size2.value + chart.canvas.y})`);
|
|
5906
9360
|
let pieSort;
|
|
@@ -6183,7 +9637,7 @@ var script$4 = defineComponent({
|
|
|
6183
9637
|
const isRight = computed(() => {
|
|
6184
9638
|
return position.value.x >= canvas.value.width / 4 * 3;
|
|
6185
9639
|
});
|
|
6186
|
-
const
|
|
9640
|
+
const style = computed(() => {
|
|
6187
9641
|
if (direction.value === "vertical") {
|
|
6188
9642
|
return {
|
|
6189
9643
|
top: position.value.y - 0.5 + "px",
|
|
@@ -6239,7 +9693,7 @@ var script$4 = defineComponent({
|
|
|
6239
9693
|
direction.value = chart.config.direction;
|
|
6240
9694
|
canvas.value = chart.canvas;
|
|
6241
9695
|
});
|
|
6242
|
-
return { el, show, canvas, direction, style
|
|
9696
|
+
return { el, show, canvas, direction, style, styleContent, position, items, isRight };
|
|
6243
9697
|
}
|
|
6244
9698
|
});
|
|
6245
9699
|
const _hoisted_1$3$1 = { key: 0 };
|
|
@@ -6979,16 +10433,16 @@ var script$1 = defineComponent({
|
|
|
6979
10433
|
}
|
|
6980
10434
|
const toKebabCase = (data3) => mapKeys(kebabize, data3);
|
|
6981
10435
|
const getStyle = (r2) => {
|
|
6982
|
-
const
|
|
10436
|
+
const style = {
|
|
6983
10437
|
stroke: r2.color,
|
|
6984
10438
|
strokeWidth: 5,
|
|
6985
10439
|
fill: r2.color,
|
|
6986
10440
|
fillOpacity: 0.9
|
|
6987
10441
|
};
|
|
6988
10442
|
if (props2.rcStyle && typeof props2.rcStyle === "function") {
|
|
6989
|
-
return Object.assign(Object.assign({},
|
|
10443
|
+
return Object.assign(Object.assign({}, style), props2.rcStyle(r2));
|
|
6990
10444
|
}
|
|
6991
|
-
return
|
|
10445
|
+
return style;
|
|
6992
10446
|
};
|
|
6993
10447
|
function onMouseOver(i2) {
|
|
6994
10448
|
selected.value = i2;
|
|
@@ -8206,7 +11660,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
|
|
|
8206
11660
|
emits: /* @__PURE__ */ mergeModels(["update:selectedItems", "orderBy", "select", "lastItemVisible"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
|
|
8207
11661
|
setup(__props, { emit: __emit }) {
|
|
8208
11662
|
useCssVars((_ctx) => ({
|
|
8209
|
-
"
|
|
11663
|
+
"3ee4947a": unref(computedItemHeight)
|
|
8210
11664
|
}));
|
|
8211
11665
|
const props2 = __props;
|
|
8212
11666
|
const emit2 = __emit;
|
|
@@ -8385,13 +11839,29 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
|
|
|
8385
11839
|
};
|
|
8386
11840
|
}
|
|
8387
11841
|
});
|
|
8388
|
-
const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-
|
|
11842
|
+
const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-3668ec69"]]);
|
|
8389
11843
|
function useDraggable(options = {}) {
|
|
8390
11844
|
const isDragging = ref(false);
|
|
8391
11845
|
const dragElement = ref(null);
|
|
8392
11846
|
const ghostElement = ref(null);
|
|
8393
11847
|
const dropIndicator = ref(null);
|
|
8394
11848
|
const dropTarget = ref(null);
|
|
11849
|
+
const isBrowser = typeof window !== "undefined";
|
|
11850
|
+
if (isBrowser) {
|
|
11851
|
+
const existingStyle = document.getElementById("draggable-style");
|
|
11852
|
+
if (!existingStyle) {
|
|
11853
|
+
const style = document.createElement("style");
|
|
11854
|
+
style.id = "draggable-style";
|
|
11855
|
+
style.textContent = `
|
|
11856
|
+
.draggable-ghost {
|
|
11857
|
+
opacity: 0.5;
|
|
11858
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
11859
|
+
transition: transform 0.1s;
|
|
11860
|
+
}
|
|
11861
|
+
`;
|
|
11862
|
+
document.head.appendChild(style);
|
|
11863
|
+
}
|
|
11864
|
+
}
|
|
8395
11865
|
const defaultOptions2 = {
|
|
8396
11866
|
animation: 150,
|
|
8397
11867
|
mode: "line",
|
|
@@ -8412,6 +11882,7 @@ function useDraggable(options = {}) {
|
|
|
8412
11882
|
const UPDATE_THRESHOLD = 150;
|
|
8413
11883
|
const POSITION_CACHE = /* @__PURE__ */ new Map();
|
|
8414
11884
|
function createGhost(el) {
|
|
11885
|
+
if (!isBrowser) return null;
|
|
8415
11886
|
const ghost = el.cloneNode(true);
|
|
8416
11887
|
const rect = el.getBoundingClientRect();
|
|
8417
11888
|
ghost.style.position = "fixed";
|
|
@@ -8430,6 +11901,7 @@ function useDraggable(options = {}) {
|
|
|
8430
11901
|
return ghost;
|
|
8431
11902
|
}
|
|
8432
11903
|
function createDropIndicator(el) {
|
|
11904
|
+
if (!isBrowser) return null;
|
|
8433
11905
|
const line2 = document.createElement("div");
|
|
8434
11906
|
line2.classList.add(defaultOptions2.dropIndicatorClass);
|
|
8435
11907
|
line2.style.position = "fixed";
|
|
@@ -8525,6 +11997,7 @@ function useDraggable(options = {}) {
|
|
|
8525
11997
|
return dropIndex;
|
|
8526
11998
|
}
|
|
8527
11999
|
function cleanup() {
|
|
12000
|
+
if (!isBrowser) return;
|
|
8528
12001
|
document.removeEventListener("mousemove", onDragMove);
|
|
8529
12002
|
document.removeEventListener("mouseup", onDragEnd);
|
|
8530
12003
|
document.removeEventListener("keydown", onKeyDown);
|
|
@@ -8561,9 +12034,11 @@ function useDraggable(options = {}) {
|
|
|
8561
12034
|
}
|
|
8562
12035
|
isDragging.value = false;
|
|
8563
12036
|
dropTarget.value = null;
|
|
8564
|
-
|
|
8565
|
-
|
|
8566
|
-
|
|
12037
|
+
if (isBrowser) {
|
|
12038
|
+
document.body.style.userSelect = "";
|
|
12039
|
+
document.body.style.webkitUserSelect = "";
|
|
12040
|
+
document.body.style.cursor = "";
|
|
12041
|
+
}
|
|
8567
12042
|
if (scrollRAF) {
|
|
8568
12043
|
cancelAnimationFrame(scrollRAF);
|
|
8569
12044
|
scrollRAF = null;
|
|
@@ -8579,7 +12054,7 @@ function useDraggable(options = {}) {
|
|
|
8579
12054
|
}
|
|
8580
12055
|
function onDragStart(e) {
|
|
8581
12056
|
var _a2;
|
|
8582
|
-
if (defaultOptions2.disabled) return;
|
|
12057
|
+
if (!isBrowser || defaultOptions2.disabled) return;
|
|
8583
12058
|
if (e.button !== 0) return;
|
|
8584
12059
|
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
|
|
8585
12060
|
const dragEl2 = findDraggableParent(e.target);
|
|
@@ -8607,13 +12082,15 @@ function useDraggable(options = {}) {
|
|
|
8607
12082
|
dragEl2.classList.add(defaultOptions2.dragClass);
|
|
8608
12083
|
shiftAmount = defaultOptions2.mode === "ghost" ? handleGhostMode(dragEl2) : handleLineMode(dragEl2);
|
|
8609
12084
|
(_a2 = defaultOptions2.onStart) == null ? void 0 : _a2.call(defaultOptions2, e);
|
|
8610
|
-
|
|
8611
|
-
|
|
8612
|
-
|
|
8613
|
-
|
|
8614
|
-
|
|
8615
|
-
|
|
8616
|
-
|
|
12085
|
+
if (isBrowser) {
|
|
12086
|
+
document.body.style.userSelect = "none";
|
|
12087
|
+
document.body.style.webkitUserSelect = "none";
|
|
12088
|
+
document.body.style.cursor = "grabbing";
|
|
12089
|
+
window.addEventListener("blur", cleanup);
|
|
12090
|
+
document.addEventListener("mousemove", onDragMove);
|
|
12091
|
+
document.addEventListener("mouseup", onDragEnd);
|
|
12092
|
+
document.addEventListener("keydown", onKeyDown);
|
|
12093
|
+
}
|
|
8617
12094
|
}
|
|
8618
12095
|
function findScrollParent(element) {
|
|
8619
12096
|
let parent = element.parentElement;
|
|
@@ -8726,7 +12203,7 @@ function useDraggable(options = {}) {
|
|
|
8726
12203
|
}
|
|
8727
12204
|
function onTouchStart(e) {
|
|
8728
12205
|
var _a2;
|
|
8729
|
-
if (defaultOptions2.disabled || !e.target) return;
|
|
12206
|
+
if (!isBrowser || defaultOptions2.disabled || !e.target) return;
|
|
8730
12207
|
const touch = e.touches[0];
|
|
8731
12208
|
if (!touch) return;
|
|
8732
12209
|
const target = e.target;
|
|
@@ -8753,13 +12230,15 @@ function useDraggable(options = {}) {
|
|
|
8753
12230
|
dragElement.value.classList.add(defaultOptions2.dragClass);
|
|
8754
12231
|
shiftAmount = defaultOptions2.mode === "ghost" ? handleGhostMode(dragElement.value) : handleLineMode(dragElement.value);
|
|
8755
12232
|
(_a2 = defaultOptions2.onStart) == null ? void 0 : _a2.call(defaultOptions2, e);
|
|
8756
|
-
|
|
8757
|
-
|
|
8758
|
-
|
|
8759
|
-
|
|
8760
|
-
|
|
8761
|
-
|
|
8762
|
-
|
|
12233
|
+
if (isBrowser) {
|
|
12234
|
+
document.body.style.userSelect = "none";
|
|
12235
|
+
document.body.style.webkitUserSelect = "none";
|
|
12236
|
+
document.body.style.cursor = "grabbing";
|
|
12237
|
+
window.addEventListener("blur", cleanup);
|
|
12238
|
+
document.addEventListener("touchmove", onTouchMove, { passive: false });
|
|
12239
|
+
document.addEventListener("touchend", onTouchEnd);
|
|
12240
|
+
document.addEventListener("touchcancel", onTouchEnd);
|
|
12241
|
+
}
|
|
8763
12242
|
}
|
|
8764
12243
|
function onTouchMove(e) {
|
|
8765
12244
|
e.preventDefault();
|
|
@@ -8787,6 +12266,7 @@ function useDraggable(options = {}) {
|
|
|
8787
12266
|
document.removeEventListener("touchcancel", onTouchEnd);
|
|
8788
12267
|
}
|
|
8789
12268
|
function initDraggableContainer(container) {
|
|
12269
|
+
if (!isBrowser) return;
|
|
8790
12270
|
cleanupFn == null ? void 0 : cleanupFn();
|
|
8791
12271
|
isDragging.value = false;
|
|
8792
12272
|
dragElement.value = null;
|
|
@@ -8834,16 +12314,6 @@ function useDraggable(options = {}) {
|
|
|
8834
12314
|
initDraggableContainer
|
|
8835
12315
|
};
|
|
8836
12316
|
}
|
|
8837
|
-
const style = document.createElement("style");
|
|
8838
|
-
style.textContent = `
|
|
8839
|
-
.draggable-ghost {
|
|
8840
|
-
opacity: 0.5;
|
|
8841
|
-
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
8842
|
-
transition: transform 0.1s;
|
|
8843
|
-
|
|
8844
|
-
}
|
|
8845
|
-
`;
|
|
8846
|
-
document.head.appendChild(style);
|
|
8847
12317
|
const _sfc_main$V = /* @__PURE__ */ defineComponent({
|
|
8848
12318
|
__name: "Draggable",
|
|
8849
12319
|
props: {
|
|
@@ -20689,9 +24159,9 @@ const _hoisted_3$m = {
|
|
|
20689
24159
|
class: "required"
|
|
20690
24160
|
};
|
|
20691
24161
|
const _hoisted_4$e = { class: "date-picker-container" };
|
|
20692
|
-
const _hoisted_5$e = ["
|
|
24162
|
+
const _hoisted_5$e = ["value", "min", "max", "required", "disabled"];
|
|
20693
24163
|
const _hoisted_6$a = { class: "flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p" };
|
|
20694
|
-
const _hoisted_7$7 = { class: "calendar-section
|
|
24164
|
+
const _hoisted_7$7 = { class: "calendar-section m_border-none pe-05 m_p-0" };
|
|
20695
24165
|
const _hoisted_8$4 = { class: "flex space-between pb-1" };
|
|
20696
24166
|
const _hoisted_9$3 = { class: "flex gap-05" };
|
|
20697
24167
|
const _hoisted_10$3 = { class: "month-year" };
|
|
@@ -20712,7 +24182,7 @@ const _hoisted_15$2 = {
|
|
|
20712
24182
|
const _hoisted_16$2 = ["disabled", "onClick"];
|
|
20713
24183
|
const _hoisted_17$2 = {
|
|
20714
24184
|
key: 0,
|
|
20715
|
-
class: "time-picker flex column gap-1 w-120px"
|
|
24185
|
+
class: "time-picker border-start flex column gap-1 w-120px"
|
|
20716
24186
|
};
|
|
20717
24187
|
const _hoisted_18 = { class: "flex gap-025" };
|
|
20718
24188
|
const _hoisted_19 = { class: "txt-center opacity-6 txt14" };
|
|
@@ -20727,7 +24197,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20727
24197
|
modelValue: {},
|
|
20728
24198
|
min: {},
|
|
20729
24199
|
max: {},
|
|
20730
|
-
timezone: { default: "UTC" }
|
|
24200
|
+
timezone: { default: "UTC" },
|
|
24201
|
+
mode: { default: "day" },
|
|
24202
|
+
firstDayOfWeek: { default: WEEK_START_DAY.MONDAY },
|
|
24203
|
+
locale: { default: "" }
|
|
20731
24204
|
},
|
|
20732
24205
|
emits: ["update:modelValue"],
|
|
20733
24206
|
setup(__props, { emit: __emit }) {
|
|
@@ -20736,13 +24209,33 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20736
24209
|
let isOpen = ref(false);
|
|
20737
24210
|
let currentMonth = ref(/* @__PURE__ */ new Date());
|
|
20738
24211
|
let currentView = ref("days");
|
|
20739
|
-
const
|
|
24212
|
+
const time = new Time(props2.firstDayOfWeek, props2.locale);
|
|
24213
|
+
function formatDisplayDate(date2) {
|
|
24214
|
+
if (!date2) return "";
|
|
24215
|
+
const dateObj = typeof date2 === "string" ? new Date(date2) : date2;
|
|
24216
|
+
if (props2.enableTime) {
|
|
24217
|
+
return dateObj.toLocaleString(props2.locale || void 0, {
|
|
24218
|
+
year: "numeric",
|
|
24219
|
+
month: "short",
|
|
24220
|
+
day: "numeric",
|
|
24221
|
+
hour: "2-digit",
|
|
24222
|
+
minute: "2-digit",
|
|
24223
|
+
timeZone: props2.timezone
|
|
24224
|
+
});
|
|
24225
|
+
}
|
|
24226
|
+
return dateObj.toLocaleString(props2.locale || void 0, {
|
|
24227
|
+
year: "numeric",
|
|
24228
|
+
month: "short",
|
|
24229
|
+
day: "numeric",
|
|
24230
|
+
timeZone: props2.timezone
|
|
24231
|
+
});
|
|
24232
|
+
}
|
|
20740
24233
|
function formatDate(date2) {
|
|
20741
24234
|
if (!date2) return "";
|
|
20742
24235
|
const dateObj = typeof date2 === "string" ? new Date(date2) : date2;
|
|
20743
24236
|
return props2.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split("T")[0];
|
|
20744
24237
|
}
|
|
20745
|
-
const
|
|
24238
|
+
const formattedDisplayValue = computed(() => formatDisplayDate(props2.modelValue));
|
|
20746
24239
|
const formattedMin = computed(() => formatDate(props2.min));
|
|
20747
24240
|
const formattedMax = computed(() => formatDate(props2.max));
|
|
20748
24241
|
const selectedDate = computed(() => {
|
|
@@ -20752,31 +24245,25 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20752
24245
|
const currentMonthDays = computed(() => {
|
|
20753
24246
|
const year = currentMonth.value.getFullYear();
|
|
20754
24247
|
const month = currentMonth.value.getMonth();
|
|
20755
|
-
|
|
20756
|
-
const lastDay = new Date(year, month + 1, 0);
|
|
20757
|
-
const days = [];
|
|
20758
|
-
for (let i2 = 0; i2 < firstDay.getDay(); i2++) days.push(null);
|
|
20759
|
-
for (let i2 = 1; i2 <= lastDay.getDate(); i2++) days.push(new Date(year, month, i2));
|
|
20760
|
-
return days;
|
|
24248
|
+
return time.getCalendarMonthSplitInWeeks(year, month).flat();
|
|
20761
24249
|
});
|
|
20762
24250
|
const currentMonthValue = computed(() => ({
|
|
20763
24251
|
month: currentMonth.value.getMonth(),
|
|
20764
24252
|
year: currentMonth.value.getFullYear(),
|
|
20765
24253
|
formatted: {
|
|
20766
|
-
month: currentMonth.value
|
|
20767
|
-
year: currentMonth.value.
|
|
24254
|
+
month: time.getLocalizedNameOfMonth(currentMonth.value, "long"),
|
|
24255
|
+
year: time.getLocalizedDateString(currentMonth.value).split("/").pop()
|
|
24256
|
+
// Get just the year part
|
|
20768
24257
|
}
|
|
20769
24258
|
}));
|
|
20770
|
-
const months = computed(
|
|
20771
|
-
|
|
20772
|
-
|
|
20773
|
-
|
|
20774
|
-
|
|
20775
|
-
|
|
20776
|
-
|
|
20777
|
-
|
|
20778
|
-
})
|
|
20779
|
-
);
|
|
24259
|
+
const months = computed(() => Array.from({ length: 12 }, (_2, i2) => {
|
|
24260
|
+
const date2 = new Date(currentMonthValue.value.year, i2, 1);
|
|
24261
|
+
return {
|
|
24262
|
+
name: time.getLocalizedNameOfMonth(date2, "short"),
|
|
24263
|
+
value: i2,
|
|
24264
|
+
disabled: isDateDisabled(date2)
|
|
24265
|
+
};
|
|
24266
|
+
}));
|
|
20780
24267
|
const years = computed(() => {
|
|
20781
24268
|
const startYear = currentMonthValue.value.year - 10;
|
|
20782
24269
|
return Array.from({ length: 21 }, (_2, i2) => ({
|
|
@@ -20784,6 +24271,15 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20784
24271
|
disabled: isYearDisabled(startYear + i2)
|
|
20785
24272
|
}));
|
|
20786
24273
|
});
|
|
24274
|
+
const weekDays = computed(() => {
|
|
24275
|
+
const weekStart = /* @__PURE__ */ new Date();
|
|
24276
|
+
weekStart.setDate(weekStart.getDate() - weekStart.getDay() + (props2.firstDayOfWeek === WEEK_START_DAY.MONDAY ? 1 : 0));
|
|
24277
|
+
return Array.from({ length: 7 }, (_2, i2) => {
|
|
24278
|
+
const day = new Date(weekStart);
|
|
24279
|
+
day.setDate(weekStart.getDate() + i2);
|
|
24280
|
+
return time.getLocalizedNameOfWeekday(day, "short");
|
|
24281
|
+
});
|
|
24282
|
+
});
|
|
20787
24283
|
function isDateDisabled(date2) {
|
|
20788
24284
|
if (!date2) return true;
|
|
20789
24285
|
const minDate = props2.min ? new Date(props2.min) : null;
|
|
@@ -20830,20 +24326,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20830
24326
|
const currentMinutes = ((_b = selectedDate.value) == null ? void 0 : _b.getMinutes()) ?? (/* @__PURE__ */ new Date()).getMinutes();
|
|
20831
24327
|
newDate.setHours(currentHours);
|
|
20832
24328
|
newDate.setMinutes(currentMinutes);
|
|
20833
|
-
emit2("update:modelValue", newDate.toISOString());
|
|
20834
24329
|
} else {
|
|
20835
|
-
emit2("update:modelValue", newDate.toISOString().split("T")[0]);
|
|
20836
24330
|
isOpen.value = false;
|
|
20837
24331
|
}
|
|
20838
|
-
|
|
20839
|
-
function handleInput(event) {
|
|
20840
|
-
const input = event.target;
|
|
20841
|
-
if (!input.value) {
|
|
20842
|
-
emit2("update:modelValue", "");
|
|
20843
|
-
return;
|
|
20844
|
-
}
|
|
20845
|
-
const date2 = new Date(input.value);
|
|
20846
|
-
emit2("update:modelValue", props2.enableTime ? date2.toISOString() : date2.toISOString().split("T")[0]);
|
|
24332
|
+
emit2("update:modelValue", newDate);
|
|
20847
24333
|
}
|
|
20848
24334
|
const hours = computed(() => {
|
|
20849
24335
|
var _a2;
|
|
@@ -20871,7 +24357,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20871
24357
|
}
|
|
20872
24358
|
function isToday(date2) {
|
|
20873
24359
|
if (!date2) return false;
|
|
20874
|
-
return
|
|
24360
|
+
return time.dateIsToday(date2);
|
|
20875
24361
|
}
|
|
20876
24362
|
const timezoneDisplay = computed(() => {
|
|
20877
24363
|
if (!props2.enableTime) return "";
|
|
@@ -20884,6 +24370,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20884
24370
|
return "UTC";
|
|
20885
24371
|
}
|
|
20886
24372
|
});
|
|
24373
|
+
function isNotInMonth(date2) {
|
|
24374
|
+
return time.isTrailingOrLeadingDate(date2, currentMonth.value.getMonth());
|
|
24375
|
+
}
|
|
20887
24376
|
return (_ctx, _cache) => {
|
|
20888
24377
|
return openBlock(), createElementBlock("div", {
|
|
20889
24378
|
class: normalizeClass(["bagel-input", { small: _ctx.small }]),
|
|
@@ -20893,15 +24382,28 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20893
24382
|
createTextVNode(toDisplayString(_ctx.label) + " ", 1),
|
|
20894
24383
|
_ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3$m, "*")) : createCommentVNode("", true)
|
|
20895
24384
|
])) : createCommentVNode("", true),
|
|
20896
|
-
createVNode(unref(
|
|
24385
|
+
createVNode(unref(_sfc_main$U), {
|
|
20897
24386
|
shown: unref(isOpen),
|
|
20898
|
-
triggers: [],
|
|
20899
24387
|
placement: "bottom-start",
|
|
20900
|
-
distance: 4,
|
|
20901
24388
|
onApplyShow: _cache[4] || (_cache[4] = ($event) => isRef(isOpen) ? isOpen.value = true : isOpen = true),
|
|
20902
24389
|
onApplyHide: _cache[5] || (_cache[5] = ($event) => isRef(isOpen) ? isOpen.value = false : isOpen = false)
|
|
20903
24390
|
}, {
|
|
20904
|
-
|
|
24391
|
+
trigger: withCtx(() => [
|
|
24392
|
+
createElementVNode("div", _hoisted_4$e, [
|
|
24393
|
+
createElementVNode("input", {
|
|
24394
|
+
type: "text",
|
|
24395
|
+
value: formattedDisplayValue.value,
|
|
24396
|
+
min: formattedMin.value,
|
|
24397
|
+
max: formattedMax.value,
|
|
24398
|
+
required: _ctx.required,
|
|
24399
|
+
disabled: !_ctx.editMode,
|
|
24400
|
+
class: "date-input",
|
|
24401
|
+
readonly: "",
|
|
24402
|
+
onClick: _cache[0] || (_cache[0] = ($event) => isRef(isOpen) ? isOpen.value = true : isOpen = true)
|
|
24403
|
+
}, null, 8, _hoisted_5$e)
|
|
24404
|
+
])
|
|
24405
|
+
]),
|
|
24406
|
+
default: withCtx(() => [
|
|
20905
24407
|
createElementVNode("div", _hoisted_6$a, [
|
|
20906
24408
|
createElementVNode("div", _hoisted_7$7, [
|
|
20907
24409
|
createElementVNode("div", _hoisted_8$4, [
|
|
@@ -20953,20 +24455,21 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20953
24455
|
], 64))
|
|
20954
24456
|
]),
|
|
20955
24457
|
unref(currentView) === "days" ? (openBlock(), createElementBlock("div", _hoisted_11$3, [
|
|
20956
|
-
(openBlock(), createElementBlock(Fragment, null, renderList(
|
|
20957
|
-
return
|
|
24458
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays.value, (day) => {
|
|
24459
|
+
return openBlock(), createElementBlock("div", {
|
|
20958
24460
|
key: day,
|
|
20959
24461
|
class: "txt-center txt-12 opacity-6"
|
|
20960
24462
|
}, toDisplayString(day), 1);
|
|
20961
|
-
}),
|
|
20962
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(currentMonthDays.value, (date2
|
|
24463
|
+
}), 128)),
|
|
24464
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(currentMonthDays.value, (date2) => {
|
|
20963
24465
|
return openBlock(), createElementBlock("button", {
|
|
20964
|
-
key:
|
|
24466
|
+
key: date2 == null ? void 0 : date2.toISOString(),
|
|
20965
24467
|
type: "button",
|
|
20966
24468
|
class: normalizeClass(["day aspect-ratio-1 flex align-items-center justify-content-center pointer round txt14 p-0", {
|
|
20967
|
-
selected: isSelected(date2),
|
|
20968
|
-
today: isToday(date2),
|
|
20969
|
-
disabled: isDateDisabled(date2)
|
|
24469
|
+
"selected": isSelected(date2),
|
|
24470
|
+
"today": isToday(date2),
|
|
24471
|
+
"disabled": isDateDisabled(date2),
|
|
24472
|
+
"not-in-month": isNotInMonth(date2)
|
|
20970
24473
|
}]),
|
|
20971
24474
|
disabled: isDateDisabled(date2),
|
|
20972
24475
|
onClick: ($event) => selectDate(date2)
|
|
@@ -21036,28 +24539,13 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
21036
24539
|
])) : createCommentVNode("", true)
|
|
21037
24540
|
])
|
|
21038
24541
|
]),
|
|
21039
|
-
default: withCtx(() => [
|
|
21040
|
-
createElementVNode("div", _hoisted_4$e, [
|
|
21041
|
-
createElementVNode("input", {
|
|
21042
|
-
type: inputType.value,
|
|
21043
|
-
value: formattedValue.value,
|
|
21044
|
-
min: formattedMin.value,
|
|
21045
|
-
max: formattedMax.value,
|
|
21046
|
-
required: _ctx.required,
|
|
21047
|
-
disabled: !_ctx.editMode,
|
|
21048
|
-
class: "date-input",
|
|
21049
|
-
onInput: handleInput,
|
|
21050
|
-
onClick: _cache[0] || (_cache[0] = ($event) => isRef(isOpen) ? isOpen.value = true : isOpen = true)
|
|
21051
|
-
}, null, 40, _hoisted_5$e)
|
|
21052
|
-
])
|
|
21053
|
-
]),
|
|
21054
24542
|
_: 1
|
|
21055
24543
|
}, 8, ["shown"])
|
|
21056
24544
|
], 10, _hoisted_1$D);
|
|
21057
24545
|
};
|
|
21058
24546
|
}
|
|
21059
24547
|
});
|
|
21060
|
-
const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-
|
|
24548
|
+
const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-ca905332"]]);
|
|
21061
24549
|
const _hoisted_1$C = { class: "datetime-wrap" };
|
|
21062
24550
|
const _hoisted_2$q = { class: "date-wrap" };
|
|
21063
24551
|
const _hoisted_3$l = {
|
|
@@ -21722,9 +25210,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
|
21722
25210
|
let formattedValue = ref("");
|
|
21723
25211
|
function inputHandler() {
|
|
21724
25212
|
let numeric = formattedValue.value.replace(/[^\d.-]/g, "");
|
|
21725
|
-
if (numeric === "-." || numeric.endsWith(".")) return;
|
|
21726
25213
|
const emptyValue = ["", "-", "."].includes(numeric);
|
|
21727
|
-
if (
|
|
25214
|
+
if (numeric === "-." || numeric.endsWith(".") || emptyValue) return;
|
|
21728
25215
|
numberValue.value = Number.parseFloat(numeric);
|
|
21729
25216
|
formattedValue.value = emptyValue ? "" : formatNumber2(numberValue.value);
|
|
21730
25217
|
emit2("update:modelValue", numberValue.value);
|
|
@@ -21838,7 +25325,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
|
21838
25325
|
};
|
|
21839
25326
|
}
|
|
21840
25327
|
});
|
|
21841
|
-
const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-
|
|
25328
|
+
const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-ce1f6e76"]]);
|
|
21842
25329
|
const _hoisted_1$y = ["value", "autofocus", "onKeydown", "onPaste"];
|
|
21843
25330
|
const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
21844
25331
|
__name: "OTP",
|
|
@@ -22590,7 +26077,7 @@ function createCommandExecutor(state2, commands) {
|
|
|
22590
26077
|
}
|
|
22591
26078
|
};
|
|
22592
26079
|
}
|
|
22593
|
-
function isStyleActive(
|
|
26080
|
+
function isStyleActive(style, doc) {
|
|
22594
26081
|
const selection = doc.getSelection();
|
|
22595
26082
|
if (!selection || !selection.rangeCount) return false;
|
|
22596
26083
|
const range2 = selection.getRangeAt(0);
|
|
@@ -22607,7 +26094,7 @@ function isStyleActive(style2, doc) {
|
|
|
22607
26094
|
italic: ["em", "i"],
|
|
22608
26095
|
underline: ["u"]
|
|
22609
26096
|
};
|
|
22610
|
-
return checkParent(parent, styleTags[
|
|
26097
|
+
return checkParent(parent, styleTags[style] ?? [style]);
|
|
22611
26098
|
}
|
|
22612
26099
|
function analyzeSelection(doc, range2) {
|
|
22613
26100
|
const container = range2.commonAncestorContainer;
|
|
@@ -23161,9 +26648,9 @@ function useEditor() {
|
|
|
23161
26648
|
"ol",
|
|
23162
26649
|
"li"
|
|
23163
26650
|
];
|
|
23164
|
-
styleTypes.forEach((
|
|
23165
|
-
if (state2.doc && isStyleActive(
|
|
23166
|
-
styles.add(
|
|
26651
|
+
styleTypes.forEach((style) => {
|
|
26652
|
+
if (state2.doc && isStyleActive(style, state2.doc)) {
|
|
26653
|
+
styles.add(style);
|
|
23167
26654
|
}
|
|
23168
26655
|
});
|
|
23169
26656
|
state2.selectedStyles = styles;
|
|
@@ -23524,9 +27011,9 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
|
|
|
23524
27011
|
doc.designMode = "on";
|
|
23525
27012
|
doc.body.contentEditable = "true";
|
|
23526
27013
|
doc.body.dir = hasRTL.value ? "rtl" : "ltr";
|
|
23527
|
-
const
|
|
23528
|
-
|
|
23529
|
-
doc.head.appendChild(
|
|
27014
|
+
const style = doc.createElement("style");
|
|
27015
|
+
style.textContent = (await import("./editor-BKPRpAjr.js")).default;
|
|
27016
|
+
doc.head.appendChild(style);
|
|
23530
27017
|
editor.init(doc);
|
|
23531
27018
|
useEditorKeyboard(doc, commands.execute);
|
|
23532
27019
|
if (!doc.body.firstElementChild) {
|
|
@@ -24906,8 +28393,8 @@ function toggleClass(el, name, state2) {
|
|
|
24906
28393
|
}
|
|
24907
28394
|
}
|
|
24908
28395
|
function css(el, prop3, val) {
|
|
24909
|
-
var
|
|
24910
|
-
if (
|
|
28396
|
+
var style = el && el.style;
|
|
28397
|
+
if (style) {
|
|
24911
28398
|
if (val === void 0) {
|
|
24912
28399
|
if (document.defaultView && document.defaultView.getComputedStyle) {
|
|
24913
28400
|
val = document.defaultView.getComputedStyle(el, "");
|
|
@@ -24916,10 +28403,10 @@ function css(el, prop3, val) {
|
|
|
24916
28403
|
}
|
|
24917
28404
|
return prop3 === void 0 ? val : val[prop3];
|
|
24918
28405
|
} else {
|
|
24919
|
-
if (!(prop3 in
|
|
28406
|
+
if (!(prop3 in style) && prop3.indexOf("webkit") === -1) {
|
|
24920
28407
|
prop3 = "-webkit-" + prop3;
|
|
24921
28408
|
}
|
|
24922
|
-
|
|
28409
|
+
style[prop3] = val + (typeof val === "string" ? "" : "px");
|
|
24923
28410
|
}
|
|
24924
28411
|
}
|
|
24925
28412
|
}
|
|
@@ -40832,19 +44319,20 @@ function timeAgo(date2, lang = "en") {
|
|
|
40832
44319
|
return selectedLang.justNow;
|
|
40833
44320
|
}
|
|
40834
44321
|
export {
|
|
40835
|
-
_sfc_main$
|
|
44322
|
+
_sfc_main$1m as Accordion,
|
|
40836
44323
|
AccordionItem,
|
|
40837
|
-
_sfc_main$
|
|
44324
|
+
_sfc_main$1k as AddressSearch,
|
|
40838
44325
|
Alert,
|
|
40839
44326
|
Avatar,
|
|
40840
44327
|
Badge,
|
|
40841
44328
|
_sfc_main$R as BagelForm,
|
|
40842
44329
|
BagelVue,
|
|
40843
|
-
_sfc_main$
|
|
44330
|
+
_sfc_main$1f as BglComponent,
|
|
40844
44331
|
_sfc_main$R as BglForm,
|
|
40845
44332
|
BglVideo,
|
|
40846
44333
|
BottomMenu,
|
|
40847
44334
|
Btn,
|
|
44335
|
+
_sfc_main$$ as Calendar,
|
|
40848
44336
|
_sfc_main$_ as Card,
|
|
40849
44337
|
Carousel,
|
|
40850
44338
|
CheckInput,
|