@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/checkbox/checkbox.vue

@@ -1,8 +1,8 @@
 <template>
   <view
     :id="tId"
-    :style="tools._style([customStyle])"
-    :class="tools.cls(classPrefix, [placement, theme, ['checked', dataChecked], ['block', block], ['disabled', iDisabled]]) + ' ' + tClass"
+    :style="'' + tools._style([customStyle])"
+    :class="'' + tools.cls(classPrefix, [placement, theme, ['checked', dataChecked], ['block', block], ['disabled', iDisabled]]) + ' ' + tClass"
     aria-role="checkbox"
     :aria-checked="dataChecked ? (dataIndeterminate ? 'mixed' : true) : false"
     :aria-disabled="iDisabled ? true : false"
@@ -10,7 +10,7 @@
   >
     <view
       v-if="theme == 'default'"
-      :class="tools.cls(classPrefix + '__icon', [placement, ['checked', dataChecked], ['disabled', iDisabled]]) + ' ' + tClassIcon"
+      :class="'' + tools.cls(classPrefix + '__icon', [placement, ['checked', dataChecked], ['disabled', iDisabled]]) + ' ' + tClassIcon"
     >
       <slot
         v-if="icon === 'slot'"
@@ -29,16 +29,16 @@
         <t-icon
           v-if="dataChecked && (icon == 'circle' || icon == 'rectangle')"
           :name="dataIndeterminate ? 'minus-' + icon + '-filled' : 'check-' + icon + '-filled'"
-          :class="tools.cls(classPrefix + '__icon-wrapper', [])"
+          :class="'' + tools.cls(classPrefix + '__icon-wrapper', [])"
         />
         <t-icon
           v-if="dataChecked && icon == 'line'"
           :name="dataIndeterminate ? 'minus-' + icon + '-filled' : 'check'"
-          :class="tools.cls(classPrefix + '__icon-wrapper', [])"
+          :class="'' + tools.cls(classPrefix + '__icon-wrapper', [])"
         />
         <view
           v-else-if="!dataChecked && (icon == 'circle' || icon == 'rectangle')"
-          :class="tools.cls(classPrefix + '__icon-' + icon, [['disabled', iDisabled]])"
+          :class="'' + tools.cls(classPrefix + '__icon-' + icon, [['disabled', iDisabled]])"
         />
         <view
           v-if="!dataChecked && icon == 'line'"
@@ -52,14 +52,12 @@
       @click.stop="handleTap"
     >
       <view
-        :class="
-          tools.cls(classPrefix + '__title', [
-            ['disabled', iDisabled],
-            ['checked', dataChecked]
-          ]) +
-            ' ' +
-            tClassLabel
-        "
+        :class="'' + tools.cls(classPrefix + '__title', [
+          ['disabled', iDisabled],
+          ['checked', dataChecked]
+        ]) +
+          ' ' +
+          tClassLabel"
         :style="'-webkit-line-clamp:' + maxLabelRow"
       >
         <block v-if="label">
@@ -69,7 +67,7 @@
         <slot name="label" />
       </view>
       <view
-        :class="tools.cls(classPrefix + '__description', [['disabled', iDisabled]]) + ' ' + tClassContent"
+        :class="'' + tools.cls(classPrefix + '__description', [['disabled', iDisabled]]) + ' ' + tClassContent"
         :style="'-webkit-line-clamp:' + maxContentRow"
       >
         <block v-if="content">
@@ -80,7 +78,7 @@
     </view>
     <view
       v-if="theme == 'default' && !dataBorderless"
-      :class="tools.cls(classPrefix + '__border', [placement]) + ' ' + tClassBorder"
+      :class="'' + tools.cls(classPrefix + '__border', [placement]) + ' ' + tClassBorder"
     />
   </view>
 </template>
