@tdesign/uniapp 0.8.0 → 0.9.0

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

@@ -81,7 +81,7 @@ 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/blob/develop/packages/uniapp-components/form/type.ts) | N
-email | Boolean / Object | - | Typescript: `boolean \| IsEmailOptions` `import { IsEmailOptions } from 'validator/es/lib/isEmail'`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form/type.ts) | N
+email | Boolean / Object | - | Typescript: `boolean \| IsEmailOptions`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form/type.ts) | N
 enum | Array | - | Typescript: `Array<string>` | N
 idcard | Boolean | - | \- | N
 len | Number / Boolean | - | \- | N
@@ -94,7 +94,7 @@ 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 { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form/type.ts) | N
+url | Boolean / Object | - | Typescript: `boolean \| IsURLOptions`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form/type.ts) | N
 validator | Function | - | Typescript: `CustomValidator` `type CustomValidator = (val: ValueType, context?: { formData: Data , name: string }) => 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/blob/develop/packages/uniapp-components/form/type.ts) | N
 whitespace | Boolean | - | \- | N
 

package/dist/form/README.md

@@ -8,7 +8,9 @@ toc: false
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-form />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TForm from '@tdesign/uniapp/form/form.vue';
@@ -90,7 +92,7 @@ label | 自定义 `label` 显示内容
 -- | -- | -- | -- | --
 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/blob/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 { IsEmailOptions } from 'validator/es/lib/isEmail'`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/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`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/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
@@ -103,7 +105,7 @@ required | Boolean | - | 内置校验方法，校验值是否已经填写。该
 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 { IsURLOptions } from 'validator/es/lib/isURL'`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form/type.ts) | N
