@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
227 lines (226 loc) • 8.43 kB
JavaScript
import { defineComponent as ae, useAttrs as te, ref as s, computed as t } from "vue";
import { NeonSize as le } from "../../../common/enums/NeonSize.es.js";
import { NeonFunctionalColor as ne } from "../../../common/enums/NeonFunctionalColor.es.js";
import oe from "../../presentation/dropdown/NeonDropdown.vue.es.js";
import ue from "../button/NeonButton.vue.es.js";
import re from "../input/NeonInput.vue.es.js";
import { NeonDateUtils as r } from "../../../common/utils/NeonDateUtils.es.js";
import { NeonDropdownPlacement as ie } from "../../../common/enums/NeonDropdownPlacement.es.js";
const he = ae({
name: "NeonDatePicker",
components: {
NeonButton: ue,
NeonDropdown: oe,
NeonInput: re
},
props: {
/**
* The selected date. A date string in the
* <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format.
*/
modelValue: { type: String, default: null },
/**
* The locale used for display purposes. This defaults to the browser's locale if none is provided.
*/
locale: { type: String, default: null },
/**
* Disable date picker
*/
disabled: { type: Boolean, default: !1 },
/**
* The size of the date picker, one of NeonSize.Small | NeonSize.Medium | NeonSize.Large.
*/
size: { type: String, default: le.Medium },
/**
* Color of the date picker
*/
color: { type: String, default: ne.Primary },
/**
* Minimum allowed date value in the <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format.
*/
min: { type: String, default: null },
/**
* Maximum allowed date value in the <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format.
*/
max: { type: String, default: null },
/**
* The placement of the dropdown calendar popup.
*/
placement: { type: String, default: ie.BottomLeft },
/**
* Disabled dates, a list of <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format
* dates for which to disable selection.
*/
disabledDates: { type: Array, default: () => [] },
/**
* This is the placeholder for the text input when no value is provided.
*/
placeholder: { type: String, required: !1 },
/**
* This is the label of the input field which opens the calendar. This is technically a button.
*/
openCalendarLabel: { type: String, default: "Open calendar" },
/**
* This is the label of the 'Done' button in the calendar popup.
*/
doneLabel: { type: String, default: "Done" },
/**
* This is the label of the 'Clear' button in the calendar popup.
*/
clearLabel: { type: String, default: "Clear" },
/**
* This is the ARIA label of the 'Change month' button in the calendar popup.
*/
changeMonthLabel: { type: String, default: "Change month" },
/**
* This is the ARIA label of the 'Previous month' button in the calendar popup.
*/
previousMonthLabel: { type: String, default: "Previous month" },
/**
* This is the ARIA label of the 'Next month' button in the calendar popup.
*/
nextMonthLabel: { type: String, default: "Next month" },
/**
* This is the ARIA label of the 'Change year' button in the calendar popup.
*/
changeYearLabel: { type: String, default: "Change year" },
/**
* This is the ARIA label of the 'Previous year' button in the calendar popup.
*/
previousYearLabel: { type: String, default: "Previous year" },
/**
* This is the ARIA label of the 'Next year' button in the calendar popup.
*/
nextYearLabel: { type: String, default: "Next year" },
/**
* This is the ARIA label of the 'Previous decade' button in the calendar popup.
*/
previousDecadeLabel: { type: String, default: "Previous decade" },
/**
* This is the ARIA label of the 'Next decade' button in the calendar popup.
*/
nextDecadeLabel: { type: String, default: "Next decade" }
},
setup(e, { emit: b }) {
const h = te(), V = !h.required, I = s(null), g = s(null), c = s(!1), m = s(!1), v = s(!1), O = t(() => {
if (e.modelValue) {
const a = r.stringToNeonDate(e.modelValue, e.locale, !0);
if (a) {
const { dayFormatted: l, monthShortName: u, yearFormatted: ee } = a;
return `${l} ${u} ${ee}`;
}
}
return "";
}), $ = (a, l, u) => r.dmyToIso(a, l, u), f = /* @__PURE__ */ new Date(), D = e.locale || navigator.language, o = s(f.getMonth()), n = s(f.getFullYear()), d = s(Math.floor(n.value / 10) * 10), x = () => {
o.value = e.modelValue ? +e.modelValue.substring(5, 7) : +f.toLocaleString(D, { month: "numeric" }), n.value = e.modelValue ? +e.modelValue.substring(0, 4) : +f.toLocaleString(D, { year: "numeric" }), d.value = Math.floor(n.value / 10) * 10;
};
x();
const i = t(
() => r.toCalendarConfiguration(
e.modelValue,
o.value,
n.value,
d.value,
e.locale
)
), w = t(() => {
const { day: a, month: l, year: u } = i.value.today;
return r.dmyToIso(a, l, u);
}), F = () => {
if (!e.disabled && (x(), c.value = !0, g.value)) {
const a = g.value.querySelector(".neon-date-picker__calendar-date--selected");
a && setTimeout(() => a.focus());
}
}, _ = (a) => {
b("update:modelValue", a);
}, q = () => {
o.value === 1 ? (o.value = 12, n.value = n.value - 1) : o.value = o.value - 1;
}, B = () => {
o.value === 12 ? (o.value = 1, n.value = n.value + 1) : o.value = o.value + 1;
}, k = () => {
m.value = !0;
}, S = t(
() => e.min && e.min >= r.dmyToIso(1, i.value.pageMonth, i.value.pageYear)
), Y = t(() => {
const { pageYear: a, pageMonth: l, lastDayOfMonth: u } = i.value;
return e.max && e.max <= r.dmyToIso(u, l, a);
}), z = t(() => S.value && Y.value), A = () => {
n.value = n.value - 1;
}, R = () => {
n.value = n.value + 1;
}, U = () => {
v.value = !0;
}, M = t(
() => e.min && e.min >= r.dmyToIso(1, 1, i.value.pageYear)
), N = t(
() => e.max && e.max <= r.dmyToIso(31, 12, i.value.pageYear)
), j = t(() => M.value && N.value), E = () => {
d.value = d.value - 10;
}, G = () => {
d.value = d.value + 10;
}, H = t(
() => e.min && e.min >= r.dmyToIso(1, 1, Math.floor(i.value.pageYear / 10) * 10)
), J = t(
() => e.max && e.max <= r.dmyToIso(31, 12, Math.floor(i.value.pageYear / 10) * 10 + 9)
), y = () => {
m.value = !1, v.value = !1;
}, K = () => {
c.value = !1, y();
}, Q = () => {
b("update:modelValue", null), c.value = !1, y();
}, W = (a) => {
o.value = a, m.value = !1;
}, X = (a) => {
n.value = a, v.value = !1;
}, Z = (a) => {
var l;
return ((l = e.disabledDates) == null ? void 0 : l.indexOf(a)) >= 0 || e.min && e.min > a || e.max && e.max < a;
}, p = (a, l) => {
const u = `${a}-${l < 10 ? "0" + l : l}`;
return C.value && C.value > u || T.value && T.value < u;
}, L = t(() => e.min ? +e.min.substring(0, 4) : null), C = t(() => e.min ? e.min.substring(0, 7) : null), P = t(() => e.max ? +e.max.substring(0, 4) : null), T = t(() => e.max ? e.max.substring(0, 7) : null);
return {
attrs: h,
calendar: i,
calendarOpen: c,
dropdown: I,
formattedValue: O,
isChangeDateDisabled: z,
isChangeYearDisabled: j,
isNextDisabled: Y,
isNextDecadeDisabled: J,
isNextYearDisabled: N,
isPreviousDisabled: S,
isPreviousDecadeDisabled: H,
isPreviousYearDisabled: M,
monthSelectionOpen: m,
optional: V,
today: w,
calendarRef: g,
yearSelectionOpen: v,
changeMonth: k,
changeYear: U,
clear: Q,
done: K,
emitDate: _,
isDisabled: Z,
isoDate: $,
isMonthDisabled: p,
isYearDisabled: (a) => L.value && L.value > a || P.value && P.value < a,
openCalendar: F,
onNext: B,
onNextDecade: G,
onNextYear: R,
onPrevious: q,
onPreviousDecade: E,
onPreviousYear: A,
resetToCalendar: y,
selectMonth: W,
selectYear: X
};
}
});
export {
he as default
};
//# sourceMappingURL=NeonDatePicker.es.js.map