79 lines
1.4 KiB
Vue
79 lines
1.4 KiB
Vue
<template>
|
|
<Dialog title="Settings">
|
|
<div class="dialog-body">
|
|
<div class="dialog-section">
|
|
<ul class="tags nolist">
|
|
<li
|
|
v-for="tag in tags"
|
|
:key="`tag-${tag}`"
|
|
class="tags-item"
|
|
>
|
|
<label class="tag noselect">
|
|
<Checkbox
|
|
:checked="checkedTags.has(tag)"
|
|
@change="(checked) => toggleTag(tag, checked)"
|
|
/>{{ tag }}
|
|
</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 prolapse',
|
|
'bisexual',
|
|
'gay',
|
|
'pissing',
|
|
'transsexual',
|
|
];
|
|
|
|
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%;
|
|
}
|
|
|
|
.tags-item {
|
|
display: block;
|
|
}
|
|
|
|
.tag {
|
|
display: flex;
|
|
padding: .5rem 0;
|
|
text-transform: capitalize;
|
|
|
|
.check-container {
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
</style>
|