<template> <ul class="stash-menu nolist noselect"> <li v-for="userStash in 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 v-close-popper class="menu-stash" @click="emit('create')" > <Icon icon="plus3" /> New </label> </li> </ul> </template> <script setup> import Checkbox from '#/components/form/checkbox.vue'; defineProps({ stashes: { type: Array, default: () => [], }, 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>