-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
/
WebpackDashboard.vue
142 lines (120 loc) · 3.13 KB
/
WebpackDashboard.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<template>
<div class="vue-webpack-dashboard">
<div class="pane-toolbar card">
<VueIcon icon="dashboard"/>
<div class="title">{{ $t('org.vue.vue-webpack.dashboard.title') }}</div>
<template
v-if="mode === 'serve'"
>
<VueButton
icon-left="open_in_browser"
:label="$t('org.vue.vue-webpack.dashboard.open-app')"
:disabled="!serveUrl"
:href="serveUrl"
target="_blank"
rel="noopener noreferrer"
/>
<VueIcon
icon="lens"
class="separator"
/>
</template>
<VueSwitch
v-if="mode !== 'serve' && modernMode"
v-model="showModernBuild"
>
{{ $t('org.vue.vue-webpack.modern-mode') }}
</VueSwitch>
<VueSelect v-model="sizeField">
<VueSelectButton value="stats" :label="`${$t('org.vue.vue-webpack.sizes.stats')}`"/>
<VueSelectButton value="parsed" :label="`${$t('org.vue.vue-webpack.sizes.parsed')}`"/>
<VueSelectButton value="gzip" :label="`${$t('org.vue.vue-webpack.sizes.gzip')}`"/>
</VueSelect>
<VueButton
class="icon-button"
icon-left="help"
v-tooltip="$t('org.vue.vue-webpack.sizes.help')"
/>
</div>
<div class="content vue-ui-grid">
<BuildStatus />
<BuildProgress />
<SpeedStats class="span-2"/>
<AssetList />
<ModuleList />
</div>
<div class="logo">
<a href="https://webpack.js.org/" target="_blank" rel="noopener noreferrer">
<img src="../assets/webpack.svg" class="webpack-logo">
</a>
</div>
</div>
</template>
<script>
import Dashboard from '../mixins/Dashboard'
import BuildStatus from './BuildStatus'
import BuildProgress from './BuildProgress'
import SpeedStats from './SpeedStats'
import AssetList from './AssetList'
import ModuleList from './ModuleList'
export default {
mixins: [
Dashboard
],
components: {
BuildStatus,
BuildProgress,
SpeedStats,
AssetList,
ModuleList
}
}
</script>
<style>
@import '~vue-progress-path/dist/vue-progress-path.css';
</style>
<style lang="stylus" scoped>
@import "~@vue/cli-ui/src/style/imports"
.vue-webpack-dashboard
.content
grid-template-columns 9fr 4fr
grid-gap $padding-item
>>>
.title
color lighten($vue-ui-color-dark, 60%)
font-size 20px
font-weight 300
text-align center
margin-bottom $padding-item
.list
display grid
grid-template-columns 1fr
grid-gap 16px
.info-block
v-box()
box-center()
font-weight 300
text-align center
.label
color lighten($vue-ui-color-dark, 60%)
font-size 20px
.value
color $vue-ui-color-dark
font-size 24px
.vue-ui-dark-mode &
color $vue-ui-color-light
.secondary
opacity .75
font-size 16px
/deep/ .card
padding $padding-item
.pane-toolbar
margin-bottom $padding-item
.logo
margin $padding-item 0
v-box()
box-center()
.webpack-logo
width 32px
height @width
</style>