feat(ui): Project Create details form

2026-02-07 07:28:28 -06:00 · 2018-03-05 17:53:21 +01:00
parent 1a711642fc
commit 8399838538
7 changed files with 377 additions and 19 deletions
--- a/packages/@vue/cli-ui/src/components/StatusBar.vue
+++ b/packages/@vue/cli-ui/src/components/StatusBar.vue
@@ -1,10 +1,39 @@
 <template>
  <div class="status-bar">
-    <div class="section current-project">
-      <span>Current Project:</span>
+    <div
+      class="section current-project"
+      v-tooltip="'Current project'"
+      @click="$emit('project')"
+    >
+      <VueIcon icon="work"/>
+      <span v-if="projectCurrent">{{ projectCurrent.name }}</span>
+      <span v-else class="label">No project</span>
    </div>

-    <div class="section console-log" v-tooltip="'Console'">
+    <ApolloQuery
+      :query="require('@/graphql/cwd.gql')"
+      class="section current-path"
+      v-tooltip="'Current Working Directory'"
+      @click.native="$emit('cwd')"
+    >
+      <ApolloSubscribeToMore
+        :document="require('@/graphql/cwdChanged.gql')"
+        :update-query="(previousResult, { subscriptionData }) => ({
+          cwd: subscriptionData.data.cwd
+        })"
+      />
+
+      <template slot-scope="{ result: { data } }">
+        <VueIcon icon="folder"/>
+        <span v-if="data">{{ data.cwd }}</span>
+      </template>
+    </ApolloQuery>
+
+    <div
+      class="section console-log"
+      v-tooltip="'Console'"
+      @click="$emit('console')"
+    >
      <VueIcon icon="subtitles"/>
      <span>{{ consoleLog }}</span>
    </div>
@@ -12,11 +41,18 @@
 </template>

 <script>
+import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
+
 export default {
  data () {
    return {
-      consoleLog: ''
+      consoleLog: '',
+      projectCurrent: null
    }
+  },
+
+  apollo: {
+    projectCurrent: PROJECT_CURRENT
  }
 }
 </script>
@@ -42,4 +78,10 @@ export default {
    &:hover
      opacity 1
      background lighten(@background, 40%)
+
+    > .vue-icon + *
+      margin-left 4px
+
+    .label
+      color lighten($vue-color-dark, 20%)
 </style>
--- a/packages/@vue/cli-ui/src/components/StepWizard.vue
+++ b/packages/@vue/cli-ui/src/components/StepWizard.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="step-wizard">
+    <div class="header">
+      <div v-if="title" class="title">{{ title }}</div>
+    </div>
+
+    <VueTabs
+      ref="tabs"
+      class="main-tabs"
+      group-class="accent"
+    >
+      <slot/>
+    </VueTabs>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: null
+    }
+  },
+
+  methods: {
+    next () {
+      const tabs = this.$refs.tabs
+      tabs.activateChild(tabs.activeChildIndex + 1)
+    },
+    previous () {
+      const tabs = this.$refs.tabs
+      tabs.activateChild(tabs.activeChildIndex - 1)
+    },
+  }
+}
+</script>
+
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.step-wizard
+  v-box()
+
+  .main-tabs
+    height 100%
+    flex auto 1 1
+
+  .header,
+  >>> .tabs
+    background $vue-color-light-neutral
+
+  >>> .tabs-content
+    height 0
+
+  &,
+  >>> .vue-tab,
+  >>> .vue-tab-content
+    height 100%
+
+  >>> .vue-tab-content
+    overflow-y auto
+    v-box()
+
+    > .content
+      flex 100% 1 1
+
+    > .actions-bar
+      justify-content space-between
+
+  .title
+    padding 12px
+    font-size 24px
+    text-align center
+    font-weight lighter
+
+</style>
--- a/packages/@vue/cli-ui/src/graphql-api/type-defs.js
+++ b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
@@ -16,6 +16,11 @@ enum ConsoleLogType {
  done
 }

