comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
284 lines (283 loc) • 11 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const index$1 = require("../../button-group/index.js");
const index$2 = require("../../button/index.js");
const schedules_vue_vue_type_script_setup_true_lang = require("./schedules.vue.js");
const floatCard_vue_vue_type_script_setup_true_lang = require("./float-card.vue.js");
require("../style/calendar.css");
const main_props = require("./main.props.js");
const config = require("../../../utils/config.js");
const tools = require("../../../utils/tools.js");
require("@vueuse/core");
const index = require("../util/index.js");
const _hoisted_1 = {
key: 0,
class: "cu-calendar__header"
};
const _hoisted_2 = {
class: "cu-calendar__table",
cellspacing: "0",
cellpadding: "0"
};
const _hoisted_3 = {
key: 0,
class: "cu-calendar__thead"
};
const _hoisted_4 = { class: "cu-calendar__tr" };
const _hoisted_5 = { class: "cu-calendar__th" };
const _hoisted_6 = { class: "cu-calendar__tbody" };
const _hoisted_7 = { class: "cu-calendar__tr" };
const _hoisted_8 = ["onClick"];
const _hoisted_9 = { class: "cu-calendar__cell" };
const _hoisted_10 = {
key: 0,
class: "cu-calendar__date"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "CuCalendar"
},
__name: "main",
props: main_props.calendarProps,
emits: main_props.calendarEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const calendarRef = vue.ref();
const { globalSize } = config.useGlobal();
const weeks = vue.ref([0, 1, 2, 3, 4, 5, 6]);
const ty = vue.ref();
const tm = vue.ref();
const dn = vue.ref(new Date(props.modelValue || Date.now()).setHours(0, 0, 0, 0));
const monthForLang = {
0: "一",
1: "二",
2: "三",
3: "四",
4: "五",
5: "六",
6: "七",
7: "八",
8: "九",
9: "十",
10: "十一",
11: "十二"
};
const weekForLang = { 0: "日", 1: "一", 2: "二", 3: "三", 4: "四", 5: "五", 6: "六" };
const currentSchedule = vue.ref();
const dFc = tools.debounce((val) => currentSchedule.value = val, 300);
function setValue() {
let time = new Date(dn.value);
ty.value = time.getFullYear();
tm.value = time.getMonth();
}
setValue();
const dates = vue.computed(() => {
let tml = new Date(ty.value, tm.value + 1, 0).getDate();
let dl = Array.from({ length: tml }, (val, index2) => {
return {
isCurMonth: true,
value: index2 + 1,
date: new Date(ty.value, tm.value, index2 + 1)
};
});
let fd = new Date(ty.value, tm.value, 1).getDay();
let ld = new Date(ty.value, tm.value, 0).getDate();
let len, i;
for (i = ld; i > ld - fd; --i) {
dl.unshift({
isPrevMonth: true,
value: i,
date: new Date(ty.value, tm.value - 1, i)
});
}
for (i = 0, len = dl.length; i + len < 42; ++i) {
dl.push({
isNextMonth: true,
value: i + 1,
date: new Date(ty.value, tm.value + 1, i + 1)
});
}
let result = [];
for (var x = 0; x < Math.ceil(dl.length / 7); x++) {
var start = x * 7;
var end = start + 7;
result.push(dl.slice(start, end));
}
if (result[0].every((v) => v.isPrevMonth)) {
result.shift();
}
if (result[result.length - 1].every((v) => v.isNextMonth)) {
result.pop();
}
console.log(result);
return result;
});
const { filterSchedules } = index.useSchedules(props, { year: ty, month: tm, dates });
function prevMonth() {
tm.value === 0 ? (--ty.value, tm.value = 11) : --tm.value;
dn.value = new Date(ty.value, tm.value, 1).getTime();
}
function nextMonth() {
tm.value === 11 ? (++ty.value, tm.value = 0) : ++tm.value;
dn.value = new Date(ty.value, tm.value, 1).getTime();
}
function prevYear() {
ty.value--;
dn.value = new Date(ty.value, tm.value, 1).getTime();
}
function nextYear() {
ty.value++;
dn.value = new Date(ty.value, tm.value, 1).getTime();
}
function today() {
dn.value = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0);
setValue();
}
function isSelect(item) {
let mon = tm.value;
item.isPrevMonth && mon--;
item.isNextMonth && mon++;
let time = new Date(ty.value, mon, item.value).setHours(0, 0, 0, 0);
let f = new Date(dn.value).setHours(0, 0, 0, 0);
return time === f;
}
function selectDay(item) {
item.isPrevMonth ? tm.value === 0 ? (--ty.value, tm.value = 11) : --tm.value : item.isNextMonth ? tm.value === 11 ? (++ty.value, tm.value = 0) : ++tm.value : (ty.value, tm.value);
dn.value = new Date(ty.value, tm.value, item.value).getTime();
}
const dateTypeFn = {
"prev-year": prevYear,
"prev-month": prevMonth,
today,
"next-month": nextMonth,
"next-year": nextYear
};
function selectDate(value) {
var _a;
if (value in dateTypeFn) {
(_a = dateTypeFn[value]) == null ? void 0 : _a.call(dateTypeFn);
} else if (value instanceof Date) {
dn.value = new Date(value).setHours(0, 0, 0, 0);
setValue();
} else {
vue.warn("SelectDate can only pass in parameters in Date or specified string format");
return;
}
}
vue.watch(
() => props.modelValue,
(val) => {
dn.value = new Date(val).setHours(0, 0, 0, 0);
setValue();
}
);
vue.watch(dn, (val) => {
emit("update:modelValue", new Date(val));
emit("change", new Date(val));
});
__expose({
selectDate
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["cu-calendar", _ctx.size ?? vue.unref(globalSize)]),
ref_key: "calendarRef",
ref: calendarRef
}, [
_ctx.showHeader ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.renderSlot(_ctx.$slots, "header", {
data: { year: ty.value, month: tm.value + 1 }
}, () => [
vue.createElementVNode("span", null, vue.toDisplayString(ty.value + "年 " + monthForLang[tm.value] + "月"), 1),
vue.createElementVNode("span", null, [
vue.createVNode(vue.unref(index$1.CuButtonGroup), {
size: _ctx.size ?? vue.unref(globalSize)
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(index$2.CuButton), { onClick: prevMonth }, {
default: vue.withCtx(() => _cache[1] || (_cache[1] = [
vue.createTextVNode("上月")
])),
_: 1
}),
vue.createVNode(vue.unref(index$2.CuButton), {
onClick: _cache[0] || (_cache[0] = ($event) => today())
}, {
default: vue.withCtx(() => _cache[2] || (_cache[2] = [
vue.createTextVNode("今天")
])),
_: 1
}),
vue.createVNode(vue.unref(index$2.CuButton), { onClick: nextMonth }, {
default: vue.withCtx(() => _cache[3] || (_cache[3] = [
vue.createTextVNode("下月")
])),
_: 1
})
]),
_: 1
}, 8, ["size"])
])
])
])) : vue.createCommentVNode("", true),
vue.createElementVNode("table", _hoisted_2, [
_ctx.showWeek ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_3, [
vue.createElementVNode("tr", _hoisted_4, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(weeks.value, (week, idx) => {
return vue.openBlock(), vue.createElementBlock("th", _hoisted_5, vue.toDisplayString(weekForLang[week]), 1);
}), 256))
])
])) : vue.createCommentVNode("", true),
vue.createElementVNode("tbody", _hoisted_6, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dates.value, (week) => {
return vue.openBlock(), vue.createElementBlock("tr", _hoisted_7, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week, (day) => {
return vue.openBlock(), vue.createElementBlock("td", {
class: vue.normalizeClass(["cu-calendar__td", { "is-prev": day.isPrevMonth, "is-next": day.isNextMonth, "is-today": isSelect(day) }]),
onClick: ($event) => selectDay(day)
}, [
vue.createElementVNode("div", _hoisted_9, [
_ctx.showDay ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, vue.toDisplayString(vue.unref(tools.formatDate)(day.date, _ctx.format ?? "d")), 1)) : vue.createCommentVNode("", true),
_ctx.openSchedule ? (vue.openBlock(), vue.createBlock(schedules_vue_vue_type_script_setup_true_lang.default, {
key: 1,
data: vue.unref(filterSchedules),
day,
onMouseIn: vue.unref(dFc),
onMouseOut: vue.unref(dFc)
}, null, 8, ["data", "day", "onMouseIn", "onMouseOut"])) : vue.createCommentVNode("", true),
vue.renderSlot(_ctx.$slots, "day", {
data: {
isSelected: isSelect(day),
day: day.value,
type: day.isPrevMonth ? "prev-month" : day.isNextMonth ? "next-month" : "current-month",
date: vue.unref(tools.formatDate)(day.date, "yyyy-MM-dd")
}
})
])
], 10, _hoisted_8);
}), 256))
]);
}), 256))
])
]),
_ctx.openSchedule ? (vue.openBlock(), vue.createBlock(floatCard_vue_vue_type_script_setup_true_lang.default, {
key: 1,
data: currentSchedule.value,
"card-width": _ctx.cardWidth,
trigger: calendarRef.value
}, vue.createSlots({ _: 2 }, [
_ctx.$slots["schedule-card"] ? {
name: "default",
fn: vue.withCtx(({ data }) => [
vue.renderSlot(_ctx.$slots, "schedule-card", { data })
]),
key: "0"
} : void 0
]), 1032, ["data", "card-width", "trigger"])) : vue.createCommentVNode("", true)
], 2);
};
}
});
exports.default = _sfc_main;