WIP refactor: Upgrade to Vue 3 and Vuetify 3.

.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

.editconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+}

frontend/App.vue

@@ -7,7 +7,7 @@
       <router-view v-if="displayRoute" :key="routeKey"/>
       <ac-form-dialog
           :value="$store.state.showSupport"
-          @input="setSupport"
+          @input="(val) => $store.commit('supportDialog', val)"
           @submit="supportForm.submitThen(showSuccess)"
           v-bind="supportForm.bind"
           title="Get Support or Give Feedback!"
@@ -121,13 +121,13 @@
           </v-card-actions>
         </template>
       </ac-form-dialog>
-      <v-snackbar v-model="showAlert" v-if="latestAlert"
-                  :color="latestAlert.category"
-                  :timeout="latestAlert.timeout"
+      <v-snackbar v-model="showAlert" v-if="$store.getters.latestAlert"
+                  :color="$store.getters.latestAlert.category"
+                  :timeout="$store.getters.latestAlert.timeout"
                   id="alert-bar"
                   top
       >
-        {{latestAlert.message}}
+        {{$store.getters.latestAlert.message}}
         <v-btn
             dark
             text
@@ -201,19 +201,16 @@
 </style>
 
 <script lang="ts">
-import {Getter, Mutation, State} from 'vuex-class'
+// Remove the need for these, so we can remove this dependency.
 import AcError from '@/components/navigation/AcError.vue'
 import NavBar from '@/components/navigation/NavBar.vue'
-import Component, {mixins} from 'vue-class-component'
-import {ErrorState} from '@/store/errors/types'
+import {Component, Watch, Vue, mixins, toNative} from 'vue-facing-decorator'
 import {FormController} from '@/store/forms/form-controller'
-import {Watch} from 'vue-property-decorator'
 import AcFormDialog from '@/components/wrappers/AcFormDialog.vue'
 import Viewer from '@/mixins/viewer'
