@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
248 lines (247 loc) • 8.59 kB
JavaScript
import { onMounted, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, toDisplayString } from "vue";
import { DtIconChevronsLeft, DtIconChevronLeft, DtIconChevronRight, DtIconChevronsRight } from "@dialpad/dialtone-icons/vue3";
import { INTL_MONTH_FORMAT } from "../datepicker_constants.js";
import { useMonthYearPicker } from "../composables/useMonthYearPicker.js";
import DtStack from "../../stack/stack.vue.js";
import DtTooltip from "../../tooltip/tooltip.vue.js";
import DtButton from "../../button/button.vue.js";
const _hoisted_1 = {
id: "calendar-heading",
class: "d-datepicker__month-year-title"
};
const _sfc_main = {
__name: "month-year-picker",
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"
],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const {
selectMonth,
selectYear,
formattedMonth,
setDayRef,
focusMonthYearPicker,
handleKeyDown,
changeMonth,
changeYear,
goToNextMonth,
goToPrevMonth
} = useMonthYearPicker(props, emits);
onMounted(() => {
focusMonthYearPicker();
});
__expose({
focusMonthYearPicker,
goToNextMonth,
goToPrevMonth
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(DtStack), {
direction: "row",
class: "d-datepicker__month-year",
gap: "300"
}, {
default: withCtx(() => [
createVNode(unref(DtStack), {
as: "nav",
direction: "row",
gap: "200",
class: "d-datepicker__nav"
}, {
default: withCtx(() => [
createVNode(unref(DtTooltip), {
message: __props.prevYearLabel,
placement: "top",
"fallback-placements": ["top-start", "auto"]
}, {
anchor: withCtx(() => [
createVNode(unref(DtButton), {
id: "prevYearButton",
ref: (el) => {
if (el) unref(setDayRef)(el);
},
size: "xs",
importance: "clear",
kind: "muted",
circle: true,
class: "d-datepicker__nav-btn",
type: "button",
"aria-label": `${__props.changeToLabel} ${__props.prevYearLabel} ${unref(selectYear) - 1}`,
onClick: _cache[0] || (_cache[0] = ($event) => unref(changeYear)(-1)),
onKeydown: _cache[1] || (_cache[1] = ($event) => unref(handleKeyDown)($event))
}, {
default: withCtx(() => [
createVNode(unref(DtIconChevronsLeft), { size: "200" })
]),
_: 1
}, 8, ["aria-label"])
]),
_: 1
}, 8, ["message"]),
createVNode(unref(DtTooltip), {
message: __props.prevMonthLabel,
placement: "top",
"fallback-placements": ["top-end", "auto"]
}, {
anchor: withCtx(() => [
createVNode(unref(DtButton), {
id: "prevMonthButton",
ref: (el) => {
if (el) unref(setDayRef)(el);
},
size: "xs",
importance: "clear",
kind: "muted",
circle: true,
class: "d-datepicker__nav-btn",
type: "button",
"aria-label": `${__props.changeToLabel} ${__props.prevMonthLabel} ${unref(formattedMonth)(unref(selectMonth) - 1, unref(INTL_MONTH_FORMAT), __props.locale)}`,
onClick: _cache[2] || (_cache[2] = ($event) => unref(changeMonth)(-1)),
onKeydown: _cache[3] || (_cache[3] = ($event) => unref(handleKeyDown)($event))
}, {
default: withCtx(() => [
createVNode(unref(DtIconChevronLeft), { size: "200" })
]),
_: 1
}, 8, ["aria-label"])
]),
_: 1
}, 8, ["message"])
]),
_: 1
}),
createElementVNode("div", _hoisted_1, toDisplayString(unref(formattedMonth)(unref(selectMonth), unref(INTL_MONTH_FORMAT), __props.locale)) + " " + toDisplayString(unref(selectYear)), 1),
createVNode(unref(DtStack), {
as: "nav",
direction: "row",
gap: "200",
class: "d-datepicker__nav"
}, {
default: withCtx(() => [
createVNode(unref(DtTooltip), {
message: __props.nextMonthLabel,
placement: "top",
"fallback-placements": ["top-start", "auto"]
}, {
anchor: withCtx(() => [
createVNode(unref(DtButton), {
id: "nextMonthButton",
ref: (el) => {
if (el) unref(setDayRef)(el);
},
size: "xs",
importance: "clear",
kind: "muted",
circle: true,
class: "d-datepicker__nav-btn",
type: "button",
"aria-label": `${__props.changeToLabel} ${__props.nextMonthLabel} ${unref(formattedMonth)(unref(selectMonth) + 1, unref(INTL_MONTH_FORMAT), __props.locale)}`,
onClick: _cache[4] || (_cache[4] = ($event) => unref(changeMonth)(1)),
onKeydown: _cache[5] || (_cache[5] = ($event) => unref(handleKeyDown)($event))
}, {
default: withCtx(() => [
createVNode(unref(DtIconChevronRight), { size: "200" })
]),
_: 1
}, 8, ["aria-label"])
]),
_: 1
}, 8, ["message"]),
createVNode(unref(DtTooltip), {
message: __props.nextYearLabel,
placement: "top",
"fallback-placements": ["top-end", "auto"]
}, {
anchor: withCtx(() => [
createVNode(unref(DtButton), {
id: "nextYearButton",
ref: (el) => {
if (el) unref(setDayRef)(el);
},
size: "xs",
importance: "clear",
kind: "muted",
circle: true,
class: "d-datepicker__nav-btn",
type: "button",
"aria-label": `${__props.changeToLabel} ${__props.nextYearLabel} ${unref(selectYear) + 1}`,
onClick: _cache[6] || (_cache[6] = ($event) => unref(changeYear)(1)),
onKeydown: _cache[7] || (_cache[7] = ($event) => unref(handleKeyDown)($event))
}, {
default: withCtx(() => [
createVNode(unref(DtIconChevronsRight), { size: "200" })
]),
_: 1
}, 8, ["aria-label"])
]),
_: 1
}, 8, ["message"])
]),
_: 1
})
]),
_: 1
});
};
}
};
export {
_sfc_main as default
};
//# sourceMappingURL=month-year-picker.vue.js.map