@atscript/vue-table 0.1.58

package/dist/as-preset-picker-BQbNEiy9.mjs

@@ -0,0 +1,427 @@
+import { a as useTableContext } from "./use-table-state-C4JbonEZ.mjs";
+import { a as readPresetLabel, i as ownerNameOf, n as ASPECT_LABELS, r as aspectsOf, t as ASPECT_ICONS } from "./preset-aspect-display-BYeiSgcc.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, onScopeDispose, openBlock, ref, renderList, toDisplayString, unref, vModelCheckbox, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { isSystemPresetId } from "@atscript/ui-table";
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger } from "reka-ui";
+//#region src/components/as-preset-picker.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = {
+	type: "button",
+	class: "as-preset-picker-trigger"
+};
+const _hoisted_2 = { class: "as-preset-picker-trigger-label" };
+const _hoisted_3 = {
+	key: 0,
+	class: "as-preset-picker-trigger-dirty"
+};
+const _hoisted_4 = {
+	key: 1,
+	class: "as-preset-picker-section"
+};
+const _hoisted_5 = {
+	key: 0,
+	class: "as-preset-picker-section-header"
+};
+const _hoisted_6 = { class: "as-preset-picker-item-label" };
+const _hoisted_7 = {
+	key: 0,
+	class: "as-preset-picker-item-meta"
+};
+const _hoisted_8 = { class: "as-preset-picker-item-aspects" };
+const _hoisted_9 = ["data-on", "title"];
+const _hoisted_10 = { class: "as-preset-picker-popover-field" };
+const _hoisted_11 = ["onKeydown"];
+const _hoisted_12 = { class: "as-preset-picker-popover-aspects" };
+const _hoisted_13 = ["checked", "onChange"];
+const _hoisted_14 = { class: "as-preset-picker-popover-public" };
+const _hoisted_15 = { class: "as-preset-picker-popover-footer" };
+const _hoisted_16 = ["disabled"];
+//#endregion
+//#region src/components/as-preset-picker.vue
+var as_preset_picker_default = /* @__PURE__ */ defineComponent({
+	__name: "as-preset-picker",
+	setup(__props) {
+		const { state } = useTableContext();
+		const open = ref(false);
+		const saveAsOpen = ref(false);
+		const saveAsLabel = ref("");
+		const saveAsPublic = ref(false);
+		const saveAsAspectsMask = ref({});
+		const saveAsInputRef = ref(null);
+		const FORM_TAGS = new Set([
+			"INPUT",
+			"BUTTON",
+			"TEXTAREA",
+			"SELECT"
+		]);
+		let focusStickListener = null;
+		function disposeFocusStick() {
+			if (focusStickListener !== null) {
+				document.removeEventListener("focusin", focusStickListener, true);
+				focusStickListener = null;
+			}
+		}
+		onScopeDispose(disposeFocusStick);
+		watch(saveAsOpen, (open) => {
+			disposeFocusStick();
+			if (!open) return;
+			let popover = null;
+			const stickFocus = (event) => {
+				const input = saveAsInputRef.value;
+				if (!input) return;
+				if (event && event.target === input) return;
+				if (popover === null) popover = input.closest(".as-preset-picker-popover");
+				const target = event?.target ?? document.activeElement;
+				if (target instanceof HTMLElement && popover?.contains(target) && FORM_TAGS.has(target.tagName)) return;
+				input.focus();
+				input.select();
+			};
+			focusStickListener = stickFocus;
+			nextTick(() => stickFocus());
+			document.addEventListener("focusin", stickFocus, true);
+		});
+		const aspects = computed(() => state.preset.availableAspects);
+		function resetSaveAsForm() {
+			const base = activePresetLabel.value;
+			saveAsLabel.value = base ? `Copy of ${base}` : "";
+			saveAsPublic.value = false;
+			const claimed = activePresetClaimedAspects.value;
+			const initial = {};
+			for (const a of aspects.value) initial[a] = claimed.has(a);
+			saveAsAspectsMask.value = initial;
+		}
+		const activePresetClaimedAspects = computed(() => {
+			const id = state.preset.activeId.value;
+			if (!id || isSystemPresetId(id)) return new Set(aspects.value);
+			const row = state.preset.presetsById.value.get(id);
+			if (!row) return new Set(aspects.value);
+			return new Set(aspectsOf(row, aspects.value));
+		});
+		function openSaveAs() {
+			resetSaveAsForm();
+			saveAsOpen.value = true;
+		}
+		function cancelSaveAs() {
+			saveAsOpen.value = false;
+		}
+		async function commitSaveAs() {
+			const label = saveAsLabel.value.trim();
+			if (!label) return;
+			try {
+				await state.preset.saveAs(label, {
+					aspects: saveAsAspectsMask.value,
+					public: saveAsPublic.value
+				});
+				saveAsOpen.value = false;
+				open.value = false;
+			} catch (_err) {}
+		}
+		function authorMeta(row) {
+			const name = ownerNameOf(row);
+			return name ? `· ${name}` : "";
+		}
+		function systemItem(p, fav) {
+			return {
+				id: p.id,
+				label: p.label,
+				system: true,
+				fav,
+				aspects: [...state.preset.availableAspects]
+			};
+		}
+		function storedItem(row, fav, meta) {
+			return {
+				id: row.id,
+				label: readPresetLabel(row),
+				fav,
+				meta,
+				aspects: aspectsOf(row, state.preset.availableAspects)
+			};
+		}
+		const favIds = computed(() => {
+			const arr = (state.preset.userConf.value?.data)?.favPresetIds;
+			return new Set(arr ?? []);
+		});
+		const sections = computed(() => {
+			const ids = favIds.value;
+			const sys = state.preset.systemPresets.value;
+			const mine = [];
+			const fav = [];
+			for (const row of state.preset.presets.value) if (state.preset.isOwned(row.id)) mine.push(storedItem(row, ids.has(row.id), row.public === true ? "public" : void 0));
+			for (const id of ids) {
+				if (isSystemPresetId(id)) {
+					const sp = state.preset.systemPresetsById.value.get(id);
+					if (sp) fav.push(systemItem(sp, true));
+					continue;
+				}
+				if (state.preset.isOwned(id)) continue;
+				const row = state.preset.presetsById.value.get(id);
+				if (row) fav.push(storedItem(row, true, authorMeta(row)));
+			}
+			return [
+				{
+					kind: "system",
+					label: "System",
+					showHeader: sys.length > 1,
+					items: sys.map((p) => systemItem(p))
+				},
+				{
+					kind: "mine",
+					label: "My presets",
+					showHeader: true,
+					items: mine
+				},
+				{
+					kind: "fav",
+					label: "Favorites",
+					showHeader: true,
+					items: fav
+				}
+			];
+		});
+		const activePresetLabel = computed(() => {
+			const id = state.preset.activeId.value;
+			if (!id) return "Standard";
+			if (isSystemPresetId(id)) return state.preset.systemPresetsById.value.get(id)?.label ?? "Standard";
+			const row = state.preset.presetsById.value.get(id);
+			return row ? readPresetLabel(row) : "—";
+		});
+		function applyId(id) {
+			state.preset.apply(id);
+			open.value = false;
+		}
+		async function saveActive() {
+			try {
+				await state.preset.saveActive();
+				open.value = false;
+			} catch (_err) {}
+		}
+		function resetActive() {
+			state.preset.resetActive();
+			open.value = false;
+		}
+		function openManageDialog() {
+			state.preset.dialogOpen.value = true;
+			open.value = false;
+		}
+		function toggleAspect(a, ev) {
+			const checked = ev.target.checked;
+			saveAsAspectsMask.value = {
+				...saveAsAspectsMask.value,
+				[a]: checked
+			};
+		}
+		function onMenuKeydown(ev) {
+			if (saveAsOpen.value) return;
+			if (ev.metaKey || ev.ctrlKey || ev.altKey) return;
+			const k = ev.key.toLowerCase();
+			if (k === "s" && state.preset.isDirty.value && state.preset.canSaveActive.value) {
+				ev.preventDefault();
+				saveActive();
+			} else if (k === "a") {
+				ev.preventDefault();
+				openSaveAs();
+			} else if (k === "r" && state.preset.isDirty.value) {
+				ev.preventDefault();
+				resetActive();
+			}
+		}
+		watch(open, (isOpen) => {
+			if (isOpen) window.addEventListener("keydown", onMenuKeydown);
+			else window.removeEventListener("keydown", onMenuKeydown);
+		});
+		onScopeDispose(() => window.removeEventListener("keydown", onMenuKeydown));
+		return (_ctx, _cache) => {
+			return unref(state).preset.available.value ? (openBlock(), createBlock(unref(DropdownMenuRoot), {
+				key: 0,
+				open: open.value,
+				"onUpdate:open": _cache[4] || (_cache[4] = ($event) => open.value = $event),
+				modal: false
+			}, {
+				default: withCtx(() => [createVNode(unref(DropdownMenuTrigger), { "as-child": "" }, {
+					default: withCtx(() => [createElementVNode("button", _hoisted_1, [
+						createElementVNode("span", _hoisted_2, toDisplayString(activePresetLabel.value), 1),
+						unref(state).preset.isDirty.value ? (openBlock(), createElementBlock("span", _hoisted_3, "*")) : createCommentVNode("v-if", true),
+						_cache[5] || (_cache[5] = createElementVNode("span", {
+							class: "as-preset-picker-trigger-chevron i-as-chevron-down",
+							"aria-hidden": "true"
+						}, null, -1))
+					])]),
+					_: 1
+				}), createVNode(unref(DropdownMenuPortal), null, {
+					default: withCtx(() => [!saveAsOpen.value ? (openBlock(), createBlock(unref(DropdownMenuContent), {
+						key: 0,
+						class: "as-preset-picker-menu",
+						"side-offset": 4,
+						align: "start"
+					}, {
+						default: withCtx(() => [
+							(openBlock(true), createElementBlock(Fragment, null, renderList(sections.value, (section, sIdx) => {
+								return openBlock(), createElementBlock(Fragment, { key: section.kind }, [sIdx > 0 && section.items.length > 0 ? (openBlock(), createBlock(unref(DropdownMenuSeparator), {
+									key: 0,
+									class: "as-preset-picker-separator"
+								})) : createCommentVNode("v-if", true), section.items.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [section.showHeader ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(section.label), 1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(section.items, (item) => {
+									return openBlock(), createBlock(unref(DropdownMenuItem), {
+										key: `${section.kind}-${item.id}`,
+										class: "as-preset-picker-item",
+										"data-active": item.id === unref(state).preset.activeId.value ? "" : void 0,
+										onSelect: ($event) => applyId(item.id)
+									}, {
+										default: withCtx(() => [
+											_cache[6] || (_cache[6] = createElementVNode("span", {
+												class: "as-preset-picker-item-active i-as-check",
+												"aria-hidden": "true"
+											}, null, -1)),
+											createElementVNode("span", _hoisted_6, toDisplayString(item.label), 1),
+											item.meta ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(item.meta), 1)) : createCommentVNode("v-if", true),
+											createElementVNode("span", _hoisted_8, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).preset.availableAspects, (a) => {
+												return openBlock(), createElementBlock("span", {
+													key: a,
+													class: "as-preset-picker-item-aspect-chip",
+													"data-on": item.aspects.includes(a) ? "" : void 0,
+													title: unref(ASPECT_LABELS)[a]
+												}, [createElementVNode("span", {
+													class: normalizeClass(unref(ASPECT_ICONS)[a]),
+													"aria-hidden": "true"
+												}, null, 2)], 8, _hoisted_9);
+											}), 128))])
+										]),
+										_: 2
+									}, 1032, ["data-active", "onSelect"]);
+								}), 128))])) : createCommentVNode("v-if", true)], 64);
+							}), 128)),
+							createCommentVNode(" Action row "),
+							createVNode(unref(DropdownMenuSeparator), { class: "as-preset-picker-separator" }),
+							unref(state).preset.isDirty.value && unref(state).preset.canSaveActive.value ? (openBlock(), createBlock(unref(DropdownMenuItem), {
+								key: 0,
+								class: "as-preset-picker-action as-preset-picker-action-primary",
+								onSelect: saveActive
+							}, {
+								default: withCtx(() => [..._cache[7] || (_cache[7] = [
+									createElementVNode("span", {
+										class: "as-preset-picker-action-icon i-as-check",
+										"aria-hidden": "true"
+									}, null, -1),
+									createElementVNode("span", { class: "as-preset-picker-action-label" }, "Save", -1),
+									createElementVNode("kbd", { class: "as-kbd" }, "S", -1)
+								])]),
+								_: 1
+							})) : createCommentVNode("v-if", true),
+							createVNode(unref(DropdownMenuItem), {
+								class: "as-preset-picker-action",
+								onSelect: _cache[0] || (_cache[0] = (ev) => {
+									ev.preventDefault();
+									openSaveAs();
+								})
+							}, {
+								default: withCtx(() => [..._cache[8] || (_cache[8] = [
+									createElementVNode("span", {
+										class: "as-preset-picker-action-icon i-as-plus",
+										"aria-hidden": "true"
+									}, null, -1),
+									createElementVNode("span", { class: "as-preset-picker-action-label" }, "Save as…", -1),
+									createElementVNode("kbd", { class: "as-kbd" }, "A", -1)
+								])]),
+								_: 1
+							}),
+							unref(state).preset.isDirty.value ? (openBlock(), createBlock(unref(DropdownMenuItem), {
+								key: 1,
+								class: "as-preset-picker-action",
+								onSelect: resetActive
+							}, {
+								default: withCtx(() => [..._cache[9] || (_cache[9] = [
+									createElementVNode("span", {
+										class: "as-preset-picker-action-icon i-as-refresh",
+										"aria-hidden": "true"
+									}, null, -1),
+									createElementVNode("span", { class: "as-preset-picker-action-label" }, "Reset changes", -1),
+									createElementVNode("kbd", { class: "as-kbd" }, "R", -1)
+								])]),
+								_: 1
+							})) : createCommentVNode("v-if", true),
+							createVNode(unref(DropdownMenuSeparator), { class: "as-preset-picker-separator" }),
+							createVNode(unref(DropdownMenuItem), {
+								class: "as-preset-picker-action",
+								onSelect: openManageDialog
+							}, {
+								default: withCtx(() => [..._cache[10] || (_cache[10] = [createElementVNode("span", {
+									class: "as-preset-picker-action-icon i-as-settings",
+									"aria-hidden": "true"
+								}, null, -1), createElementVNode("span", { class: "as-preset-picker-action-label" }, "Manage presets…", -1)])]),
+								_: 1
+							})
+						]),
+						_: 1
+					})) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" Inline Save-as popover (replaces menu content while open). "), createVNode(unref(DropdownMenuContent), {
+						class: "as-preset-picker-popover",
+						"side-offset": 4,
+						align: "start",
+						onEscapeKeyDown: cancelSaveAs,
+						onPointerDownOutside: cancelSaveAs
+					}, {
+						default: withCtx(() => [createCommentVNode(" The popover's vertical-stack layout lives on this inner wrapper\n             so the Tab keydown bubbles through a real DOM element before\n             reaching Reka's RovingFocusGroup on MenuContent — without the\n             intercept, RovingFocusGroup would pin focus on the first menu\n             item. Escape/Enter still bubble so `@escape-key-down` fires. "), createElementVNode("div", {
+							class: "as-preset-picker-popover-inner",
+							onKeydown: _cache[3] || (_cache[3] = withKeys(withModifiers(() => {}, ["stop"]), ["tab"]))
+						}, [
+							_cache[16] || (_cache[16] = createElementVNode("h3", { class: "as-preset-picker-popover-title" }, "Save as new preset", -1)),
+							createElementVNode("div", _hoisted_10, [_cache[11] || (_cache[11] = createElementVNode("label", {
+								class: "as-preset-picker-popover-label",
+								for: "as-preset-picker-label"
+							}, "Name", -1)), withDirectives(createElementVNode("input", {
+								id: "as-preset-picker-label",
+								ref_key: "saveAsInputRef",
+								ref: saveAsInputRef,
+								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => saveAsLabel.value = $event),
+								class: "as-preset-picker-popover-input",
+								type: "text",
+								onKeydown: withKeys(withModifiers(commitSaveAs, ["prevent"]), ["enter"])
+							}, null, 40, _hoisted_11), [[vModelText, saveAsLabel.value]])]),
+							createElementVNode("div", _hoisted_12, [_cache[12] || (_cache[12] = createElementVNode("span", { class: "as-preset-picker-popover-label" }, "Save:", -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(aspects.value, (a) => {
+								return openBlock(), createElementBlock("label", {
+									key: a,
+									class: "as-preset-picker-popover-aspect"
+								}, [
+									createElementVNode("input", {
+										type: "checkbox",
+										checked: saveAsAspectsMask.value[a] === true,
+										onChange: (ev) => toggleAspect(a, ev)
+									}, null, 40, _hoisted_13),
+									createElementVNode("span", {
+										class: normalizeClass([unref(ASPECT_ICONS)[a], "as-preset-picker-popover-aspect-icon"]),
+										"aria-hidden": "true"
+									}, null, 2),
+									createTextVNode(" " + toDisplayString(unref(ASPECT_LABELS)[a]), 1)
+								]);
+							}), 128))]),
+							unref(state).preset.capabilities.value === null || unref(state).preset.capabilities.value.canPublish ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[15] || (_cache[15] = createElementVNode("div", { class: "as-preset-picker-popover-separator" }, null, -1)), createElementVNode("label", _hoisted_14, [
+								withDirectives(createElementVNode("input", {
+									"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => saveAsPublic.value = $event),
+									type: "checkbox"
+								}, null, 512), [[vModelCheckbox, saveAsPublic.value]]),
+								_cache[13] || (_cache[13] = createElementVNode("span", {
+									class: "i-as-eye-off as-preset-picker-popover-aspect-icon",
+									"aria-hidden": "true"
+								}, null, -1)),
+								_cache[14] || (_cache[14] = createTextVNode(" Make public ", -1))
+							])], 64)) : createCommentVNode("v-if", true),
+							createElementVNode("div", _hoisted_15, [createElementVNode("button", {
+								type: "button",
+								class: "as-preset-picker-popover-cancel",
+								onClick: cancelSaveAs
+							}, " Cancel "), createElementVNode("button", {
+								type: "button",
+								class: "as-preset-picker-popover-save",
+								disabled: !saveAsLabel.value.trim(),
+								onClick: commitSaveAs
+							}, " Save ", 8, _hoisted_16)])
+						], 32)]),
+						_: 1
+					})], 2112))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { as_preset_picker_default as t };