stellar-ui-plus 1.25.1 → 1.25.3

package/components/ste-progress/README.md

@@ -4,9 +4,9 @@
 
 ---$
 
-### 代码演示
+## 代码演示
 
-#### 背景色
+## 背景色
 
 - 背景色支持纯色、渐变色、图片
 - 支持设置激活部分的背景(`activeBg`)和未激活部分(`inactiveBg`)的背景
@@ -19,7 +19,7 @@
 </template>
 ```
 
-#### 线条粗细
+## 线条粗细
 
 - 通过`strokeWidth`设置线条的粗细
 
@@ -30,7 +30,7 @@
 </template>
 ```
 
-#### 禁用
+## 禁用
 
 ```html
 <template>
@@ -38,7 +38,7 @@
 </template>
 ```
 
-#### 长度
+## 长度
 
 - 通过`width`设置进度条长度
 - 默认是`100%`，跟随父容器的宽度
@@ -50,7 +50,7 @@
 </template>
 ```
 
-#### 动画时间
+## 动画时间
 
 ```html
 <template>
@@ -58,7 +58,7 @@
 </template>
 ```
 
-#### 自定义文字内容
+## 自定义文字内容
 
 - 通过`pivotText`属性来自定义进度条内文字显示的内容
 - 通过`textColor`属性来自定义进度条内文字的颜色
@@ -74,7 +74,7 @@
 </template>
 ```
 
-#### 文本显示阈值
+## 文本显示阈值
 
 - 当进度条百分比(`percentage`)小于阈值时(`displayTextThreshold`)，进度条的内容将不会显示
 - 默认阈值是`0`，此时内容将始终显示
@@ -86,7 +86,7 @@
 </template>
 ```
 
-#### 阶段配置
+## 阶段配置
 
 ```html
 <script lang="ts" setup>
@@ -104,15 +104,7 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
-#### Slots
-
-| 插槽名    | 说明       | 插槽参数 | 支持版本 |
-| --------- | ---------- | -------- | -------- |
-| `default` | 进度条内容 | -        | -        |
-
 ---$
 {{fuyuwei}}

package/components/ste-progress/ste-progress.easycom.json

@@ -81,6 +81,10 @@
             "description": "阶段配置信息，该值存在时percentage将不生效",
             "type": "object",
             "default": "{}"
+        },
+        {
+            "name": "[slot]default",
+            "description": "进度条内容"
         }
     ]
 }

package/components/ste-qrcode/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `content` | 二维码内容 | `string` | - | - | - |
@@ -10,7 +12,9 @@
 | `foregroundImageHeight` | logo图高度，默认二维码尺寸的四分之一 | `string` | `size / 4` | - | - |
 
 
-#### Events
+### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
 | `loadImage` | 加载完成后返回条形码对应的图片数据 | `src`：图片数据 | - |
+
+

package/components/ste-qrcode/README.md

@@ -4,9 +4,9 @@
 
 ---$
 
-### 代码演示
+## 代码演示
 
-#### 基础使用
+## 基础使用
 
 ```html
 <template>
@@ -14,7 +14,7 @@
 </template>
 ```
 
-#### 自定义颜色
+## 自定义颜色
 
 ```html
 <template>
@@ -22,7 +22,7 @@
 </template>
 ```
 
-#### 带logo
+## 带logo
 
 ```html
 <template>
@@ -32,8 +32,6 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
 ---$

package/components/ste-qrcode/ste-qrcode.easycom.json

@@ -44,7 +44,6 @@
         {
             "name": "[event]loadImage",
             "description": "加载完成后返回条形码对应的图片数据",
-            "type": "(src:string r) => void",
             "params": [
                 {
                     "name": "src",
@@ -53,4 +52,4 @@
             ]
         }
     ]
-}
+}

package/components/ste-radio/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `v-model` | 当前值 | `string` | - | - | - |
@@ -18,8 +20,10 @@
 | `columnGap` | 单选框和文本间距，单位rpx | `number / string` | `16` | - | - |
 
 
-#### Events
+### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
 | `click` | 点击复选框时触发的事件 | `value`：当前复选框的绑定值<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
 | `change` | 当绑定值变化时触发的事件 | `value`：当前复选框的绑定值 | - |
+
+

package/components/ste-radio/README.md

@@ -6,9 +6,9 @@
 
 - 由于性能不如原生组件，若数据量较多时推荐使用虚拟列表的形式渲染或者直接使用原生组件
 
-### 代码演示
+## 代码演示
 
-#### 基础用法
+## 基础用法
 
 通过`v-model`绑定值当前选中项的 name 。
 
@@ -23,7 +23,7 @@
 </template>
 ```
 
