mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-21 13:23:07 +01:00
9f3a256334
* feat: moves to tailwindcss and better component library * update styles * creates toggle component * adds drop down component * cleans up components * removes unused components * uses tailwind for scroll view * removes table component * improves animation * cleans up more styles * uses more tailwind * cleans up more styles with flex * more styles * removes bulma * adds colors * updates modules * fixes bugs * stops importing styles.scss * more clean up * cleans up headers * cleans up title * fixes title * fixes mobile-hidden * fixes shadow * fixes colors * add tailwindcss/nesting * adds more colors * fixes more colors * updates colors * fixes colors * colors * fixes menu on left * menu and modal * menu and modal * fuzzy search * fixes menu on left * remove logs * cleans up search * adds host to search * remove outline from inputs * cleans up left search icon * removes unused styles * fixes docker * removes sass! * cleans up styles * Fixe smobile menu * fixes mobile menu * fixes typecheck * fixes seconday color * adds drop down for container * cleans header css * updates css * fixes other layouts * updates some tests * fixes border * fixes home screen font * fixes top header * fixes tests * fixes fieldlist * fixes complex * cleans up more * removes index * fixes tests * fixes tests * resolves conflicts
92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<template>
|
|
<ul class="events group py-4" :class="{ 'disable-wrap': !softWrap, [size]: true }">
|
|
<li
|
|
v-for="item in filtered"
|
|
:key="item.id"
|
|
:data-key="item.id"
|
|
:class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
|
|
class="flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30"
|
|
>
|
|
<a
|
|
class="btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus"
|
|
v-show="isSearching()"
|
|
data-tip="Jump to Context"
|
|
@click="handleJumpLineSelected($event, item)"
|
|
:href="`#${item.id}`"
|
|
>
|
|
<ic:sharp-find-in-page />
|
|
</a>
|
|
<component :is="item.getComponent()" :log-entry="item" :visible-keys="visibleKeys.value"></component>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { type ComputedRef, toRaw } from "vue";
|
|
import { useRouteHash } from "@vueuse/router";
|
|
import { Container } from "@/models/Container";
|
|
import { type JSONObject, LogEntry } from "@/models/LogEntry";
|
|
|
|
const props = defineProps<{
|
|
messages: LogEntry<string | JSONObject>[];
|
|
}>();
|
|
|
|
let visibleKeys = persistentVisibleKeys(inject("container") as ComputedRef<Container>);
|
|
|
|
const { filteredPayload } = useVisibleFilter(visibleKeys);
|
|
const { filteredMessages, resetSearch, isSearching } = useSearchFilter();
|
|
|
|
const { messages } = toRefs(props);
|
|
const visible = filteredPayload(messages);
|
|
const filtered = filteredMessages(visible);
|
|
|
|
let lastSelectedItem: LogEntry<string | JSONObject> | undefined = $ref(undefined);
|
|
|
|
function handleJumpLineSelected(e: Event, item: LogEntry<string | JSONObject>) {
|
|
lastSelectedItem = item;
|
|
resetSearch();
|
|
}
|
|
|
|
const routeHash = useRouteHash();
|
|
watch(
|
|
routeHash,
|
|
(hash) => {
|
|
if (hash) {
|
|
document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
|
|
}
|
|
},
|
|
{ immediate: true, flush: "post" },
|
|
);
|
|
</script>
|
|
<style scoped lang="postcss">
|
|
.events {
|
|
font-family:
|
|
ui-monospace,
|
|
SFMono-Regular,
|
|
SF Mono,
|
|
Consolas,
|
|
Liberation Mono,
|
|
monaco,
|
|
Menlo,
|
|
monospace;
|
|
|
|
> li {
|
|
&:last-child {
|
|
scroll-margin-block-end: 5rem;
|
|
}
|
|
}
|
|
|
|
&.small {
|
|
@apply text-[0.7em];
|
|
}
|
|
|
|
&.medium {
|
|
@apply text-[0.8em];
|
|
}
|
|
|
|
&.large {
|
|
@apply text-lg;
|
|
}
|
|
}
|
|
</style>
|