Skip to content

Commit 331758f

Browse files
NataliaTepluhinaNataliaTepluhina
committed
Merge branch 'master' of github.com:vuejs/docs-next
2 parents 1cb74b9 + deb77f4 commit 331758f

38 files changed

+253
-516
lines changed

‎src/.vuepress/components/MigrationBadges.vue

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
<script>
2-
const validBadges = ['new', 'breaking', 'removed', 'updated']
2+
const validBadges = {
3+
new: 'new',
4+
breaking: 'breaking',
5+
removed: 'removed',
6+
updated: 'updated'
7+
}
38
49
export default {
510
props: {
611
badges: {
712
type: Array,
813
default: () => [],
914
validator(value) {
10-
return value.every(badge => validBadges.includes(badge))
15+
return value.every(badge => Object.keys(validBadges).includes(badge))
1116
}
1217
}
18+
},
19+
data() {
20+
return {
21+
validBadges
22+
}
1323
}
1424
}
1525
</script>
@@ -21,7 +31,7 @@ export default {
2131
:class="`migration-badge is-${badgeType}`"
2232
:key="`badge-type-${badgeType}`"
2333
>
24-
{{ badgeType }}
34+
{{ validBadges[badgeType] }}
2535
</span>
2636
</div>
2737
</template>

‎src/.vuepress/components/common/codepen-snippet.vue

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<template>
2+
<p
3+
class="codepen"
4+
:data-theme-id="theme"
5+
:data-preview="preview || null"
6+
:data-editable="editable || null"
7+
:data-height="height"
8+
:data-default-tab="tab"
9+
:data-user="user"
10+
:data-slug-hash="slug"
11+
:data-pen-title="title"
12+
:data-embed-version="version"
13+
:style="`height: ${height}px`">
14+
<span>See the Pen <a :href="href">{{ title }}</a>
15+
by {{ name || user }} (<a :href="`https://codepen.io/${user}`">@{{user}}</a>)
16+
on <a href="https://codepen.io">CodePen</a>.</span>
17+
</p>
18+
</template>
19+
20+
<script>
21+
export default {
22+
props: {
23+
title: {
24+
type: String,
25+
default: null,
26+
required: true,
27+
},
28+
29+
slug: {
30+
type: String,
31+
default: null,
32+
required: true,
33+
},
34+
35+
tab: {
36+
type: String,
37+
default: 'result',
38+
},
39+
40+
team: {
41+
type: Boolean,
42+
default: true,
43+
},
44+
45+
user: {
46+
type: String,
47+
default: 'Vue',
48+
},
49+
50+
name: {
51+
type: String,
52+
default: null,
53+
},
54+
55+
height: {
56+
type: Number,
57+
default: 300,
58+
},
59+
60+
theme: {
61+
type: String,
62+
default: '39028',
63+
},
64+
65+
preview: {
66+
type: Boolean,
67+
default: true,
68+
},
69+
70+
editable: {
71+
type: Boolean,
72+
default: true,
73+
},
74+
75+
version: {
76+
type: String,
77+
default: null,
78+
}
79+
},
80+
mounted() {
81+
const codepenScript = document.createElement('script')
82+
codepenScript.setAttribute('src', 'https://static.codepen.io/assets/embed/ei.js')
83+
codepenScript.async = true
84+
this.$el.appendChild(codepenScript)
85+
},
86+
computed: {
87+
href() {
88+
return `https://codepen.io/${this.team ? 'team' : ''}${this.user}/pen/${this.slug}`
89+
}
90+
},
91+
}
92+
</script>
93+
94+
<style lang="scss">
95+
.codepen {
96+
box-sizing: border-box;
97+
display: flex;
98+
align-items: center;
99+
justify-content: center;
100+
border: 2px solid;
101+
margin: 1em 0;
102+
padding: 1em;
103+
}
104+
</style>

‎src/.vuepress/components/community/team/members.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,14 +109,14 @@ const members = [
109109
languages: ['hi', 'en'],
110110
work: {
111111
role: 'Software Engineer',
112-
org: 'Myntra',
113-
orgUrl: 'https://www.myntra.com/'
112+
org: 'Grammarly',
113+
orgUrl: 'https://grammarly.com/'
114114
},
115115
github: 'znck',
116116
twitter: 'znck0',
117-
reposOfficial: ['rollup-plugin-vue', 'vue-issue-helper'],
118-
reposPersonal: ['keynote', 'bootstrap-for-vue', 'vue-interop'],
119-
links: ['https://znck.me', 'https://www.codementor.io/znck']
117+
reposOfficial: ['rollup-plugin-vue', 'vue-next'],
118+
reposPersonal: ['vue-developer-experience', 'prop-types', 'grammarly'],
119+
links: ['https://znck.me']
120120
},
121121
{
122122
name: 'Linusborg',

‎src/api/refs-api.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,8 @@ export default {
8484
}
8585
```
8686

87+
`toRef` will return a usable ref even if the source property doesn't currently exist. This makes it especially useful when working with optional props, which wouldn't be picked up by [`toRefs`](#torefs).
88+
8789
## `toRefs`
8890

8991
Converts a reactive object to a plain object where each property of the resulting object is a [`ref`](#ref) pointing to the corresponding property of the original object.
@@ -140,6 +142,8 @@ export default {
140142
}
141143
```
142144

145+
`toRefs` will only generate refs for properties that are included in the source object. To create a ref for a specific property use [`toRef`](#toref) instead.
146+
143147
## `isRef`
144148

145149
Checks if a value is a ref object.

‎src/cookbook/editable-svg-icons.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export default {
143143

144144
We're applying `refs` to the groups of paths we need to move, and as both sides of the scissors have to move in tandem, we'll create a function we can reuse where we'll pass in the `refs`. The use of GreenSock helps resolve animation support and `transform-origin` issues across browser.
145145

146-
<p data-height="300" data-theme-id="0" data-slug-hash="dJRpgY" data-default-tab="result" data-user="Vue" data-embed-version="2" data-pen-title="Editable SVG Icon System: Animated icon" class="codepen">See the Pen <a href="https://codepen.io/team/Vue/pen/dJRpgY/">Editable SVG Icon System: Animated icon</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>) on <a href="https://codepen.io">CodePen</a>.</p><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
146+
<common-codepen-snippet title="Editable SVG Icon System: Animated icon" slug="dJRpgY" :preview="false" :editable="false" version="2" theme="0" />
147147

148148
<p style="margin-top:-30px">Pretty easily accomplished! And easy to update on the fly.</p>
149149

‎src/examples/commits.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> This example fetches latest Vue.js commits data from GitHub’s API and displays them as a list. You can switch between the master and dev branches.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="RwaWmzY" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Commits">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/RwaWmzY">
7-
Vue 3 Commits</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Commits" slug="RwaWmzY" tab="js,result" />

‎src/examples/elastic-header.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
11
# Elastic Header Example
22

3-
<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="ZEWGmar" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
4-
<span>See the Pen <a href="https://codepen.io/immarina/pen/ZEWGmar">
5-
Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
6-
on <a href="https://codepen.io">CodePen</a>.</span>
7-
</p>
8-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
3+
<common-codepen-snippet title="Vue 3 Elastic Draggable Header Example" slug="ZEWGmar" :height="474" tab="js,result" :team="false" user="immarina" name="Vue" :preview="false" :editable="false" />

‎src/examples/grid-component.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> This is an example of creating a reusable grid component and using it with external data.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="BaKbowJ" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Grid Component Example">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/BaKbowJ">
7-
Vue 3 Grid Component Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Grid Component Example" slug="BaKbowJ" tab="js,result" />

‎src/examples/markdown.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> A simple Markdown editor
44
5-
<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="oNxXzyB" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
6-
<span>See the Pen <a href="https://codepen.io/immarina/pen/oNxXzyB">
7-
Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Markdown Editor" slug="oNxXzyB" :height="474" tab="js,result" :team="false" user="immarina" name="Vue" :preview="false" :editable="false" />

‎src/examples/modal.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> Features used: component, prop passing, content insertion, transitions.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="mdPoyvv" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Modal Component">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/mdPoyvv">
7-
Vue 3 Modal Component</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Modal Component" slug="mdPoyvv" tab="js,result" />

‎src/examples/select2.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="eYZpwOB" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Wrapper Component Example">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/eYZpwOB">
7-
Vue 3 Wrapper Component Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Wrapper Component Example" slug="eYZpwOB" tab="js,result" />

‎src/examples/svg.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="XWdmLWM" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 SVG Graph Example">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/XWdmLWM">
7-
Vue 3 SVG Graph Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 SVG Graph Example" slug="XWdmLWM" tab="js,result" />

‎src/examples/todomvc.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,4 @@
66
Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the **localStorage** data will fail to be saved.
77
:::
88

9-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="Yzqyozj" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 TodoMVC">
10-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/Yzqyozj">
11-
Vue 3 TodoMVC</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
12-
on <a href="https://codepen.io">CodePen</a>.</span>
13-
</p>
14-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
9+
<common-codepen-snippet title="Vue 3 TodoMVC" slug="Yzqyozj" tab="js,result" />

‎src/examples/tree-view.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> Example of a tree view implementation showcasing recursive usage of components.
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="WNwQqbN" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Tree View">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/WNwQqbN">
7-
Vue 3 Tree View</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Tree View" slug="WNwQqbN" tab="js,result" />

‎src/guide/a11y-basics.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,7 @@ export default {
5454
</script>
5555
```
5656

57-
<p class="codepen" data-height="350" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="VwepxJa" style="height: 350px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Skip to Main">
58-
<span>See the Pen <a href="https://codepen.io/mlama007/pen/VwepxJa">
59-
Skip to Main</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
60-
on <a href="https://codepen.io">CodePen</a>.</span>
61-
</p>
62-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
57+
<common-codepen-snippet title="Skip to Main" slug="VwepxJa" :height="350" tab="js,result" :team="false" user="mlama007" name="Maria" theme="light" :preview="false" :editable="false" />
6358

6459
[Read documentation on skip link to main content](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html)
6560

0 commit comments

Comments
 (0)