@bagelink/vue 0.0.1218 → 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/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 +3583 -111
- package/dist/index.mjs +3584 -112
- 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/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"
|
|
@@ -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,7 +11839,7 @@ 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);
|
|
@@ -20705,9 +24159,9 @@ const _hoisted_3$m = {
|
|
|
20705
24159
|
class: "required"
|
|
20706
24160
|
};
|
|
20707
24161
|
const _hoisted_4$e = { class: "date-picker-container" };
|
|
20708
|
-
const _hoisted_5$e = ["
|
|
24162
|
+
const _hoisted_5$e = ["value", "min", "max", "required", "disabled"];
|
|
20709
24163
|
const _hoisted_6$a = { class: "flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p" };
|
|
20710
|
-
const _hoisted_7$7 = { class: "calendar-section
|
|
24164
|
+
const _hoisted_7$7 = { class: "calendar-section m_border-none pe-05 m_p-0" };
|
|
20711
24165
|
const _hoisted_8$4 = { class: "flex space-between pb-1" };
|
|
20712
24166
|
const _hoisted_9$3 = { class: "flex gap-05" };
|
|
20713
24167
|
const _hoisted_10$3 = { class: "month-year" };
|
|
@@ -20728,7 +24182,7 @@ const _hoisted_15$2 = {
|
|
|
20728
24182
|
const _hoisted_16$2 = ["disabled", "onClick"];
|
|
20729
24183
|
const _hoisted_17$2 = {
|
|
20730
24184
|
key: 0,
|
|
20731
|
-
class: "time-picker flex column gap-1 w-120px"
|
|
24185
|
+
class: "time-picker border-start flex column gap-1 w-120px"
|
|
20732
24186
|
};
|
|
20733
24187
|
const _hoisted_18 = { class: "flex gap-025" };
|
|
20734
24188
|
const _hoisted_19 = { class: "txt-center opacity-6 txt14" };
|
|
@@ -20743,7 +24197,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20743
24197
|
modelValue: {},
|
|
20744
24198
|
min: {},
|
|
20745
24199
|
max: {},
|
|
20746
|
-
timezone: { default: "UTC" }
|
|
24200
|
+
timezone: { default: "UTC" },
|
|
24201
|
+
mode: { default: "day" },
|
|
24202
|
+
firstDayOfWeek: { default: WEEK_START_DAY.MONDAY },
|
|
24203
|
+
locale: { default: "" }
|
|
20747
24204
|
},
|
|
20748
24205
|
emits: ["update:modelValue"],
|
|
20749
24206
|
setup(__props, { emit: __emit }) {
|
|
@@ -20752,13 +24209,33 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20752
24209
|
let isOpen = ref(false);
|
|
20753
24210
|
let currentMonth = ref(/* @__PURE__ */ new Date());
|
|
20754
24211
|
let currentView = ref("days");
|
|
20755
|
-
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
|
+
}
|
|
20756
24233
|
function formatDate(date2) {
|
|
20757
24234
|
if (!date2) return "";
|
|
20758
24235
|
const dateObj = typeof date2 === "string" ? new Date(date2) : date2;
|
|
20759
24236
|
return props2.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split("T")[0];
|
|
20760
24237
|
}
|
|
20761
|
-
const
|
|
24238
|
+
const formattedDisplayValue = computed(() => formatDisplayDate(props2.modelValue));
|
|
20762
24239
|
const formattedMin = computed(() => formatDate(props2.min));
|
|
20763
24240
|
const formattedMax = computed(() => formatDate(props2.max));
|
|
20764
24241
|
const selectedDate = computed(() => {
|
|
@@ -20768,31 +24245,25 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20768
24245
|
const currentMonthDays = computed(() => {
|
|
20769
24246
|
const year = currentMonth.value.getFullYear();
|
|
20770
24247
|
const month = currentMonth.value.getMonth();
|
|
20771
|
-
|
|
20772
|
-
const lastDay = new Date(year, month + 1, 0);
|
|
20773
|
-
const days = [];
|
|
20774
|
-
for (let i2 = 0; i2 < firstDay.getDay(); i2++) days.push(null);
|
|
20775
|
-
for (let i2 = 1; i2 <= lastDay.getDate(); i2++) days.push(new Date(year, month, i2));
|
|
20776
|
-
return days;
|
|
24248
|
+
return time.getCalendarMonthSplitInWeeks(year, month).flat();
|
|
20777
24249
|
});
|
|
20778
24250
|
const currentMonthValue = computed(() => ({
|
|
20779
24251
|
month: currentMonth.value.getMonth(),
|
|
20780
24252
|
year: currentMonth.value.getFullYear(),
|
|
20781
24253
|
formatted: {
|
|
20782
|
-
month: currentMonth.value
|
|
20783
|
-
year: currentMonth.value.
|
|
24254
|
+
month: time.getLocalizedNameOfMonth(currentMonth.value, "long"),
|
|
24255
|
+
year: time.getLocalizedDateString(currentMonth.value).split("/").pop()
|
|
24256
|
+
// Get just the year part
|
|
20784
24257
|
}
|
|
20785
24258
|
}));
|
|
20786
|
-
const months = computed(
|
|
20787
|
-
|
|
20788
|
-
|
|
20789
|
-
|
|
20790
|
-
|
|
20791
|
-
|
|
20792
|
-
|
|
20793
|
-
|
|
20794
|
-
})
|
|
20795
|
-
);
|
|
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
|
+
}));
|
|
20796
24267
|
const years = computed(() => {
|
|
20797
24268
|
const startYear = currentMonthValue.value.year - 10;
|
|
20798
24269
|
return Array.from({ length: 21 }, (_2, i2) => ({
|
|
@@ -20800,6 +24271,15 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20800
24271
|
disabled: isYearDisabled(startYear + i2)
|
|
20801
24272
|
}));
|
|
20802
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
|
+
});
|
|
20803
24283
|
function isDateDisabled(date2) {
|
|
20804
24284
|
if (!date2) return true;
|
|
20805
24285
|
const minDate = props2.min ? new Date(props2.min) : null;
|
|
@@ -20846,20 +24326,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20846
24326
|
const currentMinutes = ((_b = selectedDate.value) == null ? void 0 : _b.getMinutes()) ?? (/* @__PURE__ */ new Date()).getMinutes();
|
|
20847
24327
|
newDate.setHours(currentHours);
|
|
20848
24328
|
newDate.setMinutes(currentMinutes);
|
|
20849
|
-
emit2("update:modelValue", newDate.toISOString());
|
|
20850
24329
|
} else {
|
|
20851
|
-
emit2("update:modelValue", newDate.toISOString().split("T")[0]);
|
|
20852
24330
|
isOpen.value = false;
|
|
20853
24331
|
}
|
|
20854
|
-
|
|
20855
|
-
function handleInput(event) {
|
|
20856
|
-
const input = event.target;
|
|
20857
|
-
if (!input.value) {
|
|
20858
|
-
emit2("update:modelValue", "");
|
|
20859
|
-
return;
|
|
20860
|
-
}
|
|
20861
|
-
const date2 = new Date(input.value);
|
|
20862
|
-
emit2("update:modelValue", props2.enableTime ? date2.toISOString() : date2.toISOString().split("T")[0]);
|
|
24332
|
+
emit2("update:modelValue", newDate);
|
|
20863
24333
|
}
|
|
20864
24334
|
const hours = computed(() => {
|
|
20865
24335
|
var _a2;
|
|
@@ -20887,7 +24357,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20887
24357
|
}
|
|
20888
24358
|
function isToday(date2) {
|
|
20889
24359
|
if (!date2) return false;
|
|
20890
|
-
return
|
|
24360
|
+
return time.dateIsToday(date2);
|
|
20891
24361
|
}
|
|
20892
24362
|
const timezoneDisplay = computed(() => {
|
|
20893
24363
|
if (!props2.enableTime) return "";
|
|
@@ -20900,6 +24370,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20900
24370
|
return "UTC";
|
|
20901
24371
|
}
|
|
20902
24372
|
});
|
|
24373
|
+
function isNotInMonth(date2) {
|
|
24374
|
+
return time.isTrailingOrLeadingDate(date2, currentMonth.value.getMonth());
|
|
24375
|
+
}
|
|
20903
24376
|
return (_ctx, _cache) => {
|
|
20904
24377
|
return openBlock(), createElementBlock("div", {
|
|
20905
24378
|
class: normalizeClass(["bagel-input", { small: _ctx.small }]),
|
|
@@ -20909,15 +24382,28 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20909
24382
|
createTextVNode(toDisplayString(_ctx.label) + " ", 1),
|
|
20910
24383
|
_ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3$m, "*")) : createCommentVNode("", true)
|
|
20911
24384
|
])) : createCommentVNode("", true),
|
|
20912
|
-
createVNode(unref(
|
|
24385
|
+
createVNode(unref(_sfc_main$U), {
|
|
20913
24386
|
shown: unref(isOpen),
|
|
20914
|
-
triggers: [],
|
|
20915
24387
|
placement: "bottom-start",
|
|
20916
|
-
distance: 4,
|
|
20917
24388
|
onApplyShow: _cache[4] || (_cache[4] = ($event) => isRef(isOpen) ? isOpen.value = true : isOpen = true),
|
|
20918
24389
|
onApplyHide: _cache[5] || (_cache[5] = ($event) => isRef(isOpen) ? isOpen.value = false : isOpen = false)
|
|
20919
24390
|
}, {
|
|
20920
|
-
|
|
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(() => [
|
|
20921
24407
|
createElementVNode("div", _hoisted_6$a, [
|
|
20922
24408
|
createElementVNode("div", _hoisted_7$7, [
|
|
20923
24409
|
createElementVNode("div", _hoisted_8$4, [
|
|
@@ -20969,20 +24455,21 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
20969
24455
|
], 64))
|
|
20970
24456
|
]),
|
|
20971
24457
|
unref(currentView) === "days" ? (openBlock(), createElementBlock("div", _hoisted_11$3, [
|
|
20972
|
-
(openBlock(), createElementBlock(Fragment, null, renderList(
|
|
20973
|
-
return
|
|
24458
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays.value, (day) => {
|
|
24459
|
+
return openBlock(), createElementBlock("div", {
|
|
20974
24460
|
key: day,
|
|
20975
24461
|
class: "txt-center txt-12 opacity-6"
|
|
20976
24462
|
}, toDisplayString(day), 1);
|
|
20977
|
-
}),
|
|
20978
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(currentMonthDays.value, (date2
|
|
24463
|
+
}), 128)),
|
|
24464
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(currentMonthDays.value, (date2) => {
|
|
20979
24465
|
return openBlock(), createElementBlock("button", {
|
|
20980
|
-
key:
|
|
24466
|
+
key: date2 == null ? void 0 : date2.toISOString(),
|
|
20981
24467
|
type: "button",
|
|
20982
24468
|
class: normalizeClass(["day aspect-ratio-1 flex align-items-center justify-content-center pointer round txt14 p-0", {
|
|
20983
|
-
selected: isSelected(date2),
|
|
20984
|
-
today: isToday(date2),
|
|
20985
|
-
disabled: isDateDisabled(date2)
|
|
24469
|
+
"selected": isSelected(date2),
|
|
24470
|
+
"today": isToday(date2),
|
|
24471
|
+
"disabled": isDateDisabled(date2),
|
|
24472
|
+
"not-in-month": isNotInMonth(date2)
|
|
20986
24473
|
}]),
|
|
20987
24474
|
disabled: isDateDisabled(date2),
|
|
20988
24475
|
onClick: ($event) => selectDate(date2)
|
|
@@ -21052,28 +24539,13 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
21052
24539
|
])) : createCommentVNode("", true)
|
|
21053
24540
|
])
|
|
21054
24541
|
]),
|
|
21055
|
-
default: withCtx(() => [
|
|
21056
|
-
createElementVNode("div", _hoisted_4$e, [
|
|
21057
|
-
createElementVNode("input", {
|
|
21058
|
-
type: inputType.value,
|
|
21059
|
-
value: formattedValue.value,
|
|
21060
|
-
min: formattedMin.value,
|
|
21061
|
-
max: formattedMax.value,
|
|
21062
|
-
required: _ctx.required,
|
|
21063
|
-
disabled: !_ctx.editMode,
|
|
21064
|
-
class: "date-input",
|
|
21065
|
-
onInput: handleInput,
|
|
21066
|
-
onClick: _cache[0] || (_cache[0] = ($event) => isRef(isOpen) ? isOpen.value = true : isOpen = true)
|
|
21067
|
-
}, null, 40, _hoisted_5$e)
|
|
21068
|
-
])
|
|
21069
|
-
]),
|
|
21070
24542
|
_: 1
|
|
21071
24543
|
}, 8, ["shown"])
|
|
21072
24544
|
], 10, _hoisted_1$D);
|
|
21073
24545
|
};
|
|
21074
24546
|
}
|
|
21075
24547
|
});
|
|
21076
|
-
const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-
|
|
24548
|
+
const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-ca905332"]]);
|
|
21077
24549
|
const _hoisted_1$C = { class: "datetime-wrap" };
|
|
21078
24550
|
const _hoisted_2$q = { class: "date-wrap" };
|
|
21079
24551
|
const _hoisted_3$l = {
|
|
@@ -21738,9 +25210,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
|
21738
25210
|
let formattedValue = ref("");
|
|
21739
25211
|
function inputHandler() {
|
|
21740
25212
|
let numeric = formattedValue.value.replace(/[^\d.-]/g, "");
|
|
21741
|
-
if (numeric === "-." || numeric.endsWith(".")) return;
|
|
21742
25213
|
const emptyValue = ["", "-", "."].includes(numeric);
|
|
21743
|
-
if (
|
|
25214
|
+
if (numeric === "-." || numeric.endsWith(".") || emptyValue) return;
|
|
21744
25215
|
numberValue.value = Number.parseFloat(numeric);
|
|
21745
25216
|
formattedValue.value = emptyValue ? "" : formatNumber2(numberValue.value);
|
|
21746
25217
|
emit2("update:modelValue", numberValue.value);
|
|
@@ -21854,7 +25325,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
|
21854
25325
|
};
|
|
21855
25326
|
}
|
|
21856
25327
|
});
|
|
21857
|
-
const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-
|
|
25328
|
+
const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-ce1f6e76"]]);
|
|
21858
25329
|
const _hoisted_1$y = ["value", "autofocus", "onKeydown", "onPaste"];
|
|
21859
25330
|
const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
21860
25331
|
__name: "OTP",
|
|
@@ -40848,19 +44319,20 @@ function timeAgo(date2, lang = "en") {
|
|
|
40848
44319
|
return selectedLang.justNow;
|
|
40849
44320
|
}
|
|
40850
44321
|
export {
|
|
40851
|
-
_sfc_main$
|
|
44322
|
+
_sfc_main$1m as Accordion,
|
|
40852
44323
|
AccordionItem,
|
|
40853
|
-
_sfc_main$
|
|
44324
|
+
_sfc_main$1k as AddressSearch,
|
|
40854
44325
|
Alert,
|
|
40855
44326
|
Avatar,
|
|
40856
44327
|
Badge,
|
|
40857
44328
|
_sfc_main$R as BagelForm,
|
|
40858
44329
|
BagelVue,
|
|
40859
|
-
_sfc_main$
|
|
44330
|
+
_sfc_main$1f as BglComponent,
|
|
40860
44331
|
_sfc_main$R as BglForm,
|
|
40861
44332
|
BglVideo,
|
|
40862
44333
|
BottomMenu,
|
|
40863
44334
|
Btn,
|
|
44335
|
+
_sfc_main$$ as Calendar,
|
|
40864
44336
|
_sfc_main$_ as Card,
|
|
40865
44337
|
Carousel,
|
|
40866
44338
|
CheckInput,
|