stellar-ui-plus 1.17.10 → 1.17.12

package/components/ste-animate/ste-animate.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref, type CSSProperties, nextTick, watch, defineOptions } from 'vue';
+import { computed, ref, type CSSProperties, nextTick, watch } from 'vue';
 import propsData from './props';
 
 const props = defineProps(propsData);

package/components/ste-badge/ste-badge.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineOptions, type CSSProperties } from 'vue';
+import { computed, type CSSProperties } from 'vue';
 import utils from '../../utils/utils';
 import propsData from './props';
 

package/components/ste-barcode/ste-barcode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import utils from '../../utils/utils';
-import { ref, onMounted, watch, nextTick, defineOptions, getCurrentInstance, type ComponentPublicInstance } from 'vue';
+import { ref, onMounted, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import propsData from './props';
 import { PATTERNS, stringToCode128 } from './encode';
 

package/components/ste-button/ste-button.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineOptions, type CSSProperties } from 'vue';
+import { computed, type CSSProperties } from 'vue';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 import propsData from './props';

package/components/ste-code-input/ste-code-input.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, defineOptions } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import utils from '../../utils/utils';
 import propsData from './props';
 

package/components/ste-date-picker/ste-date-picker.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, nextTick, defineOptions, computed } from 'vue';
+import { ref, onMounted, nextTick, computed } from 'vue';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 import propsData from './props';

package/components/ste-drag/ste-drag.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, onMounted, reactive, defineOptions, onBeforeUnmount, getCurrentInstance } from 'vue';
+import { watch, onMounted, reactive, onBeforeUnmount, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import utils from '../../utils/utils';
 import propsData, { DEFAULT_BOUNDARY } from './props';
 

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { watch, computed, ref, type CSSProperties, getCurrentInstance, defineOptions } from 'vue';
+import { watch, computed, ref, type CSSProperties, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import { useProvide } from '../../utils/mixin';
 import { DEFAULT_DURATION, MAX_DURATION, MIN_DURATION, DEFAULT_ROOT_QUERY } from './constans';
 import propsData, { DEOP_DOWN_MENU_KEY, dropDownMenuEmits } from './props';

package/components/ste-icon/ste-icon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineOptions } from 'vue';
+import { computed } from 'vue';
 import propsData from './props';
 import utils from '../../utils/utils';
 

package/components/ste-index-item/ste-index-item.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineOptions, ref, nextTick, onMounted } from 'vue';
+import { ref, nextTick, onMounted } from 'vue';
 import propsData from './props';
 import { useInject } from '../../utils/mixin';
 import { INDEX_LIST_KEY } from '../ste-index-list/props';

package/components/ste-index-list/ste-index-list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, getCurrentInstance, defineOptions, onMounted } from 'vue';
+import { ref, computed, watch, nextTick, getCurrentInstance, onMounted } from 'vue';
 import propsData, { INDEX_LIST_KEY } from './props';
 import useData from '../ste-scroll-to/useData';
 import { useProvide } from '../../utils/mixin';

package/components/ste-input/ste-input.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref, watch, nextTick, type CSSProperties, defineOptions } from 'vue';
+import { computed, ref, watch, nextTick, type CSSProperties } from 'vue';
 
 import utils from '../../utils/utils';
 import propsData, { type InputEmits } from './props';

package/components/ste-loading/ste-loading.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import utils from '../../utils/utils.js';
 import propsData from './props';
