Skip to content

Commit 969bd65

Browse files
committed
prune unused images
1 parent 7130d31 commit 969bd65

File tree

94 files changed

+18
-116
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+18
-116
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
},
77
"dependencies": {
88
"@vue/repl": "^0.4.7",
9-
"@vue/theme": "^0.1.22",
9+
"@vue/theme": "^0.1.23",
1010
"vitepress": "^0.20.9",
1111
"vue": "^3.2.25"
1212
},

pnpm-lock.yaml

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/guide/advanced/composition-api-faq.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,13 +70,13 @@ Take the folder explorer component from Vue CLI's GUI as an example: this compon
7070

7171
The [original version](https://github.com/vuejs/vue-cli/blob/a09407dd5b9f18ace7501ddb603b95e31d6d93c0/packages/@vue/cli-ui/src/components/folder/FolderExplorer.vue#L198-L404) of the component was written in Options API. If we give each line of code a color based on the logical concern it is dealing with, this is how it looks:
7272

73-
<img alt="folder component before" src="https://user-images.githubusercontent.com/499550/62783021-7ce24400-ba89-11e9-9dd3-36f4f6b1fae2.png" width="129" height="500" style="margin: 1.2em auto">
73+
<img alt="folder component before" src="./images/options-api.png" width="129" height="500" style="margin: 1.2em auto">
7474

7575
Notice how code dealing with the same logical concern is forced to be split under different options, located in different parts of the file. In a component that is several hundred lines long, understanding and navigating a single logical concern requires constantly scrolling up and down the file, making it much more difficult than it should be. In addition, if we ever intend to extract a logical concern into a reusable utility, it takes quite a bit of work to find and extract the right pieces of code from different parts of the file.
7676

7777
Here's the same component, before and after the [refactor into Composition API](https://gist.github.com/yyx990803/8854f8f6a97631576c14b63c8acd8f2e):
7878

79-
![folder component after](https://user-images.githubusercontent.com/499550/62783026-810e6180-ba89-11e9-8774-e7771c8095d6.png)
79+
![folder component after](./images/composition-api-after.png)
8080

8181
Notice how the code related to the same logical concern can now be grouped together: we no longer need to jump between different options blocks while working on a specific logical concern. Moreover, we can now move a group of code into an external file with minimal effort, since we no longer need to shuffle the code around in order to extract them. This reduced friction for refactor is key to the long term maintainability in large codebases.
8282

201 KB
Loading

src/guide/best-practices/accessibility.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ Provide labels to describe the purpose of all form control; linking `for` and `i
149149

150150
If you inspect this element in your chrome developer tools and open the Accessibility tab inside the Elements tab, you will see how the input gets its name from the label:
151151

152-
![Chrome Developer Tools showing input accessible name from label](/images/AccessibleLabelChromeDevTools.png)
152+
![Chrome Developer Tools showing input accessible name from label](./images/AccessibleLabelChromeDevTools.png)
153153

154154
:::warning Warning:
155155
Though you might have seen labels wrapping the input fields like this:
@@ -183,7 +183,7 @@ You can also give the input an accessible name with [`aria-label`](https://devel
183183

184184
Feel free to inspect this element in Chrome DevTools to see how the accessible name has changed:
185185

186-
![Chrome Developer Tools showing input accessible name from aria-label](/images/AccessibleARIAlabelDevTools.png)
186+
![Chrome Developer Tools showing input accessible name from aria-label](./images/AccessibleARIAlabelDevTools.png)
187187

188188
#### `aria-labelledby`
189189

@@ -213,7 +213,7 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi
213213

214214
<!-- <common-codepen-snippet title="Form ARIA labelledby" slug="MWJvvBe" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
215215

216-
![Chrome Developer Tools showing input accessible name from aria-labelledby](/images/AccessibleARIAlabelledbyDevTools.png)
216+
![Chrome Developer Tools showing input accessible name from aria-labelledby](./images/AccessibleARIAlabelledbyDevTools.png)
217217

218218
#### `aria-describedby`
219219

@@ -247,7 +247,7 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi
247247

248248
You can see the description by inspecting Chrome DevTools:
249249

250-
![Chrome Developer Tools showing input accessible name from aria-labelledby and description with aria-describedby](/images/AccessibleARIAdescribedby.png)
250+
![Chrome Developer Tools showing input accessible name from aria-labelledby and description with aria-describedby](./images/AccessibleARIAdescribedby.png)
251251

252252
### Placeholder
253253

0 commit comments

Comments
 (0)