feat(ui): ProjectCreate path preview

Author: Guillaume Chau

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>