feat: refs #7957 update VnSearchbar component with improved search URL handling and styling enhancements

src/components/ui/VnSearchbar.vue

@@ -85,6 +85,21 @@ if (props.redirect)
     };
 let arrayData = useArrayData(props.dataKey, arrayDataProps);
 let store = arrayData.store;
+const to = computed(() => {
+    const { params } = arrayData.getCurrentFilter();
+    params.search = searchText.value || undefined;
+    const url = { path: route.path, query: { ...(route.query ?? {}) } };
+    const searchUrl = arrayData.store.searchUrl;
+
+    for (const key in params) {
+        const val = params[key];
+        if (typeof val === 'object' && !Array.isArray(val) && !(val instanceof Date))
+            params[key] = JSON.stringify(val);
+    }
+
+    if (searchUrl) url.query[searchUrl] = JSON.stringify(params);
+    return url;
+});
 
 watch(
     () => props.dataKey,
@@ -121,27 +136,17 @@ async function search() {
     }
     await arrayData.applyFilter(filter);
 }
-
-const to = computed(() => {
-    const { params } = arrayData.getCurrentFilter();
-    params.search = searchText.value || undefined;
-    const url = { path: route.path, query: { ...(route.query ?? {}) } };
-    const searchUrl = arrayData.store.searchUrl;
-
-    for (const key in params) {
-        const val = params[key];
-        if (typeof val === 'object' && !Array.isArray(val) && !(val instanceof Date))
-            params[key] = JSON.stringify(val);
-    }
-
-    if (searchUrl) url.query[searchUrl] = JSON.stringify(params);
-    return url;
-});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="state.isHeaderMounted()">
         <QForm @submit="search" id="searchbarForm">
-            <RouterLink :to="to" @click="!$event.shiftKey && !$event.ctrlKey && search()">
+            <RouterLink
+                :to="to"
+                @click="
+                    !$event.shiftKey && !$event.ctrlKey && search();
+                    $refs.input.focus();
+                "
+            >
                 <QIcon
                     v-if="!quasar.platform.is.mobile"
                     class="cursor-pointer"
@@ -151,6 +156,7 @@ const to = computed(() => {
             </RouterLink>
             <VnInput
                 id="searchbar"
+                ref="input"
                 v-model.trim="searchText"
                 :placeholder="t(props.label)"
                 dense
@@ -183,22 +189,31 @@ const to = computed(() => {
     transition: width 0.36s;
 }
 
-.cursor-info {
-    cursor: help;
-}
-
 :deep(.q-field--dark .q-field__native:focus) {
     background-color: white;
     color: black;
 }
 
+:deep(.q-field--focused) {
+    .q-icon {
+        color: black;
+    }
+}
+
+.cursor-info {
+    cursor: help;
+}
+
 .q-form {
     display: flex;
     align-items: center;
     border-radius: 4px;
     padding: 0 5px;
-    background-color: #4b4b4b;
+    background-color: var(--vn-search-color);
 
+    &:hover {
+        background-color: var(--vn-search-color-hover);
+    }
     &:focus-within {
         background-color: white;
 
@@ -211,9 +226,4 @@ const to = computed(() => {
 .q-icon {
     color: var(--vn-label-color);
 }
-:deep(.q-field--focused) {
-    .q-icon {
-        color: black;
-    }
-}
 </style>

src/css/app.scss

@@ -11,6 +11,8 @@ body.body--light {
     --vn-text-color: var(--font-color);
     --vn-label-color: #5f5f5f;
     --vn-accent-color: #e7e3e3;
+    --vn-search-color: #d4d4d4;
+    --vn-search-color-hover: #cfcfcf;
 
     background-color: var(--vn-page-color);
 
@@ -26,6 +28,8 @@ body.body--dark {
     --vn-text-color: white;
     --vn-label-color: #a8a8a8;
     --vn-accent-color: #424242;
+    --vn-search-color: #4b4b4b;
+    --vn-search-color-hover: #5b5b5b;
 
     background-color: var(--vn-page-color);
 }