@zeedhi/zd-calendar-vue 1.4.0 → 1.4.2

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 +200 -216
  2. package/dist/calendar-vue.umd.js +200 -216
  3. package/package.json +2 -2
  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,259 +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
- _c(
590
- "div",
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
591
  _vm._g(
592
592
  {
593
+ staticClass: "zd-calendar-title",
593
594
  attrs: {
594
- "dropdown-activator": Object.assign(
595
- {},
596
- _vm.$attrs["dropdown-activator"],
597
- on
598
- ),
595
+ name: "titleButton_" + _vm.instance.name,
596
+ component: "ZdButton",
597
+ flat: "",
598
+ label: _vm.titleLabel,
599
599
  },
600
600
  },
601
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",
602
+ )
603
+ )
604
+ : _vm._e(),
605
+ ]
630
606
  },
631
607
  },
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
- ),
608
+ ]),
609
+ model: {
610
+ value: _vm.showDatePicker,
611
+ callback: function ($$v) {
612
+ _vm.showDatePicker = $$v;
613
+ },
614
+ expression: "showDatePicker",
615
+ },
616
+ },
617
+ [
654
618
  _vm._v(" "),
655
- _c(
656
- "zd-button",
657
- _vm._b(
658
- {
659
- attrs: {
660
- name: "nextButtonCalendar_" + _vm.instance.name,
661
- },
662
- on: {
663
- click: function ($event) {
664
- return _vm.next()
665
- },
666
- },
667
- },
668
- "zd-button",
669
- {
670
- cssClass: "zd-ml-1",
671
- icon: true,
672
- fab: true,
673
- small: true,
674
- 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);
675
632
  },
676
- false
677
- )
678
- ),
633
+ expression: "instance.value",
634
+ },
635
+ }),
679
636
  ],
680
637
  1
681
638
  ),
682
639
  _vm._v(" "),
683
640
  _c(
684
- "div",
685
- { staticClass: "zd-col-sm-2 zd-col-12 zd-pb-2" },
686
- [
687
- _c(
688
- "zd-select",
689
- _vm._b(
690
- {
691
- ref: "selectCalendarType",
692
- staticClass: "zd-select-calendar-type",
693
- attrs: {
694
- name: "selectCalendarType_" + _vm.instance.name,
695
- },
696
- on: {
697
- change: function ($event) {
698
- return _vm.setType(_vm.$refs.selectCalendarType)
699
- },
700
- },
701
- },
702
- "zd-select",
703
- {
704
- value: _vm.instance.type,
705
- dataText: "name",
706
- dataValue: "value",
707
- clearable: false,
708
- autocomplete: false,
709
- showLabel: false,
710
- showHelper: false,
711
- dense: true,
712
- returnObject: true,
713
- dark: _vm.instance.dark,
714
- light: _vm.instance.light,
715
- datasource: _vm.instance.selectTypeData || {
716
- data: [
717
- { name: _vm.$t("CALENDAR_MONTH"), value: "month" },
718
- { name: _vm.$t("CALENDAR_WEEK"), value: "week" },
719
- { name: _vm.$t("CALENDAR_DAY"), value: "day" },
720
- {
721
- name: _vm.$t("CALENDAR_CATEGORY"),
722
- value: "category",
723
- },
724
- { name: _vm.$t("CALENDAR_4DAYS"), value: "4day" },
725
- ],
726
- },
641
+ "zd-button",
642
+ _vm._b(
643
+ {
644
+ attrs: { name: "nextButtonCalendar_" + _vm.instance.name },
645
+ on: {
646
+ click: function ($event) {
647
+ return _vm.next()
727
648
  },
728
- false
729
- )
730
- ),
731
- ],
732
- 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
+ )
733
661
  ),
734
- ]
662
+ ],
663
+ 1
735
664
  ),
736
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
+ [
737
722
  _c(
738
723
  "v-sheet",
739
- { attrs: { height: _vm.instance.height || 600 } },
724
+ { attrs: { "min-height": 600, width: "100%" } },
740
725
  [
741
726
  _c("v-calendar", {
742
727
  ref: "calendar",
@@ -931,8 +916,7 @@ var __vue_render__ = function () {
931
916
  ],
932
917
  1
933
918
  ),
934
- ],
935
- 1
919
+ ]
936
920
  )
937
921
  };
938
922
  var __vue_staticRenderFns__ = [];
@@ -941,7 +925,7 @@ __vue_render__._withStripped = true;
941
925
  /* style */
942
926
  const __vue_inject_styles__ = function (inject) {
943
927
  if (!inject) return
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 });
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 });
945
929
 
946
930
  };
