2024-01-08 01:21:57 +00:00
|
|
|
<template>
|
|
|
|
<div class="filter tags-container">
|
2024-02-29 00:40:11 +00:00
|
|
|
<div class="filters-sort">
|
|
|
|
<input
|
|
|
|
v-model="search"
|
|
|
|
type="search"
|
2024-03-19 01:35:37 +00:00
|
|
|
:placeholder="`Filter ${groupedTags.available.length} tags`"
|
2024-02-29 00:40:11 +00:00
|
|
|
class="input input-inline filters-search"
|
|
|
|
>
|
2024-01-08 01:21:57 +00:00
|
|
|
|
2024-02-29 00:40:11 +00:00
|
|
|
<div
|
|
|
|
v-show="order === 'priority'"
|
|
|
|
class="filter-sort order noselect"
|
2024-03-28 00:32:11 +00:00
|
|
|
@click="order = 'count'"
|
2024-02-29 00:40:11 +00:00
|
|
|
>
|
|
|
|
<Icon
|
|
|
|
icon="star"
|
|
|
|
/>
|
|
|
|
</div>
|
2024-01-08 01:21:57 +00:00
|
|
|
|
2024-02-29 00:40:11 +00:00
|
|
|
<div
|
2024-03-28 00:32:11 +00:00
|
|
|
v-show="order === 'count'"
|
2024-02-29 00:40:11 +00:00
|
|
|
class="filter-sort order noselect"
|
2024-03-28 00:32:11 +00:00
|
|
|
@click="order = 'name'"
|
2024-02-29 00:40:11 +00:00
|
|
|
>
|
|
|
|
<Icon
|
2024-03-28 00:32:11 +00:00
|
|
|
icon="sort-numeric-desc"
|
2024-02-29 00:40:11 +00:00
|
|
|
/>
|
|
|
|
</div>
|
2024-01-08 01:21:57 +00:00
|
|
|
|
2024-02-29 00:40:11 +00:00
|
|
|
<div
|
2024-03-28 00:32:11 +00:00
|
|
|
v-show="order === 'name'"
|
2024-02-29 00:40:11 +00:00
|
|
|
class="filter-sort order noselect"
|
|
|
|
@click="order = 'priority'"
|
|
|
|
>
|
|
|
|
<Icon
|
2024-03-28 00:32:11 +00:00
|
|
|
icon="sort-alpha-asc"
|
2024-02-29 00:40:11 +00:00
|
|
|
/>
|
2024-02-22 04:08:06 +00:00
|
|
|
</div>
|
2024-02-29 00:40:11 +00:00
|
|
|
</div>
|
2024-01-09 01:26:32 +00:00
|
|
|
|
2024-02-29 00:40:11 +00:00
|
|
|
<div
|
2024-03-19 01:35:37 +00:00
|
|
|
v-if="groupedTags.available.length === 0 && groupedTags.selected.length === 0"
|
2024-02-29 00:40:11 +00:00
|
|
|
class="filter-empty"
|
|
|
|
>No tags</div>
|
|
|
|
|
|
|
|
<template v-else>
|
2024-02-22 04:08:06 +00:00
|
|
|
<ul
|
|
|
|
v-for="(group, groupKey) in groupedTags"
|
|
|
|
:key="groupKey"
|
|
|
|
class="filter-items nolist"
|
|
|
|
:class="groupKey"
|
|
|
|
>
|
|
|
|
<li
|
|
|
|
v-for="(tag, index) in group"
|
|
|
|
:key="`filter-tag-${tag.id}`"
|
|
|
|
class="filter-item"
|
|
|
|
:class="{
|
|
|
|
selected: filters.tags.includes(tag.slug),
|
|
|
|
first: groupKey === 'available' && index === 0 && filters.tags.length > 0,
|
|
|
|
disabled: groupKey === 'page',
|
|
|
|
}"
|
|
|
|
@click.stop="toggleTag(tag, false)"
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
class="filter-include"
|
|
|
|
@click.stop="toggleTag(tag, true)"
|
|
|
|
>
|
|
|
|
<Icon
|
|
|
|
icon="checkmark"
|
|
|
|
class="filter-add"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Icon
|
|
|
|
icon="cross2"
|
|
|
|
class="filter-remove"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<span class="filter-name tag-name">
|
2024-01-09 01:26:32 +00:00
|
|
|
<span
|
2024-02-22 04:08:06 +00:00
|
|
|
class="filter-text"
|
|
|
|
:title="tag.name"
|
|
|
|
>{{ tag.name }}</span>
|
|
|
|
|
|
|
|
<span class="tag-details">
|
|
|
|
<span
|
|
|
|
v-if="tag.count"
|
2024-03-28 00:28:41 +00:00
|
|
|
:title="tag.count"
|
2024-02-22 04:08:06 +00:00
|
|
|
class="filter-count"
|
2024-03-28 00:28:41 +00:00
|
|
|
>{{ abbreviateNumber(tag.count) }}</span>
|
2024-02-22 04:08:06 +00:00
|
|
|
</span>
|
2024-01-09 01:26:32 +00:00
|
|
|
</span>
|
2024-02-22 04:08:06 +00:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</template>
|
2024-01-08 01:21:57 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
import { ref, computed, inject } from 'vue';
|
|
|
|
|
2024-03-28 00:28:41 +00:00
|
|
|
import abbreviateNumber from '#/src/utils/abbreviate-number.js';
|
|
|
|
|
2024-01-08 01:21:57 +00:00
|
|
|
const props = defineProps({
|
|
|
|
filters: {
|
|
|
|
type: Object,
|
|
|
|
default: null,
|
|
|
|
},
|
|
|
|
tags: {
|
|
|
|
type: Array,
|
|
|
|
default: () => [],
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
const emit = defineEmits(['update']);
|
|
|
|
|
|
|
|
const search = ref('');
|
|
|
|
const searchRegexp = computed(() => new RegExp(search.value, 'i'));
|
|
|
|
const order = ref('priority');
|
|
|
|
|
|
|
|
const { pageProps } = inject('pageContext');
|
|
|
|
const { tag: pageTag } = pageProps;
|
|
|
|
|
|
|
|
const priorityTags = [
|
|
|
|
'anal',
|
|
|
|
'gangbang',
|
|
|
|
'blowbang',
|
|
|
|
'transsexual',
|
|
|
|
'airtight',
|
|
|
|
'dp',
|
|
|
|
'dap',
|
|
|
|
'dvp',
|
|
|
|
'triple-penetration',
|
|
|
|
'tap',
|
|
|
|
'tvp',
|
|
|
|
'mfm',
|
|
|
|
'fmf',
|
|
|
|
'threesome',
|
|
|
|
'bdsm',
|
|
|
|
'deepthroat',
|
|
|
|
'blowjob',
|
|
|
|
'lesbian',
|
|
|
|
];
|
|
|
|
|
2024-02-22 04:08:06 +00:00
|
|
|
const groupedTags = computed(() => {
|
2024-01-08 01:21:57 +00:00
|
|
|
const selected = props.tags.filter((tag) => props.filters.tags.includes(tag.slug));
|
|
|
|
const filtered = props.tags.filter((tag) => !props.filters.tags.includes(tag.slug)
|
|
|
|
&& tag.id !== pageTag?.id
|
|
|
|
&& searchRegexp.value.test(tag.name));
|
|
|
|
|
|
|
|
if (order.value === 'count') {
|
|
|
|
const available = filtered.sort((tagA, tagB) => {
|
|
|
|
if (order.value === 'count') {
|
|
|
|
return tagB.count - tagA.count;
|
|
|
|
}
|
|
|
|
|
|
|
|
return 0;
|
|
|
|
});
|
|
|
|
|
2024-01-26 00:31:15 +00:00
|
|
|
return {
|
|
|
|
// page: [pageTag],
|
|
|
|
selected,
|
|
|
|
available,
|
|
|
|
};
|
2024-01-08 01:21:57 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (order.value === 'priority') {
|
|
|
|
return {
|
2024-01-26 00:31:15 +00:00
|
|
|
// page: [pageTag],
|
2024-01-08 01:21:57 +00:00
|
|
|
selected,
|
|
|
|
available: [
|
|
|
|
...priorityTags.map((priorityTag) => filtered.find((tag) => tag.slug === priorityTag)).filter(Boolean),
|
|
|
|
...filtered.filter((tag) => !priorityTags.includes(tag.slug)),
|
|
|
|
],
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
2024-01-26 00:31:15 +00:00
|
|
|
// page: [pageTag],
|
2024-01-08 01:21:57 +00:00
|
|
|
selected,
|
|
|
|
available: filtered,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
2024-02-22 04:08:06 +00:00
|
|
|
function toggleTag(tag, combine) {
|
2024-01-08 01:21:57 +00:00
|
|
|
if (props.filters.tags.includes(tag.slug)) {
|
|
|
|
emit('update', 'tags', props.filters.tags.filter((tagId) => tagId !== tag.slug));
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2024-02-22 04:08:06 +00:00
|
|
|
if (combine) {
|
|
|
|
emit('update', 'tags', props.filters.tags.concat(tag.slug));
|
|
|
|
} else {
|
|
|
|
emit('update', 'tags', [tag.slug]);
|
|
|
|
}
|
2024-01-08 01:21:57 +00:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.filter-items {
|
2024-01-26 00:31:15 +00:00
|
|
|
max-height: 15rem;
|
2024-01-08 01:21:57 +00:00
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.filter {
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
</style>
|