@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
226 lines (225 loc) • 8.83 kB
JavaScript
import { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from "@dialpad/dialtone-icons/vue2";
import { getMonth, getYear, getDate, set, addMonths, subMonths } from "date-fns";
import { getCalendarDays, formatMonth } from "../utils.js";
import { INTL_MONTH_FORMAT } from "../datepicker_constants.js";
import DtStack from "../../stack/stack.vue.js";
import DtTooltip from "../../tooltip/tooltip.vue.js";
import DtButton from "../../button/button.vue.js";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
name: "DtDatepickerMonthYearPicker",
components: {
DtButton,
DtTooltip,
DtStack,
DtIconChevronLeft,
DtIconChevronsLeft,
DtIconChevronRight,
DtIconChevronsRight
},
props: {
locale: {
type: String,
required: true
},
prevMonthLabel: {
type: String,
required: true
},
nextMonthLabel: {
type: String,
required: true
},
prevYearLabel: {
type: String,
required: true
},
nextYearLabel: {
type: String,
required: true
},
changeToLabel: {
type: String,
required: true
},
selectedDate: {
type: Date,
required: true
}
},
emits: [
/**
* Will retrieve the calendar days of the given date
*
* @event calendar-days
* @type {Array}
*/
"calendar-days",
/**
* Will focus first day in calendar
*
* @event focus-first-day
*/
"focus-first-day",
/**
* Will focus last day in calendar
*
* @event focus-last-day
*/
"focus-last-day",
/**
* Will close the datepicker
*
* @event close-datepicker
*/
"close-datepicker"
],
data() {
return {
selectMonth: getMonth(this.selectedDate),
selectYear: getYear(this.selectedDate),
highlightedDay: null,
focusPicker: 0,
focusRefs: [],
refNames: ["prevYearButtonRef", "prevMonthButtonRef", "nextMonthButtonRef", "nextYearButtonRef"]
};
},
computed: {
// Get days for the currently selected month and year and highlight the selected day
calendarDays() {
return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);
},
formattedMonth() {
return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);
}
},
watch: {
selectMonth: {
handler() {
this.highlightDay();
this.$emit("calendar-days", this.calendarDays);
},
immediate: true
},
selectYear: {
handler() {
this.highlightDay();
this.$emit("calendar-days", this.calendarDays);
},
immediate: true
}
},
mounted() {
this.setButtonsRef();
this.focusMonthYearPicker();
},
methods: {
setButtonsRef() {
this.focusRefs = this.refNames.map((refName) => this.$refs[refName]);
},
focusMonthYearPicker() {
this.focusPicker = 0;
this.focusRefs[0].$el.focus();
},
handleKeyDown(event) {
switch (event.key) {
case "ArrowLeft":
event.preventDefault();
if (this.focusPicker === 0) {
this.focusPicker = 3;
this.focusRefs[this.focusPicker].$el.focus();
} else {
this.focusPicker--;
this.focusRefs[this.focusPicker].$el.focus();
}
break;
case "ArrowRight":
event.preventDefault();
if (this.focusPicker === 3) {
this.focusPicker = 0;
this.focusRefs[this.focusPicker].$el.focus();
} else {
this.focusPicker++;
this.focusRefs[this.focusPicker].$el.focus();
}
break;
case "ArrowDown":
event.preventDefault();
this.$emit("focus-first-day");
break;
case "Tab":
event.preventDefault();
this.$emit("focus-first-day");
break;
case "Escape":
this.$emit("close-datepicker");
break;
}
},
highlightDay() {
const year = getYear(this.selectedDate);
const month = getMonth(this.selectedDate);
if (year !== this.selectYear || month !== this.selectMonth) {
this.highlightedDay = null;
} else {
this.highlightedDay = getDate(this.selectedDate);
}
},
changeMonth(value) {
if (this.selectMonth === 0 && value === -1 || this.selectMonth === 11 && value === 1) {
this.selectYear += value;
}
const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });
const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);
this.selectMonth = getMonth(newDate);
},
changeYear(value) {
this.selectYear = this.selectYear + value;
},
goToNextMonth() {
this.changeMonth(1);
},
goToPrevMonth() {
this.changeMonth(-1);
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { "direction": "row", "gap": "300" } }, [_c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.prevYearLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
return [_c("dt-button", { ref: _vm.refNames[0], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevYearButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevYearLabel} ${_vm.selectYear - 1}` }, on: { "click": function($event) {
return _vm.changeYear(-1);
}, "keydown": function($event) {
return _vm.handleKeyDown($event);
} } }, [_c("dt-icon-chevrons-left", { attrs: { "size": "200" } })], 1)];
}, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.prevMonthLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
return [_c("dt-button", { ref: _vm.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevMonthButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevMonthLabel} ${_vm.formattedMonth(_vm.selectMonth - 1)}` }, on: { "click": function($event) {
return _vm.changeMonth(-1);
}, "keydown": function($event) {
return _vm.handleKeyDown($event);
} } }, [_c("dt-icon-chevron-left", { attrs: { "size": "200" } })], 1)];
}, proxy: true }]) })], 1), _c("div", { staticClass: "d-datepicker__month-year-title", attrs: { "id": "calendar-heading" } }, [_vm._v(" " + _vm._s(_vm.formattedMonth(_vm.selectMonth)) + " " + _vm._s(_vm.selectYear) + " ")]), _c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.nextMonthLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
return [_c("dt-button", { ref: _vm.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextMonthButton", "size": "xs", "importance": "clear", "circle": true, "kind": "muted", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextMonthLabel} ${_vm.formattedMonth(_vm.selectMonth + 1)}` }, on: { "click": function($event) {
return _vm.changeMonth(1);
}, "keydown": function($event) {
return _vm.handleKeyDown($event);
} } }, [_c("dt-icon-chevron-right", { attrs: { "size": "200" } })], 1)];
}, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.nextYearLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
return [_c("dt-button", { ref: _vm.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextYearButton", "size": "xs", "kind": "muted", "circle": true, "importance": "clear", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextYearLabel} ${_vm.selectYear + 1}` }, on: { "click": function($event) {
return _vm.changeYear(1);
}, "keydown": function($event) {
return _vm.handleKeyDown($event);
} } }, [_c("dt-icon-chevrons-right", { attrs: { "size": "200" } })], 1)];
}, proxy: true }]) })], 1)], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const MonthYearPicker = __component__.exports;
export {
MonthYearPicker as default
};
//# sourceMappingURL=month-year-picker.vue.js.map