refactor(divider): refactor with ts (#2928)

* refactor(divider): refactor with ts

* refactor(divider): add default value for dashed prop

* style(divider): remove unuse import

components/divider/index.jsx

@@ -1,45 +0,0 @@
-import { inject } from 'vue';
-import PropTypes from '../_util/vue-types';
-import { defaultConfigProvider } from '../config-provider';
-import { getSlot } from '../_util/props-util';
-
-const Divider = {
-  name: 'ADivider',
-  props: {
-    prefixCls: PropTypes.string,
-    type: PropTypes.oneOf(['horizontal', 'vertical', '']).def('horizontal'),
-    dashed: PropTypes.bool,
-    orientation: PropTypes.oneOf(['left', 'right', 'center']),
-  },
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
-  render() {
-    const { prefixCls: customizePrefixCls, type, dashed, orientation = 'center' } = this;
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('divider', customizePrefixCls);
-    const orientationPrefix = orientation.length > 0 ? '-' + orientation : orientation;
-    const children = getSlot(this);
-    const classString = {
-      [prefixCls]: true,
-      [`${prefixCls}-${type}`]: true,
-      [`${prefixCls}-with-text${orientationPrefix}`]: children.length,
-      [`${prefixCls}-dashed`]: !!dashed,
-    };
-
-    return (
-      <div class={classString} role="separator">
-        {!!children.length && <span class={`${prefixCls}-inner-text`}>{children}</span>}
-      </div>
-    );
-  },
-};
-
-/* istanbul ignore next */
-Divider.install = function(app) {
-  app.component(Divider.name, Divider);
-};
-
-export default Divider;

components/divider/index.tsx

@@ -0,0 +1,52 @@
+import { App, computed, defineComponent, inject, PropType, unref } from 'vue';
+import { defaultConfigProvider } from '../config-provider';
+
+const Divider = defineComponent({
+  name: 'ADivider',
+  props: {
+    prefixCls: String,
+    type: {
+      type: String as PropType<'horizontal' | 'vertical' | ''>,
+      default: 'horizontal',
+    },
+    dashed: {
+      type: Boolean,
+      default: false,
+    },
+    orientation: {
+      type: String as PropType<'left' | 'right' | 'center'>,
+      default: 'center',
+    },
+  },
+  setup(props, { slots }) {
+    const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
+    const prefixCls = computed(() => getPrefixCls('divider', props.prefixCls));
+
+    const classString = computed(() => {
+      const { type, dashed, orientation } = props;
+      const orientationPrefix = orientation.length > 0 ? '-' + orientation : orientation;
+      const prefixClsRef = unref(prefixCls);
+      return {
+        [prefixClsRef]: true,
+        [`${prefixClsRef}-${type}`]: true,
+        [`${prefixClsRef}-with-text${orientationPrefix}`]: slots.default,
+        [`${prefixClsRef}-dashed`]: !!dashed,
+      };
+    });
+
+    return () => {
+      return (
+        <div class={classString.value} role="separator">
+          <span class={`${prefixCls.value}-inner-text`}>{slots.default?.()}</span>
+        </div>
+      );
+    };
+  },
+});
+
+/* istanbul ignore next */
+Divider.install = function(app: App) {
+  app.component(Divider.name, Divider);
+};
+
+export default Divider;