Bump to @nextcloud/vue@6.0.0-beta.3

Signed-off-by: Julius Härtl <jus@bitgrid.net>

package.json

@@ -40,7 +40,7 @@
     "@nextcloud/l10n": "^1.6.0",
     "@nextcloud/moment": "^1.2.1",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^5.4.0",
+    "@nextcloud/vue": "^6.0.0-beta.3",
     "@nextcloud/vue-dashboard": "^2.0.1",
     "blueimp-md5": "^2.19.0",
     "dompurify": "^2.3.10",

src/App.vue

@@ -21,13 +21,13 @@
  -->
 
 <template>
-	<Content id="content" app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
+	<NcContent id="content" app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
 		<AppNavigation />
-		<AppContent>
+		<NcAppContent>
 			<router-view />
-		</AppContent>
+		</NcAppContent>
 
-		<Modal v-if="cardDetailsInModal && $route.params.cardId"
+		<NcModal v-if="cardDetailsInModal && $route.params.cardId"
 			:clear-view-delay="0"
 			:title="t('deck', 'Card details')"
 			size="large"
@@ -35,16 +35,16 @@
 			<div class="modal__content modal__card">
 				<router-view name="sidebar" />
 			</div>
-		</Modal>
+		</NcModal>
 
 		<router-view name="sidebar" :visible="!cardDetailsInModal || !$route.params.cardId" />
-	</Content>
+	</NcContent>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation'
-import { Modal, Content, AppContent } from '@nextcloud/vue'
+import { NcModal, NcContent, NcAppContent } from '@nextcloud/vue'
 import { BoardApi } from './services/BoardApi'
 import { emit, subscribe } from '@nextcloud/event-bus'
 
