chore: upgrade vue to 3.3 (#4086)

packages/docs/nuxt.config.ts

@@ -159,5 +159,14 @@ export default defineNuxtConfig({
 
   sitemap: {
     hostname: process.env.HOSTNAME,
+  },
+
+  typescript: {
+    tsConfig: {
+      compilerOptions: {
+        // TODO: Use type keyword when importing type
+        verbatimModuleSyntax: false
+      }
+    }
   }
 });

packages/docs/package.json

@@ -27,7 +27,7 @@
     "autoprefixer": "^10.4.13",
     "escodegen": "^2.0.0",
     "eslint": "^8.53.0",
-    "nuxt": "3.4.3",
+    "nuxt": "^3.8.1",
     "postcss": "^8.2.1",
     "postcss-custom-properties": "^13.1.1",
     "serve": "^14.2.0",
@@ -37,7 +37,7 @@
     "vue": "3.3.8",
     "vue-component-meta": "^1.8.8",
     "vue-router": "^4.1.6",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.4.0"
   },
   "dependencies": {
     "@docsearch/js": "^3.2.1",

packages/nuxt/package.json

@@ -34,9 +34,9 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "latest",
-    "@nuxt/schema": "latest",
-    "@nuxt/vite-builder": "latest",
+    "@nuxt/schema": "^3.8.2",
+    "@nuxt/vite-builder": "^3.8.2",
     "@nuxtjs/eslint-config-typescript": "latest",
-    "eslint": "^7"
+    "eslint": "^8.53.0"
   }
 }

packages/sandbox/package.json

@@ -32,9 +32,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/test-utils": "^2.0.2",
+    "@vue/test-utils": "^2.4.1",
     "lodash": "^4.17.21",
-    "nuxt": "^3.1.1",
+    "nuxt": "^3.8.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "sass": "^1.57.1",
     "serve": "^14.2.0",
@@ -44,7 +44,7 @@
     "vite": "^4.2.1",
     "vitest": "*",
     "vue-bundle-renderer": "0.4.1",
-    "vue-tsc": "^1.2.0",
+    "vue-tsc": "^1.4.0",
     "webpack": "^5.4.1",
     "webpack-cli": "^4.9.2",
     "when-dependencies-installed": "^1.0.1"

packages/ui/.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
     // remove when this issue will be resolved: https://github.com/import-js/eslint-plugin-import/issues/2228
     'import/export': 'warn',
     'no-void': 'off',
