Nextcloud/vue 6.0.0 beta.3

package.json

@@ -29,7 +29,7 @@
 		"@nextcloud/moment": "^1.2.1",
 		"@nextcloud/paths": "^2.1.0",
 		"@nextcloud/router": "^2.0.0",
-		"@nextcloud/vue": "^6.0.0-beta.2",
+		"@nextcloud/vue": "^6.0.0-beta.3",
 		"@nextcloud/vue-dashboard": "^2.0.1",
 		"attachmediastream": "^2.1.0",
 		"color.js": "^1.2.0",

src/App.vue

@@ -20,27 +20,27 @@
 -->
 
 <template>
-	<ContentVue v-shortkey.once="['ctrl', 'f']"
+	<NcContent v-shortkey.once="['ctrl', 'f']"
 		:class="{ 'icon-loading': loading, 'in-call': isInCall }"
 		app-name="talk"
 		@shortkey.native="handleAppSearch">
 		<LeftSidebar v-if="getUserId && !isFullscreen" />
-		<AppContent>
+		<NcAppContent>
 			<router-view />
-		</AppContent>
+		</NcAppContent>
 		<RightSidebar :show-chat-in-sidebar="isInCall" />
 		<PreventUnload :when="warnLeaving || isSendingMessages" />
 		<DeviceChecker :initialize-on-mounted="false" />
 		<UploadEditor />
 		<SettingsDialog />
 		<ConversationSettingsDialog />
-	</ContentVue>
+	</NcContent>
 </template>
 
 <script>
 import debounce from 'debounce'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent.js'
-import ContentVue from '@nextcloud/vue/dist/Components/Content.js'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import LeftSidebar from './components/LeftSidebar/LeftSidebar.vue'
 import PreventUnload from 'vue-prevent-unload'
 import Router from './router/router.js'
