hy-app 0.5.10 → 0.5.12

package/components/hy-popover/props.ts

@@ -1,51 +1,51 @@
-import type { IOffset, IPlacementVo } from './typing'
-import type { CSSProperties, PropType } from 'vue'
-
-const popoverProps = {
-    /** 控制 popover 的显示状态 */
-    modelValue: {
-        type: Boolean,
-        default: false
-    },
-    /** 显示的内容，也可以通过 slot#content 传入 */
-    content: {
-        type: [String, Array] as PropType<string | any[]>
-    },
-    /**
-     * 指定 popover 的放置位置
-     * @values top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end
-     * */
-    placement: {
-        type: String,
-        default: 'bottom'
-    },
-    /** 控制 popover 的显示状态 */
-    offset: {
-        type: [Number, Array, Object] as PropType<IOffset>,
-        default: 0
-    },
-    /** 是否显示关闭按钮 */
-    showClose: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否禁用 popover */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 当前显示的模式，决定内容的展现形式
-     * @values normal,menu
-     * */
-    mode: {
-        type: String,
-        default: 'normal'
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: Object as PropType<CSSProperties>,
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default popoverProps
+import type { IOffset, IPlacementVo } from './typing'
+import type { CSSProperties, PropType } from 'vue'
+
+const popoverProps = {
+    /** 控制 popover 的显示状态 */
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    /** 显示的内容，也可以通过 slot#content 传入 */
+    content: {
+        type: [String, Array] as PropType<string | any[]>
+    },
+    /**
+     * 指定 popover 的放置位置
+     * @values top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end
+     * */
+    placement: {
+        type: String,
+        default: 'bottom'
+    },
+    /** 控制 popover 的显示状态 */
+    offset: {
+        type: [Number, Array, Object] as PropType<IOffset>,
+        default: 0
+    },
+    /** 是否显示关闭按钮 */
+    showClose: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否禁用 popover */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 当前显示的模式，决定内容的展现形式
+     * @values normal,menu
+     * */
+    mode: {
+        type: String,
+        default: 'normal'
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default popoverProps

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

@@ -1,39 +1,39 @@
-export type IPlacementVo =
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-export type IOffset = number | number[] | Record<'x' | 'y', number>
-
-export type PopoverExpose = {
-    open: () => void
-    close: () => void
-}
-export interface PopoverContentVo {
-    iconClass: string
-    content: string
-    icon: string
-}
-
-export type PopoverParamsVo = {
-    show: boolean
-}
-export type PopoverItemParamsVo = {
-    item: Record<string, any>
-    index: number
-}
-export interface IPopoverEmits {
-    (e: 'menuClick', params: PopoverItemParamsVo): void
-    (e: 'change', params: PopoverParamsVo): void
-    (e: 'open'): void
-    (e: 'close'): void
-    (e: 'update:modelValue', value: boolean): void
-}
+export type IPlacementVo =
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+export type IOffset = number | number[] | Record<'x' | 'y', number>
+
+export type PopoverExpose = {
+    open: () => void
+    close: () => void
+}
+export interface PopoverContentVo {
+    iconClass: string
+    content: string
+    icon: string
+}
+
+export type PopoverParamsVo = {
+    show: boolean
+}
+export type PopoverItemParamsVo = {
+    item: Record<string, any>
+    index: number
+}
+export interface IPopoverEmits {
+    (e: 'menuClick', params: PopoverItemParamsVo): void
+    (e: 'change', params: PopoverParamsVo): void
+    (e: 'open'): void
+    (e: 'close'): void
+    (e: 'update:modelValue', value: boolean): void
+}

package/components/hy-popup/hy-popup.vue

@@ -1,197 +1,197 @@
-<template>
-    <view class="hy-popup">
-        <hy-overlay
-            :show="show"
-            @click="overlayClick"
-            v-if="overlay"
-            :zIndex="zIndex"
-            :duration="overlayDuration"
-            :customStyle="overlayStyle"
-            :opacity="overlayOpacity"
-        ></hy-overlay>
-        <hy-transition
-            :show="show"
-            :customStyle="transitionStyle"
-            :mode="positionMode"
-            :duration="duration"
-            @afterEnter="afterEnter"
-            @click="clickHandler"
-        >
-            <!-- @click.stop不能去除，去除会导致居中模式下点击内容区域触发关闭弹窗 -->
-            <view class="hy-popup__content" @tap.stop :style="[contentStyle, customClass]">
-                <slot></slot>
-                <view
-                    v-if="closeable"
-                    @tap.stop="close"
-                    :class="[
-                        'hy-popup__content__close',
-                        'hy-popup__content__close--' + closeIconPos
-                    ]"
-                    hover-class="hy-popup__content__close--hover"
-                    hover-stay-time="150"
-                >
-                    <hy-icon :name="IconConfig.CLOSE" color="#909399" size="18" bold></hy-icon>
-                </view>
-                <!--        <hy-safe-bottom v-if="safeAreaInsetBottom"></hy-safe-bottom>-->
-            </view>
-        </hy-transition>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-popup',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import type { CSSProperties } from 'vue'
-import type { IPopupEmits } from './typing'
-import { addUnit, getWindowInfo, IconConfig } from '../../libs'
-import popupProps from './props'
-// 组件
-import HyTransition from '../hy-transition/hy-transition.vue'
-import HyOverlay from '../hy-overlay/hy-overlay.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-/**
- * 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。
- * @displayName hy-popup
- */
-defineOptions({})
-
-const props = defineProps(popupProps)
-const emit = defineEmits<IPopupEmits>()
-
-const overlayDuration = ref(props.duration + 50)
-
-watch(
-    () => props.show,
-    (newValue) => {
-        if (newValue) {
-            // #ifdef MP-WEIXIN
-            // const children = this.$children
-            // retryComputedComponentRect(children)
-            // #endif
-        }
-    }
-)
-
-const transitionStyle = computed(() => {
-    const style: CSSProperties = {
-        zIndex: props.zIndex,
-        position: 'fixed',
-        display: 'flex'
-    }
-    if (props.mode !== 'center') {
-        style[props.mode] = 0
-    }
-    switch (props.mode) {
-        case 'left':
-        case 'right':
-            style.bottom = 0
-            style.top = 0
-            break
-        case 'top':
-        case 'bottom':
-            style.left = 0
-            style.right = 0
-            break
-        case 'center':
-            Object.assign(style, {
-                alignItems: 'center',
-                'justify-content': 'center',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0
-            })
-            break
-        default:
-            break
-    }
-
-    return style
-})
-const contentStyle = computed(() => {
-    const style: CSSProperties = {}
-    // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
-    // 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
-    const { safeAreaInsets } = getWindowInfo()
-    if (props.mode !== 'center') {
-        style.flex = 1
-    }
-    // 背景色，一般用于设置为transparent，去除默认的白色背景
-    if (props.bgColor) {
-        style.backgroundColor = props.bgColor
-    }
-    if (props.round) {
-        const value = addUnit(props.round)
-        switch (props.mode) {
-            case 'top':
-                style.borderBottomLeftRadius = value
-                style.borderBottomRightRadius = value
-                break
-            case 'bottom':
-                style.borderTopLeftRadius = value
-                style.borderTopRightRadius = value
-                break
-            case 'center':
-                style.borderRadius = value
-                break
-            default:
-                break
-        }
-    }
-    return Object.assign(style, props.customStyle)
-})
-const positionMode = computed(() => {
-    if (props.mode === 'center') {
-        return props.zoom ? 'fade-zoom' : 'fade'
-    }
-    if (props.mode === 'left') {
-        return 'slide-left'
-    }
-    if (props.mode === 'right') {
-        return 'slide-right'
-    }
-    if (props.mode === 'bottom') {
-        return 'slide-up'
-    }
-    if (props.mode === 'top') {
-        return 'slide-down'
-    }
-})
-
-// 点击遮罩
-const overlayClick = () => {
-    if (props.closeOnClickOverlay) {
-        emit('update:show', false)
-        emit('close')
-    }
-}
-const close = () => {
-    emit('update:show', false)
-    emit('close')
-}
-const afterEnter = () => {
-    emit('open')
-}
-const clickHandler = () => {
-    // 由于中部弹出时，其transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
-    if (props.mode === 'center') {
-        overlayClick()
-    }
-    emit('click')
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view class="hy-popup">
+        <hy-overlay
+            :show="show"
+            @click="overlayClick"
+            v-if="overlay"
+            :zIndex="zIndex"
+            :duration="overlayDuration"
+            :customStyle="overlayStyle"
+            :opacity="overlayOpacity"
+        ></hy-overlay>
+        <hy-transition
+            :show="show"
+            :customStyle="transitionStyle"
+            :mode="positionMode"
+            :duration="duration"
+            @afterEnter="afterEnter"
+            @click="clickHandler"
+        >
+            <!-- @click.stop不能去除，去除会导致居中模式下点击内容区域触发关闭弹窗 -->
+            <view class="hy-popup__content" @tap.stop :style="[contentStyle, customClass]">
+                <slot></slot>
+                <view
+                    v-if="closeable"
+                    @tap.stop="close"
+                    :class="[
+                        'hy-popup__content__close',
+                        'hy-popup__content__close--' + closeIconPos
+                    ]"
+                    hover-class="hy-popup__content__close--hover"
+                    hover-stay-time="150"
+                >
+                    <hy-icon :name="IconConfig.CLOSE" color="#909399" size="18" bold></hy-icon>
+                </view>
+                <!--        <hy-safe-bottom v-if="safeAreaInsetBottom"></hy-safe-bottom>-->
+            </view>
+        </hy-transition>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-popup',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { IPopupEmits } from './typing'
+import { addUnit, getWindowInfo, IconConfig } from '../../libs'
+import popupProps from './props'
+// 组件
+import HyTransition from '../hy-transition/hy-transition.vue'
+import HyOverlay from '../hy-overlay/hy-overlay.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。
+ * @displayName hy-popup
+ */
+defineOptions({})
+
+const props = defineProps(popupProps)
+const emit = defineEmits<IPopupEmits>()
+
+const overlayDuration = ref(props.duration + 50)
+
+watch(
+    () => props.show,
+    (newValue) => {
+        if (newValue) {
+            // #ifdef MP-WEIXIN
+            // const children = this.$children
+            // retryComputedComponentRect(children)
+            // #endif
+        }
+    }
+)
+
+const transitionStyle = computed(() => {
+    const style: CSSProperties = {
+        zIndex: props.zIndex,
+        position: 'fixed',
+        display: 'flex'
+    }
+    if (props.mode !== 'center') {
+        style[props.mode] = 0
+    }
+    switch (props.mode) {
+        case 'left':
+        case 'right':
+            style.bottom = 0
+            style.top = 0
+            break
+        case 'top':
+        case 'bottom':
+            style.left = 0
+            style.right = 0
+            break
+        case 'center':
+            Object.assign(style, {
+                alignItems: 'center',
+                'justify-content': 'center',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0
+            })
+            break
+        default:
+            break
+    }
+
+    return style
+})
+const contentStyle = computed(() => {
+    const style: CSSProperties = {}
+    // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
+    // 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
+    const { safeAreaInsets } = getWindowInfo()
+    if (props.mode !== 'center') {
+        style.flex = 1
+    }
+    // 背景色，一般用于设置为transparent，去除默认的白色背景
+    if (props.bgColor) {
+        style.backgroundColor = props.bgColor
+    }
+    if (props.round) {
+        const value = addUnit(props.round)
+        switch (props.mode) {
+            case 'top':
+                style.borderBottomLeftRadius = value
+                style.borderBottomRightRadius = value
+                break
+            case 'bottom':
+                style.borderTopLeftRadius = value
+                style.borderTopRightRadius = value
+                break
+            case 'center':
+                style.borderRadius = value
+                break
+            default:
+                break
+        }
+    }
+    return Object.assign(style, props.customStyle)
+})
+const positionMode = computed(() => {
+    if (props.mode === 'center') {
+        return props.zoom ? 'fade-zoom' : 'fade'
+    }
+    if (props.mode === 'left') {
+        return 'slide-left'
+    }
+    if (props.mode === 'right') {
+        return 'slide-right'
+    }
+    if (props.mode === 'bottom') {
+        return 'slide-up'
+    }
+    if (props.mode === 'top') {
+        return 'slide-down'
+    }
+})
+
+// 点击遮罩
+const overlayClick = () => {
+    if (props.closeOnClickOverlay) {
+        emit('update:show', false)
+        emit('close')
+    }
+}
+const close = () => {
+    emit('update:show', false)
+    emit('close')
+}
+const afterEnter = () => {
+    emit('open')
+}
+const clickHandler = () => {
+    // 由于中部弹出时，其transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
+    if (props.mode === 'center') {
+        overlayClick()
+    }
+    emit('click')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>