hy-app 0.2.16 → 0.2.18

package/components/hy-dropdown/hy-dropdown.vue

@@ -5,11 +5,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 主要提供筛选下拉筛选框，内置基础筛选功能，可以根据自己的需求自定义筛选项。
- * @displayName hy-dropdown
- */
-defineOptions({})
 export default {
   name: 'hy-dropdown',
   options: {
@@ -24,6 +19,12 @@ export default {
 import { provide, ref, computed, type CSSProperties, toRefs, PropType } from 'vue'
 import { addUnit, IconConfig } from '@/package'
 
+/**
+ * 主要提供筛选下拉筛选框，内置基础筛选功能，可以根据自己的需求自定义筛选项。
+ * @displayName hy-dropdown
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 标题菜单的高度，单位px */

package/components/hy-dropdown-item/hy-dropdown-item.vue

@@ -58,10 +58,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 主要提供筛选下拉筛选框，内置基础筛选功能，可以根据自己的需求自定义筛选项。和hy-dropdown组合用法
- * @displayName hy-dropdown-item
- */
 export default {
   name: 'hy-dropdown-item',
   options: {
@@ -87,10 +83,16 @@ import type FatherIProps from '../hy-dropdown/typing'
 import type { DropdownMenuItem } from './typing'
 import { addUnit, getRect, throttle } from '../../utils'
 import { IconConfig } from '../../config'
-
+// 组件
 import HyOverlay from '../hy-overlay/hy-overlay.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * 主要提供筛选下拉筛选框，内置基础筛选功能，可以根据自己的需求自定义筛选项。和hy-dropdown组合用法
+ * @displayName hy-dropdown-item
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 获取值 */

package/components/hy-empty/hy-empty.vue

@@ -30,11 +30,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 加载的第一页数据就为空
- * @displayName hy-empty
- */
-defineOptions({})
 export default {
   name: 'hy-empty',
   options: {
@@ -57,6 +52,12 @@ import type { IEmptyEmits } from './typing'
 import HyButton from '../hy-button/hy-button.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * 加载的第一页数据就为空
+ * @displayName hy-empty
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 是否显示空状态 */

package/components/hy-float-button/hy-float-button.vue

@@ -61,11 +61,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 悬浮动作按钮组件，按下可显示一组动作按钮。
- * @displayName hy-float-button
- */
-defineOptions({})
 export default {
   name: 'hy-float-button',
   options: {
@@ -84,11 +79,16 @@ import type { MenusType } from './typing'
 import { addUnit, getPx, getRect, guid, isH5 } from '../../utils'
 import { HyApp } from '../../typing/modules/common'
 import { IconConfig } from '../../config'
-
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyLine from '../hy-line/hy-line.vue'
 
+/**
+ * 悬浮动作按钮组件，按下可显示一组动作按钮。
+ * @displayName hy-float-button
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 菜单栏集合 */

package/components/hy-folding-panel/hy-folding-panel.vue

@@ -39,11 +39,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 通过折叠面板收纳内容区域。
- * @displayName hy-folding-panel
- */
-defineOptions({})
 export default {
   name: 'hy-folding-panel',
   options: {
@@ -64,6 +59,12 @@ import { ColorConfig } from '../../config'
 import HyCell from '../hy-cell/hy-cell.vue'
 import HyLine from '../hy-line/hy-line.vue'
 
+/**
+ * 通过折叠面板收纳内容区域。
+ * @displayName hy-folding-panel
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 数据集 */

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

@@ -33,11 +33,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式
- * @displayName hy-grid
- */
-defineOptions({})
 export default {
   name: 'hy-grid',
   options: {
@@ -53,25 +48,30 @@ import { computed, toRefs } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import type { CustomKeysVo, GridItemVo, IGridEmits } from './typing'
 import { addUnit } from '../../utils'
-
+import type HyIconProps from '../hy-icon/typing'
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
-import type HyIconProps from '@/package/components/hy-icon/typing'
+
+/**
+ * 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式
+ * @displayName hy-grid
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 数据列表 */
   list: {
     type: Array as PropType<GridItemVo[]>,
-    default: [],
+    default: () => [],
   },
   /** 自定义键值 */
   customKeys: {
     type: Object as PropType<CustomKeysVo>,
-    default: {
+    default: () => ({
       name: 'name',
       icon: 'icon',
-    },
+    }),
   },
   /** 宫格的列数 */
   col: {
@@ -109,9 +109,7 @@ const props = defineProps({
   /** 图标属性api配置集合 */
   iconConfig: Object as PropType<HyIconProps>,
   /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
+  customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
 })

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

@@ -75,5 +75,5 @@ export default interface HyGridProps {
 
 export interface IGridEmits {
   /** 点击小菜单触发 */
-  (e: 'click', name: string | Record<string, any>)): void
+  (e: 'click', name: string | Record<string, any>): void
 }

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

@@ -10,7 +10,7 @@
     <text v-else class="hy-icon__icon" :class="uClasses" :style="[iconStyle, customStyle]"></text>
     <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
     <text
-      v-if="label !== ''"
+      v-if="label"
       class="hy-icon__label"
       :style="{
         color: labelColor,
@@ -25,11 +25,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
- * @displayName hy-icon
- */
-defineOptions({})
 export default {
   name: 'hy-icon',
   options: {
@@ -41,10 +36,17 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, type PropType, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
+import type { PropType, CSSProperties } from 'vue'
 import { addUnit } from '../../utils'
 import type { IIconEmits } from './typing'
 
+/**
+ * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
+ * @displayName hy-icon
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 图标名称 */
@@ -90,12 +92,12 @@ const props = defineProps({
   /** 图片的mode */
   imgMode: String,
   /** 显示图片小图标时的宽度 */
-  width: String,
+  width: [String, Number],
   /** 显示图片小图标时的高度 */
-  height: String,
+  height: [String, Number],
   /** 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 */
   top: {
-    type: Number,
+    type: [String, Number],
     default: 0,
   },
   /** 是否阻止事件传播 */
@@ -110,13 +112,11 @@ const props = defineProps({
   },
   /** 图标圆角 */
   round: {
-    type: Number,
+    type: [String, Number],
     default: 0,
   },
   /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
+  customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
 })
@@ -174,7 +174,7 @@ const iconStyle = computed<CSSProperties>(() => {
  * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
  * */
 const isImg = computed(() => {
-  return name.value.indexOf('/') !== -1
+  return name.value?.indexOf('/') !== -1
 })
 const imgStyle = computed((): CSSProperties => {
   let style: CSSProperties = {}

package/components/hy-image/hy-image.vue

@@ -50,11 +50,6 @@
 </template>
 
 <script lang="ts">
-/**
- * uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
- * @displayName hy-image
- */
-defineOptions({})
 export default {
   name: 'hy-image',
   options: {
@@ -70,12 +65,17 @@ import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import type { PropType, CSSProperties } from 'vue'
 import type { IImageEmits } from './typing'
 import { addUnit, getPx } from '../../utils'
-
+import { IconConfig } from '../../config'
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyTransition from '../hy-transition/hy-transition.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
-import { IconConfig } from '@/package'
+
+/**
+ * uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
+ * @displayName hy-image
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -87,9 +87,15 @@ const props = defineProps({
     default: 'aspectFill',
   },
   /** 宽度，单位任意，如果为数值，则为px单位 */
-  width: String,
+  width: {
+    type: [String, Number],
+    default: '',
+  },
   /** 高度，单位任意，如果为数值，则为px单位 */
-  height: String,
+  height: {
+    type: [String, Number],
+    default: '',
+  },
   /**
    * 图片形状
    * @values circle,square

package/components/hy-input/hy-input.vue

@@ -92,11 +92,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 为一个输入框，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
- * @displayName hy-input
- */
-defineOptions({})
 export default {
   name: 'hy-input',
   options: {
@@ -116,6 +111,12 @@ import { IconConfig } from '../../config'
 import type { IInputEmits } from './typing'
 import HyIconProps from '@/package/components/hy-icon/typing'
 
+/**
+ * 为一个输入框，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
+ * @displayName hy-input
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 输入的值 */
@@ -278,7 +279,7 @@ const props = defineProps({
   },
   /** 是否忽略组件内对文本合成系统事件的处理 */
   ignoreCompositionEvent: {
-    type: String,
+    type: Boolean,
     default: false,
   },
   /** 内容式化函数 */

package/components/hy-line/hy-line.vue

@@ -3,11 +3,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。
- * @displayName hy-line
- */
-defineOptions({})
 export default {
   name: 'hy-line',
   options: {
@@ -19,9 +14,16 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, type PropType, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { addUnit } from '../../utils'
 
+/**
+ * 一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。
+ * @displayName hy-line
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 线条的颜色 */

package/components/hy-line-progress/hy-line-progress.vue

@@ -25,11 +25,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
- * @displayName hy-line-progress
- */
-defineOptions({})
 export default {
   name: 'hy-line-progress',
   options: {
@@ -41,18 +36,16 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  getCurrentInstance,
-  onMounted,
-  type PropType,
-  ref,
-  toRefs,
-  watch,
-} from 'vue'
+import { computed, getCurrentInstance, onMounted, ref, toRefs, watch } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { addUnit, getPx, getRect, range, sleep } from '../../utils'
 
+/**
+ * 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+ * @displayName hy-line-progress
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 激活部分的颜色 */
@@ -67,7 +60,7 @@ const props = defineProps({
   /** 是否在进度条内部显示百分比的值 */
   showText: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   /** 进度条的高度，单位px */
   height: {

package/components/hy-list/hy-list.vue

@@ -62,11 +62,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 实现只展示可视内容的dom，减少dom创建，优化滚动性能
- * @displayName hy-list
- */
-defineOptions({})
 export default {
   name: 'hy-list',
   options: {
@@ -93,6 +88,12 @@ import {
 import { addUnit, getPx, getRect } from '../../utils'
 import type { IListEmits } from './typing'
 
+/**
+ * 实现只展示可视内容的dom，减少dom创建，优化滚动性能
+ * @displayName hy-list
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 数据列表 */

package/components/hy-loading/hy-loading.vue

@@ -43,11 +43,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 目前用在华玥的loadMore加载更多等组件的正在加载状态场景。
- * @displayName hy-loading
- */
-defineOptions({})
 export default {
   name: 'hy-loading',
   options: {
@@ -63,6 +58,12 @@ import { toRefs, ref, computed } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { addUnit, colorGradient } from '../../utils'
 
+/**
+ * 目前用在华玥的loadMore加载更多等组件的正在加载状态场景。
+ * @displayName hy-loading
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 是否显示组件 */
@@ -92,12 +93,12 @@ const props = defineProps({
   },
   /** 加载图标的大小，单位px */
   size: {
-    type: Number,
+    type: [String, Number],
     default: 24,
   },
   /** 文字大小 */
   textSize: {
-    type: Number,
+    type: [String, Number],
     default: 15,
   },
   /** 文字内容 */
@@ -115,9 +116,7 @@ const props = defineProps({
   /** mode=circle时的暗边颜色 */
   inactiveColor: String,
   /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
+  customStyle: Object as PropType<CSSProperties>,
 })
 const { show, size, color, mode, inactiveColor } = toRefs(props)
 

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

@@ -43,11 +43,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 垂直展示的导航栏，用于在不同的内容区域之间进行切换。
- * @displayName hy-menu
- */
-defineOptions({})
 export default {
   name: 'hy-menu',
   options: {
@@ -59,21 +54,27 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, PropType, ref, toRefs, watch } from 'vue'
+import { computed, ref, toRefs, watch } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import type { IMenuEmits, MenusType } from './typing'
 import { addUnit } from '../../utils'
 
 import type HyBadgeProps from '../hy-badge/typing'
 import type HyIconProps from '../hy-icon/typing'
-
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyBadge from '../hy-badge/hy-badge.vue'
 
+/**
+ * 垂直展示的导航栏，用于在不同的内容区域之间进行切换。
+ * @displayName hy-menu
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 当前值 */
-  modelValue: String,
+  modelValue: [String, Number],
   /** 菜单数据集 */
   list: {
     type: Array as PropType<Array<MenusType>>,
@@ -96,6 +97,8 @@ const props = defineProps({
     type: Object as PropType<HyBadgeProps>,
     default: {},
   },
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
 })
 const { modelValue, list, color } = toRefs(props)
 const emit = defineEmits<IMenuEmits>()

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

@@ -88,11 +88,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
- * @displayName hy-modal
- */
-defineOptions({})
 export default {
   name: 'hy-modal',
   options: {
@@ -107,11 +102,16 @@ export default {
 import { ref, toRefs, watch } from 'vue'
 import type { IModalEmits } from './typing'
 import { addUnit } from '../../utils'
-
 // 组件
 import HyPopup from '../hy-popup/hy-popup.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
 
+/**
+ * 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
+ * @displayName hy-modal
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 是否显示模态框 */

package/components/hy-modal/index.scss

@@ -78,7 +78,7 @@
         /* 取消 */
         &--cancel {
           //background-color: $hy-background--empty;
-          background-color: #323233;
+          background-color: $hy-background--empty;
 
           &-text {
             color: $hy-text-color;

package/components/hy-navbar/hy-navbar.vue

@@ -84,11 +84,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
- * @displayName hy-navbar
- */
-defineOptions({})
 export default {
   name: 'hy-navbar',
   options: {
@@ -105,11 +100,16 @@ import type { CSSProperties, PropType } from 'vue'
 import type { INavbarEmits } from './typing'
 import { addUnit, getPx, getWindowInfo } from '../../utils'
 import { IconConfig } from '../../config'
-
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyStatusBar from '../hy-status-bar/hy-status-bar.vue'
 
+/**
+ * 一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
+ * @displayName hy-navbar
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 是否开启顶部安全区适配 */