@tencentcloud/roomkit-electron-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
204 lines (203 loc) • 7.11 kB
JavaScript
import { defineComponent, ref, onMounted, onUnmounted, watch, watchEffect, computed, createElementBlock, openBlock, createVNode, createCommentVNode, createElementVNode, toDisplayString, Fragment, renderList, normalizeClass, createTextVNode } from "vue";
import TuiInput from "../Input/index.vue.mjs";
const _hoisted_1 = {
key: 0,
class: "picker"
};
const _hoisted_2 = { class: "picker-header" };
const _hoisted_3 = { class: "current-time" };
const _hoisted_4 = { class: "picker-weekdays" };
const _hoisted_5 = { class: "picker-body" };
const _hoisted_6 = ["onClick"];
const _hoisted_7 = {
key: 0,
class: "today-dot"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
modelValue: {}
},
emits: ["input"],
setup(__props, { emit: __emit }) {
var _a, _b;
const props = __props;
const emit = __emit;
const showPicker = ref(false);
const selectedDate = ref(props.modelValue || /* @__PURE__ */ new Date());
const currentYear = ref((_a = selectedDate.value) == null ? void 0 : _a.getFullYear());
const currentMonth = ref(((_b = selectedDate.value) == null ? void 0 : _b.getMonth()) + 1);
const pickerRef = ref(null);
const closeOnOutsideClick = (event) => {
if (!pickerRef.value.contains(event.target)) {
showPicker.value = false;
}
};
const togglePicker = () => {
showPicker.value = !showPicker.value;
};
onMounted(() => {
window.addEventListener("click", closeOnOutsideClick);
});
onUnmounted(() => {
window.removeEventListener("click", closeOnOutsideClick);
});
watch(
selectedDate,
(newValue) => {
emit("input", newValue);
},
{ immediate: true }
);
watch(
() => props.modelValue,
(newValue) => {
if (!newValue) return;
selectedDate.value = newValue;
currentMonth.value = selectedDate.value.getMonth() + 1;
currentYear.value = selectedDate.value.getFullYear();
},
{ immediate: true }
);
const changeMonth = (value) => {
currentMonth.value += value;
if (currentMonth.value === 0) {
currentMonth.value = 12;
currentYear.value -= 1;
} else if (currentMonth.value === 13) {
currentMonth.value = 1;
currentYear.value += 1;
}
};
const selectDate = (date) => {
if (isPast(date)) {
return;
}
selectedDate.value = date;
showPicker.value = false;
};
const days = ref([]);
const updateDays = () => {
const daysArray = [];
const firstDay = new Date(
currentYear.value,
currentMonth.value - 1,
1
).getDay();
const daysInMonth = new Date(
currentYear.value,
currentMonth.value,
0
).getDate();
const daysInPrevMonth = new Date(
currentYear.value,
currentMonth.value - 1,
0
).getDate();
for (let i = daysInPrevMonth - firstDay + 1; i <= daysInPrevMonth; i++) {
const date = new Date(currentYear.value, currentMonth.value - 2, i);
daysArray.push({
id: date.toISOString(),
label: i,
date,
otherMonth: true
});
}
for (let i = 1; i <= daysInMonth; i++) {
const date = new Date(currentYear.value, currentMonth.value - 1, i);
daysArray.push({
id: date.toISOString(),
label: i,
date,
otherMonth: false
});
}
const remainingDays = 35 - daysArray.length;
if (remainingDays > 0) {
for (let i = 1; i <= remainingDays; i++) {
const date = new Date(currentYear.value, currentMonth.value, i);
daysArray.push({
id: date.toISOString(),
label: i,
date,
otherMonth: true
});
}
}
days.value = daysArray.slice(0, 35);
};
watchEffect(() => {
updateDays();
});
const formattedDate = computed(
() => `${selectedDate.value.getFullYear()}-${selectedDate.value.getMonth() + 1}-${selectedDate.value.getDate()}`
);
const isSelected = (date) => date.toISOString() === selectedDate.value.toISOString();
const isToday = (date) => {
const today = /* @__PURE__ */ new Date();
return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
};
const isPast = (date) => {
const today = /* @__PURE__ */ new Date();
today.setHours(0, 0, 0, 0);
return date < today;
};
const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "pickerRef",
ref: pickerRef,
class: "container"
}, [
createVNode(TuiInput, {
"model-value": formattedDate.value,
onInput: _cache[0] || (_cache[0] = ($event) => formattedDate.value = $event),
readonly: "",
class: "datepicker-input",
onFocus: togglePicker
}, null, 8, ["model-value"]),
showPicker.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("span", _hoisted_3, toDisplayString(currentYear.value) + "/" + toDisplayString(currentMonth.value < 10 ? `0${currentMonth.value}` : currentMonth.value), 1),
createElementVNode("button", {
class: "arrow",
onClick: _cache[1] || (_cache[1] = ($event) => changeMonth(-1))
}, "<"),
createElementVNode("button", {
class: "arrow",
onClick: _cache[2] || (_cache[2] = ($event) => changeMonth(1))
}, ">")
]),
createElementVNode("div", _hoisted_4, [
(openBlock(), createElementBlock(Fragment, null, renderList(weekdays, (weekday) => {
return createElementVNode("div", {
key: weekday,
class: "weekday"
}, toDisplayString(weekday), 1);
}), 64))
]),
createElementVNode("div", _hoisted_5, [
(openBlock(true), createElementBlock(Fragment, null, renderList(days.value, (day) => {
return openBlock(), createElementBlock("div", {
key: day.id,
class: normalizeClass(["day", {
"other-month": day.otherMonth,
selected: isSelected(day.date),
today: isToday(day.date),
past: isPast(day.date)
}]),
onClick: ($event) => selectDate(day.date)
}, [
createTextVNode(toDisplayString(day.label) + " ", 1),
isToday(day.date) ? (openBlock(), createElementBlock("span", _hoisted_7)) : createCommentVNode("", true)
], 10, _hoisted_6);
}), 128))
])
])) : createCommentVNode("", true)
], 512);
};
}
});
export {
_sfc_main as default
};