Align config to QMK Browser

qmk · Sep 22, 2024 · 056671f · 056671f
1 parent c1b0d00
commit 056671f
Show file tree

Hide file tree

Showing 17 changed files with 1,863 additions and 98 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,20 @@
+/**
+ * .eslint.js
+ *
+ * ESLint configuration file.
+ */
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+}
diff --git a/components.d.ts b/components.d.ts
@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     Build: typeof import('./src/components/Build.vue')['default']
     Compile: typeof import('./src/components/Compile.vue')['default']
+    Debounce: typeof import('./src/components/Debounce.vue')['default']
     Editor: typeof import('./src/components/Editor.vue')['default']
     Features: typeof import('./src/components/Features.vue')['default']
     MiscConfig: typeof import('./src/components/MiscConfig.vue')['default']

diff --git a/index.html b/index.html
@@ -3,7 +3,6 @@
 
 <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/favicon.png" />
     <title>QMK Keymap Compiler</title>

diff --git a/package.json b/package.json
@@ -1,18 +1,21 @@
 {
   "name": "qmk_compile_keymap",
+  "description": "QMK Compile API Frontend",
   "version": "0.0.0",
+  "license": "MIT",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint . --fix --ignore-path .gitignore"
   },
   "dependencies": {
     "@guolao/vue-monaco-editor": "^1.5.4",
     "@mdi/font": "7.4.47",
     "@vueuse/core": "^11.1.0",
     "file-saver": "^2.0.5",
     "roboto-fontface": "*",
-    "vue": "^3.4.31",
+    "vue": "^3.4.37",
     "vuetify": "^3.6.11"
   },
   "devDependencies": {
@@ -21,12 +24,20 @@
     "@types/file-saver": "^2.0.7",
     "@types/node": "^20.14.10",
     "@vitejs/plugin-vue": "^5.0.5",
-    "sass": "1.77.6",
-    "typescript": "^5.4.2",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.22.0",
+    "sass": "^1.71.7 <=1.77.9",
+    "typescript": "^5.4.2 <=5.6.0",
     "unplugin-fonts": "^1.1.1",
     "unplugin-vue-components": "^0.27.2",
-    "vite": "^5.3.3",
-    "vite-plugin-vuetify": "^2.0.3",
+    "vite": "^5.4.1",
+    "vite-plugin-vuetify": "^2.0.4",
     "vue-tsc": "^2.0.26"
   }
 }
diff --git a/src/components/Build.vue b/src/components/Build.vue
@@ -1,11 +1,30 @@
 <template>
-  <v-switch :hide-details="true" label="LTO" v-model="lto"/>
+  <v-switch hide-details label="LTO" v-model="lto"/>
+  <v-select clearable label="Converter" :items="converters" v-model="converter"/>
 </template>
 
 <script lang="ts" setup>
   import { computed } from 'vue'
   import { useKeymapState } from '@/composables/useKeymapState'
   
+  const converters = [
+    'rp2040_ce', // Probably most common so show first
+
+    'bit_c_pro',
+    'blok',
+    'bonsai_c3',
+    'bonsai_c4',
+    'elite_pi',
+    'helios',
+    'imera',
+    'kb2040',
+    'liatris',
+    'michi',
+    'proton_c',
+    'sparkfun_pm2040',
+    'stemcell',
+  ]
+
   const { keymap } = useKeymapState()
   
   const lto = computed({
@@ -19,10 +38,22 @@
         keymap.value.config.build.lto = val;
       } else {
         // TODO: delete actual value and clean up empty parents
-        delete keymap.value?.config?.build;
+        delete keymap.value?.config?.build?.lto;
       }
     }
   })
   
-  </script>
-
+  const converter = computed({
+    get() {
+      return keymap.value.converter ?? null;
+    },
+    set(val) {
+      if (val) {
+          keymap.value.converter = val;
+      } else {
+          delete keymap.value.converter
+      }
+    }
+  })
+
+</script>
diff --git a/src/components/Compile.vue b/src/components/Compile.vue
@@ -13,9 +13,9 @@
         <template v-slot:text>
             <p class="text-md-center">Your firmware will be automatically downloaded after the compilation is complete.</p>
             <div class="d-flex justify-center">
-                <v-progress-circular class="ma-4" indeterminate></v-progress-circular>
+                <v-progress-circular :size="64" :width="6" class="ma-6" indeterminate></v-progress-circular>
             </div>
-            <p v-if=jobID class="text-md-center">JobID: {{ jobID }}</p>
+            <!-- <p v-if=jobID class="text-md-center">JobID: {{ jobID }}</p> -->
         </template>
         <template v-slot:actions>
           <v-btn