+enum PackageManager {
+  npm
+  yarn
+}
+
 type Folder {
  name: String!
  path: String!
@@ -36,6 +41,8 @@ type Project {

 input ProjectCreateInput {
  path: String!
+  force: Boolean!
+  packageManager: PackageManager
 }

 input ProjectImportInput {
--- a/packages/@vue/cli-ui/src/router.js
+++ b/packages/@vue/cli-ui/src/router.js
@@ -4,6 +4,7 @@ import { apolloClient } from './vue-apollo'

 import Home from './views/Home.vue'
 import ProjectSelect from './views/ProjectSelect.vue'
+import ProjectCreate from './views/ProjectCreate.vue'
 import About from './views/About.vue'

 import PROJECT_CURRENT from './graphql/projectCurrent.gql'
@@ -26,6 +27,11 @@ const router = new Router({
      name: 'project-select',
      component: ProjectSelect
    },
+    {
+      path: '/project/create',
+      name: 'project-create',
+      component: ProjectCreate
+    },
    {
      path: '/about',
      name: 'about',
--- a/packages/@vue/cli-ui/src/style/main.styl
+++ b/packages/@vue/cli-ui/src/style/main.styl
@@ -11,3 +11,12 @@ body,
  margin 24px auto
  width 48px
  height @width
+
+.actions-bar
+  padding 12px
+  background $color-light-background
+  h-box()
+  box-center()
+
+  > *
+    space-between-x(12px)
--- a/packages/@vue/cli-ui/src/views/ProjectCreate.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="project-create page">
+    <div class="content">
+      <StepWizard
+        ref="wizard"
+        title="Create a new project"
+      >
+        <VueTab
+          id="details"
+          label="Details"
+          icon="subject"
+        >
+          <div class="content">
+            <div class="project-details vue-grid col-1 big-gap">
+              <VueFormField
+                title="Project folder"
+              >
+                <VueInput
+                  v-model="folder"
+                  placeholder="my-app"
+                  icon-left="folder"
+                  class="big"
+                />
+
+                <VueButton
+                  label="Change current working directory"
+                  :to="{ name: 'project-select', query: { tab: 'create' } }"
+                />
+              </VueFormField>
+
+              <VueFormField
+                title="Package manager"
+              >
+                <VueSelect
+                  v-model="packageManager"
+                >
+                  <VueSelectButton
+                    :value="undefined"
+                    label="Default"
+                  />
+                  <VueSelectButton
+                    value="npm"
+                    label="npm"
+                  />
+                  <VueSelectButton
+                    value="yarn"
+                    label="yarn"
+                  />
+                </VueSelect>
+              </VueFormField>
+
+              <VueFormField
+                title="Additional options"
+              >
+                <VueSwitch
+                  v-model="force"
+                  class="extend-left"
+                >
+                  Overwrite target directory if it exists
+                </VueSwitch>
+              </VueFormField>
+            </div>
+          </div>
+
+          <div class="actions-bar">
+            <VueButton
+              :to="{ name: 'project-select' }"
+              icon-left="close"
+              label="Cancel"
+              class="big"
+            />
+
+            <VueButton
+              icon-right="arrow_forward"
+              label="Next"
+              class="big primary"
+              :disabled="!detailsValid"
+              @click="$refs.wizard.next()"
+            />
+          </div>
+        </VueTab>
+
+        <VueTab
+          id="presets"
+          label="Presets"
+          icon="check_circle"
+          :disabled="!detailsValid"
+        >
+          <div class="content">
+
+          </div>
+
+          <div class="actions-bar">
+            <VueButton
+              icon-left="arrow_back"
+              label="Previous"
+              class="big"
+              @click="$refs.wizard.previous()"
+            />
+
+            <VueButton
+              icon-right="arrow_forward"
+              label="Next"
+              class="big primary"
+              @click="$refs.wizard.next()"
+            />
+          </div>
+        </VueTab>
+
+        <VueTab
+          id="features"
+          label="Features"
+          icon="widgets"
+          :disabled="!detailsValid"
+        >
+          <div class="content">
+
+          </div>
+
+          <div class="actions-bar">
+            <VueButton
+              icon-left="arrow_back"
+              label="Previous"
+              class="big"
+              @click="$refs.wizard.previous()"
+            />
+
+            <VueButton
+              icon-right="arrow_forward"
+              label="Next"
+              class="big primary"
+              @click="$refs.wizard.next()"
+            />
+          </div>
+        </VueTab>
+
+        <VueTab
+          id="config"
+          label="Configuration"
+          icon="settings_applications"
+          :disabled="!detailsValid"
+        >
+          <div class="content">
+
+          </div>
+
+          <div class="actions-bar">
+            <VueButton
+              icon-left="arrow_back"
+              label="Previous"
+              class="big"
+              @click="$refs.wizard.previous()"
+            />
+
+            <VueButton
+              icon-left="done"
+              label="Create project"
+              class="big primary"
+            />
+          </div>
+        </VueTab>
+      </StepWizard>
+    </div>
+
+    <StatusBar cwd/>
+  </div>
+</template>
+
+<script>
+import StepWizard from '../components/StepWizard'
+import StatusBar from '../components/StatusBar'
+
+export default {
+  components: {
+    StepWizard,
+    StatusBar
+  },
+
+  data () {
+    return {
+      folder: '',
+      force: false,
+      packageManager: undefined
+    }
+  },
+
+  computed: {
+    detailsValid () {
+      return !!this.folder
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-create
+  display grid
+  grid-template-columns 1fr
+  grid-template-rows auto 28px
+  grid-template-areas "content" "footer"
+
+.content
+  grid-area content
+
+.status-bar
+  grid-area footer
+
+.project-details
+  max-width 400px
+  width 100%
+  margin 42px auto
+</style>
--- a/packages/@vue/cli-ui/src/views/ProjectSelect.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectSelect.vue
@@ -1,6 +1,10 @@
 <template>
  <div class="project-select page">
-    <VueTabs class="main-tabs" group-class="accent">
+    <VueTabs
+      :tab-id.sync="tab"
+      class="main-tabs"
+      group-class="accent"
+    >
      <VueTab
        id="existing"
        label="Projects"
@@ -16,11 +20,12 @@
      >
        <FolderExplorer/>

-        <div class="actions">
+        <div class="actions-bar">
          <VueButton
            icon-left="add"
-            label="Create new project here"
+            label="Create a new project here"
            class="big primary"
+            :to="{ name: 'project-create' }"
          />
        </div>
      </VueTab>
@@ -32,7 +37,7 @@
      >
        <FolderExplorer/>

-        <div class="actions">
+        <div class="actions-bar">
          <VueButton
            icon-left="unarchive"
            label="Import this folder"
@@ -59,12 +64,18 @@ export default {

  data () {
    return {
-      folderCurrent: {}
+      folderCurrent: {},
+      tab: undefined
    }
  },

  apollo: {
    folderCurrent: FOLDER_CURRENT
+  },
+
+  async mounted () {
+    await this.$nextTick()
+    this.tab = this.$route.query.tab
  }
 }
 </script>
@@ -76,11 +87,8 @@ export default {
  height 100%
  >>> .tabs
    background $vue-color-light-neutral
-    .vue-icon
-      width 24px
-      height @width

-  >>>.tabs-content
+  >>> .tabs-content
    height 0

 .vue-tab,
@@ -95,12 +103,6 @@ export default {
 .folder-explorer
  flex 100% 1 1

-.actions
-  padding 12px
-  background $color-light-background
-  h-box()
-  box-center()
-
 .project-select
  height 100%
 </style>