-import { ref, computed, defineOptions, type CSSProperties } from 'vue';
+import { ref, computed, type CSSProperties } from 'vue';
 
 defineOptions({
     name: 'ste-loading',

package/components/ste-message-box/ste-message-box.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, watch, ref, computed, useSlots, defineOptions } from 'vue';
+import { inject, watch, ref, computed, useSlots } from 'vue';
 import { messageBoxDefaultOptionsKey } from './ste-message-box';
 import useData from './useData';
 import type { BaseEvent } from '../../types/event';

package/components/ste-notice-bar/ste-notice-bar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import utils from '../../utils/utils.js';
-import { defineOptions, ref, computed, type CSSProperties, watch, nextTick, getCurrentInstance } from 'vue';
+import { ref, computed, type CSSProperties, watch, nextTick, getCurrentInstance, type ComponentPublicInstance, type Ref } from 'vue';
 import propsData from './props';
 
 defineOptions({

package/components/ste-number-keyboard/KeyboardVue.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineOptions, computed, type PropType } from 'vue';
+import { computed, type PropType } from 'vue';
 defineOptions({
     name: 'KeyboardVue',
     options: {

package/components/ste-picker/ste-picker.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed, defineOptions } from 'vue';
+import { ref, watch, computed } from 'vue';
 import propsData from './props';
 import utils from '../../utils/utils.js';
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, defineOptions, type CSSProperties } from 'vue';
+import { ref, computed, watch, type CSSProperties } from 'vue';
 import propsData from './props';
 import utils from '../../utils/utils';
 const DEFAULT_BORDER_RADIUS = 32;

package/components/ste-price/ste-price.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineOptions } from 'vue';
+import { computed } from 'vue';
 import utils from '../../utils/utils';
 import propsData from './props';
 

package/components/ste-qrcode/ste-qrcode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import utils from '../../utils/utils';
-import { nextTick, onMounted, watch, defineOptions, getCurrentInstance, ref, computed, type ComponentPublicInstance } from 'vue';
+import { nextTick, onMounted, watch, getCurrentInstance, ref, computed, type ComponentPublicInstance } from 'vue';
 import propsData from './props';
 
 import UQRCode, { type URCodeCanvasContext } from './uqrcode';

package/components/ste-rate/ste-rate.vue

@@ -3,7 +3,7 @@ import utils from '../../utils/utils.js';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 import propsData from './props';
-import { computed, defineOptions, type CSSProperties } from 'vue';
+import { computed, type CSSProperties } from 'vue';
 
 defineOptions({
     name: 'ste-rate',

package/components/ste-read-more/ste-read-more.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, getCurrentInstance, type CSSProperties, defineOptions } from 'vue';
+import { computed, ref, onMounted, getCurrentInstance, type CSSProperties, type ComponentPublicInstance } from 'vue';
 import propsData from './props';
 import utils from '../../utils/utils';
 

package/components/ste-scroll-to/ste-scroll-to.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, getCurrentInstance, defineOptions, onMounted } from 'vue';
+import { ref, computed, getCurrentInstance, onMounted } from 'vue';
 import propsData, { SCROLL_TO_KEY } from './props';
 import useData from './useData';
 import { useProvide } from '../../utils/mixin';

package/components/ste-scroll-to-item/ste-scroll-to-item.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineOptions } from 'vue';
 import { useInject } from '../../utils/mixin';
 import { SCROLL_TO_KEY } from '../ste-scroll-to/props';
 

package/components/ste-search/ste-search.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watch, defineOptions, nextTick } from 'vue';
+import { computed, watch, nextTick } from 'vue';
 import type { SwiperOnChangeEvent } from '@uni-helper/uni-app-types';
 import utils from '../../utils/utils';
 import type { SearchSuggestion, Obj } from '../../types';

package/components/ste-select/datapager.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineOptions, onMounted, getCurrentInstance } from 'vue';
+import { onMounted, getCurrentInstance } from 'vue';
 defineOptions({
     virtualHost: true,
 });

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getCurrentInstance, defineOptions, onMounted, ref } from 'vue';
+import { getCurrentInstance, onMounted, ref } from 'vue';
 import propsData, { type SelectOption, type SelectValue } from './props';
 import useData from './useData';
 import DateTime from './datetime.vue';

package/components/ste-signature/ste-signature.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, getCurrentInstance, defineOptions, ref } from 'vue';
+import { computed, onMounted, getCurrentInstance, ref } from 'vue';
 import utils from '../../utils/utils';
 import type { Stroke } from './types';
 import type { HTMLMouseEvent, UniTouchEvent } from '../../types/event.d';

package/components/ste-slider/ste-slider.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, defineOptions, getCurrentInstance, type CSSProperties, type ComponentPublicInstance, onMounted, watch, onBeforeUnmount } from 'vue';
+import { computed, getCurrentInstance, type CSSProperties, type ComponentPublicInstance, onMounted, watch, onBeforeUnmount } from 'vue';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 import type { UniTouchEvent, BaseEvent } from '../../types/event';

