sard-uniapp 1.19.2 → 1.19.3

package/components/load-more/load-more.vue

@@ -26,6 +26,17 @@ import {
 } from "./common";
 import { useTranslate } from "../locale";
 import SarLoading from "../loading/loading.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {LoadMoreStatus} status 加载的状态，默认值：'incomplete'。
+ * @property {string} incompleteText 未加载完的状态文本，默认值：'加载更多'。
+ * @property {string} loadingText 加载中的状态文本，默认值：'加载中...'。
+ * @property {string} completeText 加载完的状态文本，默认值：'没有更多了'。
+ * @property {string} errorText 加载错误的状态文本，默认值：'请求失败，点击重新加载'。
+ * @event {() => void} load-more 在 `incomplete` 状态下点击时触发
+ * @event {() => void} reload 在 `error` 状态下点击时触发
+ */
 export default  _defineComponent({
   components: {
     SarLoading,

package/components/loading/README.md

@@ -0,0 +1,89 @@
+---
+nav: 组件
+title: Loading
+subtitle: 加载
+group: 反馈组件
+---
+
+## 介绍
+
+表示处理中的状态。
+
+## 引入
+
+```ts
+import Button from 'sard-uniapp/components/loading/loading.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+@code('${DEMO_PATH}/loading/demo/Basic.vue')
+
+### 加载类型
+
+使用`type`属性设置不同类型。
+
+@code('${DEMO_PATH}/loading/demo/Type.vue')
+
+### 加载文案
+
+通过`text`属性或者默认插槽展示文字。
+
+@code('${DEMO_PATH}/loading/demo/Text.vue')
+
+### 垂直排布
+
+通过`vertical`属性设置图标和文字垂直排布。
+
+@code('${DEMO_PATH}/loading/demo/Vertical.vue')
+
+### 加载尺寸
+
+`size`属性设置图标大小，`textSize`属性设置文字大小。
+
+@code('${DEMO_PATH}/loading/demo/Size.vue')
+
+### 自定义颜色
+
+`color`属性设置图标颜色，`textColor`属性设置文字颜色。
+
+@code('${DEMO_PATH}/loading/demo/Color.vue')
+
+### 自定义图标
+
+通过 `circular` 插槽可以自定义加载图标。
+
+@code('${DEMO_PATH}/loading/demo/Custom.vue')
+
+## API
+
+### LoadingProps
+
+| 属性       | 描述                   | 类型                  | 默认值     |
+| ---------- | ---------------------- | --------------------- | ---------- |
+| root-class | 组件根元素类名         | string                | -          |
+| root-style | 组件根元素样式         | StyleValue            | -          |
+| type       | 加载类型               | 'clock' \| 'circular' | 'circular' |
+| color      | 加载颜色               | string                | -          |
+| size       | 图标尺寸               | string                | -          |
+| text       | 图标文字               | string                | -          |
+| text-color | 文字颜色               | string                | -          |
+| text-size  | 文字尺寸               | string                | -          |
+| vertical   | 是否垂直排列图标和文案 | boolean               | false      |
+| animated   | 是否开启加载动画       | boolean               | true       |
+| progress   | 当前加载的进度         | number                | 1          |
+
+### LoadingSlots
+
+| 插槽     | 描述                         | 属性 |
+| -------- | ---------------------------- | ---- |
+| default  | 自定义加载文字内容           | -    |
+| circular | 自定义 `circular` 类型的图标 | -    |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/loading/loading.vue

@@ -47,6 +47,19 @@ import {
 import {
   defaultLoadingProps
 } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {'clock' | 'circular'} type 加载类型，默认值：'circular'。
+ * @property {string} color 加载颜色，默认值：-。
+ * @property {string} size 图标尺寸，默认值：-。
+ * @property {string} text 图标文字，默认值：-。
+ * @property {string} textColor 文字颜色，默认值：-。
+ * @property {string} textSize 文字尺寸，默认值：-。
+ * @property {boolean} vertical 是否垂直排列图标和文案，默认值：false。
+ * @property {boolean} animated 是否开启加载动画，默认值：true。
+ * @property {number} progress 当前加载的进度，默认值：1。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/lucky-draw/README.md

@@ -0,0 +1,174 @@
+---
+nav: 组件
+title: LuckyDraw
+subtitle: 幸运抽奖
+group:
+  title: 活动组件
+  order: 6
+version: 1.2+
+---
+
+## 介绍
+
+提供了几个组合式函数，封装了九宫格、幸运大转盘、老虎机等抽奖的主要逻辑。布局与样式需自行实现，可拷贝案例代码再进行修改。
+
+## 引入
+
+```ts
+import { useLuckyGrid, useLuckyWheel, useSlotMachine } from 'sard-uniapp'
+```
+
+## 代码演示
+
+### 九宫格
+
+遍历 `useLuckyGrid` 返回的 `grids` 计算属性来渲染九宫格；`activeIndex` 计算属性用于判断当前活动的奖品。
+
+点击按钮后调用 `play` 方法开始动画；
+
+在确定抽中的奖品下标时调用 `stop` 方法开始减速动画；
+
+在动画完全停止后调用 `complete` 回调函数展示抽中的奖品。
+
+@code('${DEMO_PATH}/lucky-draw/demo/BasicGrid.vue')
+
+utils.ts
+
+@code('${DEMO_PATH}/lucky-draw/demo/utils.ts')
+
+### 自定义宫格行列
+
+`useLuckyGrid` 默认会生成 3x3 个格子，也可以自定义行列数。
+
+宫格的外边缘格子下标从左上角以 0 开始逆时针递增，内部的格子下标从左到右、从上到下以 -1 开始递减。
+
+`centerSize` 计算属性可用于获取中间格子的行列数。
+
+@code('${DEMO_PATH}/lucky-draw/demo/GridSize.vue')
+
+### 大转盘
+
+大转盘与宫格抽奖逻辑类似。
+
+`count` 选项用于指定奖品数量；
+
+`useLuckyWheel` 函数返回的 `sectorDegrees` 计算属性为每个奖品所占的角度；
+
+`degrees` 计算属性为整个大转盘当前旋转的角度。
+
+@code('${DEMO_PATH}/lucky-draw/demo/Wheel.vue')
+
+### 老虎机
+
+老虎机可以一次性抽取多个奖品。
+
+`columns` 选项用于指定列数以及每列的奖品数量；
+
+`offset` 计算属性保存着每一列的百分比偏移量，每一列奖品容器的高度需和奖品高度一致；
+
+为了实现首位相接的效果，还需在渲染的奖品列表的末尾加上第一个奖品。
+
+@code('${DEMO_PATH}/lucky-draw/demo/SlotMechine.vue')
+
+## API
+
+### useLuckyGrid
+
+```ts
+function useLuckyGrid(options?: UseLuckyGridOptions): UseLuckyGridReturn
+```
+
+### UseLuckyGridOptions
+
+| 属性       | 描述                           | 类型                         | 默认值              |
+| ---------- | ------------------------------ | ---------------------------- | ------------------- |
+| row        | 宫格行数                       | number \| Ref\<number>       | 3                   |
+| column     | 宫格列数                       | number \| Ref\<number>       | 3                   |
+| minSpeed   | 最小加速度                     | number \| Ref\<number>       | 0.1                 |
+| maxSpeed   | 最大加速度                     | number \| Ref\<number>       | 0.4                 |
+| accelTime  | 加速时间，单位毫秒             | number \| Ref\<number>       | 2500                |
+| decelTime  | 减速时间，单位毫秒             | number \| Ref\<number>       | 2500                |
+| easeIn     | 加速缓动公式                   | (progress: number) => number | (k) => k \* k       |
+| easeOut    | 减速缓动公式                   | (progress: number) => number | (k) => k \* (2 - k) |
+| startDelay | 加速运动前的等待时间，单位毫秒 | number \| Ref\<number>       | 0                   |
+| endDelay   | 减速运动后的等待时间，单位毫秒 | number \| Ref\<number>       | 500                 |
+| complete   | 完成抽奖动画后的回调           | (index: number) => void      | -                   |
+
+### UseLuckyGridReturn
+
+| 属性        | 描述                                           | 类型                                           |
+| ----------- | ---------------------------------------------- | ---------------------------------------------- |
+| play        | 调用后开始抽奖                                 | () => void                                     |
+| stop        | 调用后开始减速动画                             | (index?: number) => void                       |
+| pause       | 调用后暂停动画                                 | () => void                                     |
+| reset       | 调用后重置动画                                 | () => void                                     |
+| playing     | 用于判断当前是否正在动画                       | ComputedRef\<boolean>                          |
+| activeIndex | 用于判断当前活动的下标                         | ComputedRef\<number \| undefined>              |
+| grids       | 用于渲染成宫格，并根据下标判断奖品和非奖品位置 | ComputedRef\<number[]>                         |
+| centerSize  | 用于渲染中间非奖品格子的行列数                 | ComputedRef\<{ row: number; column: number; }> |
+
+### useLuckyWheel
+
+```ts
+function useLuckyWheel(options?: UseLuckyWheelOptions): UseLuckyWheelReturn
+```
+
+### UseLuckyWheelOptions
+
+| 属性       | 描述                           | 类型                         | 默认值              |
+| ---------- | ------------------------------ | ---------------------------- | ------------------- |
+| count      | 奖品个数                       | number \| Ref\<number>       | 8                   |
+| minSpeed   | 最小加速度                     | number \| Ref\<number>       | 0.01                |
+| maxSpeed   | 最大加速度                     | number \| Ref\<number>       | 0.4                 |
+| accelTime  | 加速时间，单位毫秒             | number \| Ref\<number>       | 2500                |
+| decelTime  | 减速时间，单位毫秒             | number \| Ref\<number>       | 2500                |
+| easeIn     | 加速缓动公式                   | (progress: number) => number | (k) => k \* k       |
+| easeOut    | 减速缓动公式                   | (progress: number) => number | (k) => k \* (2 - k) |
+| startDelay | 加速运动前的等待时间，单位毫秒 | number \| Ref\<number>       | 0                   |
+| endDelay   | 减速运动后的等待时间，单位毫秒 | number \| Ref\<number>       | 300                 |
+| complete   | 完成抽奖动画后的回调           | (index: number) => void      | -                   |
+
+### UseLuckyWheelReturn
+
+| 属性          | 描述                             | 类型                     |
+| ------------- | -------------------------------- | ------------------------ |
+| play          | 调用后开始抽奖                   | () => void               |
+| stop          | 调用后开始减速动画               | (index?: number) => void |
+| pause         | 调用后暂停动画                   | () => void               |
+| reset         | 调用后重置动画                   | () => void               |
+| playing       | 用于判断当前是否正在动画         | ComputedRef\<boolean>    |
+| sectorDegrees | 每个扇形奖品所占的角度，单位 deg | ComputedRef\<number>     |
+| degrees       | 当前转盘渲染的角度，单位 deg     | ComputedRef\<number>     |
+
+### useSlotMachine
+
+```ts
+function useSlotMachine(options: UseSlotMachineOptions): UseSlotMachineReturn
+```
+
+### UseSlotMachineOptions
+
+| 属性         | 描述                           | 类型                                                     | 默认值              |
+| ------------ | ------------------------------ | -------------------------------------------------------- | ------------------- |
+| columns      | 奖品个数                       | number[] \| unknown[][] \| Ref\<number[] \| unknown[][]> | []                  |
+| staggerDelay | 列间交错延迟时间，单位毫秒     | number \| Ref\<number>                                   | 600                 |
+| minSpeed     | 最小加速度                     | number \| Ref\<number>                                   | 0.01                |
+| maxSpeed     | 最大加速度                     | number \| Ref\<number>                                   | 0.3                 |
+| accelTime    | 加速时间，单位毫秒             | number \| Ref\<number>                                   | 2500                |
+| decelTime    | 减速时间，单位毫秒             | number \| Ref\<number>                                   | 2500                |
+| easeIn       | 加速缓动公式                   | (progress: number) => number                             | (k) => k \* k       |
+| easeOut      | 减速缓动公式                   | (progress: number) => number                             | (k) => k \* (2 - k) |
+| startDelay   | 加速运动前的等待时间，单位毫秒 | number \| Ref\<number>                                   | 0                   |
+| endDelay     | 减速运动后的等待时间，单位毫秒 | number \| Ref\<number>                                   | 300                 |
+| complete     | 完成抽奖动画后的回调           | (index: number[]) => void                                | -                   |
+
+### UseSlotMachineReturn
+
+| 属性    | 描述                     | 类型                       |
+| ------- | ------------------------ | -------------------------- |
+| play    | 调用后开始抽奖           | () => void                 |
+| stop    | 调用后开始减速动画       | (index?: number[]) => void |
+| pause   | 调用后暂停动画           | () => void                 |
+| reset   | 调用后重置动画           | () => void                 |
+| playing | 用于判断当前是否正在动画 | ComputedRef\<boolean>      |
+| offset  | 每一列的当前偏移量       | ComputedRef\<number[]>     |

package/components/marquee/README.md

@@ -0,0 +1,65 @@
+---
+nav: 组件
+title: Marquee
+subtitle: 跑马灯
+group: 活动组件
+version: 1.2+
+---
+
+## 介绍
+
+让文字无缝循环滚动。
+
+## 引入
+
+```ts
+import Marquee from 'sard-uniapp/components/marquee/marquee.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+为了实现无缝的循环滚动，需要提供两份数据。
+
+@code('${DEMO_PATH}/marquee/demo/Basic.vue')
+
+### 异步数据
+
+`Marquee` 组件是通过 `animation` 来实现高效的滚动动画的，
+会根据内容高度或宽度动态设置动画时长，以实现固定速率滚动。
+
+如果 `Marquee` 挂载时机比插槽内容靠前，即插槽内容数据需要通过接口异步获取再渲染的，
+需要手动调用 `update` 方法来更新动画时长。
+
+@code('${DEMO_PATH}/marquee/demo/Reset.vue')
+
+### 水平方向
+
+可以设置 `direction="horizontal"` 属性实现水平方向的滚动。
+
+@code('${DEMO_PATH}/marquee/demo/Horizontal.vue')
+
+## API
+
+### MarqueeProps
+
+| 属性       | 描述                                                | 类型                       | 默认值     |
+| ---------- | --------------------------------------------------- | -------------------------- | ---------- |
+| root-class | 组件根元素类名                                      | string                     | -          |
+| root-style | 组件根元素样式                                      | StyleValue                 | -          |
+| direction  | 动画滚动方向                                        | 'vertical' \| 'horizontal' | 'vertical' |
+| speed      | 滚动速率 (px/s)                                     | number                     | 50         |
+| delay      | 挂载后，延迟动画时间（单位 ms），避免进入页面时卡顿 | number                     | 1000       |
+
+### MarqueeSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### MarqueeExpose
+
+| 属性   | 描述         | 类型       |
+| ------ | ------------ | ---------- |
+| update | 重置滚动时长 | () => void |

package/components/marquee/marquee.vue

@@ -20,6 +20,13 @@ import {
   defaultMarqueeProps
 } from "./common";
 import { useTimeout } from "../../use";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {'vertical' | 'horizontal'} direction 动画滚动方向，默认值：'vertical'。
+ * @property {number} speed 滚动速率 (px/s)，默认值：50。
+ * @property {number} delay 挂载后，延迟动画时间（单位 ms），避免进入页面时卡顿，默认值：1000。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/menu/_README.md

@@ -0,0 +1,61 @@
+---
+nav: 组件
+title: Menu
+subtitle: 菜单
+---
+
+## 介绍
+
+气泡弹出框的中的菜单。
+
+## 引入
+
+```ts
+import Menu from 'sard-uniapp/components/menu/menu.vue'
+```
+
+## API
+
+### MenuProps
+
+| 属性      | 描述         | 类型                       | 默认值     |
+| --------- | ------------ | -------------------------- | ---------- |
+| options   | 菜单选项     | MenuOption[]               | []         |
+| direction | 菜单排列方向 | 'vertical' \| 'horizontal' | 'vertical' |
+| theme     | 菜单主题色   | 'dark' \| 'light'          | 'light'    |
+
+### MenuOption
+
+| 属性       | 描述       | 类型    |
+| ---------- | ---------- | ------- |
+| text       | 菜单项文案 | string  |
+| disabled   | 禁用菜单项 | boolean |
+| icon       | 图标名称   | string  |
+| iconFamily | 图标字体   | string  |
+
+### MenuEmits
+
+| 事件   | 描述             | 类型                         |
+| ------ | ---------------- | ---------------------------- |
+| select | 选择菜单项时触发 | (option: MenuOption) => void |
+
+### MenuItemProps
+
+| 属性        | 描述       | 类型    | 默认值 |
+| ----------- | ---------- | ------- | ------ |
+| text        | 菜单项文案 | string  | -      |
+| disabled    | 禁用菜单项 | boolean | false  |
+| icon        | 图标名称   | string  | -      |
+| icon-family | 图标字体   | string  | -      |
+
+### MenuItemEmits
+
+| 事件  | 描述             | 类型                 |
+| ----- | ---------------- | -------------------- |
+| click | 点击菜单项时触发 | (event: any) => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/navbar/README.md

@@ -0,0 +1,123 @@
+---
+nav: 组件
+title: Navbar
+subtitle: 头部导航
+group: 导航组件
+---
+
+## 介绍
+
+在页面顶部的导航栏。
+
+## 引入
+
+```ts
+import Navbar from 'sard-uniapp/components/navbar/navbar.vue'
+import NavbarItem from 'sard-uniapp/components/navbar-item/navbar-item.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用 `title` 显示居中的标题。
+
+@code('${DEMO_PATH}/navbar/demo/Basic.vue')
+
+### 返回按钮
+
+设置 `show-back` 显示返回按钮，设置 `back-text` 显示返回文本。
+
+@code('${DEMO_PATH}/navbar/demo/Back.vue')
+
+### 导航项
+
+可以在 `left/right` 插槽中放置导航项。导航项带有默认的颜色和点击态。
+
+内置的返回按钮也是使用导航项实现的。
+
+@code('${DEMO_PATH}/navbar/demo/Item.vue')
+
+### 流动导航
+
+默认情况下标题居中， `left/right` 绝对定位于左右两侧；可以使用 `flow` 使其变为流动布局。
+
+@code('${DEMO_PATH}/navbar/demo/Flow.vue')
+
+### 自定义内容
+
+默认插槽的内容会覆盖标题，可以实现更加自由的布局。
+
+@code('${DEMO_PATH}/navbar/demo/Content.vue')
+
+### 背景色
+
+使用 css 变量 `--sar-navbar-bg` 设置想要的背景色，例如全屏时设置背景透明。
+
+@code('${DEMO_PATH}/navbar/demo/Background.vue')
+
+### 文本颜色
+
+使用 css 变量 `--sar-navbar-item-color` 和 `--sar-navbar-title-color` 设置导航项颜色和标题颜色。
+
+@code('${DEMO_PATH}/navbar/demo/Color.vue')
+
+## API
+
+### NavbarProps
+
+| 属性                        | 描述                                                                               | 类型       | 默认值 |
+| --------------------------- | ---------------------------------------------------------------------------------- | ---------- | ------ |
+| root-class                  | 组件根元素类名                                                                     | string     | -      |
+| root-style                  | 组件根元素样式                                                                     | StyleValue | -      |
+| title                       | 自定义标题                                                                         | string     | -      |
+| flow                        | 默认 `left/right` 绝对定位于左右两侧，标题居中；可以使用 `flow` 使其变为流动布局。 | boolean    | false  |
+| show-back <sup>1.12+</sup>  | 是否显示返回按钮（仅显示，返回逻辑需自行编写）                                     | boolean    | false  |
+| back-text <sup>1.12+</sup>  | 返回按钮的文本                                                                     | string     | -      |
+| fixed <sup>1.12+</sup>      | 是否固定到页面顶部                                                                 | boolean    | false  |
+| status-bar <sup>1.12+</sup> | 是否包含状态栏                                                                     | boolean    | false  |
+
+### NavbarSlots
+
+| 插槽    | 描述                   | 属性 |
+| ------- | ---------------------- | ---- |
+| default | 自定义导航中间内容     | -    |
+| title   | 自定义标题内容         | -    |
+| left    | 自定义导航左侧区域内容 | -    |
+| right   | 自定义导航右侧区域内容 | -    |
+
+### NavbarEmits
+
+| 事件 | 描述                 | 类型                 |
+| ---- | -------------------- | -------------------- |
+| back | 点击返回按钮项时触发 | (event: any) => void |
+
+### NavbarItemProps
+
+| 属性                         | 描述                             | 类型       | 默认值 |
+| ---------------------------- | -------------------------------- | ---------- | ------ |
+| root-class                   | 组件根元素类名                   | string     | -      |
+| root-style                   | 组件根元素样式                   | StyleValue | -      |
+| text <sup>1.12+</sup>        | 导航项文本                       | string     | -      |
+| icon <sup>1.12+</sup>        | 导航项图标                       | string     | -      |
+| icon-family <sup>1.12+</sup> | 导航项图标字体名称               | string     | -      |
+| icon-size <sup>1.12+</sup>   | 导航项图标大小                   | string     | -      |
+| reverse <sup>1.12+</sup>     | 默认图标在文本前面，可以互换位置 | string     | false  |
+
+### NavbarItemSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### NavbarItemEmits
+
+| 事件  | 描述             | 类型                 |
+| ----- | ---------------- | -------------------- |
+| click | 点击导航项时触发 | (event: any) => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/navbar/navbar.vue

@@ -37,6 +37,17 @@ import { classNames, stringifyStyle, createBem } from "../../utils";
 import SarNavbarItem from "../navbar-item/navbar-item.vue";
 import SarStatusBar from "../status-bar/status-bar.vue";
 import SarNavbarPit from "../navbar-pit/navbar-pit.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string} title 自定义标题，默认值：-。
+ * @property {boolean} flow 默认 `left/right` 绝对定位于左右两侧，标题居中；可以使用 `flow` 使其变为流动布局。，默认值：false。
+ * @property {boolean} showBack 是否显示返回按钮（仅显示，返回逻辑需自行编写），默认值：false。
+ * @property {string} backText 返回按钮的文本，默认值：-。
+ * @property {boolean} fixed 是否固定到页面顶部，默认值：false。
+ * @property {boolean} statusBar 是否包含状态栏，默认值：false。
+ * @event {(event: any) => void} back 点击返回按钮项时触发
+ */
 export default  _defineComponent({
   components: {
     SarNavbarItem,

package/components/navbar-item/navbar-item.vue

@@ -23,6 +23,16 @@ import { defineComponent as _defineComponent } from "vue";
 import { computed } from "vue";
 import { classNames, stringifyStyle, createBem } from "../../utils";
 import SarIcon from "../icon/icon.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string} text 导航项文本，默认值：-。
+ * @property {string} icon 导航项图标，默认值：-。
+ * @property {string} iconFamily 导航项图标字体名称，默认值：-。
+ * @property {string} iconSize 导航项图标大小，默认值：-。
+ * @property {string} reverse 默认图标在文本前面，可以互换位置，默认值：false。
+ * @event {(event: any) => void} click 点击导航项时触发
+ */
 export default  _defineComponent({
   components: {
     SarIcon,