mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-24 06:28:42 +01:00
ee37d7c30e
* Adds asset changes for i18n * Adds asset changes for i18n * Adds vite configs * Adds auto import and cleans up props * Initital localzation * Fixes dockerfile * Fixes tests * Updates fixutres * Updates default lang
85 lines
1.8 KiB
Vue
85 lines
1.8 KiB
Vue
<template>
|
|
<div class="search columns is-gapless is-vcentered" v-show="showSearch" v-if="search">
|
|
<div class="column">
|
|
<p class="control has-icons-left">
|
|
<input
|
|
class="input"
|
|
type="text"
|
|
placeholder="Find / RegEx"
|
|
ref="input"
|
|
v-model="searchFilter"
|
|
@keyup.esc="resetSearch()"
|
|
/>
|
|
<span class="icon is-left">
|
|
<mdi-light-magnify />
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="column is-1 has-text-centered">
|
|
<button class="delete is-medium" @click="resetSearch()"></button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import hotkeys from "hotkeys-js";
|
|
|
|
const input = ref<HTMLInputElement>();
|
|
const { searchFilter, showSearch, resetSearch } = useSearchFilter();
|
|
|
|
onMounted(() => {
|
|
hotkeys("command+f, ctrl+f", (event, handler) => {
|
|
showSearch.value = true;
|
|
nextTick(() => input.value?.focus() || input.value?.select());
|
|
event.preventDefault();
|
|
});
|
|
hotkeys("esc", () => resetSearch());
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
searchFilter.value = "";
|
|
showSearch.value = false;
|
|
hotkeys.unbind("command+f, ctrl+f");
|
|
hotkeys.unbind("esc");
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search {
|
|
width: 350px;
|
|
position: fixed;
|
|
padding: 10px;
|
|
background: var(--scheme-main-ter);
|
|
top: 0;
|
|
right: 0;
|
|
border-radius: 0 0 0 5px;
|
|
z-index: 10;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
|
|
button.delete {
|
|
margin-left: 1em;
|
|
background-color: var(--scheme-main-ter);
|
|
opacity: 0.6;
|
|
&:after,
|
|
&:before {
|
|
background-color: var(--text-color);
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
padding: 10px 3px;
|
|
}
|
|
|
|
.input {
|
|
color: var(--body-color);
|
|
&::placeholder {
|
|
color: var(--border-color);
|
|
}
|
|
}
|
|
}
|
|
</style>
|