@ipohjs/qwik-calendar
Version:
Stream-able and resumable calendar component, built with Qwik
319 lines (318 loc) • 11 kB
JavaScript
import { componentQrl, inlinedQrl, _jsxBranch, _restProps, useStylesScopedQrl, _jsxC, _jsxS, _fnSignal, useLexicalScope, _IMMUTABLE, useStylesQrl, useSignal, useVisibleTaskQrl, createElement, _jsxQ } from "@builder.io/qwik";
import { calendar } from "@ipohjs/calendar";
import { fromPartsToUtcDate } from "@ipohjs/calendar/from-parts-to-utc-date";
import { getWeekdays } from "@ipohjs/calendar/get-weekdays";
import { useKeyboardEvent } from "@ipohjs/qwik-hooks";
import { Fragment } from "@builder.io/qwik/jsx-runtime";
const styles$1 = "[aria-label][title] .cell{place-content:center;place-items:center;padding:8px;display:grid;position:absolute;inset:0}";
const DataCell = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
_jsxBranch();
const props1 = _restProps(props, [
"as",
"class",
"init",
"render$"
]);
useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(styles$1, "DataCell_component_useStylesScoped_d0ORT5zlBC0"));
const Comp = props.as === "td" || props.as === "th" ? props.as : "td";
const init2 = {
col: props.init.col,
defaultCellProps: {
class: "cell",
...props.init?.defaultCellProps
},
defaultProps: {
...props1,
"aria-label": props.init.col.label || void 0,
key: props1.key || props.init.col.value,
title: props.init.col.label || void 0,
...props.init?.defaultProps
}
};
return props.render$ ? /* @__PURE__ */ _jsxC(Fragment, {
children: props.render$(init2)
}, 1, "MY_0") : /* @__PURE__ */ _jsxC(Comp, {
...init2.defaultProps,
children: props.init.col.value && /* @__PURE__ */ _jsxS("div", {
...init2.defaultCellProps,
children: _fnSignal((p0) => p0.init.col.value, [
props
], "p0.init.col.value")
}, null, 0, "MY_1"),
class: [
init2.defaultProps?.class,
props.class
]
}, 0, "MY_2");
}, "DataCell_component_6y0J4NeeS0I"));
const styles = 'table.calendar{background-color:var(--ip-background-container);color:var(--ip-on-background-container);width:100%}table.calendar,table.calendar thead,table.calendar tbody,table.calendar tfoot,table.calendar tr,table.calendar th,table.calendar td{border-collapse:collapse;border-spacing:0;margin:0;padding:0;position:relative}table.calendar .caption{clip:rect(0 0 0 0);-webkit-user-select:none;-moz-user-select:none;user-select:none;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}table.calendar th,table.calendar td{width:calc(100%/var(--_cols,8));width:12.5%;margin-top:100%}table.calendar th:after,table.calendar td:after{content:"";padding-top:100%;padding-top:var(--qwikCalendar_cell-paddingTop,100%);display:grid;position:relative}';
const WeekLabel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
_jsxBranch();
const props1 = _restProps(props, [
"render$",
"weekLabel"
]);
const baseProps = {
...props1,
as: "th",
init: {
col: props.weekLabel,
defaultProps: {
"aria-label": props.weekLabel.label,
class: "week-label",
key: props.weekLabel.value,
title: props.weekLabel.label
}
}
};
if (props.render$)
return /* @__PURE__ */ _jsxC(DataCell, {
...baseProps,
render$: /* @__PURE__ */ inlinedQrl((init2) => {
const [props2] = useLexicalScope();
return props2.render$(init2);
}, "WeekLabel_component_DataCell_render_tLGeoijEHag", [
props
]),
[_IMMUTABLE]: {
render$: _IMMUTABLE
}
}, 0, "d0_0");
return /* @__PURE__ */ _jsxC(DataCell, {
...baseProps
}, 0, "d0_1");
}, "WeekLabel_component_Exh5yWEgqfE"));
const Weekday = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
_jsxBranch();
const props1 = _restProps(props, [
"key",
"render$",
"weekday"
]);
const baseProps = {
...props1,
as: "th",
init: {
col: props.weekday,
defaultProps: {
"aria-label": props.weekday.label,
class: "weekday",
key: props.key ?? props.weekday.value,
title: props.weekday.label
}
}
};
if (props.render$)
return /* @__PURE__ */ _jsxC(DataCell, {
...baseProps,
render$: /* @__PURE__ */ inlinedQrl((init2) => {
const [props2] = useLexicalScope();
return props2.render$(init2);
}, "Weekday_component_DataCell_render_wIikbfYIW2I", [
props
]),
[_IMMUTABLE]: {
render$: _IMMUTABLE
}
}, 0, "on_0");
return /* @__PURE__ */ _jsxC(DataCell, {
...baseProps
}, 0, "on_1");
}, "Weekday_component_R0DnXhhAPAw"));
const QwikCalendar = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
_jsxBranch();
const props1 = _restProps(props, [
"class",
"date",
"disabledDates",
"disabledDays",
"firstDayOfWeek",
"locale",
"onDateChangeByKey$",
"renderDataCell$",
"renderHeader$",
"renderWeekLabel$",
"renderWeekNumber$",
"shortWeekLabel",
"showWeekNumber",
"weekLabel",
"weekNumberTemplate",
"weekNumberType"
]);
useStylesQrl(/* @__PURE__ */ inlinedQrl(styles, "QwikCalendar_component_useStyles_xxNYRTMGOzw"));
const dayFormat = new Intl.DateTimeFormat(props.locale, {
day: "numeric"
});
const fullDateFormat = new Intl.DateTimeFormat(props.locale, {
day: "numeric",
month: "short",
weekday: "short",
year: "numeric"
});
const longWeekdayFormat = new Intl.DateTimeFormat(props.locale, {
weekday: "long"
});
const narrowWeekdayFormat = new Intl.DateTimeFormat(props.locale, {
weekday: "narrow"
});
const max = props1.max ?? fromPartsToUtcDate(2100, 11, 31);
const min = props1.min ?? fromPartsToUtcDate(1900, 0, 1);
const calendarGrid = calendar({
date: props.date,
dayFormat,
disabledDates: props.disabledDates,
disabledDays: props.disabledDays,
firstDayOfWeek: props.firstDayOfWeek,
fullDateFormat,
locale: props.locale,
max,
min,
showWeekNumber: props.showWeekNumber,
weekNumberTemplate: props.weekNumberTemplate,
weekNumberType: props.weekNumberType
});
const serializedCalendarGrid = calendarGrid.toJSON();
const maybeWeekdaysWithWeekLabel = getWeekdays({
firstDayOfWeek: props.firstDayOfWeek,
longWeekdayFormat,
narrowWeekdayFormat,
shortWeekLabel: props.shortWeekLabel,
showWeekNumber: props.showWeekNumber,
weekLabel: props.weekLabel
});
const [weekNumber, ...weekdays] = [
...props.showWeekNumber ? [] : [
{
label: "",
value: ""
}
],
...maybeWeekdaysWithWeekLabel
];
const $node = useSignal();
useKeyboardEvent({
$node,
onKeyDown$: /* @__PURE__ */ inlinedQrl((ev) => {
if ([
" ",
"Enter",
"Tab"
].every((k) => ev.key !== k))
ev.preventDefault();
}, "QwikCalendar_component_useKeyboardEvent_MeFMtutZoC8"),
onKeyUp$: /* @__PURE__ */ inlinedQrl((ev) => {
const [props2, serializedCalendarGrid2] = useLexicalScope();
props2.onDateChangeByKey$?.(ev, serializedCalendarGrid2);
}, "QwikCalendar_component_useKeyboardEvent_1_y4KNa1QPAks", [
props,
serializedCalendarGrid
])
});
useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
const [$node2, props2] = useLexicalScope();
track(() => props2.date);
if ($node2.value)
for (const n of $node2.value.children) {
for (const o of n.children)
if (o.ariaSelected)
o.focus();
}
}, "QwikCalendar_component_useVisibleTask_044sQZdRK0w", [
$node,
props
]));
return /* @__PURE__ */ createElement("table", {
...props1,
class: [
"calendar",
props.class
],
is: "qwik-calendar",
key: calendarGrid.key,
style: {
"--_cols": maybeWeekdaysWithWeekLabel.length
},
children: [
/* @__PURE__ */ _jsxQ("caption", null, {
class: "caption"
}, [
"Selected date is ",
fullDateFormat.format(props.date)
], 1, "zm_0"),
/* @__PURE__ */ _jsxQ("thead", null, null, /* @__PURE__ */ _jsxQ("tr", null, null, [
props.showWeekNumber && /* @__PURE__ */ _jsxC(WeekLabel, {
render$: props.renderWeekLabel$,
weekLabel: weekNumber
}, 2, "zm_1"),
weekdays.map((wd, i) => {
_jsxBranch();
if (props.renderHeader$)
return /* @__PURE__ */ _jsxC(Weekday, {
render$: /* @__PURE__ */ inlinedQrl((init) => {
const [i2, props2] = useLexicalScope();
return props2.renderHeader$(init, i2);
}, "QwikCalendar_component__createElement_thead_tr_Weekday_render_IcUas1TzVY8", [
i,
props
]),
weekday: wd
}, 3, wd.value);
return /* @__PURE__ */ _jsxC(Weekday, {
weekday: wd
}, 3, wd.value);
})
], 1, null), 1, null),
/* @__PURE__ */ _jsxQ("tbody", {
ref: $node
}, null, calendarGrid.datesGrid.map((row, ri) => {
return /* @__PURE__ */ _jsxQ("tr", null, null, row.columns.map((col, ci) => {
const isWeekNumber = ci === 0 && props.showWeekNumber;
const baseProps = {
"aria-disabled": col.disabled,
as: isWeekNumber ? "th" : "td",
class: isWeekNumber ? "week-number" : "day",
init: {
col
}
};
if (isWeekNumber) {
if (props.renderWeekNumber$)
return /* @__PURE__ */ createElement(DataCell, {
...baseProps,
key: col.key,
render$: /* @__PURE__ */ inlinedQrl((init) => {
const [ci2, props2, ri2] = useLexicalScope();
return (0, props2.renderWeekNumber$)(init, ri2, ci2);
}, "QwikCalendar_component__createElement_tbody_tr__createElement_J0BG8rQYnp0", [
ci,
props,
ri
])
});
}
if (props.renderDataCell$)
return /* @__PURE__ */ createElement(DataCell, {
...baseProps,
key: col.key,
render$: /* @__PURE__ */ inlinedQrl((init) => {
const [ci2, props2, ri2] = useLexicalScope();
return (0, props2.renderDataCell$)(init, ri2, ci2);
}, "QwikCalendar_component__createElement_tbody_tr__createElement_1_uQWGuugqYzE", [
ci,
props,
ri
])
});
return /* @__PURE__ */ createElement(DataCell, {
...baseProps,
key: col.key
});
}), 1, row.key);
}), 1, null),
/* @__PURE__ */ _jsxQ("tfoot", null, null, null, 3, null)
]
});
}, "QwikCalendar_component_9UN0cRuCdSo"));
export {
QwikCalendar
};