stellar-ui-plus 1.16.18

package/components/ste-media-preview/ste-media-preview.easycom.json

@@ -0,0 +1,88 @@
+{
+  "name": "ste-media-preview",
+  "description": "媒体预览",
+  "example": "<ste-media-preview />",
+  "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=media-preview",
+  "attributes": [
+    {
+      "name": "show",
+      "description": "是否显示",
+      "type": "boolean",
+      "default": false
+    },
+    {
+      "name": "urls",
+      "description": "图片路径列表",
+      "type": "Array<string>",
+      "default": []
+    },
+    {
+      "name": "autoplay",
+      "description": "自动轮播时长，为0不自动轮播，单位ms",
+      "type": "number",
+      "default": 0
+    },
+    {
+      "name": "loop",
+      "description": "是否前后衔接播放",
+      "type": "boolean",
+      "default": false
+    },
+    {
+      "name": "index",
+      "description": "默认展示的资源下标",
+      "type": "number",
+      "default": 0
+    },
+    {
+      "name": "showIndex",
+      "description": "是否显示左下角索引",
+      "type": "boolean",
+      "default": false
+    },
+    {
+      "name": "scale",
+      "description": "是否支持双指缩放",
+      "type": "boolean",
+      "default": false
+    },
+    {
+      "name": "showmenu",
+      "description": "是否开启图片长按菜单",
+      "type": "boolean",
+      "default": true
+    },
+    {
+      "name": "[event]beforeClose",
+      "description": "关闭前触发",
+      "type": "() => void"
+    },
+    {
+      "name": "[event]close",
+      "description": "关闭后触发",
+      "type": "() => void"
+    },
+    {
+      "name": "[event]change",
+      "description": "切换时触发",
+      "type": "(index: number) => void",
+      "params": [
+        {
+          "name": "index",
+          "description": "切换后的下标"
+        }
+      ]
+    },
+    {
+      "name": "[event]longpress",
+      "description": "长按时触发",
+      "type": "(index: number) => void",
+      "params": [
+        {
+          "name": "index",
+          "description": "当前下标"
+        }
+      ]
+    }
+  ]
+}

