fix(checkbox):support max、maxContentRow、maxLabelRow

src/checkbox/checkbox.vue

@@ -17,12 +17,18 @@
         <minus-circle-filled-icon v-else></minus-circle-filled-icon>
       </span>
       <span
-        v-if="labelContent"
+        v-if="labelContent || checkboxContent"
         :class="{ [`${flagName}__label`]: true, [`${flagName}__label-left`]: align === 'right' }"
         @click="(e) => handleChange(e, 'content')"
       >
-        <t-node :content="labelContent"></t-node>
+        <span v-if="labelContent" :style="labelStyle">
+          <t-node :content="labelContent"></t-node>
+        </span>
+        <span v-if="checkboxContent" :class="`${flagName}__description`" :style="contentStyle">
+          <t-node :content="checkboxContent"></t-node>
+        </span>
       </span>
+
       <span v-if="align === 'right'" :class="`${flagName}__icon-right`">
         <input
           type="checkbox"
@@ -39,15 +45,17 @@
         <minus-circle-filled-icon v-else></minus-circle-filled-icon>
       </span>
     </div>
+    <!--下边框 -->
+    <div v-if="!borderless" :class="`${flagName}__border ${flagName}__border--${align}`"></div>
   </div>
 </template>
 
 <script lang="ts">
-import { inject, computed, SetupContext, defineComponent, getCurrentInstance, h, toRefs } from 'vue';
+import { inject, computed, SetupContext, defineComponent, getCurrentInstance, h, toRefs, CSSProperties } from 'vue';
 import { MinusCircleFilledIcon, CheckCircleFilledIcon, CircleIcon } from 'tdesign-icons-vue-next';
 import config from '../config';
 import CheckboxProps from './props';
-import { renderContent, TNode, useDefault } from '../shared';
+import { renderContent, renderTNode, TNode, useDefault, useVModel } from '../shared';
 import { TdCheckboxProps } from './type';
 import ClASSNAMES from '../shared/constants';
 
