@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
139 lines (138 loc) • 4.72 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const useCalendar = require("../composables/useCalendar.cjs");
const button = require("../../button/button.vue.cjs");
const _hoisted_1 = {
class: "d-datepicker__calendar",
"aria-labelledby": "calendar-heading"
};
const _hoisted_2 = ["title", "aria-label"];
const _sfc_main = {
__name: "calendar",
props: {
calendarDays: {
type: Array,
required: true
},
locale: {
type: String,
required: true
},
selectDayLabel: {
type: String,
required: true
}
},
emits: [
/**
* Event fired when a date is selected
*
* @event select-date
* @type {Date}
*/
"select-date",
/**
* Will focus the month and year picker
*
* @event focus-month-year-picker
*/
"focus-month-year-picker",
/**
* Will close the datepicker
*
* @event close-datepicker
*/
"close-datepicker",
/**
* Will go to the next month
*
* @event go-to-next-month
*/
"go-to-next-month",
/**
* Will go to the previous month
*
* @event go-to-prev-month
*/
"go-to-prev-month"
],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const {
selectedDay,
weekDays,
dayAriaLabel,
setDayRef,
handleKeyDown,
focusFirstDay,
selectDay
} = useCalendar.useCalendar(props, emits);
__expose({
focusFirstDay
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("table", _hoisted_1, [
vue.createElementVNode("thead", null, [
vue.createElementVNode("tr", null, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(weekDays), (day) => {
return vue.openBlock(), vue.createElementBlock("th", {
key: day,
scope: "col",
class: "d-datepicker__cell d-datepicker__cell--header"
}, [
vue.createElementVNode("span", {
class: "d-datepicker__weekday",
title: day,
"aria-label": day
}, vue.toDisplayString(day), 9, _hoisted_2)
]);
}), 128))
])
]),
vue.createElementVNode("tbody", null, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.calendarDays, (week, indexWeek) => {
return vue.openBlock(), vue.createElementBlock("tr", { key: indexWeek }, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week.days, (day, indexDays) => {
return vue.openBlock(), vue.createElementBlock("td", {
key: indexWeek + indexDays,
class: "d-datepicker__cell",
role: "listbox"
}, [
vue.createVNode(vue.unref(button.default), {
ref_for: true,
ref: (el) => {
if (el) vue.unref(setDayRef)(el, day);
},
class: vue.normalizeClass(["d-datepicker__day", {
"d-datepicker__day--disabled": !day.currentMonth,
"d-datepicker__day--selected": vue.unref(selectedDay) ? day.text === vue.unref(selectedDay) && day.currentMonth : day.selected
}]),
circle: true,
size: "sm",
importance: "clear",
disabled: !day.currentMonth,
type: "button",
"aria-selected": !!vue.unref(selectedDay) ? day.text === vue.unref(selectedDay) && day.currentMonth : day.selected,
"aria-label": vue.unref(dayAriaLabel)(day),
role: "option",
onClick: ($event) => vue.unref(selectDay)(day),
onKeydown: _cache[0] || (_cache[0] = ($event) => vue.unref(handleKeyDown)($event))
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(day.text), 1)
]),
_: 2
}, 1032, ["disabled", "class", "aria-selected", "aria-label", "onClick"])
]);
}), 128))
]);
}), 128))
])
]);
};
}
};
exports.default = _sfc_main;
//# sourceMappingURL=calendar.vue.cjs.map