hy-app 0.2.13 → 0.2.15

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

@@ -24,9 +24,7 @@
             :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
-            "
+            :customStyle="item?.iconConfig?.customStyle || iconConfig?.customStyle"
           ></HyIcon>
         </slot>
       </view>
@@ -35,66 +33,128 @@
 </template>
 
 <script lang="ts">
+/**
+ * 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式
+ * @displayName hy-grid
+ */
+defineOptions({})
 export default {
-  name: "hy-grid",
+  name: 'hy-grid',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit } from "../../utils";
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import type { CustomKeysVo, GridItemVo, IGridEmits } from './typing'
+import { addUnit } from '../../utils'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import type HyIconProps from '@/package/components/hy-icon/typing'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { align, customStyle, bgColor, itemHeight, border } = toRefs(props);
-const emit = defineEmits(["click"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 数据列表 */
+  list: {
+    type: Array as PropType<GridItemVo[]>,
+    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: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { align, customStyle, bgColor, itemHeight, border } = toRefs(props)
+const emit = defineEmits<IGridEmits>()
 
 /**
  * @description 宫格对齐方式
  * */
 const gridStyle = computed<CSSProperties>(() => {
-  let style: CSSProperties = {};
+  let style: CSSProperties = {}
   switch (align.value) {
-    case "left":
-      style.justifyContent = "flex-start";
-      break;
-    case "center":
-      style.justifyContent = "center";
-      break;
-    case "right":
-      style.justifyContent = "flex-end";
-      break;
+    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";
+      style.justifyContent = 'flex-start'
   }
-  return Object.assign(style, customStyle.value || {});
-});
+  return Object.assign(style, customStyle.value || {})
+})
 
 const itemStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     background: bgColor.value,
     height: addUnit(itemHeight.value),
-    width: "100%",
-    border: border.value ? "0.5px solid #c8c7cc66" : "",
-  };
-  return style;
-});
+    width: '100%',
+    border: border.value ? '0.5px solid #c8c7cc66' : '',
+  }
+  return style
+})
 
 /**
  * @description 点击事件
  * */
 const childClick = (name: string | Record<string, any>) => {
-  emit("click", name);
-};
+  emit('click', name)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -102,5 +162,5 @@ const childClick = (name: string | Record<string, any>) => {
   grid-gap: v-bind(gap);
   grid-template-columns: repeat(v-bind(col), 1fr);
 }
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -1,74 +1,79 @@
-import { CSSProperties } from "vue";
-import type HyIconProps from "../hy-icon/typing";
+import { CSSProperties } from 'vue'
+import type HyIconProps from '../hy-icon/typing'
 
