forked from nuxt/devtools
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ModuleActionDialog.vue
52 lines (44 loc) · 1.75 KB
/
ModuleActionDialog.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<script setup lang="ts">
import { ModuleDialog } from '../composables/state'
const config = useServerConfig()
const openInEditor = useOpenInEditor()
</script>
<template>
<ModuleDialog v-slot="{ resolve, args }">
<NDialog :model-value="true" @close="resolve(false)">
<ModuleItemBase :mod="{}" :info="args[0]" border="none" w-150 n-panel-grids />
<div flex="~ col gap-2" w-150 p4 border="t base">
<h2 text-xl :class="args[2] === 'install' ? 'text-primary' : 'text-red'">
<span capitalize>{{ args[2] }}</span> <code>{{ args[0].name }}</code>?
</h2>
<p op50>
Following command will be executed in your terminal:
</p>
<NCodeBlock :code="args[1].commands.join(' ')" lang="bash" px4 py2 border="~ base rounded" :lines="false" />
<p op50>
Then your <NLink role="button" n="primary" @click="openInEditor(config?._nuxtConfigFile)" v-text="'Nuxt config'" /> will be updated as:
</p>
<CodeDiff
:from="args[1].configOriginal"
:to="args[1].configGenerated"
max-h-80 of-auto py2 border="~ base rounded"
lang="ts"
/>
<p>
<span op50>After that, Nuxt will </span><span text-orange>restart automatically</span>.
</p>
<div flex="~ gap-3" mt2 justify-end>
<NTip n="sm purple" flex-auto icon="carbon-chemistry">
Experimental. Backup your project first.
</NTip>
<NButton @click="resolve(false)">
Cancel
</NButton>
<NButton n="solid" capitalize :class="args[2] === 'install' ? 'n-primary' : 'n-red'" @click="resolve(true)">
{{ args[2] }}
</NButton>
</div>
</div>
</NDialog>
</ModuleDialog>
</template>