types(Cell): use tsx

src/cell/index.tsx

@@ -1,6 +1,7 @@
+import { PropType } from 'vue';
+
 // Utils
 import { createNamespace, isDef } from '../utils';
-import { cellProps } from './shared';
 
 // Composition
 import { useRoute, routeProps } from '../composition/use-route';
@@ -10,6 +11,30 @@ import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('cell');
 
+export type CellArrowDirection = 'up' | 'down' | 'left' | 'right';
+
+export const cellProps = {
+  icon: String,
+  size: String as PropType<'large'>,
+  title: [Number, String],
+  value: [Number, String],
+  label: [Number, String],
+  center: Boolean,
+  isLink: Boolean,
+  required: Boolean,
+  clickable: Boolean,
+  iconPrefix: String,
+  titleStyle: null as any,
+  titleClass: null as any,
+  valueClass: null as any,
+  labelClass: null as any,
+  arrowDirection: String as PropType<CellArrowDirection>,
+  border: {
+    type: Boolean,
+    default: true,
+  },
+};
+
 export default createComponent({
   props: {
     ...cellProps,
@@ -91,21 +116,21 @@ export default createComponent({
       const { size, center, border, isLink, required } = props;
       const clickable = isLink || props.clickable;
 
-      const classes = {
+      const classes: Record<string, boolean | undefined> = {
         center,
         required,
         clickable,
         borderless: !border,
       };
       if (size) {
-        classes[size] = size;
+        classes[size] = !!size;
       }
 
       return (
         <div
           class={bem(classes)}
-          role={clickable ? 'button' : null}
-          tabindex={clickable ? 0 : null}
+          role={clickable ? 'button' : undefined}
+          tabindex={clickable ? 0 : undefined}
           onClick={route}
         >
           {renderLeftIcon()}

src/cell/shared.ts

@@ -1,40 +0,0 @@
-export type SharedCellProps = {
-  icon?: string;
-  size?: string;
-  border: boolean;
-  center?: boolean;
-  isLink?: boolean;
-  required?: boolean;
-  clickable?: boolean;
-  iconPrefix?: string;
-  titleStyle?: any;
-  titleClass?: any;
-  valueClass?: any;
-  labelClass?: any;
-  title?: string | number;
-  value?: string | number;
-  label?: string | number;
-  arrowDirection?: 'up' | 'down' | 'left' | 'right';
-};
-
-export const cellProps = {
-  icon: String,
-  size: String,
-  center: Boolean,
-  isLink: Boolean,
-  required: Boolean,
-  clickable: Boolean,
-  iconPrefix: String,
-  titleStyle: null as any,
-  titleClass: null as any,
-  valueClass: null as any,
-  labelClass: null as any,
-  title: [Number, String],
-  value: [Number, String],
-  label: [Number, String],
-  arrowDirection: String,
-  border: {
-    type: Boolean,
-    default: true,
-  },
-};

src/collapse-item/index.js

@@ -9,9 +9,8 @@ import { useParent } from '../composition/use-relation';
 import { useLazyRender } from '../composition/use-lazy-render';
 
 // Components
-import Cell from '../cell';
+import Cell, { cellProps } from '../cell';
 import { COLLAPSE_KEY } from '../collapse';
-import { cellProps } from '../cell/shared';
 
 const [createComponent, bem] = createNamespace('collapse-item');
 

src/field/index.js

@@ -13,8 +13,7 @@ import {
 
 // Components
 import Icon from '../icon';
-import Cell from '../cell';
-import { cellProps } from '../cell/shared';
+import Cell, { cellProps } from '../cell';
 
 const [createComponent, bem] = createNamespace('field');