55 lines
921 B
Vue
55 lines
921 B
Vue
<template>
|
|
<ul class="stash-menu nolist noselect">
|
|
<li
|
|
v-for="userStash in user.stashes"
|
|
:key="`stash-${userStash.id}`"
|
|
class="menu-item"
|
|
>
|
|
<label class="menu-stash">
|
|
<Checkbox
|
|
:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
|
|
@change="(checked) => checked ? emit('stash', userStash) : emit('unstash', userStash)"
|
|
/>{{ userStash.name }}
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Checkbox from '#/components/form/checkbox.vue';
|
|
|
|
defineProps({
|
|
user: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
itemStashes: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['stash', 'unstash']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.menu-item {
|
|
display: block;
|
|
}
|
|
|
|
.menu-stash {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: .5rem;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.check-container {
|
|
margin-right: .5rem;
|
|
}
|
|
}
|
|
</style>
|