@threadlabs/looma 0.19.1 → 0.21.0

package/vue/chunks/UiEditorTableOverlay.js

@@ -1,10 +1,14 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
-import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-editor-table-overlay/ui-editor-table-overlay.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, h, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, watchSyncEffect, withCtx } from "vue";
 //#region .build/vue/UiEditorTableOverlay.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["hidden"];
+var _hoisted_1 = [
+	"hidden",
+	"data-geometry",
+	"data-open"
+];
 var _hoisted_2 = { class: "rows" };
 var _hoisted_3 = ["data-control-key"];
 var _hoisted_4 = [
@@ -40,15 +44,233 @@ var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 	inheritAttrs: false,
 	__name: "UiEditorTableOverlay",
 	props: {
-		geometry: {},
+		geometry: {
+			type: null,
+			default: null
+		},
 		open: {
-			type: Boolean,
+			type: null,
 			default: false
 		}
 	},
-	emits: ["action"],
+	emits: [
+		"add-row-before",
+		"add-row-after",
+		"add-column-before",
+		"add-column-after",
+		"select-row",
+		"select-column",
+		"reorder-row",
+		"reorder-column",
+		"open-cell-menu",
+		"open-row-menu",
+		"open-column-menu"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			geometry: checkedProp(props["geometry"], {
+				kind: "object",
+				fields: [
+					{
+						name: "rowBoundaries",
+						type: {
+							kind: "list",
+							item: {
+								kind: "terminal",
+								name: "number"
+							}
+						},
+						optional: false
+					},
+					{
+						name: "columnBoundaries",
+						type: {
+							kind: "list",
+							item: {
+								kind: "terminal",
+								name: "number"
+							}
+						},
+						optional: false
+					},
+					{
+						name: "activeCell",
+						type: {
+							kind: "union",
+							members: [{
+								kind: "object",
+								fields: [
+									{
+										name: "left",
+										type: {
+											kind: "terminal",
+											name: "number"
+										},
+										optional: false
+									},
+									{
+										name: "top",
+										type: {
+											kind: "terminal",
+											name: "number"
+										},
+										optional: false
+									},
+									{
+										name: "width",
+										type: {
+											kind: "terminal",
+											name: "number"
+										},
+										optional: false
+									},
+									{
+										name: "height",
+										type: {
+											kind: "terminal",
+											name: "number"
+										},
+										optional: false
+									},
+									{
+										name: "rowIndex",
+										type: {
+											kind: "terminal",
+											name: "integer"
+										},
+										optional: false
+									},
+									{
+										name: "columnIndex",
+										type: {
+											kind: "terminal",
+											name: "integer"
+										},
+										optional: false
+									}
+								],
+								open: false
+							}, {
+								kind: "terminal",
+								name: "null"
+							}]
+						},
+						optional: false
+					},
+					{
+						name: "hoveredCell",
+						type: {
+							kind: "union",
+							members: [{
+								kind: "object",
+								fields: [
+									{
+										name: "left",
+										type: {
+											kind: "terminal",
+											name: "number"
+										},
+										optional: false
+									},
+									{
+										name: "top",
+										type: {
+											kind: "terminal",
+											name: "number"
+										},
+										optional: false
+									},
+									{
+										name: "width",
+										type: {
+											kind: "terminal",
+											name: "number"
+										},
+										optional: false
+									},
+									{
+										name: "height",
+										type: {
+											kind: "terminal",
+											name: "number"
+										},
+										optional: false
+									},
+									{
+										name: "rowIndex",
+										type: {
+											kind: "terminal",
+											name: "integer"
+										},
+										optional: false
+									},
+									{
+										name: "columnIndex",
+										type: {
+											kind: "terminal",
+											name: "integer"
+										},
+										optional: false
+									}
+								],
+								open: false
+							}, {
+								kind: "terminal",
+								name: "null"
+							}]
+						},
+						optional: true
+					}
+				],
+				open: false
+			}, false, "geometry", void 0, void 0),
+			open: checkedProp(props["open"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "open", void 0, void 0)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const KeyedFailure = defineComponent({
+			props: { error: {
+				type: null,
+				required: true
+			} },
+			setup(props) {
+				return () => {
+					throw props.error;
+				};
+			}
+		});
+		const KeyedBoundary = defineComponent({ setup(_props, { slots }) {
+			let last = [];
+			return () => {
+				try {
+					last = slots.default?.() ?? [];
+					return last;
+				} catch (error) {
+					if (!(error instanceof Error) || error.diagnostic?.code !== "HR004") throw error;
+					if (typeof window === "undefined") throw error;
+					return [...last, h(KeyedFailure, { error })];
+				}
+			};
+		} });
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
 		const rows = ref([]);
@@ -56,30 +278,78 @@ var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		const hovered = ref(null);
 		const active = ref(null);
 		const activeKey = ref("");
-		const isActionDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "add-row-before" || detail["action"] === "add-row-after" || detail["action"] === "add-column-before" || detail["action"] === "add-column-after") && Number.isInteger(detail["boundaryIndex"]) && Object.keys(detail).every((key) => ["action", "boundaryIndex"].includes(key)) || detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "select-row" || detail["action"] === "select-column") && Number.isInteger(detail["rowIndex"]) && Number.isInteger(detail["columnIndex"]) && Object.keys(detail).every((key) => [
-			"action",
-			"rowIndex",
-			"columnIndex"
-		].includes(key)) || detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "reorder-row" || detail["action"] === "reorder-column") && Number.isInteger(detail["fromIndex"]) && Number.isInteger(detail["toIndex"]) && Object.keys(detail).every((key) => [
-			"action",
-			"fromIndex",
-			"toIndex"
-		].includes(key)) || detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "open-cell-menu" || detail["action"] === "open-row-menu" || detail["action"] === "open-column-menu") && Number.isInteger(detail["rowIndex"]) && Number.isInteger(detail["columnIndex"]) && detail["anchor"] !== null && typeof detail["anchor"] === "object" && !Array.isArray(detail["anchor"]) && typeof detail["anchor"]["left"] === "number" && Number.isFinite(detail["anchor"]["left"]) && typeof detail["anchor"]["top"] === "number" && Number.isFinite(detail["anchor"]["top"]) && typeof detail["anchor"]["right"] === "number" && Number.isFinite(detail["anchor"]["right"]) && typeof detail["anchor"]["bottom"] === "number" && Number.isFinite(detail["anchor"]["bottom"]) && Object.keys(detail["anchor"]).every((key) => [
+		let guardedPrevious;
+		const guarded = computed(() => {
+			if (!(hovered.value?.["rowIndex"] == null || Number.isInteger(hovered.value?.["rowIndex"]))) return guardedPrevious;
+			return guardedPrevious = hovered.value?.rowIndex;
+		});
+		let guardedBindingPrevious;
+		const guardedBinding = computed(() => {
+			if (!(hovered.value?.["columnIndex"] == null || Number.isInteger(hovered.value?.["columnIndex"]))) return guardedBindingPrevious;
+			return guardedBindingPrevious = hovered.value?.columnIndex;
+		});
+		let guardedBinding2Previous;
+		const guardedBinding2 = computed(() => {
+			if (!(hovered.value?.["rowIndex"] == null || Number.isInteger(hovered.value?.["rowIndex"]))) return guardedBinding2Previous;
+			return guardedBinding2Previous = hovered.value?.rowIndex;
+		});
+		let guardedBinding3Previous;
+		const guardedBinding3 = computed(() => {
+			if (!(hovered.value?.["columnIndex"] == null || Number.isInteger(hovered.value?.["columnIndex"]))) return guardedBinding3Previous;
+			return guardedBinding3Previous = hovered.value?.columnIndex;
+		});
+		let guardedBinding4Previous;
+		const guardedBinding4 = computed(() => {
+			if (!(active.value?.["rowIndex"] == null || Number.isInteger(active.value?.["rowIndex"]))) return guardedBinding4Previous;
+			return guardedBinding4Previous = active.value?.rowIndex;
+		});
+		let guardedBinding5Previous;
+		const guardedBinding5 = computed(() => {
+			if (!(active.value?.["columnIndex"] == null || Number.isInteger(active.value?.["columnIndex"]))) return guardedBinding5Previous;
+			return guardedBinding5Previous = active.value?.columnIndex;
+		});
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-editor-table-overlay> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-editor-table-overlay> has an incompatible root."
+			})
+		});
+		const isAddRowBeforeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["boundaryIndex"]) && Object.keys(detail).every((key) => ["boundaryIndex"].includes(key));
+		const isSelectRowDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["rowIndex"]) && Number.isInteger(detail["columnIndex"]) && Object.keys(detail).every((key) => ["rowIndex", "columnIndex"].includes(key));
+		const isReorderRowDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["fromIndex"]) && Number.isInteger(detail["toIndex"]) && Object.keys(detail).every((key) => ["fromIndex", "toIndex"].includes(key));
+		const isOpenCellMenuDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["rowIndex"]) && Number.isInteger(detail["columnIndex"]) && detail["anchor"] !== null && typeof detail["anchor"] === "object" && !Array.isArray(detail["anchor"]) && typeof detail["anchor"]["left"] === "number" && Number.isFinite(detail["anchor"]["left"]) && typeof detail["anchor"]["top"] === "number" && Number.isFinite(detail["anchor"]["top"]) && typeof detail["anchor"]["right"] === "number" && Number.isFinite(detail["anchor"]["right"]) && typeof detail["anchor"]["bottom"] === "number" && Number.isFinite(detail["anchor"]["bottom"]) && Object.keys(detail["anchor"]).every((key) => [
 			"left",
 			"top",
 			"right",
 			"bottom"
 		].includes(key)) && Object.keys(detail).every((key) => [
-			"action",
 			"rowIndex",
 			"columnIndex",
 			"anchor"
 		].includes(key));