+url | Boolean / Object | - | 内置校验方法，校验值是否为网络链接地址，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }`。TS 类型：`boolean \| IsURLOptions`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form/type.ts) | N
 validator | Function | - | 自定义校验规则，context 中 formData 为当前完整表单值，name为该字段的标识，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`。TS 类型：`CustomValidator` `type CustomValidator = (val: ValueType, context?: { formData: Data , name: string }) => 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/blob/develop/packages/uniapp-components/form/type.ts) | N
 whitespace | Boolean | - | 内置校验方法，校验值是否为空格。示例：`{ whitespace: true, message: '值不能为空' }` | N
 

package/dist/form/form.vue

@@ -1,7 +1,7 @@
 <template>
   <form
     :class="classPrefix + ' ' + tClass"
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
   >
     <slot />
   </form>

package/dist/form/type.ts

@@ -4,8 +4,8 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import type { IsEmailOptions } from 'validator/es/lib/isEmail';
-import type { IsURLOptions } from 'validator/es/lib/isURL';
+import type { IsEmailOptions } from '../common/common';
+import type { IsURLOptions } from '../common/common';
 import type { FormResetEvent, FormSubmitEvent } from '../common/common';
 
 export interface TdFormProps<FormData extends Data = Data> {
@@ -36,7 +36,7 @@ export interface TdFormProps<FormData extends Data = Data> {
   /**
    * 是否显示必填符号（*），默认显示
    */
-  requiredMark?: boolean;
+  requiredMark?: boolean | null;
   /**
    * 表单必填符号（*）显示位置
    */

package/dist/form-item/form-item.css

@@ -49,6 +49,10 @@
   display: flex;
   flex-direction: column;
 }
+.t-form__item__icon {
+  font-size: 48rpx;
+  color: var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+}
 .t-form--top {
   align-items: center;
 }
@@ -69,13 +73,13 @@
 .t-form__label--right {
   text-align: right;
 }
-.t-form__label--required:not(.t-form__label--required-right) label::before {
+.t-form__label--required:not(.t-form__label--required-right) .t-form__label-text::before {
   display: inline;
   margin-right: calc(var(--td-spacer, 16rpx) / 2);
   color: var(--td-error-color-6, #d54941);
   content: '*';
 }
-.t-form__label--required-right label::after {
+.t-form__label--required-right .t-form__label-text::after {
   display: inline;
   margin-left: calc(var(--td-spacer, 16rpx) / 2);
   color: var(--td-error-color-6, #d54941);

package/dist/form-item/form-item.vue

@@ -1,23 +1,28 @@
 <template>
   <view
     :class="classPrefix + ' ' + formItemClass + ' ' + formClass + '--' + dataLabelAlign + ' ' + formItemClass + '__' + name + ' ' + errorClasses + ' ' + tClass"
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
   >
     <view :class="formItemClass + '-wrap ' + formItemClass + '--' + dataLabelAlign + ' ' + tClassWrap">
       <!-- 标签区域 -->
-      <view
-        v-if="label"
-        :class="labelClass + ' ' + labelClass + '--' + dataLabelAlign
-          + (dataRequiredMark ? ' ' + labelClass + '--required' : '')
-          + (dataRequiredMark && requiredMarkPosition === 'right' ? ' ' + labelClass + '--required-right' : '')
-          + ' ' + tClassLabel"
-        :style="'width: ' + dataLabelWidth"
-      >
-        <label :for="forId">{{ label }}</label>
-        <template v-if="colon">
-          {{ globalConfig.colonText }}
-        </template>
-      </view>
+      <slot name="label">
+        <view
+          v-if="label"
+          :class="labelClass + ' ' + labelClass + '--' + dataLabelAlign
+            + (dataRequiredMark ? ' ' + labelClass + '--required' : '')
+            + (dataRequiredMark && requiredMarkPosition === 'right' ? ' ' + labelClass + '--required-right' : '')
+            + ' ' + tClassLabel"
+          :style="'width: ' + dataLabelWidth"
+        >
+          <label
+            :class="labelClass + '-text'"
+            :for="forId"
+          >{{ label }}</label>
+          <template v-if="colon">
+            {{ globalConfig.colonText }}
+          </template>
+        </view>
+      </slot>
 
       <!-- 内容区域 -->
       <view :class="formClass + '__controls ' + errorClasses + ' ' + tClassControls">
@@ -28,12 +33,14 @@
           <slot />
         </view>
         <!-- 帮助信息 -->
-        <view
-          v-if="help"
-          :class="formItemClass + '-help ' + formClass + '__controls--' + dataContentAlign + ' ' + tClassHelp"
-        >
-          {{ help }}
-        </view>
+        <slot name="help">
+          <view
+            v-if="help"
+            :class="formItemClass + '-help ' + formClass + '__controls--' + dataContentAlign + ' ' + tClassHelp"
+          >
+            {{ help }}
+          </view>
+        </slot>
 
         <!-- 校验提示信息 -->
         <view
@@ -48,8 +55,7 @@
     <t-icon
       v-if="arrow"
       name="chevron-right"
-      size="24"
-      color="rgba(0, 0, 0, 0.4)"
+      :class="formItemClass + '__icon'"
     />
   </view>
 </template>
@@ -163,14 +169,14 @@ export default {
         const formRules = target.rules?.[this.name];
         const isRequired = formRules?.some(rule => rule.required);
 
-        this.dataRules = formRules;
+        this.dataRules = formRules || [];
         this.colon = target.colon;
         this.dataLabelAlign = labelAlign || target.labelAlign;
         this.dataLabelWidth = normalizeLabelWidth(labelWidth || target.labelWidth);
         this.dataContentAlign = contentAlign || target.contentAlign;
         this.dataRequiredMark = requiredMark || target.requiredMark || globalConfig.requiredMark || isRequired;
         this.dataShowErrorMessage = typeof showErrorMessage === 'boolean' ? showErrorMessage : target.showErrorMessage;
-        this.requiredMarkPosition = target.requiredMarkPosition || globalConfig.requiredMarkPosition;
+        this.requiredMarkPosition = target.requiredMarkPosition || globalConfig.requiredMarkPosition || 'left';
       },
       innerAfterUnlinked() {
         if (this.form) {

package/dist/form-item/type.ts

@@ -37,7 +37,7 @@ export interface TdFormItemProps {
   /**
    * 是否显示必填符号（*），优先级高于 Form.requiredMark
    */
-  requiredMark?: boolean;
+  requiredMark?: boolean | null;
   /**
    * 表单字段校验规则
    */
@@ -45,5 +45,5 @@ export interface TdFormItemProps {
   /**
    * 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage`
    */
