comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
284 lines (283 loc) • 10.6 kB
JavaScript
import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createElementVNode, toDisplayString, createVNode, withCtx, createTextVNode, createCommentVNode, Fragment, renderList, createBlock, createSlots, warn } from "vue";
import { CuButtonGroup } from "../../button-group/index.mjs";
import { CuButton } from "../../button/index.mjs";
import _sfc_main$1 from "./schedules.vue.mjs";
import _sfc_main$2 from "./float-card.vue.mjs";
import "../style/calendar.css";
import { calendarProps, calendarEmits } from "./main.props.mjs";
import { useGlobal } from "../../../utils/config.mjs";
import { debounce, formatDate } from "../../../utils/tools.mjs";
import "@vueuse/core";
import { useSchedules } from "../util/index.mjs";
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__ */ defineComponent({
...{
name: "CuCalendar"
},
__name: "main",
props: calendarProps,
emits: calendarEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const calendarRef = ref();
const { globalSize } = useGlobal();
const weeks = ref([0, 1, 2, 3, 4, 5, 6]);
const ty = ref();
const tm = ref();
const dn = 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 = ref();
const dFc = 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 = computed(() => {
let tml = new Date(ty.value, tm.value + 1, 0).getDate();
let dl = Array.from({ length: tml }, (val, index) => {
return {
isCurMonth: true,
value: index + 1,
date: new Date(ty.value, tm.value, index + 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 } = 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 {
warn("SelectDate can only pass in parameters in Date or specified string format");
return;
}
}
watch(
() => props.modelValue,
(val) => {
dn.value = new Date(val).setHours(0, 0, 0, 0);
setValue();
}
);
watch(dn, (val) => {
emit("update:modelValue", new Date(val));
emit("change", new Date(val));
});
__expose({
selectDate
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["cu-calendar", _ctx.size ?? unref(globalSize)]),
ref_key: "calendarRef",
ref: calendarRef
}, [
_ctx.showHeader ? (openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "header", {
data: { year: ty.value, month: tm.value + 1 }
}, () => [
createElementVNode("span", null, toDisplayString(ty.value + "年 " + monthForLang[tm.value] + "月"), 1),
createElementVNode("span", null, [
createVNode(unref(CuButtonGroup), {
size: _ctx.size ?? unref(globalSize)
}, {
default: withCtx(() => [
createVNode(unref(CuButton), { onClick: prevMonth }, {
default: withCtx(() => _cache[1] || (_cache[1] = [
createTextVNode("上月")
])),
_: 1
}),
createVNode(unref(CuButton), {
onClick: _cache[0] || (_cache[0] = ($event) => today())
}, {
default: withCtx(() => _cache[2] || (_cache[2] = [
createTextVNode("今天")
])),
_: 1
}),
createVNode(unref(CuButton), { onClick: nextMonth }, {
default: withCtx(() => _cache[3] || (_cache[3] = [
createTextVNode("下月")
])),
_: 1
})
]),
_: 1
}, 8, ["size"])
])
])
])) : createCommentVNode("", true),
createElementVNode("table", _hoisted_2, [
_ctx.showWeek ? (openBlock(), createElementBlock("thead", _hoisted_3, [
createElementVNode("tr", _hoisted_4, [
(openBlock(true), createElementBlock(Fragment, null, renderList(weeks.value, (week, idx) => {
return openBlock(), createElementBlock("th", _hoisted_5, toDisplayString(weekForLang[week]), 1);
}), 256))
])
])) : createCommentVNode("", true),
createElementVNode("tbody", _hoisted_6, [
(openBlock(true), createElementBlock(Fragment, null, renderList(dates.value, (week) => {
return openBlock(), createElementBlock("tr", _hoisted_7, [
(openBlock(true), createElementBlock(Fragment, null, renderList(week, (day) => {
return openBlock(), createElementBlock("td", {
class: normalizeClass(["cu-calendar__td", { "is-prev": day.isPrevMonth, "is-next": day.isNextMonth, "is-today": isSelect(day) }]),
onClick: ($event) => selectDay(day)
}, [
createElementVNode("div", _hoisted_9, [
_ctx.showDay ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(unref(formatDate)(day.date, _ctx.format ?? "d")), 1)) : createCommentVNode("", true),
_ctx.openSchedule ? (openBlock(), createBlock(_sfc_main$1, {
key: 1,
data: unref(filterSchedules),
day,
onMouseIn: unref(dFc),
onMouseOut: unref(dFc)
}, null, 8, ["data", "day", "onMouseIn", "onMouseOut"])) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "day", {
data: {
isSelected: isSelect(day),
day: day.value,
type: day.isPrevMonth ? "prev-month" : day.isNextMonth ? "next-month" : "current-month",
date: unref(formatDate)(day.date, "yyyy-MM-dd")
}
})
])
], 10, _hoisted_8);
}), 256))
]);
}), 256))
])
]),
_ctx.openSchedule ? (openBlock(), createBlock(_sfc_main$2, {
key: 1,
data: currentSchedule.value,
"card-width": _ctx.cardWidth,
trigger: calendarRef.value
}, createSlots({ _: 2 }, [
_ctx.$slots["schedule-card"] ? {
name: "default",
fn: withCtx(({ data }) => [
renderSlot(_ctx.$slots, "schedule-card", { data })
]),
key: "0"
} : void 0
]), 1032, ["data", "card-width", "trigger"])) : createCommentVNode("", true)
], 2);
};
}
});
export {
_sfc_main as default
};