73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<template>
|
|
|
|
<div class="dropdown-item" @mouseover="hovering = true" @mouseleave="hovering = false" :class="{hovered: hovering, 'is-active': active}" @click="selectList">
|
|
<span>{{taskList.name}} ({{ taskList.task_items.length }})</span>
|
|
<button @click.stop="confirmingDelete = true" class="button is-small is-danger is-pulled-right"><app-icon icon="x" size="sm"></app-icon></button>
|
|
<div class="is-clearfix"></div>
|
|
|
|
<app-modal :open="confirmingDelete" :title="'Delete ' + taskList.name + '?'" @dismiss="confirmingDelete = false">
|
|
<button class="button is-danger" @click="deleteList">Confirm</button>
|
|
<button class="button is-primary" @click="confirmingDelete = false">Cancel</button>
|
|
</app-modal>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
taskList: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
|
|
active: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
hovering: false,
|
|
confirmingDelete: false
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
selectList() {
|
|
this.$emit("select", this.taskList);
|
|
},
|
|
|
|
deleteList() {
|
|
this.confirmingDelete = false;
|
|
this.$emit("delete", this.taskList);
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
@use "bulma/sass" as bulma;
|
|
@use 'sass:color';
|
|
|
|
div.dropdown-item {
|
|
cursor: pointer;
|
|
|
|
&.hovered {
|
|
color: bulma.$black;
|
|
background-color: bulma.$background;
|
|
}
|
|
|
|
&.is-active {
|
|
color: color.invert(bulma.$link);
|
|
background-color: bulma.$link;
|
|
}
|
|
}
|
|
|
|
</style> |