refactor: add literal types

Author: sxzz

src/Repl.vue

@@ -14,7 +14,7 @@ export interface Props {
   showImportMap?: boolean
   clearConsole?: boolean
   sfcOptions?: SFCOptions
-  layout?: string
+  layout?: 'horizontal' | 'vertical'
   ssr?: boolean
   previewOptions?: {
     headHTML?: string
@@ -38,9 +38,9 @@ const props = withDefaults(defineProps<Props>(), {
     bodyHTML: '',
     customCode: {
       importCode: '',
-      useCode: ''
-    }
-  })
+      useCode: '',
+    },
+  }),
 })
 
 if (!props.editor) {
@@ -61,7 +61,7 @@ sfcOptions.script.fs = {
   readFile(file: string) {
     if (file.startsWith('/')) file = file.slice(1)
     return store.state.files[file].code
-  }
+  },
 }
 
 store.init()

src/SplitPane.vue

@@ -2,7 +2,7 @@
 import { ref, reactive, computed, inject } from 'vue'
 import { Store } from './store'
 
-const props = defineProps<{ layout?: string }>()
+const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
 const isVertical = computed(() => props.layout === 'vertical')
 
 const container = ref()
@@ -13,10 +13,10 @@ const showOutput = ref(store.initialShowOutput)
 
 const state = reactive({
   dragging: false,
-  split: 50
+  split: 50,
 })
 
-const boundSplit = computed(()=>{
+const boundSplit = computed(() => {
   const { split } = state
   return split < 20 ? 20 : split > 80 ? 80 : split
 })
@@ -53,7 +53,7 @@ function dragEnd() {
     :class="{
       dragging: state.dragging,
       'show-output': showOutput,
-      vertical: isVertical
+      vertical: isVertical,
     }"
     @mousemove="dragMove"
     @mouseup="dragEnd"