TimelineItem.js 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import { createVNode as _createVNode } from "vue";
  3. import { defineComponent } from 'vue';
  4. import classNames from '../_util/classNames';
  5. import PropTypes from '../_util/vue-types';
  6. import initDefaultProps from '../_util/props-util/initDefaultProps';
  7. import { tuple } from '../_util/type';
  8. import useConfigInject from '../_util/hooks/useConfigInject';
  9. export var timelineItemProps = function timelineItemProps() {
  10. return {
  11. prefixCls: String,
  12. color: String,
  13. dot: PropTypes.any,
  14. pending: {
  15. type: Boolean,
  16. default: undefined
  17. },
  18. position: PropTypes.oneOf(tuple('left', 'right', '')).def(''),
  19. label: PropTypes.any
  20. };
  21. };
  22. export default defineComponent({
  23. compatConfig: {
  24. MODE: 3
  25. },
  26. name: 'ATimelineItem',
  27. props: initDefaultProps(timelineItemProps(), {
  28. color: 'blue',
  29. pending: false
  30. }),
  31. slots: ['dot', 'label'],
  32. setup: function setup(props, _ref) {
  33. var slots = _ref.slots;
  34. var _useConfigInject = useConfigInject('timeline', props),
  35. prefixCls = _useConfigInject.prefixCls;
  36. return function () {
  37. var _slots$label, _slots$dot, _classNames, _classNames2, _slots$default;
  38. var _props$color = props.color,
  39. color = _props$color === void 0 ? '' : _props$color,
  40. pending = props.pending,
  41. _props$label = props.label,
  42. label = _props$label === void 0 ? (_slots$label = slots.label) === null || _slots$label === void 0 ? void 0 : _slots$label.call(slots) : _props$label,
  43. _props$dot = props.dot,
  44. dot = _props$dot === void 0 ? (_slots$dot = slots.dot) === null || _slots$dot === void 0 ? void 0 : _slots$dot.call(slots) : _props$dot;
  45. var itemClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-item"), true), _defineProperty(_classNames, "".concat(prefixCls.value, "-item-pending"), pending), _classNames));
  46. var dotClassName = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls.value, "-item-head"), true), _defineProperty(_classNames2, "".concat(prefixCls.value, "-item-head-custom"), dot), _defineProperty(_classNames2, "".concat(prefixCls.value, "-item-head-").concat(color), true), _classNames2));
  47. var customColor = /blue|red|green|gray/.test(color || '') ? undefined : color;
  48. return _createVNode("li", {
  49. "class": itemClassName
  50. }, [label && _createVNode("div", {
  51. "class": "".concat(prefixCls.value, "-item-label")
  52. }, [label]), _createVNode("div", {
  53. "class": "".concat(prefixCls.value, "-item-tail")
  54. }, null), _createVNode("div", {
  55. "class": dotClassName,
  56. "style": {
  57. borderColor: customColor,
  58. color: customColor
  59. }
  60. }, [dot]), _createVNode("div", {
  61. "class": "".concat(prefixCls.value, "-item-content")
  62. }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)])]);
  63. };
  64. }
  65. });