feat(checkbox): new checkbox (#519)

* feat(checkbox): new checkbox * test: update snapshots * feat(checkbox): add unit test * fix(checkbox): indeterminate and icon type is line * fix(checkbox): update snap and add vue/server-renderer * test: update snapshot * build: recover transform logic --------- Co-authored-by: anlyyao <[email protected]> Co-authored-by: leejimqiu <[email protected]>
Tencent · Mar 28, 2023 · ac07b05 · ac07b05
1 parent 33d4e4d
commit ac07b05
Show file tree

Hide file tree

Showing 43 changed files with 2,497 additions and 2,755 deletions.
diff --git a/globals.d.ts b/globals.d.ts
@@ -1,2 +1,4 @@
 // 组件版本变量
 declare const __VERSION__: string;
+
+declare module '*.svg';
diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "@vueuse/core": "^8.2.5",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
-    "tdesign-icons-vue-next": "^0.1.3"
+    "tdesign-icons-vue-next": "^0.1.8"
   },
   "peerDependencies": {
     "vue": "^3.2.6"
@@ -113,10 +113,11 @@
     "@types/prismjs": "^1.16.2",
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "~5.34.0",
-    "@vitejs/plugin-vue": "^1.2.3",
+    "@vitejs/plugin-vue": "^2.3.1",
     "@vitejs/plugin-vue-jsx": "^1.3.3",
     "@vitest/ui": "^0.16.0",
     "@vue/eslint-config-typescript": "^9.1.0",
+    "@vue/server-renderer": "^3.2.4",
     "@vue/runtime-core": "^3.2.41",
     "@vue/test-utils": "^2.0.0-rc.17",
     "autoprefixer": "^10.2.4",
@@ -159,7 +160,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",
     "rollup-pluginutils": "^2.8.2",
-    "tdesign-icons-view": "^0.1.0",
+    "tdesign-icons-view": "^0.1.6",
     "tdesign-publish-cli": "^0.0.10",
     "tdesign-site-components": "^0.11.19",
     "tslib": "^2.3.1",

diff --git a/scripts/test/generate-coverage.js b/scripts/test/generate-coverage.js
@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const camelCase = require('camelcase');
+const camelCase = require('lodash/camelCase');
 
 const DomParser = require('dom-parser');
 const parser = new DomParser();

diff --git a/site/web/plugin-tdoc/md-to-vue.js b/site/web/plugin-tdoc/md-to-vue.js
@@ -177,6 +177,9 @@ function customRender({ source, file, md }) {
     designMd: '<td-doc-empty></td-doc-empty>',
   };
 
+  // fix table | render error
+  apiMd = apiMd.replace(/`[^`]+`/g, (str) => str.replace(/\|/g, '\\|'));
+
   if (pageData.isComponent) {
     mdSegment.demoMd = md.render.call(
       md,

diff --git a/site/web/test-coverage.js b/site/web/test-coverage.js
@@ -8,7 +8,7 @@ module.exports = {
   calendar: { statements: '90.62%', branches: '81.66%', functions: '91.66%', lines: '90.62%' },
   cascader: { statements: '96.57%', branches: '84.61%', functions: '90.9%', lines: '96.57%' },
   cell: { statements: '100%', branches: '95.45%', functions: '100%', lines: '100%' },
-  checkbox: { statements: '97.9%', branches: '84%', functions: '86.66%', lines: '97.9%' },
+  checkbox: { statements: '99.77%', branches: '86.95%', functions: '100%', lines: '99.77%' },
   collapse: { statements: '97.41%', branches: '81.63%', functions: '88.23%', lines: '97.41%' },
   countDown: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
   dateTimePicker: { statements: '99.24%', branches: '84.04%', functions: '100%', lines: '99.24%' },

diff --git a/src/checkbox-group/checkbox-group.en-US.md b/src/checkbox-group/checkbox-group.en-US.md
@@ -0,0 +1,20 @@
+:: BASE_DOC ::
+
+## API
+### CheckboxGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+disabled | Boolean | - | \- | N
+max | Number | undefined | \- | N
+name | String | - | \- | N
+options | Array | - | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+value | Array | [] | `v-model` and `v-model:value` is supported。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+defaultValue | Array | [] | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+onChange | Function |  | Typescript：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N
+
+### CheckboxGroup Events
+
+name | params | description
+-- | -- | --
+change | `(value: T, context: CheckboxGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
diff --git a/src/checkbox-group/checkbox-group.md b/src/checkbox-group/checkbox-group.md
@@ -0,0 +1,20 @@
+:: BASE_DOC ::
+
+## API
+### CheckboxGroup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+disabled | Boolean | - | 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled | N
+max | Number | undefined | 支持最多选中的数量 | N
+name | String | - | 统一设置内部复选框 HTML 属性 | 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/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+value | Array | [] | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+onChange | Function |  | TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N
+
+### CheckboxGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: T, context: CheckboxGroupChangeContext)` | 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>