fix: allow use filename when there are more then one file

Author: dimaslz

components/Editor.vue

@@ -110,14 +110,21 @@
             </div>
         </div>
 
-        <div class="flex w-full px-1 pb-1 border-b">
-            <input
-                type="text"
-                :value="filename"
-                @input="(event) => $emit('update:filename', event.target.value)"
-                class="block w-full py-1 pl-3 pr-10 text-base border-gray-300 focus:outline-none rounded-lg focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-                placeholder="filename"
-            />
+        <div v-if="allowFilename" class="flex items-center justify-between bg-ui-gray-700">
+            <div class="flex items-center gap-2 m-2 mt-0 rounded-lg  bg-ui-gray-800 focus-within:ring-2 focus-within:ring-ui-focus w-full">
+                <label
+                    class="hidden pl-2 text-xs font-semibold leading-none tracking-wide uppercase  text-ui-gray-500 xl:inline-block whitespace-nowrap"
+                >
+                    Filename
+                </label>
+                <input
+                    type="text"
+                    :value="filename"
+                    class="text-xs font-medium text-ui-gray-400 bg-ui-gray-800 border-0 rounded-lg cursor-pointer hover:bg-ui-gray-900 focus:bg-ui-gray-900 focus:outline-none focus:ring-0 w-full"
+                    @input="(event) => $emit('update:filename', event.target.value)"
+                    placeholder="filename"
+                />
+            </div>
         </div>
 
         <div ref="monaco" class="w-full h-full"></div>
@@ -148,6 +155,7 @@ export default {
         size: Number,
         tabSize: [String, Number],
         filename: String,
+        allowFilename: Boolean,
         language: String,
         options: Object,
         landscape: Boolean,

components/Page.vue

@@ -26,6 +26,7 @@
                 :tab-size="editor.tabSize"
                 :language="editor.language"
                 :filename="editor.filename"
+                :allow-filename="editors.length > 1"
                 :landscape="isLandscape"
                 :can-move-up="index !== 0"
                 :can-move-down="index !== editors.length - 1"

components/Preview.vue

@@ -92,6 +92,7 @@
                             ref="window"
                             class="z-10"
                             :blocks="blocks"
+                            :filenames="filenames"
                             :settings="settings"
                             @update:title="(title) => (settings.title = title)"
                         />

components/Window.vue

@@ -40,11 +40,11 @@
             </div>
         </div>
 
-        <div
-            v-for="(lines, index) in blocks"
-            :key="index"
-            :style="{ padding: `${settings.padding}px` }"
-        >
+        <div v-for="(lines, index) in blocks" :key="index" :style="{ padding: `${settings.padding}px` }">
+            <div
+                v-if="filenames.length > 1"
+                class="text-sm mb-2 text-gray-400 w-full text-right"
+            >{{ filenames[index] }}</div>
             <Code
                 class="relative"
                 :lines="lines"
@@ -63,6 +63,7 @@ export default {
     props: {
         blocks: Array,
         settings: Object,
+        filenames: Array
     },
 
     components: { Code, FauxMenu },