@zeedhi/zd-calendar-vue 1.8.0 → 1.9.0

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.
Files changed (7) hide show
  1. package/dist/calendar-vue.esm.js +1153 -320
  2. package/dist/calendar-vue.umd.js +1158 -322
  3. package/package.json +2 -2
  4. package/types/Calendar.d.ts +11 -3
  5. package/types/CalendarDayInfo.d.ts +30 -0
  6. package/types/CalendarEventInfo.d.ts +25 -0
  7. package/types/CalendarYear.d.ts +43 -0
package/dist/calendar-vue.umd.js CHANGED
@@ -1,8 +1,12 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('vue-property-decorator'), require('@zeedhi/vuetify'), require('@zeedhi/zd-calendar-common')) :
3
- typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'vue-property-decorator', '@zeedhi/vuetify', '@zeedhi/zd-calendar-common'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-calendar-vue"] = {}, global.core, global["vue-property-decorator"], global["@zeedhi/vuetify"], global["@zeedhi/zd-calendar-common"]));
5
- })(this, (function (exports, core, vuePropertyDecorator, vuetify, zdCalendarCommon) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('vue-property-decorator'), require('@zeedhi/vuetify'), require('@zeedhi/zd-calendar-common'), require('vue')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'vue-property-decorator', '@zeedhi/vuetify', '@zeedhi/zd-calendar-common', 'vue'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-calendar-vue"] = {}, global.core, global["vue-property-decorator"], global["@zeedhi/vuetify"], global["@zeedhi/zd-calendar-common"], global.vue));
5
+ })(this, (function (exports, core, vuePropertyDecorator, vuetify, zdCalendarCommon, Vue) { 'use strict';
6
+
7
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
+
9
+ var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
6
10
 
7
11
  /*! *****************************************************************************
8
12
  Copyright (c) Microsoft Corporation.
@@ -30,6 +34,1073 @@
30
34
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
31
35
  }
32
36
 
37
+ let CalendarDayInfo = class CalendarDayInfo extends Vue__default["default"] {
38
+ constructor() {
39
+ super(...arguments);
40
+ this.dateFormat = 'YYYY-MM-DD';
41
+ this.dateTimeFormat = 'YYYY-MM-DD HH:mm';
42
+ }
43
+ get showMenu() {
44
+ return this.value;
45
+ }
46
+ set showMenu(val) {
47
+ this.$emit('input', val);
48
+ }
49
+ get dayjsSelectedDate() {
50
+ return this.selectedDate ? core.dayjs(this.selectedDate, this.dateFormat) : null;
51
+ }
52
+ get shortDayName() {
53
+ var _a;
54
+ return (_a = this.dayjsSelectedDate) === null || _a === void 0 ? void 0 : _a.format('ddd').toUpperCase();
55
+ }
56
+ get dayNumber() {
57
+ var _a;
58
+ return (_a = this.dayjsSelectedDate) === null || _a === void 0 ? void 0 : _a.format('D');
59
+ }
60
+ startsInDay({ start }) {
61
+ const day = this.convertToDayjs(start, this.dateFormat);
62
+ return day.isSame(this.dayjsSelectedDate);
63
+ }
64
+ endsInDay({ end }) {
65
+ const day = this.convertToDayjs(end, this.dateFormat);
66
+ return day.isSame(this.dayjsSelectedDate);
67
+ }
68
+ getStartHour({ start }) {
69
+ const day = this.convertToDayjs(start, this.dateTimeFormat);
70
+ // Convert Dayjs object to a native JavaScript Date
71
+ const date = day.toDate();
72
+ return new Intl.DateTimeFormat(core.I18n.instance.language, {
73
+ hour: 'numeric',
74
+ minute: '2-digit',
75
+ }).format(date);
76
+ }
77
+ getEventClasses(event) {
78
+ const isStart = this.startsInDay(event);
79
+ const isEnd = this.endsInDay(event);
80
+ return {
81
+ 'is-start': isStart,
82
+ 'is-continued-from-prev': !isStart,
83
+ 'is-end': isEnd,
84
+ 'is-continued-to-next': !isEnd,
85
+ };
86
+ }
87
+ convertToDayjs(date, format) {
88
+ if (date instanceof Date) {
89
+ return core.dayjs(date);
90
+ }
91
+ if (date.length < format.length) {
92
+ throw new Error(`Cannot convert invalid date: ${date}`);
93
+ }
94
+ return core.dayjs(date.slice(0, format.length), format);
95
+ }
96
+ clickEvent(event, selectedEvent) {
97
+ this.$emit('click:event', { event, selectedEvent });
98
+ }
99
+ emitDayClick(event) {
100
+ this.$emit('click:day', { event, date: this.selectedDate });
101
+ }
102
+ };
103
+ __decorate([
104
+ vuePropertyDecorator.Prop({ type: Boolean, required: true }),
105
+ __metadata("design:type", Boolean)
106
+ ], CalendarDayInfo.prototype, "value", void 0);
107
+ __decorate([
108
+ vuePropertyDecorator.Prop({ type: Number, required: true }),
109
+ __metadata("design:type", Number)
110
+ ], CalendarDayInfo.prototype, "menuX", void 0);
111
+ __decorate([
112
+ vuePropertyDecorator.Prop({ type: Number, required: true }),
113
+ __metadata("design:type", Number)
114
+ ], CalendarDayInfo.prototype, "menuY", void 0);
115
+ __decorate([
116
+ vuePropertyDecorator.Prop({ type: Number, default: 224 }),
117
+ __metadata("design:type", Number)
118
+ ], CalendarDayInfo.prototype, "menuWidth", void 0);
119
+ __decorate([
120
+ vuePropertyDecorator.Prop({ type: String, default: null }),
121
+ __metadata("design:type", Object)
122
+ ], CalendarDayInfo.prototype, "selectedDate", void 0);
123
+ __decorate([
124
+ vuePropertyDecorator.Prop({ type: Array, default: () => [] }),
125
+ __metadata("design:type", Array)
126
+ ], CalendarDayInfo.prototype, "events", void 0);
127
+ CalendarDayInfo = __decorate([
128
+ vuePropertyDecorator.Component
129
+ ], CalendarDayInfo);
130
+ var script$3 = CalendarDayInfo;
131
+
132
+ function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
133
+ if (typeof shadowMode !== 'boolean') {
134
+ createInjectorSSR = createInjector;
135
+ createInjector = shadowMode;
136
+ shadowMode = false;
137
+ }
138
+ // Vue.extend constructor export interop.
139
+ const options = typeof script === 'function' ? script.options : script;
140
+ // render functions
141
+ if (template && template.render) {
142
+ options.render = template.render;
143
+ options.staticRenderFns = template.staticRenderFns;
144
+ options._compiled = true;
145
+ // functional template
146
+ if (isFunctionalTemplate) {
147
+ options.functional = true;
148
+ }
149
+ }
150
+ // scopedId
151
+ if (scopeId) {
152
+ options._scopeId = scopeId;
153
+ }
154
+ let hook;
155
+ if (moduleIdentifier) {
156
+ // server build
157
+ hook = function (context) {
158
+ // 2.3 injection
159
+ context =
160
+ context || // cached call
161
+ (this.$vnode && this.$vnode.ssrContext) || // stateful
162
+ (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
163
+ // 2.2 with runInNewContext: true
164
+ if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
165
+ context = __VUE_SSR_CONTEXT__;
166
+ }
167
+ // inject component styles
168
+ if (style) {
169
+ style.call(this, createInjectorSSR(context));
170
+ }
171
+ // register component module identifier for async chunk inference
172
+ if (context && context._registeredComponents) {
173
+ context._registeredComponents.add(moduleIdentifier);
174
+ }
175
+ };
176
+ // used by ssr in case component is cached and beforeCreate
177
+ // never gets called
178
+ options._ssrRegister = hook;
179
+ }
180
+ else if (style) {
181
+ hook = shadowMode
182
+ ? function (context) {
183
+ style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
184
+ }
185
+ : function (context) {
186
+ style.call(this, createInjector(context));
187
+ };
188
+ }
189
+ if (hook) {
190
+ if (options.functional) {
191
+ // register for functional component in vue file
192
+ const originalRender = options.render;
193
+ options.render = function renderWithStyleInjection(h, context) {
194
+ hook.call(context);
195
+ return originalRender(h, context);
196
+ };
197
+ }
198
+ else {
199
+ // inject component registration as beforeCreate hook
200
+ const existing = options.beforeCreate;
201
+ options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
202
+ }
203
+ }
204
+ return script;
205
+ }
206
+
207
+ const isOldIE = typeof navigator !== 'undefined' &&
208
+ /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
209
+ function createInjector(context) {
210
+ return (id, style) => addStyle(id, style);
211
+ }
212
+ let HEAD;
213
+ const styles = {};
214
+ function addStyle(id, css) {
215
+ const group = isOldIE ? css.media || 'default' : id;
216
+ const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
217
+ if (!style.ids.has(id)) {
218
+ style.ids.add(id);
219
+ let code = css.source;
220
+ if (css.map) {
221
+ // https://developer.chrome.com/devtools/docs/javascript-debugging
222
+ // this makes source maps inside style tags work properly in Chrome
223
+ code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
224
+ // http://stackoverflow.com/a/26603875
225
+ code +=
226
+ '\n/*# sourceMappingURL=data:application/json;base64,' +
227
+ btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
228
+ ' */';
229
+ }
230
+ if (!style.element) {
231
+ style.element = document.createElement('style');
232
+ style.element.type = 'text/css';
233
+ if (css.media)
234
+ style.element.setAttribute('media', css.media);
235
+ if (HEAD === undefined) {
236
+ HEAD = document.head || document.getElementsByTagName('head')[0];
237
+ }
238
+ HEAD.appendChild(style.element);
239
+ }
240
+ if ('styleSheet' in style.element) {
241
+ style.styles.push(code);
242
+ style.element.styleSheet.cssText = style.styles
243
+ .filter(Boolean)
244
+ .join('\n');
245
+ }
246
+ else {
247
+ const index = style.ids.size - 1;
248
+ const textNode = document.createTextNode(code);
249
+ const nodes = style.element.childNodes;
250
+ if (nodes[index])
251
+ style.element.removeChild(nodes[index]);
252
+ if (nodes.length)
253
+ style.element.insertBefore(textNode, nodes[index]);
254
+ else
255
+ style.element.appendChild(textNode);
256
+ }
257
+ }
258
+ }
259
+
260
+ /* script */
261
+ const __vue_script__$3 = script$3;
262
+
263
+ /* template */
264
+ var __vue_render__$3 = function () {
265
+ var _vm = this;
266
+ var _h = _vm.$createElement;
267
+ var _c = _vm._self._c || _h;
268
+ return _c(
269
+ "v-menu",
270
+ {
271
+ attrs: {
272
+ "position-x": _vm.menuX,
273
+ "position-y": _vm.menuY,
274
+ absolute: "",
275
+ "close-on-content-click": false,
276
+ "content-class": "calendar-day-info",
277
+ },
278
+ model: {
279
+ value: _vm.showMenu,
280
+ callback: function ($$v) {
281
+ _vm.showMenu = $$v;
282
+ },
283
+ expression: "showMenu",
284
+ },
285
+ },
286
+ [
287
+ _c("v-card", { attrs: { width: _vm.menuWidth } }, [
288
+ _c(
289
+ "div",
290
+ {
291
+ staticClass:
292
+ "zd-py-3 zd-display-flex zd-flex-column zd-align-center",
293
+ },
294
+ [
295
+ _c(
296
+ "div",
297
+ { staticClass: "calendar-day-info__3day zd-text-center" },
298
+ [_vm._v(_vm._s(_vm.shortDayName))]
299
+ ),
300
+ _vm._v(" "),
301
+ _c(
302
+ "v-btn",
303
+ {
304
+ class: ["calendar-day-info__day zd-mt-1"],
305
+ attrs: { icon: "" },
306
+ on: {
307
+ click: function ($event) {
308
+ return _vm.emitDayClick($event)
309
+ },
310
+ },
311
+ },
312
+ [_vm._v("\n " + _vm._s(_vm.dayNumber) + "\n ")]
313
+ ),
314
+ ],
315
+ 1
316
+ ),
317
+ _vm._v(" "),
318
+ !!_vm.selectedDate
319
+ ? _c(
320
+ "div",
321
+ { staticClass: "zd-display-flex zd-flex-column zd-px-2 zd-pb-4" },
322
+ [
323
+ _vm._l(_vm.events, function (event) {
324
+ return [
325
+ _c(
326
+ "v-sheet",
327
+ {
328
+ key: event.id,
329
+ class: [
330
+ "v-event white--text zd-mb-1 v-event-start v-event-end zd-px-3",
331
+ _vm.getEventClasses(event),
332
+ ],
333
+ attrs: { color: event.color || "primary" },
334
+ on: {
335
+ click: function ($event) {
336
+ return _vm.clickEvent($event, event)
337
+ },
338
+ },
339
+ },
340
+ [
341
+ _c("div", { staticClass: "event-container" }, [
342
+ _c("span", { staticClass: "v-event-summary" }, [
343
+ _vm.startsInDay(event)
344
+ ? _c("strong", [
345
+ _vm._v(_vm._s(_vm.getStartHour(event))),
346
+ ])
347
+ : _vm._e(),
348
+ _vm._v(
349
+ " \n " +
350
+ _vm._s(event.name) +
351
+ "\n "
352
+ ),
353
+ ]),
354
+ ]),
355
+ ]
356
+ ),
357
+ ]
358
+ }),
359
+ ],
360
+ 2
361
+ )
362
+ : _vm._e(),
363
+ ]),
364
+ ],
365
+ 1
366
+ )
367
+ };
368
+ var __vue_staticRenderFns__$3 = [];
369
+ __vue_render__$3._withStripped = true;
370
+
371
+ /* style */
372
+ const __vue_inject_styles__$3 = function (inject) {
373
+ if (!inject) return
374
+ inject("data-v-927fb13c_0", { source: ".calendar-day-info__3day {\n font-size: 11px;\n}\n.calendar-day-info__day {\n font-size: 26px;\n}\n.calendar-day-info .v-event {\n height: 20px;\n line-height: 20px;\n border-radius: 4px;\n width: 100%;\n position: relative;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 12px;\n cursor: pointer;\n z-index: 1;\n}\n.calendar-day-info .v-event.is-continued-from-prev {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n clip-path: polygon(8px 0%, 100% 0%, 100% 100%, 8px 100%, 0% 50%);\n}\n.calendar-day-info .v-event.is-continued-to-next {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 0% 100%);\n}\n.calendar-day-info .v-event.is-continued-from-prev.is-continued-to-next {\n clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0% 50%);\n}\n.calendar-day-info .v-event-summary {\n font-size: 12px;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n white-space: nowrap;\n}\n.calendar-day-info .event-container {\n height: 20px;\n}", map: undefined, media: undefined });
375
+
376
+ };
377
+ /* scoped */
378
+ const __vue_scope_id__$3 = undefined;
379
+ /* module identifier */
380
+ const __vue_module_identifier__$3 = undefined;
381
+ /* functional template */
382
+ const __vue_is_functional_template__$3 = false;
383
+ /* style inject SSR */
384
+
385
+ /* style inject shadow dom */
386
+
387
+
388
+
389
+ const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
390
+ { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
391
+ __vue_inject_styles__$3,
392
+ __vue_script__$3,
393
+ __vue_scope_id__$3,
394
+ __vue_is_functional_template__$3,
395
+ __vue_module_identifier__$3,
396
+ false,
397
+ createInjector,
398
+ undefined,
399
+ undefined
400
+ );
401
+
402
+ let CalendarEventInfo = class CalendarEventInfo extends Vue__default["default"] {
403
+ constructor() {
404
+ super(...arguments);
405
+ this.dynamicLeft = false;
406
+ this.dynamicRight = false;
407
+ }
408
+ get selectedOpen() {
409
+ return this.value;
410
+ }
411
+ set selectedOpen(val) {
412
+ this.$emit('input', val);
413
+ }
414
+ get computedLeft() {
415
+ return this.left || this.dynamicLeft;
416
+ }
417
+ get computedRight() {
418
+ return this.right || this.dynamicRight;
419
+ }
420
+ onValueChange(newValue) {
421
+ if (newValue && this.activator) {
422
+ this.$nextTick(() => {
423
+ this.calculatePosition();
424
+ });
425
+ }
426
+ }
427
+ calculatePosition() {
428
+ if (!this.activator)
429
+ return;
430
+ const activatorRect = this.activator.getBoundingClientRect();
431
+ const menuWidth = typeof this.width === 'string' ? parseInt(this.width, 10) : this.width;
432
+ const windowWidth = window.innerWidth;
433
+ // Reset dynamic positioning
434
+ this.dynamicLeft = false;
435
+ this.dynamicRight = false;
436
+ // If left or right is explicitly set via props, respect that
437
+ if (this.left || this.right) {
438
+ return;
439
+ }
440
+ // Calculate if the menu would overflow on the right side
441
+ const spaceOnRight = windowWidth - activatorRect.right;
442
+ const spaceOnLeft = activatorRect.left;
443
+ // Check if menu would overflow on the right
444
+ if (spaceOnRight < menuWidth && spaceOnLeft > spaceOnRight) {
445
+ // Not enough space on the right, but more space on the left
446
+ this.dynamicLeft = true;
447
+ }
448
+ else if (spaceOnLeft < menuWidth && spaceOnRight > spaceOnLeft) {
449
+ // Not enough space on the left, but more space on the right
450
+ this.dynamicRight = true;
451
+ }
452
+ else if (spaceOnRight >= menuWidth) {
453
+ // Enough space on the right, default behavior
454
+ this.dynamicRight = false;
455
+ }
456
+ else if (spaceOnLeft >= menuWidth) {
457
+ // Enough space on the left
458
+ this.dynamicLeft = true;
459
+ }
460
+ }
461
+ callCanEditEvent(event) {
462
+ return typeof this.instance.canEditEvent === 'function' && event
463
+ ? this.instance.canEditEvent(event)
464
+ : this.instance.canEditEvent;
465
+ }
466
+ callCanDeleteEvent(event) {
467
+ return typeof this.instance.canDeleteEvent === 'function' && event
468
+ ? this.instance.canDeleteEvent(event)
469
+ : this.instance.canDeleteEvent;
470
+ }
471
+ clickEditEvent(selectedEvent, nativeEvent) {
472
+ this.$emit('click:edit', selectedEvent, nativeEvent);
473
+ }
474
+ clickDeleteEvent(selectedEvent, nativeEvent) {
475
+ this.$emit('click:delete', selectedEvent, nativeEvent);
476
+ }
477
+ };
478
+ __decorate([
479
+ vuePropertyDecorator.Prop({ type: Boolean, required: true }),
480
+ __metadata("design:type", Boolean)
481
+ ], CalendarEventInfo.prototype, "value", void 0);
482
+ __decorate([
483
+ vuePropertyDecorator.Prop({ type: Object, default: null }),
484
+ __metadata("design:type", Object)
485
+ ], CalendarEventInfo.prototype, "selectedEvent", void 0);
486
+ __decorate([
487
+ vuePropertyDecorator.Prop({ default: null }),
488
+ __metadata("design:type", Object)
489
+ ], CalendarEventInfo.prototype, "activator", void 0);
490
+ __decorate([
491
+ vuePropertyDecorator.Prop({ type: Object, required: true }),
492
+ __metadata("design:type", zdCalendarCommon.Calendar)
493
+ ], CalendarEventInfo.prototype, "instance", void 0);
494
+ __decorate([
495
+ vuePropertyDecorator.Prop({ type: Boolean, default: false }),
496
+ __metadata("design:type", Boolean)
497
+ ], CalendarEventInfo.prototype, "left", void 0);
498
+ __decorate([
499
+ vuePropertyDecorator.Prop({ type: Boolean, default: false }),
500
+ __metadata("design:type", Boolean)
501
+ ], CalendarEventInfo.prototype, "right", void 0);
502
+ __decorate([
503
+ vuePropertyDecorator.Prop({ type: Boolean, default: false }),
504
+ __metadata("design:type", Boolean)
505
+ ], CalendarEventInfo.prototype, "offsetX", void 0);
506
+ __decorate([
507
+ vuePropertyDecorator.Prop({ type: Boolean, default: false }),
508
+ __metadata("design:type", Boolean)
509
+ ], CalendarEventInfo.prototype, "offsetY", void 0);
510
+ __decorate([
511
+ vuePropertyDecorator.Prop({ type: [Number, String], default: '448' }),
512
+ __metadata("design:type", Object)
513
+ ], CalendarEventInfo.prototype, "width", void 0);
514
+ __decorate([
515
+ vuePropertyDecorator.Watch('value'),
516
+ __metadata("design:type", Function),
517
+ __metadata("design:paramtypes", [Boolean]),
518
+ __metadata("design:returntype", void 0)
519
+ ], CalendarEventInfo.prototype, "onValueChange", null);
520
+ CalendarEventInfo = __decorate([
521
+ vuePropertyDecorator.Component
522
+ ], CalendarEventInfo);
523
+ var script$2 = CalendarEventInfo;
524
+
525
+ /* script */
526
+ const __vue_script__$2 = script$2;
527
+
528
+ /* template */
529
+ var __vue_render__$2 = function () {
530
+ var _vm = this;
531
+ var _h = _vm.$createElement;
532
+ var _c = _vm._self._c || _h;
533
+ return _c(
534
+ "v-menu",
535
+ {
536
+ attrs: {
537
+ value: _vm.selectedOpen,
538
+ "open-on-click": false,
539
+ "close-on-click": true,
540
+ "close-on-content-click": false,
541
+ activator: _vm.activator,
542
+ "offset-x": _vm.offsetX,
543
+ "offset-y": _vm.offsetY,
544
+ left: _vm.computedLeft,
545
+ right: _vm.computedRight,
546
+ "offset-overflow": "",
547
+ "allow-overflow": "",
548
+ "min-width": _vm.width,
549
+ "max-width": _vm.width,
550
+ "max-height": "40vh",
551
+ },
552
+ },
553
+ [
554
+ _vm.selectedEvent
555
+ ? _c(
556
+ "zd-card",
557
+ {
558
+ attrs: {
559
+ name: "card_" + _vm.instance.name,
560
+ cssClass: "event-info zd-pa-0 zd-display-flex zd-flex-column",
561
+ dark: _vm.instance.dark,
562
+ light: _vm.instance.light,
563
+ "max-height": "inherit",
564
+ },
565
+ },
566
+ [
567
+ _c(
568
+ "v-toolbar",
569
+ {
570
+ staticClass:
571
+ "event-info__toolbar zd-display-flex zd-align-start zd-py-4 zd-flex-shrink-0",
572
+ attrs: {
573
+ height: "auto",
574
+ "min-height": "48",
575
+ dense: "",
576
+ elevation: "0",
577
+ color: "transparent",
578
+ },
579
+ },
580
+ [
581
+ _c(
582
+ "div",
583
+ {
584
+ staticClass:
585
+ "event-info__header zd-display-flex zd-align-start zd-flex-grow-1",
586
+ },
587
+ [
588
+ _c("v-sheet", {
589
+ class: ["event-color-sample zd-flex-shrink-0"],
590
+ attrs: { color: _vm.selectedEvent.color || "primary" },
591
+ }),
592
+ _vm._v(" "),
593
+ _c(
594
+ "zd-text",
595
+ _vm._b(
596
+ {
597
+ staticClass:
598
+ "event-info__title mx-2 zd-display-flex zd-align-center zd-flex-grow-1",
599
+ attrs: { name: "title_" + _vm.instance.name },
600
+ },
601
+ "zd-text",
602
+ {
603
+ text: _vm.selectedEvent.name,
604
+ tag: "h5",
605
+ },
606
+ false
607
+ )
608
+ ),
609
+ ],
610
+ 1
611
+ ),
612
+ _vm._v(" "),
613
+ _c(
614
+ "span",
615
+ { staticClass: "zd-flex-shrink-0" },
616
+ [
617
+ _vm.callCanEditEvent(_vm.selectedEvent)
618
+ ? _c(
619
+ "v-btn",
620
+ {
621
+ attrs: { icon: "", small: "" },
622
+ on: {
623
+ click: function ($event) {
624
+ return _vm.clickEditEvent(
625
+ _vm.selectedEvent,
626
+ $event
627
+ )
628
+ },
629
+ },
630
+ },
631
+ [
632
+ _c("v-icon", { attrs: { small: "" } }, [
633
+ _vm._v(
634
+ "\n " +
635
+ _vm._s(_vm.$getIcon("pencil")) +
636
+ "\n "
637
+ ),
638
+ ]),
639
+ ],
640
+ 1
641
+ )
642
+ : _vm._e(),
643
+ _vm._v(" "),
644
+ _vm.callCanDeleteEvent(_vm.selectedEvent)
645
+ ? _c(
646
+ "v-btn",
647
+ {
648
+ attrs: { icon: "", small: "" },
649
+ on: {
650
+ click: function ($event) {
651
+ return _vm.clickDeleteEvent(
652
+ _vm.selectedEvent,
653
+ $event
654
+ )
655
+ },
656
+ },
657
+ },
658
+ [
659
+ _c("v-icon", { attrs: { small: "" } }, [
660
+ _vm._v(
661
+ "\n " +
662
+ _vm._s(_vm.$getIcon("trash")) +
663
+ "\n "
664
+ ),
665
+ ]),
666
+ ],
667
+ 1
668
+ )
669
+ : _vm._e(),
670
+ _vm._v(" "),
671
+ _c(
672
+ "v-btn",
673
+ {
674
+ attrs: { icon: "", small: "" },
675
+ on: {
676
+ click: function ($event) {
677
+ _vm.selectedOpen = !_vm.selectedOpen;
678
+ },
679
+ },
680
+ },
681
+ [
682
+ _c("v-icon", { attrs: { small: "" } }, [
683
+ _vm._v(
684
+ "\n " +
685
+ _vm._s(_vm.$getIcon("close")) +
686
+ "\n "
687
+ ),
688
+ ]),
689
+ ],
690
+ 1
691
+ ),
692
+ ],
693
+ 1
694
+ ),
695
+ ]
696
+ ),
697
+ _vm._v(" "),
698
+ _vm.selectedEvent.description
699
+ ? _c(
700
+ "v-card-text",
701
+ {
702
+ staticClass:
703
+ "event-info__description zd-pt-0 zd-flex-grow-1",
704
+ },
705
+ [
706
+ _c(
707
+ "zd-text",
708
+ _vm._b(
709
+ {
710
+ attrs: { name: "description_" + _vm.instance.name },
711
+ },
712
+ "zd-text",
713
+ {
714
+ text: _vm.selectedEvent.description,
715
+ tag: "p",
716
+ },
717
+ false
718
+ )
719
+ ),
720
+ ],
721
+ 1
722
+ )
723
+ : _vm._e(),
724
+ ],
725
+ 1
726
+ )
727
+ : _vm._e(),
728
+ ],
729
+ 1
730
+ )
731
+ };
732
+ var __vue_staticRenderFns__$2 = [];
733
+ __vue_render__$2._withStripped = true;
734
+
735
+ /* style */
736
+ const __vue_inject_styles__$2 = function (inject) {
737
+ if (!inject) return
738
+ inject("data-v-29169b90_0", { source: ".event-info__toolbar .v-toolbar__content {\n width: 100%;\n align-items: start;\n}\n.event-info .event-color-sample {\n height: 14px;\n width: 14px;\n border-radius: 4px;\n margin: 6px 0 3px 0;\n}\n.event-info__header {\n min-height: 28px;\n}\n.event-info__title {\n min-height: 28px;\n}\n.event-info__title > * {\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n line-break: anywhere;\n}\n.event-info__description {\n overflow-y: auto;\n}", map: undefined, media: undefined });
739
+
740
+ };
741
+ /* scoped */
742
+ const __vue_scope_id__$2 = undefined;
743
+ /* module identifier */
744
+ const __vue_module_identifier__$2 = undefined;
745
+ /* functional template */
746
+ const __vue_is_functional_template__$2 = false;
747
+ /* style inject SSR */
748
+
749
+ /* style inject shadow dom */
750
+
751
+
752
+
753
+ const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
754
+ { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
755
+ __vue_inject_styles__$2,
756
+ __vue_script__$2,
757
+ __vue_scope_id__$2,
758
+ __vue_is_functional_template__$2,
759
+ __vue_module_identifier__$2,
760
+ false,
761
+ createInjector,
762
+ undefined,
763
+ undefined
764
+ );
765
+
766
+ let CalendarYear = class CalendarYear extends Vue__default["default"] {
767
+ constructor() {
768
+ super(...arguments);
769
+ this.showMenu = false;
770
+ this.menuX = 0;
771
+ this.menuY = 0;
772
+ this.selectedDate = null;
773
+ this.menuWidth = 224;
774
+ this.selectedOpen = false;
775
+ this.selectedElement = null;
776
+ this.selectedEvent = null;
777
+ this.resetTimer = null;
778
+ }
779
+ changeMenuVisibility() {
780
+ if (!this.showMenu) {
781
+ // If menu closes, wait 200ms before clearing the date
782
+ this.resetTimer = window.setTimeout(() => {
783
+ this.selectedDate = null;
784
+ }, 200);
785
+ return;
786
+ }
787
+ // If menu opens (becomes true), cancel any pending clear
788
+ if (this.resetTimer) {
789
+ clearTimeout(this.resetTimer);
790
+ this.resetTimer = null;
791
+ }
792
+ }
793
+ beforeDestroy() {
794
+ if (this.resetTimer) {
795
+ clearTimeout(this.resetTimer);
796
+ }
797
+ }
798
+ /**
799
+ * Triggered when user clicks on a calendar event inside a calendar-day-info dropdown
800
+ */
801
+ clickEvent({ event, selectedEvent }) {
802
+ const open = () => {
803
+ const { target } = event;
804
+ if (!(target instanceof HTMLElement))
805
+ return;
806
+ const el = target.closest('.v-event');
807
+ if (!el)
808
+ return;
809
+ this.selectedEvent = selectedEvent;
810
+ this.selectedElement = el;
811
+ requestAnimationFrame(() => { requestAnimationFrame(() => { this.selectedOpen = true; }); });
812
+ };
813
+ if (this.selectedOpen) {
814
+ this.selectedOpen = false;
815
+ requestAnimationFrame(() => requestAnimationFrame(() => open()));
816
+ }
817
+ else {
818
+ open();
819
+ }
820
+ event.stopPropagation();
821
+ }
822
+ /**
823
+ * Triggered when user clicks on the day number inside a calendar-day-info dropdown
824
+ */
825
+ clickDay({ date }) {
826
+ this.instance.type = 'day';
827
+ this.instance.value = date;
828
+ this.showMenu = false;
829
+ }
830
+ clickEditEvent(selectedEvent, nativeEvent) {
831
+ this.instance.clickEditEvent(selectedEvent, this.$el, nativeEvent);
832
+ }
833
+ clickDeleteEvent(selectedEvent, nativeEvent) {
834
+ this.instance.clickDeleteEvent(selectedEvent, this.$el, nativeEvent);
835
+ }
836
+ dateClick(date) {
837
+ this.selectedDate = date;
838
+ const buttonId = `date-${this.instance.name}-picker-${date}`;
839
+ const buttonElement = document.getElementById(buttonId);
840
+ if (!buttonElement) {
841
+ // If we can't find the button, do not try to show the menu
842
+ // to avoid positioning issues.
843
+ console.warn(`Date button element with id '${buttonId}' not found.`);
844
+ return;
845
+ }
846
+ const rect = buttonElement.getBoundingClientRect();
847
+ this.showMenu = false;
848
+ this.menuY = rect.bottom;
849
+ // Viewport dimensions
850
+ const viewportWidth = window.innerWidth;
851
+ // Calculate default positions (bottom-right)
852
+ let menuX = rect.right;
853
+ // Check if menu would overflow on the right side
854
+ // If so, flip to the left (align menu's right edge with button's left edge)
855
+ if (menuX + this.menuWidth > viewportWidth) {
856
+ menuX = rect.left - this.menuWidth;
857
+ // Ensure we don't go off the left edge
858
+ if (menuX < 0) {
859
+ menuX = rect.left;
860
+ }
861
+ }
862
+ this.menuX = menuX;
863
+ setTimeout(() => {
864
+ this.showMenu = true;
865
+ });
866
+ }
867
+ assignPickerButtonIds(monthNumber) {
868
+ const pickerId = `${this.instance.name}-picker-${this.year}-${monthNumber}`;
869
+ const pickerElement = document.getElementById(pickerId);
870
+ if (!pickerElement)
871
+ return;
872
+ const cellButtons = pickerElement.querySelectorAll('tbody button');
873
+ cellButtons.forEach((buttonElement, i) => {
874
+ const dayNumber = this.doubleDigit(i + 1);
875
+ buttonElement.id = `date-${pickerId}-${dayNumber}`;
876
+ });
877
+ }
878
+ pickerMounted(monthNumber) {
879
+ this.assignPickerButtonIds(monthNumber);
880
+ }
881
+ changeYear() {
882
+ // wait for transitions to finish
883
+ setTimeout(() => {
884
+ for (let i = 1; i <= 12; i += 1) {
885
+ const monthNumber = this.doubleDigit(i);
886
+ this.assignPickerButtonIds(monthNumber);
887
+ }
888
+ }, 600);
889
+ }
890
+ doubleDigit(n) {
891
+ if (n < 10)
892
+ return `0${n}`;
893
+ return String(n);
894
+ }
895
+ firstLetterUpperCase(str) {
896
+ return str.charAt(0).toUpperCase() + str.slice(1);
897
+ }
898
+ /**
899
+ * @param monthNumber the number of the month between 1 and 12
900
+ */
901
+ getMonthName(monthNumber) {
902
+ if (monthNumber < 1 || monthNumber > 12) {
903
+ console.error('Error: Month number must be between 1 and 12.');
904
+ return null;
905
+ }
906
+ const dateInMonth = core.dayjs().month(monthNumber - 1);
907
+ const monthName = dateInMonth.format('MMMM');
908
+ return this.firstLetterUpperCase(monthName);
909
+ }
910
+ get sortedEvents() {
911
+ if (!this.selectedDate)
912
+ return [];
913
+ const events = this.instance.getEventsByDate(this.selectedDate);
914
+ const sortedEvents = [...events];
915
+ sortedEvents.sort((eventA, eventB) => {
916
+ const dateA = core.dayjs(eventA.start);
917
+ const dateB = core.dayjs(eventB.start);
918
+ // use Day.js's comparison methods:
919
+ if (dateA.isBefore(dateB)) {
920
+ return -1; // dateA is earlier, so it comes first
921
+ }
922
+ if (dateA.isAfter(dateB)) {
923
+ return 1; // dateB is earlier, so it comes first
924
+ }
925
+ // If dates are the same
926
+ return 0;
927
+ });
928
+ return sortedEvents;
929
+ }
930
+ };
931
+ __decorate([
932
+ vuePropertyDecorator.Prop({ type: Object, required: true }),
933
+ __metadata("design:type", zdCalendarCommon.Calendar)
934
+ ], CalendarYear.prototype, "instance", void 0);
935
+ __decorate([
936
+ vuePropertyDecorator.Prop({ type: String, required: true }),
937
+ __metadata("design:type", String)
938
+ ], CalendarYear.prototype, "year", void 0);
939
+ __decorate([
940
+ vuePropertyDecorator.Watch('showMenu'),
941
+ __metadata("design:type", Function),
942
+ __metadata("design:paramtypes", []),
943
+ __metadata("design:returntype", void 0)
944
+ ], CalendarYear.prototype, "changeMenuVisibility", null);
945
+ __decorate([
946
+ vuePropertyDecorator.Watch('year'),
947
+ __metadata("design:type", Function),
948
+ __metadata("design:paramtypes", []),
949
+ __metadata("design:returntype", void 0)
950
+ ], CalendarYear.prototype, "changeYear", null);
951
+ CalendarYear = __decorate([
952
+ vuePropertyDecorator.Component({
953
+ components: {
954
+ CalendarDayInfo: __vue_component__$3,
955
+ CalendarEventInfo: __vue_component__$2,
956
+ },
957
+ })
958
+ ], CalendarYear);
959
+ var script$1 = CalendarYear;
960
+
961
+ /* script */
962
+ const __vue_script__$1 = script$1;
963
+
964
+ /* template */
965
+ var __vue_render__$1 = function () {
966
+ var _vm = this;
967
+ var _h = _vm.$createElement;
968
+ var _c = _vm._self._c || _h;
969
+ return _c("div", { staticClass: "zd-calendar-year" }, [
970
+ _c(
971
+ "div",
972
+ { staticClass: "zd-display-flex zd-justify-space-between zd-flex-wrap" },
973
+ [
974
+ _vm._l(12, function (i) {
975
+ return [
976
+ _c("div", { staticClass: "zd-calendar-year--item" }, [
977
+ _c(
978
+ "div",
979
+ {
980
+ staticClass:
981
+ "zd-calendar-year__month-container zd-flex-column zd-display-flex zd-align-start",
982
+ },
983
+ [
984
+ _c("span", { staticClass: "zd-calendar-year__month-title" }, [
985
+ _vm._v(
986
+ "\n " +
987
+ _vm._s(_vm.getMonthName(i)) +
988
+ "\n "
989
+ ),
990
+ ]),
991
+ _vm._v(" "),
992
+ _c("v-date-picker", {
993
+ attrs: {
994
+ id:
995
+ _vm.instance.name +
996
+ "-picker-" +
997
+ _vm.year +
998
+ "-" +
999
+ _vm.doubleDigit(i),
1000
+ "picker-date": _vm.year + "-" + _vm.doubleDigit(i),
1001
+ color: "primary",
1002
+ flat: "",
1003
+ "no-title": "",
1004
+ "full-width": "",
1005
+ },
1006
+ on: {
1007
+ "click:date": function ($event) {
1008
+ return _vm.dateClick($event)
1009
+ },
1010
+ "hook:mounted": function ($event) {
1011
+ _vm.pickerMounted(_vm.doubleDigit(i));
1012
+ },
1013
+ },
1014
+ }),
1015
+ ],
1016
+ 1
1017
+ ),
1018
+ ]),
1019
+ ]
1020
+ }),
1021
+ _vm._v(" "),
1022
+ _c("calendar-day-info", {
1023
+ attrs: {
1024
+ "menu-x": _vm.menuX,
1025
+ "menu-y": _vm.menuY,
1026
+ "menu-width": _vm.menuWidth,
1027
+ "selected-date": _vm.selectedDate,
1028
+ events: _vm.sortedEvents,
1029
+ },
1030
+ on: {
1031
+ "click:event": _vm.clickEvent,
1032
+ "click:day": function ($event) {
1033
+ return _vm.clickDay($event)
1034
+ },
1035
+ },
1036
+ model: {
1037
+ value: _vm.showMenu,
1038
+ callback: function ($$v) {
1039
+ _vm.showMenu = $$v;
1040
+ },
1041
+ expression: "showMenu",
1042
+ },
1043
+ }),
1044
+ _vm._v(" "),
1045
+ _c("calendar-event-info", {
1046
+ attrs: {
1047
+ "selected-event": _vm.selectedEvent,
1048
+ activator: _vm.selectedElement,
1049
+ instance: _vm.instance,
1050
+ "offset-x": true,
1051
+ "offset-overflow": "",
1052
+ },
1053
+ on: {
1054
+ "click:edit": _vm.clickEditEvent,
1055
+ "click:delete": _vm.clickDeleteEvent,
1056
+ },
1057
+ model: {
1058
+ value: _vm.selectedOpen,
1059
+ callback: function ($$v) {
1060
+ _vm.selectedOpen = $$v;
1061
+ },
1062
+ expression: "selectedOpen",
1063
+ },
1064
+ }),
1065
+ ],
1066
+ 2
1067
+ ),
1068
+ ])
1069
+ };
1070
+ var __vue_staticRenderFns__$1 = [];
1071
+ __vue_render__$1._withStripped = true;
1072
+
1073
+ /* style */
1074
+ const __vue_inject_styles__$1 = function (inject) {
1075
+ if (!inject) return
1076
+ inject("data-v-c153b644_0", { source: ".zd-calendar-year--item {\n flex-basis: 25%;\n}\n.zd-calendar-year__month-container {\n padding: 0 19px 0 14px;\n min-width: 208px;\n max-width: 256px;\n}\n.zd-calendar-year__month-container .zd-calendar-year__month-title {\n margin: 0 10px;\n font-size: 15px;\n}\n.zd-calendar-year__month-container .v-picker__body {\n background-color: inherit;\n}\n.zd-calendar-year__month-container .v-date-picker-header {\n display: none;\n}\n.zd-calendar-year__month-container .v-date-picker-table {\n padding: 0;\n}\n.zd-calendar-year__month-container .v-date-picker-table table {\n border-spacing: 0;\n}\n.zd-calendar-year__month-container .v-date-picker-table .v-btn, .zd-calendar-year__month-container .v-date-picker-table th {\n font-size: 10px;\n}\n.zd-calendar-year__month-container .v-date-picker-table td {\n padding: 1px;\n}\n.zd-calendar-year__month-container .v-date-picker-table button {\n width: 24px;\n height: 24px;\n}", map: undefined, media: undefined });
1077
+
1078
+ };
1079
+ /* scoped */
1080
+ const __vue_scope_id__$1 = undefined;
1081
+ /* module identifier */
1082
+ const __vue_module_identifier__$1 = undefined;
1083
+ /* functional template */
1084
+ const __vue_is_functional_template__$1 = false;
1085
+ /* style inject SSR */
1086
+
1087
+ /* style inject shadow dom */
1088
+
1089
+
1090
+
1091
+ const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
1092
+ { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
1093
+ __vue_inject_styles__$1,
1094
+ __vue_script__$1,
1095
+ __vue_scope_id__$1,
1096
+ __vue_is_functional_template__$1,
1097
+ __vue_module_identifier__$1,
1098
+ false,
1099
+ createInjector,
1100
+ undefined,
1101
+ undefined
1102
+ );
1103
+
33
1104
  let ZdCalendar = class ZdCalendar extends vuetify.ZdComponentRender {
34
1105
  constructor() {
35
1106
  super(...arguments);
@@ -39,6 +1110,9 @@
39
1110
  this.selectedEvent = null;
40
1111
  this.showDatePicker = false;
41
1112
  }
1113
+ get dayjsValue() {
1114
+ return core.dayjs(this.instance.value, 'YYYY-MM-DD');
1115
+ }
42
1116
  onChangePicker() {
43
1117
  this.showDatePicker = false;
44
1118
  }
@@ -46,6 +1120,9 @@
46
1120
  if (this.instance.title) {
47
1121
  return this.instance.title;
48
1122
  }
1123
+ if (this.instance.type === 'year') {
1124
+ return this.currentYear;
1125
+ }
49
1126
  const calendarRef = this.$refs.calendar;
50
1127
  if (calendarRef) {
51
1128
  const { title } = calendarRef;
@@ -62,14 +1139,24 @@
62
1139
  prev(event) {
63
1140
  this.instance.beforePrevious(this.$el);
64
1141
  if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
65
- this.$refs.calendar.prev();
1142
+ if (this.instance.type === 'year') {
1143
+ this.instance.value = this.dayjsValue.add(-1, 'year').format('YYYY-MM-DD');
1144
+ }
1145
+ else {
1146
+ this.$refs.calendar.prev();
1147
+ }
66
1148
  this.instance.previous(this.$el);
67
1149
  }
68
1150
  }
69
1151
  next(event) {
70
1152
  this.instance.beforeNext(this.$el);
71
1153
  if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
72
- this.$refs.calendar.next();
1154
+ if (this.instance.type === 'year') {
1155
+ this.instance.value = this.dayjsValue.add(1, 'year').format('YYYY-MM-DD');
1156
+ }
1157
+ else {
1158
+ this.$refs.calendar.next();
1159
+ }
73
1160
  this.instance.next(this.$el);
74
1161
  }
75
1162
  }
