From c0922750db3023cf7f0d6bb2c9d8223e1aefa4ca Mon Sep 17 00:00:00 2001
From: dimaslz <me@dimaslz.io>
Date: Tue, 23 Nov 2021 22:11:13 +0100
Subject: [PATCH 1/5] feat: add possibility to write the filename per editor

---
 components/Editor.vue  | 11 +++++++++++
 components/Page.vue    |  7 +++++++
 components/Preview.vue |  1 +
 3 files changed, 19 insertions(+)

diff --git a/components/Editor.vue b/components/Editor.vue
index 6553dd9..5cd3944 100644
--- a/components/Editor.vue
+++ b/components/Editor.vue
@@ -110,6 +110,16 @@
             </div>
         </div>
 
+        <div class="flex w-full px-1 pb-1 border-b">
+            <input
+                type="text"
+                :value="filename"
+                @input="(event) => $emit('filename-change', 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>
+
         <div ref="monaco" class="w-full h-full"></div>
     </div>
 </template>
@@ -137,6 +147,7 @@ export default {
         theme: String,
         size: Number,
         tabSize: [String, Number],
+        filename: String,
         language: String,
         options: Object,
         landscape: Boolean,
diff --git a/components/Page.vue b/components/Page.vue
index 40953db..b79fd7e 100644
--- a/components/Page.vue
+++ b/components/Page.vue
@@ -25,6 +25,7 @@
                 :size="sizes[0]"
                 :tab-size="editor.tabSize"
                 :language="editor.language"
+                :filename="editor.filename"
                 :landscape="isLandscape"
                 :can-move-up="index !== 0"
                 :can-move-down="index !== editors.length - 1"
@@ -37,6 +38,7 @@
                 @update:layout="toggleLayout"
                 @update:tab-size="(size) => (editors[index].tabSize = size)"
                 @update:language="(lang) => (editors[index].language = lang)"
+                @filename-change="(filename) => (editors[index].filename = filename)"
             />
         </div>
 
@@ -44,6 +46,7 @@
             dusk="preview"
             ref="preview"
             :tab="tab"
+            :filenames="filenames"
             :code="code"
             :languages="languages"
             class="flex flex-col justify-between w-full h-full overflow-auto"
@@ -149,6 +152,10 @@ export default {
             }));
         },
 
+        filenames() {
+            return this.editors.map(({ filename }) => filename);
+        },
+
         canRemoveEditor() {
             return this.editors.length > 1;
         },