+    'vue/multi-word-component-names': 'off',
   },
   overrides: [
     {

packages/ui/package.json

@@ -31,7 +31,7 @@
     "build": "tsx build/build.ts",
     "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist/types --project tsconfig.build.json",
     "typecheck": "vue-tsc --noEmit",
-    "lint": "vue-cli-service lint",
+    "lint": "eslint --ext .js,.vue src",
     "lint:style": "stylelint '**/*.{vue,html,css,scss}' --fix",
     "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vitest",
@@ -73,45 +73,33 @@
     "@types/cleave.js": "^1.4.7",
     "@types/mini-css-extract-plugin": "^1.2.1",
     "@types/semver": "^7.3.6",
-    "@types/webpack": "^5",
     "@types/yargs": "^17.0.10",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/cli-plugin-babel": "^5.0.0-alpha.3",
-    "@vue/cli-plugin-e2e-cypress": "^5.0.0-alpha.3",
-    "@vue/cli-plugin-eslint": "^5.0.0-alpha.3",
-    "@vue/cli-plugin-router": "^5.0.0-alpha.3",
-    "@vue/cli-plugin-typescript": "^5.0.0-alpha.3",
-    "@vue/cli-service": "^5.0.0-alpha.3",
-    "@vue/compiler-sfc": "^3.1.4",
+    "@vue/compiler-sfc": "^3.3.11",
     "@vue/eslint-config-standard": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.3",
-    "babel-loader": "^8.2.1",
     "c8": "^7.12.0",
     "chromatic": "^6.21.0",
     "core-js": "^3.8.2",
     "cross-env": "^7.0.2",
-    "css-minimizer-webpack-plugin": "^3.0.0",
-    "eslint": "^7",
+    "eslint": "^8.53.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-vue": "^7.0.1",
+    "eslint-plugin-vue": "^9.19.2",
     "identity-obj-proxy": "^3.0.0",
     "ionicons": "^3.0.0",
     "jsdom": "^16.2.2",
     "lint-staged": "^11.1.2",
-    "mini-css-extract-plugin": "^1.3.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "postcss": "^8.2.1",
     "postcss-import": "^14.0.2",
-    "postcss-loader": "^4.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^3.15.0",
@@ -121,36 +109,28 @@
     "rollup-plugin-typescript2": "^0.30.0",
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.57.1",
-    "sass-loader": "^10.1.0",
     "semver": "^7.3.5",
     "storybook": "^7.1.0",
     "storybook-dark-mode": "^3.0.0",
-    "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
-    "ts-loader": "^9.3.0",
     "typescript": "^5",
     "vite": "^4.2.1",
     "vite-plugin-chunk-split": "^0.4.7",
     "vitest": "^0.18.1",
-    "vue": "^3.0.4",
-    "vue-loader": "^16.3.0",
-    "vue-tsc": "^1.2.0",
-    "webpack": "^5.4.1",
-    "webpack-bundle-analyzer": "^4.1.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-merge": "^5.5.0",
+    "vue": "3.3.11",
+    "vue-tsc": "^1.4.0",
     "yargs": "^17.5.1"
   },
   "peerDependencies": {
     "vue": "^3.0.4"
   },
   "lint-staged": {
     "*.{js,ts}": [
-      "vue-cli-service lint --fix"
+      "yarn lint --fix"
     ],
     "*.vue": [
-      "vue-cli-service lint --fix",
+      "yarn lint --fix",
       "stylelint '**/*.{vue,html,css,scss}' --fix"
     ],
     ".{htm,html,css,sss,less,scss}": [
@@ -189,4 +169,4 @@
       ]
     }
   }
-}
+}

packages/ui/src/components/va-alert/VaAlert.vue

@@ -1,9 +1,9 @@
 <template>
   <transition
-    v-if="valueComputed"
     name="fade"
   >
     <div
+      v-if="valueComputed"
       class="va-alert"
       :style="alertStyle"
       role='alert'

packages/ui/src/components/va-tree-view/components/VaTreeNode/VaTreeNode.vue

@@ -64,7 +64,7 @@
         :key="getTrackBy(childNode)"
         :node="childNode"
       >
-        <template v-for="(_, name) in $slots" :key="name" v-slot:[name]="slotScope">
+        <template v-for="(_, name) in $slots" :key="name" v-slot:[name]="slotScope: any">
           <slot :name="name" v-bind="slotScope" />
         </template>
       </va-tree-node>

packages/ui/src/components/va-value/VaValue.vue

