sard-uniapp 1.19.1 → 1.19.3

package/components/swipe-action/README.md

@@ -0,0 +1,82 @@
+---
+nav: 组件
+title: SwipeAction
+subtitle: 滑动操作
+group: 反馈组件
+version: 1.19+
+---
+
+## 介绍
+
+可以左右滑动来展示操作按钮。
+
+## 引入
+
+```ts
+import SwipeAction from 'sard-uniapp/components/swipe-action/swipe-action.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用 `left`、`right` 插槽向左右两边添加操作按钮。
+
+插槽接收 `hide` 方法来隐藏操作按钮。
+
+@code('${DEMO_PATH}/swipe-action/demo/Basic.vue')
+
+### 控制显隐
+
+使用 `v-model:visible` 属性控制显隐。
+
+@code('${DEMO_PATH}/swipe-action/demo/Visible.vue')
+
+### 禁止滑动
+
+使用 `disabled` 属性来禁用滑动，同时也会禁用点击内容区域隐藏。
+
+@code('${DEMO_PATH}/swipe-action/demo/Visible.vue')
+
+### 异步关闭
+
+插槽按钮可任意定制；利用好 `hide` 方法和 `disabled` 属性，可实现复杂的效果。
+
+@code('${DEMO_PATH}/swipe-action/demo/Async.vue')
+
+### 结合表单使用
+
+下面演示了滑动操作组件如何与表单组件一起使用。
+
+@code('${DEMO_PATH}/swipe-action/demo/Form.vue')
+
+## API
+
+### SwipeActionProps
+
+| 属性              | 描述           | 类型                       | 默认值 |
+| ----------------- | -------------- | -------------------------- | ------ |
+| root-class        | 组件根元素类名 | string                     | -      |
+| root-style        | 组件根元素样式 | StyleValue                 | -      |
+| disabled          | 是否禁用滑动   | boolean                    | false  |
+| visible (v-model) | 控制显隐       | 'left' \| 'right' \| false | false  |
+
+### SwipeActionSlots
+
+| 插槽    | 描述               | 属性                 |
+| ------- | ------------------ | -------------------- |
+| default | 自定义默认内容     | -                    |
+| left    | 自定义左边操作按钮 | { hide: () => void } |
+| right   | 自定义右边操作按钮 | { hide: () => void } |
+
+### SwipeActionEmits
+
+| 事件           | 描述               | 类型                                          |
+| -------------- | ------------------ | --------------------------------------------- |
+| update:visible | 操作按钮显隐时触发 | (visible: 'left' \| 'right' \| false) => void |
+
+### SwipeActionExpose
+
+| 属性 | 描述         | 类型       |
+| ---- | ------------ | ---------- |
+| hide | 隐藏操作按钮 | () => void |

package/components/swipe-action/swipe-action.vue

@@ -44,6 +44,13 @@ import {
   getBoundingClientRect
 } from "../../utils";
 import { useMouseDown, useInitialVelocity, useStopMovedClick } from "../../use";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} disabled 是否禁用滑动，默认值：false。
+ * @property {'left' | 'right' | false} visible 控制显隐，默认值：false。
+ * @event {(visible: 'left' | 'right' | false) => void} update 操作按钮显隐时触发
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/swiper-dot/README.md

@@ -0,0 +1,45 @@
+---
+nav: 组件
+title: SwiperDot
+subtitle: 轮播图指示点
+group: 数据展示
+---
+
+## 介绍
+
+自定义轮播图指示点。
+
+## 引入
+
+```ts
+import SwiperDot from 'sard-uniapp/components/swiper-dot/swiper-dot.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用一个相对定位的容器包裹轮播图组件和轮播图指示点组件，
+使用 `current` 属性设置活动指示点，使用 `type` 属性设置指示点类型，使用 `total` 属性设置指示点总数或者使用 `list` 属性设置指示文本（用于 `title` 类型）。
+
+@code('${DEMO_PATH}/swiper-dot/demo/Basic.vue')
+
+## API
+
+### SwiperDotProps
+
+| 属性       | 描述                                 | 类型                                                   | 默认值  |
+| ---------- | ------------------------------------ | ------------------------------------------------------ | ------- |
+| root-class | 组件根元素类名                       | string                                                 | -       |
+| root-style | 组件根元素样式                       | StyleValue                                             | -       |
+| type       | 指示点类型                           | 'dot' \| 'dot-bar' \| 'index' \| 'title' \| 'fraction' | 'dot'   |
+| current    | 当前指示点索引                       | number                                                 | 0       |
+| total      | 指示点总数                           | number                                                 | 0       |
+| list       | 用于 `title` 类型的文本数据          | any[]                                                  | -       |
+| field      | `type` 为 `title` 时，显示的内容字段 | string                                                 | 'title' |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/swiper-dot/swiper-dot.vue

