1
0
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:
Amir Raminfar
2023-09-22 13:15:22 -07:00
parent 9e98640731
commit 3c4442a8dc
2 changed files with 19 additions and 17 deletions

View File

@@ -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>

View File

@@ -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>