@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
160 lines (159 loc) • 4.97 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const common_utils = require("../../common/utils.cjs");
const monthYearPicker = require("./modules/month-year-picker.vue.cjs");
const calendar = require("./modules/calendar.vue.cjs");
const stack = require("../stack/stack.vue.cjs");
const _hoisted_1 = { class: "d-datepicker__hd" };
const _hoisted_2 = { class: "d-datepicker__bd" };
const _sfc_main = {
__name: "datepicker",
props: {
/**
* Label for the previous month button
*
* @type {String}
* @example 'Previous month'
*/
prevMonthLabel: {
type: String,
required: true
},
/**
* Label for the next month button
*
* @type {String}
* @example 'Next month'
*/
nextMonthLabel: {
type: String,
required: true
},
/**
* Label for the previous year button
*
* @type {String}
* @example 'Previous year'
*/
prevYearLabel: {
type: String,
required: true
},
/**
* Label for the next year button
*
* @type {String}
* @example 'Next year'
*/
nextYearLabel: {
type: String,
required: true
},
/**
* Label for the select day button
*
* @type {String}
* @example 'Select day'
*/
selectDayLabel: {
type: String,
required: true
},
/**
* Label for the change to button
*
* @type {String}
* @example 'Change to'
*/
changeToLabel: {
type: String,
required: true
},
/**
* Locale for the calendar
*
* @type {String}
*/
locale: {
type: String,
default: "en-US"
},
/**
* Selected date
*
* @type {Date}
*/
selectedDate: {
type: Date,
default: () => /* @__PURE__ */ new Date()
}
},
emits: [
/**
* Event fired when a date is selected
*
* @event selected-date
* @type {Date}
*/
"selected-date",
/**
* Event fired when user presses the esc key
*
* @event close-datepicker
*/
"close-datepicker"
],
setup(__props) {
const calendarDays = vue.ref([]);
function updateCalendarDays(days) {
calendarDays.value = days;
}
vue.onMounted(() => {
const instance = vue.getCurrentInstance();
common_utils.warnIfUnmounted(common_utils.returnFirstEl(instance.proxy.$el), "datepicker");
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(stack.default), {
class: "d-datepicker",
gap: "400"
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createVNode(monthYearPicker.default, {
ref: "monthYearPicker",
locale: __props.locale,
"prev-month-label": __props.prevMonthLabel,
"next-month-label": __props.nextMonthLabel,
"prev-year-label": __props.prevYearLabel,
"next-year-label": __props.nextYearLabel,
"change-to-label": __props.changeToLabel,
"selected-date": __props.selectedDate,
onCalendarDays: updateCalendarDays,
onFocusFirstDay: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.calendar.focusFirstDay()),
onFocusLastDay: _cache[1] || (_cache[1] = ($event) => _ctx.$refs.calendar.focusLastDay()),
onCloseDatepicker: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close-datepicker"))
}, null, 8, ["locale", "prev-month-label", "next-month-label", "prev-year-label", "next-year-label", "change-to-label", "selected-date"])
]),
vue.createElementVNode("div", _hoisted_2, [
vue.createVNode(calendar.default, {
ref: "calendar",
locale: __props.locale,
"calendar-days": calendarDays.value,
"select-day-label": __props.selectDayLabel,
onSelectDate: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("selected-date", $event)),
onFocusMonthYearPicker: _cache[4] || (_cache[4] = ($event) => _ctx.$refs.monthYearPicker.focusMonthYearPicker()),
onCloseDatepicker: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("close-datepicker")),
onGoToNextMonth: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.monthYearPicker.goToNextMonth()),
onGoToPrevMonth: _cache[7] || (_cache[7] = ($event) => _ctx.$refs.monthYearPicker.goToPrevMonth())
}, null, 8, ["locale", "calendar-days", "select-day-label"])
])
]),
_: 1
});
};
}
};
const _sfc_main$1 = _sfc_main;
exports.default = _sfc_main$1;
//# sourceMappingURL=datepicker.vue.cjs.map