package/components/ste-step/ste-step.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch, defineOptions } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import { useInject } from '../../utils/mixin';
 import { type StepsProps, STEPS_KEY } from '../ste-steps/props';
 import propsData from './props';

package/components/ste-stepper/ste-stepper.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { BaseEvent } from '@uni-helper/uni-app-types';
-import { computed, type CSSProperties, nextTick, defineOptions } from 'vue';
+import { computed, type CSSProperties, nextTick } from 'vue';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 import propsData, { type StepperEmits } from './props';

package/components/ste-steps/ste-steps.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { defineOptions } from 'vue';
 import propsData, { STEPS_KEY, stepsEmits } from './props';
 import { useProvide } from '../../utils/mixin';
 

package/components/ste-sticky/ste-sticky.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, getCurrentInstance, defineOptions } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
 import type { Obj } from '../../types';
 import utils from '../../utils/utils';
 import propsData from './props';

package/components/ste-swiper/ste-swiper.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineOptions, getCurrentInstance, ref } from 'vue';
+import { getCurrentInstance, ref } from 'vue';
 import propsData, { SWIPER_KEY } from './props';
 import { useProvide } from '../../utils/mixin';
 import useData from './useData';

package/components/ste-swiper-item/ste-swiper-item.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, defineOptions } from 'vue';
+import { ref, computed } from 'vue';
 import { useInject } from '../../utils/mixin';
 import { SWIPER_KEY } from '../ste-swiper/props';
 

package/components/ste-switch/ste-switch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import utils from '../../utils/utils.js';
 import propsData from './props';