-#### 禁用
+## 禁用
 
 通过设置 `disabled` 属性可以禁用单选框， 默认`false`。
 
@@ -38,7 +38,7 @@
 </template>
 ```
 
-#### 只读
+## 只读
 
 通过设置 `readonly` 属性可以禁用单选框，样式不置灰， 默认`false`。
 
@@ -53,7 +53,7 @@
 </template>
 ```
 
-#### 自定义形状
+## 自定义形状
 
 通过设置`shape`为`square`或者`circle`，将单选框设置为方形或者圆形，默认`circle`。
 
@@ -68,7 +68,7 @@
 </template>
 ```
 
-#### 自定义图标大小
+## 自定义图标大小
 
 通过设置 `iconSize` 属性可以自定义图标的大小，单位`rpx`，默认`36`。
 
@@ -83,7 +83,7 @@
 </template>
 ```
 
-#### 自定义图标颜色
+## 自定义图标颜色
 
 通过设置 `checkedColor` 属性可以自定义图标的颜色（填充色和边框色），默认`#0090FF`。
 
@@ -98,7 +98,7 @@
 </template>
 ```
 
-#### 自定义图标
+## 自定义图标
 
 通过 `icon` 插槽自定义图标，可以通过 `slotProps`下`checked`判断是否为选中状态，`disabled`判断是否为禁止状态，`readonly`判断是否为只读状态。
 
@@ -135,7 +135,7 @@
 </template>
 ```
 
-#### 左侧文本
+## 左侧文本
 
 将 `textPosition` 属性设置为 `left`，可以将文本位置调整到单选框左侧。
 
@@ -150,7 +150,7 @@
 </template>
 ```
 
-#### 自定义文本
+## 自定义文本
 
 - 通过设置 `textSize` 属性可以自定义文本的大小，单位`rpx`，默认`28`。
 - 通过设置 `textInactiveColor` 属性可以自定义文本未选中颜色，默认`#000000`。
@@ -163,7 +163,7 @@
 </template>
 ```
 
-#### 回调事件
+## 回调事件
 
 - `click` 点击单选框时触发的事件（可拦截change事件），`value`：改变后的分值,`allowStop`：允许阻止后续的事件触发,：`resolve`：后续的事件执行。
 - `change` 当绑定值变化时触发的事件，`value`:改变后的分值。
@@ -184,7 +184,7 @@
 </template>
 ```
 
-### 单选框组
+## 单选框组
 
 需要与`ste-radio-group`一起使用，通过`value`绑定在`ste-radio-group`，`value`即为选中的`ste-radio`的`name`属性设置的值。
 
@@ -202,7 +202,7 @@
 </template>
 ```
 
-### 单选框组属性和单选框属性
+## 单选框组属性和单选框属性
 
 属性优先级：`ste-radio`组件上配置的属性 > `ste-radio-group`组件上配置的属性 > `ste-radio`组件默认属性
 
@@ -220,7 +220,7 @@
 </template>
 ```
 
-### 水平排列
+## 水平排列
 
 将 `direction` 属性设置为 `row` 后，单选框组会变成水平排列。
 
@@ -240,11 +240,9 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
-#### RadioGroup 组件属性(Props)
+## RadioGroup 组件属性(Props)
 
 | 参数                | 说明                              | 类型            | 默认值    | 可选值                            | 支持版本  |
 | ------------------- | --------------------------------- | --------------- | --------- | --------------------------------- | --------- |
@@ -264,13 +262,13 @@
 | `marginRight`       | 右边距,单位rpx                    | `Number/String` | `0`       | -                                 | `v1.10.0` |
 | `columnGap`         | 单选框和文本间距，单位rpx         | `Number/String` | `16`      | -                                 | `v1.10.0` |
 
-#### RadioGroup Events
+## RadioGroup Events
 
 | 事件名   | 说明                     | 事件参数                | 支持版本 |
 | -------- | ------------------------ | ----------------------- | -------- |
 | `change` | 当绑定值变化时触发的事件 | `value`：改变后的绑定值 | -        |
 
