hy-app 0.2.5 → 0.2.7

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

@@ -1,122 +1,126 @@
-import type { CSSProperties } from "vue";
-import type HyIconProps from "../hy-icon/typing";
+import type { CSSProperties } from 'vue'
+import type HyIconProps from '../hy-icon/typing'
 
 export default interface HyButtonProps {
   /**
    * @description 是否显示按钮的细边框 (默认 true )
    * */
-  hairline?: boolean;
+  hairline?: boolean
   /**
    * @description 按钮的预置样式，info，primary，error，warning，success (默认 'primary' )
    * */
-  type?: HyApp.ThemeType;
+  type?: HyApp.ThemeType
   /**
    * @description 按钮尺寸，large，medium，mini （默认 medium）
    * */
-  size?: HyApp.SizeType | "mini";
+  size?: HyApp.SizeType | 'mini'
   /**
    * @description 按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
    * */
-  shape?: HyApp.ShapeType;
+  shape?: HyApp.ShapeType
   /**
    * @description 按钮是否镂空，背景色透明 （默认 false）
    * */
-  plain?: boolean;
+  plain?: boolean
   /**
    * @description 是否禁用 （默认 false）
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) （默认 false）
    * */
-  loading?: boolean;
+  loading?: boolean
   /**
    * @description 加载中提示文字
    * */
-  loadingText?: string;
+  loadingText?: string
   /**
    * @description 加载状态图标类型 （默认 'spinner' ）
    * */
-  loadingMode?: HyApp.LoadingMode;
+  loadingMode?: HyApp.LoadingMode
   /**
    * @description 加载图标大小 （默认 13 ）
    * */
-  loadingSize?: number;
+  loadingSize?: number
   /**
    * @description 开放能力，具体请看uniapp稳定关于button组件部分说明
    * */
-  openType?: string;
+  openType?: string
   /**
    * @description 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
    * */
-  formType?: string;
+  formType?: string
   /**
    * @description 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）
    * */
-  appParameter?: string;
+  appParameter?: string
   /**
    * @description 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true ）
    * */
-  hoverStopPropagation?: boolean;
+  hoverStopPropagation?: boolean
   /**
    * @description 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
    * */
-  lang?: string;
+  lang?: string
   /**
    * @description 会话来源，openType="contact"时有效
    * */
-  sessionFrom?: string;
+  sessionFrom?: string
   /**
    * @description 会话内消息卡片标题，openType="contact"时有效
    * */
-  sendMessageTitle?: string;
+  sendMessageTitle?: string
   /**
    * @description 会话内消息卡片点击跳转小程序路径，openType="contact"时有效
    * */
-  sendMessagePath?: string;
+  sendMessagePath?: string
   /**
    * @description 会话内消息卡片图片，openType="contact"时有效
    * */
-  sendMessageImg?: string;
+  sendMessageImg?: string
   /**
    * @description 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false）
    * */
-  showMessageCard?: boolean;
+  showMessageCard?: boolean
   /**
    * @description 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
    * */
-  dataName?: string;
+  dataName?: string
   /**
    * @description 节流时间，一定时间内只能触发一次 （默认 0 )
    * */
-  throttleTime?: number;
+  throttleTime?: number
   /**
    * @description 按住后多久出现点击态，单位毫秒 （默认 0 )
    * */
-  hoverStartTime?: number;
+  hoverStartTime?: number
   /**
    * @description 手指松开后点击态保留时间，单位毫秒 （默认 200 )
    * */
-  hoverStayTime?: number;
+  hoverStayTime?: number
   /**
    * @description 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
    * */
-  text?: string;
+  text?: string
   /**
    * @description 按钮图标api集合
    * */
-  icon?: Partial<HyIconProps>;
+  icon?: Partial<HyIconProps>
   /**
    * @description 按钮颜色，支持传入linear-gradient渐变色
    * */
-  color?: string;
+  color?: string
   /**
    * @description 阻止事件冒泡
    * */
-  stop?: boolean;
+  stop?: boolean
   /**
    * @description 定义需要用到的外部样式
    * @note 类型问题
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+  /**
+   * @description 自定义外部类名
+   * */
+  customClass?: string
 }

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

