72 lines
1.1 KiB
Vue
72 lines
1.1 KiB
Vue
<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 {
|
|
color: var(--text);
|
|
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>
|