Merge pull request #61 from duenyang/feature/tooltip

feat(tooltip): add tooltip 🎉

package.json

@@ -58,7 +58,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@omiu/transition": "^0.0.17",
     "@popperjs/core": "^2.11.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

script/plugin-tdoc/md-to-wc.mjs

@@ -2,6 +2,7 @@ import esbuild from 'esbuild';
 import fs from 'fs';
 import matter from 'gray-matter';
 import { spawn } from 'node:child_process';
+import path from 'path';
 // import camelCase from 'camelcase';
 // import { compileUsage } from '../../src/_common/docs/compile';
 
@@ -80,6 +81,8 @@ export default async function mdToReact(options) {
       const tab = signal(query.get('tab') || 'demo');
       const tabRef = signal({});
 
+      const lastUpdated = tab === 'design' ? ${mdSegment.designDocLastUpdated} : ${mdSegment.lastUpdated};
+
       effect(() => {
         tabRef.value?.addEventListener?.('change', (event) => {
           tab.value = event.detail;
@@ -108,11 +111,14 @@ export default async function mdToReact(options) {
               <div style={isShow('api')} name="API">
                 ${mdSegment.apiMd}
               </div>
+              <div style={isShow('design')} name="DESIGN">
+                ${mdSegment.designMd}
+              </div>
             </>
           ) : <div name="DOC" className="${mdSegment.docClass}">${mdSegment.docMd}</div>
         }
         <div style={{ marginTop: 48 }}>
-          <td-doc-history time={${mdSegment.lastUpdated}} key={${mdSegment.lastUpdated}}></td-doc-history>
+          <td-doc-history time={lastUpdated} key={lastUpdated}></td-doc-history>
         </div>
         </>
       )
@@ -152,6 +158,7 @@ async function customRender({ source, file, md }) {
     apiFlag: /#+\s*API/,
     docClass: '',
     lastUpdated,
+    designDocLastUpdated: lastUpdated,
     ...data,
   };
 
@@ -210,5 +217,22 @@ async function customRender({ source, file, md }) {
       `${pageData.toc ? '[toc]\n' : ''}${content.replace(/<!--[\s\S]+?-->/g, '')}`,
     ).html;
   }
+
+  // 设计指南内容 不展示 design Tab 则不解析
+  if (pageData.isComponent && pageData.tdDocTabs.some((item) => item.tab === 'design')) {
+    const designDocPath = path.resolve(__dirname, `../../src/_common/docs/web/design/${componentName}.md`);
+
+    if (fs.existsSync(designDocPath)) {
+      const designDocLastUpdated =
+        (await getGitTimestamp(designDocPath)) || Math.round(fs.statSync(designDocPath).mtimeMs);
+      mdSegment.designDocLastUpdated = designDocLastUpdated;
+
+      const designMd = fs.readFileSync(designDocPath, 'utf-8');
+      mdSegment.designMd = md.render.call(md, `${pageData.toc ? '[toc]\n' : ''}${designMd}`).html;
+    } else {
+      console.log(`[vite-plugin-tdoc]: 未找到 ${designDocPath} 文件`);
+    }
+  }
+
   return mdSegment;
 }

site/sidebar.config.ts

@@ -148,6 +148,12 @@ export default [
         path: '/components/image',
         component: () => import('tdesign-web-components/image/README.md'),
       },
+      {
+        title: 'Tooltip 文字提示',
+        name: 'tooltip',
+        path: '/components/tooltip',
+        component: () => import('tdesign-web-components/tooltip/README.md'),
+      },
     ],
   },
   {

src/button/button.tsx

@@ -63,7 +63,7 @@ export default class Button extends Component<ButtonProps> {
     }
 
     let iconNode = icon;
-    if (loading) iconNode = <t-icon className="mb-[2px]" name={'loading'} />;
+    if (loading) iconNode = <t-icon className="mr-[2px]" name={'loading'} />;
 
     const Tag = this.tag as string;
     return (

src/index.ts

@@ -4,6 +4,7 @@ export * from './icon';
 export * from './image';
 export * from './input';
 export * from './popup';
-export * from './textarea';
 export * from './space';
 export * from './switch';
+export * from './textarea';
+export * from './tooltip';

src/popup/popup.tsx

@@ -1,6 +1,5 @@
 import 'omi-transition';
 
-// import '@omiu/transition';
 import { createPopper } from '@popperjs/core';
 import debounce from 'lodash/debounce';
 import { Component, createRef, OmiProps, tag } from 'omi';

src/tooltip/README.md

@@ -0,0 +1,53 @@
+---
+title: Tooltip 文字提示
+description: 用于文字提示的气泡框。
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+### 基础用法
+
+{{ base }}
+
+### 带箭头的文字提示
+
+带箭头的文字提示有较明确的指向性。常用于有多个需要提示的信息并列放置时，对某个具体信息进行提示。
+
+{{ arrow }}
+
+### 不带箭头的文字提示
+
+不带箭头的文字提示没有明确指向性。常用于不需要针对性提示的场景中。 
+
+{{ no-arrow }}
+
+### 带主题色的文字提示
+
+提供浅灰色、蓝色、绿色、红色、黄色主题的文字提示。
+
+{{ theme }}
+
+### 不同触发方式的文字提示
+
+支持常见元素事件触发文字提示。
+
+{{ trigger }}
+
+### 定时消失
+
+{{ duration }}
+
+
+## API
+### Tooltip Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+delay | Number | - | 【议案讨论中】延迟出现提示，用于异步加载提示信息需要延迟显示的业务场景下 | N
+destroyOnClose | Boolean | true | 是否在关闭浮层时销毁浮层 | N
+duration | Number | - | 用于设置提示默认显示多长时间之后消失，初始第一次有效，单位：毫秒 | N
+placement | String | top | 浮层出现位置。TS 类型：`PopupPlacement`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tooltip/type.ts) | N
+showArrow | Boolean | true | 是否显示浮层箭头 | N
+theme | String | default | 文字提示风格。可选项：default/primary/success/danger/warning/light | N
+`PopupProps` | \- | - | 继承 `PopupProps` 中的全部 API | N

src/tooltip/_example/arrow.tsx

@@ -0,0 +1,10 @@
+import 'tdesign-web-components/button';
+import 'tdesign-web-components/tooltip';
+
+export default function BasicUsage() {
+  return (
+    <t-tooltip content="文字提示仅展示文本内容">
+      <t-button variant="outline">默认文字提示</t-button>
+    </t-tooltip>
+  );
+}