@@ -86,13 +1173,18 @@
86
1173
  }
87
1174
  showEvent({ nativeEvent, event }) {
88
1175
  const open = () => {
1176
+ const { target } = nativeEvent;
1177
+ if (!(target instanceof HTMLElement))
1178
+ return;
1179
+ const el = target.closest('.v-event');
1180
+ if (!el)
1181
+ return;
89
1182
  this.selectedEvent = event;
90
- this.selectedElement = nativeEvent.target;
1183
+ this.selectedElement = el;
91
1184
  requestAnimationFrame(() => { requestAnimationFrame(() => { this.selectedOpen = true; }); });
92
1185
  };
93
1186
  if (this.selectedOpen) {
94
1187
  this.selectedOpen = false;
95
- this.selectedEvent = null;
96
1188
  requestAnimationFrame(() => requestAnimationFrame(() => open()));
97
1189
  }
98
1190
  else {
@@ -150,6 +1242,17 @@
150
1242
  ? this.instance.canDeleteEvent(event)
151
1243
  : this.instance.canDeleteEvent;
152
1244
  }
1245
+ get currentYear() {
1246
+ return this.dayjsValue.format('YYYY');
1247
+ }
1248
+ get showYear() {
1249
+ return this.instance.type && this.instance.type === 'year';
1250
+ }
1251
+ get vCalendarType() {
1252
+ if (this.instance.type === 'year')
1253
+ return 'month';
1254
+ return this.instance.type;
1255
+ }
153
1256
  };