-		const dispatch = createDispatch(root, emit, { checks: { action: isActionDetail } });
-		useComponentHost(controllerModule.default, {
+		const dispatch = createDispatch(root, emit, { checks: {
+			"add-row-before": isAddRowBeforeDetail,
+			"add-row-after": isAddRowBeforeDetail,
+			"add-column-before": isAddRowBeforeDetail,
+			"add-column-after": isAddRowBeforeDetail,
+			"select-row": isSelectRowDetail,
+			"select-column": isSelectRowDetail,
+			"reorder-row": isReorderRowDetail,
+			"reorder-column": isReorderRowDetail,
+			"open-cell-menu": isOpenCellMenuDetail,
+			"open-row-menu": isOpenCellMenuDetail,
+			"open-column-menu": isOpenCellMenuDetail
+		} });
+		useComponentHost(() => import("@threadlabs/looma/components/ui-editor-table-overlay/ui-editor-table-overlay.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-editor-table-overlay/ui-editor-table-overlay.js",
+				definition: "./components/ui-editor-table-overlay/ui-editor-table-overlay.html"
+			},
+			props: checkedProps,
 			state: {
 				rows,
 				cols,
@@ -88,85 +358,120 @@ var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 				activeKey
 			}
 		});
+		function text(value) {
+			if (Array.isArray(value)) return value.map(text).join(" ");
+			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
+		}
+		function uniqueKeys(items, keyOf) {
+			const seen = /* @__PURE__ */ new Set();
+			for (let index = 0; index < items.length; index += 1) {
+				const key = keyOf(items[index], index, {
+					index,
+					first: index === 0,
+					last: index === items.length - 1,
+					count: items.length
+				});
+				if (seen.has(key)) {
+					const message = `A keyed list produced duplicate key \`${text(key)}\`.`;
+					throw Object.assign(/* @__PURE__ */ new Error(`HR004: ${message}`), {
+						name: "HtmlDiagnosticError",
+						diagnostic: Object.freeze({
+							code: "HR004",
+							message
+						})
+					});
+				}
+				seen.add(key);
+			}
+			return items;
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-editor-table-overlay",
 				"aria-label": "Table controls"
-			}, _ctx.$attrs, {
-				hidden: !__props.open,
+			}, nativeAttrs(_ctx.$attrs), {
+				hidden: !checkedProps.value.open,
+				"data-geometry": reflectedProp("geometry", "geometry", checkedProps.value.geometry, void 0, false),
+				"data-open": reflectedProp("open", "open", checkedProps.value.open, void 0, false),
 				ref_key: "root",
 				ref: root
 			}), [
-				createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (control) => {
-					return openBlock(), createElementBlock("div", {
-						key: control.key,
-						class: normalizeClass(["control row", { active: control.key === activeKey.value }]),
-						"data-control-key": control.key,
-						style: normalizeStyle({ top: control.offset })
-					}, [
-						_cache[0] || (_cache[0] = createElementVNode("span", {
-							class: "line",
-							"aria-hidden": "true"
-						}, null, -1)),
-						_cache[1] || (_cache[1] = createElementVNode("span", {
-							class: "guide",
-							"data-ui-guide": "",
-							"aria-hidden": "true"
-						}, null, -1)),
-						createElementVNode("button", {
-							type: "button",
-							class: "handle",
-							"data-ui-affordance": control.affordance,
-							"data-action": control.action,
-							"data-boundary-index": control.index,
-							"aria-label": control.label
-						}, [createVNode(UiIcon_default, { name: "plus" }), createElementVNode("span", _hoisted_5, toDisplayString(control.label), 1)], 8, _hoisted_4)
-					], 14, _hoisted_3);
-				}), 128))]),
-				createElementVNode("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(cols.value, (control) => {
-					return openBlock(), createElementBlock("div", {
-						key: control.key,
-						class: normalizeClass(["control col", { active: control.key === activeKey.value }]),
-						"data-control-key": control.key,
-						style: normalizeStyle({ left: control.offset })
-					}, [
-						_cache[2] || (_cache[2] = createElementVNode("span", {
-							class: "line",
-							"aria-hidden": "true"
-						}, null, -1)),
-						_cache[3] || (_cache[3] = createElementVNode("span", {
-							class: "guide",
-							"data-ui-guide": "",
-							"aria-hidden": "true"
-						}, null, -1)),
-						createElementVNode("button", {
-							type: "button",
-							class: "handle",
-							"data-ui-affordance": control.affordance,
-							"data-action": control.action,
-							"data-boundary-index": control.index,
-							"aria-label": control.label
-						}, [createVNode(UiIcon_default, { name: "plus" }), createElementVNode("span", _hoisted_9, toDisplayString(control.label), 1)], 8, _hoisted_8)
-					], 14, _hoisted_7);
-				}), 128))]),
+				createElementVNode("div", _hoisted_2, [createVNode(unref(KeyedBoundary), null, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(rows.value, (control, index, loop) => control.key), (control) => {
+						return openBlock(), createElementBlock("div", {
+							key: control.key,
+							class: normalizeClass(["control row", { active: control.key === activeKey.value }]),
+							"data-control-key": control.key,
+							style: normalizeStyle({ top: control.offset })
+						}, [
+							_cache[0] || (_cache[0] = createElementVNode("span", {
+								class: "line",
+								"aria-hidden": "true"
+							}, null, -1)),
+							_cache[1] || (_cache[1] = createElementVNode("span", {
+								class: "guide",
+								"data-ui-guide": "",
+								"aria-hidden": "true"
+							}, null, -1)),
+							createElementVNode("button", {
+								type: "button",
+								class: "handle",
+								"data-ui-affordance": control.affordance,
+								"data-action": control.action,
+								"data-boundary-index": control.index,
+								"aria-label": control.label
+							}, [createVNode(UiIcon_default, { name: "plus" }), createElementVNode("span", _hoisted_5, toDisplayString(control.label), 1)], 8, _hoisted_4)
+						], 14, _hoisted_3);
+					}), 128))]),
+					_: 1
+				})]),
+				createElementVNode("div", _hoisted_6, [createVNode(unref(KeyedBoundary), null, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(cols.value, (control, indexLoop, loop) => control.key), (control) => {
+						return openBlock(), createElementBlock("div", {
+							key: control.key,
+							class: normalizeClass(["control col", { active: control.key === activeKey.value }]),
+							"data-control-key": control.key,
+							style: normalizeStyle({ left: control.offset })
+						}, [
+							_cache[2] || (_cache[2] = createElementVNode("span", {
+								class: "line",
+								"aria-hidden": "true"
+							}, null, -1)),
+							_cache[3] || (_cache[3] = createElementVNode("span", {
+								class: "guide",
+								"data-ui-guide": "",
+								"aria-hidden": "true"
+							}, null, -1)),
+							createElementVNode("button", {
+								type: "button",
+								class: "handle",
+								"data-ui-affordance": control.affordance,
+								"data-action": control.action,
+								"data-boundary-index": control.index,
+								"aria-label": control.label
+							}, [createVNode(UiIcon_default, { name: "plus" }), createElementVNode("span", _hoisted_9, toDisplayString(control.label), 1)], 8, _hoisted_8)
+						], 14, _hoisted_7);
+					}), 128))]),
+					_: 1
+				})]),
 				hovered.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("button", {
 					type: "button",
 					class: "selector row",
 					"data-action": "select-row",
 					title: "Drag row to reorder; click for actions",
 					"aria-label": "Row actions",
-					"data-row-index": hovered.value?.rowIndex,
-					"data-column-index": hovered.value?.columnIndex,
-					style: normalizeStyle({ top: hovered.value?.rowOffset })
+					"data-row-index": guarded.value,
+					"data-column-index": guardedBinding.value,
+					style: normalizeStyle({ top: hovered.value?.rowOffset ?? void 0 })
 				}, [createElementVNode("span", _hoisted_11, [createVNode(UiIcon_default, { name: "grip-vertical" })])], 12, _hoisted_10), createElementVNode("button", {
 					type: "button",
 					class: "selector column",
 					"data-action": "select-column",
 					title: "Drag column to reorder; click for actions",
 					"aria-label": "Column actions",
-					"data-row-index": hovered.value?.rowIndex,
-					"data-column-index": hovered.value?.columnIndex,
-					style: normalizeStyle({ left: hovered.value?.columnOffset })
+					"data-row-index": guardedBinding2.value,
+					"data-column-index": guardedBinding3.value,
+					style: normalizeStyle({ left: hovered.value?.columnOffset ?? void 0 })
 				}, [createElementVNode("span", _hoisted_13, [createVNode(UiIcon_default, { name: "grip-horizontal" })])], 12, _hoisted_12)], 64)) : createCommentVNode("v-if", true),
 				active.value ? (openBlock(), createElementBlock("button", {
 					key: 1,
@@ -175,11 +480,11 @@ var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 					"data-action": "open-cell-menu",
 					title: "Cell actions",
 					"aria-label": "Cell actions",
-					"data-row-index": active.value?.rowIndex,
-					"data-column-index": active.value?.columnIndex,
+					"data-row-index": guardedBinding4.value,
+					"data-column-index": guardedBinding5.value,
 					style: normalizeStyle({
-						left: active.value?.menuLeft,
-						top: active.value?.menuTop
+						left: active.value?.menuLeft ?? void 0,
+						top: active.value?.menuTop ?? void 0
 					})
 				}, [createVNode(UiIcon_default, { name: "chevron-down" })], 12, _hoisted_14)) : createCommentVNode("v-if", true),
 				_cache[4] || (_cache[4] = createElementVNode("span", {
@@ -191,6 +496,6 @@ var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-914e1f1d"]]);
+}), [["__scopeId", "data-v-12c44c00"]]);
 //#endregion
 export { UiEditorTableOverlay_default as t };