@zeedhi/zd-calendar-vue 1.4.1 → 1.4.3

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 (4) hide show
  1. package/dist/calendar-vue.esm.js +206 -210
  2. package/dist/calendar-vue.umd.js +206 -210
  3. package/package.json +5 -5
  4. package/types/Calendar.d.ts +1 -0
package/dist/calendar-vue.esm.js CHANGED
@@ -242,6 +242,10 @@ __decorate([
242
242
  PropWatch({ type: [String, Number, Object], default: 0 }),
243
243
  __metadata("design:type", Object)
244
244
  ], ZdCalendar.prototype, "firstTime", void 0);
245
+ __decorate([
246
+ PropWatch({ type: [String, Number], default: undefined }),
247
+ __metadata("design:type", Object)
248
+ ], ZdCalendar.prototype, "height", void 0);
245
249
  __decorate([
246
250
  PropWatch({ type: Boolean, default: false }),
247
251
  __metadata("design:type", Boolean)
@@ -484,247 +488,240 @@ var __vue_render__ = function () {
484
488
  var _h = _vm.$createElement;
485
489
  var _c = _vm._self._c || _h;
486
490
  return _c(
487
- "v-row",
488
- { staticClass: "fill-height zd-calendar-content" },
491
+ "v-sheet",
492
+ {
493
+ staticClass: "fill-height zd-calendar",
494
+ attrs: { height: _vm.instance.height },
495
+ },
489
496
  [
490
497
  _c(
491
- "v-col",
498
+ "div",
499
+ {
500
+ directives: [
501
+ {
502
+ name: "show",
503
+ rawName: "v-show",
504
+ value: _vm.instance.showHeader,
505
+ expression: "instance.showHeader",
506
+ },
507
+ ],
508
+ class: [
509
+ "zd-toolbar-calendar",
510
+ "row",
511
+ { "theme--dark": _vm.instance.dark || _vm.$vuetify.theme.dark },
512
+ { "theme--light": _vm.instance.light || !_vm.$vuetify.theme.dark },
513
+ ],
514
+ attrs: {
515
+ name: "toolbar_" + _vm.instance.name,
516
+ height: "64",
517
+ dark: _vm.instance.dark,
518
+ light: _vm.instance.light,
519
+ },
520
+ },
492
521
  [
493
522
  _c(
494
523
  "div",
495
- {
496
- directives: [
497
- {
498
- name: "show",
499
- rawName: "v-show",
500
- value: _vm.instance.showHeader,
501
- expression: "instance.showHeader",
524
+ { staticClass: "zd-col-2 zd-pb-2 zd-calendar-button-today" },
525
+ [
526
+ _c("zd-button", {
527
+ staticClass: "mr-4",
528
+ attrs: {
529
+ name: "setTodayButton_" + _vm.instance.name,
530
+ label: "$t(CALENDAR_TODAY)",
502
531
  },
503
- ],
504
- class: [
505
- "zd-toolbar-calendar",
506
- "row",
507
- { "theme--dark": _vm.instance.dark || _vm.$vuetify.theme.dark },
508
- {
509
- "theme--light":
510
- _vm.instance.light || !_vm.$vuetify.theme.dark,
532
+ on: {
533
+ click: function ($event) {
534
+ return _vm.instance.goToToday()
535
+ },
511
536
  },
512
- ],
513
- attrs: {
514
- name: "toolbar_" + _vm.instance.name,
515
- height: "64",
516
- dark: _vm.instance.dark,
517
- light: _vm.instance.light,
518
- },
537
+ }),
538
+ ],
539
+ 1
540
+ ),
541
+ _vm._v(" "),
542
+ _c(
543
+ "div",
544
+ {
545
+ staticClass:
546
+ "zd-calendar-nav-title zd-justify-sm-center zd-justify-end zd-col-sm-8 zd-col-xs-12 zd-col-10 zd-pb-2",
519
547
  },
520
548
  [
521
549
  _c(
522
- "div",
523
- { staticClass: "zd-col-2 zd-pb-2" },
524
- [
525
- _c("zd-button", {
526
- staticClass: "mr-4",
527
- attrs: {
528
- name: "setTodayButton_" + _vm.instance.name,
529
- label: "$t(CALENDAR_TODAY)",
530
- },
550
+ "zd-button",
551
+ _vm._b(
552
+ {
553
+ attrs: { name: "prevButtonCalendar_" + _vm.instance.name },
531
554
  on: {
532
555
  click: function ($event) {
533
- return _vm.instance.goToToday()
556
+ return _vm.prev()
534
557
  },
535
558
  },
536
- }),
537
- ],
538
- 1
559
+ },
560
+ "zd-button",
561
+ {
562
+ cssClass: "zd-mr-1",
563
+ icon: true,
564
+ fab: true,
565
+ small: true,
566
+ iconName: "prev",
567
+ },
568
+ false
569
+ )
539
570
  ),
540
571
  _vm._v(" "),
541
572
  _c(
542
- "div",
573
+ "v-menu",
543
574
  {
544
- staticClass:
545
- "zd-justify-sm-center zd-justify-end zd-col-sm-8 zd-col-10 zd-pb-2",
546
- },
547
- [
548
- _c(
549
- "zd-button",
550
- _vm._b(
551
- {
552
- attrs: {
553
- name: "prevButtonCalendar_" + _vm.instance.name,
554
- },
555
- on: {
556
- click: function ($event) {
557
- return _vm.prev()
558
- },
559
- },
560
- },
561
- "zd-button",
562
- {
563
- cssClass: "zd-mr-1",
564
- icon: true,
565
- fab: true,
566
- small: true,
567
- iconName: "prev",
568
- },
569
- false
570
- )
571
- ),
572
- _vm._v(" "),
573
- _c(
574
- "v-menu",
575
+ staticClass: "zd-date-menu-activator",
576
+ attrs: {
577
+ "offset-overflow": "",
578
+ "offset-y": "",
579
+ transition: "scale-transition",
580
+ "close-on-content-click": false,
581
+ },
582
+ scopedSlots: _vm._u([
575
583
  {
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
- _vm.instance.title || _vm.$refs.calendar
590
- ? _c(
591
- "zd-button",
592
- _vm._g(
593
- {
594
- staticClass:
595
- "zd-calendar-content-title",
596
- attrs: {
597
- name:
598
- "titleButton_" + _vm.instance.name,
599
- component: "ZdButton",
600
- flat: "",
601
- label: _vm.titleLabel,
602
- },
603
- },
604
- on
605
- )
606
- )
607
- : _vm._e(),
608
- ]
609
- },
610
- },
611
- ]),
612
- model: {
613
- value: _vm.showDatePicker,
614
- callback: function ($$v) {
615
- _vm.showDatePicker = $$v;
616
- },
617
- expression: "showDatePicker",
584
+ key: "activator",
585
+ fn: function (ref) {
586
+ var on = ref.on;
587
+ return [
588
+ _vm.instance.title || _vm.$refs.calendar
589
+ ? _c(
590
+ "zd-button",
591
+ _vm._g(
592
+ {
593
+ staticClass: "zd-calendar-title",
594
+ attrs: {
595
+ name: "titleButton_" + _vm.instance.name,
596
+ component: "ZdButton",
597
+ flat: "",
598
+ label: _vm.titleLabel,
599
+ },
600
+ },
601
+ on
602
+ )
603
+ )
604
+ : _vm._e(),
605
+ ]
618
606
  },
619
607
  },
620
- [
621
- _vm._v(" "),
622
- _c("v-date-picker", {
623
- attrs: {
624
- "no-title": "",
625
- dark: _vm.instance.dark,
626
- light: _vm.instance.light,
627
- color: _vm.instance.color,
628
- locale: _vm.instance.locale,
629
- },
630
- on: { change: _vm.onChangePicker },
631
- model: {
632
- value: _vm.instance.value,
633
- callback: function ($$v) {
634
- _vm.$set(_vm.instance, "value", $$v);
635
- },
636
- expression: "instance.value",
637
- },
638
- }),
639
- ],
640
- 1
641
- ),
608
+ ]),
609
+ model: {
610
+ value: _vm.showDatePicker,
611
+ callback: function ($$v) {
612
+ _vm.showDatePicker = $$v;
613
+ },
614
+ expression: "showDatePicker",
615
+ },
616
+ },
617
+ [
642
618
  _vm._v(" "),
643
- _c(
644
- "zd-button",
645
- _vm._b(
646
- {
647
- attrs: {
648
- name: "nextButtonCalendar_" + _vm.instance.name,
649
- },
650
- on: {
651
- click: function ($event) {
652
- return _vm.next()
653
- },
654
- },
655
- },
656
- "zd-button",
657
- {
658
- cssClass: "zd-ml-1",
659
- icon: true,
660
- fab: true,
661
- small: true,
662
- iconName: "next",
619
+ _c("v-date-picker", {
620
+ attrs: {
621
+ "no-title": "",
622
+ dark: _vm.instance.dark,
623
+ light: _vm.instance.light,
624
+ color: _vm.instance.color,
625
+ locale: _vm.instance.locale,
626
+ },
627
+ on: { change: _vm.onChangePicker },
628
+ model: {
629
+ value: _vm.instance.value,
630
+ callback: function ($$v) {
631
+ _vm.$set(_vm.instance, "value", $$v);
663
632
  },
664
- false
665
- )
666
- ),
633
+ expression: "instance.value",
634
+ },
635
+ }),
667
636
  ],
668
637
  1
669
638
  ),
670
639
  _vm._v(" "),
671
640
  _c(
672
- "div",
673
- { staticClass: "zd-col-sm-2 zd-col-12 zd-pb-2" },
674
- [
675
- _c(
676
- "zd-select",
677
- _vm._b(
678
- {
679
- ref: "selectCalendarType",
680
- staticClass: "zd-select-calendar-type",
681
- attrs: {
682
- name: "selectCalendarType_" + _vm.instance.name,
683
- },
684
- on: {
685
- change: function ($event) {
686
- return _vm.setType(_vm.$refs.selectCalendarType)
687
- },
688
- },
689
- },
690
- "zd-select",
691
- {
692
- value: _vm.instance.type,
693
- dataText: "name",
694
- dataValue: "value",
695
- clearable: false,
696
- autocomplete: false,
697
- showLabel: false,
698
- showHelper: false,
699
- dense: true,
700
- returnObject: true,
701
- dark: _vm.instance.dark,
702
- light: _vm.instance.light,
703
- datasource: _vm.instance.selectTypeData || {
704
- data: [
705
- { name: _vm.$t("CALENDAR_MONTH"), value: "month" },
706
- { name: _vm.$t("CALENDAR_WEEK"), value: "week" },
707
- { name: _vm.$t("CALENDAR_DAY"), value: "day" },
708
- {
709
- name: _vm.$t("CALENDAR_CATEGORY"),
710
- value: "category",
711
- },
712
- { name: _vm.$t("CALENDAR_4DAYS"), value: "4day" },
713
- ],
714
- },
641
+ "zd-button",
642
+ _vm._b(
643
+ {
644
+ attrs: { name: "nextButtonCalendar_" + _vm.instance.name },
645
+ on: {
646
+ click: function ($event) {
647
+ return _vm.next()
715
648
  },
716
- false
717
- )
718
- ),
719
- ],
720
- 1
649
+ },
650
+ },
651
+ "zd-button",
652
+ {
653
+ cssClass: "zd-ml-1",
654
+ icon: true,
655
+ fab: true,
656
+ small: true,
657
+ iconName: "next",
658
+ },
659
+ false
660
+ )
721
661
  ),
722
- ]
662
+ ],
663
+ 1
723
664
  ),
724
665
  _vm._v(" "),
666
+ _c(
667
+ "div",
668
+ { staticClass: "zd-col-sm-2 zd-col-xs-12 zd-col-12 zd-pb-2" },
669
+ [
670
+ _c(
671
+ "zd-select",
672
+ _vm._b(
673
+ {
674
+ ref: "selectCalendarType",
675
+ staticClass: "zd-select-calendar-type",
676
+ attrs: { name: "selectCalendarType_" + _vm.instance.name },
677
+ on: {
678
+ change: function ($event) {
679
+ return _vm.setType(_vm.$refs.selectCalendarType)
680
+ },
681
+ },
682
+ },
683
+ "zd-select",
684
+ {
685
+ value: _vm.instance.type,
686
+ dataText: "name",
687
+ dataValue: "value",
688
+ clearable: false,
689
+ autocomplete: false,
690
+ showLabel: false,
691
+ showHelper: false,
692
+ dense: true,
693
+ returnObject: true,
694
+ dark: _vm.instance.dark,
695
+ light: _vm.instance.light,
696
+ datasource: _vm.instance.selectTypeData || {
697
+ data: [
698
+ { name: _vm.$t("CALENDAR_MONTH"), value: "month" },
699
+ { name: _vm.$t("CALENDAR_WEEK"), value: "week" },
700
+ { name: _vm.$t("CALENDAR_DAY"), value: "day" },
701
+ {
702
+ name: _vm.$t("CALENDAR_CATEGORY"),
703
+ value: "category",
704
+ },
705
+ { name: _vm.$t("CALENDAR_4DAYS"), value: "4day" },
706
+ ],
707
+ },
708
+ },
709
+ false
710
+ )
711
+ ),
712
+ ],
713
+ 1
714
+ ),
715
+ ]
716
+ ),
717
+ _vm._v(" "),
718
+ _c(
719
+ "div",
720
+ { staticClass: "zd-calendar-content" },
721
+ [
725
722
  _c(
726
723
  "v-sheet",
727
- { attrs: { height: _vm.instance.height || 600 } },
724
+ { attrs: { "min-height": 600, width: "100%" } },
728
725
  [
729
726
  _c("v-calendar", {
730
727
  ref: "calendar",
@@ -919,8 +916,7 @@ var __vue_render__ = function () {
919
916
  ],
920
917
  1
921
918
  ),
922
- ],
923
- 1
919
+ ]
924
920
  )
925
921
  };
926
922
  var __vue_staticRenderFns__ = [];
@@ -929,7 +925,7 @@ __vue_render__._withStripped = true;
929
925
  /* style */
930
926
  const __vue_inject_styles__ = function (inject) {
931
927
  if (!inject) return
932
- inject("data-v-979df4de_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 });
928
+ inject("data-v-e1bad492_0", { source: ".zd-calendar {\n display: flex;\n flex-direction: column;\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 });
933
929
 
934
930
  };
935
931
  /* scoped */
package/dist/calendar-vue.umd.js CHANGED
@@ -243,6 +243,10 @@
243
243
  vuetify.PropWatch({ type: [String, Number, Object], default: 0 }),
244
244
  __metadata("design:type", Object)
245
245
  ], ZdCalendar.prototype, "firstTime", void 0);
246
+ __decorate([
247
+ vuetify.PropWatch({ type: [String, Number], default: undefined }),
248
+ __metadata("design:type", Object)
249
+ ], ZdCalendar.prototype, "height", void 0);
246
250
  __decorate([
247
251
  vuetify.PropWatch({ type: Boolean, default: false }),
248
252
  __metadata("design:type", Boolean)
@@ -485,247 +489,240 @@
485
489
  var _h = _vm.$createElement;
486
490
  var _c = _vm._self._c || _h;
487
491
  return _c(
488
- "v-row",
489
- { staticClass: "fill-height zd-calendar-content" },
492
+ "v-sheet",
493
+ {
494
+ staticClass: "fill-height zd-calendar",
495
+ attrs: { height: _vm.instance.height },
496
+ },
490
497
  [
491
498
  _c(
492
- "v-col",
499
+ "div",
500
+ {
501
+ directives: [
502
+ {
503
+ name: "show",
504
+ rawName: "v-show",
505
+ value: _vm.instance.showHeader,
506
+ expression: "instance.showHeader",
507
+ },
508
+ ],
509
+ class: [
510
+ "zd-toolbar-calendar",
511
+ "row",
512
+ { "theme--dark": _vm.instance.dark || _vm.$vuetify.theme.dark },
513
+ { "theme--light": _vm.instance.light || !_vm.$vuetify.theme.dark },
514
+ ],
515
+ attrs: {
516
+ name: "toolbar_" + _vm.instance.name,
517
+ height: "64",
518
+ dark: _vm.instance.dark,
519
+ light: _vm.instance.light,
520
+ },
521
+ },
493
522
  [
494
523
  _c(
495
524
  "div",
496
- {
497
- directives: [
498
- {
499
- name: "show",
500
- rawName: "v-show",
501
- value: _vm.instance.showHeader,
502
- expression: "instance.showHeader",
525
+ { staticClass: "zd-col-2 zd-pb-2 zd-calendar-button-today" },
526
+ [
527
+ _c("zd-button", {
528
+ staticClass: "mr-4",
529
+ attrs: {
530
+ name: "setTodayButton_" + _vm.instance.name,
531
+ label: "$t(CALENDAR_TODAY)",
503
532
  },
504
- ],
505
- class: [
506
- "zd-toolbar-calendar",
507
- "row",
508
- { "theme--dark": _vm.instance.dark || _vm.$vuetify.theme.dark },
509
- {
510
- "theme--light":
511
- _vm.instance.light || !_vm.$vuetify.theme.dark,
533
+ on: {
534
+ click: function ($event) {
535
+ return _vm.instance.goToToday()
536
+ },
512
537
  },
513
- ],
514
- attrs: {
515
- name: "toolbar_" + _vm.instance.name,
516
- height: "64",
517
- dark: _vm.instance.dark,
518
- light: _vm.instance.light,
519
- },
538
+ }),
539
+ ],
540
+ 1
541
+ ),
542
+ _vm._v(" "),
543
+ _c(
544
+ "div",
545
+ {
546
+ staticClass:
547
+ "zd-calendar-nav-title zd-justify-sm-center zd-justify-end zd-col-sm-8 zd-col-xs-12 zd-col-10 zd-pb-2",
520
548
  },
521
549
  [
522
550
  _c(
523
- "div",
524
- { staticClass: "zd-col-2 zd-pb-2" },
525
- [
526
- _c("zd-button", {
527
- staticClass: "mr-4",
528
- attrs: {
529
- name: "setTodayButton_" + _vm.instance.name,
530
- label: "$t(CALENDAR_TODAY)",
531
- },
551
+ "zd-button",
552
+ _vm._b(
553
+ {
554
+ attrs: { name: "prevButtonCalendar_" + _vm.instance.name },
532
555
  on: {
533
556
  click: function ($event) {
534
- return _vm.instance.goToToday()
557
+ return _vm.prev()
535
558
  },
536
559
  },
537
- }),
538
- ],
539
- 1
560
+ },
561
+ "zd-button",
562
+ {
563
+ cssClass: "zd-mr-1",
564
+ icon: true,
565
+ fab: true,
566
+ small: true,
567
+ iconName: "prev",
568
+ },
569
+ false
570
+ )
540
571
  ),
541
572
  _vm._v(" "),
542
573
  _c(
543
- "div",
574
+ "v-menu",
544
575
  {
545
- staticClass:
546
- "zd-justify-sm-center zd-justify-end zd-col-sm-8 zd-col-10 zd-pb-2",
547
- },
548
- [
549
- _c(
550
- "zd-button",
551
- _vm._b(
552
- {
553
- attrs: {
554
- name: "prevButtonCalendar_" + _vm.instance.name,
555
- },
556
- on: {
557
- click: function ($event) {
558
- return _vm.prev()
559
- },
560
- },
561
- },
562
- "zd-button",
563
- {
564
- cssClass: "zd-mr-1",
565
- icon: true,
566
- fab: true,
567
- small: true,
568
- iconName: "prev",
569
- },
570
- false
571
- )
572
- ),
573
- _vm._v(" "),
574
- _c(
575
- "v-menu",
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([
576
584
  {
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
- _vm.instance.title || _vm.$refs.calendar
591
- ? _c(
592
- "zd-button",
593
- _vm._g(
594
- {
595
- staticClass:
596
- "zd-calendar-content-title",
597
- attrs: {
598
- name:
599
- "titleButton_" + _vm.instance.name,
600
- component: "ZdButton",
601
- flat: "",
602
- label: _vm.titleLabel,
603
- },
604
- },
605
- on
606
- )
607
- )
608
- : _vm._e(),
609
- ]
610
- },
611
- },
612
- ]),
613
- model: {
614
- value: _vm.showDatePicker,
615
- callback: function ($$v) {
616
- _vm.showDatePicker = $$v;
617
- },
618
- expression: "showDatePicker",
585
+ key: "activator",
586
+ fn: function (ref) {
587
+ var on = ref.on;
588
+ return [
589
+ _vm.instance.title || _vm.$refs.calendar
590
+ ? _c(
591
+ "zd-button",
592
+ _vm._g(
593
+ {
594
+ staticClass: "zd-calendar-title",
595
+ attrs: {
596
+ name: "titleButton_" + _vm.instance.name,
597
+ component: "ZdButton",
598
+ flat: "",
599
+ label: _vm.titleLabel,
600
+ },
601
+ },
602
+ on
603
+ )
604
+ )
605
+ : _vm._e(),
606
+ ]
619
607
  },
620
608
  },
621
- [
622
- _vm._v(" "),
623
- _c("v-date-picker", {
624
- attrs: {
625
- "no-title": "",
626
- dark: _vm.instance.dark,
627
- light: _vm.instance.light,
628
- color: _vm.instance.color,
629
- locale: _vm.instance.locale,
630
- },
631
- on: { change: _vm.onChangePicker },
632
- model: {
633
- value: _vm.instance.value,
634
- callback: function ($$v) {
635
- _vm.$set(_vm.instance, "value", $$v);
636
- },
637
- expression: "instance.value",
638
- },
639
- }),
640
- ],
641
- 1
642
- ),
609
+ ]),
610
+ model: {
611
+ value: _vm.showDatePicker,
612
+ callback: function ($$v) {
613
+ _vm.showDatePicker = $$v;
614
+ },
615
+ expression: "showDatePicker",
616
+ },
617
+ },
618
+ [
643
619
  _vm._v(" "),
644
- _c(
645
- "zd-button",
646
- _vm._b(
647
- {
648
- attrs: {
649
- name: "nextButtonCalendar_" + _vm.instance.name,
650
- },
651
- on: {
652
- click: function ($event) {
653
- return _vm.next()
654
- },
655
- },
656
- },
657
- "zd-button",
658
- {
659
- cssClass: "zd-ml-1",
660
- icon: true,
661
- fab: true,
662
- small: true,
663
- iconName: "next",
620
+ _c("v-date-picker", {
621
+ attrs: {
622
+ "no-title": "",
623
+ dark: _vm.instance.dark,
624
+ light: _vm.instance.light,
625
+ color: _vm.instance.color,
626
+ locale: _vm.instance.locale,
627
+ },
628
+ on: { change: _vm.onChangePicker },
629
+ model: {
630
+ value: _vm.instance.value,
631
+ callback: function ($$v) {
632
+ _vm.$set(_vm.instance, "value", $$v);
664
633
  },
665
- false
666
- )
667
- ),
634
+ expression: "instance.value",
635
+ },
636
+ }),
668
637
  ],
669
638
  1
670
639
  ),
671
640
  _vm._v(" "),
672
641
  _c(
673
- "div",
674
- { staticClass: "zd-col-sm-2 zd-col-12 zd-pb-2" },
675
- [
676
- _c(
677
- "zd-select",
678
- _vm._b(
679
- {
680
- ref: "selectCalendarType",
681
- staticClass: "zd-select-calendar-type",
682
- attrs: {
683
- name: "selectCalendarType_" + _vm.instance.name,
684
- },
685
- on: {
686
- change: function ($event) {
687
- return _vm.setType(_vm.$refs.selectCalendarType)
688
- },
689
- },
690
- },
691
- "zd-select",
692
- {
693
- value: _vm.instance.type,
694
- dataText: "name",
695
- dataValue: "value",
696
- clearable: false,
697
- autocomplete: false,
698
- showLabel: false,
699
- showHelper: false,
700
- dense: true,
701
- returnObject: true,
702
- dark: _vm.instance.dark,
703
- light: _vm.instance.light,
704
- datasource: _vm.instance.selectTypeData || {
705
- data: [
706
- { name: _vm.$t("CALENDAR_MONTH"), value: "month" },
707
- { name: _vm.$t("CALENDAR_WEEK"), value: "week" },
708
- { name: _vm.$t("CALENDAR_DAY"), value: "day" },
709
- {
710
- name: _vm.$t("CALENDAR_CATEGORY"),
711
- value: "category",
712
- },
713
- { name: _vm.$t("CALENDAR_4DAYS"), value: "4day" },
714
- ],
715
- },
642
+ "zd-button",
643
+ _vm._b(
644
+ {
645
+ attrs: { name: "nextButtonCalendar_" + _vm.instance.name },
646
+ on: {
647
+ click: function ($event) {
648
+ return _vm.next()
716
649
  },
717
- false
718
- )
719
- ),
720
- ],
721
- 1
650
+ },
651
+ },
652
+ "zd-button",
653
+ {
654
+ cssClass: "zd-ml-1",
655
+ icon: true,
656
+ fab: true,
657
+ small: true,
658
+ iconName: "next",
659
+ },
660
+ false
661
+ )
722
662
  ),
723
- ]
663
+ ],
664
+ 1
724
665
  ),
725
666
  _vm._v(" "),
667
+ _c(
668
+ "div",
669
+ { staticClass: "zd-col-sm-2 zd-col-xs-12 zd-col-12 zd-pb-2" },
670
+ [
671
+ _c(
672
+ "zd-select",
673
+ _vm._b(
674
+ {
675
+ ref: "selectCalendarType",
676
+ staticClass: "zd-select-calendar-type",
677
+ attrs: { name: "selectCalendarType_" + _vm.instance.name },
678
+ on: {
679
+ change: function ($event) {
680
+ return _vm.setType(_vm.$refs.selectCalendarType)
681
+ },
682
+ },
683
+ },
684
+ "zd-select",
685
+ {
686
+ value: _vm.instance.type,
687
+ dataText: "name",
688
+ dataValue: "value",
689
+ clearable: false,
690
+ autocomplete: false,
691
+ showLabel: false,
692
+ showHelper: false,
693
+ dense: true,
694
+ returnObject: true,
695
+ dark: _vm.instance.dark,
696
+ light: _vm.instance.light,
697
+ datasource: _vm.instance.selectTypeData || {
698
+ data: [
699
+ { name: _vm.$t("CALENDAR_MONTH"), value: "month" },
700
+ { name: _vm.$t("CALENDAR_WEEK"), value: "week" },
701
+ { name: _vm.$t("CALENDAR_DAY"), value: "day" },
702
+ {
703
+ name: _vm.$t("CALENDAR_CATEGORY"),
704
+ value: "category",
705
+ },
706
+ { name: _vm.$t("CALENDAR_4DAYS"), value: "4day" },
707
+ ],
708
+ },
709
+ },
710
+ false
711
+ )
712
+ ),
713
+ ],
714
+ 1
715
+ ),
716
+ ]
717
+ ),
718
+ _vm._v(" "),
719
+ _c(
720
+ "div",
721
+ { staticClass: "zd-calendar-content" },
722
+ [
726
723
  _c(
727
724
  "v-sheet",
728
- { attrs: { height: _vm.instance.height || 600 } },
725
+ { attrs: { "min-height": 600, width: "100%" } },
729
726
  [
730
727
  _c("v-calendar", {
731
728
  ref: "calendar",
@@ -920,8 +917,7 @@
920
917
  ],
921
918
  1
922
919
  ),
923
- ],
924
- 1
920
+ ]
925
921
  )
926
922
  };
927
923
  var __vue_staticRenderFns__ = [];
@@ -930,7 +926,7 @@
930
926
  /* style */
931
927
  const __vue_inject_styles__ = function (inject) {
932
928
  if (!inject) return
933
- inject("data-v-979df4de_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 });
929
+ inject("data-v-e1bad492_0", { source: ".zd-calendar {\n display: flex;\n flex-direction: column;\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 });
934
930
 
935
931
  };
936
932
  /* scoped */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-calendar-vue",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
4
4
  "description": "Powered by Zeedhi",
5
5
  "main": "dist/calendar-vue.umd.js",
6
6
  "module": "dist/calendar-vue.esm.js",
@@ -16,9 +16,9 @@
16
16
  "peerDependencies": {
17
17
  "@zeedhi/vuetify": "*",
18
18
  "@zeedhi/zd-calendar-common": "file:packages/common",
19
- "vue": "^2.6.12",
20
- "vue-class-component": "^7.2.6",
21
- "vue-property-decorator": "^9.1.2"
19
+ "vue": "2.7.*",
20
+ "vue-class-component": "7.2.*",
21
+ "vue-property-decorator": "9.1.*"
22
22
  },
23
- "gitHead": "6f2e0255746a71a9881580a7b059157c595c28dd"
23
+ "gitHead": "9bc9479c3b9680f1cdefab0421424ab7a6c375cc"
24
24
  }
package/types/Calendar.d.ts CHANGED
@@ -29,6 +29,7 @@ export default class ZdCalendar extends ZdComponentRender {
29
29
  calendarEvents: [];
30
30
  firstInterval: number | string;
31
31
  firstTime: number | string | object;
32
+ height: number | string;
32
33
  hideHeader: boolean;
33
34
  intervalCount: number | string;
34
35
  intervalFormat: Function | null;