@@ -54,9 +54,9 @@ export default {
 	name: 'App',
 	components: {
 		AppNavigation,
-		Modal,
+		NcModal,
-		Content,
+		NcContent,
-		AppContent,
+		NcAppContent,
 	},
 	provide() {
 		return {

src/BoardSelector.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Modal @close="close">
+	<NcModal @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
 			<h1>{{ t('deck', 'Select the board to link to a project') }}</h1>
 			<input v-model="filter" type="text" :placeholder="t('deck', 'Search by board title')">
@@ -38,17 +38,17 @@
 				{{ t('deck', 'Select board') }}
 			</button>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'BoardSelector',
 	components: {
-		Modal,
+		NcModal,
 	},
 	data() {
 		return {

src/CardCreateDialog.vue

@@ -21,11 +21,11 @@
   -->
 
 <template>
-	<Modal class="card-selector" @close="close">
+	<NcModal class="card-selector" @close="close">
 		<div class="modal-scroller">
 			<div v-if="!creating && !created" id="modal-inner" :class="{ 'icon-loading': loading }">
 				<h3>{{ t('deck', 'Create a new card') }}</h3>
-				<Multiselect v-model="selectedBoard"
+				<NcMultiselect v-model="selectedBoard"
 					:placeholder="t('deck', 'Select a board')"
 					:options="boards"
 					:disabled="loading"
@@ -44,9 +44,9 @@
 							<span>{{ props.option.title }}</span>
 						</span>
 					</template>
-				</Multiselect>
+				</NcMultiselect>
 
-				<Multiselect v-model="selectedStack"
+				<NcMultiselect v-model="selectedStack"
 					:placeholder="t('deck', 'Select a list')"
 					:options="stacksFromBoard"
 					:max-height="100"
@@ -71,10 +71,10 @@
 				</div>
 			</div>
 			<div v-else id="modal-inner">
-				<EmptyContent v-if="creating" icon="icon-loading">
+				<NcEmptyContent v-if="creating" icon="icon-loading">
 					{{ t('deck', 'Creating the new card …') }}
-				</EmptyContent>
+				</NcEmptyContent>
-				<EmptyContent v-else-if="created" icon="icon-checkmark">
+				<NcEmptyContent v-else-if="created" icon="icon-checkmark">
 					{{ t('deck', 'Card "{card}" was added to "{board}"', { card: pendingTitle, board: selectedBoard.title }) }}
 					<template #desc>
 						<button class="primary" @click="openNewCard">
@@ -84,17 +84,17 @@
 							{{ t('deck', 'Close') }}
 						</button>
 					</template>
-				</EmptyContent>
+				</NcEmptyContent>
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
 import axios from '@nextcloud/axios'
 import { CardApi } from './services/CardApi'
 
@@ -103,9 +103,9 @@ const cardApi = new CardApi()
 export default {
 	name: 'CardCreateDialog',
 	components: {
-		EmptyContent,
+		NcEmptyContent,
-		Modal,
+		NcModal,
-		Multiselect,
+		NcMultiselect,
 	},
 	props: {
 		title: {

src/CardSelector.vue

@@ -21,10 +21,10 @@
   -->
 
 <template>
-	<Modal class="card-selector" @close="close">
+	<NcModal class="card-selector" @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
 			<h3>{{ title }}</h3>
-			<Multiselect v-model="selectedBoard"
+			<NcMultiselect v-model="selectedBoard"
 				:placeholder="t('deck', 'Select a board')"
 				:options="boards"
 				:disabled="loading"
@@ -42,9 +42,9 @@
 						<span>{{ props.option.title }}</span>
 					</span>
 				</template>
-			</Multiselect>
+			</NcMultiselect>
 
-			<Multiselect v-model="selectedCard"
+			<NcMultiselect v-model="selectedCard"
 				:placeholder="t('deck', 'Select a card')"
 				:options="cardsFromBoard"
 				:disabled="loading || selectedBoard === ''"
@@ -57,20 +57,20 @@
 				{{ t('deck', 'Cancel') }}
 			</button>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import axios from '@nextcloud/axios'
 
 export default {
 	name: 'CardSelector',
 	components: {
-		Modal,
+		NcModal,
-		Multiselect,
+		NcMultiselect,
 	},
 	props: {
 		title: {

src/components/ActivityEntry.vue

@@ -36,7 +36,7 @@
 
 <script>
 import RichText from '@juliushaertl/vue-richtext'
-import { UserBubble } from '@nextcloud/vue'
+import { NcUserBubble } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import DOMPurify from 'dompurify'
 import relativeDate from '../mixins/relativeDate'
@@ -93,7 +93,7 @@ export default {
 					break
 				case 'user':
 					parameters[key] = {
-						component: UserBubble,
+						component: NcUserBubble,
 						props: {
 							user: parameters[key].id,
 							displayName: parameters[key].name,

src/components/AttachmentDragAndDrop.vue

@@ -41,7 +41,7 @@
 			</div>
 		</transition>
 
-		<Modal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
+		<NcModal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
 			<div class="modal__content">
 				<h2>{{ t('deck', 'File already exists') }}</h2>
 				<p>
@@ -57,12 +57,12 @@
 					{{ t('deck', 'Keep existing file') }}
 				</button>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
 <script>
-import { Modal } from '@nextcloud/vue'
+import { NcModal } from '@nextcloud/vue'
 import attachmentUpload from '../mixins/attachmentUpload'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -75,7 +75,7 @@ try {
 
 export default {
 	name: 'AttachmentDragAndDrop',
-	components: { Modal },
+	components: { NcModal },
 	mixins: [attachmentUpload],
 	props: {
 		cardId: {

src/components/Controls.vue

@@ -25,11 +25,11 @@
 		<div v-if="overviewName" class="board-title">
 			<div class="board-bullet icon-calendar-dark" />
 			<h2>{{ overviewName }}</h2>
-			<Actions>
+			<NcActions>
-				<ActionButton icon="icon-add" @click="clickShowAddCardModel">
+				<NcActionButton icon="icon-add" @click="clickShowAddCardModel">
 					{{ t('deck', 'Add card') }}
-				</ActionButton>
+				</NcActionButton>
-			</Actions>
+			</NcActions>
 			<CardCreateDialog v-if="showAddCardModal" @close="clickHideAddCardModel" />
 		</div>
 		<div v-else-if="board" class="board-title">
@@ -49,11 +49,11 @@
 			<div v-if="board && canManage && !showArchived && !board.archived"
 				id="stack-add"
 				v-click-outside="hideAddStack">
-				<Actions v-if="!isAddStackVisible">
+				<NcActions v-if="!isAddStackVisible">
-					<ActionButton icon="icon-add" @click.stop="showAddStack">
+					<NcActionButton icon="icon-add" @click.stop="showAddStack">
 						{{ t('deck', 'Add list') }}
-					</ActionButton>
+					</NcActionButton>
-				</Actions>
+				</NcActions>
 				<form v-else @submit.prevent="addNewStack()">
 					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add list') }}</label>
 					<input id="new-stack-input-main"
@@ -71,13 +71,13 @@
 			</div>
 			<div v-if="board" class="board-action-buttons">
 				<div class="board-action-buttons__filter">
-					<Popover container=".board-action-buttons__filter"
+					<NcPopover container=".board-action-buttons__filter"
 						:placement="'bottom-end'"
 						:aria-label="t('deck', 'Active filters')"
 						@show="filterVisible=true"
 						@hide="filterVisible=false">
-						<!-- We cannot use Actions here are the popover trigger does not update on reactive icons -->
+						<!-- We cannot use NcActions here are the popover trigger does not update on reactive icons -->
-						<Button slot="trigger"
+						<NcButton slot="trigger"
 							:title="t('deck', 'Apply filter')"
 							class="filter-button"
 							type="tertiary-no-background">
@@ -85,7 +85,7 @@
 								<FilterIcon v-if="isFilterActive" :size="20" decorative />
 								<FilterOffIcon v-else :size="20" decorative />
 							</template>
-						</Button>
+						</NcButton>
 
 						<div v-if="filterVisible" class="filter">
 							<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -117,7 +117,7 @@
 									class="checkbox"
 									:value="user.uid"
 									@change="setFilter">
-								<label :for="user.uid"><Avatar :user="user.uid" :size="24" :disable-menu="true" /> {{ user.displayname }}</label>
+								<label :for="user.uid"><NcAvatar :user="user.uid" :size="24" :disable-menu="true" /> {{ user.displayname }}</label>
 							</div>
 
 							<h3>{{ t('deck', 'Filter by due date') }}</h3>
@@ -177,38 +177,38 @@
 								<label for="noDue">{{ t('deck', 'No due date') }}</label>
 							</div>
 
-							<Button :disabled="!isFilterActive" :wide="true" @click="clearFilter">
+							<NcButton :disabled="!isFilterActive" :wide="true" @click="clearFilter">
 								{{ t('deck', 'Clear filter') }}
-							</Button>
+							</NcButton>
 						</div>
-					</Popover>
+					</NcPopover>
 				</div>
 
-				<Actions>
+				<NcActions>
-					<ActionButton @click="toggleShowArchived">
+					<NcActionButton @click="toggleShowArchived">
 						<template #icon>
 							<ArchiveIcon :size="20" decorative />
 						</template>
 						{{ showArchived ? t('deck', 'Hide archived cards') : t('deck', 'Show archived cards') }}
-					</ActionButton>
+					</NcActionButton>
-					<ActionButton v-if="compactMode"
+					<NcActionButton v-if="compactMode"
 						@click="toggleCompactMode">
 						<ArrowExpandVerticalIcon slot="icon" :size="20" decorative />
 						{{ t('deck', 'Toggle compact mode') }}
-					</ActionButton>
+					</NcActionButton>
-					<ActionButton v-else
+					<NcActionButton v-else
 						@click="toggleCompactMode">
 						<ArrowCollapseVerticalIcon slot="icon" :size="20" decorative />
 						{{ t('deck', 'Toggle compact mode') }}
-					</ActionButton>
+					</NcActionButton>
-				</Actions>
+				</NcActions>
-				<!-- FIXME: ActionRouter currently doesn't work as an inline action -->
+				<!-- FIXME: NcActionRouter currently doesn't work as an inline action -->
-				<Actions>
+				<NcActions>
-					<ActionButton icon="icon-menu-sidebar"
+					<NcActionButton icon="icon-menu-sidebar"
 						:aria-label="t('deck', 'Open details')"
 						:title="t('deck', 'Details')"
 						@click="toggleDetailsView" />
-				</Actions>
+				</NcActions>
 			</div>
 		</div>
 	</div>
@@ -216,7 +216,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Actions, ActionButton, Avatar, Button, Popover } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle'
 import CardCreateDialog from '../CardCreateDialog'
 import ArchiveIcon from 'vue-material-design-icons/Archive'
@@ -228,11 +228,11 @@ import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertic
 export default {
 	name: 'Controls',
 	components: {
-		Actions,
+		NcActions,
-		ActionButton,
+		NcActionButton,
-		Button,
+		NcButton,
-		Popover,
+		NcPopover,
-		Avatar,
+		NcAvatar,
 		CardCreateDialog,
 		ArchiveIcon,
 		FilterIcon,

src/components/board/Board.vue

@@ -30,7 +30,7 @@
 				<h2>{{ t('deck', 'Loading board') }}</h2>
 				<p />
 			</div>
-			<EmptyContent v-else-if="isEmpty" key="empty" icon="icon-deck">
+			<NcEmptyContent v-else-if="isEmpty" key="empty" icon="icon-deck">
 				{{ t('deck', 'No lists available') }}
 				<template v-if="canManage" #desc>
 					{{ t('deck', 'Create a new list to add cards to this board') }}
@@ -48,7 +48,7 @@
 							value="">
 					</form>
 				</template>
-			</EmptyContent>
+			</NcEmptyContent>
 			<div v-else-if="!isEmpty && !loading" key="board" class="board">
 				<Container lock-axix="y"
 					orientation="horizontal"
@@ -75,7 +75,7 @@ import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls'
 import Stack from './Stack'
-import { EmptyContent } from '@nextcloud/vue'
+import { NcEmptyContent } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults'
 import { showError } from '../../helpers/errors'
 
@@ -87,7 +87,7 @@ export default {
 		Container,
 		Draggable,
 		Stack,
-		EmptyContent,
+		NcEmptyContent,
 	},
 	inject: [
 		'boardApi',

src/components/board/BoardSidebar.vue

@@ -21,40 +21,40 @@
   -->
 
 <template>
-	<AppSidebar v-if="board != null"
+	<NcAppSidebar v-if="board != null"
 		:actions="[]"
 		:title="board.title"
 		@close="closeSidebar">
-		<AppSidebarTab id="sharing"
+		<NcAppSidebarTab id="sharing"
 			:order="0"
 			:name="t('deck', 'Sharing')"
 			icon="icon-shared">
 			<SharingTabSidebar :board="board" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab id="tags"
+		<NcAppSidebarTab id="tags"
 			:order="1"
 			:name="t('deck', 'Tags')"
 			icon="icon-tag">
 			<TagsTabSidebar :board="board" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="canEdit"
+		<NcAppSidebarTab v-if="canEdit"
 			id="deleted"
 			:order="2"
 			:name="t('deck', 'Deleted items')"
 			icon="icon-delete">
 			<DeletedTabSidebar :board="board" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="hasActivity"
+		<NcAppSidebarTab v-if="hasActivity"
 			id="activity"
 			:order="3"
 			:name="t('deck', 'Timeline')"
 			icon="icon-activity">
 			<TimelineTabSidebar :board="board" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
-	</AppSidebar>
+	</NcAppSidebar>
 </template>
 
 <script>
@@ -63,15 +63,15 @@ import SharingTabSidebar from './SharingTabSidebar'
 import TagsTabSidebar from './TagsTabSidebar'
 import DeletedTabSidebar from './DeletedTabSidebar'
 import TimelineTabSidebar from './TimelineTabSidebar'
-import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
+import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
 
 const capabilities = window.OC.getCapabilities()
 
 export default {
 	name: 'BoardSidebar',
 	components: {
-		AppSidebar,
+		NcAppSidebar,
-		AppSidebarTab,
+		NcAppSidebarTab,
 		SharingTabSidebar,
 		TagsTabSidebar,
 		DeletedTabSidebar,

src/components/board/SharingTabSidebar.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<Multiselect v-if="canShare"
+		<NcMultiselect v-if="canShare"
 			v-model="addAcl"
 			:placeholder="t('deck', 'Share board with a user, group or circle …')"
 			:options="formatedSharees"
@@ -18,12 +18,12 @@
 			<template #noResult>
 				{{ isSearching ? t('deck', 'Searching for users, groups and circles …') : t('deck', 'No participants found') }}
 			</template>
-		</Multiselect>
+		</NcMultiselect>
 
 		<ul id="shareWithList"
 			class="shareWithList">
 			<li>
-				<Avatar :user="board.owner.uid" />
+				<NcAvatar :user="board.owner.uid" />
 				<span class="has-tooltip username">
 					{{ board.owner.displayname }}
 					<span v-if="!isCurrentUser(board.owner.uid)" class="board-owner-label">
@@ -32,7 +32,7 @@
 				</span>
 			</li>
 			<li v-for="acl in board.acl" :key="acl.id">
-				<Avatar v-if="acl.type===0" :user="acl.participant.uid" />
+				<NcAvatar v-if="acl.type===0" :user="acl.participant.uid" />
 				<div v-if="acl.type===1" class="avatardiv icon icon-group" />
 				<div v-if="acl.type===7" class="avatardiv icon icon-circles" />
 				<span class="has-tooltip username">
@@ -44,7 +44,7 @@
 				<ActionCheckbox v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0) && (canManage || (canEdit && canShare))" :checked="acl.permissionEdit" @change="clickEditAcl(acl)">
 					{{ t('deck', 'Can edit') }}
 				</ActionCheckbox>
-				<Actions v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0)" :force-menu="true">
+				<NcActions v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0)" :force-menu="true">
 					<ActionCheckbox v-if="canManage || canShare" :checked="acl.permissionShare" @change="clickShareAcl(acl)">
 						{{ t('deck', 'Can share') }}
 					</ActionCheckbox>
@@ -54,10 +54,10 @@
 					<ActionCheckbox v-if="acl.type === 0 && isCurrentUser(board.owner.uid)" :checked="acl.owner" @change="clickTransferOwner(acl.participant.uid)">
 						{{ t('deck', 'Owner') }}
 					</ActionCheckbox>
-					<ActionButton v-if="canManage" icon="icon-delete" @click="clickDeleteAcl(acl)">
+					<NcActionButton v-if="canManage" icon="icon-delete" @click="clickDeleteAcl(acl)">
 						{{ t('deck', 'Delete') }}
-					</ActionButton>
+					</NcActionButton>
-				</Actions>
+				</NcActions>
 			</li>
 		</ul>
 
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import { Avatar, Multiselect, Actions, ActionButton, ActionCheckbox } from '@nextcloud/vue'
+import { NcAvatar, NcMultiselect, NcActions, NcActionButton, ActionCheckbox } from '@nextcloud/vue'
 import { CollectionList } from 'nextcloud-vue-collections'
 import { mapGetters, mapState } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -80,11 +80,11 @@ import debounce from 'lodash/debounce'
 export default {
 	name: 'SharingTabSidebar',
 	components: {
-		Avatar,
+		NcAvatar,
-		Actions,
+		NcActions,
-		ActionButton,
+		NcActionButton,
 		ActionCheckbox,
-		Multiselect,
+		NcMultiselect,
 		CollectionList,
 	},
 	props: {

src/components/board/Stack.vue

@@ -52,25 +52,25 @@
 						value="">
 				</form>
 			</transition>
-			<Actions v-if="canManage && !isArchived" :force-menu="true">
+			<NcActions v-if="canManage && !isArchived" :force-menu="true">
-				<ActionButton @click="modalArchivAllCardsShow=true">
+				<NcActionButton @click="modalArchivAllCardsShow=true">
 					<template #icon>
 						<ArchiveIcon decorative />
 					</template>
 					{{ t('deck', 'Archive all cards') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton icon="icon-delete" @click="deleteStack(stack)">
+				<NcActionButton icon="icon-delete" @click="deleteStack(stack)">
 					{{ t('deck', 'Delete list') }}
-				</ActionButton>
+				</NcActionButton>
-			</Actions>
+			</NcActions>
-			<Actions v-if="canEdit && !showArchived && !isArchived">
+			<NcActions v-if="canEdit && !showArchived && !isArchived">
-				<ActionButton icon="icon-add" @click.stop="showAddCard=true">
+				<NcActionButton icon="icon-add" @click.stop="showAddCard=true">
 					{{ t('deck', 'Add card') }}
-				</ActionButton>
+				</NcActionButton>
-			</Actions>
+			</NcActions>
 		</div>
 
-		<Modal v-if="modalArchivAllCardsShow" @close="modalArchivAllCardsShow=false">
+		<NcModal v-if="modalArchivAllCardsShow" @close="modalArchivAllCardsShow=false">
 			<div class="modal__content">
 				<h3>{{ t('deck', 'Archive all cards in this list') }}</h3>
 				<progress :value="stackTransfer.current" :max="stackTransfer.total" />
@@ -81,7 +81,7 @@
 					{{ t('deck', 'Cancel') }}
 				</button>
 			</div>
-		</Modal>
+		</NcModal>
 
 		<transition name="slide-top" appear>
 			<div v-if="showAddCard" class="stack__card-add">
@@ -131,7 +131,7 @@
 import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
 
-import { Actions, ActionButton, Modal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
 import { showError, showUndo } from '@nextcloud/dialogs'
 import CardItem from '../cards/CardItem'
 
@@ -141,12 +141,12 @@ import ArchiveIcon from 'vue-material-design-icons/Archive'
 export default {
 	name: 'Stack',
 	components: {
-		Actions,
+		NcActions,
-		ActionButton,
+		NcActionButton,
 		CardItem,
 		Container,
 		Draggable,
-		Modal,
+		NcModal,
 		ArchiveIcon,
 	},
 

src/components/board/TagsTabSidebar.vue

@@ -5,59 +5,59 @@
 				<!-- Edit Tag -->
 				<template v-if="editingLabelId === label.id">
 					<form class="label-form" @submit.prevent="updateLabel(label)">
-						<ColorPicker class="color-picker-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
+						<NcColorPicker class="color-picker-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
 							<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker" />
-						</ColorPicker>
+						</NcColorPicker>
 						<input v-model="editingLabel.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
 							:disabled="!editLabelObjValidated"
 							type="submit"
 							value=""
 							class="icon-confirm">
-						<Actions>
+						<NcActions>
-							<ActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
+							<NcActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
 								:disabled="!editLabelObjValidated"
 								icon="icon-close"
 								@click="editingLabelId = null">
 								{{ t('deck', 'Cancel') }}
-							</ActionButton>
+							</NcActionButton>
-						</Actions>
+						</NcActions>
 					</form>
 				</template>
 				<template v-else>
 					<div class="label-title" @click="clickEdit(label)">
 						<span :style="{ backgroundColor: `#${label.color}`, color: textColor(label.color) }">{{ label.title }}</span>
 					</div>
-					<Actions v-if="canManage && !isArchived">
+					<NcActions v-if="canManage && !isArchived">
-						<ActionButton icon="icon-rename" @click="clickEdit(label)">
+						<NcActionButton icon="icon-rename" @click="clickEdit(label)">
 							{{ t('deck', 'Edit') }}
-						</ActionButton>
+						</NcActionButton>
-					</Actions>
+					</NcActions>
-					<Actions v-if="canManage && !isArchived">
+					<NcActions v-if="canManage && !isArchived">
-						<ActionButton icon="icon-delete" @click="deleteLabel(label.id)">
+						<NcActionButton icon="icon-delete" @click="deleteLabel(label.id)">
 							{{ t('deck', 'Delete') }}
-						</ActionButton>
+						</NcActionButton>
-					</Actions>
+					</NcActions>
 				</template>
 			</li>
 
 			<li v-if="addLabel" class="editing">
 				<!-- New Tag -->
 				<form class="label-form" @submit.prevent="clickAddLabel">
-					<ColorPicker class="color-picker-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
+					<NcColorPicker class="color-picker-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
 						<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker" />
-					</ColorPicker>
+					</NcColorPicker>
 					<input v-model="addLabelObj.title" type="text">
 					<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
 						:disabled="!addLabelObjValidated"
 						type="submit"
 						value=""
 						class="icon-confirm">
-					<Actions>
+					<NcActions>
-						<ActionButton icon="icon-close" @click="addLabel=false">
+						<NcActionButton icon="icon-close" @click="addLabel=false">
 							{{ t('deck', 'Cancel') }}
-						</ActionButton>
+						</NcActionButton>
-					</Actions>
+					</NcActions>
 				</form>
 			</li>
 			<button v-if="canManage && !isArchived" @click="clickShowAddLabel()">
@@ -71,14 +71,14 @@
 
 import { mapGetters } from 'vuex'
 import Color from '../../mixins/color'
-import { ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
+import { NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
 
 export default {
 	name: 'TagsTabSidebar',
 	components: {
-		ColorPicker,
+		NcColorPicker,
-		Actions,
+		NcActions,
-		ActionButton,
+		NcActionButton,
 	},
 	mixins: [Color],
 	data() {

src/components/boards/BoardItem.vue

@@ -33,8 +33,8 @@
 			{{ board.title }}
 		</div>
 		<div class="board-list-avatars-cell" title="">
-			<Avatar :user="board.owner.uid" :display-name="board.owner.displayname" class="board-list-avatar" />
+			<NcAvatar :user="board.owner.uid" :display-name="board.owner.displayname" class="board-list-avatar" />
-			<Avatar v-for="user in limitedAcl"
+			<NcAvatar v-for="user in limitedAcl"
 				:key="user.id"
 				:user="user.participant.uid"
 				:display-name="user.participant.displayname"
@@ -46,12 +46,12 @@
 </template>
 
 <script>
-import { Avatar } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 
 export default {
 	name: 'BoardItem',
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 	props: {
 		board: {

src/components/card/AttachmentList.vue

@@ -70,12 +70,12 @@
 						</div>
 					</a>
 				</div>
-				<Actions v-if="selectable">
+				<NcActions v-if="selectable">
-					<ActionButton icon="icon-confirm" @click="$emit('select-attachment', attachment)">
+					<NcActionButton icon="icon-confirm" @click="$emit('select-attachment', attachment)">
 						{{ t('deck', 'Add this attachment') }}
-					</ActionButton>
+					</NcActionButton>
-				</Actions>
+				</NcActions>
-				<Actions v-if="removable && !isReadOnly" :force-menu="true">
+				<NcActions v-if="removable && !isReadOnly" :force-menu="true">
 					<ActionLink v-if="attachment.extendedData.fileid" icon="icon-folder" :href="internalLink(attachment)">
 						{{ t('deck', 'Show in Files') }}
 					</ActionLink>
@@ -85,17 +85,17 @@
 						download>
 						{{ t('deck', 'Download') }}
 					</ActionLink>
-					<ActionButton v-if="attachment.extendedData.fileid && !isReadOnly" icon="icon-delete" @click="unshareAttachment(attachment)">
+					<NcActionButton v-if="attachment.extendedData.fileid && !isReadOnly" icon="icon-delete" @click="unshareAttachment(attachment)">
 						{{ t('deck', 'Remove attachment') }}
-					</ActionButton>
+					</NcActionButton>
 
-					<ActionButton v-if="!attachment.extendedData.fileid && attachment.deletedAt === 0" icon="icon-delete" @click="$emit('delete-attachment', attachment)">
+					<NcActionButton v-if="!attachment.extendedData.fileid && attachment.deletedAt === 0" icon="icon-delete" @click="$emit('delete-attachment', attachment)">
 						{{ t('deck', 'Delete Attachment') }}
-					</ActionButton>
+					</NcActionButton>
-					<ActionButton v-else-if="!attachment.extendedData.fileid" icon="icon-history" @click="$emit('restore-attachment', attachment)">
+					<NcActionButton v-else-if="!attachment.extendedData.fileid" icon="icon-history" @click="$emit('restore-attachment', attachment)">
 						{{ t('deck', 'Restore Attachment') }}
-					</ActionButton>
+					</NcActionButton>
-				</Actions>
+				</NcActions>
 			</li>
 		</ul>
 	</AttachmentDragAndDrop>
@@ -103,7 +103,7 @@
 
 <script>
 import axios from '@nextcloud/axios'
-import { Actions, ActionButton, ActionLink } from '@nextcloud/vue'
+import { NcActions, NcActionButton, ActionLink } from '@nextcloud/vue'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
 import relativeDate from '../../mixins/relativeDate'
 import { formatFileSize } from '@nextcloud/files'
@@ -125,8 +125,8 @@ const picker = getFilePickerBuilder(t('deck', 'File to share'))
 export default {
 	name: 'AttachmentList',
 	components: {
-		Actions,
+		NcActions,
-		ActionButton,
+		NcActionButton,
 		ActionLink,
 		AttachmentDragAndDrop,
 	},

src/components/card/CardSidebar.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AppSidebar v-if="currentBoard && currentCard"
+	<NcAppSidebar v-if="currentBoard && currentCard"
 		:active="tabId"
 		:title="title"
 		:subtitle="subtitle"
@@ -32,57 +32,57 @@
 		@submit-title="handleSubmitTitle"
 		@close="closeSidebar">
 		<template #secondary-actions>
-			<ActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="closeModal()">
+			<NcActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="closeModal()">
 				{{ t('deck', 'Open in sidebar view') }}
-			</ActionButton>
+			</NcActionButton>
-			<ActionButton v-else icon="icon-external" @click.stop="showModal()">
+			<NcActionButton v-else icon="icon-external" @click.stop="showModal()">
 				{{ t('deck', 'Open in bigger view') }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionButton v-for="action in cardActions"
+			<NcActionButton v-for="action in cardActions"
 				:key="action.label"
 				:close-after-click="true"
 				:icon="action.icon"
 				@click="action.callback(cardRichObject)">
 				{{ action.label }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
 
-		<AppSidebarTab id="details"
+		<NcAppSidebarTab id="details"
 			:order="0"
 			:name="t('deck', 'Details')"
 			icon="icon-home">
 			<CardSidebarTabDetails :card="currentCard" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab id="attachments"
+		<NcAppSidebarTab id="attachments"
 			:order="1"
 			:name="t('deck', 'Attachments')">
 			<template #icon>
 				<AttachmentIcon size="20" decorative />
 			</template>
 			<CardSidebarTabAttachments :card="currentCard" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab id="comments"
+		<NcAppSidebarTab id="comments"
 			:order="2"
 			:name="t('deck', 'Comments')"
 			icon="icon-comment">
 			<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
 
-		<AppSidebarTab v-if="hasActivity"
+		<NcAppSidebarTab v-if="hasActivity"
 			id="timeline"
 			:order="3"
 			:name="t('deck', 'Timeline')"
 			icon="icon-activity">
 			<CardSidebarTabActivity :card="currentCard" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>
-	</AppSidebar>
+	</NcAppSidebar>
 </template>
 
 <script>
-import { ActionButton, AppSidebar, AppSidebarTab } from '@nextcloud/vue'
+import { NcActionButton, NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import { mapState, mapGetters } from 'vuex'
 import CardSidebarTabDetails from './CardSidebarTabDetails'
@@ -101,9 +101,9 @@ const capabilities = window.OC.getCapabilities()
 export default {
 	name: 'CardSidebar',
 	components: {
-		AppSidebar,
+		NcAppSidebar,
-		AppSidebarTab,
+		NcAppSidebarTab,
-		ActionButton,
+		NcActionButton,
 		CardSidebarTabAttachments,
 		CardSidebarTabComments,
 		CardSidebarTabActivity,

src/components/card/CardSidebarTabComments.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="comment--header">
-			<Avatar :user="currentUser.uid" />
+			<NcAvatar :user="currentUser.uid" />
 			<span class="has-tooltip username">
 				{{ currentUser.displayName }}
 			</span>
@@ -35,7 +35,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Avatar } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 import CommentItem from './CommentItem'
 import CommentForm from './CommentForm'
 import InfiniteLoading from 'vue-infinite-loading'
@@ -44,7 +44,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 export default {
 	name: 'CardSidebarTabComments',
 	components: {
-		Avatar,
+		NcAvatar,
 		CommentItem,
 		CommentForm,
 		InfiniteLoading,

src/components/card/CardSidebarTabDetails.vue

@@ -27,7 +27,7 @@
 				<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
 			</div>
 			<div class="section-details">
-				<Multiselect v-model="assignedLabels"
+				<NcMultiselect v-model="assignedLabels"
 					:multiple="true"
 					:disabled="!canEdit"
 					:options="labelsSorted"
@@ -47,7 +47,7 @@
 							{{ scope.option.title }}
 						</div>
 					</template>
-				</Multiselect>
+				</NcMultiselect>
 			</div>
 		</div>
 
@@ -56,7 +56,7 @@
 				<span class="hidden-visually">{{ t('deck', 'Assign to users/groups/circles') }}</span>
 			</div>
 			<div class="section-details">
-				<Multiselect v-if="canEdit"
+				<NcMultiselect v-if="canEdit"
 					v-model="assignedUsers"
 					:multiple="true"
 					:options="formatedAssignables"
@@ -69,16 +69,16 @@
 					@remove="removeUserFromCard">
 					<template #tag="scope">
 						<div class="avatarlist--inline">
-							<Avatar :user="scope.option.uid"
+							<NcAvatar :user="scope.option.uid"
 								:display-name="scope.option.displayname"
 								:size="24"
 								:is-no-user="scope.option.isNoUser"
 								:disable-menu="true" />
 						</div>
 					</template>
-				</Multiselect>
+				</NcMultiselect>
 				<div v-else class="avatar-list--readonly">
-					<Avatar v-for="option in assignedUsers"
+					<NcAvatar v-for="option in assignedUsers"
 						:key="option.primaryKey"
 						:user="option.uid"
 						:display-name="option.displayname"
@@ -93,7 +93,7 @@
 				<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
 			</div>
 			<div class="section-details">
-				<DatetimePicker v-model="duedate"
+				<NcDatetimePicker v-model="duedate"
 					:placeholder="t('deck', 'Set a due date')"
 					type="datetime"
 					:minute-step="5"
@@ -103,11 +103,11 @@
 					:disabled="saving || !canEdit"
 					:shortcuts="shortcuts"
 					confirm />
-				<Actions v-if="canEdit">
+				<NcActions v-if="canEdit">
-					<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
+					<NcActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
 						{{ t('deck', 'Remove due date') }}
-					</ActionButton>
+					</NcActionButton>
-				</Actions>
+				</NcActions>
 			</div>
 		</div>
 
@@ -125,7 +125,7 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { Avatar, Actions, ActionButton, Multiselect, DatetimePicker } from '@nextcloud/vue'
+import { NcAvatar, NcActions, NcActionButton, NcMultiselect, NcDatetimePicker } from '@nextcloud/vue'
 import { loadState } from '@nextcloud/initial-state'
 
 import { CollectionList } from 'nextcloud-vue-collections'
@@ -142,11 +142,11 @@ export default {
 	name: 'CardSidebarTabDetails',
 	components: {
 		Description,
-		Multiselect,
+		NcMultiselect,
-		DatetimePicker,
+		NcDatetimePicker,
-		Actions,
+		NcActions,
-		ActionButton,
+		NcActionButton,
-		Avatar,
+		NcAvatar,
 		CollectionList,
 	},
 	mixins: [Color],

src/components/card/CommentForm.vue

@@ -29,12 +29,12 @@
 				name-key="displayname"
 				:tab-select="true">
 				<template #item="s">
-					<Avatar class="atwho-li--avatar" :user="s.item.uid" :size="24" />
+					<NcAvatar class="atwho-li--avatar" :user="s.item.uid" :size="24" />
 					<span class="atwho-li--name" v-text="s.item.displayname" />
 				</template>
 				<template #embeddedItem="scope">
 					<span>
-						<UserBubble v-if="scope.current.uid"
+						<NcUserBubble v-if="scope.current.uid"
 							:data-mention-id="scope.current.uid"
 							:user="scope.current.uid"
 							:display-name="scope.current.displayname" />
@@ -63,7 +63,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import { UserBubble, Avatar } from '@nextcloud/vue'
+import { NcUserBubble, NcAvatar } from '@nextcloud/vue'
 import At from 'vue-at'
 import { rawToParsed } from '../../helpers/mentions'
 
@@ -71,8 +71,8 @@ export default {
 	name: 'CommentForm',
 	components: {
 		At,
-		Avatar,
+		NcAvatar,
-		UserBubble,
+		NcUserBubble,
 	},
 	props: {
 		value: {

src/components/card/CommentItem.vue

@@ -4,13 +4,13 @@
 			<div class="reply--header">
 				<div class="reply--hint">
 					{{ t('deck', 'In reply to') }}
-					<UserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
+					<NcUserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
 				</div>
-				<Actions v-if="preview" class="reply--cancel">
+				<NcActions v-if="preview" class="reply--cancel">
-					<ActionButton icon="icon-close" @click="$emit('cancel')">
+					<NcActionButton icon="icon-close" @click="$emit('cancel')">
 						{{ t('deck', 'Cancel reply') }}
-					</ActionButton>
+					</NcActionButton>
-				</Actions>
+				</NcActions>
 			</div>
 			<RichText class="comment--content"
 				:text="richText(comment)"
@@ -20,33 +20,33 @@
 	</div>
 	<li v-else class="comment">
 		<div class="comment--header">
-			<Avatar :user="comment.actorId" />
+			<NcAvatar :user="comment.actorId" />
 			<span class="has-tooltip username">
 				{{ comment.actorDisplayName }}
 			</span>
-			<Actions v-show="!edit" :force-menu="true">
+			<NcActions v-show="!edit" :force-menu="true">
-				<ActionButton :close-after-click="true" @click="replyTo()">
+				<NcActionButton :close-after-click="true" @click="replyTo()">
 					<template #icon>
 						<ReplyIcon decorative />
 					</template>
 					{{ t('deck', 'Reply') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton v-if="canEdit"
+				<NcActionButton v-if="canEdit"
 					icon="icon-rename"
 					:close-after-click="true"
 					@click="showUpdateForm()">
 					{{ t('deck', 'Update') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton v-if="canEdit"
+				<NcActionButton v-if="canEdit"
 					icon="icon-delete"
 					:close-after-click="true"
 					@click="deleteComment()">
 					{{ t('deck', 'Delete') }}
-				</ActionButton>
+				</NcActionButton>
-			</Actions>
+			</NcActions>
-			<Actions v-if="edit">
+			<NcActions v-if="edit">
-				<ActionButton icon="icon-close" @click="hideUpdateForm" />
+				<NcActionButton icon="icon-close" @click="hideUpdateForm" />
-			</Actions>
+			</NcActions>
 			<div class="spacer" />
 			<div class="timestamp">
 				{{ relativeDate(comment.creationDateTime) }}
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import { Avatar, Actions, ActionButton, UserBubble } from '@nextcloud/vue'
+import { NcAvatar, NcActions, NcActionButton, NcUserBubble } from '@nextcloud/vue'
 import RichText from '@juliushaertl/vue-richtext'
 import CommentForm from './CommentForm'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -80,7 +80,7 @@ const AtMention = {
 		return createElement(
 			'span',
 			{ attrs: { 'data-at-embedded': true, contenteditable: false } },
-			[createElement(UserBubble, { props: { user, displayName }, attrs: { 'data-mention-id': user } })]
+			[createElement(NcUserBubble, { props: { user, displayName }, attrs: { 'data-mention-id': user } })]
 		)
 	},
 }
@@ -88,10 +88,10 @@ const AtMention = {
 export default {
 	name: 'CommentItem',
 	components: {
-		Avatar,
+		NcAvatar,
-		UserBubble,
+		NcUserBubble,
-		Actions,
+		NcActions,
-		ActionButton,
+		NcActionButton,
 		CommentForm,
 		RichText,
 		ReplyIcon,

src/components/card/Description.vue

@@ -30,22 +30,22 @@
 				href="https://deck.readthedocs.io/en/latest/Markdown/"
 				target="_blank"
 				class="icon icon-info" />
-			<Actions v-if="canEdit">
+			<NcActions v-if="canEdit">
-				<ActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
+				<NcActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
 					{{ t('deck', 'Edit description') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton v-else icon="icon-toggle" @click="hideEditor()">
+				<NcActionButton v-else icon="icon-toggle" @click="hideEditor()">
 					{{ t('deck', 'View description') }}
-				</ActionButton>
+				</NcActionButton>
-			</Actions>
+			</NcActions>
-			<Actions v-if="canEdit">
+			<NcActions v-if="canEdit">
-				<ActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
+				<NcActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
 					<template #icon>
 						<PaperclipIcon :size="24" decorative />
 					</template>
 					{{ t('deck', 'Add Attachment') }}
-				</ActionButton>
+				</NcActionButton>
-			</Actions>
+			</NcActions>
 		</h5>
 
 		<div v-if="!descriptionEditing && hasDescription"
@@ -63,14 +63,14 @@
 			@update:modelValue="updateDescription"
 			@blur="saveDescription" />
 
-		<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
+		<NcModal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
 			<div class="modal__content">
 				<h3>{{ t('deck', 'Choose attachment') }}</h3>
 				<AttachmentList :card-id="card.id"
 					:selectable="true"
 					@select-attachment="addAttachment" />
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
@@ -79,7 +79,7 @@ import MarkdownIt from 'markdown-it'
 import MarkdownItTaskCheckbox from 'markdown-it-task-checkbox'
 import MarkdownItLinkAttributes from 'markdown-it-link-attributes'
 import AttachmentList from './AttachmentList'
-import { Actions, ActionButton, Modal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
 import { mapState, mapGetters } from 'vuex'
@@ -101,9 +101,9 @@ export default {
 	name: 'Description',
 	components: {
 		VueEasymde: () => import('vue-easymde/dist/VueEasyMDE.common'),
-		Actions,
+		NcActions,
-		ActionButton,
+		NcActionButton,
-		Modal,
+		NcModal,
 		AttachmentList,
 		PaperclipIcon,
 	},

src/components/cards/AvatarList.vue

@@ -27,20 +27,20 @@
 				<div class="avatardiv icon-more" />
 			</div>
 			<div v-for="user in firstUsers" :key="user.id">
-				<Avatar v-if="user.type === 0"
+				<NcAvatar v-if="user.type === 0"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:disable-menu="true"
 					:show-user-status="false"
 					:size="32" />
-				<Avatar v-if="user.type === 1"
+				<NcAvatar v-if="user.type === 1"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Group)')"
 					:is-no-user="true"
 					:disable-="true"
 					:size="32" />
-				<Avatar v-if="user.type === 7"
+				<NcAvatar v-if="user.type === 7"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Circle)')"
@@ -51,13 +51,13 @@
 		</div>
 
 		<div v-show="popoverVisible" class="popovermenu menu-right">
-			<PopoverMenu :menu="popover" />
+			<NcPopoverMenu :menu="popover" />
 			<slot />
 		</div>
 
 		<div class="avatar-print-list">
 			<div v-for="user in avatarUsers" :key="user.id" class="avatar-print-list-item">
-				<Avatar class="avatar-print-list-avatar"
+				<NcAvatar class="avatar-print-list-avatar"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:disable-menu="true"
@@ -70,14 +70,14 @@
 </template>
 
 <script>
-import { Avatar, PopoverMenu, Tooltip } from '@nextcloud/vue'
+import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'AvatarList',
 	components: {
-		Avatar,
+		NcAvatar,
-		PopoverMenu,
+		NcPopoverMenu,
 	},
 	directives: {
 		tooltip: Tooltip,

src/components/cards/CardBadges.vue

@@ -43,13 +43,13 @@
 			<span>{{ card.attachmentCount }}</span>
 		</div>
 
-		<AvatarList :users="card.assignedUsers" />
+		<NcAvatarList :users="card.assignedUsers" />
 
 		<CardMenu class="card-menu" :card="card" />
 	</div>
 </template>
 <script>
-import AvatarList from './AvatarList'
+import NcAvatarList from './AvatarList'
 import CardMenu from './CardMenu'
 import TextIcon from 'vue-material-design-icons/Text.vue'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
@@ -59,7 +59,7 @@ import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
 
 export default {
 	name: 'CardBadges',
-	components: { AvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
+	components: { NcAvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
 	props: {
 		card: {
 			type: Object,

src/components/cards/CardMenu.vue

@@ -23,50 +23,50 @@
 <template>
 	<div v-if="card">
 		<div @click.stop.prevent>
-			<Actions>
+			<NcActions>
-				<ActionButton v-if="showArchived === false && !isCurrentUserAssigned"
+				<NcActionButton v-if="showArchived === false && !isCurrentUserAssigned"
 					icon="icon-user"
 					:close-after-click="true"
 					@click="assignCardToMe()">
 					{{ t('deck', 'Assign to me') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton v-if="showArchived === false && isCurrentUserAssigned"
+				<NcActionButton v-if="showArchived === false && isCurrentUserAssigned"
 					icon="icon-user"
 					:close-after-click="true"
 					@click="unassignCardFromMe()">
 					{{ t('deck', 'Unassign myself') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton icon="icon-external" :close-after-click="true" @click="modalShow=true">
+				<NcActionButton icon="icon-external" :close-after-click="true" @click="modalShow=true">
 					{{ t('deck', 'Move card') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
+				<NcActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
 					<CardBulletedIcon slot="icon" :size="20" decorative />
 					{{ t('deck', 'Card details') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton :close-after-click="true" @click="archiveUnarchiveCard()">
+				<NcActionButton :close-after-click="true" @click="archiveUnarchiveCard()">
 					<template #icon>
 						<ArchiveIcon :size="20" decorative />
 					</template>
 					{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton v-if="showArchived === false"
+				<NcActionButton v-if="showArchived === false"
 					icon="icon-delete"
 					:close-after-click="true"
 					@click="deleteCard()">
 					{{ t('deck', 'Delete card') }}
-				</ActionButton>
+				</NcActionButton>
-			</Actions>
+			</NcActions>
 		</div>
-		<Modal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
+		<NcModal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
 			<div class="modal__content">
 				<h3>{{ t('deck', 'Move card to another board') }}</h3>
-				<Multiselect v-model="selectedBoard"
+				<NcMultiselect v-model="selectedBoard"
 					:placeholder="t('deck', 'Select a board')"
 					:options="activeBoards"
 					:max-height="100"
 					label="title"
 					@select="loadStacksFromBoard" />
-				<Multiselect v-model="selectedStack"
+				<NcMultiselect v-model="selectedStack"
 					:placeholder="t('deck', 'Select a list')"
 					:options="stacksFromBoard"
 					:max-height="100"
@@ -74,7 +74,7 @@
 					<span slot="noOptions">
 						{{ t('deck', 'List is empty') }}
 					</span>
-				</Multiselect>
+				</NcMultiselect>
 
 				<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
 					{{ t('deck', 'Move card') }}
@@ -83,11 +83,11 @@
 					{{ t('deck', 'Cancel') }}
 				</button>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 <script>
-import { Modal, Actions, ActionButton, Multiselect } from '@nextcloud/vue'
+import { NcModal, NcActions, NcActionButton, NcMultiselect } from '@nextcloud/vue'
 import { mapGetters, mapState } from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
@@ -99,7 +99,7 @@ import CardBulletedIcon from 'vue-material-design-icons/CardBulleted'
 
 export default {
 	name: 'CardMenu',
-	components: { Actions, ActionButton, Modal, Multiselect, ArchiveIcon, CardBulletedIcon },
+	components: { NcActions, NcActionButton, NcModal, NcMultiselect, ArchiveIcon, CardBulletedIcon },
 	props: {
 		card: {
 			type: Object,

src/components/icons/DeckIcon.vue

@@ -0,0 +1,19 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :height="size" :width="size" version="1.1" viewBox="0 0 16 16">
+        <rect ry="1" height="8" width="14" y="7" x="1"/>
+        <rect ry=".5" height="1" width="12" y="5" x="2"/>
+        <rect ry=".5" height="1" width="10" y="3" x="3"/>
+        <rect ry=".5" height="1" width="8" y="1" x="4"/>
+    </svg>
+</template>
+<script>
+export default {
+    name: 'DeckIcon',
+    props: {
+        size: {
+            type: Number,
+            default: 16,
+        },
+    },
+}
+</script>

src/components/navigation/AppNavigation.vue

@@ -21,18 +21,25 @@
   -->
 
 <template>
-	<AppNavigationVue :class="{'icon-loading': loading}">
+	<NcAppNavigation :class="{'icon-loading': loading}">
 		<template #list>
-			<AppNavigationItem :title="t('deck', 'Upcoming cards')"
+			<NcAppNavigationItem :title="t('deck', 'Upcoming cards')"
-				icon="icon-calendar-dark"
 				:exact="true"
-				to="/" />
+				to="/">
+				<template #icon>
+					<CalendarIcon :size="20" />
+				</template>
+			</NcAppNavigationItem>
 			<AppNavigationBoardCategory id="deck-navigation-all"
 				to="/board"
 				:text="t('deck', 'All boards')"
 				:boards="noneArchivedBoards"
 				:open-on-add-boards="true"
-				icon="icon-deck" />
+				icon="icon-deck">
+				<template #icon>
+					<DeckIcon :size="16" />
+				</template>
+			</AppNavigationBoardCategory>
 			<AppNavigationBoardCategory id="deck-navigation-archived"
 				to="/board/archived"
 				:text="t('deck', 'Archived boards')"
@@ -45,11 +52,15 @@
 				to="/board/shared"
 				:text="t('deck', 'Shared with you')"
 				:boards="sharedBoards"
-				icon="icon-shared" />
+				icon="icon-shared">
+				<template #icon>
+					<ShareVariantIcon :size="20" decorative />
+				</template>
+			</AppNavigationBoardCategory>
 			<AppNavigationAddBoard v-if="canCreate" />
 		</template>
 		<template #footer>
-			<AppNavigationSettings :title="t('deck', 'Deck settings')">
+			<NcAppNavigationSettings :title="t('deck', 'Deck settings')">
 				<div>
 					<div>
 						<input id="toggle-modal"
@@ -71,7 +82,7 @@
 						</label>
 					</div>
 
-					<Multiselect v-if="isAdmin"
+					<NcMultiselect v-if="isAdmin"
 						v-model="groupLimit"
 						:class="{'icon-loading-small': groupLimitDisabled}"
 						open-direction="bottom"
@@ -86,35 +97,41 @@
 						{{ t('deck', 'Limiting Deck will block users not part of those groups from creating their own boards. Users will still be able to work on boards that have been shared with them.') }}
 					</p>
 				</div>
-			</AppNavigationSettings>
+			</NcAppNavigationSettings>
 		</template>
-	</AppNavigationVue>
+	</NcAppNavigation>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
 import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
-import { AppNavigation as AppNavigationVue, AppNavigationItem, AppNavigationSettings, Multiselect } from '@nextcloud/vue'
+import { NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings, NcMultiselect } from '@nextcloud/vue'
 import AppNavigationAddBoard from './AppNavigationAddBoard'
 import AppNavigationBoardCategory from './AppNavigationBoardCategory'
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
-import ArchiveIcon from 'vue-material-design-icons/Archive'
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import CalendarIcon from 'vue-material-design-icons/Calendar.vue'
+import DeckIcon from './../icons/DeckIcon.vue'
+import ShareVariantIcon from 'vue-material-design-icons/Share.vue'
 
 const canCreateState = loadState('deck', 'canCreate')
 
 export default {
 	name: 'AppNavigation',
 	components: {
-		AppNavigationVue,
+		NcAppNavigation,
-		AppNavigationSettings,
+		NcAppNavigationSettings,
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
-		Multiselect,
+		NcMultiselect,
-		AppNavigationItem,
+		NcAppNavigationItem,
 		ArchiveIcon,
+		CalendarIcon,
+		DeckIcon,
+		ShareVariantIcon,
 	},
 	directives: {
 		ClickOutside,

src/components/navigation/AppNavigationAddBoard.vue

@@ -20,24 +20,24 @@
   -
   -->
 <template>
-	<AppNavigationItem v-if="!editing"
+	<NcAppNavigationItem v-if="!editing"
 		:title="t('deck', 'Add board')"
 		icon="icon-add"
 		@click.prevent.stop="startCreateBoard" />
 	<div v-else class="board-create">
-		<ColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
+		<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
 			<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
-		</ColorPicker>
+		</NcColorPicker>
 		<form @submit.prevent.stop="createBoard">
 			<input :placeholder="t('deck', 'Board name')" type="text" required>
 			<input type="submit" value="" class="icon-confirm">
-			<Actions><ActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></Actions>
+			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
 		</form>
 	</div>
 </template>
 
 <script>
-import { ColorPicker, ActionButton, Actions, AppNavigationItem } from '@nextcloud/vue'
+import { NcColorPicker, NcActionButton, NcActions, NcAppNavigationItem } from '@nextcloud/vue'
 
 /**
  *
@@ -52,7 +52,7 @@ function randomColor() {
 
 export default {
 	name: 'AppNavigationAddBoard',
-	components: { ColorPicker, AppNavigationItem, ActionButton, Actions },
+	components: { NcColorPicker, NcAppNavigationItem, NcActionButton, NcActions },
 	directives: {},
 	props: {},
 	data() {

src/components/navigation/AppNavigationBoard.vue

@@ -20,124 +20,124 @@
   -
   -->
 <template>
-	<AppNavigationItem v-if="!editing"
+	<NcAppNavigationItem v-if="!editing"
 		:title="!deleted ? board.title : undoText"
 		:loading="loading"
 		:to="routeTo"
 		:undo="deleted"
 		@undo="unDelete">
-		<AppNavigationIconBullet slot="icon" :color="board.color" />
+		<NcAppNavigationIconBullet slot="icon" :color="board.color" />
 
-		<AppNavigationCounter v-if="board.acl.length"
+		<NcAppNavigationCounter v-if="board.acl.length"
 			slot="counter"
 			class="icon-shared"
 			style="opacity: 0.5" />
 
 		<template v-if="!deleted" slot="actions">
 			<template v-if="!isDueSubmenuActive">
-				<ActionButton icon="icon-info"
+				<NcActionButton icon="icon-info"
 					:close-after-click="true"
 					@click="actionDetails">
 					{{ t('deck', 'Board details') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton v-if="canManage && !board.archived"
+				<NcActionButton v-if="canManage && !board.archived"
 					icon="icon-rename"
 					:close-after-click="true"
 					@click="actionEdit">
 					{{ t('deck', 'Edit board') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton v-if="canManage && !board.archived"
+				<NcActionButton v-if="canManage && !board.archived"
 					:close-after-click="true"
 					@click="actionClone">
 					<template #icon>
 						<CloneIcon :size="20" decorative />
 					</template>
 					{{ t('deck', 'Clone board') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton v-if="canManage && board.archived"
+				<NcActionButton v-if="canManage && board.archived"
 					:close-after-click="true"
 					@click="actionUnarchive">
 					<template #icon>
 						<ArchiveIcon :size="20" decorative />
 					</template>
 					{{ t('deck', 'Unarchive board') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton v-else-if="canManage && !board.archived"
+				<NcActionButton v-else-if="canManage && !board.archived"
 					:close-after-click="true"
 					@click="actionArchive">
 					<template #icon>
 						<ArchiveIcon :size="20" decorative />
 					</template>
 					{{ t('deck', 'Archive board') }}
-				</ActionButton>
+				</NcActionButton>
 
-				<ActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
+				<NcActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
 					{{ board.settings['notify-due'] === 'off' ? t('deck', 'Turn on due date reminders') : t('deck', 'Turn off due date reminders') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
 
 			<!-- Due date reminder settings -->
 			<template v-if="isDueSubmenuActive">
-				<ActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
+				<NcActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
 					:disabled="updateDueSetting"
 					@click="isDueSubmenuActive=false">
 					{{ t('deck', 'Due date reminders') }}
-				</ActionButton>
+				</NcActionButton>
 
-				<ActionButton name="notification"
+				<NcActionButton name="notification"
 					icon="icon-sound"
 					:disabled="updateDueSetting"
 					:class="{ 'forced-active': board.settings['notify-due'] === 'all' }"
 					@click="updateSetting('notify-due', 'all')">
 					{{ t('deck', 'All cards') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton name="notification"
+				<NcActionButton name="notification"
 					icon="icon-user"
 					:disabled="updateDueSetting"
 					:class="{ 'forced-active': board.settings['notify-due'] === 'assigned' }"
 					@click="updateSetting('notify-due', 'assigned')">
 					{{ t('deck', 'Assigned cards') }}
-				</ActionButton>
+				</NcActionButton>
-				<ActionButton name="notification"
+				<NcActionButton name="notification"
 					icon="icon-sound-off"
 					:disabled="updateDueSetting"
 					:class="{ 'forced-active': board.settings['notify-due'] === 'off' }"
 					@click="updateSetting('notify-due', 'off')">
 					{{ t('deck', 'No notifications') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
-			<ActionButton v-else-if="!board.archived && board.acl.length > 0"
+			<NcActionButton v-else-if="!board.archived && board.acl.length > 0"
 				:title="t('deck', 'Due date reminders')"
 				:icon="dueDateReminderIcon"
 				@click="isDueSubmenuActive=true">
 				{{ dueDateReminderText }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionButton v-if="canManage && !isDueSubmenuActive"
+			<NcActionButton v-if="canManage && !isDueSubmenuActive"
 				icon="icon-delete"
 				:close-after-click="true"
 				@click="actionDelete">
 				{{ t('deck', 'Delete board') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 	<div v-else-if="editing" class="board-edit">
-		<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
+		<NcColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
 			<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
-		</ColorPicker>
+		</NcColorPicker>
 		<form @submit.prevent.stop="applyEdit">
 			<input v-model="editTitle"
 				v-focus
 				type="text"
 				required>
 			<input type="submit" value="" class="icon-confirm">
-			<Actions><ActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></Actions>
+			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
 		</form>
 	</div>
 </template>
 
 <script>
-import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
+import { NcAppNavigationIconBullet, NcAppNavigationCounter, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import ArchiveIcon from 'vue-material-design-icons/Archive'
 import CloneIcon from 'vue-material-design-icons/ContentDuplicate'
@@ -145,12 +145,12 @@ import CloneIcon from 'vue-material-design-icons/ContentDuplicate'
 export default {
 	name: 'AppNavigationBoard',
 	components: {
-		AppNavigationIconBullet,
+		NcAppNavigationIconBullet,
-		AppNavigationCounter,
+		NcAppNavigationCounter,
-		AppNavigationItem,
+		NcAppNavigationItem,
-		ColorPicker,
+		NcColorPicker,
-		Actions,
+		NcActions,
-		ActionButton,
+		NcActionButton,
 		ArchiveIcon,
 		CloneIcon,
 	},

src/components/navigation/AppNavigationBoardCategory.vue

@@ -20,9 +20,8 @@
   -
   -->
 <template>
-	<AppNavigationItem v-if="boards.length > 0"
+	<NcAppNavigationItem v-if="boards.length > 0"
 		:title="text"
-		:icon="icon"
 		:to="to"
 		:exact="true"
 		:allow-collapse="collapsible"
@@ -31,17 +30,17 @@
 		<template #icon>
 			<slot name="icon" />
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>
 
 <script>
 import AppNavigationBoard from './AppNavigationBoard'
-import { AppNavigationItem } from '@nextcloud/vue'
+import { NcAppNavigationItem } from '@nextcloud/vue'
 
 export default {
 	name: 'AppNavigationBoardCategory',
 	components: {
-		AppNavigationItem,
+		NcAppNavigationItem,
 		AppNavigationBoard,
 	},
 	props: {
@@ -57,10 +56,6 @@ export default {
 			type: String,
 			required: true,
 		},
-		icon: {
-			type: String,
-			required: true,
-		},
 		boards: {
 			type: Array,
 			required: true,

src/components/search/GlobalSearchResults.vue

@@ -26,9 +26,9 @@
 			<RichText :text="t('deck', 'Search for {searchQuery} in all boards')" :arguments="queryStringArgs" />
 			<div v-if="loading" class="icon-loading-small" />
 		</h2>
-		<Actions>
+		<NcActions>
-			<ActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
+			<NcActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
-		</Actions>
+		</NcActions>
 		<div class="search-wrapper">
 			<div v-if="loading || filteredResults.length > 0" class="search-results">
 				<CardItem v-for="card in filteredResults"
@@ -59,7 +59,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 import InfiniteLoading from 'vue-infinite-loading'
 import RichText from '@juliushaertl/vue-richtext'
 import Placeholder from './Placeholder'
-import { Actions, ActionButton } from '@nextcloud/vue'
+import { NcActions, NcActionButton } from '@nextcloud/vue'
 
 const createCancelToken = () => axios.CancelToken.source()
 
@@ -88,7 +88,7 @@ function search({ query, cursor }) {
 
 export default {
 	name: 'GlobalSearchResults',
-	components: { CardItem, InfiniteLoading, RichText, Placeholder, Actions, ActionButton },
+	components: { CardItem, InfiniteLoading, RichText, Placeholder, NcActions, NcActionButton },
 	data() {
 		return {
 			results: [],

src/main.js

@@ -76,6 +76,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
 /* eslint-disable-next-line no-new */
 new Vue({
+	name: 'Deck',
 	el: '#content',
 	router,
 	store,

src/views/Dashboard.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<div>
-		<DashboardWidget :items="cards"
+		<NcDashboardWidget :items="cards"
 			empty-content-icon="icon-deck"
 			:empty-content-message="t('deck', 'No upcoming cards')"
 			:show-more-text="t('deck', 'upcoming cards')"
@@ -46,7 +46,7 @@
 					</ul>
 				</a>
 			</template>
-		</DashboardWidget>
+		</NcDashboardWidget>
 		<div class="center-button">
 			<button @click="toggleAddCardModel">
 				{{ t('deck', 'Add card') }}
@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import { DashboardWidget } from '@nextcloud/vue-dashboard'
+import { NcDashboardWidget } from '@nextcloud/vue'
 import { mapGetters } from 'vuex'
 import labelStyle from './../mixins/labelStyle'
 import DueDate from '../components/cards/badges/DueDate'
@@ -68,7 +68,7 @@ export default {
 	name: 'Dashboard',
 	components: {
 		DueDate,
-		DashboardWidget,
+		NcDashboardWidget,
 		CardCreateDialog,
 	},
 	mixins: [labelStyle],