-  showErrorMessage?: boolean;
+  showErrorMessage?: boolean | null;
 }

package/dist/grid/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-grid />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TGrid from '@tdesign/uniapp/grid/grid.vue';

package/dist/guide/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-guide />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TGuide from '@tdesign/uniapp/guide/guide.vue';

package/dist/icon/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-icon />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TIcon from '@tdesign/uniapp/icon/icon.vue';
@@ -40,7 +42,7 @@ import TIcon from '@tdesign/uniapp/icon/icon.vue';
 
 #### 准备图标文件
 
-文件后缀应为`.wxss`，如下方代码块所示：
+内容如下方代码块所示：
 
 ```css
 @font-face {
@@ -57,15 +59,16 @@ import TIcon from '@tdesign/uniapp/icon/icon.vue';
   content: '\e64d';
 }
 ```
-- 添加所需图标，下载图标。图标库一般会提供 **在线链接** 或者 **下载至本地** 等使用方式。**在线链接** 方式会指向一个 `.css` 文件，可以下载或复制其内容，将其修改成后缀名为 `.wxss` 的文件
-- 将 `.wxss` 文件中的 `FontClass/Symbol前缀` 与 `Font Family` 两项内容保持一致，如: `FontClass/Symbol` 前缀为 `icon-`，则 `Font Family` 为 `icon`。
 
-> 注：若是采用 `下载至本地` 方式，需关注 `.css` 和 `.ttf` 文件。由于微信小程序不支持处理 `ttf、woff、eot` 等文件，但支持 `base64`，所以需要将 `.ttf` 文件转换为 `base64`  (可借助转换工具，如 [transfonter.org](https://transfonter.org/)，会得到一个 `stylesheet.css` 文件)，然后将 `.css` 文件中的 `@font-face {}` 内容替换为 `stylesheet.css` 中的 `base64` 内容，最后将 `.css` 文件修改后缀为 `.wxss`
+- 添加所需图标，下载图标。图标库一般会提供 **在线链接** 或者 **下载至本地** 等使用方式。**在线链接** 方式会指向一个 `.css` 文件，可以下载或复制其内容。
+- 将 `.css` 文件中的 `FontClass/Symbol前缀` 与 `Font Family` 两项内容保持一致，如: `FontClass/Symbol` 前缀为 `icon-`，则 `Font Family` 为 `icon`。
+
+> 注：若是采用 `下载至本地` 方式，需关注 `.css` 和 `.ttf` 文件。由于微信小程序不支持处理 `ttf、woff、eot` 等文件，但支持 `base64`，所以需要将 `.ttf` 文件转换为 `base64`  (可借助转换工具，如 [transfonter.org](https://transfonter.org/)，会得到一个 `stylesheet.css` 文件)，然后将 `.css` 文件中的 `@font-face {}` 内容替换为 `stylesheet.css` 中的 `base64` 内容。
 
 #### 引入自定义图标
 
-- 全局引入：在项目 `app.wxss`，使用 `@import` 引入上述的 `.wxss` 文件
-- 局部引入：在 `page` 对应的 `.wxss` 中，使用 `@import` 引入上述的 `.wxss` 文件
+- 全局引入：在项目 `App.vue` 或 `main.ts` 等位置，引入上述图标文件
+- 局部引入：在页面/组件对应的样式文件中，引入上述图标文件
 
 #### 自定义图标的使用