From dbac8171b90fc118ffbc22a2f6630ffb635c7400 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Sat, 18 May 2019 13:32:48 +0200
Subject: [PATCH] feat: prompt editor (#3929)

* feat(Prompt): editor

* docs(ui dev): update supported inquirer types

(cherry picked from commit 3f9838b6490ab3bcbad9f5ac6d10a53f13f9ff61)
---
 docs/dev-guide/ui-api.md                      |  2 +-
 .../cli-ui/src/components/prompt/Prompt.vue   |  5 +++
 .../src/components/prompt/PromptEditor.vue    | 39 +++++++++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 packages/@vue/cli-ui/src/components/prompt/PromptEditor.vue

diff --git a/docs/dev-guide/ui-api.md b/docs/dev-guide/ui-api.md
index 89ccb2126..4ee32902f 100644
--- a/docs/dev-guide/ui-api.md
+++ b/docs/dev-guide/ui-api.md
@@ -526,7 +526,7 @@ However, you can add the following additional fields (which are optional and onl
 }
 ```
 
-Supported inquirer types: `checkbox`, `confirm`, `input`, `password`, `list`, `rawlist`.
+Supported inquirer types: `checkbox`, `confirm`, `input`, `password`, `list`, `rawlist`, `editor`.
 
 In addition to those, the UI supports special types that only works with it:
 
diff --git a/packages/@vue/cli-ui/src/components/prompt/Prompt.vue b/packages/@vue/cli-ui/src/components/prompt/Prompt.vue
index 030ef3d25..fe489b36b 100644
--- a/packages/@vue/cli-ui/src/components/prompt/Prompt.vue
+++ b/packages/@vue/cli-ui/src/components/prompt/Prompt.vue
@@ -52,6 +52,11 @@ export default {
       align-items stretch
       justify-content center
 
+    &.vertical
+      grid-template-columns auto
+      grid-template-areas "info" "input"
+      grid-gap $padding-item
+
   .list-item-info
     margin-right ($padding-item * 2)
 </style>
diff --git a/packages/@vue/cli-ui/src/components/prompt/PromptEditor.vue b/packages/@vue/cli-ui/src/components/prompt/PromptEditor.vue
new file mode 100644
index 000000000..46dfd0005
--- /dev/null
+++ b/packages/@vue/cli-ui/src/components/prompt/PromptEditor.vue
@@ -0,0 +1,39 @@
+<template>
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-editor"
+  >
+    <div class="prompt-content vertical">
+      <ListItemInfo
+        :name="$t(prompt.message)"
+        :description="$t(prompt.description)"
+        :link="prompt.link"
+      />
+
+      <div class="prompt-input">
+        <VueInput
+          :value="value(prompt.value)"
+          type="textarea"
+          @update="value => answer(value)"
+        />
+      </div>
+    </div>
+
+    <PromptError :error="prompt.error"/>
+  </VueDisable>
+</template>
+
+<script>
+import Prompt from './Prompt'
+
+export default {
+  extends: Prompt,
+
+  buffer: true
+}
+</script>
+
+<style lang="stylus" scoped>
+.vue-ui-input /deep/ > .content > .input-wrapper > textarea.input
+  min-height 16em
+</style>