hy-app 0.3.1 → 0.3.3

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

@@ -1,6 +1,9 @@
 <template>
   <!-- 标题栏 -->
-  <view :class="['hy-dropdown-item__header', isOpen && 'is-active']" @click="handleClick">
+  <view
+    :class="['hy-dropdown-item__header', isOpen && 'is-active']"
+    @click="handleClick"
+  >
     <text
       class="hy-dropdown-item__header--title"
       :style="{ color: currentColor, fontSize: addUnit(titleSize) }"
@@ -17,7 +20,11 @@
     ></HyIcon>
   </view>
   <!-- 下拉弹窗 -->
-  <HyOverlay :show="isOpen" :custom-style="{ top: addUnit(dropPopupTop) }" @click="closePopupFn">
+  <HyOverlay
+    :show="isOpen"
+    :custom-style="{ top: addUnit(dropPopupTop) }"
+    @click="closePopupFn"
+  >
     <view
       class="hy-dropdown-item__main"
       :style="{ top: addUnit(dropPopupTop), height: addUnit(dropHeight) }"
@@ -59,11 +66,11 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-dropdown-item',
+  name: "hy-dropdown-item",
   options: {
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
@@ -74,24 +81,22 @@ import {
   onMounted,
   watch,
   useSlots,
-  toRefs,
   getCurrentInstance,
   type PropType,
-} from 'vue'
-import type { IDropdownItemEmits } from './typing'
-import type FatherIProps from '../hy-dropdown/typing'
-import type { DropdownMenuItem } from './typing'
-import { addUnit, getRect, throttle } from '../../utils'
-import { IconConfig } from '../../config'
+} from "vue";
+import type { IDropdownItemEmits, DropdownMenuItem } from "./typing";
+import type FatherIProps from "../hy-dropdown/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'
+import HyOverlay from "../hy-overlay/hy-overlay.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 /**
  * 主要提供筛选下拉筛选框，内置基础筛选功能，可以根据自己的需求自定义筛选项。和hy-dropdown组合用法
  * @displayName hy-dropdown-item
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -109,69 +114,69 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-})
-const { modelValue, menus } = toRefs(props)
-const emits = defineEmits<IDropdownItemEmits>()
+});
+const emit = defineEmits<IDropdownItemEmits>();
 
-const slots = useSlots()
+const slots = useSlots();
 //是否有插槽
 const hasSlot = computed(() => {
-  return Object.keys(slots).length > 0
-})
-const instance = getCurrentInstance()
+  return Object.keys(slots).length > 0;
+});
+const instance = getCurrentInstance();
 //父的props值
-const dropdownProps: FatherIProps | undefined = inject('dropdownProps')
-const { titleSize, menuIcon, menuIconSize, inactiveColor } = dropdownProps as FatherIProps
+const dropdownProps: FatherIProps | undefined = inject("dropdownProps");
+const { titleSize, menuIcon, menuIconSize, inactiveColor } =
+  dropdownProps as FatherIProps;
 //当前打开的dropItem项（标签名）
-const currentDropItem: any = inject('currentDropItem')
+const currentDropItem: any = inject("currentDropItem");
 //当前文字/箭头颜色
 const currentColor = computed(() => {
-  return isOpen.value ? dropdownProps?.activeColor : inactiveColor
-})
+  return isOpen.value ? dropdownProps?.activeColor : inactiveColor;
+});
 //是否打开
-const isOpen = ref<boolean>(false)
+const isOpen = ref<boolean>(false);
 //下拉弹窗距离页面顶部距离
-const dropPopupTop = ref(0)
+const dropPopupTop = ref(0);
 //下拉弹窗高度
-const dropHeight = ref<string | number>(0)
+const dropHeight = ref<string | number>(0);
 //下拉选项当前选中的索引
-const currentIndex = ref(-1)
+const currentIndex = ref(-1);
 
 //动态class
