Vue 3

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
     parser: '@typescript-eslint/parser'
   },
   extends: [
-    'plugin:vue/strongly-recommended',
+    'plugin:vue/vue3-strongly-recommended',
     '@vue/typescript/recommended',
     '@vue/prettier',
     '@vue/prettier/@typescript-eslint'
@@ -32,7 +32,10 @@ module.exports = {
     ],
     '@typescript-eslint/no-unused-vars': 'off',
     'unused-imports/no-unused-imports-ts': 'warn',
-    'unused-imports/no-unused-vars-ts': 'off'
+    'unused-imports/no-unused-vars-ts': 'off',
+    // TODO: 消す
+    'vue/require-default-prop': 'off',
+    'vue/require-explicit-emits': 'off'
   },
   overrides: [
     {

.github/workflows/main.yml

@@ -128,3 +128,8 @@ jobs:
         env:
           CYPRESS_username: ${{ secrets.traQ_username }}
           CYPRESS_password: ${{ secrets.traQ_password }}
+      - uses: actions/upload-artifact@v1
+        with:
+          name: failed-screenshots
+          path: ./tests/e2e/screenshots
+        if: ${{ failure() }}

package.json

@@ -11,7 +11,8 @@
     "lint": "vue-cli-service lint",
     "lint:no-fix": "vue-cli-service lint --no-fix",
     "gen-fonts": "node build/gen-mplus",
-    "gen-unicode_emojis": "node build/gen-unicode_emojis"
+    "gen-unicode_emojis": "node build/gen-unicode_emojis",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@cloudcmd/clipboard": "^2.0.0",
@@ -20,7 +21,6 @@
     "@traptitech/traq": "^3.4.5-1",
     "@traptitech/traq-markdown-it": "^4.0.2",
     "@types/pica": "^5.1.1",
-    "@vue/composition-api": "^1.0.0-beta.14",
     "core-js": "^3.6.5",
     "cropperjs": "^1.5.8",
     "deepmerge": "^4.2.2",
@@ -31,16 +31,15 @@
     "idb-keyval": "^3.2.0",
     "klona": "^2.0.4",
     "pica": "^6.1.1",
-    "portal-vue": "^2.1.7",
     "shvl": "^2.0.1",
     "skyway-js": "^3.0.2",
     "throttle-debounce": "^2.3.0",
     "v-click-outside": "^3.1.2",
-    "vue": "^2.6.12",
-    "vue-router": "^3.4.5",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0-beta.10",
     "vue-slider-component": "^3.2.5",
     "vue-textarea-autosize": "^1.1.1",
-    "vuex": "^3.5.1",
+    "vuex": "^4.0.0-beta.4",
     "vuex-persist": "^3.1.3"
   },
   "devDependencies": {
@@ -52,34 +51,35 @@
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^4.3.0",
     "@typescript-eslint/parser": "^4.3.0",
-    "@vue/cli-plugin-babel": "^4.5.6",
-    "@vue/cli-plugin-e2e-cypress": "^4.5.6",
-    "@vue/cli-plugin-eslint": "^4.5.6",
-    "@vue/cli-plugin-pwa": "^4.5.6",
-    "@vue/cli-plugin-router": "^4.5.6",
-    "@vue/cli-plugin-typescript": "^4.5.6",
-    "@vue/cli-plugin-unit-jest": "^4.5.6",
-    "@vue/cli-plugin-vuex": "^4.5.6",
-    "@vue/cli-service": "^4.5.6",
+    "@vue/cli-plugin-babel": "^4.5.7",
+    "@vue/cli-plugin-e2e-cypress": "^4.5.7",
+    "@vue/cli-plugin-eslint": "^4.5.7",
+    "@vue/cli-plugin-pwa": "^4.5.7",
+    "@vue/cli-plugin-router": "^4.5.7",
+    "@vue/cli-plugin-typescript": "^4.5.7",
+    "@vue/cli-plugin-unit-jest": "^4.5.7",
+    "@vue/cli-plugin-vuex": "^4.5.7",
+    "@vue/cli-service": "^4.5.7",
+    "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^5.1.0",
+    "@vue/eslint-config-typescript": "^6.0.0",
     "@vue/test-utils": "1.1.0",
     "axios": "^0.20.0",
     "compression-webpack-plugin": "^6.0.2",
     "csstype": "^3.0.3",
     "eslint": "^7.10.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-unused-imports": "^0.1.3",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.0.1",
     "fibers": "^5.0.0",
     "fonteditor-core": "^2.1.2",
+    "patch-package": "^6.2.2",
     "postcss": "^8.1.1",
     "prettier": "^2.1.2",
     "sass": "^1.26.11",
     "sass-loader": "^10.0.2",
     "typescript": "^4.0.3",
-    "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.12"
+    "vue-svg-loader": "^0.17.0-beta.2"
   },
   "engines": {
     "node": "^14.11.0",

patches/v-click-outside+3.1.2.patch

@@ -0,0 +1,25 @@
+diff --git a/node_modules/v-click-outside/dist/v-click-outside.umd.js b/node_modules/v-click-outside/dist/v-click-outside.umd.js
+index 2ee7c3a..0b358b9 100644
+--- a/node_modules/v-click-outside/dist/v-click-outside.umd.js
++++ b/node_modules/v-click-outside/dist/v-click-outside.umd.js
+@@ -1,2 +1,2 @@
+-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self)["v-click-outside"]=n()}(this,function(){var e="undefined"!=typeof window,n="undefined"!=typeof navigator,t=e&&("ontouchstart"in window||n&&navigator.msMaxTouchPoints>0)?["touchstart"]:["click"];function i(e){var n=e.event,t=e.handler;(0,e.middleware)(n)&&t(n)}function r(e,n){var r=function(e){var n="function"==typeof e;if(!n&&"object"!=typeof e)throw new Error("v-click-outside: Binding value must be a function or an object");return{handler:n?e:e.handler,middleware:e.middleware||function(e){return e},events:e.events||t,isActive:!(!1===e.isActive),detectIframe:!(!1===e.detectIframe)}}(n.value),d=r.handler,o=r.middleware,a=r.detectIframe;if(r.isActive){if(e["__v-click-outside"]=r.events.map(function(n){return{event:n,srcTarget:document.documentElement,handler:function(n){return function(e){var n=e.el,t=e.event,r=e.handler,d=e.middleware,o=t.path||t.composedPath&&t.composedPath();(o?o.indexOf(n)<0:!n.contains(t.target))&&i({event:t,handler:r,middleware:d})}({el:e,event:n,handler:d,middleware:o})}}}),a){var c={event:"blur",srcTarget:window,handler:function(n){return function(e){var n=e.el,t=e.event,r=e.handler,d=e.middleware;setTimeout(function(){var e=document.activeElement;e&&"IFRAME"===e.tagName&&!n.contains(e)&&i({event:t,handler:r,middleware:d})},0)}({el:e,event:n,handler:d,middleware:o})}};e["__v-click-outside"]=[].concat(e["__v-click-outside"],[c])}e["__v-click-outside"].forEach(function(n){var t=n.event,i=n.srcTarget,r=n.handler;return setTimeout(function(){e["__v-click-outside"]&&i.addEventListener(t,r,!1)},0)})}}function d(e){(e["__v-click-outside"]||[]).forEach(function(e){return e.srcTarget.removeEventListener(e.event,e.handler,!1)}),delete e["__v-click-outside"]}var o=e?{bind:r,update:function(e,n){var t=n.value,i=n.oldValue;JSON.stringify(t)!==JSON.stringify(i)&&(d(e),r(e,{value:t}))},unbind:d}:{};return{install:function(e){e.directive("click-outside",o)},directive:o}});
++!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self)["v-click-outside"]=n()}(this,function(){var e="undefined"!=typeof window,n="undefined"!=typeof navigator,t=e&&("ontouchstart"in window||n&&navigator.msMaxTouchPoints>0)?["touchstart"]:["click"];function i(e){var n=e.event,t=e.handler;(0,e.middleware)(n)&&t(n)}function r(e,n){var r=function(e){var n="function"==typeof e;if(!n&&"object"!=typeof e)throw new Error("v-click-outside: Binding value must be a function or an object");return{handler:n?e:e.handler,middleware:e.middleware||function(e){return e},events:e.events||t,isActive:!(!1===e.isActive),detectIframe:!(!1===e.detectIframe)}}(n.value),d=r.handler,o=r.middleware,a=r.detectIframe;if(r.isActive){if(e["__v-click-outside"]=r.events.map(function(n){return{event:n,srcTarget:document.documentElement,handler:function(n){return function(e){var n=e.el,t=e.event,r=e.handler,d=e.middleware,o=t.path||t.composedPath&&t.composedPath();(o?o.indexOf(n)<0:!n.contains(t.target))&&i({event:t,handler:r,middleware:d})}({el:e,event:n,handler:d,middleware:o})}}}),a){var c={event:"blur",srcTarget:window,handler:function(n){return function(e){var n=e.el,t=e.event,r=e.handler,d=e.middleware;setTimeout(function(){var e=document.activeElement;e&&"IFRAME"===e.tagName&&!n.contains(e)&&i({event:t,handler:r,middleware:d})},0)}({el:e,event:n,handler:d,middleware:o})}};e["__v-click-outside"]=[].concat(e["__v-click-outside"],[c])}e["__v-click-outside"].forEach(function(n){var t=n.event,i=n.srcTarget,r=n.handler;return setTimeout(function(){e["__v-click-outside"]&&i.addEventListener(t,r,!1)},0)})}}function d(e){(e["__v-click-outside"]||[]).forEach(function(e){return e.srcTarget.removeEventListener(e.event,e.handler,!1)}),delete e["__v-click-outside"]}var o=e?{beforeMount:r,updated:function(e,n){var t=n.value,i=n.oldValue;JSON.stringify(t)!==JSON.stringify(i)&&(d(e),r(e,{value:t}))},unmounted:d}:{};return{install:function(e){e.directive("click-outside",o)},directive:o}});
+ //# sourceMappingURL=v-click-outside.umd.js.map
+diff --git a/node_modules/v-click-outside/src/v-click-outside.js b/node_modules/v-click-outside/src/v-click-outside.js
+index 0680ce6..56161b7 100644
+--- a/node_modules/v-click-outside/src/v-click-outside.js
++++ b/node_modules/v-click-outside/src/v-click-outside.js
+@@ -120,9 +120,9 @@ function update(el, { value, oldValue }) {
+ }
+
+ const directive = {
+-  bind,
+-  update,
+-  unbind,
++  beforeMount: bind,
++  updated: update,
++  unmounted: unbind,
+ }
+
+ export default HAS_WINDOWS ? directive : {}