hy-app 0.6.5 → 0.6.7

package/components/hy-datetime-picker/typing.d.ts

@@ -17,4 +17,6 @@ export interface IDatetimePickerEmits {
     (e: 'change', param: IParam): void
     /** 更新值触发 */
     (e: 'update:modelValue', value: IParam['value']): void
+    /** 更新值关闭值 */
+    (e: 'update:show', value: boolean): void
 }

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

@@ -2,7 +2,7 @@
     <view class="hy-grid" ref="hy-grid" :style="gridStyle">
         <template v-for="(item, i) in list" :key="i">
             <view
-                class="hy-grid__item"
+                :class="getItemClass(i)"
                 hover-class="hy-grid__item--hover-class"
                 :hover-stay-time="200"
                 @tap="childClick(item)"
@@ -46,7 +46,7 @@ export default {
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { CSSProperties } from 'vue'
-import type { IGridEmits } from './typing'
+import type { GridItemVo, IGridEmits } from './typing'
 import { addUnit } from '../../libs'
 import gridProps from './props'
 // 组件
@@ -62,10 +62,13 @@ const props = defineProps(gridProps)
 const emit = defineEmits<IGridEmits>()
 
 /**
- * @description 宫格对齐方式
+ * 宫格对齐方式
  * */
 const gridStyle = computed<CSSProperties>(() => {
-    let style: CSSProperties = {}
+    let style: CSSProperties = {
+        gap: addUnit(props.gap),
+        gridTemplateColumns: `repeat(${props.col}, 1fr)`
+    }
     switch (props.align) {
         case 'left':
             style.justifyContent = 'flex-start'
@@ -86,24 +89,42 @@ const itemStyle = computed<CSSProperties>(() => {
     const style: CSSProperties = {
         background: props.bgColor,
         height: addUnit(props.itemHeight),
-        width: '100%',
-        border: props.border ? '0.5px solid #c8c7cc66' : ''
+        width: '100%'
     }
     return style
 })
 
 /**
- * @description 点击事件
+ * 获取宫格项的类名
+ * @param index 当前项的索引
+ * @returns 类名数组
+ */
+const getItemClass = computed(() => {
+    return (index: number): string[] => {
+        const classes: string[] = ['hy-grid__item']
+        if (props.border) {
+            classes.push('hy-grid__item--border')
+            // 判断是否为最后一列
+            if (index % props.col === props.col - 1) {
+                classes.push('hy-grid__item--border__last-col')
+            }
+            // 判断是否为最后一行
+            if (index >= props.list.length - props.col) {
+                classes.push('hy-grid__item--border__last-row')
+            }
+        }
+        return classes
+    }
+})
+
+/**
+ * 点击事件
  * */
-const childClick = (temp: string | Record<string, any>) => {
+const childClick = (temp: string | GridItemVo) => {
     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/index.scss

@@ -11,6 +11,7 @@
   /* #ifndef APP-NVUE */
   display: grid;
   /* #endif */
+
   @include e(item) {
     align-items: center;
     justify-content: center;
@@ -27,6 +28,23 @@
     float: left;
     /* #endif */
 
+    // 只有当有 border 类时才显示边框
+    @include m(border) {
+      // 添加右边框和下边框
+      border-right: $hy-border-line;
+      border-bottom: $hy-border-line;
+  
+      // 最后一列不显示右边框
+      @include e(last-col) {
+        border-right: none;
+      }
+  
+      // 最后一行不显示下边框
+      @include e(last-row) {
+        border-bottom: none;
+      }
+    }
+
     @include m(hover-class) {
       opacity: 0.7;
     }

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

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

package/components/hy-menu/hy-menu.vue

@@ -1,159 +1,117 @@
-<template>
-    <view class="hy-menu" :style="{ width: addUnit(width) }">
-        <template v-for="(item, i) in list">
-            <view
-                @click="handleClick(item, i)"
-                :class="menuItemClass(item, i)"
-                :style="customStyle"
-            >
-                <template v-if="item.icon">
-                    <slot v-if="$slots.icon" name="icon" :value="item.icon"></slot>
-                    <hy-icon
-                        v-else
-                        class="hy-menu__item__icon"
-                        :name="item.icon"
-                        :color="current === i ? color || 'var(--hy-theme-color)' : ''"
-                        :size="icon?.size || 16"
-                        :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 || { marginRight: '2px' }"
-                    ></hy-icon>
-                </template>
-                <slot v-if="$slots.default"></slot>
-                <text v-else class="hy-menu__item--title">{{ item.title }}</text>
-                <hy-badge
-                    :value="item?.badge"
-                    :offset="badge?.offset"
-                    :shape="badge?.shape"
-                    :color="badge?.color"
-                    :bg-color="badge?.bgColor"
-                    :inverted="badge?.inverted"
-                    :type="badge?.type"
-                    :number-type="badge?.numberType"
-                    :is-dot="badge?.isDot"
-                    :absolute="badge?.absolute"
-                    :max="badge?.max"
-                    :show-zero="badge?.showZero"
-                    :custom-style="badge?.customStyle"
-                ></hy-badge>
-            </view>
-        </template>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-menu',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import type { IMenuEmits, MenusType } from './typing'
-import { addUnit } from '../../libs'
-import menuProps from './props'
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HyBadge from '../hy-badge/hy-badge.vue'
-
-/**
- * 垂直展示的导航栏，用于在不同的内容区域之间进行切换。
- * @displayName hy-menu
- */
-defineOptions({})
-
-const props = defineProps(menuProps)
-const emit = defineEmits<IMenuEmits>()
-
-const current = ref<string | number>(0)
-
-watch(
-    () => props.modelValue,
-    (newVal) => {
-        if (newVal) current.value = newVal
-    },
-    { immediate: true }
-)
-
-const menuItemClass = computed(() => {
-    return (temp: MenusType, i: number) => {
-        const classes = [
-            'hy-menu__item',
-            prefix.value && 'hy-menu__item--prefix',
-            suffix.value && 'hy-menu__item--suffix',
-            temp.disabled && 'hy-menu__item--disabled'
-        ]
-        if (current.value === temp[props.id]) {
-            classes.push('hy-menu__item--active', props.color && 'hy-menu__item--active__color')
-        }
-
-        return classes
-    }
-})
-
-const prefix = computed(() => {
-    let prefix: boolean = false
-    // if (sidebar) {
-    //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
-    //     return c.value === sidebar.props.modelValue;
-    //   });
-    //
-    //   let currentIndex: number = sidebar.children.findIndex((c: any) => {
-    //     return c.value === props.value;
-    //   });
-    //
-    //   if (currentIndex === activeIndex - 1) {
-    //     prefix = true;
-    //   }
-    // }
-    return prefix
-})
-
-const suffix = computed(() => {
-    let suffix: boolean = false
-    // if (sidebar) {
-    //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
-    //     return c.value === sidebar.props.modelValue;
-    //   });
-    //
-    //   let currentIndex: number = sidebar.children.findIndex((c: any) => {
-    //     return c.value === props.value;
-    //   });
-    //
-    //   if (currentIndex === activeIndex + 1) {
-    //     suffix = true;
-    //   }
-    // }
-    return suffix
-})
-
-function handleClick(temp: MenusType, i: number) {
-    if (temp?.disabled) {
-        return
-    }
-    current.value = i
-    emit('update:modelValue', temp.id)
-    emit('change', temp)
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-.hy-menu__item--active__color {
-    color: v-bind(color);
-    &::before {
-        background: v-bind(color);
-    }
-}
-</style>
+<template>
+    <view class="hy-menu" :style="{ width: addUnit(width) }">
+        <template v-for="(item, i) in list">
+            <view @click="handleClick(item, i)" :class="menuItemClass(item)" :style="customStyle">
+                <template v-if="item.icon">
+                    <slot v-if="$slots.icon" name="icon" :value="item.icon"></slot>
+                    <hy-icon
+                        v-else
+                        class="hy-menu__item__icon"
+                        :name="item.icon"
+                        :color="current === i ? color || 'var(--hy-theme-color)' : ''"
+                        :size="icon?.size || 16"
+                        :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 || { marginRight: '2px' }"
+                    ></hy-icon>
+                </template>
+                <slot v-if="$slots.default"></slot>
+                <text v-else class="hy-menu__item--title">{{ item.title }}</text>
+                <hy-badge
+                    :value="item?.badge"
+                    :offset="badge?.offset"
+                    :shape="badge?.shape"
+                    :color="badge?.color"
+                    :bg-color="badge?.bgColor"
+                    :inverted="badge?.inverted"
+                    :type="badge?.type"
+                    :number-type="badge?.numberType"
+                    :is-dot="badge?.isDot"
+                    :absolute="badge?.absolute"
+                    :max="badge?.max"
+                    :show-zero="badge?.showZero"
+                    :custom-style="badge?.customStyle"
+                ></hy-badge>
+            </view>
+        </template>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-menu',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import type { IMenuEmits, MenuParamsVo } from './typing'
+import { addUnit } from '../../libs'
+import menuProps from './props'
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyBadge from '../hy-badge/hy-badge.vue'
+import index from '@/pages/mine/Index.vue'
+
+/**
+ * 垂直展示的导航栏，用于在不同的内容区域之间进行切换。
+ * @displayName hy-menu
+ */
+defineOptions({})
+
+const props = defineProps(menuProps)
+const emit = defineEmits<IMenuEmits>()
+
+const current = ref<string | number>(0)
+
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        if (newVal) current.value = newVal
+    },
+    { immediate: true }
+)
+
+const menuItemClass = computed(() => {
+    return (temp: MenuParamsVo) => {
+        const classes = ['hy-menu__item', temp.disabled && 'hy-menu__item--disabled']
+        if (current.value === temp[props.id]) {
+            classes.push('hy-menu__item--active', props.color && 'hy-menu__item--active__color')
+        }
+
+        return classes
+    }
+})
+
+function handleClick(temp: MenuParamsVo, i: number) {
+    if (temp?.disabled) {
+        return
+    }
+    if (current.value !== temp.id) {
+        current.value = temp.id
+        emit('update:modelValue', temp.id)
+        emit('change', temp, i)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+.hy-menu__item--active__color {
+    color: v-bind(color);
+    &::before {
+        background: v-bind(color);
+    }
+}
+</style>

package/components/hy-menu/props.ts

@@ -1,14 +1,14 @@
-import type { MenusType, ModelValueVo } from './typing'
+import type { MenuParamsVo } from './typing'
 import type { CSSProperties, PropType } from 'vue'
 import type { HyIconProps } from '../hy-icon/typing'
 import type { HyBadgeProps } from '../hy-badge/typing'
 
 const menuProps = {
     /** 当前值 */
-    modelValue: [String, Number] as PropType<ModelValueVo>,
+    modelValue: [String, Number] as PropType<MenuParamsVo['id']>,
     /** 菜单数据集 */
     list: {
-        type: Array as PropType<Array<MenusType>>,
+        type: Array as PropType<Array<MenuParamsVo>>,
         default: []
     },
     /** 对应的键 */

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

@@ -1,5 +1,4 @@
-export type ModelValueVo = string | number
-export interface MenusType {
+export interface MenuParamsVo {
     /**
      *  唯一id
      * */
@@ -28,7 +27,7 @@ export interface MenusType {
 
 export interface IMenuEmits {
     /** 选中触发 */
-    (e: 'change', temp: MenusType): void
+    (e: 'change', temp: MenuParamsVo, index: number): void
     /** 选中触发 */
-    (e: 'update:modelValue', id: MenusType['id']): void
+    (e: 'update:modelValue', id: MenuParamsVo['id']): void
 }

package/components/hy-notice-bar/hy-row-notice.vue

@@ -59,8 +59,8 @@ watch(
         // 进行一定的延时
         await sleep()
         // 查询盒子和文字的宽度
-        textWidth = (await getRect('.hy-notice__content--text', false, instance)).width
-        boxWidth = (await getRect('.hy-notice__content', false, instance)).width
+        textWidth = (await getRect('.hy-notice__content--text', false, instance)).width!
+        boxWidth = (await getRect('.hy-notice__content', false, instance)).width!
         // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
         // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
         animationDuration.value = `${textWidth / speed.value}s`