@@ -28,6 +28,15 @@ import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent }
 import { computed } from "vue";
 import { classNames, stringifyStyle, createBem } from "../../utils";
 import { defaultSwiperDotProps } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {'dot' | 'dot-bar' | 'index' | 'title' | 'fraction'} type 指示点类型，默认值：'dot'。
+ * @property {number} current 当前指示点索引，默认值：0。
+ * @property {number} total 指示点总数，默认值：0。
+ * @property {any[]} list 用于 `title` 类型的文本数据，默认值：-。
+ * @property {string} field `type` 为 `title` 时，显示的内容字段，默认值：'title'。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/switch/README.md

@@ -0,0 +1,89 @@
+---
+nav: 组件
+title: Switch
+subtitle: 开关
+group: 表单组件
+---
+
+## 介绍
+
+用于打开/关闭两种状态间的切换。
+
+## 引入
+
+```ts
+import Switch from 'sard-uniapp/components/switch/switch.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+通过 `v-model` 绑定开关的选中状态，`true` 表示开，`false` 表示关。
+
+@code('${DEMO_PATH}/switch/demo/Basic.vue')
+
+### 自定义尺寸
+
+使用 `size` 属性设置开关尺寸。
+
+@code('${DEMO_PATH}/switch/demo/Size.vue')
+
+### 自定义颜色
+
+使用 `checkedColor` 属性设置打开时的颜色，使用 `uncheckedColor` 属性设置关闭时的颜色。
+
+@code('${DEMO_PATH}/switch/demo/Color.vue')
+
+### 不同状态的值
+
+可以设置 `checkedValue` 和 `uncheckedValue` 属性代替默认的 `true` 和 `false`。
+
+@code('${DEMO_PATH}/switch/demo/Value.vue')
+
+### 只读和禁用
+
+只读或禁用时不可操作。
+
+@code('${DEMO_PATH}/switch/demo/DisabledReadOnly.vue')
+
+### 加载状态
+
+当提供 `beforeUpdate` 函数，会在 `fulfilled` 状态后才切换，期间显示加载状态。
+
+@code('${DEMO_PATH}/switch/demo/Loading.vue')
+
+## API
+
+### SwitchProps
+
+| 属性                  | 描述             | 类型                          | 默认值 |
+| --------------------- | ---------------- | ----------------------------- | ------ |
+| root-class            | 组件根元素类名   | string                        | -      |
+| root-style            | 组件根元素样式   | StyleValue                    | -      |
+| model-value (v-model) | 开关选中状态     | any                           | -      |
+| disabled              | 禁用状态         | boolean                       | false  |
+| readonly              | 只读状态         | boolean                       | false  |
+| loading (v-model)     | 加载状态         | boolean                       | -      |
+| size                  | 开关大小         | string                        | -      |
+| checked-color         | 开启时的颜色     | string                        | -      |
+| unchecked-color       | 关闭时的颜色     | string                        | -      |
+| checked-value         | 开启时的值       | any                           | true   |
+| unchecked-value       | 关闭时的值       | any                           | false  |
+| before-update         | 用于异步切换     | (value: any) => Promise\<any> | -      |
+| validate-event        | 是否触发表单验证 | boolean                       | true   |
+
+### SwitchEmits
+
+| 事件                     | 描述                                   | 类型                       |
+| ------------------------ | -------------------------------------- | -------------------------- |
+| click                    | 点击按钮时触发，加载和禁用状态不会触发 | (event: any) => void       |
+| update:model-value       | 开关状态切换时触发                     | (value: any) => void       |
+| change <sup>1.9.2+</sup> | 开关状态切换时触发                     | (value: any) => void       |
+| update:loading           | 加载状态切换时触发                     | (loading: boolean) => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/switch/switch.vue

@@ -15,6 +15,24 @@ import { useFormContext, useFormItemContext } from "../form/common";
 import {
   defaultSwitchProps
 } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {any} modelValue 开关选中状态，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：false。
+ * @property {boolean} readonly 只读状态，默认值：false。
+ * @property {boolean} loading 加载状态，默认值：-。
+ * @property {string} size 开关大小，默认值：-。
+ * @property {string} checkedColor 开启时的颜色，默认值：-。
+ * @property {string} uncheckedColor 关闭时的颜色，默认值：-。
+ * @property {any} checkedValue 开启时的值，默认值：true。
+ * @property {any} uncheckedValue 关闭时的值，默认值：false。
+ * @property {(value: any) => Promise\<any>} beforeUpdate 用于异步切换，默认值：-。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @event {(event: any) => void} click 点击按钮时触发，加载和禁用状态不会触发
+ * @event {(loading: boolean) => void} update 加载状态切换时触发
+ * @event {(value: any) => void} change 开关状态切换时触发
+ */
 export default  _defineComponent({
   components: {
     SarLoading,

package/components/tab/tab.vue

@@ -21,6 +21,14 @@ import {
   tabContextSymbol
 } from "../tabs/common";
 import { getBoundingClientRect } from "../../utils";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string} title 标签显示的标题，默认值：-。
+ * @property {string | number| boolean} name 标签的唯一标识，默认为对应的下标，使用标签组件时要手动指定，默认值：-。
+ * @property {boolean} disabled 是否禁用标签，默认值：false。
+ * @event {(event: any) => void} click 点击标签时触发，不论是否禁用
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/tabbar/README.md

@@ -0,0 +1,111 @@
+---
+nav: 组件
+title: Tabbar
+subtitle: 标签栏
+group: 导航组件
+---
+
+## 介绍
+
+固定在页面底部的导航栏，用于切换不同的页面。
+
+## 引入
+
+```ts
+import Tabbar from 'sard-uniapp/components/tabbar/tabbar.vue'
+import TabbarItem from 'sard-uniapp/components/tabbar-item/tabbar-item.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用 `current` 属性控制选中的标签。
+
+@code('${DEMO_PATH}/tabbar/demo/Basic.vue')
+
+### 自定义图标
+
+通过 `icon` 属性自定义图标。
+
+@code('${DEMO_PATH}/tabbar/demo/Icon.vue')
+
+### 自定义颜色
+
+使用 `color` 属性设置未选中标签的颜色。
+使用 `activeColor` 属性设置选中标签的颜色。
+
+@code('${DEMO_PATH}/tabbar/demo/Color.vue')
+
+### 徽标
+
+使用 `badge` 属性设置徽标。
+
+@code('${DEMO_PATH}/tabbar/demo/Badge.vue')
+
+### 中间鼓起
+
+通过覆盖默认插槽自定义标签结构和样式。
+
+@code('${DEMO_PATH}/tabbar/demo/Bulge.vue')
+
+## API
+
+### TabbarProps
+
+| 属性                                    | 描述                       | 类型             | 默认值 |
+| --------------------------------------- | -------------------------- | ---------------- | ------ |
+| root-class                              | 组件根元素类名             | string           | -      |
+| root-style                              | 组件根元素样式             | StyleValue       | -      |
+| current (v-model)                       | 当前选中标签的 `name` 属性 | number \| string | -      |
+| color                                   | 未选中标签的颜色           | string           | -      |
+| active-color                            | 选中标签的颜色             | string           | -      |
+| bordered                                | 是否显示外边框             | boolean          | true   |
+| fixed <sup>1.16+</sup>                  | 是否固定到页面底部         | boolean          | false  |
+| safe-area-inset-bottom <sup>1.16+</sup> | 是否开启底部安全区适配     | boolean          | false  |
+
+### TabbarSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### TabbarEmits
+
+| 事件                    | 描述           | 类型                             |
+| ----------------------- | -------------- | -------------------------------- |
+| update:current          | 切换标签时触发 | (name: number \| string) => void |
+| change <sup>1.12+</sup> | 切换标签时触发 | (name: number \| string) => void |
+
+### TabbarItemProps
+
+| 属性        | 描述             | 类型             | 默认值 |
+| ----------- | ---------------- | ---------------- | ------ |
+| root-class  | 组件根元素类名   | string           | -      |
+| root-style  | 组件根元素样式   | StyleValue       | -      |
+| name        | 标签唯一标识符   | string \| number | -      |
+| text        | 要显示的标签文本 | string           | -      |
+| icon        | 图标名称         | string           | -      |
+| icon-family | 图标字体         | string           | -      |
+| icon-size   | 图标大小         | string           | -      |
+| badge       | 显示的徽标值     | number \| string | -      |
+| dot         | 是否显示小红点   | boolean          | -      |
+
+### TabbarItemSlots
+
+| 插槽    | 描述           | 属性              |
+| ------- | -------------- | ----------------- |
+| default | 自定义文本内容 | -                 |
+| icon    | 自定义图标     | {active: boolean} |
+
+### TabbarItemEmits
+
+| 事件  | 描述           | 类型                 |
+| ----- | -------------- | -------------------- |
+| click | 点击标签时触发 | (event: any) => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/tabbar/tabbar.vue

