@tencentcloud/roomkit-web-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.2 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const index = require("../Input/index.js");
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__ */ Vue.defineComponent({
__name: "DatepickerPC",
props: {
modelValue: {}
},
emits: ["input"],
setup(__props, { emit: __emit }) {
var _a, _b;
const props = __props;
const emit = __emit;
const showPicker = Vue.ref(false);
const selectedDate = Vue.ref(props.modelValue || /* @__PURE__ */ new Date());
const currentYear = Vue.ref((_a = selectedDate.value) == null ? void 0 : _a.getFullYear());
const currentMonth = Vue.ref(((_b = selectedDate.value) == null ? void 0 : _b.getMonth()) + 1);
const pickerRef = Vue.ref(null);
const closeOnOutsideClick = (event) => {
if (!pickerRef.value.contains(event.target)) {
showPicker.value = false;
}
};
const togglePicker = () => {
showPicker.value = !showPicker.value;
};
Vue.onMounted(() => {
window.addEventListener("click", closeOnOutsideClick);
});
Vue.onUnmounted(() => {
window.removeEventListener("click", closeOnOutsideClick);
});
Vue.watch(
selectedDate,
(newValue) => {
emit("input", newValue);
},
{ immediate: true }
);
Vue.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 = Vue.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);
};
Vue.watchEffect(() => {
updateDays();
});
const formattedDate = Vue.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 Vue.openBlock(), Vue.createElementBlock("div", {
ref_key: "pickerRef",
ref: pickerRef,
class: "container"
}, [
Vue.createVNode(Vue.unref(index.default), {
"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 ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createElementVNode("div", _hoisted_2, [
Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(currentYear.value) + "/" + Vue.toDisplayString(currentMonth.value < 10 ? `0${currentMonth.value}` : currentMonth.value), 1),
Vue.createElementVNode("button", {
class: "arrow",
onClick: _cache[1] || (_cache[1] = ($event) => changeMonth(-1))
}, "<"),
Vue.createElementVNode("button", {
class: "arrow",
onClick: _cache[2] || (_cache[2] = ($event) => changeMonth(1))
}, ">")
]),
Vue.createElementVNode("div", _hoisted_4, [
(Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(weekdays, (weekday) => {
return Vue.createElementVNode("div", {
key: weekday,
class: "weekday"
}, Vue.toDisplayString(weekday), 1);
}), 64))
]),
Vue.createElementVNode("div", _hoisted_5, [
(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(days.value, (day) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
key: day.id,
class: Vue.normalizeClass(["day", {
"other-month": day.otherMonth,
selected: isSelected(day.date),
today: isToday(day.date),
past: isPast(day.date)
}]),
onClick: ($event) => selectDate(day.date)
}, [
Vue.createTextVNode(Vue.toDisplayString(day.label) + " ", 1),
isToday(day.date) ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_7)) : Vue.createCommentVNode("", true)
], 10, _hoisted_6);
}), 128))
])
])) : Vue.createCommentVNode("", true)
], 512);
};
}
});
exports.default = _sfc_main;