mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-30 17:47:28 +01:00
37 lines
965 B
Vue
37 lines
965 B
Vue
<template>
|
|
<div
|
|
class="fixed -right-px -top-px z-10 flex w-96 items-center gap-4 rounded-bl border border-secondary/20 bg-base-darker p-4 shadow"
|
|
v-show="showSearch"
|
|
v-if="search"
|
|
>
|
|
<div class="input input-primary flex h-auto items-center">
|
|
<mdi:magnify />
|
|
<input
|
|
class="input input-ghost flex-1"
|
|
type="text"
|
|
placeholder="Find / RegEx"
|
|
ref="input"
|
|
v-model="searchFilter"
|
|
@keyup.esc="resetSearch()"
|
|
/>
|
|
</div>
|
|
|
|
<a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const input = ref<HTMLInputElement>();
|
|
const { searchFilter, showSearch, resetSearch } = useSearchFilter();
|
|
|
|
onKeyStroke("f", (e) => {
|
|
if (e.ctrlKey || e.metaKey) {
|
|
showSearch.value = true;
|
|
nextTick(() => input.value?.focus() || input.value?.select());
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => resetSearch());
|
|
</script>
|