diff --git a/components/Preview.vue b/components/Preview.vue
index dd4b81b..c528ce2 100644
--- a/components/Preview.vue
+++ b/components/Preview.vue
@@ -378,6 +378,7 @@ const DEFAULT_WIDTH = 450;
 
 export default {
     props: {
+        filenames: Array,
         tab: Object,
         code: Array,
         languages: Array,

From 8c8193cbad535628c7a897be6901cf2d3233cbd0 Mon Sep 17 00:00:00 2001
From: dimaslz <me@dimaslz.io>
Date: Wed, 24 Nov 2021 21:39:55 +0100
Subject: [PATCH 2/5] chore(page): init filename on first load

---
 components/Page.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Page.vue b/components/Page.vue
index b79fd7e..f8cd0c8 100644
--- a/components/Page.vue
+++ b/components/Page.vue
@@ -245,6 +245,7 @@ export default {
                 id: uuid(),
                 tabSize: 4,
                 language: language,
+                filename: '',
                 value: language === 'php' ? '<?php\n\n' : '',
             };
         },

From f588087d6a1278d078b6a6a552bc28ec9075129c Mon Sep 17 00:00:00 2001
From: dimaslz <me@dimaslz.io>
Date: Thu, 25 Nov 2021 21:51:58 +0100
Subject: [PATCH 3/5] chore: update filename event on Editor

---
 components/Editor.vue | 2 +-
 components/Page.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Editor.vue b/components/Editor.vue
index 5cd3944..5f7ca4e 100644
--- a/components/Editor.vue
+++ b/components/Editor.vue
@@ -114,7 +114,7 @@
             <input
                 type="text"
                 :value="filename"
-                @input="(event) => $emit('filename-change', event.target.value)"
+                @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"
             />
diff --git a/components/Page.vue b/components/Page.vue
index f8cd0c8..7c53c5d 100644
--- a/components/Page.vue
+++ b/components/Page.vue
@@ -38,7 +38,7 @@
                 @update:layout="toggleLayout"
                 @update:tab-size="(size) => (editors[index].tabSize = size)"
                 @update:language="(lang) => (editors[index].language = lang)"
-                @filename-change="(filename) => (editors[index].filename = filename)"
+                @update:filename="(filename) => (editors[index].filename = filename)"
             />
         </div>
 

From 136bb50c12f22e16f70277526868ded1936f0721 Mon Sep 17 00:00:00 2001
From: dimaslz <me@dimaslz.io>
Date: Sat, 1 Jan 2022 13:48:01 +0000
Subject: [PATCH 4/5] fix: allow use filename when there are more then one file

---
 components/Editor.vue  | 24 ++++++++++++++++--------
 components/Page.vue    |  1 +
 components/Preview.vue |  1 +
 components/Window.vue  | 11 ++++++-----
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/components/Editor.vue b/components/Editor.vue
index 5f7ca4e..bd91625 100644
--- a/components/Editor.vue
+++ b/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,
diff --git a/components/Page.vue b/components/Page.vue
index 7c53c5d..14fb2b8 100644
--- a/components/Page.vue
+++ b/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"
diff --git a/components/Preview.vue b/components/Preview.vue
index c528ce2..d810813 100644
--- a/components/Preview.vue
+++ b/components/Preview.vue
@@ -92,6 +92,7 @@
                             ref="window"
                             class="z-10"
                             :blocks="blocks"
+                            :filenames="filenames"
                             :settings="settings"
                             @update:title="(title) => (settings.title = title)"
                         />
diff --git a/components/Window.vue b/components/Window.vue
index 7db6687..5013c7b 100644
--- a/components/Window.vue
+++ b/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 },

From 2c224462a7a8a48302310c0201daccedfc634be8 Mon Sep 17 00:00:00 2001
From: Steve Bauman <steven_bauman@outlook.com>
Date: Thu, 20 Jan 2022 16:31:56 -0500
Subject: [PATCH 5/5] Formatting

---
 components/Preview.vue |  4 ++--
 components/Window.vue  | 18 +++++++++++-------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/Preview.vue b/components/Preview.vue
index 7a85ff9..c5e8d19 100644
--- a/components/Preview.vue
+++ b/components/Preview.vue
@@ -87,8 +87,8 @@
                             ref="window"
                             class="z-10"
                             :blocks="blocks"
-                            :filenames="filenames"
                             :settings="settings"
+                            :filenames="filenames"
                             @update:title="(title) => (settings.title = title)"
                         />
 
@@ -365,9 +365,9 @@ const DEFAULT_WIDTH = 450;
 
 export default {
     props: {
-        filenames: Array,
         tab: Object,
         code: Array,
+        filenames: Array,
         languages: Array,
     },
 
diff --git a/components/Window.vue b/components/Window.vue
index 5013c7b..4ac6017 100644
--- a/components/Window.vue
+++ b/components/Window.vue
@@ -32,7 +32,7 @@
                     type="text"
                     ref="title"
                     v-model="title"
-                    class="w-full p-0 text-sm font-medium text-center truncate bg-transparent border-0 shadow-none  focus:ring-0"
+                    class="w-full p-0 text-sm font-medium text-center truncate bg-transparent border-0 shadow-none focus:ring-0"
                     @blur="editingTitle = false"
                 />
 
@@ -40,11 +40,15 @@
             </div>
         </div>
 
-        <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>
+        <div
+            v-for="(lines, index) in blocks"
+            :key="index"
+            :style="{ padding: `${settings.padding}px` }"
+        >
+            <div v-if="filenames.length > 1" class="mb-2 text-sm text-right text-gray-400">
+                {{ filenames[index] }}
+            </div>
+
             <Code
                 class="relative"
                 :lines="lines"
@@ -63,7 +67,7 @@ export default {
     props: {
         blocks: Array,
         settings: Object,
-        filenames: Array
+        filenames: Array,
     },
 
     components: { Code, FauxMenu },