8000 Merge remote-tracking branch 'upstream/main' · xvaara/bootstrap-vue-next@69310e7 · GitHub
[go: up one dir, main page]
Skip to content

Commit 69310e7

Browse files
xvaaraxvaara
committed
Merge remote-tracking branch 'upstream/main'
* upstream/main: Tabs/Accordion, modelValue is id now and we have v-model:index. (bootstrap-vue-next#2716) docs(ShowHideProps): spelling: Accordian->Accordion (bootstrap-vue-next#2718)
2 parents 5571606 + 551dfbe commit 69310e7

File tree

17 files changed

+713
-185
lines changed

17 files changed

+713
-185
lines changed

‎apps/docs/src/components/ShowHideProps.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@ const mappedComponents: ComponentMap = {
3838
const migrationMap: MigrationMap = {
3939
initialAnimation: {
4040
oldProp: 'appear',
41-
components: ['BAccordian', 'BAccordianItem', 'showHideProps'],
41+
components: ['BAccordion', 'BAccordionItem', 'showHideProps'],
4242
},
43-
lazy: {oldProp: 'lazy', components: ['BAccordian', 'BAccordianItem', 'showHideProps']},
43+
lazy: {oldProp: 'lazy', components: ['BAccordion', 'BAccordionItem', 'showHideProps']},
4444
modelValue: {oldProp: 'visible', components: ['showHideProps']},
4545
noAnimation: {oldProp: 'skip-animation', components: ['showHideProps']},
4646
noFade: {oldProp: 'skip-animation', components: ['showHideProps']},
@@ -58,7 +58,7 @@ const migrationMap: MigrationMap = {
5858
transProps: {oldProp: '', components: ['showHideProps']},
5959
unmountLazy: {
6060
oldProp: 'lazy',
61-
components: ['BAccordian', 'BAccordianItem', 'showHideProps'],
61+
components: ['BAccordion', 'BAccordionItem', 'showHideProps'],
6262
},
6363
visible: {oldProp: 'visible', components: ['showHideProps']},
6464
}

‎apps/docs/src/data/components/accordion.data.ts

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,16 @@ export default {
2020
default: false,
2121
description: 'Accordion items will stay open when another item is opened',
2222
},
23+
index: {
24+
type: 'number | number[]',
25+
default: undefined,
26+
description: 'Index of the accordion item that is open',
27+
},
28+
modelValue: {
29+
type: 'string | string[]',
30+
default: undefined,
31+
description: 'Id of the accordion item that is open',
32+
},
2333
// transProps: {
2434
// type: 'TransitionProps',
2535
// default: undefined,
@@ -35,7 +45,7 @@ export default {
3545
// default: false,
3646
// description: 'Alias for `noAnimation`',
3747
// },
38-
...pick(showHideProps, ['initialAnimation', 'modelValue', 'lazy', 'unmountLazy']),
48+
...pick(showHideProps, ['initialAnimation', 'lazy', 'unmountLazy']),
3949
...pick(
4050
buildCommonProps({
4151
id: {
@@ -55,7 +65,18 @@ export default {
5565
{
5666
arg: 'value',
5767
description: 'Id of the accordion item that is open',
58-
type: 'string',
68+
type: 'string | string[]',
69+
},
70+
],
71+
},
72+
{
73+
event: 'update:index',
74+
description: 'Update the index of the accordion item that is open',
75+
args: [
76+
{
77+
arg: 'value',
78+
description: 'Index of the accordion item that is open',
79+
type: 'number | number[]',
5980
},
6081
],
6182
},

‎apps/docs/src/data/components/tabs.data.ts

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ export default {
1616
description:
1717
"Use a specific ID for this tab's tab control button. If not provided, one will automatically be generated",
1818
},
19-
lazyOnce: {
19+
unmountLazy: {
2020
type: 'boolean',
2121
default: undefined,
2222
description:
23-
'When set and lazy is also set, the content will only be rendered once and then cached. Note: This will likely be deprecated in favor of unmount-lazy',
23+
'When set and lazy is also set, the content will be unmounted when the tab is not active',
2424
},
2525
noBody: {
2626
type: 'boolean',
@@ -65,10 +65,11 @@ export default {
6565
sourcePath: '/BTabs/BTabs.vue',
6666
props: {
6767
'': {
68-
activeId: {
69-
type: 'string',
70-
default: undefined,
71-
description: 'The id of the currently active tab',
68+
index: {
69+
type: 'number',
70+
default: -1,
71+
description:
72+
'The index (zero-based) of the currently active tab. Id (modelValue) takes priority over index.',
7273
},
7374
activeNavItemClass: {
7475
type: 'ClassValue',
@@ -131,9 +132,9 @@ export default {
131132
description: 'Lazily render the tab contents when shown',
132133
},
133134
modelValue: {
134-
type: 'number',
135-
default: -1,
136-
description: 'Currently visible tab index (zero-based)',
135+
type: 'string',
136+
default: undefined,
137+
description: 'The id of the currently active tab',
137138
},
138139
navClass: {
139140
type: 'ClassValue',
@@ -199,35 +200,51 @@ export default {
199200
args: [
200201
{
201202
arg: 'value',
202-
type: 'number',
203-
description: 'Tab being activated (0-based index)',
203+
type: 'string',
204+
description: 'The id of the currently active tab',
204205
},
206+
],
207+
description: 'The active tab has changed. The id of the currently active tab',
208+
},
209+
{
210+
event: 'update:index',
211+
args: [
205212
{
206-
arg: 'v2',
213+
arg: 'value',
207214
type: 'number',
208-
description:
209-
'Tab that is currently active (0-based index). Will be -1 if no current active tab',
215+
description: 'The index (zero-based) of the currently active tab',
210216
},
211217
],
212-
description: 'The active tab has changed',
218+
description:
219+
'The active tab has changed. The index (zero-based) of the currently active tab',
213220
},
214221
{
215222
description: 'Emitted just before a tab is shown/activated. Cancelable',
216223
event: 'activate-tab',
217224
args: [
218225
{
219-
arg: 'v1',
226+
arg: 'newTabId',
227+
type: 'string',
228+
description: 'Tab being activated (id)',
229+
},
230+
{
231+
arg: 'prevTabId',
232+
type: 'string',
233+
description: 'Current active tab (id)',
234+
},
235+
{
236+
arg: 'newTabIndex',
220237
type: 'number',
221238
description: 'Tab being activated (0-based index)',
222239
},
223240
{
224-
arg: 'v2',
241+
arg: 'prevTabIndex',
225242
type: 'number',
226243
description:
227244
'Tab that is currently active (0-based index). Will be -1 if no current active tab',
228245
},
229246
{
230-
arg: 'v3',
247+
arg: 'event',
231248
type: 'BvEvent',
232249
description: 'BvEvent object. Call bvEvent.preventDefault() to cancel',
233250
},

‎apps/docs/src/docs/components/demo/TabsCustomLinks.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<BCard no-body>
3-
<BTabs v-model="tabIndex" card>
3+
<BTabs v-model:index="tabIndex" card>
44
<BTab title="Tab 1" :title-link-class="linkClass[0]">Tab contents 1</BTab>
55
<BTab title="Tab 2" :title-link-class="linkClass[1]">Tab contents 2</BTab>
66
<BTab title="Tab 3" :title-link-class="linkClass[2]">Tab contents 3</BTab>

‎apps/docs/src/docs/components/demo/TabsDynamic.vue

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,31 @@
44
<BTabs card>
55
<!-- Render Tabs, supply a unique `key` to each tab -->
66
<BTab v-for="i in tabs" :key="'dyn-tab-' + i" :title="'Tab ' + i">
7+
<template #title>
8+
{{ 'Tab ' + i }}
9+
<BButton
10+
style="margin-right: -1rem"
11+
variant="link"
12+
class="link-secondary link-underline link-underline-opacity-0"
13+
size="sm"
14+
@click.prevent="closeTab(i)"
15+
>&times;</BButton
16+
>
17+
</template>
718
Tab contents {{ i }}
8-
<BButton size="sm" variant="danger" class="float-right" @click="closeTab(i)">
9-
Close tab
10-
</BButton>
1119
</BTab>
1220

1321
<!-- New Tab Button (Using tabs-end slot) -->
1422
<template #tabs-end>
15-
<BNavItem role="presentation" @click.prevent="newTab"><b>+</b></BNavItem>
23+
<li class="nav-item ms-auto mt-0 mb-2">
24+
<BButton
25+
variant="outline-secondary"
26+
class="no-underline"
27+
role="presentation"
28+
@click.prevent="newTab"
29+
><b>+</b></BButton
30+
>
31+
</li>
1632
</template>
1733

1834
<!-- Render this if no tabs -->

‎apps/docs/src/docs/components/demo/TabsExternalControls.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div>
33
<!-- Tabs with card integration -->
44
<BCard no-body>
5-
<BTabs v-model="tabIndex" small card>
5+
<BTabs v-model:index="tabIndex" small card>
66
<BTab title="General">I'm the first fading tab</BTab>
77
<BTab title="Edit profile">
88
I'm the second tab

‎apps/docs/src/docs/components/tabs.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -236,11 +236,13 @@ order to use these methods.
236236
To prevent a tab from activating, simply set the `disabled` prop on the `<BTab>` component.
237237

238238
Alternatively, you can listen for the `activate-tab` event, which provides an option to prevent the
239-
tab from activating. The `activate-tab` event is emitted with three arguments:
239+
tab from activating. The `activate-tab` event is emitted with five arguments:
240240

241+
- `newTabId`: The id of the tab that is going to be activated
242+
- `prevTabId`: The id of the currently active tab
241243
- `newTabIndex`: The index of the tab that is going to be activated
242244
- `prevTabIndex`: The index of the currently active tab
243-
- `bvEvent`: The `BvEvent` object. Call `bvEvent.preventDefault()` to prevent `newTabIndex` from
245+
- `event`: The `BvEvent` object. Call `bvEvent.preventDefault()` to prevent `newTabIndex` from
244246
being activated
245247

246248
For accessibility reasons, when using the `activate-tab` event to prevent a tab from activating, you

‎apps/playground/src/components/Comps/TTabs.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<BContainer fluid>
33
<BRow>
44
<BCol>
5-
<BTabs v-model="tabIndex" small>
5+
<BTabs v-model:index="tabIndex" small>
66
<BTab title="First" disabled>
77
<p>I'm the first tab</p>
88
</BTab>
@@ -89,7 +89,7 @@
8989
</BRow>
9090
<BRow>
9191
<BCol>
92-
<BTabs v-model:active-id="activeId" v-model="tabIndex2">
92+
<BTabs v-model:active-id="activeId" v-model:index="tabIndex2">
9393
<BTab id="a1" title="a1">a1</BTab>
9494
<BTab id="a2" title="a2">a2</BTab>
9595
<BTab id="a3" title="a3">a3</BTab>
@@ -123,7 +123,7 @@
123123
</BTabs>
124124
</BCol>
125125
<BCol>
126-
<BTabs v-model:active-id="tab3Id" v-model="tab3Index">
126+
<BTabs v-model:active-id="tab3Id" v-model:index="tab3Index">
127127
<BTab v-for="t in tab3" :key="t.title" :title="t.title">{{ t.content }}</BTab>
128128
</BTabs>
129129
<BButton

0 commit comments

Comments
 (0)
0