From 0c59a85c9c221ca930044a9831894e663a4cd8af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 7 Nov 2022 20:41:26 +0100
Subject: [PATCH] Remove legacy v-deep selector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/CardCreateDialog.vue                      |  4 +-
 src/CardSelector.vue                          |  2 +-
 src/components/board/Board.vue                |  2 +-
 src/components/board/TagsTabSidebar.vue       |  2 +-
 src/components/card/CardSidebar.vue           | 85 ++++++++++---------
 src/components/card/CardSidebarTabDetails.vue | 10 +--
 src/components/card/CommentForm.vue           |  4 +-
 src/components/card/CommentItem.vue           |  4 +-
 src/components/card/Description.vue           |  8 +-
 src/components/cards/AvatarList.vue           |  6 +-
 src/components/cards/CardBadges.vue           |  2 +-
 src/components/cards/CardItem.vue             |  2 +-
 src/components/search/GlobalSearchResults.vue |  4 +-
 src/css/comments.scss                         |  2 +-
 src/views/Dashboard.vue                       |  2 +-
 15 files changed, 70 insertions(+), 69 deletions(-)

diff --git a/src/CardCreateDialog.vue b/src/CardCreateDialog.vue
index 0e0a9c17e..937ce8951 100644
--- a/src/CardCreateDialog.vue
+++ b/src/CardCreateDialog.vue
@@ -237,14 +237,14 @@ export default {
 		justify-content: flex-end;
 	}
 
