@tdesign/uniapp 0.7.3 → 0.8.0

package/dist/checkbox-group/checkbox-group.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     :class="classPrefix + ' ' + tClass"
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
   >
     <slot />
     <t-checkbox
@@ -27,7 +27,7 @@
       :readonly="item.readonly || false"
       :placement="item.placement || 'left'"
       :relation-key="relationKey"
-      @change="({checked}) => handleInnerChildChange($event, { item, checked })"
+      @change="(e) => handleInnerChildChange(e, { item, checked: e.checked })"
     />
   </view>
 </template>
@@ -44,217 +44,219 @@ import { ParentMixin, RELATION_MAP } from '../common/relation';
 const name = `${prefix}-checkbox-group`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
+export default {
+  components: {
+    TCheckbox,
   },
-  controlledProps: [
-    {
-      key: 'value',
-      event: 'change',
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-  ],
-  externalClasses: [
-    `${prefix}-class`,
-  ],
+    controlledProps: [
+      {
+        key: 'value',
+        event: 'change',
+      },
+    ],
+    externalClasses: [
+      `${prefix}-class`,
+    ],
 
-  inject: {
-    [RELATION_MAP.FormKey]: {
-      default: null,
+    inject: {
+      [RELATION_MAP.FormKey]: {
+        default: null,
+      },
     },
-  },
 
-  mixins: [ParentMixin(RELATION_MAP.Checkbox)],
-  components: {
-    TCheckbox,
-  },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      checkboxOptions: [],
-      tools,
+    mixins: [ParentMixin(RELATION_MAP.Checkbox)],
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        checkboxOptions: [],
+        tools,
 
-      dataValue: coalesce(this.value, this.defaultValue),
-    };
-  },
-  watch: {
-    value: {
-      handler(v) {
-        this.dataValue = v;
-      },
-      immediate: true,
-      deep: true,
+        dataValue: coalesce(this.value, this.defaultValue),
+      };
     },
-    dataValue: {
-      handler() {
-        this.updateChildren();
+    watch: {
+      value: {
+        handler(v) {
+          this.dataValue = v;
+        },
+        immediate: true,
+        deep: true,
       },
-      immediate: true,
-      deep: true,
-    },
-    options: {
-      handler() {
-        this.initWithOptions();
+      dataValue: {
+        handler() {
+          this.updateChildren();
+        },
+        immediate: true,
+        deep: true,
       },
-      immediate: true,
-      deep: true,
-    },
-    disabled: {
-      handler(v) {
-        if (this.options?.length) {
+      options: {
+        handler() {
           this.initWithOptions();
-          return;
-        }
-        this.getChildren()?.forEach((item) => {
-          item.setDisabled(v);
-        });
+        },
+        immediate: true,
+        deep: true,
+      },
+      disabled: {
+        handler(v) {
+          if (this.options?.length) {
+            this.initWithOptions();
+            return;
+          }
+          this.getChildren()?.forEach((item) => {
+            item.setDisabled(v);
+          });
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  created() {
-    this.$checkAll = null;
-  },
-  mounted() {
-    this.setCheckall();
+    created() {
+      this.$checkAll = null;
+    },
+    mounted() {
+      this.setCheckall();
 
-    this.getChildren()?.forEach((item) => {
-      item.setDisabled(this.disabled);
-    });
-    setTimeout(() => {
-      this.updateChildren();
-    }, 33);
-  },
-  methods: {
-    getChildren() {
-      let items = this.children;
-      if (!items?.length) {
-        items = this.$refs[`${prefix}-checkbox-option`];
-      }
-      return items || [];
+      this.getChildren()?.forEach((item) => {
+        item.setDisabled(this.disabled);
+      });
+      setTimeout(() => {
+        this.updateChildren();
+      }, 33);
     },
+    methods: {
+      getChildren() {
+        let items = this.children;
+        if (!items?.length) {
+          items = this.$refs[`${prefix}-checkbox-option`];
+        }
+        return items || [];
+      },
 
-    updateChildren() {
-      const items = this.getChildren();
-      const { dataValue } = this;
+      updateChildren() {
+        const items = this.getChildren();
+        const { dataValue } = this;
 
 
-      if (items.length > 0) {
-        items.forEach((item) => {
-          if (!item.checkAll) {
-            item.dataChecked = dataValue?.includes(item.value);
+        if (items.length > 0) {
+          items.forEach((item) => {
+            if (!item.checkAll) {
+              item.dataChecked = dataValue?.includes(item.value);
+            }
+          });
+          // 关联可全选项
+          if (items.some(item => item.checkAll)) {
+            this.setCheckall();
           }
-        });
-        // 关联可全选项
-        if (items.some(item => item.checkAll)) {
-          this.setCheckall();
         }
-      }
-    },
+      },
 
-    updateValue({ validChildren, trigger, value, checked, checkAll, item, indeterminate }) {
-      let { dataValue: newValue } = this;
-      const { max } = this;
+      updateValue({ validChildren, trigger, value, checked, checkAll, item, indeterminate }) {
+        let { dataValue: newValue } = this;
+        const { max } = this;
 
-      if (validChildren !== false) {
-        const keySet = new Set(this.getChildren().map(item => item.value));
-        newValue = newValue.filter(value => keySet.has(value));
-      }
+        if (validChildren !== false) {
+          const keySet = new Set(this.getChildren().map(item => item.value));
+          newValue = newValue.filter(value => keySet.has(value));
+        }
 
-      if (max && checked && newValue.length === max) return;
+        if (max && checked && newValue.length === max) return;
 
-      if (checkAll) {
-        const items = this.getChildren();
-        newValue = !checked && indeterminate
-          ? items
-            .filter(data => !(data.disabled && !newValue.includes(data.value)))
-            .map(item => item.value)
-          : items
-            .filter((data) => {
-              if (data.disabled) {
-                return newValue.includes(data.value);
-              }
-              return checked && !data.checkAll;
-            })
-            .map(data => data.value);
-      } else if (checked) {
-        newValue = newValue.concat(value);
-      } else {
-        const index = newValue.findIndex(v => v === value);
-        newValue.splice(index, 1);
-      }
+        if (checkAll) {
+          const items = this.getChildren();
+          newValue = !checked && indeterminate
+            ? items
+              .filter(data => !(data.disabled && !newValue.includes(data.value)))
+              .map(item => item.value)
+            : items
+              .filter((data) => {
+                if (data.disabled) {
+                  return newValue.includes(data.value);
+                }
+                return checked && !data.checkAll;
+              })
+              .map(data => data.value);
+        } else if (checked) {
+          newValue = newValue.concat(value);
+        } else {
+          const index = newValue.findIndex(v => v === value);
+          newValue.splice(index, 1);
+        }
 
-      if (trigger !== 'init') {
-        this._trigger('change', { value: newValue, context: item });
+        if (trigger !== 'init') {
+          this._trigger('change', { value: newValue, context: item });
 
-        this.onChange(newValue);
-      }
-    },
+          this.onChange(newValue);
+        }
+      },
 
-    onChange(value) {
-      if (this[RELATION_MAP.FormKey]
+      onChange(value) {
+        if (this[RELATION_MAP.FormKey]
         && this[RELATION_MAP.FormKey].onValueChange) {
-        this[RELATION_MAP.FormKey].onValueChange(value);
-      }
-    },
+          this[RELATION_MAP.FormKey].onValueChange(value);
+        }
+      },
 
-    initWithOptions() {
-      const { options, dataValue: value, keys } = this;
+      initWithOptions() {
+        const { options, dataValue: value, keys } = this;
 
-      if (!options?.length || !Array.isArray(options)) return;
+        if (!options?.length || !Array.isArray(options)) return;
 
-      const checkboxOptions = options.map((item) => {
-        const isLabel = ['number', 'string'].includes(typeof item);
-        return isLabel
-          ? {
-            label: `${item}`,
-            value: item,
-            checked: value?.includes(item),
-          }
-          : {
-            ...item,
-            label: item[coalesce(keys?.label, 'label')],
-            value: item[coalesce(keys?.value, 'value')],
-            checked: value?.includes(item[coalesce(keys?.value, 'value')]),
-          };
-      });
+        const checkboxOptions = options.map((item) => {
+          const isLabel = ['number', 'string'].includes(typeof item);
+          return isLabel
+            ? {
+              label: `${item}`,
+              value: item,
+              checked: value?.includes(item),
+            }
+            : {
+              ...item,
+              label: item[coalesce(keys?.label, 'label')],
+              value: item[coalesce(keys?.value, 'value')],
+              checked: value?.includes(item[coalesce(keys?.value, 'value')]),
+            };
+        });
 
-      this.checkboxOptions = checkboxOptions;
-    },
+        this.checkboxOptions = checkboxOptions;
+      },
 
-    handleInnerChildChange(tools, { item, checked }) {
-      const rect = {};
+      handleInnerChildChange(tools, { item, checked }) {
+        const rect = {};
 
-      if (item.checkAll) {
-        rect.indeterminate = this.$checkAll?.indeterminate;
-      }
+        if (item.checkAll) {
+          rect.indeterminate = this.$checkAll?.indeterminate;
+        }
 
-      this.updateValue({ ...item, checked, item, ...rect });
-    },
+        this.updateValue({ ...item, checked, item, ...rect });
+      },
 
-    setCheckall() {
-      const items = this.getChildren();
+      setCheckall() {
+        const items = this.getChildren();
 
-      if (!this.$checkAll) {
-        this.$checkAll = items.find(item => item.checkAll);
-      }
+        if (!this.$checkAll) {
+          this.$checkAll = items.find(item => item.checkAll);
+        }
 
-      if (!this.$checkAll) return;
+        if (!this.$checkAll) return;
 
-      const { dataValue } = this;
-      const valueSet = new Set(dataValue?.filter(val => val !== this.$checkAll.value));
-      const isCheckall = items.every(item => (item.checkAll ? true : valueSet.has(item.value)));
+        const { dataValue } = this;
+        const valueSet = new Set(dataValue?.filter(val => val !== this.$checkAll.value));
+        const isCheckall = items.every(item => (item.checkAll ? true : valueSet.has(item.value)));
 
-      this.$checkAll.dataChecked = valueSet.size > 0;
-      this.$checkAll.dataIndeterminate = !isCheckall;
+        this.$checkAll.dataChecked = valueSet.size > 0;
+        this.$checkAll.dataIndeterminate = !isCheckall;
+      },
     },
-  },
-});
+  }),
+};
 
 </script>
 <style scoped>

package/dist/checkbox-group/props.ts

@@ -10,8 +10,8 @@ export default {
   borderless: Boolean,
   /** 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */
   disabled: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdCheckboxGroupProps['disabled'],
   },
   /** 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */
   keys: {
@@ -19,8 +19,8 @@ export default {
   },
   /** 支持最多选中的数量 */
   max: {
-    type: Number,
-    default: undefined,
+    type: [Number, null],
+    default: null as TdCheckboxGroupProps['max'],
   },
   /** 统一设置内部复选框 HTML 属性 */
   name: {
@@ -34,8 +34,8 @@ export default {
   },
   /** 只读状态 */
   readonly: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdCheckboxGroupProps['readonly'],
   },
   /** -1 时代表独立，不再寻找 parent，用于头条小程序 */
   relationKey: {

package/dist/checkbox-group/type.ts

@@ -16,7 +16,7 @@ export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
   /**
    * 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled
    */
-  disabled?: boolean;
+  disabled?: boolean | null;
   /**
    * 用来定义 value / label / disabled 在 `options` 中对应的字段别名
    */
@@ -24,7 +24,7 @@ export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
   /**
    * 支持最多选中的数量
    */
-  max?: number;
+  max?: number | null;
   /**
    * 统一设置内部复选框 HTML 属性
    * @default ''
@@ -38,7 +38,7 @@ export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
   /**
    * 只读状态
    */
-  readonly?: boolean;
+  readonly?: boolean | null;
   /**
    * -1 时代表独立，不再寻找 parent，用于头条小程序
    * @default ''
@@ -66,7 +66,7 @@ export type CheckboxOption = string | number | CheckboxOptionObj;
 export interface CheckboxOptionObj {
   label?: string;
   value?: string | number;
-  disabled?: boolean;
+  disabled?: boolean | null;
   icon?: CheckboxIconType;
   checkAll?: true;
 }

package/dist/col/col.vue

@@ -5,7 +5,7 @@
       tools.cls(classPrefix, [span]),
       (offset ? classPrefix + '--offset-' + offset : '')
     ]"
-    :style="getColStyles(gutter, customStyle)"
+    :style="'' + getColStyles(gutter, customStyle)"
   >
     <slot />
   </view>
@@ -21,29 +21,31 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 const name = `${prefix}-col`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-    virtualHost: true,
-  },
-  externalClasses: [`${prefix}-class`],
-  mixins: [ChildrenMixin(RELATION_MAP.Col)],
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      tools,
-      gutter: '',
-    };
-  },
-  methods: {
-    getColStyles,
-  },
-});
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+      virtualHost: true,
+    },
+    externalClasses: [`${prefix}-class`],
+    mixins: [ChildrenMixin(RELATION_MAP.Col)],
+    props: {
+      ...props,
+    },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        tools,
+        gutter: '',
+      };
+    },
+    methods: {
+      getColStyles,
+    },
+  }),
+};
 
 </script>
 <style scoped src="./col.css"></style>