Implementing layout toggle for vertical/horizontal

Author: ackzell

src/App.vue

@@ -9,13 +9,17 @@ import { onMounted, ref } from 'vue';
 import YVHeader from './YvHeader.vue';
 
 const preferDark = useStorage('vue-sfc-playground-prefer-dark', true);
-
 const theme = ref<'dark' | 'light'>('dark');
 function setTheme(newTheme: 'dark' | 'light') {
   theme.value = newTheme;
   preferDark.value = newTheme === 'dark';
 }
 
+const layout = useStorage<'horizontal' | 'vertical'>('yehyecoa-vue-layout', 'horizontal');
+function toggleLayout() {
+  layout.value = layout.value === 'horizontal' ? 'vertical' : 'horizontal';
+}
+
 function setVH() {
   document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);
 }
@@ -62,13 +66,15 @@ onMounted(async () => {
     <YVHeader
       :theme="theme"
       @set-theme="setTheme"
+      @toggle-layout="toggleLayout"
     />
     <Repl
       :editor="Monaco"
       :show-compile-output="false"
       :show-import-map="false"
       :show-ts-config="false"
-      :theme="theme"
+      :theme
+      :layout
       :editor-options="{
         autoSaveText: false,
       }"

src/YvHeader.vue

@@ -1,19 +1,28 @@
 <script setup lang="ts">
+import { useStorage } from '@vueuse/core';
 import { onMounted } from 'vue';
 
 defineProps<{
   theme: 'dark' | 'light';
 }>();
 
 // TODO: implement the download functionality, just like the official playground
-const emit = defineEmits(['set-theme']);
+const emit = defineEmits({
+  'set-theme': (theme: 'dark' | 'light') => theme,
+  'toggle-layout': () => true,
+});
 const cls = document.documentElement.classList;
 
 function setTheme() {
   cls.toggle('dark');
   emit('set-theme', cls.contains('dark') ? 'dark' : 'light');
 }
 
+const layout = useStorage<'horizontal' | 'vertical'>('yehyecoa-vue-layout', 'horizontal');
+function toggleLayout() {
+  emit('toggle-layout');
+}
+
 onMounted(() => {
   emit('set-theme', cls.contains('dark') ? 'dark' : 'light');
 });
@@ -35,6 +44,9 @@ onMounted(() => {
       <span uno-hidden sm:inline-block>yehyecoa-vue</span>
     </h1>
     <div flex gap-2 text-neutral-500>
+      <button toolbar-btn @click="toggleLayout">
+        <div :class="layout === 'vertical' ? 'i-mynaui:rectangle' : 'i-mynaui:rectangle-vertical'" />
+      </button>
       <button
         toolbar-btn
         :title="`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`"