-const customClass = computed(() => (isOpen.value ? 'visible' : 'hidden'))
+const customClass = computed(() => (isOpen.value ? "visible" : "hidden"));
 
 onMounted(() => {
-  getDropPopupTop()
-})
+  getDropPopupTop();
+});
 
 /**
  * @description 计算下拉弹窗区域距离页面顶部距离
  * */
 const getDropPopupTop = () => {
-  getRect('.hy-dropdown-item__header', false, instance).then((rect) => {
-    const { bottom } = rect as UniApp.NodeInfo
+  getRect(".hy-dropdown-item__header", false, instance).then((rect) => {
+    const { bottom } = rect as UniApp.NodeInfo;
     // #ifdef H5
     //H5需要加上导航栏高度，固定44px
-    dropPopupTop.value = (bottom || 0) + 44
+    dropPopupTop.value = (bottom || 0) + 44;
     // #endif
     //  #ifndef H5
-    dropPopupTop.value = bottom || 0
+    dropPopupTop.value = bottom || 0;
     // #endif
-  })
-}
+  });
+};
 
 watch(isOpen, (v) => {
   //打开状态显示父容器
   if (v) {
-    dropHeight.value = 'auto'
+    dropHeight.value = "auto";
   } else {
     //关闭状态隐藏父容器
     //延迟改变使得关闭动画能完整呈现
     setTimeout(() => {
-      dropHeight.value = 0
-    }, 200)
+      dropHeight.value = 0;
+    }, 200);
   }
