feat(grid): Grid 新增 hover 属性；GridItem 新增 icon 属性 (#1725)

* feat(grid): grid 新增 hover 属性；GridItem 新增 icon 属性 * refactor(grid): update type
Tencent · Jan 22, 2025 · 825fe6e · 825fe6e
1 parent a071164
commit 825fe6e
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 156 deletions.
diff --git a/src/grid/__test__/__snapshots__/demo.test.jsx.snap b/src/grid/__test__/__snapshots__/demo.test.jsx.snap
@@ -2578,26 +2578,19 @@ exports[`Grid > Grid iconVue demo works fine 1`] = `
     <div
       class="t-grid-item__image t-grid-item__image--middle"
     >
-      
-      <div
-        class="icon-wrapper"
-        data-v-1b745b58=""
-      >
-        <svg
-          class="t-icon t-icon-star"
-          data-v-1b745b58=""
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      
+      <svg
+        class="t-icon t-icon-star"
+        fill="none"
+        height="1em"
+        style="font-size: 24px;"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
     <div
       class="t-grid-item__content t-grid-item__content--vertical"
@@ -2622,26 +2615,19 @@ exports[`Grid > Grid iconVue demo works fine 1`] = `
     <div
       class="t-grid-item__image t-grid-item__image--middle"
     >
-      
-      <div
-        class="icon-wrapper"
-        data-v-1b745b58=""
-      >
-        <svg
-          class="t-icon t-icon-download"
-          data-v-1b745b58=""
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      
+      <svg
+        class="t-icon t-icon-download"
+        fill="none"
+        height="1em"
+        style="font-size: 24px;"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
     <div
       class="t-grid-item__content t-grid-item__content--vertical"
@@ -2666,26 +2652,19 @@ exports[`Grid > Grid iconVue demo works fine 1`] = `
     <div
       class="t-grid-item__image t-grid-item__image--middle"
     >
-      
-      <div
-        class="icon-wrapper"
-        data-v-1b745b58=""
-      >
-        <svg
-          class="t-icon t-icon-edit-1"
-          data-v-1b745b58=""
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      
+      <svg
+        class="t-icon t-icon-edit-1"
+        fill="none"
+        height="1em"
+        style="font-size: 24px;"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
     <div
       class="t-grid-item__content t-grid-item__content--vertical"
@@ -5650,26 +5629,19 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           <div
             class="t-grid-item__image t-grid-item__image--middle"
           >
-            
-            <div
-              class="icon-wrapper"
-              data-v-1b745b58=""
-            >
-              <svg
-                class="t-icon t-icon-star"
-                data-v-1b745b58=""
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            
+            <svg
+              class="t-icon t-icon-star"
+              fill="none"
+              height="1em"
+              style="font-size: 24px;"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
+                fill="currentColor"
+              />
+            </svg>
           </div>
           <div
             class="t-grid-item__content t-grid-item__content--vertical"
@@ -5694,26 +5666,19 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           <div
             class="t-grid-item__image t-grid-item__image--middle"
           >
-            
-            <div
-              class="icon-wrapper"
-              data-v-1b745b58=""
-            >
-              <svg
-                class="t-icon t-icon-download"
-                data-v-1b745b58=""
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            
+            <svg
+              class="t-icon t-icon-download"
+              fill="none"
+              height="1em"
+              style="font-size: 24px;"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
+                fill="currentColor"
+              />
+            </svg>
           </div>
           <div
             class="t-grid-item__content t-grid-item__content--vertical"
@@ -5738,26 +5703,19 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           <div
             class="t-grid-item__image t-grid-item__image--middle"
           >
-            
-            <div
-              class="icon-wrapper"
-              data-v-1b745b58=""
-            >
-              <svg
-                class="t-icon t-icon-edit-1"
-                data-v-1b745b58=""
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            
+            <svg
+              class="t-icon t-icon-edit-1"
+              fill="none"
+              height="1em"
+              style="font-size: 24px;"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
+                fill="currentColor"
+              />
+            </svg>
           </div>
           <div
             class="t-grid-item__content t-grid-item__content--vertical"

diff --git a/src/grid/demos/base.vue b/src/grid/demos/base.vue
@@ -14,7 +14,7 @@
     <t-grid-item text="最多五个字" :image="imgUrl" />
   </t-grid>
 
-  <t-grid :column="3" class="grid-demo">
+  <t-grid :column="3" class="grid-demo" hover>
     <t-grid-item text="标题文字" :image="imgUrl" />
     <t-grid-item text="标题文字" :image="imgUrl" />
     <t-grid-item text="最多六个文字" :image="imgUrl" />

diff --git a/src/grid/demos/icon.vue b/src/grid/demos/icon.vue
@@ -7,34 +7,21 @@
         </div>
       </template>
     </t-grid-item>
-    <t-grid-item text="收藏">
-      <template #image>
-        <div class="icon-wrapper">
-          <StarIcon size="24" />
-        </div>
-      </template>
-    </t-grid-item>
-    <t-grid-item text="保存">
-      <template #image>
-        <div class="icon-wrapper">
-          <DownloadIcon size="24" />
-        </div>
-      </template>
-    </t-grid-item>
-    <t-grid-item text="编辑">
-      <template #image>
-        <div class="icon-wrapper">
-          <Edit1Icon size="24" />
-        </div>
-      </template>
-    </t-grid-item>
+    <t-grid-item text="收藏" :icon="starIcon" />
+    <t-grid-item text="保存" :icon="downloadIcon" />
+    <t-grid-item text="编辑" :icon="edit1Icon" />
   </t-grid>
 </template>
 
 <script lang="ts" setup>
+import { h } from 'vue';
 import { ShareIcon, StarIcon, DownloadIcon, Edit1Icon } from 'tdesign-icons-vue-next';
 
 const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example1.png';
+
+const starIcon = () => h(StarIcon, { size: '24px' });
+const downloadIcon = () => h(DownloadIcon, { size: '24px' });
+const edit1Icon = () => h(Edit1Icon, { size: '24px' });
 </script>
 <style scoped lang="less">
 .icon-wrapper {

diff --git a/src/grid/grid-item-props.ts b/src/grid/grid-item-props.ts
@@ -16,6 +16,10 @@ export default {
   description: {
     type: [String, Function] as PropType<TdGridItemProps['description']>,
   },
+  /** 图标名称。 */
+  icon: {
+    type: Function as PropType<TdGridItemProps['icon']>,
+  },
   /** 图片，可以是图片地址，也可以自定义图片节点，如果传入对象则透传至 image 组件 */
   image: {
     type: [String, Object, Function] as PropType<TdGridItemProps['image']>,

diff --git a/src/grid/grid-item.tsx b/src/grid/grid-item.tsx
@@ -2,6 +2,7 @@ import { defineComponent, computed, inject } from 'vue';
 import isObject from 'lodash/isObject';
 import isString from 'lodash/isString';
 import isFunction from 'lodash/isFunction';
+import { Hover } from '../shared';
 import config from '../config';
 import props from './grid-item-props';
 import { useTNodeJSX } from '../hooks/tnode';
@@ -13,13 +14,14 @@ const { prefix } = config;
 
 export default defineComponent({
   name: `${prefix}-grid-item`,
+  directives: { Hover },
   components: { TImage, TBadge },
   props,
   setup(props, context) {
     const gridItemClass = usePrefixClass('grid-item');
 
     const renderTNodeJSX = useTNodeJSX();
-    const { column, border, align, gutter } = inject<any>('grid');
+    const { column, border, align, gutter, hover } = inject<any>('grid');
 
     const rootStyle = computed(() => {
       const percent = column.value > 0 ? `${100 / +column.value}%` : 0;
@@ -55,11 +57,22 @@ export default defineComponent({
     ]);
 
     return () => {
-      const renderImage = () =>
-        realImage.value ? <t-image shape="round" {...realImage.value} /> : renderTNodeJSX('image');
+      const renderImage = () => {
+        if (realImage.value) {
+          return <t-image shape="round" {...realImage.value} />;
+        }
+        if (props.icon) {
+          return renderTNodeJSX('icon');
+        }
+        return renderTNodeJSX('image');
+      };
 
       return (
-        <div class={gridItemClasses.value} style={rootStyle.value}>
+        <div
+          class={gridItemClasses.value}
+          style={rootStyle.value}
+          v-hover={{ className: `${gridItemClass.value}--hover`, disabledHover: !hover.value }}
+        >
           <div class={`${gridItemClass.value}__image ${gridItemClass.value}__image--${size.value}`}>
             {props.badge ? <t-badge {...(props.badge as Object)}>{renderImage()}</t-badge> : renderImage()}
           </div>

diff --git a/src/grid/grid.en-US.md b/src/grid/grid.en-US.md
@@ -1,28 +1,32 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Grid Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | center | options：left/center | N
+align | String | center | options: left/center | N
 border | Boolean | false | \- | N
 column | Number | 4 | \- | N
 gutter | Number | - | \- | N
-theme | String | default | options：default/card | N
+hover | Boolean | false | \- | N
+theme | String | default | options: default/card | N
+
 
 ### GridItem Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 badge | Object | null | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/grid/type.ts) | N
 description | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 image | String / Object / Slot / Function | - | Typescript：`string \| object \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-layout | String | vertical | options：vertical/horizontal | N
+layout | String | vertical | options: vertical/horizontal | N
 text | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -47,4 +51,4 @@ Name | Default Value | Description
 --td-grid-item-text-font-size | 14px | - 
 --td-grid-item-text-line-height | 22px | - 
 --td-grid-item-text-padding-top | 8px | - 
---td-grid-item-vertical-padding | 16px 0 12px | - 
+--td-grid-item-vertical-padding | 16px 0 12px | -