web/satellite: upgrade vue deps

In vue 3.4+ a new macro, defineModel, was introduced to simply declare a two-way bound model as opposed to the verbose way we declare them now This change upgrades our Vuejs dependency to enable us to use the new macro. As a result Vite, Vue-vite plugin and Vuetify have been upgraded to resolve the broken dependency chain. Issue: #6766 Change-Id: Iea7ed9310d846244f627d5e94eb7e77b8db686ae
storj · Feb 13, 2024 · 386d614 · 386d614
1 parent a24fb70
commit 386d614
Show file tree

Hide file tree

Showing 39 changed files with 1,504 additions and 846 deletions.
diff --git a/web/satellite/package-lock.json b/web/satellite/package-lock.json
diff --git a/web/satellite/package.json b/web/satellite/package.json
@@ -28,9 +28,9 @@
     "pinia": "2.0.23",
     "qrcode": "1.5.3",
     "stream-browserify": "3.0.0",
-    "vue": "3.3.2",
+    "vue": "3.4.17",
     "vue-router": "4.2.0",
-    "vuetify": "3.4.6"
+    "vuetify": "3.5.3"
   },
   "devDependencies": {
     "@mdi/js": "7.3.67",
@@ -41,7 +41,7 @@
     "@types/qrcode": "1.5.0",
     "@typescript-eslint/eslint-plugin": "5.59.5",
     "@typescript-eslint/parser": "5.59.5",
-    "@vitejs/plugin-vue": "4.2.3",
+    "@vitejs/plugin-vue": "5.0.4",
     "@vue/eslint-config-typescript": "11.0.3",
     "eslint": "8.40.0",
     "eslint-import-resolver-custom-alias": "1.3.0",
@@ -58,9 +58,9 @@
     "stylelint-config-standard-vue": "1.0.0",
     "stylelint-scss": "6.0.0",
     "typescript": "4.9.5",
-    "vite": "4.5.2",
+    "vite": "5.1.1",
     "vite-plugin-compression": "0.5.1",
-    "vite-plugin-vuetify": "1.0.2",
+    "vite-plugin-vuetify": "2.0.1",
     "vitest": "0.31.1",
     "vitest-fetch-mock": "0.2.2",
     "vue-eslint-parser": "9.3.0",

diff --git a/web/satellite/src/components/dialogs/AddTeamMemberDialog.vue b/web/satellite/src/components/dialogs/AddTeamMemberDialog.vue
@@ -133,18 +133,10 @@ import { useConfigStore } from '@/store/modules/configStore';
 import UpgradeAccountDialog from '@/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue';
 
 const props = defineProps<{
-    modelValue: boolean;
     projectId: string;
 }>();
 
-const emit = defineEmits<{
-    'update:modelValue': [value: boolean];
-}>();
-
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
+const model = defineModel<boolean>({ required: true });
 
 const usersStore = useUsersStore();
 const analyticsStore = useAnalyticsStore();

diff --git a/web/satellite/src/components/dialogs/AddTokensDialog.vue b/web/satellite/src/components/dialogs/AddTokensDialog.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { VBtn, VCard, VCardItem, VCardTitle, VDialog, VDivider, VWindow, VWindowItem } from 'vuetify/components';
 
 import AddTokensStep from '@/components/dialogs/upgradeAccountFlow/AddTokensStep.vue';
@@ -59,18 +59,7 @@ const step = ref(AddTokensDialogStep.AddTokens);
 const loading = ref<boolean>(false);
 const content = ref<HTMLElement | null>(null);
 
-const props = defineProps<{
-    modelValue: boolean,
-}>();
-
-const emit = defineEmits<{
-    'update:modelValue': [value: boolean];
-}>();
-
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
+const model = defineModel<boolean>({ required: true });
 
 /**
  * Sets specific flow step.

diff --git a/web/satellite/src/components/dialogs/ApplyCouponCodeDialog.vue b/web/satellite/src/components/dialogs/ApplyCouponCodeDialog.vue
@@ -95,18 +95,7 @@ const analyticsStore = useAnalyticsStore();
 const notify = useNotify();
 const { isLoading, withLoading } = useLoading();
 
-const emit = defineEmits<{
-    'update:modelValue': [boolean];
-}>();
-
-const props = defineProps<{
-    modelValue: boolean;
-}>();
-
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
+const model = defineModel<boolean>({ required: true });
 
 const formValid = ref<boolean>(false);
 const couponCode = ref<string>('');

diff --git a/web/satellite/src/components/dialogs/BrowserNewFolderDialog.vue b/web/satellite/src/components/dialogs/BrowserNewFolderDialog.vue
@@ -123,18 +123,7 @@ const notify = useNotify();
 
 const { isLoading, withLoading } = useLoading();
 
-const props = defineProps<{
-    modelValue: boolean,
-}>();
-
-const emit = defineEmits<{
-    'update:modelValue': [value: boolean];
-}>();
-
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
+const model = defineModel<boolean>({ required: true });
 
 const formValid = ref<boolean>(false);
 const folder = ref<string>('');

diff --git a/web/satellite/src/components/dialogs/BucketDetailsDialog.vue b/web/satellite/src/components/dialogs/BucketDetailsDialog.vue
@@ -106,17 +106,12 @@ const isLoading = useLoading();
 const bucketsStore = useBucketsStore();
 const projectsStore = useProjectsStore();
 const router = useRouter();
-const emit = defineEmits<{
-    (event: 'update:modelValue', value: boolean): void,
-}>();
+
 const props = defineProps<{
-    modelValue: boolean,
     bucketName: string,
 }>();
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
+
+const model = defineModel<boolean>({ required: true });
 
 function redirectToBucketsPage(): void {
     router.push({

diff --git a/web/satellite/src/components/dialogs/ChangeNameDialog.vue b/web/satellite/src/components/dialogs/ChangeNameDialog.vue
@@ -110,18 +110,8 @@ const userStore = useUsersStore();
 const { isLoading, withLoading } = useLoading();
 const notify = useNotify();
 
-const props = defineProps<{
-    modelValue: boolean,
-}>();
+const model = defineModel<boolean>({ required: true });
 
-const emit = defineEmits<{
-    (event: 'update:modelValue', value: boolean): void,
-}>();
-
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
 const formValid = ref<boolean>(false);
 const name = ref<string>(userStore.userName);
 
@@ -142,7 +132,7 @@ async function onChangeName(): Promise<void> {
             return;
         }
 
-        emit('update:modelValue', false);
+        model.value = false;
     });
 }
 </script>
diff --git a/web/satellite/src/components/dialogs/ChangePasswordDialog.vue b/web/satellite/src/components/dialogs/ChangePasswordDialog.vue
@@ -148,18 +148,8 @@ const { isLoading, withLoading } = useLoading();
 const router = useRouter();
 const notify = useNotify();
 
-const props = defineProps<{
-    modelValue: boolean,
-}>();
+const model = defineModel<boolean>({ required: true });
 
-const emit = defineEmits<{
-    (event: 'update:modelValue', value: boolean): void,
-}>();
-
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
 const formValid = ref<boolean>(false);
 const oldPassword = ref<string>('');
 const newPassword = ref<string>('');
@@ -193,7 +183,7 @@ async function onChangePassword(): Promise<void> {
             notify.notifyError(error, AnalyticsErrorEventSource.CHANGE_PASSWORD_MODAL);
         }
 
-        emit('update:modelValue', false);
+        model.value = false;
     });
 }
 </script>
diff --git a/web/satellite/src/components/dialogs/CreateAccessDialog.vue b/web/satellite/src/components/dialogs/CreateAccessDialog.vue
@@ -248,20 +248,9 @@ function resettableRef<T>(value: T): Ref<T> {
     return thisRef;
 }
 
-const props = defineProps<{
-    modelValue: boolean,
-}>();
-
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => {
-        if (isCreating.value) return;
-        emit('update:modelValue', value);
-    },
-});
+const model = defineModel<boolean>({ required: true });
 
 const emit = defineEmits<{
-    'update:modelValue': [value: boolean];
     'accessCreated': [];
 }>();
 

diff --git a/web/satellite/src/components/dialogs/CreateBucketDialog.vue b/web/satellite/src/components/dialogs/CreateBucketDialog.vue
@@ -127,15 +127,14 @@ const configStore = useConfigStore();
 const ipRegexp = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
 
 const props = withDefaults(defineProps<{
-    modelValue: boolean,
     openCreated: boolean,
 }>(), {
-    modelValue: false,
     openCreated: true,
 });
 
+const model = defineModel<boolean>({ required: true });
+
 const emit = defineEmits<{
-    (event: 'update:modelValue', value: boolean): void,
     (event: 'created', value: string): void,
 }>();
 
@@ -144,11 +143,6 @@ const formValid = ref<boolean>(false);
 const bucketName = ref<string>('');
 const worker = ref<Worker | null>(null);
 
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
-
 const bucketNameRules = computed(() => {
     return [
         (value: string) => (!!value || 'Bucket name is required.'),

diff --git a/web/satellite/src/components/dialogs/CreateProjectDialog.vue b/web/satellite/src/components/dialogs/CreateProjectDialog.vue
@@ -185,18 +185,7 @@ import { ROUTES } from '@/router';
 
 import UpgradeAccountDialog from '@/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue';
 
-const props = defineProps<{
-    modelValue: boolean,
-}>();
-
-const emit = defineEmits<{
-    'update:modelValue': [value: boolean],
-}>();
-
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
+const model = defineModel<boolean>({ required: true });
 
 const analyticsStore = useAnalyticsStore();
 const projectsStore = useProjectsStore();

diff --git a/web/satellite/src/components/dialogs/DeleteAccessDialog.vue b/web/satellite/src/components/dialogs/DeleteAccessDialog.vue
@@ -94,19 +94,14 @@ const notify = useNotify();
 const { isLoading, withLoading } = useLoading();
 
 const props = defineProps<{
-    modelValue: boolean;
     accessNames: string[];
 }>();
 
 const emit = defineEmits<{
-    'update:modelValue': [value: boolean],
     'deleted': [];
 }>();
 
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
+const model = defineModel<boolean>({ required: true });
 
 async function onDeleteClick(): Promise<void> {
     await withLoading(async () => {

diff --git a/web/satellite/src/components/dialogs/DeleteBucketDialog.vue b/web/satellite/src/components/dialogs/DeleteBucketDialog.vue
@@ -89,18 +89,10 @@ import { useNotify } from '@/utils/hooks';
 import IconTrash from '@/components/icons/IconTrash.vue';
 
 const props = defineProps<{
-    modelValue: boolean,
     bucketName: string;
 }>();
 
-const emit = defineEmits<{
-    'update:modelValue': [value: boolean],
-}>();
-
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
+const model = defineModel<boolean>({ required: true });
 
 const analyticsStore = useAnalyticsStore();
 const configStore = useConfigStore();

diff --git a/web/satellite/src/components/dialogs/DeleteFileDialog.vue b/web/satellite/src/components/dialogs/DeleteFileDialog.vue
@@ -85,20 +85,15 @@ import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrow
 import IconTrash from '@/components/icons/IconTrash.vue';
 
 const props = defineProps<{
-    modelValue: boolean,
     files: BrowserObject[],
 }>();
 
 const emit = defineEmits<{
-    'update:modelValue': [value: boolean],
     'contentRemoved': [],
     'filesDeleted': [],
 }>();
 
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
+const model = defineModel<boolean>({ required: true });
 
 const obStore = useObjectBrowserStore();
 const bucketsStore = useBucketsStore();

diff --git a/web/satellite/src/components/dialogs/DisableMFADialog.vue b/web/satellite/src/components/dialogs/DisableMFADialog.vue
@@ -113,24 +113,13 @@ const notify = useNotify();
 
 const innerContent = ref<Component | null>(null);
 
-const props = defineProps<{
-    modelValue: boolean,
-}>();
-
-const emit = defineEmits<{
-    (event: 'update:modelValue', value: boolean): void,
-}>();
+const model = defineModel<boolean>({ required: true });
 
 const confirmCode = ref<string>('');
 const isError = ref<boolean>(false);
 const useRecoveryCode = ref<boolean>(false);
 const formValid = ref<boolean>(false);
 
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
-
 /**
  * Returns validation rules based on whether recovery
  * code input is being used.

diff --git a/web/satellite/src/components/dialogs/DropzoneDialog.vue b/web/satellite/src/components/dialogs/DropzoneDialog.vue
@@ -36,19 +36,10 @@ import { VAlert, VContainer, VDialog } from 'vuetify/components';
 import { computed } from 'vue';
 
 const props = defineProps<{
-    modelValue: boolean,
     bucket: string,
 }>();
 
-const emit = defineEmits<{
-    (event: 'update:modelValue', value: boolean): void,
-    (event: 'fileDrop', value: Event): void,
-}>();
-
-const model = computed<boolean>({
-    get: () => props.modelValue,
-    set: value => emit('update:modelValue', value),
-});
+const model = defineModel<boolean>({ required: true });
 </script>
 
 <style scoped lang="scss">