sard-uniapp 1.19.2 → 1.19.3

package/components/signature/README.md

@@ -0,0 +1,99 @@
+---
+nav: 组件
+title: Signature
+subtitle: 签名
+group: 表单组件
+version: 1.12+
+---
+
+## 介绍
+
+用于签名场景的组件，基于 Canvas 实现。
+
+## 引入
+
+```ts
+import Signature from 'sard-uniapp/components/signature/signature.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+书写完签名，点击确定按钮会触发 `confirm` 事件，并接收图片的 `dataURL` 或临时文件路径，如果没有书写或者点击了清空按钮，则会得到空字符串。
+
+@code('${DEMO_PATH}/signature/demo/Basic.vue')
+
+### 画笔颜色
+
+使用 `color` 属性可以设置画笔的颜色。
+
+@code('${DEMO_PATH}/signature/demo/Color.vue')
+
+### 画笔粗细
+
+使用 `line-width` 属性可以设置画笔的粗细。
+
+@code('${DEMO_PATH}/signature/demo/LineWidth.vue')
+
+### 背景色
+
+使用 `background` 属性可以设置画板的颜色，默认为透明。如果想在最终生成的图片背景为透明的情况下设置书写时的背景颜色，则可以使用 `--sar-signature-canvas-bg` css 变量来设置。
+
+@code('${DEMO_PATH}/signature/demo/Background.vue')
+
+### 全屏显示
+
+如果设置 `full-screen` 来全屏展示签名组件，此时可以绑定 `v-model:visible` 属性来控制显隐。
+
+@code('${DEMO_PATH}/signature/demo/FullScreen.vue')
+
+## API
+
+### SignatureProps
+
+| 属性         | 描述                           | 类型                    | 默认值    |
+| ------------ | ------------------------------ | ----------------------- | --------- |
+| root-class   | 组件根元素类名                 | string                  | -         |
+| root-style   | 组件根元素样式                 | StyleValue              | -         |
+| color        | 笔触颜色                       | string                  | '#000'    |
+| line-width   | 线条宽度                       | number                  | 3         |
+| background   | 背景颜色                       | string                  | -         |
+| full-screen  | 是否全屏展示                   | boolean                 | false     |
+| visible      | 视屏时控制显隐                 | boolean                 | false     |
+| duration     | 显隐持续时间                   | number                  | 150       |
+| cancel-text  | 取消按钮文案                   | string                  | '取消'    |
+| clear-text   | 清空按钮文案                   | string                  | '清空'    |
+| confirm-text | 确定按钮文案                   | string                  | '确定'    |
+| type         | 导出图片类型                   | 'png' \| 'jpg'          | 'png'     |
+| target       | confirm 事件回调接收的图片类型 | 'dataURL' \| 'filePath' | 'dataURL' |
+| quality      | 转换为 DataURL 时的质量        | number                  | 0.92      |
+
+### SignatureSlots
+
+| 插槽    | 描述                   | 属性 |
+| ------- | ---------------------- | ---- |
+| default | 全屏时定义底部提示文案 | -    |
+
+### SignatureEmits
+
+| 事件           | 描述               | 类型                       |
+| -------------- | ------------------ | -------------------------- |
+| update:visible | 弹出框显隐时触发   | (visible: boolean) => void |
+| confirm        | 点击确定按钮时触发 | (dataURL: string) => void  |
+| clear          | 点击清空按钮时触发 | () => void                 |
+| cancel         | 点击取消按钮时触发 | () => void                 |
+
+### SignatureExpose
+
+| 属性    | 描述                                                       | 类型       |
+| ------- | ---------------------------------------------------------- | ---------- |
+| resize  | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | () => void |
+| clear   | 可调用此方法来清除签名                                     | () => void |
+| confirm | 触发 `confirm` 事件，与点击确认按钮的效果等价              | () => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/signature/signature.vue

@@ -102,6 +102,26 @@ import SarButton from "../button/button.vue";
 import { useTransition, useZIndex } from "../../use";
 import { useTranslate } from "../locale";
 import SarStatusBar from "../status-bar/status-bar.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string} color 笔触颜色，默认值：'#000'。
+ * @property {number} lineWidth 线条宽度，默认值：3。
+ * @property {string} background 背景颜色，默认值：-。
+ * @property {boolean} fullScreen 是否全屏展示，默认值：false。
+ * @property {boolean} visible 视屏时控制显隐，默认值：false。
+ * @property {number} duration 显隐持续时间，默认值：150。
+ * @property {string} cancelText 取消按钮文案，默认值：'取消'。
+ * @property {string} clearText 清空按钮文案，默认值：'清空'。
+ * @property {string} confirmText 确定按钮文案，默认值：'确定'。
+ * @property {'png' | 'jpg'} type 导出图片类型，默认值：'png'。
+ * @property {'dataURL' | 'filePath'} target confirm 事件回调接收的图片类型，默认值：'dataURL'。
+ * @property {number} quality 转换为 DataURL 时的质量，默认值：0.92。
+ * @event {(visible: boolean) => void} update 弹出框显隐时触发
+ * @event {(dataURL: string) => void} confirm 点击确定按钮时触发
+ * @event {() => void} clear 点击清空按钮时触发
+ * @event {() => void} cancel 点击取消按钮时触发
+ */
 export default  _defineComponent({
   components: {
     SarButton,

package/components/skeleton/README.md

@@ -0,0 +1,128 @@
+---
+nav: 组件
+title: Skeleton
+subtitle: 骨架屏
+group: 反馈组件
+---
+
+## 介绍
+
+在内容加载过程中提供一组占位图形，通常图形会描述内容的概要排版。
+
+## 引入
+
+```ts
+import Skeleton from 'sard-uniapp/components/skeleton/skeleton.vue'
+import SkeletonBlock from 'sard-uniapp/components/skeleton-block/skeleton-block.vue'
+import SkeletonAvatar from 'sard-uniapp/components/skeleton-avatar/skeleton-avatar.vue'
+import SkeletonTitle from 'sard-uniapp/components/skeleton-title/skeleton-title.vue'
+import SkeletonParagraph from 'sard-uniapp/components/skeleton-paragraph/skeleton-paragraph.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+默认展示三行占位元素。
+
+@code('${DEMO_PATH}/skeleton/demo/Basic.vue')
+
+### 显示标题
+
+设置 `title` 属性显示标题占位元素。
+
+@code('${DEMO_PATH}/skeleton/demo/Title.vue')
+
+### 显示头像
+
+设置 `avatar` 属性显示头像占位元素。
+
+@code('${DEMO_PATH}/skeleton/demo/Avatar.vue')
+
+### 圆形头像
+
+设置 `avatarRound` 属性显示头圆形像占位元素。
+
+@code('${DEMO_PATH}/skeleton/demo/RoundAvatar.vue')
+
+### 圆角标题和段落
+
+设置 `round` 属性显示圆角标题和段落。
+
+@code('${DEMO_PATH}/skeleton/demo/RoundTitle.vue')
+
+### 动画效果
+
+设置 `animated` 属性显示动画效果。
+
+@code('${DEMO_PATH}/skeleton/demo/Animated.vue')
+
+### 包含子组件
+
+将 `loading` 属性设置成 `false` 表示内容加载完成，此时会隐藏占位图。
+
+@code('${DEMO_PATH}/skeleton/demo/Contain.vue')
+
+### 自定义
+
+可以通过 `SkeletonBlock`、`SkeletonAvatar`、`SkeletonTitle`、`SkeletonParagraph` 自由组合使用。
+
+@code('${DEMO_PATH}/skeleton/demo/Custom.vue')
+
+## API
+
+### SkeletonProps
+
+| 属性         | 描述                                          | 类型             | 默认值 |
+| ------------ | --------------------------------------------- | ---------------- | ------ |
+| root-class   | 组件根元素类名                                | string           | -      |
+| root-style   | 组件根元素样式                                | StyleValue       | -      |
+| rows         | 段落行数                                      | number           | 3      |
+| title        | 是否显示标题                                  | boolean          | false  |
+| avatar       | 是否显示头像                                  | boolean          | false  |
+| avatar-size  | 头像尺寸                                      | number \| string | -      |
+| avatar-round | 是否显示圆形头像                              | boolean          | true   |
+| round        | 是否将标题和段落显示为圆角风格                | boolean          | false  |
+| loading      | 是否显示骨架屏，传 `false` 时会展示子组件内容 | boolean          | true   |
+| animated     | 是否开启动画                                  | boolean          | false  |
+
+### SkeletonBlockProps
+
+| 属性       | 描述               | 类型       | 默认值 |
+| ---------- | ------------------ | ---------- | ------ |
+| root-class | 组件根元素类名     | string     | -      |
+| root-style | 组件根元素样式     | StyleValue | -      |
+| animated   | 是否开启动画       | boolean    | false  |
+| round      | 是否显示为圆角风格 | boolean    | false  |
+| width      | 设置宽度           | string     | -      |
+| height     | 设置高度           | string     | -      |
+
+### SkeletonAvatarProps
+
+继承 [`SkeletonBlockProps`](#SkeletonBlockProps) 并有以下额外属性。
+
+| 属性 | 描述     | 类型   | 默认值 |
+| ---- | -------- | ------ | ------ |
+| size | 头像尺寸 | string | -      |
+
+### SkeletonTitleProps
+
+继承 [`SkeletonBlockProps`](#SkeletonBlockProps) 并有以下额外属性。
+
+### SkeletonParagraphProps
+
+继承 [`SkeletonBlockProps`](#SkeletonBlockProps) 并有以下额外属性。
+
+| 属性 | 描述     | 类型   | 默认值 |
+| ---- | -------- | ------ | ------ |
+| rows | 段落行数 | number | 3      |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')
+
+### CSS 变量 - 暗黑模式
+
+@code('./variables-dark.scss#variables')

package/components/skeleton/skeleton.vue

@@ -29,6 +29,18 @@ import SarSkeletonParagraph from "../skeleton-paragraph/skeleton-paragraph.vue";
 import {
   defaultSkeletonProps
 } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {number} rows 段落行数，默认值：3。
+ * @property {boolean} title 是否显示标题，默认值：false。
+ * @property {boolean} avatar 是否显示头像，默认值：false。
+ * @property {number | string} avatarSize 头像尺寸，默认值：-。
+ * @property {boolean} avatarRound 是否显示圆形头像，默认值：true。
+ * @property {boolean} round 是否将标题和段落显示为圆角风格，默认值：false。
+ * @property {boolean} loading 是否显示骨架屏，传 `false` 时会展示子组件内容，默认值：true。
+ * @property {boolean} animated 是否开启动画，默认值：false。
+ */
 export default  _defineComponent({
   components: {
     SarSkeletonAvatar,

package/components/skeleton-avatar/skeleton-avatar.vue

@@ -14,6 +14,15 @@ import { defineComponent as _defineComponent } from "vue";
 import { computed } from "vue";
 import { classNames, stringifyStyle, createBem } from "../../utils";
 import SarSkeletonBlock from "../skeleton-block/skeleton-block.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} animated 是否开启动画，默认值：false。
+ * @property {boolean} round 是否显示为圆角风格，默认值：false。
+ * @property {string} width 设置宽度，默认值：-。
+ * @property {string} height 设置高度，默认值：-。
+ * @property {string} size 头像尺寸，默认值：-。
+ */
 export default  _defineComponent({
   components: {
     SarSkeletonBlock,

package/components/skeleton-block/skeleton-block.vue

@@ -6,6 +6,14 @@
 import { defineComponent as _defineComponent } from "vue";
 import { computed } from "vue";
 import { classNames, stringifyStyle, createBem } from "../../utils";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} animated 是否开启动画，默认值：false。
+ * @property {boolean} round 是否显示为圆角风格，默认值：false。
+ * @property {string} width 设置宽度，默认值：-。
+ * @property {string} height 设置高度，默认值：-。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/skeleton-paragraph/skeleton-paragraph.vue

@@ -17,6 +17,15 @@ import { defineComponent as _defineComponent } from "vue";
 import { computed } from "vue";
 import { classNames, stringifyStyle, createBem } from "../../utils";
 import SarSkeletonBlock from "../skeleton-block/skeleton-block.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} animated 是否开启动画，默认值：false。
+ * @property {boolean} round 是否显示为圆角风格，默认值：false。
+ * @property {string} width 设置宽度，默认值：-。
+ * @property {string} height 设置高度，默认值：-。
+ * @property {number} rows 段落行数，默认值：3。
+ */
 export default  _defineComponent({
   components: {
     SarSkeletonBlock,

package/components/skeleton-title/skeleton-title.vue

@@ -14,6 +14,14 @@ import { defineComponent as _defineComponent } from "vue";
 import { computed } from "vue";
 import { classNames, stringifyStyle, createBem } from "../../utils";
 import SarSkeletonBlock from "../skeleton-block/skeleton-block.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} animated 是否开启动画，默认值：false。
+ * @property {boolean} round 是否显示为圆角风格，默认值：false。
+ * @property {string} width 设置宽度，默认值：-。
+ * @property {string} height 设置高度，默认值：-。
+ */
 export default  _defineComponent({
   components: {
     SarSkeletonBlock,

package/components/slider/README.md

@@ -0,0 +1,140 @@
+---
+nav: 组件
+title: Slider
+subtitle: 滑块
+group: 表单组件
+---
+
+## 介绍
+
+选择给定范围的一个值和区间。
+
+## 引入
+
+```ts
+import Slider from 'sard-uniapp/components/slider/slider.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用 `v-model` 绑定当前值。
+
+@code('${DEMO_PATH}/slider/demo/Basic.vue')
+
+### 范围选择
+
+使用 `range` 属性设置成范围选择。
+
+@code('${DEMO_PATH}/slider/demo/Range.vue')
+
+### 显示值
+
+设置 `show-value` 属性会在滑块上方显示当前滑块对应的值。
+
+@code('${DEMO_PATH}/slider/demo/ShowValue.vue')
+
+### 最大最小值
+
+使用 `min` 和 `max` 属性限制可以选择的最大最小值。
+
+@code('${DEMO_PATH}/slider/demo/MinMax.vue')
+
+### 垂直
+
+使用 `vertical` 属性垂直展示滑块。
+
+@code('${DEMO_PATH}/slider/demo/Vertical.vue')
+
+### 步长
+
+使用 `step` 属性限制只能选择指定数字的倍数的值。
+
+@code('${DEMO_PATH}/slider/demo/Step.vue')
+
+### 显示刻度
+
+设置 `show-scale` 属性可以显示步长对应的刻度，设置 `scale-position` 属性可以让刻度显示在各个方位。
+
+@code('${DEMO_PATH}/slider/demo/ShowScale.vue')
+
+### 自定义颜色
+
+使用 `track-color` 属性设置轨道颜色；使用 `piece-color` 属性设置选中片段的颜色；使用 `thumb-color` 属性设置按钮的颜色。
+
+@code('${DEMO_PATH}/slider/demo/Color.vue')
+
+### 自定义尺寸
+
+使用 `track-size` 属性设置轨道尺寸；使用 `thumb-size` 属性设置滑块的尺寸。
+
+@code('${DEMO_PATH}/slider/demo/Size.vue')
+
+### 只读和禁用
+
+只读和禁用状态下无法操作。
+
+@code('${DEMO_PATH}/slider/demo/DisabledReadOnly.vue')
+
+### 自定义滑块插槽
+
+滑块插槽可以用于自定义滑块样式。
+
+@code('${DEMO_PATH}/slider/demo/Slot.vue')
+
+## API
+
+### SliderProps
+
+| 属性             | 描述             | 类型                                   | 默认值            |
+| ---------------- | ---------------- | -------------------------------------- | ----------------- |
+| root-class       | 组件根元素类名   | string                                 | -                 |
+| root-style       | 组件根元素样式   | StyleValue                             | -                 |
+| range            | 双滑块模式       | boolean                                | false             |
+| model-value      | 滑块值           | number \| number[]                     | -                 |
+| min              | 最小值           | number                                 | 0                 |
+| max              | 最大值           | number                                 | 100               |
+| step             | 步长             | number                                 | 1                 |
+| vertical         | 垂直方向滑块     | boolean                                | false             |
+| disabled         | 禁用状态         | boolean                                | false             |
+| readonly         | 只读状态         | boolean                                | false             |
+| piece-color      | 滑块间的轨道颜色 | string                                 | -                 |
+| track-color      | 滑块轨道颜色     | string                                 | -                 |
+| track-size       | 滑块轨道尺寸     | string                                 | -                 |
+| thumb-color      | 滑块颜色         | string                                 | -                 |
+| thumb-size       | 滑块尺寸         | string                                 | -                 |
+| show-value       | 是否显示值       | boolean                                | false             |
+| value-position   | 值显示的位置     | 'top' \| 'right' \| 'bottom' \| 'left' | 'top' / 'right'   |
+| value-background | 设置值的背景色   | string                                 | -                 |
+| value-color      | 设置值的字体颜色 | string                                 | -                 |
+| show-scale       | 是否显示刻度     | boolean                                | false             |
+| scale-position   | 刻度显示的位置   | 'top' \| 'right' \| 'bottom' \| 'left' | 'bottom' / 'left' |
+| validate-event   | 是否触发表单验证 | boolean                                | true              |
+
+### SliderSlots
+
+| 插槽        | 描述               | 属性              |
+| ----------- | ------------------ | ----------------- |
+| start-thumb | 自定义起始滑块内容 | { value: number } |
+| end-thumb   | 自定义结束滑块内容 | { value: number } |
+
+### SliderEmits
+
+| 事件                    | 描述                             | 类型                                |
+| ----------------------- | -------------------------------- | ----------------------------------- |
+| update:model-value      | 滑块值实时改变时触发             | (value: number \| number[]) => void |
+| input <sup>1.9.2+</sup> | 滑块值实时改变时触发             | (value: number \| number[]) => void |
+| change                  | 滑块点击或拖动结束且值改变时触发 | (value: number \| number[]) => void |
+| drag-start              | 开始拖动时触发                   | (event: TouchEvent) => void         |
+| drag-end                | 结束拖动时触发                   | (event: TouchEvent) => void         |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')
+
+### CSS 变量 - 暗黑模式
+
+@code('./variables-dark.scss#variables')

package/components/slider/slider.vue

@@ -98,6 +98,35 @@ import {
   defaultSliderProps
 } from "./common";
 import { useMouseDown } from "../../use";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} range 双滑块模式，默认值：false。
+ * @property {number | number[]} modelValue 滑块值，默认值：-。
+ * @property {number} min 最小值，默认值：0。
+ * @property {number} max 最大值，默认值：100。
+ * @property {number} step 步长，默认值：1。
+ * @property {boolean} vertical 垂直方向滑块，默认值：false。
+ * @property {boolean} disabled 禁用状态，默认值：false。
+ * @property {boolean} readonly 只读状态，默认值：false。
+ * @property {string} pieceColor 滑块间的轨道颜色，默认值：-。
+ * @property {string} trackColor 滑块轨道颜色，默认值：-。
+ * @property {string} trackSize 滑块轨道尺寸，默认值：-。
+ * @property {string} thumbColor 滑块颜色，默认值：-。
+ * @property {string} thumbSize 滑块尺寸，默认值：-。
+ * @property {boolean} showValue 是否显示值，默认值：false。
+ * @property {'top' | 'right' | 'bottom' | 'left'} valuePosition 值显示的位置，默认值：'top' / 'right'。
+ * @property {string} valueBackground 设置值的背景色，默认值：-。
+ * @property {string} valueColor 设置值的字体颜色，默认值：-。
+ * @property {boolean} showScale 是否显示刻度，默认值：false。
+ * @property {'top' | 'right' | 'bottom' | 'left'} scalePosition 刻度显示的位置，默认值：'bottom' / 'left'。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @event {(value: number | number[]) => void} update 滑块值实时改变时触发
+ * @event {(value: number | number[]) => void} input 滑块值实时改变时触发
+ * @event {(value: number | number[]) => void} change 滑块点击或拖动结束且值改变时触发
+ * @event {(event: TouchEvent) => void} drag-start 开始拖动时触发
+ * @event {(event: TouchEvent) => void} drag-end 结束拖动时触发
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/space/README.md

@@ -0,0 +1,82 @@
+---
+nav: 组件
+title: Space
+subtitle: 间距
+group: 布局
+---
+
+## 介绍
+
+设置组件之间的间距。
+
+## 引入
+
+```ts
+import Space from 'sard-uniapp/components/space/space.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+最基础的用法，通过间距组件来给组件之间提供统一的间距。
+
+@code('${DEMO_PATH}/space/demo/Basic.vue')
+
+### 垂直布局
+
+使用 `direction` 来控制布局的方式, 背后实际上是利用了 `flex-direction` 来控制。
+
+@code('${DEMO_PATH}/space/demo/Vertical.vue')
+
+### 间距大小
+
+通过调整 `size` 的值来控制间距的大小。
+
+使用内置的 `small、middle、large` 来设置间距大小。
+
+@code('${DEMO_PATH}/space/demo/Size.vue')
+
+### 自定义间距大小
+
+很多时候，内建的大小不满足设计师的要求，我们可以通过传入自己定义的大小来设置。
+
+@code('${DEMO_PATH}/space/demo/CustomSize.vue')
+
+### 自动换行
+
+在 `horizontal` 模式下，通过使用 `wrap` 来控制自动换行行为。
+
+@code('${DEMO_PATH}/space/demo/Wrap.vue')
+
+### 对齐
+
+设置该值可以调整所有子节点在容器内的对齐方式，可设置的值与 `align-items` 一致。
+
+@code('${DEMO_PATH}/space/demo/Align.vue')
+
+## API
+
+### SpaceProps
+
+| 属性                       | 描述             | 类型                                                             | 默认值       |
+| -------------------------- | ---------------- | ---------------------------------------------------------------- | ------------ |
+| root-class                 | 组件根元素类名   | string                                                           | -            |
+| root-style                 | 组件根元素样式   | StyleValue                                                       | -            |
+| direction                  | 排列的方向       | 'vertical' \| 'horizontal'                                       | 'horizontal' |
+| size                       | 间隔大小         | 'small' \| 'middle' \| 'large' \| string                         | 'middle'     |
+| align                      | 垂直排布方式     | 'start' \| 'end' \| 'center' \| 'baseline'                       | -            |
+| justify <sup>1.14.2+</sup> | 水平排布方式     | 'start' \| 'end' \| 'center' \| 'between'\| 'around' \| 'evenly' | -            |
+| wrap                       | 设置是否自动折行 | boolean                                                          | false        |
+
+### SpaceSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/space/space.vue

@@ -14,6 +14,15 @@ import {
   spaceMapJustify,
   spaceSizes
 } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {'vertical' | 'horizontal'} direction 排列的方向，默认值：'horizontal'。
+ * @property {'small' | 'middle' | 'large' | string} size 间隔大小，默认值：'middle'。
+ * @property {'start' | 'end' | 'center' | 'baseline'} align 垂直排布方式，默认值：-。
+ * @property {'start' | 'end' | 'center' | 'between'| 'around' | 'evenly'} justify 水平排布方式，默认值：-。
+ * @property {boolean} wrap 设置是否自动折行，默认值：false。
+ */
 export default  _defineComponent({
   ...{
     options: {