154
1257
  __decorate([
155
1258
  vuePropertyDecorator.Prop({ type: [String, Array], default: undefined }),
@@ -390,138 +1493,11 @@
390
1493
  ZdCalendar = __decorate([
391
1494
  vuePropertyDecorator.Component({
392
1495
  mixins: [vuetify.FillHeightMixin],
1496
+ components: { CalendarYear: __vue_component__$1, CalendarEventInfo: __vue_component__$2 },
393
1497
  })
394
1498
  ], ZdCalendar);
395
1499
  var script = ZdCalendar;
396
1500
 
397
- function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
398
- if (typeof shadowMode !== 'boolean') {
399
- createInjectorSSR = createInjector;
400
- createInjector = shadowMode;
401
- shadowMode = false;
402
- }
403
- // Vue.extend constructor export interop.
404
- const options = typeof script === 'function' ? script.options : script;
405
- // render functions
406
- if (template && template.render) {
407
- options.render = template.render;
408
- options.staticRenderFns = template.staticRenderFns;
409
- options._compiled = true;
410
- // functional template
411
- if (isFunctionalTemplate) {
412
- options.functional = true;
413
- }
414
- }
415
- // scopedId
416
- if (scopeId) {
417
- options._scopeId = scopeId;
418
- }
419
- let hook;
420
- if (moduleIdentifier) {
421
- // server build
422
- hook = function (context) {
423
- // 2.3 injection
424
- context =
425
- context || // cached call
426
- (this.$vnode && this.$vnode.ssrContext) || // stateful
427
- (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
428
- // 2.2 with runInNewContext: true
429
- if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
430
- context = __VUE_SSR_CONTEXT__;
431
- }
432
- // inject component styles
433
- if (style) {
434
- style.call(this, createInjectorSSR(context));
435
- }
436
- // register component module identifier for async chunk inference
437
- if (context && context._registeredComponents) {
438
- context._registeredComponents.add(moduleIdentifier);
439
- }
440
- };
441
- // used by ssr in case component is cached and beforeCreate
442
- // never gets called
443
- options._ssrRegister = hook;
444
- }
445
- else if (style) {
446
- hook = shadowMode
447
- ? function (context) {
448
- style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
449
- }
450
- : function (context) {
451
- style.call(this, createInjector(context));
452
- };
453
- }
454
- if (hook) {
455
- if (options.functional) {
456
- // register for functional component in vue file
457
- const originalRender = options.render;
458
- options.render = function renderWithStyleInjection(h, context) {
459
- hook.call(context);
460
- return originalRender(h, context);
461
- };
462
- }
463
- else {
464
- // inject component registration as beforeCreate hook
465
- const existing = options.beforeCreate;
466
- options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
467
- }
468
- }
469
- return script;
470
- }
471
-
472
- const isOldIE = typeof navigator !== 'undefined' &&
473
- /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
474
- function createInjector(context) {
475
- return (id, style) => addStyle(id, style);
476
- }
477
- let HEAD;
478
- const styles = {};
479
- function addStyle(id, css) {
480
- const group = isOldIE ? css.media || 'default' : id;
481
- const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
482
- if (!style.ids.has(id)) {
483
- style.ids.add(id);
484
- let code = css.source;
485
- if (css.map) {
486
- // https://developer.chrome.com/devtools/docs/javascript-debugging
487
- // this makes source maps inside style tags work properly in Chrome
488
- code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
489
- // http://stackoverflow.com/a/26603875
490
- code +=
491
- '\n/*# sourceMappingURL=data:application/json;base64,' +
492
- btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
493
- ' */';
494
- }
495
- if (!style.element) {
496
- style.element = document.createElement('style');
497
- style.element.type = 'text/css';
498
- if (css.media)
499
- style.element.setAttribute('media', css.media);
500
- if (HEAD === undefined) {
501
- HEAD = document.head || document.getElementsByTagName('head')[0];
502
- }
503
- HEAD.appendChild(style.element);
504
- }
505
- if ('styleSheet' in style.element) {
506
- style.styles.push(code);
507
- style.element.styleSheet.cssText = style.styles
508
- .filter(Boolean)
509
- .join('\n');
510
- }
511
- else {
512
- const index = style.ids.size - 1;
513
- const textNode = document.createTextNode(code);
514
- const nodes = style.element.childNodes;
515
- if (nodes[index])
516
- style.element.removeChild(nodes[index]);
517
- if (nodes.length)
518
- style.element.insertBefore(textNode, nodes[index]);
519
- else
520
- style.element.appendChild(textNode);
521
- }
522
- }
523
- }
524
-
525
1501
  /* script */
526
1502
  const __vue_script__ = script;
527
1503
 
@@ -733,9 +1709,10 @@
733
1709
  light: _vm.instance.light,
734
1710
  datasource: _vm.instance.selectTypeData || {
735
1711
  data: [
736
- { name: _vm.$t("CALENDAR_MONTH"), value: "month" },
737
- { name: _vm.$t("CALENDAR_WEEK"), value: "week" },
738
1712
  { name: _vm.$t("CALENDAR_DAY"), value: "day" },
1713
+ { name: _vm.$t("CALENDAR_WEEK"), value: "week" },
1714
+ { name: _vm.$t("CALENDAR_MONTH"), value: "month" },
1715
+ { name: _vm.$t("CALENDAR_YEAR"), value: "year" },
739
1716
  {
740
1717
  name: _vm.$t("CALENDAR_CATEGORY"),
741
1718
  value: "category",
@@ -767,6 +1744,14 @@
767
1744
  },
768
1745
  [
769
1746
  _c("v-calendar", {
1747
+ directives: [
1748
+ {
1749
+ name: "show",
1750
+ rawName: "v-show",
1751
+ value: !_vm.showYear,
1752
+ expression: "!showYear",
1753
+ },
1754
+ ],
770
1755
  ref: "calendar",
771
1756
  attrs: {
772
1757
  categories: _vm.instance.categories,
@@ -806,7 +1791,7 @@
806
1791
  id: _vm.instance.name,
807
1792
  name: _vm.instance.name,
808
1793
  start: _vm.instance.start,
809
- type: _vm.instance.type,
1794
+ type: _vm.vCalendarType,
810
1795
  value: _vm.instance.value,
811
1796
  now: _vm.instance.now,
812
1797
  "show-week": _vm.instance.showWeek,
@@ -860,7 +1845,7 @@
860
1845
  },
861
1846
  style: _vm.callDayStyle(date),
862
1847
  },
863
- [_vm._v("\n  \n ")]
1848
+ [_vm._v("\n  \n ")]
864
1849
  ),
865
1850
  ]
866
1851
  },
@@ -875,187 +1860,38 @@
875
1860
  },
876
1861
  }),
