@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/cell/type.ts

@@ -0,0 +1,82 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdCellProps {
+  /**
+   * 右侧内容的对齐方式，默认居中对齐
+   * @default middle
+   */
+  align?: 'top' | 'middle' | 'bottom';
+  /**
+   * 是否显示右侧箭头
+   * @default false
+   */
+  arrow?: boolean | object;
+  /**
+   * 是否显示下边框
+   * @default true
+   */
+  bordered?: boolean;
+  /**
+   * 下方内容描述
+   */
+  description?: string;
+  /**
+   * 是否开启点击反馈
+   */
+  hover?: boolean;
+  /**
+   * 主图
+   */
+  image?: string;
+  /**
+   * 链接跳转类型
+   * @default navigateTo
+   */
+  jumpType?: 'switchTab' | 'reLaunch' | 'redirectTo' | 'navigateTo';
+  /**
+   * 左侧图标，出现在单元格标题的左侧
+   */
+  leftIcon?: string | object;
+  /**
+   * 和标题同行的说明文字
+   */
+  note?: string;
+  /**
+   * 说明文字自定义样式
+   */
+  noteStyle?: string | object;
+  /**
+   * 是否显示表单必填星号
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * 最右侧图标
+   */
+  rightIcon?: string | object;
+  /**
+   * 右侧图标自定义样式
+   */
+  rightIconStyle?: string | object;
+  /**
+   * 标题
+   */
+  title?: string;
+  /**
+   * 标题自定义样式
+   */
+  titleStyle?: string | object;
+  /**
+   * 点击后跳转链接地址。如果值为空，则表示不需要跳转
+   * @default ''
+   */
+  url?: string;
+  /**
+   * 右侧内容
+   */
+  onClick?: (e: MouseEvent) => void;
+}

package/dist/cell-group/cell-group.css

@@ -0,0 +1,44 @@
+.t-cell-group {
+  position: relative;
+}
+.t-cell-group__title {
+  font-family: PingFangSC-Regular;
+  font-size: var(--td-cell-group-title-font-size, 28rpx);
+  color: var(--td-cell-group-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  text-align: left;
+  line-height: var(--td-cell-group-title-line-height, 90rpx);
+  background-color: var(--td-cell-group-title-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+  padding-left: var(--td-cell-group-title-padding-left, 32rpx);
+}
+.t-cell-group--bordered::before {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  top: 0;
+  border-top: 1px solid var(--td-cell-group-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
+  transform: scaleY(0.5);
+  transform-origin: 0 0;
+  transform-origin: top;
+  z-index: 1;
+}
+.t-cell-group--bordered::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  border-bottom: 1px solid var(--td-cell-group-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
+  transform: scaleY(0.5);
+  transform-origin: bottom;
+  z-index: 1;
+}
+.t-cell-group--card {
+  margin: 0 32rpx;
+  border-radius: var(--td-radius-large, 18rpx);
+  overflow: hidden;
+}

package/dist/cell-group/cell-group.vue

@@ -0,0 +1,69 @@
+<template>
+  <view>
+    <view
+      v-if="title"
+      :class="[
+        classPrefix + '__title ',
+        tClassTitle
+      ]"
+    >
+      {{ title }}
+    </view>
+    <view
+      :style="tools._style([customStyle])"
+      :class="[
+        tools.cls(classPrefix, [['bordered', bordered], theme]),
+        tClass
+      ]"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import tools from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-cell-group`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`, `${prefix}-class-title`],
+  mixins: [ParentMixin(RELATION_MAP.Cell)],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      tools,
+    };
+  },
+  methods: {
+    innerAfterLinked() {
+      this.updateLastChid();
+    },
+    innerAfterUnLinked() {
+      this.updateLastChid();
+    },
+    updateLastChid() {
+      const { children } = this;
+      children.forEach((child, index) => {
+        child.isLastChild = index === children.length - 1;
+      });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './cell-group.css';
+</style>

package/dist/cell-group/props.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCellGroupProps } from './type';
+export default {
+  /** 是否显示组边框 */
+  bordered: Boolean,
+  /** 单元格组风格 */
+  theme: {
+    type: String,
+    default: 'default' as TdCellGroupProps['theme'],
+    validator(val: TdCellGroupProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'card'].includes(val);
+    },
+  },
+  /** 单元格组标题 */
+  title: {
+    type: String,
+    default: '',
+  },
+};

