Merge pull request #3846 from nextcloud/chore/vue3/migrate-v-deep

chore(vue3): migrate ::v-deep to :deep

src/components/AppNavigation/RootNavigation.vue

@@ -490,7 +490,7 @@ $caption-padding: 22px;
 #newcircle {
 	margin-top: $caption-padding;
 
-	::v-deep a {
+	:deep(a) {
 		color: var(--color-text-maxcontrast)
 	}
 }
@@ -499,10 +499,10 @@ $caption-padding: 22px;
 	margin: 0 $caption-padding;
 }
 
-.app-navigation__collapse ::v-deep a {
+.app-navigation__collapse :deep(a) {
 	color: var(--color-text-maxcontrast)
 }
-::v-deep .settings-button__label {
+:deep(.settings-button__label) {
 	opacity: .7;
 	font-weight: bold;
 }

src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue

@@ -151,7 +151,7 @@ export default {
 	text-overflow: ellipsis;
 	width: 107px;
 }
-::v-deep .button-vue--vue-secondary {
+:deep(.button-vue--vue-secondary) {
 	background-color: transparent;
 	border: none;
 	box-shadow: none;

src/components/AppNavigation/Settings/SettingsImportContacts.vue

@@ -337,7 +337,7 @@ export default {
 		}
 		&-disabled {
 			// Wrap warning about disabled button instead of ellipsing it
-			::v-deep .button-vue__text {
+			:deep(.button-vue__text) {
 				white-space: pre-wrap;
 			}
 		}

src/components/ContactDetails.vue

@@ -1092,7 +1092,7 @@ section.contact-details {
 		}
 	}
 #qrcode-modal {
-	::v-deep .modal-container {
+	:deep(.modal-container) {
 		display: flex;
 		padding: 10px;
 		background-color: #fff;
@@ -1101,7 +1101,7 @@ section.contact-details {
 		}
 	}
 }
-::v-deep .v-select.select {
+:deep(.v-select.select) {
 	min-width: 0;
 	flex: 1 auto;
 	.vs__actions {
@@ -1109,7 +1109,7 @@ section.contact-details {
 	}
 }
 #pick-addressbook-modal {
-	::v-deep .modal-container {
+	:deep(.modal-container) {
 		display: flex;
 		overflow: visible;
 		flex-wrap: wrap;
@@ -1128,11 +1128,10 @@ section.contact-details {
 	background-color: var(--color-primary-element-light);
 	border-radius: var(--border-radius-rounded);
 }
-::v-deep .button-vue--vue-tertiary:hover,
-.button-vue--vue-tertiary:active {
-		background-color: var(--color-primary-element-light-hover) !important;
-
-	}
+:deep(.button-vue--vue-tertiary:hover),
+:deep(.button-vue--vue-tertiary:active) {
+	background-color: var(--color-primary-element-light-hover) !important;
+}
 .related-resources {
 	display:inline-grid;
 	margin-top: 88px;
@@ -1153,7 +1152,7 @@ section.contact-details {
 	display: inline-flex;
 }
 // forcing the size only for contacts app to fit the text size of the contacts app
-::v-deep .related-resources__header h5 {
+:deep(.related-resources__header h5) {
 	font-size: medium;
 	opacity: .7;
 	color: var(--color-primary-element);

src/components/ContactDetails/ContactDetailsAvatar.vue

@@ -596,7 +596,7 @@ export default {
 			justify-content: space-between;
 		}
 
-		&::v-deep .cropper-view-box {
+		&:deep(.cropper-view-box) {
 			border-radius: 50%;
 		}
 	}
@@ -640,7 +640,7 @@ export default {
 		justify-content: center;
 		background-color: rgba(0, 0, 0, .2);
 		// Always show max opacity, let the background-color be the visual cue
-		&::v-deep .action-item__menutoggle {
+		&:deep(.action-item__menutoggle) {
 			opacity: 1;
 		}
 	}
@@ -654,7 +654,7 @@ export default {
 		width: 44px;
 		height: 44px;
 		margin: -50%;
-		&::v-deep {
+		&:deep {
 			.action-item__menutoggle {
 				opacity: .7;
 				background-color: rgba(0, 0, 0, .2);
@@ -675,7 +675,7 @@ export default {
 	// Because of that, we now fill the modal-container,
 	// so we need to watch for click on the photo-wrapper to
 	// close on image click outside.
-	&::v-deep .modal-container {
+	&:deep(.modal-container) {
 		background-color: transparent;
 		box-shadow: none;
 

src/components/DetailsHeader.vue

@@ -145,11 +145,11 @@ $top-padding: 50px;
 			margin: 0;
 		}
 
-		::v-deep input {
+		:deep(input) {
 			flex: 1 auto;
 		}
 
-		&-title ::v-deep input {
+		&-title :deep(input) {
 			font-weight: bold;
 		}
 

src/components/EntityPicker/EntityBubble.vue

@@ -87,7 +87,7 @@ export default {
 
 <style lang="scss" scoped>
 // better visual with light default tint
-::v-deep .user-bubble__content {
+:deep(.user-bubble__content) {
 	background-color: var(--color-pirimary-light);
 }
 

src/components/EntityPicker/EntityPicker.vue

@@ -466,13 +466,13 @@ $icon-margin: math.div($clickable-area - $icon-size, 2);
 }
 
 // Properly center Entity Picker empty content
-::v-deep .empty-content {
+:deep(.empty-content) {
 	margin: auto 0 !important;
 }
 
 /** Size full in the modal component doesn't have border radius, this adds
 it back */
-::v-deep .modal-container {
+:deep(.modal-container) {
 	border-radius: var(--border-radius-large) !important;
 }
 

src/components/EntityPicker/EntitySearchResult.vue

@@ -128,7 +128,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2);
 		&--selected,
 		&:hover,
 		&:focus {
-			::v-deep .user-bubble__content {
+			:deep(.user-bubble__content) {
 				// better visual with light default tint
 				background-color: var(--color-primary-element-light);
 			}
@@ -136,7 +136,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2);
 	}
 }
 
-::v-deep .user-bubble__content {
+:deep(.user-bubble__content){
 	// Take full width
 	width: 100%;
 	// Override default styling

src/components/EntityPicker/NewCircleIntro.vue

@@ -212,7 +212,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2);
 }
 
 // Make the checkboxes span full width
-::v-deep .checkbox-radio-switch__label {
+:deep(.checkbox-radio-switch__label) {
 	width: 100%;
 }
 
@@ -223,7 +223,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2);
 
 /** Size full in the modal component doesn't have border radius, this adds
 it back */
-::v-deep .modal-container {
+:deep(.modal-container) {
 	border-radius: var(--border-radius-large) !important;
 }
 

src/components/MemberList.vue

@@ -335,7 +335,7 @@ export default {
 		}
 	}
 
-	&::v-deep .empty-content {
+	:deep(.empty-content) {
 		margin: auto;
 	}
 }

src/components/ProcessingScreen.vue

@@ -52,15 +52,6 @@ export default {
 		flex-direction: column;
 		width: auto;
 		margin: 50px;
-
-		// Progress &desc wrapper
-		&::v-deep > p {
-			display: flex;
-			align-items: center;
-			flex-direction: column;
-			width: 80%;
-			margin: auto;
-		}
 	}
 
 	&__progress {