stellar-ui-plus 1.25.7 → 1.25.9

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/index.ts

@@ -120,6 +120,8 @@ import steSearchBox from "./components/ste-search-box/ste-search-box.vue"
 export const SteSearchBox = steSearchBox
 import steSelect from "./components/ste-select/ste-select.vue"
 export const SteSelect = steSelect
+import steSelectOrder from "./components/ste-select-order/ste-select-order.vue"
+export const SteSelectOrder = steSelectOrder
 import steSelectSeat from "./components/ste-select-seat/ste-select-seat.vue"
 export const SteSelectSeat = steSelectSeat
 import steSignature from "./components/ste-signature/ste-signature.vue"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.25.7",
+    "version": "1.25.9",
     "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/types/components.d.ts

@@ -59,6 +59,7 @@ import steScrollToItem from "../components/ste-scroll-to-item/ste-scroll-to-item
 import steSearch from "../components/ste-search/ste-search.vue"
 import steSearchBox from "../components/ste-search-box/ste-search-box.vue"
 import steSelect from "../components/ste-select/ste-select.vue"
+import steSelectOrder from "../components/ste-select-order/ste-select-order.vue"
 import steSelectSeat from "../components/ste-select-seat/ste-select-seat.vue"
 import steSignature from "../components/ste-signature/ste-signature.vue"
 import steSimpleCalendar from "../components/ste-simple-calendar/ste-simple-calendar.vue"
@@ -155,6 +156,7 @@ import steWatermark from "../components/ste-watermark/ste-watermark.vue"
 		SteSearch: typeof steSearch;
 		SteSearchBox: typeof steSearchBox;
 		SteSelect: typeof steSelect;
+		SteSelectOrder: typeof steSelectOrder;
 		SteSelectSeat: typeof steSelectSeat;
 		SteSignature: typeof steSignature;
 		SteSimpleCalendar: typeof steSimpleCalendar;

package/types/refComponents.d.ts

@@ -59,6 +59,7 @@ import steScrollToItem from "../components/ste-scroll-to-item/ste-scroll-to-item
 import steSearch from "../components/ste-search/ste-search.vue"
 import steSearchBox from "../components/ste-search-box/ste-search-box.vue"
 import steSelect from "../components/ste-select/ste-select.vue"
+import steSelectOrder from "../components/ste-select-order/ste-select-order.vue"
 import steSelectSeat from "../components/ste-select-seat/ste-select-seat.vue"
 import steSignature from "../components/ste-signature/ste-signature.vue"
 import steSimpleCalendar from "../components/ste-simple-calendar/ste-simple-calendar.vue"
@@ -150,6 +151,7 @@ export type RefScrollToItem = InstanceType<typeof steScrollToItem>
 export type RefSearch = InstanceType<typeof steSearch>
 export type RefSearchBox = InstanceType<typeof steSearchBox>
 export type RefSelect = InstanceType<typeof steSelect>
+export type RefSelectOrder = InstanceType<typeof steSelectOrder>
 export type RefSelectSeat = InstanceType<typeof steSelectSeat>
 export type RefSignature = InstanceType<typeof steSignature>
 export type RefSimpleCalendar = InstanceType<typeof steSimpleCalendar>

package/utils/System.ts

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