package/components/ste-media-preview/ste-media-preview.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { onMounted, watch, computed } from 'vue';
+import utils from '../../utils/utils';
+import propsData from './props';
+import useData from './useData';
+import TouchScaleing from './TouchScaleing';
+import type { UniTouchEvent } from '../../types/event';
+import type { SwiperOnChangeEvent } from '@uni-helper/uni-app-types';
+
+const emits = defineEmits<{
+    (e: 'beforeClose', suspend: () => void, next: () => void, stop: () => void): void;
+    (e: 'update:show', show: boolean): void;
+    (e: 'close'): void;
+    (e: 'update:index', index: number): void;
+    (e: 'change', index: number): void;
+    (e: 'longpress', index: number): void;
+}>();
+
+const { dataIndex, setDataIndex, dataShow, setDataShow, touch, setTouch, scaling, setScaling, translate, setTranslate, rotate, setRotate, transition, setTransition, dataShowmenu, setDataShowmenu } =
+    useData();
+
+const props = defineProps(propsData);
+
+const cmpUrls = computed<{ url: string; type: string | number; path?: string }[]>(() => {
+    return props.urls.map(url => ({ url, type: utils.getMediaFileType(url) })).filter(item => item.type !== 'audio');
+});
+
+const cmpTransform = computed(() => {
+    return {
+        transform: `scale(${scaling.value}) translate(${translate.value}) rotate(${rotate.value}deg)`,
+        transition: transition.value,
+    };
+});
+
+onMounted(() => {
+    setTouch(new TouchScaleing());
+});
+
+watch(
+    () => props.show,
+    v => {
+        if (v && props.index !== null) {
+            setDataIndex(props.index);
+        }
+        setDataShow(v);
+    },
+    { immediate: true }
+);
+watch(() => props.showmenu, setDataShowmenu, { immediate: true });
+
+const onClose = async () => {
+    let next = true;
+    const stop = new Promise((resolve, reject) => {
+        emits(
+            'beforeClose',
+            () => (next = false),
+            () => resolve(true),
+            () => reject(false)
+        );
+    });
+    if (!next) {
+        await stop;
+    }
+    setDataShow(false);
+    emits('update:show', false);
+    emits('close');
+};
+
+const onTouchstart = (e: UniTouchEvent) => {
+    if (props.scale) return;
+    const [x1, y1, x2, y2] = touch.value?.touchStart(e.changedTouches) || [];
+    if (x1 && y1 && x2 && y2) {
+        if (dataShowmenu) setDataShowmenu(false);
+    }
+};
+
+const onTouchmove = (e: UniTouchEvent) => {
+    if (props.scale) return;
+    const bool = touch.value?.touchMove(e.changedTouches);
+    if (!bool) return;
+    if (dataShowmenu) setDataShowmenu(false);
+    setScaling(touch.value?.scale || 1);
+    setTranslate(`${touch.value?.translateX || 0}px,${touch.value?.translateY || 0}px`);
+    setRotate(touch.value?.rotate || 0);
+};
+
+const onTouchend = (e: UniTouchEvent) => {
+    if (props.scale) return;
+    if (dataShowmenu.value !== props.showmenu) setDataShowmenu(props.showmenu);
+    const bool = touch.value?.touchEnd(e.changedTouches);
+    if (!bool) return;
+    setTransition('300ms');
+    setTimeout(() => {
+        setScaling(1);
+        setTranslate('0');
+        setRotate(0);
+        setTimeout(() => {
+            setTransition('0');
+        }, 100);
+    }, 50);
+};
+
+const onChange = (e: SwiperOnChangeEvent) => {
+    setDataIndex(e.detail.current);
+    emits('update:index', e.detail.current);
+    emits('change', e.detail.current);
+};
+
+const onLongpress = () => {
+    emits('longpress', dataIndex.value);
+};
+
+const getTransfrom = (i: number) => (dataIndex.value === i ? cmpTransform.value : {});
+</script>
+<template>
+    <view class="ste-media-preview-root" v-if="dataShow">
+        <view class="media-preview-content">
+            <swiper style="width: 100%; height: 100%" :autoplay="props.autoplay > 0" :interval="props.autoplay" :circular="props.loop" :current="dataIndex" @change="onChange">
+                <swiper-item v-for="(item, index) in cmpUrls" :key="index">
+                    <view
+                        class="preview-item"
+                        @click.stop="1"
+                        @touchstart="onTouchstart"
+                        @touchmove="onTouchmove"
+                        @touchend="onTouchend"
+                        @longpress="onLongpress"
+                        :style="[dataIndex === index ? cmpTransform : {}]"
+                    >
+                        <!-- #ifndef APP -->
+                        <video class="video" object-fit="contain" v-if="item.type === 'video'" :src="item.url || item.path" @click.stop="1" />
+                        <ste-image v-else class="image" :showMenuByLongpress="dataShowmenu" :src="item.url || item.path" mode="aspectFit" />
+                        <!-- #endif -->
+                        <!-- #ifdef APP -->
+                        <video class="video" object-fit="contain" v-if="item.type === 'video' && cmpUrls.length <= 1" :src="item.url || item.path" @click.stop="1" />
+                        <ste-image class="image" :showMenuByLongpress="dataShowmenu" :src="item.url || item.path" mode="aspectFit" />
+                        <!-- #endif -->
+                    </view>
+                </swiper-item>
+            </swiper>
+        </view>
+        <view class="media-preview-footer">
+            <view class="footer-index">
+                <text v-if="showIndex">{{ dataIndex + 1 }}/{{ cmpUrls.length }}</text>
+            </view>
+            <view class="footer-close" @click="onClose">
+                <ste-icon name="close" size="60" code="&#xe6a0;" color="#fff" />
+            </view>
+        </view>
+    </view>
+</template>
+<style scoped lang="scss">
+.ste-media-preview-root {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000;
+    color: #fff;
+    z-index: 9999999;
+
+    .media-preview-content {
+        width: 100%;
+        height: calc(100% - 120rpx);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .preview-item {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .image,
+            .video {
+                width: 100%;
+                height: 100%;
+            }
+
+            .image {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+    }
+
+    .media-preview-footer {
+        width: 100%;
+        height: 120rpx;
+        padding: 0 30rpx 30rpx 30rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: var(--font-size-28, 28rpx);
+    }
+}
+</style>

package/components/ste-media-preview/useData.ts

@@ -0,0 +1,63 @@
+import { ref } from 'vue'
+import type TouchScaleing from './TouchScaleing'
+
+export default function useData() {
+  const dataIndex = ref(0)
+  const setDataIndex = (index: number) => {
+    dataIndex.value = index
+  }
+
+  const dataShow = ref(false)
+  const setDataShow = (show: boolean) => {
+    dataShow.value = show
+  }
+
+  const touch = ref<TouchScaleing>()
+  const setTouch = (_touch: TouchScaleing) => {
+    touch.value = _touch
+  }
+
+  const scaling = ref(1)
+  const setScaling = (scale: number) => {
+    scaling.value = scale
+  }
+
+  const translate = ref('0')
+  const setTranslate = (_translate: string) => {
+    translate.value = _translate
+  }
+
+  const rotate = ref(0)
+  const setRotate = (_rotate: number) => {
+    rotate.value = _rotate
+  }
+
+  const transition = ref('0')
+  const setTransition = (_transition: string) => {
+    transition.value = _transition
+  }
+
+  const dataShowmenu = ref(false)
+  const setDataShowmenu = (show: boolean) => {
+    dataShowmenu.value = show
+  }
+
+  return {
+    dataIndex,
+    setDataIndex,
+    dataShow,
+    setDataShow,
+    touch,
+    setTouch,
+    scaling,
+    setScaling,
+    translate,
+    setTranslate,
+    rotate,
+    setRotate,
+    transition,
+    setTransition,
+    dataShowmenu,
+    setDataShowmenu,
+  }
+}

package/components/ste-message-box/ATTRIBUTES.md

@@ -0,0 +1,6 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `selector` | 用于自定义插槽时的选择器 | `String` | `` | - | - |
+
+

package/components/ste-message-box/README.md

@@ -0,0 +1,222 @@
+# MessageBox 弹框
+
+模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
+
+---$
+
+### 使用方法
+
+#### 组合函数使用方法
+
+ps：注意 目前 useMessageBox 只能在 setup 作用域下使用  
+父组件引入组件 组合函数调用showMsgBox方法，打开轻提示
+
+```html
+<script setup lang="ts">
+    import { useMessageBox } from 'stellar-ui-plus/composables';
+    const msg = useMessageBox();
+    function click() {
+        msg.showMsgBox({ title: '提示' });
+    }
+</script>
+```
+
+```html
+<template>
+    <ste-message-box></ste-message-box>
+    <ste-button @click="click" :width="400">提示</ste-button>
+</template>
+```
+
+#### Ref用法
+
+父组件引入组件 绑定ref 通过ref调用showMsgBox方法，打开轻提示
+
+```html
+<template>
+    <ste-message-box ref="steMessageBox"></ste-message-box>
+</template>
+```
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+    let steMessageBox = ref();
+    steMessageBox.value.showMsgBox({
+        title: '提示内容',
+    });
+</script>
+```
+
+#### 全局引入
+
+配合 [https://github.com/smartXJ/vue3-inset-loader](https://github.com/smartXJ/vue3-inset-loader) 插件， 将 ste-message-box 节点置于每个页面中，可以更进一步简化使用
+
+```json
+insetLoader: {
+        config: {
+            messageBox: "<ste-message-box ref='messageBox'></ste-message-box>",
+        },
+        // 全局配置
+        label: ['messageBox'],
+        rootEle: '.*',
+}
+```
+
+### 代码演示
+
+以下代码演示为函数式调用方法
+
+```html
+<script setup lang="ts">
+    import { useMessageBox } from 'stellar-ui-plus/composables';
+    const msg = useMessageBox();
+</script>
+```
+
+#### 基础使用
+
+可在标题(`title`)和内容(`content`)中使用`\n`来实现换行
+
+```javascript
+function click() {
+    msg.showMsgBox({
+        title: '确认删除订单吗？',
+    });
+}
+```
+
+#### 带图标
+
+-   内置三种图标类型：`info`、`success`、`error`
+-   当显示图标时，内容(`content`)会失效，只显示标题(`title`)
+
+```javascript
+function msgBoxIcon1() {
+    msg.showMsgBox({
+        title: '提示',
+        icon: 'info',
+    });
+}
+function msgBoxIcon2() {
+    msg.showMsgBox({
+        title: '提示',
+        icon: 'success',
+    });
+}
+function msgBoxIcon3() {
+    msg.showMsgBox({
+        title: '提示',
+        icon: 'error',
+    });
+}
+```
+
+#### 自定义按钮
+
+```javascript
+function msgBoxBtn1() {
+    msg.showMsgBox({
+        title: '提示',
+        content: '确认删除订单吗？',
+        cancelText: '算了',
+        confirmText: '删吧',
+    });
+}
+function msgBoxBtn2() {
+    msg.showMsgBox({
+        title: '提示',
+        content: '确认删除订单吗？',
+        cancelColor: '#e1e',
+        confirmColor: '#a8ae1e',
+    });
+}
+function msgBoxBtn3() {
+    msg.showMsgBox({
+        title: '提示',
+        content: '确认删除订单吗？',
+        showCancel: false,
+    });
+}
+```
+
+#### 显示输入框
+
+当显示输入框时，内容(`content`)将不显示
+
+```javascript
+function msgBoxInput() {
+    msg.showMsgBox({
+        title: '提示',
+        content: '确认删除订单吗？',
+        editable: true,
+        placeholderText: '请输入',
+    });
+}
+```
+
+#### 插槽
+
+如果提供的弹框内容不满足需求，可以使用插槽自定义弹框内容。
+可以通过指定唯一标识`selector`的方式，在一个页面中使用多个`ste-message-box`，`useSteMsgBox(selector)`会返回一个指定了selector的组件实例。
+
+```html
+<template>
+    <ste-button @click="customClick">插槽</ste-button>
+    <ste-message-box selector="myMsgBox">
+        <view style="display: flex; justify-content: center; padding-bottom: 20rpx;width: 504rpx">
+            <ste-rate v-model="rate"></ste-rate>
+        </view>
+    </ste-message-box>
+</template>
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import useSteMsgBox from '@/node_modules/stellar-ui/components/ste-message-box/ste-message-box.js';
+    const msgBox = useSteMsgBox('myMsgBox');
+
+    const rage = ref(0);
+    function customClick() {
+        msgBox.showMsgBox({
+            title: '评分',
+        });
+    }
+</script>
+```
+
+#### 回调事件
+
+```javascript
+function msgBoxCallback1() {
+    this.showMsgBox({
+        title: '提示',
+        cancel: () => {
+            console.log('点击了取消');
+        },
+    });
+}
+function msgBoxCallback2() {
+    this.showMsgBox({
+        title: '提示',
+        confirm: () => {
+            console.log('点击了确认');
+        },
+    });
+}
+function msgBoxCallback3() {
+    this.showMsgBox({
+        title: '提示',
+        complete: () => {
+            console.log('弹框完成');
+        },
+    });
+}
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+---$
+{{fuyuwei}}

package/components/ste-message-box/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "展示组件",
+    "title": "MessageBox 弹框",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/messageBox.png"
+}

package/components/ste-message-box/constants.ts

@@ -0,0 +1,25 @@
+export const ICON_OBJ = {
+  info: '',
+  success: '',
+  error: '',
+}
+export const DURATION = 200
+export const ANIMATION_PROP: UniApp.CreateAnimationOptions = { duration: DURATION, timingFunction: 'ease-out' }
+
+export type MessageBoxIcon = 'info' | 'success' | 'error'
+
+export const DEFAULT_CONFIG = {
+  title: '',
+  content: '',
+  showCancel: true,
+  icon: '',
+  cancelText: '取消',
+  cancelColor: '#333333',
+  confirmText: '确认',
+  confirmColor: '',
+  editable: false,
+  placeholderText: '',
+  success: null,
+  fail: null,
+  complete: null,
+}

package/components/ste-message-box/ste-message-box.easycom.json

@@ -0,0 +1,14 @@
+{
+    "name": "ste-message-box",
+    "description": "模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。",
+    "example": "<ste-message-box></ste-message-box>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=message-box",
+    "attributes": [
+        {
+            "name": "selector",
+            "description": "用于自定义插槽时的选择器",
+            "type": "String",
+            "default": ""
+        }
+    ]
+}

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

@@ -0,0 +1 @@
+export const messageBoxDefaultOptionsKey = 'messageBox'