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'),
+      },
     ],
   },
   {

src/components.ts

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

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,8 @@
+import { mount } from '@vue/test-utils';
+import TTypography from '@/src/typography/index.ts';
+describe('Typography', () => {
+  it('', async () => {
+    const wrapper = mount(() => <TTypography />);
+    expect(wrapper.findComponent(TTypography).exists()).toBeTruthy();
+  });
+});

src/typography/_example/base.vue

@@ -0,0 +1,63 @@
+<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>
+      TDesign features a unified design values, consistent design language, and visual style, helping users form
+      continuous and coherent perceptions of the experience. 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>
+      <blockquote>
+        TDesign distills Tencent's years of design experience into professional design guideline, providing universal
+        design solutions that assist product managers, designers, developers, and other roles in efficiently completing
+        the design and development of enterprise-level products, while maintaining consistent design language and style
+        to meet user experience requirements.
+      </blockquote>
+    </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,39 @@
+<template>
+  <div>
+    <t-typography-paragraph>
+      <!-- <t-typography-text > This is an editable copy.</t-typography-text> -->
+    </t-typography-paragraph>
+
+    <t-typography-paragraph>
+      <t-typography-text copyable>This is a copyable text.</t-typography-text>
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <!-- <t-typography-text>This is editable text for custom icons.</t-typography-text> -->
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <!-- <t-typography-text>This is an editable copy.</t-typography-text> -->
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <t-typography-text :copyable="customIconState1">This is a copyable text.</t-typography-text>
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <!-- <t-typography-text>This is editable text for custom icons.</t-typography-text> -->
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <!-- <t-typography-text>This is an editable copy.</t-typography-text> -->
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <!-- <t-typography-text>This is an editable copy.</t-typography-text> -->
+    </t-typography-paragraph>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { CopyIcon } from 'tdesign-icons-vue-next';
+
+const customIconState1 = {
+  suffix: <CopyIcon style={{ color: '#000' }} />,
+};
+</script>
+
+<style scoped></style>

src/typography/_example/ellipsis.vue

@@ -0,0 +1,41 @@
+<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>
+    <t-typography-paragraph :ellipsis="ellipsisState4">{{ 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,
+  suffix: 'more',
+};
+
+const ellipsisState2 = {
+  row: 1,
+  tooltipProps: {
+    content: 'long long long text',
+    showArrow: false,
+  },
+};
+
+const ellipsisState3 = {
+  row: 1,
+  suffix: <ChevronDownIcon />,
+  expandable: true,
+  collapsible: true,
+};
+
+const ellipsisState4 = {
+  row: 1,
+  suffix: <span style="color: black">roles.</span>,
+};
+</script>
+
+<style scoped></style>

src/typography/_example/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <t-typography-title>这是大标题</t-typography-title>
+  <t-typography-text code mark="red" delete underline strong italic>abc</t-typography-text>
+  <t-typography-text keyboard>keyboard</t-typography-text>
+  <t-typography-text disabled>disabled</t-typography-text>
+  <t-typography-text theme="success">success</t-typography-text>
+  <t-typography-paragraph theme="success">success</t-typography-paragraph>
+  <t-typography-text :ellipsis="ellipsis">
+    ellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsisellipsis
+  </t-typography-text>
+</template>
+
+<script setup>
+const ellipsis = {
+  rows: 2,
+  color: 'red',
+};
+</script>
+
+<style lang="scss" scoped></style>

src/typography/_example/text.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <t-typography-paragraph>
+      <t-typography-text>TDesign (primary)</t-typography-text>
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <t-typography-text theme="secondary">TDesign (secondary)</t-typography-text>
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <t-typography-text disabled>TDesign (disabled)</t-typography-text>
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <t-typography-text theme="success">TDesign (success)</t-typography-text>
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <t-typography-text theme="warning">TDesign (warning)</t-typography-text>
+    </t-typography-paragraph>
+    <t-typography-paragraph>
+      <t-typography-text theme="error">TDesign (error)</t-typography-text>
+    </t-typography-paragraph>
+    <t-typography-paragraph><t-typography-text mark>TDesign (mark)</t-typography-text></t-typography-paragraph>
+    <t-typography-paragraph><t-typography-text code>TDesign (code)</t-typography-text></t-typography-paragraph>
+    <t-typography-paragraph><t-typography-text keyboard>TDesign (keyboard)</t-typography-text></t-typography-paragraph>
+    <t-typography-paragraph>
+      <t-typography-text underline>TDesign (underline)</t-typography-text>
+    </t-typography-paragraph>
+    <t-typography-paragraph><t-typography-text delete>TDesign (delete)</t-typography-text></t-typography-paragraph>
+    <t-typography-paragraph><t-typography-text strong>TDesign (strong)</t-typography-text></t-typography-paragraph>
+    <t-typography-paragraph><t-typography-text italic>TDesign (italic)</t-typography-text></t-typography-paragraph>
+    <!-- <t-typography-paragraph><t-typography-text>TDesign (link)</t-typography-text></t-typography-paragraph> -->
+  </div>
+</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>

src/typography/ellipsis.tsx

@@ -0,0 +1,68 @@
+import { defineComponent, ref, computed } from 'vue';
+import Tooltip from '../tooltip';
+
+export default defineComponent({
+  name: 'EllipsisAPI',
+  props: {
+    rows: {
+      type: Number,
+      default: 1,
+    },
+    expandable: {
+      type: Boolean,
+      default: false,
+    },
+    tooltipProps: {
+      type: Object,
+      default: () => ({}),
+    },
+    onExpand: {
+      type: Function,
+      default: () => {},
+    },
+    suffix: {
+      type: Function,
+      default: (expanded: boolean) => (expanded ? '收起' : '展开'),
+    },
+    collapsible: {
+      type: Boolean,
+      default: true,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { slots }) {
+    const isExpanded = ref(false);
+
+    const handleExpand = () => {
+      isExpanded.value = !isExpanded.value;
+      props.onExpand(isExpanded.value);
+    };
+    const styles = computed((): any => {
+      const def = {
+        overflow: props.hidden ? 'hidden' : 'visible',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        display: 'inline-block',
+        WebkitLineClamp: props.rows,
+        WebkitBoxOrient: 'vertical',
+        width: '200px',
+      };
+      return def;
+    });
+    return () => (
+      <>
+        {props.hidden && <div style={styles.value}>{slots.default?.()}</div>}
+        {!props.hidden && slots.default?.()}
+        {props.expandable && (
+          <Tooltip {...props.tooltipProps}>
+            <span onClick={handleExpand}>{props.suffix(isExpanded.value)}</span>
+          </Tooltip>
+        )}
+        {isExpanded.value && props.collapsible && <div>{slots.expanded?.()}</div>}
+      </>
+    );
+  },
+});

src/typography/index.ts

@@ -0,0 +1,12 @@
+import _Typography from './typography';
+import _Text from './text';
+import _Title from './title';
+import _Paragraph from './paragraph';
+import withInstall from '../utils/withInstall';
+export * from './type';
+import './style';
+export const Typography = withInstall(_Typography);
+export const Text = withInstall(_Text);
+export const Title = withInstall(_Title);
+export const Paragraph = withInstall(_Paragraph);
+export default Typography;

src/typography/paragraph-props.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdParagraphProps } from '../typography/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 段落内容 */
+  content: {
+    type: [String, Function] as PropType<TdParagraphProps['content']>,
+  },
+  /** 段落内容 */
+  default: {
+    type: [String, Function] as PropType<TdParagraphProps['default']>,
+  },
+  /** 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式 */
+  ellipsis: {
+    type: [Boolean, Object] as PropType<TdParagraphProps['ellipsis']>,
+    default: false as TdParagraphProps['ellipsis'],
+  },
+};