Add Nc prefix to Nc vue component names

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
nextcloud · Aug 22, 2022 · 793bbb9 · 793bbb9
1 parent 602f19a
commit 793bbb9
Show file tree

Hide file tree

Showing 70 changed files with 754 additions and 733 deletions.
diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
@@ -26,35 +26,35 @@
 		<!-- Comment header toolbar -->
 		<div class="comment__header">
 			<!-- Author -->
-			<Avatar class="comment__avatar"
+			<NcAvatar class="comment__avatar"
 				:display-name="actorDisplayName"
 				:user="actorId"
 				:size="32" />
 			<span class="comment__author">{{ actorDisplayName }}</span>
 
 			<!-- Comment actions,
 				show if we have a message id and current user is author -->
-			<Actions v-if="isOwnComment && id && !loading" class="comment__actions">
+			<NcActions v-if="isOwnComment && id && !loading" class="comment__actions">
 				<template v-if="!editing">
-					<ActionButton :close-after-click="true"
+					<NcActionButton :close-after-click="true"
 						icon="icon-rename"
 						@click="onEdit">
 						{{ t('comments', 'Edit comment') }}
-					</ActionButton>
-					<ActionSeparator />
-					<ActionButton :close-after-click="true"
+					</NcActionButton>
+					<NcActionSeparator />
+					<NcActionButton :close-after-click="true"
 						icon="icon-delete"
 						@click="onDeleteWithUndo">
 						{{ t('comments', 'Delete comment') }}
-					</ActionButton>
+					</NcActionButton>
 				</template>
 