@@ -71,8 +71,8 @@ import DeviceChecker from './components/DeviceChecker/DeviceChecker.vue'
 export default {
 	name: 'App',
 	components: {
-		AppContent,
-		ContentVue,
+		NcAppContent,
+		NcContent,
 		LeftSidebar,
 		PreventUnload,
 		RightSidebar,

src/FilesSidebarTabApp.vue

@@ -27,16 +27,16 @@
 			<div class="icon icon-talk" />
 			<h2>{{ t('spreed', 'Discuss this file') }}</h2>
 			<p>{{ t('spreed', 'Share this file with others to discuss it') }}</p>
-			<ButtonVue type="primary" @click="openSharingTab">
+			<NcButton type="primary" @click="openSharingTab">
 				{{ t('spreed', 'Share this file') }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 		<div v-else-if="isTalkSidebarSupportedForFile && !token" class="emptycontent room-not-joined">
 			<div class="icon icon-talk" />
 			<h2>{{ t('spreed', 'Discuss this file') }}</h2>
-			<ButtonVue type="primary" @click="joinConversation">
+			<NcButton type="primary" @click="joinConversation">
 				{{ t('spreed', 'Join conversation') }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 		<template v-else>
 			<CallButton class="call-button" />
@@ -66,7 +66,7 @@ import sessionIssueHandler from './mixins/sessionIssueHandler.js'
 import browserCheck from './mixins/browserCheck.js'
 import '@nextcloud/dialogs/styles/toast.scss'
 import DeviceChecker from './components/DeviceChecker/DeviceChecker.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 
@@ -77,7 +77,7 @@ export default {
 		ChatView,
 		UploadEditor,
 		DeviceChecker,
-		ButtonVue,
+		NcButton,
 	},
 
 	mixins: [

src/PublicShareAuthRequestPasswordButton.vue

@@ -23,14 +23,14 @@
 		<!-- "submit-wrapper" is used to mimic the login button and thus get
 			automatic colouring of the confirm icon by the Theming app. -->
 		<div id="submit-wrapper" class="request-password-wrapper">
-			<ButtonVue id="request-password-button"
+			<NcButton id="request-password-button"
 				type="primary"
 				:wide="true"
 				:disabled="isRequestInProgress"
 				@click="requestPassword"
 				@keydown.enter="requestPassword">
 				{{ t('spreed', 'Request password') }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 		<p v-if="hasRequestFailed" class="warning error-message">
 			{{ t('spreed', 'Error requesting the password.') }}
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { getPublicShareAuthConversationToken } from './services/publicShareAuthService.js'
 import browserCheck from './mixins/browserCheck.js'
 import '@nextcloud/dialogs/styles/toast.scss'
@@ -49,7 +49,7 @@ export default {
 	name: 'PublicShareAuthRequestPasswordButton',
 
 	components: {
-		ButtonVue,
+		NcButton,
 	},
 
 	mixins: [

src/PublicShareSidebar.vue

@@ -26,15 +26,15 @@
 			<div v-if="!conversation" class="emptycontent room-not-joined">
 				<div class="icon icon-talk" />
 				<h2>{{ t('spreed', 'Discuss this file') }}</h2>
-				<ButtonVue type="primary"
+				<NcButton type="primary"
 					class="button-centered"
 					:disabled="joiningConversation"
 					@click="joinConversation">
 					<template #icon>
 						<span v-if="joiningConversation" class="icon icon-loading-small" />
 					</template>
 					{{ t('spreed', 'Join conversation') }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 			<template v-else>
 				<TopBar v-if="isInCall"
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import PreventUnload from 'vue-prevent-unload'
 import { loadState } from '@nextcloud/initial-state'
 import CallView from './components/CallView/CallView.vue'
@@ -79,7 +79,7 @@ export default {
 	name: 'PublicShareSidebar',
 
 	components: {
-		ButtonVue,
+		NcButton,
 		CallButton,
 		CallView,
 		ChatView,

src/PublicShareSidebarTrigger.vue

@@ -20,26 +20,26 @@
 
 <template>
 	<div class="button-holder">
-		<ButtonVue type="tertiary-on-primary"
+		<NcButton type="tertiary-on-primary"
 			:aria-label="ariaLabel"
 			@click="$emit('click')">
 			<template #icon>
 				<MenuPeople :size="20" />
 			</template>
-		</ButtonVue>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import MenuPeople from './components/missingMaterialDesignIcons/MenuPeople.vue'
 
 export default {
 
 	name: 'PublicShareSidebarTrigger',
 
 	components: {
-		ButtonVue,
+		NcButton,
 		MenuPeople,
 	},
 

src/assets/variables.scss

@@ -51,7 +51,7 @@ $opacity_full: 1;
 $action-background-hover: rgba(127, 127, 127, .25);
 
 // various structure data used in the
-// `AppNavigation` component
+// `NcAppNavigation` component
 $header-height: 50px;
 $navigation-width: 300px;
 

src/components/AdminSettings/AllowedGroups.vue

@@ -34,7 +34,7 @@
 		</p>
 
 		<div class="allowed-groups-settings-content">
-			<Multiselect v-model="allowedGroups"
+			<NcMultiselect v-model="allowedGroups"
 				name="allow_groups_use_talk"
 				class="allowed-groups-select"
 				:options="groups"
@@ -50,16 +50,16 @@
 				label="displayname"
 				@search-change="searchGroup" />
 
-			<ButtonVue type="primary"
+			<NcButton type="primary"
 				:disabled="loading"
 				@click="saveAllowedGroups">
 				{{ saveLabelAllowedGroups }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 
 		<h3>{{ t('spreed', 'Limit creating a public and group conversation') }}</h3>
 		<div class="allowed-groups-settings-content">
-			<Multiselect v-model="canStartConversations"
+			<NcMultiselect v-model="canStartConversations"
 				name="allow_groups_start_conversation"
 				class="allowed-groups-select"
 				:options="groups"
@@ -75,16 +75,16 @@
 				label="displayname"
 				@search-change="searchGroup" />
 
-			<ButtonVue type="primary"
+			<NcButton type="primary"
 				:disabled="loading"
 				@click="saveStartConversationsGroups">
 				{{ saveLabelStartConversations }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 
 		<h3>{{ t('spreed', 'Limit starting a call') }}</h3>
 		<div class="allowed-groups-settings-content">
-			<Multiselect id="start_calls"
+			<NcMultiselect id="start_calls"
 				v-model="startCalls"
 				name="allow_groups_start_calls"
 				:options="startCallOptions"
@@ -101,12 +101,12 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import { generateOcsUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 const startCallOptions = [
 	{ value: 0, label: t('spreed', 'Everyone') },
@@ -119,8 +119,8 @@ export default {
 	name: 'AllowedGroups',
 
 	components: {
-		Multiselect,
-		ButtonVue,
+		NcMultiselect,
+		NcButton,
 	},
 
 	data() {

src/components/AdminSettings/GeneralSettings.vue

@@ -28,7 +28,7 @@
 
 		<div class="paragraph">
 			<label for="default_group_notification">{{ t('spreed', 'Default group notification') }}</label>
-			<Multiselect id="default_group_notification"
+			<NcMultiselect id="default_group_notification"
 				v-model="defaultGroupNotification"
 				name="default_group_notification"
 				:options="defaultGroupNotificationOptions"
@@ -41,25 +41,25 @@
 
 		<h3>{{ t('spreed', 'Integration into other apps') }}</h3>
 
-		<CheckboxRadioSwitch :checked.sync="conversationsFiles"
+		<NcCheckboxRadioSwitch :checked.sync="conversationsFiles"
 			name="conversations_files"
 			:disabled="loading || loadingConversationsFiles"
 			@change="saveConversationsFiles">
 			{{ t('spreed', 'Allow conversations on files') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<CheckboxRadioSwitch :checked.sync="conversationsFilesPublicShares"
+		<NcCheckboxRadioSwitch :checked.sync="conversationsFilesPublicShares"
 			name="conversations_files_public_shares"
 			:disabled="loading || loadingConversationsFiles || !conversationsFiles"
 			@change="saveConversationsFilesPublicShares">
 			{{ t('spreed', 'Allow conversations on public shares for files') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import { loadState } from '@nextcloud/initial-state'
 
 const defaultGroupNotificationOptions = [
@@ -71,8 +71,8 @@ export default {
 	name: 'GeneralSettings',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	data() {