75 lines
1.2 KiB
Vue
75 lines
1.2 KiB
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>
|
|
|
|
<li class="menu-item create">
|
|
<label
|
|
class="menu-stash"
|
|
@click="emit('create')"
|
|
>
|
|
<Icon icon="plus3" />
|
|
New
|
|
</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', 'create']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.menu-item {
|
|
display: flex;
|
|
|
|
.icon {
|
|
fill: var(--shadow-weak-10);
|
|
padding: 0 .55rem 0 .2rem;
|
|
}
|
|
}
|
|
|
|
.menu-stash {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
padding: .5rem;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: var(--primary);
|
|
|
|
.icon {
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
|
|
.check-container {
|
|
margin-right: .5rem;
|
|
}
|
|
}
|
|
</style>
|