Feature/grid tsx (#1415)

* refactor(grid): use tsx

fix #1409

* test(grid): update grid test cases

* test(grid): update grid test cases

* test(grid): update grid test cases

* refactor(grid): update props name

src/grid/__test__/index.test.jsx

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
-import Grid from '../grid.vue';
-import GridItem from '../grid-item.vue';
+import Grid from '../grid';
+import GridItem from '../grid-item';
 import Badge from '../../badge/badge';
 
 const prefix = 't';

src/grid/grid-item.tsx

@@ -0,0 +1,73 @@
+import { defineComponent, getCurrentInstance, computed, inject } from 'vue';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import isFunction from 'lodash/isFunction';
+
+import config from '../config';
+import props from './grid-item-props';
+import { useTNodeJSX } from '../hooks/tnode';
+import TImage from '../image';
+import TBadge from '../badge';
+
+const { prefix } = config;
+const name = `${prefix}-grid-item`;
+
+export default defineComponent({
+  name,
+  components: { TImage, TBadge },
+  props,
+  setup(props, context) {
+    const renderTNodeJSX = useTNodeJSX();
+    const { column, border, align, gutter } = inject<any>('grid');
+
+    const rootStyle = computed(() => {
+      const percent = column.value > 0 ? `${100 / +column.value}%` : 0;
+      const style: Record<string, any> = {
+        textAlign: ['center', 'left'].includes(align.value) ? align.value : 'center',
+      };
+      if (percent !== 0) {
+        style.flexBasis = percent;
+      }
+      return style;
+    });
+
+    const size = computed(() => {
+      if (column.value > 4 || !column.value) return 'small';
+      return column.value < 4 ? 'large' : 'middle';
+    });
+
+    const realImage = computed(() => {
+      if (isString(props.image)) return { src: props.image };
+      if (isObject(props.image) && !isFunction(props.image) && !context.slots.image) {
+        return props.image;
+      }
+      return null;
+    });
+
+    const gridItemClasses = computed(() => [
+      `${name}`,
+      `${name}--${props.layout}`,
+      { [`${name}--bordered`]: border.value, [`${name}--surround`]: border.value && gutter.value },
+    ]);
+
+    return () => {
+      const renderImage = () =>
+        realImage.value ? <t-image shape="round" {...realImage.value} /> : renderTNodeJSX('image');
+
+      return (
+        <div class={gridItemClasses.value} style={rootStyle.value}>
+          <div class={`${name}__image ${name}__image--${size.value}`}>
+            {props.badge ? <t-badge {...(props.badge as Object)}>{renderImage()}</t-badge> : renderImage()}
+          </div>
+
+          <div class={`${name}__content ${name}__content--${props.layout}`}>
+            <div class={`${name}__title ${name}__title--${size.value}`}>{renderTNodeJSX('text')}</div>
+            <div class={`${name}__description ${name}__description--${props.layout}`}>
+              {renderTNodeJSX('description')}
+            </div>
+          </div>
+        </div>
+      );
+    };
+  },
+});

src/grid/grid.vue → src/grid/grid.tsx

@@ -1,32 +1,15 @@
-<template>
-  <div
-    :class="[
-      `${name}`,
-      {
-        [`${name}--card`]: theme === 'card',
-        [`${name}--auto-size`]: column === 0,
-        [`${name}--bordered`]: border && !gutter,
-      },
-    ]"
-    :style="rootStyle"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
 import { defineComponent, provide, toRefs, computed } from 'vue';
 
 import config from '../config';
-import gridProps from './props';
+import props from './props';
 
 const { prefix } = config;
 const name = `${prefix}-grid`;
 
 export default defineComponent({
   name,
-  props: gridProps,
-  setup(props) {
+  props,
+  setup(props, { slots }) {
     const { column, gutter, border, align } = toRefs(props);
     const rootStyle = computed(() => {
       if (column.value === 0) return [];
@@ -46,11 +29,18 @@ export default defineComponent({
       gutter,
     });
 
-    return {
-      name,
-      column,
-      rootStyle,
-    };
+    const classes = computed(() => [
+      `${name}`,
+      {
+        [`${name}--card`]: props.theme === 'card',
+        [`${name}--auto-size`]: props.column === 0,
+        [`${name}--bordered`]: props.border && !props.gutter,
+      },
+    ]);
+    return () => (
+      <div class={classes.value} style={rootStyle.value}>
+        {slots.default?.()}
+      </div>
+    );
   },
 });
-</script>

src/grid/index.ts

@@ -1,5 +1,5 @@
-import LocalGrid from './grid.vue';
-import LocalGridItem from './grid-item.vue';
+import LocalGrid from './grid';
+import LocalGridItem from './grid-item';
 import { withInstall, WithInstallType } from '../shared';
 
 import { TdGridItemProps, TdGridProps } from './type';