TimelineItem.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.timelineItemProps = exports.default = void 0;
  7. var _vue = require("vue");
  8. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  9. var _initDefaultProps = _interopRequireDefault(require("../_util/props-util/initDefaultProps"));
  10. var _type = require("../_util/type");
  11. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  12. const timelineItemProps = () => ({
  13. prefixCls: String,
  14. color: String,
  15. dot: _vueTypes.default.any,
  16. pending: (0, _type.booleanType)(),
  17. position: _vueTypes.default.oneOf((0, _type.tuple)('left', 'right', '')).def(''),
  18. label: _vueTypes.default.any
  19. });
  20. exports.timelineItemProps = timelineItemProps;
  21. var _default = exports.default = (0, _vue.defineComponent)({
  22. compatConfig: {
  23. MODE: 3
  24. },
  25. name: 'ATimelineItem',
  26. props: (0, _initDefaultProps.default)(timelineItemProps(), {
  27. color: 'blue',
  28. pending: false
  29. }),
  30. slots: Object,
  31. setup(props, _ref) {
  32. let {
  33. slots
  34. } = _ref;
  35. const {
  36. prefixCls
  37. } = (0, _useConfigInject.default)('timeline', props);
  38. const itemClassName = (0, _vue.computed)(() => ({
  39. [`${prefixCls.value}-item`]: true,
  40. [`${prefixCls.value}-item-pending`]: props.pending
  41. }));
  42. const customColor = (0, _vue.computed)(() => /blue|red|green|gray/.test(props.color || '') ? undefined : props.color || 'blue');
  43. const dotClassName = (0, _vue.computed)(() => ({
  44. [`${prefixCls.value}-item-head`]: true,
  45. [`${prefixCls.value}-item-head-${props.color || 'blue'}`]: !customColor.value
  46. }));
  47. return () => {
  48. var _a, _b, _c;
  49. const {
  50. label = (_a = slots.label) === null || _a === void 0 ? void 0 : _a.call(slots),
  51. dot = (_b = slots.dot) === null || _b === void 0 ? void 0 : _b.call(slots)
  52. } = props;
  53. return (0, _vue.createVNode)("li", {
  54. "class": itemClassName.value
  55. }, [label && (0, _vue.createVNode)("div", {
  56. "class": `${prefixCls.value}-item-label`
  57. }, [label]), (0, _vue.createVNode)("div", {
  58. "class": `${prefixCls.value}-item-tail`
  59. }, null), (0, _vue.createVNode)("div", {
  60. "class": [dotClassName.value, !!dot && `${prefixCls.value}-item-head-custom`],
  61. "style": {
  62. borderColor: customColor.value,
  63. color: customColor.value
  64. }
  65. }, [dot]), (0, _vue.createVNode)("div", {
  66. "class": `${prefixCls.value}-item-content`
  67. }, [(_c = slots.default) === null || _c === void 0 ? void 0 : _c.call(slots)])]);
  68. };
  69. }
  70. });