hy-app 0.5.9 → 0.5.11

package/components/hy-avatar/props.ts

@@ -1,78 +1,78 @@
-import type { CSSProperties, PropType } from 'vue'
-
-const avatarProps = {
-    /** 头像路径 */
-    src: String,
-    /**
-     * 头像形状
-     * @values circle,square
-     * */
-    shape: {
-        type: String,
-        default: 'circle'
-    },
-    /**
-     * 头像尺寸
-     * @values large, medium, small
-     * */
-    size: {
-        type: [String, Number],
-        default: 'medium'
-    },
-    /**
-     * 头像图片的裁剪类型
-     * @values scaleToFill,aspectFit,aspectFill,widthFix,heightFix,top,bottom,center,left,right,top left,top right,bottom left,bottom right
-     * */
-    mode: {
-        type: String,
-        default: 'scaleToFill'
-    },
-    /** 用文字替代图片，级别优先于src */
-    text: String,
-    /** 头像背景颜色 */
-    bgColor: {
-        type: String,
-        default: '#c0c4cc'
-    },
-    /** 文字颜色 */
-    color: {
-        type: String,
-        default: '#ffffff'
-    },
-    /** 文字大小 */
-    fontSize: {
-        type: Number,
-        default: 18
-    },
-    /** 显示的图标 */
-    icon: String,
-    /** 显示小程序头像，只对百度，微信，QQ小程序有效 */
-    mpAvatar: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否使用随机背景色 */
-    randomBgColor: {
-        type: Boolean,
-        default: false
-    },
-    /** 加载失败的默认头像(组件有内置默认图片) */
-    defaultUrl: String,
-    /** 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间 */
-    colorIndex: {
-        type: Number,
-        default: 0
-    },
-    /** 组件标识符 */
-    name: {
-        type: String,
-        default: ''
-    },
-    /** 自定义输入框外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: () => {}
-    }
-}
-
-export default avatarProps
+import type { CSSProperties, PropType } from 'vue'
+
+const avatarProps = {
+    /** 头像路径 */
+    src: String,
+    /**
+     * 头像形状
+     * @values circle,square
+     * */
+    shape: {
+        type: String,
+        default: 'circle'
+    },
+    /**
+     * 头像尺寸
+     * @values large, medium, small
+     * */
+    size: {
+        type: [String, Number],
+        default: 'medium'
+    },
+    /**
+     * 头像图片的裁剪类型
+     * @values scaleToFill,aspectFit,aspectFill,widthFix,heightFix,top,bottom,center,left,right,top left,top right,bottom left,bottom right
+     * */
+    mode: {
+        type: String,
+        default: 'scaleToFill'
+    },
+    /** 用文字替代图片，级别优先于src */
+    text: String,
+    /** 头像背景颜色 */
+    bgColor: {
+        type: String,
+        default: '#c0c4cc'
+    },
+    /** 文字颜色 */
+    color: {
+        type: String,
+        default: '#ffffff'
+    },
+    /** 文字大小 */
+    fontSize: {
+        type: Number,
+        default: 18
+    },
+    /** 显示的图标 */
+    icon: String,
+    /** 显示小程序头像，只对百度，微信，QQ小程序有效 */
+    mpAvatar: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否使用随机背景色 */
+    randomBgColor: {
+        type: Boolean,
+        default: false
+    },
+    /** 加载失败的默认头像(组件有内置默认图片) */
+    defaultUrl: String,
+    /** 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间 */
+    colorIndex: {
+        type: Number,
+        default: 0
+    },
+    /** 组件标识符 */
+    name: {
+        type: String,
+        default: ''
+    },
+    /** 自定义输入框外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => {}
+    }
+}
+
+export default avatarProps

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

@@ -1,4 +1,4 @@
-export interface IAvatarEmit {
-    /** 点击头像触发 */
-    (e: 'click', name: string, e: Event): void
-}
+export interface IAvatarEmit {
+    /** 点击头像触发 */
+    (e: 'click', name: string, e: Event): void
+}

