Skip to content

Commit 639940b

Browse files
bencodezenbencodezen
authored
feature (#169): add migration badges (#181)
* feature (#169): add new migration badges * docs (#169): update badges on parts of migration guide * feature (#169): update migration badges
1 parent 17fd2e5 commit 639940b

18 files changed

+168
-44
lines changed

‎src/.vuepress/components/MigrationBadges.vue

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<script>
2+
const validBadges = ['new', 'breaking', 'removed', 'updated']
3+
4+
export default {
5+
props: {
6+
badges: {
7+
type: Array,
8+
default: () => [],
9+
validator(value) {
10+
return validBadges.includes(value)
11+
}
12+
}
13+
}
14+
}
15+
</script>
16+
17+
<template>
18+
<div class="migration-badge-wrapper">
19+
<span
20+
v-for="badgeType in badges"
21+
:class="`migration-badge is-${badgeType}`"
22+
:key="`badge-type-${badgeType}`"
23+
>
24+
{{ badgeType }}
25+
</span>
26+
</div>
27+
</template>
28+
29+
<style lang="scss" scoped>
30+
.migration-badge {
31+
background-color: #ccc;
32+
font-size: 0.8rem;
33+
border: 2px solid #ccc;
34+
border-radius: 5px;
35+
margin-right: 0.5rem;
36+
margin-top: 0.5rem;
37+
color: #222;
38+
padding: 0.25rem 0.25rem;
39+
font-weight: bold;
40+
41+
&:first-child {
42+
margin-left: 1rem;
43+
}
44+
45+
&.is-new {
46+
background-color: #228740;
47+
border-color: #228740;
48+
color: #fff;
49+
}
50+
51+
&.is-breaking {
52+
background-color: #b00000;
53+
border-color: #b00000;
54+
color: #fff;
55+
}
56+
57+
&.is-removed {
58+
background-color: #cf8700;
59+
border-color: #cf8700;
60+
color: #fff;
61+
}
62+
63+
&.is-updated {
64+
background-color: #fcff44;
65+
border-color: #fcff44;
66+
color: #222;
67+
}
68+
}
69+
70+
.migration-badge-wrapper {
71+
display: flex;
72+
margin-top: -0.5rem;
73+
}
74+
</style>

‎src/.vuepress/theme/styles/index.styl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ h1, h2, h3, h4, h5, h6
128128

129129
&:first-child
130130
display flex
131+
flex-wrap wrap
131132
align-items center
132133
margin-top -1.5rem
133134
margin-bottom 1rem

‎src/guide/migration/async-components.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
# Async Components
1+
---
2+
badges:
3+
- new
4+
---
5+
6+
# Async Components <MigrationBadges :badges="$frontmatter.badges" />
27

38
## Overview
49

‎src/guide/migration/attribute-coercion.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
# Attribute Coercion Behavior
1+
---
2+
badges:
3+
- breaking
4+
---
5+
6+
# Attribute Coercion Behavior <MigrationBadges :badges="$frontmatter.badges" />
27

38
::: info Info
49
This is a low-level internal API change and does not affect most developers.
@@ -27,7 +32,7 @@ In 2.x, we had the following strategies for coercing `v-bind` values:
2732

2833
The following table describes how Vue coerce "enumerated attributes" differently with normal non-boolean attributes:
2934

30-
| Binding expression | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
35+
| Binding expression | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
3136
| ------------------- | ----------------------- | --------------------------------- |
3237
| `:attr="null"` | / | `draggable="false"` |
3338
| `:attr="undefined"` | / | / |
@@ -53,7 +58,7 @@ For non-boolean attributes, Vue will stop removing them if they are `false` and
5358

5459
The following table describes the new behavior:
5560

56-
| Binding expression | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
61+
| Binding expression | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
5762
| ------------------- | -------------------------- | --------------------------------- |
5863
| `:attr="null"` | / | / <sup>†</sup> |
5964
| `:attr="undefined"` | / | / |

‎src/guide/migration/custom-directives.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
# Custom Directives
1+
---
2+
badges:
3+
- breaking
4+
---
5+
6+
# Custom Directives <MigrationBadges :badges="$frontmatter.badges" />
27

38
## Overview
49

‎src/guide/migration/custom-elements-interop.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
types:
2+
badges:
33
- breaking
44
---
55

6-
# Custom Elements Interop changes <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
6+
# Custom Elements Interop changes <MigrationBadges :badges="$frontmatter.badges" />
77

88
# Overview
99

‎src/guide/migration/data-option.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
---
2-
types:
2+
title: Data Option
3+
badges:
34
- breaking
45
---
56

6-
# Data Option <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
7+
# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
78

89
## Overview
910

‎src/guide/migration/events-api.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
---
2-
types:
3-
- removed
2+
badges:
43
- breaking
54
---
65

7-
# Events API <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
6+
# Events API <MigrationBadges :badges="$frontmatter.badges" />
87

98
## Overview
109

‎src/guide/migration/filters.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
---
2-
types:
2+
badges:
33
- removed
4-
- breaking
54
---
65

7-
# Filters <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
6+
# Filters <MigrationBadges :badges="$frontmatter.badges" />
87

98
## Overview
109

‎src/guide/migration/fragments.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
# Fragments
1+
---
2+
badges:
3+
- new
4+
---
5+
6+
# Fragments <MigrationBadges :badges="$frontmatter.badges" />
27

38
## Overview
49

0 commit comments

Comments
 (0)