From 0a57ae66b33f0f68d5125f41097634f66211953b Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Fri, 17 May 2024 17:51:20 +0800
Subject: [PATCH 01/18] =?UTF-8?q?feat(Checkbox):=20=E5=A4=8D=E9=80=89?=
 =?UTF-8?q?=E6=A1=86=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/release-please.yml |   3 +-
 docs/.vitepress/config.ts            |   1 +
 docs/.vitepress/theme/index.ts       |   1 +
 docs/components/checkbox.md          | 212 ++++++++++++++++
 docs/components/table.md             | 321 ++++++++++++++++++++++--
 scripts/index.js                     |   4 +-
 src/components/Checkbox.vue          |  72 ++++++
 src/components/CheckboxButton.vue    |   4 +
 src/components/CheckboxGroup.vue     |  31 +++
 src/components/Input.vue             |  12 +-
 src/components/Table.vue             | 360 ++++++++++++++++++---------
 src/index.ts                         |   3 +
 style/checkbox/index.css             | 126 ++++++++++
 style/checkbox/index.js              |   1 +
 14 files changed, 1001 insertions(+), 150 deletions(-)
 create mode 100644 docs/components/checkbox.md
 create mode 100644 src/components/Checkbox.vue
 create mode 100644 src/components/CheckboxButton.vue
 create mode 100644 src/components/CheckboxGroup.vue
 create mode 100644 style/checkbox/index.css
 create mode 100644 style/checkbox/index.js

diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
index 679d3396..3fc077b7 100644
--- a/.github/workflows/release-please.yml
+++ b/.github/workflows/release-please.yml
@@ -31,7 +31,8 @@ jobs:
     steps:
       - name: Print Previous Job Output
         run: |
-          echo "Previous job output: ${{ needs.release.outputs }}"
+          echo "Previous job output: "
+          echo "${{ needs.release.outputs }}" | jq .
 
   publish:
     runs-on: ubuntu-latest
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index b46b1737..a4393c76 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -52,6 +52,7 @@ export default defineConfig({
           { text: 'Image 图片', link: '/components/image' },
           { text: 'Shadow 阴影', link: '/components/shadow' },
           { text: 'Table 表格', link: '/components/table' },
+          { text: 'Checkbox 复选框', link: '/components/checkbox' },
         ],
       },
     ],
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 5e0d931b..4ecac9ef 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -19,6 +19,7 @@ import CodePreview from '../../../src/app_components/CodePreview.vue';
 import '../../../style/message';
 import '../../../style/shadow';
 import '../../../style/table';
+import '../../../style/checkbox';
 
 export default {
   extends: DefaultTheme,
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
new file mode 100644
index 00000000..3eac14f5
--- /dev/null
+++ b/docs/components/checkbox.md
@@ -0,0 +1,212 @@
+# Checkbox 复选框
+
+在一组备选项中进行多选。适用提醒用户勾选场景，突出多选框选项，可以有效增加用户识别度。
+
+## 演示
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { Checkbox, CheckboxGroup } from '../../src'
+
+  const cities= [['CD', '成都'], ['BJ', '北京'], ['SZ', '深圳'], ['HZ', '杭州']]
+
+  const checkedCities = ref(['CD', 'SZ'])
+  const checkAll = ref(false)
+  const isIndeterminate = ref(true)
+
+  function handleCheckAllChange(val: boolean) {
+    checkedCities.value = val ? cities.map(c => c[0]) : []
+    isIndeterminate.value = false
+  }
+  function handleGroupChange(val: string[]) {
+    const checkedCount = val.length
+    checkAll.value = checkedCount === cities.length
+    isIndeterminate.value = checkedCount < cities.length
+  }
+</script>
+
+### 基础用法
+
+单独使用可以表示两种状态之间的切换；在 `nt-checkbox` 元素中定义 `v-model` 绑定变量，单一的 `checkbox` 中，默认绑定变量的值会是 `Boolean`，选中为 `true`。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-checkbox label="Option1"></nt-checkbox>
+  </textarea>
+  </CodePreview>
+</ClientOnly>
+
+### 禁用状态
+
+多选框不可用状态, 设置 `disabled` 属性即可。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-checkbox label="Option1" disabled></nt-checkbox>
+  </textarea>
+  </CodePreview>
+</ClientOnly>
+
+### 选项框组
+
+使用 `nt-checkbox-group` 元素来包裹 `nt-checkbox` 元素，实现复选框组。使用时需要给 `nt-checkbox` 传递 `value` 属性。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    import { ref } from 'vue';
+    const cities= [['CD', '成都'], ['BJ', '北京'], ['SZ', '深圳'], ['HZ', '杭州']];
+    const checkedCities = ref(['CD', 'SZ']);
+  </script>
+  <template>
+    <nt-checkbox-group v-model="checkedCities">
+      <nt-checkbox v-for="city in cities" :key="city[0]" :value="city[0]" :label="city[1]"></nt-checkbox>
+    </nt-checkbox-group>
+  </template>
+  </textarea>
+  <template #preview>
+    <CheckboxGroup v-model="checkedCities">
+      <Checkbox v-for="city in cities" :key="city[0]" :value="city[0]" :label="city[1]"></Checkbox>
+    </CheckboxGroup>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 中间状态
+
+设置 `indeterminate` 属性，表示不确定状态，一般用于实现全选的效果，实现部分选中的状态。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    import { ref } from 'vue';
+    import { Checkbox, CheckboxGroup } from '../../src';
+    const cities= [['CD', '成都'], ['BJ', '北京'], ['SZ', '深圳'], ['HZ', '杭州']];
+    const checkedCities = ref(['CD', 'SZ']);
+    const checkAll = ref(false);
+    const isIndeterminate = ref(true);
+    function handleCheckAllChange(val: boolean) {
+      checkedCities.value = val ? cities.map(c => c[0]) : [];
+      isIndeterminate.value = false;
+    }
+    function handleGroupChange(val: string[]) {
+      const checkedCount = val.length;
+      checkAll.value = checkedCount === cities.length;
+      isIndeterminate.value = checkedCount < cities.length;
+    }
+  </script>
+  <template>
+    <nt-checkbox
+      v-model="checkAll"
+      label="全选"
+      :indeterminate="isIndeterminate"
+      @change="handleCheckAllChange"
+    />
+    <nt-checkbox-group
+      v-model="checkedCities"
+      @change="handleGroupChange"
+    >
+      <nt-checkbox
+        v-for="city in cities"
+        :key="city[0]"
+        :value="city[0]"
+        :label="city[1]"
+      ></nt-checkbox>
+    </nt-checkbox-group>
+  </template>
+  </textarea>
+  <template #preview>
+    <Checkbox
+      v-model="checkAll"
+      label="全选"
+      :indeterminate="isIndeterminate"
+      @change="handleCheckAllChange"
+    />
+    <CheckboxGroup
+      v-model="checkedCities"
+      @change="handleGroupChange"
+    >
+      <Checkbox
+        v-for="city in cities"
+        :key="city[0]"
+        :value="city[0]"
+        :label="city[1]"
+      ></Checkbox>
+    </CheckboxGroup>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 按钮样式
+
+只需要设置 `checkbox` 的 `type` 为 `button`；就能将复选框变为按钮样式
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    import { ref } from 'vue';
+    const cities= [['CD', '成都'], ['BJ', '北京'], ['SZ', '深圳'], ['HZ', '杭州']];
+    const checkedCities = ref(['CD', 'SZ']);
+  </script>
+  <template>
+    <nt-checkbox-group v-model="checkedCities">
+      <nt-checkbox
+        v-for="city in cities"
+        :key="city[0]"
+        :value="city[0]"
+        :label="city[1]"
+        type="button"
+      ></nt-checkbox>
+    </nt-checkbox-group>
+  </template>
+  </textarea>
+  <template #preview>
+    <CheckboxGroup v-model="checkedCities">
+      <Checkbox
+        v-for="city in cities"
+        :key="city[0]"
+        :value="city[0]"
+        :label="city[1]"
+        type="button"
+      ></Checkbox>
+    </CheckboxGroup>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### Checkbox Props
+
+| 参数                    | 说明                           | 类型      | 默认值  |
+| ----------------------- | ------------------------------ | --------- | ------- |
+| `model-value / v-model` | 选中项绑定的值                 | `boolean` | -       |
+| `indeterminate`         | 设置不确定状态，仅负责样式控制 | `boolean` | `false` |
+| `name`                  | 原生 `name` 属性               | `string`  | -       |
+| `disabled`              | 是否禁用                       | `boolean` | `false` |
+| `value`                 | 原生 `value` 属性              | `string`  | -       |
+| `label`                 | 显示的标签                     | `string`  | -       |
+| `type`                  | 是否设置为按钮风格             | `button`  | -       |
+
+### CheckboxGroup Props
+
+| 参数                    | 说明           | 类型       | 默认值 |
+| ----------------------- | -------------- | ---------- | ------ |
+| `model-value / v-model` | 选中项绑定的值 | `string[]` | -      |
+
+### Checkbox Events
+
+| 事件     | 说明             | 参数                         |
+| -------- | ---------------- | ---------------------------- |
+| `change` | 选中项变化时触发 | `(checked: boolean) => void` |
+
+### CheckboxGroup Events
+
+| 事件     | 说明             | 参数                            |
+| -------- | ---------------- | ------------------------------- |
+| `change` | 选中项变化时触发 | `(checkList: string[]) => void` |
diff --git a/docs/components/table.md b/docs/components/table.md
index 9fcc9cf1..e29ff53f 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -5,8 +5,8 @@
 ## 演示
 
 <script setup>
-  import { h } from 'vue'
-  import { Table, Button } from '../../src'
+  import { h, ref } from 'vue'
+  import { Table, Button, Input } from '../../src'
 
   const dataSource1 = [
     {
@@ -74,6 +74,47 @@
     },
   ]
 
+  const dataSource3 = [
+    {
+      name: '李四',
+      age: 19,
+      address: '北京朝阳',
+    },
+    {
+      name: '李四',
+      age: 19,
+      address: '北京西城',
+    },
+    {
+      name: '王五',
+      age: 18,
+      address: '北京朝阳',
+    },
+    {
+      name: '张三',
+      age: 20,
+      address: '北京朝阳',
+    },
+  ]
+
+   const dataSource4 = ref([
+    {
+      name: '李四',
+      age: 19,
+      address: '北京朝阳',
+    },
+    {
+      name: '张三',
+      age: 18,
+      address: '北京朝阳',
+    },
+    {
+      name: '王五',
+      age: 20,
+      address: '北京朝阳',
+    },
+  ])
+
   const columns1 = [{
     title: '姓名',
     key: 'name',
@@ -132,6 +173,107 @@
       h(Button, { type: 'text' }, { default: () => '删除'})
     ]
   }]
+  const columns4 = [{
+    title: '姓名',
+    key: 'name'
+  }, {
+    title: '基本信息',
+    children: [{
+      title: '年龄',
+      key: 'age',
+      sorter: true,
+    }, {
+      title: '住址',
+      key: 'address'
+    }]
+  }, {
+    title: '操作',
+    key: 'action',
+    render: () => [
+      h(Button, { type: 'text' }, { default: () => '编辑'}),
+      h(Button, { type: 'text' }, { default: () => '删除'})
+    ]
+  }]
+
+  const columns5 = [{
+    title: '姓名',
+    key: 'name',
+    colspan: (rowData, rowIndex) => {
+      if (rowIndex === 2) {
+        return 2
+      }
+      return 1
+    },
+    rowspan: (rowData, rowIndex) => {
+      if (rowIndex === 0) {
+        return 2
+      } else if (rowIndex === 1) {
+        return 0
+      } else {
+        return 1
+      }
+    }
+  }, {
+    title: '基本信息',
+    children: [{
+      title: '年龄',
+      key: 'age',
+      colspan: (rowData, rowIndex) => {
+        if (rowIndex === 2) {
+          return 0
+        }
+        return 1
+      },
+      rowspan: (rowData, rowIndex) => {
+        if (rowIndex === 0) {
+          return 2
+        } else if (rowIndex === 1) {
+          return 0
+        } else {
+          return 1
+        }
+      }
+    }, {
+      title: '住址',
+      key: 'address'
+    }]
+  }, {
+    title: '操作',
+    key: 'action',
+    render: () => [
+      h(Button, { type: 'text' }, { default: () => '编辑'}),
+      h(Button, { type: 'text' }, { default: () => '删除'})
+    ]
+  }]
+
+  const columns6 = [{
+    title: '姓名',
+    key: 'name',
+  }, {
+    title: '年龄',
+    key: 'age',
+    render: (row, index) => {
+      return h(Input, {
+        modelValue: row.age,
+        htmlType: 'number',
+        'onUpdate:modelValue': (value) => {
+          const newData = [...dataSource4.value]
+          newData[index].age = value
+          dataSource4.value = newData
+        }
+      })
+    }
+  }, {
+    title: '住址',
+    key: 'address'
+  }, {
+    title: '操作',
+    key: 'action',
+    render: () => [
+      h(Button, { type: 'text' }, { default: () => '编辑'}),
+      h(Button, { type: 'text' }, { default: () => '删除'})
+    ]
+  }]
 
   const defaultSort = { key: 'age', order: 'desc' }
 
@@ -256,7 +398,7 @@
 
 ### 固定表头和列
 
-给表格设置 `max-height` 样式，然后设置 `fixed-head` 属性为 `true` 即可实现固定表头。 给列设置宽度，然后给需要固定的列设置 `fixed` 为 `left` 或 `right`，就能实现固定列。
+给表格设置 `max-height` 样式，然后设置 `fixed-head` 属性为 `true` 即可实现固定表头。 将表格 将 `table-layout` 设置为 `fixed`，然后将需要固定的列设置 `fixed` 为 `left` 或 `right`，就能实现固定列。
 
 <ClientOnly>
   <CodePreview>
@@ -308,17 +450,18 @@
     }]
   </script>
   <template>
-    <nt-table :data="dataSource2" :columns="columns" fixed-head style="max-height:200px;" class="nt-scrollbar"></nt-table>
+    <nt-table :data="dataSource2" :columns="columns" table-layout="fixed" fixed-head style="max-height:200px;" class="nt-scrollbar"></nt-table>
   </template>
   </textarea>
   <template #preview>
-    <Table :data="dataSource2" :columns="columns2" fixed-head style="max-height:200px;" class="nt-scrollbar"></Table>
+    <Table :data="dataSource2" :columns="columns2" table-layout="fixed" fixed-head style="max-height:200px;" class="nt-scrollbar"></Table>
   </template>
   </CodePreview>
 </ClientOnly>
 
