@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/form/type.ts

@@ -4,8 +4,8 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import type { IsEmailOptions } from '../common/common';
-import type { IsURLOptions } from '../common/common';
+import type { IsEmailOptions } from 'validator/es/lib/isEmail';
+import type { IsURLOptions } from 'validator/es/lib/isURL';
 import type { FormResetEvent, FormSubmitEvent } from '../common/common';
 
 export interface TdFormProps<FormData extends Data = Data> {
@@ -14,20 +14,11 @@ export interface TdFormProps<FormData extends Data = Data> {
    * @default false
    */
   colon?: boolean;
-  /**
-   * 表单内容对齐方式：左对齐、右对齐
-   * @default left
-   */
-  contentAlign?: 'left' | 'right';
   /**
    * 表单数据
    * @default {}
    */
   data?: FormData;
-  /**
-   * 是否禁用整个表单
-   */
-  disabled?: boolean;
   /**
    * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`
    */
@@ -42,10 +33,6 @@ export interface TdFormProps<FormData extends Data = Data> {
    * @default '81px'
    */
   labelWidth?: string | number;
-  /**
-   * 是否整个表单只读
-   */
-  readonly?: boolean;
   /**
    * 是否显示必填符号（*），默认显示
    */
@@ -115,58 +102,6 @@ export interface FormInstanceFunctions<FormData extends Data = Data> {
   validate: (params?: FormValidateParams) => Promise<FormValidateResult<FormData>>;
 }
 
-
-export interface TdFormItemProps {
-  /**
-   * 是否显示右侧箭头
-   * @default false
-   */
-  arrow?: boolean;
-  /**
-   * 表单内容对齐方式，优先级高于 Form.contentAlign
-   */
-  contentAlign?: 'left' | 'right';
-  /**
-   * label 原生属性
-   * @default ''
-   */
-  for?: string;
-  /**
-   * 表单项说明内容
-   */
-  help?: string;
-  /**
-   * 字段标签名称
-   * @default ''
-   */
-  label?: string;
-  /**
-   * 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign
-   */
-  labelAlign?: 'left' | 'right' | 'top';
-  /**
-   * 可以整体设置标签宽度，优先级高于 Form.labelWidth
-   */
-  labelWidth?: string | number;
-  /**
-   * 表单字段名称
-   * @default ''
-   */
-  name?: string;
-  /**
-   * 是否显示必填符号（*），优先级高于 Form.requiredMark
-   */
-  requiredMark?: boolean;
-  /**
-   * 表单字段校验规则
-   */
-  rules?: Array<FormRule>;
-  /**
-   * 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage`
-   */
-  showErrorMessage?: boolean;
-}
-
 export interface FormRule {
   /**
    * 内置校验方法，校验值类型是否为布尔类型，示例：`{ boolean: true, message: '数据类型必须是布尔类型' }`
@@ -236,7 +171,7 @@ export interface FormRule {
    */
   url?: boolean | IsURLOptions;
   /**
-   * 自定义校验规则，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`
+   * 自定义校验规则，context 中 formData 为当前完整表单值，name为该字段的标识，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`
    */
   validator?: CustomValidator;
   /**
@@ -373,7 +308,10 @@ export interface IsDateOptions {
   delimiters: string[];
 }
 
-export type CustomValidator = (val: ValueType) => CustomValidateResolveType | Promise<CustomValidateResolveType>;
+export type CustomValidator = (
+  val: ValueType,
+  context?: { formData: Data; name: string },
+) => CustomValidateResolveType | Promise<CustomValidateResolveType>;
 
 export type CustomValidateResolveType = boolean | CustomValidateObj;
 
@@ -384,4 +322,3 @@ export interface CustomValidateObj {
 }
 
 export type ValueType = any;
-

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

@@ -8,15 +8,13 @@ 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
+rules | Array | - | Typescript: `Array<FormRule> `，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form-item/type.ts) | N
 show-error-message | Boolean | undefined | \- | N
 
 ### FormItem Slots
@@ -31,7 +29,8 @@ label | \-
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
+--td-form-item-border-color | @component-stroke | -
+--td-form-item-border-left-space | @form-item-vertical-padding | -
+--td-form-item-border-right-space | 0 | -
 --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-item/README.md

@@ -8,15 +8,13 @@
 -- | -- | -- | -- | --
 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
+rules | Array | - | 表单字段校验规则。TS 类型：`Array<FormRule> `，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form-item/type.ts) | N
 show-error-message | Boolean | undefined | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N
 
 ### FormItem Slots
@@ -31,7 +29,8 @@ label | 自定义 `label` 显示内容
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
+--td-form-item-border-color | @component-stroke | -
+--td-form-item-border-left-space | @form-item-vertical-padding | -
+--td-form-item-border-right-space | 0 | -
 --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-item/form-item.css

@@ -1,125 +1,98 @@
 /* Less 支持测试 - 监听功能验证 */
-.t-form-item {
-  position: relative;
+.t-form__item {
   display: flex;
-  align-items: flex-start;
-  justify-content: var(--td-form-item-justify-content, space-between);
-  width: 100%;
-  padding: var(--td-form-item-vertical-padding, 32rpx) var(--td-form-item-horizontal-padding, 32rpx);
-  background-color: var(--td-form-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
-  --td-input-vertical-padding: 0rpx;
-  --td-textarea-vertical-padding: 0rpx;
-  --td-textarea-horizontal-padding: 0rpx;
   box-sizing: border-box;
+  padding: var(--td-form-item-vertical-padding, 32rpx) var(--td-form-item-horizontal-padding, 32rpx);
+  position: relative;
+  --td-cell-vertical-padding: 0;
+  --td-cell-horizontal-padding: 0;
+  --td-input-vertical-padding: 0;
+  --td-textarea-padding: 0;
 }
-.t-form-item--top {
+.t-form__item:not(:last-child)::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  border-bottom: 1px solid var(--td-form-item-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
+  transform: scaleY(0.5);
+  left: var(--td-form-item-border-left-space, var(--td-form-item-vertical-padding, 32rpx));
+  right: var(--td-form-item-border-right-space, 0);
+}
+.t-form__item-help,
+.t-form__item-extra {
   display: flex;
-  flex-direction: column;
-}
-.t-form-item--bordered {
-  border-bottom: 1rpx solid var(--td-border-color, var(--td-gray-color-3, #e7e7e7));
-}
-.t-form-item--error .t-form-item__error {
-  color: var(--td-error-color, var(--td-error-color-6, #d54941));
-}
-.t-form-item--success .t-form-item__success {
-  color: var(--td-success-color, var(--td-success-color-5, #2ba471));
+  font-size: var(--td-font-size-s, 24rpx);
+  margin: 0;
+  width: 100%;
+  height: auto;
+  min-height: 40rpx;
+  margin-top: 8rpx;
 }
-.t-form-item__label {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: var(--td-form-item-label-width, 160rpx);
-  margin-right: 16rpx;
-  font-size: var(--td-font-size-m, 32rpx);
-  color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
-  line-height: 1.5;
+.t-form__item-help {
+  color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
 }
-.t-form-item__label--required {
-  color: var(--td-error-color, var(--td-error-color-6, #d54941));
-  margin-right: 4rpx;
+.t-form__item--error {
+  color: var(--td-error-color-6, #d54941);
 }
-.t-form-item__label--colon {
-  margin-left: 4rpx;
+.t-form__item--warning {
+  color: var(--td-warning-color-5, #e37318);
 }
-.t-form-item__label--left {
+.t-form__item-wrap {
+  width: 100%;
   display: flex;
-  align-items: center;
-  justify-content: flex-start;
 }
-.t-form-item__label--right {
+.t-form__item--top {
   display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-.t-form-item__label--top {
-  position: relative;
-  margin-right: 0;
-  width: 100%;
-}
-.t-form-item__controls {
-  flex: 1;
-  width: 100%;
+  flex-direction: column;
 }
-.t-form-item__controls-content {
-  width: 100%;
-  display: flex;
+.t-form--top {
   align-items: center;
-  justify-content: space-between;
 }
-.t-form-item__controls-content--left {
-  justify-content: flex-start;
-}
-.t-form-item__controls-content--right {
-  justify-content: flex-end;
+.t-form__label {
+  padding-right: 32rpx;
+  vertical-align: middle;
+  line-height: 48rpx;
+  color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  box-sizing: border-box;
+  word-break: break-all;
 }
-.t-form-item__help {
-  font-size: var(--td-font-size-s, 24rpx);
-  color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
-  line-height: 1.4;
+.t-form__label--top {
+  padding-bottom: 16rpx;
 }
-.t-form-item__help--left {
+.t-form__label--left {
   text-align: left;
 }
-.t-form-item__help--right {
+.t-form__label--right {
   text-align: right;
 }
-.t-form-item__desc-link {
-  margin-top: 8rpx;
-  color: var(--td-primary-color-7, #0052d9);
-  font-size: var(--td-font-size-s, 24rpx);
-  line-height: 1.4;
-}
-.t-form-item__error {
-  margin-top: 4rpx;
-  font-size: var(--td-font-size-s, 24rpx);
-  line-height: 1.4;
-}
-.t-form-item__error--error {
-  color: var(--td-error-color, var(--td-error-color-6, #d54941));
+.t-form__label--required:not(.t-form__label--required-right) label::before {
+  display: inline;
+  margin-right: calc(var(--td-spacer, 16rpx) / 2);
+  color: var(--td-error-color-6, #d54941);
+  content: '*';
 }
-.t-form-item__error--warning {
-  color: var(--td-warning-color, var(--td-warning-color-5, #e37318));
+.t-form__label--required-right label::after {
+  display: inline;
+  margin-left: calc(var(--td-spacer, 16rpx) / 2);
+  color: var(--td-error-color-6, #d54941);
+  content: '*';
 }
-.t-form-item__success {
-  margin-top: 4rpx;
-  font-size: var(--td-font-size-s, 24rpx);
-  color: var(--td-success-color, var(--td-success-color-5, #2ba471));
-  line-height: 1.4;
+.t-form__controls {
+  flex: 1;
+  position: relative;
 }
-.t-form-item__arrow {
+.t-form__controls-content {
   display: flex;
   align-items: center;
-  margin-left: 8rpx;
-  color: var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+  min-height: 48rpx;
 }
-.t-form-item__extra {
-  margin-left: 16rpx;
+.t-form__controls--left {
+  justify-content: flex-start;
 }
-.desc-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-  height: 50rpx;
-  --td-button-font-weight: 400;
+.t-form__controls--right {
+  justify-content: flex-end;
 }