@stonecrop/atable 0.34.0 → 0.36.0

package/dist/atable.js

@@ -1,8 +1,9 @@
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toValue, unref, useCssVars, useModel, useTemplateRef, vModelCheckbox, vModelSelect, vModelText, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
-import { defaultKeypressHandlers, useKeyboardNav } from "@stonecrop/utilities";
+import { defaultKeypressHandlers, fromISODate, useKeyboardNav } from "@stonecrop/utilities";
 import { componentCategory, hasBadgeOptions, isBadgeDescriptor } from "@stonecrop/schema";
 import { onClickOutside, useDebounceFn, useDraggable, useElementBounding, useMutationObserver, useResizeObserver } from "@vueuse/core";
 import { defineStore } from "pinia";
+import { Temporal } from "temporal-polyfill";
 import { vOnClickOutside, vResizeObserver } from "@vueuse/components";
 import './assets/index.css';//#region src/linkSearchableText.ts
 /**
@@ -46,6 +47,7 @@ var CATEGORY_FILTER = {
 	boolean: "checkbox",
 	date: "date",
 	datetime: "dateRange",
+	duration: "text",
 	select: "select",
 	code: "text",
 	link: "text",
@@ -121,6 +123,19 @@ function isNodeOpen(rowIndex, treeDisplay) {
 	if (parentIndex < 0 || parentIndex >= treeDisplay.length) return false;
 	return (treeDisplay[parentIndex].childrenOpen || false) && isNodeOpen(parentIndex, treeDisplay);
 }
+/**
+* The `YYYY-MM-DD` day a date cell shows as: a day column's day, a date-time's day in the user's zone,
+* and for a column declaring no date component, the UTC day its value parses to. Undefined when the
+* cell holds no date.
+*/
+function dayOfCell(cellValue, column) {
+	const category = componentCategory(column.component);
+	if (category === "date") return fromISODate(String(cellValue))?.toString();
+	const epochMilliseconds = new Date(String(cellValue)).getTime();
+	if (isNaN(epochMilliseconds)) return void 0;
+	const zone = category === "datetime" ? Temporal.Now.timeZoneId() : "UTC";
+	return Temporal.Instant.fromEpochMilliseconds(epochMilliseconds).toZonedDateTimeISO(zone).toPlainDate().toString();
+}
 function applyFilter(cellValue, filter, column) {
 	const filterType = resolveFilterType(column);
 	const value = filter.value;
@@ -136,28 +151,15 @@ function applyFilter(cellValue, filter, column) {
 		case "checkbox":
 			if (value === true) return !!cellValue;
 			return true;
-		case "date": {
-			let cellDate;
-			if (typeof cellValue === "number") {
-				const originalDate = new Date(cellValue);
-				const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-				cellDate = new Date(currentYear, originalDate.getMonth(), originalDate.getDate());
-			} else cellDate = new Date(String(cellValue));
-			const filterDate = new Date(String(value));
-			return cellDate.toDateString() === filterDate.toDateString();
-		}
+		case "date": return dayOfCell(cellValue, column) === String(value);
 		case "dateRange": {
 			const startValue = filter.startValue;
 			const endValue = filter.endValue;
 			if (!startValue && !endValue) return true;
-			let cellDateRange;
-			if (typeof cellValue === "number") {
-				const originalDate = new Date(cellValue);
-				const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-				cellDateRange = new Date(currentYear, originalDate.getMonth(), originalDate.getDate());
-			} else cellDateRange = new Date(String(cellValue));
-			if (startValue && cellDateRange < new Date(String(startValue))) return false;
-			if (endValue && cellDateRange > new Date(String(endValue))) return false;
+			const cellDay = dayOfCell(cellValue, column);
+			if (cellDay === void 0) return false;
+			if (startValue && cellDay < String(startValue)) return false;
+			if (endValue && cellDay > String(endValue)) return false;
 			return true;
 		}
 		default: return true;
@@ -410,7 +412,7 @@ var createTableStore = (initData) => {
 			if (!format) {
 				const category = componentCategory(column.component);
 				if (category === "boolean") return value ? "✓" : "✗";
-				if (category === "date") return value != null ? new Date(String(value)).toLocaleDateString() : value;
+				if (category === "date") return value != null ? fromISODate(String(value))?.toLocaleString() ?? "Invalid Date" : value;
 				if (category === "datetime") return value != null ? new Date(String(value)).toLocaleString() : value;
 				if (category === "quantity") return formatQuantity(value);
 				if (category === "currency") return formatCurrency(value);
@@ -1746,7 +1748,7 @@ var ARow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			}, void 0, true)], 8, _hoisted_3$4)], 8, _hoisted_2$6)) : createCommentVNode("", true)], 64);
 		};
 	}
