Feat/webc

packages/frontend/_site/index.html

@@ -15,7 +15,7 @@
         }
       </style>
     <![endif]-->
-    <script type="module" crossorigin src="/assets/index-CC-i991y.js"></script>
+    <script type="module" crossorigin src="/assets/index-CyiDINjt.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CKv7txIk.css">
   </head>
 

packages/frontend/src/pages/api/import.vue

@@ -481,7 +481,7 @@ defineExpose({ formData });
   .t-form-content.platform,
   .t-form-content.api-type {
     label.t-checkbox {
-      width: 150px;
+      width: 170px;
       display: inline-block;
       margin-top: 5px;
     }

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

@@ -0,0 +1,30 @@
+:: 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 | String / TNode | - | button's children elements。Typescript: `string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/packages/components/common.ts) | N
+content | String / TNode | - | button's children elements。Typescript: `string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/packages/components/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 | TNode | - | use it to set left icon in button。Typescript: `TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/packages/components/common.ts) | N
+ignoreAttributes | Array | [] | Typescript: `Array<string>` | N
+loading | Boolean | false | set button to be loading state | 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/packages/components/common.ts) | N
+suffix | TNode | - | Typescript: `TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/packages/components/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/packages/components/button/button.md

@@ -0,0 +1,30 @@
+:: BASE_DOC ::
+
+## API
+
+### Button Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式 | N
+innerClass | String | - | shadowDOM 类名 | N
+innerStyle | Object | - | shadowDOM 样式 | N
+block | Boolean | false | 是否为块级元素 | N
+children | String / TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/packages/components/common.ts) | N
+content | String / TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/packages/components/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 | TNode | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/packages/components/common.ts) | N
+ignoreAttributes | Array | [] | 在host标签上忽略的属性，例如`['style']`就不会生成style属性。TS 类型：`Array<string>` | N
+loading | Boolean | false | 是否显示为加载状态 | 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/packages/components/common.ts) | N
+suffix | TNode | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/packages/components/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/packages/components/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/packages/components/button/type.ts

@@ -0,0 +1,91 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TNode, TElement, SizeEnum } from '@tdesign/web-components-shared/common';
+
+export interface TdButtonProps {
+  /**
+   * 是否为块级元素
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * 按钮内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 按钮内容
+   */
+  content?: TNode;
+  /**
+   * 禁用状态。优先级：Button.disabled > Form.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件
+   */
+  form?: string;
+  /**
+   * 是否为幽灵按钮（镂空按钮）
+   * @default false
+   */
+  ghost?: boolean;
+  /**
+   * 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染
+   * @default ''
+   */
+  href?: string;
+  /**
+   * 按钮内部图标，可完全自定义
+   */
+  icon?: TElement;
+  /**
+   * 在host标签上忽略的属性，例如`['style']`就不会生成style属性
+   * @default []
+   */
+  ignoreAttributes?: Array<string>;
+  /**
+   * 是否显示为加载状态
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形
+   * @default rectangle
+   */
+  shape?: 'rectangle' | 'square' | 'round' | 'circle';
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 右侧内容，可用于定义右侧图标
+   */
+  suffix?: TElement;
+  /**
+   * 渲染按钮的 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;
+}