package/components/hy-back-top/hy-back-top.vue

@@ -1,90 +1,90 @@
-<template>
-    <hy-transition mode="fade" :customStyle="backTopStyle" :show="show">
-        <view class="hy-back-top" :style="contentStyle" @click="backToTop">
-            <!-- @slot 默认插槽 -->
-            <slot v-if="$slots.default"></slot>
-            <template v-else>
-                <hy-icon
-                    :name="icon?.name || IconConfig.DOWNLOAD"
-                    :color="icon?.color"
-                    :size="icon?.size"
-                    :bold="icon?.bold"
-                    :customPrefix="icon?.customPrefix"
-                    :imgMode="icon?.imgMode"
-                    :width="icon?.width"
-                    :height="icon?.height"
-                    :top="icon?.top"
-                    :stop="icon?.stop"
-                    :round="icon?.round"
-                    :customStyle="icon?.customStyle"
-                ></hy-icon>
-                <text v-if="text" class="hy-back-top__text">{{ text }}</text>
-            </template>
-        </view>
-    </hy-transition>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-back-top',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { CSSProperties } from 'vue'
-import { IconConfig, addUnit, getPx } from '../../libs'
-import type { IBackTopEmit } from './typing'
-import backTopProps from './props'
-// 组件
-import HyTransition from '../hy-transition/hy-transition.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-/**
- * 该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
- * @displayName hy-back-top
- */
-defineOptions({})
-
-const props = defineProps(backTopProps)
-const emit = defineEmits<IBackTopEmit>()
-
-const backTopStyle = computed<CSSProperties>(() => {
-    return {
-        bottom: addUnit(props.bottom),
-        right: addUnit(props.right),
-        width: '40px',
-        height: '40px',
-        position: 'fixed',
-        zIndex: 10
-    }
-})
-const contentStyle = computed<CSSProperties>(() => {
-    const style: CSSProperties = {
-        borderRadius: props.mode === 'circle' ? '50%' : '4px'
-    }
-    return Object.assign(style, props.customStyle)
-})
-const show = computed<boolean>(() => {
-    return getPx(props.scrollTop) > getPx(props.top)
-})
-const backToTop = () => {
-    uni.pageScrollTo({
-        scrollTop: 0,
-        // #ifndef MP-ALIPAY
-        // 支付宝不支持duration属性
-        duration: props.duration
-        // #endif
-    })
-    emit('click')
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <hy-transition mode="fade" :customStyle="backTopStyle" :show="show">
+        <view class="hy-back-top" :style="contentStyle" @click="backToTop">
+            <!-- @slot 默认插槽 -->
+            <slot v-if="$slots.default"></slot>
+            <template v-else>
+                <hy-icon
+                    :name="icon?.name || IconConfig.DOWNLOAD"
+                    :color="icon?.color"
+                    :size="icon?.size"
+                    :bold="icon?.bold"
+                    :customPrefix="icon?.customPrefix"
+                    :imgMode="icon?.imgMode"
+                    :width="icon?.width"
+                    :height="icon?.height"
+                    :top="icon?.top"
+                    :stop="icon?.stop"
+                    :round="icon?.round"
+                    :customStyle="icon?.customStyle"
+                ></hy-icon>
+                <text v-if="text" class="hy-back-top__text">{{ text }}</text>
+            </template>
+        </view>
+    </hy-transition>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-back-top',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { IconConfig, addUnit, getPx } from '../../libs'
+import type { IBackTopEmit } from './typing'
+import backTopProps from './props'
+// 组件
+import HyTransition from '../hy-transition/hy-transition.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * 该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
+ * @displayName hy-back-top
+ */
+defineOptions({})
+
+const props = defineProps(backTopProps)
+const emit = defineEmits<IBackTopEmit>()
+
+const backTopStyle = computed<CSSProperties>(() => {
+    return {
+        bottom: addUnit(props.bottom),
+        right: addUnit(props.right),
+        width: '40px',
+        height: '40px',
+        position: 'fixed',
+        zIndex: 10
+    }
+})
+const contentStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {
+        borderRadius: props.mode === 'circle' ? '50%' : '4px'
+    }
+    return Object.assign(style, props.customStyle)
+})
+const show = computed<boolean>(() => {
+    return getPx(props.scrollTop) > getPx(props.top)
+})
+const backToTop = () => {
+    uni.pageScrollTo({
+        scrollTop: 0,
+        // #ifndef MP-ALIPAY
+        // 支付宝不支持duration属性
+        duration: props.duration
+        // #endif
+    })
+    emit('click')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-back-top/props.ts

@@ -1,60 +1,60 @@
-import type { CSSProperties, PropType } from 'vue'
-import type { HyIconProps } from '../hy-icon/typing'
-
-const backTopProps = {
-    /**
-     * 返回顶部的形状
-     * @values circle,square
-     * */
-    mode: {
-        type: String,
-        default: 'circle'
-    },
-    /** 自定义图标属性集合 */
-    icon: {
-        type: Object as PropType<HyIconProps>
-    },
-    /** 提示文字 */
-    text: String,
-    /** 返回顶部滚动时间 */
-    duration: {
-        type: Number,
-        default: 500
-    },
-    /** 滚动距离 */
-    scrollTop: {
-        type: Number,
-        default: 0
-    },
-    /** 距离顶部多少距离显示，单位px */
-    top: {
-        type: Number,
-        default: 400
-    },
-    /** 返回顶部按钮到底部的距离，单位px */
-    bottom: {
-        type: Number,
-        default: 100
-    },
-    /** 返回顶部按钮到右边的距离，单位px */
-    right: {
-        type: Number,
-        default: 20
-    },
-    /** 层级 */
-    zIndex: {
-        type: Number,
-        default: 888
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: () => ({
-            transform: 'rotate(180deg)'
-        })
-    },
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default backTopProps
+import type { CSSProperties, PropType } from 'vue'
+import type { HyIconProps } from '../hy-icon/typing'
+
+const backTopProps = {
+    /**
+     * 返回顶部的形状
+     * @values circle,square
+     * */
+    mode: {
+        type: String,
+        default: 'circle'
+    },
+    /** 自定义图标属性集合 */
+    icon: {
+        type: Object as PropType<HyIconProps>
+    },
+    /** 提示文字 */
+    text: String,
+    /** 返回顶部滚动时间 */
+    duration: {
+        type: Number,
+        default: 500
+    },
+    /** 滚动距离 */
+    scrollTop: {
+        type: Number,
+        default: 0
+    },
+    /** 距离顶部多少距离显示，单位px */
+    top: {
+        type: Number,
+        default: 400
+    },
+    /** 返回顶部按钮到底部的距离，单位px */
+    bottom: {
+        type: Number,
+        default: 100
+    },
+    /** 返回顶部按钮到右边的距离，单位px */
+    right: {
+        type: Number,
+        default: 20
+    },
+    /** 层级 */
+    zIndex: {
+        type: Number,
+        default: 888
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => ({
+            transform: 'rotate(180deg)'
+        })
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default backTopProps

package/components/hy-back-top/typing.d.ts

@@ -1,4 +1,4 @@
-export interface IBackTopEmit {
-    /** 点击触发 */
-    (e: 'click'): void
-}
+export interface IBackTopEmit {
+    /** 点击触发 */
+    (e: 'click'): void
+}

package/components/hy-badge/hy-badge.vue

@@ -1,97 +1,97 @@
-<template>
-    <text
-        v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
-        :class="[
-            'hy-badge',
-            isDot ? 'hy-badge--dot' : 'hy-badge--not-dot',
-            inverted && 'hy-badge--inverted',
-            shape === 'horn' && 'hy-badge--horn',
-            `hy-badge--${type}${inverted ? '--inverted' : ''}`,
-            customClass
-        ]"
-        :style="[customStyle, badgeStyle]"
-        @tap="onClick"
-    >
-        {{ isDot ? '' : showValue }}
-    </text>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-badge',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { CSSProperties } from 'vue'
-import type { IBadgeEmit } from './typing'
-import { addUnit } from '../../libs'
-import badgeProps from './props'
-
-/**
- * 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
- * @displayName hy-badge
- */
-defineOptions({})
-
-const props = defineProps(badgeProps)
-const emit = defineEmits<IBadgeEmit>()
-
-/**
- * @description 整个组件的样式
- * */
-const badgeStyle = computed<CSSProperties>(() => {
-    const style: CSSProperties = {
-        zIndex: props.zIndex,
-        color: props.color
-    }
-    if (props.bgColor && !props.inverted) {
-        style.backgroundColor = props.bgColor
-    }
-    if (props.absolute) {
-        style.position = 'absolute'
-        // 如果有设置offset参数
-        if (props.offset && Array.isArray(props.offset)) {
-            // top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
-            const top = props.offset[0]
-            const right = props.offset[1] || top
-            style.top = addUnit(top)
-            style.left = addUnit(right)
-        }
-    }
-    return style
-})
-/**
- * @description 显示值
- * */
-const showValue = computed(() => {
-    switch (props.numberType) {
-        case 'overflow':
-            return Number(props.value) > Number(props.max) ? props.max + '+' : props.value
-        case 'ellipsis':
-            return Number(props.value) > Number(props.max) ? '...' : props.value
-        case 'limit':
-            return Number(props.value) > 999
-                ? Number(props.value) >= 9999
-                    ? Math.floor((props.value / 1e4) * 100) / 100 + 'w'
-                    : Math.floor((props.value / 1e3) * 100) / 100 + 'k'
-                : props.value
-        default:
-            return Number(props.value)
-    }
-})
-
-const onClick = (e: Event) => {
-    emit('click', e)
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <text
+        v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
+        :class="[
+            'hy-badge',
+            isDot ? 'hy-badge--dot' : 'hy-badge--not-dot',
+            inverted && 'hy-badge--inverted',
+            shape === 'horn' && 'hy-badge--horn',
+            `hy-badge--${type}${inverted ? '--inverted' : ''}`,
+            customClass
+        ]"
+        :style="[customStyle, badgeStyle]"
+        @tap="onClick"
+    >
+        {{ isDot ? '' : showValue }}
+    </text>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-badge',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { IBadgeEmit } from './typing'
+import { addUnit } from '../../libs'
+import badgeProps from './props'
+
+/**
+ * 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
+ * @displayName hy-badge
+ */
+defineOptions({})
+
+const props = defineProps(badgeProps)
+const emit = defineEmits<IBadgeEmit>()
+
+/**
+ * @description 整个组件的样式
+ * */
+const badgeStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {
+        zIndex: props.zIndex,
+        color: props.color
+    }
+    if (props.bgColor && !props.inverted) {
+        style.backgroundColor = props.bgColor
+    }
+    if (props.absolute) {
+        style.position = 'absolute'
+        // 如果有设置offset参数
+        if (props.offset && Array.isArray(props.offset)) {
+            // top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
+            const top = props.offset[0]
+            const right = props.offset[1] || top
+            style.top = addUnit(top)
+            style.left = addUnit(right)
+        }
+    }
+    return style
+})
+/**
+ * @description 显示值
+ * */
+const showValue = computed(() => {
+    switch (props.numberType) {
+        case 'overflow':
+            return Number(props.value) > Number(props.max) ? props.max + '+' : props.value
+        case 'ellipsis':
+            return Number(props.value) > Number(props.max) ? '...' : props.value
+        case 'limit':
+            return Number(props.value) > 999
+                ? Number(props.value) >= 9999
+                    ? Math.floor((props.value / 1e4) * 100) / 100 + 'w'
+                    : Math.floor((props.value / 1e3) * 100) / 100 + 'k'
+                : props.value
+        default:
+            return Number(props.value)
+    }
+})
+
+const onClick = (e: Event) => {
+    emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>