mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-21 21:33:18 +01:00
feat: alt+enter in search opens a new pane
This commit is contained in:
@@ -6,9 +6,10 @@
|
|||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="input input-ghost input-lg flex-1 px-1"
|
class="input input-ghost input-lg flex-1 px-1"
|
||||||
ref="input"
|
ref="input"
|
||||||
@keydown.down="selectedIndex = Math.min(selectedIndex + 1, data.length - 1)"
|
@keyup.down="selectedIndex = Math.min(selectedIndex + 1, data.length - 1)"
|
||||||
@keydown.up="selectedIndex = Math.max(selectedIndex - 1, 0)"
|
@keyup.up="selectedIndex = Math.max(selectedIndex - 1, 0)"
|
||||||
@keypress.enter="selected(data[selectedIndex])"
|
@keyup.enter.exact="selected(data[selectedIndex])"
|
||||||
|
@keyup.alt.enter="addColumn(data[selectedIndex])"
|
||||||
v-model="query"
|
v-model="query"
|
||||||
:placeholder="$t('placeholder.search-containers')"
|
:placeholder="$t('placeholder.search-containers')"
|
||||||
/>
|
/>
|
||||||
@@ -69,15 +70,13 @@ const list = computed(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const { results } = useFuse(query, list, {
|
const { results } = useFuse(query, list, {
|
||||||
fuseOptions: { keys: ["name", "host"], includeScore: true },
|
fuseOptions: {
|
||||||
resultLimit,
|
keys: ["name", "host"],
|
||||||
matchAllWhenSearchEmpty: true,
|
includeScore: true,
|
||||||
});
|
useExtendedSearch: true,
|
||||||
|
sortFn: (a, b) => {
|
||||||
const data = computed(() => {
|
|
||||||
return results.value
|
|
||||||
.sort((a, b) => {
|
|
||||||
if (a.score === b.score) {
|
if (a.score === b.score) {
|
||||||
|
// @ts-ignore
|
||||||
if (a.item.state === "running" && b.item.state !== "running") {
|
if (a.item.state === "running" && b.item.state !== "running") {
|
||||||
return -1;
|
return -1;
|
||||||
} else {
|
} else {
|
||||||
@@ -88,9 +87,14 @@ const data = computed(() => {
|
|||||||
} else {
|
} else {
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
})
|
},
|
||||||
.map(({ item }) => item)
|
},
|
||||||
.slice(0, resultLimit);
|
resultLimit,
|
||||||
|
matchAllWhenSearchEmpty: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = computed(() => {
|
||||||
|
return results.value.map(({ item }) => item).slice(0, resultLimit);
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(query, (data) => {
|
watch(query, (data) => {
|
||||||
@@ -103,12 +107,10 @@ onMounted(() => input.value?.focus());
|
|||||||
|
|
||||||
function selected({ id }: { id: string }) {
|
function selected({ id }: { id: string }) {
|
||||||
router.push({ name: "container-id", params: { id } });
|
router.push({ name: "container-id", params: { id } });
|
||||||
query.value = "";
|
|
||||||
close();
|
close();
|
||||||
}
|
}
|
||||||
function addColumn(container: { id: string }) {
|
function addColumn(container: { id: string }) {
|
||||||
store.appendActiveContainer(container);
|
store.appendActiveContainer(container);
|
||||||
query.value = "";
|
|
||||||
close();
|
close();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<tag size="small">
|
<tag size="small">
|
||||||
<date-time :date="date" class="whitespace-nowrap text-[#258ccd]"></date-time>
|
<date-time :date="date" class="whitespace-nowrap text-blue"></date-time>
|
||||||
</tag>
|
</tag>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|||||||
Reference in New Issue
Block a user