Upgrade/vue3

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
     root: true,
     extends: [
         'airbnb-base',
-        'plugin:vue/recommended',
+        'plugin:vue/vue3-recommended',
     ],
     plugins: [
         'vue',
@@ -20,7 +20,7 @@ module.exports = {
         'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
         indent: ['error', 4],
-        'arrow-parens': ["error", "as-needed"],
+        'arrow-parens': ['error', 'as-needed'],
         'vue/html-indent': 0,
         'vue/attributes-order': 0,
         'no-plusplus': 0,
@@ -29,7 +29,9 @@ module.exports = {
         'no-underscore-dangle': 0,
         'func-names': 0,
         'no-shadow': 0,
+        'vue/multi-word-component-names': 0,
         'vue/max-attributes-per-line': 0,
+        'vue/first-attribute-linebreak': 0,
         'no-return-assign': ['error', 'except-parens'],
         'vue/html-closing-bracket-newline': ['error', {
             singleline: 'never',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/ui",
-  "version": "4.2.12",
+  "version": "5.0.30",
   "description": "Laravel Enso UI",
   "main": "index.js",
   "scripts": {
@@ -23,81 +23,78 @@
   },
   "homepage": "https://github.com/enso-ui/ui#readme",
   "dependencies": {
-    "@enso-ui/auth": "^1.0",
-    "@enso-ui/accessories": "^3.0",
-    "@enso-ui/bookmarks": "^1.0",
-    "@enso-ui/bulma": "^4.0",
-    "@enso-ui/charts": "^2.0",
-    "@enso-ui/companies": "^3.0",
-    "@enso-ui/confirmation": "^1.0",
+    "@enso-ui/accessories": "^4.0",
+    "@enso-ui/auth": "^2.0",
+    "@enso-ui/bookmarks": "^2.0",
+    "@enso-ui/charts": "^3.0",
+    "@enso-ui/companies": "^4.0",
+    "@enso-ui/confirmation": "^2.0",
     "@enso-ui/date": "^1.0",
-    "@enso-ui/directives": "^1.0",
-    "@enso-ui/divider": "^1.0",
-    "@enso-ui/dropdown": "^2.0",
-    "@enso-ui/dropdown-indicator": "^1.0",
+    "@enso-ui/directives": "^2.0",
+    "@enso-ui/divider": "^2.0",
+    "@enso-ui/dropdown": "^3.0",
+    "@enso-ui/dropdown-indicator": "^2.0",
     "@enso-ui/enums": "^1.0",
-    "@enso-ui/files": "^3.0",
-    "@enso-ui/forms": "^2.0",
-    "@enso-ui/io": "^1.0",
-    "@enso-ui/loader": "^2.0",
-    "@enso-ui/localisation": "^3.0",
-    "@enso-ui/logs": "^3.0",
-    "@enso-ui/menus": "^3.0",
-    "@enso-ui/mixins": "^2.0",
-    "@enso-ui/modal": "^2.0",
-    "@enso-ui/notifications": "^1.0",
-    "@enso-ui/people": "^3.0",
-    "@enso-ui/permissions": "^3.0",
-    "@enso-ui/progress-bar": "^1.0",
-    "@enso-ui/roles": "^3.0",
+    "@enso-ui/files": "^4.0",
+    "@enso-ui/forms": "^3.0",
+    "@enso-ui/io": "^2.0",
+    "@enso-ui/laravel-validation": "^2.0",
+    "@enso-ui/loader": "^3.0",
+    "@enso-ui/localisation": "^4.0",
+    "@enso-ui/logs": "^4.0",
+    "@enso-ui/menus": "^4.0",
+    "@enso-ui/mixins": "^3.0",
+    "@enso-ui/modal": "^3.0",
+    "@enso-ui/notifications": "^2.0",
+    "@enso-ui/people": "^4.0",
+    "@enso-ui/permissions": "^4.0",
+    "@enso-ui/progress-bar": "^2.0",
+    "@enso-ui/pull-to-refresh": "^0.1.0",
+    "@enso-ui/roles": "^4.0",
     "@enso-ui/route-mapper": "^1.0",
+    "@enso-ui/scroll-to-top": "^3.0",
     "@enso-ui/sentry": "^1.0",
-    "@enso-ui/scroll-to-top": "^2.0",
-    "@enso-ui/switch": "^1.0",
-    "@enso-ui/tables": "^2.0",
-    "@enso-ui/tabs": "^1.1",
-    "@enso-ui/toastr": "^2.0",
-    "@enso-ui/transitions": "^1.0",
-    "@enso-ui/typeahead": "^2.0",
-    "@enso-ui/uploader": "^1.0",
-    "@enso-ui/user-groups": "^1.0",
-    "@enso-ui/users": "^1.0",
-    "@enso-ui/laravel-validation": "^1.0",
+    "@enso-ui/switch": "^2.0",
+    "@enso-ui/tables": "^3.0",
+    "@enso-ui/tabs": "^2.0",
+    "@enso-ui/themes": "^3.0",
+    "@enso-ui/toastr": "^3.0",
+    "@enso-ui/transitions": "^2.0",
+    "@enso-ui/typeahead": "^3.0",
+    "@enso-ui/uploader": "^2.0",
+    "@enso-ui/user-groups": "^2.0",
+    "@enso-ui/users": "^2.0",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.2",
-    "@fortawesome/free-brands-svg-icons": "^5.2.0",
+    "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-regular-svg-icons": "^5.2.0",
-    "@fortawesome/free-solid-svg-icons": "^5.2.0",
-    "@fortawesome/vue-fontawesome": "^0.1.1",
-    "@sentry/browser": "^6.9.0",
-    "@sentry/integrations": "^6.9.0",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/vue-fontawesome": "3.0.0-5",
+    "@sentry/tracing": "^6.16.1",
+    "@sentry/vue": "^6.16.1",
     "animate.css": "^4.0.0",
     "axios": "^0.19.0",
     "bulma": "^0.9.0",
-    "driver.js": "^0.9.5",
     "flag-icon-css": "^3.0.0",
-    "highlight.js": "^9.15.0",
     "laravel-echo": "^1.5.3",
     "lodash": "^4.17.11",
-    "pusher-js": "^5.0.0",
-    "v-tooltip": "^2.0.0",
-    "vue": "^2.5.16",
-    "vue-router": "^3.0.2",
-    "vue-pull-refresh": "^0.2.7",
-    "vuedraggable": "^2.16.0",
-    "vuex": "^3.1.0"
+    "pusher-js": "^7.0.0",
+    "tiny-emitter": "^2.1.0",
+    "v-tooltip": "^4.0.0-beta.2",
+    "vue": "^3.0",
+    "vue-router": "^4.0.0",
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@vue/cli-plugin-babel": "^4.0.5",
-    "@vue/cli-plugin-eslint": "^4.0.5",
-    "@vue/cli-service": "^4.0.5",
+    "@vue/cli-plugin-babel": "5.0.0-beta.6",
+    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
     "@vue/eslint-config-airbnb": "^5.0.0",
     "autoprefixer": "^9.6.1",
     "babel-eslint": "^10.0.1",
     "cross-env": "^6.0.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-vue": "^6.0.0"
+    "eslint-plugin-vue": "^8.0.3"
   }
 }

src/bulma/Root.vue

@@ -1,34 +1,31 @@
 <template>
-    <core-app>
-        <template v-slot:default="{ isAuth, home, direction }">
-            <div id="app"
-                :dir="direction">
-                <document-title/>
-                <loader/>
-                <fade>
-                    <auth v-if="!isAuth"/>
-                    <home v-else-if="home"/>
-                    <default v-else/>
-                </fade>
-            </div>
+    <base-root>
+        <template #default="{ isAuth, home}">
+            <document-title/>
+            <loader/>
+            <fade mode="out-in">
+                <auth v-if="!isAuth"/>
+                <home v-else-if="home"/>
+                <default v-else/>
+            </fade>
         </template>
-    </core-app>
+    </base-root>
 </template>
 
 <script>
 import { Fade } from '@enso-ui/transitions';
-import CoreApp from '../core/App.vue';
+import Auth from '@enso-ui/auth/src/bulma/layouts/Auth.vue';
+import BaseRoot from '../core/Root.vue';
 import DocumentTitle from '../core/components/DocumentTitle.vue';
 import Loader from './components/Loader.vue';
-import Auth from '@enso-ui/auth/src/bulma/layouts/Auth.vue';
 import Home from './layouts/Home.vue';
 import Default from './layouts/Default.vue';
 
 export default {
     name: 'Root',
 
     components: {
-        CoreApp, DocumentTitle, Loader, Fade, Auth, Home, Default,
+        BaseRoot, DocumentTitle, Loader, Fade, Auth, Home, Default,
     },
 };
 </script>

src/bulma/components/AppFooter.vue

@@ -1,9 +1,9 @@
 <template>
-    <base-app-footer>
-        <template v-slot:default="{ meta }">
-            <footer class="footer">
-                <div class="content has-text-centered">
-                    <div class="level">
+    <footer class="footer">
+        <div class="content has-text-centered">
+            <div class="level">
+                <base-app-footer>
+                    <template #default="{ meta }">
                         <div class="level-item">
                             <strong class="mr-1">
                                 {{ meta.appName }} v{{ meta.version }}
@@ -42,33 +42,34 @@
                                     height="28">
                             </a>
                         </div>
-                    </div>
-                    <div class="level">
-                        <div class="level-item">
-                            <strong>{{ i18n('Backed by') }}:</strong>
-                            <a href="https://earthlink.ro"
-                                target="_blank">
-                                <figure class="image earthlink">
-                                    <img src="/images/earthlink.svg">
-                                </figure>
-                            </a>
-                        </div>
-                    </div>
-                    <div>
-                        <a href="https://github.com/laravel-enso/enso"
-                            target="_blank">
-                            <span class="icon">
-                                <fa :icon="['fab', 'github']"/>
-                            </span>
-                        </a>
-                    </div>
+                    </template>
+                </base-app-footer>
+            </div>
+            <div class="level">
+                <div class="level-item">
+                    <strong>{{ i18n('Backed by') }}:</strong>
+                    <a href="https://earthlink.ro"
+                        target="_blank">
+                        <figure class="image earthlink">
+                          <img src="/images/earthlink.svg">
+                        </figure>
+                    </a>
                 </div>
-            </footer>
-        </template>
-    </base-app-footer>
+            </div>
+            <div>
+                <a href="https://github.com/laravel-enso/enso"
+                    target="_blank">
+                    <span class="icon">
+                        <fa :icon="['fab', 'github']"/>
+                    </span>
+                </a>
+            </div>
+        </div>
+    </footer>
 </template>
 
 <script>
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faHeart } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
@@ -79,9 +80,9 @@ library.add(faHeart, faGithub);
 export default {
     name: 'AppFooter',
 
-    inject: ['i18n'],
+    components: { BaseAppFooter, Fa },
 
-    components: { BaseAppFooter },
+    inject: ['i18n'],
 };
 </script>
 

src/bulma/components/Breadcrumbs.vue

@@ -1,8 +1,8 @@
 <template>
-    <core-breadcrumbs>
-        <template v-slot:default="{ breadcrumbs, hasNavigation }">
-            <nav class="breadcrumb is-small is-bold has-dot-separator">
-                <ul>
+    <nav class="breadcrumb is-small is-bold has-dot-separator">
+        <ul>
+            <core-breadcrumbs>
+                <template #default="{ breadcrumbs, hasNavigation }">
                     <li v-for="breadcrumb in breadcrumbs"
                         :key="breadcrumb.name"
                         :class="{'is-active': !hasNavigation(breadcrumb)}">
@@ -14,10 +14,10 @@
                             {{ i18n(breadcrumb.name) }}
                         </a>
                     </li>
-                </ul>
-            </nav>
-        </template>
-    </core-breadcrumbs>
+                </template>
+            </core-breadcrumbs>
+        </ul>
+    </nav>
 </template>
 
 <script>

src/bulma/components/Loader.vue

@@ -1,6 +1,6 @@
 <template>
     <core-loader>
-        <template v-slot:default="{ visible, progress }">
+        <template #default="{ visible, progress }">
             <progress-bar :progress="progress"
                 :transition="0.3"
                 color="#f44336"

src/bulma/components/PageHeader.vue

@@ -1,17 +1,21 @@
 <template>
     <core-page-header>
-        <template v-slot:default="{ pageTitle }">
+        <template #default="{ pageTitle }">
             <div class="level">
                 <div class="level-left is-hidden-mobile">
                     <div class="level-item">
-                        <p class="title is-5 page-title animated fadeIn">
-                            {{ i18n(pageTitle) }}
-                        </p>
+                        <fade>
+                            <p class="title is-5 page-title">
+                                {{ i18n(pageTitle) }}
+                            </p>
+                        </fade>
                     </div>
                 </div>
                 <div class="level-right">
                     <div class="level-item">
-                        <breadcrumbs class="animated fadeIn"/>
+                        <fade>
+                            <breadcrumbs/>
+                        </fade>
                     </div>
                 </div>
             </div>
@@ -20,13 +24,14 @@
 </template>
 
 <script>
+import { Fade } from '@enso-ui/transitions';
 import CorePageHeader from '../../core/components/PageHeader.vue';
 import Breadcrumbs from './Breadcrumbs.vue';
 
 export default {
     name: 'PageHeader',
 
-    components: { CorePageHeader, Breadcrumbs },
+    components: { Breadcrumbs, CorePageHeader, Fade },
 
     inject: ['i18n'],
 };