Skip to content

Commit 5c4c89a

Browse files
tmorehousetmorehouse
authored
chore(docs): convert examples to use new v-slot syntax (#3955)
1 parent 5ca8087 commit 5c4c89a

File tree

21 files changed

+312
-235
lines changed

21 files changed

+312
-235
lines changed

‎docs/components/componentdoc.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,16 @@
5050
bordered
5151
striped
5252
>
53-
<template slot="cell[prop]" slot-scope="{ value, item }">
53+
<template v-slot:cell[prop]="{ value, item }">
5454
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
5555
<b-badge v-if="item.required" variant="info">Required</b-badge>
5656
<b-badge v-else-if="item.deprecated" variant="danger">Deprecated</b-badge>
5757
<b-badge v-else-if="item.deprecation" variant="warning">Deprecation</b-badge>
5858
</template>
59-
<template slot="cell[defaultValue]" slot-scope="{ value }">
59+
<template v-slot:cell[defaultValue]="{ value }">
6060
<code v-if="value" class="notranslate" translate="no">{{ value }}</code>
6161
</template>
62-
<template slot="row-details" slot-scope="{ item }">
62+
<template v-slot:row-details="{ item }">
6363
<p v-if="typeof item.deprecated === 'string'" class="mb-1 small">
6464
{{ item.deprecated }}
6565
</p>
@@ -82,10 +82,10 @@
8282
bordered
8383
striped
8484
>
85-
<template slot="cell[prop]" slot-scope="{ value }">
85+
<template v-slot:cell[prop]="{ value }">
8686
<code class="notranslate" translate="no">{{ kebabCase(value) }}</code>
8787
</template>
88-
<template slot="cell[event]" slot-scope="{ value }">
88+
<template v-slot:cell[event]="{ value }">
8989
<code class="notranslate" translate="no">{{ value }}</code>
9090
</template>
9191
</b-table>
@@ -105,7 +105,7 @@
105105
bordered
106106
striped
107107
>
108-
<template slot="cell[name]" slot-scope="{ value }">
108+
<template v-slot:cell[name]="{ value }">
109109
<code class="text-nowrap nostranslate" translate="no">{{ value }}</code>
110110
</template>
111111
</b-table>
@@ -124,10 +124,10 @@
124124
bordered
125125
striped
126126
>
127-
<template slot="cell[event]" slot-scope="{ value }">
127+
<template v-slot:cell[event]="{ value }">
128128
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
129129
</template>
130-
<template slot="cell[args]" slot-scope="{ value, item }">
130+
<template v-slot:cell[args]="{ value, item }">
131131
<p
132132
v-for="arg in value"
133133
:key="`event-${item.event}-${arg.arg ? arg.arg : 'none'}`"
@@ -159,10 +159,10 @@
159159
bordered
160160
striped
161161
>
162-
<template slot="cell[event]" slot-scope="{ value }">
162+
<template v-slot:cell[event]="{ value }">
163163
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
164164
</template>
165-
<template slot="cell[args]" slot-scope="{ value, item }">
165+
<template v-slot:cell[args]="{ value, item }">
166166
<p
167167
v-for="arg in value"
168168
:key="`event-${item.event}-${arg.arg ? arg.arg : 'none'}`"

‎docs/components/importdoc.vue

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@
2222
bordered
2323
striped
2424
>
25-
<template slot="cell[component]" slot-scope="{ value }">
25+
<template v-slot:cell[component]="{ value }">
2626
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
2727
</template>
28-
<template slot="cell[namedExport]" slot-scope="{ value }">
28+
<template v-slot:cell[namedExport]="{ value }">
2929
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
3030
</template>
31-
<template slot="cell[importPath]" slot-scope="{ value }">
31+
<template v-slot:cell[importPath]="{ value }">
3232
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
3333
</template>
3434
</b-table>
@@ -57,13 +57,13 @@
5757
bordered
5858
striped
5959
>
60-
<template slot="cell[directive]" slot-scope="{ value }">
60+
<template v-slot:cell[directive]="{ value }">
6161
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
6262
</template>
63-
<template slot="cell[namedExport]" slot-scope="{ value }">
63+
<template v-slot:cell[namedExport]="{ value }">
6464
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
6565
</template>
66-
<template slot="cell[importPath]" slot-scope="{ value }">
66+
<template v-slot:cell[importPath]="{ value }">
6767
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
6868
</template>
6969
</b-table>
@@ -97,10 +97,10 @@
9797
bordered
9898
striped
9999
>
100-
<template slot="cell[namedExport]" slot-scope="{ value }">
100+
<template v-slot:cell[namedExport]="{ value }">
101101
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
102102
</template>
103-
<template slot="cell[importPath]" slot-scope="{ value }">
103+
<template v-slot:cell[importPath]="{ value }">
104104
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
105105
</template>
106106
</b-table>

‎src/components/card/README.md

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -217,10 +217,14 @@ You can control the wrapper element tags used by setting the `header-tag` and `f
217217
</b-card>
218218

219219
<b-card title="Title" header-tag="header" footer-tag="footer">
220-
<h6 slot="header" class="mb-0">Header Slot</h6>
220+
<template v-slot:header>
221+
<h6 class="mb-0">Header Slot</h6>
222+
</template>
221223
<b-card-text>Header and footers using slots.</b-card-text>
222224
<b-button href="#" variant="primary">Go somewhere</b-button>
223-
<em slot="footer">Footer Slot</em>
225+
<template v-slot:footer>
226+
<em>Footer Slot</em>
227+
</template>
224228
</b-card>
225229
</b-card-group>
226230
</div>
@@ -243,7 +247,9 @@ card.
243247
img-alt="Image"
244248
img-top
245249
>
246-
<h4 slot="header">Hello World</h4>
250+
<template v-slot:header>
251+
<h4 class="mb-0">>Hello World</h4>
252+
</template>
247253

248254
<b-card-body>
249255
<b-card-title>Card Title</b-card-title>
@@ -504,11 +510,13 @@ Integrate [`<b-nav>`](/docs/components/nav) into card headers easily.
504510
```html
505511
<div>
506512
<b-card title="Card Title" body-class="text-center">
507-
<b-nav slot="header" card-header tabs>
508-
<b-nav-item active>Active</b-nav-item>
509-
<b-nav-item>Inactive</b-nav-item>
510-
<b-nav-item disabled>Disabled</b-nav-item>
511-
</b-nav>
513+
<template v-slot:header>
514+
<b-nav card-header tabs>
515+
<b-nav-item active>Active</b-nav-item>
516+
<b-nav-item>Inactive</b-nav-item>
517+
<b-nav-item disabled>Disabled</b-nav-item>
518+
</b-nav>
519+
</template>
512520

513521
<b-card-text>
514522
With supporting text below as a natural lead-in to additional content.
@@ -572,22 +580,28 @@ When using card groups with footers, their content will automatically line up.
572580
This is a wider card with supporting text below as a natural lead-in to additional content.
573581
This content is a little bit longer.
574582
</b-card-text>
575-
<div slot="footer"><small class="text-muted">Last updated 3 mins ago</small></div>
583+
<template v-slot:footer>
584+
<small class="text-muted">Last updated 3 mins ago</small>
585+
</template>
576586
</b-card>
577587

578588
<b-card title="Title" img-src="https://placekitten.com/g/300/450" img-alt="Image" img-top>
579589
<b-card-text>
580590
This card has supporting text below as a natural lead-in to additional content.
581591
</b-card-text>
582-
<div slot="footer"><small class="text-muted">Last updated 3 mins ago</small></div>
592+
<template v-slot:footer>
593+
<small class="text-muted">Last updated 3 mins ago</small>
594+
</template>
583595
</b-card>
584596

585597
<b-card title="Title" img-src="https://placekitten.com/g/300/450" img-alt="Image" img-top>
586598
<b-card-text>
587599
This is a wider card with supporting text below as a natural lead-in to additional content.
588600
This card has even longer content than the first to show that equal height action.
589601
</b-card-text>
590-
<div slot="footer"><small class="text-muted">Last updated 3 mins ago</small></div>
602+
<template v-slot:footer>
603+
<small class="text-muted">Last updated 3 mins ago</small>
604+
</template>
591605
</b-card>
592606
</b-card-group>
593607
</div>
@@ -609,22 +623,28 @@ automatically line up.
609623
This is a wider card with supporting text below as a natural lead-in to additional content.
610624
This content is a little bit longer.
611625
</b-card-text>
612-
<div slot="footer"><small class="text-muted">Last updated 3 mins ago</small></div>
626+
<template v-slot:footer>
627+
<small class="text-muted">Last updated 3 mins ago</small>
628+
</template>
613629
</b-card>
614630

615631
<b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Image" img-top>
616632
<b-card-text>
617633
This card has supporting text below as a natural lead-in to additional content.
618634
</b-card-text>
619-
<div slot="footer"><small class="text-muted">Last updated 3 mins ago</small></div>
635+
<template v-slot:footer>
636+
<small class="text-muted">Last updated 3 mins ago</small>
637+
</template>
620638
</b-card>
621639

622640
<b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Image" img-top>
623641
<b-card-text>
624642
This is a wider card with supporting text below as a natural lead-in to additional content.
625643
This card has even longer content than the first to show that equal height action.
626644
</b-card-text>
627-
<div slot="footer"><small class="text-muted">Last updated 3 mins ago</small></div>
645+
<template v-slot:footer>
646+
<small class="text-muted">Last updated 3 mins ago</small>
647+
</template>
628648
</b-card>
629649
</b-card-group>
630650
</div>
@@ -696,7 +716,9 @@ set them to display: inline-block as column-break-inside: avoid isn't a bulletpr
696716
This is a wider card with supporting text below as a natural lead-in to additional content.
697717
This card has even longer content than the first.
698718
</b-card-text>
699-
<div slot="footer"><small class="text-muted">Footer Text</small></div>
719+
<template v-slot:footer>
720+
<small class="text-muted">Footer Text</small>
721+
</template>
700722
</b-card>
701723
</b-card-group>
702724
</div>

‎src/components/carousel/README.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,15 @@
3838
<!-- Slides with img slot -->
3939
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
4040
<b-carousel-slide>
41-
<img
42-
slot="img"
43-
class="d-block img-fluid w-100"
44-
width="1024"
45-
height="480"
46-
src="https://picsum.photos/1024/480/?image=55"
47-
alt="image slot"
48-
>
41+
<template v-slot:img>
42+
<img
43+
class="d-block img-fluid w-100"
44+
width="1024"
45+
height="480"
46+
src="https://picsum.photos/1024/480/?image=55"
47+
alt="image slot"
48+
>
49+
</template>
4950
</b-carousel-slide>
5051

5152
<!-- Slide with blank fluid image to maintain slide aspect ratio -->

‎src/components/dropdown/README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ precedence.
4040
</b-dropdown>
4141

4242
<b-dropdown>
43-
<template slot="button-content">
43+
<template v-slot:button-content>
4444
Custom <strong>Content</strong> with <em>HTML</em> via Slot
4545
</template>
4646
<b-dropdown-item href="#">An item</b-dropdown-item>
@@ -321,7 +321,9 @@ to `true`. This is useful when the dropdown is to be displayed as an icon.
321321
```html
322322
<div>
323323
<b-dropdown size="lg" variant="link" toggle-class="text-decoration-none" no-caret>
324-
<template slot="button-content">&#x1f50d;<span class="sr-only">Search</span></template>
324+
<template v-slot:button-content>
325+
&#x1f50d;<span class="sr-only">Search</span>
326+
</template>
325327
<b-dropdown-item href="#">Action</b-dropdown-item>
326328
<b-dropdown-item href="#">Another action</b-dropdown-item>
327329
<b-dropdown-item href="#">Something else here...</b-dropdown-item>

‎src/components/form-checkbox/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -611,7 +611,7 @@ modifier.
611611
<template>
612612
<div>
613613
<b-form-group>
614-
<template slot="label">
614+
<template v-slot:label>
615615
<b>Choose your flavours:</b><br>
616616
<b-form-checkbox
617617
v-model="allSelected"

‎src/components/form-radio/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ To have them appear _above_ the inputs generated by `options`, place them in the
9797
name="radio-options-slots"
9898
>
9999
<!-- Radios in this slot will appear first -->
100-
<template slot="first">
100+
<template v-slot:first>
101101
<b-form-radio value="first">Toggle this custom radio from slot first</b-form-radio>
102102
</template>
103103

‎src/components/form-select/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ and optgroups _above_ the options specified by the `options` prop, use the named
7676
<div>
7777
<b-form-select v-model="selected" :options="options" class="mb-3">
7878
<!-- This slot appears above the options from 'options' prop -->
79-
<template slot="first">
79+
<template v-slot:first>
8080
<option :value="null" disabled>-- Please select an option --</option>
8181
</template>
8282

@@ -236,7 +236,7 @@ option with an empty value as your first option.
236236

237237
```html
238238
<b-form-select v-model="selected" :options="options">
239-
<template slot="first">
239+
<template v-slot:first>
240240
<option value="" disabled>-- Please select an option --</option>
241241
</template>
242242
</b-form-select>

‎src/components/form/README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,9 @@ Custom form controls and selects are also supported.
157157
:options="{ '1': 'One', '2': 'Two', '3': 'Three' }"
158158
id="inline-form-custom-select-pref"
159159
>
160-
<option slot="first" :value="null">Choose...</option>
160+
<template v-slot:first>
161+
<option :value="null">Choose...</option>
162+
</template>
161163
</b-form-select>
162164

163165
<b-form-checkbox class="mb-2 mr-sm-2 mb-sm-0">Remember my preference</b-form-checkbox>

‎src/components/input-group/README.md

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212

1313
<!-- Using slots -->
1414
<b-input-group class="mt-3">
15-
<b-input-group-text slot="append"><strong class="text-danger">!</strong></b-input-group-text>
15+
<template v-slot:append>
16+
<b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
17+
</template>
1618
<b-form-input></b-form-input>
1719
</b-input-group>
1820

@@ -61,13 +63,17 @@ The slot content will automatically be wrapped by
6163
```html
6264
<div>
6365
<b-input-group>
64-
<b-input-group-text slot="prepend">Username</b-input-group-text>
66+
<template v-slot:prepend>
67+
<b-input-group-text >Username</b-input-group-text>
68+
</template>
6569
<b-form-input></b-form-input>
6670

67-
<b-dropdown text="Dropdown" variant="success" slot="append">
68-
<b-dropdown-item>Action A</b-dropdown-item>
69-
<b-dropdown-item>Action B</b-dropdown-item>
70-
</b-dropdown>
71+
<template v-slot:append>
72+
<b-dropdown text="Dropdown" variant="success">
73+
<b-dropdown-item>Action A</b-dropdown-item>
74+
<b-dropdown-item>Action B</b-dropdown-item>
75+
</b-dropdown>
76+
</template>
7177
</b-input-group>
7278
</div>
7379

@@ -229,17 +235,21 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
229235
```html
230236
<div>
231237
<b-input-group>
232-
<b-dropdown slot="prepend" text="Dropdown" variant="info">
233-
<b-dropdown-item>Action A</b-dropdown-item>
234-
<b-dropdown-item>Action B</b-dropdown-item>
235-
</b-dropdown>
238+
<template v-slot:prepend>
239+
<b-dropdown text="Dropdown" variant="info">
240+
<b-dropdown-item>Action A</b-dropdown-item>
241+
<b-dropdown-item>Action B</b-dropdown-item>
242+
</b-dropdown>
243+
</template>
236244

237245
<b-form-input></b-form-input>
238246

239-
<b-dropdown slot="append" text="Dropdown" variant="outline-secondary" v-for="i in 2" :key="i">
240-
<b-dropdown-item>Action C</b-dropdown-item>
241-
<b-dropdown-item>Action D</b-dropdown-item>
242-
</b-dropdown>
247+
<template v-slot:append>
248+
<b-dropdown text="Dropdown" variant="outline-secondary" v-for="i in 2" :key="i">
249+
<b-dropdown-item>Action C</b-dropdown-item>
250+
<b-dropdown-item>Action D</b-dropdown-item>
251+
</b-dropdown>
252+
</template>
243253
</b-input-group>
244254
</div>
245255

0 commit comments

Comments
 (0)