@astryx-vue/core 0.1.3 → 0.2.1

package/dist/Calendar-DqC3EDN1.js

@@ -0,0 +1,352 @@
+import { t as useGridRovingFocus } from "./useGridRovingFocus-DQQAOYH5.js";
+import { a as useAstryxMessages, i as useAstryxLocale } from "./context-DzcK4T_C.js";
+import { n as weekdayNames, t as formatCalendarMonth } from "./locale-Cpk_nrLA.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, withKeys } from "vue";
+import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
+import "../styles/calendar.css";
+//#region src/composables/useCalendar.ts
+function calendarDateToJSDate(date) {
+	return new Date(date.year, date.month - 1, date.day);
+}
+function jsDateToCalendarDate(date) {
+	return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+}
+/**
+* 日历逻辑：日期计算、月份导航、日期选择。
+*/
+function useCalendar(options) {
+	const { value, min, max, isDateDisabled, onChange, initialDate } = options;
+	const timeZone = getLocalTimeZone();
+	const focusedDate = ref(initialDate ? jsDateToCalendarDate(initialDate) : value.value ? jsDateToCalendarDate(value.value) : today(timeZone));
+	function datesFor(month) {
+		const firstDay = new CalendarDate(month.year, month.month, 1);
+		const firstDayOfWeek = firstDay.toDate(timeZone).getDay();
+		const startDate = firstDay.subtract({ days: firstDayOfWeek });
+		const weeks = [];
+		let currentDate = startDate;
+		for (let week = 0; week < 6; week++) {
+			const weekDates = [];
+			for (let day = 0; day < 7; day++) {
+				weekDates.push(currentDate);
+				currentDate = currentDate.add({ days: 1 });
+			}
+			weeks.push(weekDates);
+		}
+		return weeks;
+	}
+	const dates = computed(() => datesFor(focusedDate.value));
+	function select(date) {
+		if (isDisabled(date)) return;
+		onChange(calendarDateToJSDate(date));
+	}
+	function previousMonth() {
+		focusedDate.value = focusedDate.value.subtract({ months: 1 });
+	}
+	function nextMonth() {
+		focusedDate.value = focusedDate.value.add({ months: 1 });
+	}
+	function isSelected(date) {
+		if (!value.value) return false;
+		const selected = jsDateToCalendarDate(value.value);
+		return date.compare(selected) === 0;
+	}
+	function isDisabled(date) {
+		const jsDate = calendarDateToJSDate(date);
+		if (min && jsDate < min) return true;
+		if (max && jsDate > max) return true;
+		if (isDateDisabled?.(jsDate)) return true;
+		return false;
+	}
+	function isInMonth(date) {
+		return date.month === focusedDate.value.month;
+	}
+	return {
+		focusedDate,
+		dates,
+		datesFor,
+		select,
+		previousMonth,
+		nextMonth,
+		isSelected,
+		isDisabled,
+		isInMonth
+	};
+}
+//#endregion
+//#region src/Calendar/Calendar.vue
+const _hoisted_1 = ["data-months", "aria-label"];
+const _hoisted_2 = { class: "astryx-calendar-header" };
+const _hoisted_3 = ["disabled", "aria-label"];
+const _hoisted_4 = { class: "astryx-calendar-month-year" };
+const _hoisted_5 = ["disabled", "aria-label"];
+const _hoisted_6 = { class: "astryx-calendar-month-year" };
+const _hoisted_7 = ["disabled", "aria-label"];
+const _hoisted_8 = {
+	class: "astryx-calendar-weekdays",
+	role: "row"
+};
+const _hoisted_9 = ["aria-label"];
+const _hoisted_10 = ["aria-activedescendant", "onKeydown"];
+const _hoisted_11 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"aria-current",
+	"onClick",
+	"onKeydown"
+];
+const _hoisted_12 = { class: "astryx-calendar-day" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxCalendar",
+	__name: "Calendar",
+	props: {
+		modelValue: { default: null },
+		mode: { default: "single" },
+		range: { default: null },
+		numberOfMonths: { default: 1 },
+		focusDate: {},
+		min: {},
+		max: {},
+		isDateDisabled: {},
+		label: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:range",
+		"change"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const calendarId = `astryx-calendar-${useId()}`;
+		const locale = useAstryxLocale();
+		const messages = useAstryxMessages();
+		const resolvedLabel = computed(() => props.label ?? messages.value.calendar.label);
+		const weekDays = computed(() => weekdayNames(locale.value, "narrow"));
+		const weekDayLabels = computed(() => weekdayNames(locale.value, "long"));
+		const modelValueRef = computed({
+			get: () => props.modelValue,
+			set: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
+		});
+		const calendar = useCalendar({
+			value: modelValueRef,
+			initialDate: props.focusDate,
+			min: props.min,
+			max: props.max,
+			isDateDisabled: props.isDateDisabled,
+			onChange: (value) => {
+				modelValueRef.value = value;
+			}
+		});
+		const months = computed(() => {
+			const first = calendar.focusedDate.value;
+			return props.numberOfMonths === 2 ? [first, first.add({ months: 1 })] : [first];
+		});
+		const timeZone = getLocalTimeZone();
+		const todayDate = today(timeZone);
+		const activeIndex = ref(0);
+		const isEnabled = computed(() => !props.disabled);
+		const grid = useGridRovingFocus({
+			rows: computed(() => 6),
+			columns: computed(() => 7),
+			activeIndex,
+			isEnabled,
+			isDisabled: (row, col) => {
+				const dateIndex = row * 7 + col;
+				const date = calendar.dates.value.flat()[dateIndex];
+				return date ? calendar.isDisabled(date) : true;
+			},
+			onChange: (index) => {
+				activeIndex.value = index;
+			}
+		});
+		function getCellId(rowIndex, colIndex) {
+			return `${calendarId}-cell-${rowIndex}-${colIndex}`;
+		}
+		function isToday(date) {
+			return date.compare(todayDate) === 0;
+		}
+		function sameDay(date, day) {
+			return !!date && date.getFullYear() === day.year && date.getMonth() + 1 === day.month && date.getDate() === day.day;
+		}
+		function isRangeStart(date) {
+			return props.mode === "range" && sameDay(props.range?.start ?? null, date);
+		}
+		function isRangeEnd(date) {
+			return props.mode === "range" && sameDay(props.range?.end ?? null, date);
+		}
+		function isInRange(date) {
+			if (props.mode !== "range") return false;
+			const start = props.range?.start;
+			const end = props.range?.end;
+			if (!start || !end) return false;
+			const day = new Date(date.year, date.month - 1, date.day);
+			return day > (start < end ? start : end) && day < (start < end ? end : start);
+		}
+		function selectRange(date) {
+			const day = new Date(date.year, date.month - 1, date.day);
+			const start = props.range?.start ?? null;
+			const end = props.range?.end ?? null;
+			emit("update:range", !start || end ? {
+				start: day,
+				end: null
+			} : day < start ? {
+				start: day,
+				end: start
+			} : {
+				start,
+				end: day
+			});
+			emit("change", day);
+		}
+		function onDateClick(date, rowIndex, colIndex) {
+			if (props.disabled || calendar.isDisabled(date)) return;
+			activeIndex.value = rowIndex * 7 + colIndex;
+			if (props.mode === "range") {
+				selectRange(date);
+				return;
+			}
+			calendar.select(date);
+		}
+		function onKeyDown(event) {
+			if (props.disabled) return;
+			grid.onKeyDown(event);
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				const date = calendar.dates.value.flat()[activeIndex.value];
+				if (date && !calendar.isDisabled(date)) calendar.select(date);
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: calendarId,
+				class: normalizeClass(["astryx-calendar", { "is-disabled": props.disabled }]),
+				"data-months": props.numberOfMonths,
+				role: "application",
+				"aria-label": resolvedLabel.value
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(months.value, (month, monthIndex) => {
+				return openBlock(), createElementBlock("div", {
+					key: `${month.year}-${month.month}`,
+					class: "astryx-calendar-month"
+				}, [
+					createElementVNode("div", _hoisted_2, [monthIndex === 0 ? renderSlot(_ctx.$slots, "header", {}, () => [
+						createElementVNode("button", {
+							type: "button",
+							class: "astryx-calendar-nav-button",
+							disabled: props.disabled,
+							"aria-label": unref(messages).calendar.previousMonth,
+							onClick: _cache[0] || (_cache[0] = (...args) => unref(calendar).previousMonth && unref(calendar).previousMonth(...args))
+						}, [..._cache[3] || (_cache[3] = [createElementVNode("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 16 16",
+							fill: "none"
+						}, [createElementVNode("path", {
+							d: "M10 12L6 8L10 4",
+							stroke: "currentColor",
+							"stroke-width": "1.5",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						})], -1)])], 8, _hoisted_3),
+						createElementVNode("span", _hoisted_4, toDisplayString(unref(formatCalendarMonth)(month.year, month.month, unref(locale))), 1),
+						props.numberOfMonths === 1 ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: "astryx-calendar-nav-button",
+							disabled: props.disabled,
+							"aria-label": unref(messages).calendar.nextMonth,
+							onClick: _cache[1] || (_cache[1] = (...args) => unref(calendar).nextMonth && unref(calendar).nextMonth(...args))
+						}, [..._cache[4] || (_cache[4] = [createElementVNode("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 16 16",
+							fill: "none"
+						}, [createElementVNode("path", {
+							d: "M6 4L10 8L6 12",
+							stroke: "currentColor",
+							"stroke-width": "1.5",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						})], -1)])], 8, _hoisted_5)) : createCommentVNode("v-if", true)
+					], void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", _hoisted_6, toDisplayString(unref(formatCalendarMonth)(month.year, month.month, unref(locale))), 1), createElementVNode("button", {
+						type: "button",
+						class: "astryx-calendar-nav-button",
+						disabled: props.disabled,
+						"aria-label": unref(messages).calendar.nextMonth,
+						onClick: _cache[2] || (_cache[2] = (...args) => unref(calendar).nextMonth && unref(calendar).nextMonth(...args))
+					}, [..._cache[5] || (_cache[5] = [createElementVNode("svg", {
+						width: "16",
+						height: "16",
+						viewBox: "0 0 16 16",
+						fill: "none"
+					}, [createElementVNode("path", {
+						d: "M6 4L10 8L6 12",
+						stroke: "currentColor",
+						"stroke-width": "1.5",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					})], -1)])], 8, _hoisted_7)], 64))]),
+					createElementVNode("div", _hoisted_8, [(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays.value, (day, index) => {
+						return openBlock(), createElementBlock("div", {
+							key: index,
+							class: "astryx-calendar-weekday",
+							role: "columnheader",
+							"aria-label": weekDayLabels.value[index]
+						}, toDisplayString(day), 9, _hoisted_9);
+					}), 128))]),
+					createElementVNode("div", {
+						class: "astryx-calendar-grid",
+						role: "grid",
+						"aria-labelledby": calendarId,
+						"aria-activedescendant": monthIndex === 0 ? getCellId(unref(grid).row.value, unref(grid).column.value) : void 0,
+						tabindex: "0",
+						onKeydown: ($event) => monthIndex === 0 ? onKeyDown($event) : void 0
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(calendar).datesFor(month), (week, rowIndex) => {
+						return openBlock(), createElementBlock("div", {
+							key: rowIndex,
+							class: "astryx-calendar-row",
+							role: "row"
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(week, (date, colIndex) => {
+							return openBlock(), createElementBlock("div", {
+								id: monthIndex === 0 ? getCellId(rowIndex, colIndex) : void 0,
+								key: colIndex,
+								class: normalizeClass(["astryx-calendar-cell", {
+									"is-selected": props.mode === "range" ? isRangeStart(date) || isRangeEnd(date) : unref(calendar).isSelected(date),
+									"is-range-start": isRangeStart(date),
+									"is-range-end": isRangeEnd(date),
+									"is-in-range": isInRange(date),
+									"is-disabled": unref(calendar).isDisabled(date),
+									"is-today": isToday(date),
+									"is-other-month": date.month !== month.month || date.year !== month.year,
+									"is-active": monthIndex === 0 && activeIndex.value === rowIndex * 7 + colIndex
+								}]),
+								role: "gridcell",
+								"aria-selected": props.mode === "range" ? isRangeStart(date) || isRangeEnd(date) : unref(calendar).isSelected(date),
+								"aria-disabled": unref(calendar).isDisabled(date),
+								"aria-current": isToday(date) ? "date" : void 0,
+								tabindex: "-1",
+								onClick: ($event) => onDateClick(date, rowIndex, colIndex),
+								onKeydown: withKeys(($event) => onDateClick(date, rowIndex, colIndex), ["enter"])
+							}, [renderSlot(_ctx.$slots, "day", {
+								date,
+								isSelected: props.mode === "range" ? isRangeStart(date) || isRangeEnd(date) : unref(calendar).isSelected(date),
+								isDisabled: unref(calendar).isDisabled(date),
+								isToday: isToday(date),
+								isInMonth: date.month === month.month && date.year === month.year
+							}, () => [createElementVNode("span", _hoisted_12, toDisplayString(date.day), 1)])], 42, _hoisted_11);
+						}), 128))]);
+					}), 128))], 40, _hoisted_10)
+				]);
+			}), 128))], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/Card/index.d.ts

@@ -1,2 +1,2 @@
-import { a as CardSlots, i as CardSizeValue, n as CardElevation, o as CardVariant, r as CardProps, t as _default } from "../index-BfOtLyNH.js";
+import { a as CardSlots, i as CardSizeValue, n as CardElevation, o as CardVariant, r as CardProps, t as _default } from "../index-D_nYxnNv.js";
 export { _default as Card, type CardElevation, type CardProps, type CardSizeValue, type CardSlots, type CardVariant };

package/dist/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+import { a as CarouselSlots, i as CarouselProps, n as CarouselGap, r as CarouselHandle, t as _default } from "../index-CsVS37na.js";
+export { _default as Carousel, type CarouselGap, type CarouselHandle, type CarouselProps, type CarouselSlots };

package/dist/Carousel/index.js

@@ -0,0 +1,2 @@
+import { t as _sfc_main } from "../Carousel-BGUnskjo.js";
+export { _sfc_main as Carousel };