Feat/checkbox

common/changes/@visactor/vtable/feat-checkbox_2023-10-12-02-55.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: add checkbox cell type",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}

docs/assets/demo/en/cell-type/checkbox.md

@@ -0,0 +1,60 @@
+---
+category: examples
+group: Cell Type
+title: Checkbox Type
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png
+order: 2-2
+link: '../guide/cell_type/checkbox'
+---
+
+# Data Bar Type
+
+Demonstrate multiple ways to use checkbox
+
+## Critical Configuration
+
+cellType: 'checkbox';
+
+## Code Demo
+
+```javascript livedemo template=vtable
+
+const records = [
+    { percent: '100%', value: 20, check: { text: 'unchecked', checked: false, disable: false } },
+    { percent: '80%', value: 18, check: { text: 'checked', checked: true, disable: false } },
+    { percent: '60%', value: 16, check: { text: 'disable', checked: true, disable: true } },
+    { percent: '40%', value: 14, check: { text: 'disable', checked: false, disable: true } },
+    { percent: '20%', value: 12, check: { text: 'checked', checked: false, disable: false } },
+    { percent: '0%', value: 10, check: { text: 'checked', checked: false, disable: false } },
+    { percent: '0%', value: -10, check: { text: 'checked', checked: false, disable: false } }
+  ];
+
+const columns = [
+ {
+    field: 'percent',
+    title: 'percent',
+    width: 120
+  },
+  {
+    field: 'percent',
+    title: 'checkbox',
+    width: 120,
+    cellType: 'checkbox',
+    disable: true,
+    checked: true
+  },
+  {
+    field: 'check',
+    title: 'checkbox',
+    width: 120,
+    cellType: 'checkbox'
+    // disable: true
+  }
+];
+const option = {
+  records,
+  columns
+};
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+```

docs/assets/demo/menu.json

@@ -218,6 +218,22 @@
             "option": ""
           }
         },
+        {
+          "path": "checkbox",
+          "title": {
+            "zh": "选择框类型",
+            "en": "Checkbox Type"
+          },
+          "meta": {
+            "title": "Checkbox Type",
+            "keywords": "",
+            "category": "demo",
+            "group": "Cell Type",
+            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png",
+            "link": "'../../guide/column_type/checkbox'",
+            "option": ""
+          }
+        },
         {
           "path": "chart",
           "title": {

docs/assets/demo/zh/cell-type/checkbox.md

@@ -0,0 +1,60 @@
+---
+category: examples
+group: Cell Type
+title: 选择框类型
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png
+order: 2-2
+link: '../guide/cell_type/checkbox'
+---
+
+# 数据条类型
+
+展示选择框类型的多种使用方式
+
+## 关键配置
+
+cellType: 'checkbox';
+
+## 代码演示
+
+```javascript livedemo template=vtable
+
+const records = [
+    { percent: '100%', value: 20, check: { text: 'unchecked', checked: false, disable: false } },
+    { percent: '80%', value: 18, check: { text: 'checked', checked: true, disable: false } },
+    { percent: '60%', value: 16, check: { text: 'disable', checked: true, disable: true } },
+    { percent: '40%', value: 14, check: { text: 'disable', checked: false, disable: true } },
+    { percent: '20%', value: 12, check: { text: 'checked', checked: false, disable: false } },
+    { percent: '0%', value: 10, check: { text: 'checked', checked: false, disable: false } },
+    { percent: '0%', value: -10, check: { text: 'checked', checked: false, disable: false } }
+  ];
+
+const columns = [
+ {
+    field: 'percent',
+    title: 'percent',
+    width: 120
+  },
+  {
+    field: 'percent',
+    title: 'checkbox',
+    width: 120,
+    cellType: 'checkbox',
+    disable: true,
+    checked: true
+  },
+  {
+    field: 'check',
+    title: 'checkbox',
+    width: 120,
+    cellType: 'checkbox'
+    // disable: true
+  }
+];
+const option = {
+  records,
+  columns
+};
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+```

docs/assets/guide/en/cell_type/checkbox.md

@@ -0,0 +1,61 @@
+# Checkbox Type
+
+Selection box type cells are suitable for use in tables to provide multiple selection options and allow the user to select or deselect one or more items. Checkbox type cells are widely used in many applications, including task management, data filtering, permission settings, etc.
+
+The advantages of selecting box cells in tables are as follows:
+
+1. The use of selection box type cells is very intuitive and flexible. Users can select one or more options to perform specific actions or filter data based on their needs. This interaction method enables users to control their operations more finely, improving user experience and efficiency.
+2. Selection box type cells usually use different icons or colors to indicate selected and unselected states, providing visual feedback. This way the user can easily identify which options have been selected and which have not.
+
+![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png)
+
+## Introduction of exclusive configuration items for checkbox
+
+The specific configuration items of the checkbox in the configuration are as follows:
+
+1. `checked`: Whether the cell is selected. The default value is false. Configuration functions are supported. Different cell configurations are different.
+2. `disable`: Whether the cell selection box can disable clicks. The default value is false. It supports configuration functions and has different configurations for different cells.
+
+Example: 
+```javascript
+{
+  cellType: 'checkbox',
+  field: 'check',
+  checked: true,
+  disbaled: false
+}
+```
+
+## Introduction of data for checkbox
+
+The data corresponding to the checkbox supports strings or objects, in which the following attributes can be configured in the object:
+
+* text: The text displayed in the cell selection box
+* checked: Whether the cell selection box is selected
+* disable: whether the cell selection box is disabled
+
+Example: 
+```javasxript
+const records = [
+  { 
+    percent: '100%',
+    check: { 
+      text: 'unchecked',
+      checked: false,
+      disable: false
+    }
+  },
+  {
+    percent: '80%',
+    check: { 
+      text: 'checked', 
+      checked: true, 
+      disable: false 
+    }
+  }
+];
+```
+
+`checked` and `disable` support configuration in both data and `column`. The priority of configuration in data is higher than the configuration in `column`.
+
+Through the above introduction, you have learned how to use the checkbox type in the VTable table for data display, I hope it will be helpful to you.

docs/assets/guide/menu.json

@@ -163,6 +163,13 @@
             "en": "progressbar"
           }
         },