-	.card-selector::v-deep .modal-container {
+	.card-selector:deep(.modal-container) {
 		overflow: visible !important;
 	}
 
 	.empty-content {
 		margin-top: 5vh !important;
 
-		&::v-deep h2 {
+		&:deep(h2) {
 			margin-bottom: 5vh;
 		}
 	}
diff --git a/src/CardSelector.vue b/src/CardSelector.vue
index 5a255aac6..95a0a0734 100644
--- a/src/CardSelector.vue
+++ b/src/CardSelector.vue
@@ -169,7 +169,7 @@ export default {
 		float: right;
 	}
 
-	.card-selector::v-deep .modal-container {
+	.card-selector:deep(.modal-container) {
 		overflow: visible !important;
 	}
 </style>
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index c1707f29e..3b192ac81 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -209,7 +209,7 @@ export default {
 		align-items: stretch;
 		height: 100%;
 
-		.smooth-dnd-draggable-wrapper::v-deep {
+		&:deep(.smooth-dnd-draggable-wrapper) {
 			display: flex;
 			height: auto;
 
diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue
index 4313727af..4e91b0fc5 100644
--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -189,7 +189,7 @@ export default {
 		}
 
 		.color-picker-wrapper {
-			&, &::v-deep > .trigger {
+			&, &:deep > .trigger {
 				width: $clickable-area;
 				padding: 3px;
 				display: flex;
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index f08bd147c..0ef12fb01 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -208,53 +208,54 @@ export default {
 
 <style lang="scss" scoped>
 
-	section.app-sidebar__tab--active {
-		min-height: auto;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
+section.app-sidebar__tab--active {
+	min-height: auto;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
 
-	// FIXME: Obivously we should at some point not randomly reuse the sidebar component
-	// since this is not oficially supported
-	.modal__card .app-sidebar {
-		$modal-padding: 14px;
-		border: 0;
-		min-width: calc(100% - #{$modal-padding * 2});
-		position: relative;
-		top: 0;
-		left: 0;
-		right: 0;
-		max-width: calc(100% - #{$modal-padding * 2});
-		padding: 0 14px;
-		max-height: 100%;
-		overflow: initial;
-		user-select: text;
-		-webkit-user-select: text;
+// FIXME: Obivously we should at some point not randomly reuse the sidebar component
+// since this is not oficially supported
+.modal__card .app-sidebar {
+	$modal-padding: 14px;
+	border: 0;
+	min-width: calc(100% - #{$modal-padding * 2});
+	position: relative;
+	top: 0;
+	left: 0;
+	right: 0;
+	max-width: calc(100% - #{$modal-padding * 2});
+	padding: 0 14px;
+	max-height: 100%;
+	overflow: initial;
+	user-select: text;
+	-webkit-user-select: text;
 
-		&::v-deep {
-			.app-sidebar-header {
-				position: sticky;
-				top: 0;
-				z-index: 100;
-				background-color: var(--color-main-background);
-			}
-			.app-sidebar-tabs__nav {
-				position: sticky;
-				top: 87px;
-				margin: 0;
-				z-index: 100;
-				background-color: var(--color-main-background);
-			}
+	// FIXME: test
+	&:deep {
+		.app-sidebar-header {
+			position: sticky;
+			top: 0;
+			z-index: 100;
+			background-color: var(--color-main-background);
+		}
+		.app-sidebar-tabs__nav {
+			position: sticky;
+			top: 87px;
+			margin: 0;
+			z-index: 100;
+			background-color: var(--color-main-background);
+		}
 
-			.app-sidebar__tab {
-				overflow: initial;
-			}
+		.app-sidebar__tab {
+			overflow: initial;
+		}
 
-			#emptycontent, .emptycontent {
-				margin-top: 88px;
-			}
+		#emptycontent, .emptycontent {
+			margin-top: 88px;
 		}
 	}
+}
 
 </style>
diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index a860de83b..6e457fada 100644
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -368,11 +368,11 @@ export default {
 </script>
 <style lang="scss" scoped>
 
-.section-wrapper::v-deep .mx-datepicker-main.mx-datepicker-popup {
+.section-wrapper:deep(.mx-datepicker-main.mx-datepicker-popup) {
 	left: 0 !important;
 }
 
-.section-wrapper::v-deep .mx-datepicker-main.mx-datepicker-popup.mx-datepicker-sidebar {
+.section-wrapper:deep(.mx-datepicker-main.mx-datepicker-popup.mx-datepicker-sidebar) {
 	padding: 0 !important;
 }
 
@@ -413,7 +413,7 @@ export default {
 	padding: 6px
 }
 
-.section-details::v-deep .multiselect__tags-wrap {
+.section-details:deep(.multiselect__tags-wrap) {
 	flex-wrap: wrap;
 }
 
@@ -430,11 +430,11 @@ export default {
 	}
 }
 
-.multiselect::v-deep .multiselect__tags-wrap {
+.multiselect:deep(.multiselect__tags-wrap) {
 	z-index: 2;
 }
 
-.multiselect.multiselect--active::v-deep .multiselect__tags-wrap {
+.multiselect.multiselect--active:deep(.multiselect__tags-wrap) {
 	z-index: 0;
 }
 
diff --git a/src/components/card/CommentForm.vue b/src/components/card/CommentForm.vue
index bf4ab08b1..6327938e0 100644
--- a/src/components/card/CommentForm.vue
+++ b/src/components/card/CommentForm.vue
@@ -186,13 +186,13 @@ export default {
 		& > div[contenteditable] {
 			width: 100%;
 
-			&::v-deep > span > div {
+			&:deep > span > div {
 				vertical-align: middle;
 			}
 		}
 	}
 
-	.comment-form::v-deep .atwho-li {
+	.comment-form:deep(.atwho-li) {
 		height: 32px;
 	}
 
diff --git a/src/components/card/CommentItem.vue b/src/components/card/CommentItem.vue
index c989146b8..32da38194 100644
--- a/src/components/card/CommentItem.vue
+++ b/src/components/card/CommentItem.vue
@@ -222,7 +222,7 @@ export default {
 			padding-left: 8px;
 		}
 
-		&::v-deep .rich-text--wrapper {
+		&:deep(.rich-text--wrapper) {
 			margin-top: -3px;
 			color: var(--color-text-lighter);
 		}
@@ -241,7 +241,7 @@ export default {
 		}
 	}
 
-	.comment--content::v-deep {
+	.comment--content:deep {
 		a {
 			text-decoration: underline;
 		}
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index 0a2244a76..e2cc4f277 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -277,7 +277,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 
-	&::v-deep .attachment-list {
+	&:deep(.attachment-list) {
 		flex-shrink: 1;
 	}
 }
@@ -292,16 +292,16 @@ export default {
 	width: auto;
 	overflow-x: auto;
 
-	&::v-deep {
+	&:deep {
 		/* stylelint-disable-next-line no-invalid-position-at-import-rule */
 		@import './../../css/markdown';
 	}
 
-	&::v-deep input {
+	&:deep(input) {
 		min-height: auto;
 	}
 
-	&::v-deep a {
+	&:deep(a) {
 		text-decoration: underline;
 	}
 }
diff --git a/src/components/cards/AvatarList.vue b/src/components/cards/AvatarList.vue
index e3f83744e..17138e97c 100644
--- a/src/components/cards/AvatarList.vue
+++ b/src/components/cards/AvatarList.vue
@@ -154,7 +154,7 @@ export default {
 		margin-top: 5px;
 		position: relative;
 		flex-grow: 1;
-		::v-deep .popovermenu {
+		:deep(.popovermenu) {
 			margin-right: -4px;
 			img {
 				padding: 0;
@@ -174,7 +174,7 @@ export default {
 		padding-right: $avatar-offset;
 		flex-direction: row-reverse;
 		.avatardiv,
-		::v-deep .avatardiv {
+		:deep(.avatardiv) {
 			width: 36px;
 			height: 36px;
 			box-sizing: content-box !important;
@@ -189,7 +189,7 @@ export default {
 				cursor: pointer;
 			}
 		}
-		&:hover div:nth-child(n+2) ::v-deep .avatardiv {
+		&:hover div:nth-child(n+2) :deep(.avatardiv) {
 			margin-right: 1px;
 		}
 	}
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 28fe4b523..ce9d05fc1 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -109,7 +109,7 @@ export default {
 			margin-right: 2px;
 
 			span,
-			&::v-deep span {
+			&:deep(span) {
 				padding: 10px 2px;
 			}
 		}
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 9c43af730..57d85947e 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -208,7 +208,7 @@ export default {
 		background-color: var(--color-main-background);
 		margin-bottom: $card-spacing;
 
-		&::v-deep * {
+		&:deep(*) {
 			cursor: pointer;
 		}
 
diff --git a/src/components/search/GlobalSearchResults.vue b/src/components/search/GlobalSearchResults.vue
index 4f51ce9cf..bf1c61ecc 100644
--- a/src/components/search/GlobalSearchResults.vue
+++ b/src/components/search/GlobalSearchResults.vue
@@ -207,7 +207,7 @@ export default {
 			margin-right: 20px;
 		}
 	}
-	h2::v-deep span {
+	h2:deep(span) {
 		background-color: var(--color-background-dark);
 		padding: 3px;
 		border-radius: var(--border-radius);
@@ -221,7 +221,7 @@ export default {
 			flex-grow: 0;
 		}
 	}
-	&::v-deep .card {
+	&:deep(.card) {
 		width: $stack-width;
 		margin-right: $stack-spacing;
 	}
diff --git a/src/css/comments.scss b/src/css/comments.scss
index f2fa497a2..3c1ef3aeb 100644
--- a/src/css/comments.scss
+++ b/src/css/comments.scss
@@ -3,7 +3,7 @@
 	flex-grow: 1;
 	position: relative;
 
-	.editor__content::v-deep {
+	.editor__content:deep {
 		flex-grow: 1;
 		margin-left: 44px;
 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 48ebfdf61..9e2280860 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -164,7 +164,7 @@ export default {
 		margin-top: 3px;
 	}
 
-	.duedate::v-deep {
+	.duedate:deep {
 		.due {
 			margin: 0 0 0 10px;
 			padding: 2px 4px;