Merge branch 'feature/update-vue' into fix-deprecation-errors

Author: itamargiv

.eslintrc.js

@@ -12,6 +12,15 @@ module.exports = {
 	rules: {
 		'max-len': [ 'error', 120 ],
 		'no-multiple-empty-lines' : ['error', { 'max': 1 }],
-		'vue/multi-word-component-names' : [ 'off' ]
-		},	
+		'vue/multi-word-component-names' : [ 'off' ],
+		// Migration changes
+		'vue/no-deprecated-v-bind-sync': 'off',
+		'vue/no-deprecated-slot-attribute': 'off',
+		'vue/require-explicit-emits': 'off',
+		'vue/no-deprecated-v-on-native-modifier': 'off',
+		'vue/no-deprecated-slot-scope-attribute': 'off',
+		'vue/no-v-for-template-key-on-child': 'off',
+		'vue/no-deprecated-destroyed-lifecycle': 'off',
+		'vue/no-v-model-argument': 'off'
+		},
 };

package-lock.json

@@ -19,11 +19,11 @@
         "@types/lodash": "^4.14.199",
         "@typescript-eslint/eslint-plugin": "^6.7.5",
         "@typescript-eslint/parser": "^6.7.5",
-        "@vue/compiler-sfc": "3.2.0",
+        "@vue/compiler-sfc": "^3.3.8",
         "@vue/eslint-config-typescript": "^12.0.0",
         "@vue/test-utils": "^2.0.0",
         "@vue/vue3-jest": "^29.2.4",
-        "@vue/runtime-dom": "3.2.0",
+        "@vue/runtime-dom": "^3.3.8",
         "@wikimedia/codex": "^0.20.0",
         "@wikimedia/codex-design-tokens": "^0.20.0",
         "@wikimedia/codex-icons": "^0.20.0",
@@ -49,25 +49,14 @@
     "dependencies": {
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
-        "@vue/compat": "3.2.0",
+        "@vue/compat": "^3.3.8",
         "@wmde/wikit-tokens": "^2.1.0-alpha.15",
         "@wmde/wikit-vue-components": "^2.1.0-alpha.16",
         "date-fns": "^2.30.0",
         "lodash": "^4.17.21",
         "pinia": "2.0.36",
         "ress": "^5.0.2",
-        "vue": "3.2.0",
+        "vue": "^3.3.8",
         "vue-banana-i18n": "2.3.0"
-    },
-    "overrides": {
-        "pinia": {
-            "vue": "3.2.0"
-        },
-        "@wikimedia/codex": {
-            "vue": "3.2.0"
-        },
-        "vue-banana-i18n": {
-            "banana-i18n": "2.2.0"
-        }
     }
 }

package.json

@@ -46,14 +46,14 @@
             </span>
         </td>
         <td :data-header="$i18n('column-review-status')">
-            <dropdown
-                :menuItems="Object.values(statusOptions)"
+            <cdx-select
+                :menu-items="Object.values(statusOptions)"
                 :disabled="disabled"
-                v-model="decision"
-                @input="$bubble('decision', {
+                v-model:selected="reviewStatus"
+                @update:selected="$bubble('decision', {
                     id: mismatch.id,
                     item_id: mismatch.item_id,
-                    review_status: $event.value
+                    review_status: $event
                 })"
             />
         </td>
@@ -79,15 +79,16 @@
                   </wikit-button>
                 </div>
             </div>
-            <wikit-dialog class="full-description-dialog"
+            <cdx-dialog class="full-description-dialog"
               :title="$i18n('column-upload-info')"
-              ref="fullDescriptionDialog"
-              :actions="[{
+              :open="fullDescriptionDialog"
+              :primary-action="{
                   label: $i18n('confirm-dialog-button'),
-                  namespace: 'next-steps-confirm'
-              }]"
-              @action="(_, dialog) => dialog.hide()"
-              dismiss-button
+                  namespace: 'next-steps-confirm',
+                  actionType: 'progressive'
+              }"
+              @primary="() => fullDescriptionDialog = false"
+              close-button-label="X"
             >
             <wikit-link class="uploader"
                     :href="`https://www.wikidata.org/wiki/User:${mismatch.import_meta.user.username}`"
@@ -99,7 +100,7 @@
             <div class="description">
               {{this.mismatch.import_meta.description}}
             </div>
-          </wikit-dialog>
+          </cdx-dialog>
         </td>
     </tr>
 </template>
@@ -111,10 +112,9 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import {
     Button as WikitButton,
-    Dialog as WikitDialog,
-    Dropdown,
     Link as WikitLink
 } from '@wmde/wikit-vue-components';
+import { CdxDialog, CdxSelect } from "@wikimedia/codex";
 import { MenuItem } from '@wmde/wikit-vue-components/dist/components/MenuItem';
 
 import { LabelledMismatch, ReviewDecision } from "../types/Mismatch";
@@ -132,14 +132,16 @@ type ReviewOptionMap = {
 interface MismatchRowState {
   statusOptions: ReviewOptionMap;
   decision: ReviewMenuItem;
+  reviewStatus: string;
+  fullDescriptionDialog: boolean;
 }
 
 export default defineComponent({
     components: {
     WikitButton,
     WikitLink,
-    WikitDialog,
-    Dropdown,
+    CdxDialog,
+    CdxSelect
     },
     props: {
         mismatch: Object as PropType<LabelledMismatch>,
@@ -183,14 +185,14 @@ export default defineComponent({
     return {
       statusOptions,
       decision: statusOptions[this.mismatch.review_status],
+      reviewStatus: String(this.mismatch.review_status),
+      fullDescriptionDialog: false
     };
   },
   methods: {
     showDialog(e: Event) {
       e.preventDefault();
-      /* eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
-      const descriptionDialog = this.$refs.fullDescriptionDialog! as any;
-      descriptionDialog.show();
+      this.fullDescriptionDialog = true;
     }
   }
 });