style: format code style

henryhale · Jan 6, 2024 · dfce8bc · dfce8bc
1 parent 09f0f8e
commit dfce8bc
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 82 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -2,123 +2,94 @@
 import NavBar from './components/NavBar.vue';
 import CodeMirror from './components/CodeMirror.vue';
 import {
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watchEffect,
+	onMounted,
+	onUnmounted,
+	reactive,
+	ref,
+	watchEffect,
 } from 'vue';
 import setupPreview from './composables/preview';
 import { backup, restore, templateData } from './composables/storage';
 
 let fileData = restore();
 if (!fileData || typeof fileData !== 'object') {
-  fileData = templateData;
-  backup(fileData);
+	fileData = templateData;
+	backup(fileData);
 }
 
 const files = reactive(Object.assign({}, fileData));
 
 function backupFiles(e) {
-  if (e.ctrlKey && e.key.toLowerCase() === 's') {
-    e.preventDefault();
-    console.log('backing up files...');
-    backup(files);
-    console.log('backup was successful...');
-  }
+	if (e.ctrlKey && e.key.toLowerCase() === 's') {
+		e.preventDefault();
+		console.log('backing up files...');
+		backup(files);
+		console.log('backup was successful...');
+	}
 }
 
 const showPreview = ref(true);
 
 const currentTab = ref('index.html');
 
 function setTab(to) {
-  currentTab.value = to;
+	currentTab.value = to;
 }
 
 function getLang(filename) {
-  const ext = filename.split('.').pop();
-  if (ext === 'js') return 'javascript';
-  return ext;
+	const ext = filename.split('.').pop();
+	if (ext === 'js') return 'javascript';
+	return ext;
 }
 
 function setCode(file, doc) {
-  files[file] = doc;
+	files[file] = doc;
 }
 
 const iframe = ref();
 
 onMounted(() => {
 
-  watchEffect(() => {
-    setupPreview(iframe.value, files['index.html'], files['style.css'], files['main.js']);
-  })
+	watchEffect(() => {
+		setupPreview(iframe.value, files['index.html'], files['style.css'], files['main.js']);
+	})
 
-  document.addEventListener('keydown', backupFiles, false);
+	document.addEventListener('keydown', backupFiles, false);
 });
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', backupFiles, false);
+	document.removeEventListener('keydown', backupFiles, false);
 });
 </script>
 
 <template>
-  <div class="box">
-    <nav-bar>
-      <template #brand>
-        <img class="w-6 h-6" src="/brand.svg" />
-        <span><b>LiveCode</b></span>
-      </template>
-      <button
-        class="btn"
-        :class="{ active: showPreview }"
-        @click="showPreview = !showPreview"
-      >
-        {{ !showPreview ? 'Show ' : 'Hide ' }} Preview
-      </button>
-    </nav-bar>
-    <div class="main" :class="{ 'md:flex-row': showPreview }">
-      <div
-        class="flex-col h-full"
-        :class="[showPreview ? 'hidden md:flex md:w-1/2' : 'flex']"
-      >
-        <div class="tabs">
-          <button
-            v-for="t in Object.keys(files)"
-            :key="t"
-            :class="{ active: currentTab === t }"
-            @click="setTab(t)"
-          >
-            {{ t }}
-          </button>
-        </div>
-        <div class="code">
-          <div
-            v-for="file in Object.keys(files)"
-            :key="file"
-            v-show="file === currentTab"
-          >
-            <CodeMirror
-              :lang="getLang(file)"
-              :file="file"
-              :initialDoc="files[file]"
-              @change="(doc) => setCode(file, doc)"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        v-show="showPreview"
-        class="h-full"
-        :class="{ 'md:w-1/2 md:border md:border-gray-200': showPreview }"
-      >
-        <iframe
-          ref="iframe"
-          src="about:blank"
-          frameborder="0"
-          title="preview"
-        ></iframe>
-      </div>
-    </div>
-  </div>
+	<div class="box">
+		<nav-bar>
+			<template #brand>
+				<img class="w-6 h-6" src="/brand.svg" />
+				<span><b>LiveCode</b></span>
+			</template>
+			<button class="btn" :class="{ active: showPreview }" @click="showPreview = !showPreview">
+				{{ !showPreview ? 'Show ' : 'Hide ' }} Preview
+			</button>
+		</nav-bar>
+		<div class="main" :class="{ 'md:flex-row': showPreview }">
+			<div class="flex-col h-full" :class="[showPreview ? 'hidden md:flex md:w-1/2' : 'flex']">
+				<div class="tabs">
+					<button v-for="t in Object.keys(files)" :key="t" :class="{ active: currentTab === t }" @click="setTab(t)">
+						{{ t }}
+					</button>
+				</div>
+				<div class="code">
+					<div v-for="file in Object.keys(files)" :key="file" v-show="file === currentTab">
+						<CodeMirror :lang="getLang(file)" :file="file" :initialDoc="files[file]"
+							@change="(doc) => setCode(file, doc)" />
+					</div>
+				</div>
+			</div>
+			<div v-show="showPreview" class="h-full" :class="{ 'md:w-1/2 md:border md:border-gray-200': showPreview }">
+				<iframe ref="iframe" src="about:blank" frameborder="0" title="preview"></iframe>
+			</div>
+		</div>
+	</div>
 </template>
diff --git a/src/components/CodeMirror.vue b/src/components/CodeMirror.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref, onMounted, watchEffect } from 'vue';
+import { ref, onMounted, watchEffect } from 'vue';
 
 const props = defineProps({
   lang: {