stellar-ui-plus 1.25.1 → 1.25.2

package/components/ste-checkbox/README.md

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

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

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

package/components/ste-checkbox/ste-checkbox.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useSlots, computed, ref, nextTick, onMounted, onUnmounted, type CSSProperties } from 'vue';
+import { useSlots, computed, ref, watch, onMounted, onUnmounted, type CSSProperties } from 'vue';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 import utils from '../../utils/utils';
@@ -25,77 +25,95 @@ const Parent = useInject<{
     registerChild: () => number;
     unregisterChild: () => void;
 }>(CHECKBOX_KEY);
-const parentProps = computed(() => Parent?.parent?.props);
+
+// 🚀 优化: 使用 watch 而非 computed，避免频繁依赖追踪
+const parentData = ref<{
+    props: Required<CheckboxGroupProps>;
+    updateValue: (value: any[]) => void;
+    registerChild: () => number;
+    unregisterChild: () => void;
+} | null>(null);
+
+watch(
+    () => Parent?.parent,
+    newParent => {
+        parentData.value = newParent || null;
+    },
+    { immediate: true }
+);
 
 // 记录当前组件在 group 中的索引
 const childIndex = ref<number>(-1);
 
 onMounted(() => {
-    if (Parent?.parent?.registerChild) {
-        childIndex.value = Parent.parent.registerChild();
+    if (parentData.value?.registerChild) {
+        childIndex.value = parentData.value.registerChild();
     }
 });
 
 onUnmounted(() => {
-    if (Parent?.parent?.unregisterChild) {
-        Parent.parent.unregisterChild();
+    if (parentData.value?.unregisterChild) {
+        parentData.value.unregisterChild();
     }
 });
 
-// 🚀 优化: 缓存 themeColor,避免每次调用 getColor()
+// 🚀 优化: 缓存 themeColor
 const themeColor = getColor().steThemeColor;
 
 // 强制更新选中状态
-let num = ref(1);
+const num = ref(1);
+
+// 是否在 group 中
+const inGroup = computed(() => !!parentData.value);
 
-// 🚀 优化: 只保留必要的 computed
+// 🚀 优化: 只保留必要的 computed，直接使用 parentData.value
 const cmpChecked = computed(() => {
-    let v = num.value && parentProps.value ? parentProps.value.modelValue.includes(props.name) : props.modelValue;
-    return v;
+    if (inGroup.value) {
+        return num.value > 0 && parentData.value!.props.modelValue.includes(props.name);
+    }
+    return props.modelValue;
 });
 
 const cmpDisabled = computed(() => {
-    let disabled = getDefaultData('disabled', false);
+    let disabled = props.disabled ?? parentData.value?.props.disabled ?? false;
     // 限制最大可选数
-    if (parentProps.value && parentProps.value.max) {
-        if (!cmpChecked.value && parentProps.value.modelValue.length >= parentProps.value.max) {
+    if (inGroup.value && parentData.value!.props.max > 0) {
+        if (!cmpChecked.value && parentData.value!.props.modelValue.length >= parentData.value!.props.max) {
             disabled = true;
         }
     }
     return disabled;
 });
 
-// 🚀 优化: 合并所有样式计算,直接调用 getDefaultData
+// 🚀 优化: 合并所有样式计算
 const cmpRootStyle = computed(() => {
-    const textSize = getDefaultData('textSize', 28);
-    const textPosition = getDefaultData('textPosition', 'right');
-    const readonly = getDefaultData('readonly', false);
-    const textDisabled = getDefaultData('textDisabled', false);
+    const textSize = props.textSize ?? parentData.value?.props.textSize ?? 28;
+    const textPosition = props.textPosition ?? parentData.value?.props.textPosition ?? 'right';
+    const readonly = props.readonly ?? parentData.value?.props.readonly ?? false;
+    const textDisabled = props.textDisabled ?? parentData.value?.props.textDisabled ?? false;
 
-    let marginLeft = getDefaultData('marginLeft', '0');
-    let marginRight = getDefaultData('marginRight', '0');
+    let marginLeft = props.marginLeft ?? parentData.value?.props.marginLeft ?? '0';
+    let marginRight = props.marginRight ?? parentData.value?.props.marginRight ?? '0';
 
     // 如果在 checkbox-group 中，并且不是第一个元素，自动应用间距
-    if (parentProps.value && childIndex.value > 0 && marginLeft === '0') {
-        const direction = parentProps.value.direction || 'column';
-
+    if (inGroup.value && childIndex.value > 0 && marginLeft === '0') {
+        const direction = parentData.value!.props.direction || 'column';
         if (direction === 'row') {
-            // 横向排列时，设置左间距 16rpx
             marginLeft = '16';
         }
     }
 
     const style: CSSProperties = {
         fontSize: `var(--font-size-${textSize},${utils.formatPx(textSize)})`,
-        color: cmpChecked.value ? getDefaultData('textActiveColor', '#000000') : getDefaultData('textInactiveColor', '#000000'),
+        color: cmpChecked.value ? (props.textActiveColor ?? parentData.value?.props.textActiveColor ?? '#000000') : (props.textInactiveColor ?? parentData.value?.props.textInactiveColor ?? '#000000'),
         flexDirection: textPosition === 'right' ? 'row' : 'row-reverse',
         marginLeft: utils.formatPx(marginLeft),
         marginRight: utils.formatPx(marginRight),
     };
 
     // 纵向排列时，设置上间距 16rpx
-    if (parentProps.value && childIndex.value > 0) {
-        const direction = parentProps.value.direction || 'column';
+    if (inGroup.value && childIndex.value > 0) {
+        const direction = parentData.value!.props.direction || 'column';
         if (direction === 'column') {
             style.marginTop = '16rpx';
         }
@@ -119,16 +137,17 @@ const cmpRootStyle = computed(() => {
 });
 
 const cmpIconStyle = computed(() => {
+    const columnGap = props.columnGap ?? parentData.value?.props.columnGap ?? '16';
     return {
-        marginRight: utils.formatPx(getDefaultData('columnGap', '16')),
+        marginRight: utils.formatPx(columnGap),
     } as CSSProperties;
 });
 
 const cmpInputStyle = computed(() => {
-    const shape = getDefaultData('shape', 'circle');
-    const iconSize = getDefaultData('iconSize', 36);
-    const checkedColor = getDefaultData('checkedColor', themeColor);
-    const readonly = getDefaultData('readonly', false);
+    const shape = props.shape ?? parentData.value?.props.shape ?? 'circle';
+    const iconSize = props.iconSize ?? parentData.value?.props.iconSize ?? 36;
+    const checkedColor = props.checkedColor ?? parentData.value?.props.checkedColor ?? themeColor;
+    const readonly = props.readonly ?? parentData.value?.props.readonly ?? false;
     const checked = cmpChecked.value;
 
     const style: CSSProperties = {
@@ -161,7 +180,7 @@ const cmpInputStyle = computed(() => {
 const cmpSlotProps = computed(() => ({
     checked: cmpChecked.value,
     disabled: cmpDisabled.value,
-    readonly: getDefaultData('readonly', false),
+    readonly: props.readonly ?? parentData.value?.props.readonly ?? false,
 }));
 
 const cmpIconMargin = computed(() => {
@@ -174,41 +193,9 @@ const cmpIconMargin = computed(() => {
     // #endif
 });
 
-// 批处理更新相关
-const isBatchUpdating = ref(false);
-const pendingUpdate = ref(false);
-
-// 批处理更新函数
-const batchedUpdate = async (updateFn: () => Promise<void>) => {
-    if (isBatchUpdating.value) {
-        pendingUpdate.value = true;
-        return;
-    }
-
-    isBatchUpdating.value = true;
-
-    try {
-        await updateFn();
-    } finally {
-        await nextTick();
-        isBatchUpdating.value = false;
-
-        // 处理待处理的更新
-        if (pendingUpdate.value) {
-            pendingUpdate.value = false;
-            // 如果有待处理的更新，延迟一帧再处理
-            requestAnimationFrame(() => {
-                if (!isBatchUpdating.value) {
-                    handleClick();
-                }
-            });
-        }
-    }
-};
-
-// 实际的点击处理逻辑
-const handleClick = async () => {
-    const readonly = getDefaultData('readonly', false);
+// 🚀 优化: 简化点击处理，移除 batchedUpdate 和不必要的 async/await
+const handleClick = () => {
+    const readonly = props.readonly ?? parentData.value?.props.readonly ?? false;
 
     if (cmpDisabled.value || readonly) {
         return;
@@ -226,23 +213,20 @@ const handleClick = async () => {
     });
 
     if (!next) {
-        try {
-            await stop;
-        } catch (e) {
-            return;
-        }
+        stop.catch(() => {});
+        return;
     }
 
     let value: boolean | any[];
-    if (parentProps.value) {
+    if (inGroup.value) {
         // 使用浅拷贝避免直接修改原数组
-        value = [...parentProps.value.modelValue];
+        value = [...parentData.value!.props.modelValue];
         if (cmpChecked.value) {
             value = value.filter(v => v !== props.name);
         } else {
             value.push(props.name);
         }
-        Parent.parent?.updateValue(value);
+        parentData.value!.updateValue(value);
         num.value++;
     } else {
         value = !cmpChecked.value;
@@ -252,14 +236,21 @@ const handleClick = async () => {
 };
 
 const click = () => {
-    batchedUpdate(handleClick);
+    handleClick();
 };
 
+// 获取配置值的快捷方法（保留兼容）
 type PropsKeyType = keyof typeof props;
 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 = parentData.value?.props[key as keyof typeof props];
+    if (parentVal !== undefined && parentVal !== null && parentVal !== '') return parentVal as T;
+    return defaultValue;
 };
+
+// 图标大小（用于模板中）
+const iconSize = computed(() => props.iconSize ?? parentData.value?.props.iconSize ?? 36);
 </script>
 
 <template>
@@ -267,7 +258,7 @@ const getDefaultData = <T,>(key: PropsKeyType, defaultValue: T): T => {
         <view class="icon" :style="[cmpIconStyle]">
             <slot name="icon" :slotProps="cmpSlotProps">
                 <view class="input-icon" :style="[cmpInputStyle]">
-                    <ste-icon v-if="cmpChecked" :size="getDefaultData('iconSize', 36) * 0.8" code="&#xe67a;" :color="cmpDisabled ? '#bbbbbb' : '#fff'" bold :marginBottom="cmpIconMargin" />
+                    <ste-icon v-if="cmpChecked" :size="iconSize * 0.8" code="&#xe67a;" :color="cmpDisabled ? '#bbbbbb' : '#fff'" bold :marginBottom="cmpIconMargin" />
                 </view>
             </slot>
         </view>

package/components/ste-code-input/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `value` | 初始内容，支持双向绑定 | `string / number` | - | - | - |
@@ -15,8 +17,10 @@
 | `readOnly` | 是否只读 | `boolean` | `false` | - | - |
 
 
-#### Events
+### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `change` | 改变时触发 | - | - |
-| `finish` | 输入完成触发 | - | - |
+| `change` | 改变时触发 | `data`：(value: string / number) => void | - |
+| `finish` | 输入完成触发 | `data`：(value: string / number) => void | - |
+
+

package/components/ste-code-input/README.md

@@ -4,9 +4,9 @@
 
 ---$
 
-### 代码演示
+## 代码演示
 
-#### 基础使用
+## 基础使用
 
 ```html
 <template>
@@ -15,7 +15,7 @@
 </template>
 ```
 
-#### 横线模式
+## 横线模式
 
 ```html
 <template>
@@ -23,7 +23,7 @@
 </template>
 ```
 
-#### 设置长度
+## 设置长度
 
 ```html
 <template>
@@ -31,7 +31,7 @@
 </template>
 ```
 
-#### 设置间距
+## 设置间距
 
 ```html
 <template>
@@ -39,7 +39,7 @@
 </template>
 ```
 
-#### 调整颜色
+## 调整颜色
 
 ```html
 <template>
@@ -48,7 +48,7 @@
 </template>
 ```
 
-#### 自定义显示
+## 自定义显示
 
 ```html
 <template>
@@ -59,8 +59,6 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
 ---$

package/components/ste-code-input/ste-code-input.easycom.json

@@ -37,7 +37,6 @@
             "type": "string | number",
             "default": 16
         },
-
         {
             "name": "fontColor",
             "description": "字体颜色",
@@ -88,12 +87,22 @@
         {
             "name": "[event]change",
             "description": "改变时触发",
-            "type": "(value: string | number) => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "(value: string | number) => void"
+                }
+            ]
         },
         {
             "name": "[event]finish",
             "description": "输入完成触发",
-            "type": "(value: string | number) => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "(value: string | number) => void"
+                }
+            ]
         }
     ]
-}
+}

package/components/ste-column-chart/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `width` | 图表宽度，单位rpx | `number / string` | `750` | - | - |

package/components/ste-column-chart/README.md

@@ -3,9 +3,9 @@
 柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型
 ---$
 
-### 代码演示
+## 代码演示
 
-#### 默认配置
+## 默认配置
 
 ```html
 <template>
@@ -26,7 +26,7 @@
 </script>
 ```
 
-#### 多图例
+## 多图例
 
 ```html
 <template>
@@ -51,7 +51,7 @@
 </script>
 ```
 
-#### 堆叠
+## 堆叠
 
 ```html
 <template>
@@ -78,7 +78,7 @@
 </script>
 ```
 
-#### 迷你图表
+## 迷你图表
 
 ```html
 <template>
@@ -109,8 +109,6 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
 ---$

package/components/ste-comment/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `tags` | 标签数组 | `string[]` | `[]` | - | - |

package/components/ste-comment/README.md

@@ -4,7 +4,7 @@
 
 ---$
 
-### 基础用法
+## 基础用法
 
 - 属性`tags`用于接收顶部标签列表，默认值`[]`
 - 属性`total`用于接收评论总数，默认值`0`
@@ -42,11 +42,9 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
-#### CommentType
+## CommentType
 
 | 属性         | 说明         | 类型       |
 | ------------ | ------------ | ---------- |

package/components/ste-coupon-list/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `data` | 基础数据 | `{title: string;desc?: string;image: string;price: string / number;constraint?: string;footers?: string[]}` | `{}` | - | - |
@@ -10,9 +12,17 @@
 | `backgroundColor` | 背景颜色 | `string` | `#fff` | - | - |
 
 
-#### Events
+### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `buttonClick` | 点击按钮时触发 | - | - |
-| `footerClick` | 点击页脚列表时触发 | - | - |
-| `countDown` | 倒计时触发 | - | - |
+| `buttonClick` | 点击按钮时触发 | `data`：() => void | - |
+| `footerClick` | 点击页脚列表时触发 | `data`：(index:number) => void | - |
+| `countDown` | 倒计时触发 | `data`：(data:any,time:number) => void | - |
+
+
+### Slots
+| 插槽名 | 说明  | 参数 | 支持版本 |
+| ----- | ----- | --- | -------- |
+| `position` | 在任意位置插入内容 | - | - |
+
+