947
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,259 +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
- _c(
591
- "div",
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
592
  _vm._g(
593
593
  {
594
+ staticClass: "zd-calendar-title",
594
595
  attrs: {
595
- "dropdown-activator": Object.assign(
596
- {},
597
- _vm.$attrs["dropdown-activator"],
598
- on
599
- ),
596
+ name: "titleButton_" + _vm.instance.name,
597
+ component: "ZdButton",
598
+ flat: "",
599
+ label: _vm.titleLabel,
600
600
  },
601
601
  },
602
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",
603
+ )
604
+ )
605
+ : _vm._e(),
606
+ ]
631
607
  },
632
608
  },
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
- ),
609
+ ]),
610
+ model: {
611
+ value: _vm.showDatePicker,
612
+ callback: function ($$v) {
613
+ _vm.showDatePicker = $$v;
614
+ },
615
+ expression: "showDatePicker",
616
+ },
617
+ },
618
+ [
655
619
  _vm._v(" "),
656
- _c(
657
- "zd-button",
658
- _vm._b(
659
- {
660
- attrs: {
661
- name: "nextButtonCalendar_" + _vm.instance.name,
662
- },
663
- on: {
664
- click: function ($event) {
665
- return _vm.next()
666
- },
667
- },
668
- },
669
- "zd-button",
670
- {
671
- cssClass: "zd-ml-1",
672
- icon: true,
673
- fab: true,
674
- small: true,
675
- 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);
676
633
  },
677
- false
678
- )
679
- ),
634
+ expression: "instance.value",
635
+ },
636
+ }),
680
637
  ],
681
638
  1
682
639
  ),
683
640
  _vm._v(" "),
684
641
  _c(
685
- "div",
686
- { staticClass: "zd-col-sm-2 zd-col-12 zd-pb-2" },
687
- [
688
- _c(
689
- "zd-select",
690
- _vm._b(
691
- {
692
- ref: "selectCalendarType",
693
- staticClass: "zd-select-calendar-type",
694
- attrs: {
695
- name: "selectCalendarType_" + _vm.instance.name,
696
- },
697
- on: {
698
- change: function ($event) {
699
- return _vm.setType(_vm.$refs.selectCalendarType)
700
- },
701
- },
702
- },
703
- "zd-select",
704
- {
705
- value: _vm.instance.type,
706
- dataText: "name",
707
- dataValue: "value",
708
- clearable: false,
709
- autocomplete: false,
710
- showLabel: false,
711
- showHelper: false,
712
- dense: true,
713
- returnObject: true,
714
- dark: _vm.instance.dark,
715
- light: _vm.instance.light,
716
- datasource: _vm.instance.selectTypeData || {
717
- data: [
718
- { name: _vm.$t("CALENDAR_MONTH"), value: "month" },
719
- { name: _vm.$t("CALENDAR_WEEK"), value: "week" },
720
- { name: _vm.$t("CALENDAR_DAY"), value: "day" },
721
- {
722
- name: _vm.$t("CALENDAR_CATEGORY"),
723
- value: "category",
724
- },
725
- { name: _vm.$t("CALENDAR_4DAYS"), value: "4day" },
726
- ],
727
- },
642
+ "zd-button",
643
+ _vm._b(
644
+ {
645
+ attrs: { name: "nextButtonCalendar_" + _vm.instance.name },
646
+ on: {
647
+ click: function ($event) {
648
+ return _vm.next()
728
649
  },
729
- false
730
- )
731
- ),
732
- ],
733
- 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
+ )
734
662
  ),
735
- ]
663
+ ],
664
+ 1
736
665
  ),
737
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
+ [
738
723
  _c(
739
724
  "v-sheet",
740
- { attrs: { height: _vm.instance.height || 600 } },
725
+ { attrs: { "min-height": 600, width: "100%" } },
741
726
  [
742
727
  _c("v-calendar", {
743
728
  ref: "calendar",
@@ -932,8 +917,7 @@
932
917
  ],
933
918
  1
934
919
  ),
935
- ],
936
- 1
920
+ ]
937
921
  )
938
922
  };
939
923
  var __vue_staticRenderFns__ = [];
@@ -942,7 +926,7 @@
942
926
  /* style */
943
927
  const __vue_inject_styles__ = function (inject) {
944
928
  if (!inject) return
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 });
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 });
946
930
 
947
931
  };
948
932
  /* scoped */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-calendar-vue",
3
- "version": "1.4.0",
3
+ "version": "1.4.2",
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": "ba6bbebdef28d1c858b88f4b63718ec4aecf3ed6"
23
+ "gitHead": "d40c6d309d81e1dd00b49a332e5b12477e1e300e"
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;