package/dist/cell-group/type.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdCellGroupProps {
+  /**
+   * 是否显示组边框
+   * @default false
+   */
+  bordered?: boolean;
+  /**
+   * 单元格组风格
+   * @default default
+   */
+  theme?: 'default' | 'card';
+  /**
+   * 单元格组标题
+   * @default ''
+   */
+  title?: string;
+}

package/dist/check-tag/check-tag.css

@@ -0,0 +1,197 @@
+.t-tag {
+  display: inline-flex;
+  align-items: center;
+  border: 2rpx solid transparent;
+  box-sizing: border-box;
+  border-radius: var(--td-tag-square-border-radius, 8rpx);
+  user-select: none;
+  vertical-align: middle;
+}
+.t-tag__text {
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-tag__icon {
+  display: flex;
+  align-items: center;
+}
+.t-tag__icon:not(:empty) + .t-tag__text:not(:empty) {
+  margin-left: 8rpx;
+}
+.t-tag--small {
+  padding: var(--td-tag-small-padding, 2rpx 10rpx);
+  font: var(--td-tag-small-font, var(--td-font-body-extraSmall, 20rpx / 32rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-tag--small .t-icon,
+.t-tag--small .t-icon-close {
+  font-size: var(--td-tag-small-icon-size, 24rpx);
+}
+.t-tag--medium {
+  padding: var(--td-tag-medium-padding, 2rpx 14rpx);
+  font: var(--td-tag-medium-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-tag--medium .t-icon,
+.t-tag--medium .t-icon-close {
+  font-size: var(--td-tag-medium-icon-size, 28rpx);
+}
+.t-tag--large {
+  padding: var(--td-tag-large-padding, 4rpx 14rpx);
+  font: var(--td-tag-large-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-tag--large .t-icon,
+.t-tag--large .t-icon-close {
+  font-size: var(--td-tag-large-icon-size, 32rpx);
+}
+.t-tag--extra-large {
+  padding: var(--td-tag-extra-large-padding, 16rpx 30rpx);
+  font: var(--td-tag-extra-large-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-tag--extra-large .t-icon,
+.t-tag--extra-large .t-icon-close {
+  font-size: var(--td-tag-extra-large-icon-size, 32rpx);
+}
+.t-tag.t-tag--square {
+  border-radius: var(--td-tag-square-border-radius, 8rpx);
+}
+.t-tag.t-tag--round {
+  border-radius: var(--td-tag-round-border-radius, 999px);
+}
+.t-tag.t-tag--mark {
+  border-radius: 0 var(--td-tag-mark-border-radius, var(--td-tag-round-border-radius, 999px)) var(--td-tag-mark-border-radius, var(--td-tag-round-border-radius, 999px)) 0;
+}
+.t-tag--dark.t-tag--default {
+  color: var(--td-text-color-anti, var(--td-font-white-1, #ffffff));
+  border-color: var(--td-tag-default-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+  background-color: var(--td-tag-default-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-tag--dark.t-tag--primary {
+  color: var(--td-text-color-anti, var(--td-font-white-1, #ffffff));
+  border-color: var(--td-tag-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  background-color: var(--td-tag-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-tag--dark.t-tag--success {
+  color: var(--td-text-color-anti, var(--td-font-white-1, #ffffff));
+  border-color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
+  background-color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
+}
+.t-tag--dark.t-tag--warning {
+  color: var(--td-text-color-anti, var(--td-font-white-1, #ffffff));
+  border-color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+  background-color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+}
+.t-tag--dark.t-tag--danger {
+  color: var(--td-text-color-anti, var(--td-font-white-1, #ffffff));
+  border-color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  background-color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-tag--dark.t-tag--default {
+  color: var(--td-tag-default-font-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-tag--outline.t-tag--default {
+  color: var(--td-tag-default-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-tag-default-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+  background-color: var(--td-tag-default-light-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-tag--outline.t-tag--primary {
+  color: var(--td-tag-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  border-color: var(--td-tag-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  background-color: var(--td-tag-primary-light-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-tag--outline.t-tag--success {
+  color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
+  border-color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
+  background-color: var(--td-tag-success-light-color, var(--td-success-color-1, #e3f9e9));
+}
+.t-tag--outline.t-tag--warning {
+  color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+  border-color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+  background-color: var(--td-tag-warning-light-color, var(--td-warning-color-1, #fff1e9));
+}
+.t-tag--outline.t-tag--danger {
+  color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  border-color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  background-color: var(--td-tag-danger-light-color, var(--td-error-color-1, #fff0ed));
+}
+.t-tag--outline.t-tag--default {
+  color: var(--td-tag-default-font-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-tag--outline.t-tag--default {
+  background-color: var(--td-tag-outline-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-tag--outline.t-tag--primary {
+  background-color: var(--td-tag-outline-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-tag--outline.t-tag--success {
+  background-color: var(--td-tag-outline-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-tag--outline.t-tag--warning {
+  background-color: var(--td-tag-outline-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-tag--outline.t-tag--danger {
+  background-color: var(--td-tag-outline-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-tag--light.t-tag--default {
+  color: var(--td-tag-default-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-tag-default-light-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+  background-color: var(--td-tag-default-light-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-tag--light.t-tag--primary {
+  color: var(--td-tag-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  border-color: var(--td-tag-primary-light-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+  background-color: var(--td-tag-primary-light-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-tag--light.t-tag--success {
+  color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
+  border-color: var(--td-tag-success-light-color, var(--td-success-color-1, #e3f9e9));
+  background-color: var(--td-tag-success-light-color, var(--td-success-color-1, #e3f9e9));
+}
+.t-tag--light.t-tag--warning {
+  color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+  border-color: var(--td-tag-warning-light-color, var(--td-warning-color-1, #fff1e9));
+  background-color: var(--td-tag-warning-light-color, var(--td-warning-color-1, #fff1e9));
+}
+.t-tag--light.t-tag--danger {
+  color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  border-color: var(--td-tag-danger-light-color, var(--td-error-color-1, #fff0ed));
+  background-color: var(--td-tag-danger-light-color, var(--td-error-color-1, #fff0ed));
+}
+.t-tag--light.t-tag--default {
+  color: var(--td-tag-default-font-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-tag--light-outline.t-tag--default {
+  color: var(--td-tag-default-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-tag-default-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+  background-color: var(--td-tag-default-light-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-tag--light-outline.t-tag--primary {
+  color: var(--td-tag-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  border-color: var(--td-tag-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  background-color: var(--td-tag-primary-light-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-tag--light-outline.t-tag--success {
+  color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
+  border-color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
+  background-color: var(--td-tag-success-light-color, var(--td-success-color-1, #e3f9e9));
+}
+.t-tag--light-outline.t-tag--warning {
+  color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+  border-color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+  background-color: var(--td-tag-warning-light-color, var(--td-warning-color-1, #fff1e9));
+}
+.t-tag--light-outline.t-tag--danger {
+  color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  border-color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  background-color: var(--td-tag-danger-light-color, var(--td-error-color-1, #fff0ed));
+}
+.t-tag--light-outline.t-tag--default {
+  color: var(--td-tag-default-font-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  border-color: var(--td-component-border, var(--td-gray-color-4, #dcdcdc));
+}
+.t-tag.t-tag--closable.t-tag--disabled {
+  cursor: not-allowed;
+  color: var(--td-tag-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+  background-color: var(--td-tag-disabled-background-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
+  border-color: var(--td-tag-disabled-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}

package/dist/check-tag/check-tag.vue

@@ -0,0 +1,149 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="className + ' ' + tClass"
+    @click="onClick"
+  >
+    <view
+      :aria-hidden="true"
+      :class="classPrefix + '__icon'"
+    >
+      <block
+        v-if="_icon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_icon.style || ''"
+          :t-class="prefix + '-icon'"
+          :prefix="_icon.prefix"
+          :name="_icon.name"
+          :size="_icon.size"
+          :color="_icon.color"
+          :aria-hidden="!!_icon.ariaHidden"
+          :aria-label="_icon.ariaLabel"
+          :aria-role="_icon.ariaRole"
+        />
+      </block>
+      <slot name="icon" />
+    </view>
+    <view :class="classPrefix + '__text'">
+      <slot />
+      <slot name="content" />
+      <block v-if="tools.isArray(content) && content.length == 2">
+        {{ dataChecked ? content[0] : content[1] }}
+      </block>
+      <block v-else>
+        {{ content }}
+      </block>
+    </view>
+    <t-icon
+      v-if="closable"
+      :class="classPrefix + '__icon-close'"
+      :t-class="prefix + '-icon'"
+      name="close"
+      aria-role="button"
+      aria-label="关闭"
+      @click="onClose"
+    />
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { classNames, calcIcon, coalesce } from '../common/utils';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-tag`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [{
+    key: 'checked',
+    event: 'change',
+  }],
+  externalClasses: [
+    `${prefix}-class`,
+
+  ],
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      className: '',
+      tools,
+      _icon: null,
+
+      dataChecked: coalesce(this.checked, this.defaultChecked),
+    };
+  },
+  watch: {
+    size: 'setClass',
+    disabled: 'setClass',
+    dataChecked: 'setClass',
+    icon: {
+      handler(e) {
+        this._icon = calcIcon(e);
+      },
+      immediate: true,
+    },
+    checked: {
+      handler(value) {
+        this.dataChecked = value;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.setClass();
+  },
+  methods: {
+    setClass() {
+      const { classPrefix } = this;
+      const { size, variant, disabled, dataChecked, shape } = this;
+      const tagClass = [
+        classPrefix,
+        `${classPrefix}--checkable`,
+        disabled ? `${classPrefix}--disabled` : '',
+        dataChecked ? `${classPrefix}--checked` : '',
+        `${classPrefix}--${dataChecked ? 'primary' : 'default'}`,
+        `${classPrefix}--${size}`,
+        `${classPrefix}--${variant}`,
+        `${classPrefix}--${shape}`,
+      ];
+      const className = classNames(tagClass);
+      this.className = className;
+    },
+
+    onClick() {
+      if (this.disabled) return;
+      const { dataChecked } = this;
+
+      this._trigger('click');
+      this._trigger('change', { checked: !dataChecked });
+    },
+
+    onClose(e) {
+      if (this.disabled) return;
+      this._trigger('close', e);
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './check-tag.css';
+
+</style>

package/dist/check-tag/props.ts

@@ -0,0 +1,67 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCheckTagProps } from './type';
+export default {
+  /** 标签选中的状态，默认风格（theme=default）才有选中态 */
+  checked: Boolean,
+  /** 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性 */
+  defaultChecked: Boolean,
+  /** 标签是否可关闭 */
+  closable: Boolean,
+  /** 组件子元素；传入数组时：[选中内容，非选中内容] */
+  content: {
+    type: [String, Number, Array],
+  },
+  /** 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 */
+  disabled: Boolean,
+  /** 标签图标 */
+  icon: {
+    type: [String, Object],
+  },
+  /** 标签类型，有三种：方形、圆角方形、标记型 */
+  shape: {
+    type: String,
+    default: 'square' as TdCheckTagProps['shape'],
+    validator(val: TdCheckTagProps['shape']): boolean {
+      if (!val) return true;
+      return ['square', 'round', 'mark'].includes(val);
+    },
+  },
+  /** 标签尺寸 */
+  size: {
+    type: String,
+    default: 'medium' as TdCheckTagProps['size'],
+    validator(val: TdCheckTagProps['size']): boolean {
+      if (!val) return true;
+      return ['small', 'medium', 'large'].includes(val);
+    },
+  },
+  /** 标签风格变体 */
+  variant: {
+    type: String,
+    default: 'dark' as TdCheckTagProps['variant'],
+    validator(val: TdCheckTagProps['variant']): boolean {
+      if (!val) return true;
+      return ['dark', 'light', 'outline', 'light-outline'].includes(val);
+    },
+  },
+  /** 状态切换时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击标签时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果关闭按钮存在，点击关闭按钮时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+};