From 26c50fce5280670acfd305a7b613a73ab09dfeca Mon Sep 17 00:00:00 2001
From: zvecr <git@zvecr.com>
Date: Sun, 22 Sep 2024 22:55:37 +0100
Subject: [PATCH] Align styles

---
 src/components/Compile.vue  |  2 +-
 src/components/Debounce.vue |  2 +-
 src/components/Editor.vue   | 20 +++++++++++++++++++-
 src/plugins/vuetify.ts      |  4 +++-
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/Compile.vue b/src/components/Compile.vue
index 7f3186f..f500d21 100644
--- a/src/components/Compile.vue
+++ b/src/components/Compile.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-btn block color="primary" append-icon="fa-solid fa-play" @click="dialog = true">Compile</v-btn>
+    <v-btn block color="primary" class="mt-2 mb-4" append-icon="fa-solid fa-play" @click="dialog = true">Compile</v-btn>
     <v-dialog
       v-model="dialog"
       width="auto"
diff --git a/src/components/Debounce.vue b/src/components/Debounce.vue
index 301186a..1ed6459 100644
--- a/src/components/Debounce.vue
+++ b/src/components/Debounce.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-slider :max="50" :min="0" :step="1" label="Value" v-model="value" hide-details>
+  <v-slider :max="50" :min="0" :step="1" class="pb-2" label="Value" v-model="value" hide-details>
     <template v-slot:append>
       <v-text-field
         v-model="value"
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 221bde9..d41a7a2 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -2,7 +2,15 @@
   <v-container class="pa-4" fluid style="height:85vh">
     <!-- Editor actions -->
     <div class="d-flex">
-      <v-btn class="mb-4 mr-4" variant="tonal" append-icon="fa-solid fa-file-import" @click="importKeymap">Import</v-btn>
+      <v-btn-group class="mb-4 mr-4" variant="tonal" density="compact" divided>
+        <v-btn @click="importKeymap">
+          <v-icon>fa-solid fa-upload</v-icon>
+        </v-btn>
+        <v-btn readonly>keymap.json</v-btn>
+        <v-btn @click="exportKeymap">
+          <v-icon>fa-solid fa-download</v-icon>
+        </v-btn>
+      </v-btn-group>
       <v-spacer/>
       <v-btn class="mb-4 mr-4" variant="tonal" append-icon="fa-solid fa-indent" @click="formatCode">Format</v-btn>
     </div>
@@ -26,6 +34,7 @@ import { ref, shallowRef, computed } from "vue";
 import { useTheme } from "vuetify";
 import { useTimeoutFn } from "@vueuse/core";
 import { useKeymapState } from "@/composables/useKeymapState";
+import { saveAs } from 'file-saver';
 
 const theme = useTheme();
 const { keymap } = useKeymapState();
@@ -98,5 +107,14 @@ const importKeymap = () => {
   };
   i.click();
 };
+
+const exportKeymap = () => {
+  const km_str = JSON.stringify(keymap.value, null, 4);
+  console.log(km_str)
+  var blob = new Blob([km_str], {type: "text/plain;charset=utf-8"});
+
+  saveAs(blob, 'keymap.json');
+};
+
 </script>
 
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index c3f67ef..9752f48 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -13,7 +13,9 @@ export default createVuetify({
   },
   defaults: {
     VMain: {
-      VSwitch: { color: 'primary', density: 'compact', class: 'pl-4' }
+      VSwitch: { color: 'primary', density: 'compact', class: 'pl-4' },
+      VSelect: { density: 'compact' },
+      VSlider: { density: 'compact' }
     }
   },
   theme: {