xdesign-vue-next
Version:
XDesign Component for vue-next
1 lines • 6.97 kB
Source Map (JSON)
{"version":3,"file":"timeline-item.mjs","sources":["../../src/timeline/timeline-item.tsx"],"sourcesContent":["import { defineComponent, inject } from 'vue';\nimport TimeLineItemProps from './time-line-item-props';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport { useContent, useTNodeJSX } from '../hooks/tnode';\nimport { TimelineInjectKey, DEFAULT_PROVIDER } from './hooks';\nimport Loading from '../loading';\n\nconst DEFAULT_THEME = ['default', 'primary', 'success', 'warning', 'error'];\n\nexport default defineComponent({\n name: 'XTimelineItem',\n props: {\n ...TimeLineItemProps,\n index: {\n type: Number,\n },\n },\n\n setup(props) {\n const COMPONENT_NAME = usePrefixClass('timeline-item');\n // unit test need default value\n\n const TimelineProvider = inject(TimelineInjectKey, DEFAULT_PROVIDER);\n const renderContent = useContent();\n const renderTNodeJSX = useTNodeJSX();\n\n // 计算节点模式 CSS 类名\n const getPositionClassName = (index: number) => {\n const { layout, renderAlign } = TimelineProvider.value;\n // TimelineItem.labelAlign > Timeline.labelAlign\n const timelineItemAlign = props.labelAlign ?? renderAlign;\n // 横向布局 以及 纵向布局对应为不同的样式名\n const left = layout === 'horizontal' ? 'top' : 'left';\n const right = layout === 'horizontal' ? 'bottom' : 'right';\n // 单独设置则单独生效\n if (timelineItemAlign === 'alternate') {\n return index % 2 === 0 ? `${COMPONENT_NAME.value}-${left}` : `${COMPONENT_NAME.value}-${right}`;\n }\n if (timelineItemAlign === 'left' || timelineItemAlign === 'top') {\n return `${COMPONENT_NAME.value}-${left}`;\n }\n if (timelineItemAlign === 'right' || timelineItemAlign === 'bottom') {\n return `${COMPONENT_NAME.value}-${right}`;\n }\n return '';\n };\n\n return () => {\n const { mode, theme, itemsStatus, reverse } = TimelineProvider.value;\n const { loading, dotColor, index } = props;\n\n const labelNode = renderTNodeJSX('label');\n const dotElement = renderTNodeJSX('dot');\n\n const dotContentClass = `${COMPONENT_NAME.value}__dot-content`;\n if (dotElement?.props) {\n const classes = dotElement?.props?.class;\n dotElement.props.class = classes ? [dotContentClass, classes].join(' ') : dotContentClass;\n }\n\n return (\n <li class={[`${COMPONENT_NAME.value}`, `${getPositionClassName(props.index)}`]}>\n {mode === 'alternate' && labelNode && (\n <div class={[`${COMPONENT_NAME.value}__label`, `${COMPONENT_NAME.value}__label--${mode}`]}>{labelNode}</div>\n )}\n <div class={`${COMPONENT_NAME.value}__wrapper`}>\n <div\n class={{\n [`${COMPONENT_NAME.value}__dot`]: true,\n [`${COMPONENT_NAME.value}__dot--custom`]: !!dotElement || (!dotElement && loading),\n [`${COMPONENT_NAME.value}__dot--${dotColor}`]: DEFAULT_THEME.includes(dotColor),\n }}\n style={{ borderColor: !DEFAULT_THEME.includes(dotColor) && dotColor }}\n >\n {!dotElement && loading && <Loading size=\"12px\" class={dotContentClass} />}\n {dotElement}\n </div>\n <div\n class={{\n [`${COMPONENT_NAME.value}__tail`]: true,\n [`${COMPONENT_NAME.value}__tail--theme-${theme}`]: true,\n [`${COMPONENT_NAME.value}__tail--status-${itemsStatus[index]}`]: reverse,\n }}\n />\n </div>\n <div class={`${COMPONENT_NAME.value}__content`}>\n {renderContent('default', 'content')}\n {mode === 'same' && labelNode && (\n <div class={[`${COMPONENT_NAME.value}__label`, `${COMPONENT_NAME.value}__label--${mode}`]}>\n {labelNode}\n </div>\n )}\n </div>\n </li>\n );\n };\n },\n});\n"],"names":["name","props","index","type","dotElement","_createVNode"],"mappings":"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"}