hy-app 0.6.4 → 0.6.6

package/components/hy-modal/hy-modal.vue

@@ -1,211 +1,211 @@
-<template>
-    <HyPopup
-        mode="center"
-        :zoom="modalOptions.zoom || zoom"
-        :show="showModal"
-        :round="modalOptions.round || round"
-        :customStyle="{
-            overflow: 'hidden',
-            marginTop: `-${addUnit(modalOptions.negativeTop || negativeTop)}`
-        }"
-        :closeOnClickOverlay="modalOptions.closeOnClickOverlay || closeOnClickOverlay"
-        :safeAreaInsetBottom="false"
-        :duration="400"
-        @click="clickHandler"
-    >
-        <view
-            class="hy-modal"
-            :style="{
-                width: addUnit(modalOptions.width || width)
-            }"
-        >
-            <view class="hy-modal__title" v-if="modalOptions.title || title">{{
-                modalOptions.title || title
-            }}</view>
-            <view
-                class="hy-modal__content"
-                :style="{
-                    paddingTop: `${modalOptions.title || title ? 12 : 25}px`,
-                    textAlign: modalOptions.contentTextAlign
-                }"
-            >
-                <slot v-if="$slots.default"></slot>
-                <text v-else class="hy-modal__content--text">
-                    {{ modalOptions.content || content }}
-                </text>
-            </view>
-            <view class="hy-modal__button--group__confirm-button" v-if="$slots.confirmButton">
-                <slot name="confirmButton"></slot>
-            </view>
-            <template v-else>
-                <view
-                    :class="[
-                        'hy-modal__button--group',
-                        (modalOptions.showCancelButton || showCancelButton) &&
-                            (modalOptions.showConfirmButton || showConfirmButton) &&
-                            (!(modalOptions.buttonReverse || buttonReverse)
-                                ? 'hy-modal__button--exact'
-                                : 'hy-modal__button--exact--reverse')
-                    ]"
-                    :style="{
-                        flexDirection:
-                            modalOptions.buttonReverse || buttonReverse ? 'row-reverse' : 'row'
-                    }"
-                >
-                    <view
-                        class="hy-modal__button--group__wrapper first hy-modal__button--group__wrapper--cancel"
-                        :hover-stay-time="150"
-                        hover-class="hy-modal__button--group__wrapper--hover"
-                        v-if="modalOptions.showCancelButton || showCancelButton"
-                        @tap.stop="cancelHandler"
-                    >
-                        <text
-                            class="hy-modal__button--group__wrapper--text hy-modal__button--group__wrapper--cancel__text"
-                            :style="{
-                                color: modalOptions.cancelColor || cancelColor
-                            }"
-                        >
-                            {{ modalOptions.cancelText || cancelText }}
-                        </text>
-                    </view>
-                    <view
-                        class="hy-modal__button--group__wrapper last hy-modal__button--group__wrapper--confirm"
-                        :hover-stay-time="150"
-                        hover-class="hy-modal__button--group__wrapper--hover"
-                        v-if="modalOptions.showConfirmButton || showConfirmButton"
-                        @tap="confirmHandler"
-                    >
-                        <hy-loading v-if="modalLoading" mode="circle"></hy-loading>
-                        <text
-                            v-else
-                            class="hy-modal__button--group__wrapper--text hy-modal__button--group__wrapper--confirm__text"
-                            :style="{
-                                color: modalOptions.confirmColor || confirmColor
-                            }"
-                        >
-                            {{ modalOptions.confirmText || confirmText }}
-                        </text>
-                    </view>
-                </view>
-            </template>
-        </view>
-    </HyPopup>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-modal',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import type { IModalEmits } from './typing'
-import { addUnit, sleep, useMessageInject } from '../../libs'
-import modalProps from './props'
-// 组件
-import HyPopup from '../hy-popup/hy-popup.vue'
-import HyLoading from '../hy-loading/hy-loading.vue'
-
-/**
- * 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
- * @displayName hy-modal
- */
-defineOptions({})
-
-const props = defineProps(modalProps)
-const emit = defineEmits<IModalEmits>()
-const load = ref(props.loading)
-
-// 尝试从 useMessage 注入状态
-const messageState = useMessageInject()
-
-// 计算属性，优先使用注入的状态
-const showModal = computed(() => {
-    return messageState?.showModal.value || props.modelValue
-})
-
-const modalLoading = computed(() => {
-    return messageState?.loading.value || props.loading
-})
-
-const modalOptions = computed(() => {
-    return messageState?.modalOptions || {}
-})
-
-watch(
-    () => props.loading,
-    () => {
-        load.value = props.loading
-    }
-)
-
-watch(
-    () => props.modelValue,
-    (newVal) => {
-        if (!newVal) load.value = false
-    }
-)
-
-/**
- * 点击确定按钮
- * */
-const confirmHandler = async () => {
-    if (modalLoading.value) return
-
-    // 优先使用注入的确认处理
-    if (messageState?.confirmHandler) {
-        messageState.confirmHandler()
-    } else {
-        // 如果配置了异步关闭，将按钮值为loading状态
-        emit('confirm')
-
-        await sleep()
-        if (!props.loading && props.autoClose) {
-            emit('update:modelValue', false)
-        }
-    }
-}
-
-/**
- * 点击取消按钮
- * */
-const cancelHandler = () => {
-    // 优先使用注入的取消处理
-    if (messageState?.cancelHandler) {
-        messageState.cancelHandler()
-    } else {
-        emit('update:modelValue', false)
-        emit('cancel')
-    }
-}
-
-/**
- * 点击遮罩
- * */
-const clickHandler = () => {
-    const closeOnClickOverlay = modalOptions.value.closeOnClickOverlay || props.closeOnClickOverlay
-
-    if (closeOnClickOverlay) {
-        // 优先使用注入的关闭处理
-        if (messageState?.closeHandler) {
-            messageState.closeHandler()
-        } else {
-            emit('update:modelValue', false)
-            emit('close')
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-.modal__content__text {
-    text-align: v-bind(contentTextAlign);
-}
-</style>
+<template>
+    <HyPopup
+        mode="center"
+        :zoom="modalOptions.zoom || zoom"
+        :show="showModal"
+        :round="modalOptions.round || round"
+        :customStyle="{
+            overflow: 'hidden',
+            marginTop: `-${addUnit(modalOptions.negativeTop || negativeTop)}`
+        }"
+        :closeOnClickOverlay="modalOptions.closeOnClickOverlay || closeOnClickOverlay"
+        :safeAreaInsetBottom="false"
+        :duration="400"
+        @click="clickHandler"
+    >
+        <view
+            class="hy-modal"
+            :style="{
+                width: addUnit(modalOptions.width || width)
+            }"
+        >
+            <view class="hy-modal__title" v-if="modalOptions.title || title">{{
+                modalOptions.title || title
+            }}</view>
+            <view
+                class="hy-modal__content"
+                :style="{
+                    paddingTop: `${modalOptions.title || title ? 12 : 25}px`,
+                    textAlign: modalOptions.contentTextAlign
+                }"
+            >
+                <slot v-if="$slots.default"></slot>
+                <text v-else class="hy-modal__content--text">
+                    {{ modalOptions.content || content }}
+                </text>
+            </view>
+            <view class="hy-modal__button--group__confirm-button" v-if="$slots.confirmButton">
+                <slot name="confirmButton"></slot>
+            </view>
+            <template v-else>
+                <view
+                    :class="[
+                        'hy-modal__button--group',
+                        (modalOptions.showCancelButton || showCancelButton) &&
+                            (modalOptions.showConfirmButton || showConfirmButton) &&
+                            (!(modalOptions.buttonReverse || buttonReverse)
+                                ? 'hy-modal__button--exact'
+                                : 'hy-modal__button--exact--reverse')
+                    ]"
+                    :style="{
+                        flexDirection:
+                            modalOptions.buttonReverse || buttonReverse ? 'row-reverse' : 'row'
+                    }"
+                >
+                    <view
+                        class="hy-modal__button--group__wrapper first hy-modal__button--group__wrapper--cancel"
+                        :hover-stay-time="150"
+                        hover-class="hy-modal__button--group__wrapper--hover"
+                        v-if="modalOptions.showCancelButton || showCancelButton"
+                        @tap.stop="cancelHandler"
+                    >
+                        <text
+                            class="hy-modal__button--group__wrapper--text hy-modal__button--group__wrapper--cancel__text"
+                            :style="{
+                                color: modalOptions.cancelColor || cancelColor
+                            }"
+                        >
+                            {{ modalOptions.cancelText || cancelText }}
+                        </text>
+                    </view>
+                    <view
+                        class="hy-modal__button--group__wrapper last hy-modal__button--group__wrapper--confirm"
+                        :hover-stay-time="150"
+                        hover-class="hy-modal__button--group__wrapper--hover"
+                        v-if="modalOptions.showConfirmButton || showConfirmButton"
+                        @tap="confirmHandler"
+                    >
+                        <hy-loading v-if="modalLoading" mode="circle"></hy-loading>
+                        <text
+                            v-else
+                            class="hy-modal__button--group__wrapper--text hy-modal__button--group__wrapper--confirm__text"
+                            :style="{
+                                color: modalOptions.confirmColor || confirmColor
+                            }"
+                        >
+                            {{ modalOptions.confirmText || confirmText }}
+                        </text>
+                    </view>
+                </view>
+            </template>
+        </view>
+    </HyPopup>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-modal',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import type { IModalEmits } from './typing'
+import { addUnit, sleep, useMessageInject } from '../../libs'
+import modalProps from './props'
+// 组件
+import HyPopup from '../hy-popup/hy-popup.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
+
+/**
+ * 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
+ * @displayName hy-modal
+ */
+defineOptions({})
+
+const props = defineProps(modalProps)
+const emit = defineEmits<IModalEmits>()
+const load = ref(props.loading)
+
+// 尝试从 useMessage 注入状态
+const messageState = useMessageInject()
+
+// 计算属性，优先使用注入的状态
+const showModal = computed(() => {
+    return messageState?.showModal.value || props.modelValue
+})
+
+const modalLoading = computed(() => {
+    return messageState?.loading.value || props.loading
+})
+
+const modalOptions = computed(() => {
+    return messageState?.modalOptions || {}
+})
+
+watch(
+    () => props.loading,
+    () => {
+        load.value = props.loading
+    }
+)
+
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        if (!newVal) load.value = false
+    }
+)
+
+/**
+ * 点击确定按钮
+ * */
+const confirmHandler = async () => {
+    if (modalLoading.value) return
+
+    // 优先使用注入的确认处理
+    if (messageState?.confirmHandler) {
+        messageState.confirmHandler()
+    } else {
+        // 如果配置了异步关闭，将按钮值为loading状态
+        emit('confirm')
+
+        await sleep()
+        if (!props.loading && props.autoClose) {
+            emit('update:modelValue', false)
+        }
+    }
+}
+
+/**
+ * 点击取消按钮
+ * */
+const cancelHandler = () => {
+    // 优先使用注入的取消处理
+    if (messageState?.cancelHandler) {
+        messageState.cancelHandler()
+    } else {
+        emit('update:modelValue', false)
+        emit('cancel')
+    }
+}
+
+/**
+ * 点击遮罩
+ * */
+const clickHandler = () => {
+    const closeOnClickOverlay = modalOptions.value.closeOnClickOverlay || props.closeOnClickOverlay
+
+    if (closeOnClickOverlay) {
+        // 优先使用注入的关闭处理
+        if (messageState?.closeHandler) {
+            messageState.closeHandler()
+        } else {
+            emit('update:modelValue', false)
+            emit('close')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+.modal__content__text {
+    text-align: v-bind(contentTextAlign);
+}
+</style>

package/components/hy-modal/props.ts

@@ -1,94 +1,94 @@
-import { useTranslate } from '../../libs'
-
-const { t } = useTranslate('modal')
-
-const modalProps = {
-    /** 是否显示模态框 */
-    modelValue: {
-        type: Boolean,
-        default: false
-    },
-    /** 标题内容 */
-    title: String,
-    /** 模态框内容，如传入slot内容，则此参数无效 */
-    content: String,
-    /** 确认按钮的文字 */
-    confirmText: {
-        type: String,
-        default: () => t('confirm')
-    },
-    /** 取消按钮的文字 */
-    cancelText: {
-        type: String,
-        default: () => t('cancel')
-    },
-    /** 是否显示确认按钮 */
-    showConfirmButton: {
-        type: Boolean,
-        default: true
-    },
-    /** 是否显示取消按钮 */
-    showCancelButton: {
-        type: Boolean,
-        default: false
-    },
-    /** 确认按钮的颜色 */
-    confirmColor: String,
-    /** 取消按钮的颜色 */
-    cancelColor: String,
-    /** 对调确认和取消的位置 */
-    buttonReverse: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否开启缩放模式 */
-    zoom: {
-        type: Boolean,
-        default: true
-    },
-    /** 弹窗的圆角 */
-    round: {
-        type: [String, Number],
-        default: 16
-    },
-    /** 点击确认按钮自动关闭 */
-    autoClose: {
-        type: Boolean,
-        default: true
-    },
-    /** 加载按钮 */
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否允许点击遮罩关闭Modal */
-    closeOnClickOverlay: {
-        type: Boolean,
-        default: false
-    },
-    /** 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 */
-    negativeTop: {
-        type: Number,
-        default: 0
-    },
-    /** modal宽度，不支持百分比，可以数值，px，rpx单位 */
-    width: {
-        type: [String, Number],
-        default: '550rpx'
-    },
-    /**
-     * 确认按钮的样式,如设置，将不会显示取消按钮
-     * @values circle,square
-     * */
-    confirmButtonShape: String,
-    /**
-     * 文案对齐方式
-     * @values left,center,right
-     * */
-    contentTextAlign: {
-        type: String,
-        default: 'left'
-    }
-} as const
-
-export default modalProps
+import { useTranslate } from '../../libs'
+
+const { t } = useTranslate('modal')
+
+const modalProps = {
+    /** 是否显示模态框 */
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    /** 标题内容 */
+    title: String,
+    /** 模态框内容，如传入slot内容，则此参数无效 */
+    content: String,
+    /** 确认按钮的文字 */
+    confirmText: {
+        type: String,
+        default: () => t('confirm')
+    },
+    /** 取消按钮的文字 */
+    cancelText: {
+        type: String,
+        default: () => t('cancel')
+    },
+    /** 是否显示确认按钮 */
+    showConfirmButton: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示取消按钮 */
+    showCancelButton: {
+        type: Boolean,
+        default: false
+    },
+    /** 确认按钮的颜色 */
+    confirmColor: String,
+    /** 取消按钮的颜色 */
+    cancelColor: String,
+    /** 对调确认和取消的位置 */
+    buttonReverse: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否开启缩放模式 */
+    zoom: {
+        type: Boolean,
+        default: true
+    },
+    /** 弹窗的圆角 */
+    round: {
+        type: [String, Number],
+        default: 16
+    },
+    /** 点击确认按钮自动关闭 */
+    autoClose: {
+        type: Boolean,
+        default: true
+    },
+    /** 加载按钮 */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否允许点击遮罩关闭Modal */
+    closeOnClickOverlay: {
+        type: Boolean,
+        default: false
+    },
+    /** 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 */
+    negativeTop: {
+        type: Number,
+        default: 0
+    },
+    /** modal宽度，不支持百分比，可以数值，px，rpx单位 */
+    width: {
+        type: [String, Number],
+        default: '550rpx'
+    },
+    /**
+     * 确认按钮的样式,如设置，将不会显示取消按钮
+     * @values circle,square
+     * */
+    confirmButtonShape: String,
+    /**
+     * 文案对齐方式
+     * @values left,center,right
+     * */
+    contentTextAlign: {
+        type: String,
+        default: 'left'
+    }
+} as const
+
+export default modalProps

package/components/hy-modal/typing.d.ts

@@ -1,16 +1,16 @@
-import type { ExtractPropTypes } from 'vue'
-import modalProps from '@/package/components/hy-modal/props'
-
-export interface HyModalProps extends ExtractPropTypes<typeof modalProps> {}
-
-export interface IModalEmits {
-    /** 点击确认按钮时触发 */
-    (e: 'confirm'): void
-    /** 点击取消按钮时触发 */
-    (e: 'cancel'): void
-    /** 点击遮罩关闭时触发 */
-    (e: 'close'): void
-    /** 更新值触发 */
-    (e: 'update:modelValue', show: boolean): void
-    (e: 'update:loading', show: boolean): void
-}
+import type { ExtractPropTypes } from 'vue'
+import modalProps from '@/package/components/hy-modal/props'
+
+export interface HyModalProps extends ExtractPropTypes<typeof modalProps> {}
+
+export interface IModalEmits {
+    /** 点击确认按钮时触发 */
+    (e: 'confirm'): void
+    /** 点击取消按钮时触发 */
+    (e: 'cancel'): void
+    /** 点击遮罩关闭时触发 */
+    (e: 'close'): void
+    /** 更新值触发 */
+    (e: 'update:modelValue', show: boolean): void
+    (e: 'update:loading', show: boolean): void
+}