From 93051f35a232b53d01dd0a40623cab5b11baa3ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=90=E5=B9=B3?= <383810086@qq.com>
Date: Mon, 16 Sep 2024 14:16:24 +0800
Subject: [PATCH] fix: output toggle button (#279)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
---
 src/Repl.vue      |  5 +++++
 src/SplitPane.vue | 13 ++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index f07465ba..66138ec7 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -40,6 +40,10 @@ export interface Props {
     autoSaveText?: string | false
     monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions
   }
+  splitPaneOptions?: {
+    codeTogglerText?: string
+    outputTogglerText?: string
+  }
 }
 
 const autoSave = defineModel<boolean>({ default: true })
@@ -57,6 +61,7 @@ const props = withDefaults(defineProps<Props>(), {
   layout: 'horizontal',
   previewOptions: () => ({}),
   editorOptions: () => ({}),
+  splitPaneOptions: () => ({}),
 })
 
 if (!props.editor) {
diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 6723bd86..8b49a09a 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -9,8 +9,7 @@ const containerRef = useTemplateRef('container')
 const previewRef = inject(injectKeyPreviewRef)!
 
 // mobile only
-const { store } = inject(injectKeyProps)!
-const showOutput = computed(() => store.value.showOutput)
+const { store, splitPaneOptions } = inject(injectKeyProps)!
 
 const state = reactive({
   dragging: false,
@@ -66,7 +65,7 @@ function changeViewSize() {
     class="split-pane"
     :class="{
       dragging: state.dragging,
-      'show-output': showOutput,
+      'show-output': store.showOutput,
       vertical: isVertical,
     }"
     @mousemove="dragMove"
@@ -90,8 +89,12 @@ function changeViewSize() {
       <slot name="right" />
     </div>
 
-    <button class="toggler" @click="showOutput = !showOutput">
-      {{ showOutput ? '< Code' : 'Output >' }}
+    <button class="toggler" @click="store.showOutput = !store.showOutput">
+      {{
+        store.showOutput
+          ? splitPaneOptions?.codeTogglerText || '< Code'
+          : splitPaneOptions?.outputTogglerText || 'Output >'
+      }}
     </button>
   </div>
 </template>