stellar-ui-plus 1.25.6 → 1.25.8

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

@@ -1,140 +1,138 @@
-{
-    "name": "ste-popup",
-    "description": "验证码输入",
-    "example": "<ste-popup v-model:show='show'></ste-popup>",
-    "tutorial": "https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui-plus&menu=%E7%BB%84%E4%BB%B6&active=ste-popup",
-    "attributes": [
-        {
-            "name": "show",
-            "description": "是否显示弹出层，使用v-model修饰符来双向绑定",
-            "type": "boolean",
-            "default": false
-        },
-        {
-            "name": "backgroundColor",
-            "description": "内容容器的背景色",
-            "type": "string",
-            "default": "#ffffff"
-        },
-        {
-            "name": "isMaskClick",
-            "description": "是否可以点击遮罩层关闭",
-            "type": "boolean",
-            "default": true
-        },
-        {
-            "name": "width",
-            "description": "内容区宽度",
-            "type": "string | number",
-            "default": "auto"
-        },
-        {
-            "name": "height",
-            "description": "内容区高度",
-            "type": "string | number",
-            "default": "auto"
-        },
-        {
-            "name": "position",
-            "description": "弹出位置",
-            "type": "string",
-            "values": [
-                {
-                    "name": "center",
-                    "description": "中"
-                },
-                {
-                    "name": "top",
-                    "description": "上"
-                },
-                {
-                    "name": "bottom",
-                    "description": "下"
-                },
-                {
-                    "name": "left",
-                    "description": "左"
-                },
-                {
-                    "name": "right",
-                    "description": "右"
-                }
-            ],
-            "default": "center"
-        },
-        {
-            "name": "round",
-            "description": "是否圆角",
-            "type": "boolean",
-            "default": false
-        },
-        {
-            "name": "showClose",
-            "description": "是否右上角显示关闭图标",
-            "type": "boolean",
-            "default": true
-        },
-        {
-            "name": "offsetX",
-            "description": "根据弹出位置，设置X轴偏移量，单位px 默认 0",
-            "type": "string | number "
-        },
-        {
-            "name": "offsetY",
-            "description": "根据弹出位置，设置Y轴偏移量，单位px 默认 0",
-            "type": "string | number"
-        },
-        {
-            "name": "duration",
-            "description": "动画持续时间，单位ms",
-            "type": "number",
-            "default": 200
-        },
-        {
-            "name": "zIndex",
-            "description": "弹窗层级z-index",
-            "type": "number",
-            "default": 998
-        },
-        {
-            "name": "keepContent",
-            "description": "隐藏后是否不销毁弹窗内容元素",
-            "type": "boolean",
-            "default": true
-        },
-        {
-            "name": "[event]close",
-            "description": "弹窗关闭动画执行完毕事件",
-            "params": [
-                {
-                    "name": "data",
-                    "description": "() => void"
-                }
-            ]
-        },
-        {
-            "name": "[event]open",
-            "description": "弹窗打开动画执行完毕事件",
-            "params": [
-                {
-                    "name": "data",
-                    "description": "() => void"
-                }
-            ]
-        },
-        {
-            "name": "[event]maskClick",
-            "description": "点击遮罩时触发",
-            "params": [
-                {
-                    "name": "data",
-                    "description": "() => void"
-                }
-            ]
-        },
-        {
-            "name": "[slot]default",
-            "description": "内容部分插槽"
-        }
-    ]
-}
+{
+    "name": "ste-popup",
+    "description": "验证码输入",
+    "example": "<ste-popup v-model:show='show'></ste-popup>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui-plus&menu=%E7%BB%84%E4%BB%B6&active=ste-popup",
+    "attributes": [
+        {
+            "name": "show",
+            "description": "是否显示弹出层，使用v-model修饰符来双向绑定",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "backgroundColor",
+            "description": "内容容器的背景色",
+            "type": "string",
+            "default": "#ffffff"
+        },
+        {
+            "name": "isMaskClick",
+            "description": "是否可以点击遮罩层关闭",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "width",
+            "description": "内容区宽度",
+            "type": "string | number",
+            "default": "auto"
+        },
+        {
+            "name": "height",
+            "description": "内容区高度",
+            "type": "string | number",
+            "default": "auto"
+        },
+        {
+            "name": "position",
+            "description": "弹出位置",
+            "type": "string",
+            "values": [
+                {
+                    "name": "center",
+                    "description": "中"
+                },
+                {
+                    "name": "top",
+                    "description": "上"
+                },
+                {
+                    "name": "bottom",
+                    "description": "下"
+                },
+                {
+                    "name": "left",
+                    "description": "左"
+                },
+                {
+                    "name": "right",
+                    "description": "右"
+                }
+            ],
+            "default": "center"
+        },
+        {
+            "name": "round",
+            "description": "是否圆角",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "showClose",
+            "description": "是否右上角显示关闭图标",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "offsetX",
+            "description": "根据弹出位置，设置X轴偏移量，单位px 默认 0",
+            "type": "string | number "
+        },
+        {
+            "name": "offsetY",
+            "description": "根据弹出位置，设置Y轴偏移量，单位px 默认 0",
+            "type": "string | number"
+        },
+        {
+            "name": "duration",
+            "description": "动画持续时间，单位ms",
+            "type": "number",
+            "default": 200
+        },
+        {
+            "name": "zIndex",
+            "description": "弹窗层级z-index",
+            "type": "number",
+            "default": 998
+        },
+        {
+            "name": "keepContent",
+            "description": "隐藏后是否不销毁弹窗内容元素",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "[event]close",
+            "description": "弹窗关闭前触发，可用于异步拦截关闭",
+            "params": [
+                {
+                    "name": "suspend",
+                    "description": "开启等待的回调函数"
+                },
+                {
+                    "name": "next",
+                    "description": "执行后续关闭操作的回调函数"
+                },
+                {
+                    "name": "stop",
+                    "description": "阻止后续关闭操作的回调函数"
+                }
+            ]
+        },
+        {
+            "name": "[event]open-after",
+            "description": "弹窗打开动画执行完毕事件",
+            "params": []
+        },
+        {
+            "name": "[event]clickMask",
+            "description": "点击遮罩时触发",
+            "params": []
+        },
+        {
+            "name": "[slot]default",
+            "description": "内容部分插槽"
+        }
+    ]
+}

