@astryx-vue/core 0.2.1 → 0.2.3

package/styles/table.css

@@ -115,7 +115,8 @@
     max-width: 0;
   }
 
-  .astryx-table[data-striped='true'] tbody tr:nth-child(even of :not([data-expansion-panel])) {
+  .astryx-table[data-striped='true'] tbody tr:nth-child(even of :not([data-expansion-panel], [data-group-header])) {
+    --table-row-overlay: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
     background-color: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
   }
 
@@ -125,11 +126,13 @@
 
   @media (hover: hover) {
     .astryx-table[data-hover='true'] tbody tr:hover {
+      --table-row-overlay: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
       background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
     }
   }
 
   .astryx-table tbody tr[aria-selected='true'] {
+    --table-row-overlay: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
     background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
   }
 
@@ -191,6 +194,18 @@
     min-width: 0;
   }
 
+  .astryx-table__header-line {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-table__header-line > .astryx-table__sort {
+    flex: 1;
+    min-width: 0;
+  }
+
   .astryx-table__resize {
     position: absolute;
     top: 0;
@@ -253,4 +268,292 @@
     gap: var(--astryx-spacing-2, 8px);
     margin-bottom: var(--astryx-spacing-2, 8px);
   }
+
+  .astryx-table__clickable {
+    cursor: pointer;
+  }
+
+  .astryx-table tr[data-group-header] {
+    cursor: pointer;
+    user-select: none;
+    background: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
+    border-bottom: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+  }
+
+  .astryx-table td.astryx-table__group {
+    max-width: none;
+    overflow: visible;
+    padding-inline-start: 0;
+    background: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
+  }
+
+  .astryx-table__group-inner,
+  .astryx-table__tree {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-table__group-inner {
+    padding-inline-start: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-table__group-inner[data-pinned] {
+    position: sticky;
+    inset-inline-start: 0;
+    width: fit-content;
+  }
+
+  .astryx-table__group-chevron[data-pinned] {
+    position: sticky;
+    inset-inline-start: var(--astryx-spacing-1, 4px);
+    z-index: 1;
+  }
+
+  .astryx-table__group-chevron,
+  .astryx-table__expander {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--astryx-color-icon-secondary, light-dark(#737373, #a3a3a3));
+    cursor: pointer;
+  }
+
+  .astryx-table__group-chevron {
+    color: var(--astryx-color-icon-secondary, light-dark(#737373, #a3a3a3));
+  }
+
+  .astryx-table__expander {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    transition: color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  @media (hover: hover) {
+    .astryx-table__group-chevron:hover,
+    .astryx-table__expander:hover {
+      color: var(--astryx-color-icon-primary, light-dark(#171717, #fafafa));
+    }
+
+    .astryx-table__expander:hover {
+      background-image: linear-gradient(var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d)), var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d)));
+    }
+  }
+
+  .astryx-table__chevron-icon {
+    display: inline-flex;
+    transition: transform var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-table__chevron-icon.is-expanded {
+    transform: rotate(90deg);
+  }
+
+  [dir='rtl'] .astryx-table__chevron-icon {
+    transform: scaleX(-1);
+  }
+
+  [dir='rtl'] .astryx-table__chevron-icon.is-expanded {
+    transform: scaleX(-1) rotate(90deg);
+  }
+
+  .astryx-table__group-label {
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
+  .astryx-table__group-count {
+    font-weight: var(--astryx-font-weight-normal, 400);
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+  }
+
+  .astryx-table__tree {
+    padding-inline-start: calc(var(--astryx-table-tree-level, 0) * var(--astryx-table-tree-step, var(--astryx-spacing-4, 16px)));
+  }
+
+  .astryx-table__tree-spacer {
+    flex: none;
+    width: 24px;
+    height: 24px;
+  }
+
+  .astryx-table__tree-label {
+    min-width: 0;
+  }
+
+  .astryx-table :is(th, td)[data-column='__expansion'] {
+    width: 40px;
+    min-width: 40px;
+    max-width: 40px;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+
+  .astryx-table[data-density='compact'] .astryx-table__expander--column {
+    margin-inline-start: calc((40px - min(var(--astryx-spacing-6, 24px), 40px)) / 2 - var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-table[data-density='balanced'] .astryx-table__expander--column {
+    margin-inline-start: calc((40px - min(var(--astryx-spacing-6, 24px), 40px)) / 2 - var(--astryx-spacing-3, 12px));
+  }
+
+  .astryx-table[data-density='spacious'] .astryx-table__expander--column {
+    margin-inline-start: calc((40px - min(var(--astryx-spacing-6, 24px), 40px)) / 2 - var(--astryx-spacing-4, 16px));
+  }
+
+  .astryx-table[data-dividers='rows'] tbody tr[data-expanded] > td,
+  .astryx-table[data-dividers='grid'] tbody tr[data-expanded] > td {
+    border-bottom-width: 0;
+  }
+
+  .astryx-table__panel-row[data-variant='muted'] {
+    background: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
+  }
+
+  .astryx-table__panel {
+    max-width: none;
+    padding-inline-end: var(--astryx-spacing-5, 20px);
+    padding-block: var(--astryx-spacing-4, 16px);
+  }
+
+  .astryx-table[data-density='compact'] .astryx-table__panel {
+    padding-inline-start: calc(40px + var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-table[data-density='balanced'] .astryx-table__panel {
+    padding-inline-start: calc(40px + var(--astryx-spacing-3, 12px));
+  }
+
+  .astryx-table[data-density='spacious'] .astryx-table__panel {
+    padding-inline-start: calc(40px + var(--astryx-spacing-4, 16px));
+  }
+
+  .astryx-table[data-dividers='rows'] .astryx-table__panel,
+  .astryx-table[data-dividers='grid'] .astryx-table__panel {
+    border-bottom: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+  }
+
+  .astryx-table tbody tr:last-child > .astryx-table__panel {
+    border-bottom-width: 0;
+  }
+
+  .astryx-table__row-index {
+    font-family: var(--astryx-font-family-code, ui-monospace, monospace);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-variant-numeric: tabular-nums;
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+  }
+
+  .astryx-table__status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .astryx-table__status-dot {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+
+  .astryx-table__sticky {
+    position: sticky;
+    background-color: var(--table-sticky-background, var(--astryx-color-background-card, #fff));
+    background-clip: padding-box;
+    overflow: visible;
+  }
+
+  .astryx-table__sticky::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background-color: var(--table-row-overlay, transparent);
+    transition: background-color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-table__sticky--start::after,
+  .astryx-table__sticky--end::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 6px;
+    pointer-events: none;
+    transition: opacity 150ms ease;
+  }
+
+  .astryx-table__sticky--start::after {
+    inset-inline-end: 0;
+    transform: translateX(100%);
+    opacity: var(--table-sticky-shadow-start, 0);
+    background-image: linear-gradient(to right, var(--astryx-color-shadow, #0000001a), transparent);
+  }
+
+  .astryx-table__sticky--end::after {
+    inset-inline-start: 0;
+    transform: translateX(-100%);
+    opacity: var(--table-sticky-shadow-end, 0);
+    background-image: linear-gradient(to left, var(--astryx-color-shadow, #0000001a), transparent);
+  }
+
+  [dir='rtl'] .astryx-table__sticky--start::after {
+    transform: translateX(-100%);
+    background-image: linear-gradient(to left, var(--astryx-color-shadow, #0000001a), transparent);
+  }
+
+  [dir='rtl'] .astryx-table__sticky--end::after {
+    transform: translateX(100%);
+    background-image: linear-gradient(to right, var(--astryx-color-shadow, #0000001a), transparent);
+  }
+
+  .astryx-table-menu {
+    position: fixed;
+    z-index: var(--astryx-popover-z-index, 1000);
+    min-width: 10rem;
+    padding: var(--astryx-spacing-1, 4px);
+    border: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: var(--astryx-color-background-card, #fff);
+    box-shadow: var(--astryx-popover-shadow, 0 4px 8px #0000001a);
+  }
+
+  .astryx-table-menu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    width: 100%;
+    margin: 0;
+    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
+    border: 0;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .astryx-table-menu__item:hover,
+  .astryx-table-menu__item:focus-visible {
+    background: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-table__chevron-icon,
+    .astryx-table__sticky::before,
+    .astryx-table__sticky--start::after,
+    .astryx-table__sticky--end::after {
+      transition: none;
+    }
+  }
 }

package/styles.css

@@ -16,6 +16,7 @@
 @import './styles/carousel.css';
 @import './styles/center.css';
 @import './styles/chat.css';
+@import './styles/check-indicator.css';
 @import './styles/checkbox-indicator.css';
 @import './styles/checkbox-input.css';
 @import './styles/checkbox-list.css';
@@ -58,8 +59,10 @@
 @import './styles/overflow-list.css';
 @import './styles/overlay.css';
 @import './styles/popover.css';
+@import './styles/power-search.css';
 @import './styles/progress-bar.css';
 @import './styles/radio.css';
+@import './styles/radio-indicator.css';
 @import './styles/resize-handle.css';
 @import './styles/scrollable-area.css';
 @import './styles/section.css';

package/dist/Calendar-DqC3EDN1.js

@@ -1,352 +0,0 @@
-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 };