feat: update dependencies + update sass syntax

ietf-tools · Jan 20, 2025 · fc65ee3 · fc65ee3
1 parent 8d97d5a
commit fc65ee3
Show file tree

Hide file tree

Showing 13 changed files with 1,064 additions and 591 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
   "editor.bracketPairColorization.enabled": true,
   "editor.guides.bracketPairs": true,
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "editor.codeActionsOnSave": [
     "source.fixAll.eslint"
@@ -11,7 +11,7 @@
     "javascriptreact",
     "typescript",
     "vue"
-  ]
+  ],
   // "[vue]": {
   //   "editor.defaultFormatter": "Vue.volar"
   // }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,42 +23,44 @@
     "@ietf-tools/idnits": "3.0.0-alpha.36",
     "@msgpack/msgpack": "3.0.0-beta2",
     "@opentelemetry/api": "1.9.0",
-    "@opentelemetry/auto-instrumentations-node": "0.50.0",
+    "@opentelemetry/auto-instrumentations-node": "0.51.0",
     "@opentelemetry/exporter-metrics-otlp-proto": "0.53.0",
     "@opentelemetry/exporter-trace-otlp-proto": "0.53.0",
     "@opentelemetry/sdk-metrics": "1.26.0",
     "@opentelemetry/sdk-node": "0.53.0",
     "@opentelemetry/sdk-trace-node": "1.26.0",
     "@quasar/extras": "1.16.12",
     "ansicolor": "2.0.3",
-    "electron-updater": "6.3.4",
+    "command-exists": "1.2.9",
+    "electron-updater": "6.3.9",
     "fast-defer": "1.1.8",
-    "got": "14.4.2",
+    "got": "14.4.3",
     "isomorphic-git": "1.27.1",
     "lodash-es": "4.17.21",
     "luxon": "3.5.0",
     "mitt": "3.0.1",
     "monaco-editor": "0.52.0",
     "openpgp": "5.11.2",
     "pinia": "2.2.4",
-    "pinia-plugin-persistedstate": "4.0.2",
-    "quasar": "2.17.0",
+    "pinia-plugin-persistedstate": "4.1.1",
+    "quasar": "2.17.1",
+    "simple-git": "3.27.0",
     "vscode-jsonrpc": "8.2.1",
     "vscode-uri": "3.0.8",
-    "vue": "3.5.10",
+    "vue": "3.5.12",
     "vue-router": "4.4.5"
   },
   "devDependencies": {
     "@electron/fuses": "1.8.0",
     "@eslint/eslintrc": "3.1.0",
-    "@quasar/app-vite": "2.0.0-beta.21",
+    "@quasar/app-vite": "2.0.0-beta.24",
     "@vue/language-plugin-pug": "2.1.6",
     "autoprefixer": "10.4.20",
-    "electron": "32.1.2",
-    "electron-builder": "25.0.5",
+    "electron": "33.0.2",
+    "electron-builder": "25.1.8",
     "electron-packager": "17.1.2",
-    "eslint": "9.11.1",
-    "eslint-plugin-vue": "9.28.0",
+    "eslint": "9.13.0",
+    "eslint-plugin-vue": "9.29.1",
     "eslint-plugin-vue-pug": "0.6.2",
     "neostandard": "0.11.6",
     "postcss": "8.4.47",

diff --git a/src/components/AppModeSidebar.vue b/src/components/AppModeSidebar.vue
@@ -72,9 +72,11 @@ const modes = [
 </script>
 
 <style lang="scss">
+@use "sass:color";
+
 .app-mode {
   flex: 0 0 45px;
-  background-color: darken($dark-5, 5%);
+  background-color: color.adjust($dark-5, $lightness: -5%);
   background-image: linear-gradient(to right, $dark-2, $dark-3);
   border-top: 1px solid $blue-grey-5;
   padding: 5px;

diff --git a/src/components/BasicToolbar.vue b/src/components/BasicToolbar.vue
@@ -131,9 +131,11 @@ function openPreferences () {
 </script>
 
 <style lang="scss">
+@use "sass:color";
+
 .toolbar-basic {
   height: 40px;
-  background: radial-gradient(ellipse at bottom, $blue-grey-9, darken($blue-grey-10, 5%));
+  background: radial-gradient(ellipse at bottom, $blue-grey-9, color.adjust($blue-grey-10, $lightness: -5%));
   border-bottom: 1px solid $blue-grey-5;
   border-left: 1px solid $blue-grey-5;
 

diff --git a/src/components/DrawerPane.vue b/src/components/DrawerPane.vue
@@ -40,7 +40,9 @@ const state = reactive({
 </script>
 
 <style lang="scss">
+@use "sass:color";
+
 .drawer-pane {
-  border-left: 1px solid lighten($dark-1, 10%);
+  border-left: 1px solid color.adjust($dark-1, $lightness: 10%);
 }
 </style>
diff --git a/src/components/EditorToolbar.vue b/src/components/EditorToolbar.vue
@@ -149,9 +149,11 @@ function openPreferences () {
 </script>
 
 <style lang="scss">
+@use "sass:color";
+
 .toolbar-editor {
   height: 40px;
-  background: radial-gradient(ellipse at bottom, $light-blue-9, darken($light-blue-10, 5%));
+  background: radial-gradient(ellipse at bottom, $light-blue-9, color.adjust($light-blue-10, $lightness: -5%));
   border-left: 1px solid $light-blue-5;
   border-bottom: 1px solid $light-blue-5;
 

diff --git a/src/components/FooterToolbar.vue b/src/components/FooterToolbar.vue
@@ -61,6 +61,9 @@ q-footer
     .footer-bar-separator
     .footer-bar-item
       span.text-caption UTF-8
+    .footer-bar-separator
+    .footer-bar-item
+      span.text-caption LF
 </template>
 
 <script setup>
@@ -107,8 +110,10 @@ function runAllChecks () {
 </script>
 
 <style lang="scss">
+@use "sass:color";
+
 .welcome-footer-bar, .footer-bar {
-  border-left: 1px solid lighten($dark-1, 10%);
+  border-left: 1px solid color.adjust($dark-1, $lightness: 10%);
 }
 .welcome-footer-bar {
   background-color: $dark-3;
@@ -133,14 +138,14 @@ function runAllChecks () {
       background-color: $red-9;
       border-top-color: $red-6;
       border-left: 1px solid $red-7;
-      border-right: 1px solid darken($red-10, 5%);
+      border-right: 1px solid color.adjust($red-10, $lightness: -5%);
       color: $red-2;
     }
     &.positive {
       background-color: $green-9;
       border-top-color: $green-6;
       border-left: 1px solid $green-8;
-      border-right: 1px solid darken($green-10, 5%);
+      border-right: 1px solid color.adjust($green-10, $lightness: -5%);
       color: $green-2;
     }
   }

diff --git a/src/components/ReviewToolbar.vue b/src/components/ReviewToolbar.vue
@@ -131,9 +131,11 @@ function openPreferences () {
 </script>
 
 <style lang="scss">
+@use "sass:color";
+
 .toolbar-review {
   height: 40px;
-  background: radial-gradient(ellipse at bottom, $indigo-5, darken($indigo-7, 5%));
+  background: radial-gradient(ellipse at bottom, $indigo-5, color.adjust($indigo-7, $lightness: -5%));
   border-bottom: 1px solid $indigo-3;
   border-left: 1px solid $indigo-3;
 

diff --git a/src/components/SubmitToolbar.vue b/src/components/SubmitToolbar.vue
@@ -30,9 +30,11 @@ function openPreferences () {
 </script>
 
 <style lang="scss">
+@use "sass:color";
+
 .toolbar-submit {
   height: 40px;
-  background: radial-gradient(ellipse at bottom, $light-green-9, darken($light-green-10, 5%));
+  background: radial-gradient(ellipse at bottom, $light-green-9, color.adjust($light-green-10, $lightness: -5%));
   border-bottom: 1px solid $light-green-5;
   border-left: 1px solid $light-green-5;
 }

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
@@ -11,22 +11,23 @@
 // It's highly recommended to change the default colors
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
+@use "sass:color";
 
 $primary   : #1976D2;
 $secondary : #26A69A;
 $accent    : #9C27B0;
 
 $dark      : #1D1D1D;
-$dark-1    : lighten(#0d1117, 20%);
-$dark-2    : lighten(#0d1117, 15%);
-$dark-3    : lighten(#0d1117, 10%);
-$dark-4    : lighten(#0d1117, 5%);
+$dark-1    : color.adjust(#0d1117, $lightness: 20%);
+$dark-2    : color.adjust(#0d1117, $lightness: 15%);
+$dark-3    : color.adjust(#0d1117, $lightness: 10%);
+$dark-4    : color.adjust(#0d1117, $lightness: 5%);
 $dark-5    : #0d1117;
 $dark-6    : #070a0d;
-$dark-7    : darken(#070a0d, 5%);
+$dark-7    : color.adjust(#070a0d, $lightness: -5%);
 $dark-page : #121212;
 
-$positive  : darken(#02C39A, 5%);
+$positive  : color.adjust(#02C39A, $lightness: -5%);
 $negative  : #C10015;
 $info      : #31CCEC;
 $warning   : #F2C037;

diff --git a/src/pages/SubmitPage.vue b/src/pages/SubmitPage.vue
@@ -61,9 +61,11 @@ const docsStore = useDocsStore()
 </script>
 
 <style lang="scss">
+@use "sass:color";
+
 .submit {
-  background: linear-gradient(45deg, darken($dark-4, 2%), $dark-6);
-  border-left: 1px solid lighten($dark-1, 10%);
+  background: linear-gradient(45deg, color.adjust($dark-4, $lightness: -2%), $dark-6);
+  border-left: 1px solid color.adjust($dark-1, $lightness: 10%);
 
   &-container {
     max-width: 650px;

diff --git a/src/pages/WelcomePage.vue b/src/pages/WelcomePage.vue
@@ -124,11 +124,13 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
+@use "sass:color";
+
 .welcome {
-  background: linear-gradient(45deg, darken($dark-4, 2%), $dark-6);
+  background: linear-gradient(45deg, color.adjust($dark-4, $lightness: -2%), $dark-6);
 
   &-container {
-    max-width: 650px;
+    max-width: 600px;
     margin: 0 auto;
     padding-top: max(30px, calc(50vh - 420px));
   }