stellar-ui-plus 1.25.7 → 1.25.9

package/components/ste-dropdown-menu/README.md

@@ -177,10 +177,195 @@
             }
 
             .action-box {
-                padding: 0 40rpx;
+                padding: 0 40rpx 20rpx 40rpx;
                 display: flex;
                 justify-content: space-between;
+            }
+        }
+    }
+</style>
+```
+
+## 单据类型筛选
+
+此示例展示了如何实现一个单据类型筛选菜单，包含左侧分类选择、右侧输入框和子选项选择。
+
+```html
+<script lang="ts" setup>
+    import type { RefDropdownMenu } from 'stellar-ui-plus/types/refComponents';
+    import { computed, reactive, ref } from 'vue';
+
+    const orderMenus = [
+        {
+            label: '单据类型1',
+            value: '1',
+            children: [
+                { label: '类型1A', value: '1-1' },
+                { label: '类型1B', value: '1-2' },
+                { label: '类型1C', value: '1-3' },
+                { label: '类型1D', value: '1-4' },
+            ],
+        },
+        {
+            label: '单据类型2',
+            value: '2',
+            children: [
+                { label: '类型2A', value: '2-1' },
+                { label: '类型2B', value: '2-2' },
+                { label: '类型2C', value: '2-3' },
+                { label: '类型2D', value: '2-4' },
+            ],
+        },
+    ];
+
+    const orderData = reactive({
+        parent: '1',
+        type: '1-1',
+        code: '',
+    });
+
+    const orderChildren = computed(() => orderMenus.find(item => item.value == orderData.parent)?.children || []);
+
+    const setOrder = (key: keyof typeof orderData, v: string) => {
+        orderData[key] = v;
+        if (key == 'parent') {
+            const children = orderMenus.find(item => item.value == v)?.children || [];
+            orderData.type = children[0]?.value || '';
+        }
+    };
+
+    const orderMenuRef = ref<RefDropdownMenu>();
+    function confirmOrderMenu() {
+        uni.showToast({
+            title: `确认订单 parent:${orderData.parent}, type:${orderData.type}, code:${orderData.code}`,
+            icon: 'none',
+        });
+        orderMenuRef.value?.close();
+    }
+</script>
+<template>
+    <view class="menu-item">
+        <view>
+            <ste-dropdown-menu value="2" title="单据类型" ref="orderMenuRef">
+                <view class="order-menu-box">
+                    <view class="content-box">
+                        <view class="content-left">
+                            <view v-for="(m, i) in orderMenus" :key="i" class="left-menu-item" :class="orderData.parent == m.value ? 'active' : ''" @click="setOrder('parent', m.value)">
+                                {{ m.label }}
+                            </view>
+                        </view>
+                        <view class="content-right">
+                            <view class="right-codes">
+                                <view class="content-title">订单尾号</view>
+                                <ste-input style="width: 356rpx" placeholder="请输入订单最后5位" v-model="orderData.code" background="#f5f5f5"></ste-input>
+                            </view>
+                            <view class="right-types">
+                                <view class="content-title">单据类型</view>
+                                <view class="right-menus">
+                                    <view v-for="(m, i) in orderChildren" :key="i" class="right-menu-item" :class="orderData.type == m.value ? 'active' : ''" @click="setOrder('type', m.value)">
+                                        {{ m.label }}
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="action-box">
+                        <ste-button width="320" background="rgba(0,0,0,0)" borderColor="#0090FF" color="#0090FF" @click="confirmOrderMenu">重置</ste-button>
+                        <ste-button width="320" @click="confirmOrderMenu">确认</ste-button>
+                    </view>
+                </view>
+            </ste-dropdown-menu>
+        </view>
+    </view>
+</template>
+<style lang="scss">
+    .menu-item {
+        display: flex;
+        padding: 0 20rpx;
+        width: 100%;
+        box-shadow: 0 0 10px #ddd;
+        > view {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .order-menu-box {
+            background-color: #fff;
+            padding-top: 24rpx;
+            border-top: solid 4rpx #f5f5f5;
 
+            .content-box {
+                width: 100%;
+                display: flex;
+                margin-bottom: 56rpx;
+                font-size: 28rpx;
+
+                .content-left {
+                    width: 150rpx;
+                    background-color: #f9f9f9;
+
+                    .left-menu-item {
+                        height: 90rpx;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 24rpx;
+                        color: #a4a4a4;
+
+                        &.active {
+                            background-color: #fff;
+                            color: #0090ff;
+                        }
+                    }
+                }
+
+                .content-right {
+                    flex: 1;
+                    margin-left: 26rpx;
+                    margin-right: 18rpx;
+                    background-color: #fff;
+
+                    .content-title {
+                        height: 90rpx;
+                        display: flex;
+                        align-items: center;
+                        font-size: 24rpx;
+                        color: #1c1f23;
+                    }
+
+                    .right-types {
+                        .right-menus {
+                            display: flex;
+                            flex-wrap: wrap;
+                            align-items: center;
+                            gap: 20rpx;
+
+                            .right-menu-item {
+                                width: 162rpx;
+                                height: 64rpx;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                background: #f9f9f9;
+                                border-radius: 8rpx;
+
+                                &.active {
+                                    background-color: #0090ff;
+                                    font-weight: bold;
+                                    color: #fff;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .action-box {
+                padding: 0 40rpx;
+                display: flex;
+                justify-content: space-between;
                 padding-bottom: 20rpx;
             }
         }

package/components/ste-dropdown-menu/ste-dropdown-menu.scss

@@ -1,14 +1,17 @@
 .ste-dropdown-menu-root {
     .menu-box {
         padding: 20rpx 0;
+
         .menu-title-icon {
             display: inline-flex;
             transition: all var(--duration) linear;
         }
+
         .title {
             font-size: var(--font-size-24, 24rpx);
             margin-right: 16rpx;
         }
+
         display: flex;
         align-items: center;
     }
@@ -59,6 +62,7 @@
         .menu-title-icon {
             transform: rotate(180deg);
         }
+
         .dropdown-content {
             opacity: 1;
             z-index: var(--menu-z-index);
@@ -73,6 +77,7 @@
         .menu-title-icon {
             transform: rotate(180deg);
         }
+
         .dropdown-content {
             display: flex;
             flex-direction: column;
@@ -82,10 +87,12 @@
                 transform: translateY(100%);
             }
         }
+
         &.open {
             .menu-title-icon {
                 transform: rotate(0);
             }
+
             .menu-item-content {
                 transform: translateY(0);
             }
@@ -96,4 +103,4 @@
             }
         }
     }
-}
+}

package/components/ste-popup/ATTRIBUTES.md

@@ -21,9 +21,9 @@
 ### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `close` | 弹窗关闭动画执行完毕事件 | `data`：() => void | - |
-| `open` | 弹窗打开动画执行完毕事件 | `data`：() => void | - |
-| `maskClick` | 点击遮罩时触发 | `data`：() => void | - |
+| `close` | 弹窗关闭前触发，可用于异步拦截关闭 | `suspend`：开启等待的回调函数<br/>`next`：执行后续关闭操作的回调函数<br/>`stop`：阻止后续关闭操作的回调函数 | - |
+| `open-after` | 弹窗打开动画执行完毕事件 | - | - |
+| `clickMask` | 点击遮罩时触发 | - | - |
 
 
 ### Slots

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/datetime.vue

@@ -31,6 +31,13 @@ const emits = defineEmits<{
     (e: 'update:modelValue', selectedValue: string | number | number[]): void;
 }>();
 
+const viewloading = ref(false);
+
+const initOptions = (values = selectedValue.value) => {
+    const { options } = getDateOptions(values, props.mode as DateMode, props.minDate, props.maxDate);
+    setDataOptions(options);
+};
+
 watch(
     () => props.modelValue,
     v => {
@@ -43,17 +50,27 @@ watch(
             values = value.map(item => Number(item));
         }
         setSelectValue(values as number[]);
+        // modelValue外部变化时，同步刷新dataOptions与selectedIndex，
+        // 避免打开下拉时picker仍停留在旧值位置。
+        viewloading.value = true;
+        initOptions(values);
+        nextTick(() => {
+            const indexs: number[] = [];
+            const _values = getNowDate(values, props.mode as DateMode);
+            dataOptions.value.forEach((item, index) => {
+                let i = item.map(({ value }) => value).indexOf(_values[index]);
+                if (i === -1) {
+                    i = _values[index] > item[item.length - 1].value ? item.length - 1 : 0;
+                }
+                indexs.push(i);
+            });
+            setSelectIndex(indexs);
+            viewloading.value = false;
+        });
     },
     { immediate: true }
 );
 
-const initOptions = (values = selectedValue.value) => {
-    const { options } = getDateOptions(values, props.mode as DateMode, props.minDate, props.maxDate);
-    setDataOptions(options);
-};
-
-const viewloading = ref(false);
-
 const initSelectIndex = (values = selectedValue.value) => {
     viewloading.value = true;
     nextTick(() => {
@@ -91,9 +108,6 @@ watch([() => props.minDate, () => props.maxDate], () => {
     initOptions();
     initSelectIndex();
 });
-
-initOptions();
-initSelectIndex();
 </script>
 <template>
     <picker-view v-if="!viewloading" style="height: 450rpx; width: 100%" indicator-style="height: 43px" immediate-change :value="selectedIndex" @change="onChange">

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

@@ -0,0 +1,21 @@
+## API
+
+### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `modelValue` | 绑定的值，支持v-model双向绑定 | `string / number / null / undefined` | - | - | - |
+| `list` | 选项数据，每个选项支持 disabled 属性设置单项禁止选择 | `SelectOption[]` | `[]` | - | - |
+| `placeholder` | 占位符 | `string` | `请选择` | - | - |
+| `labelKey` | 选项标签Key | `string` | `label` | - | - |
+| `valueKey` | 选项值Key | `string` | `value` | - | - |
+| `disabled` | 禁用状态 | `boolean` | `false` | - | - |
+| `maskClose` | 点击遮罩层是否关闭弹窗 | `boolean` | `true` | - | - |
+
+
+### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `update:modelValue` | 选中值改变时触发 | `value`：选中的值 | - |
+| `change` | 选中值改变时触发 | `value`：选中的值<br/>`option`：选中的选项对象 | - |
+
+

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 },
+};