traxxx/assets/components/stashes/menu.vue

71 lines
1.1 KiB
Vue
Raw Normal View History

<template>
<ul class="menu nolist">
<li
v-for="stash in stashes"
:key="`stash-${stash.id}`"
class="menu-item"
>
<label class="menu-stash noselect">
<Checkbox
:checked="stashedByIds.has(stash.id)"
class="menu-check"
@change="(checked) => checked ? $emit('stash', stash.id) : $emit('unstash', stash.id)"
/>{{ stash.name }}
</label>
</li>
</ul>
</template>
<script>
import Checkbox from '../form/checkbox.vue';
function stashes() {
return this.$store.state.auth.user?.stashes || [];
}
export default {
components: {
Checkbox,
},
props: {
stashedBy: {
type: Array,
default: () => [],
},
},
emits: ['stash', 'unstash'],
data() {
const stashedByIds = new Set(this.stashedBy.map(stash => stash.id));
return {
stashedByIds,
};
},
computed: {
stashes,
},
};
</script>
<style lang="scss" scoped>
.menu-item {
display: block;
}
.menu-stash {
display: flex;
align-items: center;
padding: .5rem 1rem .5rem .5rem;
&:hover {
color: var(--primary);
cursor: pointer;
}
}
.menu-check {
display: inline-block;
margin: 0 .75rem 0 0;
}
</style>