From 6e42ba8132d6a30608b036e1e11bb7f149a21ed8 Mon Sep 17 00:00:00 2001
From: Rotzbua <Rotzbua@users.noreply.github.com>
Date: Thu, 25 Jan 2024 21:14:48 +0100
Subject: [PATCH] chore(webapp): migrate css deep operator

preparation for vue3
add eslint rule
---
 www/webapp/.eslintrc.cjs                      |  3 +++
 www/webapp/package.json                       |  1 +
 .../src/components/Field/RecordList.vue       |  2 +-
 www/webapp/src/views/CrudList.vue             | 14 ++++++-------
 www/webapp/src/views/CrudListRecord.vue       | 20 +++++++++----------
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/www/webapp/.eslintrc.cjs b/www/webapp/.eslintrc.cjs
index a3e7cb51f..740b95c73 100644
--- a/www/webapp/.eslintrc.cjs
+++ b/www/webapp/.eslintrc.cjs
@@ -17,6 +17,7 @@ module.exports = {
     // 'plugin:vue/recommended',
     'plugin:vuetify/base',
     'plugin:import/recommended',
+    'plugin:vue-scoped-css/recommended', // vue2
     'eslint:recommended',
   ],
   settings: {
@@ -37,6 +38,8 @@ module.exports = {
     'vue/no-deprecated-filter': 'warn', // Preparation for vue3
     'vue/no-deprecated-v-on-number-modifiers': 'warn', // Preparation for vue3
     'vue/no-deprecated-html-element-is': 'warn', // Preparation for vue3
+    'vue-scoped-css/enforce-style-type': 'off',
+    'vue-scoped-css/no-deprecated-deep-combinator': 'warn', // Preparation for vue3
     'vue/match-component-file-name': ['error', {'extensions': ['vue'], 'shouldMatchCase': true}],
   },
   ignorePatterns: ['**/src/modules/**/*'],
diff --git a/www/webapp/package.json b/www/webapp/package.json
index 09f061923..bc9ccfe0e 100644
--- a/www/webapp/package.json
+++ b/www/webapp/package.json
@@ -31,6 +31,7 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-vue": "^9.15.1",
+    "eslint-plugin-vue-scoped-css": "^2.6.1",
     "eslint-plugin-vuetify": "^1.1.0",
     "sass": "~1.32.13",
     "unplugin-vue-components": "^0.26.0",
diff --git a/www/webapp/src/components/Field/RecordList.vue b/www/webapp/src/components/Field/RecordList.vue
index 44dff3d68..5a15de4f5 100644
--- a/www/webapp/src/components/Field/RecordList.vue
+++ b/www/webapp/src/components/Field/RecordList.vue
@@ -161,7 +161,7 @@ export default {
 };
 </script>
 <style scoped>
-table >>> td:last-child {
+table ::v-deep td:last-child {
   padding-right: 4px;
 }
 </style>
diff --git a/www/webapp/src/views/CrudList.vue b/www/webapp/src/views/CrudList.vue
index 9c5891cf7..ba8bd2f7d 100644
--- a/www/webapp/src/views/CrudList.vue
+++ b/www/webapp/src/views/CrudList.vue
@@ -702,29 +702,29 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-  >>> tr:not(.v-data-table__empty-wrapper) td {
+  ::v-deep tr:not(.v-data-table__empty-wrapper) td {
     vertical-align: top;
   }
   /* If this is on tr instead of td, it doesn't work for the first one */
-  >>> tr.successFade td {
+  ::v-deep tr.successFade td {
     animation: successFade 1s;
   }
-  >>> tr.successFade:focus-within td {
+  ::v-deep tr.successFade:focus-within td {
     animation: none;
   }
   @keyframes successFade {
     from { background-color: forestgreen; }
   }
-  >>> tr.orange .button-save .v-icon, >>> tr.red .button-save .v-icon {
+  ::v-deep tr.orange .button-save .v-icon, ::v-deep tr.red .button-save .v-icon {
     color: forestgreen;
   }
-  >>> tr:focus-within :focus {
+  ::v-deep tr:focus-within :focus {
     background-color: #FFFFFF;
   }
-  >>> tbody tr > :hover {
+  ::v-deep tbody tr > :hover {
     cursor: pointer;
   }
-  >>> tbody tr.text--disabled > :hover {
+  ::v-deep tbody tr.text--disabled > :hover {
     cursor: auto;
   }
 </style>
diff --git a/www/webapp/src/views/CrudListRecord.vue b/www/webapp/src/views/CrudListRecord.vue
index b05ea470d..a480a0fd5 100644
--- a/www/webapp/src/views/CrudListRecord.vue
+++ b/www/webapp/src/views/CrudListRecord.vue
@@ -124,38 +124,38 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-    >>> tr:not(.v-data-table__empty-wrapper) td {
+    ::v-deep tr:not(.v-data-table__empty-wrapper) td {
         vertical-align: top;
     }
-    >>> .v-data-table .v-data-table__mobile-row {
+    ::v-deep .v-data-table .v-data-table__mobile-row {
         height: auto;
         margin: -11px 0;
     }
-    >>> .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr:not(:last-child).v-data-table__mobile-table-row > td:last-child {
+    ::v-deep .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr:not(:last-child).v-data-table__mobile-table-row > td:last-child {
         border-bottom-width: 4px;
     }
-    >>> .theme--light.v-data-table > .v-data-table__wrapper > table {
+    ::v-deep .theme--light.v-data-table > .v-data-table__wrapper > table {
       width: 100%;
     }
     @media screen and (min-width: 600px) {
-      >>> .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr > td:nth-child(3),
-      >>> .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr > td:nth-child(3) > div{
+      ::v-deep .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr > td:nth-child(3),
+      ::v-deep .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr > td:nth-child(3) > div{
         width: 45vw;
       }
     }
-    >>> tr.successFade td {
+    ::v-deep tr.successFade td {
         animation: successFade 1s;
     }
-    >>> tr.successFade:focus-within td {
+    ::v-deep tr.successFade:focus-within td {
         animation: none;
     }
     @keyframes successFade {
         from { background-color: forestgreen; }
     }
-    >>> tr:focus-within .button-save .v-icon {
+    ::v-deep tr:focus-within .button-save .v-icon {
         color: forestgreen;
     }
-    >>> tr:focus-within :focus {
+    ::v-deep tr:focus-within :focus {
         background-color: #FFFFFF;
     }
 </style>