feat(ui): ProjectCreate path preview

packages/@vue/cli-ui/src/filters.js

@@ -0,0 +1,21 @@
+/**
+ * Display a folder path
+ * @param {string} value path
+ * @param {number} maxLength maximum length of displayed path
+ */
+export function folder (value, maxLength = -1) {
+ value = value.replace(/\\/g, '/')
+
+ if (value.charAt(value.length - 1) !== '/') {
+ value += '/'
+ }
+
+ if (maxLength !== -1 && value.length > maxLength) {
+ const exceeded = value.length - maxLength + 3
+ const firstEnd = Math.floor(maxLength / 2 - exceeded / 2)
+ const lastStart = Math.ceil(maxLength / 2 + exceeded / 2)
+ value = value.substring(0, firstEnd) + '...' + value.substring(lastStart)
+ }
+
+ return value
+}

packages/@vue/cli-ui/src/main.js

@@ -3,9 +3,14 @@ import App from './App.vue'
 import router from './router'
 import { apolloProvider } from './vue-apollo'
 import VueUi from '@vue/ui'
+import * as Filters from './filters'
 
 Vue.use(VueUi)
 
+for (const key in Filters) {
+ Vue.filter(key, Filters[key])
+}
+
 Vue.config.productionTip = false
 
 const app = new Vue({

packages/@vue/cli-ui/src/views/ProjectCreate.vue

@@ -14,7 +14,6 @@
  <div class="project-details vue-grid col-1 big-gap">
  <VueFormField
  title="Project folder"
- :subtitle="cwd"
  >
  <VueInput
  v-model="formData.folder"
@@ -23,10 +22,26 @@
  class="big"
  />
 
- <VueButton
- label="Change current working directory"
- :to="{ name: 'project-select', query: { tab: 'create', hideTabs: true } }"
- />
+ <div slot="subtitle">
+ <div class="project-path">
+ <div class="path">
+ <span
+ class="cwd"
+ v-tooltip="cwd"
+ >
+ {{ cwd | folder(42 - formData.folder.length) }}
+ </span>
+ <span class="folder">{{ formData.folder }}</span>
+ </div>
+
+ <VueButton
+ icon-left="edit"
+ class="icon-button"
+ v-tooltip="'Change base directory'"
+ :to="{ name: 'project-select', query: { tab: 'create', hideTabs: true } }"
+ />
+ </div>
+ </div>
  </VueFormField>
 
  <VueFormField
@@ -358,4 +373,17 @@ export default {
  max-width 400px
  width 100%
  margin 42px auto
+
+.project-path
+ h-box()
+ box-center()
+
+ .path
+ flex 100% 1 1
+ margin-right 6px
+ h-box()
+ align-items baseline
+
+ .folder
+ font-weight bold
 </style>