@@ -96,141 +94,143 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 
 const name = `${prefix}-checkbox`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [
-    {
-      key: 'checked',
-      event: 'change',
-    },
-  ],
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-label`,
-    `${prefix}-class-icon`,
-    `${prefix}-class-content`,
-    `${prefix}-class-border`,
-  ],
-  mixins: [ChildrenMixin(RELATION_MAP.Checkbox)],
+export default {
   components: {
     TIcon,
   },
-  props: {
-    ...props,
-    theme: {
-      type: String,
-      default: 'default',
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-    tId: {
-      type: String,
+    controlledProps: [
+      {
+        key: 'checked',
+        event: 'change',
+      },
+    ],
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-label`,
+      `${prefix}-class-icon`,
+      `${prefix}-class-content`,
+      `${prefix}-class-border`,
+    ],
+    mixins: [ChildrenMixin(RELATION_MAP.Checkbox)],
+    props: {
+      ...props,
+      theme: {
+        type: String,
+        default: 'default',
+      },
+      tId: {
+        type: String,
+      },
     },
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      iDisabled: false,
-      tools,
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        iDisabled: false,
+        tools,
 
-      dataBorderless: this.borderless,
-      dataIndeterminate: this.indeterminate,
-      dataChecked: coalesce(this.checked, this.defaultChecked),
-    };
-  },
-  computed: {
-    isIsolated() {
-      return this.relationKey === ISOLATED_RELATION_KEY;
+        dataBorderless: this.borderless,
+        dataIndeterminate: this.indeterminate,
+        dataChecked: coalesce(this.checked, this.defaultChecked),
+      };
     },
