hy-app 0.5.9 → 0.5.11

package/components/hy-grid/hy-grid.vue

@@ -1,109 +1,109 @@
-<template>
-    <view class="hy-grid" ref="hy-grid" :style="gridStyle">
-        <template v-for="(item, i) in list" :key="i">
-            <view
-                class="hy-grid__item"
-                hover-class="hy-grid__item--hover-class"
-                :hover-stay-time="200"
-                @tap="childClick(item)"
-                :style="itemStyle"
-            >
-                <slot v-if="$slots.default" :record="item"></slot>
-                <hy-icon
-                    v-else
-                    :name="item[customKeys?.icon]"
-                    label-pos="bottom"
-                    :label="item[customKeys?.name]"
-                    :space="item?.iconConfig?.space || iconConfig?.space || 8"
-                    :color="item?.iconConfig?.color || iconConfig?.color"
-                    :size="item?.iconConfig?.size || iconConfig?.size || 30"
-                    :bold="item?.iconConfig?.bold || iconConfig?.bold"
-                    :customPrefix="item?.iconConfig?.customPrefix"
-                    :imgMode="item?.iconConfig?.imgMode || iconConfig?.imgMode"
-                    :width="item?.iconConfig?.width || iconConfig?.width"
-                    :height="item?.iconConfig?.height || iconConfig?.height"
-                    :top="item?.iconConfig?.top || iconConfig?.top"
-                    :stop="item?.iconConfig?.stop || iconConfig?.stop"
-                    :round="item?.iconConfig?.round || iconConfig?.round || 6"
-                    :customStyle="item?.iconConfig?.customStyle || iconConfig?.customStyle"
-                ></hy-icon>
-            </view>
-        </template>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-grid',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { CSSProperties } from 'vue'
-import type { IGridEmits } from './typing'
-import { addUnit } from '../../libs'
-import gridProps from './props'
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-/**
- * 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式
- * @displayName hy-grid
- */
-defineOptions({})
-
-const props = defineProps(gridProps)
-const emit = defineEmits<IGridEmits>()
-
-/**
- * @description 宫格对齐方式
- * */
-const gridStyle = computed<CSSProperties>(() => {
-    let style: CSSProperties = {}
-    switch (props.align) {
-        case 'left':
-            style.justifyContent = 'flex-start'
-            break
-        case 'center':
-            style.justifyContent = 'center'
-            break
-        case 'right':
-            style.justifyContent = 'flex-end'
-            break
-        default:
-            style.justifyContent = 'flex-start'
-    }
-    return Object.assign(style, props.customStyle)
-})
-
-const itemStyle = computed<CSSProperties>(() => {
-    const style: CSSProperties = {
-        background: props.bgColor,
-        height: addUnit(props.itemHeight),
-        width: '100%',
-        border: props.border ? '0.5px solid #c8c7cc66' : ''
-    }
-    return style
-})
-
-/**
- * @description 点击事件
- * */
-const childClick = (temp: string | Record<string, any>) => {
-    emit('click', temp)
-}
-</script>
-
-<style lang="scss" scoped>
-.hy-grid {
-    grid-gap: v-bind(gap);
-    grid-template-columns: repeat(v-bind(col), 1fr);
-}
-@import './index.scss';
-</style>
+<template>
+    <view class="hy-grid" ref="hy-grid" :style="gridStyle">
+        <template v-for="(item, i) in list" :key="i">
+            <view
+                class="hy-grid__item"
+                hover-class="hy-grid__item--hover-class"
+                :hover-stay-time="200"
+                @tap="childClick(item)"
+                :style="itemStyle"
+            >
+                <slot v-if="$slots.default" :record="item"></slot>
+                <hy-icon
+                    v-else
+                    :name="item[customKeys?.icon]"
+                    label-pos="bottom"
+                    :label="item[customKeys?.name]"
+                    :space="item?.iconConfig?.space || iconConfig?.space || 8"
+                    :color="item?.iconConfig?.color || iconConfig?.color"
+                    :size="item?.iconConfig?.size || iconConfig?.size || 30"
+                    :bold="item?.iconConfig?.bold || iconConfig?.bold"
+                    :customPrefix="item?.iconConfig?.customPrefix"
+                    :imgMode="item?.iconConfig?.imgMode || iconConfig?.imgMode"
+                    :width="item?.iconConfig?.width || iconConfig?.width"
+                    :height="item?.iconConfig?.height || iconConfig?.height"
+                    :top="item?.iconConfig?.top || iconConfig?.top"
+                    :stop="item?.iconConfig?.stop || iconConfig?.stop"
+                    :round="item?.iconConfig?.round || iconConfig?.round || 6"
+                    :customStyle="item?.iconConfig?.customStyle || iconConfig?.customStyle"
+                ></hy-icon>
+            </view>
+        </template>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-grid',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { IGridEmits } from './typing'
+import { addUnit } from '../../libs'
+import gridProps from './props'
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式
+ * @displayName hy-grid
+ */
+defineOptions({})
+
+const props = defineProps(gridProps)
+const emit = defineEmits<IGridEmits>()
+
+/**
+ * @description 宫格对齐方式
+ * */
+const gridStyle = computed<CSSProperties>(() => {
+    let style: CSSProperties = {}
+    switch (props.align) {
+        case 'left':
+            style.justifyContent = 'flex-start'
+            break
+        case 'center':
+            style.justifyContent = 'center'
+            break
+        case 'right':
+            style.justifyContent = 'flex-end'
+            break
+        default:
+            style.justifyContent = 'flex-start'
+    }
+    return Object.assign(style, props.customStyle)
+})
+
+const itemStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {
+        background: props.bgColor,
+        height: addUnit(props.itemHeight),
+        width: '100%',
+        border: props.border ? '0.5px solid #c8c7cc66' : ''
+    }
+    return style
+})
+
+/**
+ * @description 点击事件
+ * */
+const childClick = (temp: string | Record<string, any>) => {
+    emit('click', temp)
+}
+</script>
+
+<style lang="scss" scoped>
+.hy-grid {
+    grid-gap: v-bind(gap);
+    grid-template-columns: repeat(v-bind(col), 1fr);
+}
+@import './index.scss';
+</style>