@@ -1,89 +1,92 @@
-import type { CSSProperties } from "vue";
-import { HyApp } from "@/package/typing/modules/common";
-import type HyIconProps from "../hy-icon/typing";
+import type { CSSProperties } from 'vue'
+import { HyApp } from '@/package/typing/modules/common'
+import type HyIconProps from '../hy-icon/typing'
 
 export interface CellContentVo extends AnyObject {
   /**
    * @description 单元格左图标
    * */
-  icon?: Partial<HyIconProps>;
+  icon?: Partial<HyIconProps>
   /**
    * @description 单元格标题
    * */
-  title?: string;
+  title?: string
   /**
    * @description 单元格副标题
    * */
-  subhead?: string;
+  subhead?: string
   /**
    * @description 是否禁用单元格
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description 单元格右图标集合
    * */
-  rightIcon?: Partial<HyIconProps>;
+  rightIcon?: Partial<HyIconProps>
   /**
    * @description 单元格值
    * */
-  value?: string;
+  value?: string | number | boolean
   /**
    * @description 跳转页面地址
    * */
-  url?: string;
+  url?: string
   /**
    * @description 单元格右侧箭头的方向，可选值为：left，up，down,right
    * */
-  arrowDirection?: HyApp.RotateType;
+  arrowDirection?: HyApp.RotateType
 }
 export default interface HyCellProps {
   /**
    * @description cell列表数据
    * */
-  list: CellContentVo[];
+  list: CellContentVo[]
   /**
    * @description 头部标题
    * */
-  title?: string;
+  title?: string
   /**
    * @description 是否显示标题前缀竖线
    * */
-  showVertical?: boolean;
+  showVertical?: boolean
   /**
    * @description 是否显示cell下边框 (默认 true )
    * */
-  border?: boolean;
-  borderRadius?: string | number;
+  border?: boolean
+  /**
+   * @description 圆角
+   * */
+  borderRadius?: string | number
   /**
    * @description 是否禁用cell（默认false）
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description 是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ）
    * */
-  clickable?: boolean;
+  clickable?: boolean
   /**
    * @description 单元的大小，可选值为 large，medium，small
    * */
-  size?: HyApp.SizeType;
+  size?: HyApp.SizeType
   /**
    * @description 右侧的内容
    * */
-  value?: string;
+  value?: string
   /**
    * @description 内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
    * */
-  arrange?: HyApp.LeftRightType | "center";
+  arrange?: HyApp.LeftRightType | 'center'
   /**
    * @description 右侧的图标箭头icon集合
    * */
-  rightIcon?: Partial<HyIconProps>;
+  rightIcon?: Partial<HyIconProps>
   /**
    * @description 右侧箭头的方向，可选值为：left，up，down
    * */
-  arrowDirection?: "left" | "up" | "down" | "right";
+  arrowDirection?: 'left' | 'up' | 'down' | 'right'
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

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

@@ -2,7 +2,7 @@
   <view class="hy-empty" v-if="show" :style="emptyStyle">
     <view class="hy-empty__img" :style="imgStyle">
       <HyIcon
-        :name="imageUrl"
+        :name="imageUrl || emptyIcon[mode].icon"
         :width="width"
         :height="height"
         img-mode="widthFix"
@@ -13,7 +13,7 @@
     </view>
     <view class="hy-empty__description" v-else>
       <slot v-if="$slots.description" name="description"></slot>
-      <text v-else :style="descriptionStyle">{{ emptyDescription }}</text>
+      <text v-else :style="descriptionStyle">{{ emptyDescription || emptyIcon[mode].name }}</text>
       <view class="hy-empty__button" v-if="button?.text">
         <HyButton
           :text="button?.text"
@@ -31,41 +31,34 @@
 
 <script lang="ts">
 export default {
-  name: "hy-empty",
+  name: 'hy-empty',
   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, type CSSProperties, toRefs } from 'vue'
+import defaultProps from './props'
+import type IProps from './typing'
+import { addUnit } from '../../utils'
+import emptyIcon from './icon'
 
 // 组件
-import HyButton from "../hy-button/hy-button.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyButton from '../hy-button/hy-button.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const {
-  zIndex,
-  width,
-  height,
-  imgMargin,
-  navigateUrl,
-  desSize,
-  desColor,
-  customStyle,
-} = toRefs(props);
-const emit = defineEmits(["click"]);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
+const { zIndex, width, height, imgMargin, navigateUrl, desSize, desColor, customStyle } =
+  toRefs(props)
+const emit = defineEmits(['click'])
 
 const emptyDescription = computed(() => {
-  return props.description;
-});
+  return props.description
+})
 
 /**
  * @description 整体样式
@@ -73,9 +66,9 @@ const emptyDescription = computed(() => {
 const emptyStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     zIndex: zIndex.value,
-  };
-  return Object.assign(style, customStyle.value);
-});
+  }
+  return Object.assign(style, customStyle.value)
+})
 
 /**
  * @description 提示信息样式
@@ -84,9 +77,9 @@ const descriptionStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     fontSize: addUnit(desSize.value),
     color: desColor.value,
-  };
-  return style;
-});
+  }
+  return style
+})
 
 /**
  * @description 图片样式
@@ -96,21 +89,21 @@ const imgStyle = computed<CSSProperties>(() => {
     width: addUnit(width.value),
     height: addUnit(height.value),
     margin: imgMargin.value,
-  };
-});
+  }
+})
 
 /**
  * @description 点击按钮，跳转页面
  * */
 const handleClick = () => {
-  emit("click");
+  emit('click')
   if (navigateUrl.value) {
     uni.navigateTo({
       url: navigateUrl.value,
-    });
+    })
   }
-};
+}
 </script>
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-empty/icon.ts