-				<ActionButton v-else
+				<NcActionButton v-else
 					icon="icon-close"
 					@click="onEditCancel">
 					{{ t('comments', 'Cancel edit') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 
 			<!-- Show loading if we're editing or deleting, not on new ones -->
 			<div v-if="id && loading" class="comment_loading icon-loading-small" />
@@ -65,13 +65,13 @@
 
 		<!-- Message editor -->
 		<div v-if="editor || editing" class="comment__editor ">
-			<RichContenteditable ref="editor"
+			<NcRichContenteditable ref="editor"
 				:auto-complete="autoComplete"
 				:contenteditable="!loading"
 				:value="localMessage"
 				@update:value="updateLocalMessage"
 				@submit="onSubmit" />
-			<ButtonVue class="comment__submit"
+			<NcButton class="comment__submit"
 				type="tertiary-no-background"
 				native-type="submit"
 				:aria-label="t('comments', 'Post comment')"
@@ -81,7 +81,7 @@
 					<span v-if="loading" class="icon-loading-small" />
 					<ArrowRight v-else :size="20" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</div>
 
 		<!-- Message content -->
@@ -99,12 +99,12 @@
 import { getCurrentUser } from '@nextcloud/auth'
 import moment from '@nextcloud/moment'
 
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import RichContenteditable from '@nextcloud/vue/dist/Components/RichContenteditable'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable'
 import RichEditorMixin from '@nextcloud/vue/dist/Mixins/richEditor'
 import ArrowRight from 'vue-material-design-icons/ArrowRight'
 
@@ -115,14 +115,14 @@ export default {
 	name: 'Comment',
 
 	components: {
-		ActionButton,
-		Actions,
-		ActionSeparator,
+		NcActionButton,
+		NcActions,
+		NcActionSeparator,
 		ArrowRight,
-		Avatar,
-		ButtonVue,
+		NcAvatar,
+		NcButton,
 		Moment,
-		RichContenteditable,
+		NcRichContenteditable,
 	},
 	mixins: [RichEditorMixin, CommentMixin],
 

diff --git a/apps/comments/src/views/Comments.vue b/apps/comments/src/views/Comments.vue
@@ -31,9 +31,9 @@
 			@new="onNewComment" />
 
 		<template v-if="!isFirstLoading">
-			<EmptyContent v-if="!hasComments && done" icon="icon-comment">
+			<NcEmptyContent v-if="!hasComments && done" icon="icon-comment">
 				{{ t('comments', 'No comments yet, start the conversation!') }}
-			</EmptyContent>
+			</NcEmptyContent>
 
 			<!-- Comments -->
 			<Comment v-for="comment in comments"
@@ -55,14 +55,14 @@
 			</div>
 
 			<!-- Error message -->
-			<EmptyContent v-else-if="error" class="comments__error" icon="icon-error">
+			<NcEmptyContent v-else-if="error" class="comments__error" icon="icon-error">
 				{{ error }}
 				<template #desc>
 					<button icon="icon-history" @click="getComments">
 						{{ t('comments', 'Retry') }}
 					</button>
 				</template>
-			</EmptyContent>
+			</NcEmptyContent>
 		</template>
 	</div>
 </template>
@@ -75,7 +75,7 @@ import axios from '@nextcloud/axios'
 import VTooltip from 'v-tooltip'
 import Vue from 'vue'
 
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
 
 import Comment from '../components/Comment'
 import getComments, { DEFAULT_LIMIT } from '../services/GetComments'
@@ -89,7 +89,7 @@ export default {
 	components: {
 		// Avatar,
 		Comment,
-		EmptyContent,
+		NcEmptyContent,
 	},
 
 	data() {

diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
@@ -28,15 +28,15 @@
 		</Draggable>
 
 		<div class="footer">
-			<ButtonVue @click="showModal">
+			<NcButton @click="showModal">
 				<template #icon>
 					<Pencil :size="20" />
 				</template>
 				{{ t('dashboard', 'Customize') }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 
-		<Modal v-if="modal" size="large" @close="closeModal">
+		<NcModal v-if="modal" size="large" @close="closeModal">
 			<div class="modal__content">
 				<h3>{{ t('dashboard', 'Edit widgets') }}</h3>
 				<ol class="panels">
@@ -88,7 +88,7 @@
 					<a href="https://www.opentopodata.org/#public-api" target="_blank" rel="noopener">{{ t('dashboard', 'elevation data from OpenTopoData') }}</a>.
 				</p>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
@@ -97,9 +97,9 @@ import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import Draggable from 'vuedraggable'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Vue from 'vue'
 
@@ -129,9 +129,9 @@ export default {
 	name: 'DashboardApp',
 	components: {
 		BackgroundSettings,
-		ButtonVue,
+		NcButton,
 		Draggable,
-		Modal,
+		NcModal,
 		Pencil,
 	},
 	mixins: [

diff --git a/apps/dav/src/views/Availability.vue b/apps/dav/src/views/Availability.vue
@@ -1,12 +1,12 @@
 <template>
-	<SettingsSection :title="$t('dav', 'Availability')"
+	<NcSettingsSection :title="$t('dav', 'Availability')"
 		:description="$t('dav', 'If you configure your working hours, other users will see when you are out of office when they book a meeting.')">
 		<div class="time-zone">
 			<strong>
 				{{ $t('dav', 'Time zone:') }}
 			</strong>
 			<span class="time-zone-text">
-				<TimezonePicker v-model="timezone" />
+				<NcTimezonePicker v-model="timezone" />
 			</span>
 		</div>
 
@@ -24,16 +24,16 @@
 			:l10n-saturday="$t('dav', 'Saturday')"
 			:l10n-sunday="$t('dav', 'Sunday')" />
 
-		<CheckboxRadioSwitch :checked.sync="automated">
+		<NcCheckboxRadioSwitch :checked.sync="automated">
 			{{ $t('dav', 'Automatically set user status to "Do not disturb" outside of availability to mute all notifications.') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<ButtonVue :disabled="loading || saving"
+		<NcButton :disabled="loading || saving"
 			type="primary"
 			@click="save">
 			{{ $t('dav', 'Save') }}
-		</ButtonVue>
-	</SettingsSection>
+		</NcButton>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -53,19 +53,19 @@ import {
 	disableUserStatusAutomation,
 } from '../service/PreferenceService'
 import jstz from 'jstimezonedetect'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
-import TimezonePicker from '@nextcloud/vue/dist/Components/TimezonePicker'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcTimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker'
 
 export default {
 	name: 'Availability',
 	components: {
-		ButtonVue,
-		CheckboxRadioSwitch,
+		NcButton,
+		NcCheckboxRadioSwitch,
 		CalendarAvailability,
-		SettingsSection,
-		TimezonePicker,
+		NcSettingsSection,
+		NcTimezonePicker,
 	},
 	data() {
 		// Try to determine the current timezone, and fall back to UTC otherwise

diff --git a/apps/dav/src/views/CalDavSettings.vue b/apps/dav/src/views/CalDavSettings.vue
@@ -1,30 +1,30 @@
 <template>
-	<SettingsSection :title="$t('dav', 'Calendar server')"
+	<NcSettingsSection :title="$t('dav', 'Calendar server')"
 		:doc-url="userSyncCalendarsDocUrl">
 		<!-- Can use v-html as:
 			- $t passes the translated string through DOMPurify.sanitize,
 			- replacement strings are not user-controlled. -->
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<p class="settings-hint" v-html="hint" />
 		<p>
-			<CheckboxRadioSwitch id="caldavSendInvitations"
+			<NcCheckboxRadioSwitch id="caldavSendInvitations"
 				:checked.sync="sendInvitations"
 				type="switch">
 				{{ $t('dav', 'Send invitations to attendees') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<!-- Can use v-html as:
 				- $t passes the translated string through DOMPurify.sanitize,
 				- replacement strings are not user-controlled. -->
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<em v-html="sendInvitationsHelpText" />
 		</p>
 		<p>
-			<CheckboxRadioSwitch id="caldavGenerateBirthdayCalendar"
+			<NcCheckboxRadioSwitch id="caldavGenerateBirthdayCalendar"
 				:checked.sync="generateBirthdayCalendar"
 				type="switch"
 				class="checkbox">
 				{{ $t('dav', 'Automatically generate a birthday calendar') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<em>
 				{{ $t('dav', 'Birthday calendars will be generated by a background job.') }}
 			</em>
@@ -34,11 +34,11 @@
 			</em>
 		</p>
 		<p>
-			<CheckboxRadioSwitch id="caldavSendEventReminders"
+			<NcCheckboxRadioSwitch id="caldavSendEventReminders"
 				:checked.sync="sendEventReminders"
 				type="switch">
 				{{ $t('dav', 'Send notifications for events') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<!-- Can use v-html as:
 				- $t passes the translated string through DOMPurify.sanitize,
 				- replacement strings are not user-controlled. -->
@@ -50,41 +50,41 @@
 			</em>
 		</p>
 		<p class="indented">
-			<CheckboxRadioSwitch id="caldavSendEventRemindersToSharedGroupMembers"
+			<NcCheckboxRadioSwitch id="caldavSendEventRemindersToSharedGroupMembers"
 				:checked.sync="sendEventRemindersToSharedGroupMembers"
 				type="switch"
 				:disabled="!sendEventReminders">
 				{{ $t('dav', 'Send reminder notifications to calendar sharees as well' ) }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<em>
 				{{ $t('dav', 'Reminders are always sent to organizers and attendees.' ) }}
 			</em>
 		</p>
 		<p class="indented">
-			<CheckboxRadioSwitch id="caldavSendEventRemindersPush"
+			<NcCheckboxRadioSwitch id="caldavSendEventRemindersPush"
 				:checked.sync="sendEventRemindersPush"
 				type="switch"
 				:disabled="!sendEventReminders">
 				{{ $t('dav', 'Enable notifications for events via push') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</p>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
 
 const userSyncCalendarsDocUrl = loadState('dav', 'userSyncCalendarsDocUrl', '#')
 
 export default {
 	name: 'CalDavSettings',
 	components: {
-		CheckboxRadioSwitch,
-		SettingsSection,
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 	data() {
 		return {