-#### Radio Slots
+## Radio Slots
 
 | 插槽名    | 说明           | 插槽参数                                                     | 支持版本 |
 | --------- | -------------- | ------------------------------------------------------------ | -------- |

package/components/ste-radio/ste-radio.easycom.json

@@ -115,7 +115,6 @@
         {
             "name": "[event]click",
             "description": "点击复选框时触发的事件",
-            "type": "(value:string | number,suspend: ()=>void,next: ()=>void,stop: ()=>void) => void",
             "params": [
                 {
                     "name": "value",
@@ -138,7 +137,6 @@
         {
             "name": "[event]change",
             "description": "当绑定值变化时触发的事件",
-            "type": "(value: string | number) => void",
             "params": [
                 {
                     "name": "value",
@@ -147,4 +145,4 @@
             ]
         }
     ]
-}
+}

package/components/ste-radio/ste-radio.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { useSlots, computed, type CSSProperties } from 'vue';
+import { useSlots, computed, ref, watch, type CSSProperties } from 'vue';
 import { useColorStore } from '../../store/color';
 import utils from '../../utils/utils';
 import propsData, { RADIO_KEY, type RadioEmits } from './props';
 import type { RadioGroupProps } from '../ste-radio-group/props';
 import { useInject } from '../../utils/mixin';
 
-// 🚀 优化: 模块级别调用，所有实例共享
+// 🚀 模块级别调用，所有实例共享
 const { getColor } = useColorStore();
 const themeColor = getColor()?.steThemeColor || '#0090FF';
 
@@ -23,135 +23,157 @@ const slots = useSlots();
 
 const Parent = useInject<{ props: Required<RadioGroupProps>; updateValue: (value: string) => void }>(RADIO_KEY);
 
-const parentProps = computed(() => Parent?.parent?.props);
+// 🚀 优化: 使用 watch 而非 computed，避免频繁依赖追踪
+const parentData = ref<{ props: Required<RadioGroupProps>; updateValue: (value: string) => void } | null>(null);
+
+watch(
+    () => Parent?.parent,
+    newParent => {
+        parentData.value = newParent || null;
+    },
+    { immediate: true }
+);
+
+// 是否在 group 中
+const inGroup = computed(() => !!parentData.value);
+
+// ─── 各 prop 单独 computed，直接使用 parentData ──────────────────────────
+
+const cmpDisabled = computed(() => props.disabled ?? parentData.value?.props.disabled ?? false);
+const cmpReadonly = computed(() => props.readonly ?? parentData.value?.props.readonly ?? false);
+const cmpShape = computed(() => props.shape ?? parentData.value?.props.shape ?? 'circle');
+const cmpIconSize = computed(() => props.iconSize ?? parentData.value?.props.iconSize ?? 36);
+const cmpCheckedColor = computed(() => props.checkedColor ?? parentData.value?.props.checkedColor ?? themeColor);
+const cmpTextPosition = computed(() => props.textPosition ?? parentData.value?.props.textPosition ?? 'right');
+const cmpTextSize = computed(() => props.textSize ?? parentData.value?.props.textSize ?? 28);
+const cmpTextInactiveColor = computed(() => props.textInactiveColor ?? parentData.value?.props.textInactiveColor ?? '#000000');
+const cmpTextActiveColor = computed(() => props.textActiveColor ?? parentData.value?.props.textActiveColor ?? '#000000');
+const cmpTextDisabled = computed(() => props.textDisabled ?? parentData.value?.props.textDisabled ?? false);
+const cmpMarginLeft = computed(() => props.marginLeft ?? parentData.value?.props.marginLeft ?? '0');
+const cmpMarginRight = computed(() => props.marginRight ?? parentData.value?.props.marginRight ?? '0');
+const cmpColumnGap = computed(() => props.columnGap ?? parentData.value?.props.columnGap ?? '16');
+
+// ─── 选中状态 ───────────────────────────────────────────────────────────────
 
-// 🚀 优化: 只保留必要的 computed
 const cmpChecked = computed(() => {
-    return parentProps.value ? parentProps.value.modelValue == props.name : props.modelValue == props.name;
+    if (inGroup.value) {
+        return parentData.value!.props.modelValue == props.name;
+    }
+    return props.modelValue == props.name;
 });
 
-// 🚀 优化: 合并所有样式计算,直接调用 getDefaultData
-const cmpRootStyle = computed(() => {
-    const textSize = getDefaultData('textSize', 28);
-    const textPosition = getDefaultData('textPosition', 'right');
-    const readonly = getDefaultData('readonly', false);
-    const disabled = getDefaultData('disabled', false);
-    const textDisabled = getDefaultData('textDisabled', false);
+// ─── 根节点样式 ─────────────────────────────────────────────────────────────
 
+const cmpRootStyle = computed(() => {
     const style: CSSProperties = {
-        fontSize: `var(--font-size-${textSize},${utils.formatPx(textSize)})`,
-        color: cmpChecked.value ? getDefaultData('textActiveColor', '#000000') : getDefaultData('textInactiveColor', '#000000'),
-        flexDirection: textPosition === 'right' ? 'row' : 'row-reverse',
-        marginLeft: utils.formatPx(getDefaultData('marginLeft', '0')),
-        marginRight: utils.formatPx(getDefaultData('marginRight', '0')),
-        columnGap: utils.formatPx(getDefaultData('columnGap', '16')),
+        fontSize: `var(--font-size-${cmpTextSize.value},${utils.formatPx(cmpTextSize.value)})`,
+        color: cmpChecked.value ? cmpTextActiveColor.value : cmpTextInactiveColor.value,
+        flexDirection: cmpTextPosition.value === 'right' ? 'row' : 'row-reverse',
+        marginLeft: utils.formatPx(cmpMarginLeft.value),
+        marginRight: utils.formatPx(cmpMarginRight.value),
+        columnGap: slots.default ? utils.formatPx(cmpColumnGap.value) : '0',
     };
 
     // #ifdef H5
-    if (disabled || readonly) {
+    if (cmpDisabled.value || cmpReadonly.value) {
         style['cursor'] = 'not-allowed';
-    } else if (textDisabled) {
+    } else if (cmpTextDisabled.value) {
         style['cursor'] = 'default';
     } else {
         style['cursor'] = 'pointer';
     }
     // #endif
 
-    if (textDisabled) {
+    if (cmpTextDisabled.value) {
         style['pointerEvents'] = 'none';
     }
     return style;
 });
 
-const cmpInputStyle = computed(() => {
-    const shape = getDefaultData('shape', 'circle');
-    const iconSize = getDefaultData('iconSize', 36);
-    const checkedColor = getDefaultData('checkedColor', themeColor);
-    const readonly = getDefaultData('readonly', false);
-    const disabled = getDefaultData('disabled', false);
-    const checked = cmpChecked.value;
+// ─── 图标样式 ───────────────────────────────────────────────────────────────
 
+const cmpInputStyle = computed(() => {
     const style: CSSProperties = {
-        borderRadius: shape === 'circle' ? '50%' : '0',
-        border: `${utils.formatPx(2)} solid ${checked ? checkedColor : '#BBBBBB'}`,
-        background: checked ? checkedColor : '#FFFFFF',
-        width: `var(--font-size-${iconSize},${utils.formatPx(iconSize)})`,
-        height: `var(--font-size-${iconSize},${utils.formatPx(iconSize)})`,
-        lineHeight: `var(--font-size-${iconSize},${utils.formatPx(iconSize)})`,
+        borderRadius: cmpShape.value === 'circle' ? '50%' : '0',
+        border: `${utils.formatPx(2)} solid ${cmpChecked.value ? cmpCheckedColor.value : '#BBBBBB'}`,
+        background: cmpChecked.value ? cmpCheckedColor.value : '#FFFFFF',
+        width: `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`,
+        height: `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`,
+        lineHeight: `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`,
     };
 
     // #ifdef H5
-    style['cursor'] = disabled || readonly ? 'not-allowed' : 'pointer';
+    style['cursor'] = cmpDisabled.value || cmpReadonly.value ? 'not-allowed' : 'pointer';
     // #endif
 
-    if (disabled) {
+    if (cmpDisabled.value) {
         style['background'] = '#eeeeee';
         style['borderColor'] = '#bbbbbb';
     }
-
-    // 在没有使用插槽内容时去掉边距
-    if (!slots.default) {
-        style['columnGap'] = '0';
-    }
     return style;
 });
 
-// 🚀 优化: slotProps 也直接计算
+// ─── slotProps & icon props ─────────────────────────────────────────────────
+
 const cmpSlotProps = computed(() => ({
     checked: cmpChecked.value,
-    disabled: getDefaultData('disabled', false),
-    readonly: getDefaultData('readonly', false),
+    disabled: cmpDisabled.value,
+    readonly: cmpReadonly.value,
 }));
 
-// 🚀 优化: 缓存 ste-icon 需要的属性，避免模板中重复调用 getDefaultData
-const cmpIconProps = computed(() => {
-    const iconSize = getDefaultData('iconSize', 36);
-    const disabled = getDefaultData('disabled', false);
-    return {
-        size: iconSize * 0.8,
-        color: disabled ? '#bbbbbb' : '#fff',
-    };
-});
+const cmpIconProps = computed(() => ({
+    size: (cmpIconSize.value as number) * 0.8,
+    color: cmpDisabled.value ? '#bbbbbb' : '#fff',
+}));
 
-async function click() {
-    const readonly = getDefaultData('readonly', false);
-    const disabled = getDefaultData('disabled', false);
-
-    if (!disabled && !readonly) {
-        let next = true;
-        const stop = new Promise((resolve, reject) => {
-            emits(
-                'click',
-                props.modelValue,
-                () => (next = false),
-                () => resolve(props.modelValue),
-                () => reject()
-            );
-        });
-        if (!next) {
-            try {
-                await stop;
-            } catch (e) {
-                return;
-            }
-        }
+// ─── 点击处理 ───────────────────────────────────────────────────────────────
 
-        if (!cmpChecked.value) {
-            let value = String(props.name);
-            if (parentProps.value) {
-                Parent.parent?.updateValue(value);
-            } else {
-                emits('update:modelValue', value);
-            }
-            emits('change', value);
+// 🚀 优化: 移除 async，简化 Promise 处理
+function click() {
+    if (cmpDisabled.value || cmpReadonly.value) {
+        return;
+    }
+
+    let next = true;
+    const stop = new Promise<void>(resolve => {
+        emits(
+            'click',
+            props.modelValue,
+            () => (next = false),
+            () => resolve(),
+            () => {}
+        );
+    });
+
+    if (!next) {
+        stop.catch(() => {});
+        return;
+    }
+
+    if (!cmpChecked.value) {
+        let value = String(props.name);
+        if (inGroup.value) {
+            parentData.value!.updateValue(value);
+        } else {
+            emits('update:modelValue', value);
         }
+        emits('change', value);
     }
 }
 
+// ─── 工具函数（保留兼容）──────────────────────────────────────────────────────
+
 type PropsKeyType = keyof typeof props;
+/**
+ * 优先使用子组件自身 prop，否则读父组件 props，最后取默认值。
+ * 每个独立 computed 调用此函数，响应式系统会精准追踪对应字段。
+ */
 const getDefaultData = <T,>(key: PropsKeyType, defaultValue: T): T => {
     const value = props[key];
-    return value !== undefined && value !== '' ? (value as T) : defaultValue;
+    if (value !== undefined && value !== null && value !== '') return value as T;
+    const parentVal = parentProps.value?.[key as keyof RadioGroupProps];
+    if (parentVal !== undefined && parentVal !== null && (parentVal as any) !== '') return parentVal as T;
+    return defaultValue;
 };
 </script>
 
@@ -165,10 +187,12 @@ const getDefaultData = <T,>(key: PropsKeyType, defaultValue: T): T => {
             </slot>
         </view>
         <view class="text">
+            <!-- #ifndef MP -->
+            <slot :slotProps="cmpSlotProps"></slot>
+            <!-- #endif -->
             <!-- #ifdef MP -->
             <slot></slot>
             <!-- #endif -->
-            <slot :slotProps="cmpSlotProps"></slot>
         </view>
     </view>
 </template>

package/components/ste-rate/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `modelValue` | 当前评分数（支持v-model双向绑定） | `Number` | `0` | - | - |
@@ -15,7 +17,9 @@
 | `iconData` | 每个分值对应的图标code | `Array` | `() => []` | - | - |
 
 
-#### Events
+### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `change` | 当前分值变化时触发的事件 | - | - |
+| `change` | 当前分值变化时触发的事件 | `data`：() => void | - |
+
+