package/components/ste-popup/ste-popup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, type CSSProperties } from 'vue';
+import { ref, computed, watch, onUnmounted, type CSSProperties } from 'vue';
 import propsData from './props';
 import utils from '../../utils/utils';
 const DEFAULT_BORDER_RADIUS = 32;
@@ -13,12 +13,15 @@ defineOptions({
     },
 });
 
-const animationProp: UniApp.CreateAnimationOptions = { duration: props.duration, timingFunction: 'ease-out' };
+const animationProp = computed<UniApp.CreateAnimationOptions>(() => ({ duration: props.duration, timingFunction: 'ease-out' }));
 const pageDisplay = ref('none');
 const overlayAnimationData = ref<UniApp.Animation>();
 const animationData = ref<UniApp.Animation>();
 const showContent = ref(false);
 
+let beginTimer: ReturnType<typeof setTimeout> | null = null;
+let endTimer: ReturnType<typeof setTimeout> | null = null;
+
 const emits = defineEmits<{
     (e: 'clickMask'): void;
     (e: 'close', suspend: () => void, next: () => void, stop: () => void): void;
@@ -48,14 +51,6 @@ const cmpContentStyle = computed(() => {
         height: utils.addUnit(props.height),
         backgroundColor: props.backgroundColor,
     };
-
-    if (props.position === 'center') {
-    } else if (props.position === 'bottom') {
-    } else if (props.position === 'top') {
-    } else if (props.position === 'left') {
-    } else if (props.position === 'right') {
-    }
-
     return style;
 });
 