@@ -0,0 +1,78 @@
+export default {
+  car: {
+    name: '购物车为空',
+    icon: 'https://pic1.imgdb.cn/item/685b54cb58cb8da5c86d0d4c.png',
+  },
+  page: {
+    name: '页面不存在',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f64.webp',
+  },
+  search: {
+    name: '没有搜索结果',
+    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e84.webp',
+  },
+  address: {
+    name: '没有收货地址',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3558cb8da5c86b6f1a.webp',
+  },
+  wifi: {
+    name: '没有网络',
+    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e87.webp',
+  },
+  order: {
+    name: '订单为空',
+    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e85.webp',
+  },
+  coupon: {
+    name: '没有优惠券',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f63.webp',
+  },
+  favor: {
+    name: '暂无收藏',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3558cb8da5c86b6f1b.webp',
+  },
+  permission: {
+    name: '无权限',
+    icon: 'https://pic1.imgdb.cn/item/685a6b4358cb8da5c86b6f85.webp',
+  },
+  history: {
+    name: '无历史记录',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f62.webp',
+  },
+  message: {
+    name: '消息列表为空',
+    icon: 'https://pic1.imgdb.cn/item/685a6aef58cb8da5c86b6d30.webp',
+  },
+  image: {
+    name: '暂无图片',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f65.webp',
+  },
+  video: {
+    name: '暂无视频',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f66.webp',
+  },
+  comment: {
+    name: '暂无评论',
+    icon: 'https://pic1.imgdb.cn/item/685a6aef58cb8da5c86b6d30.webp',
+  },
+  integral: {
+    name: '暂无积分',
+    icon: 'https://pic1.imgdb.cn/item/685a6aef58cb8da5c86b6d2f.webp',
+  },
+  subscribe: {
+    name: '暂无预约',
+    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e86.webp',
+  },
+  earnings: {
+    name: '暂无收益',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3558cb8da5c86b6f1c.webp',
+  },
+  announcement: {
+    name: '暂无公告',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3558cb8da5c86b6f1d.webp',
+  },
+  signIn: {
+    name: '暂无打卡',
+    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e83.webp',
+  },
+}

package/components/hy-empty/index.scss

@@ -16,9 +16,10 @@
     width: 70%;
     text-align: center;
     margin-top: $hy-border-margin-padding-base;
+    color: $hy-text-color--grey;
   }
 
   &__button {
     margin-top: 100rpx;
   }
-}
+}

package/components/hy-empty/props.ts

@@ -1,17 +1,18 @@
-import type IProps from "./typing";
+import type IProps from './typing'
 
 const defaultProps: IProps = {
   show: true,
-  imageUrl: "https://pic.imgdb.cn/item/6737057ad29ded1a8c6f843b.webp",
+  mode: 'car',
+  imageUrl: '',
   zIndex: 889,
   width: 350,
-  height: "auto",
-  description: "暂无数据",
+  height: 'auto',
+  description: '',
   desSize: 15,
-  desColor: "#5e6d82",
-  imgMargin: "",
+  desColor: '',
+  imgMargin: '',
   button: {},
-  navigateUrl: "",
-};
+  navigateUrl: '',
+}
 
-export default defaultProps;
+export default defaultProps

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

@@ -1,53 +1,78 @@
-import type { CSSProperties } from "vue";
-import type HyButtonProps from "../hy-button/typing";
+import type { CSSProperties } from 'vue'
+import type HyButtonProps from '../hy-button/typing'
+
+type EmptyModeType =
+  | 'car'
+  | 'page'
+  | 'search'
+  | 'address'
+  | 'wifi'
+  | 'order'
+  | 'coupon'
+  | 'favor'
+  | 'permission'
+  | 'history'
+  | 'message'
+  | 'image'
+  | 'video'
+  | 'comment'
+  | 'integral'
+  | 'subscribe'
+  | 'earnings'
+  | 'announcement'
+  | 'signIn'
 
 export default interface HyEmptyProps {
   /**
    * @description 是否显示空状态
    * */
-  show?: boolean;
+  show?: boolean
+  /**
+   * @description 缺省页内容
+   * */
+  mode?: EmptyModeType
   /**
    * @description 空状态图片
    * */
-  imageUrl?: string;
+  imageUrl?: string
   /**
    * @description 组件层级
    * */
-  zIndex?: number;
+  zIndex?: number
   /**
    * @description icon宽度
    * */
-  width?: number | string;
+  width?: number | string
   /**
    * @description icon高度
    * */
-  height?: number | string;
+  height?: number | string
   /**
    * @description 提示信息
    * */
-  description?: string;
+  description?: string
   /**
    * @description 提示信息大小
    * */
-  desSize?: string | number;
+  desSize?: string | number
   /**
    * @description 提示信息颜色
    * */
-  desColor?: string;
+  desColor?: string
   /**
    * @description 图片margin
    * */
-  imgMargin?: string;
+  imgMargin?: string
   /**
    * @description 按钮属性只
    * */
-  button?: HyButtonProps;
+  button?: HyButtonProps
   /**
    * @description 跳转地址
    * */
-  navigateUrl?: string;
+  navigateUrl?: string
   /**
    * @description 自定义输入框外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }