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
 

packages/@vue/cli-ui/src/components/content/TerminalView.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="project-nav-button">
-    <v-popover
+    <v-tooltip
       trigger="hover"
       handle-resize
-      popover-class="force-tooltip"
+      class="force-tooltip"
       placement="right"
-      offset="4"
+      :offset="[0, 4]"
       :delay="{ show: 300, hide: 0 }"
     >
       <VueGroupButton
@@ -27,18 +27,18 @@
         <span v-if="$responsive.wide" class="label">{{ $t(view.tooltip) }}</span>
       </VueGroupButton>
 
-      <template slot="popover">
+      <template slot="popper">
         <div class="title">{{ $t(view.tooltip) }}</div>
 
-        <div v-if="badges" class="badges">
+        <div v-if="badges.length" class="badges">
           <ViewBadge
             v-for="badge of badges"
             :key="badge.id"
             :badge="badge"
           />
         </div>
       </template>
-    </v-popover>
+    </v-tooltip>
 
     <div
       v-if="firstNotHiddenBadge"
@@ -96,6 +96,9 @@ $bg-dark = $vue-ui-color-dark
 .project-nav-button
   position relative
 
+  .force-tooltip
+    width 100%
+
   .bullet
     position absolute
     width 6px

packages/@vue/cli-ui/src/components/view/ViewNav.vue

@@ -49,7 +49,14 @@ async function autoDetect () {
       console.log(`[UI] No locale data was found for your locale ${codes[0]}.`)
     }
 
-    const dateFnsLocale = i18n.locale.toLowerCase().replace(/-/g, '_')
+    let dateFnsLocale = i18n.locale
+    if (dateFnsLocale === 'en') {
+      dateFnsLocale = 'en-US'
+    } else if (dateFnsLocale === 'zh') {
+      // we use `zh` as language code in transifex, but date-fns only has zh-CN
+      dateFnsLocale = 'zh-CN'
+    }
+
     Vue.component('VueTimeago', createTimeago({
       name: 'VueTimeago',
       locale: i18n.locale,

packages/@vue/cli-ui/src/components/view/ViewNavButton.vue

@@ -0,0 +1,13 @@
+diff --git a/node_modules/vue/dist/vue.runtime.esm.js b/node_modules/vue/dist/vue.runtime.esm.js
+index 67eadde..70bd6e6 100644
+--- a/node_modules/vue/dist/vue.runtime.esm.js
++++ b/node_modules/vue/dist/vue.runtime.esm.js
+@@ -3407,7 +3407,7 @@ function _createElement (
+     ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag);
+     if (config.isReservedTag(tag)) {
+       // platform built-in elements
+-      if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
++      if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn) && data.tag !== 'component') {
+         warn(
+           ("The .native modifier for v-on is only valid on components but it was used on <" + tag + ">."),
+           context