traxxx-web/components/stashes/menu.vue

<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>