From 3712dac0799b4ff8dc3a35d23639c4f04b92a767 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 3 Feb 2021 10:34:43 +0800
Subject: [PATCH] chore(Tag): use tsx (#8066)

---
 src/tag/{index.js => index.tsx} | 36 ++++++++++++++++++---------------
 src/vue-shim.d.ts               | 11 ++++++++++
 2 files changed, 31 insertions(+), 16 deletions(-)
 rename src/tag/{index.js => index.tsx} (55%)
 create mode 100644 src/vue-shim.d.ts

diff --git a/src/tag/index.js b/src/tag/index.tsx
similarity index 55%
rename from src/tag/index.js
rename to src/tag/index.tsx
index a1c1d9d98..ccc4e9867 100644
--- a/src/tag/index.js
+++ b/src/tag/index.tsx
@@ -1,9 +1,11 @@
-import { Transition } from 'vue';
+import { CSSProperties, PropType, Transition } from 'vue';
 import { createNamespace } from '../utils';
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('tag');
 
+export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+
 export default createComponent({
   props: {
     size: String,
@@ -14,7 +16,7 @@ export default createComponent({
     textColor: String,
     closeable: Boolean,
     type: {
-      type: String,
+      type: String as PropType<TagType>,
       default: 'default',
     },
     show: {
@@ -26,12 +28,12 @@ export default createComponent({
   emits: ['close'],
 
   setup(props, { slots, emit }) {
-    const onClose = (event) => {
+    const onClose = (event: MouseEvent) => {
       event.stopPropagation();
       emit('close');
     };
 
-    const getStyle = () => {
+    const getStyle = (): CSSProperties => {
       if (props.plain) {
         return {
           color: props.textColor || props.color,
@@ -43,12 +45,12 @@ export default createComponent({
       };
     };
 
-    return () => {
-      const { show, type, mark, plain, round, size, closeable } = props;
+    const renderTag = () => {
+      const { type, mark, plain, round, size, closeable } = props;
 
-      const classes = { mark, plain, round };
+      const classes: Record<string, boolean> = { mark, plain, round };
       if (size) {
-        classes[size] = size;
+        classes[size] = !!size;
       }
 
       const CloseIcon = closeable && (
@@ -56,15 +58,17 @@ export default createComponent({
       );
 
       return (
-        <Transition name={closeable ? 'van-fade' : undefined}>
-          {show ? (
-            <span style={getStyle()} class={bem([classes, type])}>
-              {slots.default?.()}
-              {CloseIcon}
-            </span>
-          ) : null}
-        </Transition>
+        <span style={getStyle()} class={bem([classes, type])}>
+          {slots.default?.()}
+          {CloseIcon}
+        </span>
       );
     };
+
+    return () => (
+      <Transition name={props.closeable ? 'van-fade' : undefined}>
+        {props.show ? renderTag() : null}
+      </Transition>
+    );
   },
 });
diff --git a/src/vue-shim.d.ts b/src/vue-shim.d.ts
new file mode 100644
index 000000000..fbfd84f4f
--- /dev/null
+++ b/src/vue-shim.d.ts
@@ -0,0 +1,11 @@
+import 'vue';
+
+// TODO
+// should be removed after Vue supported component events typing
+// see: https://github.com/vuejs/vue-next/issues/1553
+//      https://github.com/vuejs/vue-next/issues/3029
+declare module 'vue' {
+  interface ComponentCustomProps {
+    onClick?: (event: MouseEvent) => void;
+  }
+}