improve multiselect

server/server.js

@@ -1,4 +1,5 @@
-console.log("Welcome to Uptime Kuma")
+console.log("Welcome to Uptime Kuma");
+console.log("Node Env: " + process.env.NODE_ENV);
 
 const { sleep, debug } = require("../src/util");
 

src/assets/app.scss

@@ -5,6 +5,15 @@
     font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
 }
 
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #CCC;
+    border-radius: 20px;
+}
+
 .modal {
     backdrop-filter: blur(3px);
 }
@@ -26,7 +35,7 @@
 
 
 .shadow-box {
-    overflow: hidden;
+    //overflow: hidden;   // Forget why add this, but multiple select hide by this
     box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
     padding: 10px;
     border-radius: 10px;
@@ -62,6 +71,10 @@
     background-color: #090C10;
     color: $dark-font-color;
 
+    &::-webkit-scrollbar-thumb {
+        background: $dark-border-color;
+    }
+
     .shadow-box {
         background-color: $dark-bg;
     }
@@ -146,6 +159,7 @@
 
     .multiselect__content-wrapper {
         background-color: $dark-bg2;
+        border-color: $dark-border-color;
     }
 
     .multiselect__option--selected.multiselect__option--highlight {

src/pages/EditMonitor.vue

@@ -96,9 +96,20 @@
 
                     <div class="my-3">
                         <label for="acceptedStatusCodes" class="form-label">Accepted Status Codes</label>
-                        <VueMultiselect id="acceptedStatusCodes" v-model="monitor.accepted_statuscodes" :options="acceptedStatusCodeOptions" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Pick Accepted Status Codes..." :preselect-first="false">
-                            <template #selection="{ values, isOpen }"><span v-if="values.length && !isOpen" class="multiselect__single">{{ values.length }} options selected</span></template>
-                        </VueMultiselect>
+
+                        <VueMultiselect
+                            id="acceptedStatusCodes"
+                            v-model="monitor.accepted_statuscodes"
+                            :options="acceptedStatusCodeOptions"
+                            :multiple="true"
+                            :close-on-select="false"
+                            :clear-on-select="false"
+                            :preserve-search="true"
+                            placeholder="Pick Accepted Status Codes..."
+                            :preselect-first="false"
+                            :taggable="true"
+                        ></VueMultiselect>
+
                         <div class="form-text">
                             Select status codes which are considered as a successful response.
                         </div>
@@ -248,7 +259,7 @@ export default {
     @import "../assets/vars.scss";
 
     .multiselect__tags {
-        border-radius: 2rem;
+        border-radius: 1.5rem;
         border: 1px solid #ced4da;
     }
 
@@ -265,8 +276,15 @@ export default {
     }
 
     .multiselect__tag {
+        border-radius: 50rem;
         background: $primary !important;
     }
+
+    .dark {
+        .multiselect__tag {
+            color: $dark-font-color2;
+        }
+    }
 </style>
 
 <style scoped>

src/util.js

@@ -29,7 +29,7 @@ function ucfirst(str) {
 exports.ucfirst = ucfirst;
 function debug(msg) {
     if (process.env.NODE_ENV === "development") {
-        console.debug(msg);
+        console.log(msg);
     }
 }
 exports.debug = debug;

src/util.ts

@@ -39,6 +39,6 @@ export function ucfirst(str) {
 
 export function debug(msg) {
     if (process.env.NODE_ENV === "development") {
-        console.debug(msg);
+        console.log(msg);
     }
 }