-})
+});
 /**
  * @description 动态控制开关,
  * @desc 防止点击展开后在点击下一个，导致上一个没有关闭bug
@@ -181,29 +186,29 @@ watch(
   (newVal) => {
     //关闭其他条件的下拉弹窗
     if (newVal !== props.title) {
-      isOpen.value = false
+      isOpen.value = false;
     }
   },
-)
+);
 
 //根据双向绑定值动态设置下拉选中项索引
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newVal) => {
-    currentIndex.value = menus.value.findIndex((item) => item.value === newVal)
+    currentIndex.value = props.menus.findIndex((item) => item.value === newVal);
   },
   { immediate: true },
-)
+);
 
 //选中监听
 const onSelect = (item: DropdownMenuItem, index: number) => {
-  isOpen.value = false
+  isOpen.value = false;
   if (index !== currentIndex.value) {
-    currentIndex.value = index
-    emits('update:modelValue', item.value)
-    emits('change', item.value)
+    currentIndex.value = index;
+    emit("change", item, index);
+    emit("update:modelValue", item);
   }
-}
+};
 
 /**
  * @description 打开或关闭
@@ -211,24 +216,24 @@ const onSelect = (item: DropdownMenuItem, index: number) => {
 const handleClick = () =>
   throttle(() => {
     //节流处理，防止点击过快动画未结束又切换导致显示bug
-    isOpen.value = !isOpen.value
+    isOpen.value = !isOpen.value;
     if (isOpen.value) {
       // 防止点击展开后在点击下一个，导致上一个没有关闭bug
-      currentDropItem.value = props.title
-      getDropPopupTop()
+      currentDropItem.value = props.title;
+      getDropPopupTop();
     }
-  })
+  });
 
 /**
  * @description 点击遮罩框关闭弹窗
  * */
 const closePopupFn = () => {
   if (dropdownProps?.closeOnClickMask) {
-    isOpen.value = false
+    isOpen.value = false;
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-dropdown-item/typing.d.ts

@@ -2,35 +2,35 @@ export interface DropdownMenuItem {
   /**
    * @description 展示标题
    * */
-  label: string
+  label: string;
   /**
    * @description 值
    * */
-  value: string | number
+  value: string | number;
 }
 
 export default interface HyDropdownItemProps {
   /**
    * @description 获取值
    * */
-  modelValue: string | number
+  modelValue: string | number;
   /**
    * @description 标题
    * */
-  title: string
+  title: string;
   /**
    * @description 下拉选择值
    * */
-  menus?: DropdownMenuItem[]
+  menus?: DropdownMenuItem[];
   /**
    * @description 禁用组件点击
    * */
-  disabled?: boolean
+  disabled?: boolean;
 }
 
 export interface IDropdownItemEmits {
   /** 选中值触发 */
-  (e: 'change', item: DropdownMenuItem): void
-  /** 选中值触发 */
-  (e: 'update:modelValue', item: DropdownMenuItem): void
+  (e: "change", item: DropdownMenuItem, index: number): void;
+  /** 值改变触发 */
+  (e: "update:modelValue", item: DropdownMenuItem): void;
 }

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

@@ -1,20 +1,22 @@
 <template>
   <view :class="['hy-empty', customClass]" v-if="show" :style="emptyStyle">
     <view class="hy-empty__img" :style="imgStyle">
-      <HyIcon
-        :name="imageUrl || emptyIcon[mode].icon"
+      <HyImage
+        :src="imageUrl || emptyIcon[mode].icon"
         :width="width"
         :height="height"
         img-mode="widthFix"
-      ></HyIcon>
+      ></HyImage>
     </view>
     <view v-if="$slots.default">
       <slot></slot>
     </view>
-    <view class="hy-empty__description" v-else>
+    <view class="hy-empty--description" v-else>
       <slot v-if="$slots.description" name="description"></slot>
-      <text v-else :style="descriptionStyle">{{ emptyDescription || emptyIcon[mode].name }}</text>
-      <view class="hy-empty__button" v-if="button?.text">
+      <text v-else :style="descriptionStyle">{{
+        emptyDescription || emptyIcon[mode].desc
+      }}</text>
+      <view class="hy-empty--button" v-if="button?.text">
         <HyButton
           :text="button?.text"
           :size="button?.size"
@@ -31,32 +33,31 @@
 
 <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, toRefs } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { addUnit } from '../../utils'
-import emptyIcon from './icon'
-import type { HyButtonProps } from '../hy-button/typing'
-import type { IEmptyEmits } from './typing'
-
+import { computed } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { addUnit } from "../../utils";
+import emptyIcon from "./icon";
+import type { HyButtonProps } from "../hy-button/typing";
+import type { IEmptyEmits } from "./typing";
 // 组件
-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 HyImage from "../hy-image/hy-image.vue";
 
 /**
  * 加载的第一页数据就为空
  * @displayName hy-empty
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -66,10 +67,13 @@ const props = defineProps({
     default: true,
     required: true,
   },
-  /** 缺省页内容 */
+  /**
+   * 缺省页内容
+   * @values content,search,address,network,order,coupon,favor,history,message,comment,integral
+   * */
   mode: {
     type: String,
-    default: 'car',
+    default: "content",
   },
   /** 空状态图片 */
   imageUrl: String,
@@ -80,13 +84,13 @@ const props = defineProps({
   },
   /** 组件层级 */
   width: {
-    type: Number,
-    default: 350,
+    type: [String, Number],
+    default: "240px",
   },
   /** icon高度 */
   height: {
     type: [String, Number],
-    default: 'auto',
+    default: "240px",
   },
   /** 提示信息 */
   description: String,
@@ -107,62 +111,61 @@ const props = defineProps({
   /** 定义需要用到的外部样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
+    default: () => {},
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { zIndex, width, height, imgMargin, navigateUrl, desSize, desColor, customStyle } =
-  toRefs(props)
-const emit = defineEmits<IEmptyEmits>()
+});
+const emit = defineEmits<IEmptyEmits>();
 
 const emptyDescription = computed(() => {
-  return props.description
-})
+  return props.description;
+});
 
 /**
  * @description 整体样式
  * */
 const emptyStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    zIndex: zIndex.value,
-  }
-  return Object.assign(style, customStyle.value)
-})
+    zIndex: props.zIndex,
+  };
+  return Object.assign(style, props.customStyle);
+});
 
 /**
  * @description 提示信息样式
  * */
 const descriptionStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    fontSize: addUnit(desSize.value),
