Upgrade frontend dependencies

frontend/components/auth/SocialLogin.vue

@@ -15,7 +15,8 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
+import type { PropType } from 'vue'
+import Vue from 'vue'
 
 export default Vue.extend({
   props: {

frontend/components/comment/CommentList.vue

@@ -49,11 +49,12 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
 import { mdiMagnify } from '@mdi/js'
-import { DataOptions } from 'vuetify/types'
 import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format'
 import VueFilterDateParse from '@vuejs-community/vue-filter-date-parse'
+import type { PropType } from 'vue'
+import Vue from 'vue'
+import { DataOptions } from 'vuetify/types'
 import { CommentReadDTO } from '~/services/application/comment/commentData'
 Vue.use(VueFilterDateFormat)
 Vue.use(VueFilterDateParse)

frontend/components/configAutoLabeling/ConfigCreationForm.vue

@@ -42,12 +42,12 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { StepCounter } from '@/domain/models/utils/stepper'
 import ConfigHeader from './form/ConfigHeader.vue'
 import ConfigTemplateName from './form/ConfigTemplateName.vue'
 import ConfigTemplate from './form/ConfigTemplate.vue'
 import ConfigParameters from './form/ConfigParameters.vue'
 import ConfigLabelMapping from './form/ConfigLabelMapping.vue'
+import { StepCounter } from '@/domain/models/utils/stepper'
 import { ConfigItem, Fields } from '~/domain/models/autoLabeling/config'
 
 export default Vue.extend({

frontend/components/configAutoLabeling/ConfigList.vue

@@ -50,9 +50,9 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import ConfigCreationForm from './ConfigCreationForm.vue'
 import { ConfigItemResponse } from '@/repositories/autoLabeling/config/apiConfigRepository'
 import ConfirmForm from '@/components/utils/ConfirmForm.vue'
-import ConfigCreationForm from './ConfigCreationForm.vue'
 import { ConfigItemList } from '~/domain/models/autoLabeling/config'
 
 export default Vue.extend({

frontend/components/configAutoLabeling/form/ConfigTemplateName.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script lang="ts">
-import { templateNameRules } from '@/rules/index'
 import Vue from 'vue'
+import { templateNameRules } from '@/rules/index'
 import { Project } from '~/domain/models/project/project'
 
 export default Vue.extend({

frontend/components/example/AudioList.vue

@@ -56,7 +56,8 @@
 
 <script lang="ts">
 import { mdiMagnify } from '@mdi/js'
-import Vue, { PropType } from 'vue'
+import type { PropType } from 'vue'
+import Vue from 'vue'
 import { DataOptions } from 'vuetify/types'
 import { ExampleDTO } from '~/services/application/example/exampleData'
 

frontend/components/example/DocumentList.vue

@@ -53,8 +53,9 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
 import { mdiMagnify } from '@mdi/js'
+import type { PropType } from 'vue'
+import Vue from 'vue'
 import { DataOptions } from 'vuetify/types'
 import { ExampleDTO } from '~/services/application/example/exampleData'
 

frontend/components/example/ImageList.vue

@@ -60,7 +60,8 @@
 
 <script lang="ts">
 import { mdiMagnify } from '@mdi/js'
-import Vue, { PropType } from 'vue'
+import type { PropType } from 'vue'
+import Vue from 'vue'
 import { DataOptions } from 'vuetify/types'
 import { ExampleDTO } from '~/services/application/example/exampleData'
 

frontend/components/label/FormCreate.vue

@@ -82,8 +82,9 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
 import { mdiReload } from '@mdi/js'
+import type { PropType } from 'vue'
+import Vue from 'vue'
 import { LabelDTO } from '~/services/application/label/labelData'
 
 export default Vue.extend({

frontend/components/label/LabelList.vue

@@ -43,8 +43,9 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
-import { mdiPencil, mdiMagnify } from '@mdi/js'
+import { mdiMagnify, mdiPencil } from '@mdi/js'
+import type { PropType } from 'vue'
+import Vue from 'vue'
 import { LabelDTO } from '~/services/application/label/labelData'
 
 export default Vue.extend({

frontend/components/member/FormCreate.vue

@@ -52,12 +52,13 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
 import { mdiAccount, mdiCreditCardOutline } from '@mdi/js'
+import type { PropType } from 'vue'
+import Vue from 'vue'
 import BaseCard from '@/components/utils/BaseCard.vue'
-import { UserDTO } from '~/services/application/user/userData'
-import { RoleDTO } from '~/services/application/role/roleData'
 import { MemberDTO } from '~/services/application/member/memberData'
+import { RoleDTO } from '~/services/application/role/roleData'
+import { UserDTO } from '~/services/application/user/userData'
 
 export default Vue.extend({
   components: {

frontend/components/metrics/LabelDistribution.vue

@@ -16,7 +16,8 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
+import type { PropType } from 'vue'
+import Vue from 'vue'
 import BarChart from '@/components/metrics/ChartBar.vue'
 import { Distribution } from '~/domain/models/metrics/metrics'
 import { LabelDTO } from '~/services/application/label/labelData'

frontend/components/project/FormDelete.vue

@@ -20,8 +20,9 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue'
+import Vue from 'vue'
 import BaseCard from '@/components/utils/BaseCard.vue'
-import Vue, { PropType } from 'vue'
 import { Project } from '~/domain/models/project/project'
 
 export default Vue.extend({

frontend/components/project/ProjectList.vue

@@ -49,7 +49,8 @@
 import { mdiMagnify } from '@mdi/js'
 import { dateFormat } from '@vuejs-community/vue-filter-date-format'
 import { dateParse } from '@vuejs-community/vue-filter-date-parse'
-import Vue, { PropType } from 'vue'
+import type { PropType } from 'vue'
+import Vue from 'vue'
 import { DataOptions } from 'vuetify/types'
 import { Project } from '~/domain/models/project/project'
 

frontend/components/project/TagList.vue

@@ -14,7 +14,8 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
+import type { PropType } from 'vue'
+import Vue from 'vue'
 export default Vue.extend({
   props: {
     value: {

frontend/components/tasks/boundingBox/VBoundingBox.vue

@@ -36,15 +36,16 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
 import Konva from 'konva'
 import { Box } from 'konva/lib/shapes/Transformer.d'
-import LabelProps from '@/domain/models/tasks/shared/LabelProps'
+import type { PropType } from 'vue'
+import Vue from 'vue'
+import VRectangle from './VRectangle.vue'
 import BaseImage from '@/components/tasks/image/BaseImage.vue'
-import RectangleProps from '@/domain/models/tasks/boundingbox/RectangleProps'
 import Rectangle from '@/domain/models/tasks/boundingbox/Rectangle'
-import { transform, inverseTransform } from '@/domain/models/tasks/shared/Scaler'
-import VRectangle from './VRectangle.vue'
+import RectangleProps from '@/domain/models/tasks/boundingbox/RectangleProps'
+import LabelProps from '@/domain/models/tasks/shared/LabelProps'
+import { inverseTransform, transform } from '@/domain/models/tasks/shared/Scaler'
 
 export default Vue.extend({
   name: 'VBoundingBox',

frontend/components/tasks/boundingBox/VRectangle.vue

@@ -20,10 +20,11 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
 import Konva from 'konva'
+import type { PropType } from 'vue'
+import Vue from 'vue'
+import { inverseTransform, transform } from '@/domain/models/tasks/shared/Scaler'
 import Rectangle from '@/domain/models/tasks/boundingbox/Rectangle'
-import { transform, inverseTransform } from '@/domain/models/tasks/shared/Scaler'
 
 export default Vue.extend({
   props: {

frontend/components/tasks/segmentation/VEditingRegion.vue

@@ -29,9 +29,9 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import Polygon from '@/domain/models/tasks/segmentation/Polygon'
 import VPolygon from './VPolygon.vue'
 import VPoint from './VPoint.vue'
+import Polygon from '@/domain/models/tasks/segmentation/Polygon'
 
 export default Vue.extend({
   components: {

frontend/components/tasks/segmentation/VRegion.vue

@@ -66,11 +66,11 @@
 import Vue from 'vue'
 import Konva from 'konva'
 import Flatten from '@flatten-js/core'
+import VPolygon from './VPolygon.vue'
+import VPoint from './VPoint.vue'
 import Polygon from '@/domain/models/tasks/segmentation/Polygon'
 import LineSegment from '@/domain/models/tasks/segmentation/LineSegment'
 import { transform } from '@/domain/models/tasks/shared/Scaler'
-import VPolygon from './VPolygon.vue'
-import VPoint from './VPoint.vue'
 import Point = Flatten.Point
 
 export default Vue.extend({

frontend/components/tasks/segmentation/VSegmentation.vue

@@ -42,15 +42,16 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
 import Konva from 'konva'
+import type { PropType } from 'vue'
+import Vue from 'vue'
+import VEditingRegion from './VEditingRegion.vue'
+import VRegion from './VRegion.vue'
+import BaseImage from '@/components/tasks/image/BaseImage.vue'
 import Polygon from '@/domain/models/tasks/segmentation/Polygon'
 import PolygonProps from '@/domain/models/tasks/segmentation/PolygonProps'
 import LabelProps from '@/domain/models/tasks/shared/LabelProps'
-import BaseImage from '@/components/tasks/image/BaseImage.vue'
 import { transform } from '@/domain/models/tasks/shared/Scaler'
-import VEditingRegion from './VEditingRegion.vue'
-import VRegion from './VRegion.vue'
 
 export default Vue.extend({
   name: 'VSegmentation',

frontend/components/tasks/sequenceLabeling/EntityEditor.vue

@@ -39,11 +39,12 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
 import VAnnotator from 'v-annotator'
+import type { PropType } from 'vue'
+import Vue from 'vue'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import LabelingMenu from './LabelingMenu.vue'
 import { SpanDTO } from '~/services/application/tasks/sequenceLabeling/sequenceLabelingData'
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 export default Vue.extend({
   components: {

frontend/components/tasks/sidebar/AnnotationProgress.vue

@@ -22,7 +22,8 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue'
+import type { PropType } from 'vue'
+import Vue from 'vue'
 import { MyProgress } from '@/domain/models/metrics/metrics'
 
 export default Vue.extend({

frontend/domain/models/project/project.ts

@@ -21,7 +21,7 @@ export const allProjectTypes = <const>[
   Segmentation,
   Speech2text
 ]
-export type ProjectType = typeof allProjectTypes[number]
+export type ProjectType = (typeof allProjectTypes)[number]
 const MIN_LENGTH = 1
 const MAX_PROJECT_NAME_LENGTH = 100
 

frontend/domain/models/tasks/boundingbox/Rectangle.ts

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid'
-import LabelProps from '@/domain/models/tasks/shared/LabelProps'
 import RectangleProps from './RectangleProps'
+import LabelProps from '@/domain/models/tasks/shared/LabelProps'
 
 export default class Rectangle {
   constructor(

frontend/domain/models/tasks/segmentation/Polygon.ts

@@ -1,9 +1,9 @@
 import { v4 as uuidv4 } from 'uuid'
 import Flatten from '@flatten-js/core'
-import LabelProps from '@/domain/models/tasks/shared/LabelProps'
 import LineSegment from './LineSegment'
 import PolygonProps from './PolygonProps'
 import ValidationError from './errors'
+import LabelProps from '@/domain/models/tasks/shared/LabelProps'
 import Point = Flatten.Point
 import Vector = Flatten.Vector
 

frontend/package.json

@@ -18,17 +18,18 @@
   },
   "dependencies": {
     "@flatten-js/core": "^1.3.4",
-    "@nuxt/vue-app": "^2.15.7",
-    "@nuxt/webpack": "^2.15.*",
+    "@nuxt/vue-app": "^2.16.0",
+    "@nuxt/webpack": "^2.16.0",
     "@nuxtjs/axios": "^5.13.6",
-    "@nuxtjs/composition-api": "^0.25.0",
+    "@nuxtjs/composition-api": "^0.33.1",
+    "@nuxtjs/i18n": "^7.3.1",
     "@nuxtjs/proxy": "^2.1.0",
     "@nuxtjs/vuetify": "^1.*",
     "@toast-ui/vue-editor": "^2.5.3",
     "@vuejs-community/vue-filter-date-format": "^1.6.3",
     "@vuejs-community/vue-filter-date-parse": "^1.1.6",
     "axios": "^0.21.1",
-    "chart.js": "^2.*",
+    "chart.js": "^2",
     "class-transformer": "^0.5.1",
     "codemirror": "^5.*",
     "consola": "^2.15.3",
@@ -47,7 +48,7 @@
     "uuid": "^8.3.2",
     "v-annotator": "0.1.28",
     "vue": "^2.6.14",
-    "vue-chartjs": "^3.5.1",
+    "vue-chartjs": "^3",
     "vue-filepond": "^6.0.3",
     "vue-konva": "2",
     "vue-shortkey": "^3.1.7",
@@ -64,13 +65,13 @@
     "@babel/eslint-parser": "^7.14.7",
     "@babel/preset-env": "^7.15.8",
     "@mdi/js": "^6.5.95",
-    "@nuxt/types": "^2.15.7",
+    "@nuxt/types": "^2.16.0",
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/eslint-config": "^6.0.1",
     "@nuxtjs/eslint-config-typescript": "^6.0.1",
     "@nuxtjs/eslint-module": "^2.0.0",
     "@nuxtjs/google-analytics": "^2.4.0",
-    "@nuxtjs/google-fonts": "^1.3.0",
+    "@nuxtjs/google-fonts": "^2.0.0",
     "@types/lodash": "^4.14.171",
     "@types/uuid": "^8.3.4",
     "@types/wavesurfer.js": "^5.1.0",

frontend/pages/auth.vue

@@ -14,10 +14,10 @@
 </template>
 
 <script lang="ts">
-import FormLogin from '@/components/auth/FormLogin.vue'
-import SocialLogin from '@/components/auth/SocialLogin.vue'
 import Vue from 'vue'
 import { mapActions } from 'vuex'
+import FormLogin from '@/components/auth/FormLogin.vue'
+import SocialLogin from '@/components/auth/SocialLogin.vue'
 
 export default Vue.extend({
   components: {

frontend/pages/demo/image-caption/index.vue

@@ -63,8 +63,8 @@
 </template>
 
 <script>
-import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import { mdiPencil, mdiDeleteOutline } from '@mdi/js'
+import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 
 export default {
   components: {

frontend/pages/projects/_id/comments/index.vue

@@ -25,9 +25,9 @@
 </template>
 
 <script lang="ts">
-import CommentList from '@/components/comment/CommentList.vue'
 import _ from 'lodash'
 import Vue from 'vue'
+import CommentList from '@/components/comment/CommentList.vue'
 import FormDelete from '~/components/comment/FormDelete.vue'
 import { Project } from '~/domain/models/project/project'
 import { getLinkToAnnotationPage } from '~/presenter/linkToAnnotationPage'