element-plus/packages/tokens/carousel.ts
dopamine a03cf125fd
fix(components): [carousel] improper active item (#8904)
* fix(components): [carousel] none of active item

closed #8891

* fix: ts error

* fix: guarantee items order when reusing carousel-item component

* style: code format

* fix: test fail

* chore: correct type

* fix: sorting failed in some cases

* better implementation

better implementation

* impove code accroding to review comment
2022-10-02 08:44:40 +08:00

35 lines
876 B
TypeScript

import type { InjectionKey, Ref } from 'vue'
import type { CarouselItemProps } from '@element-plus/components/carousel'
export type CarouselItemStates = {
hover: boolean
translate: number
scale: number
active: boolean
ready: boolean
inStage: boolean
animating: boolean
}
export type CarouselItemContext = {
props: CarouselItemProps
states: CarouselItemStates
uid: number
translateItem: (index: number, activeIndex: number, oldIndex?: number) => void
}
export type CarouselContext = {
root: Ref<HTMLElement | undefined>
items: Ref<CarouselItemContext[]>
isCardType: Ref<boolean>
isVertical: Ref<boolean>
loop: boolean
addItem: (item: CarouselItemContext) => void
removeItem: (uid: number) => void
setActiveItem: (index: number) => void
}
export const carouselContextKey: InjectionKey<CarouselContext> =
Symbol('carouselContextKey')