diff --git a/src/components/Debounce.vue b/src/components/Debounce.vue
@@ -0,0 +1,63 @@
+<template>
+  <v-slider :max="50" :min="0" :step="1" label="Value" v-model="value" hide-details>
+    <template v-slot:append>
+      <v-text-field
+        v-model="value"
+        density="compact"
+        style="width: 5em"
+        type="number"
+        hide-details
+        single-line
+      ></v-text-field>
+    </template>
+  </v-slider>
+  <v-select clearable label="Algorithms" :items="debounce_type" v-model="type"/>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useKeymapState } from '@/composables/useKeymapState'
+
+const { keymap } = useKeymapState()
+
+const debounce_type = [
+  "asym_eager_defer_pk",
+  "sym_defer_g",
+  "sym_defer_pk",
+  "sym_defer_pr",
+  "sym_eager_pk",
+  "sym_eager_pr",
+];
+
+const value = computed({
+  get() {
+    return keymap.value.config?.debounce ?? 5;
+  },
+  set(val) {
+    val = +val;
+    if (val !== 5) {
+        keymap.value.config = keymap.value.config || {}
+        keymap.value.config.debounce = val;
+    } else {
+        delete keymap.value.config?.debounce;
+    }
+  }
+})
+
+const type = computed({
+    get() {
+      return keymap.value.config?.build?.debounce_type ?? null;
+    },
+    set(val) {
+      if (val) {
+        keymap.value.config = keymap.value.config || {}
+        keymap.value.config.build = keymap.value.config.build || {}
+        keymap.value.config.build.debounce_type = val;
+      } else {
+        // TODO: delete actual value and clean up empty parents
+        delete keymap.value?.config?.build?.debounce_type;
+      }
+    }
+  })
+
+</script>
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="pa-4" fluid style="height:60em">
+  <v-container class="pa-4" fluid style="height:85vh">
     <div>
       <!-- Editor actions -->
       <v-btn class="mb-4" append-icon="fa-solid fa-indent" @click="formatCode">Format</v-btn>

diff --git a/src/components/Features.vue b/src/components/Features.vue
@@ -1,7 +1,8 @@
 <template>
-  <v-switch :hide-details="true" label="Extra" v-model="extrakey"/>
-  <v-switch :hide-details="true" label="Mouse" v-model="mousekey"/>
-  <v-switch :hide-details="true" label="VIA" v-model="via"/>
+  <v-switch hide-details label="Bootmagic" v-model="bootmagic"/>
+  <v-switch hide-details label="Extra Keys" v-model="extrakey"/>
+  <v-switch hide-details label="Mouse Keys" v-model="mousekey"/>
+  <v-switch hide-details label="VIA" v-model="via"/>
 </template>
 
 <script lang="ts" setup>
@@ -10,6 +11,17 @@ import { useKeymapState } from '@/composables/useKeymapState'
 
 const { keymap } = useKeymapState()
 
+const bootmagic = computed({
+  get() {
+    return keymap.value.config?.features?.bootmagic ?? false;
+  },
+  set(val) {
+    keymap.value.config = keymap.value.config || {}
+    keymap.value.config.features = keymap.value.config.features || {}
+    keymap.value.config.features.bootmagic = val;
+  }
+})
+
 const extrakey = computed({
   get() {
     return keymap.value.config?.features?.extrakey ?? false;

diff --git a/src/components/MiscConfig.vue b/src/components/MiscConfig.vue
@@ -1,7 +1,6 @@
 <template>
-    <v-switch :hide-details="true" label="Split USB Detect" v-model="usbdetect"/>
-    <v-switch :hide-details="true" label="Split Watchdog" v-model="watchdog"/>
-    <v-select clearable label="Converter" :items="converters"  v-model="converter"></v-select>
+    <v-switch hide-details label="Split USB Detect" v-model="usbdetect"/>
+    <v-switch hide-details label="Split Watchdog" v-model="watchdog"/>
 </template>
 
 <script lang="ts" setup>
@@ -10,24 +9,6 @@ import { useKeymapState } from '@/composables/useKeymapState'
 
 const { keymap } = useKeymapState()
 
-const converters = [
-    'rp2040_ce', // Probably most common so show first
-
-    'bit_c_pro',
-    'blok',
-    'bonsai_c3',
-    'bonsai_c4',
-    'elite_pi',
-    'helios',
-    'imera',
-    'kb2040',
-    'liatris',
-    'michi',
-    'proton_c',
-    'sparkfun_pm2040',
-    'stemcell',
-]
-
 const usbdetect = computed({
   get() {
     return keymap.value.config?.split?.usb_detect?.enabled ?? false;
@@ -62,18 +43,5 @@ const watchdog = computed({
   }
 })
 
-const converter = computed({
-  get() {
-    return keymap.value.converter ?? null;
-  },
-  set(val) {
-    if (val) {
-        keymap.value.converter = val;
-    } else {
-        delete keymap.value.converter
-    }
-  }
-})
-
 </script>
 
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
@@ -14,6 +14,12 @@
                 </template>
                 <MiscConfig/>
             </v-list-group>
+            <v-list-group value="Debounce">
+                <template v-slot:activator="{ props }">
+                    <v-list-item v-bind="props" title="Debounce"/>
+                </template>
+                <Debounce/>
+            </v-list-group>
             <v-list-group value="Build">
                 <template v-slot:activator="{ props }">
                     <v-list-item v-bind="props" title="Build"/>
@@ -27,5 +33,5 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-const open = ref(['Features', 'Config']);
+const open = ref(['Features']);
 </script>
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
@@ -1,13 +1,4 @@
-/**
- * plugins/index.ts
- *
- * Automatically included in `./src/main.ts`
- */
-
-// Plugins
 import vuetify from './vuetify'
-
-// Types
 import type { App } from 'vue'
 
 export function registerPlugins (app: App) {

diff --git a/src/styles/settings.scss b/src/styles/settings.scss
@@ -2,18 +2,3 @@
 html {
   overflow-y: auto;
 }
-
-code {
-  background-color: rgb(var(--v-theme-code));
-  color: rgb(var(--v-theme-on-code));
-  padding: 0.2em 0.4em;
-}
-
-pre > code {
-  display: inline-block;
-  width: 100%;
-  padding: 1.5em;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  overflow-x: auto;
-}
diff --git a/vite.config.mts b/vite.config.mts
@@ -15,7 +15,12 @@ export default defineConfig({
       template: { transformAssetUrls },
     }),
     // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
-    Vuetify(),
+    Vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'src/styles/settings.scss',
+      },
+    }),
     Components(),
     ViteFonts({
       google: {