From c67c453e6b6fe2fdc35816cad824aa1bbe130896 Mon Sep 17 00:00:00 2001
From: lecepin <383810086@qq.com>
Date: Mon, 26 Aug 2024 21:11:13 +0800
Subject: [PATCH 1/7] =?UTF-8?q?feat:=20-=20=E5=A2=9E=E5=8A=A0=E5=B5=8C?=
 =?UTF-8?q?=E5=85=A5=E9=A3=8E=E6=A0=BC=EF=BC=8CisEmbeddedMode=E3=80=82=20-?=
 =?UTF-8?q?=20mobile=20=E6=A8=A1=E5=BC=8F=E4=B8=8B=E7=9A=84=EF=BC=8C=20Out?=
 =?UTF-8?q?put/Code=20=E7=9A=84=E5=AE=9A=E5=88=B6=E9=80=8F=E5=87=BA?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Repl.vue      | 10 ++++++++++
 src/SplitPane.vue | 40 ++++++++++++++++++++++++++++++++++++++--
 test/main.ts      |  5 +++++
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index a75773be..70907694 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -38,6 +38,11 @@ export interface Props {
   editorOptions?: {
     showErrorText?: string
   }
+  splitPaneOptions?: {
+    CodeTogglerButtonText?: string
+    OutputTogglerButtonText?: string
+  }
+  isEmbedMode?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -55,6 +60,11 @@ const props = withDefaults(defineProps<Props>(), {
   layout: 'horizontal',
   previewOptions: () => ({}),
   editorOptions: () => ({}),
+  splitPaneOptions: () => ({
+    CodeTogglerButtonText: '< Code',
+    OutputTogglerButtonText: 'Output >',
+  }),
+  isEmbedMode: false
 })
 
 if (!props.editor) {
diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index e25726aa..0a1db6f3 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -9,7 +9,7 @@ const container = ref()
 const previewRef = inject(injectKeyPreviewRef)!
 
 // mobile only
-const { store } = inject(injectKeyProps)!
+const { store, splitPaneOptions, isEmbedMode } = inject(injectKeyProps)!
 const showOutput = computed(() => store.value.showOutput)
 
 const state = reactive({
@@ -68,6 +68,7 @@ function changeViewSize() {
       dragging: state.dragging,
       'show-output': showOutput,
       vertical: isVertical,
+      'is-embed-mode': isEmbedMode,
     }"
     @mousemove="dragMove"
     @mouseup="dragEnd"
@@ -91,7 +92,11 @@ function changeViewSize() {
     </div>
 
     <button class="toggler" @click="showOutput = !showOutput">
-      {{ showOutput ? '< Code' : 'Output >' }}
+      {{
+        showOutput
+          ? splitPaneOptions?.CodeTogglerButtonText
+          : splitPaneOptions?.OutputTogglerButtonText
+      }}
     </button>
   </div>
 </template>
@@ -215,4 +220,35 @@ function changeViewSize() {
     pointer-events: none;
   }
 }
+
+/* embed mode */
+.is-embed-mode .left,
+.is-embed-mode .right {
+  position: absolute;
+  inset: 0;
+  width: auto !important;
+  height: auto !important;
+}
+.is-embed-mode .dragger {
+  display: none;
+}
+.is-embed-mode.split-pane .toggler {
+  display: block;
+}
+.is-embed-mode.split-pane .right {
+  z-index: -1;
+  pointer-events: none;
+}
+.is-embed-mode.split-pane .left {
+  z-index: 0;
+  pointer-events: all;
+}
+.is-embed-mode.split-pane.show-output .right {
+  z-index: 0;
+  pointer-events: all;
+}
+.is-embed-mode.split-pane.show-output .left {
+  z-index: -1;
+  pointer-events: none;
+}
 </style>
diff --git a/test/main.ts b/test/main.ts
index b10b6f23..699d01d9 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -67,6 +67,11 @@ const App = {
         },
         // showCompileOutput: false,
         // showImportMap: false
+        // splitPaneOptions: {
+        //   CodeTogglerButtonText: '< 代码',
+        //   OutputTogglerButtonText: '输出 >',
+        // },
+        // isEmbedMode: true,
       })
   },
 }

