mirror/vue-cli
1
0
Fork 0
mirror of https://github.com/vuejs/vue-cli.git synced 2026-02-07 07:28:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): prompt error ui

Browse Source
This commit is contained in:
Guillaume Chau
2018-03-14 14:16:28 +01:00
parent 009b880443
commit 798445f485
10 changed files with 107 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/@vue/cli-ui/src/components/PromptCheckbox.vue
View File

@@ -18,6 +18,8 @@
{{ choice.name }}
</VueSwitch>
</div>
<PromptError :error="prompt.error"/>
</div>
</template>

2
packages/@vue/cli-ui/src/components/PromptConfirm.vue
View File

@@ -11,6 +11,8 @@
:link="prompt.link"
/>
</VueSwitch>
<PromptError :error="prompt.error"/>
</div>
</template>

29
packages/@vue/cli-ui/src/components/PromptError.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div v-if="error" class="prompt-error">
<div class="vue-text danger banner">
<VueIcon icon="warning" class="big"/>
<span>{{ error.message }}</span>
</div>
</div>
</template>
<script>
export default {
props: {
error: {
type: Object,
default: null
}
}
}
</script>
<style lang="stylus" scoped>
@import "~@/style/imports"
.prompt-error
padding 0 $padding-item $padding-item
.banner
border-radius $br
</style>

2
packages/@vue/cli-ui/src/components/PromptInput.vue
View File

@@ -15,6 +15,8 @@
/>
</div>
</div>
<PromptError :error="prompt.error"/>
</div>
</template>

2
packages/@vue/cli-ui/src/components/PromptList.vue
View File

@@ -21,6 +21,8 @@
</VueSelect>
</div>
</div>
<PromptError :error="prompt.error"/>
</div>
</template>

1
packages/@vue/cli-ui/src/graphql-api/connectors/projects.js
View File

@@ -126,6 +126,7 @@ function initCreator (context) {
// Prompts
prompts.reset()
creator.injectedPrompts.forEach(prompts.add)
updatePromptsFeatures()
prompts.start()
return creator

5
packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js
View File

@@ -52,7 +52,7 @@ function getEnabled (value) {
function validateInput (prompt, value) {
const validate = prompt.raw.validate
if (typeof validate === 'function') {
return validate(value)
return validate(value, answers)
}
return true
}
@@ -147,6 +147,7 @@ function generatePrompt (data) {
choices: null,
value: null,
valueChanged: false,
error: null,
raw: data
}
}
@@ -218,7 +219,7 @@ function setValue ({ id, value }) {
if (validation !== true) {
prompt.error = generatePromptError(validation)
} else {
prompt.error = undefined
prompt.error = null
}
prompt.value = getDisplayedValue(prompt, value)
const finalValue = getValue(prompt, value)

48
packages/@vue/cli-ui/src/mixins/Prompts.js Normal file
View File

@@ -0,0 +1,48 @@
import PROMPT_ANSWER from '../graphql/promptAnswer.gql'
export default function ({
field,
query
}) {
// @vue/component
return {
computed: {
configurationValid () {
return this.enabledPrompts.filter(
p =>
p.error ||
p.value === null ||
JSON.parse(p.value) === ''
).length === 0
},
enabledPrompts () {
if (!this[field]) {
return []
}
return this[field].prompts.filter(
p => p.enabled
)
}
},
methods: {
async answerPrompt ({ prompt, value }) {
await this.$apollo.mutate({
mutation: PROMPT_ANSWER,
variables: {
input: {
id: prompt.id,
value: JSON.stringify(value)
}
},
update: (store, { data: { promptAnswer } }) => {
const data = store.readQuery({ query })
data[field].prompts = promptAnswer
store.writeQuery({ query, data })
}
})
}
}
}
}

42
packages/@vue/cli-ui/src/views/ProjectCreate.vue
View File

@@ -365,11 +365,12 @@
</template>
<script>
import Prompts from '../mixins/Prompts'
import CWD from '../graphql/cwd.gql'
import PROJECT_CREATION from '../graphql/projectCreation.gql'
import FEATURE_SET_ENABLED from '../graphql/featureSetEnabled.gql'
import PRESET_APPLY from '../graphql/presetApply.gql'
import PROMPT_ANSWER from '../graphql/promptAnswer.gql'
import PROJECT_CREATE from '../graphql/projectCreate.gql'
function formDataFactory () {
@@ -391,6 +392,13 @@ let formData = formDataFactory()
export default {
name: 'ProjectCreate',
mixins: [
Prompts({
field: 'projectCreation',
query: PROJECT_CREATION
}),
],
data () {
return {
formData: formData,
@@ -423,21 +431,6 @@ export default {
return !!this.formData.selectedPreset
},
configurationValid () {
return this.enabledPrompts.filter(
p => p.value === null || JSON.parse(p.value) === ''
).length === 0
},
enabledPrompts () {
if (!this.projectCreation) {
return []
}
return this.projectCreation.prompts.filter(
p => p.enabled
)
},
manual () {
return this.formData.selectedPreset === '__manual__'
},
@@ -486,23 +479,6 @@ export default {
this.$apollo.queries.projectCreation.refetch()
},
async answerPrompt ({ prompt, value }) {
await this.$apollo.mutate({
mutation: PROMPT_ANSWER,
variables: {
input: {
id: prompt.id,
value: JSON.stringify(value)
}
},
update: (store, { data: { promptAnswer } }) => {
const data = store.readQuery({ query: PROJECT_CREATION })
data.projectCreation.prompts = promptAnswer
store.writeQuery({ query: PROJECT_CREATION, data })
}
})
},
createWithoutSaving () {
this.formData.save = ''
this.createProject()

43
packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
View File

@@ -151,6 +151,8 @@
</template>
<script>
import Prompts from '../mixins/Prompts'
import PLUGIN_INSTALLATION from '../graphql/pluginInstallation.gql'
import PLUGIN_INSTALL from '../graphql/pluginInstall.gql'
import PLUGIN_UNINSTALL from '../graphql/pluginUninstall.gql'
@@ -159,6 +161,13 @@ import PROMPT_ANSWER from '../graphql/promptAnswer.gql'
export default {
name: 'ProjectPluginsAdd',
mixins: [
Prompts({
field: 'pluginInstallation',
query: PLUGIN_INSTALLATION
})
],
data () {
return {
tabId: 'search',
@@ -182,23 +191,6 @@ export default {
}
},
computed: {
configurationValid () {
return this.enabledPrompts.filter(
p => p.value === null || JSON.parse(p.value) === ''
).length === 0
},
enabledPrompts () {
if (!this.pluginInstallation) {
return []
}
return this.pluginInstallation.prompts.filter(
p => p.enabled
)
}
},
mounted () {
requestAnimationFrame(() => {
this.$refs.searchInput.focus()
@@ -248,23 +240,6 @@ export default {
async invokePlugin () {
// TODO
},
async answerPrompt ({ prompt, value }) {
await this.$apollo.mutate({
mutation: PROMPT_ANSWER,
variables: {
input: {
id: prompt.id,
value: JSON.stringify(value)
}
},
update: (store, { data: { promptAnswer } }) => {
const data = store.readQuery({ query: PLUGIN_INSTALLATION })
data.pluginInstallation.prompts = promptAnswer
store.writeQuery({ query: PLUGIN_INSTALLATION, data })
}
})
},
}
}
</script>