@zeedhi/zd-calendar-vue 1.2.0 → 1.3.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 (5) hide show
  1. package/README.md +437 -437
  2. package/dist/calendar-vue.esm.js +123 -33
  3. package/dist/calendar-vue.umd.js +123 -33
  4. package/package.json +2 -2
  5. package/types/Calendar.d.ts +5 -3
package/dist/calendar-vue.esm.js CHANGED
@@ -36,6 +36,21 @@ let ZdCalendar = class ZdCalendar extends ZdComponentRender {
36
36
  this.selectedOpen = false;
37
37
  this.selectedElement = null;
38
38
  this.selectedEvent = {};
39
+ this.showDatePicker = false;
40
+ }
41
+ onChangePicker() {
42
+ this.showDatePicker = false;
43
+ }
44
+ get titleLabel() {
45
+ if (this.instance.title) {
46
+ return this.instance.title;
47
+ }
48
+ const calendarRef = this.$refs.calendar;
49
+ if (calendarRef) {
50
+ const { title } = calendarRef;
51
+ return title.charAt(0).toUpperCase() + title.slice(1);
52
+ }
53
+ return '';
39
54
  }
40
55
  mounted() {
41
56
  this.$refs.calendar.checkChange();
@@ -44,25 +59,24 @@ let ZdCalendar = class ZdCalendar extends ZdComponentRender {
44
59
  this.instance.value = value;
45
60
  }
46
61
  prev(event) {
47
- this.instance.previous(this.$el);
62
+ this.instance.beforePrevious(this.$el);
48
63
  if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
49
64
  this.$refs.calendar.prev();
65
+ this.instance.previous(this.$el);
50
66
  }
51
67
  }
52
68
  next(event) {
53
- this.instance.next(this.$el);
69
+ this.instance.beforeNext(this.$el);
54
70
  if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
55
71
  this.$refs.calendar.next();
72
+ this.instance.next(this.$el);
56
73
  }
57
74
  }
58
- setToday() {
59
- this.instance.value = '';
60
- }
61
75
  setType(select) {
62
76
  const { value } = select.instance.value;
63
77
  this.instance.type = value;
64
78
  }
65
- viewDay({ date }) {
79
+ viewDay(date) {
66
80
  this.instance.value = date;
67
81
  this.instance.type = 'day';
68
82
  }
@@ -93,8 +107,9 @@ let ZdCalendar = class ZdCalendar extends ZdComponentRender {
93
107
  this.viewDay(event.date);
94
108
  }
95
109
  }
96
- clickEvent(event) {
97
- this.instance.clickEvent(this.$el, event);
110
+ clickEvent({ nativeEvent, event }) {
111
+ this.instance.clickEvent(this.$el, nativeEvent);
112
+ this.showEvent({ nativeEvent, event });
98
113
  }
99
114
  clickDay(event) {
100
115
  this.instance.clickDay(this.$el, event);
@@ -488,6 +503,7 @@ var __vue_render__ = function () {
488
503
  ],
489
504
  class: [
490
505
  "zd-toolbar-calendar",
506
+ "row",
491
507
  { "theme--dark": _vm.instance.dark || _vm.$vuetify.theme.dark },
492
508
  {
493
509
  "theme--light":
@@ -504,6 +520,7 @@ var __vue_render__ = function () {
504
520
  [
505
521
  _c(
506
522
  "div",
523
+ { staticClass: "zd-col-2 zd-pb-2" },
507
524
  [
508
525
  _c("zd-button", {
509
526
  staticClass: "mr-4",
@@ -513,11 +530,21 @@ var __vue_render__ = function () {
513
530
  },
514
531
  on: {
515
532
  click: function ($event) {
516
- return _vm.setToday()
533
+ return _vm.instance.goToToday()
517
534
  },
518
535
  },
519
536
  }),
520
- _vm._v(" "),
537
+ ],
538
+ 1
539
+ ),
540
+ _vm._v(" "),
541
+ _c(
542
+ "div",
543
+ {
544
+ staticClass:
545
+ "zd-justify-sm-center zd-justify-end zd-col-sm-8 zd-col-10 zd-pb-2",
546
+ },
547
+ [
521
548
  _c(
522
549
  "zd-button",
523
550
  _vm._b(
@@ -533,6 +560,7 @@ var __vue_render__ = function () {
533
560
  },
534
561
  "zd-button",
535
562
  {
563
+ cssClass: "zd-mr-1",
536
564
  icon: true,
537
565
  fab: true,
538
566
  small: true,
@@ -542,6 +570,88 @@ var __vue_render__ = function () {
542
570
  )
543
571
  ),
544
572
  _vm._v(" "),
573
+ _c(
574
+ "v-menu",
575
+ {
576
+ staticClass: "zd-date-menu-activator",
577
+ attrs: {
578
+ "offset-overflow": "",
579
+ "offset-y": "",
580
+ transition: "scale-transition",
581
+ "close-on-content-click": false,
582
+ },
583
+ scopedSlots: _vm._u([
584
+ {
585
+ key: "activator",
586
+ fn: function (ref) {
587
+ var on = ref.on;
588
+ return [
589
+ _c(
590
+ "div",
591
+ _vm._g(
592
+ {
593
+ attrs: {
594
+ "dropdown-activator": Object.assign(
595
+ {},
596
+ _vm.$attrs["dropdown-activator"],
597
+ on
598
+ ),
599
+ },
600
+ },
601
+ on
602
+ ),
603
+ [
604
+ _vm.instance.title || _vm.$refs.calendar
605
+ ? _c("zd-button", {
606
+ staticClass:
607
+ "zd-calendar-content-title",
608
+ attrs: {
609
+ name:
610
+ "titleButton_" + _vm.instance.name,
611
+ component: "ZdButton",
612
+ flat: "",
613
+ label: _vm.titleLabel,
614
+ },
615
+ })
616
+ : _vm._e(),
617
+ ],
618
+ 1
619
+ ),
620
+ ]
621
+ },
622
+ },
623
+ ]),
624
+ model: {
625
+ value: _vm.showDatePicker,
626
+ callback: function ($$v) {
627
+ _vm.showDatePicker = $$v;
628
+ },
629
+ expression: "showDatePicker",
630
+ },
631
+ },
632
+ [
633
+ _vm._v(" "),
634
+ _c("v-date-picker", {
635
+ attrs: {
636
+ "no-title": "",
637
+ dark: _vm.instance.dark,
638
+ light: _vm.instance.light,
639
+ color: _vm.instance.color,
640
+ locale: _vm.instance.locale,
641
+ },
642
+ on: { change: _vm.onChangePicker },
643
+ model: {
644
+ value: _vm.instance.value,
645
+ callback: function ($$v) {
646
+ _vm.$set(_vm.instance, "value", $$v);
647
+ },
648
+ expression: "instance.value",
649
+ },
650
+ }),
651
+ ],
652
+ 1
653
+ ),
654
+ _vm._v(" "),
545
655
  _c(
546
656
  "zd-button",
547
657
  _vm._b(
@@ -557,6 +667,7 @@ var __vue_render__ = function () {
557
667
  },
558
668
  "zd-button",
559
669
  {
670
+ cssClass: "zd-ml-1",
560
671
  icon: true,
561
672
  fab: true,
562
673
  small: true,
@@ -569,30 +680,9 @@ var __vue_render__ = function () {
569
680
  1
570
681
  ),
571
682
  _vm._v(" "),
572
- _c("div", { staticClass: "zd-calendar-content-title" }, [
573
- _vm.instance.title
574
- ? _c("h2", [
575
- _vm._v(
576
- "\n " +
577
- _vm._s(_vm.instance.title) +
578
- "\n "
579
- ),
580
- ])
581
- : _vm._e(),
582
- _vm._v(" "),
583
- _vm.$refs.calendar
584
- ? _c("h3", [
585
- _vm._v(
586
- "\n " +
587
- _vm._s(_vm.$refs.calendar.title) +
588
- "\n "
589
- ),
590
- ])
591
- : _vm._e(),
592
- ]),
593
- _vm._v(" "),
594
683
  _c(
595
684
  "div",
685
+ { staticClass: "zd-col-sm-2 zd-col-12 zd-pb-2" },
596
686
  [
597
687
  _c(
598
688
  "zd-select",
@@ -851,7 +941,7 @@ __vue_render__._withStripped = true;
851
941
  /* style */
852
942
  const __vue_inject_styles__ = function (inject) {
853
943
  if (!inject) return
854
- inject("data-v-f3247858_0", { source: ".zd-calendar-content .zd-toolbar-calendar {\n display: flex;\n justify-items: center;\n justify-content: space-between;\n background-color: #fff;\n padding: 0.75rem 0.5rem;\n}\n.zd-calendar-content .zd-toolbar-calendar.theme--dark {\n background-color: #1e1e1e;\n}\n.zd-calendar-content .zd-toolbar-calendar div {\n align-items: center;\n display: flex;\n}\n.zd-calendar-content .zd-calendar-content-title {\n display: flex;\n flex-direction: column;\n}", map: undefined, media: undefined });
944
+ inject("data-v-7da13c08_0", { source: ".zd-calendar-content .zd-toolbar-calendar {\n display: flex;\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-content .zd-toolbar-calendar.theme--dark {\n background-color: #1e1e1e;\n}\n.zd-calendar-content .zd-toolbar-calendar div {\n align-items: center;\n display: flex;\n}\n.zd-calendar-content .zd-calendar-content-title {\n display: flex;\n flex-direction: column;\n width: 154px;\n}", map: undefined, media: undefined });
855
945
 
856
946
  };
857
947
  /* scoped */
package/dist/calendar-vue.umd.js CHANGED
@@ -37,6 +37,21 @@
37
37
  this.selectedOpen = false;
38
38
  this.selectedElement = null;
39
39
  this.selectedEvent = {};
40
+ this.showDatePicker = false;
41
+ }
42
+ onChangePicker() {
43
+ this.showDatePicker = false;
44
+ }
45
+ get titleLabel() {
46
+ if (this.instance.title) {
47
+ return this.instance.title;
48
+ }
49
+ const calendarRef = this.$refs.calendar;
50
+ if (calendarRef) {
51
+ const { title } = calendarRef;
52
+ return title.charAt(0).toUpperCase() + title.slice(1);
53
+ }
54
+ return '';
40
55
  }
41
56
  mounted() {
42
57
  this.$refs.calendar.checkChange();
@@ -45,25 +60,24 @@
45
60
  this.instance.value = value;
46
61
  }
47
62
  prev(event) {
48
- this.instance.previous(this.$el);
63
+ this.instance.beforePrevious(this.$el);
49
64
  if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
50
65
  this.$refs.calendar.prev();
66
+ this.instance.previous(this.$el);
51
67
  }
52
68
  }
53
69
  next(event) {
54
- this.instance.next(this.$el);
70
+ this.instance.beforeNext(this.$el);
55
71
  if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
56
72
  this.$refs.calendar.next();
73
+ this.instance.next(this.$el);
57
74
  }
58
75
  }
59
- setToday() {
60
- this.instance.value = '';
61
- }
62
76
  setType(select) {
63
77
  const { value } = select.instance.value;
64
78
  this.instance.type = value;
65
79
  }
66
- viewDay({ date }) {
80
+ viewDay(date) {
67
81
  this.instance.value = date;
68
82
  this.instance.type = 'day';
69
83
  }
@@ -94,8 +108,9 @@
94
108
  this.viewDay(event.date);
95
109
  }
96
110
  }
97
- clickEvent(event) {
98
- this.instance.clickEvent(this.$el, event);
111
+ clickEvent({ nativeEvent, event }) {
112
+ this.instance.clickEvent(this.$el, nativeEvent);
113
+ this.showEvent({ nativeEvent, event });
99
114
  }
100
115
  clickDay(event) {
101
116
  this.instance.clickDay(this.$el, event);
@@ -489,6 +504,7 @@
489
504
  ],
490
505
  class: [
491
506
  "zd-toolbar-calendar",
507
+ "row",
492
508
  { "theme--dark": _vm.instance.dark || _vm.$vuetify.theme.dark },
493
509
  {
494
510
  "theme--light":
@@ -505,6 +521,7 @@
505
521
  [
506
522
  _c(
507
523
  "div",
524
+ { staticClass: "zd-col-2 zd-pb-2" },
508
525
  [
509
526
  _c("zd-button", {
510
527
  staticClass: "mr-4",
@@ -514,11 +531,21 @@
514
531
  },
515
532
  on: {
516
533
  click: function ($event) {
517
- return _vm.setToday()
534
+ return _vm.instance.goToToday()
518
535
  },
519
536
  },
520
537
  }),
521
- _vm._v(" "),
538
+ ],
539
+ 1
540
+ ),
541
+ _vm._v(" "),
542
+ _c(
543
+ "div",
544
+ {
545
+ staticClass:
546
+ "zd-justify-sm-center zd-justify-end zd-col-sm-8 zd-col-10 zd-pb-2",
547
+ },
548
+ [
522
549
  _c(
523
550
  "zd-button",
524
551
  _vm._b(
@@ -534,6 +561,7 @@
534
561
  },
535
562
  "zd-button",
536
563
  {
564
+ cssClass: "zd-mr-1",
537
565
  icon: true,
538
566
  fab: true,
539
567
  small: true,
@@ -543,6 +571,88 @@
543
571
  )
544
572
  ),
545
573
  _vm._v(" "),
574
+ _c(
575
+ "v-menu",
576
+ {
577
+ staticClass: "zd-date-menu-activator",
578
+ attrs: {
579
+ "offset-overflow": "",
580
+ "offset-y": "",
581
+ transition: "scale-transition",
582
+ "close-on-content-click": false,
583
+ },
584
+ scopedSlots: _vm._u([
585
+ {
586
+ key: "activator",
587
+ fn: function (ref) {
588
+ var on = ref.on;
589
+ return [
590
+ _c(
591
+ "div",
592
+ _vm._g(
593
+ {
594
+ attrs: {
595
+ "dropdown-activator": Object.assign(
596
+ {},
597
+ _vm.$attrs["dropdown-activator"],
598
+ on
599
+ ),
600
+ },
601
+ },
602
+ on
603
+ ),
604
+ [
605
+ _vm.instance.title || _vm.$refs.calendar
606
+ ? _c("zd-button", {
607
+ staticClass:
608
+ "zd-calendar-content-title",
609
+ attrs: {
610
+ name:
611
+ "titleButton_" + _vm.instance.name,
612
+ component: "ZdButton",
613
+ flat: "",
614
+ label: _vm.titleLabel,
615
+ },
616
+ })
617
+ : _vm._e(),
618
+ ],
619
+ 1
620
+ ),
621
+ ]
622
+ },
623
+ },
624
+ ]),
625
+ model: {
626
+ value: _vm.showDatePicker,
627
+ callback: function ($$v) {
628
+ _vm.showDatePicker = $$v;
629
+ },
630
+ expression: "showDatePicker",
631
+ },
632
+ },
633
+ [
634
+ _vm._v(" "),
635
+ _c("v-date-picker", {
636
+ attrs: {
637
+ "no-title": "",
638
+ dark: _vm.instance.dark,
639
+ light: _vm.instance.light,
640
+ color: _vm.instance.color,
641
+ locale: _vm.instance.locale,
642
+ },
643
+ on: { change: _vm.onChangePicker },
644
+ model: {
645
+ value: _vm.instance.value,
646
+ callback: function ($$v) {
647
+ _vm.$set(_vm.instance, "value", $$v);
648
+ },
649
+ expression: "instance.value",
650
+ },
651
+ }),
652
+ ],
653
+ 1
654
+ ),
655
+ _vm._v(" "),
546
656
  _c(
547
657
  "zd-button",
548
658
  _vm._b(
@@ -558,6 +668,7 @@
558
668
  },
559
669
  "zd-button",
560
670
  {
671
+ cssClass: "zd-ml-1",
561
672
  icon: true,
562
673
  fab: true,
563
674
  small: true,
@@ -570,30 +681,9 @@
570
681
  1
571
682
  ),
572
683
  _vm._v(" "),
573
- _c("div", { staticClass: "zd-calendar-content-title" }, [
574
- _vm.instance.title
575
- ? _c("h2", [
576
- _vm._v(
577
- "\n " +
578
- _vm._s(_vm.instance.title) +
579
- "\n "
580
- ),
581
- ])
582
- : _vm._e(),
583
- _vm._v(" "),
584
- _vm.$refs.calendar
585
- ? _c("h3", [
586
- _vm._v(
587
- "\n " +
588
- _vm._s(_vm.$refs.calendar.title) +
589
- "\n "
590
- ),
591
- ])
592
- : _vm._e(),
593
- ]),
594
- _vm._v(" "),
595
684
  _c(
596
685
  "div",
686
+ { staticClass: "zd-col-sm-2 zd-col-12 zd-pb-2" },
597
687
  [
598
688
  _c(
599
689
  "zd-select",
@@ -852,7 +942,7 @@
852
942
  /* style */
853
943
  const __vue_inject_styles__ = function (inject) {
854
944
  if (!inject) return
855
- inject("data-v-f3247858_0", { source: ".zd-calendar-content .zd-toolbar-calendar {\n display: flex;\n justify-items: center;\n justify-content: space-between;\n background-color: #fff;\n padding: 0.75rem 0.5rem;\n}\n.zd-calendar-content .zd-toolbar-calendar.theme--dark {\n background-color: #1e1e1e;\n}\n.zd-calendar-content .zd-toolbar-calendar div {\n align-items: center;\n display: flex;\n}\n.zd-calendar-content .zd-calendar-content-title {\n display: flex;\n flex-direction: column;\n}", map: undefined, media: undefined });
945
+ inject("data-v-7da13c08_0", { source: ".zd-calendar-content .zd-toolbar-calendar {\n display: flex;\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-content .zd-toolbar-calendar.theme--dark {\n background-color: #1e1e1e;\n}\n.zd-calendar-content .zd-toolbar-calendar div {\n align-items: center;\n display: flex;\n}\n.zd-calendar-content .zd-calendar-content-title {\n display: flex;\n flex-direction: column;\n width: 154px;\n}", map: undefined, media: undefined });
856
946
 
857
947
  };
858
948
  /* scoped */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-calendar-vue",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "Powered by Zeedhi",
5
5
  "main": "dist/calendar-vue.umd.js",
6
6
  "module": "dist/calendar-vue.esm.js",
@@ -20,5 +20,5 @@
20
20
  "vue-class-component": "^7.2.6",
21
21
  "vue-property-decorator": "^9.1.2"
22
22
  },
23
- "gitHead": "c28ec91d4b1409bf7b83b87eeefb184016b6c339"
23
+ "gitHead": "6f4fe53063ed34252898787e2866f837a2356bdb"
24
24
  }
package/types/Calendar.d.ts CHANGED
@@ -59,16 +59,18 @@ export default class ZdCalendar extends ZdComponentRender {
59
59
  selectedOpen: boolean;
60
60
  selectedElement: null;
61
61
  selectedEvent: Function | {} | [];
62
+ showDatePicker: boolean;
63
+ onChangePicker(): void;
64
+ get titleLabel(): string;
62
65
  mounted(): void;
63
66
  prev(event: Event): void;
64
67
  next(event: Event): void;
65
- setToday(): void;
66
68
  setType(select: any): void;
67
- viewDay({ date }: any): void;
69
+ viewDay(date: string): void;
68
70
  showEvent({ nativeEvent, event }: any): void;
69
71
  clickDate(event: Event): void;
70
72
  clickMore(event: Event): void;
71
- clickEvent(event: Event): void;
73
+ clickEvent({ nativeEvent, event }: any): void;
72
74
  clickDay(event: Event): void;
73
75
  clickDayCategory(event: Event): void;
74
76
  clickInterval(event: Event): void;