mirror of https://github.com/VERT-sh/VERT.git
fix: sort by exact match first
This commit is contained in:
parent
dee3a0bf3b
commit
0ef38fa9db
|
@ -92,6 +92,8 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
const filteredData = $derived.by(() => {
|
const filteredData = $derived.by(() => {
|
||||||
|
const normalize = (str: string) => str.replace(/^\./, "").toLowerCase();
|
||||||
|
|
||||||
// if no query, return formats for current category
|
// if no query, return formats for current category
|
||||||
if (!searchQuery) {
|
if (!searchQuery) {
|
||||||
return {
|
return {
|
||||||
|
@ -103,13 +105,13 @@
|
||||||
: [],
|
: [],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
const searchLower = searchQuery.toLowerCase();
|
const searchLower = normalize(searchQuery);
|
||||||
|
|
||||||
// find all categories that have formats matching the search query
|
// find all categories that have formats matching the search query
|
||||||
const matchingCategories = availableCategories.filter((cat) =>
|
const matchingCategories = availableCategories.filter((cat) =>
|
||||||
categories[cat].formats.some(
|
categories[cat].formats.some(
|
||||||
(format) =>
|
(format) =>
|
||||||
format.toLowerCase().includes(searchLower) &&
|
normalize(format).includes(searchLower) &&
|
||||||
shouldShowFormat(format, cat),
|
shouldShowFormat(format, cat),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
@ -125,7 +127,7 @@
|
||||||
return categories[cat].formats
|
return categories[cat].formats
|
||||||
.filter(
|
.filter(
|
||||||
(format) =>
|
(format) =>
|
||||||
format.toLowerCase().includes(searchLower) &&
|
normalize(format).includes(searchLower) &&
|
||||||
shouldShowFormat(format, cat),
|
shouldShowFormat(format, cat),
|
||||||
)
|
)
|
||||||
.map((format) => ({ format, category: cat }));
|
.map((format) => ({ format, category: cat }));
|
||||||
|
@ -143,13 +145,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// return formats only from the current category that match the search
|
// return formats only from the current category that match the search
|
||||||
const filteredFormats = currentCategory
|
let filteredFormats = currentCategory
|
||||||
? categories[currentCategory].formats.filter(
|
? categories[currentCategory].formats.filter(
|
||||||
(format) =>
|
(format) =>
|
||||||
format.toLowerCase().includes(searchLower) &&
|
normalize(format).includes(searchLower) &&
|
||||||
shouldShowFormat(format, currentCategory || ""),
|
shouldShowFormat(format, currentCategory || ""),
|
||||||
)
|
)
|
||||||
: [];
|
: [];
|
||||||
|
|
||||||
|
// sorting exact match first, then others
|
||||||
|
filteredFormats = filteredFormats.sort((a, b) => {
|
||||||
|
const aExact = normalize(a) === searchLower;
|
||||||
|
const bExact = normalize(b) === searchLower;
|
||||||
|
if (aExact && !bExact) return -1;
|
||||||
|
if (!aExact && bExact) return 1;
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
categories:
|
categories:
|
||||||
matchingCategories.length > 0
|
matchingCategories.length > 0
|
||||||
|
@ -274,7 +286,7 @@
|
||||||
bind:this={dropdown}
|
bind:this={dropdown}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="relative flex items-center justify-center w-full font-display px-3 py-3.5 bg-button rounded-full overflow-hidden cursor-pointer focus:!outline-none
|
class="relative flex items-center justify-center w-full font-display px-3 py-3.5 bg-button rounded-full overflow-hidden cursor-pointer focus:!outline-none
|
||||||
{disabled ? 'opacity-50 cursor-auto' : 'cursor-pointer'}"
|
{disabled ? 'opacity-50 cursor-auto' : 'cursor-pointer'}"
|
||||||
onclick={() => clickDropdown()}
|
onclick={() => clickDropdown()}
|
||||||
onmouseenter={() => (hover = true)}
|
onmouseenter={() => (hover = true)}
|
||||||
|
|
Loading…
Reference in New Issue