877
1862
  _vm._v(" "),
878
- _vm.selectedOpen
879
- ? _c(
880
- "v-menu",
881
- {
882
- attrs: {
883
- "close-on-content-click": false,
884
- activator: _vm.selectedElement,
885
- "offset-x": "",
886
- },
887
- model: {
888
- value: _vm.selectedOpen,
889
- callback: function ($$v) {
890
- _vm.selectedOpen = $$v;
891
- },
892
- expression: "selectedOpen",
893
- },
894
- },
895
- [
896
- _c(
897
- "zd-card",
898
- {
899
- attrs: {
900
- name: "card_" + _vm.instance.name,
901
- cssClass: "zd-pa-0",
902
- dark: _vm.instance.dark,
903
- light: _vm.instance.light,
904
- },
905
- },
906
- [
907
- _c(
908
- "v-toolbar",
909
- {
910
- attrs: {
911
- color: _vm.selectedEvent.color,
912
- elevation: "0",
913
- dark: "",
914
- },
915
- },
916
- [
917
- _c(
918
- "zd-text",
919
- _vm._b(
920
- {
921
- staticClass: "mx-2",
922
- attrs: {
923
- name: "title_" + _vm.instance.name,
924
- },
925
- },
926
- "zd-text",
927
- {
928
- text: _vm.selectedEvent.name,
929
- tag: "h5",
930
- },
931
- false
932
- )
933
- ),
934
- _vm._v(" "),
935
- _c("v-spacer"),
936
- _vm._v(" "),
937
- _c(
938
- "span",
939
- [
940
- _vm.callCanEditEvent(_vm.selectedEvent)
941
- ? _c(
942
- "v-btn",
943
- {
944
- attrs: { icon: "" },
945
- on: {
946
- click: function ($event) {
947
- return _vm.clickEditEvent(
948
- _vm.selectedEvent,
949
- $event
950
- )
951
- },
952
- },
953
- },
954
- [
955
- _c(
956
- "v-icon",
957
- {
958
- on: {
959
- click: function ($event) {},
960
- },
961
- },
962
- [
963
- _vm._v(
964
- "\n " +
965
- _vm._s(
966
- _vm.$getIcon("pencil")
967
- ) +
968
- "\n "
969
- ),
970
- ]
971
- ),
972
- ],
973
- 1
974
- )
975
- : _vm._e(),
976
- _vm._v(" "),
977
- _vm.callCanDeleteEvent(_vm.selectedEvent)
978
- ? _c(
979
- "v-btn",
980
- {
981
- attrs: { icon: "" },
982
- on: {
983
- click: function ($event) {
984
- return _vm.clickDeleteEvent(
985
- _vm.selectedEvent,
986
- $event
987
- )
988
- },
989
- },
990
- },
991
- [
992
- _c("v-icon", [
993
- _vm._v(
994
- "\n " +
995
- _vm._s(_vm.$getIcon("trash")) +
996
- "\n "
997
- ),
998
- ]),
999
- ],
1000
- 1
1001
- )
1002
- : _vm._e(),
1003
- ],
1004
- 1
1005
- ),
1006
- ],
1007
- 1
1008
- ),
1009
- _vm._v(" "),
1010
- _c(
1011
- "v-card-text",
1012
- [
1013
- _c(
1014
- "zd-text",
1015
- _vm._b(
1016
- {
1017
- attrs: {
1018
- name: "description_" + _vm.instance.name,
1019
- },
1020
- },
1021
- "zd-text",
1022
- {
1023
- text: _vm.selectedEvent.description,
1024
- tag: "p",
1025
- },
1026
- false
1027
- )
1028
- ),
1029
- ],
1030
- 1
1031
- ),
1032
- _vm._v(" "),
1033
- _c(
1034
- "v-card-actions",
1035
- [
1036
- _c("zd-button", {
1037
- attrs: {
1038
- name: "buttonClose_" + _vm.instance.name,
1039
- flat: "",
1040
- color: "secondary",
1041
- label: "$t(CALENDAR_CLOSE)",
1042
- },
1043
- on: {
1044
- click: function ($event) {
1045
- _vm.selectedOpen = !_vm.selectedOpen;
1046
- },
1047
- },
1048
- }),
1049
- ],
1050
- 1
1051
- ),
1052
- ],
1053
- 1
1054
- ),
1055
- ],
1056
- 1
1057
- )
1058
- : _vm._e(),
1863
+ _c("calendar-year", {
1864
+ directives: [
1865
+ {
1866
+ name: "show",
1867
+ rawName: "v-show",
1868
+ value: _vm.showYear,
1869
+ expression: "showYear",
1870
+ },
1871
+ ],
1872
+ attrs: { instance: _vm.instance, year: _vm.currentYear },
1873
+ }),
1874
+ _vm._v(" "),
1875
+ _c("calendar-event-info", {
1876
+ attrs: {
1877
+ "selected-event": _vm.selectedEvent,
1878
+ activator: _vm.selectedElement,
1879
+ instance: _vm.instance,
1880
+ right: "",
1881
+ "offset-x": "",
1882
+ },
1883
+ on: {
1884
+ "click:edit": _vm.clickEditEvent,
1885
+ "click:delete": _vm.clickDeleteEvent,
1886
+ },
1887
+ model: {
1888
+ value: _vm.selectedOpen,
1889
+ callback: function ($$v) {
1890
+ _vm.selectedOpen = $$v;
1891
+ },
1892
+ expression: "selectedOpen",
1893
+ },
1894
+ }),
1059
1895
  ],
