@vite-plugin-opencode-assistant/components 1.0.11 → 1.0.12

package/lib/@vite-plugin-opencode-assistant/components.cjs.js

@@ -15,18 +15,68 @@ function useOpenCodeWidgetContext() {
 }
 //#endregion
 //#region es/open-code-widget/src/components/Frame.vue.js
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, {
+	enumerable: true,
+	configurable: true,
+	writable: true,
+	value
+}) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+	for (var prop in b || (b = {})) if (__hasOwnProp$1.call(b, prop)) __defNormalProp$1(a, prop, b[prop]);
+	if (__getOwnPropSymbols$1) {
+		for (var prop of __getOwnPropSymbols$1(b)) if (__propIsEnum$1.call(b, prop)) __defNormalProp$1(a, prop, b[prop]);
+	}
+	return a;
+};
 var __vue_sfc__$7 = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "Frame",
 	setup(__props, { expose: __expose }) {
 		__expose();
-		const { loading, showEmptyState, iframeSource: iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction } = useOpenCodeWidgetContext();
+		const iframeRef = (0, vue.ref)(null);
+		const { loading, showEmptyState, iframeSource: iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, theme, resolvedTheme } = useOpenCodeWidgetContext();
+		const iframeReady = (0, vue.ref)(false);
+		function sendMessageToIframe(type, data) {
+			var _a;
+			if (!((_a = iframeRef.value) == null ? void 0 : _a.contentWindow)) return;
+			iframeRef.value.contentWindow.postMessage(__spreadValues$1({ type }, data), "*");
+		}
+		function syncIframeTheme() {
+			sendMessageToIframe("OPENCODE_SET_THEME", { theme: resolvedTheme.value });
+		}
+		function handleIframeMessage(event) {
+			var _a;
+			if (((_a = event.data) == null ? void 0 : _a.type) === "OPENCODE_READY") syncIframeTheme();
+		}
+		(0, vue.watch)([theme, resolvedTheme], () => {
+			syncIframeTheme();
+		});
+		(0, vue.onMounted)(() => {
+			if (iframeRef.value) iframeRef.value.addEventListener("load", () => {
+				iframeReady.value = true;
+			});
+			window.addEventListener("message", handleIframeMessage);
+		});
+		(0, vue.onUnmounted)(() => {
+			window.removeEventListener("message", handleIframeMessage);
+		});
 		const __returned__ = {
+			iframeRef,
 			loading,
 			showEmptyState,
 			iframeSrc,
 			emptyStateText,
 			emptyStateActionText,
-			handleEmptyAction
+			handleEmptyAction,
+			theme,
+			resolvedTheme,
+			iframeReady,
+			sendMessageToIframe,
+			syncIframeTheme,
+			handleIframeMessage
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
 			enumerable: false,
@@ -63,6 +113,7 @@ function __vue_render__$7(_ctx, _cache, $props, $setup, $data, $options) {
 		])], 2),
 		(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["opencode-loading-overlay", { visible: $setup.loading }]) }, [(0, vue.renderSlot)(_ctx.$slots, "loading", {}, () => [_cache[2] || (_cache[2] = (0, vue.createElementVNode)("div", { class: "opencode-loading-spinner" }, null, -1)), _cache[3] || (_cache[3] = (0, vue.createElementVNode)("div", { class: "opencode-loading-text" }, "加载中...", -1))])], 2),
 		(0, vue.renderSlot)(_ctx.$slots, "content", {}, () => [(0, vue.createElementVNode)("iframe", {
+			ref: "iframeRef",
 			class: "opencode-iframe",
 			src: $setup.iframeSrc,
 			allow: "clipboard-write; clipboard-read",
@@ -78,16 +129,33 @@ var __vue_sfc__$6 = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "Header",
 	setup(__props, { expose: __expose }) {
 		__expose();
-		const { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, handleToggleSessionList, handleToggleSelectMode, handleClose } = useOpenCodeWidgetContext();
+		const { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleClose } = useOpenCodeWidgetContext();
 		const __returned__ = {
 			title,
 			sessionListTitle,
 			sessionListCollapsed,
 			selectMode,
 			selectEnabled,
+			theme,
+			resolvedTheme,
 			handleToggleSessionList,
 			handleToggleSelectMode,
-			handleClose
+			handleToggleTheme,
+			handleClose,
+			themeIconTitle: (0, vue.computed)(() => {
+				return `\u4E3B\u9898: ${{
+					auto: "自动",
+					light: "亮色",
+					dark: "暗色"
+				}[theme.value]} (${resolvedTheme.value})`;
+			}),
+			themeIconLabel: (0, vue.computed)(() => {
+				return `\u5207\u6362\u4E3B\u9898 - \u5F53\u524D: ${{
+					auto: "自动跟随系统",
+					light: "亮色主题",
+					dark: "暗色主题"
+				}[theme.value]}`;
+			})
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
 			enumerable: false,
@@ -104,56 +172,97 @@ var _hoisted_3$4 = [
 	"aria-expanded"
 ];
 var _hoisted_4$4 = ["aria-pressed", "disabled"];
-var _hoisted_5$4 = { class: "opencode-chat-header-title" };
-var _hoisted_6$3 = { class: "opencode-chat-header-actions" };
+var _hoisted_5$4 = ["title", "aria-label"];
+var _hoisted_6$3 = {
+	key: 0,
+	viewBox: "0 0 24 24",
+	width: "16",
+	height: "16",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"aria-hidden": "true"
+};
+var _hoisted_7$2 = {
+	key: 1,
+	viewBox: "0 0 24 24",
+	width: "16",
+	height: "16",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"aria-hidden": "true"
+};
+var _hoisted_8$2 = {
+	key: 2,
+	viewBox: "0 0 24 24",
+	width: "16",
+	height: "16",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"aria-hidden": "true"
+};
+var _hoisted_9$1 = { class: "opencode-chat-header-title" };
+var _hoisted_10 = { class: "opencode-chat-header-actions" };
 function __vue_render__$6(_ctx, _cache, $props, $setup, $data, $options) {
 	return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$6, [
-		(0, vue.createElementVNode)("div", _hoisted_2$4, [(0, vue.createElementVNode)("button", {
-			class: "opencode-header-btn session-toggle",
-			type: "button",
-			title: $setup.sessionListTitle,
-			"aria-label": $setup.sessionListTitle,
-			"aria-expanded": !$setup.sessionListCollapsed,
-			onClick: _cache[0] || (_cache[0] = (...args) => $setup.handleToggleSessionList && $setup.handleToggleSessionList(...args))
-		}, [(0, vue.renderSlot)(_ctx.$slots, "session-toggle-icon", {}, () => [_cache[3] || (_cache[3] = (0, vue.createElementVNode)("svg", {
-			viewBox: "0 0 24 24",
-			width: "16",
-			height: "16",
-			fill: "none",
-			stroke: "currentColor",
-			"stroke-width": "2",
-			"aria-hidden": "true"
-		}, [(0, vue.createElementVNode)("path", {
-			d: "M4 6h16M4 12h16M4 18h16",
-			"stroke-linecap": "round"
-		})], -1))])], 8, _hoisted_3$4), (0, vue.createElementVNode)("button", {
-			class: (0, vue.normalizeClass)(["opencode-header-btn select-btn", { active: $setup.selectMode }]),
-			type: "button",
-			title: "选择页面元素 (Ctrl+P)",
-			"aria-label": "选择页面元素",
-			"aria-pressed": $setup.selectMode,
-			disabled: !$setup.selectEnabled,
-			onClick: _cache[1] || (_cache[1] = (...args) => $setup.handleToggleSelectMode && $setup.handleToggleSelectMode(...args))
-		}, [(0, vue.renderSlot)(_ctx.$slots, "select-icon", {}, () => [_cache[4] || (_cache[4] = (0, vue.createElementVNode)("svg", {
-			viewBox: "0 0 1024 1024",
-			width: "16",
-			height: "16",
-			"aria-hidden": "true"
-		}, [(0, vue.createElementVNode)("path", {
-			fill: "currentColor",
-			d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"
-		}), (0, vue.createElementVNode)("path", {
-			fill: "currentColor",
-			d: "M512 96a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V128a32 32 0 0 1 32-32m0 576a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V704a32 32 0 0 1 32-32M96 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32m576 0a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64H704a32 32 0 0 1-32-32"
-		})], -1))])], 10, _hoisted_4$4)]),
-		(0, vue.createElementVNode)("span", _hoisted_5$4, (0, vue.toDisplayString)($setup.title), 1),
-		(0, vue.createElementVNode)("div", _hoisted_6$3, [(0, vue.createElementVNode)("button", {
+		(0, vue.createElementVNode)("div", _hoisted_2$4, [
+			(0, vue.createElementVNode)("button", {
+				class: (0, vue.normalizeClass)(["opencode-header-btn session-toggle", { active: !$setup.sessionListCollapsed }]),
+				type: "button",
+				title: $setup.sessionListTitle,
+				"aria-label": $setup.sessionListTitle,
+				"aria-expanded": !$setup.sessionListCollapsed,
+				onClick: _cache[0] || (_cache[0] = (...args) => $setup.handleToggleSessionList && $setup.handleToggleSessionList(...args))
+			}, [(0, vue.renderSlot)(_ctx.$slots, "session-toggle-icon", {}, () => [_cache[4] || (_cache[4] = (0, vue.createElementVNode)("svg", {
+				viewBox: "0 0 24 24",
+				width: "16",
+				height: "16",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"aria-hidden": "true"
+			}, [(0, vue.createElementVNode)("path", {
+				d: "M4 6h16M4 12h16M4 18h16",
+				"stroke-linecap": "round"
+			})], -1))])], 10, _hoisted_3$4),
+			(0, vue.createElementVNode)("button", {
+				class: (0, vue.normalizeClass)(["opencode-header-btn select-btn", { active: $setup.selectMode }]),
+				type: "button",
+				title: "选择页面元素 (Ctrl+P)",
+				"aria-label": "选择页面元素",
+				"aria-pressed": $setup.selectMode,
+				disabled: !$setup.selectEnabled,
+				onClick: _cache[1] || (_cache[1] = (...args) => $setup.handleToggleSelectMode && $setup.handleToggleSelectMode(...args))
+			}, [(0, vue.renderSlot)(_ctx.$slots, "select-icon", {}, () => [_cache[5] || (_cache[5] = (0, vue.createElementVNode)("svg", {
+				viewBox: "0 0 1024 1024",
+				width: "16",
+				height: "16",
+				"aria-hidden": "true"
+			}, [(0, vue.createElementVNode)("path", {
+				fill: "currentColor",
+				d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"
+			}), (0, vue.createElementVNode)("path", {
+				fill: "currentColor",
+				d: "M512 96a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V128a32 32 0 0 1 32-32m0 576a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V704a32 32 0 0 1 32-32M96 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32m576 0a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64H704a32 32 0 0 1-32-32"
+			})], -1))])], 10, _hoisted_4$4),
+			(0, vue.createElementVNode)("button", {
+				class: "opencode-header-btn theme-btn",
+				type: "button",
+				title: $setup.themeIconTitle,
+				"aria-label": $setup.themeIconLabel,
+				onClick: _cache[2] || (_cache[2] = (...args) => $setup.handleToggleTheme && $setup.handleToggleTheme(...args))
+			}, [(0, vue.renderSlot)(_ctx.$slots, "theme-icon", {}, () => [$setup.theme === "light" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_6$3, [..._cache[6] || (_cache[6] = [(0, vue.createStaticVNode)("<circle cx=\"12\" cy=\"12\" r=\"5\"></circle><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"></line><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"></line><line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"></line><line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"></line><line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"></line><line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"></line><line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"></line><line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"></line>", 9)])])) : $setup.theme === "dark" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_7$2, [..._cache[7] || (_cache[7] = [(0, vue.createElementVNode)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_8$2, [..._cache[8] || (_cache[8] = [(0, vue.createStaticVNode)("<rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"></rect><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"></line><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"></line><circle cx=\"12\" cy=\"10\" r=\"3\"></circle><path d=\"M7 7l2 2M17 7l-2 2M7 13l2-2M17 13l-2-2\"></path>", 5)])]))])], 8, _hoisted_5$4)
+		]),
+		(0, vue.createElementVNode)("span", _hoisted_9$1, (0, vue.toDisplayString)($setup.title), 1),
+		(0, vue.createElementVNode)("div", _hoisted_10, [(0, vue.createElementVNode)("button", {
 			class: "opencode-header-btn close",
 			type: "button",
 			title: "关闭",
 			"aria-label": "关闭面板",
-			onClick: _cache[2] || (_cache[2] = (...args) => $setup.handleClose && $setup.handleClose(...args))
-		}, [(0, vue.renderSlot)(_ctx.$slots, "close-icon", {}, () => [_cache[5] || (_cache[5] = (0, vue.createElementVNode)("svg", {
+			onClick: _cache[3] || (_cache[3] = (...args) => $setup.handleClose && $setup.handleClose(...args))
+		}, [(0, vue.renderSlot)(_ctx.$slots, "close-icon", {}, () => [_cache[9] || (_cache[9] = (0, vue.createElementVNode)("svg", {
 			viewBox: "0 0 24 24",
 			width: "14",
 			height: "14",
@@ -654,11 +763,39 @@ function useSession(options) {
 }
 //#endregion
 //#region es/open-code-widget/composables/use-widget.js
+var THEME_CYCLE = [
+	"auto",
+	"light",
+	"dark"
+];
 function useWidget(options) {
+	const systemTheme = (0, vue.ref)("light");
+	function getSystemTheme() {
+		if (typeof window === "undefined") return "light";
+		return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	}
+	let mediaQuery = null;
+	let handleChange = null;
+	(0, vue.onMounted)(() => {
+		if (typeof window === "undefined") return;
+		systemTheme.value = getSystemTheme();
+		mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		handleChange = (e) => {
+			systemTheme.value = e.matches ? "dark" : "light";
+		};
+		mediaQuery.addEventListener("change", handleChange);
+	});
+	(0, vue.onUnmounted)(() => {
+		if (mediaQuery && handleChange) mediaQuery.removeEventListener("change", handleChange);
+	});
+	const resolvedTheme = (0, vue.computed)(() => {
+		if (options.theme.value === "auto") return systemTheme.value;
+		return options.theme.value;
+	});
 	const containerClasses = (0, vue.computed)(() => [
 		"opencode-widget",
 		options.position.value,
-		`opencode-theme-${options.theme.value}`
+		`opencode-theme-${resolvedTheme.value}`
 	]);
 	const buttonActive = (0, vue.computed)(() => !!(options.open.value || options.selectMode.value));
 	const iframeSource = (0, vue.computed)(() => options.iframeSrc.value || "about:blank");
@@ -681,15 +818,22 @@ function useWidget(options) {
 	function handleEmptyAction() {
 		options.onEmptyAction();
 	}
+	function handleToggleTheme() {
+		var _a;
+		const nextTheme = THEME_CYCLE[(THEME_CYCLE.indexOf(options.theme.value) + 1) % THEME_CYCLE.length];
+		(_a = options.onToggleTheme) == null || _a.call(options, nextTheme);
+	}
 	return {
 		buttonActive,
 		containerClasses,
 		iframeSource,
 		sessionListTitle,
+		resolvedTheme,
 		handleClose,
 		handleEmptyAction,
 		handleToggle,
-		handleToggleSessionList
+		handleToggleSessionList,
+		handleToggleTheme
 	};
 }
 //#endregion
@@ -903,7 +1047,7 @@ var __vue_sfc__ = /* @__PURE__ */ (0, vue.defineComponent)(__spreadProps(__sprea
 		theme: {
 			type: String,
 			required: false,
-			default: "light"
+			default: "auto"
 		},
 		title: {
 			type: String,
@@ -996,10 +1140,12 @@ var __vue_sfc__ = /* @__PURE__ */ (0, vue.defineComponent)(__spreadProps(__sprea
 		"update:sessionListCollapsed",
 		"update:currentSessionId",
 		"update:selectedElements",
+		"update:theme",
 		"toggle",
 		"close",
 		"toggle-session-list",
 		"toggle-select-mode",
+		"toggle-theme",
 		"create-session",
 		"select-session",
 		"delete-session",
@@ -1049,7 +1195,7 @@ var __vue_sfc__ = /* @__PURE__ */ (0, vue.defineComponent)(__spreadProps(__sprea
 		(0, vue.watch)(() => props.sessionListCollapsed, (val) => {
 			localSessionListCollapsed.value = val;
 		});
-		const { buttonActive, containerClasses, iframeSource, sessionListTitle, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList } = useWidget({
+		const { buttonActive, containerClasses, iframeSource, sessionListTitle, resolvedTheme, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, handleToggleTheme } = useWidget({
 			position: (0, vue.toRef)(props, "position"),
 			theme: (0, vue.toRef)(props, "theme"),
 			open: (0, vue.toRef)(props, "open"),
@@ -1075,6 +1221,10 @@ var __vue_sfc__ = /* @__PURE__ */ (0, vue.defineComponent)(__spreadProps(__sprea
 			},
 			onEmptyAction: () => {
 				emit("empty-action");
+			},
+			onToggleTheme: (newTheme) => {
+				emit("update:theme", newTheme);
+				emit("toggle-theme", newTheme);
 			}
 		});
 		const { sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession } = useSession({
@@ -1119,6 +1269,7 @@ var __vue_sfc__ = /* @__PURE__ */ (0, vue.defineComponent)(__spreadProps(__sprea
 		});
 		provideOpenCodeWidgetContext({
 			theme: (0, vue.toRef)(props, "theme"),
+			resolvedTheme,
 			title: (0, vue.toRef)(props, "title"),
 			hotkeyLabel: (0, vue.toRef)(props, "hotkeyLabel"),
 			selectShortcutLabel: (0, vue.toRef)(props, "selectShortcutLabel"),
@@ -1143,6 +1294,7 @@ var __vue_sfc__ = /* @__PURE__ */ (0, vue.defineComponent)(__spreadProps(__sprea
 			handleToggle,
 			handleClose,
 			handleToggleSessionList,
+			handleToggleTheme,
 			handleEmptyAction,
 			handleCreateSession,
 			handleSelectSession,
@@ -1181,10 +1333,12 @@ var __vue_sfc__ = /* @__PURE__ */ (0, vue.defineComponent)(__spreadProps(__sprea
 			containerClasses,
 			iframeSource,
 			sessionListTitle,
+			resolvedTheme,
 			handleClose,
 			handleEmptyAction,
 			handleToggle,
 			handleToggleSessionList,
+			handleToggleTheme,
 			sessionItems,
 			handleCreateSession,
 			handleDeleteSession,
@@ -1315,7 +1469,7 @@ __vue_sfc__.render = __vue_render__;
 var open_code_widget_default = __vue_sfc__;
 //#endregion
 //#region es/index.js
-var version = "1.0.11";
+var version = "1.0.12";
 function install(app, options) {
 	[open_code_widget_default].forEach((item) => {
 		if (item.install) app.use(item, options);