sard-uniapp 1.19.1 → 1.19.3

package/components/qrcode/qrcode.vue

@@ -2,7 +2,7 @@
   <view :class="qrcodeClass" :style="qrcodeStyle">
     <view :class="bem.e('canvas-wrapper')">
       <canvas
-        type="2d"
+        :class="canvasId"
         :width="canvasSize"
         :height="canvasSize"
         :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
@@ -10,7 +10,12 @@
         :id="canvasId"
       ></canvas>
     </view>
-    <image :src="dataURL" mode="aspectFit" :class="bem.e('image')" />
+    <image
+      :src="dataURL"
+      :show-menu-by-longpress="showMenuByLongpress"
+      mode="aspectFit"
+      :class="bem.e('image')"
+    />
     <slot></slot>
   </view>
 </template>
@@ -30,11 +35,22 @@ import {
   stringifyStyle,
   createBem,
   uniqid,
-  qrcode,
-  isApp,
-  getNode
+  qrcode
 } from "../../utils";
 import { defaultQrcodeProps } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string} text 要编码的字符串数据，默认值：-。
+ * @property {'L' | 'M' | 'Q' | 'H'} ecl 错误纠错级别，默认值：'M'。
+ * @property {string} size 二维码呈现的大小，默认值：320rpx。
+ * @property {number} canvasSize 画板的大小，默认值：400。
+ * @property {string} color 二维码颜色，默认值：#000。
+ * @property {string} bgColor 二维码背景颜色，默认值：#fff。
+ * @property {number} quietZoneModules 安静区域模块数，默认值：2。
+ * @property {boolean} showMenuByLongpress 长按图片显示菜单(微信小程序)，默认值：false。
+ * @property {string} icon 二维码中图片的地址，默认值：-。
+ */
 export default  _defineComponent({
   ...{
     options: {
@@ -53,7 +69,9 @@ export default  _defineComponent({
     canvasSize: { type: Number, required: false },
     color: { type: String, required: false },
     bgColor: { type: String, required: false },
-    quietZoneModules: { type: Number, required: false }
+    quietZoneModules: { type: Number, required: false },
+    showMenuByLongpress: { type: Boolean, required: false },
+    icon: { type: String, required: false }
   }, defaultQrcodeProps),
   setup(__props, { expose: __expose }) {
     __expose();
@@ -62,14 +80,13 @@ export default  _defineComponent({
     const instance = getCurrentInstance();
     const canvasId = uniqid();
     const contextRef = shallowRef();
-    const canvasRef = shallowRef();
     const qrcodeMap = computed(() => {
       return qrcode(props.text, {
         ecl: props.ecl
       });
     });
     const dataURL = ref("");
-    const drawQrcodeInApp = () => {
+    const drawQrcode = async () => {
       const context = contextRef.value;
       if (!context) {
         return;
@@ -94,76 +111,69 @@ export default  _defineComponent({
           }
         });
       });
-      context.draw();
-      uni.canvasToTempFilePath({
-        x: 0,
-        y: 0,
-        width: size,
-        height: size,
-        destWidth: size,
-        destHeight: size,
-        canvasId,
-        success(res) {
-          dataURL.value = res.tempFilePath;
-        }
+      await drawIcon(context);
+      context.draw(false, () => {
+        uni.canvasToTempFilePath(
+          {
+            x: 0,
+            y: 0,
+            width: size,
+            height: size,
+            destWidth: size,
+            destHeight: size,
+            canvasId,
+            success(res) {
+              dataURL.value = res.tempFilePath;
+            },
+            fail(err) {
+              console.log("uni.canvasToTempFilePath fail", err);
+            }
+          },
+          instance
+        );
       });
     };
-    const drawQrcodeInOthers = () => {
-      const canvas = canvasRef.value;
-      if (!canvas) {
-        return;
+    const drawIcon = async (ctx) => {
+      if (props.icon) {
+        const iconInfo = await loadIcon(props.icon);
+        const size = props.canvasSize;
+        ctx.save();
+        ctx.beginPath();
+        ctx.drawImage(iconInfo.path, size * 0.4, size * 0.4, size * 0.2, size * 0.2);
+        ctx.restore();
       }
-      const map = qrcodeMap.value;
-      const size = props.canvasSize;
-      canvas.width = size;
-      canvas.height = size;
-      const moduleSize = size / (map.length + props.quietZoneModules * 2);
-      const margin = moduleSize * props.quietZoneModules;
-      const context = canvas.getContext("2d");
-      const path2D = context.createPath2D ? context.createPath2D() : canvas.createPath2D ? canvas.createPath2D() : new Path2D();
-      map.forEach((row, rowIndex) => {
-        row.forEach((col, colIndex) => {
-          if (col === 1) {
-            path2D.rect(
-              colIndex * moduleSize + margin,
-              rowIndex * moduleSize + margin,
-              moduleSize,
-              moduleSize
-            );
+    };
+    const loadIcon = (path) => {
+      return new Promise((resolve, reject) => {
+        uni.getImageInfo({
+          src: path,
+          success(res) {
+            resolve(res);
+          },
+          fail(err) {
+            console.log("uni.getImageInfo fail", path);
+            console.log("uni.getImageInfo fail", err);
+            reject(err);
           }
         });
       });
-      context.clearRect(0, 0, size, size);
-      context.fillStyle = props.bgColor;
-      context.fillRect(0, 0, size, size);
-      context.fillStyle = props.color;
-      context.fill(path2D);
-      dataURL.value = canvas.toDataURL();
     };
     watch(
       [
         contextRef,
-        canvasRef,
         qrcodeMap,
         () => props.canvasSize,
         () => props.color,
         () => props.bgColor,
-        () => props.quietZoneModules
+        () => props.quietZoneModules,
+        () => props.icon
       ],
       () => {
-        if (isApp) {
-          drawQrcodeInApp();
-        } else {
-          drawQrcodeInOthers();
-        }
+        drawQrcode();
       }
     );
     onMounted(async () => {
-      if (isApp) {
-        contextRef.value = uni.createCanvasContext(canvasId, instance);
-      } else {
-        canvasRef.value = await getNode(`#${canvasId}`, instance);
-      }
+      contextRef.value = uni.createCanvasContext(canvasId, instance);
     });
     const qrcodeClass = computed(() => {
       return classNames(bem.b(), props.rootClass);
@@ -174,12 +184,12 @@ export default  _defineComponent({
         height: props.size
       });
     });
-    const __returned__ = { props, bem, instance, canvasId, contextRef, canvasRef, qrcodeMap, dataURL, drawQrcodeInApp, drawQrcodeInOthers, qrcodeClass, qrcodeStyle };
+    const __returned__ = { props, bem, instance, canvasId, contextRef, qrcodeMap, dataURL, drawQrcode, drawIcon, loadIcon, qrcodeClass, qrcodeStyle };
     return __returned__;
   }
 });
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use './index.scss' as *;
 </style>

package/components/radio/README.md

@@ -0,0 +1,172 @@
+---
+nav: 组件
+title: Radio
+subtitle: 单选按钮
+group: 表单组件
+---
+
+## 介绍
+
+在一组可选项中进行单一选择。
+
+## 引入
+
+```ts
+import Radio from 'sard-uniapp/components/radio/radio.vue'
+import RadioGroup from 'sard-uniapp/components/radio-group/radio-group.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用 `v-model` 绑定当前选中值。
+
+@code('${DEMO_PATH}/radio/demo/Basic.vue')
+
+### 排列方向
+
+将 `direction` 属性设置为 `horizontal` 后，单选按钮组会变成水平排列。
+
+@code('${DEMO_PATH}/radio/demo/Direction.vue')
+
+### 只读和禁用
+
+只读或禁用后不可点击。
+
+@code('${DEMO_PATH}/radio/demo/DisabledReadOnly.vue')
+
+### 图标大小
+
+使用 `size` 属性设置图标大小。
+
+@code('${DEMO_PATH}/radio/demo/Size.vue')
+
+### 图标颜色
+
+使用 `checked-color` 属性设置选中时的图标颜色。
+
+@code('${DEMO_PATH}/radio/demo/Color.vue')
+
+### 图标类型
+
+设置 `type` 属性为 `record` 可以使图标变为圆点类型。
+
+@code('${DEMO_PATH}/radio/demo/Type.vue')
+
+### 自定义图标
+
+如果内置的图标不满足需求，可以使用 `icon` 插槽设置为任意的图标。
+插槽接收`checked`属性表示当前的选中状态。
+
+@code('${DEMO_PATH}/radio/demo/Icon.vue')
+
+### 自动渲染单选按钮
+
+使用 `options` 属性设置可选项。
+
+@code('${DEMO_PATH}/radio/demo/GroupOptions.vue')
+
+### 自定义 UI
+
+如果只想使用单选的逻辑，并想自定义 UI，可以使用单选按钮组的 `custom` 插槽。
+
+这个插槽接收 `toggle`方法和 `value` 属性作为参数。`toggle` 用于选中指定的选项，`value` 用于判断选中状态。
+
+@code('${DEMO_PATH}/radio/demo/Custom1.vue')
+
+结合 `list` 组件使用：
+
+@code('${DEMO_PATH}/radio/demo/Custom2.vue')
+
+单选按钮组里面 `radio` 组件，会自动判断选中状态；可以给 `radio` 组件添加 `readonly` 属性以便将点击操作交给其他组件。
+
+@code('${DEMO_PATH}/radio/demo/Custom3.vue')
+
+## API
+
+### RadioProps
+
+| 属性          | 描述                                 | 类型                 | 默认值   |
+| ------------- | ------------------------------------ | -------------------- | -------- |
+| root-class    | 组件根元素类名                       | string               | -        |
+| root-style    | 组件根元素样式                       | StyleValue           | -        |
+| checked       | 是否选中                             | boolean              | false    |
+| value         | 单选按钮的值，配合单选按钮组一起使用 | any                  | -        |
+| label         | 单选按钮标签                         | string               | -        |
+| disabled      | 禁用状态                             | boolean              | -        |
+| readonly      | 只读状态                             | boolean              | -        |
+| size          | 图标的尺寸                           | string               | -        |
+| type          | 图标类型                             | 'circle' \| 'record' | 'circle' |
+| checked-color | 选中时图标的颜色                     | string               | -        |
+
+### RadioSlots
+
+| 插槽    | 描述           | 属性                 |
+| ------- | -------------- | -------------------- |
+| default | 自定义默认内容 | -                    |
+| icon    | 自定义图标     | { checked: boolean } |
+
+### RadioEmits
+
+| 事件  | 描述       | 类型                 |
+| ----- | ---------- | -------------------- |
+| click | 点击时触发 | (event: any) => void |
+
+### RadioGroupProps
+
+| 属性                  | 描述                                  | 类型                       | 默认值                           |
+| --------------------- | ------------------------------------- | -------------------------- | -------------------------------- |
+| root-class            | 组件根元素类名                        | string                     | -                                |
+| root-style            | 组件根元素样式                        | StyleValue                 | -                                |
+| model-value (v-model) | 指定选中的选项                        | any                        | -                                |
+| disabled              | 禁用状态                              | boolean                    | -                                |
+| readonly              | 只读状态                              | boolean                    | -                                |
+| size                  | 图标的尺寸                            | string                     | -                                |
+| type                  | 图标类型                              | 'circle' \| 'record'       | 'circle'                         |
+| checked-color         | 选中时图标的颜色                      | string                     | -                                |
+| direction             | 排列方向                              | 'horizontal' \| 'vertical' | 'vertical'                       |
+| validate-event        | 是否触发表单验证                      | boolean                    | true                             |
+| options               | 自动设置单选按钮                      | RadioGroupOption[]         | -                                |
+| option-keys           | 自定义 options 的 label、value 的字段 | RadioGroupOptionKeys       | {label: 'label', value: 'value'} |
+
+### RadioGroupOption
+
+```ts
+export type RadioGroupOption =
+  | {
+      [key: PropertyKey]: any
+    }
+  | string
+  | number
+  | boolean
+```
+
+### RadioGroupOptionKeys
+
+```ts
+export interface RadioGroupOptionKeys {
+  label?: string
+  value?: string
+}
+```
+
+### RadioGroupSlots
+
+| 插槽    | 描述                                                                                                            | 属性                                         |
+| ------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+| default | 自定义默认内容                                                                                                  | -                                            |
+| custom  | 同默认插槽，额外可以接收 `toggle` 方法切换选中状态，接收 `value` 属性判断选中状态；用于自定义单选按钮结构和样式 | { toggle: (value: any) => void, value: any } |
+
+### RadioGroupEmits
+
+| 事件               | 描述                   | 类型                 |
+| ------------------ | ---------------------- | -------------------- |
+| update:model-value | 单选按钮组值改变时触发 | (value: any) => void |
+| change             | 单选按钮组值改变时触发 | (value: any) => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/radio/radio.vue

@@ -24,6 +24,19 @@ import {
 } from "./common";
 import SarCheckIcon from "../check-icon/check-icon.vue";
 import { useFormContext } from "../form/common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} checked 是否选中，默认值：false。
+ * @property {any} value 单选按钮的值，配合单选按钮组一起使用，默认值：-。
+ * @property {string} label 单选按钮标签，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：-。
+ * @property {boolean} readonly 只读状态，默认值：-。
+ * @property {string} size 图标的尺寸，默认值：-。
+ * @property {'circle' | 'record'} type 图标类型，默认值：'circle'。
+ * @property {string} checkedColor 选中时图标的颜色，默认值：-。
+ * @event {(event: any) => void} click 点击时触发
+ */
 export default  _defineComponent({
   components: {
     SarCheckIcon,

package/components/radio/variables.scss

@@ -5,7 +5,7 @@ page,
   --sar-radio-group-row-gap: 16rpx;
 
   --sar-radio-icon-font-size: 40rpx;
-  --sar-radio-icon-color: var(--sar-quaternary-color);
+  --sar-radio-icon-color: var(--sar-fourth-color);
   --sar-radio-icon-checked-color: var(--sar-primary);
   --sar-radio-icon-disabled-color: var(--sar-disabled-color);
   --sar-radio-icon-transition-duration: var(--sar-duration);

package/components/radio-group/radio-group.vue

@@ -40,6 +40,22 @@ import {
 } from "../../utils";
 import { useFormItemContext } from "../form/common";
 import SarRadio from "../radio/radio.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {any} modelValue 指定选中的选项，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：-。
+ * @property {boolean} readonly 只读状态，默认值：-。
+ * @property {string} size 图标的尺寸，默认值：-。
+ * @property {'circle' | 'record'} type 图标类型，默认值：'circle'。
+ * @property {string} checkedColor 选中时图标的颜色，默认值：-。
+ * @property {'horizontal' | 'vertical'} direction 排列方向，默认值：'vertical'。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @property {RadioGroupOption[]} options 自动设置单选按钮，默认值：-。
+ * @property {RadioGroupOptionKeys} optionKeys 自定义 options 的 label、value 的字段，默认值：{label: 'label', value: 'value'}。
+ * @event {(value: any) => void} update 单选按钮组值改变时触发
+ * @event {(value: any) => void} change 单选按钮组值改变时触发
+ */
 export default  _defineComponent({
   components: {
     SarRadio,

package/components/radio-input/README.md

@@ -0,0 +1,44 @@
+---
+nav: 组件
+title: RadioInput
+subtitle: 单选输入框
+group: 表单组件
+version: 1.3+
+---
+
+## 介绍
+
+组合了单选弹出框、列表、输入框组件，实现了在弹出框中单选的功能。
+
+## 引入
+
+```ts
+import RadioInput from 'sard-uniapp/components/radio-input/radio-input.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+通过 `title` 和 `placeholder` 属性设置弹出框标题和输入框占位文本，
+通过 `options` 属性设置可选项。
+
+@code('${DEMO_PATH}/radio-input/demo/Basic.vue')
+
+## API
+
+### RadioInputProps
+
+继承 [`RadioPopoutProps`](./radio-popout#RadioPopoutProps) 并有以下额外属性：
+
+| 属性                              | 描述                   | 类型       | 默认值          |
+| --------------------------------- | ---------------------- | ---------- | --------------- |
+| root-class                        | 弹出式输入框根元素类名 | string     | -               |
+| root-style                        | 弹出式输入框根元素样式 | StyleValue | -               |
+| clearable                         | 是否显示清空按钮       | boolean    | false           |
+| placeholder                       | 输入框占位符内容       | string     | -               |
+| value-on-clear <sup>1.19.2+</sup> | 设置点击清除按钮后的值 | () => any  | () => undefined |
+
+### RadioInputEmits
+
+继承 [`RadioPopoutEmits`](./radio-popout#RadioPopoutEmits)

package/components/radio-input/common.d.ts

@@ -3,11 +3,13 @@ import { type PopoutInputProps } from '../popout-input/common';
 import { type RadioPopoutEmits, type RadioPopoutProps } from '../radio-popout/common';
 export type RadioInputOption = RadioGroupOption;
 export interface RadioInputProps extends RadioPopoutProps, Omit<PopoutInputProps, 'modelValue'> {
+    valueOnClear?: () => any;
 }
 export declare const defaultRadioInputProps: () => {
+    valueOnClear: RadioInputProps["valueOnClear"];
     options: () => never[];
     validateEvent: boolean;
-    type: RadioInputProps["type"];
+    type: RadioPopoutProps["type"];
 };
 export interface RadioInputEmits extends RadioPopoutEmits {
 }

package/components/radio-input/common.js

@@ -1,2 +1,6 @@
 import { defaultRadioPopoutProps, } from '../radio-popout/common';
-export const defaultRadioInputProps = defaultRadioPopoutProps;
+import { defaultConfig } from '../config';
+export const defaultRadioInputProps = () => ({
+    ...defaultRadioPopoutProps(),
+    ...defaultConfig.radioInput,
+});

package/components/radio-input/radio-input.d.ts

@@ -10,6 +10,7 @@ declare const _default: import("vue").DefineComponent<RadioInputProps, {}, {}, {
 }>, {
     options: import("../radio/common").RadioGroupOption[];
     type: import("../radio/common").IconType;
+    valueOnClear: () => any;
     validateEvent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/components/radio-input/radio-input.vue

@@ -37,8 +37,31 @@ import { defaultOptionKeys } from "../radio/common";
 import {
   defaultRadioInputProps
 } from "./common";
-import { getMayPrimitiveOption, isNullish } from "../../utils";
+import { getMayPrimitiveOption, isEmptyBinding, isNullish } from "../../utils";
 import { usePopoutInput } from "../../use";
+/**
+ * @property {string} rootClass 弹出式输入框根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 弹出式输入框根元素样式，默认值：-。
+ * @property {any} modelValue 指定选中的选项，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：-。
+ * @property {boolean} readonly 只读状态，默认值：-。
+ * @property {string} size 图标的尺寸，默认值：-。
+ * @property {'circle' | 'record'} type 图标类型，默认值：'circle'。
+ * @property {string} checkedColor 选中时图标的颜色，默认值：-。
+ * @property {'horizontal' | 'vertical'} direction 排列方向，默认值：'vertical'。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @property {RadioGroupOption[]} options 自动设置单选按钮，默认值：-。
+ * @property {RadioGroupOptionKeys} optionKeys 自定义 options 的 label、value 的字段，默认值：{label: 'label', value: 'value'}。
+ * @property {string} popoutClass 弹窗框根元素类名，默认值：-。
+ * @property {StyleValue} popoutStyle 弹窗框根元素样式，默认值：-。
+ * @property {boolean} visible 是否显示弹出框，默认值：-。
+ * @property {string} title 弹出框标题，默认值：-。
+ * @property {boolean} clearable 是否显示清空按钮，默认值：false。
+ * @property {string} placeholder 输入框占位符内容，默认值：-。
+ * @property {() => any} valueOnClear 设置点击清除按钮后的值，默认值：() => undefined。
+ * @event {(visible: boolean) => void} update 弹出框显隐时触发
+ * @event {(value: any | undefined) => void} change 单选输入组件值改变时触发
+ */
 export default  _defineComponent({
   components: {
     SarPopoutInput,
@@ -52,6 +75,7 @@ export default  _defineComponent({
   },
   __name: "radio-input",
   props:  _mergeDefaults({
+    valueOnClear: { type: Function, required: false },
     visible: { type: Boolean, required: false },
     title: { type: String, required: false },
     popoutClass: { type: String, required: false },
@@ -89,7 +113,7 @@ export default  _defineComponent({
       return isNullish(option) ? "" : getMayPrimitiveOption(option, optionKeys.label);
     }
     function getInputValue() {
-      if (isNullish(innerValue.value) || innerValue.value.length === 0) {
+      if (isEmptyBinding(innerValue.value)) {
         return "";
       }
       return getOutletText(props.options, fieldKeys.value, innerValue.value);

package/components/radio-popout/README.md

@@ -0,0 +1,52 @@
+---
+nav: 组件
+title: RadioPopout
+subtitle: 单选弹出框
+group: 表单组件
+version: 1.16+
+---
+
+## 介绍
+
+组合了单选框组、列表、弹出框组件，实现了在弹出框中单选的功能。
+
+## 引入
+
+```ts
+import RadioPopout from 'sard-uniapp/components/radio-popout/radio-popout.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用 `v-model` 双向绑定当前值，使用 `v-model:visible` 控制弹出框显隐。
+
+@code('${DEMO_PATH}/radio-popout/demo/Basic.vue')
+
+## API
+
+### RadioPopoutProps
+
+继承 [`RadioGroupProps`](./radio#RadioGroupProps) 并有以下额外属性：
+
+| 属性              | 描述             | 类型       | 默认值 |
+| ----------------- | ---------------- | ---------- | ------ |
+| popout-class      | 弹窗框根元素类名 | string     | -      |
+| popout-style      | 弹窗框根元素样式 | StyleValue | -      |
+| visible (v-model) | 是否显示弹出框   | boolean    | -      |
+| title             | 弹出框标题       | string     | -      |
+
+### RadioPopoutEmits
+
+| 事件               | 描述                     | 类型                              |
+| ------------------ | ------------------------ | --------------------------------- |
+| update:model-value | 单选输入组件值改变时触发 | (value: any \| undefined) => void |
+| change             | 单选输入组件值改变时触发 | (value: any \| undefined) => void |
+| update:visible     | 弹出框显隐时触发         | (visible: boolean) => void        |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/radio-popout/common.d.ts

@@ -9,7 +9,7 @@ export interface RadioPopoutProps extends RadioGroupProps {
 export declare const defaultRadioPopoutProps: () => {
     options: () => never[];
     validateEvent: boolean;
-    type: import("../radio-input").RadioInputProps["type"];
+    type: RadioPopoutProps["type"];
 };
 export interface RadioPopoutSlots {
     default?(props: Record<string, never>): any;

package/components/radio-popout/radio-popout.vue

@@ -69,6 +69,26 @@ import {
 } from "./common";
 import { defaultOptionKeys } from "../radio/common";
 import { useScrollSide, useFormPopout } from "../../use";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {any} modelValue 指定选中的选项，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：-。
+ * @property {boolean} readonly 只读状态，默认值：-。
+ * @property {string} size 图标的尺寸，默认值：-。
+ * @property {'circle' | 'record'} type 图标类型，默认值：'circle'。
+ * @property {string} checkedColor 选中时图标的颜色，默认值：-。
+ * @property {'horizontal' | 'vertical'} direction 排列方向，默认值：'vertical'。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @property {RadioGroupOption[]} options 自动设置单选按钮，默认值：-。
+ * @property {RadioGroupOptionKeys} optionKeys 自定义 options 的 label、value 的字段，默认值：{label: 'label', value: 'value'}。
+ * @property {string} popoutClass 弹窗框根元素类名，默认值：-。
+ * @property {StyleValue} popoutStyle 弹窗框根元素样式，默认值：-。
+ * @property {boolean} visible 是否显示弹出框，默认值：-。
+ * @property {string} title 弹出框标题，默认值：-。
+ * @event {(visible: boolean) => void} update 弹出框显隐时触发
+ * @event {(value: any | undefined) => void} change 单选输入组件值改变时触发
+ */
 export default  _defineComponent({
   components: {
     SarPopout,