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