From f08956e126b87c2fb996709c78e79ce1c5a41695 Mon Sep 17 00:00:00 2001
From: lecepin <383810086@qq.com>
Date: Mon, 26 Aug 2024 21:25:58 +0800
Subject: [PATCH 2/7] =?UTF-8?q?fix:=20toggle=20=E6=97=A0=E6=B3=95=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/SplitPane.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 0a1db6f3..be2b850d 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -91,7 +91,7 @@ function changeViewSize() {
       <slot name="right" />
     </div>
 
-    <button class="toggler" @click="showOutput = !showOutput">
+    <button class="toggler" @click="store.showOutput = !showOutput">
       {{
         showOutput
           ? splitPaneOptions?.CodeTogglerButtonText

From 76eb20cfbff0cb613606995b46bf9445915dfe63 Mon Sep 17 00:00:00 2001
From: lecepin <383810086@qq.com>
Date: Wed, 4 Sep 2024 10:26:10 +0800
Subject: [PATCH 3/7] feat: remove the isEmbedMode style and keep the
 isEmbedMode css class name.

---
 src/SplitPane.vue | 31 +------------------------------
 1 file changed, 1 insertion(+), 30 deletions(-)

diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index be2b850d..8952981f 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -221,34 +221,5 @@ function changeViewSize() {
   }
 }
 
-/* embed mode */
-.is-embed-mode .left,
-.is-embed-mode .right {
-  position: absolute;
-  inset: 0;
-  width: auto !important;
-  height: auto !important;
-}
-.is-embed-mode .dragger {
-  display: none;
-}
-.is-embed-mode.split-pane .toggler {
-  display: block;
-}
-.is-embed-mode.split-pane .right {
-  z-index: -1;
-  pointer-events: none;
-}
-.is-embed-mode.split-pane .left {
-  z-index: 0;
-  pointer-events: all;
-}
-.is-embed-mode.split-pane.show-output .right {
-  z-index: 0;
-  pointer-events: all;
-}
-.is-embed-mode.split-pane.show-output .left {
-  z-index: -1;
-  pointer-events: none;
-}
+
 </style>

From 6cef1b2525f05fa2f7b27a4fc3dc7ed586870d76 Mon Sep 17 00:00:00 2001
From: lecepin <383810086@qq.com>
Date: Mon, 9 Sep 2024 10:55:05 +0800
Subject: [PATCH 4/7] refactor: removed isEmbedMode property

---
 src/Repl.vue      | 2 --
 src/SplitPane.vue | 5 +----
 test/main.ts      | 1 -
 3 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 91865140..e6a3eca9 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -44,7 +44,6 @@ export interface Props {
     CodeTogglerButtonText?: string
     OutputTogglerButtonText?: string
   }
-  isEmbedMode?: boolean
 }
 
 const autoSave = defineModel<boolean>({ default: true })
@@ -66,7 +65,6 @@ const props = withDefaults(defineProps<Props>(), {
     CodeTogglerButtonText: '< Code',
     OutputTogglerButtonText: 'Output >',
   }),
-  isEmbedMode: false
 })
 
 if (!props.editor) {
diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index c23f9007..90e04107 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -9,7 +9,7 @@ const containerRef = useTemplateRef('container')
 const previewRef = inject(injectKeyPreviewRef)!
 
 // mobile only
-const { store, splitPaneOptions, isEmbedMode } = inject(injectKeyProps)!
+const { store, splitPaneOptions } = inject(injectKeyProps)!
 const showOutput = computed(() => store.value.showOutput)
 
 const state = reactive({
@@ -68,7 +68,6 @@ function changeViewSize() {
       dragging: state.dragging,
       'show-output': showOutput,
       vertical: isVertical,
-      'is-embed-mode': isEmbedMode,
     }"
     @mousemove="dragMove"
     @mouseup="dragEnd"
@@ -220,6 +219,4 @@ function changeViewSize() {
     pointer-events: none;
   }
 }
-
-
 </style>
diff --git a/test/main.ts b/test/main.ts
index 78ec04e3..a5aab4d9 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -71,7 +71,6 @@ const App = {
         //   CodeTogglerButtonText: '< 代码',
         //   OutputTogglerButtonText: '输出 >',
         // },
-        // isEmbedMode: true,
         editorOptions: {
           autoSaveText: '💾',
           monacoOptions: {

From 640b1433e1e1efe1702118ef4ce93cb54bd9186a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 16 Sep 2024 14:12:18 +0800
Subject: [PATCH 5/7] simplify

---
 src/Repl.vue      | 9 +++------
 src/SplitPane.vue | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index e6a3eca9..66138ec7 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -41,8 +41,8 @@ export interface Props {
     monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions
   }
   splitPaneOptions?: {
-    CodeTogglerButtonText?: string
-    OutputTogglerButtonText?: string
+    codeTogglerText?: string
+    outputTogglerText?: string
   }
 }
 
@@ -61,10 +61,7 @@ const props = withDefaults(defineProps<Props>(), {
   layout: 'horizontal',
   previewOptions: () => ({}),
   editorOptions: () => ({}),
-  splitPaneOptions: () => ({
-    CodeTogglerButtonText: '< Code',
-    OutputTogglerButtonText: 'Output >',
-  }),
+  splitPaneOptions: () => ({}),
 })
 
 if (!props.editor) {
diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 90e04107..365849ae 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -93,8 +93,8 @@ function changeViewSize() {
     <button class="toggler" @click="store.showOutput = !showOutput">
       {{
         showOutput
-          ? splitPaneOptions?.CodeTogglerButtonText
-          : splitPaneOptions?.OutputTogglerButtonText
+          ? splitPaneOptions?.codeTogglerText || '< Code'
+          : splitPaneOptions?.outputTogglerText || 'Output >'
       }}
     </button>
   </div>

From 22222e82148e4a19294c99efc4579a2e6e742fdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 16 Sep 2024 14:13:21 +0800
Subject: [PATCH 6/7] revert

---
 test/main.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/test/main.ts b/test/main.ts
index a5aab4d9..85cce24f 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -67,10 +67,6 @@ const App = {
         },
         // showCompileOutput: false,
         // showImportMap: false
-        // splitPaneOptions: {
-        //   CodeTogglerButtonText: '< 代码',
-        //   OutputTogglerButtonText: '输出 >',
-        // },
         editorOptions: {
           autoSaveText: '💾',
           monacoOptions: {

From 35570ee58ba42573e35c59249fbe6304abb2486a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 16 Sep 2024 14:15:31 +0800
Subject: [PATCH 7/7] simplify

---
 src/SplitPane.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 365849ae..8b49a09a 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -10,7 +10,6 @@ const previewRef = inject(injectKeyPreviewRef)!
 
 // mobile only
 const { store, splitPaneOptions } = inject(injectKeyProps)!
-const showOutput = computed(() => store.value.showOutput)
 
 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,9 +89,9 @@ function changeViewSize() {
       <slot name="right" />
     </div>
 
-    <button class="toggler" @click="store.showOutput = !showOutput">
+    <button class="toggler" @click="store.showOutput = !store.showOutput">
       {{
-        showOutput
+        store.showOutput
           ? splitPaneOptions?.codeTogglerText || '< Code'
           : splitPaneOptions?.outputTogglerText || 'Output >'
       }}