-    color: desColor.value,
-  }
-  return style
-})
+    fontSize: addUnit(props.desSize),
+    color: props.desColor,
+  };
+  return style;
+});
 
 /**
  * @description 图片样式
  * */
 const imgStyle = computed<CSSProperties>(() => {
   return {
-    width: addUnit(width.value),
-    height: addUnit(height.value),
-    margin: imgMargin.value,
-  }
-})
+    width: addUnit(props.width),
+    height: addUnit(props.height),
+    margin: props.imgMargin,
+  };
+});
 
 /**
  * @description 点击按钮，跳转页面
  * */
 const handleClick = () => {
-  emit('click')
-  if (navigateUrl.value) {
+  emit("click");
+  if (props.navigateUrl) {
     uni.navigateTo({
-      url: navigateUrl.value,
-    })
+      url: props.navigateUrl,
+    });
   }
-}
+};
 </script>
 <style scoped lang="scss">
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-empty/icon.ts

@@ -1,78 +1,52 @@
-export default {
-  car: {
-    name: '购物车为空',
-    icon: 'https://pic1.imgdb.cn/item/685b54cb58cb8da5c86d0d4c.png',
-  },
-  page: {
-    name: '页面不存在',
-    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f64.webp',
+import type { IEmptyIcon } from "./typing";
+
+const url = "https://registry.npmmirror.com/wot-design-uni-assets/*/files/";
+
+const emptyIcon: IEmptyIcon = {
+  content: {
+    desc: "暂无内容",
+    icon: url + "content.png",
   },
   search: {
-    name: '没有搜索结果',
-    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e84.webp',
+    desc: "没有搜索结果",
+    icon: url + "search.png",
   },
   address: {
-    name: '没有收货地址',
-    icon: 'https://pic1.imgdb.cn/item/685a6b3558cb8da5c86b6f1a.webp',
+    desc: "没有收货地址",
+    icon: url + "png",
   },
-  wifi: {
-    name: '没有网络',
-    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e87.webp',
+  network: {
+    desc: "没有网络",
+    icon: url + "network.png",
   },
   order: {
-    name: '订单为空',
-    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e85.webp',
+    desc: "订单为空",
+    icon: url + "png",
   },
   coupon: {
-    name: '没有优惠券',
-    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f63.webp',
+    desc: "没有优惠券",
+    icon: url + "png",
   },
   favor: {
-    name: '暂无收藏',
-    icon: 'https://pic1.imgdb.cn/item/685a6b3558cb8da5c86b6f1b.webp',
-  },
-  permission: {
-    name: '无权限',
-    icon: 'https://pic1.imgdb.cn/item/685a6b4358cb8da5c86b6f85.webp',
+    desc: "暂无收藏",
+    icon: url + "collect.png",
   },
   history: {
-    name: '无历史记录',
-    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f62.webp',
+    desc: "无历史记录",
+    icon: url + "png",
   },
   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',
+    desc: "消息列表为空",
+    icon: url + "message.png",
   },
   comment: {
-    name: '暂无评论',
-    icon: 'https://pic1.imgdb.cn/item/685a6aef58cb8da5c86b6d30.webp',
+    desc: "暂无评论",
+    icon: url + "comment.png",
   },
   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',
+    desc: "暂无积分",
+    icon: url + "halo.png",
   },
-}
+};
+
+export default emptyIcon;

package/components/hy-empty/index.scss

@@ -12,14 +12,14 @@
   align-items: center;
   flex-direction: column;
   background: $hy-background;
-  &__description {
+  @include m(description) {
     width: 70%;
     text-align: center;
     margin-top: $hy-border-margin-padding-base;
     color: $hy-text-color--grey;
   }
 
-  &__button {
+  @include m(button) {
     margin-top: 100rpx;
   }
 }