88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<template>
|
|
<Dialog title="Settings">
|
|
<div class="dialog-body">
|
|
<div class="dialog-section">
|
|
<h3 class="dialog-heading">Filter</h3>
|
|
|
|
<p class="dialog-description">Check the tags that you prefer to be <strong>excluded</strong> from the results. The filter is a courtesy, and provides no guarantees.</p>
|
|
|
|
<ul class="tags nolist">
|
|
<li
|
|
v-for="(label, slug) in tags"
|
|
:key="`tag-${slug}`"
|
|
class="tags-item"
|
|
>
|
|
<label class="tag noselect">
|
|
<Checkbox
|
|
:value="slug"
|
|
:checked="checkedTags.has(slug)"
|
|
class="minus"
|
|
@change="(checked) => toggleTag(slug, checked)"
|
|
/>{{ label }}
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import Cookies from 'js-cookie';
|
|
|
|
import Dialog from '#/components/dialog/dialog.vue';
|
|
import Checkbox from '#/components/form/checkbox.vue';
|
|
|
|
const cookies = Cookies.withConverter({
|
|
write: (value) => value,
|
|
});
|
|
|
|
const tags = {
|
|
anal: 'anal',
|
|
'anal-prolapse': 'anal prolapse',
|
|
pissing: 'pissing',
|
|
gay: 'gay',
|
|
transsexual: 'transsexual',
|
|
bisexual: 'bisexual',
|
|
bts: 'behind the scenes',
|
|
vr: 'virtual reality',
|
|
};
|
|
|
|
const storedTags = cookies.get('tags');
|
|
const checkedTags = ref(new Set(storedTags ? JSON.parse(storedTags) : []));
|
|
|
|
function toggleTag(tag, isChecked) {
|
|
if (isChecked) {
|
|
checkedTags.value.add(tag);
|
|
} else {
|
|
checkedTags.value.delete(tag);
|
|
}
|
|
|
|
cookies.set('tags', JSON.stringify(Array.from(checkedTags.value)), { expires: 400 }); // 100 years from now
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dialog-body {
|
|
padding: 1rem;
|
|
width: 30rem;
|
|
max-width: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tags-item {
|
|
display: block;
|
|
}
|
|
|
|
.tag {
|
|
display: flex;
|
|
padding: .5rem 0;
|
|
text-transform: capitalize;
|
|
|
|
.check-container {
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
</style>
|