feat(checkbox): focusable

CHANGELOG.en-US.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+# Feats
+
+- `n-checkbox` add `focusable` prop.
+
 ### Fixes
 
 - Fix `n-cascader` loading triggered when click checkbox.

CHANGELOG.zh-CN.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+# Feats
+
+- `n-checkbox` 增加 `focusable` 属性
+
 ### Fixes
 
 - 修正 `n-cascader` 点击 checkbox 会触发 loading

src/checkbox/demos/enUS/index.demo-entry.md

@@ -22,18 +22,19 @@ event
 | checked | `boolean` | `undefined` |  |
 | default-checked | `boolean` | `false` |  |
 | disabled | `boolean` | `false` |  |
-| label | `string \| function` | `undefined` | Could be a render function. |
+| focusable | `boolean` | `true` |  |
+| label | `string \| (() => VNodeChild)` | `undefined` |  |
 | value | `string \| number` | `undefined` |  |
-| on-update:checked | `(checked: boolean)` | `undefined` |  |
+| on-update:checked | `(checked: boolean) => void` | `undefined` |  |
 
 ### Checkbox Group Props
 
-| Name            | Type                        | Default     | Description |
-| --------------- | --------------------------- | ----------- | ----------- | --- |
-| disabled        | `boolean`                   | `false`     |             |
-| default-value   | `Array<string \| number>    | null`       | `null`      |     |
-| value           | `Array<string \| number>    | null`       | `undefined` |     |
-| on-update:value | `(value: string \| number)` | `undefined` |             |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | `boolean` | `false` |  |
+| default-value | `Array<string \| number>` | `null` | `null` |
+| value | `Array<string \| number> \| null` | `undefined` |
+| on-update:value | `(value: string \| number)` | `undefined` |  |
 
 ## Slots
 

src/checkbox/demos/zhCN/index.demo-entry.md

@@ -17,23 +17,24 @@ event
 
 ### Checkbox Props
 
-| 名称              | 类型                 | 默认值      | 说明           |
-| ----------------- | -------------------- | ----------- | -------------- |
-| checked           | `boolean`            | `undefined` |                |
-| default-checked   | `boolean`            | `false`     |                |
-| disabled          | `boolean`            | `false`     |                |
-| label             | `string \| function` | `undefined` | 可以是渲染函数 |
-| value             | `string \| number`   | `undefined` |                |
-| on-update:checked | `(checked: boolean)` | `undefined` |                |
+| 名称              | 类型                           | 默认值      | 说明 |
+| ----------------- | ------------------------------ | ----------- | ---- |
+| checked           | `boolean`                      | `undefined` |      |
+| default-checked   | `boolean`                      | `false`     |      |
+| disabled          | `boolean`                      | `false`     |      |
+| focusable         | `boolean`                      | `true`      |      |
+| label             | `string \| (() => VNodeChild)` | `undefined` |      |
+| value             | `string \| number`             | `undefined` |      |
+| on-update:checked | `(checked: boolean) => void`   | `undefined` |      |
 
 ### Checkbox Group Props
 
-| 名称            | 类型                        | 默认值      | 说明        |
-| --------------- | --------------------------- | ----------- | ----------- | --- |
-| disabled        | `boolean`                   | `false`     |             |
-| default-value   | `Array<string \| number>    | null`       | `null`      |     |
-| value           | `Array<string \| number>    | null`       | `undefined` |     |
-| on-update:value | `(value: string \| number)` | `undefined` |             |
+| 名称            | 类型                              | 默认值      | 说明 |
+| --------------- | --------------------------------- | ----------- | ---- |
+| disabled        | `boolean`                         | `false`     |      |
+| default-value   | `Array<string \| number>`         | `null`      |
+| value           | `Array<string \| number> \| null` | `undefined` |
+| on-update:value | `(value: string \| number)`       | `undefined` |      |
 
 ## Slots
 

src/checkbox/src/Checkbox.tsx

@@ -51,6 +51,10 @@ const checkboxProps = {
     type: String,
     default: undefined
   },
+  focusable: {
+    type: Boolean,
+    default: true
+  },
   // eslint-disable-next-line vue/prop-name-casing
   'onUpdate:checked': [Function, Array] as PropType<
   MaybeArray<(value: boolean) => void>
@@ -247,6 +251,7 @@ export default defineComponent({
       cssVars,
       label,
       mergedClsPrefix,
+      focusable,
       handleKeyUp,
       handleKeyDown,
       handleClick
@@ -262,7 +267,7 @@ export default defineComponent({
             [`${mergedClsPrefix}-checkbox--table-header`]: tableHeader
           }
         ]}
-        tabindex={mergedDisabled ? undefined : 0}
+        tabindex={mergedDisabled || !focusable ? undefined : 0}
         style={cssVars as CSSProperties}
         onKeyup={handleKeyUp}
         onKeydown={handleKeyDown}