feat(ui): Prompts can now be shown and disabled

vuejs · Mar 24, 2018 · 56c2aac · 56c2aac
1 parent a1eaa2f
commit 56c2aac
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 29 deletions.
diff --git a/packages/@vue/cli-ui/src/components/PromptCheckbox.vue b/packages/@vue/cli-ui/src/components/PromptCheckbox.vue
@@ -1,5 +1,8 @@
 <template>
- <div class="prompt prompt-checkbox">
+ <VueDisable
+ :disabled="!prompt.enabled"
+ class="prompt prompt-checkbox"
+ >
  <div class="prompt-content">
  <ListItemInfo
  :name="prompt.message"
@@ -20,7 +23,7 @@
  </div>
 
  <PromptError :error="prompt.error"/>
- </div>
+ </VueDisable>
 </template>
 
 <script>

diff --git a/packages/@vue/cli-ui/src/components/PromptConfirm.vue b/packages/@vue/cli-ui/src/components/PromptConfirm.vue
@@ -1,5 +1,8 @@
 <template>
- <div class="prompt prompt-confirm">
+ <VueDisable
+ :disabled="!prompt.enabled"
+ class="prompt prompt-confirm"
+ >
  <VueSwitch
  :value="value(prompt.value)"
  class="extend-left"
@@ -13,7 +16,7 @@
  </VueSwitch>
 
  <PromptError :error="prompt.error"/>
- </div>
+ </VueDisable>
 </template>
 
 <script>

diff --git a/packages/@vue/cli-ui/src/components/PromptInput.vue b/packages/@vue/cli-ui/src/components/PromptInput.vue
@@ -1,5 +1,8 @@
 <template>
- <div class="prompt prompt-input">
+ <VueDisable
+ :disabled="!prompt.enabled"
+ class="prompt prompt-input"
+ >
  <div class="prompt-content">
  <ListItemInfo
  :name="prompt.message"
@@ -17,7 +20,7 @@
  </div>
 
  <PromptError :error="prompt.error"/>
- </div>
+ </VueDisable>
 </template>
 
 <script>

diff --git a/packages/@vue/cli-ui/src/components/PromptList.vue b/packages/@vue/cli-ui/src/components/PromptList.vue
@@ -1,5 +1,8 @@
 <template>
- <div class="prompt prompt-list">
+ <VueDisable
+ :disabled="!prompt.enabled"
+ class="prompt prompt-list"
+ >
  <div class="prompt-content">
  <ListItemInfo
  :name="prompt.message"
@@ -23,7 +26,7 @@
  </div>
 
  <PromptError :error="prompt.error"/>
- </div>
+ </VueDisable>
 </template>
 
 <script>

diff --git a/packages/@vue/cli-ui/src/components/PromptsList.vue b/packages/@vue/cli-ui/src/components/PromptsList.vue
@@ -3,7 +3,7 @@
  <div class="content">
  <component
  v-for="prompt of prompts"
- v-if="prompt.enabled"
+ v-if="prompt.visible"
  :key="prompt.id"
  :is="getModule(prompt)"
  :prompt="prompt"

diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js b/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js
@@ -138,8 +138,9 @@ function removeAnswer (id) {
 function generatePrompt (data) {
  return {
  id: data.name,
- enabled: true,
  type: data.type,
+ visible: true,
+ enabled: true,
  name: data.short || null,
  message: data.message,
  description: data.description || null,
@@ -154,15 +155,15 @@ function generatePrompt (data) {
 
 function updatePrompts () {
  for (const prompt of prompts) {
- const oldEnabled = prompt.enabled
- prompt.enabled = getEnabled(prompt.raw.when)
+ const oldVisible = prompt.visible
+ prompt.visible = getEnabled(prompt.raw.when)
 
  prompt.choices = getChoices(prompt)
 
- if (oldEnabled !== prompt.enabled && !prompt.enabled) {
+ if (oldVisible !== prompt.visible && !prompt.visible) {
  removeAnswer(prompt.id)
  prompt.valueChanged = false
- } else if (prompt.enabled && !prompt.valueChanged) {
+ } else if (prompt.visible && !prompt.valueChanged) {
  let value = getDefaultValue(prompt)
  prompt.value = getDisplayedValue(prompt, value)
  setAnswer(prompt.id, getValue(prompt, value))

diff --git a/packages/@vue/cli-ui/src/graphql-api/type-defs.js b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
@@ -21,6 +21,12 @@ enum PackageManager {
  yarn
 }
 
+interface DescribedEntity {
+ name: String
+ description: String
+ link: String
+}
+
 type Folder {
  name: String!
  path: String!
@@ -52,7 +58,7 @@ input ProjectImportInput {
  path: String!
 }
 
-type Preset {
+type Preset implements DescribedEntity {
  id: ID!
  name: String
  description: String
@@ -94,9 +100,9 @@ type PluginInstallation {
  prompts: [Prompt]
 }
 
-type Feature {
+type Feature implements DescribedEntity {
  id: ID!
- name: String!
+ name: String
  description: String
  link: String
  enabled: Boolean!
@@ -125,10 +131,11 @@ type PromptError {
  link: String
 }
 
-type Prompt {
+type Prompt implements DescribedEntity {
  id: ID!
- enabled: Boolean!
  type: PromptType!
+ visible: Boolean!
+ enabled: Boolean
  name: String
  message: String
  description: String
@@ -154,12 +161,13 @@ type Progress {
  args: [String]
 }
 
-type Task {
+type Task implements DescribedEntity {
  id: ID!
  status: TaskStatus!
- name: String!
+ name: String
  command: String!
  description: String
+ link: String
  logs: [TaskLog]
 }
 
@@ -182,6 +190,15 @@ enum TaskLogType {
  stderr
 }
 
+type Configuration implements DescribedEntity {
+ id: ID!
+ name: String
+ description: String
+ link: String
+ icon: String
+ prompts: [Prompt]
+}
+
 type Query {
  progress (id: ID!): Progress
  cwd: String!
@@ -196,6 +213,8 @@ type Query {
  plugin (id: ID!): Plugin
  tasks: [Task]
  task (id: ID!): Task
+ configurations: [Configuration]
+ configuration (id: ID!): Configuration
 }
 
 type Mutation {

diff --git a/packages/@vue/cli-ui/src/graphql/promptFragment.gql b/packages/@vue/cli-ui/src/graphql/promptFragment.gql
@@ -3,8 +3,9 @@
 
 fragment prompt on Prompt {
  id
- enabled
  type
+ visible
+ enabled
  name
  message
  description

diff --git a/packages/@vue/cli-ui/src/mixins/Prompts.js b/packages/@vue/cli-ui/src/mixins/Prompts.js
@@ -8,20 +8,20 @@ export default function ({
  return {
  computed: {
  configurationValid () {
- return this.enabledPrompts.filter(
+ return this.visiblePrompts.filter(
  p =>
  p.error ||
  p.value === null ||
  JSON.parse(p.value) === ''
  ).length === 0
  },
 
- enabledPrompts () {
+ visiblePrompts () {
  if (!this[field]) {
  return []
  }
  return this[field].prompts.filter(
- p => p.enabled
+ p => p.visible
  )
  }
  },

diff --git a/packages/@vue/cli-ui/src/views/ProjectCreate.vue b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
@@ -201,7 +201,7 @@
  />
 
  <VueButton
- v-if="enabledPrompts.length"
+ v-if="visiblePrompts.length"
  icon-right="arrow_forward"
  :label="$t('views.project-create.tabs.features.buttons.next')"
  class="big primary"
@@ -249,12 +249,12 @@
  id="config"
  :label="$t('views.project-create.tabs.configuration.title')"
  icon="settings_applications"
- :disabled="!detailsValid || !presetValid || !manual || !enabledPrompts.length"
+ :disabled="!detailsValid || !presetValid || !manual || !visiblePrompts.length"
  lazy
  >
  <div class="content vue-ui-disable-scroll">
  <PromptsList
- :prompts="enabledPrompts"
+ :prompts="visiblePrompts"
  @answer="answerPrompt"
  />
  </div>

diff --git a/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue b/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
@@ -90,7 +90,7 @@
  <div class="content vue-ui-disable-scroll">
  <div class="cta-text">{{ $t('views.project-plugins-add.tabs.configuration.heading', { target: pluginId }) }}</div>
  <PromptsList
- :prompts="enabledPrompts"
+ :prompts="visiblePrompts"
  @answer="answerPrompt"
  />
  </div>