feat(Typography): add Typography component

site/site.config.mjs

@@ -97,6 +97,14 @@ export const docs = [
         component: () => import('tdesign-vue-next/link/link.md'),
         componentEn: () => import('tdesign-vue-next/link/link.en-US.md'),
       },
+      {
+        title: 'Typography 排版',
+        titleEn: 'Typography',
+        name: 'typography',
+        path: '/vue-next/components/typography',
+        component: () => import('tdesign-vue-next/typography/typography.md'),
+        componentEn: () => import('tdesign-vue-next/typography/typography.en-US.md'),
+      },
     ],
   },
   {

site/test-coverage.js

@@ -193,7 +193,7 @@ module.exports = {
   },
   input: {
     statements: '97.07%',
-    branches: '83.76%',
+    branches: '83.15%',
     functions: '97.67%',
     lines: '97.07%',
   },
@@ -366,10 +366,10 @@ module.exports = {
     lines: '95.01%',
   },
   tag: {
-    statements: '81.68%',
-    branches: '79.62%',
-    functions: '66.66%',
-    lines: '81.68%',
+    statements: '82.53%',
+    branches: '81.96%',
+    functions: '68%',
+    lines: '82.53%',
   },
   tagInput: {
     statements: '96.76%',
@@ -419,6 +419,12 @@ module.exports = {
     functions: '63.33%',
     lines: '83.99%',
   },
+  typography: {
+    statements: '48.71%',
+    branches: '50%',
+    functions: '27.58%',
+    lines: '48.71%',
+  },
   upload: {
     statements: '100%',
     branches: '91.66%',

src/components.ts

@@ -66,7 +66,7 @@ export * from './tree';
 export * from './collapse';
 export * from './watermark';
 export * from './rate';
-
+export * from './typography';
 // 消息提醒
 
 export * from './alert';

src/config-provider/config-provider.en-US.md

@@ -89,6 +89,7 @@ timePicker | Object | - | TimePicker global configs。Typescript：`TimePickerCo
 transfer | Object | - | Transfer global configs。Typescript：`TransferConfig` | N
 tree | Object | - | Tree global configs。Typescript：`TreeConfig` | N
 treeSelect | Object | - | TreeSelect global configs。Typescript：`TreeSelectConfig` | N
+typography | Object | - | Typography global configs。Typescript：`TypographyConfig` | N
 upload | Object | - | Upload global configs。Typescript：`UploadConfig` | N
 
 ### InputConfig
@@ -390,3 +391,11 @@ skipButtonProps | Object | - | skip button. `{ content: 'Skip', theme: 'default'
 name | type | default | description | required
 -- | -- | -- | -- | --
 rateText | Array | - | Typescript：`string[]` | N
+
+### TypographyConfig
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+collapseText | String | - | collapse text | N
+copiedText | String | - | copied text | N
+expandText | String | - | expand text | N

src/config-provider/config-provider.md

@@ -90,6 +90,7 @@ timePicker | Object | - | 时间选择器全局配置。TS 类型：`TimePickerC
 transfer | Object | - | 穿梭框全局配置。TS 类型：`TransferConfig` | N
 tree | Object | - | 树组件全局配置。TS 类型：`TreeConfig` | N
 treeSelect | Object | - | 树选择器组件全局配置。TS 类型：`TreeSelectConfig` | N
+typography | Object | - | 排版组件全局配置。TS 类型：`TypographyConfig` | N
 upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N
 
 ### InputConfig
@@ -391,3 +392,11 @@ skipButtonProps | Object | - | 跳过按钮，示例：`{ content: '跳过', the
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 rateText | Array | - | 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']。TS 类型：`string[]` | N
+
+### TypographyConfig
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+collapseText | String | - | 语言配置，“收起”描述文本 | N
+copiedText | String | - | 语言配置，“复制成功”描述文本 | N
+expandText | String | - | 语言配置，“展开”描述文本 | N

src/config-provider/type.ts

@@ -62,7 +62,6 @@ export interface GlobalConfigProvider {
    * 空状态全局配置
    */
   empty?: EmptyConfig;
-  /**
   /**
    * 表单组件全局配置
    */
@@ -139,6 +138,10 @@ export interface GlobalConfigProvider {
    * 树选择器组件全局配置
    */
   treeSelect?: TreeSelectConfig;
+  /**
+   * 排版组件全局配置
+   */
+  typography?: TypographyConfig;
   /**
    * 上传组件全局配置
    */
@@ -935,6 +938,24 @@ export interface EmptyConfig {
   titleText?: { maintenance: string; success: string; fail: string; empty: string; networkError: string };
 }
 
+export interface TypographyConfig {
+  /**
+   * 语言配置，“收起”描述文本
+   * @default ''
+   */
+  collapseText?: string;
+  /**
+   * 语言配置，“复制成功”描述文本
+   * @default ''
+   */
+  copiedText?: string;
+  /**
+   * 语言配置，“展开”描述文本
+   * @default ''
+   */
+  expandText?: string;
+}
+
 export type AnimationType = 'ripple' | 'expand' | 'fade';
 
 export type IconConfig = GlobalIconConfig;

src/hooks/useConfig.ts

@@ -1,7 +1,7 @@
-import { computed } from 'vue';
+import { ComputedRef, computed } from 'vue';
 import { useConfig } from '../config-provider/useConfig';
 
-export function usePrefixClass(componentName?: string) {
+export function usePrefixClass(componentName?: string): ComputedRef {
   const { classPrefix } = useConfig('classPrefix');
   return computed(() => {
     return componentName ? `${classPrefix.value}-${componentName}` : classPrefix.value;

src/typography/__tests__/index.test.jsx

@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils';
+import { Text, Title, Paragraph } from '@/src/typography/index.ts';
+import { nextTick } from 'vue';
+
+describe('Typography', () => {
+  const longTextString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
+
+  const shortText = 'TDesign was founded with the principles of open-source collaboration from the beginning.';
+
+  const ellipsisText = new RegExp('...');
+
+  it('title 测试', () => {
+    const wrapper = mount(() => <Title>{shortText}</Title>);
+
+    expect(wrapper.find('h1.t-typography').element.innerHTML).toBe(shortText);
+  });
+
+  it('paragraph 测试', () => {
+    const wrapper = mount(() => <Paragraph>{shortText}</Paragraph>);
+
+    expect(wrapper.find('.t-typography').element.innerHTML).toBe(shortText);
+  });
+
+  it('text 测试', () => {
+    const wrapper = mount(() => <Text>{shortText}</Text>);
+
+    expect(wrapper.find('.t-typography').element.innerHTML).toMatch(new RegExp(shortText));
+  });
+
+  it('text code 测试', () => {
+    const wrapper = mount(() => <Text code>{shortText}</Text>);
+
+    expect(wrapper.find('code').element.innerHTML).toMatch(new RegExp(shortText));
+  });
+
+  window.innerWidth = 480;
+  it('ellipsis 测试', () => {
+    const wrapper = mount(() => <Paragraph ellipsis>{longTextString}</Paragraph>);
+
+    expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText);
+  });
+
+  it('text ellipsis 测试', () => {
+    const wrapper = mount(() => <Text ellipsis>{longTextString}</Text>);
+
+    expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText);
+  });
+
+  it('title ellipsis 测试', () => {
+    const wrapper = mount(() => <Title ellipsis>{longTextString}</Title>);
+
+    expect(wrapper.find('.t-typography').element.innerHTML).toMatch(ellipsisText);
+  });
+
+  it('ellipsis expand 测试', async () => {
+    const wrapper = await mount(() => (
+      <Paragraph
+        ellipsis={{
+          expandable: true,
+          collapsible: true,
+        }}
+      >
+        {longTextString}
+      </Paragraph>
+    ));
+
+    // 模拟鼠标进入
+    wrapper.find('.t-typography-ellipsis-symbol').trigger('click');
+    await nextTick();
+    expect(wrapper.find('.t-typography-ellipsis-symbol').element.innerHTML).toBe('收起');
+  });
+
+  it('text copyable 测试', () => {
+    const handleCopy = vi.fn();
+    const wrapper = mount(() => <Text copyable={{ onCopy: handleCopy }}>{shortText}</Text>);
+
+    wrapper.find('.t-button').trigger('click');
+
+    expect(handleCopy).toHaveBeenCalled();
+  });
+});

src/typography/_example/base.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <t-typography-title>What is TDesign</t-typography-title>
+    <t-typography-text mark>
+      TDesign is an enterprise-level design system accumulated by Tencent's various business teams.
+    </t-typography-text>
+    <t-typography-paragraph>
+      <t-typography-text strong>
+        TDesign features a unified design values, consistent design language, and visual style, helping users form
+        continuous and coherent perceptions of the experience.
+      </t-typography-text>
+      Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets,
+      elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates
+      easy extension on top of TDesign, enabling a better alignment with business requirements.
+    </t-typography-paragraph>
+    <t-typography-title>Comprehensive</t-typography-title>
+    <t-typography-paragraph>
+      TDesign Support
+      <t-typography-text code>Vue 2</t-typography-text>, <t-typography-text code>Vue 3</t-typography-text>,
+      <t-typography-text code>React</t-typography-text>
+      components for Desktop Application and
+      <t-typography-text code>Vue 3</t-typography-text>,
+      <t-typography-text code>Wechat MiniProgram</t-typography-text>
+      components for Mobile Application.
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <ul>
+        <li>Features</li>
+        <li>Comprehensive</li>
+        <ul>
+          <li>Consistency</li>
+          <li>Usability</li>
+        </ul>
+        <li>Join TDesign</li>
+      </ul>
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <ol>
+        <li>Features</li>
+        <li>Comprehensive</li>
+        <ol>
+          <li>Consistency</li>
+          <li>Usability</li>
+        </ol>
+        <li>Join TDesign</li>
+      </ol>
+    </t-typography-paragraph>
+  </div>
+</template>
+
+<script setup lang="tsx"></script>
+
+<style scoped>
+blockquote {
+  background-color: #fff;
+}
+</style>

src/typography/_example/copyable.vue

@@ -0,0 +1,29 @@
+<template>
+  <div style="width: 100%">
+    <t-typography-text copyable>This is a copyable text.</t-typography-text>
+    <br />
+    <t-typography-text
+      :copyable="{
+        tooltipProps: {
+          content: 'click to copy the text',
+        },
+      }"
+      >This is a copyable text.</t-typography-text
+    >
+    <br />
+    <t-typography-text :copyable="copyableConfig">This is a copyable text.</t-typography-text>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { SmileIcon } from 'tdesign-icons-vue-next';
+
+const copyableConfig = {
+  suffix: <SmileIcon />,
+  tooltipProps: {
+    content: 'click to copy the text',
+  },
+};
+</script>
+
+<style scoped></style>

src/typography/_example/ellipsis.vue

@@ -0,0 +1,33 @@
+<template>
+  <div style="width: 100%">
+    <t-typography-paragraph ellipsis>{{ content }}</t-typography-paragraph>
+    <t-typography-paragraph :ellipsis="ellipsisState1">{{ content }}</t-typography-paragraph>
+    <t-typography-paragraph :ellipsis="ellipsisState2" style="width: 200px">{{ content }}</t-typography-paragraph>
+    <t-typography-paragraph :ellipsis="ellipsisState3">{{ content }}</t-typography-paragraph>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { ChevronDownIcon } from 'tdesign-icons-vue-next';
+const content = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
+const ellipsisState1 = {
+  row: 2,
+  expandable: true,
+  collapsible: true,
+};
+
+const ellipsisState2 = {
+  row: 1,
+  tooltipProps: {
+    content: 'long long long text',
+    showArrow: false,
+  },
+};
+
+const ellipsisState3 = {
+  row: 1,
+  suffix: <ChevronDownIcon />,
+  expandable: true,
+  collapsible: false,
+};
+</script>

src/typography/_example/text.vue

@@ -0,0 +1,21 @@
+<template>
+  <t-space direction="vertical" class="vertical-demo" :size="12">
+    <t-typography-text theme="primary">TDesign (primary)</t-typography-text>
+    <t-typography-text theme="secondary">TDesign (secondary)</t-typography-text>
+    <t-typography-text disabled>TDesign (disabled)</t-typography-text>
+    <t-typography-text theme="success">TDesign (success)</t-typography-text>
+    <t-typography-text theme="warning">TDesign (warning)</t-typography-text>
+    <t-typography-text theme="error">TDesign (error)</t-typography-text>
+    <t-typography-text mark>TDesign (mark)</t-typography-text>
+    <t-typography-text code>TDesign (code)</t-typography-text>
+    <t-typography-text keyboard>TDesign (keyboard)</t-typography-text>
+    <t-typography-text underline>TDesign (underline)</t-typography-text>
+    <t-typography-text delete>TDesign (delete)</t-typography-text>
+    <t-typography-text strong>TDesign (strong)</t-typography-text>
+    <t-typography-text italic>TDesign (italic)</t-typography-text>
+  </t-space>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/typography/_example/title.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <t-typography-title level="h1">H1. TDesign</t-typography-title>
+    <t-typography-title level="h2">H2. TDesign</t-typography-title>
+    <t-typography-title level="h3">H3. TDesign</t-typography-title>
+    <t-typography-title level="h4">H4. TDesign</t-typography-title>
+    <t-typography-title level="h5">H5. TDesign</t-typography-title>
+    <t-typography-title level="h6">H6. TDesign</t-typography-title>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>