@@ -57,7 +65,13 @@ const name = `${prefix}-checkbox`;
 export default defineComponent({
   name,
   components: { TNode, MinusCircleFilledIcon },
-  props: CheckboxProps,
+  props: {
+    ...CheckboxProps,
+    borderless: {
+      type: Boolean,
+      value: false,
+    },
+  },
   emits: ['update:checked', 'update:modelValue', 'change'],
   setup(props, context: SetupContext) {
     const flagName = name;
@@ -68,9 +82,11 @@ export default defineComponent({
       'checked',
       'change',
     );
+
     const internalInstance = getCurrentInstance();
     const checkboxGroup: any = inject('checkboxGroup', undefined);
     const labelContent = computed(() => renderContent(internalInstance, 'label', 'default'));
+    const checkboxContent = computed(() => renderTNode(internalInstance, 'content'));
     const indeterminate = computed<boolean>(() => {
       if (props.checkAll && checkboxGroup !== undefined) return checkboxGroup.indeterminate.value;
       return props.indeterminate;
@@ -80,10 +96,13 @@ export default defineComponent({
       if (checkboxGroup !== undefined && props.value !== undefined) {
         return !!checkboxGroup.checkedMap.value[props.value];
       }
+
       return innerChecked.value;
     });
 
     const isDisabled = computed(() => {
+      if (checkboxGroup?.max.value)
+        return checkboxGroup.max.value <= checkboxGroup.groupCheckValue.value.length && !isChecked.value;
       if (props.disabled !== undefined) return props.disabled;
       return !!checkboxGroup?.disabled.value;
     });
@@ -97,6 +116,22 @@ export default defineComponent({
       },
     ]);
 
+    const getLimitRowStyle = (row: number): CSSProperties => ({
+      display: '-webkit-box',
+      overflow: 'hidden',
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: row,
+    });
+
+    const labelStyle = computed(() => ({
+      color: isDisabled.value ? '#dcdcdc' : 'inherit',
+      ...getLimitRowStyle(props.maxLabelRow),
+    }));
+
+    const contentStyle = computed(() => ({
+      ...getLimitRowStyle(props.maxContentRow),
+    }));
+
     const handleChange = (e: Event, source?: string) => {
       if (isDisabled.value) return;
       if (source === 'content' && props.contentDisabled) return;
@@ -114,6 +149,9 @@ export default defineComponent({
       isChecked,
       checkIcons,
       labelContent,
+      labelStyle,
+      checkboxContent,
+      contentStyle,
       isDisabled,
       flagName,
       componentClass,

src/checkbox/demos/base.vue

@@ -1,21 +1,44 @@
 <template>
   <div>
-    <t-checkbox name="checkbox1" value="1" label="多选" @change="changeFn"></t-checkbox>
-    <t-checkbox name="checkbox1" value="2" label="多选" @change="changeFn"></t-checkbox>
+    <t-checkbox-group v-model:value="checkBox" class="checkbox-group-demo" @change="checkgroupChange">
+      <t-checkbox name="checkbox1" value="1" label="多选"></t-checkbox>
+      <t-checkbox name="checkbox1" value="2" label="多选"></t-checkbox>
+      <t-checkbox name="checkbox1" value="3" label="多选"></t-checkbox>
+      <t-checkbox
+        name="checkbox1"
+        value="4"
+        :max-label-row="2"
+        label="多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多"
+      ></t-checkbox>
+      <t-checkbox
+        name="checkbox1"
+        value="5"
+        label="多选"
+        :max-content-row="2"
+        content="多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多选多"
+      ></t-checkbox>
+    </t-checkbox-group>
   </div>
 </template>
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const changeFn = (check: boolean, context: { e: Event }) => {
-      console.log('check: ', check);
-      console.log('context: ', context);
-    };
-    return {
-      changeFn,
-    };
+const checkBox = ref(['2', '3']);
+
+watch(
+  () => checkBox.value,
+  (val) => {
+    console.log('checkBox:', val);
   },
-});
+);
+
+const checkgroupChange = (value: any, context: { e: Event }) => {
+  console.log('value:', value);
+  console.log('Event:', context);
+};
 </script>
+<style lang="less" scoped>
+.checkbox-group-demo {
+  background: #fff;
+}
+</style>

src/checkbox/demos/disable.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="checkbox-demo">
+    <t-checkbox label="多选" disabled />
+    <t-checkbox label="多选" default-checked disabled />
+    <t-checkbox label="多选" align="right" disabled />
+    <t-checkbox label="多选" align="right" checked disabled />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.checkbox-demo {
+  background: #fff;
+}
+</style>

src/checkbox/demos/group.vue

@@ -1,26 +1,34 @@
 <template>
   <div>
-    <t-checkbox-group v-model:value="checkBox1" @change="changeFn">
-      <t-checkbox name="checkbox1" value="1" label="多选"></t-checkbox>
-      <t-checkbox name="checkbox1" value="2" label="多选"></t-checkbox>
-      <t-checkbox name="checkbox1" value="3" label="多选"></t-checkbox>
-    </t-checkbox-group>
+    <t-checkbox-group v-model="checkBox" class="checkbox-group-demo" :options="options"></t-checkbox-group>
   </div>
 </template>
-<script lang="ts">
-import { ref, defineComponent, h } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const checkBox1 = ref(['1', '2']);
-    const changeFn = (value: any, context: { e: Event }) => {
-      console.log('value:', value);
-      console.log('Event:', context);
-    };
-    return {
-      checkBox1,
-      changeFn,
-    };
+const checkBox = ref(['1']);
+const options = [
+  {
+    label: '全选',
+    checkAll: true,
+    indeterminate: true,
   },
-});
+  {
+    label: '多选',
+    value: '1',
+  },
+  {
+    label: '多选',
+    value: '2',
+  },
+  {
+    label: '多选',
+    value: '3',
+  },
+];
 </script>
+<style lang="less" scoped>
+.checkbox-group-demo {
+  background: #fff;
+}
+</style>

src/checkbox/demos/icon.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <t-checkbox-group v-model="checkBox" class="checkbox-group-demo" @change="checkgroupChange">
+      <t-checkbox
+        name="checkbox6"
+        value="1"
+        label="多选"
+        :icon="CheckRectangleFilledIcons"
+        :on-change="checkboxChange"
+      ></t-checkbox>
+      <t-checkbox
+        name="checkbox6"
+        value="2"
+        label="多选"
+        :icon="CheckRectangleFilledIcons"
+        :on-change="checkboxChange"
+      ></t-checkbox>
+      <t-checkbox
+        name="checkbox6"
+        value="3"
+        label="多选"
+        :icon="CheckRectangleFilledIcons"
+        :on-change="checkboxChange"
+      ></t-checkbox>
+    </t-checkbox-group>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, h } from 'vue';
+import { CheckRectangleFilledIcon, RectangleIcon } from 'tdesign-icons-vue-next';
+
+const checkBox = ref(['2', '3']);
+const TCheckRectangleFilledIcon = h(CheckRectangleFilledIcon);
+const TRectangleIcon = h(RectangleIcon);
+const CheckRectangleFilledIcons = [TCheckRectangleFilledIcon, TRectangleIcon];
+
+const checkgroupChange = (value: any, context: { e: Event }) => {
+  console.log('value:', value);
+  console.log('Event:', context);
+};
+const checkboxChange = (check: boolean, context: { e: Event }) => {
+  console.log('check: ', check);
+  console.log('context: ', context);
+};
+</script>
+<style lang="less" scoped>
+.checkbox-group-demo {
+  background: #fff;
+}
+</style>

src/checkbox/demos/indeterminate.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="checkbox-demo">
+    <t-checkbox label="多选" indeterminate></t-checkbox>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.checkbox-demo {
+  background: #fff;
+}
+</style>

src/checkbox/demos/max.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <t-checkbox-group :default-value="checkBox" class="checkbox-group-demo" :max="2">
+      <t-checkbox name="checkbox1" value="1" label="多选" />
+      <t-checkbox name="checkbox1" value="2" label="多选" />
+      <t-checkbox name="checkbox1" value="3" label="多选" />
+    </t-checkbox-group>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const checkBox = ref(['1', '2']);
+</script>
+<style lang="less" scoped>
+.checkbox-group-demo {
+  background: #fff;
+}
+</style>