-}), [["__scopeId", "data-v-f159cfbe"]]);
+}), [["__scopeId", "data-v-e0056486"]]);
 //#endregion
 //#region src/components/AGanttConnection.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$6 = { class: "gantt-connection-overlay" };
@@ -2016,7 +2018,7 @@ var ATableColumnFilter_default = /*#__PURE__*/ _plugin_vue_export_helper_default
 			}, "×")) : createCommentVNode("", true)]);
 		};
 	}
-}), [["__scopeId", "data-v-f9c23db9"]]);
+}), [["__scopeId", "data-v-fc482b5d"]]);
 //#endregion
 //#region src/components/ATableHeader.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$4 = { key: 0 };
@@ -2136,19 +2138,19 @@ var ATableModal_default = /* @__PURE__ */ defineComponent({
 	props: { store: {} },
 	setup(__props) {
 		const amodalRef = useTemplateRef("amodal");
-		const { width: modalWidth, height: modalHeight } = useElementBounding(amodalRef);
+		const { width: modalWidth } = useElementBounding(amodalRef);
 		const amodalStyles = computed(() => {
 			if (!(__props.store.modal.height && __props.store.modal.width && __props.store.modal.left && __props.store.modal.bottom)) return {};
-			const table = __props.store.modal.cell?.closest("table");
-			if (!table) return {};
-			const maxHeight = table.offsetHeight || 0;
-			const maxWidth = table.offsetWidth || 0;
-			let modalY = __props.store.modal.cell?.offsetTop || 0;
-			const headerHeight = table.querySelector("thead")?.offsetHeight || 0;
-			modalY += headerHeight;
-			modalY = modalY + modalHeight.value < maxHeight ? modalY : modalY - (modalHeight.value + __props.store.modal.height);
-			let modalX = __props.store.modal.cell?.offsetLeft || 0;
-			modalX = modalX + modalWidth.value <= maxWidth ? modalX : modalX - (modalWidth.value - __props.store.modal.width);
+			const cell = __props.store.modal.cell;
+			if (!cell) return {};
+			const container = cell.closest(".atable-container") ?? cell.closest("table");
+			if (!(container instanceof HTMLElement)) return {};
+			const cellRect = cell.getBoundingClientRect();
+			const containerRect = container.getBoundingClientRect();
+			const modalY = cellRect.bottom - containerRect.top;
+			let modalX = cellRect.left - containerRect.left;
+			const maxWidth = container.clientWidth || containerRect.width;
+			if (modalWidth.value && modalX + modalWidth.value > maxWidth) modalX = Math.max(0, maxWidth - modalWidth.value);
 			return {
 				left: `${modalX}px`,
 				top: `${modalY}px`
@@ -2658,107 +2660,110 @@ var ATable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			moveRow: store.moveRow
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$2, [withDirectives((openBlock(), createElementBlock("table", {
-				ref: "table",
-				class: "atable",
-				style: normalizeStyle({ width: unref(store).config.fullWidth ? "100%" : "auto" })
-			}, [
-				renderSlot(_ctx.$slots, "header", { data: unref(store) }, () => [createVNode(ATableHeader_default, {
-					columns: unref(store).columns,
-					store: unref(store)
-				}, null, 8, ["columns", "store"])], true),
-				createElementVNode("tbody", null, [renderSlot(_ctx.$slots, "body", { data: unref(store) }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleRows), (row, filteredIndex) => {
-					return openBlock(), createBlock(ARow_default, {
-						key: `${row.originalIndex}-${filteredIndex}`,
-						row,
-						"row-index": row.originalIndex,
-						store: unref(store),
-						"onRow:action": handleRowAction,
-						"onRow:click": handleRowClick
-					}, {
-						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(getProcessedColumnsForRow(row), (column, colIndex) => {
-							return openBlock(), createElementBlock(Fragment, { key: column.name }, [column.isGantt ? (openBlock(), createBlock(resolveDynamicComponent(column.ganttComponent || "AGanttCell"), {
-								key: 0,
-								store: unref(store),
-								"columns-count": unref(store).columns.length - pinnedColumnCount.value,
-								color: row.gantt?.color,
-								start: row.gantt?.startIndex,
-								end: row.gantt?.endIndex,
-								colspan: column.colspan,
-								pinned: column.pinned,
-								"row-index": row.originalIndex,
-								"col-index": column.originalIndex ?? colIndex,
-								style: normalizeStyle({
-									textAlign: column?.align || "center",
-									minWidth: column?.width || "40ch",
-									width: unref(store).config.fullWidth ? "auto" : null
-								}),
-								"onConnection:create": handleConnectionCreate
-							}, null, 40, [
-								"store",
-								"columns-count",
-								"color",
-								"start",
-								"end",
-								"colspan",
-								"pinned",
-								"row-index",
-								"col-index",
-								"style"
-							])) : (openBlock(), createBlock(resolveDynamicComponent(column.cellComponent || "ACell"), {
-								key: 1,
-								store: unref(store),
-								pinned: column.pinned,
-								"row-index": row.originalIndex,
-								"col-index": colIndex,
-								style: normalizeStyle({
-									textAlign: column?.align || "center",
-									width: unref(store).config.fullWidth ? "auto" : null
-								}),
-								spellcheck: "false"
-							}, null, 8, [
-								"store",
-								"pinned",
-								"row-index",
-								"col-index",
-								"style"
-							]))], 64);
-						}), 128))]),
-						_: 2
-					}, 1032, [
-						"row",
-						"row-index",
-						"store"
-					]);
-				}), 128))], true)]),
-				renderSlot(_ctx.$slots, "footer", {
-					data: unref(store),
-					page: unref(pagination)
-				}, () => [createVNode(ATablePaginationFooter_default, {
-					"column-count": footerColumnCount.value,
-					"show-footer": unref(showFooter),
-					"has-more": unref(hasMore),
-					"has-prev": unref(hasPrev),
-					"has-next": unref(hasNext),
-					"has-local-next": unref(hasLocalNext),
-					"has-ever-had-more": unref(hasEverHadMore),
-					"loaded-count": unref(loadedCount),
-					loading: unref(paginationLoading),
-					next: unref(paginationNext),
-					prev: unref(paginationPrev)
-				}, null, 8, [
-					"column-count",
-					"show-footer",
-					"has-more",
-					"has-prev",
-					"has-next",
-					"has-local-next",
-					"has-ever-had-more",
-					"loaded-count",
-					"loading",
-					"next",
-					"prev"
-				])], true),
+			return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$2, [
+				createElementVNode("table", {
+					ref: "table",
+					class: normalizeClass(["atable", { "atable--zebra": unref(store).config.zebra }]),
+					style: normalizeStyle({ width: unref(store).config.fullWidth ? "100%" : "auto" })
+				}, [
+					renderSlot(_ctx.$slots, "header", { data: unref(store) }, () => [createVNode(ATableHeader_default, {
+						columns: unref(store).columns,
+						store: unref(store)
+					}, null, 8, ["columns", "store"])], true),
+					createElementVNode("tbody", null, [renderSlot(_ctx.$slots, "body", { data: unref(store) }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleRows), (row, filteredIndex) => {
+						return openBlock(), createBlock(ARow_default, {
+							key: `${row.originalIndex}-${filteredIndex}`,
+							row,
+							"row-index": row.originalIndex,
+							store: unref(store),
+							"onRow:action": handleRowAction,
+							"onRow:click": handleRowClick
+						}, {
+							content: withCtx((slotProps) => [renderSlot(_ctx.$slots, "content", mergeProps({ ref_for: true }, slotProps), void 0, true)]),
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(getProcessedColumnsForRow(row), (column, colIndex) => {
+								return openBlock(), createElementBlock(Fragment, { key: column.name }, [column.isGantt ? (openBlock(), createBlock(resolveDynamicComponent(column.ganttComponent || "AGanttCell"), {
+									key: 0,
+									store: unref(store),
+									"columns-count": unref(store).columns.length - pinnedColumnCount.value,
+									color: row.gantt?.color,
+									start: row.gantt?.startIndex,
+									end: row.gantt?.endIndex,
+									colspan: column.colspan,
+									pinned: column.pinned,
+									"row-index": row.originalIndex,
+									"col-index": column.originalIndex ?? colIndex,
+									style: normalizeStyle({
+										textAlign: column?.align || "center",
+										minWidth: column?.width || "40ch",
+										width: unref(store).config.fullWidth ? "auto" : null
+									}),
+									"onConnection:create": handleConnectionCreate
+								}, null, 40, [
+									"store",
+									"columns-count",
+									"color",
+									"start",
+									"end",
+									"colspan",
+									"pinned",
+									"row-index",
+									"col-index",
+									"style"
+								])) : (openBlock(), createBlock(resolveDynamicComponent(column.cellComponent || "ACell"), {
+									key: 1,
+									store: unref(store),
+									pinned: column.pinned,
+									"row-index": row.originalIndex,
+									"col-index": colIndex,
+									style: normalizeStyle({
+										textAlign: column?.align || "center",
+										width: unref(store).config.fullWidth ? "auto" : null
+									}),
+									spellcheck: "false"
+								}, null, 8, [
+									"store",
+									"pinned",
+									"row-index",
+									"col-index",
+									"style"
+								]))], 64);
+							}), 128))]),
+							_: 2
+						}, 1032, [
+							"row",
+							"row-index",
+							"store"
+						]);
+					}), 128))], true)]),
+					renderSlot(_ctx.$slots, "footer", {
+						data: unref(store),
+						page: unref(pagination)
+					}, () => [createVNode(ATablePaginationFooter_default, {
+						"column-count": footerColumnCount.value,
+						"show-footer": unref(showFooter),
+						"has-more": unref(hasMore),
+						"has-prev": unref(hasPrev),
+						"has-next": unref(hasNext),
+						"has-local-next": unref(hasLocalNext),
+						"has-ever-had-more": unref(hasEverHadMore),
+						"loaded-count": unref(loadedCount),
+						loading: unref(paginationLoading),
+						next: unref(paginationNext),
+						prev: unref(paginationPrev)
+					}, null, 8, [
+						"column-count",
+						"show-footer",
+						"has-more",
+						"has-prev",
+						"has-next",
+						"has-local-next",
+						"has-ever-had-more",
+						"loaded-count",
+						"loading",
+						"next",
+						"prev"
+					])], true)
+				], 6),
 				renderSlot(_ctx.$slots, "modal", { data: unref(store) }, () => [withDirectives(createVNode(ATableModal_default, { store: unref(store) }, {
 					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(store).modal.component), mergeProps({
 						key: `${unref(store).modal.rowIndex}:${unref(store).modal.colIndex}`,
@@ -2771,15 +2776,16 @@ var ATable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 						"store"
 					]))]),
 					_: 1
-				}, 8, ["store"]), [[vShow, unref(store).modal.visible]])], true)
-			], 4)), [[unref(vOnClickOutside), unref(store).closeModal]]), unref(store).isGanttView && unref(store).isDependencyGraphEnabled ? (openBlock(), createBlock(AGanttConnection_default, {
-				key: 0,
-				store: unref(store),
-				"onConnection:delete": handleConnectionDelete
-			}, null, 8, ["store"])) : createCommentVNode("", true)]);
+				}, 8, ["store"]), [[vShow, unref(store).modal.visible]])], true),
+				unref(store).isGanttView && unref(store).isDependencyGraphEnabled ? (openBlock(), createBlock(AGanttConnection_default, {
+					key: 0,
+					store: unref(store),
+					"onConnection:delete": handleConnectionDelete
+				}, null, 8, ["store"])) : createCommentVNode("", true)
+			])), [[unref(vOnClickOutside), unref(store).closeModal]]);
 		};
 	}
