stellar-ui-plus 1.16.18

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

@@ -0,0 +1,355 @@
+<script lang="ts" setup>
+import { watch, computed, useSlots, defineOptions } from 'vue';
+import useData from './useData';
+import type { BaseEvent } from '../../types/event';
+import utils from '../../utils/utils';
+import { ICON_OBJ, ANIMATION_PROP, DURATION } from './constants';
+import type { MessageBoxOptions } from '../../types';
+import { STE_MESSAGE_BOX_KEY } from './use-message-box';
+import { useMsgBoxStore } from '../../store';
+import useColor from '../../config/color';
+let color = useColor();
+defineOptions({
+    name: 'ste-message-box',
+});
+
+const slots = useSlots();
+
+const props = defineProps<{
+    selector: string;
+}>();
+const customKey = props.selector || STE_MESSAGE_BOX_KEY;
+const { getMessageBox, resetMessageBox } = useMsgBoxStore();
+const messageBoxOption = getMessageBox(customKey);
+
+const {
+    animationData,
+    maskAnimationData,
+    inputValue,
+    placeholderText,
+    show,
+    showCancel,
+    title,
+    content,
+    cancelText,
+    confirmText,
+    icon,
+    editable,
+    cancelColor,
+    confirmColor,
+    confirm,
+    cancel,
+    complete,
+    showInputPlaceholder,
+} = useData();
+
+// 用input自带占位符时，由于动画原因导致最终显示会有一个下降的效果
+function handleInputFocus() {
+    showInputPlaceholder.value = false;
+}
+
+function handleInputBlur() {
+    if (!inputValue.value) {
+        showInputPlaceholder.value = true;
+    }
+}
+
+const cmpRootStyle = computed(() => {
+    return {
+        opacity: 0,
+        '--cancel-color': cancelColor.value,
+        '--confirm-color': confirmColor.value ? confirmColor.value : color.getColor().steThemeColor,
+    };
+});
+
+const cmpRootClass = computed(() => {
+    let classArr = [];
+    if (icon.value) {
+        classArr.push('icon-type');
+    }
+    if (!content.value && !slots.default) {
+        classArr.push('no-content');
+    }
+
+    if (slots && slots.default) {
+        classArr.push('slot-type');
+    }
+    return classArr.join(' ');
+});
+
+const cmpIconCode = computed(() => {
+    if (icon.value) {
+        return ICON_OBJ[icon.value] ? ICON_OBJ[icon.value] : ICON_OBJ.info;
+    } else {
+        return ICON_OBJ.info;
+    }
+});
+
+async function showBox() {
+    show.value = true;
+    await utils.sleep(50);
+    let animation = uni.createAnimation(ANIMATION_PROP);
+    let maskAnimation = uni.createAnimation(ANIMATION_PROP);
+    maskAnimation.opacity(1).step();
+    animation.scale(1, 1).step();
+    animationData.value = animation.export();
+    maskAnimationData.value = maskAnimation.export();
+}
+function closeBox() {
+    // 清除上次的值
+    inputValue.value = '';
+    cancelColor.value = '';
+    confirmColor.value = '';
+
+    showInputPlaceholder.value = true;
+
+    let animation = uni.createAnimation(ANIMATION_PROP);
+    let maskAnimation = uni.createAnimation(ANIMATION_PROP);
+    maskAnimation.opacity(0).step({ duration: DURATION });
+    animation.scale(0, 0).step();
+    animationData.value = animation.export();
+    maskAnimationData.value = maskAnimation.export();
+    setTimeout(() => {
+        show.value = false;
+        resetMessageBox(customKey);
+    }, DURATION);
+}
+function handleInput(e: Event) {
+    const baseEvent = e as unknown as BaseEvent;
+    inputValue.value = baseEvent.detail.value;
+}
+function handleConfirm() {
+    confirm.value(inputValue.value);
+    handleComplete();
+}
+function handleCancel() {
+    cancel.value(inputValue.value);
+    handleComplete();
+}
+function handleComplete() {
+    complete.value(inputValue.value);
+    closeBox();
+}
+
+function loadMessageBoxParams(options: MessageBoxOptions) {
+    title.value = options.title || '';
+    content.value = options.content || '';
+    icon.value = options.icon || '';
+    cancelText.value = options.cancelText || cancelText.value;
+    confirmText.value = options.confirmText || confirmText.value;
+    confirmColor.value = options.confirmColor || confirmColor.value;
+    showCancel.value = options.showCancel === false ? false : true;
+    cancelColor.value = options.cancelColor || cancelColor.value;
+    editable.value = !!options.editable;
+    placeholderText.value = options.placeholderText || placeholderText.value;
+
+    confirm.value = options.confirm || confirm.value;
+    cancel.value = options.cancel || cancel.value;
+    complete.value = options.complete || complete.value;
+}
+
+watch(
+    () => messageBoxOption,
+    val => {
+        if (val.show) {
+            loadMessageBoxParams(val);
+            showBox();
+        } else {
+            closeBox();
+        }
+    },
+    { deep: true }
+);
+
+function showMsgBox(options: MessageBoxOptions) {
+    loadMessageBoxParams(options);
+    showBox();
+}
+
+function hideMsgBox() {
+    closeBox();
+}
+defineExpose({
+    showMsgBox,
+    hideMsgBox,
+});
+</script>
+
+<template>
+    <view class="ste-message-box-root" :style="[cmpRootStyle]" :class="[cmpRootClass]" :animation="maskAnimationData" v-if="show">
+        <view class="ste-message-box-content" :animation="animationData">
+            <view class="content-box">
+                <view class="icon-box" v-if="icon">
+                    <ste-icon :code="cmpIconCode" color="#999999" size="45"></ste-icon>
+                </view>
+                <view class="ste-message-title">{{ title }}</view>
+                <view class="msg" v-if="!icon">
+                    <slot>
+                        <view class="text" v-if="!editable">{{ content }}</view>
+                        <view v-else class="input-box">
+                            <text class="placeholder-text" v-show="showInputPlaceholder">
+                                {{ placeholderText }}
+                            </text>
+                            <input :value="inputValue" class="ste-message-box-input" @input="handleInput" @focus="handleInputFocus" @blur="handleInputBlur" />
+                        </view>
+                    </slot>
+                </view>
+            </view>
+            <view class="footer">
+                <view class="footer-btn cancel text" v-if="showCancel" @click="handleCancel">
+                    {{ cancelText }}
+                </view>
+                <view class="footer-btn confirm text" @click="handleConfirm">
+                    {{ confirmText }}
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-message-box-root {
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    position: fixed;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    touch-action: none;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 99999;
+
+    &.slot-type {
+        .ste-message-title {
+            padding-bottom: 24rpx !important;
+        }
+
+        .msg {
+            padding: 0 !important;
+        }
+    }
+
+    &.icon-type {
+        .ste-message-title {
+            padding: 24rpx 0 34rpx 0 !important;
+        }
+    }
+
+    &.no-content {
+        .ste-message-title {
+            padding-bottom: 48rpx !important;
+        }
+
+        .msg {
+            padding: 0 !important;
+        }
+    }
+
+    .ste-message-box-content {
+        background: #ffffff;
+        border-radius: 16rpx;
+        // border: 2rpx solid #eeeeee;
+        min-width: 570rpx;
+        max-width: 610rpx;
+        display: inline-flex;
+        flex-direction: column;
+        transform: scale(0);
+
+        .content-box {
+            .icon-box {
+                padding-top: 4rpx;
+                height: 80rpx;
+                width: 80rpx;
+                border-radius: 50%;
+                background: #f1f1f1;
+                margin: 32rpx auto 0 auto;
+
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .ste-message-title {
+                width: 100%;
+                padding-top: 48rpx;
+                padding-bottom: 24rpx;
+                font-weight: bold;
+                font-size: var(--font-size-32, 32rpx);
+                text-align: center;
+            }
+
+            .msg {
+                padding: 0 32rpx 48rpx 32rpx;
+                text-align: center;
+
+                .text {
+                    width: 100%;
+                    font-size: var(--font-size-28, 28rpx);
+                    text-align: center;
+                }
+
+                .input-box {
+                    position: relative;
+                }
+
+                .placeholder-text {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    color: #999999;
+                }
+
+                .ste-message-box-input {
+                    height: 80rpx;
+                    width: 548rpx;
+                    background: #f5f5f5;
+
+                    border-radius: 8px 8px 8px 8px;
+                    text-align: center;
+                    padding: 0 24rpx;
+                    font-size: var(--font-size-28, 28rpx);
+                }
+            }
+        }
+
+        .footer {
+            display: flex;
+            height: 96rpx;
+
+            .footer-btn {
+                height: 100%;
+                border-top: 2rpx solid #eeeeee;
+                border-right: 2rpx solid #eeeeee;
+                flex: 1;
+
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: bold;
+                font-size: var(--font-size-32, 32rpx);
+
+                /* #ifdef H5 || WEB */
+                cursor: pointer;
+                /* #endif */
+
+                &.cancel {
+                    color: var(--cancel-color);
+                }
+
+                &.confirm {
+                    color: var(--confirm-color);
+                }
+
+                & + .footer-btn {
+                    border-right: none;
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,26 @@
+import type { MessageBoxOptions } from '../../types'
+import { useMsgBoxStore } from '../../store'
+
+export const STE_MESSAGE_BOX_KEY = '$steMsgBoxKey'
+export function useMessageBox(key: string = STE_MESSAGE_BOX_KEY) {
+  const store = useMsgBoxStore()
+
+  // 初始化
+  store.initializeState(key)
+
+  return {
+    showMsgBox(params: MessageBoxOptions) {
+      store.setMessageBox({
+        key,
+        params: {
+          ...params,
+          show: true,
+        },
+      })
+    },
+
+    hideMsgBox() {
+      store.resetMessageBox(key)
+    },
+  }
+}

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

@@ -0,0 +1,56 @@
+import { ref } from 'vue'
+import { DEFAULT_CONFIG, type MessageBoxIcon } from './constants'
+
+export default function useData() {
+  const title = ref(DEFAULT_CONFIG.title)
+  const content = ref('')
+  const icon = ref<MessageBoxIcon | ''>('')
+  const cancelText = ref(DEFAULT_CONFIG.cancelText)
+  const cancelColor = ref(DEFAULT_CONFIG.cancelColor)
+  const confirmText = ref(DEFAULT_CONFIG.confirmText)
+  const confirmColor = ref(DEFAULT_CONFIG.confirmColor)
+  const showCancel = ref(DEFAULT_CONFIG.showCancel)
+  const editable = ref(DEFAULT_CONFIG.editable)
+  const placeholderText = ref('')
+  const inputType = ref('')
+  const confirm = ref((_value?: string) => {})
+  const cancel = ref((_value?: string) => {})
+  const complete = ref((_value?: string) => {})
+
+  // 内部值
+  const pageShow = ref(true)
+  const show = ref(false)
+  const inputValue = ref('')
+  const animationData = ref(null)
+  const maskAnimationData = ref(null)
+
+  const open = ref(false)
+  const tmpMsg = ref(null)
+
+  const showInputPlaceholder = ref(true)
+
+  return {
+    title,
+    content,
+    icon,
+    cancelText,
+    cancelColor,
+    confirmText,
+    confirmColor,
+    showCancel,
+    editable,
+    placeholderText,
+    inputType,
+    confirm,
+    cancel,
+    complete,
+    pageShow,
+    show,
+    inputValue,
+    animationData,
+    maskAnimationData,
+    open,
+    tmpMsg,
+    showInputPlaceholder,
+  }
+}

package/components/ste-notice-bar/ATTRIBUTES.md

@@ -0,0 +1,22 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `list` | 滚动数据列表 | `Array` | `[]` | - | - |
+| `direction` | 滚动的方向 | `String` | `across` | `across`：水平<br/>`vertical`：垂直 | - |
+| `closeMode` | 是否启用关闭模式 | `Boolean` | `false` | - | - |
+| `color` | 文字颜色 | `String` | `#000000` | - | - |
+| `background` | 背景 | `String` | `#ffffff` | - | - |
+| `width` | 宽度 | `Number/String` | `100%` | `100%`：填满<br/>`{{Number}} `：自定义宽度，单位rpx | - |
+| `acrossSpeed` | 滚动速率 (px/s) | `Number` | `50` | - | - |
+| `verticalSpeed` | 滚动的速度（ms) | `Number` | `500` | - | - |
+| `delay` | 延时（ms | `Number` | `1000` | - | - |
+| `standTime` | 每次滚动前停留多少毫秒(竖向滚动时有效)（ms） | `Number` | `1000` | - | - |
+| `scrollable` | 是否可以滚动 | `Boolean` | `true` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `click` | 外层点击事件回调 | - | - |
+| `close` | 关闭通知栏时触发 | - | - |
+| `end` | 滚动结束时触发 | - | - |

package/components/ste-notice-bar/README.md

@@ -0,0 +1,124 @@
+# NoticeBar 公告栏
+
+用于循环播放展示一组消息通知。
+
+---$
+
+### 代码演示
+
+JavaScript后面的演示代码中涉及到的变量和方法都使用本`javascript
+`代码
+
+```javascript
+import { ref } from 'vue';
+let list = ref(['第一条:1111111111111111111111111111', '第二条:2222222222222222222222', '第三条:3333333333333']);
+let list2 = ref(['第一条:111', '第二条:222', '第三条:333', '第四条:444']);
+```
+
+#### 基础用法
+
+通过`list`数组参数设置需要滚动的内容,水平滚动。
+
+```html
+<ste-notice-bar :list="list"></ste-notice-bar>
+```
+
+#### 自定义样式
+
+-   通过 `color` 属性设置文字颜色，默认为 `#000000`。
+-   通过 `background` 属性设置背景，默认为 `#ffffff`。
+-   通过 `width` 属性设置宽度，默认为 `100%`，继承父属性。
+
+```
+<ste-notice-bar :list="list" background="#FBF8DC" color="red" :width="400"></ste-notice-bar>
+```
+
+#### 垂直滚动
+
+通过`direction`设置滚动的方向，`across`：水平，`vertical`：垂直 水平滚动、默认`across`。
+
+```html
+<ste-notice-bar :list="list" direction="vertical"></ste-notice-bar>
+```
+
+#### 滚动速率
+
+通过`acrossSpeed`设置水平方向的滚动速率 `(px/s)`。
+
+```html
+<ste-notice-bar :list="list" :acrossSpeed="10"></ste-notice-bar>
+```
+
+#### 滚动的速度
+
+通过`verticalSpeed`设置垂直方向的滚动的速度`（ms）`。
+
+```html
+<ste-notice-bar :list="list2" direction="vertical" :verticalSpeed="2000"></ste-notice-bar>
+```
+
+#### 延时滚动
+
+通过`delay`设置延时`（ms）`。
+
+```html
+<ste-notice-bar :list="list" :delay="10000"></ste-notice-bar>
+<ste-notice-bar :list="list2" direction="vertical" delay="10000"></ste-notice-bar>
+```
+
+#### 停留时间
+
+通过`standTime`设置每次滚动前停留多少毫秒(竖向滚动时有效)`（ms）`。
+
+```html
+<ste-notice-bar :list="list2" direction="vertical" :standTime="5000"></ste-notice-bar>
+```
+
+#### 是否可以滚动
+
+通过`scrollable`设置公共栏是否可以滚动，默认`true`。
+
+```html
+<ste-notice-bar :list="list" :scrollable="false"></ste-notice-bar>
+<ste-notice-bar :list="list2" direction="vertical" :scrollable="false"></ste-notice-bar>
+```
+
+#### 取消按钮
+
+通过`closeMode`设置是否启用关闭模式，默认`false`。
+
+```html
+<ste-notice-bar :list="list" closeMode></ste-notice-bar>
+```
+
+#### 插槽
+
+通过`leftIcon`设置左边图标的插槽。
+通过`rightIcon`设置右边图标的插槽。
+
+```html
+<ste-notice-bar :list="list">
+    <template #leftIcon>
+        <ste-icon color="#000000" code="&#xe682;" size="32"></ste-icon>
+    </template>
+    <template #rightIcon>
+        <ste-icon color="#000000" code="&#xe696;" size="32"></ste-icon>
+    </template>
+</ste-notice-bar>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### 组件插槽(Slots)
+
+| 插槽名      | 说明           | 插槽参数 | 支持版本 |
+| ----------- | -------------- | -------- | -------- |
+| `leftIcon`  | 左边图标的插槽 | -        |          |
+| `rightIcon` | 右边图标的插槽 | -        |          |
+
+---$
+{{qinpengfei}}

package/components/ste-notice-bar/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "展示组件",
+    "title": "NoticeBar 公告栏",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/noticeBar.png"
+}

package/components/ste-notice-bar/props.ts

@@ -0,0 +1,15 @@
+import type { PropType } from 'vue'
+
+export default {
+  list: { type: Array as PropType<string[]>, default: () => [] },
+  direction: { type: String, default: 'across' },
+  closeMode: { type: Boolean, default: false },
+  color: { type: String, default: '#000000' },
+  background: { type: String, default: '#ffffff' },
+  width: { type: [String, Number], default: '100%' },
+  acrossSpeed: { type: Number, default: 50 },
+  verticalSpeed: { type: Number, default: 500 },
+  delay: { type: Number, default: 1000 },
+  standTime: { type: Number, default: 1000 },
+  scrollable: { type: Boolean, default: true },
+}