feat: added hidden columns prop

This commit is contained in:
DomWane 2024-10-03 15:59:25 +02:00
parent 329412ff23
commit ab1a4a6c2b
3 changed files with 49 additions and 9 deletions

View file

@ -3,6 +3,7 @@ import type { ProjectRating, ProjectShallow } from '~/types'
const props = defineProps<{
project: ProjectShallow
hiddenColumns?: string[]
}>()
const { switcher, ecosystems, filter } = storeToRefs(useData())
@ -11,6 +12,14 @@ const isLargeScreen = useMediaQuery('(min-width: 1024px)')
const ratings: { label: string, type: string, rating: ProjectRating }[] = (props.project.ratings || []).map(rating => ({ label: rating.name, type: 'rating', rating: rating }))
const ecosystem: { label: string[], type: string } = { label: ecosystems.value.filter(e => (props.project.ecosystem || []).includes(e.id)).map(e => e.icon!), type: 'ecosystem' }
const projectItems: { label: string | string[], type: string, rating?: ProjectRating }[] = [{ label: props.project.usecases || [], type: 'array' }, ...ratings, ecosystem, { label: [props.project.website || '', props.project.github || '', props.project.twitter || ''], type: 'links' }]
const { width } = useWindowSize()
const visibleColumnsCount = computed(() => {
if (width.value >= 1024)
return projectItems.filter(item => item.rating?.type ? !props.hiddenColumns?.includes(item.rating.type) : true).length + 4
else
return 2
})
</script>
<template>
@ -25,7 +34,7 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
>
<div
grid
grid-cols="2 lg:10"
:style="`grid-template-columns: repeat(${visibleColumnsCount}, 1fr)`"
w-full
>
@ -89,7 +98,7 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
</div>
</div>
<div
v-for="(projectItem, index) of projectItems"
v-for="(projectItem, index) of projectItems.filter((item) => item.rating?.type ? !hiddenColumns?.includes(item.rating.type): true)"
:key="projectItem.label.toString()"
hidden
lg:flex

View file

@ -46,7 +46,18 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
@click="groupCollapsed = !groupCollapsed"
/>
</div>
<ProjectGridGroupSort v-if="!groupCollapsed" />
<ClientOnly>
<ProjectGridGroupSort
v-if="!groupCollapsed"
:hidden-columns="group.title === 'Social & Communications' ? ['technology'] : []"
/>
<template #fallback>
<div
h-48px
w-full
/>
</template>
</ClientOnly>
<div
v-if="!groupCollapsed"
grid
@ -61,6 +72,7 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
<Card
v-for="project in group.projects.slice(0, shownProjectsCount)"
:key="project.id"
:hidden-columns="group.title === 'Social & Communications' ? ['technology'] : []"
:project="project"
/>
@ -79,9 +91,11 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
text="12px lg:14px"
leading="24px lg:32px"
font-bold
pt-16px
pb-24px
mt-24px
px-16px
py-4px
text-app-text-grey
border="2px white/50"
@click="shownProjectsCount += 15"
>
LOAD MORE

View file

@ -1,4 +1,8 @@
<script lang="ts" setup>
const props = defineProps<{
hiddenColumns?: string[]
}>()
const { filter } = storeToRefs(useData())
function onChangeSort(sortKey: string) {
@ -15,6 +19,10 @@ function onChangeSort(sortKey: string) {
filter.value.sortDirection = sortKey === 'score' ? 'desc' : 'asc'
}
watch(filter, () => {
console.log(filter.value)
}, { deep: true })
const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[]>([
{ label: 'Usecase', sortKey: 'usecase' },
{ label: 'Openess', sortKey: 'openess', togglable: true },
@ -24,12 +32,21 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
{ label: 'Links', sortKey: 'links' },
{ label: 'W3PN Score', sortKey: 'score', togglable: true },
])
const { width } = useWindowSize()
const visibleColumnsCount = computed(() => {
if (width.value >= 1024)
return cardTitles.value.filter(title => !props.hiddenColumns?.includes(title.sortKey)).length + 3
else {
return 2
}
})
</script>
<template>
<div
grid
grid-cols="2 lg:10"
:style="`grid-template-columns: repeat(${visibleColumnsCount}, 1fr)`"
w-full
mb-16px
>
@ -76,7 +93,7 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
/>
</div>
<div
v-for="(title, index) in cardTitles"
v-for="(title, index) in cardTitles.filter((title) => !hiddenColumns?.includes(title.sortKey))"
:key="title.label"
lg:flex
items-center
@ -100,8 +117,8 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
<button
v-if="title.togglable"
type="button"
:class="[title.sortKey === filter.sortby ? filter.sortDirection === 'desc' ? 'i-ic-baseline-arrow-drop-up'
: 'i-ic-baseline-arrow-drop-down'
:class="[title.sortKey === filter.sortby ? filter.sortDirection === 'desc' ? 'i-ic-baseline-arrow-drop-down'
: 'i-ic-baseline-arrow-drop-up'
: 'i-ic-baseline-arrow-drop-down']"
text-24px
/>