@@ -10,6 +10,8 @@ import {
 
 import { renderSlotNodes } from '../../utils/headless'
 
+type MustBeGeneric = any
+
 export default defineComponent({
   name: 'VaValue',
 
@@ -18,16 +20,16 @@ export default defineComponent({
   },
 
   setup (props, { slots }) {
-    const value = ref<any>(props.defaultValue)
+    const value = ref<MustBeGeneric>(props.defaultValue)
 
     // Vue will unwrap Refs passed as slot bind, so we make a fake not-Ref.
-    const slotBind: Ref<any> = new Proxy(value, {
+    const slotBind: Ref<MustBeGeneric> = new Proxy(value, {
       get (target, prop) {
         if (prop === 'value') {
           return target.value
         }
 
-        return target[prop]
+        return target[prop as keyof Ref<MustBeGeneric>]
       },
       set (target, prop, value) {
         if (prop === 'value') {

packages/ui/src/composables/UseElementBackgroundDummy.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useElementBackground } from './useElementBackground'
 import { useCurrentElement } from './useCurrentElement'
-import { watch, computed, defineEmits } from 'vue'
+import { watch, computed } from 'vue'
 
 const color = computed(() => useElementBackground(useCurrentElement()))
 

packages/ui/src/composables/useForm/types.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, Ref } from 'vue'
+import { ComputedRef, Ref, UnwrapRef } from 'vue'
 
 export type FormFiled<Name extends string = string> = {
   name: Ref<Name | undefined>;
@@ -15,8 +15,8 @@ export type FormFiled<Name extends string = string> = {
 }
 
 export type Form<Names extends string = string> = {
-  fields: ComputedRef<FormFiled<Names>[]>;
-  fieldsNamed: ComputedRef<Record<Names, FormFiled>>;
+  fields: ComputedRef<UnwrapRef<FormFiled<Names>[]>>;
+  fieldsNamed: ComputedRef<Record<Names, UnwrapRef<FormFiled>>>;
   fieldNames: ComputedRef<Names[]>;
   formData: ComputedRef<Record<Names, unknown>>;
   isValid: ComputedRef<boolean>;

packages/ui/src/composables/useForm/useFormParent.ts

@@ -1,4 +1,4 @@
-import { computed, provide, ref, shallowRef, type Ref, unref, toRef } from 'vue'
+import { computed, provide, ref, shallowRef, type Ref, unref, toRef, UnwrapRef } from 'vue'
 import { FormServiceKey } from './consts'
 import { Form, FormFiled } from './types'
 import { useFormChild } from './useFormChild'
@@ -21,8 +21,9 @@ export const createFormContext = <Names extends string>(options: FormParentOptio
     doShowErrorMessages: computed(() => !options.hideErrorMessages),
     doShowLoading: computed(() => !options.hideLoading),
     isFormDirty: ref(false),
-    registerField: (uid: number, field: FormFiled) => {
-      fields.value.set(uid, field as FormFiled<Names>)
+    registerField: (uid: number, field: FormFiled<Names>) => {
+      // Vue will unwrap ref automatically, but types are not for some reason
+      fields.value.set(uid, field as unknown as UnwrapRef<FormFiled<Names>>)
     },
     unregisterField: (uid: number) => {
       fields.value.delete(uid)
@@ -33,19 +34,19 @@ export const createFormContext = <Names extends string>(options: FormParentOptio
 export const useFormParent = <Names extends string = string>(options: FormParentOptions): Form<Names> => {
   const formContext = createFormContext<Names>(options)
 
-  provide(FormServiceKey, formContext)
+  provide<typeof formContext>(FormServiceKey, formContext)
 
   const { fields, isFormDirty } = formContext
 
   const fieldNames = computed(() => fields.value.map((field) => unref(field.name)).filter(Boolean) as Names[])
   const fieldsNamed = computed(() => fields.value.reduce((acc, field) => {
     if (unref(field.name)) { acc[unref(field.name) as Names] = field }
     return acc
-  }, {} as Record<Names, FormFiled>))
+  }, {} as Record<Names, UnwrapRef<FormFiled>>))
   const formData = computed(() => fields.value.reduce((acc, field) => {
     if (unref(field.name)) { acc[unref(field.name) as Names] = field.value }
     return acc
-  }, {} as Record<Names, FormFiled['value']>))
+  }, {} as Record<Names, UnwrapRef<FormFiled['value']>>))
   const isValid = computed(() => fields.value.every((field) => unref(field.isValid)))
   const isLoading = computed(() => fields.value.some((field) => unref(field.isLoading)))
   const isDirty = computed({

packages/ui/src/composables/useScrollParent.ts

@@ -4,7 +4,7 @@ import { useWindow } from './useWindow'
 type ScrollElement = HTMLElement | (Window & { scrollLeft: number; scrollTop: number })
 
 export const useScrollParent = () => {
-  const window = useWindow() as Ref<Window>
+  const window = useWindow()
 
   const fakeWindow = new Proxy(window.value || {}, {
     get: (target, key: any, rec) => {

packages/ui/tsconfig.json

@@ -22,7 +22,6 @@
     // disabled because of problems with vue-tsc
     // "isolatedModules": true,
     "types": [
-      "webpack-env",
       "vite/client",
       "jest",
       "@testing-library/jest-dom"