@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/footer/README.md

@@ -0,0 +1,61 @@
+---
+title: Footer 页脚
+description: 用于基础列表展示，可附带文字、品牌 logo、操作，常用商详、个人中心、设置等页面。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TFooter from '@tdesign/uniapp/footer/footer.vue';
+```
+
+### 类型
+
+基础页脚
+
+{{ base }}
+
+基础加链接页脚
+
+{{ link }}
+
+品牌页脚
+
+{{ logo }}
+
+## API
+
+### Footer Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+copyright | String | '' | 已废弃。版权信息，type 为`text`生效 | N
+links | Array | [] | 链接列表。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式。TS 类型：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/footer/type.ts) | N
+logo | Object | - | 图标配置。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接。TS 类型：`FooterLogo` `interface FooterLogo { icon: string; title?: string; url?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/footer/type.ts) | N
+text | String | '' | 版权信息 | N
+text-link-list | Array | [] | 已废弃。链接列表，type 为`text`生效。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式。TS 类型：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/footer/type.ts) | N
+theme | String | 'text' | 已废弃。页脚展示类型。可选项：text/logo | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-footer-link-color | @brand-color | -
+--td-footer-link-dividing-line-color | @text-color-placeholder | -
+--td-footer-link-dividing-line-padding | @spacer-1 | -
+--td-footer-link-font | @font-body-medium | -
+--td-footer-logo-icon-height | 48rpx | -
+--td-footer-logo-icon-margin-right | @spacer | -
+--td-footer-logo-icon-width | 48rpx | -
+--td-footer-logo-title-font | @font-title-medium | -
+--td-footer-logo-title-url-width | 256rpx | -
+--td-footer-text-color | @text-color-placeholder | -
+--td-footer-text-font | @font-body-small | -
+--td-footer-text-margin-top | 8rpx | -

package/dist/footer/footer.css

