fix: remove extra component for NcAction entries

Signed-off-by: grnd-alt <github@belakkaf.net>

src/App.vue

@@ -7,7 +7,7 @@ import { NcAppContent, NcContent, NcModal } from '@nextcloud/vue'
 import CardMoveDialog from './CardMoveDialog.vue'
 import AppNavigation from './components/navigation/AppNavigation.vue'
 import KeyboardShortcuts from './components/KeyboardShortcuts.vue'
-import {BoardApi} from './services/BoardApi.js'
+import { BoardApi } from './services/BoardApi.js'
 
 const boardApi = new BoardApi()
 
@@ -21,16 +21,16 @@ export default {
 		CardMoveDialog,
 		NcModal,
 	},
-	computed: {
-		cardDetailsInModal() {
-			return this.$store.getters.config('cardDetailsInModal')
-		},
-	},
 	provide() {
 		return {
 			boardApi,
 		}
 	},
+	computed: {
+		cardDetailsInModal() {
+			return this.$store.getters.config('cardDetailsInModal')
+		},
+	},
 
 	methods: {
 		hideModal() {

src/components/card/CardSidebar.vue

@@ -3,15 +3,16 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<!-- eslint-disable vue/no-v-model-argument -->
 <template>
 	<NcAppSidebar v-if="currentBoard && currentCard"
 		ref="cardSidebar"
+		v-model:name-editable="isEditingTitle"
 		:active="tabId"
 		:name="displayTitle"
 		:subname="subtitle"
 		:subtitle="subtitleTooltip"
-		:name-editable.sync="isEditingTitle"
-		@update:name="(value) => titleEditing = value"
+		@update:name="value => titleEditing = value"
 		@dismiss-editing="titleEditing = currentCard.title"
 		@submit-name="handleSubmitTitle"
 		@opened="focusHeader"
@@ -24,35 +25,69 @@
 				{{ t('deck', 'Open in bigger view') }}
 			</NcActionButton>
 
-			<CardMenuEntries :card="currentCard" :hide-details-entry="true" />
+			<NcActionButton v-if="canEdit && !isCurrentUserAssigned"
+				icon="icon-user"
+				:close-after-click="true"
+				@click="assignCardToMe()">
+				{{ t('deck', 'Assign to me') }}
+			</NcActionButton>
+			<NcActionButton v-if="canEdit && isCurrentUserAssigned"
+				icon="icon-user"
+				:close-after-click="true"
+				@click="unassignCardFromMe()">
+				{{ t('deck', 'Unassign myself') }}
+			</NcActionButton>
+			<NcActionButton v-if="canEdit"
+				icon="icon-checkmark"
+				:close-after-click="true"
+				@click="changeCardDoneStatus()">
+				{{ currentCard.done ? t('deck', 'Mark as not done') : t('deck', 'Mark as done') }}
+			</NcActionButton>
+			<NcActionButton v-if="canEdit"
+				icon="icon-external"
+				:close-after-click="true"
+				@click="openCardMoveDialog">
+				{{ t('deck', 'Move/copy card') }}
+			</NcActionButton>
+			<NcActionButton v-for="action in cardActions"
+				:key="action.label"
+				:close-after-click="true"
+				:icon="action.icon"
+				@click="action.callback(cardRichObject)">
+				{{ action.label }}
+			</NcActionButton>
+			<NcActionButton v-if="canEditBoard" :close-after-click="true" @click="archiveUnarchiveCard()">
+				<template #icon>
+					<ArchiveIcon :size="20" decorative />
+				</template>
+				{{ currentCard.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
+			</NcActionButton>
+			<NcActionButton v-if="canEdit"
+				icon="icon-delete"
+				:close-after-click="true"
+				@click="deleteCard()">
+				{{ t('deck', 'Delete card') }}
+			</NcActionButton>
 		</template>
 		<template #description>
-			<NcReferenceList v-if="currentCard.referenceData"
-				:text="currentCard.title"
-				:interactive="false" />
+			<NcReferenceList v-if="currentCard.referenceData" :text="currentCard.title" :interactive="false" />
 		</template>
 
-		<NcAppSidebarTab id="details"
-			:order="0"
-			:name="t('deck', 'Details')">
+		<NcAppSidebarTab id="details" :order="0" :name="t('deck', 'Details')">
 			<CardSidebarTabDetails :card="currentCard" />
 			<template #icon>
 				<HomeIcon :size="20" />
 			</template>
 		</NcAppSidebarTab>
 
-		<NcAppSidebarTab id="attachments"
-			:order="1"
-			:name="t('deck', 'Attachments')">
+		<NcAppSidebarTab id="attachments" :order="1" :name="t('deck', 'Attachments')">
 			<template #icon>
 				<AttachmentIcon :size="20" />
 			</template>
 			<CardSidebarTabAttachments :card="currentCard" />
 		</NcAppSidebarTab>
 
-		<NcAppSidebarTab id="comments"
-			:order="2"
-			:name="t('deck', 'Comments')">
+		<NcAppSidebarTab id="comments" :order="2" :name="t('deck', 'Comments')">
 			<template #icon>
 				<CommentIcon :size="20" />
 			</template>
@@ -86,9 +121,15 @@ import HomeIcon from 'vue-material-design-icons/Home.vue'
 import CommentIcon from 'vue-material-design-icons/Comment.vue'
 import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
 
-import { showError, showWarning } from '@nextcloud/dialogs'
+import { showError, showWarning, showUndo } from '@nextcloud/dialogs'
 import { getLocale } from '@nextcloud/l10n'
-import CardMenuEntries from '../cards/CardMenuEntries.vue'
+import { emit } from '@nextcloud/event-bus'
+
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import { getCurrentUser } from '@nextcloud/auth'
+import { generateUrl } from '@nextcloud/router'
+
+import '@nextcloud/dialogs/style.css'
 
 const capabilities = getCapabilities()
 
@@ -107,7 +148,7 @@ export default {
 		AttachmentIcon,
 		CommentIcon,
 		HomeIcon,
-		CardMenuEntries,
+		ArchiveIcon,
 	},
 	mixins: [relativeDate],
 	props: {
@@ -139,8 +180,17 @@ export default {
 			isFullApp: (state) => state.isFullApp,
 			currentBoard: (state) => state.currentBoard,
 			hasCardSaveError: (state) => state.hasCardSaveError,
+			showArchived: (state) => state.showArchived,
 		}),
-		...mapGetters(['canEdit', 'assignables', 'cardActions', 'stackById']),
+		...mapGetters([
+			'canEdit',
+			'assignables',
+			'cardActions',
+			'stackById',
+			'isArchived',
+			'boards',
+			'boardById',
+		]),
 		currentCard() {
 			return this.$store.getters.cardById(this.id)
 		},
@@ -167,6 +217,31 @@ export default {
 				return reference ? reference.openGraphObject.name : this.currentCard.title
 			},
 		},
+		canEdit() {
+			return !this.currentCard.archived
+		},
+		canEditBoard() {
+			if (this.currentBoard) {
+				return this.$store.getters.canEdit
+			}
+			const board = this.$store.getters.boards.find((item) => item.id === this.currentCard.boardId)
+			return !!board?.permissions?.PERMISSION_EDIT
+		},
+		isCurrentUserAssigned() {
+			return this.currentCard.assignedUsers.find((item) => item.type === 0 && item.participant.uid === getCurrentUser()?.uid)
+		},
+		boardId() {
+			return this.card?.boardId ? this.currentCard.boardId : Number(this.$route.params.id)
+		},
+		cardRichObject() {
+			return {
+				id: '' + this.currentCard.id,
+				name: this.currentCard.title,
+				boardname: this.boardById(this.boardId)?.title,
+				stackname: this.stackById(this.currentCard.stackId)?.title,
+				link: window.location.protocol + '//' + window.location.host + generateUrl('/apps/deck/') + `card/${this.currentCard.id}`,
+			}
+		},
 	},
 	watch: {
 		currentCard() {
@@ -215,12 +290,46 @@ export default {
 		formatDate(timestamp) {
 			return moment.unix(timestamp).locale(this.locale).format('LLLL')
 		},
+		deleteCard() {
+			this.$store.dispatch('deleteCard', this.currentCard)
+			const undoCard = { ...this.currentCard, deletedAt: 0 }
+			showUndo(t('deck', 'Card deleted'), () => this.$store.dispatch('cardUndoDelete', undoCard))
+			if (this.$router.currentRoute.name === 'card') {
+				this.$router.push({ name: 'board' })
+			}
+		},
+		changeCardDoneStatus() {
+			this.$store.dispatch('changeCardDoneStatus', { ...this.currentCard, done: !this.currentCard.done })
+		},
+		archiveUnarchiveCard() {
+			this.$store.dispatch('archiveUnarchiveCard', { ...this.currentCard, archived: !this.currentCard.archived })
+		},
+		assignCardToMe() {
+			this.$store.dispatch('assignCardToUser', {
+				card: this.currentCard,
+				assignee: {
+					userId: getCurrentUser()?.uid,
+					type: 0,
+				},
+			})
+		},
+		unassignCardFromMe() {
+			this.$store.dispatch('removeUserFromCard', {
+				card: this.currentCard,
+				assignee: {
+					userId: getCurrentUser()?.uid,
+					type: 0,
+				},
+			})
+		},
+		openCardMoveDialog() {
+			emit('deck:card:show-move-dialog', this.currentCard)
+		},
 	},
 }
 </script>
 
 <style lang="scss">
-
 section.app-sidebar__tab--active {
 	min-height: auto;
 	display: flex;
@@ -272,6 +381,7 @@ section.app-sidebar__tab--active {
 			z-index: 100;
 			background-color: var(--color-main-background);
 		}
+
 		.app-sidebar-tabs__nav {
 			position: sticky;
 			top: 87px;
@@ -284,10 +394,10 @@ section.app-sidebar__tab--active {
 			overflow: initial;
 		}
 
-		#emptycontent, .emptycontent {
+		#emptycontent,
+		.emptycontent {
 			margin-top: 88px;
 		}
 	}
 }
-
 </style>

src/components/cards/CardMenu.vue

@@ -7,39 +7,189 @@
 	<div v-if="card" class="card-menu" @click.stop.prevent>
 		<NcButton v-if="card.referenceData"
 			type="tertiary"
-			:title="t('deck','Open link')"
+			:title="t('deck', 'Open link')"
 			@click="openLink">
 			<template #icon>
 				<LinkIcon :size="20" />
 			</template>
 		</NcButton>
 		<NcActions>
-			<CardMenuEntries :card="card" @edit-title="editTitle" />
+			<NcActionButton v-if="!hideDetailsEntry" :close-after-click="true" @click="openCard">
+				<template #icon>
+					<CardBulletedIcon icon :size="20" decorative />
+				</template>
+				{{ t('deck', 'Card details') }}
+			</NcActionButton>
+			<NcActionButton v-if="canEdit" :close-after-click="true" @click="editTitle">
+				<template #icon>
+					<PencilIcon :size="20" decorative />
+				</template>
+				{{ t('deck', 'Edit title') }}
+			</NcActionButton>
+			<NcActionButton v-if="canEdit && !isCurrentUserAssigned"
+				icon="icon-user"
+				:close-after-click="true"
+				@click="assignCardToMe()">
+				{{ t('deck', 'Assign to me') }}
+			</NcActionButton>
+			<NcActionButton v-if="canEdit && isCurrentUserAssigned"
+				icon="icon-user"
+				:close-after-click="true"
+				@click="unassignCardFromMe()">
+				{{ t('deck', 'Unassign myself') }}
+			</NcActionButton>
+			<NcActionButton v-if="canEdit"
+				icon="icon-checkmark"
+				:close-after-click="true"
+				@click="changeCardDoneStatus()">
+				{{ card.done ? t('deck', 'Mark as not done') : t('deck', 'Mark as done') }}
+			</NcActionButton>
+			<NcActionButton v-if="canEdit"
+				icon="icon-external"
+				:close-after-click="true"
+				@click="openCardMoveDialog">
+				{{ t('deck', 'Move/copy card') }}
+			</NcActionButton>
+			<NcActionButton v-for="action in cardActions"
+				:key="action.label"
+				:close-after-click="true"
+				:icon="action.icon"
+				@click="action.callback(cardRichObject)">
+				{{ action.label }}
+			</NcActionButton>
+			<NcActionButton v-if="canEditBoard" :close-after-click="true" @click="archiveUnarchiveCard()">
+				<template #icon>
+					<ArchiveIcon :size="20" decorative />
+				</template>
+				{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
+			</NcActionButton>
+			<NcActionButton v-if="canEdit"
+				icon="icon-delete"
+				:close-after-click="true"
+				@click="deleteCard()">
+				{{ t('deck', 'Delete card') }}
+			</NcActionButton>
 		</NcActions>
 	</div>
 </template>
 <script>
-import { NcActions, NcButton } from '@nextcloud/vue'
+import { NcActions, NcButton, NcActionButton } from '@nextcloud/vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'
-import CardMenuEntries from './CardMenuEntries.vue'
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import { getCurrentUser } from '@nextcloud/auth'
+import CardBulletedIcon from 'vue-material-design-icons/CardBulleted.vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import { mapGetters, mapState } from 'vuex'
+import { showUndo } from '@nextcloud/dialogs'
+import { generateUrl } from '@nextcloud/router'
+
+import '@nextcloud/dialogs/style.css'
+import { emit } from '@nextcloud/event-bus'
 
 export default {
 	name: 'CardMenu',
-	components: { NcActions, NcButton, LinkIcon, CardMenuEntries },
+	components: { NcActions, NcButton, LinkIcon, NcActionButton, PencilIcon, CardBulletedIcon, ArchiveIcon },
 	props: {
 		card: {
 			type: Object,
 			default: null,
 		},
+		hideDetailsEntry: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['edit-title'],
+	computed: {
+		...mapGetters([
+			'isArchived',
+			'boards',
+			'cardActions',
+			'stackById',
+			'boardById',
+		]),
+		...mapState({
+			showArchived: state => state.showArchived,
+			currentBoard: state => state.currentBoard,
+		}),
+		canEdit() {
+			return !this.card.archived
+		},
+		canEditBoard() {
+			if (this.currentBoard) {
+				return this.$store.getters.canEdit
+			}
+			const board = this.$store.getters.boards.find((item) => item.id === this.card.boardId)
+			return !!board?.permissions?.PERMISSION_EDIT
+		},
+		isCurrentUserAssigned() {
+			return this.card.assignedUsers.find((item) => item.type === 0 && item.participant.uid === getCurrentUser()?.uid)
+		},
+		boardId() {
+			return this.card?.boardId ? this.card.boardId : Number(this.$route.params.id)
+		},
+		cardRichObject() {
+			return {
+				id: '' + this.card.id,
+				name: this.card.title,
+				boardname: this.boardById(this.boardId)?.title,
+				stackname: this.stackById(this.card.stackId)?.title,
+				link: window.location.protocol + '//' + window.location.host + generateUrl('/apps/deck/') + `card/${this.card.id}`,
+			}
+		},
+	},
 	methods: {
 		openLink() {
 			window.open(this.card?.referenceData?.openGraphObject?.link)
 			return false
 		},
-		editTitle(id) {
-			this.$emit('edit-title', id)
+		openCard() {
+			const boardId = this.card?.boardId ? this.card.boardId : this.$route?.params.id ?? this.currentBoard.id
+
+			if (this.$router) {
+				this.$router?.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => { })
+				return
+			}
+
+			this.$root.$emit('open-card', this.card.id)
+		},
+		editTitle() {
+			this.$emit('edit-title', this.card.id)
+		},
+		deleteCard() {
+			this.$store.dispatch('deleteCard', this.card)
+			const undoCard = { ...this.card, deletedAt: 0 }
+			showUndo(t('deck', 'Card deleted'), () => this.$store.dispatch('cardUndoDelete', undoCard))
+			if (this.$router.currentRoute.name === 'card') {
+				this.$router.push({ name: 'board' })
+			}
+		},
+		changeCardDoneStatus() {
+			this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
+		},
+		archiveUnarchiveCard() {
+			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
+		},
+		assignCardToMe() {
+			this.$store.dispatch('assignCardToUser', {
+				card: this.card,
+				assignee: {
+					userId: getCurrentUser()?.uid,
+					type: 0,
+				},
+			})
+		},
+		unassignCardFromMe() {
+			this.$store.dispatch('removeUserFromCard', {
+				card: this.card,
+				assignee: {
+					userId: getCurrentUser()?.uid,
+					type: 0,
+				},
+			})
+		},
+		openCardMoveDialog() {
+			emit('deck:card:show-move-dialog', this.card)
 		},
 	},
 }

src/components/cards/CardMenuEntries.vue

@@ -1,189 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div>
-		<NcActionButton v-if="!hideDetailsEntry" :close-after-click="true" @click="openCard">
-			<template #icon>
-				<CardBulletedIcon icon :size="20" decorative />
-			</template>
-			{{ t('deck', 'Card details') }}
-		</NcActionButton>
-		<NcActionButton v-if="canEdit" :close-after-click="true" @click="editTitle">
-			<template #icon>
-				<PencilIcon :size="20" decorative />
-			</template>
-			{{ t('deck', 'Edit title') }}
-		</NcActionButton>
-		<NcActionButton v-if="canEdit && !isCurrentUserAssigned"
-			icon="icon-user"
-			:close-after-click="true"
-			@click="assignCardToMe()">
-			{{ t('deck', 'Assign to me') }}
-		</NcActionButton>
-		<NcActionButton v-if="canEdit && isCurrentUserAssigned"
-			icon="icon-user"
-			:close-after-click="true"
-			@click="unassignCardFromMe()">
-			{{ t('deck', 'Unassign myself') }}
-		</NcActionButton>
-		<NcActionButton v-if="canEdit"
-			icon="icon-checkmark"
-			:close-after-click="true"
-			@click="changeCardDoneStatus()">
-			{{ card.done ? t('deck', 'Mark as not done') : t('deck', 'Mark as done') }}
-		</NcActionButton>
-		<NcActionButton v-if="canEdit"
-			icon="icon-external"
-			:close-after-click="true"
-			@click="openCardMoveDialog">
-			{{ t('deck', 'Move/copy card') }}
-		</NcActionButton>
-		<NcActionButton v-for="action in cardActions"
-			:key="action.label"
-			:close-after-click="true"
-			:icon="action.icon"
-			@click="action.callback(cardRichObject)">
-			{{ action.label }}
-		</NcActionButton>
-		<NcActionButton v-if="canEditBoard" :close-after-click="true" @click="archiveUnarchiveCard()">
-			<template #icon>
-				<ArchiveIcon :size="20" decorative />
-			</template>
-			{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
-		</NcActionButton>
-		<NcActionButton v-if="canEdit"
-			icon="icon-delete"
-			:close-after-click="true"
-			@click="deleteCard()">
-			{{ t('deck', 'Delete card') }}
-		</NcActionButton>
-	</div>
-</template>
-<script>
-import { NcActionButton } from '@nextcloud/vue'
-import { mapGetters, mapState } from 'vuex'
-import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
-import CardBulletedIcon from 'vue-material-design-icons/CardBulleted.vue'
-import PencilIcon from 'vue-material-design-icons/Pencil.vue'
-import { generateUrl } from '@nextcloud/router'
-import { getCurrentUser } from '@nextcloud/auth'
-import { showUndo } from '@nextcloud/dialogs'
-
-import '@nextcloud/dialogs/style.css'
-import { emit } from '@nextcloud/event-bus'
-
-export default {
-	name: 'CardMenuEntries',
-	components: { NcActionButton, ArchiveIcon, CardBulletedIcon, PencilIcon },
-	props: {
-		card: {
-			type: Object,
-			default: null,
-		},
-		hideDetailsEntry: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['edit-title'],
-	data() {
-		return {
-			modalShow: false,
-			selectedBoard: '',
-			selectedStack: '',
-			stacksFromBoard: [],
-		}
-	},
-	computed: {
-		...mapGetters([
-			'isArchived',
-			'boards',
-			'cardActions',
-			'stackById',
-			'boardById',
-		]),
-		...mapState({
-			showArchived: state => state.showArchived,
-			currentBoard: state => state.currentBoard,
-		}),
-		canEdit() {
-			return !this.card.archived
-		},
-		canEditBoard() {
-			if (this.currentBoard) {
-				return this.$store.getters.canEdit
-			}
-			const board = this.$store.getters.boards.find((item) => item.id === this.card.boardId)
-			return !!board?.permissions?.PERMISSION_EDIT
-		},
-		isCurrentUserAssigned() {
-			return this.card.assignedUsers.find((item) => item.type === 0 && item.participant.uid === getCurrentUser()?.uid)
-		},
-		boardId() {
-			return this.card?.boardId ? this.card.boardId : Number(this.$route.params.id)
-		},
-		cardRichObject() {
-			return {
-				id: '' + this.card.id,
-				name: this.card.title,
-				boardname: this.boardById(this.boardId)?.title,
-				stackname: this.stackById(this.card.stackId)?.title,
-				link: window.location.protocol + '//' + window.location.host + generateUrl('/apps/deck/') + `card/${this.card.id}`,
-			}
-		},
-	},
-	methods: {
-		openCard() {
-			const boardId = this.card?.boardId ? this.card.boardId : this.$route?.params.id ?? this.currentBoard.id
-
-			if (this.$router) {
-				this.$router?.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
-				return
-			}
-
-			this.$root.$emit('open-card', this.card.id)
-		},
-		editTitle() {
-			this.$emit('edit-title', this.card.id)
-		},
-		deleteCard() {
-			this.$store.dispatch('deleteCard', this.card)
-			const undoCard = { ...this.card, deletedAt: 0 }
-			showUndo(t('deck', 'Card deleted'), () => this.$store.dispatch('cardUndoDelete', undoCard))
-			if (this.$router.currentRoute.name === 'card') {
-				this.$router.push({ name: 'board' })
-			}
-		},
-		changeCardDoneStatus() {
-			this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
-		},
-		archiveUnarchiveCard() {
-			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
-		},
-		assignCardToMe() {
-			this.$store.dispatch('assignCardToUser', {
-				card: this.card,
-				assignee: {
-					userId: getCurrentUser()?.uid,
-					type: 0,
-				},
-			})
-		},
-		unassignCardFromMe() {
-			this.$store.dispatch('removeUserFromCard', {
-				card: this.card,
-				assignee: {
-					userId: getCurrentUser()?.uid,
-					type: 0,
-				},
-			})
-		},
-		openCardMoveDialog() {
-			emit('deck:card:show-move-dialog', this.card)
-		},
-	},
-}
-</script>

src/components/navigation/BoardCloneModal.vue

@@ -5,16 +5,16 @@
 <template>
 	<NcDialog :name="t('deck', 'Clone {boardTitle}', {boardTitle: boardTitle})" :show="true" @close="close(false)">
 		<div class="modal__content">
-			<NcCheckboxRadioSwitch :checked.sync="withCards">
+			<NcCheckboxRadioSwitch v-model="withCards">
 				{{ t('deck', 'Clone cards') }}
 			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch v-if="withCards" :checked.sync="withAssignments">
+			<NcCheckboxRadioSwitch v-if="withCards" v-model="withAssignments">
 				{{ t('deck', 'Clone assignments') }}
 			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch v-if="withCards" :checked.sync="withLabels">
+			<NcCheckboxRadioSwitch v-if="withCards" v-model="withLabels">
 				{{ t('deck', 'Clone labels') }}
 			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch v-if="withCards" :checked.sync="withDueDate">
+			<NcCheckboxRadioSwitch v-if="withCards" v-model="withDueDate">
 				{{ t('deck', 'Clone due dates') }}
 			</NcCheckboxRadioSwitch>
 			<div v-if="withCards" class="accordion" :class="{ 'is-open': accordionOpen }">
@@ -25,10 +25,10 @@
 					{{ t('deck', 'Advanced options') }}
 				</div>
 				<div v-if="accordionOpen" class="accordion__content">
-					<NcCheckboxRadioSwitch v-if="withCards" :checked.sync="moveCardsToLeftStack">
+					<NcCheckboxRadioSwitch v-if="withCards" v-model="moveCardsToLeftStack">
 						{{ t('deck', 'Move all cards to the first list') }}
 					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch v-if="withCards" :checked.sync="restoreArchivedCards">
+					<NcCheckboxRadioSwitch v-if="withCards" v-model="restoreArchivedCards">
 						{{ t('deck', 'Restore archived cards') }}
 					</NcCheckboxRadioSwitch>
 				</div>

src/components/navigation/BoardExportModal.vue

@@ -5,13 +5,13 @@
 <template>
 	<NcDialog :name="t('deck', 'Export {boardTitle}', {boardTitle: boardTitle})" @update:open="close">
 		<div class="modal__content">
-			<NcCheckboxRadioSwitch :checked.sync="exportFormat"
+			<NcCheckboxRadioSwitch v-model="exportFormat"
 				value="json"
 				type="radio"
 				name="board_export_format">
 				{{ t('deck', 'Export as JSON') }}
 			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch :checked.sync="exportFormat"
+			<NcCheckboxRadioSwitch v-model="exportFormat"
 				value="csv"
 				type="radio"
 				name="board_export_format">

src/mixins/attachmentUpload.js

@@ -26,7 +26,8 @@ export default {
 				return
 			}
 
-			this.$set(this.uploadQueue, file.name, { name: file.name, progress: 0 })
+			this.uploadQueue[file.name] = { name: file.name, progress: 0 }
+
 			const bodyFormData = new FormData()
 			bodyFormData.append('cardId', this.cardId)
 			bodyFormData.append('type', type)
@@ -39,7 +40,7 @@ export default {
 						onUploadProgress: (e) => {
 							const percentCompleted = Math.round((e.loaded * 100) / e.total)
 							console.debug(percentCompleted)
-							this.$set(this.uploadQueue[file.name], 'progress', percentCompleted)
+							this.uploadQueue[file.name].progress = percentCompleted
 						},
 					})
 				} catch (err) {
@@ -50,7 +51,7 @@ export default {
 						showError(err.response.data ? err.response.data.message : 'Failed to upload file')
 					}
 				}
-				this.$delete(this.uploadQueue, file.name)
+				delete this.uploadQueue[file.name]
 			})
 
 		},

src/store/comment.js

@@ -4,7 +4,6 @@
  */
 
 import { CommentApi } from '../services/CommentApi.js'
-import Vue from 'vue'
 
 const apiClient = new CommentApi()
 

src/store/overview.js

@@ -3,18 +3,17 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { createStore } from 'vuex/dist/vuex.cjs.js'
 import { OverviewApi } from '../services/OverviewApi.js'
 
 const apiClient = new OverviewApi()
-export default createStore({
+export default {
 	state: {
 		assignedCards: [],
 		loading: false,
 	},
 	getters: {
-		assignedCardsDashboard(state) {
-			return () => state.assignedCards
+		assignedCardsDashboard: state => {
+			return state.assignedCards
 		},
 	},
 	mutations: {
@@ -44,4 +43,4 @@ export default createStore({
 			return promise
 		},
 	},
-})
+}

src/views/CreateNewCardCustomPicker.vue

@@ -212,8 +212,8 @@ export default {
 		},
 	},
 	beforeMount() {
-		this.$set(this.card, 'title', this.title)
-		this.$set(this.card, 'description', this.description)
+		this.card.title = this.title
+		this.card.description = this.description
 		this.fetchBoards()
 	},
 	mounted() {