-interface GridItemVo {
+export interface GridItemVo {
   /**
    * @description 图标名称或图片地址
    * */
-  icon?: string;
+  icon?: string
   /**
    * @description 名称
    * */
-  name?: string;
+  name?: string
   /**
    * @description 图标属性api配置
    * */
-  iconConfig?: Partial<HyIconProps>;
+  iconConfig?: Partial<HyIconProps>
   /**
    * @description 自定义内容键值对
    * */
-  [key: string]: any;
+  [key: string]: any
 }
 export interface CustomKeysVo {
   /**
    * @description 自定义标题键名
    * */
-  name: string;
+  name: string
   /**
    * @description 自定义icon键名
    * */
-  icon: string;
+  icon: string
 }
 
 export default interface HyGridProps {
   /**
    * @description 数据集
    * */
-  list: GridItemVo[];
+  list: GridItemVo[]
   /**
    * @description 自定义键值
    * */
-  customKeys?: CustomKeysVo;
+  customKeys?: CustomKeysVo
   /**
    * @description 宫格的列数（默认 3 ）
    * */
-  col?: number;
+  col?: number
   /**
    * @description 是否显示宫格的边框（默认 false ）
    * */
-  border?: boolean;
+  border?: boolean
   /**
    * @description 单个宫格高度（默认 60px ）
    * */
-  itemHeight?: number | string;
+  itemHeight?: number | string
   /**
    * @description 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 （默认 'left' ）
    * */
-  align?: "center" | HyApp.LeftRightType;
+  align?: 'center' | HyApp.LeftRightType
   /**
    * @description 间隔（默认 0px）
    * */
-  gap?: number | string;
+  gap?: number | string
   /**
    * @description 宫格的背景颜色 （默认 'transparent' ）
    * */
-  bgColor?: string;
+  bgColor?: string
   /**
    * @description 图标属性api配置集合
    * */
-  iconConfig?: Partial<HyIconProps>;
+  iconConfig?: Partial<HyIconProps>
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface IGridEmits {
+  /** 点击小菜单触发 */
+  (e: 'click', name: string | Record<string, any>)): void
 }

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

@@ -25,6 +25,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
+ * @displayName hy-icon
+ */
+defineOptions({})
 export default {
   name: 'hy-icon',
   options: {
@@ -36,12 +41,85 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from 'vue'
+import { computed, type CSSProperties, type PropType, toRefs } from 'vue'
 import { addUnit } from '../../utils'
-import defaultProps from './props'
-import type IProps from './typing'
+import type { IIconEmits } from './typing'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 图标名称 */
+  name: String,
+  /** 图标颜色 */
+  color: String,
+  /** 图标字体大小，单位px */
+  size: {
+    type: [Number, String],
+    default: '20px',
+  },
+  /** 是否显示粗体 */
+  bold: {
+    type: Boolean,
+    default: false,
+  },
+  /** 点击图标的时候传递事件出去的index（用于区分点击了哪一个） */
+  index: String,
+  /** 自定义扩展前缀，方便用户扩展自己的图标库 */
+  customPrefix: {
+    type: String,
+    default: 'hy-icon',
+  },
+  /** 图标右侧的label文字 */
+  label: String,
+  /**
+   * label相对于图标的位置，只能right或bottom
+   * @values right,bottom
+   * */
+  labelPos: {
+    type: String,
+    default: 'right',
+  },
+  /** label字体大小，单位px */
+  labelSize: String,
+  /** 图标右侧的label文字颜色 */
+  labelColor: String,
+  /** label与图标的距离，单位px */
+  space: {
+    type: [Number, String],
+    default: '2px',
+  },
+  /** 图片的mode */
+  imgMode: String,
+  /** 显示图片小图标时的宽度 */
+  width: String,
+  /** 显示图片小图标时的高度 */
+  height: String,
+  /** 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 */
+  top: {
+    type: Number,
+    default: 0,
+  },
+  /** 是否阻止事件传播 */
+  stop: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否旋转 */
+  isRotate: {
+    type: Boolean,
+    default: false,
+  },
+  /** 图标圆角 */
+  round: {
+    type: Number,
+    default: 0,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
 const {
   customPrefix,
   name,
@@ -58,7 +136,7 @@ const {
   customClass,
   customStyle,
 } = toRefs(props)
-const emit = defineEmits(['click'])
+const emit = defineEmits<IIconEmits>()
 
 const uClasses = computed(() => {
   let classes: string | string[] = [
@@ -110,7 +188,7 @@ const imgStyle = computed((): CSSProperties => {
 /**
  * @description 点击
  * */
-const clickHandler = (e: any) => {
+const clickHandler = (e: Event) => {
   emit('click', index.value, e)
   // 是否阻止事件冒泡
   stop.value && e.stopPropagation()

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

@@ -82,3 +82,8 @@ export default interface HyIconProps {
    * */
   customClass?: string
 }
+
+export interface IIconEmits {
+  /** 点击图标触发 */
+  (e: 'click', index: string, e: Event): void
+}

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

@@ -1,6 +1,10 @@
 <template>
   <HyTransition mode="fade" :show="show" :style="transStyle" :duration="fade ? 1000 : 0">
-    <view class="hy-image box-border" @tap="clickHandler" :style="[wrapStyle, backgroundStyle]">
+    <view
+      :class="['hy-image', 'box-border', customClass]"
+      @tap="clickHandler"
+      :style="[wrapStyle, backgroundStyle]"
+    >
       <image
         v-if="!isError"
         :src="src"
@@ -46,6 +50,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
+ * @displayName hy-image
+ */
+defineOptions({})
 export default {
   name: 'hy-image',
   options: {
@@ -57,17 +66,107 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, onMounted, ref, toRefs, watch } from 'vue'
-import defaultProps from './props'
-import type IProps from './typing'
+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 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'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 图片地址 */
+  src: String,
+  /** 裁剪模式，见官网说明 */
+  mode: {
+    type: String,
+    default: 'aspectFill',
+  },
+  /** 宽度，单位任意，如果为数值，则为px单位 */
+  width: String,
+  /** 高度，单位任意，如果为数值，则为px单位 */
+  height: String,
+  /**
+   * 图片形状
+   * @values circle,square
+   * */
+  shape: {
+    type: String,
+    default: 'square',
+  },
+  /** 圆角值，单位任意，如果为数值，则为px单位 */
+  radius: {
+    type: [Number, String],
+    default: 0,
+  },
+  /** 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 */
+  lazyLoad: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 */
+  showMenuByLongPress: {
+    type: Boolean,
+    default: true,
+  },
+  /** 加载中的图标，或者小图片 */
+  loadingIcon: {
+    type: String,
+    default: IconConfig.LOADING,
+  },
+  /** 加载失败的图标，或者小图片 */
+  errorIcon: {
+    type: String,
+    default: IconConfig.NOTICE,
+  },
+  /** 是否显示加载中的图标或者自定义的slot */
+  showLoading: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示加载错误的图标或者自定义的slot */
+  showError: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否需要淡入效果 */
+  fade: {
+    type: Boolean,
+    default: true,
+  },
+  /** 只支持网络资源，只对微信小程序有效 */
+  webp: {
+    type: Boolean,
+    default: false,
+  },
+  /** 搭配fade参数的过渡时间，单位ms */
+  duration: {
+    type: Number,
+    default: 500,
+  },
+  /** 背景颜色，用于深色页面加载图片时，为了和背景色融合 */
+  bgColor: String,
+  /** 是否模糊图片 */
+  indistinct: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否预览图片 */
+  previewImage: {
+    type: Boolean,
+    default: false,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
 const {
   customStyle,
   duration,
@@ -81,7 +180,7 @@ const {
   previewImage,
   indistinct,
 } = toRefs(props)
-const emit = defineEmits(['click', 'error', 'load'])
+const emit = defineEmits<IImageEmits>()
 
 // 图片是否加载错误，如果是，则显示错误占位图
 const isError = ref(false)

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

@@ -78,3 +78,12 @@ export default interface HyImageProps {
    * */
   customStyle?: CSSProperties
 }
+
+export interface IImageEmits {
+  /** 点击触发 */
+  (e: 'click'): void
+  /** 图片加载错误触发 */
+  (e: 'error', err: Event): void
+  /** 图片加载中触发 */
+  (e: 'load', event: Event): void
+}