fix: some small refinements in the ui codebase (#6315)

Author: haoqunjiang

package.json

@@ -19,7 +19,8 @@
     "version": "node scripts/genChangelog.js && node scripts/genDocs.js && git add CHANGELOG.md && git add docs",
     "docs": "vuepress dev docs",
     "docs:build": "vuepress build docs",
-    "patch-chromedriver": "node scripts/patchChromedriver.js"
+    "patch-chromedriver": "node scripts/patchChromedriver.js",
+    "postinstall": "patch-package"
   },
   "gitHooks": {
     "pre-commit": "lint-staged",
@@ -64,6 +65,7 @@
     "memfs": "^3.2.0",
     "minimist": "^1.2.5",
     "node-fetch": "^2.6.1",
+    "patch-package": "^6.2.2",
     "prettier": ">= 1.13.0",
     "rimraf": "^3.0.2",
     "semver": "^7.3.4",

packages/@vue/cli-ui-addon-webpack/.babelrc

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset']
+}

packages/@vue/cli-ui-addon-webpack/babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/app'
-  ]
+  presets: ['@vue/cli-plugin-babel/preset']
 }

packages/@vue/cli-ui-addon-widgets/babel.config.js

@@ -26,5 +26,5 @@ exports.dumpObject = (obj) => {
       result[key] = type
     }
   })
-  return result.toString()
+  return JSON.stringify(result)
 }

packages/@vue/cli-ui/.babelrc

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset']
+}

packages/@vue/cli-ui/apollo-server/util/logger.js

@@ -66,6 +66,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "date-fns": "^2.17.0",
     "@vue/cli-plugin-babel": "^5.0.0-alpha.5",
     "@vue/cli-plugin-e2e-cypress": "^5.0.0-alpha.5",
     "@vue/cli-plugin-eslint": "^5.0.0-alpha.5",
@@ -85,7 +86,7 @@
     "eslint-plugin-vue": "^7.6.0",
     "lint-staged": "^10.5.4",
     "lodash.debounce": "^4.0.8",
-    "portal-vue": "^1.3.0",
+    "portal-vue": "^2.1.7",
     "rimraf": "^3.0.2",
     "start-server-and-test": "^1.12.0",
     "stylus": "^0.54.5",
@@ -97,13 +98,15 @@
     "vue-color": "^2.8.1",
     "vue-i18n": "^8.22.4",
     "vue-instantsearch": "^1.5.1",
-    "vue-meta": "^1.6.0",
-    "vue-observe-visibility": "^0.4.6",
+    "vue-meta": "^2.4.0",
+    "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.5.1",
     "vue-template-compiler": "^2.6.12",
     "vue-timeago": "^5.1.3",
     "vue-virtual-scroller": "^1.0.10",
-    "xterm": "^3.13.2"
+    "xterm": "~4.10.0",
+    "xterm-addon-fit": "^0.5.0",
+    "xterm-addon-web-links": "^0.4.0"
   },
   "browserslist": [
     "> 1%",

packages/@vue/cli-ui/babel.config.js

@@ -39,11 +39,8 @@
 
 <script>
 import { Terminal } from 'xterm'
-import * as fit from 'xterm/dist/addons/fit/fit'
-import * as webLinks from 'xterm/dist/addons/webLinks/webLinks'
-
-Terminal.applyAddon(fit)
-Terminal.applyAddon(webLinks)
+import { FitAddon } from 'xterm-addon-fit'
+import { WebLinksAddon } from 'xterm-addon-web-links'
 
 const defaultTheme = {
   foreground: '#2c3e50',
@@ -154,7 +151,7 @@ export default {
   },
 
   beforeDestroy () {
-    this.$_terminal.destroy()
+    this.$_terminal.dispose()
   },
 
   methods: {
@@ -165,11 +162,19 @@ export default {
         theme: this.theme,
         ...this.options
       })
-      webLinks.webLinksInit(term, this.handleLink)
+
+      const fitAddon = new FitAddon()
+      const webLinksAddon = new WebLinksAddon(this.handleLink)
+
+      this.$_fitAddon = fitAddon
+
+      term.loadAddon(fitAddon)
+      term.loadAddon(webLinksAddon)
+
       term.open(this.$refs.render)
 
-      term.on('blur', () => this.$emit('blur'))
-      term.on('focus', () => this.$emit('focus'))
+      term.onBlur(() => this.$emit('blur'))
+      term.onFocus(() => this.$emit('focus'))
 
       if (this.autoSize) {
         this.$nextTick(this.fit)
@@ -226,6 +231,7 @@ export default {
     },
 
     handleLink (event, uri) {
+      console.log('aaa')
       if (this.openLinks) {
         window.open(uri, '_blank')
       }
@@ -238,7 +244,7 @@ export default {
 
       await this.$nextTick()
 
-      term.fit()
+      this.$_fitAddon.fit()
       term.element.style.display = ''
       term.refresh(0, term.rows - 1)
     },
@@ -255,7 +261,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@import "~xterm/dist/xterm.css"
+@import "~xterm/css/xterm.css"
 </style>
 
 <style lang="stylus" scoped>

packages/@vue/cli-ui/package.json

@@ -208,7 +208,6 @@ export default {
         border none !important
         background $vue-ui-color-primary
 
-    >>> .v-popover .trigger,
     >>> .vue-ui-dropdown
       display block !important