Skip to content

Commit 39f5c68

Browse files
ulivzulivz
committed
refactor: code style
Follow the official code style guide, refs: 1. https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended 2. https://vuejs.org/v2/style-guide/#Empty-lines-in-component-instance-options-recommend 3. https://github.com/vuejs/ui
1 parent b207a5f commit 39f5c68

15 files changed

+300
-78
lines changed

‎lib/build.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
143143
readline.cursorTo(process.stdout, 0)
144144
process.stdout.write(`Rendering page: ${pagePath}`)
145145

146-
// #565 avoid duplicate description
146+
// #565 Avoid duplicate description meta at SSR.
147147
const meta = (page.frontmatter && page.frontmatter.meta || []).filter(item => item.name !== 'description')
148148
const pageMeta = renderPageMeta(meta)
149149

‎lib/default-theme/AlgoliaSearchBox.vue

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
<template>
2-
<form id="search-form" class="algolia-search-wrapper search-box">
3-
<input id="algolia-search-input" class="search-query">
2+
<form
3+
id="search-form"
4+
class="algolia-search-wrapper search-box"
5+
>
6+
<input
7+
id="algolia-search-input"
8+
class="search-query"
9+
>
410
</form>
511
</template>
612

713
<script>
814
export default {
915
props: ['options'],
16+
1017
mounted () {
1118
this.initialize()
1219
},
20+
1321
methods: {
1422
initialize () {
1523
Promise.all([
@@ -24,6 +32,7 @@ export default {
2432
})
2533
}
2634
},
35+
2736
watch: {
2837
options (newValue) {
2938
this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'

‎lib/default-theme/DropdownLink.vue

+38-12
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,48 @@
11
<template>
2-
<div class="dropdown-wrapper" :class="{ open }">
3-
<a class="dropdown-title" @click="toggle">
2+
<div
3+
class="dropdown-wrapper"
4+
:class="{ open }"
5+
>
6+
<a
7+
class="dropdown-title"
8+
@click="toggle"
9+
>
410
<span class="title">{{ item.text }}</span>
5-
<span class="arrow" :class="open ? 'down' : 'right'"></span>
11+
<span
12+
class="arrow"
13+
:class="open ? 'down' : 'right'"
14+
></span>
615
</a>
16+
717
<DropdownTransition>
8-
<ul class="nav-dropdown" v-show="open">
18+
<ul
19+
class="nav-dropdown"
20+
v-show="open"
21+
>
922
<li
10-
class="dropdown-item"
11-
v-for="(subItem, index) in item.items"
12-
:key="subItem.link || index">
23+
class="dropdown-item"
24+
:key="subItem.link || index"
25+
v-for="(subItem, index) in item.items"
26+
>
1327
<h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
14-
<ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
28+
29+
<ul
30+
class="dropdown-subitem-wrapper"
31+
v-if="subItem.type === 'links'"
32+
>
1533
<li
16-
class="dropdown-subitem"
17-
v-for="childSubItem in subItem.items"
18-
:key="childSubItem.link">
34+
class="dropdown-subitem"
35+
:key="childSubItem.link"
36+
v-for="childSubItem in subItem.items"
37+
>
1938
<NavLink :item="childSubItem"/>
2039
</li>
2140
</ul>
22-
<NavLink v-else :item="subItem"/>
41+
42+
<NavLink
43+
v-else
44+
:item="subItem"
45+
/>
2346
</li>
2447
</ul>
2548
</DropdownTransition>
@@ -32,16 +55,19 @@ import DropdownTransition from './DropdownTransition.vue'
3255
3356
export default {
3457
components: { NavLink, DropdownTransition },
58+
3559
data () {
3660
return {
3761
open: false
3862
}
3963
},
64+
4065
props: {
4166
item: {
4267
required: true
4368
}
4469
},
70+
4571
methods: {
4672
toggle () {
4773
this.open = !this.open

‎lib/default-theme/DropdownTransition.vue

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
<template>
2-
<transition name="dropdown"
3-
@enter="setHeight"
4-
@after-enter="unsetHeight"
5-
@before-leave="setHeight">
6-
<slot></slot>
2+
<transition
3+
name="dropdown"
4+
@enter="setHeight"
5+
@after-enter="unsetHeight"
6+
@before-leave="setHeight"
7+
>
8+
<slot/>
79
</transition>
810
</template>
911

1012
<script>
1113
export default {
1214
name: 'DropdownTransition',
15+
1316
methods: {
1417
setHeight (items) {
1518
// explicitly set height so that it can be transitioned
1619
items.style.height = items.scrollHeight + 'px'
1720
},
21+
1822
unsetHeight (items) {
1923
items.style.height = ''
2024
}

‎lib/default-theme/Home.vue

+33-6
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,48 @@
11
<template>
22
<div class="home">
33
<div class="hero">
4-
<img v-if="data.heroImage" :src="$withBase(data.heroImage)" alt="hero">
4+
<img
5+
v-if="data.heroImage"
6+
:src="$withBase(data.heroImage)"
7+
alt="hero"
8+
>
9+
510
<h1>{{ data.heroText || $title || 'Hello' }}</h1>
11+
612
<p class="description">
713
{{ data.tagline || $description || 'Welcome to your VuePress site' }}
814
</p>
9-
<p class="action" v-if="data.actionText && data.actionLink">
10-
<NavLink class="action-button" :item="actionLink"/>
15+
16+
<p
17+
class="action"
18+
v-if="data.actionText && data.actionLink"
19+
>
20+
<NavLink
21+
class="action-button"
22+
:item="actionLink"
23+
/>
1124
</p>
1225
</div>
13-
<div class="features" v-if="data.features && data.features.length">
14-
<div class="feature" v-for="feature in data.features">
26+
27+
<div
28+
class="features"
29+
v-if="data.features && data.features.length"
30+
>
31+
<div
32+
class="feature"
33+
v-for="feature in data.features"
34+
>
1535
<h2>{{ feature.title }}</h2>
1636
<p>{{ feature.details }}</p>
1737
</div>
1838
</div>
39+
1940
<Content custom/>
20-
<div class="footer" v-if="data.footer">
41+
42+
<div
43+
class="footer"
44+
v-if="data.footer"
45+
>
2146
{{ data.footer }}
2247
</div>
2348
</div>
@@ -28,10 +53,12 @@ import NavLink from './NavLink.vue'
2853
2954
export default {
3055
components: { NavLink },
56+
3157
computed: {
3258
data () {
3359
return this.$page.frontmatter
3460
},
61+
3562
actionLink () {
3663
return {
3764
link: this.data.actionLink,

‎lib/default-theme/Layout.vue

+54-12
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,58 @@
11
<template>
2-
<div class="theme-container"
2+
<div
3+
class="theme-container"
34
:class="pageClasses"
45
@touchstart="onTouchStart"
5-
@touchend="onTouchEnd">
6-
<Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar"/>
7-
<div class="sidebar-mask" @click="toggleSidebar(false)"></div>
8-
<Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
9-
<slot name="sidebar-top" slot="top"/>
10-
<slot name="sidebar-bottom" slot="bottom"/>
6+
@touchend="onTouchEnd"
7+
>
8+
<Navbar
9+
v-if="shouldShowNavbar"
10+
@toggle-sidebar="toggleSidebar"
11+
/>
12+
13+
<div
14+
class="sidebar-mask"
15+
@click="toggleSidebar(false)"
16+
></div>
17+
18+
<Sidebar
19+
:items="sidebarItems"
20+
@toggle-sidebar="toggleSidebar"
21+
>
22+
<slot
23+
name="sidebar-top"
24+
slot="top"
25+
/>
26+
<slot
27+
name="sidebar-bottom"
28+
slot="bottom"
29+
/>
1130
</Sidebar>
12-
<div class="custom-layout" v-if="$page.frontmatter.layout">
31+
32+
<div
33+
class="custom-layout"
34+
v-if="$page.frontmatter.layout"
35+
>
1336
<component :is="$page.frontmatter.layout"/>
1437
</div>
38+
1539
<Home v-else-if="$page.frontmatter.home"/>
16-
<Page v-else :sidebar-items="sidebarItems">
17-
<slot name="page-top" slot="top"/>
18-
<slot name="page-bottom" slot="bottom"/>
40+
41+
<Page
42+
v-else
43+
:sidebar-items="sidebarItems"
44+
>
45+
<slot
46+
name="page-top"
47+
slot="top"
48+
/>
49+
<slot
50+
name="page-bottom"
51+
slot="bottom"
52+
/>
1953
</Page>
20-
<SWUpdatePopup :updateEvent="swUpdateEvent" />
54+
55+
<SWUpdatePopup :updateEvent="swUpdateEvent"/>
2156
</div>
2257
</template>
2358

@@ -33,6 +68,7 @@ import { resolveSidebarItems } from './util'
3368
3469
export default {
3570
components: { Home, Page, Sidebar, Navbar, SWUpdatePopup },
71+
3672
data () {
3773
return {
3874
isSidebarOpen: false,
@@ -57,6 +93,7 @@ export default {
5793
this.$themeLocaleConfig.nav
5894
)
5995
},
96+
6097
shouldShowSidebar () {
6198
const { frontmatter } = this.$page
6299
return (
@@ -66,6 +103,7 @@ export default {
66103
this.sidebarItems.length
67104
)
68105
},
106+
69107
sidebarItems () {
70108
return resolveSidebarItems(
71109
this.$page,
@@ -74,6 +112,7 @@ export default {
74112
this.$localePath
75113
)
76114
},
115+
77116
pageClasses () {
78117
const userPageClass = this.$page.frontmatter.pageClass
79118
return [
@@ -112,13 +151,15 @@ export default {
112151
toggleSidebar (to) {
113152
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
114153
},
154+
115155
// side swipe
116156
onTouchStart (e) {
117157
this.touchStart = {
118158
x: e.changedTouches[0].clientX,
119159
y: e.changedTouches[0].clientY
120160
}
121161
},
162+
122163
onTouchEnd (e) {
123164
const dx = e.changedTouches[0].clientX - this.touchStart.x
124165
const dy = e.changedTouches[0].clientY - this.touchStart.y
@@ -130,6 +171,7 @@ export default {
130171
}
131172
}
132173
},
174+
133175
onSWUpdated (e) {
134176
this.swUpdateEvent = e
135177
}

‎lib/default-theme/NavLink.vue

+3
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,20 @@ export default {
2626
required: true
2727
}
2828
},
29+
2930
computed: {
3031
link () {
3132
return ensureExt(this.item.link)
3233
},
34+
3335
exact () {
3436
if (this.$site.locales) {
3537
return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
3638
}
3739
return this.link === '/'
3840
}
3941
},
42+
4043
methods: {
4144
isExternal,
4245
isMailto,

0 commit comments

Comments
 (0)