@sdata/web-vue 1.19.0 → 2.1.1

package/es/calendar/components/headings-bar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,201 @@
+import { calendarElInjectionKey, calendarInjectionKey } from "../context.js";
+import { weekdays } from "../core/config.js";
+import { PerformantEllipsis } from "../../ellipsis/index.js";
+import cell_default from "./cell.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, onBeforeUnmount, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+//#region components/calendar/components/headings-bar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["onClick"];
+var headings_bar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "headings-bar",
+	setup(__props) {
+		const calendar = inject(calendarInjectionKey);
+		const $calendarEl = inject(calendarElInjectionKey);
+		const { view, config, dateUtils } = calendar;
+		const prefixCls = calendar.prefixCls;
+		const dayLabelSize = computed(() => {
+			if (config.xs) return "day-xs";
+			if (config.sm || view.isDays || view.isMonth) return "day-sm";
+			return "day";
+		});
+		const showHeadings = computed(() => {
+			return (view.isDay || view.isDays || view.isWeek || view.isMonth) && !(view.isDay && !config.schedules && !config.allDayEvents);
+		});
+		const weekDays = computed(() => {
+			const { weekDays: dayNames, weekDaysShort: dayNamesShort, weekDaysMin: dayNamesMin } = calendar.texts;
+			return view.cellDates.slice(0, config.horizontal ? view.rows : view.cols).map(({ start }) => {
+				const dayIdx = (start.getDay() + 6) % 7;
+				return {
+					"id": weekdays[start.getDay()],
+					"date": start,
+					"dateNumber": start.getDate(),
+					"day": dayNames[dayIdx],
+					"day-sm": dayNamesShort[dayIdx],
+					"day-xs": dayNamesMin[dayIdx],
+					"isToday": dateUtils.isToday(start)
+				};
+			});
+		});
+		const headingCell = (day) => ({
+			start: day.date,
+			end: /* @__PURE__ */ new Date(day.date.getTime() + 1440 * 60 * 1e3 - 1),
+			isToday: day.isToday,
+			goNarrower: () => view.narrower(),
+			goBroader: () => view.broader(),
+			broader: view.broaderView,
+			narrower: view.narrowerView
+		});
+		const domEvents = { click: (date) => {
+			if (view.isDays || view.isWeek) view.updateSelectedDate(date);
+		} };
+		const allDayResizer = {
+			isResizing: ref(false),
+			startY: ref(0),
+			initialHeight: ref(0),
+			defaultHeight: 25,
+			startX: ref(0),
+			initialWidth: ref(0),
+			defaultWidth: 25,
+			cleanup() {
+				if (typeof document !== "undefined") {
+					document.removeEventListener("mousemove", allDayResizer.handleMouseMove);
+					document.removeEventListener("mouseup", allDayResizer.cleanup);
+					document.removeEventListener("touchmove", allDayResizer.handleTouchMove);
+					document.removeEventListener("touchend", allDayResizer.cleanup);
+				}
+				allDayResizer.isResizing.value = false;
+			},
+			startResize(clientX, clientY) {
+				this.isResizing.value = true;
+				const isHzl = config.horizontal;
+				this[isHzl ? "startX" : "startY"].value = isHzl ? clientX : clientY;
+				const cssValue = getComputedStyle($calendarEl.value).getPropertyValue(`--${prefixCls}-all-day-bar-size`);
+				const tempEl = document.createElement("div");
+				tempEl.style.position = "absolute";
+				tempEl.style.visibility = "hidden";
+				tempEl.style[isHzl ? "width" : "height"] = cssValue;
+				document.body.appendChild(tempEl);
+				const pixelValue = tempEl[isHzl ? "offsetWidth" : "offsetHeight"];
+				tempEl.remove();
+				if (pixelValue > 0) this[isHzl ? "initialWidth" : "initialHeight"].value = pixelValue;
+				document.addEventListener("mousemove", allDayResizer.handleMouseMove);
+				document.addEventListener("mouseup", allDayResizer.cleanup);
+				document.addEventListener("touchmove", allDayResizer.handleTouchMove, { passive: false });
+				document.addEventListener("touchend", allDayResizer.cleanup);
+			},
+			updateSize(clientX, clientY) {
+				var _$calendarEl$value;
+				if (!this.isResizing.value) return;
+				const isHzl = config.horizontal;
+				const delta = isHzl ? clientX - this.startX.value : clientY - this.startY.value;
+				const newSize = Math.max(20, this[isHzl ? "initialWidth" : "initialHeight"].value + delta);
+				(_$calendarEl$value = $calendarEl.value) === null || _$calendarEl$value === void 0 || _$calendarEl$value.style.setProperty(`--${prefixCls}-all-day-bar-size`, `${newSize}px`);
+			},
+			handleMouseDown(e) {
+				this.startResize(e.clientX, e.clientY);
+			},
+			handleMouseMove(e) {
+				allDayResizer.updateSize(e.clientX, e.clientY);
+			},
+			handleTouchStart(e) {
+				var _e$touches;
+				!((_e$touches = e.touches) === null || _e$touches === void 0) && _e$touches[0] && this.startResize(e.touches[0].clientX, e.touches[0].clientY);
+			},
+			handleTouchMove(e) {
+				var _e$touches2;
+				if ((_e$touches2 = e.touches) === null || _e$touches2 === void 0 ? void 0 : _e$touches2[0]) {
+					allDayResizer.updateSize(e.touches[0].clientX, e.touches[0].clientY);
+					e.preventDefault();
+				}
+			}
+		};
+		onBeforeUnmount(() => {
+			allDayResizer.cleanup();
+		});
+		return (_ctx, _cache) => {
+			return showHeadings.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(`${unref(prefixCls)}__headings`)
+			}, [
+				!unref(view).isDay ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}__weekdays-headings`)
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays.value, (day, i) => {
+					return openBlock(), createElementBlock("div", {
+						key: i,
+						onClick: ($event) => domEvents.click(day.date),
+						class: normalizeClass([`${unref(prefixCls)}__weekday`, { [`${unref(prefixCls)}__weekday--today`]: day.isToday }])
+					}, [renderSlot(_ctx.$slots, "weekday-heading", {
+						label: day[dayLabelSize.value],
+						id: day.id,
+						date: day.date,
+						view: unref(view)
+					}, () => [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}__weekday-day`) }, toDisplayString(day[dayLabelSize.value]), 3), !unref(view).isMonth ? (openBlock(), createElementBlock("strong", {
+						key: 0,
+						class: normalizeClass(`${unref(prefixCls)}__weekday-date`)
+					}, toDisplayString(day.dateNumber), 3)) : createCommentVNode("", true)])], 10, _hoisted_1);
+				}), 128))], 2)) : createCommentVNode("", true),
+				unref(config).schedules ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}__schedules-headings`)
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays.value, (day, i) => {
+					return openBlock(), createElementBlock(Fragment, { key: i }, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).schedules, (schedule, j) => {
+						return openBlock(), createElementBlock(Fragment, { key: j }, [_ctx.$slots["schedule-heading"] ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass([
+								`${unref(prefixCls)}__schedule`,
+								`${unref(prefixCls)}__schedule--heading`,
+								schedule.class
+							])
+						}, [renderSlot(_ctx.$slots, "schedule-heading", {
+							schedule,
+							view: unref(view),
+							cell: headingCell(day)
+						})], 2)) : (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass([
+								`${unref(prefixCls)}__schedule`,
+								`${unref(prefixCls)}__schedule--heading`,
+								schedule.class
+							])
+						}, [createVNode(unref(PerformantEllipsis), null, {
+							default: withCtx(() => [createTextVNode(toDisplayString(schedule.label), 1)]),
+							_: 2
+						}, 1024)], 2))], 64);
+					}), 128))], 64);
+				}), 128))], 2)) : createCommentVNode("", true),
+				unref(config).allDayEvents ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(`${unref(prefixCls)}__all-day`)
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays.value, (day, i) => {
+					return openBlock(), createBlock(cell_default, {
+						key: i,
+						class: normalizeClass([`${unref(prefixCls)}__all-day-cell`, { [`${unref(prefixCls)}__weekday--today`]: day.isToday }]),
+						start: day.date,
+						end: /* @__PURE__ */ new Date(day.date.getTime() + 1440 * 60 * 1e3 - 1),
+						index: Number(i),
+						"all-day": ""
+					}, createSlots({ _: 2 }, [_ctx.$slots["event.all-day"] ? {
+						name: "event.all-day",
+						fn: withCtx((params) => [renderSlot(_ctx.$slots, "event.all-day", mergeProps({ ref_for: true }, params))]),
+						key: "0"
+					} : {
+						name: "event",
+						fn: withCtx((params) => [renderSlot(_ctx.$slots, "event", mergeProps({ ref_for: true }, params))]),
+						key: "1"
+					}]), 1032, [
+						"class",
+						"start",
+						"end",
+						"index"
+					]);
+				}), 128)), createElementVNode("div", {
+					onMousedown: _cache[0] || (_cache[0] = (...args) => allDayResizer.handleMouseDown && allDayResizer.handleMouseDown(...args)),
+					onTouchstart: _cache[1] || (_cache[1] = (...args) => allDayResizer.handleTouchStart && allDayResizer.handleTouchStart(...args)),
+					class: normalizeClass(`${unref(prefixCls)}__all-day-resizer`)
+				}, null, 34)], 2)) : createCommentVNode("", true)
+			], 2)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { headings_bar_vue_vue_type_script_setup_true_lang_default as default };

package/es/calendar/components/index.js

@@ -0,0 +1,5 @@
+import index_vue_vue_type_script_setup_true_lang_default from "./index.vue_vue_type_script_setup_true_lang.js";
+//#region components/calendar/components/index.vue
+var components_default = index_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { components_default as default };