feat: update timeline (#2364)

* feat: update timeline

* style: lower import path

Author: zkwolf

components/timeline/Timeline.jsx

@@ -1,14 +1,13 @@
+import { inject, cloneVNode } from 'vue';
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
 import {
   getOptionProps,
   getPropsData,
   initDefaultProps,
   filterEmpty,
-  getComponentFromProp,
-  getListeners,
+  getComponent,
 } from '../_util/props-util';
-import { cloneElement } from '../_util/vnode';
 import TimelineItem from './TimelineItem';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import { ConfigConsumerProps } from '../config-provider';
@@ -28,23 +27,26 @@ export default {
     reverse: false,
     mode: '',
   }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    const configProvider = inject('configProvider', ConfigConsumerProps);
+    return {
+      configProvider,
+    };
   },
   render() {
     const { prefixCls: customizePrefixCls, reverse, mode, ...restProps } = getOptionProps(this);
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('timeline', customizePrefixCls);
 
-    const pendingDot = getComponentFromProp(this, 'pendingDot');
-    const pending = getComponentFromProp(this, 'pending');
+    const pendingDot = getComponent(this, 'pendingDot');
+    const pending = getComponent(this, 'pending');
     const pendingNode = typeof pending === 'boolean' ? null : pending;
     const classString = classNames(prefixCls, {
       [`${prefixCls}-pending`]: !!pending,
       [`${prefixCls}-reverse`]: !!reverse,
       [`${prefixCls}-${mode}`]: !!mode,
     });
-    const children = filterEmpty(this.$slots.default);
+    const children = filterEmpty(this.$slots.default && this.$slots.default());
     // // Remove falsy items
     // const falsylessItems = filterEmpty(this.$slots.default)
     // const items = falsylessItems.map((item, idx) => {
@@ -85,7 +87,7 @@ export default {
     const items = truthyItems.map((ele, idx) => {
       const pendingClass = idx === itemsCount - 2 ? lastCls : '';
       const readyClass = idx === itemsCount - 1 ? lastCls : '';
-      return cloneElement(ele, {
+      return cloneVNode(ele, {
         class: classNames([
           !reverse && !!pending ? pendingClass : readyClass,
           getPositionCls(ele, idx),
@@ -98,7 +100,6 @@ export default {
         ...restProps,
       },
       class: classString,
-      on: getListeners(this),
     };
     return <ul {...timelineProps}>{items}</ul>;
   },

components/timeline/TimelineItem.jsx

@@ -1,11 +1,7 @@
+import { inject } from 'vue';
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
-import {
-  getOptionProps,
-  initDefaultProps,
-  getComponentFromProp,
-  getListeners,
-} from '../_util/props-util';
+import { getOptionProps, initDefaultProps, getComponent } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 export const TimeLineItemProps = {
@@ -22,15 +18,18 @@ export default {
     color: 'blue',
     pending: false,
   }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    const configProvider = inject('configProvider', ConfigConsumerProps);
+    return {
+      configProvider,
+    };
   },
   render() {
     const { prefixCls: customizePrefixCls, color = '', pending } = getOptionProps(this);
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('timeline', customizePrefixCls);
 
-    const dot = getComponentFromProp(this, 'dot');
+    const dot = getComponent(this, 'dot');
     const itemClassName = classNames({
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-pending`]: pending,
@@ -43,7 +42,6 @@ export default {
     });
     const liProps = {
       class: itemClassName,
-      on: getListeners(this),
     };
     return (
       <li {...liProps}>
@@ -54,7 +52,9 @@ export default {
         >
           {dot}
         </div>
-        <div class={`${prefixCls}-item-content`}>{this.$slots.default}</div>
+        <div class={`${prefixCls}-item-content`}>
+          {this.$slots.default && this.$slots.default()}
+        </div>
       </li>
     );
   },

components/timeline/index.jsx

@@ -8,10 +8,10 @@ export { TimeLineItemProps } from './TimelineItem';
 Timeline.Item = TimelineItem;
 
 /* istanbul ignore next */
-Timeline.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Timeline.name, Timeline);
-  Vue.component(TimelineItem.name, TimelineItem);
+Timeline.install = function(app) {
+  app.use(Base);
+  app.component(Timeline.name, Timeline);
+  app.component(TimelineItem.name, TimelineItem);
 };
 
 export default Timeline;

examples/index.js

@@ -10,6 +10,7 @@ import ConfigProvider from 'ant-design-vue/config-provider';
 import Result from 'ant-design-vue/result';
 import Spin from 'ant-design-vue/spin';
 import Empty from 'ant-design-vue/empty';
+import Timeline from 'ant-design-vue/timeline';
 import 'ant-design-vue/style.js';
 
 createApp(App)
@@ -22,4 +23,5 @@ createApp(App)
   .use(Result)
   .use(Spin)
   .use(Empty)
+  .use(Timeline)
   .mount('#app');