-> 1. 设置 `max-height` 可以通过直接设置 `style`；也可以通过 [tailwindcss-max-height](https://www.tailwindcss.cn/docs/max-height#setting-the-maximum-height)
-> 2. 如果想改变滚动条样式，参考 [工具样式-滚动条](../css-util#_2-滚动条样式)；引入样式表，然后给 `Table` 组件, 添加 `nt-scrollbar` 的类名: `<nt-table ... fixed-head class="max-h-24 nt-scrollbar"></nt-table>`
+> 1. _切记_: 要固定列，需要使用 `fixed` 布局，不能将 `table-layout` 设置为 `auto`
+> 2. 设置 `max-height` 可以通过直接设置 `style`；也可以通过 [tailwindcss-max-height](https://www.tailwindcss.cn/docs/max-height#setting-the-maximum-height)
+> 3. 如果想改变滚动条样式，参考 [工具样式-滚动条](../css-util#_2-滚动条样式)；引入样式表，然后给 `Table` 组件, 添加 `nt-scrollbar` 的类名: `<nt-table ... fixed-head class="max-h-24 nt-scrollbar"></nt-table>`
 
 ### 排序
 
@@ -383,31 +526,159 @@
   </CodePreview>
 </ClientOnly>
 
+### 多级表头
+
+配置 `columns` 的时候，给某一列增加一个 `children` 就能实现表头分组
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    const columns4 = [{
+      title: '姓名',
+      key: 'name'
+    }, {
+      title: '基本信息',
+      children: [{
+        title: '年龄',
+        key: 'age',
+        sorter: true,
+      }, {
+        title: '住址',
+        key: 'address'
+      }]
+    }, {
+      title: '操作',
+      key: 'action',
+      render: () => [
+        h(NtButton, { type: 'text' }, { default: () => '编辑'}),
+        h(NtButton, { type: 'text' }, { default: () => '删除'})
+      ]
+    }]
+  </script>
+  <template>
+    <nt-table :data="dataSource1" :columns="columns4" border></nt-table>
+  </template>
+  </textarea>
+  <template #preview>
+    <Table :data="dataSource1" :columns="columns4" border></Table>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 合并单元格
+
+通过配置 `columns` 中的 `colspan`、`rowspan` 来实现合并单元格；当 `colspan` 或者 `rowspan` 为 `0` 时，则不显示当前单元格
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <template>
+    <nt-table :data="dataSource3" :columns="columns5" border></nt-table>
+  </template>
+  </textarea>
+  <template #preview>
+    <Table :data="dataSource3" :columns="columns5" border></Table>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 可编辑表格
+
+通过自定义渲染的形式能够快速实现单元格的编辑
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    const dataSource4 = ref([
+      {
+        name: '李四',
+        age: 19,
+        address: '北京朝阳',
+      },
+      {
+        name: '张三',
+        age: 18,
+        address: '北京朝阳',
+      },
+      {
+        name: '王五',
+        age: 20,
+        address: '北京朝阳',
+      },
+    ])
+    const columns6 = [{
+      title: '姓名',
+      key: 'name',
+    }, {
+      title: '年龄',
+      key: 'age',
+      render: (row, index) => {
+        return h(Input, {
+          modelValue: row.age,
+          htmlType: 'number',
+          'onUpdate:modelValue': (value) => {
+            const newData = [...dataSource4.value]
+            newData[index].age = value
+            dataSource4.value = newData
+          }
+        })
+      }
+    }, {
+      title: '住址',
+      key: 'address'
+    }, {
+      title: '操作',
+      key: 'action',
+      render: () => [
+        h(Button, { type: 'text' }, { default: () => '编辑'}),
+        h(Button, { type: 'text' }, { default: () => '删除'})
+      ]
+    }]
+  </script>
+  <template>
+    <nt-table :data="dataSource4" :columns="columns6" border></nt-table>
+  </template>
+  </textarea>
+  <template #preview>
+    <Table :data="dataSource4" :columns="columns6" border></Table>
+    <hr />
+    <div>{{ JSON.stringify(dataSource4, null, 2) }}</div>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
 ## API
 
 ### Table Props
 
-| 参数             | 说明             | 类型                     | 默认值  |
-| ---------------- | ---------------- | ------------------------ | ------- |
-| `data`           | 数据源           | `array`                  | -       |
-| `columns`        | 表格列配置       | `ColumnOption[]`         | -       |
-| `default-sort`   | 初始排序         | `SortOption`             | -       |
-| `stripe`         | 是否为斑马纹     | `boolean`                | `true`  |
-| `border`         | 是否显示四周边框 | `boolean`                | `false` |
-| `fixed-head`     | 是否固定表头     | `boolean`                | `false` |
-| `sorter`         | 使用手动排序     | `(data: any[]) => any[]` | -       |
-| `render-summary` | 渲染表尾合计行   | `() => VNode \| VNode[]` | -       |
+| 参数             | 说明                           | 类型                     | 默认值  |
+| ---------------- | ------------------------------ | ------------------------ | ------- |
+| `data`           | 数据源                         | `array`                  | -       |
+| `columns`        | 表格列配置                     | `ColumnOption[]`         | -       |
+| `default-sort`   | 初始排序                       | `SortOption`             | -       |
+| `stripe`         | 是否为斑马纹                   | `boolean`                | `true`  |
+| `border`         | 是否显示四周边框               | `boolean`                | `false` |
+| `fixed-head`     | 是否固定表头                   | `boolean`                | `false` |
+| `sorter`         | 使用手动排序                   | `(data: any[]) => any[]` | -       |
+| `render-summary` | 渲染表尾合计行                 | `() => VNode \| VNode[]` | -       |
+| `table-layout`   | 表格的 `table-layout` 样式属性 | `fixed`、`auto`          | `auto`  |
 
 `ColumnOption` 选项:
 
-| 字段     | 说明                   | 类型                                            | 默认值  |
-| -------- | ---------------------- | ----------------------------------------------- | ------- |
-| `title`  | 列名                   | `string`                                        | -       |
-| `key`    | 列标识, 自动排序时必传 | `string`                                        | -       |
-| `width`  | 列宽                   | `string`、`number`                              | -       |
-| `fixed`  | 列是否固定             | `left`、`right`                                 | -       |
-| `sorter` | 是否排序               | `boolean`                                       | `false` |
-| `render` | 自定义渲染             | `(row: any, index: number) => VNode \| VNode[]` | -       |
+| 字段           | 说明                   | 类型                                                     | 默认值  |
+| -------------- | ---------------------- | -------------------------------------------------------- | ------- |
+| `title`        | 列名                   | `string`                                                 | -       |
+| `key`          | 列标识, 自动排序时必传 | `string`                                                 | -       |
+| `width`        | 列宽                   | `string`、`number`                                       | -       |
+| `fixed`        | 列是否固定             | `left`、`right`                                          | -       |
+| `sorter`       | 是否排序               | `boolean`                                                | `false` |
+| `render`       | 自定义渲染             | `(row: any, index: number) => VNode \| VNode[]`          | -       |
+| `titleRowspan` | 表头的行所占的行数     | `number`                                                 | -       |
+| `titleColspan` | 表头的单元格所占的列数 | `number`                                                 | -       |
+| `rowspan`      | 单元格的 `rowspan`     | `number` \| `(rowData: any, rowIndex: number) => number` | -       |
+| `colspan`      | 单元格的 `colspan`     | `number` \| `(rowData: any, rowIndex: number) => number` | -       |
 
 `SortOption` 选项
 
diff --git a/scripts/index.js b/scripts/index.js
index 074fd22a..ee342d44 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -60,13 +60,13 @@ async function createComponentTemplate(name) {
     '### 基础用法',
     '基础用法',
     '## API',
-    '### ${name} Props',
+    `### ${name} Props`,
     '| 参数 | 说明 | 类型 | 默认值 |',
     '| ---- | ---- | ---- | ---- |',
     '| x | x | x | x |',
   ];
   await write(
-    path.join(process.cwd(), 'docs/components', `${name}.md`),
+    path.join(process.cwd(), 'docs/components', `${name.toUpperCase()}.md`),
     docTemplateContents.join('\r\n'),
   );
   console.log('创建成功');
diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
new file mode 100644
index 00000000..0445e5ba
--- /dev/null
+++ b/src/components/Checkbox.vue
@@ -0,0 +1,72 @@
+<template>
+  <label
+    :class="[
+      'nt-checkbox',
+      indeterminate ? 'nt-checkbox--indeterminate' : '',
+      disabled ? 'nt-checkbox--disabled' : '',
+      type === 'button' ? 'nt-checkbox--button' : '',
+    ]"
+  >
+    <input
+      type="checkbox"
+      class="nt-checkbox__input"
+      :name="name"
+      :checked="isChecked"
+      @change="handleChange"
+      :disabled="disabled"
+      :value="value"
+    />
+    <span v-if="type !== 'button'" class="nt-checkbox__inner"></span>
+    <span class="nt-checkbox__label">{{ label }}</span>
+  </label>
+</template>
+<script setup lang="ts">
+import { Ref, computed, inject } from 'vue';
+
+const checkedModel = defineModel({ type: Boolean });
+
+const props = withDefaults(
+  defineProps<{
+    /** 设置不确定状态，仅负责样式控制 */
+    indeterminate?: boolean;
+    /** 原生 name 属性 */
+    name?: string;
+    /** 显示的 label 文本 */
+    label?: string;
+    disabled?: boolean;
+    value?: string;
+    type?: 'button';
+  }>(),
+  {
+    indeterminate: false,
+    disabled: false,
+  },
+);
+
+const emits = defineEmits(['change']);
+
+const { checkList, updateCheck } = inject<{
+  checkList: Ref<any[]> | null;
+  updateCheck: null | ((value: any) => void);
+}>('nt-check-group-check', {
+  checkList: null,
+  updateCheck: null,
+});
+
+const isChecked = computed(() => {
+  if (checkList != null) {
+    return checkList.value.includes(props.value);
+  }
+  return checkedModel.value;
+});
+
+function handleChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const checked = target.checked;
+  if (updateCheck != null) {
+    updateCheck(props.value);
+  }
+  checkedModel.value = checked;
+  emits('change', checked);
+}
+</script>
diff --git a/src/components/CheckboxButton.vue b/src/components/CheckboxButton.vue
new file mode 100644
index 00000000..be399d7e
--- /dev/null
+++ b/src/components/CheckboxButton.vue
@@ -0,0 +1,4 @@
+<template></template>
+<script setup lang="ts">
+import Checkbox from './Checkbox.vue';
+</script>
diff --git a/src/components/CheckboxGroup.vue b/src/components/CheckboxGroup.vue
new file mode 100644
index 00000000..8f0da04c
--- /dev/null
+++ b/src/components/CheckboxGroup.vue
@@ -0,0 +1,31 @@
+<template>
+  <div
+    :class="{
+      'nt-check-group': true,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue';
+
+const checkList = defineModel({ default: [] as any[] });
+const emits = defineEmits(['change']);
+
+function updateCheck(val: any) {
+  let index = checkList.value.indexOf(val);
+  if (index === -1) {
+    checkList.value.push(val);
+  } else {
+    checkList.value.splice(index, 1);
+  }
+  emits('change', [...checkList.value]);
+}
+
+provide('nt-check-group-check', {
+  checkList,
+  updateCheck,
+});
+</script>
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 756e0424..c8453e41 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -1,8 +1,18 @@
 <template>
-  <input :type="htmlType" class="nt-input" :placeholder="placeholder" />
+  <input
+    :value="model"
+    :type="htmlType"
+    class="nt-input"
+    :placeholder="placeholder"
+    @input="
+      $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+    "
+  />
 </template>
 
 <script setup lang="ts">
+const model = defineModel();
+
 withDefaults(
   defineProps<{
     htmlType?: string;
diff --git a/src/components/Table.vue b/src/components/Table.vue
index eecebd5b..271cdb2d 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, PropType, ref } from 'vue';
+import { defineComponent, h, PropType, ref, watch } from 'vue';
 import type { VNode } from 'vue';
 
 export interface ColumnOption {
@@ -13,7 +13,18 @@ export interface ColumnOption {
   fixed?: 'left' | 'right';
   /** 列宽 */
   width?: string | number;
+  /** 单元格内容渲染函数 */
   render?: (row: any, index: number) => VNode | VNode[];
+  /** 表头分组配置 */
+  children?: ColumnOption[];
+  /** td colspan */
+  colspan: number | ((rowData: any, rowIndex: number) => number);
+  /** td rowspan */
+  rowspan: number | ((rowData: any, rowIndex: number) => number);
+  /** th colspan */
+  titleColspan: number;
+  /** th rowspan */
+  titleRowspan: number;
 }
 
 export interface DataSortState {
@@ -29,6 +40,60 @@ interface SortOption {
 
 type SorterFnOption = (data: any[]) => any[];
 
+/** 通过配置的 columns 计算表头跨行，跨列 */
+function calculateSpan(headers: ColumnOption[], level = 0): ColumnOption[] {
+  if (!Array.isArray(headers)) {
+    return [];
+  }
+
+  const spans = headers.map((header) => {
+    // 如果有子级元素，递归计算
+    if (header.children != null) {
+      let titleColspan = header.titleColspan;
+      const childrenSpans = calculateSpan(header.children, level + 1);
+      if (titleColspan == null) {
+        titleColspan = childrenSpans.reduce(
+          (sum, childSpan) => sum + childSpan.titleColspan,
+          0,
+        );
+      }
+      return {
+        ...header,
+        titleColspan: titleColspan,
+        titleRowspan: header.titleRowspan || 1,
+        children: childrenSpans,
+      };
+    } else {
+      let titleRowspan = header.titleRowspan;
+      if (titleRowspan == null) {
+        titleRowspan = getMaxDepth(headers);
+      }
+      // 如果元素没有子级，意味着它占满从当前层级到最底层的所有行
+      return {
+        ...header,
+        titleColspan: header.titleColspan || 1,
+        titleRowspan: titleRowspan,
+      };
+    }
+  });
+
+  return spans;
+}
+
+// 递归获取最深的层级数
+function getMaxDepth(headers: ColumnOption[]) {
+  let maxDepth = 1;
+  headers.forEach((header) => {
+    if (header.children) {
+      const childDepth = getMaxDepth(header.children) + 1;
+      if (childDepth > maxDepth) {
+        maxDepth = childDepth;
+      }
+    }
+  });
+  return maxDepth;
+}
+
 export default defineComponent({
   props: {
     columns: {
@@ -70,13 +135,24 @@ export default defineComponent({
       type: Function as PropType<() => VNode | VNode[]>,
       required: false,
     },
+    /** 是否使用 fixed[table-layout:fixed] 布局 */
+    tableLayout: {
+      type: String,
+      required: false,
+      default: 'auto',
+    },
   },
-  setup(props, { slots }) {
+  setup(props) {
     const sortInfo = ref<SortOption>({
       key: '',
       order: '',
     });
     const sourceData = ref(props.data);
+    const parsedColumns = calculateSpan(props.columns, 0);
+
+    watch(props.data, () => {
+      sourceData.value = props.data;
+    });
 
     function dataSort(
       data: any[],
@@ -106,23 +182,6 @@ export default defineComponent({
       sourceData.value = dataSort(props.data, sortInfo.value, props.sorter);
     }
 
-    function isFixed() {
-      const len = props.columns.length;
-      if (props.columns[0].fixed) return true;
-      if (props.columns[len - 1].fixed) return true;
-      let isFixed = false;
-      for (let i = 0; i < len; i++) {
-        if (props.columns[i].fixed) {
-          isFixed = true;
-          break;
-        }
-      }
-      return isFixed;
-    }
-
-    /** 是否使用 fixed[table-layout:fixed] 布局 */
-    let fixed = isFixed();
-
     function handleHeadClick({ sorter, key }: any) {
       if (sorter === true) {
         let sortKey = key;
@@ -144,128 +203,187 @@ export default defineComponent({
       }
     }
 
-    function renderHead() {
-      const columnsRender: VNode[] = [];
-      let left: string[] = [];
-      let right: string[] = [];
-
-      for (let i = 0, len = props.columns.length; i < len; i++) {
-        const column = props.columns[i];
+    function renderHeadCol(
+      column: ColumnOption,
+      index: number,
+      left: string[],
+      right: string[],
+    ) {
+      const thAttrs: any = {
+        class: {
+          'sort-column': column.sorter === true,
+          'sort-asc':
+            sortInfo.value.key === column.key && sortInfo.value.order === 'asc',
+          'sort-desc':
+            sortInfo.value.key === column.key &&
+            sortInfo.value.order === 'desc',
+          'nt-fixed': column.fixed,
+        },
+        style: {},
+        colspan: column.titleColspan,
+        rowspan: column.titleRowspan,
+      };
 
-        const thAttrs: any = {
-          class: {
-            'sort-column': column.sorter === true,
-            'sort-asc':
-              sortInfo.value.key === column.key &&
-              sortInfo.value.order === 'asc',
-            'sort-desc':
-              sortInfo.value.key === column.key &&
-              sortInfo.value.order === 'desc',
-            'nt-fixed': column.fixed,
-          },
-          style: {},
-        };
+      if (column.fixed) {
+        if (column.fixed === 'left') {
+          thAttrs.style.left =
+            left.length === 0 ? '0' : `calc(${left.join('+')})`;
+        } else {
+          thAttrs.style.right =
+            right.length === 0 ? '0' : `calc(${right.join('+')})`;
+        }
+      }
 
-        if (column.fixed) {
+      if (column.width) {
+        let colWidth: string = column.width as string;
+        if (typeof column.width === 'number') {
+          colWidth = `${column.width}px`;
+        }
+        thAttrs.style.width = colWidth;
+        if (column.fixed != null) {
           if (column.fixed === 'left') {
-            thAttrs.style.left =
-              left.length === 0 ? '0' : `calc(${left.join('+')})`;
+            left.push(colWidth);
           } else {
-            thAttrs.style.right =
-              right.length === 0 ? '0' : `calc(${right.join('+')})`;
-          }
-        }
-
-        if (column.width) {
-          let colWidth: string = column.width as string;
-          if (typeof column.width === 'number') {
-            colWidth = `${column.width}px`;
-          }
-          thAttrs.style.width = colWidth;
-          if (column.fixed != null) {
-            if (column.fixed === 'left') {
-              left.push(colWidth);
-            } else {
-              right.push(colWidth);
-            }
+            right.push(colWidth);
           }
         }
-        if (column.sorter === true) {
-          thAttrs.onClick = () => {
-            handleHeadClick({
-              key: column.key || '',
-              index: i,
-              order: 'asc',
-              sorter: column.sorter,
-            });
-          };
-        }
-
-        columnsRender.push(
-          h('th', thAttrs, [
-            h('span', column.title),
-            column.sorter === true
-              ? h('span', { class: 'caret-wrapper' }, [
-                  h('span', { class: 'sort-caret ascending' }),
-                  h('span', { class: 'sort-caret descending' }),
-                ])
-              : null,
-          ]),
-        );
       }
-      return columnsRender;
+      if (column.sorter === true) {
+        thAttrs.onClick = () => {
+          handleHeadClick({
+            key: column.key || '',
+            index,
+            order: 'asc',
+            sorter: column.sorter,
+          });
+        };
+      }
+      return h('th', thAttrs, [
+        h('span', column.title),
+        column.sorter === true
+          ? h('span', { class: 'caret-wrapper' }, [
+              h('span', { class: 'sort-caret ascending' }),
+              h('span', { class: 'sort-caret descending' }),
+            ])
+          : null,
+      ]);
     }
 
-    function renderBody() {
-      const bodies: VNode[] = [];
-      for (let i = 0, len = sourceData.value.length; i < len; i++) {
-        const dataItem = sourceData.value[i];
+    function renderHeadRow(
+      columns: ColumnOption[],
+      left: string[],
+      right: string[],
+      rowChildren: VNode[],
+      children: VNode[],
+    ) {
+      for (let i = 0, len = columns.length; i < len; i++) {
+        const column = columns[i];
+        rowChildren.push(renderHeadCol(column, i, left, right));
 
-        let left: string[] = [];
-        let right: string[] = [];
+        if (column.children != null) {
+          let rChildren: VNode[] = [];
+          renderHeadRow(column.children, left, right, rChildren, children);
+          children.push(h('tr', rChildren));
+        }
+      }
+    }
 
-        const $tds: VNode[] = [];
-        for (const column of props.columns) {
-          const tdAttr: any = {
-            style: {},
-            class: {
-              'nt-fixed': column.fixed,
-            },
-          };
+    function renderHead() {
+      const headTrs: VNode[] = [];
+      const rootChildren: VNode[] = [];
+      renderHeadRow(parsedColumns, [], [], rootChildren, headTrs);
+      headTrs.unshift(h('tr', rootChildren));
+      return headTrs;
+    }
 
-          if (column.fixed) {
-            if (column.fixed === 'left') {
-              tdAttr.style.left = left.length === 0 ? '0' : `${left.join('+')}`;
-            } else {
-              tdAttr.style.right =
-                right.length === 0 ? '0' : `${left.join('+')}`;
-            }
+    function renderBodyRow(
+      columns: ColumnOption[],
+      rowIndex: number,
+      rowData: any,
+      left: string[],
+      right: string[],
+      rowChildren: VNode[],
+    ) {
+      for (const column of columns) {
+        if (column.children == null) {
+          let rowspan: null | number = null;
+          let colspan: null | number = null;
+          if (typeof column.rowspan === 'number') {
+            rowspan = column.rowspan;
+          }
+          if (typeof column.rowspan === 'function') {
+            rowspan = column.rowspan(rowData, rowIndex);
           }
+          if (typeof column.colspan === 'number') {
+            rowspan = column.colspan;
+          }
+          if (typeof column.colspan === 'function') {
+            colspan = column.colspan(rowData, rowIndex);
+          }
+          if (rowspan !== 0 && colspan !== 0) {
+            const tdAttr: any = {
+              style: {},
+              class: {
+                'nt-fixed': column.fixed,
+              },
+              colspan,
+              rowspan,
+            };
 
-          if (column.width) {
-            let colWidth: string = column.width as string;
-            if (typeof column.width === 'number') {
-              colWidth = `${column.width}px`;
-            }
-            tdAttr.style.width = colWidth;
-            if (column.fixed != null) {
+            if (column.fixed) {
               if (column.fixed === 'left') {
-                left.push(colWidth);
+                tdAttr.style.left =
+                  left.length === 0 ? '0' : `${left.join('+')}`;
               } else {
-                right.push(colWidth);
+                tdAttr.style.right =
+                  right.length === 0 ? '0' : `${left.join('+')}`;
               }
             }
-          }
 
-          if (column.render != null) {
-            $tds.push(h('td', tdAttr, column.render(dataItem, i)));
-          } else if (column.key != null) {
-            $tds.push(h('td', tdAttr, dataItem[column.key]));
-          } else {
-            $tds.push(h('td', tdAttr, ''));
+            if (column.width) {
+              let colWidth: string = column.width as string;
+              if (typeof column.width === 'number') {
+                colWidth = `${column.width}px`;
+              }
+              tdAttr.style.width = colWidth;
+              if (column.fixed != null) {
+                if (column.fixed === 'left') {
+                  left.push(colWidth);
+                } else {
+                  right.push(colWidth);
+                }
+              }
+            }
+
+            if (column.render != null) {
+              rowChildren.push(
+                h('td', tdAttr, column.render(rowData, rowIndex)),
+              );
+            } else if (column.key != null) {
+              rowChildren.push(h('td', tdAttr, rowData[column.key]));
+            } else {
+              rowChildren.push(h('td', tdAttr, ''));
+            }
           }
+        } else {
+          renderBodyRow(
+            column.children,
+            rowIndex,
+            rowData,
+            left,
+            right,
+            rowChildren,
+          );
         }
+      }
+    }
 
+    function renderBody() {
+      const bodies: VNode[] = [];
+      for (let i = 0, len = sourceData.value.length; i < len; i++) {
+        const dataItem = sourceData.value[i];
+        const $tds: VNode[] = [];
+        renderBodyRow(parsedColumns, i, dataItem, [], [], $tds);
         bodies.push(h('tr', $tds));
       }
       return bodies;
@@ -281,7 +399,7 @@ export default defineComponent({
             class: [
               'nt-table',
               props.stripe ? 'nt-table-stripe' : '',
-              fixed ? 'nt-table-fixed' : '',
+              props.tableLayout === 'fixed' ? 'nt-table-fixed' : '',
               props.border ? 'nt-table-border' : '',
             ],
           },
@@ -296,7 +414,7 @@ export default defineComponent({
                   top: props.fixedHead ? '0' : undefined,
                 },
               },
-              slots.header != null ? slots.header : h('tr', renderHead()),
+              renderHead(),
             ),
             h(
               'tbody',
diff --git a/src/index.ts b/src/index.ts
index 179e9cbb..34eab24d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -22,3 +22,6 @@ export { default as Image } from './components/Image.vue';
 export { default as ImagePreview } from './components/ImagePreview.vue';
 export { default as Polygon } from './components/Polygon.vue';
 export { default as Shadow } from './components/Shadow.vue';
+export { default as Checkbox } from './components/Checkbox.vue';
+export { default as CheckboxGroup } from './components/CheckboxGroup.vue';
+export { default as CheckboxButton } from './components/CheckboxButton.vue';
diff --git a/style/checkbox/index.css b/style/checkbox/index.css
new file mode 100644
index 00000000..546a55af
--- /dev/null
+++ b/style/checkbox/index.css
@@ -0,0 +1,126 @@
+.nt-checkbox {
+  --nt-checkbox-size: 16px;
+  --nt-checkbox-label-color: #333;
+  --nt-checkbox-checked-color: var(--nt-primary-color, #4998f4);
+  --nt-checkbox-disabled-color: #e6e6e6;
+  --nt-checkbox-disabled-label-color: #c0c4cc;
+  --nt-checkbox-item-margin: 10px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+.nt-checkbox__input {
+  opacity: 0;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  position: absolute;
+  z-index: -1;
+}
+.nt-checkbox__label {
+  color: var(--nt-checkbox-label-color);
+  transition: color 0.3s ease-in-out;
+}
+.nt-checkbox__inner {
+  width: var(--nt-checkbox-size);
+  height: var(--nt-checkbox-size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 3px;
+  border: 1px solid #dcddd9;
+  box-sizing: border-box;
+  transition: all 0.3s ease-in-out;
+  position: relative;
+  margin-right: 5px;
+}
+.nt-checkbox__inner::after {
+  content: '';
+  width: calc(var(--nt-checkbox-size) * 0.6);
+  height: calc(var(--nt-checkbox-size) * 0.3);
+  display: block;
+  border: solid 1px transparent;
+  border-right: none;
+  border-top: none;
+  transform: rotate(-45deg);
+  transition: border-color 0.2s ease-in-out;
+}
+.nt-checkbox--indeterminate .nt-checkbox__inner {
+  background-color: var(--nt-checkbox-checked-color);
+}
+.nt-checkbox--indeterminate .nt-checkbox__inner::before {
+  content: '';
+  width: calc(var(--nt-checkbox-size) * 0.4);
+  height: 1px;
+  display: block;
+  border: solid 1px #fff;
+  border-right: none;
+  border-top: none;
+  border-left: none;
+  position: absolute;
+}
+.nt-checkbox:hover .nt-checkbox__inner {
+  border-color: var(--nt-checkbox-checked-color);
+}
+.nt-checkbox__input:checked + .nt-checkbox__inner {
+  background-color: var(--nt-checkbox-checked-color);
+}
+.nt-checkbox__input:checked + .nt-checkbox__inner::after {
+  border-color: #fff;
+}
+.nt-checkbox__input:checked ~ .nt-checkbox__label {
+  color: var(--nt-checkbox-checked-color);
+}
+
+.nt-checkbox--disabled {
+  --nt-checkbox-checked-color: var(--nt-checkbox-disabled-color);
+  cursor: not-allowed;
+}
+.nt-checkbox--disabled .nt-checkbox__inner {
+  border-color: var(--nt-checkbox-disabled-color);
+}
+.nt-checkbox--disabled .nt-checkbox__inner::after {
+  border-color: transparent;
+}
+.nt-checkbox--disabled .nt-checkbox__label {
+  color: var(--nt-checkbox-disabled-label-color);
+}
+.nt-check-group {
+  display: flex;
+  align-items: center;
+}
+
+.nt-check-group .nt-checkbox:not(:first-child) {
+  margin-left: var(--nt-checkbox-item-margin);
+}
+
+.nt-checkbox--button .nt-checkbox__label {
+  display: inline-flex;
+  height: var(--nt-form-edit-height, 32px);
+  justify-content: center;
+  align-items: center;
+  padding: 0 15px;
+  border: 1px solid #c0c4cc;
+  border-left-width: 0;
+}
+.nt-checkbox--button:first-child .nt-checkbox__label {
+  border-left-width: 1px;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.nt-checkbox--button:last-child .nt-checkbox__label {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.nt-checkbox--button .nt-checkbox__input:checked ~ .nt-checkbox__label {
+  background-color: var(--nt-checkbox-checked-color);
+  color: #fff;
+  border-top-color: var(--nt-checkbox-checked-color);
+  border-bottom-color: var(--nt-checkbox-checked-color);
+  border-right-color: #fff;
+}
+.nt-check-group .nt-checkbox--button:not(:first-child) {
+  margin-left: 0;
+}
diff --git a/style/checkbox/index.js b/style/checkbox/index.js
new file mode 100644
index 00000000..4582418a
--- /dev/null
+++ b/style/checkbox/index.js
@@ -0,0 +1 @@
+import "./index.css";
\ No newline at end of file

From 1d158f8acf47b781978695492e59e0d187b77b3b Mon Sep 17 00:00:00 2001
From: fly_dream <1456207945@qq.com>
Date: Fri, 17 May 2024 17:52:18 +0800
Subject: [PATCH 02/18] chore(main): release 0.3.0 (#9)

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ed03bf03..1154c9dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.3.0](https://github.com/DvShu/neatui-vue/compare/v0.2.1...v0.3.0) (2024-05-17)
+
+
+### Features
+
+* **Checkbox:** 复选框组件 ([0a57ae6](https://github.com/DvShu/neatui-vue/commit/0a57ae66b33f0f68d5125f41097634f66211953b))
+
 ## [0.2.1](https://github.com/DvShu/neatui-vue/compare/v0.2.0...v0.2.1) (2024-05-08)
 
 
diff --git a/package.json b/package.json
index 986c7e53..f00e5872 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@asteres/neatui-vue",
   "description": "基于 Vue3 的 UI 组件库",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "g:c": "node scripts/index.js template",

From be724481b204d8627aa6e8015f3b2ee5d6affcb8 Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Tue, 21 May 2024 15:45:53 +0800
Subject: [PATCH 03/18] =?UTF-8?q?fix(Tooltip):=20=E4=BF=AE=E5=A4=8D=20Tool?=
 =?UTF-8?q?tip=20=E4=BD=8D=E7=BD=AE=E9=94=99=E8=AF=AF=20fix:=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E4=B8=BB=E9=A2=98=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tenny <tenny.shu@foxmail.com>
---
 .github/workflows/release-please.yml |  2 +-
 docs/components/tooltip.md           |  8 +++++---
 src/components/Tooltip.vue           |  2 +-
 style/button/index.css               | 12 ++++++------
 style/tooltip/index.css              |  6 +++---
 style/vars.css                       |  4 +++-
 6 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
index 3fc077b7..fad0f708 100644
--- a/.github/workflows/release-please.yml
+++ b/.github/workflows/release-please.yml
@@ -32,7 +32,7 @@ jobs:
       - name: Print Previous Job Output
         run: |
           echo "Previous job output: "
-          echo "${{ needs.release.outputs }}" | jq .
+          echo "${{ toJson(needs.release.outputs) }}"
 
   publish:
     runs-on: ubuntu-latest
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index f7d5f9fd..8999ea24 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -74,7 +74,9 @@ import { Tooltip, Button } from '../../src'
 <ClientOnly>
   <CodePreview>
   <textarea lang="vue-html">
-  <hr />
+    <nt-tooltip :visible="true" title="Content">
+        <span>受控模式</span>
+    </nt-tooltip>
   </textarea>
   <template #preview>
     <Tooltip :visible="true" title="Content">
@@ -92,7 +94,7 @@ import { Tooltip, Button } from '../../src'
   <CodePreview>
   <textarea lang="vue">
   <template>
-    <nt-tooltip :visible="true" title="Content" style-name="demo" placement="bottom">
+    <nt-tooltip title="Content" style-name="demo" placement="bottom">
       <span>自定义风格</span>
     </nt-tooltip>
   </template>
@@ -133,7 +135,7 @@ import { Tooltip, Button } from '../../src'
   </style>
   </textarea>
   <template #preview>
-    <Tooltip :visible="true" title="Content" style-name="demo" placement="bottom">
+    <Tooltip title="Content" style-name="demo" placement="bottom">
       <span>自定义风格</span>
     </Tooltip>
   </template>
diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index 9702df3e..ff490b22 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -9,11 +9,11 @@
     <div
       :class="[
         'nt-tooltip-content',
+        `nt-tooltip--${styleName}`,
         placement.startsWith('top') ? 'nt-tooltip-top' : '',
         placement.startsWith('bottom') ? 'nt-tooltip-bottom' : '',
         placement.endsWith('Start') ? 'nt-tooltip-start' : '',
         placement.endsWith('End') ? 'nt-tooltip-end' : '',
-        `nt-tooltip--${styleName}`,
         contentClass,
       ]"
     >
diff --git a/style/button/index.css b/style/button/index.css
index 92f01db9..c2b4d2b0 100644
--- a/style/button/index.css
+++ b/style/button/index.css
@@ -7,9 +7,9 @@
   /* 按钮的边框颜色 */
   --nt-btn-border-color: #d9d9d9;
   /* 按钮的悬浮边框 less lighten(var(--nt-primary-color), 10) */
-  --nt-btn-hover-color: #79b3f7;
+  --nt-btn-hover-color: var(--nt-primary-color-light1, #31890a);
   /* 按钮的点击颜色 */
-  --nt-btn-active-color: #197df1;
+  --nt-btn-active-color: var(--nt-primary-color-dark1, #31890a);
   /* 按钮禁用 */
   --nt-btn-disabled-color: #c9c9c9;
   --nt-btn-disabled-bg-color: #fbfbfb;
@@ -74,12 +74,12 @@
   --nt-btn-border-color: var(--nt-primary-color);
   /* 按钮的悬浮边框 less lighten(var(--nt-primary-color), 10) */
   --nt-btn-hover-color: #fff;
-  --nt-btn-hover-border-color: #79b3f7;
-  --nt-btn-hover-bg-color: #79b3f7;
+  --nt-btn-hover-border-color: var(--nt-primary-color-light1, #31890a);
+  --nt-btn-hover-bg-color: var(--nt-primary-color-light1, #31890a);
   /* 按钮的点击颜色 */
   --nt-btn-active-color: #fff;
-  --nt-btn-active-border-color: #197df1;
-  --nt-btn-active-bg-color: #197df1;
+  --nt-btn-active-border-color: var(--nt-primary-color-dark1, #31890a);
+  --nt-btn-active-bg-color: var(--nt-primary-color-dark1, #31890a);
 }
 
 /* 按钮禁用时的样式 */
diff --git a/style/tooltip/index.css b/style/tooltip/index.css
index 62701754..835646bc 100644
--- a/style/tooltip/index.css
+++ b/style/tooltip/index.css
@@ -76,10 +76,10 @@
   bottom: 100%;
   border-color: transparent transparent #383838 transparent;
 }
-.nt-tooltip-start.nt-tooltip-default::after {
-  left: 10px;
+.nt-tooltip-start.nt-tooltip--default::after {
+  left: 15px;
 }
-.nt-tooltip-end.nt-tooltip-default::after {
+.nt-tooltip-end.nt-tooltip--default::after {
   right: 10px;
   left: auto;
   margin-left: 0;
diff --git a/style/vars.css b/style/vars.css
index 2be3a48d..23a3f728 100644
--- a/style/vars.css
+++ b/style/vars.css
@@ -2,7 +2,9 @@
   /* button、input 元素高度 */
   --nt-form-edit-height: 32px;
   /* 主题(primary)颜色 */
-  --nt-primary-color: #4998f6;
+  --nt-primary-color: #42b80e;
+  --nt-primary-color-light1: #47c60f;
+  --nt-primary-color-dark1: #3daa0d;
   /* 表示错误(error)的颜色 */
   --nt-error-color: #ed3f13;
   /* 表示成功(success)的颜色 */

From a1aa7b9a7d0ff1588633b7f13e713e8999137a77 Mon Sep 17 00:00:00 2001
From: fly_dream <1456207945@qq.com>
Date: Tue, 21 May 2024 15:46:58 +0800
Subject: [PATCH 04/18] chore(main): release 0.3.1 (#10)

---
 CHANGELOG.md | 8 ++++++++
 package.json | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1154c9dc..dcc03a08 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.3.1](https://github.com/DvShu/neatui-vue/compare/v0.3.0...v0.3.1) (2024-05-21)
+
+
+### Bug Fixes
+
+* **Tooltip:** 修复 Tooltip 位置错误 ([be72448](https://github.com/DvShu/neatui-vue/commit/be724481b204d8627aa6e8015f3b2ee5d6affcb8))
+* 优化主题色 ([be72448](https://github.com/DvShu/neatui-vue/commit/be724481b204d8627aa6e8015f3b2ee5d6affcb8))
+
 ## [0.3.0](https://github.com/DvShu/neatui-vue/compare/v0.2.1...v0.3.0) (2024-05-17)
 
 
diff --git a/package.json b/package.json
index f00e5872..6dac6df3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@asteres/neatui-vue",
   "description": "基于 Vue3 的 UI 组件库",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "scripts": {
     "g:c": "node scripts/index.js template",

From 8eb7ce33c9e2f777b0980180d3a3cc16e8277a7f Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Wed, 22 May 2024 15:13:27 +0800
Subject: [PATCH 05/18] =?UTF-8?q?feat(Radio):=20=E5=8D=95=E9=80=89?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tenny <tenny.shu@foxmail.com>
---
 docs/.vitepress/config.ts         |   1 +
 docs/.vitepress/theme/index.ts    |   1 +
 docs/components/radio.md          | 148 ++++++++++++++++++++++++++++++
 scripts/index.js                  |   2 +-
 src/components/Checkbox.vue       |   2 +-
 src/components/CheckboxButton.vue |   4 -
 src/components/CheckboxGroup.vue  |   4 +-
 src/components/Radio.vue          |  69 ++++++++++++++
 src/components/RadioGroup.vue     |  22 +++++
 src/index.ts                      |   3 +-
 style/checkbox/index.css          |   9 +-
 style/radio/index.css             | 105 +++++++++++++++++++++
 style/radio/index.js              |   1 +
 13 files changed, 357 insertions(+), 14 deletions(-)
 create mode 100644 docs/components/radio.md
 delete mode 100644 src/components/CheckboxButton.vue
 create mode 100644 src/components/Radio.vue
 create mode 100644 src/components/RadioGroup.vue
 create mode 100644 style/radio/index.css
 create mode 100644 style/radio/index.js

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index a4393c76..79f9b56f 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -53,6 +53,7 @@ export default defineConfig({
           { text: 'Shadow 阴影', link: '/components/shadow' },
           { text: 'Table 表格', link: '/components/table' },
           { text: 'Checkbox 复选框', link: '/components/checkbox' },
+          { text: 'Radio 单选框', link: '/components/radio' },
         ],
       },
     ],
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 4ecac9ef..98def522 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -20,6 +20,7 @@ import '../../../style/message';
 import '../../../style/shadow';
 import '../../../style/table';
 import '../../../style/checkbox';
+import '../../../style/radio';
 
 export default {
   extends: DefaultTheme,
diff --git a/docs/components/radio.md b/docs/components/radio.md
new file mode 100644
index 00000000..0338579a
--- /dev/null
+++ b/docs/components/radio.md
@@ -0,0 +1,148 @@
+# Radio 单选框
+
+在一组备选项中进行单选
+
+## 演示
+
+<script setup>
+  import { ref } from 'vue'
+  import { Radio, RadioGroup } from '../../src'
+
+  const sex = ref('0')
+
+  const allowService = ref(false)
+</script>
+
+### 基础用法
+
+当只有一个选项时，可以直接通过 `v-model` 绑定一个 `boolean` 值来控制是否选中；使用 `slot-label` 来重写选项的文字。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    import { ref } from 'vue';
+    const allowService = ref(false);
+  </script>
+  <template>
+    <nt-radio v-model="allowService">
+      <template #label>
+        <span>
+          <span>同意</span>
+          <a href='#'>隐私协议</a>
+        </span>
+      </template>
+    </nt-radio>
+  </template>
+  </textarea>
+  <template #preview>
+    <Radio v-model="allowService">
+      <template #label>
+        <span>
+          <span>同意</span>
+          <a href='#'>隐私协议</a>
+        </span>
+      </template>
+    </Radio>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 禁用状态
+
+设置 `disabled` 属性即可。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-radio label="禁用" disabled>
+  </textarea>
+  </CodePreview>
+</ClientOnly>
+
+### 单选框组
+
+结合 `nt-radio-group` 组件实现单选框组
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <script setup>
+    import { ref } from 'vue';
+    const sex = ref('0');
+  </script>
+  <template>
+    <nt-radio-group v-model="sex">
+      <nt-radio label="男" value="0" />
+      <nt-radio label="女" value="1" />
+    </nt-radio-group>
+  </template>
+  </textarea>
+  <template #preview>
+    <RadioGroup v-model="sex">
+      <Radio label="男" value="0" />
+      <Radio label="女" value="1" />
+    </RadioGroup>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 按钮样式
+
+在单选框组基础上，设置 `nt-radio` 的 `type` 属性为 `button` 即可。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <template>
+    <nt-radio-group v-model="sex">
+      <nt-radio label="男" value="0" type="button" />
+      <nt-radio label="女" value="1" type="button" />
+    </nt-radio-group>
+  </template>
+  </textarea>
+  <template #preview>
+    <RadioGroup v-model="sex">
+      <Radio label="男" value="0" type="button" />
+      <Radio label="女" value="1" type="button" />
+    </RadioGroup>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### Radio Props
+
+| 参数                    | 说明               | 类型      | 默认值  |
+| ----------------------- | ------------------ | --------- | ------- |
+| `model-value / v-model` | 是否选中           | `boolean` | x       |
+| `name`                  | 原生 `name` 属性   | `string`  | -       |
+| `disabled`              | 是否禁用           | `boolean` | `false` |
+| `value`                 | 原生 `value` 属性  | `string`  | -       |
+| `label`                 | 显示的标签         | `string`  | -       |
+| `type`                  | 是否设置为按钮风格 | `button`  | -       |
+
+### RadioGroup Props
+
+| 参数                    | 说明           | 类型     | 默认值 |
+| ----------------------- | -------------- | -------- | ------ |
+| `model-value / v-model` | 选中项绑定的值 | `string` | -      |
+
+### Radio Events
+
+| 事件     | 说明             | 参数                         |
+| -------- | ---------------- | ---------------------------- |
+| `change` | 选中项变化时触发 | `(checked: boolean) => void` |
+
+### RadioGroup Events
+
+| 事件     | 说明             | 参数                             |
+| -------- | ---------------- | -------------------------------- |
+| `change` | 选中项变化时触发 | `(checkedValue: string) => void` |
+
+### Radio Slots
+
+| 名称    | 说明           |
+| ------- | -------------- |
+| `label` | 自定义文本内容 |
diff --git a/scripts/index.js b/scripts/index.js
index ee342d44..d24281f1 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -66,7 +66,7 @@ async function createComponentTemplate(name) {
     '| x | x | x | x |',
   ];
   await write(
-    path.join(process.cwd(), 'docs/components', `${name.toUpperCase()}.md`),
+    path.join(process.cwd(), 'docs/components', `${name.toLowerCase()}.md`),
     docTemplateContents.join('\r\n'),
   );
   console.log('创建成功');
diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
index 0445e5ba..d919ffce 100644
--- a/src/components/Checkbox.vue
+++ b/src/components/Checkbox.vue
@@ -48,7 +48,7 @@ const emits = defineEmits(['change']);
 const { checkList, updateCheck } = inject<{
   checkList: Ref<any[]> | null;
   updateCheck: null | ((value: any) => void);
-}>('nt-check-group-check', {
+}>('nt-checkbox-group-check', {
   checkList: null,
   updateCheck: null,
 });
diff --git a/src/components/CheckboxButton.vue b/src/components/CheckboxButton.vue
deleted file mode 100644
index be399d7e..00000000
--- a/src/components/CheckboxButton.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<template></template>
-<script setup lang="ts">
-import Checkbox from './Checkbox.vue';
-</script>
diff --git a/src/components/CheckboxGroup.vue b/src/components/CheckboxGroup.vue
index 8f0da04c..70064a82 100644
--- a/src/components/CheckboxGroup.vue
+++ b/src/components/CheckboxGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="{
-      'nt-check-group': true,
+      'nt-checkbox-group': true,
     }"
   >
     <slot></slot>
@@ -24,7 +24,7 @@ function updateCheck(val: any) {
   emits('change', [...checkList.value]);
 }
 
-provide('nt-check-group-check', {
+provide('nt-checkbox-group-check', {
   checkList,
   updateCheck,
 });
diff --git a/src/components/Radio.vue b/src/components/Radio.vue
new file mode 100644
index 00000000..3a61c686
--- /dev/null
+++ b/src/components/Radio.vue
@@ -0,0 +1,69 @@
+<template>
+  <label
+    class="nt-radio"
+    :class="{
+      'nt-radio': true,
+      'nt-radio--disabled': disabled,
+      'nt-radio--button': type === 'button',
+    }"
+  >
+    <input
+      type="radio"
+      :name="name"
+      class="nt-radio__input"
+      :value="value"
+      :disabled="disabled"
+      :checked="isChecked"
+      @change="handleChange"
+    />
+    <span v-if="type !== 'button'" class="nt-radio__inner"></span>
+    <slot name="label">
+      <span class="nt-radio__label">{{ label }}</span>
+    </slot>
+  </label>
+</template>
+<script setup lang="ts">
+import { computed, inject, Ref } from 'vue';
+
+const checkedModel = defineModel({ type: Boolean });
+
+const props = withDefaults(
+  defineProps<{
+    name?: string;
+    value?: number | string | boolean;
+    label?: string;
+    type?: 'button';
+    disabled?: boolean;
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const { checkedValue, updateCheck } = inject<{
+  checkedValue: Ref<any> | null;
+  updateCheck: null | ((value: any) => void);
+}>('nt-radio-group-check', {
+  checkedValue: null,
+  updateCheck: null,
+});
+
+const isChecked = computed(() => {
+  if (checkedValue != null) {
+    return checkedValue.value === props.value;
+  }
+  return checkedModel.value;
+});
+
+const emits = defineEmits(['change']);
+
+function handleChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const checked = target.checked;
+  if (updateCheck != null) {
+    updateCheck(props.value);
+  }
+  checkedModel.value = checked;
+  emits('change', checked);
+}
+</script>
diff --git a/src/components/RadioGroup.vue b/src/components/RadioGroup.vue
new file mode 100644
index 00000000..68fc7048
--- /dev/null
+++ b/src/components/RadioGroup.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="nt-radio-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue';
+
+const checkedValue = defineModel<any>();
+const emits = defineEmits(['change']);
+
+function updateCheck(val: any) {
+  checkedValue.value = val;
+  emits('change', checkedValue.value);
+}
+
+provide('nt-radio-group-check', {
+  checkedValue,
+  updateCheck,
+});
+</script>
diff --git a/src/index.ts b/src/index.ts
index 34eab24d..c8e7abd3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,4 +24,5 @@ export { default as Polygon } from './components/Polygon.vue';
 export { default as Shadow } from './components/Shadow.vue';
 export { default as Checkbox } from './components/Checkbox.vue';
 export { default as CheckboxGroup } from './components/CheckboxGroup.vue';
-export { default as CheckboxButton } from './components/CheckboxButton.vue';
+export { default as Radio } from './components/Radio.vue';
+export { default as RadioGroup } from './components/RadioGroup.vue';
diff --git a/style/checkbox/index.css b/style/checkbox/index.css
index 546a55af..da46c178 100644
--- a/style/checkbox/index.css
+++ b/style/checkbox/index.css
@@ -1,5 +1,5 @@
 .nt-checkbox {
-  --nt-checkbox-size: 16px;
+  --nt-checkbox-size: 14px;
   --nt-checkbox-label-color: #333;
   --nt-checkbox-checked-color: var(--nt-primary-color, #4998f4);
   --nt-checkbox-disabled-color: #e6e6e6;
@@ -13,7 +13,6 @@
 }
 .nt-checkbox__input {
   opacity: 0;
-  z-index: 1;
   width: 0;
   height: 0;
   position: absolute;
@@ -87,12 +86,12 @@
 .nt-checkbox--disabled .nt-checkbox__label {
   color: var(--nt-checkbox-disabled-label-color);
 }
-.nt-check-group {
+.nt-checkbox-group {
   display: flex;
   align-items: center;
 }
 
-.nt-check-group .nt-checkbox:not(:first-child) {
+.nt-checkbox-group .nt-checkbox:not(:first-child) {
   margin-left: var(--nt-checkbox-item-margin);
 }
 
@@ -121,6 +120,6 @@
   border-bottom-color: var(--nt-checkbox-checked-color);
   border-right-color: #fff;
 }
-.nt-check-group .nt-checkbox--button:not(:first-child) {
+.nt-checkbox-group .nt-checkbox--button:not(:first-child) {
   margin-left: 0;
 }
diff --git a/style/radio/index.css b/style/radio/index.css
new file mode 100644
index 00000000..a38a40fa
--- /dev/null
+++ b/style/radio/index.css
@@ -0,0 +1,105 @@
+.nt-radio {
+  --nt-radio-size: 14px;
+  --nt-radio-label-color: #333;
+  --nt-radio-disabled-color: #e6e6e6;
+  --nt-radio-disabled-label-color: #c0c4cc;
+  --nt-radio-checked-color: var(--nt-primary-color, #42b80e);
+  --nt-radio-item-margin: 10px;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+}
+
+.nt-radio__label {
+  color: var(--nt-radio-label-color);
+  transition: color 0.3s ease-in-out;
+}
+
+.nt-radio__input {
+  position: absolute;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+
+.nt-radio__inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--nt-radio-size);
+  height: var(--nt-radio-size);
+  border: 1px solid #dcddd9;
+  border-radius: 50%;
+  margin-right: 5px;
+  box-sizing: border-box;
+  transition: border-color 0.3s ease-in-out;
+}
+
+.nt-radio__inner::before {
+  content: '';
+  display: block;
+  width: 60%;
+  height: 60%;
+  background-color: transparent;
+  border-radius: 50%;
+  transition: background-color 0.3s ease-in-out;
+}
+
+.nt-radio__input:checked + .nt-radio__inner {
+  border-color: var(--nt-primary-color, #42b80e);
+}
+.nt-radio__input:checked + .nt-radio__inner::before {
+  background-color: var(--nt-primary-color, #42b80e);
+}
+.nt-radio__input:checked ~ .nt-radio__label {
+  color: var(--nt-primary-color, #42b80e);
+}
+
+.nt-radio--disabled {
+  cursor: not-allowed;
+}
+.nt-radio--disabledd .nt-radio__inner {
+  border-color: var(--nt-radio-disabled-color);
+}
+.nt-radio--disabled .nt-radio__label {
+  color: var(--nt-radio-disabled-label-color);
+}
+
+.nt-radio-group {
+  display: flex;
+  align-items: center;
+}
+.nt-radio-group .nt-radio:not(:first-child) {
+  margin-left: var(--nt-radio-item-margin);
+}
+
+.nt-radio--button .nt-radio__label {
+  display: inline-flex;
+  height: var(--nt-form-edit-height, 32px);
+  justify-content: center;
+  align-items: center;
+  padding: 0 15px;
+  border: 1px solid #c0c4cc;
+  border-left-width: 0;
+}
+.nt-radio--button:first-child .nt-radio__label {
+  border-left-width: 1px;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.nt-radio--button:last-child .nt-radio__label {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.nt-radio--button .nt-radio__input:checked ~ .nt-radio__label {
+  background-color: var(--nt-radio-checked-color);
+  color: #fff;
+  border-top-color: var(--nt-radio-checked-color);
+  border-bottom-color: var(--nt-radio-checked-color);
+  border-right-color: #fff;
+}
+.nt-radio-group .nt-radio--button:not(:first-child) {
+  margin-left: 0;
+}
diff --git a/style/radio/index.js b/style/radio/index.js
new file mode 100644
index 00000000..4582418a
--- /dev/null
+++ b/style/radio/index.js
@@ -0,0 +1 @@
+import "./index.css";
\ No newline at end of file

From 13a40c5494f53c966633a6b5a953eaa4316ec4b2 Mon Sep 17 00:00:00 2001
From: fly_dream <1456207945@qq.com>
Date: Wed, 22 May 2024 15:14:22 +0800
Subject: [PATCH 06/18] chore(main): release 0.4.0 (#11)

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dcc03a08..c38c4568 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.4.0](https://github.com/DvShu/neatui-vue/compare/v0.3.1...v0.4.0) (2024-05-22)
+
+
+### Features
+
+* **Radio:** 单选框 ([8eb7ce3](https://github.com/DvShu/neatui-vue/commit/8eb7ce33c9e2f777b0980180d3a3cc16e8277a7f))
+
 ## [0.3.1](https://github.com/DvShu/neatui-vue/compare/v0.3.0...v0.3.1) (2024-05-21)
 
 
diff --git a/package.json b/package.json
index 6dac6df3..fc43e955 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@asteres/neatui-vue",
   "description": "基于 Vue3 的 UI 组件库",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "g:c": "node scripts/index.js template",

From 3e557a16afd208d4f47aa39c1981543daede8786 Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Thu, 23 May 2024 10:06:46 +0800
Subject: [PATCH 07/18] =?UTF-8?q?feat(Switch):=20=E5=BC=80=E5=85=B3?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tenny <tenny.shu@foxmail.com>
---
 .github/workflows/release-please.yml |  4 ++
 docs/.vitepress/config.ts            |  1 +
 docs/.vitepress/theme/index.ts       |  1 +
 docs/components/switch.md            | 73 ++++++++++++++++++++++++++++
 src/components/Switch.vue            | 36 ++++++++++++++
 src/index.ts                         |  1 +
 style/switch/index.css               | 47 ++++++++++++++++++
 style/switch/index.js                |  1 +
 style/vars.css                       |  8 +--
 9 files changed, 169 insertions(+), 3 deletions(-)
 create mode 100644 docs/components/switch.md
 create mode 100644 src/components/Switch.vue
 create mode 100644 style/switch/index.css
 create mode 100644 style/switch/index.js

diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
index fad0f708..736ca318 100644
--- a/.github/workflows/release-please.yml
+++ b/.github/workflows/release-please.yml
@@ -25,6 +25,10 @@ jobs:
           # for more options
           release-type: node
 
+      - name: Print Release Output
+        run: |
+          echo "Release output: ${{ toJson(steps.release.outputs) }}"
+
   joblog:
     runs-on: ubuntu-latest
     needs: release
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 79f9b56f..a5dd8d15 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -54,6 +54,7 @@ export default defineConfig({
           { text: 'Table 表格', link: '/components/table' },
           { text: 'Checkbox 复选框', link: '/components/checkbox' },
           { text: 'Radio 单选框', link: '/components/radio' },
+          { text: 'Switch 开关', link: '/components/switch' },
         ],
       },
     ],
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 98def522..8e946055 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -21,6 +21,7 @@ import '../../../style/shadow';
 import '../../../style/table';
 import '../../../style/checkbox';
 import '../../../style/radio';
+import '../../../style/switch';
 
 export default {
   extends: DefaultTheme,
diff --git a/docs/components/switch.md b/docs/components/switch.md
new file mode 100644
index 00000000..32be60f0
--- /dev/null
+++ b/docs/components/switch.md
@@ -0,0 +1,73 @@
+# Switch 开关
+
+表示两种相互对立的状态间的切换，多用于触发「开/关」。
+
+## 演示
+
+<script setup>
+  import { ref } from 'vue'
+  import { Switch } from '../../src'
+
+  const open = ref(true);
+</script>
+
+### 基础用法
+
+绑定 `v-model` 到一个 `boolean` 类型的变量。可以使用 `true` 和 `false` 分别表示开和关。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    import { ref } from 'vue';
+    const open = ref(true);
+  </script>
+  <template>
+    <nt-switch v-model="open"></nt-switch>
+  </template>
+  </textarea>
+  <template #preview>
+    <Switch v-model="open"></Switch>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 文字描述
+
+使用 `checked-text` 和 `unchecked-text` 属性来设置开关的文字描述。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <template>
+    <nt-switch v-model="open" checked-text="Y" unchecked-text="N"></nt-switch>
+  </template>
+  </textarea>
+  <template #preview>
+    <Switch v-model="open" checked-text="Y" unchecked-text="N"></Switch>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### Switch Props
+
+| 参数             | 说明               | 类型      | 默认值  |
+| ---------------- | ------------------ | --------- | ------- |
+| `v-model`        | 开关状态(是否打开) | `boolean` | `false` |
+| `checked-text`   | 开启时的文字描述   | `string`  | -       |
+| `unchecked-text` | 关闭时的文字描述   | `string`  | -       |
+
+### Switch Events
+
+| 事件名   | 说明               | 回调参数             |
+| -------- | ------------------ | -------------------- |
+| `change` | 开关状态改变时触发 | `(checked: boolean)` |
+
+### Switch CSS Variables
+
+| 变量名               | 默认值                        | 描述         |
+| -------------------- | ----------------------------- | ------------ |
+| `--nt-switch-height` | `20px`                        | 开关按钮高度 |
+| `--nt-switch-width`  | `var(--nt-switch-height) * 2` | 开关按钮宽度 |
diff --git a/src/components/Switch.vue b/src/components/Switch.vue
new file mode 100644
index 00000000..6c7b354c
--- /dev/null
+++ b/src/components/Switch.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    :class="{
+      'nt-switch': true,
+      'nt-switch--disabled': disabled,
+      'nt-switch--checked': checked,
+    }"
+    @click="handleChange"
+  >
+    <span class="nt-switch-action"></span>
+    <span v-if="checked || uncheckedText" class="nt-switch-text">
+      {{ checked ? checkedText || '' : uncheckedText || '' }}
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+const checked = defineModel({ default: false });
+
+const emits = defineEmits(['change'])
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    checkedText?: string;
+    uncheckedText?: string;
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+function handleChange() {
+  checked.value = !checked.value;
+  emits('change', checked.value);
+}
+</script>
diff --git a/src/index.ts b/src/index.ts
index c8e7abd3..1c0c76cd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,3 +26,4 @@ export { default as Checkbox } from './components/Checkbox.vue';
 export { default as CheckboxGroup } from './components/CheckboxGroup.vue';
 export { default as Radio } from './components/Radio.vue';
 export { default as RadioGroup } from './components/RadioGroup.vue';
+export { default as Switch } from "./components/Switch.vue"
diff --git a/style/switch/index.css b/style/switch/index.css
new file mode 100644
index 00000000..27d6380d
--- /dev/null
+++ b/style/switch/index.css
@@ -0,0 +1,47 @@
+.nt-switch {
+  --nt-switch-height: 20px;
+  --nt-switch-width: calc(var(--nt-switch-height) * 2);
+  display: inline-flex;
+  width: var(--nt-switch-width);
+  height: var(--nt-switch-height);
+  align-items: center;
+  justify-content: flex-start;
+  background-color: #d9d9d9;
+  border-radius: calc(var(--nt-switch-height) / 2);
+  padding: 2px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+  vertical-align: middle;
+}
+
+.nt-switch:hover {
+  background-color: var(--nt-primary-color-light1, #d9f7be);
+}
+.nt-switch--checked {
+  background-color: var(--nt-primary-color, #52c41a);
+}
+
+.nt-switch-action {
+  position: absolute;
+  width: calc(var(--nt-switch-height) - 4px);
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  border-radius: 50%;
+  transition: left 0.3s ease-in-out;
+}
+
+.nt-switch-text {
+  color: #fff;
+  padding-left: calc(var(--nt-switch-width) - 18px);
+  transition: padding-left 0.3s ease-in-out;
+}
+
+.nt-switch--checked .nt-switch-action {
+  left: calc(var(--nt-switch-width) - var(--nt-switch-height) + 2px);
+}
+.nt-switch--checked .nt-switch-text {
+  padding-left: 5px;
+}
diff --git a/style/switch/index.js b/style/switch/index.js
new file mode 100644
index 00000000..4582418a
--- /dev/null
+++ b/style/switch/index.js
@@ -0,0 +1 @@
+import "./index.css";
\ No newline at end of file
diff --git a/style/vars.css b/style/vars.css
index 23a3f728..5dc5854e 100644
--- a/style/vars.css
+++ b/style/vars.css
@@ -2,9 +2,11 @@
   /* button、input 元素高度 */
   --nt-form-edit-height: 32px;
   /* 主题(primary)颜色 */
-  --nt-primary-color: #42b80e;
-  --nt-primary-color-light1: #47c60f;
-  --nt-primary-color-dark1: #3daa0d;
+  --nt-primary-color: #52c41a;
+  --nt-primary-color-light1: #73d13d;
+  --nt-primary-color-light2: #95de64;
+  --nt-primary-color-light3: #b7eb8f;
+  --nt-primary-color-dark1: #389e0d;
   /* 表示错误(error)的颜色 */
   --nt-error-color: #ed3f13;
   /* 表示成功(success)的颜色 */

From f35239ee6a03943b78d58cc17b768713958f52cf Mon Sep 17 00:00:00 2001
From: fly_dream <1456207945@qq.com>
Date: Thu, 23 May 2024 10:09:02 +0800
Subject: [PATCH 08/18] chore(main): release 0.5.0 (#12)

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c38c4568..0725ee1d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.5.0](https://github.com/DvShu/neatui-vue/compare/v0.4.0...v0.5.0) (2024-05-23)
+
+
+### Features
+
+* **Switch:** 开关按钮 ([3e557a1](https://github.com/DvShu/neatui-vue/commit/3e557a16afd208d4f47aa39c1981543daede8786))
+
 ## [0.4.0](https://github.com/DvShu/neatui-vue/compare/v0.3.1...v0.4.0) (2024-05-22)
 
 
diff --git a/package.json b/package.json
index fc43e955..65c98e80 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@asteres/neatui-vue",
   "description": "基于 Vue3 的 UI 组件库",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "g:c": "node scripts/index.js template",

From 4dd23f62e7ac7905469108dad29f26666f83e8a8 Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Fri, 24 May 2024 17:06:47 +0800
Subject: [PATCH 09/18] =?UTF-8?q?fix(Radio):=20=E5=8D=95=E9=80=89=E6=A1=86?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20checked=20=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(Checkbox): 复选框增加 checked 属性

fix(Polygon): 完善多边形文档
---
 .github/workflows/release-please.yml |   3 +-
 docs/.vitepress/config.ts            |   1 +
 docs/components/Polygon.md           | 135 ++++++++++++++++++++++++++-
 docs/components/checkbox.md          |  19 +++-
 docs/components/radio.md             |  32 ++++++-
 docs/components/table.md             |  74 +++++++++++++++
 src/components/Checkbox.vue          |   6 ++
 src/components/CheckboxGroup.vue     |   2 +
 src/components/Polygon.vue           |   9 +-
 src/components/Radio.vue             |   6 ++
 src/components/Table.vue             |  53 +++++++++--
 src/index.ts                         |   2 +-
 src/style.css                        |  10 ++
 style/table/index.css                |   5 +
 14 files changed, 338 insertions(+), 19 deletions(-)

diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
index 736ca318..719b0f6b 100644
--- a/.github/workflows/release-please.yml
+++ b/.github/workflows/release-please.yml
@@ -13,7 +13,7 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: google-github-actions/release-please-action@v4
+      - uses: googleapis/release-please-action@v4
         id: release
         name: release
         with:
@@ -27,6 +27,7 @@ jobs:
 
       - name: Print Release Output
         run: |
+          echo "Release release_created: ${{ steps.release.outputs.release_created }}"
           echo "Release output: ${{ toJson(steps.release.outputs) }}"
 
   joblog:
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index a5dd8d15..47ea79c1 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -55,6 +55,7 @@ export default defineConfig({
           { text: 'Checkbox 复选框', link: '/components/checkbox' },
           { text: 'Radio 单选框', link: '/components/radio' },
           { text: 'Switch 开关', link: '/components/switch' },
+          { text: 'Polygon 多边形', link: '/components/polygon' },
         ],
       },
     ],
diff --git a/docs/components/Polygon.md b/docs/components/Polygon.md
index 566b46d1..6d18a4bb 100644
--- a/docs/components/Polygon.md
+++ b/docs/components/Polygon.md
@@ -1,5 +1,134 @@
-# Polygon
-Polygon
+# Polygon 多边形
+
+显示一些多边形，例如：三角形、菱形、六边形、梯形等；全部采用 [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) 实现
+
 ## 演示
+
+<script setup>
+  import { Polygon } from '../../src';
+</script>
+
 ### 基础用法
-基础用法
\ No newline at end of file
+
+默认提供了多种三角形，只需要配置 `shape` 属性即可。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <div class="grid grid-cols-4">
+    <div class="center flex-col">
+      <Polygon shape="triangle-top"></Polygon>
+      <span>triangle-top</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-bottom"></Polygon>
+      <span>triangle-bottom</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-left"></Polygon>
+      <span>triangle-left</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-right"></Polygon>
+      <span>triangle-right</span>
+    </div>
+  </div>
+  <div class="grid grid-cols-4 mt-15">
+    <div class="center flex-col">
+      <Polygon shape="triangle-top-right"></Polygon>
+      <span>triangle-top-right</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-top-left"></Polygon>
+      <span>triangle-top-left</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-bottom-right"></Polygon>
+      <span>triangle-bottom-right</span>
+    </div>
+    <div class="center flex-col">
+      <Polygon shape="triangle-bottom-left"></Polygon>
+      <span>triangle-bottom-left</span>
+    </div>
+  </div>
+  </textarea>
+  <template #preview>
+    <div class="grid grid-cols-4">
+      <div class="center flex-col">
+        <Polygon shape="triangle-top"></Polygon>
+        <span>triangle-top</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-bottom"></Polygon>
+        <span>triangle-bottom</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-left"></Polygon>
+        <span>triangle-left</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-right"></Polygon>
+        <span>triangle-right</span>
+      </div>
+    </div>
+    <div class="grid grid-cols-4 mt-15">
+      <div class="center flex-col">
+        <Polygon shape="triangle-top-right"></Polygon>
+        <span>triangle-top-right</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-top-left"></Polygon>
+        <span>triangle-top-left</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-bottom-right"></Polygon>
+        <span>triangle-bottom-right</span>
+      </div>
+      <div class="center flex-col">
+        <Polygon shape="triangle-bottom-left"></Polygon>
+        <span>triangle-bottom-left</span>
+      </div>
+    </div>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 自定义菱形
+
+传递 `shape` 为 `rhombus`。然后自己定义 `nt-polygon-rhombus` 样式即可。同时可以通过 `background` 设置图形颜色
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <template>
+    <nt-polygon shape="rhombus" background="red"></nt-polygon>
+  </template>
+  <style>
+    .nt-polygon-rhombus {
+      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+    }
+  </style>
+  </textarea>
+  <template #preview>
+    <Polygon shape="rhombus" background="red"></Polygon>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### Shape Props
+
+| 属性名       | 类型     | 说明   | 默认值 |
+| ------------ | -------- | ------ | ------ |
+| `shape`      | `string` | 形状   | -      |
+| `background` | `string` | 背景色 | -      |
+
+### 样式变量
+
+| 变量名                    | 默认值                   | 说明         |
+| ------------------------- | ------------------------ | ------------ |
+| `--nt-polygen-size`       | `10px`                   | 多边形大小   |
+| `--nt-polygen-width`      | `var(--nt-polygen-size)` | 多边形宽度   |
+| `--nt-polygen-height`     | `var(--nt-polygen-size)` | 多边形高度   |
+| `--nt-polygen-background` | `#666`                   | 多边形背景色 |
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 3eac14f5..e2973014 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -21,7 +21,11 @@
   function handleGroupChange(val: string[]) {
     const checkedCount = val.length
     checkAll.value = checkedCount === cities.length
-    isIndeterminate.value = checkedCount < cities.length
+    if (checkedCount === 0) {
+      isIndeterminate.value = 0
+    } else {
+      isIndeterminate.value = checkedCount < cities.length
+    }
   }
 </script>
 
@@ -179,6 +183,18 @@
   </CodePreview>
 </ClientOnly>
 
+### 受控选中
+
+复选框的选中状态是可控的，通过传递 `checked` 属性，`true` 为选中，`false` 为未选中。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-checkbox label="协议" checked></nt-checkbox>
+  </textarea>
+  </CodePreview>
+</ClientOnly>
+
 ## API
 
 ### Checkbox Props
@@ -192,6 +208,7 @@
 | `value`                 | 原生 `value` 属性              | `string`  | -       |
 | `label`                 | 显示的标签                     | `string`  | -       |
 | `type`                  | 是否设置为按钮风格             | `button`  | -       |
+| `checked`               | 是否选中                       | `boolean` | -       |
 
 ### CheckboxGroup Props
 
diff --git a/docs/components/radio.md b/docs/components/radio.md
index 0338579a..acff14da 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -6,7 +6,7 @@
 
 <script setup>
   import { ref } from 'vue'
-  import { Radio, RadioGroup } from '../../src'
+  import { Radio, RadioGroup, Button } from '../../src'
 
   const sex = ref('0')
 
@@ -110,6 +110,35 @@
   </CodePreview>
 </ClientOnly>
 
+### 受控
+
+有时候需要自己手动控制选中状态时，只需要传递一个 `checked` 属性，`true` 选中, `false` 为未选中
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    import { ref } from 'vue';
+    const allowService = ref(false);
+  </script>
+  <template>
+    <nt-radio label="同意隐私协议" :checked="allowService"></nt-radio>
+    <div class="mt-15">
+      <nt-button @click="allowService = false">未选中</nt-button>
+      <nt-button type="primary" class="ml-10" @click="allowService = true">选中</nt-button>
+    </div>
+  </template>
+  </textarea>
+  <template #preview>
+    <Radio label="同意隐私协议" :checked="allowService"></Radio>
+    <div class="mt-15">
+      <Button @click="allowService = false">未选中</Button>
+      <Button type="primary" class="ml-10" @click="allowService = true">选中</Button>
+    </div>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
 ## API
 
 ### Radio Props
@@ -122,6 +151,7 @@
 | `value`                 | 原生 `value` 属性  | `string`  | -       |
 | `label`                 | 显示的标签         | `string`  | -       |
 | `type`                  | 是否设置为按钮风格 | `button`  | -       |
+| `checked`               | 是否选中           | `boolean` | -       |
 
 ### RadioGroup Props
 
diff --git a/docs/components/table.md b/docs/components/table.md
index e29ff53f..e2cb4c30 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -275,6 +275,46 @@
     ]
   }]
 
+  const columns7 = [{
+    type: 'radio'
+  }, {
+    title: '姓名',
+    key: 'name',
+  }, {
+    title: '年龄',
+    key: 'age',
+  }, {
+    title: '住址',
+    key: 'address'
+  }, {
+    title: '操作',
+    key: 'action',
+    render: () => [
+      h(Button, { type: 'text' }, { default: () => '编辑'}),
+      h(Button, { type: 'text' }, { default: () => '删除'})
+    ]
+  }]
+
+  const columns8 = [{
+    type: 'checkbox'
+  }, {
+    title: '姓名',
+    key: 'name',
+  }, {
+    title: '年龄',
+    key: 'age',
+  }, {
+    title: '住址',
+    key: 'address'
+  }, {
+    title: '操作',
+    key: 'action',
+    render: () => [
+      h(Button, { type: 'text' }, { default: () => '编辑'}),
+      h(Button, { type: 'text' }, { default: () => '删除'})
+    ]
+  }]
+
   const defaultSort = { key: 'age', order: 'desc' }
 
   function renderSummary() {
@@ -649,6 +689,40 @@
   </CodePreview>
 </ClientOnly>
 
+### 可选择(单选)
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <script setup>
+  </script>
+  <template>
+    <hr />
+  </template>
+  </textarea>
+  <template #preview>
+    <Table :data="dataSource4" :columns="columns7"></Table>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 可选择(多选)
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <script setup>
+  </script>
+  <template>
+    <hr />
+  </template>
+  </textarea>
+  <template #preview>
+    <Table :data="dataSource4" :columns="columns8"></Table>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
 ## API
 
 ### Table Props
diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
index d919ffce..3c996458 100644
--- a/src/components/Checkbox.vue
+++ b/src/components/Checkbox.vue
@@ -36,10 +36,13 @@ const props = withDefaults(
     disabled?: boolean;
     value?: string;
     type?: 'button';
+    /** 是否选中 */
+    checked?: boolean;
   }>(),
   {
     indeterminate: false,
     disabled: false,
+    checked: undefined,
   },
 );
 
@@ -54,6 +57,9 @@ const { checkList, updateCheck } = inject<{
 });
 
 const isChecked = computed(() => {
+  if (props.checked != null) {
+    return props.checked;
+  }
   if (checkList != null) {
     return checkList.value.includes(props.value);
   }
diff --git a/src/components/CheckboxGroup.vue b/src/components/CheckboxGroup.vue
index 70064a82..46568f69 100644
--- a/src/components/CheckboxGroup.vue
+++ b/src/components/CheckboxGroup.vue
@@ -16,6 +16,8 @@ const emits = defineEmits(['change']);
 
 function updateCheck(val: any) {
   let index = checkList.value.indexOf(val);
+  console.log(index);
+  console.log(checkList.value);
   if (index === -1) {
     checkList.value.push(val);
   } else {
diff --git a/src/components/Polygon.vue b/src/components/Polygon.vue
index e7ec22b1..1757f4d5 100644
--- a/src/components/Polygon.vue
+++ b/src/components/Polygon.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="['nt-polygon', shape ? `nt-polygon-${shape}` : '']"></div>
+  <div
+    :class="['nt-polygon', shape ? `nt-polygon-${shape}` : '']"
+    :style="[background ? `--nt-polygen-background: ${background}` : '']"
+  ></div>
 </template>
 
 <script setup lang="ts">
@@ -13,6 +16,8 @@ defineProps<{
     | 'triangle-top-right'
     | 'triangle-top-left'
     | 'triangle-bottom-right'
-    | 'triangle-bottom-left';
+    | 'triangle-bottom-left'
+    | string;
+  background?: string;
 }>();
 </script>
diff --git a/src/components/Radio.vue b/src/components/Radio.vue
index 3a61c686..cd913579 100644
--- a/src/components/Radio.vue
+++ b/src/components/Radio.vue
@@ -34,9 +34,12 @@ const props = withDefaults(
     label?: string;
     type?: 'button';
     disabled?: boolean;
+    /** 是否选中 */
+    checked?: boolean;
   }>(),
   {
     disabled: false,
+    checked: undefined,
   },
 );
 
@@ -49,6 +52,9 @@ const { checkedValue, updateCheck } = inject<{
 });
 
 const isChecked = computed(() => {
+  if (props.checked != null) {
+    return props.checked;
+  }
   if (checkedValue != null) {
     return checkedValue.value === props.value;
   }
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 271cdb2d..fd63a704 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -1,6 +1,8 @@
 <script lang="ts">
 import { defineComponent, h, PropType, ref, watch } from 'vue';
 import type { VNode } from 'vue';
+import Radio from './Radio.vue';
+import Checkbox from './Checkbox.vue';
 
 export interface ColumnOption {
   /** 排序时，如果传递了 key，则会将此 key 回传，便于排序, 如果不传此 key，则排序无效 */
@@ -25,6 +27,8 @@ export interface ColumnOption {
   titleColspan: number;
   /** th rowspan */
   titleRowspan: number;
+  /** 设置可选择 */
+  type?: 'radio' | 'checkbox';
 }
 
 export interface DataSortState {
@@ -150,9 +154,12 @@ export default defineComponent({
     const sourceData = ref(props.data);
     const parsedColumns = calculateSpan(props.columns, 0);
 
-    watch(props.data, () => {
-      sourceData.value = props.data;
-    });
+    watch(
+      () => props.data,
+      () => {
+        sourceData.value = props.data;
+      },
+    );
 
     function dataSort(
       data: any[],
@@ -234,6 +241,10 @@ export default defineComponent({
         }
       }
 
+      if (column.type != null && column.width == null) {
+        column.width = 40;
+      }
+
       if (column.width) {
         let colWidth: string = column.width as string;
         if (typeof column.width === 'number') {
@@ -258,15 +269,25 @@ export default defineComponent({
           });
         };
       }
-      return h('th', thAttrs, [
-        h('span', column.title),
-        column.sorter === true
-          ? h('span', { class: 'caret-wrapper' }, [
+      const colChildren = [];
+      if (column.type != null) {
+        if (column.type === 'checkbox') {
+          colChildren.push(
+            h('div', { class: 'nt-table-selection-cell' }, h(Checkbox)),
+          );
+        }
+      } else {
+        colChildren.push(h('span', column.title));
+        if (column.sorter === true) {
+          colChildren.push(
+            h('span', { class: 'caret-wrapper' }, [
               h('span', { class: 'sort-caret ascending' }),
               h('span', { class: 'sort-caret descending' }),
-            ])
-          : null,
-      ]);
+            ]),
+          );
+        }
+      }
+      return h('th', thAttrs, colChildren);
     }
 
     function renderHeadRow(
@@ -361,6 +382,18 @@ export default defineComponent({
               );
             } else if (column.key != null) {
               rowChildren.push(h('td', tdAttr, rowData[column.key]));
+            } else if (column.type != null) {
+              rowChildren.push(
+                h(
+                  'td',
+                  tdAttr,
+                  h(
+                    'div',
+                    { class: 'nt-table-selection-cell' },
+                    h(column.type === 'radio' ? Radio : Checkbox),
+                  ),
+                ),
+              );
             } else {
               rowChildren.push(h('td', tdAttr, ''));
             }
diff --git a/src/index.ts b/src/index.ts
index 1c0c76cd..9b68e106 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,4 +26,4 @@ export { default as Checkbox } from './components/Checkbox.vue';
 export { default as CheckboxGroup } from './components/CheckboxGroup.vue';
 export { default as Radio } from './components/Radio.vue';
 export { default as RadioGroup } from './components/RadioGroup.vue';
-export { default as Switch } from "./components/Switch.vue"
+export { default as Switch } from './components/Switch.vue';
diff --git a/src/style.css b/src/style.css
index 3fc6ff1e..4ffd3be7 100644
--- a/src/style.css
+++ b/src/style.css
@@ -24,6 +24,9 @@
 .grid-cols-5 {
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 
 .gap-4 {
   gap: 1rem;
@@ -52,6 +55,9 @@
   justify-content: center;
   align-items: center;
 }
+.flex-col {
+  flex-flow: column nowrap;
+}
 
 .flex-between {
   display: flex;
@@ -96,6 +102,10 @@
   top: calc(100% + 20px);
 }
 
+.nt-polygon-rhombus {
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+
 #app {
   .icon-list {
     display: inline-grid;
diff --git a/style/table/index.css b/style/table/index.css
index 40bea1da..6c71f451 100644
--- a/style/table/index.css
+++ b/style/table/index.css
@@ -94,3 +94,8 @@
 .nt-table tfoot.nt-fixed {
   z-index: 2;
 }
+.nt-table-selection-cell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

From f2ed2915621f33c00ca0642039899cc3f1fc6447 Mon Sep 17 00:00:00 2001
From: fly_dream <1456207945@qq.com>
Date: Fri, 24 May 2024 17:09:04 +0800
Subject: [PATCH 10/18] chore(main): release 0.5.1 (#13)

---
 CHANGELOG.md | 9 +++++++++
 package.json | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0725ee1d..63bba9bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.5.1](https://github.com/DvShu/neatui-vue/compare/v0.5.0...v0.5.1) (2024-05-24)
+
+
+### Bug Fixes
+
+* **Checkbox:** 复选框增加 checked 属性 ([4dd23f6](https://github.com/DvShu/neatui-vue/commit/4dd23f62e7ac7905469108dad29f26666f83e8a8))
+* **Polygon:** 完善多边形文档 ([4dd23f6](https://github.com/DvShu/neatui-vue/commit/4dd23f62e7ac7905469108dad29f26666f83e8a8))
+* **Radio:** 单选框增加 checked 属性 ([4dd23f6](https://github.com/DvShu/neatui-vue/commit/4dd23f62e7ac7905469108dad29f26666f83e8a8))
+
 ## [0.5.0](https://github.com/DvShu/neatui-vue/compare/v0.4.0...v0.5.0) (2024-05-23)
 
 
diff --git a/package.json b/package.json
index 65c98e80..a8f714fa 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@asteres/neatui-vue",
   "description": "基于 Vue3 的 UI 组件库",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "scripts": {
     "g:c": "node scripts/index.js template",

From 3d7ea23490f5113299cda3e26f99945ecc8c382c Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Thu, 30 May 2024 16:43:01 +0800
Subject: [PATCH 11/18] =?UTF-8?q?fix(Button):=20=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=9B=BE=E5=AE=9A=E4=B9=89=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/release-please.yml |  7 +--
 docs/.vitepress/theme/index.ts       |  2 -
 docs/components/button.md            | 87 +++++++++++++++++++++++-----
 docs/components/table.md             | 25 +++-----
 package.json                         |  2 +-
 pnpm-lock.yaml                       | 18 ++++--
 src/components/Button.vue            | 34 ++++++++++-
 src/components/Checkbox.vue          | 27 ++++++---
 src/components/Radio.vue             | 26 +++++++--
 src/components/Table.vue             | 84 ++++++++++++++++++++++++++-
 src/style.css                        | 15 +++++
 style/button/index.css               | 84 +++++++++++++++++++--------
 style/table/index.js                 |  4 +-
 13 files changed, 327 insertions(+), 88 deletions(-)

diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
index 719b0f6b..0c1d2853 100644
--- a/.github/workflows/release-please.yml
+++ b/.github/workflows/release-please.yml
@@ -12,6 +12,8 @@ name: release-please
 jobs:
   release:
     runs-on: ubuntu-latest
+    outputs:
+      release_created: ${{ steps.release.outputs.release_created }}
     steps:
       - uses: googleapis/release-please-action@v4
         id: release
@@ -25,11 +27,6 @@ jobs:
           # for more options
           release-type: node
 
-      - name: Print Release Output
-        run: |
-          echo "Release release_created: ${{ steps.release.outputs.release_created }}"
-          echo "Release output: ${{ toJson(steps.release.outputs) }}"
-
   joblog:
     runs-on: ubuntu-latest
     needs: release
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 8e946055..2849ac67 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -19,8 +19,6 @@ import CodePreview from '../../../src/app_components/CodePreview.vue';
 import '../../../style/message';
 import '../../../style/shadow';
 import '../../../style/table';
-import '../../../style/checkbox';
-import '../../../style/radio';
 import '../../../style/switch';
 
 export default {
diff --git a/docs/components/button.md b/docs/components/button.md
index d9628148..40aa51bd 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -4,14 +4,18 @@
 
 ## 基础使用
 
+<script setup>
+  import { Button } from '../../src'
+</script>
+
 ### 按钮类型
 
-使用 `type` 控制按钮类型, 提供三种类型: `default`, `primary`, `text`。
+使用 `type` 控制按钮类型, 提供三种类型: `normal`, `primary`, `text`。
 
 <ClientOnly>
   <CodePreview>
   <textarea lang="vue-html">
-  <nt-button>Default</nt-button>
+  <nt-button type="normal">Default</nt-button>
   <nt-button type="primary" class="ml-10">Primary</nt-button>
   <nt-button type="text" class="ml-10">Text</nt-button>
   </textarea>
@@ -24,7 +28,7 @@
 
 <ClientOnly><CodePreview>
 <textarea lang="vue-html">
-<nt-button disabled>Default</nt-button>
+<nt-button disabled type="normal">Default</nt-button>
 <nt-button type="text" class="ml-10" disabled>Text</nt-button>
 </textarea>
 </CodePreview></ClientOnly>
@@ -35,7 +39,7 @@
 
 <ClientOnly><CodePreview>
 <textarea lang="vue-html">
-<nt-button loading>Default</nt-button>
+<nt-button loading type="normal">Default</nt-button>
 <nt-button type="primary" loading class="ml-10">Primary</nt-button>
 </textarea>
 </CodePreview></ClientOnly>
@@ -46,7 +50,7 @@
 
 <ClientOnly><CodePreview>
 <textarea lang="vue-html">
-<nt-button block>Default</nt-button>
+<nt-button block type="normal">Default</nt-button>
 <nt-button type="primary" block class="mt-15">Text</nt-button>
 </textarea>
 </CodePreview></ClientOnly>
@@ -57,7 +61,7 @@
 
 <ClientOnly><CodePreview>
 <textarea lang="vue-html">
-<nt-button circle>D</nt-button>
+<nt-button circle type="normal">D</nt-button>
 <nt-button type="primary" round class="ml-10">Text</nt-button>
 </textarea>
 </CodePreview></ClientOnly>
@@ -68,7 +72,7 @@
 
 <ClientOnly><CodePreview>
 <textarea lang="vue-html">
-<nt-button circle>
+<nt-button circle type="normal">
 <nt-search-icon></nt-search-icon>
 </nt-button>
 <nt-button type="primary" round class="ml-10">
@@ -78,16 +82,73 @@
 </textarea>
 </CodePreview></ClientOnly>
 
+### 透明背景
+
+`ghost` 背景变为透明，常用在有色背景上
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-button type="primary" ghost>透明按钮</nt-button>
+  </textarea>
+  </CodePreview>
+</ClientOnly>
+
+### 自定义颜色
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-button color="#722ed1">按钮</nt-button>
+  <nt-button color="#eb2f96" ghost class="ml-10">按钮</nt-button>
+  </textarea>
+  </CodePreview>
+</ClientOnly>
+
+### 扩展 `type`
+
+通过给 `type` 设置一个非预设的值，然后定义 `.nt-btn-x` 的样式。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <template>
+    <nt-button type="blue">蓝色按钮</nt-button>
+    <nt-button type="gradient" class="ml-10">渐变按钮</nt-button>
+  </template>
+  <style>
+    .nt-btn-blue {
+      --nt-btn-border-color: #1677ff;
+      --nt-btn-hover-border-color: #4096ff;
+      --nt-btn-active-border-color: #0958d9;
+    }
+    .nt-btn-gradient {
+      border: none;
+      --nt-btn-color: #389e0d;
+      --nt-btn-active-color: #0fd850;
+      --nt-btn-background: linear-gradient(90deg, #0fd850 0%, #f9f047 100%);
+      --nt-btn-hover-background: linear-gradient(90deg, #2af06a 0%, #fbf478 100%);
+      --nt-btn-active-background: linear-gradient(90deg, #0a9036 0%, #ece008 100%);
+    }
+  </style>
+  </textarea>
+  <template #preview>
+    <Button type="blue">蓝色按钮</Button>
+    <Button type="gradient" class="ml-10">渐变按钮</Button>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
 ## API
 
 ### Button Props
 
 | 名称          | 说明                                           | 类型      | 默认值     |
 | ------------- | ---------------------------------------------- | --------- | ---------- |
-| `type`        | 按钮类型, `normal`, `primary`, `text`          | `string`  | `normal`   |
+| `type`        | 按钮类型, `normal`, `primary`, `text`          | `string`  | -          |
 | `disabled`    | 按钮禁用状态                                   | `boolean` | `false`    |
 | `loading`     | 按钮加载状态                                   | `boolean` | `false`    |
-| `block`       | 按钮是否为块级元素[适合其父宽度(宽度100%)]     | `boolean` | false      |
+| `block`       | 按钮是否为块级元素[适合其父宽度(宽度100%)]     | `boolean` | `false`    |
 | `round`       | 按钮是否为圆角[弧形按钮]                       | `boolean` | `false`    |
 | `circle`      | 按钮是否为圆形                                 | `boolean` | `false`    |
 | `htmlType`    | 原生的 `type` 属性; `button`、submit`、`reset` | `string`  | `button`   |
@@ -104,15 +165,15 @@
 | 名称                             | 描述                     | 默认值                       |
 | -------------------------------- | ------------------------ | ---------------------------- |
 | `--nt-btn-color`                 | 按钮的文字颜色           | `rgba(0, 0, 0, 0.65)`        |
-| `--nt-btn-bg-color`              | 按钮的背景颜色           | `	#fff`                       |
+| `--nt-btn-background`            | 按钮的背景颜色           | `	#fff`                       |
 | `--nt-btn-border-color`          | 按钮的边框颜色           | `#d9d9d9`                    |
 | `--nt-form-edit-height`          | 按钮的高度               | `32px`                       |
 | `--nt-btn-hover-color`           | 鼠标悬浮时按钮的文字颜色 | `#79b3f7`                    |
 | `--nt-btn-hover-border-color`    | 鼠标悬浮时按钮的边框颜色 | `var(--nt-btn-hover-color)`  |
-| `--nt-btn-hover-bg-color`        | 鼠标悬浮时按钮的背景颜色 | `var(--nt-btn-bg-color)`     |
+| `--nt-btn-hover-background`      | 鼠标悬浮时按钮的背景颜色 | `var(--nt-btn-background)`   |
 | `--nt-btn-active-color`          | 点击时按钮的颜色         | `#197df1`                    |
-| `--nt-btn-active-bg-color`       | 点击时按钮的背景颜色     | `var(--nt-btn-bg-color)`     |
+| `--nt-btn-active-background`     | 点击时按钮的背景颜色     | `var(--nt-btn-background)`   |
 | `--nt-btn-active-border-color`   | 点击时按钮的边框颜色     | `var(--nt-btn-active-color)` |
 | `--nt-btn-disabled-color`        | 禁用时按钮的文字颜色     | `#c9c9c9`                    |
-| `--nt-btn-disabled-bg-color`     | 禁用时按钮的背景颜色     | `#fbfbfb`                    |
+| `--nt-btn-disabled-background`   | 禁用时按钮的背景颜色     | `#fbfbfb`                    |
 | `--nt-btn-disabled-border-color` | 禁用时按钮的边框颜色     | `#e6e6e6`                    |
diff --git a/docs/components/table.md b/docs/components/table.md
index e2cb4c30..5c0e5d05 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -276,7 +276,8 @@
   }]
 
   const columns7 = [{
-    type: 'radio'
+    type: 'radio',
+    disabled: (rowData) => rowData.name === '张三'
   }, {
     title: '姓名',
     key: 'name',
@@ -286,13 +287,6 @@
   }, {
     title: '住址',
     key: 'address'
-  }, {
-    title: '操作',
-    key: 'action',
-    render: () => [
-      h(Button, { type: 'text' }, { default: () => '编辑'}),
-      h(Button, { type: 'text' }, { default: () => '删除'})
-    ]
   }]
 
   const columns8 = [{
@@ -306,13 +300,6 @@
   }, {
     title: '住址',
     key: 'address'
-  }, {
-    title: '操作',
-    key: 'action',
-    render: () => [
-      h(Button, { type: 'text' }, { default: () => '编辑'}),
-      h(Button, { type: 'text' }, { default: () => '删除'})
-    ]
   }]
 
   const defaultSort = { key: 'age', order: 'desc' }
@@ -323,6 +310,10 @@
       h('td', { colspan: '3' },dataSource1.reduce((sum, item) => sum + item.age, 0)),
     ])
   }
+
+  function rowKey(rowData) {
+    return rowData.name
+  }
 </script>
 
 ### 基础表格
@@ -701,7 +692,7 @@
   </template>
   </textarea>
   <template #preview>
-    <Table :data="dataSource4" :columns="columns7"></Table>
+    <Table :data="dataSource4" :columns="columns7" :row-key="rowKey"></Table>
   </template>
   </CodePreview>
 </ClientOnly>
@@ -718,7 +709,7 @@
   </template>
   </textarea>
   <template #preview>
-    <Table :data="dataSource4" :columns="columns8"></Table>
+    <Table :data="dataSource4" :columns="columns8" :row-key="rowKey"></Table>
   </template>
   </CodePreview>
 </ClientOnly>
diff --git a/package.json b/package.json
index a8f714fa..e841b4ab 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
   },
   "license": "MulanPSL-2.0",
   "dependencies": {
-    "ph-utils": "^0.4.3",
+    "ph-utils": "^0.4.5",
     "qrcode-generator-es": "^0.0.4"
   },
   "packageManager": "pnpm@9.0.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b5a3d48c..fe3fdf3d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       ph-utils:
-        specifier: ^0.4.3
-        version: 0.4.3
+        specifier: ^0.4.5
+        version: 0.4.5
       qrcode-generator-es:
         specifier: ^0.0.4
         version: 0.0.4
@@ -152,6 +152,10 @@ packages:
     resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
     engines: {node: '>=6.9.0'}
 
+  '@ctrl/tinycolor@4.1.0':
+    resolution: {integrity: sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==}
+    engines: {node: '>=14'}
+
   '@docsearch/css@3.6.0':
     resolution: {integrity: sha512-+sbxb71sWre+PwDK7X2T8+bhS6clcVMLwBPznX45Qu6opJcgRjAp7gYSDzVFp187J+feSj5dNBN1mJoi6ckkUQ==}
 
@@ -1194,8 +1198,8 @@ packages:
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
-  ph-utils@0.4.3:
-    resolution: {integrity: sha512-blFJ5+6QKoudds/zG2qEEGXJWRf/iSo24AqdIMQyj+JhrCMCZhQTF2uFCxJzYGhxhsbEurNsFI4He8rGfblY/Q==}
+  ph-utils@0.4.5:
+    resolution: {integrity: sha512-LmORf7AqiZSIP2ioQEwueNWYn7Wru7xo6Q8cJUw3a+/5xvLxS+gMdrsjzxCOpJBlcf4yKU9nEf6kb4RChSe0yw==}
 
   picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -1635,6 +1639,8 @@ snapshots:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
+  '@ctrl/tinycolor@4.1.0': {}
+
   '@docsearch/css@3.6.0': {}
 
   '@docsearch/js@3.6.0(@algolia/client-search@4.23.3)(search-insights@2.13.0)':
@@ -2689,7 +2695,9 @@ snapshots:
 
   perfect-debounce@1.0.0: {}
 
-  ph-utils@0.4.3: {}
+  ph-utils@0.4.5:
+    dependencies:
+      '@ctrl/tinycolor': 4.1.0
 
   picocolors@1.0.0: {}
 
diff --git a/src/components/Button.vue b/src/components/Button.vue
index df438769..9f72cf92 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -7,9 +7,11 @@
       round ? 'nt-btn-round' : '',
       circle ? 'nt-btn-circle' : '',
       loading ? 'nt-btn-loading' : '',
+      ghost ? 'nt-btn-ghost' : '',
     ]"
     :disabled="disabled || loading"
     :type="htmlType"
+    :style="colorStyle"
   >
     <template v-if="loading">
       <LoadingIcon class="nt-rotate-anim"></LoadingIcon>
@@ -21,14 +23,16 @@
   </button>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue';
 import LoadingIcon from './icon/Loading.vue';
+import { adjust } from 'ph-utils/color';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     /**
      * 设置按钮类型；primary, text, normal
      */
-    type?: 'primary' | 'text' | 'normal' | 'repple';
+    type?: 'primary' | 'text' | 'normal' | string;
     /** 是否禁用状态 */
     disabled?: boolean;
     /** 原生的 type 属性 */
@@ -43,9 +47,12 @@ withDefaults(
     loadingText?: string;
     /** 是否处于加载状态 */
     loading?: boolean;
+    /** 背景是否透明 */
+    ghost?: boolean;
+    /** 自定义按钮颜色 */
+    color?: string;
   }>(),
   {
-    type: 'normal',
     disabled: false,
     htmlType: 'button',
     block: false,
@@ -53,6 +60,27 @@ withDefaults(
     round: false,
     loadingText: '加载中……',
     loading: false,
+    ghost: false,
+    color: undefined,
   },
 );
+
+const colorStyle = computed(() => {
+  if (props.color != null) {
+    const lighten = adjust(props.color, 1, true);
+    const darken = adjust(props.color, 3, false);
+    return {
+      '--nt-btn-border-color': props.color,
+      '--nt-btn-color': props.ghost ? props.color : '#ffffff',
+      '--nt-btn-hover-color': props.ghost ? lighten : '#ffffff',
+      '--nt-btn-bg-color': props.ghost ? 'transparent' : props.color,
+      '--nt-btn-active-color': props.ghost ? darken : '#ffffff',
+      '--nt-btn-hover-border-color': lighten,
+      '--nt-btn-hover-bg-color': props.ghost ? 'transparent' : lighten,
+      '--nt-btn-active-bg-color': props.ghost ? 'transparent' : darken,
+      '--nt-btn-active-border-color': darken,
+    };
+  }
+  return {};
+});
 </script>
diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
index 3c996458..11aae90d 100644
--- a/src/components/Checkbox.vue
+++ b/src/components/Checkbox.vue
@@ -21,9 +21,9 @@
   </label>
 </template>
 <script setup lang="ts">
-import { Ref, computed, inject } from 'vue';
+import { Ref, ref, inject, watch } from 'vue';
 
-const checkedModel = defineModel({ type: Boolean });
+const checkedModel = defineModel();
 
 const props = withDefaults(
   defineProps<{
@@ -34,7 +34,7 @@ const props = withDefaults(
     /** 显示的 label 文本 */
     label?: string;
     disabled?: boolean;
-    value?: string;
+    value?: string | number | boolean;
     type?: 'button';
     /** 是否选中 */
     checked?: boolean;
@@ -43,6 +43,7 @@ const props = withDefaults(
     indeterminate: false,
     disabled: false,
     checked: undefined,
+    value: undefined,
   },
 );
 
@@ -56,15 +57,26 @@ const { checkList, updateCheck } = inject<{
   updateCheck: null,
 });
 
-const isChecked = computed(() => {
+function initIsChecked() {
   if (props.checked != null) {
     return props.checked;
   }
   if (checkList != null) {
     return checkList.value.includes(props.value);
   }
+  if (props.value != null) {
+    return checkedModel.value === props.value;
+  }
   return checkedModel.value;
-});
+}
+const isChecked = ref(initIsChecked());
+
+watch(
+  () => props.checked,
+  (checked) => {
+    isChecked.value = checked;
+  },
+);
 
 function handleChange(e: Event) {
   const target = e.target as HTMLInputElement;
@@ -72,7 +84,8 @@ function handleChange(e: Event) {
   if (updateCheck != null) {
     updateCheck(props.value);
   }
-  checkedModel.value = checked;
-  emits('change', checked);
+  const value = props.value == null ? checked : props.value;
+  checkedModel.value = value;
+  emits('change', value);
 }
 </script>
diff --git a/src/components/Radio.vue b/src/components/Radio.vue
index cd913579..f91df280 100644
--- a/src/components/Radio.vue
+++ b/src/components/Radio.vue
@@ -23,9 +23,9 @@
   </label>
 </template>
 <script setup lang="ts">
-import { computed, inject, Ref } from 'vue';
+import { watch, inject, Ref, ref } from 'vue';
 
-const checkedModel = defineModel({ type: Boolean });
+const checkedModel = defineModel();
 
 const props = withDefaults(
   defineProps<{
@@ -40,6 +40,7 @@ const props = withDefaults(
   {
     disabled: false,
     checked: undefined,
+    value: undefined,
   },
 );
 
@@ -51,15 +52,27 @@ const { checkedValue, updateCheck } = inject<{
   updateCheck: null,
 });
 
-const isChecked = computed(() => {
+function initIsChecked() {
   if (props.checked != null) {
     return props.checked;
   }
   if (checkedValue != null) {
     return checkedValue.value === props.value;
   }
+  if (props.value != null) {
+    return checkedModel.value === props.value;
+  }
   return checkedModel.value;
-});
+}
+
+const isChecked = ref(initIsChecked());
+
+watch(
+  () => props.checked,
+  (val) => {
+    isChecked.value = val;
+  },
+);
 
 const emits = defineEmits(['change']);
 
@@ -69,7 +82,8 @@ function handleChange(e: Event) {
   if (updateCheck != null) {
     updateCheck(props.value);
   }
-  checkedModel.value = checked;
-  emits('change', checked);
+  const value = props.value == null ? checked : props.value;
+  checkedModel.value = value;
+  emits('change', value);
 }
 </script>
diff --git a/src/components/Table.vue b/src/components/Table.vue
index fd63a704..97377b91 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -3,6 +3,8 @@ import { defineComponent, h, PropType, ref, watch } from 'vue';
 import type { VNode } from 'vue';
 import Radio from './Radio.vue';
 import Checkbox from './Checkbox.vue';
+import { random } from 'ph-utils';
+import { format } from 'ph-utils/date';
 
 export interface ColumnOption {
   /** 排序时，如果传递了 key，则会将此 key 回传，便于排序, 如果不传此 key，则排序无效 */
@@ -29,6 +31,8 @@ export interface ColumnOption {
   titleRowspan: number;
   /** 设置可选择 */
   type?: 'radio' | 'checkbox';
+  /** 为 radio，checkbox 设置是否禁用 */
+  disabled?: (row: any) => boolean;
 }
 
 export interface DataSortState {
@@ -44,6 +48,8 @@ interface SortOption {
 
 type SorterFnOption = (data: any[]) => any[];
 
+type RowKeyOption = (row: any) => any;
+
 /** 通过配置的 columns 计算表头跨行，跨列 */
 function calculateSpan(headers: ColumnOption[], level = 0): ColumnOption[] {
   if (!Array.isArray(headers)) {
@@ -145,14 +151,23 @@ export default defineComponent({
       required: false,
       default: 'auto',
     },
+    rowKey: {
+      type: Function as PropType<RowKeyOption>,
+      required: false,
+    },
   },
   setup(props) {
     const sortInfo = ref<SortOption>({
       key: '',
       order: '',
     });
+    const allowSelectCount = calcAllowSelectCount(); // 允许选择的数量
     const sourceData = ref(props.data);
     const parsedColumns = calculateSpan(props.columns, 0);
+    const selectedValues = new Set();
+    /** 复选的半选、全选状态 */
+    const isIndeterminate = ref(false);
+    const checkedAll = ref(false);
 
     watch(
       () => props.data,
@@ -161,6 +176,45 @@ export default defineComponent({
       },
     );
 
+    function calcAllowSelectCount() {
+      let c = 0;
+      if (props.columns[0].type === 'checkbox') {
+        for (const d in props.data) {
+          let isDisabled = false;
+          if (props.columns[0].disabled != null) {
+            isDisabled = props.columns[0].disabled(d);
+          }
+          if (!isDisabled) {
+            c++;
+          }
+        }
+      }
+      return c;
+    }
+
+    function handleSelectionChange(value: any) {
+      const selectType = props.columns[0].type;
+      if (selectType === 'radio') {
+        selectedValues.clear();
+      }
+      if (selectedValues.has(value)) {
+        selectedValues.delete(value);
+      } else {
+        selectedValues.add(value);
+      }
+      if (selectedValues.size === 0) {
+        isIndeterminate.value = false;
+        checkedAll.value = false;
+      } else if (selectedValues.size === allowSelectCount) {
+        checkedAll.value = true;
+        isIndeterminate.value = false;
+      } else {
+        checkedAll.value = false;
+        isIndeterminate.value = true;
+      }
+      console.log(selectedValues);
+    }
+
     function dataSort(
       data: any[],
       sortInfo: SortOption,
@@ -273,7 +327,17 @@ export default defineComponent({
       if (column.type != null) {
         if (column.type === 'checkbox') {
           colChildren.push(
-            h('div', { class: 'nt-table-selection-cell' }, h(Checkbox)),
+            h(
+              'div',
+              {
+                class: 'nt-table-selection-cell',
+              },
+              h(Checkbox, {
+                indeterminate: isIndeterminate.value,
+                checked: checkedAll.value,
+                onChange: handleSelectionChange,
+              }),
+            ),
           );
         }
       } else {
@@ -324,6 +388,7 @@ export default defineComponent({
       left: string[],
       right: string[],
       rowChildren: VNode[],
+      selectionName: string,
     ) {
       for (const column of columns) {
         if (column.children == null) {
@@ -383,6 +448,8 @@ export default defineComponent({
             } else if (column.key != null) {
               rowChildren.push(h('td', tdAttr, rowData[column.key]));
             } else if (column.type != null) {
+              const selectionValue =
+                props.rowKey != null ? props.rowKey(rowData) : '';
               rowChildren.push(
                 h(
                   'td',
@@ -390,7 +457,15 @@ export default defineComponent({
                   h(
                     'div',
                     { class: 'nt-table-selection-cell' },
-                    h(column.type === 'radio' ? Radio : Checkbox),
+                    h(column.type === 'radio' ? Radio : Checkbox, {
+                      name: selectionName,
+                      value: selectionValue,
+                      checked: selectedValues.has(selectionValue),
+                      disabled: column.disabled
+                        ? column.disabled(rowData)
+                        : false,
+                      onChange: handleSelectionChange,
+                    }),
                   ),
                 ),
               );
@@ -406,6 +481,7 @@ export default defineComponent({
             left,
             right,
             rowChildren,
+            selectionName,
           );
         }
       }
@@ -413,10 +489,12 @@ export default defineComponent({
 
     function renderBody() {
       const bodies: VNode[] = [];
+      format();
+      const selectionName = `${random(3)}${String(Date.now()).substring(8)}`;
       for (let i = 0, len = sourceData.value.length; i < len; i++) {
         const dataItem = sourceData.value[i];
         const $tds: VNode[] = [];
-        renderBodyRow(parsedColumns, i, dataItem, [], [], $tds);
+        renderBodyRow(parsedColumns, i, dataItem, [], [], $tds, selectionName);
         bodies.push(h('tr', $tds));
       }
       return bodies;
diff --git a/src/style.css b/src/style.css
index 4ffd3be7..0ed49682 100644
--- a/src/style.css
+++ b/src/style.css
@@ -106,6 +106,21 @@
   clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
 }
 
+.nt-btn-blue {
+  --nt-btn-border-color: #1677ff;
+  --nt-btn-hover-border-color: #4096ff;
+  --nt-btn-active-border-color: #0958d9;
+}
+
+.nt-btn-gradient {
+  border: none;
+  --nt-btn-color: #389e0d;
+  --nt-btn-active-color: #0fd850;
+  --nt-btn-background: linear-gradient(90deg, #0fd850 0%, #f9f047 100%);
+  --nt-btn-hover-background: linear-gradient(90deg, #2af06a 0%, #fbf478 100%);
+  --nt-btn-active-background: linear-gradient(90deg, #0a9036 0%, #ece008 100%);
+}
+
 #app {
   .icon-list {
     display: inline-grid;
diff --git a/style/button/index.css b/style/button/index.css
index c2b4d2b0..8223310b 100644
--- a/style/button/index.css
+++ b/style/button/index.css
@@ -1,18 +1,22 @@
 /* 默认按钮，按钮的基础样式 */
 .nt-btn {
   /* 按钮的文字颜色 */
-  --nt-btn-color: rgba(0, 0, 0, 0.65);
+  --nt-btn-color: #ffffff;
+  --nt-btn-hover-color: var(--nt-btn-color);
+  --nt-btn-active-color: var(--nt-btn-color);
   /* 按钮的背景色 */
-  --nt-btn-bg-color: #fff;
   /* 按钮的边框颜色 */
-  --nt-btn-border-color: #d9d9d9;
+  --nt-btn-border-color: var(--nt-primary-color, #52c41a);
+  --nt-btn-background: var(--nt-btn-border-color);
   /* 按钮的悬浮边框 less lighten(var(--nt-primary-color), 10) */
-  --nt-btn-hover-color: var(--nt-primary-color-light1, #31890a);
+  --nt-btn-hover-border-color: var(--nt-primary-color-light1, #31890a);
+  --nt-btn-hover-background: var(--nt-btn-hover-border-color);
   /* 按钮的点击颜色 */
-  --nt-btn-active-color: var(--nt-primary-color-dark1, #31890a);
+  --nt-btn-active-border-color: var(--nt-primary-color-dark1, #31890a);
+  --nt-btn-active-background: var(--nt-btn-active-border-color);
   /* 按钮禁用 */
   --nt-btn-disabled-color: #c9c9c9;
-  --nt-btn-disabled-bg-color: #fbfbfb;
+  --nt-btn-disabled-background: #fbfbfb;
   --nt-btn-disabled-border-color: #e6e6e6;
   display: inline-flex;
   justify-content: center;
@@ -27,7 +31,7 @@
   border-radius: 3px;
   font-size: 14px;
   color: var(--nt-btn-color);
-  background: var(--nt-btn-bg-color);
+  background: var(--nt-btn-background);
   border: 1px solid var(--nt-btn-border-color);
   transition:
     border-color 0.3s,
@@ -49,43 +53,58 @@
 }
 
 .nt-btn:hover {
-  border-color: var(--nt-btn-hover-border-color, var(--nt-btn-hover-color));
+  border-color: var(
+    --nt-btn-hover-border-color,
+    var(--nt-btn-hover-background)
+  );
   color: var(--nt-btn-hover-color);
-  background-color: var(--nt-btn-hover-bg-color, var(--nt-btn-bg-color));
+  background: var(--nt-btn-hover-background);
 }
 
 .nt-btn:active {
-  border-color: var(--nt-btn-active-border-color, var(--nt-btn-active-color));
+  border-color: var(
+    --nt-btn-active-border-color,
+    var(--nt-btn-active-background)
+  );
   color: var(--nt-btn-active-color);
-  background-color: var(--nt-btn-active-bg-color, var(--nt-btn-bg-color));
+  background: var(--nt-btn-active-background);
 }
 
 .nt-btn [class*='nt-icon'] + span {
   margin-left: 5px;
 }
 
+.nt-btn-normal {
+  /* 按钮的文字颜色 */
+  --nt-btn-color: rgba(0, 0, 0, 0.65);
+  /* 按钮的背景色 */
+  --nt-btn-background: #fff;
+  /* 按钮的边框颜色 */
+  --nt-btn-border-color: #d9d9d9;
+  /* 按钮的悬浮边框 less lighten(var(--nt-primary-color), 10) */
+  --nt-btn-hover-color: var(--nt-primary-color-light1, #31890a);
+  /* 按钮的点击颜色 */
+  --nt-btn-active-color: var(--nt-primary-color-dark1, #31890a);
+  --nt-btn-hover-background: transparent;
+  --nt-btn-active-background: transparent;
+  --nt-btn-hover-border-color: var(--nt-btn-hover-color);
+  --nt-btn-active-border-color: var(--nt-btn-active-color);
+}
+
 /* primary 按钮样式 */
 .nt-btn-primary {
-  /* 按钮的颜色 */
-  --nt-btn-color: #fff;
   /* 按钮的背景色 */
-  --nt-btn-bg-color: var(--nt-primary-color);
+  --nt-btn-background: var(--nt-primary-color);
   /* 按钮的边框颜色 */
-  --nt-btn-border-color: var(--nt-primary-color);
-  /* 按钮的悬浮边框 less lighten(var(--nt-primary-color), 10) */
-  --nt-btn-hover-color: #fff;
-  --nt-btn-hover-border-color: var(--nt-primary-color-light1, #31890a);
-  --nt-btn-hover-bg-color: var(--nt-primary-color-light1, #31890a);
+  --nt-btn-hover-background: var(--nt-primary-color-light1, #31890a);
   /* 按钮的点击颜色 */
-  --nt-btn-active-color: #fff;
-  --nt-btn-active-border-color: var(--nt-primary-color-dark1, #31890a);
-  --nt-btn-active-bg-color: var(--nt-primary-color-dark1, #31890a);
+  --nt-btn-active-background: var(--nt-primary-color-dark1, #31890a);
 }
 
 /* 按钮禁用时的样式 */
 .nt-btn:not(.nt-btn-loading):disabled {
   border-color: var(--nt-btn-disabled-border-color);
-  background-color: var(--nt-btn-disabled-bg-color);
+  background: var(--nt-btn-disabled-background);
   color: var(--nt-btn-disabled-color);
   cursor: not-allowed;
   opacity: 1;
@@ -96,17 +115,32 @@
   /* 按钮的颜色 */
   --nt-btn-color: var(--nt-primary-color);
   /* 按钮的背景色 */
-  --nt-btn-bg-color: transparent;
+  --nt-btn-background: transparent;
   /* 按钮的边框颜色 */
   --nt-btn-border-color: transparent;
   --nt-btn-hover-border-color: transparent;
   --nt-btn-active-border-color: transparent;
-  --nt-btn-disabled-bg-color: transparent;
+  --nt-btn-disabled-background: transparent;
   --nt-btn-disabled-border-color: transparent;
+  --nt-btn-hover-background: transparent;
+  --nt-btn-active-background: transparent;
   height: auto;
   padding: 5px;
 }
 
+.nt-btn-ghost {
+  /* 按钮的颜色 */
+  --nt-btn-color: var(--nt-btn-border-color);
+  /* 按钮的背景色 */
+  --nt-btn-background: transparent;
+  --nt-btn-hover-background: transparent;
+  --nt-btn-active-background: transparent;
+  /* 按钮的悬浮边框 less lighten(var(--nt-primary-color), 10) */
+  --nt-btn-hover-color: var(--nt-btn-hover-border-color);
+  /* 按钮的点击颜色 */
+  --nt-btn-active-color: var(--nt-btn-active-border-color);
+}
+
 /* 高度圆形按钮 */
 .nt-btn-round {
   border-radius: calc(var(--nt-form-edit-height) / 2);
diff --git a/style/table/index.js b/style/table/index.js
index 4582418a..d0899589 100644
--- a/style/table/index.js
+++ b/style/table/index.js
@@ -1 +1,3 @@
-import "./index.css";
\ No newline at end of file
+import './index.css';
+import '../radio';
+import '../checkbox';

From cdaa8b106ffa40f5c67cf2724f0e9d9e13ca4603 Mon Sep 17 00:00:00 2001
From: fly_dream <1456207945@qq.com>
Date: Thu, 30 May 2024 16:46:17 +0800
Subject: [PATCH 12/18] chore(main): release 0.5.2 (#14)

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 63bba9bf..bb21787c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.5.2](https://github.com/DvShu/neatui-vue/compare/v0.5.1...v0.5.2) (2024-05-30)
+
+
+### Bug Fixes
+
+* **Button:** 按钮增加曾定义颜色功能 ([3d7ea23](https://github.com/DvShu/neatui-vue/commit/3d7ea23490f5113299cda3e26f99945ecc8c382c))
+
 ## [0.5.1](https://github.com/DvShu/neatui-vue/compare/v0.5.0...v0.5.1) (2024-05-24)
 
 
diff --git a/package.json b/package.json
index e841b4ab..591b5f64 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@asteres/neatui-vue",
   "description": "基于 Vue3 的 UI 组件库",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "type": "module",
   "scripts": {
     "g:c": "node scripts/index.js template",

From 34785b81c35d7e43b4b3e00f97ac83db449828ba Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Thu, 30 May 2024 16:52:07 +0800
Subject: [PATCH 13/18] =?UTF-8?q?ci:=20=E6=9B=B4=E6=96=B0=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Checkbox.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
index 11aae90d..a670198a 100644
--- a/src/components/Checkbox.vue
+++ b/src/components/Checkbox.vue
@@ -57,7 +57,7 @@ const { checkList, updateCheck } = inject<{
   updateCheck: null,
 });
 
-function initIsChecked() {
+function initIsChecked(): boolean {
   if (props.checked != null) {
     return props.checked;
   }
@@ -67,14 +67,14 @@ function initIsChecked() {
   if (props.value != null) {
     return checkedModel.value === props.value;
   }
-  return checkedModel.value;
+  return checkedModel.value as boolean;
 }
 const isChecked = ref(initIsChecked());
 
 watch(
   () => props.checked,
   (checked) => {
-    isChecked.value = checked;
+    isChecked.value = checked as boolean;
   },
 );
 

From 5d01b1de256bb499184c7f9e1c349308035dea10 Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Thu, 30 May 2024 16:57:05 +0800
Subject: [PATCH 14/18] =?UTF-8?q?type(Radio):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Checkbox.vue | 2 +-
 src/components/Radio.vue    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
index a670198a..c5922b09 100644
--- a/src/components/Checkbox.vue
+++ b/src/components/Checkbox.vue
@@ -69,7 +69,7 @@ function initIsChecked(): boolean {
   }
   return checkedModel.value as boolean;
 }
-const isChecked = ref(initIsChecked());
+const isChecked = ref<boolean>(initIsChecked());
 
 watch(
   () => props.checked,
diff --git a/src/components/Radio.vue b/src/components/Radio.vue
index f91df280..dc24d250 100644
--- a/src/components/Radio.vue
+++ b/src/components/Radio.vue
@@ -52,7 +52,7 @@ const { checkedValue, updateCheck } = inject<{
   updateCheck: null,
 });
 
-function initIsChecked() {
+function initIsChecked(): boolean {
   if (props.checked != null) {
     return props.checked;
   }
@@ -62,7 +62,7 @@ function initIsChecked() {
   if (props.value != null) {
     return checkedModel.value === props.value;
   }
-  return checkedModel.value;
+  return checkedModel.value as boolean;
 }
 
 const isChecked = ref(initIsChecked());
@@ -70,7 +70,7 @@ const isChecked = ref(initIsChecked());
 watch(
   () => props.checked,
   (val) => {
-    isChecked.value = val;
+    isChecked.value = val as boolean;
   },
 );
 

From f18a31f487d7c16906290f5e561bd3aa187ba602 Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Fri, 7 Jun 2024 09:53:18 +0800
Subject: [PATCH 15/18] =?UTF-8?q?fix(Table):=20=E4=BC=98=E5=8C=96=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(Icon): 增加 ArrowUp、ArrowDown 组件
---
 .github/workflows/release-please.yml |  8 +++++
 docs/components/table.md             | 18 +++++++++--
 src/components/Table.vue             | 48 ++++++++++++++++++----------
 src/components/icon/ArrowDown.vue    | 12 +++++++
 src/components/icon/ArrowUp.vue      | 12 +++++++
 5 files changed, 79 insertions(+), 19 deletions(-)
 create mode 100644 src/components/icon/ArrowDown.vue
 create mode 100644 src/components/icon/ArrowUp.vue

diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
index 0c1d2853..5772c81e 100644
--- a/.github/workflows/release-please.yml
+++ b/.github/workflows/release-please.yml
@@ -14,6 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       release_created: ${{ steps.release.outputs.release_created }}
+      job_output: ${{ steps.set-output-step.outputs.output_value }}
     steps:
       - uses: googleapis/release-please-action@v4
         id: release
@@ -27,6 +28,13 @@ jobs:
           # for more options
           release-type: node
 
+      - name: Generate output value
+        id: set-output-step
+        run: |
+          echo "Generating output value..."
+          VALUE="Hello, World!"
+          echo "::set-output name=output_value::$VALUE"
+
   joblog:
     runs-on: ubuntu-latest
     needs: release
diff --git a/docs/components/table.md b/docs/components/table.md
index 5c0e5d05..5ed90f8f 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -314,6 +314,10 @@
   function rowKey(rowData) {
     return rowData.name
   }
+
+  function handleSelectChange(v) {
+    console.log(v)
+  }
 </script>
 
 ### 基础表格
@@ -692,7 +696,12 @@
   </template>
   </textarea>
   <template #preview>
-    <Table :data="dataSource4" :columns="columns7" :row-key="rowKey"></Table>
+    <Table
+      :data="dataSource4"
+      :columns="columns7"
+      :row-key="rowKey"
+      @select-change="handleSelectChange"
+    ></Table>
   </template>
   </CodePreview>
 </ClientOnly>
@@ -709,7 +718,12 @@
   </template>
   </textarea>
   <template #preview>
-    <Table :data="dataSource4" :columns="columns8" :row-key="rowKey"></Table>
+    <Table
+      :data="dataSource4"
+      :columns="columns8"
+      :row-key="rowKey"
+      @select-change="handleSelectChange"
+    ></Table>
   </template>
   </CodePreview>
 </ClientOnly>
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 97377b91..d68ad726 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -156,15 +156,16 @@ export default defineComponent({
       required: false,
     },
   },
-  setup(props) {
+  emits: ['select-change'],
+  setup(props, { emit }) {
     const sortInfo = ref<SortOption>({
       key: '',
       order: '',
     });
-    const allowSelectCount = calcAllowSelectCount(); // 允许选择的数量
+    const allowSelect = calcAllowSelect(); // 允许选择的列表
     const sourceData = ref(props.data);
     const parsedColumns = calculateSpan(props.columns, 0);
-    const selectedValues = new Set();
+    const selectedValues = ref<any[]>([]);
     /** 复选的半选、全选状态 */
     const isIndeterminate = ref(false);
     const checkedAll = ref(false);
@@ -176,16 +177,16 @@ export default defineComponent({
       },
     );
 
-    function calcAllowSelectCount() {
-      let c = 0;
+    function calcAllowSelect() {
+      let c = [];
       if (props.columns[0].type === 'checkbox') {
-        for (const d in props.data) {
+        for (const d of props.data) {
           let isDisabled = false;
           if (props.columns[0].disabled != null) {
             isDisabled = props.columns[0].disabled(d);
           }
-          if (!isDisabled) {
-            c++;
+          if (!isDisabled && props.rowKey != null) {
+            c.push(props.rowKey(d));
           }
         }
       }
@@ -195,24 +196,37 @@ export default defineComponent({
     function handleSelectionChange(value: any) {
       const selectType = props.columns[0].type;
       if (selectType === 'radio') {
-        selectedValues.clear();
+        selectedValues.value = [];
       }
-      if (selectedValues.has(value)) {
-        selectedValues.delete(value);
+      let index = selectedValues.value.indexOf(value);
+      if (index !== -1) {
+        selectedValues.value.splice(index, 1);
       } else {
-        selectedValues.add(value);
+        selectedValues.value.push(value);
       }
-      if (selectedValues.size === 0) {
+      if (selectedValues.value.length === 0) {
         isIndeterminate.value = false;
         checkedAll.value = false;
-      } else if (selectedValues.size === allowSelectCount) {
+      } else if (selectedValues.value.length === allowSelect.length) {
         checkedAll.value = true;
         isIndeterminate.value = false;
       } else {
         checkedAll.value = false;
         isIndeterminate.value = true;
       }
-      console.log(selectedValues);
+      emit('select-change', [...selectedValues.value]);
+    }
+
+    function handleChangeAll(v: boolean) {
+      if (v === true) {
+        selectedValues.value = [...allowSelect];
+        checkedAll.value = true;
+      } else {
+        selectedValues.value = [];
+        checkedAll.value = false;
+      }
+      isIndeterminate.value = false;
+      emit('select-change', [...selectedValues.value]);
     }
 
     function dataSort(
@@ -335,7 +349,7 @@ export default defineComponent({
               h(Checkbox, {
                 indeterminate: isIndeterminate.value,
                 checked: checkedAll.value,
-                onChange: handleSelectionChange,
+                onChange: handleChangeAll,
               }),
             ),
           );
@@ -460,7 +474,7 @@ export default defineComponent({
                     h(column.type === 'radio' ? Radio : Checkbox, {
                       name: selectionName,
                       value: selectionValue,
-                      checked: selectedValues.has(selectionValue),
+                      checked: selectedValues.value.includes(selectionValue),
                       disabled: column.disabled
                         ? column.disabled(rowData)
                         : false,
diff --git a/src/components/icon/ArrowDown.vue b/src/components/icon/ArrowDown.vue
new file mode 100644
index 00000000..e387ffbd
--- /dev/null
+++ b/src/components/icon/ArrowDown.vue
@@ -0,0 +1,12 @@
+<template>
+  <BaseIcon>
+    <path
+      fill="currentColor"
+      d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
+    ></path>
+  </BaseIcon>
+</template>
+
+<script setup lang="ts">
+import BaseIcon from './Base.vue';
+</script>
diff --git a/src/components/icon/ArrowUp.vue b/src/components/icon/ArrowUp.vue
new file mode 100644
index 00000000..8a70b287
--- /dev/null
+++ b/src/components/icon/ArrowUp.vue
@@ -0,0 +1,12 @@
+<template>
+  <BaseIcon>
+    <path
+      fill="currentColor"
+      d="m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0"
+    ></path>
+  </BaseIcon>
+</template>
+
+<script setup lang="ts">
+import BaseIcon from './Base.vue';
+</script>

From a8b060363ebc67a980a6592d8af19db919553881 Mon Sep 17 00:00:00 2001
From: fly_dream <1456207945@qq.com>
Date: Fri, 7 Jun 2024 09:55:14 +0800
Subject: [PATCH 16/18] chore(main): release 0.5.3 (#15)

---
 CHANGELOG.md | 8 ++++++++
 package.json | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb21787c..b8254722 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.5.3](https://github.com/DvShu/neatui-vue/compare/v0.5.2...v0.5.3) (2024-06-07)
+
+
+### Bug Fixes
+
+* **Icon:** 增加 ArrowUp、ArrowDown 组件 ([f18a31f](https://github.com/DvShu/neatui-vue/commit/f18a31f487d7c16906290f5e561bd3aa187ba602))
+* **Table:** 优化表格 ([f18a31f](https://github.com/DvShu/neatui-vue/commit/f18a31f487d7c16906290f5e561bd3aa187ba602))
+
 ## [0.5.2](https://github.com/DvShu/neatui-vue/compare/v0.5.1...v0.5.2) (2024-05-30)
 
 
diff --git a/package.json b/package.json
index 591b5f64..7353b4dd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@asteres/neatui-vue",
   "description": "基于 Vue3 的 UI 组件库",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "type": "module",
   "scripts": {
     "g:c": "node scripts/index.js template",

From 404aac00600084214276e9d38b29a267b1b5638c Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Fri, 7 Jun 2024 11:08:49 +0800
Subject: [PATCH 17/18] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=8A?=
 =?UTF-8?q?=E4=B8=AA=E7=89=88=E6=9C=AC=E6=9C=AA=E6=AD=A3=E7=A1=AE=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ci: 优化CI
---
 .github/workflows/release-please.yml | 2 ++
 src/index.ts                         | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
index 5772c81e..03a0d74a 100644
--- a/.github/workflows/release-please.yml
+++ b/.github/workflows/release-please.yml
@@ -33,7 +33,9 @@ jobs:
         run: |
           echo "Generating output value..."
           VALUE="Hello, World!"
+          release_created=${{ steps.release.outputs.release_created }}
           echo "::set-output name=output_value::$VALUE"
+          echo "::set-output name=release_created::$release_created"
 
   joblog:
     runs-on: ubuntu-latest
diff --git a/src/index.ts b/src/index.ts
index 9b68e106..63c31cc8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,6 +10,8 @@ export { default as CaretTopIcon } from './components/icon/CaretTop.vue';
 export { default as CaretBottomIcon } from './components/icon/CaretBottom.vue';
 export { default as ArrowLeftIcon } from './components/icon/ArrowLeft.vue';
 export { default as ArrowRightIcon } from './components/icon/ArrowRight.vue';
+export { default as ArrowUpIcon } from './components/icon/ArrowUp.vue';
+export { default as ArrowDownIcon } from './components/icon/ArrowDown.vue';
 export { default as Input } from './components/Input.vue';
 export { default as Clickoutside } from './directives/clickoutside.js';
 export { default as Table } from './components/Table.vue';

From 30db493b37c343c3da04207493c657b3e02558bc Mon Sep 17 00:00:00 2001
From: fly_dream <1456207945@qq.com>
Date: Fri, 7 Jun 2024 11:09:57 +0800
Subject: [PATCH 18/18] chore(main): release 0.5.4 (#16)

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b8254722..1e097dc2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.5.4](https://github.com/DvShu/neatui-vue/compare/v0.5.3...v0.5.4) (2024-06-07)
+
+
+### Bug Fixes
+
+* 修复上个版本未正确导出组件 ([404aac0](https://github.com/DvShu/neatui-vue/commit/404aac00600084214276e9d38b29a267b1b5638c))
+
 ## [0.5.3](https://github.com/DvShu/neatui-vue/compare/v0.5.2...v0.5.3) (2024-06-07)
 
 
diff --git a/package.json b/package.json
index 7353b4dd..20a3b5aa 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@asteres/neatui-vue",
   "description": "基于 Vue3 的 UI 组件库",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "type": "module",
   "scripts": {
     "g:c": "node scripts/index.js template",