package/components/hy-grid/props.ts

@@ -1,60 +1,60 @@
-import type { CSSProperties, PropType } from 'vue'
-import type { HyIconProps } from '../hy-icon/typing'
-import type { CustomKeysVo, GridItemVo } from './typing'
-
-const gridProps = {
-    /** 数据列表 */
-    list: {
-        type: Array as PropType<(GridItemVo | string)[]>,
-        default: () => []
-    },
-    /** 自定义键值 */
-    customKeys: {
-        type: Object as PropType<CustomKeysVo>,
-        default: () => ({
-            name: 'name',
-            icon: 'icon'
-        })
-    },
-    /** 宫格的列数 */
-    col: {
-        type: Number,
-        default: 5
-    },
-    /** 是否显示宫格的边框 */
-    border: {
-        type: Boolean,
-        default: false
-    },
-    /** 单个宫格高度 */
-    itemHeight: {
-        type: [Number, String],
-        default: '80px'
-    },
-    /**
-     * 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
-     * @values left,center,right
-     * */
-    align: {
-        type: String,
-        default: 'left'
-    },
-    /** 间隔 */
-    gap: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 宫格的背景颜色 */
-    bgColor: {
-        type: String,
-        default: 'transparent'
-    },
-    /** 图标属性api配置集合 */
-    iconConfig: Object as PropType<HyIconProps>,
-    /** 定义需要用到的外部样式 */
-    customStyle: Object as PropType<CSSProperties>,
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default gridProps
+import type { CSSProperties, PropType } from 'vue'
+import type { HyIconProps } from '../hy-icon/typing'
+import type { CustomKeysVo, GridItemVo } from './typing'
+
+const gridProps = {
+    /** 数据列表 */
+    list: {
+        type: Array as PropType<(GridItemVo | string)[]>,
+        default: () => []
+    },
+    /** 自定义键值 */
+    customKeys: {
+        type: Object as PropType<CustomKeysVo>,
+        default: () => ({
+            name: 'name',
+            icon: 'icon'
+        })
+    },
+    /** 宫格的列数 */
+    col: {
+        type: Number,
+        default: 5
+    },
+    /** 是否显示宫格的边框 */
+    border: {
+        type: Boolean,
+        default: false
+    },
+    /** 单个宫格高度 */
+    itemHeight: {
+        type: [Number, String],
+        default: '80px'
+    },
+    /**
+     * 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
+     * @values left,center,right
+     * */
+    align: {
+        type: String,
+        default: 'left'
+    },
+    /** 间隔 */
+    gap: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 宫格的背景颜色 */
+    bgColor: {
+        type: String,
+        default: 'transparent'
+    },
+    /** 图标属性api配置集合 */
+    iconConfig: Object as PropType<HyIconProps>,
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default gridProps

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

@@ -1,35 +1,35 @@
-import type { HyIconProps } from '../hy-icon/typing'
-
-export interface GridItemVo {
-    /**
-     * @description 图标名称或图片地址
-     * */
-    icon?: string
-    /**
-     * @description 名称
-     * */
-    name?: string
-    /**
-     * @description 图标属性api配置
-     * */
-    iconConfig?: Partial<HyIconProps>
-    /**
-     * @description 自定义内容键值对
-     * */
-    [key: string]: any
-}
-export interface CustomKeysVo {
-    /**
-     * @description 自定义标题键名
-     * */
-    name: string
-    /**
-     * @description 自定义icon键名
-     * */
-    icon: string
-}
-
-export interface IGridEmits {
-    /** 点击小菜单触发 */
-    (e: 'click', name: string | Record<string, any>): void
-}
+import type { HyIconProps } from '../hy-icon/typing'
+
+export interface GridItemVo {
+    /**
+     * @description 图标名称或图片地址
+     * */
+    icon?: string
+    /**
+     * @description 名称
+     * */
+    name?: string
+    /**
+     * @description 图标属性api配置
+     * */
+    iconConfig?: Partial<HyIconProps>
+    /**
+     * @description 自定义内容键值对
+     * */
+    [key: string]: any
+}
+export interface CustomKeysVo {
+    /**
+     * @description 自定义标题键名
+     * */
+    name: string
+    /**
+     * @description 自定义icon键名
+     * */
+    icon: string
+}
+
+export interface IGridEmits {
+    /** 点击小菜单触发 */
+    (e: 'click', name: string | Record<string, any>): void
+}

package/components/hy-icon/hy-icon.vue

@@ -1,112 +1,112 @@
-<template>
-    <view :class="`hy-icon ${customClass} hy-icon--${labelPos}`" @tap="clickHandler">
-        <image
-            class="hy-icon__img"
-            v-if="isImg"
-            :src="name"
-            :mode="imgMode"
-            :style="[imgStyle, customStyle]"
-        ></image>
-        <text v-else :class="uClasses" :style="[iconStyle, customStyle]"></text>
-        <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
-        <text
-            v-if="label"
-            class="hy-icon__label"
-            :style="{
-                color: labelColor,
-                fontSize: addUnit(labelSize),
-                marginLeft: labelPos == 'right' ? addUnit(space) : 0,
-                marginTop: labelPos == 'bottom' ? addUnit(space) : 0
-            }"
-        >
-            {{ label }}
-        </text>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-icon',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { CSSProperties } from 'vue'
-import { addUnit } from '../../libs'
-import type { IIconEmits } from './typing'
-import iconProps from './props'
-
-/**
- * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
- * @displayName hy-icon
- */
-defineOptions({})
-
-const props = defineProps(iconProps)
-const emit = defineEmits<IIconEmits>()
-
-const uClasses = computed(() => {
-    let classes: string | string[] = [
-        'hy-icon__icon',
-        'iconfont',
-        `${props.customPrefix}-${props.name}`
-    ]
-    if (props.isRotate) classes.push('hy-rotate')
-    if (props.color)
-        // 主题色，通过类配置
-        classes.push('hy-icon__icon--' + props.color)
-    // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
-    // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
-    //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
-    classes = classes.join(' ')
-    //#endif
-    return classes
-})
-const iconStyle = computed<CSSProperties>(() => {
-    const style: CSSProperties = {
-        fontSize: addUnit(props.size),
-        lineHeight: addUnit(props.size),
-        fontWeight: props.bold ? 'bold' : 'normal',
-        // 某些特殊情况需要设置一个到顶部的距离，才能更好地垂直居中
-        top: addUnit(props.top),
-        borderRadius: addUnit(props.round),
-        color: props.color
-    }
-
-    return style
-})
-
-/**
- * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
- * */
-const isImg = computed(() => {
-    return props.name?.indexOf('/') !== -1
-})
-const imgStyle = computed((): CSSProperties => {
-    let style: CSSProperties = {}
-    // 如果设置width和height属性，则优先使用，否则使用size属性
-    style.width = props.width ? addUnit(props.width) : addUnit(props.size)
-    style.height = props.height ? addUnit(props.height) : addUnit(props.size)
-    style.borderRadius = addUnit(props.round)
-    return style
-})
-
-/**
- * @description 点击
- * */
-const clickHandler = (e: Event) => {
-    emit('click', props.index, e)
-    // 是否阻止事件冒泡
-    props.stop && e.stopPropagation()
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view :class="`hy-icon ${customClass} hy-icon--${labelPos}`" @tap="clickHandler">
+        <image
+            class="hy-icon__img"
+            v-if="isImg"
+            :src="name"
+            :mode="imgMode"
+            :style="[imgStyle, customStyle]"
+        ></image>
+        <text v-else :class="uClasses" :style="[iconStyle, customStyle]"></text>
+        <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
+        <text
+            v-if="label"
+            class="hy-icon__label"
+            :style="{
+                color: labelColor,
+                fontSize: addUnit(labelSize),
+                marginLeft: labelPos == 'right' ? addUnit(space) : 0,
+                marginTop: labelPos == 'bottom' ? addUnit(space) : 0
+            }"
+        >
+            {{ label }}
+        </text>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-icon',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit } from '../../libs'
+import type { IIconEmits } from './typing'
+import iconProps from './props'
+
+/**
+ * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
+ * @displayName hy-icon
+ */
+defineOptions({})
+
+const props = defineProps(iconProps)
+const emit = defineEmits<IIconEmits>()
+
+const uClasses = computed(() => {
+    let classes: string | string[] = [
+        'hy-icon__icon',
+        'iconfont',
+        `${props.customPrefix}-${props.name}`
+    ]
+    if (props.isRotate) classes.push('hy-rotate')
+    if (props.color)
+        // 主题色，通过类配置
+        classes.push('hy-icon__icon--' + props.color)
+    // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+    // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+    //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+    classes = classes.join(' ')
+    //#endif
+    return classes
+})
+const iconStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {
+        fontSize: addUnit(props.size),
+        lineHeight: addUnit(props.size),
+        fontWeight: props.bold ? 'bold' : 'normal',
+        // 某些特殊情况需要设置一个到顶部的距离，才能更好地垂直居中
+        top: addUnit(props.top),
+        borderRadius: addUnit(props.round),
+        color: props.color
+    }
+
+    return style
+})
+
+/**
+ * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+ * */
+const isImg = computed(() => {
+    return props.name?.indexOf('/') !== -1
+})
+const imgStyle = computed((): CSSProperties => {
+    let style: CSSProperties = {}
+    // 如果设置width和height属性，则优先使用，否则使用size属性
+    style.width = props.width ? addUnit(props.width) : addUnit(props.size)
+    style.height = props.height ? addUnit(props.height) : addUnit(props.size)
+    style.borderRadius = addUnit(props.round)
+    return style
+})
+
+/**
+ * @description 点击
+ * */
+const clickHandler = (e: Event) => {
+    emit('click', props.index, e)
+    // 是否阻止事件冒泡
+    props.stop && e.stopPropagation()
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-icon/index.scss

@@ -66,9 +66,6 @@
 
   @include e(label) {
     @include lineEllipsis;
-    /* #ifndef APP-NVUE */
-    line-height: 1;
-    /* #endif */
     color: $hy-text-color--grey;
     font-size: $hy-font-size-sm;
     max-width: 150rpx;