diff --git a/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap b/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap index a7a3f00c3..8ffda4e48 100644 --- a/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap +++ b/packages/components/timeline/__tests__/__snapshots__/timeline.spec.ts.snap @@ -7,11 +7,12 @@ exports[`Timeline > pending slot work 1`] = `
+
-
0
+
  • @@ -19,11 +20,12 @@ exports[`Timeline > pending slot work 1`] = `
    +
    -
    1
    +
  • @@ -31,11 +33,12 @@ exports[`Timeline > pending slot work 1`] = `
    +
    -
    2
    +
  • @@ -43,21 +46,24 @@ exports[`Timeline > pending slot work 1`] = `
    +
    -
    3
    +
  • -
    +
    + +
    -
    pendingSlotText
    +
    • " @@ -70,11 +76,12 @@ exports[`Timeline > pending slot work 2`] = `
    +
    -
    0
    +
  • @@ -82,11 +89,12 @@ exports[`Timeline > pending slot work 2`] = `
    +
    -
    1
    +
  • @@ -94,11 +102,12 @@ exports[`Timeline > pending slot work 2`] = `
    +
    -
    2
    +
  • @@ -106,21 +115,24 @@ exports[`Timeline > pending slot work 2`] = `
    +
    -
    3
    +
  • -
    +
    + +
    -
    pendingSlotText
    +
    • " @@ -133,11 +145,12 @@ exports[`Timeline > pending work 1`] = `
    +
    -
    0
    +
  • @@ -145,11 +158,12 @@ exports[`Timeline > pending work 1`] = `
    +
    -
    1
    +
  • @@ -157,11 +171,12 @@ exports[`Timeline > pending work 1`] = `
    +
    -
    2
    +
  • @@ -169,11 +184,12 @@ exports[`Timeline > pending work 1`] = `
    +
    -
    3
    +
    • " @@ -186,11 +202,12 @@ exports[`Timeline > pending work 2`] = `
    +
    -
    0
    +
  • @@ -198,11 +215,12 @@ exports[`Timeline > pending work 2`] = `
    +
    -
    1
    +
  • @@ -210,11 +228,12 @@ exports[`Timeline > pending work 2`] = `
    +
    -
    2
    +
  • @@ -222,21 +241,24 @@ exports[`Timeline > pending work 2`] = `
    +
    -
    3
    +
  • -
    +
    + +
    -
    +
    • " @@ -249,11 +271,12 @@ exports[`Timeline > pending work 3`] = `
    +
    -
    0
    +
  • @@ -261,11 +284,12 @@ exports[`Timeline > pending work 3`] = `
    +
    -
    1
    +
  • @@ -273,11 +297,12 @@ exports[`Timeline > pending work 3`] = `
    +
    -
    2
    +
  • @@ -285,11 +310,12 @@ exports[`Timeline > pending work 3`] = `
    +
    -
    3
    +
  • @@ -297,11 +323,13 @@ exports[`Timeline > pending work 3`] = `
    -
    + + +
    -
    pendingText
    +
    • " @@ -314,11 +342,12 @@ exports[`Timeline > pendingDot work 1`] = `
    +
    -
    0
    +
  • @@ -326,11 +355,12 @@ exports[`Timeline > pendingDot work 1`] = `
    +
    -
    1
    +
  • @@ -338,11 +368,12 @@ exports[`Timeline > pendingDot work 1`] = `
    +
    -
    2
    +
  • @@ -350,21 +381,24 @@ exports[`Timeline > pendingDot work 1`] = `
    +
    -
    3
    +
  • -
    +
    + +
    -
    +
    • " @@ -377,11 +411,12 @@ exports[`Timeline > pendingDot work 2`] = `
    +
    -
    0
    +
  • @@ -389,11 +424,12 @@ exports[`Timeline > pendingDot work 2`] = `
    +
    -
    1
    +
  • @@ -401,11 +437,12 @@ exports[`Timeline > pendingDot work 2`] = `
    +
    -
    2
    +
  • @@ -413,21 +450,24 @@ exports[`Timeline > pendingDot work 2`] = `
    +
    -
    3
    +
  • -
    pendingDotText
    +
    pendingDotText + +
    -
    +
    • " @@ -440,11 +480,12 @@ exports[`Timeline > placement with item placement work 1`] = `
    +
    -
    0
    +
  • @@ -452,11 +493,12 @@ exports[`Timeline > placement with item placement work 1`] = `
    +
    -
    1
    +
  • @@ -464,11 +506,12 @@ exports[`Timeline > placement with item placement work 1`] = `
    +
    -
    2
    +
  • @@ -476,11 +519,12 @@ exports[`Timeline > placement with item placement work 1`] = `
    +
    -
    3
    +
    • " @@ -493,11 +537,12 @@ exports[`Timeline > placement with item placement work 2`] = `
    +
    -
    0
    +
  • @@ -505,11 +550,12 @@ exports[`Timeline > placement with item placement work 2`] = `
    +
    -
    1
    +
  • @@ -517,11 +563,12 @@ exports[`Timeline > placement with item placement work 2`] = `
    +
    -
    2
    +
  • @@ -529,11 +576,12 @@ exports[`Timeline > placement with item placement work 2`] = `
    +
    -
    3
    +
    • " @@ -546,11 +594,12 @@ exports[`Timeline > placement with item placement work 3`] = `
    +
    -
    0
    +
  • @@ -558,11 +607,12 @@ exports[`Timeline > placement with item placement work 3`] = `
    +
    -
    1
    +
  • @@ -570,11 +620,12 @@ exports[`Timeline > placement with item placement work 3`] = `
    +
    -
    2
    +
  • @@ -582,11 +633,12 @@ exports[`Timeline > placement with item placement work 3`] = `
    +
    -
    3
    +
    • " @@ -599,11 +651,12 @@ exports[`Timeline > placement with item placement work 4`] = `
    +
    -
    0
    +
  • @@ -611,11 +664,12 @@ exports[`Timeline > placement with item placement work 4`] = `
    +
    -
    1
    +
  • @@ -623,11 +677,12 @@ exports[`Timeline > placement with item placement work 4`] = `
    +
    -
    2
    +
  • @@ -635,11 +690,12 @@ exports[`Timeline > placement with item placement work 4`] = `
    +
    -
    3
    +
    • " @@ -652,11 +708,12 @@ exports[`Timeline > placement work 1`] = `
    +
    -
    0
    +
  • @@ -664,11 +721,12 @@ exports[`Timeline > placement work 1`] = `
    +
    -
    1
    +
  • @@ -676,11 +734,12 @@ exports[`Timeline > placement work 1`] = `
    +
    -
    2
    +
  • @@ -688,11 +747,12 @@ exports[`Timeline > placement work 1`] = `
    +
    -
    3
    +
    • " @@ -705,11 +765,12 @@ exports[`Timeline > placement work 2`] = `
    +
    -
    0
    +
  • @@ -717,11 +778,12 @@ exports[`Timeline > placement work 2`] = `
    +
    -
    1
    +
  • @@ -729,11 +791,12 @@ exports[`Timeline > placement work 2`] = `
    +
    -
    2
    +
  • @@ -741,11 +804,12 @@ exports[`Timeline > placement work 2`] = `
    +
    -
    3
    +
    • " @@ -758,11 +822,12 @@ exports[`Timeline > placement work 3`] = `
    +
    -
    0
    +
  • @@ -770,11 +835,12 @@ exports[`Timeline > placement work 3`] = `
    +
    -
    1
    +
  • @@ -782,11 +848,12 @@ exports[`Timeline > placement work 3`] = `
    +
    -
    2
    +
  • @@ -794,11 +861,12 @@ exports[`Timeline > placement work 3`] = `
    +
    -
    3
    +
    • " @@ -811,11 +879,12 @@ exports[`Timeline > placement work 4`] = `
    +
    -
    0
    +
  • @@ -823,11 +892,12 @@ exports[`Timeline > placement work 4`] = `
    +
    -
    1
    +
  • @@ -835,11 +905,12 @@ exports[`Timeline > placement work 4`] = `
    +
    -
    2
    +
  • @@ -847,11 +918,12 @@ exports[`Timeline > placement work 4`] = `
    +
    -
    3
    +
    • " @@ -864,11 +936,13 @@ exports[`Timeline > reverse with pending slot work 1`] = `
  • -
    +
    + +
    -
    pendingSlotText
    +
  • @@ -876,11 +950,12 @@ exports[`Timeline > reverse with pending slot work 1`] = `
    +
    -
    3
    +
  • @@ -888,11 +963,12 @@ exports[`Timeline > reverse with pending slot work 1`] = `
    +
    -
    2
    +
  • @@ -900,11 +976,12 @@ exports[`Timeline > reverse with pending slot work 1`] = `
    +
    -
    1
    +
  • @@ -912,11 +989,12 @@ exports[`Timeline > reverse with pending slot work 1`] = `
    +
    -
    0
    +
    • " @@ -929,11 +1007,12 @@ exports[`Timeline > reverse work 1`] = `
    +
    -
    0
    +
  • @@ -941,11 +1020,12 @@ exports[`Timeline > reverse work 1`] = `
    +
    -
    1
    +
  • @@ -953,11 +1033,12 @@ exports[`Timeline > reverse work 1`] = `
    +
    -
    2
    +
  • @@ -965,11 +1046,12 @@ exports[`Timeline > reverse work 1`] = `
    +
    -
    3
    +
    • " @@ -982,11 +1064,12 @@ exports[`Timeline > reverse work 2`] = `
    +
    -
    3
    +
  • @@ -994,11 +1077,12 @@ exports[`Timeline > reverse work 2`] = `
    +
    -
    2
    +
  • @@ -1006,11 +1090,12 @@ exports[`Timeline > reverse work 2`] = `
    +
    -
    1
    +
  • @@ -1018,11 +1103,12 @@ exports[`Timeline > reverse work 2`] = `
    +
    -
    0
    +
    • " diff --git a/packages/components/timeline/src/TimelineItem.tsx b/packages/components/timeline/src/TimelineItem.tsx index 733bb6730..822edba3b 100644 --- a/packages/components/timeline/src/TimelineItem.tsx +++ b/packages/components/timeline/src/TimelineItem.tsx @@ -5,8 +5,6 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { CSSProperties } from 'vue' - import { computed, defineComponent, getCurrentInstance, inject, normalizeClass } from 'vue' import { hasSlot } from '@idux/cdk/utils' @@ -52,6 +50,16 @@ export default defineComponent({ } }) + /* eslint-disable indent */ + const dotInnerStyle = computed(() => + isPresetOrStatusColor.value + ? {} + : { + 'background-color': props.color, + }, + ) + /* eslint-enable indent */ + const classes = computed(() => { const prefixCls = `${mergedPrefixCls.value}-item` const placement = itemPlacement.value @@ -62,13 +70,15 @@ export default defineComponent({ }) }) + const isCustomDot = computed(() => hasSlot(slots, 'dot') || !!props.dot) + const dotClass = computed(() => { const prefixCls = `${mergedPrefixCls.value}-item-head` - const { dot, color } = props + const { color } = props return normalizeClass({ [`${prefixCls}-dot`]: true, - [`${prefixCls}-dot-custom`]: hasSlot(slots, 'dot') || !!dot, + [`${prefixCls}-dot-custom`]: isCustomDot.value, [`${prefixCls}-dot-${color}`]: isPresetOrStatusColor.value, }) }) @@ -83,13 +93,14 @@ export default defineComponent({
  • -
    +
    {dotNode} + {!isCustomDot.value &&
    }
    - {labelNode &&
    {labelNode}
    } {slots.default &&
    {slots.default()}
    } + {labelNode &&
    {labelNode}
    }
    • ) diff --git a/packages/components/timeline/style/index.less b/packages/components/timeline/style/index.less index 90bd79661..2f8330a9f 100644 --- a/packages/components/timeline/style/index.less +++ b/packages/components/timeline/style/index.less @@ -8,7 +8,6 @@ line-height: @timeline-line-height; display: flex; flex-direction: column; - .@{timeline-item-prefix} { position: relative; @@ -29,26 +28,46 @@ } &-dot { + border: none; + background-color: @color-white; + display: flex; + align-items: center; + justify-content: center; width: @timeline-dot-size; height: @timeline-dot-size; - border: @timeline-dot-border; - border-radius: 50%; font-size: @timeline-dot-font-size; - .timeline-color-classes(@preset-colors); - .timeline-color-classes(@status-colors); + &-inner { + width: 50%; + height: 50%; + background-color: @color-primary; + border-radius: 50%; + } &-custom { position: absolute; - border: none; background-color: @color-white; display: flex; align-items: center; - justify-content: center + justify-content: center; } } } + &:first-child .@{timeline-item-prefix}-head-dot { + border: @timeline-dot-border; + border-radius: 50%; + background: transparent; + + &-custom { + border: none; + } + + &-inner { + display: none; + } + } + &:last-child { .@{timeline-item-prefix}-head-line { display: none; @@ -59,22 +78,24 @@ position: relative; color: @timeline-content-color; margin-bottom: @timeline-content-margin-bottom; - + &-label { color: @timeline-content-label-color; + margin-top: @timeline-content-label-margin-top; } } } + .timeline-dot-color-classes(@preset-colors); + .timeline-dot-color-classes(@status-colors); + &-pending:not(&-reverse) { - .@{timeline-item-prefix}:nth-last-child(2) { .timeline-dotted-line(); } } &-pending&-reverse { - .@{timeline-item-prefix} { &-pending { .timeline-dotted-line(); @@ -92,7 +113,6 @@ &-start { .@{timeline-item-prefix} { - &-head { right: 0; width: @timeline-dot-size; @@ -103,7 +123,6 @@ } &-dot { - &-custom { right: @timeline-custom-dot-gap; transform: translate(50%, -50%); @@ -119,14 +138,11 @@ } &-alternate { - .timeline-line-align-center(); .@{timeline-item-prefix} { - &-start { .@{timeline-item-prefix} { - &-content { width: calc(50% - @timeline-content-gap); text-align: right; @@ -136,7 +152,6 @@ &-end { .@{timeline-item-prefix} { - &-content { margin-left: calc(50% + @timeline-content-gap); width: 50%; @@ -158,17 +173,17 @@ } &-not-both { - .timeline-line-align-center(); .@{timeline-item-prefix} { - &-content { &-label { position: absolute; + margin-top: 0; + top: 0; } } - + &-start { .@{timeline-item-prefix} { &-content { diff --git a/packages/components/timeline/style/mixin.less b/packages/components/timeline/style/mixin.less index 6e589c50e..ef4f03857 100644 --- a/packages/components/timeline/style/mixin.less +++ b/packages/components/timeline/style/mixin.less @@ -1,10 +1,31 @@ -.timeline-color-classes(@colors, @i: length(@colors)) when (@i > 0) { - .timeline-color-classes(@colors, @i - 1); +.timeline-first-dot-color-classes(@colors, @i: length(@colors)) when (@i > 0) { + .timeline-first-dot-color-classes(@colors, @i - 1); @color: extract(@colors, @i); @color-name: 'color-@{color}'; - &-@{color} { - border-color: @@color-name; + + .@{timeline-item-prefix}:first-child .@{timeline-item-prefix}-head-dot { + &-@{color} { + border-color: @@color-name; + color: @@color-name; + } + } +} + +.timeline-dot-color-classes(@colors, @i: length(@colors)) when (@i > 0) { + .timeline-dot-color-classes(@colors, @i - 1); + + @color: extract(@colors, @i); + @color-name: 'color-@{color}'; + @dot-class: ~'@{timeline-item-prefix}-head-dot'; + + .@{timeline-item-prefix} .@{dot-class}.@{dot-class}-@{color} { color: @@color-name; + .@{dot-class}-inner { + background-color: @@color-name; + } + } + .@{timeline-item-prefix} .@{dot-class}.@{dot-class}-@{color} { + border-color: @@color-name; } } @@ -25,7 +46,6 @@ .timeline-dotted-line() { .@{timeline-item-prefix} { - &-head-line { background: @timeline-dotted-line-background; background-size: @timeline-dotted-line-background-size; diff --git a/packages/components/timeline/style/themes/default.variable.less b/packages/components/timeline/style/themes/default.variable.less index 217f5e76e..589411cad 100644 --- a/packages/components/timeline/style/themes/default.variable.less +++ b/packages/components/timeline/style/themes/default.variable.less @@ -14,6 +14,7 @@ @timeline-content-gap: @timeline-item-timeline-width; @timeline-content-color: @text-color; @timeline-content-label-color: @color-graphite; +@timeline-content-label-margin-top: 0; @timeline-line-gap: ((@timeline-dot-size - @timeline-dot-border-width) / 2); @timeline-line-width: 2px; diff --git a/packages/components/timeline/style/themes/seer.variable.less b/packages/components/timeline/style/themes/seer.variable.less index 498793af1..0e3db3be6 100644 --- a/packages/components/timeline/style/themes/seer.variable.less +++ b/packages/components/timeline/style/themes/seer.variable.less @@ -1 +1,4 @@ @import './default.variable.less'; + +@timeline-line-height: 1; +@timeline-content-label-margin-top: 8px; \ No newline at end of file