-  },
-  watch: {
-    borderless: {
-      handler(v) {
-        this.dataBorderless = v;
+    computed: {
+      isIsolated() {
+        return this.relationKey === ISOLATED_RELATION_KEY;
       },
-      immediate: true,
     },
-    indeterminate: {
-      handler(v) {
-        this.dataIndeterminate = v;
+    watch: {
+      borderless: {
+        handler(v) {
+          this.dataBorderless = v;
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
-    checked: {
-      handler(v) {
-        this.dataChecked = v;
+      indeterminate: {
+        handler(v) {
+          this.dataIndeterminate = v;
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
-    disabled: {
-      handler(v) {
-        this.iDisabled = v;
+      checked: {
+        handler(v) {
+          this.dataChecked = v;
+        },
+        immediate: true,
+      },
+      disabled: {
+        handler(v) {
+          this.iDisabled = v;
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  mounted() {
+    mounted() {
 
-  },
-  methods: {
-    innerAfterLinked() {
-      if (this.isIsolated) return;
-      const parent = this[RELATION_MAP.Checkbox];
-      const { value, disabled, borderless } = parent;
-      const { dataValue, checked, checkAll, item, dataIndeterminate } = this;
-      const valueSet = new Set(value);
-      const checkedFromParent = valueSet.has(this.value);
-      const data = {
-        iDisabled: this.disabled == null ? disabled : this.disabled,
-      };
+    },
+    methods: {
+      innerAfterLinked() {
+        if (this.isIsolated) return;
+        const parent = this[RELATION_MAP.Checkbox];
+        const { value, disabled, borderless } = parent;
+        const { dataValue, checked, checkAll, item, dataIndeterminate } = this;
+        const valueSet = new Set(value);
+        const checkedFromParent = valueSet.has(this.value);
+        const data = {
+          iDisabled: this.disabled == null ? disabled : this.disabled,
+        };
 
-      data.dataBorderless = !!(coalesce(this.borderless, borderless));
+        data.dataBorderless = !!(coalesce(this.borderless, borderless));
 
-      data.dataChecked = this.dataChecked || checkedFromParent;
-      if (this.dataChecked) {
-        parent.updateValue({
-          value: dataValue,
-          checked,
-          checkAll,
-          item,
-          indeterminate: dataIndeterminate,
-          trigger: 'init',
-        });
-      }
+        data.dataChecked = this.dataChecked || checkedFromParent;
+        if (this.dataChecked) {
+          parent.updateValue({
+            value: dataValue,
+            checked,
+            checkAll,
+            item,
+            indeterminate: dataIndeterminate,
+            trigger: 'init',
+          });
+        }
 
-      if (this.checkAll) {
-        data.dataChecked = valueSet.size > 0;
+        if (this.checkAll) {
+          data.dataChecked = valueSet.size > 0;
         // data.indeterminate =
-      }
+        }
 
-      Object.keys(data).forEach((key) => {
-        this[key] = data[key];
-      });
-    },
-    handleTap(e) {
-      const { iDisabled, readonly, contentDisabled } = this;
-      const { target } = e.currentTarget.dataset;
+        Object.keys(data).forEach((key) => {
+          this[key] = data[key];
+        });
+      },
+      handleTap(e) {
+        const { iDisabled, readonly, contentDisabled } = this;
+        const { target } = e.currentTarget.dataset;
 
-      if (iDisabled || readonly || (target === 'text' && contentDisabled)) return;
+        if (iDisabled || readonly || (target === 'text' && contentDisabled)) return;
 
-      const { value, label, checkAll, dataIndeterminate } = this;
-      const checked = !this.dataChecked;
-      const parent = this[RELATION_MAP.Checkbox];
+        const { value, label, checkAll, dataIndeterminate } = this;
+        const checked = !this.dataChecked;
+        const parent = this[RELATION_MAP.Checkbox];
 
 
-      if (parent && !this.isIsolated) {
-        parent.updateValue({ value, checkAll, indeterminate: dataIndeterminate, checked, item: { label, value, checked } });
-      } else {
-        this._trigger('change', { context: { value, label }, checked });
-      }
-    },
+        if (parent && !this.isIsolated) {
+          parent.updateValue({ value, checkAll, indeterminate: dataIndeterminate, checked, item: { label, value, checked } });
+        } else {
+          this._trigger('change', { context: { value, label }, checked });
+        }
+      },
 
-    setDisabled(disabled) {
-      this.iDisabled = this.disabled || disabled;
+      setDisabled(disabled) {
+        this.iDisabled = this.disabled || disabled;
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./checkbox.css"></style>

package/dist/checkbox/props.ts

@@ -13,8 +13,8 @@ export default {
   },
   /** 是否开启无边框模式 */
   borderless: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdCheckboxProps['borderless'],
   },
   /** 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 */
   checkAll: Boolean,
@@ -30,8 +30,8 @@ export default {
   contentDisabled: Boolean,
   /** 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled */
   disabled: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdCheckboxProps['disabled'],
   },
   /** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标 */
   icon: {
@@ -70,8 +70,8 @@ export default {
   },
   /** 只读状态 */
   readonly: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdCheckboxProps['readonly'],
   },
   /** -1 时代表独立，不再寻找 parent，用于头条小程序 */
   relationKey: {

package/dist/checkbox/type.ts

@@ -13,7 +13,7 @@ export interface TdCheckboxProps {
   /**
    * 是否开启无边框模式
    */
-  borderless?: boolean;
+  borderless?: boolean | null;
   /**
    * 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用
    * @default false
@@ -38,12 +38,12 @@ export interface TdCheckboxProps {
   /**
    * 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled
    */
-  disabled?: boolean;
+  disabled?: boolean | null;
   /**
    * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标
    * @default 'circle'
    */
-  icon?: 'circle' | 'line' | 'rectangle' | string[];
+  icon?: CheckboxIconType;
   /**
    * 是否为半选
    * @default false
@@ -76,7 +76,7 @@ export interface TdCheckboxProps {
   /**
    * 只读状态
    */
-  readonly?: boolean;
+  readonly?: boolean | null;
   /**
    * -1 时代表独立，不再寻找 parent，用于头条小程序
    * @default ''
@@ -94,3 +94,5 @@ export interface TdCheckboxProps {
     context: { value: boolean | number | string; label: boolean | number | string };
   }) => void;
 }
+
+export type CheckboxIconType = 'circle' | 'line' | 'rectangle' | string[];