-import {UserStoreState} from '@/store/profiles/types/UserStoreState'
-import {Alert} from '@/store/state'
 import AcMarkdownExplanation from '@/components/fields/AcMarkdownExplination.vue'
 import {
+  ArtVue,
   deleteCookie,
   fallback,
   fallbackBoolean,
@@ -240,18 +237,12 @@ import Submission from '@/types/Submission'
 import {Character} from '@/store/characters/types/Character'
 import {TerseUser} from '@/store/profiles/types/TerseUser'
 import RatingRefresh from '@/mixins/RatingRefresh'
+import Ratings from '@/mixins/ratings'
 
-@Component({components: {AcCookieConsent, AcPatchField, AcForm, AcMarkdownExplanation, AcError, AcFormDialog, NavBar}})
-export default class App extends mixins(Viewer, Nav, PrerenderMixin, RatingRefresh) {
-  @State('profiles') public p!: UserStoreState
-  @Mutation('supportDialog') public setSupport: any
-  @Mutation('popAlert') public popAlert: any
-  @Mutation('setMarkdownHelp') public setMarkdownHelp: any
-  @State('markdownHelp') public markdownHelp!: boolean
-  @State('errors') public errors!: ErrorState
-  @Getter('logo', {namespace: 'errors'}) public errorLogo!: string
-  @Getter('latestAlert') public latestAlert!: Alert | null
-  @State('iFrame') public iFrame!: boolean
+@Component({
+  components: {AcCookieConsent, AcPatchField, AcForm, AcMarkdownExplanation, AcError, AcFormDialog, NavBar},
+})
+class App extends mixins(Viewer, Nav, PrerenderMixin, RatingRefresh, Ratings) {
   public OFFENSIVE = 3
   public showTicketSuccess = false
   public ratingsShort = RATINGS_SHORT
@@ -334,7 +325,7 @@ export default class App extends mixins(Viewer, Nav, PrerenderMixin, RatingRefre
         status: ConnectionStatus.CONNECTING,
         // @ts-ignore
         // eslint-disable-next-line no-undef
-        version: __COMMIT_HASH__,
+        version: process.env['__COMMIT_HASH__'],
         serverVersion: '',
       },
     })
@@ -397,35 +388,35 @@ export default class App extends mixins(Viewer, Nav, PrerenderMixin, RatingRefre
   }
 
   public showSuccess() {
-    this.setSupport(false)
+    this.$store.commit('supportDialog', false)
     this.showTicketSuccess = true
   }
 
   public get displayRoute() {
-    return this.viewer !== null && !this.errors.code
+    return this.viewer !== null && !this.$store.state.errors.code
   }
 
   public get showMarkdownHelp() {
-    return this.markdownHelp
+    return this.$store.state.markdownHelp
   }
 
   public set showMarkdownHelp(val: boolean) {
-    this.setMarkdownHelp(val)
+    this.$store.commit('setMarkdownHelp', val)
   }
 
   public get showAlert() {
     if (this.alertDismissed) {
       return false
     }
-    return Boolean(this.latestAlert)
+    return Boolean(this.$store.getters.latestAlert)
   }
 
   public set showAlert(val) {
     this.alertDismissed = !val
     if (!val) {
       this.alertDismissed = true
       this.$nextTick(() => {
-        this.popAlert()
+        this.$store.commit('popAlert')
         this.alertDismissed = false
       })
     }
@@ -501,6 +492,8 @@ export default class App extends mixins(Viewer, Nav, PrerenderMixin, RatingRefre
     this.supportForm.fields.referring_url.update(this.$route.fullPath)
   }
 }
+
+export default toNative(App)
 </script>
 
 <style scoped>

frontend/components/AcAsset.vue

@@ -142,17 +142,18 @@
 </style>
 
 <script lang="ts">
-import Component, {mixins} from 'vue-class-component'
-import {Prop} from 'vue-property-decorator'
+import {Component, Vue} from 'vue-facing-decorator'
+import {Prop} from 'vue-facing-decorator'
 import AcVideoPlayer from '@/components/AcVideoPlayer.vue'
 import AcAudioPlayer from '@/components/AcAudioPlayer.vue'
 import AcMarkdownViewer from '@/components/AcMarkdownViewer.vue'
 import {COMPONENT_EXTENSIONS, getExt} from '@/lib/lib'
 import AssetBase from '@/mixins/asset_base'
 import {Asset} from '@/types/Asset'
+import {toNative} from 'vue-facing-decorator'
 
-@Component({components: {AcVideoPlayer, AcAudioPlayer, AcMarkdownViewer}})
-export default class AcAsset extends mixins(AssetBase) {
+@Component({components: {AcVideoPlayer, AcAudioPlayer, AcMarkdownViewer}, mixins: [AssetBase]})
+class AcAsset extends Vue {
   @Prop({default: null})
   public asset!: Asset|null
 
@@ -207,4 +208,5 @@ export default class AcAsset extends mixins(AssetBase) {
     return this.asset.file.full
   }
 }
+export default toNative(AcAsset)
 </script>

frontend/components/AcAvatar.vue

@@ -42,20 +42,20 @@
 </style>
 
 <script lang="ts">
-import Vue from 'vue'
-import Component from 'vue-class-component'
-import {Prop, Watch} from 'vue-property-decorator'
+import {Vue, Component} from 'vue-facing-decorator'
+import {Prop, Watch} from 'vue-facing-decorator'
 import {ProfileController} from '@/store/profiles/controller'
 import {userHandle} from '@/store/profiles/handles'
 import {User} from '@/store/profiles/types/User'
 import {artCall, profileLink} from '@/lib/lib'
 import {profileRegistry} from '@/store/profiles/registry'
 import {TerseUser} from '@/store/profiles/types/TerseUser'
 import AcLink from '@/components/wrappers/AcLink.vue'
+import {toNative} from 'vue-facing-decorator'
 @Component({
   components: {AcLink},
 })
-export default class AcAvatar extends Vue {
+class AcAvatar extends Vue {
     // The logic for this module is a bit complex because we don't necessarily want to store the user in Vuex for
     // all of the cases we'll use this. For example, when searching for users, it would be wasteful or incomplete to
     // store the user in Vuex.
@@ -156,4 +156,5 @@ export default class AcAvatar extends Vue {
       this.buildHandler(this.username)
     }
 }
+export default toNative(AcAvatar)
 </script>

frontend/components/AcCharacterPreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-responsive v-if="$vuetify.breakpoint.smAndDown || mini" aspect-ratio="1" class="character" :class="{unavailable}">
+  <v-responsive v-if="$vuetify.display.smAndDown || mini" aspect-ratio="1" class="character" :class="{unavailable}">
     <v-card>
       <v-card-text class="pa-2">
         <v-row no-gutters>

frontend/components/AcCookieConsent.vue

@@ -83,14 +83,14 @@
 </template>
 
 <script lang="ts">
-import Component from 'vue-class-component'
-import Vue from 'vue'
+import {Vue, Component} from 'vue-facing-decorator'
 import AcFormDialog from '@/components/wrappers/AcFormDialog.vue'
+import {toNative} from 'vue-facing-decorator'
 
 @Component({
   components: {AcFormDialog},
 })
-export default class AcCookieConsent extends Vue {
+class AcCookieConsent extends Vue {
   required = true
   forceRecalculate = 0
 
@@ -176,4 +176,5 @@ export default class AcCookieConsent extends Vue {
     this.performActions()
   }
 }
+export default toNative(AcCookieConsent)
 </script>

frontend/components/AcDeliverablePreview.vue

@@ -27,18 +27,20 @@
 </template>
 
 <script lang="ts">
-import Component, {mixins} from 'vue-class-component'
-import {Prop} from 'vue-property-decorator'
+import {Component, Vue} from 'vue-facing-decorator'
+import {Prop} from 'vue-facing-decorator'
 import Deliverable from '@/types/Deliverable'
 import Order from '@/types/Order'
 import AcLink from '@/components/wrappers/AcLink.vue'
 import AcAsset from '@/components/AcAsset.vue'
 import AcDeliverableStatus from '@/components/AcDeliverableStatus.vue'
 import Formatting from '@/mixins/formatting'
+import {toNative} from 'vue-facing-decorator'
 @Component({
   components: {AcDeliverableStatus, AcOrderStatus: AcDeliverableStatus, AcAsset, AcLink},
+  mixins: [Formatting],
 })
-export default class AcDeliverablePreview extends mixins(Formatting) {
+class AcDeliverablePreview extends Vue {
   @Prop({required: true})
   public deliverable!: Deliverable
 
@@ -52,4 +54,5 @@ export default class AcDeliverablePreview extends mixins(Formatting) {
     return {name: `${this.scope}Deliverable`, params: {orderId: this.order.id, deliverableId: this.deliverable.id}}
   }
 }
+export default toNative(AcDeliverablePreview)
 </script>

frontend/components/AcDeliverableStatus.vue

@@ -6,13 +6,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import Component from 'vue-class-component'
-import {Prop} from 'vue-property-decorator'
+import {Vue, Component} from 'vue-facing-decorator'
+import {Prop} from 'vue-facing-decorator'
 import Deliverable from '@/types/Deliverable'
+import {toNative} from 'vue-facing-decorator'
 
 @Component
-export default class AcDeliverableStatus extends Vue {
+class AcDeliverableStatus extends Vue {
   public STATUSES = {
     0: {text: 'Waiting', icon: 'schedule', color: 'white', dark: false},
     1: {text: 'NEW!', icon: 'star', color: 'primary', dark: true},
@@ -31,4 +31,5 @@ export default class AcDeliverableStatus extends Vue {
   @Prop({required: true})
   public deliverable!: Deliverable
 }
+export default toNative(AcDeliverableStatus)
 </script>

frontend/components/AcDraggableList.vue

@@ -19,16 +19,16 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import Component from 'vue-class-component'
+import {Vue, Component} from 'vue-facing-decorator'
 import draggable from 'vuedraggable'
 import AcDraggableNavs from '@/components/AcDraggableNavs.vue'
 import AcPaginated from '@/components/wrappers/AcPaginated.vue'
-import {Prop} from 'vue-property-decorator'
+import {Prop} from 'vue-facing-decorator'
 import {ListController} from '@/store/lists/controller'
 import diff, {DiffPatch} from 'list-diff.js'
 import Submission from '@/types/Submission'
 import {artCall} from '@/lib/lib'
+import {toNative} from 'vue-facing-decorator'
 
 @Component({
   components: {
@@ -37,7 +37,7 @@ import {artCall} from '@/lib/lib'
     draggable,
   },
 })
-export default class AcDraggableList extends Vue {
+class AcDraggableList extends Vue {
   @Prop({default: false})
   public trackPages!: false
 
@@ -118,4 +118,5 @@ export default class AcDraggableList extends Vue {
     ) / 2
   }
 }
+export default toNative(AcDraggableList)
 </script>

frontend/components/AcDraggableNavs.vue

@@ -41,20 +41,20 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import {Prop} from 'vue-property-decorator'
+import {Prop} from 'vue-facing-decorator'
 import draggable from 'vuedraggable'
 import {artCall} from '@/lib/lib'
 import {SingleController} from '@/store/singles/controller'
 import {ListController} from '@/store/lists/controller'
-import Component from 'vue-class-component'
+import {Vue, Component} from 'vue-facing-decorator'
+import {toNative} from 'vue-facing-decorator'
 
 @Component({
   components: {
     draggable,
   },
 })
-export default class AcDraggableNavs<T> extends Vue {
+class AcDraggableNavs<T> extends Vue {
   @Prop({required: true})
   public sortableList!: SingleController<T>[]
 
@@ -104,4 +104,5 @@ export default class AcDraggableNavs<T> extends Vue {
     controller.deleted = true
   }
 }
+export default toNative(AcDraggableNavs<T>)
 </script>

frontend/components/AcEscrowLabel.vue

@@ -32,12 +32,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import Component from 'vue-class-component'
-import {Prop} from 'vue-property-decorator'
+import {Vue, Component} from 'vue-facing-decorator'
+import {Prop} from 'vue-facing-decorator'
+import {toNative} from 'vue-facing-decorator'
 
 @Component
-export default class AcEscrowLabel extends Vue {
+class AcEscrowLabel extends Vue {
   @Prop({required: true})
   public escrow!: boolean
 
@@ -47,4 +47,5 @@ export default class AcEscrowLabel extends Vue {
   @Prop({required: true})
   public name!: string
 }
+export default toNative(AcEscrowLabel)
 </script>