@@ -108,8 +103,8 @@ async function beginAnimation() {
 
     pageDisplay.value = 'flex';
     await utils.sleep(50);
-    let animation = uni.createAnimation(animationProp);
-    let overlayAnimation = uni.createAnimation(animationProp);
+    let animation = uni.createAnimation(animationProp.value);
+    let overlayAnimation = uni.createAnimation(animationProp.value);
     overlayAnimation.opacity(1).step({
         duration: props.duration,
     });
@@ -128,15 +123,16 @@ async function beginAnimation() {
     overlayAnimationData.value = overlayAnimation.export();
     animationData.value = animation.export();
 
-    setTimeout(() => {
+    if (beginTimer) clearTimeout(beginTimer);
+    beginTimer = setTimeout(() => {
         showContent.value = true;
         emits('open-after');
     }, props.duration);
 }
 
 function endAnimation() {
-    let animation = uni.createAnimation(animationProp);
-    let overlayAnimation = uni.createAnimation(animationProp);
+    let animation = uni.createAnimation(animationProp.value);
+    let overlayAnimation = uni.createAnimation(animationProp.value);
     overlayAnimation.opacity(0).step();
 
     if (props.position === 'center') {
@@ -150,23 +146,24 @@ function endAnimation() {
     overlayAnimationData.value = overlayAnimation.export();
     animationData.value = animation.export();
 
-    setTimeout(() => {
+    if (endTimer) clearTimeout(endTimer);
+    endTimer = setTimeout(() => {
         pageDisplay.value = 'none';
         showContent.value = false;
     }, props.duration);
 }
 
-function touchmove(e: TouchEvent) {
-    // TODO nvue 取消冒泡
-    e.stopPropagation();
-}
+onUnmounted(() => {
+    if (beginTimer) clearTimeout(beginTimer);
+    if (endTimer) clearTimeout(endTimer);
+});
 </script>
 
 <template>
     <view class="ste-popup" :class="position" :style="[cmpPageStyle]" @click.stop="onMaskClick" :animation="overlayAnimationData" data-test="popup">
         <view class="content" :class="position" :style="[cmpContentStyle]" :animation="animationData" @click.stop>
             <template v-if="keepContent || showContent">
-                <scroll-view style="width: 100%; height: 100%" v-if="Number(height) > 0" :scroll-y="true" @touchmove.stop.prevent="touchmove">
+                <scroll-view style="width: 100%; height: 100%" v-if="Number(height) > 0" :scroll-y="true" @touchmove.stop.prevent>
                     <slot name="default"></slot>
                 </scroll-view>
                 <slot v-else name="default"></slot>
@@ -176,7 +173,7 @@ function touchmove(e: TouchEvent) {
             </view>
         </view>
         <view class="close-icon-box-center" @click="handleClose" v-if="showClose && position == 'center' && showContent">
-            <ste-icon code="&#xe6a0;" :size="40" color="'#fff'"></ste-icon>
+            <ste-icon code="&#xe6a0;" :size="40" :color="'#fff'"></ste-icon>
         </view>
     </view>
 </template>
@@ -189,7 +186,6 @@ function touchmove(e: TouchEvent) {
     position: fixed;
     left: 0;
     top: 0;
-    overflow: hidden;
     justify-content: center;
     align-items: center;
     touch-action: none;

package/components/ste-radio/ATTRIBUTES.md

@@ -23,7 +23,7 @@
 ### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `click` | 点击复选框时触发的事件 | `value`：当前复选框的绑定值<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
-| `change` | 当绑定值变化时触发的事件 | `value`：当前复选框的绑定值 | - |
+| `click` | 点击单选框时触发的事件 | `value`：当前单选框的绑定值<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
+| `change` | 当绑定值变化时触发的事件 | `value`：当前单选框的绑定值 | - |
 
 

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

@@ -1,7 +1,7 @@
 {
     "name": "ste-radio",
     "description": "单选框组件, 在一组备选项中进行单选。",
-    "example": "<ste-checkbox>单选框</ste-checkbox>",
+    "example": "<ste-radio>单选框</ste-radio>",
     "tutorial": "https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui-plus&menu=%E7%BB%84%E4%BB%B6&active=ste-radio",
     "attributes": [
         {
@@ -114,11 +114,11 @@
         },
         {
             "name": "[event]click",
-            "description": "点击复选框时触发的事件",
+            "description": "点击单选框时触发的事件",
             "params": [
                 {
                     "name": "value",
-                    "description": "当前复选框的绑定值"
+                    "description": "当前单选框的绑定值"
                 },
                 {
                     "name": "suspend",
@@ -140,7 +140,7 @@
             "params": [
                 {
                     "name": "value",
-                    "description": "当前复选框的绑定值"
+                    "description": "当前单选框的绑定值"
                 }
             ]
         }

package/components/ste-select/README.md

@@ -312,12 +312,6 @@
 
 ---$
 
-## API
-
-## Props
-
-背景之外的颜色属性只支持`16进制`、`RGB`、`RGBA`格式
-
 <!-- props -->
 
 ---$

package/components/ste-select-order/README.md

@@ -0,0 +1,61 @@
+# SelectOrder 订单选择
+
+- 用于选择订单的下拉选择组件
+
+---$
+
+## 使用示例
+
+## 基础用法
+
+- 属性`list`接收一个数组，数组中的每一项为一个对象，对象中包含`label`和`value`两个属性，分别表示节点的显示文本和节点的值
+    - 若`label`和`value`属性字段名不同，可通过`labelKey`和`valueKey`属性进行设置
+- 属性`modelValue`接收一个值，表示当前选中的节点值，支持v-model双向绑定
+- 事件`change`在节点值改变时触发，返回当前选中的值和选项对象
+
+```html
+<template>
+    <ste-select-order :list="list" v-model="value" @change="onChange"></ste-select-order>
+</template>
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    const value = ref(null);
+    const list = ref([
+        { label: '全部订单', value: 'all' },
+        { label: '待付款', value: 'pending' },
+        { label: '待发货', value: 'unshipped' },
+        { label: '待收货', value: 'unreceived' },
+        { label: '已完成', value: 'completed' },
+    ]);
+
+    function onChange(val, option) {
+        console.log(val, option);
+    }
+</script>
+```
+
+## 禁用状态
+
+- 属性`disabled`设置为`true`时，组件将被禁用
+
+```html
+<template>
+    <ste-select-order :list="list" v-model="value" disabled></ste-select-order>
+</template>
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    const value = ref(null);
+    const list = ref([
+        { label: '全部订单', value: 'all' },
+        { label: '待付款', value: 'pending' },
+        { label: '待发货', value: 'unshipped' },
+    ]);
+</script>
+```
+
+---$
+
+<!-- props -->
+
+---$
+{{xuyajun}}

package/components/ste-select-order/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "业务组件",
+    "title": "SelectOrder 订单选择",
+    "icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/progress.png"
+}

package/components/ste-select-order/props.ts

@@ -0,0 +1,30 @@
+import type { PropType } from 'vue';
+
+export interface SelectOption {
+    label?: string;
+    value: string | number;
+    disabled?: boolean;
+    [key: string]: any;
+}
+
+export type SelectValue = string | number | null | undefined;
+
+export interface SteSelectOrderProps {
+    modelValue: SelectValue;
+    list: SelectOption[];
+    placeholder: string;
+    labelKey: string;
+    valueKey: string;
+    disabled: boolean;
+    maskClose: boolean;
+}
+
+export default {
+    modelValue: { type: [String, Number, null, undefined] as PropType<SelectValue>, default: undefined },
+    list: { type: Array as PropType<SelectOption[]>, default: () => [] },
+    placeholder: { type: String, default: '请选择' },
+    labelKey: { type: String, default: 'label' },
+    valueKey: { type: String, default: 'value' },
+    disabled: { type: Boolean, default: false },
+    maskClose: { type: Boolean, default: true },
+};

package/components/ste-select-order/ste-select-order.easycom.json

@@ -0,0 +1,73 @@
+{
+    "name": "ste-select-order",
+    "description": "订单选择",
+    "example": "<ste-select-order />",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui-plus&menu=%E7%BB%84%E4%BB%B6&active=ste-select-order",
+    "attributes": [
+        {
+            "name": "modelValue",
+            "description": "绑定的值，支持v-model双向绑定",
+            "type": "string | number | null | undefined"
+        },
+        {
+            "name": "list",
+            "description": "选项数据，每个选项支持 disabled 属性设置单项禁止选择",
+            "type": "SelectOption[]",
+            "default": []
+        },
+        {
+            "name": "placeholder",
+            "description": "占位符",
+            "type": "string",
+            "default": "请选择"
+        },
+        {
+            "name": "labelKey",
+            "description": "选项标签Key",
+            "type": "string",
+            "default": "label"
+        },
+        {
+            "name": "valueKey",
+            "description": "选项值Key",
+            "type": "string",
+            "default": "value"
+        },
+        {
+            "name": "disabled",
+            "description": "禁用状态",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "maskClose",
+            "description": "点击遮罩层是否关闭弹窗",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "[event]update:modelValue",
+            "description": "选中值改变时触发",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "选中的值"
+                }
+            ]
+        },
+        {
+            "name": "[event]change",
+            "description": "选中值改变时触发",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "选中的值"
+                },
+                {
+                    "name": "option",
+                    "description": "选中的选项对象"
+                }
+            ]
+        }
+    ]
+}