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

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

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')"
-				icon="icon-calendar-dark"
+			<NcAppNavigationItem :title="t('deck', 'Upcoming cards')"
 				: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,
-		AppNavigationSettings,
+		NcAppNavigation,
+		NcAppNavigationSettings,
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
-		Multiselect,
-		AppNavigationItem,
+		NcMultiselect,
+		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>
-				<ActionButton v-if="canManage && !board.archived"
+				</NcActionButton>
+				<NcActionButton v-if="canManage && !board.archived"
 					icon="icon-rename"
 					:close-after-click="true"
 					@click="actionEdit">
 					{{ t('deck', 'Edit board') }}
-				</ActionButton>
-				<ActionButton v-if="canManage && !board.archived"
+				</NcActionButton>
+				<NcActionButton v-if="canManage && !board.archived"
 					:close-after-click="true"
 					@click="actionClone">
 					<template #icon>
 						<CloneIcon :size="20" decorative />
 					</template>
 					{{ t('deck', 'Clone board') }}
-				</ActionButton>
-				<ActionButton v-if="canManage && board.archived"
+				</NcActionButton>
+				<NcActionButton v-if="canManage && board.archived"
 					:close-after-click="true"
 					@click="actionUnarchive">
 					<template #icon>
 						<ArchiveIcon :size="20" decorative />
 					</template>
 					{{ t('deck', 'Unarchive board') }}
-				</ActionButton>
-				<ActionButton v-else-if="canManage && !board.archived"
+				</NcActionButton>
+				<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>
-				<ActionButton name="notification"
+				</NcActionButton>
+				<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>
-				<ActionButton name="notification"
+				</NcActionButton>
+				<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,
-		AppNavigationCounter,
-		AppNavigationItem,
-		ColorPicker,
-		Actions,
-		ActionButton,
+		NcAppNavigationIconBullet,
+		NcAppNavigationCounter,
+		NcAppNavigationItem,
+		NcColorPicker,
+		NcActions,
+		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,