stellar-ui-plus 1.25.7 → 1.25.8

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": "选中的选项对象"
+                }
+            ]
+        }
+    ]
+}

package/components/ste-select-order/ste-select-order.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { computed, ref, watch, nextTick, getCurrentInstance, onMounted } from 'vue';
+import propsData, { type SelectOption } from './props';
+import { useColorStore } from '../../store/color';
+import utils from '../../utils/utils';
+
+defineOptions({
+    name: 'ste-select-order',
+    options: {
+        virtualHost: true,
+    },
+});
+
+const thas = ref()
+
+onMounted(() => {
+    thas.value = getCurrentInstance()?.proxy
+})
+
+const { getColor } = useColorStore();
+const props = defineProps(propsData);
+const emits = defineEmits<{
+    (e: 'update:modelValue', value: string | number | undefined): void;
+    (e: 'change', value: string | number | undefined, option: SelectOption | undefined): void;
+}>();
+
+const open = ref(false);
+const viewValue = ref(props.modelValue);
+const isUpward = ref(false);
+
+watch(() => props.modelValue, (newVal) => {
+    if (newVal !== viewValue.value) {
+        viewValue.value = newVal;
+    }
+});
+
+const onTouchMove = (e: TouchEvent) => {
+    // 只有在展开状态下才阻止动
+    if (open.value) {
+        e.preventDefault();
+    }
+};
+
+const cmpRootStyle = computed(() => ({
+    '--theme-color': getColor()?.steThemeColor || '#0090FF',
+}));
+
+const viewTitle = computed(() => {
+    if (!viewValue.value) return '';
+    const item = props.list.find(item => item[props.valueKey] === viewValue.value);
+    return item ? (item[props.labelKey] as string) || String(item[props.valueKey]) : String(viewValue.value);
+});
+
+const calculatePosition = async () => {
+    const header = await utils.querySelector(".ste-select-order-header", thas.value)
+    if (!header) return;
+    const vh = utils.System.getWindowHeight()
+    const { top, height } = header as any
+    const position = top + height / 2;
+    const middle = vh / 2;
+    isUpward.value = position > middle;
+};
+
+const onTitleClick = async () => {
+    if (props.disabled) return;
+    if (!open.value) {
+        await calculatePosition();
+    }
+    await nextTick()
+    open.value = !open.value;
+};
+
+const onShadeClick = () => {
+    if (props.maskClose) {
+        open.value = false;
+    }
+};
+
+const onSelect = (item: SelectOption) => {
+    if (item.disabled) return;
+    const val = item[props.valueKey];
+    if (val === viewValue.value || props.disabled) return;
+    viewValue.value = val;
+    emits('update:modelValue', val);
+    emits('change', val, item);
+    setTimeout(() => {
+        open.value = false;
+    }, 300);
+};
+</script>
+
+<template>
+    <view class="ste-select-order-root" :class="{ open, disabled: props.disabled }" :style="[cmpRootStyle]">
+        <view class="ste-select-order-shade" @click="onShadeClick" @touchmove.stop="onTouchMove"></view>
+        <view class="ste-select-order-content" :class="{ 'is-upward': isUpward }" @click.stop="onTitleClick"
+            @touchmove.stop="onTouchMove">
+            <view class="ste-select-order-header">
+                <view class="ste-select-order-title" v-if="viewTitle">
+                    <view class="ste-select-order-title-text">
+                        {{ viewTitle }}
+                    </view>
+                    <ste-icon code="&#xe698;" v-if="open" />
+                    <ste-icon code="&#xe699;" v-else />
+                </view>
+                <view class="ste-select-order-placeholder" v-else>{{ placeholder }}</view>
+            </view>
+            <view class="ste-select-order-list">
+                <view v-for="item in props.list" :key="item[props.valueKey]" class="ste-select-order-item"
+                    :class="{ 'active': item[props.valueKey] === viewValue, 'disabled': item.disabled }"
+                    @click.stop="onSelect(item)">
+                    <view>{{ (item[props.labelKey] as string) || item[props.valueKey] }}</view>
+                    <view class="ste-select-order-item-icon">
+                        <ste-icon code="&#xe67a;" />
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.ste-select-order-root {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    font-size: 32rpx;
+    color: #000;
+    transition: z-index 0.3s ease;
+
+    &.open {
+        z-index: 998;
+
+        .ste-select-order-shade {
+            display: block;
+            opacity: 1;
+        }
+
+        .ste-select-order-content {
+
+            .ste-select-order-header {
+                background-color: #fff;
+                border-radius: 16rpx 16rpx 0 0;
+            }
+
+            .ste-select-order-list {
+                display: block;
+                background-color: #fff;
+                border-radius: 0 0 16rpx 16rpx;
+                position: absolute;
+                left: 0;
+                top: 100%;
+                width: 100%;
+            }
+
+            &.is-upward {
+                .ste-select-order-header {
+                    border-radius: 0 0 16rpx 16rpx;
+                }
+
+                .ste-select-order-list {
+                    top: initial;
+                    bottom: 100%;
+                    border-radius: 16rpx 16rpx 0 0;
+                }
+            }
+        }
+    }
+
+    &.disabled {
+        opacity: 0.6;
+
+        .ste-select-order-title,
+        .ste-select-order-placeholder {
+            color: #ccc;
+        }
+    }
+
+    .ste-select-order-shade {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        display: none;
+        opacity: 0;
+        z-index: 1;
+    }
+
+    .ste-select-order-content {
+        width: 100%;
+        position: relative;
+        z-index: 2;
+
+        .ste-select-order-header {
+            padding: 28rpx 24rpx 24rpx 24rpx;
+            font-size: var(--font-size-32, 32rpx);
+            line-height: var(--font-size-44, 44rpx);
+            font-weight: bold;
+
+            .ste-select-order-placeholder,
+            .ste-select-order-title {
+                display: flex;
+                align-items: center;
+            }
+
+            .ste-select-order-title {
+                color: #0A0A0A;
+
+                .ste-select-order-title-text {
+                    margin-right: 12rpx;
+                }
+            }
+
+            .ste-select-order-placeholder {
+                color: #999;
+            }
+        }
+
+        .ste-select-order-list {
+            display: none;
+
+            z-index: 2;
+            max-height: 480rpx;
+            overflow-y: auto;
+            border-top: 1px solid #F9F9F9;
+            background-color: #fff;
+            padding: 0 24rpx;
+
+            .ste-select-order-item {
+                padding: 24rpx 0;
+                font-size: var(--font-size-28, 28rpx);
+                line-height: var(--font-size-40, 40rpx);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                color: #0A0A0A;
+                transition: color 0.2s ease;
+
+                &+.ste-select-order-item {
+                    border-top: 1px solid #F9F9F9;
+                }
+
+                .ste-select-order-item-icon {
+                    width: 36rpx;
+                    height: 36rpx;
+                    border-radius: 50%;
+                    border: 1px solid #CECECE;
+                    color: #fff;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                &.active {
+                    color: var(--theme-color);
+
+                    .ste-select-order-item-icon {
+                        border-color: var(--theme-color);
+                        background-color: var(--theme-color);
+                    }
+                }
+
+                &.disabled {
+                    color: #999;
+
+                    .ste-select-order-item-icon {
+                        border-color: #E0E0E0;
+                        background-color: #F5F5F5;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

package/components/ste-table/ste-table.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { computed, watch, ref, type CSSProperties, toRaw, nextTick } from 'vue';
+import { computed, watch, ref, type CSSProperties, toRaw } from 'vue';
 import propsData, { TABLE_KEY, tableEmits, CHECK_ICON_SIZE, SELECTION_COLOR_CONFIG, type TableProps } from './props';
 import utils from '../../utils/utils';
 import { useProvide } from '../../utils/mixin';
 import useData from './useData';
 import type { TableColumnProps } from '../ste-table-column/props';
 import { useColorStore } from '../../store/color';
-let { getColor } = useColorStore();
+const { getColor } = useColorStore();
 
 const componentName = `ste-table`;
 defineOptions({
@@ -82,14 +82,14 @@ const cmpRootClass = computed(() => {
     if (props.stripe) {
         classArr.push('stripe');
     }
-    if (props.height || Number(props.height) > 0) {
+    if (Number(props.height) > 0) {
         classArr.push('scroll-table');
     }
     return classArr.join(' ');
 });
 
 const cmpShowFixedPlaceholder = computed(() => {
-    return props.fixed || props.height || Number(props.height) > 0 || props.maxHeight || Number(props.maxHeight) > 0;
+    return props.fixed || Number(props.height) > 0 || Number(props.maxHeight) > 0;
 });
 
 const dataChangeFun = (fullLength: number = 0, val: any) => {
@@ -300,38 +300,7 @@ defineExpose({ clearSelection, toggleAllSelection, toggleRowSelection, getSelect
                     </view>
                 </view>
             </view>
-            <template v-if="height || Number(height) > 0">
-                <scroll-view scroll-y class="ste-table-scroll" @scrolltolower="handleScrollToLower">
-                    <view class="ste-table-body" :class="!tableData.length ? 'no-data' : ''">
-                        <template v-if="tableData.length">
-                            <view
-                                class="ste-table-row"
-                                :class="[getRowClass(row, rowIndex)]"
-                                :style="[getRowStyle(row, rowIndex) as CSSProperties]"
-                                v-for="(row, rowIndex) in tableData"
-                                :key="rowIndex"
-                                @click="rowClick(row, $event)"
-                            >
-                                <slot :row="row" name="default"></slot>
-                            </view>
-                            <view class="ste-table-row sum" v-if="showSummary">
-                                <view class="ste-table-cell" v-for="(column, index) in columns" :key="index" :class="[getHeaderCellClass(column, 0)]">
-                                    <view class="cell-box">
-                                        <view v-if="index === 0" class="sum-header">{{ sumText }}</view>
-                                        <view v-else>
-                                            {{ sumData[index] || '-' }}
-                                        </view>
-                                    </view>
-                                </view>
-                            </view>
-                        </template>
-                        <template v-else>
-                            <text class="no-data-text">- 暂无数据 -</text>
-                        </template>
-                    </view>
-                </scroll-view>
-            </template>
-            <template v-else>
+            <scroll-view :scroll-y="Number(height) > 0" class="ste-table-scroll" @scrolltolower="handleScrollToLower">
                 <view class="ste-table-body" :class="!tableData.length ? 'no-data' : ''">
                     <template v-if="tableData.length">
                         <view
@@ -339,6 +308,7 @@ defineExpose({ clearSelection, toggleAllSelection, toggleRowSelection, getSelect
                             :class="[getRowClass(row, rowIndex)]"
                             :style="[getRowStyle(row, rowIndex) as CSSProperties]"
                             v-for="(row, rowIndex) in tableData"
+                            :key="rowIndex"
                             @click="rowClick(row, $event)"
                         >
                             <slot :row="row"></slot>
@@ -358,7 +328,7 @@ defineExpose({ clearSelection, toggleAllSelection, toggleRowSelection, getSelect
                         <text class="no-data-text">- 暂无数据 -</text>
                     </template>
                 </view>
-            </template>
+            </scroll-view>
         </view>
     </view>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.25.7",
+    "version": "1.25.8",
     "description": "",
     "author": "",
     "license": "MIT",
@@ -11,7 +11,6 @@
     },
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "publish-vscode-plugin": "cd ../../../plugins/ste-helper & pnpm run publish",
-        "prepublishOnly": "pnpm run publish-vscode-plugin"
+        "publish-vscode-plugin": "cd ../../../plugins/ste-helper & pnpm run publish"
     }
 }

package/utils/System.ts

@@ -65,7 +65,7 @@ export default class System {
     /**
      * 获取窗口信息（结果已缓存，同一 App 生命周期内只调用一次系统 API）
      */
-    static getWindowInfo() {
+    static getWindowInfo(): WindowInfo {
         if (_cachedWindowInfo) return _cachedWindowInfo;
 
         // 测试环境判断