feat: add readonly prop to Repl

Author: oumoussa98

src/Repl.vue

@@ -19,6 +19,7 @@ export interface Props {
   sfcOptions?: SFCOptions
   layout?: 'horizontal' | 'vertical'
   ssr?: boolean
+  readonly?: boolean
   previewOptions?: {
     headHTML?: string
     bodyHTML?: string
@@ -38,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
   showTsConfig: true,
   clearConsole: true,
   ssr: false,
+  readonly: false,
   previewOptions: () => ({
     headHTML: '',
     bodyHTML: '',
@@ -79,6 +81,7 @@ provide('tsconfig', toRef(props, 'showTsConfig'))
 provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
 provide('theme', toRef(props, 'theme'))
+provide('readonly', toRef(props, 'readonly'))
 /**
  * Reload the preview iframe
  */
@@ -128,9 +131,8 @@ defineExpose({ reload })
   margin: 0;
   overflow: hidden;
   font-size: 13px;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   background-color: var(--bg-soft);
 }
 </style>

src/editor/EditorContainer.vue

@@ -16,10 +16,12 @@ const props = defineProps<{
 }>()
 
 const store = inject('store') as Store
+const readonly = inject('readonly', ref(false))
 const showMessage = ref((getItem(SHOW_ERROR_KEY) ?? 'true') === 'true')
 store.state.wordWrap = (getItem(TOGGLE_WRAP_KEY) ?? 'false') === 'true'
 
 const onChange = debounce((code: string, filename: string) => {
+  if (readonly.value) return
   store.state.files[filename].code = code
 }, 250)
 
@@ -50,6 +52,7 @@ watch(
       @change="onChange($event, store.state.activeFile.filename)"
       :value="store.state.activeFile.code"
       :filename="store.state.activeFile.filename"
+      :readonly="readonly"
     />
     <Message v-show="showMessage" :err="store.state.errors[0]" />
     <MessageToggle v-model="showMessage" />

src/editor/FileExplorer.vue

@@ -12,6 +12,7 @@
 
       <template v-slot:append>
         <v-btn
+          v-if="!readonly"
           variant="text"
           size="small"
           :append-icon="`svg:${mdiFilePlusOutline}`"
@@ -50,6 +51,7 @@
 
         <template v-slot:append>
           <v-icon-btn
+            v-if="!readonly"
             icon="$close"
             size="26"
             icon-size="14"
@@ -60,7 +62,7 @@
       </v-list-item>
 
       <v-text-field
-        v-if="pending"
+        v-if="pending && !readonly"
         v-model="pendingFilename"
         density="compact"
         hide-details
@@ -117,7 +119,7 @@
 
 <script setup lang="ts">
 import type { Store } from 'src/store'
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 import { useFileSelector } from '../composables/useFileSelector'
 import { VIconBtn } from 'vuetify/labs/components'
 import {
@@ -129,6 +131,7 @@ import {
 } from '@mdi/js'
 
 const store = inject('store') as Store
+const readonly = inject('readonly', ref(false))
 
 const {
   activeFile,

src/editor/FileSelector.vue

@@ -33,7 +33,7 @@
         </template>
         <span>{{ stripSrcPrefix(file) }}</span>
         <v-icon-btn
-          v-if="recentFiles.length > 1"
+          v-if="recentFiles.length > 1 && !readonly"
           icon="$close"
           size="20px"
           icon-size="15px"
@@ -57,6 +57,7 @@ import { useDisplay } from 'vuetify'
 const MAX_RECENT_FILES = 10
 
 const store = inject('store') as Store
+const readonly = inject('readonly', ref(false))
 const { mdAndDown } = useDisplay()
 const { activeFile, stripSrcPrefix, getFileIcon, getFileIconColor } =
   useFileSelector()