feat(comp:text): add text component (#1595)

packages/components/default.less

@@ -39,6 +39,7 @@
 @import './input-number/style/themes/default.less';
 @import './layout/style/themes/default.less';
 @import './list/style/themes/default.less';
+@import './loading-bar/style/themes/default.less';
 @import './menu/style/themes/default.less';
 @import './message/style/themes/default.less';
 @import './modal/style/themes/default.less';
@@ -61,6 +62,7 @@
 @import './table/style/themes/default.less';
 @import './tabs/style/themes/default.less';
 @import './tag/style/themes/default.less';
+@import './text/style/themes/default.less';
 @import './textarea/style/themes/default.less';
 @import './time-picker/style/themes/default.less';
 @import './timeline/style/themes/default.less';
@@ -71,4 +73,3 @@
 @import './typography/style/themes/default.less';
 @import './upload/style/themes/default.less';
 @import './watermark/style/themes/default.less';
-@import './loading-bar/style/themes/default.less';

packages/components/form/docs/Theme.zh.md

@@ -32,8 +32,8 @@
 | `@form-focus-color` | `@color-primary-d10` | - | - |
 | `@form-focus-box-shadow` | `0 0 0 2px fade(@form-focus-color, 20%)` | - | - |
 | `@form-disabled-color` | `@text-color-disabled` | - | - |
-| `@form-disabled-border-color` | `@color-graphite-l20` | - | - |
-| `@form-disabled-background-color` | `@background-color-disabled` | - | - |
+| `@form-disabled-border-color` | `var(--ix-background-color)` | - | - |
+| `@form-disabled-background-color` | `var(--ix-background-color-deep)` | - | - |
 | `@form-icon-color` | `@color-graphite-d20` | - | - |
 | `@form-icon-hover-color` | `@color-graphite-d20` | `@color-primary` | - |
 | `@form-item-valid-color` | `@color-success` | `@color-success-d10` | - |

packages/components/index.ts

@@ -66,6 +66,7 @@ import { IxSwitch } from '@idux/components/switch'
 import { IxTable, IxTableColumn } from '@idux/components/table'
 import { IxTab, IxTabs } from '@idux/components/tabs'
 import { IxTag, IxTagGroup } from '@idux/components/tag'
+import { IxText } from '@idux/components/text'
 import { IxTextarea } from '@idux/components/textarea'
 import { IxTimePicker, IxTimeRangePicker } from '@idux/components/time-picker'
 import { IxTimeline, IxTimelineItem } from '@idux/components/timeline'
@@ -169,6 +170,7 @@ const components = [
   IxTabs,
   IxTag,
   IxTagGroup,
+  IxText,
   IxTextarea,
   IxTimePicker,
   IxTimeRangePicker,
@@ -257,6 +259,7 @@ export * from '@idux/components/switch'
 export * from '@idux/components/table'
 export * from '@idux/components/tabs'
 export * from '@idux/components/tag'
+export * from '@idux/components/text'
 export * from '@idux/components/textarea'
 export * from '@idux/components/time-picker'
 export * from '@idux/components/timeline'

packages/components/seer.less

@@ -39,6 +39,7 @@
 @import './input-number/style/themes/seer.less';
 @import './layout/style/themes/seer.less';
 @import './list/style/themes/seer.less';
+@import './loading-bar/style/themes/seer.less';
 @import './menu/style/themes/seer.less';
 @import './message/style/themes/seer.less';
 @import './modal/style/themes/seer.less';
@@ -61,6 +62,7 @@
 @import './table/style/themes/seer.less';
 @import './tabs/style/themes/seer.less';
 @import './tag/style/themes/seer.less';
+@import './text/style/themes/seer.less';
 @import './textarea/style/themes/seer.less';
 @import './time-picker/style/themes/seer.less';
 @import './timeline/style/themes/seer.less';
@@ -71,4 +73,3 @@
 @import './typography/style/themes/seer.less';
 @import './upload/style/themes/seer.less';
 @import './watermark/style/themes/seer.less';
-@import './loading-bar/style/themes/seer.less';

packages/components/style/variable/prefix.less

@@ -6,6 +6,7 @@
 @icon-prefix: ~'@{idux-prefix}-icon';
 @tag-prefix: ~'@{idux-prefix}-tag';
 @tag-group-prefix: ~'@{idux-prefix}-tag-group';
+@text-prefix: ~'@{idux-prefix}-text';
 @typography-prefix: ~'@{idux-prefix}-typography';
 
 // Layout

packages/components/table/docs/Theme.zh.md

@@ -24,5 +24,5 @@
 | `@table-body-row-background-color-hover` | `var(--ix-background-color-light)` | - | - |
 | `@table-body-row-background-color-selected` | `var(--ix-color-primary-l50)` | `var(--ix-background-color)` | - |
 | `@table-expandable-icon-color` | `var(--ix-text-color-secondary)` | `@color-graphite-l10` | - |
-| `@table-expandable-background-color` | `var(--ix-background-color-light)` | - | - |
-| `@table-expandable-background-color-hover` | `var(--ix-background-color-medium)` | - | - |
+| `@table-expandable-background-color` | `@table-body-row-background-color-hover` | - | - |
+| `@table-expandable-background-color-hover` | `@table-body-row-background-color-hover` | - | - |

packages/components/tabs/docs/Theme.zh.md

@@ -21,7 +21,6 @@
 | `@tabs-nav-tab-text-color` | `@color-graphite-d40` | - | - |
 | `@tabs-nav-bar-color` | `@color-primary` | - | - |
 | `@tabs-nav-bar-height` | `2px` | - | - |
-| `@tabs-nav-pre-next-width` | `20px` | - | - |
 | `@tabs-border-radius` | `2px` | - | - |
 | `@tabs-pane-min-width` | `72px` | - | - |
 | `@tabs-pane-padding` | `16px` | - | - |

packages/components/text/__tests__/__snapshots__/text.spec.ts.snap

@@ -0,0 +1,61 @@
+// Vitest Snapshot v1
+
+exports[`Text > copyable work 1`] = `
+"<div class=\\"ix-text-wrapper\\"><span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</span><span class=\\"ix-text-copy-icon\\"><i class=\\"ix-icon ix-icon-copy\\" role=\\"img\\" aria-label=\\"copy\\"></i></span></div>"
+`;
+
+exports[`Text > copyable work 2`] = `
+"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</span>"
+`;
+
+exports[`Text > expandable work 1`] = `
+"<span class=\\"ix-text ix-text-line-clamp\\" style=\\"cursor: pointer;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</span>"
+`;
+
+exports[`Text > expandable work 2`] = `
+"<span class=\\"ix-text ix-text-line-clamp\\" style=\\"cursor: pointer;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</span>"
+`;
+
+exports[`Text > lineClamp work 1`] = `
+"<span class=\\"ix-text ix-text-line-clamp\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</span>"
+`;
+
+exports[`Text > lineClamp work 2`] = `
+"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</span>"
+`;
+
+exports[`Text > render work 1`] = `
+"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</span>"
+`;
+
+exports[`Text > tag work 1`] = `
+"<div class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+  全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</div>"
+`;
+
+exports[`Text > tag work 2`] = `
+"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</span>"
+`;
+
+exports[`Text > tooltip work 1`] = `
+"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</span>"
+`;
+
+exports[`Text > tooltip work 2`] = `
+"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</span>"
+`;
+
+exports[`Text > tooltip work 3`] = `
+"<span class=\\"ix-text\\" style=\\"text-overflow: ellipsis;\\">@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</span>"
+`;

packages/components/text/__tests__/text.spec.ts

@@ -0,0 +1,91 @@
+import { MountingOptions, mount } from '@vue/test-utils'
+
+import { renderWork } from '@tests'
+
+import Text from '../src/Text'
+import { TextProps } from '../src/types'
+
+const defaultSlot =
+  () => `@idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。`
+
+describe('Text', () => {
+  const TextMount = (options?: MountingOptions<Partial<TextProps>>) => {
+    const { slots } = options || {}
+    return mount(Text, { ...(options as MountingOptions<TextProps>), slots: { default: defaultSlot, ...slots } })
+  }
+
+  renderWork<TextProps>(Text, {
+    slots: { default: defaultSlot },
+  })
+
+  test('copyable work', async () => {
+    const wrapper = TextMount({ props: { copyable: true } })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('ix-text-wrapper')
+
+    document.execCommand = vi.fn().mockReturnValue(true)
+    await wrapper.find('.ix-text-copy-icon').trigger('click')
+
+    expect(document.execCommand).toHaveBeenCalledWith('copy')
+
+    await wrapper.setProps({ copyable: false })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.classes()).not.toContain('ix-text-wrapper')
+    expect(wrapper.classes()).toContain('ix-text')
+  })
+
+  // 需要 E2E 测试
+  test('expandable work', async () => {
+    const wrapper = TextMount({ props: { lineClamp: 2, expandable: true } })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.trigger('click')
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('lineClamp work', async () => {
+    const wrapper = TextMount({ props: { lineClamp: 2 } })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('ix-text-line-clamp')
+
+    await wrapper.setProps({ lineClamp: undefined })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.classes()).not.toContain('ix-text-line-clamp')
+  })
+
+  test('tag work', async () => {
+    const wrapper = TextMount({ props: { tag: 'div' } })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.element.tagName).toBe('DIV')
+
+    await wrapper.setProps({ tag: undefined })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.element.tagName).toBe('SPAN')
+  })
+
+  test('tooltip work', async () => {
+    const wrapper = TextMount({ props: { tooltip: 'native' } })
+
+    // 无效
+    await wrapper.trigger('mouseenter')
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({ tooltip: true })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({ tooltip: false })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

packages/components/text/demo/Basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh: 基本使用
+  en: Basic usage
+---
+
+## zh
+
+最简单的用法。
+
+## en
+
+The simplest usage.

packages/components/text/demo/Basic.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="width: 200px">
+    <IxText>@idux是一套企业级中后台UI组件库, 致力于提供高效愉悦的开发体验。</IxText>
+  </div>
+</template>

packages/components/text/demo/Copyable.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh: 可复制
+  en: Copyable
+---
+
+## zh
+
+提供了简单的文本复制能力，需要注意的是，内容只能是纯文本。
+
+## en
+
+The simplest usage.

packages/components/text/demo/Copyable.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="width: 200px">
+    <IxText copyable>@idux是一套企业级中后台UI组件库, 致力于提供高效愉悦的开发体验。</IxText>
+  </div>
+</template>

packages/components/text/demo/Expandable.md

@@ -0,0 +1,14 @@
+---
+order: 8
+title:
+  zh: 可展开的
+  en: Expandable
+---
+
+## zh
+
+搭配 `lineClamp` 使用时，可以通过点击展开全部文本。
+
+## en
+
+The simplest usage.

packages/components/text/demo/Expandable.vue

@@ -0,0 +1,8 @@
+<template>
+  <div style="width: 200px">
+    <IxText expandable>
+      @idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。
+    </IxText>
+  </div>
+</template>

packages/components/text/demo/LineClamp.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh: 多行省略
+  en: Basic usage
+---
+
+## zh
+
+提供基于 `-webkit-line-clamp` 的多行省略，兼容性参见 [caniuse](https://caniuse.com/?search=line-clamp)
+
+## en
+
+The simplest usage.

packages/components/text/demo/LineClamp.vue

@@ -0,0 +1,8 @@
+<template>
+  <div style="width: 200px">
+    <IxText lineClamp="2">
+      @idux 是一套企业级中后台 UI 组件库, 致力于提供高效愉悦的开发体验。 基于 Vue 3.x + TypeScript 开发,
+      全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。
+    </IxText>
+  </div>
+</template>

packages/components/text/demo/Tooltip.md

@@ -0,0 +1,15 @@
+---
+order: 10
+title:
+  zh: 浮层配置
+  en: Tooltip
+---
+
+## zh
+
+可以通过 `tooltip` 来配置悬浮提示，还可以通过 `title` 插槽来自定义提示内容。  
+注意：当 `tooltip='native'` 时，`title` 插槽仅支持纯文本内容。
+
+## en
+
+The simplest usage.

packages/components/text/demo/Tooltip.vue

@@ -0,0 +1,24 @@
+<template>
+  <IxRadioGroup v-model:value="tooltip" :dataSource="radios"></IxRadioGroup>
+  <div style="width: 200px; margin-top: 16px">
+    <IxText :tooltip="tooltip">
+      @idux是一套企业级中后台UI组件库, 致力于提供高效愉悦的开发体验。
+      <template #title>
+        @idux是一套企业级中后台UI组件库, 致力于提供高效愉悦的开发体验。
+        <br />
+        基于 Vue 3.x + TypeScript 开发, 全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。
+      </template>
+    </IxText>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const tooltip = ref(true)
+
+const radios = [
+  { key: false, label: '关闭' },
+  { key: true, label: '开启' },
+  { key: 'native', label: '原生' },
+]
+</script>