@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
283 lines (282 loc) • 13.1 kB
JavaScript
import Y from "./NeonDatePicker.es.js";
import { resolveComponent as v, openBlock as l, createElementBlock as r, normalizeClass as u, createVNode as i, withCtx as g, createElementVNode as o, withKeys as y, withModifiers as D, Fragment as p, toDisplayString as k, renderList as c, createBlock as b, createCommentVNode as z, mergeProps as C } from "vue";
import f from "../../../_virtual/_plugin-vue_export-helper.es.js";
const M = ["aria-label", "tabindex"], w = {
ref: "calendarRef",
class: "neon-date-picker__calendar"
}, N = { class: "neon-date-picker__calendar-header" }, L = { class: "neon-date-picker__calendar-title-readonly" }, S = { class: "neon-date-picker__calendar-header-actions" }, V = /* @__PURE__ */ o("hr", null, null, -1), P = { class: "neon-date-picker__calendar-options" }, O = { class: "neon-date-picker__calendar-header" }, B = {
key: 0,
class: "neon-date-picker__calendar-title-readonly"
}, U = { class: "neon-date-picker__calendar-header-actions" }, E = /* @__PURE__ */ o("hr", null, null, -1), K = { class: "neon-date-picker__calendar-options" }, F = { class: "neon-date-picker__calendar-header" }, R = {
key: 0,
class: "neon-date-picker__calendar-title-readonly"
}, T = { class: "neon-date-picker__calendar-header-actions" }, j = { class: "neon-date-picker__calendar-dows" }, q = /* @__PURE__ */ o("hr", null, null, -1), A = /* @__PURE__ */ o("hr", null, null, -1), G = { class: "neon-button-group" };
function H(e, a, I, J, Q, W) {
const m = v("neon-input"), d = v("neon-button"), $ = v("neon-dropdown");
return l(), r("div", {
class: u([[
`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"])
}, [
i($, {
ref: "dropdown",
modelValue: e.calendarOpen,
"onUpdate:modelValue": [
a[13] || (a[13] = (n) => e.calendarOpen = n),
a[14] || (a[14] = (n) => e.resetToCalendar())
],
placement: e.placement
}, {
"dropdown-button": g(() => [
i(m, {
color: e.color,
disabled: e.disabled,
"icon-readonly": !0,
"model-value": e.formattedValue,
placeholder: e.placeholder,
size: e.size,
tabindex: -1,
class: "neon-date-picker__button",
icon: "calendar",
type: "text"
}, null, 8, ["color", "disabled", "model-value", "placeholder", "size"]),
o("div", {
"aria-label": e.openCalendarLabel,
tabindex: e.disabled ? -1 : 0,
class: "neon-date-picker__button-click-capture",
role: "button",
onClick: a[0] || (a[0] = (n) => !e.disabled && e.openCalendar()),
onKeydown: [
a[1] || (a[1] = y(D((n) => e.openCalendar(), ["stop", "prevent"]), ["enter"])),
a[2] || (a[2] = y(D((n) => e.openCalendar(), ["stop", "prevent"]), ["space"]))
]
}, null, 40, M)
]),
default: g(() => [
o("div", w, [
e.yearSelectionOpen ? (l(), r(p, { key: 0 }, [
o("div", N, [
o("span", L, k(`${e.calendar.pageDecadeStart}–${e.calendar.pageDecadeStart + 9}`), 1),
o("div", S, [
i(d, {
"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",
onClick: a[3] || (a[3] = (n) => e.onPreviousDecade())
}, null, 8, ["aria-label", "color", "disabled"]),
i(d, {
"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",
onClick: a[4] || (a[4] = (n) => e.onNextDecade())
}, null, 8, ["aria-label", "color", "disabled"])
])
]),
V,
o("div", P, [
(l(), r(p, null, c(10, (n) => i(d, {
key: n,
class: u([{
"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",
onClick: (t) => e.selectYear(e.calendar.pageDecadeStart + n - 1)
}, null, 8, ["class", "color", "disabled", "label", "onClick"])), 64))
])
], 64)) : e.monthSelectionOpen ? (l(), r(p, { key: 1 }, [
o("div", O, [
e.isChangeYearDisabled ? (l(), r("span", B, k(e.calendar.pageYear), 1)) : (l(), b(d, {
key: 1,
"aria-label": e.changeYearLabel,
label: `${e.calendar.pageYear}`,
"button-style": "text",
class: "neon-date-picker__calendar-header-title",
color: "high-contrast",
icon: "switch",
"icon-position": "right",
size: "m",
onClick: a[5] || (a[5] = (n) => e.changeYear())
}, null, 8, ["aria-label", "label"])),
o("div", U, [
i(d, {
"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",
onClick: a[6] || (a[6] = (n) => e.onPreviousYear())
}, null, 8, ["aria-label", "color", "disabled"]),
i(d, {
"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",
onClick: a[7] || (a[7] = (n) => e.onNextYear())
}, null, 8, ["aria-label", "color", "disabled"])
])
]),
E,
o("div", K, [
(l(!0), r(p, null, c(e.calendar.months, (n, t) => (l(), b(d, {
key: t,
class: u([{
"neon-date-picker__calendar-option--selected": t + 1 === e.calendar.pageMonth,
"neon-date-picker__calendar-option--today": t + 1 === e.calendar.today.month && e.calendar.today.year === e.calendar.pageYear,
"neon-date-picker__calendar-option--disabled": e.isMonthDisabled(e.calendar.pageYear, t + 1)
}, "neon-date-picker__calendar-option"]),
color: e.color,
disabled: e.isMonthDisabled(e.calendar.pageYear, t + 1),
"full-width": !0,
label: n,
"button-style": "text",
size: "s",
onClick: (s) => e.selectMonth(t + 1)
}, null, 8, ["class", "color", "disabled", "label", "onClick"]))), 128))
])
], 64)) : (l(), r(p, { key: 2 }, [
o("div", F, [
e.isChangeDateDisabled ? (l(), r("span", R, k(`${e.calendar.pageMonthName} ${e.calendar.pageYear}`), 1)) : (l(), b(d, {
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: "switch",
"icon-position": "right",
size: "m",
onClick: a[8] || (a[8] = (n) => e.changeMonth())
}, null, 8, ["aria-label", "label"])),
o("div", T, [
i(d, {
"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",
onClick: a[9] || (a[9] = (n) => e.onPrevious())
}, null, 8, ["aria-label", "color", "disabled"]),
i(d, {
"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",
onClick: a[10] || (a[10] = (n) => e.onNext())
}, null, 8, ["aria-label", "color", "disabled"])
])
]),
o("div", j, [
(l(!0), r(p, null, c(e.calendar.dowNames, (n) => (l(), r("div", {
key: n,
class: "neon-date-picker__calendar-dow"
}, k(n), 1))), 128))
]),
q,
(l(!0), r(p, null, c(e.calendar.dates, (n, t) => (l(), r("div", {
key: t,
class: "neon-date-picker__calendar-dates"
}, [
(l(!0), r(p, null, c(n, (s, h) => (l(), r(p, null, [
s ? (l(), b(d, {
key: h,
circular: !0,
class: u([{
"neon-date-picker__calendar-date--selected": e.modelValue === e.isoDate(s, e.calendar.pageMonth, e.calendar.pageYear),
"neon-date-picker__calendar-date--today": e.today === e.isoDate(s, e.calendar.pageMonth, e.calendar.pageYear),
"neon-date-picker__calendar-date--disabled": e.isDisabled(
e.isoDate(s, e.calendar.pageMonth, e.calendar.pageYear)
)
}, "neon-date-picker__calendar-date"]),
color: e.color,
disabled: e.isDisabled(e.isoDate(s, e.calendar.pageMonth, e.calendar.pageYear)),
label: `${s}`,
tabindex: e.isDisabled(e.isoDate(s, e.calendar.pageMonth, e.calendar.pageYear)) ? -1 : 0,
transparent: !0,
"button-style": "text",
size: "m",
onClick: (X) => e.emitDate(e.isoDate(s, e.calendar.pageMonth, e.calendar.pageYear))
}, null, 8, ["class", "color", "disabled", "label", "tabindex", "onClick"])) : (l(), r("div", {
key: `${h}-empty`,
class: "neon-date-picker__calendar-date neon-date-picker__calendar-date--empty"
}))
], 64))), 256))
]))), 128))
], 64)),
A,
o("div", G, [
e.optional ? (l(), b(d, {
key: 0,
label: e.clearLabel,
"button-style": "text",
class: "neon-date-picker__calendar-clear-button",
color: "high-contrast",
size: "s",
onClick: a[11] || (a[11] = (n) => e.clear())
}, null, 8, ["label"])) : z("", !0),
i(d, {
color: e.color,
label: e.doneLabel,
"button-style": "text",
class: "neon-date-picker__calendar-done-button",
size: "s",
onClick: a[12] || (a[12] = (n) => e.done())
}, null, 8, ["color", "label"])
])
], 512)
]),
_: 1
}, 8, ["modelValue", "placement"]),
i(m, C({
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, ["disabled", "max", "min", "model-value", "size", "onUpdate:modelValue"])
], 2);
}
const ee = /* @__PURE__ */ f(Y, [["render", H]]);
export {
ee as default
};
//# sourceMappingURL=NeonDatePicker.vue.es.js.map