-import { ref, computed, defineOptions, type CSSProperties } from 'vue';
+import { ref, computed, type CSSProperties } from 'vue';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 defineOptions({

package/components/ste-tab/ste-tab.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineOptions } from 'vue';
 import { useInject } from '../../utils/mixin';
 import propsData from './props';
 import { TAB_KEY } from '../ste-tabs/props';

package/components/ste-table/ATTRIBUTES.md

@@ -28,6 +28,7 @@
 | `height` | 表格高度 | `number / string` | - | - | - |
 | `maxHeight` | 表格最大高度 | `number / string` | - | - | - |
 | `selectionIconColor` | 配置选择项图标色 | `object` | - | - | - |
+| `isPopover` | 是否为超出单元格时气泡显示内容 | `boolean` | - | - | - |
 
 
 #### Events

package/components/ste-table/README.md

@@ -48,8 +48,8 @@
 
 #### 空数据显示
 
--   通过`table`中的`emptyText`属性来指定单元格中数据为空时显示的值，否则显示`-`
--   也可以通过插槽来自定义空数据时显示
+- 通过`table`中的`emptyText`属性来指定单元格中数据为空时显示的值，否则显示`-`
+- 也可以通过插槽来自定义空数据时显示
 
 ```html
 <script lang="ts" setup>
@@ -149,8 +149,8 @@
 
 #### 显示合计
 
--   通过`showSummary`控制是否显示合计，`sumText`控制合计行第一列的文本
--   `summaryMethod`来指定合计的方法，需要返回一个数组来确定每一列合计显示的内容
+- 通过`showSummary`控制是否显示合计，`sumText`控制合计行第一列的文本
+- `summaryMethod`来指定合计的方法，需要返回一个数组来确定每一列合计显示的内容
 
 ```html
 <script lang="ts" setup>
@@ -185,8 +185,8 @@
 
 #### 对齐方式
 
--   通过`align`指定某列的单元格的对齐方式
--   `headerAlign`指定表头的单元格对齐方式， 没设置时跟随`align`值
+- 通过`align`指定某列的单元格的对齐方式
+- `headerAlign`指定表头的单元格对齐方式， 没设置时跟随`align`值
 
 ```html
 <ste-table :data="rows">
@@ -566,6 +566,35 @@
 }
 ```
 
+#### 单元格超出长按显示气泡
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    const rows5 = ref([
+        { t1: '张三', t2: '我是张三我是张三我是张三我是张三', t3: '男男男男男男男男男' },
+        { t1: '李四', t2: '你是李四你是李四你是李四你是李四你是李四', t3: '女' },
+        { t1: '王五王五王五', t2: '王五描述', t3: '女' },
+        { t1: '赵六赵六赵六赵六', t2: '赵六', t3: '女' },
+        { t1: '王七', t2: '他是王七他是王七他是王七他是王七他是王七', t3: '女女女女女女女' },
+    ]);
+</script>
+<template>
+    <view class="title">单元格文字超出时气泡显示内容</view>
+    <view class="item-block">
+        <view style="width: 100%">
+            <ste-table :data="rows5" isPopover>
+                <template v-slot="{ row }">
+                    <ste-table-column label="文字1" prop="t1"></ste-table-column>
+                    <ste-table-column label="文字2" prop="t2"></ste-table-column>
+                    <ste-table-column label="文字3" prop="t3"></ste-table-column>
+                </template>
+            </ste-table>
+        </view>
+    </view>
+</template>
+```
+
 ---$
 
 ### API

package/components/ste-table/props.ts

@@ -45,6 +45,7 @@ const tableProps = {
         type: Object as PropType<typeof SELECTION_COLOR_CONFIG>,
         default: () => SELECTION_COLOR_CONFIG,
     },
+    isPopover: [Boolean, null],
 };
 
 export type TableProps = ExtractPropTypes<typeof tableProps>;

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

@@ -153,6 +153,11 @@
             "description": "配置选择项图标色",
             "type": "object"
         },
+        {
+            "name": "isPopover",
+            "description": "是否为超出单元格时气泡显示内容",
+            "type": "boolean"
+        },
         {
             "name": "[event]select",
             "description": "当用户手动勾选数据行的 Checkbox 时触发的事件",

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, watch, ref, defineOptions, type CSSProperties } from 'vue';
+import { computed, watch, ref, type CSSProperties } 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';
@@ -65,7 +65,7 @@ const cmpRootStyle = computed(() => {
         '--offset-top': props.offsetTop,
         '--table-height': utils.addUnit(props.height as string),
         '--table-max-height': utils.addUnit(props.maxHeight as string),
-        '--ste-theme-color': utils.Color.hex2rgba(getColor().steThemeColor, 0.05),
+        '--ste-theme-color': utils.Color.hex2rgba(getColor().steThemeColor),
     };
     return style;
 });
@@ -343,7 +343,7 @@ $default-border: 2rpx solid #ebebeb;
             padding: 0 32rpx;
             height: 80rpx;
             font-size: var(--font-size-24, 24rpx);
-
+            overflow-x: hidden;
             .cell-box {
                 height: 100%;
                 display: flex;

package/components/ste-table-column/common.scss

@@ -10,9 +10,22 @@
     align-items: center;
 }
 
+&.popover {
+    overflow-x: hidden;
+    .cell-box {
+        // overflow: hidden;
+        max-width: 100%;
+        // white-space: nowrap;
+        // text-overflow: ellipsis;
+        // /* 防止文本被选中，提升移动端体验 */
+        // user-select: none;
+        // -webkit-user-select: none;
+    }
+}
+
 .cell-box {
-    display: flex;
-    align-items: center;
+    // display: flex;
+    // align-items: center;
     padding: 24rpx 32rpx;
 }
 
@@ -40,13 +53,15 @@
 &.align-center {
     justify-content: center;
     .cell-box {
-        justify-content: center;
+        // justify-content: center;
+        text-align: center;
     }
 }
 
 &.align-right {
     justify-content: flex-end;
     .cell-box {
-        justify-content: flex-end;
+        // justify-content: flex-end;
+        text-align: right;
     }
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref, type CSSProperties, defineOptions } from 'vue';
+import { computed, ref, type CSSProperties, type Ref } from 'vue';
 import type { Obj } from '../../types';
 import propsData from './props';
 import utils from '../../utils/utils';
@@ -8,6 +8,7 @@ import { useInject } from '../../utils/mixin';
 import { TABLE_KEY, SELECTION_COLOR_CONFIG, type TableProps } from '../ste-table/props';
 import CheckBoxIcon from './checkbox-icon.vue';
 import RadioIcon from './radio-icon.vue';
+import TablePopover from './table-popover.vue';
 
 const componentName = `ste-table-column`;
 defineOptions({
@@ -19,7 +20,7 @@ defineOptions({
 
 const props = defineProps(propsData);
 
-const Parent = useInject<{ props: Required<TableProps>; checkStates: globalThis.Ref<number[]>; handleCheck: (...args: any[]) => void; cellClick: (...args: any[]) => void }>(TABLE_KEY);
+const Parent = useInject<{ props: Required<TableProps>; checkStates: Ref<number[]>; handleCheck: (...args: any[]) => void; cellClick: (...args: any[]) => void }>(TABLE_KEY);
 const parent = Parent.parent;
 const parentProps = Parent.parent?.props as TableProps;
 
@@ -64,6 +65,10 @@ const cmpRootClass = computed(() => {
         classArr.push('border');
     }
 
+    if (parentProps.isPopover) {
+        classArr.push('popover');
+    }
+
     const cellClassParam = {
         column: props,
         columnIndex: row.value.colIndex,
@@ -145,7 +150,8 @@ function cellClick(this: any, event: any) {
         <template v-else>
             <slot v-if="row[prop] || !$slots.empty">
                 <view class="cell-box">
-                    {{ cellText() }}
+                    <!-- {{ cellText() }} -->
+                    <table-popover :text="cellText()"></table-popover>
                 </view>
             </slot>
             <view class="cell-box" v-else>

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

@@ -0,0 +1,197 @@
+<script lang="ts" setup>
+import { ref, onMounted, watch, getCurrentInstance, type ComponentPublicInstance, nextTick } from 'vue';
+import utils from '../../utils/utils.js';
+const DURATION = 200;
+const ANIMATION_PROP: UniApp.CreateAnimationOptions = { duration: DURATION, timingFunction: 'ease-out' };
+
+const props = defineProps({
+    text: {
+        type: [String, null],
+        default: '',
+    },
+});
+
+const instance = getCurrentInstance() as unknown as ComponentPublicInstance;
+
+const pressTimer = ref();
+const showPopover = ref(false);
+const popoverLeft = ref(0);
+const popoverTop = ref(0);
+const arrowLeft = ref(50); // 箭头的左边距百分比
+const isTextOverflow = ref(false);
+const animationData = ref<UniApp.Animation>();
+
+onMounted(() => {
+    nextTick(() => {
+        checkTextOverflow();
+    });
+});
+
+watch(
+    () => props.text,
+    () => {
+        checkTextOverflow();
+    }
+);
+const checkTextOverflow = async () => {
+    const containerData = await utils.querySelector<false>('.ellipsis-box', instance);
+    let textData = await utils.querySelector<false>('.measure-text', instance);
+
+    if (containerData && textData && textData.width && containerData.width) {
+        isTextOverflow.value = textData.width > containerData.width;
+    }
+};
+
+const handleTouchStart = (e: TouchEvent | MouseEvent) => {
+    if (!isTextOverflow.value) return;
+
+    pressTimer.value = setTimeout(() => {
+        showPopover.value = true;
+        nextTick(() => {
+            updatePopoverPosition();
+        });
+    }, 100);
+    // #ifdef WEB
+    window.addEventListener('mouseup', doHide);
+    // #endif
+};
+
+const updatePopoverPosition = async () => {
+    const containerData = await utils.querySelector<false>('.ellipsis-box', instance);
+    const popoverData = await utils.querySelector<false>('.popover', instance);
+    if (!containerData || !popoverData || !containerData.left || !containerData.width || !popoverData.width || !containerData.top || !popoverData.height) return;
+
+    const systemInfo = utils.System;
+    const MARGIN = 10; // 间隔像素，避免贴边或者贴着弹出元素
+
+    // 计算文本框中心点
+    const boxCenter = containerData.left + containerData.width / 2;
+
+    // 计算 popover 的位置
+    let left = boxCenter - popoverData.width / 2;
+
+    // 确保 popover 不超出屏幕左边
+    if (left < MARGIN) {
+        left = MARGIN;
+    }
+
+    // 确保 popover 不超出屏幕右边
+    if (left + popoverData.width > systemInfo.getWindowWidth() - MARGIN) {
+        left = systemInfo.getWindowWidth() - popoverData.width - MARGIN;
+    }
+
+    // 计算箭头位置（相对于 popover 的百分比）
+    const tempArrowLeft = ((boxCenter - left) / popoverData.width) * 100;
+    popoverLeft.value = left;
+    popoverTop.value = containerData.top - popoverData.height - (MARGIN + 5);
+
+    arrowLeft.value = Math.max(10, Math.min(90, tempArrowLeft)); // 限制箭头在 10% 到 90% 之间
+    doShow();
+};
+
+const handleTouchEnd = () => {
+    doHide();
+};
+
+const doShow = () => {
+    nextTick(() => {
+        let animation = uni.createAnimation(ANIMATION_PROP);
+        animation.opacity(1).step();
+        animationData.value = animation.export();
+    });
+};
+
+const doHide = () => {
+    if (pressTimer.value) {
+        clearTimeout(pressTimer.value);
+        pressTimer.value = null;
+    }
+    let animation = uni.createAnimation(ANIMATION_PROP);
+    animation.opacity(0).step();
+    animationData.value = animation.export();
+    setTimeout(() => {
+        showPopover.value = false;
+    }, DURATION);
+    // #ifdef WEB
+    window.removeEventListener('mouseup', doHide);
+    // #endif
+};
+</script>
+
+<template>
+    <view class="wrapper">
+        <view class="ellipsis-box" @touchstart="handleTouchStart" @touchend="handleTouchEnd" @mousedown="handleTouchStart">
+            {{ text }}
+        </view>
+        <!-- 不做展示，正常显示文字长度，用于判断是否超过长度 -->
+        <text class="measure-text">{{ text }}</text>
+
+        <view class="popover" :class="showPopover ? 'show' : 'hidden'" :style="{ left: popoverLeft + 'px', top: popoverTop + 'px' }" :animation="animationData">
+            <view class="popover-content">
+                {{ text }}
+            </view>
+            <view class="popover-arrow" :style="{ left: arrowLeft + '%' }"></view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.wrapper {
+    position: relative;
+}
+
+.ellipsis-box {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    // #ifdef H5
+    user-select: none;
+    // #endif
+}
+
+.measure-text {
+    position: fixed;
+    left: -9999px;
+    top: -9999px;
+    white-space: nowrap;
+    visibility: hidden;
+}
+
+.popover {
+    position: fixed;
+    z-index: 999;
+    pointer-events: none;
+    opacity: 0;
+    &.show {
+        display: block;
+    }
+
+    &.hidden {
+        display: none;
+    }
+}
+
+.popover-content {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 1.4;
+    word-break: break-word;
+    white-space: normal;
+    max-width: 60vw;
+    text-align: left;
+}
+
+.popover-arrow {
+    position: absolute;
+    bottom: -6px;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid rgba(0, 0, 0, 0.8);
+}
+</style>

package/components/ste-tabs/ste-tabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineOptions, computed, onMounted, getCurrentInstance } from 'vue';
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
 import { useProvide } from '../../utils/mixin';
 import { type TabProps } from '../ste-tab/props';
 import propsData, { TAB_KEY } from './props';

package/components/ste-text/ste-text.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineOptions } from 'vue';
+import { computed } from 'vue';
 import propsData from './props';
 
 const componentName = `ste-text`;

package/components/ste-toast/ste-toast.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, defineOptions, inject, watch } from 'vue';
+import { ref, computed, inject, watch } from 'vue';
 import { toastDefaultOptionsKey } from './ste-toast';
 defineOptions({
     name: 'ste-toast',

package/components/ste-touch-swipe/ste-touch-swipe.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, defineOptions, getCurrentInstance, computed, nextTick, watch, ref } from 'vue';
+import { onMounted, getCurrentInstance, computed, nextTick, watch, ref } from 'vue';
 import utils from '../../utils/utils';
 import propsData, { TOUCH_SWIPE_KEY } from './props';
 import { useProvide } from '../../utils/mixin';

package/components/ste-touch-swipe-item/ste-touch-swipe-item.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineOptions } from 'vue';
 import { useInject } from '../../utils/mixin';
 import { TOUCH_SWIPE_KEY } from '../ste-touch-swipe/props';
 

package/components/ste-upload/ste-upload.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watch, defineOptions } from 'vue';
+import { computed, watch } from 'vue';
 import type { UploadFileType, WxInputAccept } from '../../types';
 import { readMediaFile, readFile } from './ReadFile';
 import utils from '../../utils/utils';

package/components/ste-video/ste-video.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, defineOptions, type CSSProperties, onMounted, nextTick, watch, getCurrentInstance } from 'vue';
+import { computed, type CSSProperties, onMounted, nextTick, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import type { BaseEvent } from '../../types/event';
 import useData from './useData';
 import utils from '../../utils/utils';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.17.10",
+    "version": "1.17.12",
     "description": "",
     "author": "",
     "license": "MIT",

package/store/color.ts

@@ -1,4 +1,3 @@
-import { ref } from 'vue';
 const colorValue = {
     steThemeColor: '#0090FF',
     defaultColor: '#0090FF',
@@ -17,35 +16,3 @@ export function useColorStore() {
         setColor,
     };
 }
-
-// Object.assign(color, value);
-// console.log('color', color);
-
-// return {
-//     color,
-//     getColor,
-//     setColor,
-// };
-// }
-
-// import { reactive } from 'vue';
-// const color = reactive({
-//     steThemeColor: '#0090FF',
-//     defaultColor: '#0090FF',
-// });
-// // 主题色内容
-// export function useColorStore() {
-//     const getColor = () => {
-//         return color;
-//     };
-//     const setColor = (value: any) => {
-//         Object.assign(color, value);
-//         console.log('color', color);
-//     };
-
-//     return {
-//         color,
-//         getColor,
-//         setColor,
-//     };
-// }

package/store/index.ts

@@ -1,4 +1,2 @@
 // 模块统一导出
-// export * from './toast';
-// export * from './message-box';
 export * from './color';

package/store/message-box.ts

@@ -1,54 +0,0 @@
-// import { defineStore } from 'pinia'
-// import { reactive } from 'vue'
-// import type { MessageBoxOptions } from '../types'
-// import { DEFAULT_CONFIG } from '../components/ste-message-box/constants'
-
-// // 定义消息框状态接口
-// interface MessageBoxState extends MessageBoxOptions {
-//   show: boolean
-// }
-
-// // 定义消息框存储接口
-// interface MessageBoxStore {
-//   [key: string]: MessageBoxState
-// }
-
-// export const useMsgBoxStore = defineStore('msgBox', () => {
-//   const messageBox = reactive<MessageBoxStore>({})
-
-//   const initializeState = (key: string): void => {
-//     if (!messageBox[key]) {
-//       messageBox[key] = {
-//         show: false,
-//       }
-//     }
-//   }
-
-//   const setMessageBox = ({ key, params }: { key: string, params: Partial<MessageBoxState> }): void => {
-//     if (messageBox[key])
-//       Object.assign(messageBox[key], { ...DEFAULT_CONFIG, ...params })
-//   }
-
-//   const resetMessageBox = (key: string): void => {
-//     if (messageBox[key]) {
-//       Object.assign(messageBox[key], {
-//         show: false,
-//       })
-//     }
-//   }
-
-//   const getMessageBox = (key: string): MessageBoxState => {
-//     if (messageBox[key])
-//       return messageBox[key]
-
-//     return {} as MessageBoxState
-//   }
-
-//   return {
-//     messageBox,
-//     initializeState,
-//     setMessageBox,
-//     resetMessageBox,
-//     getMessageBox,
-//   }
-// })

package/store/toast.ts

@@ -1,50 +0,0 @@
-// import { defineStore } from 'pinia'
-// import { ref } from 'vue'
-
-// // 轻提示内容
-// export const useToastStore = defineStore('toast', () => {
-//   const toast = ref({
-//     show: false,
-//     title: '',
-//     icon: '',
-//     image: '',
-//     duration: 1500,
-//     mask: false,
-//     success: null,
-//     fail: null,
-//     complete: null,
-//     close: null,
-//     timer: [],
-//   })
-//   const setToast = (val: any) => {
-//     toast.value = val
-//   }
-//   const getToast = () => {
-//     return toast.value
-//   }
-
-//   return {
-//     toast,
-//     setToast,
-//     getToast,
-//   }
-// })
-
-// // 轻提示队列
-// export const useToastLastParams = defineStore('toastLastParams', () => {
-//   const toastLastParams = ref({
-//     time: 0,
-//   })
-//   const setToastLastParams = (val: any) => {
-//     toastLastParams.value = val
-//   }
-//   const getToastLastParams = () => {
-//     return toastLastParams.value
-//   }
-
-//   return {
-//     toastLastParams,
-//     setToastLastParams,
-//     getToastLastParams,
-//   }
-// })