stellar-ui-plus 1.17.0 → 1.17.2

package/README.md

@@ -33,7 +33,7 @@
 ## 安装
 
 ```bash [pnpm]
-pnpm install stellar-ui-plus -S
+npm install stellar-ui-plus -S
 ```
 
 ## 快速上手

package/components/ste-checkbox/ste-checkbox.vue

@@ -149,7 +149,7 @@ async function click() {
 type PropsKeyTypee = keyof typeof props;
 function getDefaultData(key: PropsKeyTypee, value: any) {
     try {
-        if (Object.hasOwn(props, key)) {
+        if (Object.prototype.hasOwnProperty.call(props, key)) {
             if (props[key]) {
                 return props[key];
             } else {

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

@@ -1,25 +1,31 @@
 export const ICON_OBJ = {
-  info: '',
-  success: '',
-  error: '',
-}
-export const DURATION = 200
-export const ANIMATION_PROP: UniApp.CreateAnimationOptions = { duration: DURATION, timingFunction: 'ease-out' }
+    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 type MessageBoxIcon = 'info' | 'success' | 'error'
+export interface MessageBoxOptions {
+    show?: boolean;
+    title?: string;
+    content?: string;
+    icon?: MessageBoxIcon;
+    cancelText?: string;
+    confirmText?: string;
+    confirmColor?: string;
+    showCancel?: boolean;
+    showClose?: boolean;
+    cancelColor?: string;
+    editable?: boolean;
+    placeholderText?: string;
+    confirm?: (value?: string) => void;
+    cancel?: (value?: string) => void;
+    complete?: (value?: string) => void;
 
-export const DEFAULT_CONFIG = {
-  title: '',
-  content: '',
-  showCancel: true,
-  icon: '',
-  cancelText: '取消',
-  cancelColor: '#333333',
-  confirmText: '确认',
-  confirmColor: '',
-  editable: false,
-  placeholderText: '',
-  success: null,
-  fail: null,
-  complete: null,
+    closeOnClickOverlay?: boolean;
+    closeOnPressEscape?: boolean;
+    closeOnBackdropClick?: boolean;
 }

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

@@ -1,14 +1,10 @@
 <script lang="ts" setup>
-import { watch, computed, useSlots, defineOptions } from 'vue';
+import { inject, watch, ref, computed, useSlots, defineOptions } from 'vue';
+import { messageBoxDefaultOptionsKey } from './ste-message-box';
 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 { useColorStore } from '../../store/color';
-let { getColor } = useColorStore();
+import { ICON_OBJ, ANIMATION_PROP, DURATION, type MessageBoxOptions } from './constants';
 
 defineOptions({
     name: 'ste-message-box',
@@ -19,9 +15,6 @@ 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,
@@ -44,6 +37,9 @@ const {
     showInputPlaceholder,
 } = useData();
 
+const injectKey = props.selector ? props.selector : messageBoxDefaultOptionsKey;
+const injectMessageBoxOption = ref<MessageBoxOptions>(inject(injectKey) || {});
+
 // 用input自带占位符时，由于动画原因导致最终显示会有一个下降的效果
 function handleInputFocus() {
     showInputPlaceholder.value = false;
@@ -59,7 +55,7 @@ const cmpRootStyle = computed(() => {
     return {
         opacity: 0,
         '--cancel-color': cancelColor.value,
-        '--confirm-color': confirmColor.value ? confirmColor.value : getColor().steThemeColor,
+        '--confirm-color': confirmColor.value,
     };
 });
 
@@ -112,7 +108,6 @@ function closeBox() {
     maskAnimationData.value = maskAnimation.export();
     setTimeout(() => {
         show.value = false;
-        resetMessageBox(customKey);
     }, DURATION);
 }
 function handleInput(e: Event) {
@@ -149,18 +144,14 @@ function loadMessageBoxParams(options: MessageBoxOptions) {
     complete.value = options.complete || complete.value;
 }
 
-watch(
-    () => messageBoxOption,
-    val => {
-        if (val.show) {
-            loadMessageBoxParams(val);
-            showBox();
-        } else {
-            closeBox();
-        }
-    },
-    { deep: true }
-);
+watch(injectMessageBoxOption, val => {
+    if (val.show) {
+        loadMessageBoxParams(val);
+        showBox();
+    } else {
+        closeBox();
+    }
+});
 
 function showMsgBox(options: MessageBoxOptions) {
     loadMessageBoxParams(options);
@@ -197,10 +188,10 @@ defineExpose({
                 </view>
             </view>
             <view class="footer">
-                <view class="footer-btn cancel text" v-if="showCancel" @click="handleCancel">
+                <view class="cancel text" v-if="showCancel" @click="handleCancel">
                     {{ cancelText }}
                 </view>
-                <view class="footer-btn confirm text" @click="handleConfirm">
+                <view class="confirm text" @click="handleConfirm">
                     {{ confirmText }}
                 </view>
             </view>
@@ -244,7 +235,6 @@ defineExpose({
         .ste-message-title {
             padding-bottom: 48rpx !important;
         }
-
         .msg {
             padding: 0 !important;
         }
@@ -259,7 +249,6 @@ defineExpose({
         display: inline-flex;
         flex-direction: column;
         transform: scale(0);
-
         .content-box {
             .icon-box {
                 padding-top: 4rpx;
@@ -273,7 +262,6 @@ defineExpose({
                 align-items: center;
                 justify-content: center;
             }
-
             .ste-message-title {
                 width: 100%;
                 padding-top: 48rpx;
@@ -286,7 +274,6 @@ defineExpose({
             .msg {
                 padding: 0 32rpx 48rpx 32rpx;
                 text-align: center;
-
                 .text {
                     width: 100%;
                     font-size: var(--font-size-28, 28rpx);
@@ -317,12 +304,10 @@ defineExpose({
                 }
             }
         }
-
         .footer {
             display: flex;
             height: 96rpx;
-
-            .footer-btn {
+            > view {
                 height: 100%;
                 border-top: 2rpx solid #eeeeee;
                 border-right: 2rpx solid #eeeeee;
@@ -346,7 +331,7 @@ defineExpose({
                     color: var(--confirm-color);
                 }
 
-                & + .footer-btn {
+                &:nth-last-child(1) {
                     border-right: none;
                 }
             }

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

@@ -1,26 +1,29 @@
-import type { MessageBoxOptions } from '../../types'
-import { useMsgBoxStore } from '../../store'
+import { provide, ref } from 'vue';
+import { messageBoxDefaultOptionsKey } from './ste-message-box';
+import type { MessageBoxOptions } from './constants';
 
-export const STE_MESSAGE_BOX_KEY = '$steMsgBoxKey'
-export function useMessageBox(key: string = STE_MESSAGE_BOX_KEY) {
-  const store = useMsgBoxStore()
+export function useMessageBox(customKey?: string) {
+    const provideKey = customKey || messageBoxDefaultOptionsKey;
+    const MsgOptions = ref<MessageBoxOptions>({});
+    provide(provideKey, MsgOptions);
 
-  // 初始化
-  store.initializeState(key)
-
-  return {
-    showMsgBox(params: MessageBoxOptions) {
-      store.setMessageBox({
-        key,
-        params: {
-          ...params,
-          show: true,
-        },
-      })
-    },
-
-    hideMsgBox() {
-      store.resetMessageBox(key)
-    },
-  }
+    // 打开弹窗
+    function showMsgBox(options: MessageBoxOptions) {
+        MsgOptions.value = Object.assign(
+            {
+                show: true,
+            },
+            options
+        );
+    }
+    /** 关闭弹窗 */
+    function hideMsgBox() {
+        MsgOptions.value = {
+            show: false,
+        };
+    }
+    return {
+        showMsgBox,
+        hideMsgBox,
+    };
 }

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

@@ -1,56 +1,56 @@
-import { ref } from 'vue'
-import { DEFAULT_CONFIG, type MessageBoxIcon } from './constants'
+import { ref } from 'vue';
+import 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 title = ref('确认删除订单？');
+    const content = ref('');
+    const icon = ref<MessageBoxIcon | ''>('');
+    const cancelText = ref('取消');
+    const cancelColor = ref('#333333');
+    const confirmText = ref('确认');
+    const confirmColor = ref('#0090ff');
+    const showCancel = ref(true);
+    const editable = ref(false);
+    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 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 open = ref(false);
+    const tmpMsg = ref(null);
 
-  const showInputPlaceholder = ref(true)
+    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,
-  }
+    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-number-keyboard/useData.ts

@@ -1,132 +1,144 @@
-import { computed, ref, watch } from 'vue';
-import utils from '../../utils/utils';
-import { useColorStore } from '../../store/color';
-let { getColor } = useColorStore();
-import type { NumberKeyboardProps } from './props';
+import { computed, ref, watch } from 'vue'
+import utils from '../../utils/utils'
+import { useColorStore } from '../../store/color'
+import type { NumberKeyboardProps } from './props'
+
+const { getColor } = useColorStore()
 export default function useData({
-    props,
-    emits,
+  props,
+  emits,
 }: {
-    props: NumberKeyboardProps;
-    emits: {
-        (e: 'change', value: string): void;
-        (e: 'input', value: string): void;
-        (e: 'update:modelValue', value: string): void;
-        (e: 'clear'): void;
-        (e: 'backspace'): void;
-        (e: 'confirm', value: string): void;
-        (e: 'click', key: string): void;
-        (e: 'beforeinput', key: string, suspend: () => void, next: () => void, stop: () => void): void;
-        (e: 'close'): void;
-        (e: 'update:show', show: boolean): void;
-        (e: 'open'): void;
-    };
+  props: NumberKeyboardProps
+  emits: {
+    (e: 'change', value: string): void
+    (e: 'input', value: string): void
+    (e: 'update:modelValue', value: string): void
+    (e: 'clear'): void
+    (e: 'backspace'): void
+    (e: 'confirm', value: string): void
+    (e: 'click', key: string): void
+    (e: 'beforeinput', key: string, suspend: () => void, next: () => void, stop: () => void): void
+    (e: 'close'): void
+    (e: 'update:show', show: boolean): void
+    (e: 'open'): void
+  }
 }) {
-    const dataValue = ref('');
-    const setDataValue = (value: string) => {
-        if (value === dataValue.value) return;
-        if (value === null || value === undefined) dataValue.value = '';
-        else if (typeof value === 'string') dataValue.value = value;
-        else dataValue.value = String(value);
-    };
+  const dataValue = ref('')
+  const setDataValue = (value: string) => {
+    if (value === dataValue.value)
+      return
+    if (value === null || value === undefined)
+      dataValue.value = ''
+    else if (typeof value === 'string')
+      dataValue.value = value
+    else dataValue.value = String(value)
+  }
 
-    const dataShow = ref(false);
-    const setDataShow = (value: boolean) => {
-        if (value === dataShow.value) return;
-        dataShow.value = value;
-    };
+  const dataShow = ref(false)
+  const setDataShow = (value: boolean) => {
+    if (value === dataShow.value)
+      return
+    dataShow.value = value
+  }
 
-    const cmpNumbers = computed(() => {
-        let keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
-        if (props.randomKeys) keys = utils.randomArray(keys);
+  const cmpNumbers = computed(() => {
+    let keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
+    if (props.randomKeys)
+      keys = utils.randomArray(keys)
 
-        if (Array.isArray(props.customKeys)) keys.push(...props.customKeys);
+    if (Array.isArray(props.customKeys))
+      keys.push(...props.customKeys)
 
-        if (!props.rightKeys) {
-            if (!props.showClear) {
-                keys.push('backspace');
-                return;
-            }
-            const d = keys.length % 3;
-            if (d === 1) {
-                const end = keys.pop();
-                keys.push('clear', end || '', 'backspace');
-            } else {
-                keys.push('clear', 'backspace');
-            }
-        }
-        return keys;
-    });
+    if (!props.rightKeys) {
+      if (!props.showClear) {
+        keys.push('backspace')
+        return
+      }
+      const d = keys.length % 3
+      if (d === 1) {
+        const end = keys.pop()
+        keys.push('clear', end || '', 'backspace')
+      }
+      else {
+        keys.push('clear', 'backspace')
+      }
+    }
+    return keys
+  })
 
-    const cmpRootStyle = computed(() => {
-        return {
-            '--ste-number-keyboard-text-color': props.textColor,
-            '--ste-number-keyboard-text-size': `var(--font-size-${props.textSize},${utils.formatPx(props.textSize)})`,
-            '--ste-number-keyboard-clear-text-size': `var(--font-size-${props.textSize},${utils.formatPx(Number(props.textSize) - 8)})`,
-            '--ste-number-keyboard-confirm-text-size': `var(--font-size-${props.textSize},${utils.formatPx(Number(props.textSize) - 3)})`,
-            '--ste-number-keyboard-confirm-bg': props.confirmBg ? props.confirmBg : getColor().steThemeColor,
-            '--ste-number-keyboard-confirm-bg-active': utils.Color.formatColor(props.confirmBg, 0.8),
-            '--ste-number-keyboard-confirm-color': props.confirmColor,
-        };
-    });
+  const cmpRootStyle = computed(() => {
+    return {
+      '--ste-number-keyboard-text-color': props.textColor,
+      '--ste-number-keyboard-text-size': `var(--font-size-${props.textSize},${utils.formatPx(props.textSize)})`,
+      '--ste-number-keyboard-clear-text-size': `var(--font-size-${props.textSize},${utils.formatPx(Number(props.textSize) - 8)})`,
+      '--ste-number-keyboard-confirm-text-size': `var(--font-size-${props.textSize},${utils.formatPx(Number(props.textSize) - 3)})`,
+      '--ste-number-keyboard-confirm-bg': props.confirmBg ? props.confirmBg : getColor().steThemeColor,
+      '--ste-number-keyboard-confirm-bg-active': utils.Color.formatColor(props.confirmBg, 0.8),
+      '--ste-number-keyboard-confirm-color': props.confirmColor,
+    }
+  })
 
-    watch(() => props.modelValue, setDataValue, { immediate: true });
-    watch(() => props.show, setDataShow, { immediate: true });
+  watch(() => props.modelValue, setDataValue, { immediate: true })
+  watch(() => props.show, setDataShow, { immediate: true })
 
-    const onClose = () => {
-        setDataShow(false);
-        emits('update:show', false);
-        emits('close');
-    };
+  const onClose = () => {
+    setDataShow(false)
+    emits('update:show', false)
+    emits('close')
+  }
 
-    const beforInput = async (value: string) => {
-        let next = true;
-        const stop = new Promise((resolve, reject) => {
-            emits(
-                'beforeinput',
-                value,
-                () => (next = false),
-                () => resolve('next'),
-                () => reject(new Error('beforInput stop'))
-            );
-        });
-        if (!next) await stop;
+  const beforInput = async (value: string) => {
+    let next = true
+    const stop = new Promise((resolve, reject) => {
+      emits(
+        'beforeinput',
+        value,
+        () => (next = false),
+        () => resolve('next'),
+        () => reject(new Error('beforInput stop')),
+      )
+    })
+    if (!next)
+      await stop
 
-        /* eslint prefer-promise-reject-errors: "error" */
-    };
+    /* eslint prefer-promise-reject-errors: "error" */
+  }
 
-    const onChange = async (value: string) => {
-        try {
-            if (value === 'confirm') {
-                emits('confirm', dataValue.value);
-                onClose();
-                return;
-            }
-            switch (value) {
-                case 'backspace':
-                    setDataValue(dataValue.value.slice(0, dataValue.value.length - 1));
-                    emits('backspace');
-                    break;
-                case 'clear':
-                    setDataValue('');
-                    emits('clear');
-                    break;
-                default:
-                    await beforInput(value);
-                    emits('click', value);
-                    if (props.maxlength && dataValue.value.length >= Number(props.maxlength)) return;
-                    dataValue.value += value;
-                    break;
-            }
-            emits('input', dataValue.value);
-            emits('change', dataValue.value);
-            emits('update:modelValue', dataValue.value);
-        } catch (e) {
-            if (e) console.error(e);
-        }
-    };
+  const onChange = async (value: string) => {
+    try {
+      if (value === 'confirm') {
+        emits('confirm', dataValue.value)
+        onClose()
+        return
+      }
+      switch (value) {
+        case 'backspace':
+          setDataValue(dataValue.value.slice(0, dataValue.value.length - 1))
+          emits('backspace')
+          break
+        case 'clear':
+          setDataValue('')
+          emits('clear')
+          break
+        default:
+          await beforInput(value)
+          emits('click', value)
+          if (props.maxlength && dataValue.value.length >= Number(props.maxlength))
+            return
+          dataValue.value += value
+          break
+      }
+      emits('input', dataValue.value)
+      emits('change', dataValue.value)
+      emits('update:modelValue', dataValue.value)
+    }
+    catch (e) {
+      if (e)
+        console.error(e)
+    }
+  }
 
-    const onOpen = () => emits('open');
+  const onOpen = () => emits('open')
 
-    return { cmpNumbers, cmpRootStyle, dataShow, onClose, onChange, onOpen };
+  return { cmpNumbers, cmpRootStyle, dataShow, onClose, onChange, onOpen }
 }

package/components/ste-radio/ste-radio.vue

@@ -131,7 +131,7 @@ async function click() {
 type PropsKeyTypee = keyof typeof props;
 function getDefaultData(key: PropsKeyTypee, value: any) {
     try {
-        if (Object.hasOwn(props, key)) {
+        if (Object.prototype.hasOwnProperty.call(props, key)) {
             if (props[key]) {
                 return props[key];
             } else {