+        {
+          "path": "checkbox",
+          "title": {
+            "zh": "选择框",
+            "en": "checkbox"
+          }
+        },
         {
           "path": "sparkline",
           "title": {

docs/assets/guide/zh/cell_type/checkbox.md

@@ -0,0 +1,61 @@
+# checkbox选择框类型
+
+选择框类型单元格适用于在表格中用于提供多选选项，并允许用户选择或取消选择一个或多个项目。复选框类型单元格在许多应用中被广泛使用，包括任务管理、数据筛选、权限设置等。
+
+在表格中选择框单元格的优点如下：
+
+1. 选择框类型单元格的使用非常直观和灵活。用户可以根据自己的需求选择一个或多个选项，以进行特定操作或过滤数据。这种交互方式使得用户能够更加精细地控制其操作，提高了用户体验和效率。
+2. 选择框类型单元格通常使用不同的图标或颜色来表示选中和未选中的状态，提供可视化的反馈。这样用户可以轻松地识别哪些选项已经被选择，哪些选项未被选择。
+
+![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png)
+
+## checkbox选择框的专属配置项介绍
+
+checkbox 选择框类型在配置中的特有配置项如下：
+
+1. `checked`：单元格是否处于选中状态，默认值为 false，支持配置函数，不同单元格配置不同。
+2. `disable`：单元格选择框是否可禁用点击，默认值为 false，支持配置函数，不同单元格配置不同。
+
+示例：
+```javascript
+{
+  cellType: 'checkbox',
+  field: 'check',
+  checked: true,
+  disbaled: false
+}
+```
+
+## checkbox选择框的专属数据类型介绍
+
+checkbox 对应的数据，支持字符串或对象，其中对象中支持配置以下属性：
+
+* text: 该单元格选择框中显示的文字
+* checked: 该单元格选择框是否被选中
+* disable: 该单元格选择框是否被禁用
+
+示例：
+```javasxript
+const records = [
+  { 
+    percent: '100%',
+    check: { 
+      text: 'unchecked',
+      checked: false,
+      disable: false
+    }
+  },
+  {
+    percent: '80%',
+    check: { 
+      text: 'checked', 
+      checked: true, 
+      disable: false 
+    }
+  }
+];
+```
+
+`checked`和`disable`同时支持在数据中和在`column`中配置，数据中配置的优先级高于`column`中的配置。
+
+通过以上介绍，您已学会了如何在 VTable 表格中使用 checkbox 选择框类型进行数据展示，希望对您有所帮助。