feat(ui): prompt type 'color'

Author: Guillaume Chau

packages/@vue/cli-plugin-pwa/ui.js

@@ -68,15 +68,15 @@ module.exports = api => {
           },
           {
             name: 'themeColor',
-            type: 'input',
+            type: 'color',
             message: 'Theme color',
             description: 'Color used to theme the browser',
             default: '#4DBA87',
             value: data.pwa && data.pwa.themeColor
           },
           {
             name: 'backgroundColor',
-            type: 'input',
+            type: 'color',
             message: 'Splash background color',
             description: 'Background color used for the app splash screen',
             default: '#000000',
@@ -85,7 +85,7 @@ module.exports = api => {
           },
           {
             name: 'msTileColor',
-            type: 'input',
+            type: 'color',
             message: 'Windows app tile color',
             description: 'Color used for the app tile on Windows',
             default: '#000000',

packages/@vue/cli-ui/package.json

@@ -53,6 +53,7 @@
     "subscriptions-transport-ws": "^0.9.5",
     "vue": "^2.5.16",
     "vue-apollo": "^3.0.0-beta.5",
+    "vue-color": "^2.4.6",
     "vue-i18n": "^7.6.0",
     "vue-instantsearch": "^1.5.1",
     "vue-meta": "^1.5.0",

packages/@vue/cli-ui/src/components/PromptColor.vue

@@ -0,0 +1,73 @@
+<template>
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-color"
+  >
+    <div class="prompt-content">
+      <ListItemInfo
+        :name="$t(prompt.message)"
+        :description="$t(prompt.description)"
+        :link="prompt.link"
+      />
+
+      <VueDropdown
+        class="prompt-input"
+      >
+        <VueInput
+          slot="trigger"
+          :value="value(prompt.value)"
+          @input="value => answer(value)"
+        >
+          <div slot="right" class="color-preview">
+            <div class="color-swatch" :style="{
+              backgroundColor: value(prompt.value)
+            }" />
+          </div>
+        </VueInput>
+
+        <ColorPicker
+          class="color-picker"
+          :value="value(prompt.value)"
+          @input="value => answer(value.hex)"
+        />
+      </VueDropdown>
+    </div>
+
+    <PromptError :error="prompt.error"/>
+  </VueDisable>
+</template>
+
+<script>
+import Prompt from './Prompt'
+import { Sketch } from 'vue-color'
+
+export default {
+  extends: Prompt,
+
+  components: {
+    ColorPicker: Sketch
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.color-preview
+  padding-left $padding-item
+
+.color-swatch
+  width 18px
+  height @width
+  border-radius 50%
+
+.color-picker
+  width 300px
+  height 370px
+  background none
+  box-shadow none
+  padding ($padding-item - 4px) $padding-item
+
+  >>> .vc-sketch-presets
+    border-top-color rgba(black, .1)
+</style>

packages/@vue/cli-ui/src/graphql-api/schema/prompt.js

@@ -50,6 +50,7 @@ enum PromptType {
   checkbox
   password
   editor
+  color
 }
 `
 

yarn.lock

@@ -7362,7 +7362,7 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
-lodash.throttle@^4.1.1:
+lodash.throttle@^4.0.0, lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
 
@@ -7520,6 +7520,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-colors@^1.0.0:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.5.tgz#5292593e6754cb1bcc2b98030e4e0d6a3afc9ea1"
+
 material-design-icons@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/material-design-icons/-/material-design-icons-3.0.1.tgz#9a71c48747218ebca51e51a66da682038cdcb7bf"
@@ -10708,6 +10712,10 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tinycolor2@^1.1.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+
 [email protected]:
   version "0.0.31"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
@@ -11311,6 +11319,14 @@ vue-cli@^2.9.2:
     user-home "^2.0.0"
     validate-npm-package-name "^3.0.0"
 
+vue-color@^2.4.6:
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.4.6.tgz#9dcd5850f7eec5ee3ac0b20bec7bbffb5f475f64"
+  dependencies:
+    lodash.throttle "^4.0.0"
+    material-colors "^1.0.0"
+    tinycolor2 "^1.1.2"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
@@ -11403,7 +11419,7 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.5.16:
+vue-template-compiler@^2.5.13, vue-template-compiler@^2.5.16:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.16.tgz#93b48570e56c720cdf3f051cc15287c26fbd04cb"
   dependencies: