@tdesign/uniapp 0.8.0 → 0.8.1

package/dist/common/validator.ts

@@ -0,0 +1,496 @@
+import type { IsEmailOptions, IsURLOptions } from './common';
+
+export function isFunction(val: unknown): val is (...args: unknown[]) => unknown {
+  return typeof val === 'function';
+}
+
+export const isString = (val: unknown): val is string => typeof val === 'string';
+
+export const isNull = (value: unknown): value is null => value === null;
+
+export const isUndefined = (value: unknown): value is undefined => value === undefined;
+
+export function isDef<T>(value: T | undefined | null): value is T {
+  return !isUndefined(value) && !isNull(value);
+}
+
+export function isInteger(value: unknown): boolean {
+  return Number.isInteger(value);
+}
+
+export function isNumeric(value: unknown): boolean {
+  return !Number.isNaN(Number(value));
+}
+
+export function isNumber(value: unknown): value is number {
+  return typeof value === 'number';
+}
+
+export function isBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean';
+}
+
+export function isObject(x: unknown): x is Record<string, unknown> {
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+export function isPlainObject(val: unknown): val is Record<string, unknown> {
+  return val !== null && typeof val === 'object' && Object.prototype.toString.call(val) === '[object Object]';
+}
+
+export function isEmpty(val: unknown): boolean {
+  if (val === null || val === undefined) return true;
+  if (typeof val === 'string' || Array.isArray(val)) return val.length === 0;
+  if (val instanceof Map || val instanceof Set) return val.size === 0;
+  if (typeof val === 'object') return Object.keys(val).length === 0;
+  return true;
+}
+
+/**
+ * 日期校验选项
+ */
+export interface IsDateOptions {
+  /**
+   * 日期格式
+   * @default 'YYYY/MM/DD'
+   */
+  format?: string;
+  /**
+   * 日期分隔符
+   * @default ['/', '-']
+   */
+  delimiters?: string[];
+  /**
+   * 是否启用严格模式
+   * @default false
+   */
+  strictMode?: boolean;
+}
+
+/**
+ * 验证是否为有效日期
+ * 支持字符串格式（YYYY/MM/DD、YYYY-MM-DD 等）和 Date 对象
+ */
+export function isDate(input: string | Date, options?: IsDateOptions): boolean {
+  const defaultOptions: Required<IsDateOptions> = {
+    format: 'YYYY/MM/DD',
+    delimiters: ['/', '-'],
+    strictMode: false,
+  };
+  const opts = { ...defaultOptions, ...options };
+
+  if (typeof input === 'string') {
+    const delimiter = opts.delimiters.find(d => opts.format.includes(d));
+    if (!delimiter) return false;
+
+    const formatParts = opts.format.split(delimiter);
+    const dateParts = input.split(delimiter);
+    if (formatParts.length !== dateParts.length) return false;
+
+    let year = '';
+    let month = '';
+    let day = '';
+    for (let i = 0; i < formatParts.length; i += 1) {
+      const fmt = formatParts[i].toUpperCase();
+      const val = dateParts[i];
+      if (fmt.includes('Y')) year = val;
+      else if (fmt.includes('M')) month = val;
+      else if (fmt.includes('D')) day = val;
+    }
+
+    if (month.length === 1) month = `0${month}`;
+    if (day.length === 1) day = `0${day}`;
+
+    if (year.length === 2) {
+      const currentYearSuffix = new Date().getFullYear() % 100;
+      year = Number(year) <= currentYearSuffix ? `20${year}` : `19${year}`;
+    }
+
+    const date = new Date(`${year}-${month}-${day}T00:00:00.000Z`);
+    return (
+      date.getUTCFullYear() === Number(year)
+      && date.getUTCMonth() + 1 === Number(month)
+      && date.getUTCDate() === Number(day)
+    );
+  }
+
+  if (!opts.strictMode) {
+    if (Object.prototype.toString.call(input) === '[object Date]' && Number.isFinite((input as Date).getTime())) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * 检查主机名是否匹配黑/白名单
+ */
+function checkHost(host: string, list: Array<string | RegExp>): boolean {
+  if (!list?.length) return false;
+  return list.some((item) => {
+    if (item instanceof RegExp) return item.test(host);
+    return host === item;
+  });
+}
+
+/**
+ * 计算字符串的字节长度（UTF-8 编码）
+ */
+function byteLength(str: string): number {
+  return encodeURI(str).split(/%..|./).length - 1;
+}
+
+/**
+ * FQDN 校验选项
+ */
+interface IsFQDNOptions {
+  /**
+   * 是否要求顶级域名
+   * @default true
+   */
+  require_tld?: boolean;
+  /**
+   * 是否允许下划线
+   * @default false
+   */
+  allow_underscores?: boolean;
+  /**
+   * 是否允许末尾的点
+   * @default false
+   */
+  allow_trailing_dot?: boolean;
+}
+
+/**
+ * 检查是否为 FQDN（完全限定域名）
+ */
+function isFQDN(str: string, options: IsFQDNOptions = {}): boolean {
+  const opts: Required<IsFQDNOptions> = {
+    require_tld: true,
+    allow_underscores: false,
+    allow_trailing_dot: false,
+    ...options,
+  };
+
+  let domain = str;
+  if (opts.allow_trailing_dot && domain[domain.length - 1] === '.') {
+    domain = domain.substring(0, domain.length - 1);
+  }
+
+  const parts = domain.split('.');
+  const tld = parts[parts.length - 1];
+
+  if (opts.require_tld) {
+    if (parts.length < 2) return false;
+    if (!/^([a-z\u00A1-\u00A8\u00AA-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}|xn[a-z0-9-]{2,})$/i.test(tld)) {
+      return false;
+    }
+    if (/\s/.test(tld)) return false;
+  }
+
+  if (/^\d+$/.test(tld)) return false;
+
+  return parts.every((part) => {
+    if (part.length > 63) return false;
+    if (!/^[a-z_\u00a1-\uffff0-9-]+$/i.test(part)) return false;
+    // 禁止全角字符
+    if (/[\uff01-\uff5e]/.test(part)) return false;
+    // 不能以连字符开头或结尾
+    if (/^-|-$/.test(part)) return false;
+    if (!opts.allow_underscores && /_/.test(part)) return false;
+    return true;
+  });
+}
+
+/**
+ * 检查是否为有效的 IPv4 或 IPv6 地址
+ */
+function isIP(ipAddress: string, version?: number): boolean {
+  const IPv4SegmentFormat = '(?:[0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])';
+  const IPv4AddressFormat = `(${IPv4SegmentFormat}[.]){3}${IPv4SegmentFormat}`;
+  const IPv4AddressRegExp = new RegExp(`^${IPv4AddressFormat}$`);
+  const IPv6SegmentFormat = '(?:[0-9a-fA-F]{1,4})';
+  const IPv6AddressRegExp = new RegExp('^('
+    + `(?:${IPv6SegmentFormat}:){7}(?:${IPv6SegmentFormat}|:)|`
+    + `(?:${IPv6SegmentFormat}:){6}(?:${IPv4AddressFormat}|:${IPv6SegmentFormat}|:)|`
+    + `(?:${IPv6SegmentFormat}:){5}(?::${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,2}|:)|`
+    + `(?:${IPv6SegmentFormat}:){4}(?:(:${IPv6SegmentFormat}){0,1}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,3}|:)|`
+    + `(?:${IPv6SegmentFormat}:){3}(?:(:${IPv6SegmentFormat}){0,2}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,4}|:)|`
+    + `(?:${IPv6SegmentFormat}:){2}(?:(:${IPv6SegmentFormat}){0,3}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,5}|:)|`
+    + `(?:${IPv6SegmentFormat}:){1}(?:(:${IPv6SegmentFormat}){0,4}:${IPv4AddressFormat}|(:${IPv6SegmentFormat}){1,6}|:)|`
+    + `(?::((?::${IPv6SegmentFormat}){0,5}:${IPv4AddressFormat}|(?::${IPv6SegmentFormat}){1,7}|:))`
+    + ')(%[0-9a-zA-Z.]{1,})?$');
+
+  const v = version ? version.toString() : '';
+  if (!v) {
+    return isIP(ipAddress, 4) || isIP(ipAddress, 6);
+  }
+  if (v === '4') return IPv4AddressRegExp.test(ipAddress);
+  if (v === '6') return IPv6AddressRegExp.test(ipAddress);
+  return false;
+}
+
+/**
+ * 验证是否为有效邮箱地址
+ * 参考 validator.js 的 isEmail 实现，支持 options 参数
+ */
+export function isEmail(str: string, options?: IsEmailOptions): boolean {
+  if (typeof str !== 'string') return false;
+
+  let email = str;
+
+  const defaultOpts: Required<IsEmailOptions> = {
+    allow_display_name: false,
+    allow_underscores: false,
+    require_display_name: false,
+    allow_utf8_local_part: true,
+    require_tld: true,
+    blacklisted_chars: '',
+    ignore_max_length: false,
+    host_blacklist: [],
+    host_whitelist: [],
+    allow_ip_domain: false,
+    domain_specific_validation: false,
+  };
+  const opts = { ...defaultOpts, ...options };
+
+  // 处理 Display Name 格式，如 "John" <john@example.com>
+  // eslint-disable-next-line no-control-regex
+  const splitNameAddress = /^([^\x00-\x1F\x7F-\x9F\cX]+)</i;
+  if (opts.require_display_name || opts.allow_display_name) {
+    const displayEmail = email.match(splitNameAddress);
+    if (displayEmail) {
+      let displayName = displayEmail[1];
+      email = email.replace(displayName, '').replace(/(^<|>$)/g, '');
+      if (displayName.endsWith(' ')) {
+        displayName = displayName.slice(0, -1);
+      }
+      // 简单校验 display name
+      const nameWithoutQuotes = displayName.replace(/^"(.+)"$/, '$1');
+      if (!nameWithoutQuotes.trim()) return false;
+      if (/[.";<>]/.test(nameWithoutQuotes) && nameWithoutQuotes === displayName) return false;
+    } else if (opts.require_display_name) {
+      return false;
+    }
+  }
+
+  if (!opts.ignore_max_length && email.length > 254) return false;
+
+  const parts = email.split('@');
+  const domain = parts.pop()!;
+  const user = parts.join('@');
+
+  if (!user || !domain) return false;
+
+  const lowerDomain = domain.toLowerCase();
+
+  // 域名黑名单
+  if (opts.host_blacklist.length > 0 && checkHost(lowerDomain, opts.host_blacklist)) {
+    return false;
+  }
+  // 域名白名单
+  if (opts.host_whitelist.length > 0 && !checkHost(lowerDomain, opts.host_whitelist)) {
+    return false;
+  }
+
+  // Gmail 特殊校验
+  if (opts.domain_specific_validation && (lowerDomain === 'gmail.com' || lowerDomain === 'googlemail.com')) {
+    const username = user.toLowerCase().split('+')[0];
+    if (byteLength(username.replace(/\./g, '')) < 6 || byteLength(username.replace(/\./g, '')) > 30) {
+      return false;
+    }
+    const gmailUserPart = /^[a-z\d]+$/;
+    const gmailParts = username.split('.');
+    for (let i = 0; i < gmailParts.length; i++) {
+      if (!gmailUserPart.test(gmailParts[i])) return false;
+    }
+  }
+
+  // 字节长度校验
+  if (!opts.ignore_max_length && (byteLength(user) > 64 || byteLength(domain) > 254)) {
+    return false;
+  }
+
+  // 域名校验：先尝试 FQDN，再尝试 IP
+  if (!isFQDN(domain, { require_tld: opts.require_tld, allow_underscores: opts.allow_underscores })) {
+    if (!opts.allow_ip_domain) return false;
+    if (!isIP(domain)) {
+      if (!domain.startsWith('[') || !domain.endsWith(']')) return false;
+      const noBracketDomain = domain.slice(1, -1);
+      if (!noBracketDomain || !isIP(noBracketDomain)) return false;
+    }
+  }
+
+  // 黑名单字符
+  if (opts.blacklisted_chars && new RegExp(`[${opts.blacklisted_chars}]+`, 'g').test(user)) {
+    return false;
+  }
+
+  // 引号包裹的用户名
+  if (user[0] === '"' && user[user.length - 1] === '"') {
+    const innerUser = user.slice(1, user.length - 1);
+    /* eslint-disable no-control-regex */
+    if (opts.allow_utf8_local_part) {
+      return /^([\s\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|(\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*$/i.test(innerUser);
+    }
+    return /^([\s\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e]|(\\[\x01-\x09\x0b\x0c\x0d-\x7f]))*$/i.test(innerUser);
+    /* eslint-enable no-control-regex */
+  }
+
+  // 用户名逐段校验（按 . 分割）
+  /* eslint-disable no-useless-escape */
+  const pattern = opts.allow_utf8_local_part
+    ? /^[a-z\d!#\$%&'\*\+\-\/=\?\^_`{\|}~\u00A1-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+$/i
+    : /^[a-z\d!#\$%&'\*\+\-\/=\?\^_`{\|}~]+$/i;
+  /* eslint-enable no-useless-escape */
+  const userParts = user.split('.');
+  for (let i = 0; i < userParts.length; i++) {
+    if (!pattern.test(userParts[i])) return false;
+  }
+
+  return true;
+}
+
+/**
+ * 验证是否为有效 URL
+ * 参考 validator.js 的 isURL 实现，支持完整 options 参数
+ */
+export function isURL(str: string, options?: IsURLOptions): boolean {
+  if (typeof str !== 'string') return false;
+  if (!str || /[\s<>]/.test(str)) return false;
+  if (str.indexOf('mailto:') === 0) return false;
+
+  const defaultOpts: Required<IsURLOptions> = {
+    protocols: ['http', 'https', 'ftp'],
+    require_tld: true,
+    require_protocol: false,
+    require_host: true,
+    require_port: false,
+    require_valid_protocol: true,
+    allow_underscores: false,
+    allow_trailing_dot: false,
+    allow_protocol_relative_urls: false,
+    allow_fragments: true,
+    allow_query_components: true,
+    disallow_auth: false,
+    validate_length: true,
+    max_allowed_length: 2084,
+    host_whitelist: [],
+    host_blacklist: [],
+  };
+  const opts = { ...defaultOpts, ...options };
+
+  if (opts.validate_length && opts.max_allowed_length && str.length > opts.max_allowed_length) {
+    return false;
+  }
+
+  if (!opts.allow_fragments && str.includes('#')) {
+    return false;
+  }
+
+  if (!opts.allow_query_components && (str.includes('?') || str.includes('&'))) {
+    return false;
+  }
+
+  let url = str;
+  let protocol: string | undefined;
+
+  // 协议解析
+  const protocolRegex = /^([a-z][a-z0-9+\-.]*):\/\//i;
+  const protocolMatch = url.match(protocolRegex);
+  if (protocolMatch) {
+    protocol = protocolMatch[1].toLowerCase();
+    if (opts.require_valid_protocol && !opts.protocols.includes(protocol)) return false;
+    url = url.slice(protocolMatch[0].length);
+  } else if (opts.require_protocol) {
+    if (opts.allow_protocol_relative_urls && str.startsWith('//')) {
+      url = url.slice(2);
+    } else {
+      return false;
+    }
+  } else if (str.startsWith('//')) {
+    if (!opts.allow_protocol_relative_urls) return false;
+    url = url.slice(2);
+  }
+
+  if (url === '') return false;
+
+  // 分离片段和查询参数
+  let split: string[] = url.split('#');
+  url = split.shift()!;
+  split = url.split('?');
+  url = split.shift()!;
+
+  // 分离路径
+  split = url.split('/');
+  url = split.shift()!;
+
+  if (url === '' && !opts.require_host) return true;
+
+  // 分离认证信息
+  split = url.split('@');
+  if (split.length > 1) {
+    if (opts.disallow_auth) return false;
+    const auth = split.shift()!;
+    if (auth === '') return false;
+    if (auth.indexOf(':') >= 0 && auth.split(':').length > 2) return false;
+    const [authUser, authPassword] = auth.split(':');
+    if (authUser === '' && authPassword === '') return false;
+  }
+
+  const hostname = split.join('@');
+  let portStr: string | null = null;
+  let ipv6: string | null = null;
+  let host: string;
+
+  // IPv6 包裹格式 [::1]:port
+  const wrappedIpv6 = /^\[([^\]]+)\](?::([0-9]+))?$/;
+  const ipv6Match = hostname.match(wrappedIpv6);
+  if (ipv6Match) {
+    host = '';
+    [, ipv6] = ipv6Match;
+    portStr = ipv6Match[2] || null;
+  } else {
+    const hostSplit = hostname.split(':');
+    [host] = hostSplit;
+    const restParts = hostSplit.slice(1);
+    if (restParts.length) {
+      portStr = restParts.join(':');
+    }
+  }
+
+  // 端口校验
+  if (portStr !== null && portStr.length > 0) {
+    const port = parseInt(portStr, 10);
+    if (!/^[0-9]+$/.test(portStr) || port <= 0 || port > 65535) return false;
+  } else if (opts.require_port) {
+    return false;
+  }
+
+  // 白名单优先
+  if (opts?.host_whitelist?.length) {
+    return checkHost(host, opts.host_whitelist);
+  }
+
+  if (host === '' && !opts.require_host) return true;
+
+  // 域名校验
+  if (!isIP(host) && !isFQDN(host, {
+    require_tld: opts.require_tld,
+    allow_underscores: opts.allow_underscores,
+    allow_trailing_dot: opts.allow_trailing_dot,
+  }) && (!ipv6 || !isIP(ipv6, 6))) {
+    return false;
+  }
+
+  host = host || ipv6!;
+
+  // 黑名单
+  if (opts?.host_blacklist?.length && checkHost(host, opts.host_blacklist)) {
+    return false;
+  }
+
+  return true;
+}

package/dist/config-provider/README.md

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

package/dist/count-down/README.md

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

package/dist/date-time-picker/README.md

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

package/dist/dialog/README.md

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

package/dist/divider/README.md

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

package/dist/drawer/README.md

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

package/dist/dropdown-menu/README.md

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

package/dist/empty/README.md

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

package/dist/fab/README.md

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

package/dist/footer/README.md

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

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>