@@ -0,0 +1,47 @@
+.t-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+.t-footer__text {
+  font: var(--td-footer-text-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  color: var(--td-footer-text-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-footer__link-list + .t-footer__text:not(:empty) {
+  margin-top: var(--td-footer-text-margin-top, 8rpx);
+}
+.t-footer__link-list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.t-footer__link-item {
+  color: var(--td-footer-link-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  font: var(--td-footer-link-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  text-decoration: underline;
+}
+.t-footer__link-line {
+  font-size: 24rpx;
+  color: var(--td-footer-link-dividing-line-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  display: inline-block;
+  padding: 0 var(--td-footer-link-dividing-line-padding, var(--td-spacer-1, 24rpx));
+}
+.t-footer__logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.t-footer__icon {
+  width: var(--td-footer-logo-icon-width, 48rpx);
+  height: var(--td-footer-logo-icon-height, 48rpx);
+  margin-right: var(--td-footer-logo-icon-margin-right, var(--td-spacer, 16rpx));
+}
+.t-footer__title {
+  color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  font: var(--td-footer-logo-title-font, var(--td-font-title-medium, 600 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  font-style: italic;
+}
+.t-footer__title-url {
+  width: var(--td-footer-logo-title-url-width, 256rpx);
+}

package/dist/footer/footer.vue

@@ -0,0 +1,117 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="[
+      classPrefix,
+      tClass
+    ]"
+  >
+    <block v-if="logo && Object.keys(logo).length">
+      <view :class="classPrefix + '__logo'">
+        <t-image
+          v-if="logo.icon"
+          :t-class="classPrefix + '__icon'"
+          :custom-style="iconCustomStyle"
+          :src="logo.icon"
+        />
+        <view
+          v-if="logo.title"
+          :class="classPrefix + '__title'"
+        >
+          {{ logo.title }}
+        </view>
+        <t-image
+          v-else-if="logo.url"
+          :t-class="classPrefix + '__title-url'"
+          :custom-style="titleUrlCustomStyle"
+          :src="logo.url"
+          mode="widthFix"
+        />
+      </view>
+    </block>
+    <block v-else>
+      <view
+        v-if="links.length > 0"
+        :class="classPrefix + '__link-list'"
+      >
+        <block
+          v-for="(item, index) in links"
+          :key="index"
+        >
+          <navigator
+            :url="item.url"
+            :open-type="item.openType"
+            hover-class="none"
+            :class="classPrefix + '__link-item'"
+          >
+            {{ item.name }}
+          </navigator>
+
+          <view
+            v-if="index !== links.length - 1"
+            :aria-hidden="true"
+            :class="classPrefix + '__link-line'"
+          >
+            |
+          </view>
+        </block>
+      </view>
+      <view :class="classPrefix + '__text'">
+        {{ text }}
+      </view>
+    </block>
+  </view>
+</template>
+<script>
+import TImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-footer`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  components: {
+    TImage,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      tools,
+    };
+  },
+  computed: {
+    iconCustomStyle() {
+      return tools._style({
+        width: 'var(--td-footer-logo-icon-width, 24px)',
+        height: 'var(--td-footer-logo-icon-height, 24px)',
+        marginRight: 'var(--td-footer-logo-icon-margin-right, var(--td-spacer, 8px))',
+      });
+    },
+    titleUrlCustomStyle() {
+      return tools._style({
+        width: 'var(--td-footer-logo-title-url-width, 128px)',
+      });
+    },
+  },
+  methods: {
+  },
+});
+</script>
+<style scoped>
+@import './footer.css';
+</style>

package/dist/footer/props.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdFooterProps } from './type';
+export default {
+  /** 链接列表。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式 */
+  links: {
+    type: Array,
+    default: (): TdFooterProps['links'] => [],
+  },
+  /** 图标配置。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接 */
+  logo: {
+    type: Object,
+  },
+  /** 版权信息 */
+  text: {
+    type: String,
+    default: '',
+  },
+};

package/dist/footer/type.ts

@@ -0,0 +1,34 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdFooterProps {
+  /**
+   * 链接列表。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式
+   * @default []
+   */
+  links?: Array<LinkObj>;
+  /**
+   * 图标配置。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接
+   */
+  logo?: FooterLogo;
+  /**
+   * 版权信息
+   * @default ''
+   */
+  text?: string;
+}
+
+export interface LinkObj {
+  name: string;
+  url?: string;
+  openType?: 'navigate' | 'redirect' | 'relaunch' | 'switchTab' | 'navigateBack';
+}
+
+export interface FooterLogo {
+  icon: string;
+  title?: string;
+  url?: string;
+}

package/dist/form/README.en-US.md

@@ -0,0 +1,137 @@
+---
+title: Form
+description: Form consists of input, radio, select, checkbox and so on. With form, you can collect, verify and submit data.
+spline: base
+isComponent: true
+toc: false
+---
+
+### 01 Component Type
+
+Base form
+
+{{ horizontal }}
+
+{{ vertical }}
+
+## API
+
+### Form Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+colon | Boolean | false | \- | N
+content-align | String | left | options: left/right | N
+data | Object | {} | Typescript: `FormData` | N
+disabled | Boolean | undefined | \- | N
+error-message | Object | - | Typescript: `FormErrorMessage` | N
+label-align | String | right | options: left/right/top | N
+label-width | String / Number | '81px' | \- | N
+readonly | Boolean | undefined | \- | N
+required-mark | Boolean | undefined | \- | N
+required-mark-position | String | - | Display position of required symbols。options: left/right | N
+reset-type | String | empty | options: empty/initial | N
+rules | Object | - | Typescript: `FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
+scroll-to-first-error | String | - | options: ''/smooth/auto | N
+show-error-message | Boolean | true | \- | N
+submit-with-warning-message | Boolean | false | \- | N
+
+### Form Events
+
+name | params | description
+-- | -- | --
+reset | `(context: { e?: FormResetEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts)
+submit | `(context: SubmitContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
+validate | `(result: ValidateResultContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/>
+
+### FormInstanceFunctions 组件实例方法
+
+name | params | return | description
+-- | -- | -- | --
+clear-validate | `(fields?: Array<keyof FormData>)` | \- | required
+reset | `(params?: FormResetParams<FormData>)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`interface FormResetParams<FormData> { type?: 'initial' \| 'empty'; fields?: Array<keyof FormData> }`<br/>
+set-validate-message | `(message: FormValidateMessage<FormData>)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/>
+submit | `(params?: { showErrorMessage?: boolean })` | \- | required
+validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | required。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
+
+
+### FormItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+arrow | Boolean | false | \- | N
+content-align | String | - | options: left/right | N
+for | String | - | \- | N
+help | String | - | \- | N
+label | String | '' | \- | N
+label-align | String | - | options: left/right/top | N
+label-width | String / Number | - | \- | N
+name | String | - | \- | N
+required-mark | Boolean | undefined | \- | N
+rules | Array | - | Typescript: `Array<FormRule>` | N
+show-error-message | Boolean | undefined | \- | N
+
+### FormItem Slots
+
+name | Description
+-- | --
+help | \-
+label | \-
+
+### FormRule
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+boolean | Boolean | - | \- | N
+date | Boolean / Object | - | Typescript: `boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
+email | Boolean / Object | - | Typescript: `boolean \| IsEmailOptions` `import type { IsEmailOptions } from '../common/common'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
+enum | Array | - | Typescript: `Array<string>` | N
+idcard | Boolean | - | \- | N
+len | Number / Boolean | - | \- | N
+max | Number / Boolean | - | \- | N
+message | String | - | \- | N
+min | Number / Boolean | - | \- | N
+number | Boolean | - | \- | N
+pattern | String / Object | - | Typescript: `RegExp \| string` | N
+required | Boolean | - | \- | N
+telnumber | Boolean | - | \- | N
+trigger | String | change | Typescript: `ValidateTriggerType` | N
+type | String | error | options: error/warning | N
+url | Boolean / Object | - | Typescript: `boolean \| IsURLOptions` `import type { IsURLOptions } from '../common/common'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
+validator | Function | - | Typescript: `CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
+whitespace | Boolean | - | \- | N
+
+### FormErrorMessage
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+boolean | String | - | \- | N
+date | String | - | \- | N
+enum | String | - | \- | N
+idcard | String | - | \- | N
+len | String | - | \- | N
+max | String | - | \- | N
+min | String | - | \- | N
+number | String | - | \- | N
+pattern | String | - | \- | N
+required | String | - | \- | N
+telnumber | String | - | \- | N
+url | String | - | \- | N
+validator | String | - | \- | N
+whitespace | String | - | \- | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-form-bg-color | @bg-color-container | -
+--td-form-border-radius | 0 | -
+--td-form-padding | 0 | -
+--td-form-readonly-bg-color | @bg-color-secondarycontainer | -
+--td-form-item-horizontal-padding | 32rpx | -
+--td-form-item-justify-content | space-between | -
+--td-form-item-label-width | 160rpx | -
+--td-form-item-vertical-padding | 32rpx | -

package/dist/form/README.md

@@ -0,0 +1,146 @@
+---
+title: Form 表单
+description: 用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。
+spline: base
+isComponent: true
+toc: false
+---
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TForm from '@tdesign/uniapp/form/form.vue';
+import TFormItem from '@tdesign/uniapp/form-item/form-item.vue';
+```
+
+### 01 组件类型
+
+基础表单
+
+{{ horizontal }}
+
+{{ vertical }}
+
+## API
+
+### Form Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+colon | Boolean | false | 是否在表单标签字段右侧显示冒号 | N
+content-align | String | left | 表单内容对齐方式：左对齐、右对齐。可选项：left/right | N
+data | Object | {} | 表单数据。TS 类型：`FormData` | N
+disabled | Boolean | undefined | 是否禁用整个表单 | N
+error-message | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage` | N
+label-align | String | right | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
+label-width | String / Number | '81px' | 可以整体设置label标签宽度，默认为81px | N
+readonly | Boolean | undefined | 是否整个表单只读 | N
+required-mark | Boolean | undefined | 是否显示必填符号（*），默认显示 | N
+required-mark-position | String | - | 表单必填符号（*）显示位置。可选项：left/right | N
+reset-type | String | empty | 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值。可选项：empty/initial | N
+rules | Object | - | 表单字段校验规则。TS 类型：`FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
+scroll-to-first-error | String | - | 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动。可选项：''/smooth/auto | N
+show-error-message | Boolean | true | 校验不通过时，是否显示错误提示信息，统一控制全部表单项。如果希望控制单个表单项，请给 FormItem 设置该属性 | N
+submit-with-warning-message | Boolean | false | 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件 | N
+
+### Form Events
+
+名称 | 参数 | 描述
+-- | -- | --
+reset | `(context: { e?: FormResetEvent })` | 表单重置时触发。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts)
+submit | `(context: SubmitContext<FormData>)` | 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加  enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
+validate | `(result: ValidateResultContext<FormData>)` | 校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/>
+
+### FormInstanceFunctions 组件实例方法
+
+名称 | 参数 | 返回值 | 描述
+-- | -- | -- | --
+clear-validate | `(fields?: Array<keyof FormData>)` | \- | 必需。清空校验结果。可使用 fields 指定清除部分字段的校验结果，fields 值为空则表示清除所有字段校验结果。清除邮箱校验结果示例：`clearValidate(['email'])`
+reset | `(params?: FormResetParams<FormData>)` | \- | 必需。重置表单，表单里面没有重置按钮`<button type=\"reset\" />`时可以使用该方法，默认重置全部字段为空，该方法会触发 `reset` 事件。<br />如果表单属性 `resetType='empty'` 或者 `reset.type='empty'` 会重置为空；<br />如果表单属性 `resetType='initial'` 或者 `reset.type='initial'` 会重置为表单初始值。<br />`reset.fields` 用于设置具体重置哪些字段，示例：`reset({ type: 'initial', fields: ['name', 'age'] })`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`interface FormResetParams<FormData> { type?: 'initial' \| 'empty'; fields?: Array<keyof FormData> }`<br/>
+set-validate-message | `(message: FormValidateMessage<FormData>)` | \- | 必需。设置自定义校验结果，如远程校验信息直接呈现。注意需要在组件挂载结束后使用该方法。`FormData` 指表单数据泛型。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/>
+submit | `(params?: { showErrorMessage?: boolean })` | \- | 必需。提交表单，表单里面没有提交按钮`<button type=\"submit\" />`时可以使用该方法。`showErrorMessage` 表示是否在提交校验不通过时显示校验不通过的原因，默认显示。该方法会触发 `submit` 事件
+validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | 必需。校验函数，包含错误文本提示等功能。泛型 `FormData` 表示表单数据 TS 类型。<br/>【关于参数】`params.fields` 表示校验字段，如果设置了 `fields`，本次校验将仅对这些字段进行校验。`params.trigger` 表示本次触发校验的范围，'params.trigger = blur' 表示只触发校验规则设定为 trigger='blur' 的字段，'params.trigger = change' 表示只触发校验规则设定为 trigger='change' 的字段，默认触发全范围校验。`params.showErrorMessage` 表示校验结束后是否显示错误文本提示，默认显示。<br />【关于返回值】返回值为 true 表示校验通过；如果校验不通过，返回值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
+
+
+### FormItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+arrow | Boolean | false | 是否显示右侧箭头 | N
+content-align | String | - | 表单内容对齐方式，优先级高于 Form.contentAlign。可选项：left/right | N
+for | String | - | label 原生属性 | N
+help | String | - | 表单项说明内容 | N
+label | String | '' | 字段标签名称 | N
+label-align | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N
+label-width | String / Number | - | 可以整体设置标签宽度，优先级高于 Form.labelWidth | N
+name | String | - | 表单字段名称 | N
+required-mark | Boolean | undefined | 是否显示必填符号（*），优先级高于 Form.requiredMark | N
+rules | Array | - | 表单字段校验规则。TS 类型：`Array<FormRule>` | N
+show-error-message | Boolean | undefined | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N
+
+### FormItem Slots
+
+名称 | 描述
+-- | --
+help | 自定义 `help` 显示内容
+label | 自定义 `label` 显示内容
+
+### FormRule
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+boolean | Boolean | - | 内置校验方法，校验值类型是否为布尔类型，示例：`{ boolean: true, message: '数据类型必须是布尔类型' }` | N
+date | Boolean / Object | - | 内置校验方法，校验值是否为日期格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ date: { delimiters: '-' }, message: '日期分隔线必须是短横线（-）' }`。TS 类型：`boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
+email | Boolean / Object | - | 内置校验方法，校验值是否为邮件格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' }`。TS 类型：`boolean \| IsEmailOptions` `import type { IsEmailOptions } from '../common/common'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
+enum | Array | - | 内置校验方法，校验值是否属于枚举值中的值。示例：`{ enum: ['primary', 'info', 'warning'], message: '值只能是 primary/info/warning 中的一种' }`。TS 类型：`Array<string>` | N
+idcard | Boolean | - | 内置校验方法，校验值是否为身份证号码，组件校验正则为 `/^(\\d{18,18}\|\\d{15,15}\|\\d{17,17}x)$/i`，示例：`{ idcard: true, message: '请输入正确的身份证号码' }` | N
+len | Number / Boolean | - | 内置校验方法，校验值固定长度，如：len: 10 表示值的字符长度只能等于 10 ，中文表示 2 个字符，英文为 1 个字符。示例：`{ len: 10, message: '内容长度不对' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length === 10, message: '内容文本长度只能是 10 个字' }` | N
+max | Number / Boolean | - | 内置校验方法，校验值最大长度，如：max: 100 表示值最多不能超过 100 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ max: 10, message: '内容超出' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length <= 10, message: '内容文本长度不能超过 10 个字' }`<br />如果数据类型数字（Number），则自动变为数字大小的比对 | N
+message | String | - | 校验未通过时呈现的错误信息，值为空则不显示 | N
+min | Number / Boolean | - | 内置校验方法，校验值最小长度，如：min: 10 表示值最多不能少于 10 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ min: 10, message: '内容长度不够' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length >= 10, message: '内容文本长度至少为 10 个字' }`。<br />如果数据类型数字（Number），则自动变为数字大小的比对 | N
+number | Boolean | - | 内置校验方法，校验值是否为数字（1.2 、 1e5  都算数字），示例：`{ number: true, message: '请输入数字' }` | N
+pattern | String / Object | - | 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`。TS 类型：`RegExp \| string` | N
+required | Boolean | - | 内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 `requiredMark: false` 隐藏必填标记 | N
+telnumber | Boolean | - | 内置校验方法，校验值是否为手机号码，校验正则为 `/^1[3-9]\d{9}$/`，示例：`{ telnumber: true, message: '请输入正确的手机号码' }` | N
+trigger | String | change | 校验触发方式。TS 类型：`ValidateTriggerType` | N
+type | String | error | 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种。可选项：error/warning | N
+url | Boolean / Object | - | 内置校验方法，校验值是否为网络链接地址，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }`。TS 类型：`boolean \| IsURLOptions` `import type { IsURLOptions } from '../common/common'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
+validator | Function | - | 自定义校验规则，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`。TS 类型：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
+whitespace | Boolean | - | 内置校验方法，校验值是否为空格。示例：`{ whitespace: true, message: '值不能为空' }` | N
+
+### FormErrorMessage
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+boolean | String | - | 布尔类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}数据类型必须是布尔类型'` | N
+date | String | - | 日期校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
+enum | String | - | 枚举值校验规则不通过时的表单项显示文案，全局配置默认是：`${name}只能是${validate}等` | N
+idcard | String | - | 身份证号码校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
+len | String | - | 值长度校验不通过时的表单项显示文案，全局配置默认是：`'${name}字符长度必须是 ${validate}'` | N
+max | String | - | 值的长度太长或值本身太大时，校验不通过的表单项显示文案，全局配置默认是：`'${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符'` | N
+min | String | - | 值的长度太短或值本身太小时，校验不通过的表单项显示文案，全局配置默认是：`'${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符'` | N
+number | String | - | 数字类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}必须是数字'` | N
+pattern | String | - | 正则表达式校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
+required | String | - | 没有填写必填项时的表单项显示文案，全局配置默认是：`'${name}必填'` | N
+telnumber | String | - | 手机号号码校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
+url | String | - | 链接校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
+validator | String | - | 自定义校验规则校验不通过时的表单项显示文案，全局配置默认是：'${name}不符合要求' | N
+whitespace | String | - | 值为空格校验不通过时表单项显示文案，全局配置默认是：`'${name}不能为空` | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-form-bg-color | @bg-color-container | -
+--td-form-border-radius | 0 | -
+--td-form-padding | 0 | -
+--td-form-readonly-bg-color | @bg-color-secondarycontainer | -
+--td-form-item-horizontal-padding | 32rpx | -
+--td-form-item-justify-content | space-between | -
+--td-form-item-label-width | 160rpx | -
+--td-form-item-vertical-padding | 32rpx | -

package/dist/form/form-item-props.ts

@@ -0,0 +1,56 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdFormItemProps } from '../form/type';
+export default {
+  /** 是否显示右侧箭头 */
+  arrow: Boolean,
+  /** label 原生属性 */
+  for: {
+    type: String,
+    default: '',
+  },
+  /** 表单项说明内容 */
+  help: {
+    type: String,
+  },
+  /** 字段标签名称 */
+  label: {
+    type: String,
+    default: '' as TdFormItemProps['label'],
+  },
+  /** 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign */
+  labelAlign: {
+    type: String,
+    validator(val: TdFormItemProps['labelAlign']): boolean {
+      if (!val) return true;
+      return ['left', 'right', 'top'].includes(val);
+    },
+  },
+  /** 可以整体设置标签宽度，优先级高于 Form.labelWidth */
+  labelWidth: {
+    type: [String, Number],
+  },
+  /** 表单字段名称 */
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 是否显示必填符号（*），优先级高于 Form.requiredMark */
+  requiredMark: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 表单字段校验规则 */
+  rules: {
+    type: Array,
+  },
+  /** 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` */
+  showErrorMessage: {
+    type: Boolean,
+    default: undefined,
+  },
+};