@@ -12,6 +12,18 @@ import {
   tabbarContextSymbol,
   defaultTabbarProps
 } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {number | string} current 当前选中标签的 `name` 属性，默认值：-。
+ * @property {string} color 未选中标签的颜色，默认值：-。
+ * @property {string} activeColor 选中标签的颜色，默认值：-。
+ * @property {boolean} bordered 是否显示外边框，默认值：true。
+ * @property {boolean} fixed 是否固定到页面底部，默认值：false。
+ * @property {boolean} safeAreaInsetBottom 是否开启底部安全区适配，默认值：false。
+ * @event {(name: number | string) => void} update 切换标签时触发
+ * @event {(name: number | string) => void} change 切换标签时触发
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/tabbar-item/tabbar-item.vue

@@ -23,6 +23,18 @@ import {
 } from "../tabbar/common";
 import SarIcon from "../icon/icon.vue";
 import SarBadge from "../badge/badge.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string | number} name 标签唯一标识符，默认值：-。
+ * @property {string} text 要显示的标签文本，默认值：-。
+ * @property {string} icon 图标名称，默认值：-。
+ * @property {string} iconFamily 图标字体，默认值：-。
+ * @property {string} iconSize 图标大小，默认值：-。
+ * @property {number | string} badge 显示的徽标值，默认值：-。
+ * @property {boolean} dot 是否显示小红点，默认值：-。
+ * @event {(event: any) => void} click 点击标签时触发
+ */
 export default  _defineComponent({
   components: {
     SarIcon,

package/components/tabbar-pit/README.md

@@ -0,0 +1,41 @@
+---
+nav: 组件
+title: TabbarPit
+subtitle: 标签栏占位
+group: 导航组件
+version: 1.16+
+---
+
+## 介绍
+
+配合Tabbar组件使用，用于占位。
+
+## 引入
+
+```ts
+import TabbarPit from 'sard-uniapp/components/tabbar-pit/tabbar-pit.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+在页面放置，即可占据一个和 `Tabbar` 组件高度一致的坑。
+
+@code('${DEMO_PATH}/tabbar-pit/demo/Basic.vue')
+
+### 底部安全距离
+
+如果要撑开一个 `Tabbar` 高度 + `env(safe-area-inset-bottom)`，可以设置 `safe-area-inset-bottom` 属性。
+
+@code('${DEMO_PATH}/tabbar-pit/demo/SafeAreaInsetBottom.vue')
+
+## API
+
+### TabbarPitProps
+
+| 属性                   | 描述                   | 类型       | 默认值 |
+| ---------------------- | ---------------------- | ---------- | ------ |
+| root-class             | 组件根元素类名         | string     | -      |
+| root-style             | 组件根元素样式         | StyleValue | -      |
+| safe-area-inset-bottom | 是否开启底部安全区适配 | boolean    | false  |

package/components/tabbar-pit/tabbar-pit.vue

@@ -8,6 +8,11 @@
 import { defineComponent as _defineComponent } from "vue";
 import { computed } from "vue";
 import { classNames, stringifyStyle, createBem } from "../../utils";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} safeAreaInsetBottom 是否开启底部安全区适配，默认值：false。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/table/README.md

@@ -0,0 +1,162 @@
+---
+nav: 组件
+title: Table
+subtitle: 表格
+group: 数据展示
+version: 1.9+
+---
+
+## 介绍
+
+用于展示多条结构类似的数据。
+
+## 引入
+
+```ts
+import Table from 'sard-uniapp/components/table/table.vue'
+import TableRow from 'sard-uniapp/components/table-row/table-row.vue'
+import TableCell from 'sard-uniapp/components/table-cell/table-cell.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+表格组件是通过 `flex` 布局实现的，`sar-table-row` 组件表示一行，`sar-table-cell` 组件表示一个单元格。
+给 `sar-table-cell` 组件设置 `bold` 属性进行加粗以表示表头。
+
+@code('${DEMO_PATH}/table/demo/Basic.vue')
+
+`data.ts`
+
+@code('${DEMO_PATH}/table/demo/data.ts')
+
+### 边框
+
+给 `sar-table` 组件添加 `bordered` 属性可以设置单元格的边框。
+
+@code('${DEMO_PATH}/table/demo/Border.vue')
+
+### 下边框
+
+给 `sar-table` 组件添加 `underline` 属性可以设置单元格的下边框。
+
+@code('${DEMO_PATH}/table/demo/Underline.vue')
+
+### 有条纹的
+
+可以自由的给 `sar-table-row` 组件添加背景色。
+
+@code('${DEMO_PATH}/table/demo/Striped.vue')
+
+### 单元格条纹
+
+也可以自由的给其他元素添加背景色来定制样式。
+
+@code('${DEMO_PATH}/table/demo/CellStriped.vue')
+
+### 自定义宽度
+
+因为表格组件是通过 `flex` 布局实现的，因此需要给同一列的单元格设置相同的宽度以便上下的单元格宽度可以对齐。
+
+通过 `sar-table-cell` 组件的 `width` 属性可以设置任意宽度。可以是带有单位的，也可以不带有单位，但需要注意的是，要么全部带有单位，要么全部不带有单位，内部会使用 `parseFloat()` 将宽度值转换为 `flex-grow` 属性的值，以便在任意宽度屏幕上等比平分空间。
+
+@code('${DEMO_PATH}/table/demo/Width.vue')
+
+### 固定表头
+
+给 `sar-table` 组件设置 `height` 属性，并给第一个 `sar-table-row` 组件设置 `fixed` 属性即可将其固定到表格的顶部。
+
+@code('${DEMO_PATH}/table/demo/FixedHeader.vue')
+
+### 固定列
+
+给 `sar-table-cell` 组件设置 `fixed` 或 `fixed="left"` 属性可以将其固定在左边，设置 `fixed="right"` 可以将其固定在右边。
+
+@code('${DEMO_PATH}/table/demo/FixedColumn.vue')
+
+### 固定表头和列
+
+可以同时固定表头和列。
+
+@code('${DEMO_PATH}/table/demo/Fixed.vue')
+
+### 满屏表格
+
+可以使用 `calc()` 函数、`--window-top` 导航高度变量、`vh` 相对视窗单位来设置表格的高度以实现满屏的表格效果。
+
+@code('${DEMO_PATH}/table/demo/FullScreen.vue')
+
+`level-data.ts`
+
+@code('${DEMO_PATH}/table/demo/level-data.ts')
+
+### 多级表头
+
+使用 `sar-table-row` 和 `sar-table-cell` 的“你中有我我中有你”可以实现多级表头。需要注意单元格都需要设置指定宽度以便对齐。
+
+@code('${DEMO_PATH}/table/demo/MultilevelHeader.vue')
+
+### 合并行或列
+
+不同于 `HTMLTableCellElement` 使用 `rowSpan` 和 `colSpan` 属性合并行或列。在 `sar-table` 中需要使用 `flex` 布局的思维来合并单元格。且同一列的单元格需要设置相同的宽度，跨多列的单元格宽度为其跨越的列的宽度的和。
+
+@code('${DEMO_PATH}/table/demo/Merge.vue')
+
+## API
+
+### TableProps
+
+| 属性       | 描述                         | 类型       | 默认值 |
+| ---------- | ---------------------------- | ---------- | ------ |
+| root-class | 组件根元素类名               | string     | -      |
+| root-style | 组件根元素样式               | StyleValue | -      |
+| bordered   | 给单元格添加边框             | boolean    | false  |
+| underline  | 给单元格添加下边框           | boolean    | false  |
+| height     | 设置表格高度以便可以固定表头 | string     | -      |
+
+### TableSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### TableRowProps
+
+| 属性       | 描述             | 类型       | 默认值 |
+| ---------- | ---------------- | ---------- | ------ |
+| root-class | 组件根元素类名   | string     | -      |
+| root-style | 组件根元素样式   | StyleValue | -      |
+| fixed      | 固定列到表格顶部 | boolean    | false  |
+
+### TableRowSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### TableCellProps
+
+| 属性       | 描述                                     | 类型                         | 默认值 |
+| ---------- | ---------------------------------------- | ---------------------------- | ------ |
+| root-class | 组件根元素类名                           | string                       | -      |
+| root-style | 组件根元素样式                           | StyleValue                   | -      |
+| fixed      | 固定单元到表格左边或右边，true 表示左边  | boolean \| 'left' \| 'right' | -      |
+| width      | 设置单元格宽度占比，可以带单位或不带单位 | string                       | '1'    |
+| bold       | 单元格字体加粗                           | boolean                      | false  |
+
+### TableCellSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')
+
+### CSS 变量 - 暗黑模式
+
+@code('./variables-dark.scss#variables')

package/components/table/table.vue

@@ -37,6 +37,13 @@ import {
   defaultTableProps
 } from "./common";
 import SarTableFixation from "../table-fixation/table-fixation.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} bordered 给单元格添加边框，默认值：false。
+ * @property {boolean} underline 给单元格添加下边框，默认值：false。
+ * @property {string} height 设置表格高度以便可以固定表头，默认值：-。
+ */
 export default  _defineComponent({
   components: {
     SarTableFixation,