feat(checkbox): 完成checkbox组件

site/sidebar.config.ts

@@ -124,6 +124,12 @@ export default [
     name: 'Forms',
     type: 'component', // 组件文档
     children: [
+      {
+        title: 'Checkbox 多选框',
+        name: 'checkbox',
+        path: '/components/checkbox',
+        component: () => import('tdesign-web-components/checkbox/README.md'),
+      },
       {
         title: 'Input 输入框',
         name: 'input',

src/checkbox/README.md

@@ -0,0 +1,67 @@
+---
+title: Checkbox 多选框
+description: 多选框是一个选择控件，允许用户通过单击在选中和未选中之间切换。
+isComponent: true
+usage: { title: '', description: '' }
+spline: form
+---
+
+### 基础多选框
+
+最简单的多选框形式，常用于表单中数据多选的场景。
+
+{{ base }}
+
+### 联动多选框
+
+联动多选框指多选框与其他组件配合使用。
+
+{{ link }}
+
+### 成组的多选框组
+
+将多选框按一定属性组合使用的多选框组。
+
+{{ group }}
+
+### 受控类多选框
+
+多选框支持受控和非受控两种使用方式。
+
+{{ controlled }}
+
+
+### 最多选中的数量
+
+{{ max }}
+
+## API
+### Checkbox Props
+
+名称 | 类型 | 默认值 | 说明                                                                                                                             | 必传
+-- | -- | -- |--------------------------------------------------------------------------------------------------------------------------------| --
+className | String | - | 类名                                                                                                                             | N
+style | Object | - | 样式                                                                                                                             | N
+checkAll | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用                                                                                      | N
+checked | Boolean | false | 是否选中                                                                                                                           | N
+defaultChecked | Boolean | false | 是否选中。非受控属性                                                                                                                     | N
+children | TNode | - | 多选框内容，同 label。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/main/src/common.ts) | N
+disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled                     | N
+indeterminate | Boolean | false | 是否为半选                                                                                                                          | N
+label | TNode | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/main/src/common.ts)           | N
+readonly | Boolean | false | 只读状态                                                                                                                           | N
+value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean`                                                                                      | N
+onChange | Function |  | TS 类型：`(checked: boolean, context: { e: Event }) => void`<br/>值变化时触发                                                           | N
+
+### CheckboxGroup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式 | N
+disabled | Boolean | - | 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled | N
+max | Number | undefined | 支持最多选中的数量 | N
+options | Array | - | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/main/checkbox/type.ts) | N
+value | Array | [] | 选中值。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/main/checkbox/type.ts) | N
+defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/main/checkbox/type.ts) | N
+onChange | Function |  | TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>值变化时触发，`context.current` 表示当前变化的数据值，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中；`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/main/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N

src/checkbox/_example/base.tsx

@@ -0,0 +1,16 @@
+import 'tdesign-web-components/checkbox';
+import 'tdesign-web-components/space';
+
+export default function CheckboxExample() {
+  return (
+    <t-space size="large">
+      <t-checkbox>未选中项</t-checkbox>
+      <t-checkbox indeterminate>未选中项</t-checkbox>
+      <t-checkbox defaultChecked={true}>选中项</t-checkbox>
+      <t-checkbox disabled>未选禁用项</t-checkbox>
+      <t-checkbox disabled defaultChecked>
+        选中禁用项
+      </t-checkbox>
+    </t-space>
+  );
+}

src/checkbox/_example/controlled.tsx

@@ -0,0 +1,28 @@
+import 'tdesign-web-components/checkbox';
+import 'tdesign-web-components/space';
+
+import { Component, signal } from 'omi';
+
+export default class CheckboxExample extends Component {
+  value1 = signal(false);
+
+  onChange1(value) {
+    this.value1.value = value;
+  }
+
+  render() {
+    return (
+      <t-space>
+        <t-checkbox
+          checked={this.value1.value}
+          onChange={(v) => {
+            this.onChange1(v);
+          }}
+        >
+          受控属性
+        </t-checkbox>
+        <t-checkbox defaultChecked={true}>非受控属性</t-checkbox>
+      </t-space>
+    );
+  }
+}

src/checkbox/_example/group.tsx

@@ -0,0 +1,60 @@
+import 'tdesign-web-components/checkbox';
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/button';
+
+import { Component, signal } from 'omi';
+
+const options = [
+  {
+    value: '北京',
+    label: '北京',
+  },
+  {
+    value: '上海',
+    label: '上海',
+  },
+  {
+    value: '广州',
+    label: '广州',
+  },
+  {
+    label: '全选',
+    checkAll: true as const,
+  },
+];
+
+export default class CheckboxExample extends Component {
+  disabled = signal(false);
+
+  city = signal(['北京']);
+
+  setDisabled(value) {
+    this.disabled.value = value;
+  }
+
+  setCity(value) {
+    this.city.value = value;
+  }
+
+  render() {
+    return (
+      <t-space direction="vertical">
+        <div>选中值: {this.city.value.join('、')}</div>
+        <div>
+          <t-checkbox checked={this.disabled.value} onChange={(value) => this.setDisabled(value)}>
+            禁用全部
+          </t-checkbox>
+        </div>
+
+        <t-checkbox-group
+          disabled={this.disabled.value}
+          value={this.city.value}
+          onChange={(value) => {
+            this.setCity(value);
+          }}
+          options={options}
+        />
+      </t-space>
+    );
+  }
+}

src/checkbox/_example/link.tsx

@@ -0,0 +1,34 @@
+import 'tdesign-web-components/checkbox';
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/button';
+
+import { Component, signal } from 'omi';
+
+export default class CheckboxExample extends Component {
+  checked = signal(['选项二']);
+
+  onChange(value) {
+    this.checked.value = value;
+  }
+
+  render() {
+    return (
+      <t-space direction="vertical">
+        <p>选中值: {this.checked.value.join('，')}</p>
+        <t-checkbox-group
+          onChange={(v) => this.onChange(v)}
+          value={this.checked.value}
+          options={['选项一', '选项二', '选项三']}
+        ></t-checkbox-group>
+        <t-button
+          size="small"
+          onClick={() => {
+            this.checked.value = ['选项一'];
+          }}
+        >
+          重置
+        </t-button>
+      </t-space>
+    );
+  }
+}

src/checkbox/_example/max.tsx

@@ -0,0 +1,52 @@
+import 'tdesign-web-components/checkbox';
+import 'tdesign-web-components/space';
+
+import { Component, signal } from 'omi';
+
+const options = [
+  {
+    value: '北京',
+    label: '北京',
+  },
+  {
+    value: '上海',
+    label: '上海',
+  },
+  {
+    value: '广州',
+    label: '广州',
+  },
+  {
+    value: '深圳',
+    label: '深圳',
+  },
+];
+
+export default class CheckboxExample extends Component {
+  max = signal(2);
+
+  city = signal([]);
+
+  render() {
+    return (
+      <t-space direction="vertical">
+        <div>最多可选:2</div>
+        <div>选中值: {this.city.value.length ? this.city.value.join('、') : '无'}</div>
+
+        <t-checkbox-group
+          max={this.max.value}
+          value={this.city.value}
+          onChange={(value) => {
+            this.city.value = value;
+          }}
+        >
+          {options.map((item) => (
+            <t-checkbox key={item.value} value={item.value}>
+              {item.label}
+            </t-checkbox>
+          ))}
+        </t-checkbox-group>
+      </t-space>
+    );
+  }
+}