implement domain filter

This commit is contained in:
Emily
2025-02-06 15:23:55 +01:00
parent 4e2c8468f8
commit 0292829805
8 changed files with 69 additions and 49 deletions

View File

@@ -80,7 +80,7 @@ function reloadPage() {
<div class="flex items-center justify-center mt-10">
<div class="flex flex-col-reverse gap-6">
<div class="flex flex-col gap-6">
<div class="flex gap-6 xl:flex-row flex-col">
@@ -135,8 +135,8 @@ function reloadPage() {
</div>
<div>
<div>
<CardTitled class="w-full h-full" title="Documentation"
sub="Learn how to use Litlyx in every tech stack">
<CardTitled class="w-full h-full" title="Modules"
sub="Get started with your favorite framework.">
<template #header>
<LyxUiButton @click="Lit.event('no_visit_goto_docs')" type="secondary"
to="https://docs.litlyx.com">

View File

@@ -253,8 +253,6 @@ watch(readyToDisplay, () => {
})
function onDataReady() {
if (!visitsData.data.value) return;
if (!eventsData.data.value) return;

View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
const { domainList, domain, setActiveDomain } = useDomain();
const { domainList, domain, setActiveDomain, refreshDomains, refreshingDomains } = useDomain();
function onChange(e: string) {
setActiveDomain(e);
@@ -8,35 +8,41 @@ function onChange(e: string) {
</script>
<template>
<div class="flex gap-2">
<USelectMenu :uiMenu="{
select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget w-max',
option: {
base: 'z-[990] hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
},
input: 'z-[999] !bg-lyx-lightmode-widget dark:!bg-lyx-widget-light'
}" class="w-full" searchable searchable-placeholder="Search domain..." v-if="domainList" @change="onChange"
:value="domain" value-attribute="_id" :options="domainList">
<USelectMenu :uiMenu="{
select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget w-max',
option: {
base: 'z-[999] hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
}
}" class="w-full" searchable v-if="domainList" @change="onChange" :value="domain" :options="domainList">
<template #option="{ option, active, selected }">
<div class="flex items-center gap-2">
<div>
<img class="h-5 bg-black rounded-full" :src="'/logo_32.png'" alt="Litlyx logo">
<template #option="{ option, active, selected }">
<div class="flex items-center gap-2">
<div>
<img class="h-5 bg-black rounded-full" :src="'/logo_32.png'" alt="Litlyx logo">
</div>
<div> {{ option._id }} </div>
</div>
<div> {{ option }} </div>
</div>
</template>
</template>
<template #label>
<div class="flex items-center gap-2">
<div>
<img class="h-5 bg-black rounded-full" :src="'/logo_32.png'" alt="Litlyx logo">
<template #label="e">
<div class="flex items-center gap-2">
<div>
<img class="h-5 bg-black rounded-full" :src="'/logo_32.png'" alt="Litlyx logo">
</div>
<div>
{{ domain || '-' }}
</div>
</div>
<div>
{{ domain || '-' }}
</div>
</div>
</template>
</USelectMenu>
</template>
</USelectMenu>
<div @click="refreshDomains" v-if="!refreshingDomains"
class="flex items-center hover:rotate-[60deg] transition-all duration-200 ease-in-out cursor-pointer">
<i class="far fa-refresh"></i>
</div>
</div>
</template>