Use custom input for numbers (dark mode friendly)

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",

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",

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) {

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
+          <vue-number-input
-            v-focus
+            controls
-            type="number"
+            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>

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",

frontend/src/types/file.d.ts

@@ -51,3 +51,8 @@ interface ClipItem {
   from: string;
   name: string;
 }
+
+interface BreadCrumb {
+  name: string;
+  url: string;
+}

frontend/src/views/settings/Global.vue

@@ -128,9 +128,8 @@
               <label for="tus-retryCount">{{
                 t("settings.tusUploadsRetryCount")
               }}</label>
-              <input
+              <vue-number-input
-                class="input input--block"
+                controls
-                type="number"
                 v-model.number="settings.tus.retryCount"
                 id="tus-retryCount"
                 min="0"