-
+
"
diff --git a/packages/components/timeline/__tests__/timeline.spec.ts b/packages/components/timeline/__tests__/timeline.spec.ts
index ee361534f..6e76cdb7e 100644
--- a/packages/components/timeline/__tests__/timeline.spec.ts
+++ b/packages/components/timeline/__tests__/timeline.spec.ts
@@ -87,15 +87,12 @@ describe('Timeline', () => {
})
expect(wrapper.html()).toMatchSnapshot()
- const reverseWrapper = TimelineMount({
- props: {
- reverse: true,
- },
- })
- reverseWrapper.findAll('.ix-timeline-item').forEach((item, index) => {
+ await wrapper.setProps({ reverse: true })
+
+ wrapper.findAll('.ix-timeline-item').forEach((item, index) => {
expect(item.text()).toBe((3 - index).toString())
})
- expect(reverseWrapper.html()).toMatchSnapshot()
+ expect(wrapper.html()).toMatchSnapshot()
})
test('pending work', async () => {
@@ -107,33 +104,14 @@ describe('Timeline', () => {
await wrapper.setProps({ pending: true })
expect(wrapper.findAll('.ix-timeline-item').length).toBe(5)
- expect(wrapper.findAll('.ix-timeline-item')[3].classes()).toContain('ix-timeline-item-pending')
- expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending-dot')
+ expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending')
expect(wrapper.html()).toMatchSnapshot()
await wrapper.setProps({ pending: pendingText })
expect(wrapper.findAll('.ix-timeline-item').length).toBe(5)
- expect(wrapper.findAll('.ix-timeline-item')[3].classes()).toContain('ix-timeline-item-pending')
- expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending-dot')
+ expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending')
expect(wrapper.findAll('.ix-timeline-item')[4].text()).toBe(pendingText)
expect(wrapper.html()).toMatchSnapshot()
-
- const reverseWrapper = TimelineMount({
- props: {
- pending: true,
- reverse: true,
- },
- })
-
- reverseWrapper.findAll('.ix-timeline-item').forEach((item, index) => {
- if (index === 0) {
- expect(item.classes()).toContain('ix-timeline-item-pending')
- expect(item.classes()).toContain('ix-timeline-item-pending-dot')
- } else {
- expect(item.text()).toBe((4 - index).toString())
- }
- })
- expect(reverseWrapper.html()).toMatchSnapshot()
})
test('pending slot work', async () => {
@@ -146,16 +124,19 @@ describe('Timeline', () => {
})
expect(wrapper.findAll('.ix-timeline-item').length).toBe(5)
- expect(wrapper.findAll('.ix-timeline-item')[3].classes()).toContain('ix-timeline-item-pending')
- expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending-dot')
+ expect(wrapper.findAll('.ix-timeline-item')[4].classes()).toContain('ix-timeline-item-pending')
expect(wrapper.findAll('.ix-timeline-item')[4].text()).toBe(pendingSlotText)
expect(wrapper.html()).toMatchSnapshot()
await wrapper.setProps({ pending: pendingText })
expect(wrapper.findAll('.ix-timeline-item')[4].text()).toBe(pendingSlotText)
expect(wrapper.html()).toMatchSnapshot()
+ })
+
+ test('reverse with pending slot work', async () => {
+ const pendingSlotText = 'pendingSlotText'
- const reverseWrapper = TimelineMount({
+ const wrapper = TimelineMount({
slots: {
pending: pendingSlotText,
},
@@ -164,15 +145,14 @@ describe('Timeline', () => {
},
})
- reverseWrapper.findAll('.ix-timeline-item').forEach((item, index) => {
+ wrapper.findAll('.ix-timeline-item').forEach((item, index) => {
if (index === 0) {
expect(item.classes()).toContain('ix-timeline-item-pending')
- expect(item.classes()).toContain('ix-timeline-item-pending-dot')
} else {
expect(item.text()).toBe((4 - index).toString())
}
})
- expect(reverseWrapper.html()).toMatchSnapshot()
+ expect(wrapper.html()).toMatchSnapshot()
})
test('pendingDot work', async () => {
@@ -183,13 +163,13 @@ describe('Timeline', () => {
})
const pendingDotText = 'pendingDotText'
- expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-dot').find('.ix-icon').classes()).toContain(
- 'ix-icon-loading',
- )
+ expect(
+ wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-head-dot').find('.ix-icon').classes(),
+ ).toContain('ix-icon-loading')
expect(wrapper.html()).toMatchSnapshot()
await wrapper.setProps({ pendingDot: pendingDotText })
- expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-dot').text()).toBe(pendingDotText)
+ expect(wrapper.findAll('.ix-timeline-item')[4].find('.ix-timeline-item-head-dot').text()).toBe(pendingDotText)
expect(wrapper.html()).toMatchSnapshot()
})
@@ -216,10 +196,10 @@ describe('TimelineItem', () => {
})
const items = wrapper.findAll('.ix-timeline-item')
- expect(items[0].find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-red')
+ expect(items[0].find('.ix-timeline-item-head-dot').classes()).toContain('ix-timeline-item-head-dot-red')
- expect(items[1].find('.ix-timeline-item-dot-black').exists()).toBe(false)
- expect(items[1].find('.ix-timeline-item-dot').html()).toContain('style="color: black; border-color: black;"')
+ expect(items[1].find('.ix-timeline-item-head-dot-black').exists()).toBe(false)
+ expect(items[1].find('.ix-timeline-item-head-dot').html()).toContain('style="color: black; border-color: black;"')
})
test('dot work', async () => {
@@ -232,9 +212,9 @@ describe('TimelineItem', () => {
const items = wrapper.findAll('.ix-timeline-item')
- expect(items[0].find('.ix-timeline-item-dot-custom').exists()).toBe(true)
- expect(items[0].find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-custom')
- expect(items[0].find('.ix-timeline-item-dot').text()).toBe(dotText)
+ expect(items[0].find('.ix-timeline-item-head-dot-custom').exists()).toBe(true)
+ expect(items[0].find('.ix-timeline-item-head-dot').classes()).toContain('ix-timeline-item-head-dot-custom')
+ expect(items[0].find('.ix-timeline-item-head-dot').text()).toBe(dotText)
})
test('dot slot work', async () => {
@@ -247,9 +227,9 @@ describe('TimelineItem', () => {
const items = wrapper.findAll('.ix-timeline-item')
- expect(items[0].find('.ix-timeline-item-dot-custom').exists()).toBe(true)
- expect(items[0].find('.ix-timeline-item-dot').classes()).toContain('ix-timeline-item-dot-custom')
- expect(items[0].find('.ix-timeline-item-dot').text()).toBe(dotSlotText)
+ expect(items[0].find('.ix-timeline-item-head-dot-custom').exists()).toBe(true)
+ expect(items[0].find('.ix-timeline-item-head-dot').classes()).toContain('ix-timeline-item-head-dot-custom')
+ expect(items[0].find('.ix-timeline-item-head-dot').text()).toBe(dotSlotText)
})
test('label work', async () => {
@@ -262,8 +242,8 @@ describe('TimelineItem', () => {
const items = wrapper.findAll('.ix-timeline-item')
- expect(items[0].find('.ix-timeline-item-label').exists()).toBe(true)
- expect(items[0].find('.ix-timeline-item-label').text()).toBe(labelText)
+ expect(items[0].find('.ix-timeline-item-content-label').exists()).toBe(true)
+ expect(items[0].find('.ix-timeline-item-content-label').text()).toBe(labelText)
})
test('label slot work', async () => {
@@ -277,7 +257,7 @@ describe('TimelineItem', () => {
const items = wrapper.findAll('.ix-timeline-item')
- expect(items[0].find('.ix-timeline-item-label').exists()).toBe(true)
- expect(items[0].find('.ix-timeline-item-label').text()).toBe(labelSlotText)
+ expect(items[0].find('.ix-timeline-item-content-label').exists()).toBe(true)
+ expect(items[0].find('.ix-timeline-item-content-label').text()).toBe(labelSlotText)
})
})
diff --git a/packages/components/timeline/demo/Label.vue b/packages/components/timeline/demo/Label.vue
index f1f1e7085..e134f45c2 100644
--- a/packages/components/timeline/demo/Label.vue
+++ b/packages/components/timeline/demo/Label.vue
@@ -1,49 +1,51 @@
- 1.标签的一般用法
-
- New issue
- Create IxTimeline
- Update component documentation
- Write test cases
-
+
+ 1.标签的一般用法
+
+ New issue
+ Create IxTimeline
+ Update component documentation
+ Write test cases
+
- 2.标签的一般用法
-
- New issue
- Create IxTimeline
- Update component documentation
- Write test cases
-
+ 2.标签的一般用法
+
+ New issue
+ Create IxTimeline
+ Update component documentation
+ Write test cases
+
- 3.标签的一般用法
-
- New issue
- Create IxTimeline
- Update component documentation
- Write test cases
-
+ 3.标签的一般用法
+
+ New issue
+ Create IxTimeline
+ Update component documentation
+ Write test cases
+
- 4.标签跟内容分开
-
- New issue
- Create IxTimeline
- Update component documentation
- Write test cases
-
+ 4.标签跟内容分开
+
+ New issue
+ Create IxTimeline
+ Update component documentation
+ Write test cases
+
- 5.标签跟内容分开
-
- New issue
- Create IxTimeline
- Update component documentation
- Write test cases
-
+ 5.标签跟内容分开
+
+ New issue
+ Create IxTimeline
+ Update component documentation
+ Write test cases
+
- 6.标签跟内容分开
-
- New issue
- Create IxTimeline
- Update component documentation
- Write test cases
-
+ 6.标签跟内容分开
+
+ New issue
+ Create IxTimeline
+ Update component documentation
+ Write test cases
+
+
diff --git a/packages/components/timeline/demo/Pending.vue b/packages/components/timeline/demo/Pending.vue
index 2c30d67e7..6614f7520 100644
--- a/packages/components/timeline/demo/Pending.vue
+++ b/packages/components/timeline/demo/Pending.vue
@@ -1,32 +1,28 @@
- 通过设置pending为true来展示幽灵节点
-
- New issue in 2021-02-08
- Create IxTimeline in 2021-02-10
- Update component documentation in 2021-02-12
- Write test cases in 2021-02-14
-
+
+ 通过设置pending为true来展示幽灵节点
+
+ New issue in 2021-02-08
+ Create IxTimeline in 2021-02-10
+ Update component documentation in 2021-02-12
+ Write test cases in 2021-02-14
+
- 通过设置pending为字符串来展示幽灵节点
-
- New issue in 2021-02-08
- Create IxTimeline in 2021-02-10
- Update component documentation in 2021-02-12
- Write test cases in 2021-02-14
-
+ 通过设置pending为字符串来展示幽灵节点
+
+ New issue in 2021-02-08
+ Create IxTimeline in 2021-02-10
+ Update component documentation in 2021-02-12
+ Write test cases in 2021-02-14
+
- 通过设置插槽pending来展示幽灵节点
-
- New issue in 2021-02-08
- Create IxTimeline in 2021-02-10
- Update component documentation in 2021-02-12
- Write test cases in 2021-02-14
- Recoding...
-
+ 通过设置插槽pending来展示幽灵节点
+
+ New issue in 2021-02-08
+ Create IxTimeline in 2021-02-10
+ Update component documentation in 2021-02-12
+ Write test cases in 2021-02-14
+ Recoding...
+
+
-
-
diff --git a/packages/components/timeline/demo/PendingDot.vue b/packages/components/timeline/demo/PendingDot.vue
index d34a35119..a0da462aa 100644
--- a/packages/components/timeline/demo/PendingDot.vue
+++ b/packages/components/timeline/demo/PendingDot.vue
@@ -1,26 +1,22 @@
- 默认幽灵节点的时间轴点
-
- New issue in 2021-02-08
- Create IxTimeline in 2021-02-10
- Update component documentation in 2021-02-12
- Write test cases in 2021-02-14
-
+
+ 默认幽灵节点的时间轴点
+
+ New issue in 2021-02-08
+ Create IxTimeline in 2021-02-10
+ Update component documentation in 2021-02-12
+ Write test cases in 2021-02-14
+
- 自定义幽灵节点的时间轴点
-
- New issue in 2021-02-08
- Create IxTimeline in 2021-02-10
- Update component documentation in 2021-02-12
- Write test cases in 2021-02-14
-
-
-
-
+ 自定义幽灵节点的时间轴点
+
+ New issue in 2021-02-08
+ Create IxTimeline in 2021-02-10
+ Update component documentation in 2021-02-12
+ Write test cases in 2021-02-14
+
+
+
+
+
-
-
diff --git a/packages/components/timeline/demo/Placement.vue b/packages/components/timeline/demo/Placement.vue
index 049fa7ccd..6cda12834 100644
--- a/packages/components/timeline/demo/Placement.vue
+++ b/packages/components/timeline/demo/Placement.vue
@@ -1,31 +1,27 @@
- 内容在时间轴右边
-
- New issue in 2021-02-08
- Create IxTimeline in 2021-02-10
- Update component documentation in 2021-02-12
- Write test cases in 2021-02-14
-
+
+ 内容在时间轴右边
+
+ New issue in 2021-02-08
+ Create IxTimeline in 2021-02-10
+ Update component documentation in 2021-02-12
+ Write test cases in 2021-02-14
+
- 内容在时间轴两侧轮流出现
-
- New issue in 2021-02-08
- Create IxTimeline in 2021-02-10
- Update component documentation in 2021-02-12
- Write test cases in 2021-02-14
-
+ 内容在时间轴两侧轮流出现
+
+ New issue in 2021-02-08
+ Create IxTimeline in 2021-02-10
+ Update component documentation in 2021-02-12
+ Write test cases in 2021-02-14
+
- 内容在时间轴左边
-
- New issue in 2021-02-08
- Create IxTimeline in 2021-02-10
- Update component documentation in 2021-02-12
- Write test cases in 2021-02-14
-
+ 内容在时间轴左边
+
+ New issue in 2021-02-08
+ Create IxTimeline in 2021-02-10
+ Update component documentation in 2021-02-12
+ Write test cases in 2021-02-14
+
+
-
-
diff --git a/packages/components/timeline/demo/Reverse.vue b/packages/components/timeline/demo/Reverse.vue
index a6dc7c486..b844875b1 100644
--- a/packages/components/timeline/demo/Reverse.vue
+++ b/packages/components/timeline/demo/Reverse.vue
@@ -1,12 +1,14 @@
-
- New issue in 2021-02-08
- Create IxTimeline in 2021-02-10
- Update component documentation in 2021-02-12
- Write test cases in 2021-02-14
-
+
+
+ New issue in 2021-02-08
+ Create IxTimeline in 2021-02-10
+ Update component documentation in 2021-02-12
+ Write test cases in 2021-02-14
+
- Toggle reverse
+ Toggle reverse
+