From aa09de6ad2325763b92b0a270d9fbfa9ff2f6daa Mon Sep 17 00:00:00 2001
From: Kloon ImKloon <kloon15@gmail.com>
Date: Tue, 10 Oct 2023 17:27:32 +0200
Subject: [PATCH] Use custom input for numbers (dark mode friendly)

---
 frontend/package-lock.json                | 9 +++++++++
 frontend/package.json                     | 1 +
 frontend/src/components/Breadcrumbs.vue   | 2 +-
 frontend/src/components/prompts/Share.vue | 7 ++++---
 frontend/src/main.ts                      | 2 ++
 frontend/src/types/file.d.ts              | 5 +++++
 frontend/src/views/settings/Global.vue    | 5 ++---
 7 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4b805adc..433c9a7a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "filebrowser-frontend",
       "version": "3.0.0",
       "dependencies": {
+        "@chenfengyuan/vue-number-input": "^2.0.1",
         "@vueuse/core": "^10.5.0",
         "@vueuse/integrations": "^10.5.0",
         "ace-builds": "^1.28.0",
@@ -1766,6 +1767,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@chenfengyuan/vue-number-input": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@chenfengyuan/vue-number-input/-/vue-number-input-2.0.1.tgz",
+      "integrity": "sha512-/jqmfmFulFOGlozts0Sf2GCESMRYVTfZZSz2Tf4n9O5DKjqMi5B/MfRzm5H5A57WuG3L80yXFWFN+XeACKaIhQ==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 618861bc..ffa8832a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
     "test": "playwright test"
   },
   "dependencies": {
+    "@chenfengyuan/vue-number-input": "^2.0.1",
     "@vueuse/core": "^10.5.0",
     "@vueuse/integrations": "^10.5.0",
     "ace-builds": "^1.28.0",
diff --git a/frontend/src/components/Breadcrumbs.vue b/frontend/src/components/Breadcrumbs.vue
index 2ed43953..6da88053 100644
--- a/frontend/src/components/Breadcrumbs.vue
+++ b/frontend/src/components/Breadcrumbs.vue
@@ -44,7 +44,7 @@ const items = computed(() => {
     parts.pop();
   }
 
-  let breadcrumbs: any[] = [];
+  let breadcrumbs: BreadCrumb[] = [];
 
   for (let i = 0; i < parts.length; i++) {
     if (i === 0) {
diff --git a/frontend/src/components/prompts/Share.vue b/frontend/src/components/prompts/Share.vue
index fee1f2af..af9a9117 100644
--- a/frontend/src/components/prompts/Share.vue
+++ b/frontend/src/components/prompts/Share.vue
@@ -80,13 +80,14 @@
       <div class="card-content">
         <p>{{ $t("settings.shareDuration") }}</p>
         <div class="input-group input">
-          <input
-            v-focus
-            type="number"
+          <vue-number-input
+            controls
+            size="small"
             max="2147483647"
             min="1"
             @keyup.enter="submit"
             v-model.trim="time"
+            v-focus
           />
           <select class="right" v-model="unit" :aria-label="$t('time.unit')">
             <option value="seconds">{{ $t("time.seconds") }}</option>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 92545065..2769ce3c 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,5 +1,6 @@
 import { disableExternal } from "@/utils/constants";
 import { createApp } from "vue";
+import VueNumberInput from "@chenfengyuan/vue-number-input";
 import VueLazyload from "vue-lazyload";
 import Toast, { POSITION, useToast } from "vue-toastification";
 import {
@@ -28,6 +29,7 @@ const pinia = createPinia(router);
 
 const app = createApp(App);
 
+app.component(VueNumberInput.name, VueNumberInput);
 app.use(VueLazyload);
 app.use(Toast, {
   transition: "Vue-Toastification__bounce",
diff --git a/frontend/src/types/file.d.ts b/frontend/src/types/file.d.ts
index 9b1e60d9..db2aa5fe 100644
--- a/frontend/src/types/file.d.ts
+++ b/frontend/src/types/file.d.ts
@@ -51,3 +51,8 @@ interface ClipItem {
   from: string;
   name: string;
 }
+
+interface BreadCrumb {
+  name: string;
+  url: string;
+}
diff --git a/frontend/src/views/settings/Global.vue b/frontend/src/views/settings/Global.vue
index f6a766c2..afb9940c 100644
--- a/frontend/src/views/settings/Global.vue
+++ b/frontend/src/views/settings/Global.vue
@@ -128,9 +128,8 @@
               <label for="tus-retryCount">{{
                 t("settings.tusUploadsRetryCount")
               }}</label>
-              <input
-                class="input input--block"
-                type="number"
+              <vue-number-input
+                controls
                 v-model.number="settings.tus.retryCount"
                 id="tus-retryCount"
                 min="0"