1060
1896
  1
1061
1897
  ),
@@ -1071,7 +1907,7 @@
1071
1907
  /* style */
1072
1908
  const __vue_inject_styles__ = function (inject) {
1073
1909
  if (!inject) return
1074
- inject("data-v-717186b4_0", { source: ".zd-calendar {\n display: flex;\n flex-direction: column;\n}\n.zd-calendar .v-btn--fab {\n z-index: 2;\n}\n.zd-calendar-content {\n display: flex;\n overflow: auto;\n height: 100%;\n}\n.zd-calendar .zd-toolbar-calendar {\n display: flex;\n flex: 0 1 auto;\n justify-items: center;\n justify-content: space-between;\n background-color: #fff;\n padding: 0.75rem 0.5rem;\n margin: 0;\n}\n.zd-calendar .zd-toolbar-calendar.theme--dark {\n background-color: #1e1e1e;\n}\n.zd-calendar .zd-toolbar-calendar div {\n align-items: center;\n display: flex;\n}\n@media screen and (max-width: 376px) {\n.zd-calendar .zd-toolbar-calendar {\n flex-direction: column;\n}\n.zd-calendar .zd-toolbar-calendar .zd-calendar-nav-title,\n .zd-calendar .zd-toolbar-calendar .zd-calendar-button-today {\n max-width: 100%;\n flex: 1;\n align-items: center;\n justify-content: space-between !important;\n}\n.zd-calendar .zd-toolbar-calendar .zd-calendar-button-today button {\n width: 100%;\n margin-right: 0px !important;\n}\n}\n.zd-calendar .zd-calendar-content-title .zd-calendar-title {\n display: flex;\n flex-direction: column;\n width: 154px;\n}", map: undefined, media: undefined });
1910
+ inject("data-v-22c86241_0", { source: ".event-info__toolbar .v-toolbar__content {\n width: 100%;\n align-items: start;\n}\n.event-info .event-color-sample {\n height: 14px;\n width: 14px;\n border-radius: 4px;\n margin: 6px 0 3px 0;\n}\n.event-info__header {\n min-height: 28px;\n}\n.event-info__title {\n min-height: 28px;\n}\n.event-info__title > * {\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n line-break: anywhere;\n}\n.zd-calendar {\n display: flex;\n flex-direction: column;\n}\n.zd-calendar .v-btn--fab {\n z-index: 2;\n}\n.zd-calendar-content {\n display: flex;\n overflow: auto;\n height: 100%;\n}\n.zd-calendar .zd-toolbar-calendar {\n display: flex;\n flex: 0 1 auto;\n justify-items: center;\n justify-content: space-between;\n background-color: #fff;\n padding: 0.75rem 0.5rem;\n margin: 0;\n}\n.zd-calendar .zd-toolbar-calendar.theme--dark {\n background-color: #1e1e1e;\n}\n.zd-calendar .zd-toolbar-calendar div {\n align-items: center;\n display: flex;\n}\n@media screen and (max-width: 376px) {\n.zd-calendar .zd-toolbar-calendar {\n flex-direction: column;\n}\n.zd-calendar .zd-toolbar-calendar .zd-calendar-nav-title,\n .zd-calendar .zd-toolbar-calendar .zd-calendar-button-today {\n max-width: 100%;\n flex: 1;\n align-items: center;\n justify-content: space-between !important;\n}\n.zd-calendar .zd-toolbar-calendar .zd-calendar-button-today button {\n width: 100%;\n margin-right: 0px !important;\n}\n}\n.zd-calendar .zd-calendar-content-title .zd-calendar-title {\n display: flex;\n flex-direction: column;\n width: 154px;\n}", map: undefined, media: undefined });
1075
1911
 
1076
1912
  };
1077
1913
  /* scoped */