@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
283 lines (282 loc) • 14.6 kB
JavaScript
import h from "./NeonDatePicker.es.js";
import { resolveComponent as m, openBlock as l, createElementBlock as t, normalizeClass as k, createVNode as u, withCtx as Y, createElementVNode as r, Fragment as b, toDisplayString as y, withKeys as i, withModifiers as o, renderList as c, createBlock as v, createCommentVNode as w, mergeProps as z } from "vue";
import f from "../../../_virtual/_plugin-vue_export-helper.es.js";
const M = {
ref: "calendarRef",
class: "neon-date-picker__calendar"
}, N = { class: "neon-date-picker__calendar-header" }, K = { class: "neon-date-picker__calendar-title-readonly" }, L = { class: "neon-date-picker__calendar-header-actions" }, S = { class: "neon-date-picker__calendar-options" }, V = { class: "neon-date-picker__calendar-header" }, P = {
key: 0,
class: "neon-date-picker__calendar-title-readonly"
}, O = { class: "neon-date-picker__calendar-header-actions" }, U = { class: "neon-date-picker__calendar-options" }, B = { class: "neon-date-picker__calendar-header" }, E = {
key: 0,
class: "neon-date-picker__calendar-title-readonly"
}, F = { class: "neon-date-picker__calendar-header-actions" }, R = { class: "neon-date-picker__calendar-dows" }, j = ["title"], q = { class: "neon-button-group" };
function A(e, a, G, H, I, J) {
const s = m("neon-button"), C = m("neon-dropdown"), D = m("neon-input");
return l(), t("div", {
class: k([[
`neon-date-picker--${e.size}`,
`neon-date-picker--${e.color}`,
{
"neon-date-picker--disabled": e.disabled,
"neon-date-picker--open": e.calendarOpen
}
], "neon-date-picker"])
}, [
u(C, {
id: e.id,
ref: "dropdown",
modelValue: e.calendarOpen,
"onUpdate:modelValue": [
a[20] || (a[20] = (n) => e.calendarOpen = n),
e.toggleCalendar
],
color: e.color,
disabled: e.disabled,
"icon-aria-label": e.openCalendarLabel,
indicator: !1,
label: e.formattedValue,
placement: e.placement,
size: e.size,
"dropdown-style": "input",
icon: "calendar"
}, {
default: Y(() => [
r("div", M, [
e.yearSelectionOpen ? (l(), t(b, { key: 0 }, [
r("div", N, [
r("span", K, y(`${e.calendar.pageDecadeStart}–${e.calendar.pageDecadeStart + 9}`), 1),
r("div", L, [
u(s, {
"aria-label": e.previousDecadeLabel,
circular: !0,
color: e.color,
disabled: e.isPreviousDecadeDisabled,
"button-style": "text",
class: "neon-date-picker__previous-button",
icon: "chevron-left",
size: "m",
onClickCapture: a[0] || (a[0] = o((n) => e.onPreviousDecade(), ["stop", "prevent"])),
onKeydownCapture: a[1] || (a[1] = i(o((n) => e.onPreviousDecade(), ["stop", "prevent"]), ["enter"]))
}, null, 8, ["aria-label", "color", "disabled"]),
u(s, {
"aria-label": e.nextDecadeLabel,
circular: !0,
color: e.color,
disabled: e.isNextDecadeDisabled,
"button-style": "text",
class: "neon-date-picker__next-button",
icon: "chevron-right",
size: "m",
onClickCapture: a[2] || (a[2] = o((n) => e.onNextDecade(), ["stop", "prevent"])),
onKeydownCapture: a[3] || (a[3] = i(o((n) => e.onNextDecade(), ["stop", "prevent"]), ["enter"]))
}, null, 8, ["aria-label", "color", "disabled"])
])
]),
a[21] || (a[21] = r("hr", null, null, -1)),
r("div", S, [
(l(), t(b, null, c(10, (n) => u(s, {
key: n,
class: k([{
"neon-date-picker__calendar-option--selected": e.calendar.pageYear === e.calendar.pageDecadeStart + n - 1,
"neon-date-picker__calendar-option--today": e.calendar.today.year === e.calendar.pageDecadeStart + n - 1,
"neon-date-picker__calendar-option--disabled": e.isYearDisabled(e.calendar.pageDecadeStart + n - 1)
}, "neon-date-picker__calendar-option"]),
color: e.color,
disabled: e.isYearDisabled(e.calendar.pageDecadeStart + n - 1),
"full-width": !0,
label: `${e.calendar.pageDecadeStart + n - 1}`,
"button-style": "text",
size: "s",
onClickCapture: o((d) => e.selectYear(e.calendar.pageDecadeStart + n - 1), ["stop", "prevent"]),
onKeydownCapture: i(o((d) => e.selectYear(e.calendar.pageDecadeStart + n - 1), ["stop", "prevent"]), ["enter"])
}, null, 8, ["class", "color", "disabled", "label", "onClickCapture", "onKeydownCapture"])), 64))
])
], 64)) : e.monthSelectionOpen ? (l(), t(b, { key: 1 }, [
r("div", V, [
e.isChangeYearDisabled ? (l(), t("span", P, y(e.calendar.pageYear), 1)) : (l(), v(s, {
key: 1,
"aria-label": e.changeYearLabel,
label: `${e.calendar.pageYear}`,
"button-style": "text",
class: "neon-date-picker__calendar-header-title",
color: "high-contrast",
icon: "data-transfer-horizontal",
"icon-position": "right",
size: "m",
onClickCapture: a[4] || (a[4] = o((n) => e.changeYear(), ["stop", "prevent"])),
onKeydownCapture: a[5] || (a[5] = i(o((n) => e.changeYear(), ["stop", "prevent"]), ["enter"]))
}, null, 8, ["aria-label", "label"])),
r("div", O, [
u(s, {
"aria-label": e.previousYearLabel,
circular: !0,
color: e.color,
disabled: e.isPreviousYearDisabled,
"button-style": "text",
class: "neon-date-picker__previous-button",
icon: "chevron-left",
size: "m",
onClickCapture: a[6] || (a[6] = o((n) => e.onPreviousYear(), ["stop", "prevent"])),
onKeydownCapture: a[7] || (a[7] = i(o((n) => e.onPreviousYear(), ["stop", "prevent"]), ["enter"]))
}, null, 8, ["aria-label", "color", "disabled"]),
u(s, {
"aria-label": e.nextYearLabel,
circular: !0,
color: e.color,
disabled: e.isNextYearDisabled,
"button-style": "text",
class: "neon-date-picker__next-button",
icon: "chevron-right",
size: "m",
onClickCapture: a[8] || (a[8] = o((n) => e.onNextYear(), ["stop", "prevent"])),
onKeydownCapture: a[9] || (a[9] = i(o((n) => e.onNextYear(), ["stop", "prevent"]), ["enter"]))
}, null, 8, ["aria-label", "color", "disabled"])
])
]),
a[22] || (a[22] = r("hr", null, null, -1)),
r("div", U, [
(l(!0), t(b, null, c(e.calendar.months, (n, d) => (l(), v(s, {
key: d,
class: k([{
"neon-date-picker__calendar-option--selected": d + 1 === e.calendar.pageMonth,
"neon-date-picker__calendar-option--today": d + 1 === e.calendar.today.month && e.calendar.today.year === e.calendar.pageYear,
"neon-date-picker__calendar-option--disabled": e.isMonthDisabled(e.calendar.pageYear, d + 1)
}, "neon-date-picker__calendar-option"]),
color: e.color,
disabled: e.isMonthDisabled(e.calendar.pageYear, d + 1),
"full-width": !0,
label: n,
title: e.calendar.monthLongNames[d],
"button-style": "text",
size: "s",
onClickCapture: o((p) => e.selectMonth(d + 1), ["stop", "prevent"]),
onKeydownCapture: i(o((p) => e.selectMonth(d + 1), ["stop", "prevent"]), ["enter"])
}, null, 8, ["class", "color", "disabled", "label", "title", "onClickCapture", "onKeydownCapture"]))), 128))
])
], 64)) : (l(), t(b, { key: 2 }, [
r("div", B, [
e.isChangeDateDisabled ? (l(), t("span", E, y(`${e.calendar.pageMonthName} ${e.calendar.pageYear}`), 1)) : (l(), v(s, {
key: 1,
"aria-label": e.changeMonthLabel,
label: `${e.calendar.pageMonthName} ${e.calendar.pageYear}`,
"button-style": "text",
class: "neon-date-picker__calendar-header-title",
color: "high-contrast",
icon: "data-transfer-horizontal",
"icon-position": "right",
size: "m",
onClickCapture: a[10] || (a[10] = o((n) => e.changeMonth(), ["stop", "prevent"])),
onKeydownCapture: a[11] || (a[11] = i(o((n) => e.changeMonth(), ["stop", "prevent"]), ["enter"]))
}, null, 8, ["aria-label", "label"])),
r("div", F, [
u(s, {
"aria-label": e.previousMonthLabel,
circular: !0,
color: e.color,
disabled: e.isPreviousDisabled,
"button-style": "text",
class: "neon-date-picker__previous-button",
icon: "chevron-left",
size: "m",
onClickCapture: a[12] || (a[12] = o((n) => e.onPrevious(), ["stop", "prevent"])),
onKeydownCapture: a[13] || (a[13] = i(o((n) => e.onPrevious(), ["stop", "prevent"]), ["enter"]))
}, null, 8, ["aria-label", "color", "disabled"]),
u(s, {
"aria-label": e.nextMonthLabel,
circular: !0,
color: e.color,
disabled: e.isNextDisabled,
"button-style": "text",
class: "neon-date-picker__next-button",
icon: "chevron-right",
size: "m",
onClickCapture: a[14] || (a[14] = o((n) => e.onNext(), ["stop", "prevent"])),
onKeydownCapture: a[15] || (a[15] = i(o((n) => e.onNext(), ["stop", "prevent"]), ["enter"]))
}, null, 8, ["aria-label", "color", "disabled"])
])
]),
r("div", R, [
(l(!0), t(b, null, c(e.calendar.dowNames, (n, d) => (l(), t("abbr", {
key: n,
title: e.calendar.dowLongNames[d],
class: "neon-date-picker__calendar-dow"
}, y(n), 9, j))), 128))
]),
a[23] || (a[23] = r("hr", null, null, -1)),
(l(!0), t(b, null, c(e.calendar.dates, (n, d) => (l(), t("div", {
key: d,
class: "neon-date-picker__calendar-dates"
}, [
(l(!0), t(b, null, c(n, (p, g) => (l(), t(b, null, [
p ? (l(), v(s, {
key: g,
circular: !0,
class: k([{
"neon-date-picker__calendar-date--selected": e.modelValue === e.isoDate(p, e.calendar.pageMonth, e.calendar.pageYear),
"neon-date-picker__calendar-date--today": e.today === e.isoDate(p, e.calendar.pageMonth, e.calendar.pageYear),
"neon-date-picker__calendar-date--disabled": e.isDisabled(
e.isoDate(p, e.calendar.pageMonth, e.calendar.pageYear)
)
}, "neon-date-picker__calendar-date"]),
color: e.color,
disabled: e.isDisabled(e.isoDate(p, e.calendar.pageMonth, e.calendar.pageYear)),
label: `${p}`,
tabindex: e.isDisabled(e.isoDate(p, e.calendar.pageMonth, e.calendar.pageYear)) ? -1 : 0,
transparent: !0,
"button-style": "text",
size: "m",
onClickCapture: o(($) => e.emitDate(e.isoDate(p, e.calendar.pageMonth, e.calendar.pageYear)), ["stop", "prevent"]),
onKeydownCapture: i(o(($) => e.emitDate(e.isoDate(p, e.calendar.pageMonth, e.calendar.pageYear)), ["stop", "prevent"]), ["enter"])
}, null, 8, ["class", "color", "disabled", "label", "tabindex", "onClickCapture", "onKeydownCapture"])) : (l(), t("div", {
key: `${g}-empty`,
class: "neon-date-picker__calendar-date neon-date-picker__calendar-date--empty"
}))
], 64))), 256))
]))), 128))
], 64)),
a[24] || (a[24] = r("hr", null, null, -1)),
r("div", q, [
e.optional ? (l(), v(s, {
key: 0,
label: e.clearLabel,
"button-style": "text",
class: "neon-date-picker__calendar-clear-button",
color: "low-contrast",
size: "s",
onClickCapture: a[16] || (a[16] = o((n) => e.clear(), ["stop", "prevent"])),
onKeydownCapture: a[17] || (a[17] = i(o((n) => e.clear(), ["stop", "prevent"]), ["enter"]))
}, null, 8, ["label"])) : w("", !0),
u(s, {
color: e.color,
label: e.doneLabel,
"button-style": "text",
class: "neon-date-picker__calendar-done-button",
size: "s",
onClickCapture: a[18] || (a[18] = o((n) => e.done(), ["stop", "prevent"])),
onKeydownCapture: a[19] || (a[19] = i(o((n) => e.done(), ["stop", "prevent"]), ["enter"]))
}, null, 8, ["color", "label"])
])
], 512)
]),
_: 1
}, 8, ["id", "modelValue", "color", "disabled", "icon-aria-label", "label", "placement", "size", "onUpdate:modelValue"]),
u(D, z({
color: e.color,
disabled: e.disabled,
"hide-icon": !0,
max: e.max,
min: e.min,
"model-value": e.modelValue,
size: e.size,
tabindex: -1,
class: "neon-date-picker__native-input",
type: "date"
}, e.attrs, { "onUpdate:modelValue": e.emitDate }), null, 16, ["color", "disabled", "max", "min", "model-value", "size", "onUpdate:modelValue"])
], 2);
}
const X = /* @__PURE__ */ f(h, [["render", A]]);
export {
X as default
};
//# sourceMappingURL=NeonDatePicker.vue.es.js.map