-}), [["__scopeId", "data-v-53c8fbad"]]);
+}), [["__scopeId", "data-v-a1149691"]]);
 //#endregion
 //#region src/components/ATableLoading.vue
 var _sfc_main$1 = {};
@@ -2788,7 +2794,7 @@ var _hoisted_2$1 = { class: "aloading-header" };
 function _sfc_render$1(_ctx, _cache) {
 	return openBlock(), createElementBlock("div", _hoisted_1$1, [createElementVNode("h2", _hoisted_2$1, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), _cache[0] || (_cache[0] = createElementVNode("div", { class: "aloading-bar" }, null, -1))]);
 }
-var ATableLoading_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-a930a25b"]]);
+var ATableLoading_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-6353ec92"]]);
 //#endregion
 //#region src/components/ATableLoadingBar.vue
 var _sfc_main = {};
@@ -2797,7 +2803,7 @@ var _hoisted_2 = { class: "aloading-header" };
 function _sfc_render(_ctx, _cache) {
 	return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("h2", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), _cache[0] || (_cache[0] = createElementVNode("div", { class: "aloading-bar" }, null, -1))]);
 }
-var ATableLoadingBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e1165876"]]);
+var ATableLoadingBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1daa5d43"]]);
 //#endregion
 //#region src/index.ts
 /**