vue-month-toggle-component
Version:
[]() []() []()
220 lines (219 loc) • 8.25 kB
JavaScript
import { openBlock as v, createElementBlock as d, createElementVNode as a, normalizeClass as n, toDisplayString as c, createCommentVNode as m, pushScopeId as u, popScopeId as g } from "vue";
const h = (t, e) => {
const l = t.__vccOpts || t;
for (const [o, r] of e)
l[o] = r;
return l;
}, f = {
components: {},
data() {
return {
monthsArray: [],
currentDate: /* @__PURE__ */ new Date(),
year: (/* @__PURE__ */ new Date()).getFullYear(),
clicked: !0,
activityArray: [
{ name: "jan", active: !1 },
{ name: "feb", active: !1 },
{ name: "mar", active: !1 },
{ name: "apr", active: !1 },
{ name: "may", active: !1 },
{ name: "jun", active: !1 },
{ name: "jul", active: !1 },
{ name: "aug", active: !1 },
{ name: "sep", active: !1 },
{ name: "oct", active: !1 },
{ name: "nov", active: !1 },
{ name: "dec", active: !1 }
],
locales: [
//Date formats not needed until daily selection becomes available
{
name: "en",
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
dateFormat: "mm-dd-yyyy"
},
{
name: "de",
months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
dateFormat: "dd-mm-yyyy"
},
{
name: "fr",
months: ["Janivier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
dateFormat: "dd-mm-yyyy"
},
{
name: "sp",
months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
dateFormat: "dd-mm-yyyy"
},
{
name: "jp",
months: ["ichi-gatsu", "ni-gatsu", "san-gatsu", "shi-gatsu", "go-gatsu", "roku-gatsu", "shichi-gatsu", "hachi-gatsu", "ku-gatsu", "juu-gatsu", "juuichi-gatsu", "juuni-gatsu"],
dateFormat: "dd-mm-yyyy"
}
],
textModes: [
"fullText",
"abbreviated"
],
selectionModes: [
"onConfirm",
"onToggle"
]
};
},
props: {
modelValue: {
type: Object
},
//TODO: implement dis
locale: {
type: String,
default: "en"
},
textMode: {
type: String,
default: "fullText"
},
selectionMode: {
type: String,
default: "onConfirm"
},
themes: []
},
emits: ["update:modelValue"],
computed: {
value: {
get() {
return this.modelValue;
},
set(t) {
this.$emit("update:modelValue", t);
}
}
},
methods: {
getLocaleMonth(t) {
return this.textMode == "abbreviated" ? this.locales.find((e) => e.name === this.locale).months[t].substring(0, 3) : this.locales.find((e) => e.name === this.locale).months[t];
},
toggleMonth(t) {
this.activityArray[t].active == !1 ? (this.activityArray[t].active = !0, this.monthsArray.push({ year: this.year, month: t })) : (this.activityArray[t].active = !1, this.monthsArray = this.monthsArray.filter((e) => !(e.year == this.year && e.month == t))), console.log(this.selectionMode), this.selectionMode == "onToggle" && (console.log("setting timeslots"), this.setTimeslot());
},
prevYear() {
this.year--, this.resetActivity();
},
nextYear() {
this.year++, this.resetActivity();
},
resetActivity() {
for (var t = 0; t < this.activityArray.length; t++) {
this.monthsArray.find(
(l) => l.year == this.year && l.month == t
) ? this.activityArray[t].active = !0 : this.activityArray[t].active = !1;
var e = document.getElementById("c" + t.toString());
e.classList.remove("card"), e.offsetWidth, e.classList.add("card");
}
},
setTimeslot() {
this.monthsArray.sort((t, e) => t.year === e.year ? t.month < e.month ? -1 : 1 : t.year < e.year ? -1 : 1), this.value = JSON.parse(JSON.stringify(this.monthsArray));
}
},
created() {
}
}, y = (t) => (u("data-v-d9771e43"), t = t(), g(), t), M = { class: "filter-wrapper" }, A = /* @__PURE__ */ y(() => /* @__PURE__ */ a("div", { class: "nav-header" }, null, -1)), b = { class: "year-picker" }, k = { class: "btn-div" }, C = /* @__PURE__ */ y(() => /* @__PURE__ */ a("hr", { class: "rounded" }, null, -1)), p = {
class: "animated-grid",
id: "grid"
};
function L(t, e, l, o, r, i) {
return v(), d("div", M, [
a("div", {
class: n(["nav-menu-item", { expand: r.clicked, collapse: !r.clicked }])
}, [
A,
a("div", b, [
a("div", k, [
a("button", {
onClick: e[0] || (e[0] = (s) => i.prevYear())
}, "<"),
a("div", null, c(this.year), 1),
a("button", {
onClick: e[1] || (e[1] = (s) => i.nextYear())
}, ">")
]),
C,
a("div", p, [
a("div", {
id: "c0",
class: n(["card", [r.activityArray[0].active ? "active" : "inactive"]]),
onClick: e[2] || (e[2] = (s) => i.toggleMonth(0))
}, c(i.getLocaleMonth(0)), 3),
a("div", {
id: "c1",
class: n(["card", [r.activityArray[1].active ? "active" : "inactive"]]),
onClick: e[3] || (e[3] = (s) => i.toggleMonth(1))
}, c(i.getLocaleMonth(1)), 3),
a("div", {
id: "c2",
class: n(["card", [r.activityArray[2].active ? "active" : "inactive"]]),
onClick: e[4] || (e[4] = (s) => i.toggleMonth(2))
}, c(i.getLocaleMonth(2)), 3),
a("div", {
id: "c3",
class: n(["card", [r.activityArray[3].active ? "active" : "inactive"]]),
onClick: e[5] || (e[5] = (s) => i.toggleMonth(3))
}, c(i.getLocaleMonth(3)), 3),
a("div", {
id: "c4",
class: n(["card", [r.activityArray[4].active ? "active" : "inactive"]]),
onClick: e[6] || (e[6] = (s) => i.toggleMonth(4))
}, c(i.getLocaleMonth(4)), 3),
a("div", {
id: "c5",
class: n(["card", [r.activityArray[5].active ? "active" : "inactive"]]),
onClick: e[7] || (e[7] = (s) => i.toggleMonth(5))
}, c(i.getLocaleMonth(5)), 3),
a("div", {
id: "c6",
class: n(["card", [r.activityArray[6].active ? "active" : "inactive"]]),
onClick: e[8] || (e[8] = (s) => i.toggleMonth(6))
}, c(i.getLocaleMonth(6)), 3),
a("div", {
id: "c7",
class: n(["card", [r.activityArray[7].active ? "active" : "inactive"]]),
onClick: e[9] || (e[9] = (s) => i.toggleMonth(7))
}, c(i.getLocaleMonth(7)), 3),
a("div", {
id: "c8",
class: n(["card", [r.activityArray[8].active ? "active" : "inactive"]]),
onClick: e[10] || (e[10] = (s) => i.toggleMonth(8))
}, c(i.getLocaleMonth(8)), 3),
a("div", {
id: "c9",
class: n(["card", [r.activityArray[9].active ? "active" : "inactive"]]),
onClick: e[11] || (e[11] = (s) => i.toggleMonth(9))
}, c(i.getLocaleMonth(9)), 3),
a("div", {
id: "c10",
class: n(["card", [r.activityArray[10].active ? "active" : "inactive"]]),
onClick: e[12] || (e[12] = (s) => i.toggleMonth(10))
}, c(i.getLocaleMonth(10)), 3),
a("div", {
id: "c11",
class: n(["card", [r.activityArray[11].active ? "active" : "inactive"]]),
onClick: e[13] || (e[13] = (s) => i.toggleMonth(11))
}, c(i.getLocaleMonth(11)), 3)
]),
l.selectionMode == "onConfirm" ? (v(), d("button", {
key: 0,
onClick: e[14] || (e[14] = (s) => i.setTimeslot())
}, "confirm")) : m("", !0)
])
], 2)
]);
}
const J = /* @__PURE__ */ h(f, [["render", L], ["__scopeId", "data-v-d9771e43"]]);
export {
J as MonthTogglePicker
};