feat: 支持 WebComponents 框架

packages/products/tdesign-web-components/src/button/button.en-US.md

@@ -0,0 +1,31 @@
+:: BASE_DOC ::
+
+## API
+
+### Button Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets) | N
+innerClass | String | - | shadowDOM className of component | N
+innerStyle | Object | - | shadowDOM CSS(Cascading Style Sheets) | N
+block | Boolean | false | make button to be a block-level element | N
+children | TNode | - | button's children elements。Typescript: `string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+content | TNode | - | button's children elements。Typescript: `string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+disabled | Boolean | undefined | disable the button, make it can not be clicked | N
+form | String | undefined |  native `form` attribute，which supports triggering events for a form with a specified id through the use of the form attribute | N
+ghost | Boolean | false | make background-color to be transparent | N
+href | String | - | \- | N
+icon | TElement | - | use it to set left icon in button。Typescript: `TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+ignoreAttributes | Array | [] | Typescript: `Array<string>` | N
+loading | Boolean | false | set button to be loading state | N
+loadingProps | Object | - | Typescript: `LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/button/type.ts) | N
+shape | String | rectangle | button shape。options: rectangle/square/round/circle | N
+size | String | medium | a button has four size。options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+suffix | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+tag | String | - | HTML Tag Element。options: button/a/div | N
+theme | String | - | button theme。options: default/primary/danger/warning/success | N
+type | String | button | type of button element in html。options: submit/reset/button | N
+variant | String | base | variant of button。options: base/outline/dashed/text | N
+onClick | Function |  | Typescript: `(e: MouseEvent) => void`<br/>trigger on click | N

packages/products/tdesign-web-components/src/button/button.md

@@ -0,0 +1,31 @@
+:: BASE_DOC ::
+
+## API
+
+### Button Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式 | N
+innerClass | String | - | shadowDOM 类名 | N
+innerStyle | Object | - | shadowDOM 样式 | N
+block | Boolean | false | 是否为块级元素 | N
+children | TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+content | TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+disabled | Boolean | undefined | 禁用状态。优先级：Button.disabled > Form.disabled | N
+form | String | undefined | 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
+icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+ignoreAttributes | Array | [] | 在host标签上忽略的属性。TS 类型：`Array<string>` | N
+loading | Boolean | false | 是否显示为加载状态 | N
+loadingProps | Object | - | 透传 Loading 组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/button/type.ts) | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+tag | String | - | 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题。可选项：button/a/div | N
+theme | String | - | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+type | String | button | 按钮类型。可选项：submit/reset/button | N
+variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N

packages/products/tdesign-web-components/src/button/defaultProps.ts

@@ -0,0 +1,18 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdButtonProps } from './type';
+
+export const buttonDefaultProps: TdButtonProps = {
+  block: false,
+  disabled: undefined,
+  form: undefined,
+  ghost: false,
+  ignoreAttributes: [],
+  loading: false,
+  shape: 'rectangle',
+  size: 'medium',
+  type: 'button',
+  variant: 'base',
+};

packages/products/tdesign-web-components/src/button/type.ts

@@ -0,0 +1,96 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { LoadingProps } from '../loading';
+import type { TNode, SizeEnum } from '../common';
+
+export interface TdButtonProps {
+  /**
+   * 是否为块级元素
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * 按钮内容，同 content
+   */
+  children?: string | TNode;
+  /**
+   * 按钮内容
+   */
+  content?: string | TNode;
+  /**
+   * 禁用状态。优先级：Button.disabled > Form.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件
+   */
+  form?: string;
+  /**
+   * 是否为幽灵按钮（镂空按钮）
+   * @default false
+   */
+  ghost?: boolean;
+  /**
+   * 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染
+   * @default ''
+   */
+  href?: string;
+  /**
+   * 按钮内部图标，可完全自定义
+   */
+  icon?: TNode;
+  /**
+   * 在host标签上忽略的属性
+   * @default []
+   */
+  ignoreAttributes?: Array<string>;
+  /**
+   * 是否显示为加载状态
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 透传 Loading 组件全部属性
+   */
+  loadingProps?: LoadingProps;
+  /**
+   * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形
+   * @default rectangle
+   */
+  shape?: 'rectangle' | 'square' | 'round' | 'circle';
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 右侧内容，可用于定义右侧图标
+   */
+  suffix?: TNode;
+  /**
+   * 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题
+   */
+  tag?: 'button' | 'a' | 'div';
+  /**
+   * 组件风格，依次为默认色、品牌色、危险色、警告色、成功色
+   */
+  theme?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+  /**
+   * 按钮类型
+   * @default button
+   */
+  type?: 'submit' | 'reset' | 'button';
+  /**
+   * 按钮形式，基础、线框、虚线、文字
+   * @default base
+   */
+  variant?: 'base' | 'outline' | 'dashed' | 'text';
+  /**
+   * 点击时触发
+   */
+  onClick?: (e: MouseEvent) => void;
+}

packages/products/tdesign-web-components/src/common.ts

@@ -0,0 +1,142 @@
+import { Component, VNode, WeElement } from 'omi';
+
+export type TElement<T = undefined> = T extends undefined ? WeElement : (props: T) => WeElement;
+export type TNode<T = any> = VNode<T> | ((props: T) => VNode) | object | string | number | boolean | null;
+
+export type AttachNodeReturnValue = HTMLElement | Element | Document;
+export type AttachNode = CSSSelector | ((triggerNode?: HTMLElement) => AttachNodeReturnValue);
+
+// 与滚动相关的容器类型，因为 document 上没有 scroll 相关属性, 因此排除 document
+export type ScrollContainerElement = Window | HTMLElement;
+export type ScrollContainer = (() => ScrollContainerElement) | CSSSelector;
+
+// 组件 TS 类型，暂定 any，可能调整为 () => JSX.Element
+export type ComponentType = any;
+
+export type Styles = Record<string, string | number>;
+
+export interface StyledProps {
+  className?: string;
+  style?: Styles;
+  // shadowDom内部根节点的class
+  innerClass?: string;
+  // shadowDom内部根节点的style
+  innerStyle?: Styles;
+}
+
+/**
+ * 通用全局类型
+ * */
+export type PlainObject = { [key: string]: any };
+
+export type OptionData = {
+  label?: string;
+  value?: string | number;
+} & PlainObject;
+
+export type TreeOptionData<T = string | number> = {
+  children?: Array<TreeOptionData<T>> | boolean;
+  /** option label content */
+  label?: string | TNode;
+  /** option search text */
+  text?: string;
+  /** option value */
+  value?: T;
+  /** option node content */
+  content?: string | TNode;
+} & PlainObject;
+
+export type ExtendedElement = (HTMLElement | SVGAElement | HTMLInputElement) & {
+  receiveProps: Function;
+  update: Function;
+  queuedUpdate: Function;
+  store?: unknown;
+  className?: string;
+  props: Record<string, unknown>;
+  splitText?: Function;
+  prevProps?: Record<string, unknown> & {
+    ref?:
+      | {
+          current?: unknown;
+        }
+      | Function;
+  };
+  attributes: NamedNodeMap;
+  _component?: Component;
+  _listeners: Record<string, Function>;
+} & Record<string, unknown>;
+/**
+ * 通用全局类型
+ * */
+export type SizeEnum = 'small' | 'medium' | 'large';
+
+export type ShapeEnum = 'circle' | 'round';
+
+export type HorizontalAlignEnum = 'left' | 'center' | 'right';
+
+export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
+
+export type LayoutEnum = 'vertical' | 'horizontal';
+
+export type ClassName = { [className: string]: any } | ClassName[] | string;
+
+export type CSSSelector = string;
+
+export interface KeysType {
+  value?: string;
+  label?: string;
+  disabled?: string;
+}
+
+export interface TreeKeysType extends KeysType {
+  children?: string;
+}
+
+export interface HTMLElementAttributes {
+  [attribute: string]: string;
+}
+
+export interface TScroll {
+  /**
+   * 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白
+   * @default 20
+   */
+  bufferSize?: number;
+  /**
+   * 表示每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值
+   * @default false
+   */
+  isFixedRowHeight?: boolean;
+  /**
+   * 行高，不会给元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为每行平均高度，从而使得滚动过程更加平滑
+   */
+  rowHeight?: number;
+  /**
+   * 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动
+   * @default 100
+   */
+  threshold?: number;
+  /**
+   * 滚动加载类型，有两种：懒加载和虚拟滚动。<br />值为 `lazy` ，表示滚动时会进行懒加载，非可视区域内的内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；<br />值为`virtual`时，表示会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，仅渲染该可视区域内的内容，当需要展示的数据量较大时，建议开启该特性
+   */
+  type: 'lazy' | 'virtual';
+}
+
+/**
+ * @deprecated use TScroll instead
+ */
+export type InfinityScroll = TScroll;
+
+export interface ScrollToElementParams {
+  /** 跳转元素下标 */
+  index?: number;
+  /** 跳转元素距离顶部的距离 */
+  top?: number;
+  /** 单个元素高度非固定场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒 */
+  time?: number;
+  behavior?: 'auto' | 'smooth';
+}
+
+export interface ComponentScrollToElementParams extends ScrollToElementParams {
+  key?: string | number;
+}

packages/products/tdesign-web-components/src/link/defaultProps.ts

@@ -0,0 +1,12 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdLinkProps } from './type';
+
+export const linkDefaultProps: TdLinkProps = {
+  disabled: undefined,
+  hover: 'underline',
+  size: 'medium',
+  theme: 'default',
+};

packages/products/tdesign-web-components/src/link/link.en-US.md

@@ -0,0 +1,25 @@
+:: BASE_DOC ::
+
+## API
+
+### Link Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets) | N
+innerClass | String | - | shadowDOM className of component | N
+innerStyle | Object | - | shadowDOM CSS(Cascading Style Sheets) | N
+children | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+content | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+disabled | Boolean | undefined | make link to be disabled | N
+download | String / Boolean | - | Causes the browser to treat the linked URL as a download | N
+hover | String | underline | hover link style。options: color/underline | N
+href | String | - | \- | N
+prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+suffixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+target | String | - | target is an attribute of `<a>` | N
+theme | String | default | options: default/primary/danger/warning/success | N
+underline | Boolean | - | \- | N
+onClick | Function |  | Typescript: `(e: MouseEvent) => void`<br/>click event, it won't trigger when it's disabled | N

packages/products/tdesign-web-components/src/link/link.md

@@ -0,0 +1,25 @@
+:: BASE_DOC ::
+
+## API
+
+### Link Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式 | N
+innerClass | String | - | shadowDOM 类名 | N
+innerStyle | Object | - | shadowDOM 样式 | N
+children | TNode | - | 链接内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+content | TNode | - | 链接内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+disabled | Boolean | undefined | 禁用链接。优先级：Link.disabled > Form.disabled | N
+download | String / Boolean | - | 使得浏览器将链接的 URL 视为可下载资源 | N
+hover | String | underline | 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法。可选项：color/underline | N
+href | String | - | 跳转链接 | N
+prefixIcon | TElement | - | 前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+size | String | medium | 尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+suffixIcon | TElement | - | 后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/common.ts) | N
+target | String | - | 跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同 | N
+theme | String | default | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+underline | Boolean | - | 是否显示链接下划线 | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击事件，禁用状态不会触发点击事件 | N