hy-app 0.3.2 → 0.3.3

package/components/hy-cell/index.scss

@@ -8,7 +8,7 @@
   /*标题*/
   @include m(title) {
     padding: $hy-border-margin-padding-lg $hy-border-margin-padding-base;
-    &__vertical {
+    @include e(vertical){
       position: relative;
       &::after {
         content: "";
@@ -22,13 +22,13 @@
         border-radius: $hy-border-radius-semicircle;
       }
     }
-    &__text {
+    @include e(text) {
       font-size: $hy-font-size-lg;
     }
   }
 
   /*row内容*/
-  &__body {
+  @include m(body) {
     /* #ifndef APP-NVUE */
     box-sizing: border-box;
     /* #endif */
@@ -37,7 +37,7 @@
     border-radius: $hy-border-margin-padding-sm;
     overflow: hidden;
 
-    &--container {
+    @include e(container) {
       @include flex(row);
       align-items: center;
       justify-content: space-between;
@@ -45,32 +45,32 @@
       background-color: $hy-background--container;
 
       /* 大 */
-      &__large {
+      @include e(large) {
         font-size: $hy-font-size-lg;
         padding: 35rpx;
         line-height: 25px;
       }
 
       /* 默认 */
-      &__medium {
+      @include e(medium) {
         font-size: $hy-font-size-base;
         padding: 30rpx;
         line-height: 20px;
       }
 
       /* 小 */
-      &__small {
+      @include e(small) {
         font-size: $hy-font-size-sm;
         padding: 25rpx;
         line-height: 15px;
       }
 
       /*点击状态*/
-      &__clickable {
+      @include e(clickable) {
         background-color: $hy-background--hover;
       }
 
-      &__content {
+      @include e(content) {
         @include flex(row);
         /*左边icon*/
         &-icon {
@@ -94,11 +94,11 @@
       }
 
       /*cell值*/
-      &__center {
+      @include e(center) {
         @include flex;
         max-width: 90%;
         flex: 1;
-        &__value {
+        @include e(value) {
           line-height: 24px;
           color: $hy-text-color--grey;
           margin-right: $hy-border-margin-padding-sm;
@@ -106,21 +106,21 @@
       }
 
       /*右边icon*/
-      &__right-icon {
+      @include e(right-icon) {
         transition: transform 0.3s;
         :deep(.hy-icon) {
           color: $hy-text-color--3;
         }
 
-        &--up {
+        @include m(up) {
           transform: rotate(-90deg);
         }
 
-        &--left {
+        @include m(left) {
           transform: rotate(180deg);
         }
 
-        &--down {
+        @include m(down) {
           transform: rotate(90deg);
         }
       }

package/components/hy-checkbox/hy-checkbox.vue

@@ -1,17 +1,17 @@
 <template>
-  <view class="hy-checkbox-group" :class="bemClass">
+  <view class="hy-checkbox--group" :class="bemClass">
     <template v-for="(item, i) in columns_1" :key="i">
       <view
         class="hy-checkbox cursor-pointer"
         @tap.stop="wrapperClickHandler($event, item)"
         :style="checkboxStyle"
         :class="[
-          `hy-checkbox-label--${iconPlacement}`,
+          `hy-checkbox--label__${iconPlacement}`,
           borderBottom && placement === 'column' && 'hy-border__bottom',
         ]"
       >
         <view
-          class="hy-checkbox__icon-wrap cursor-pointer"
+          class="hy-checkbox--icon-wrap cursor-pointer"
           @tap.stop="iconClickHandler($event, item)"
           :class="iconClasses(item)"
           :style="iconWrapStyle(item)"
@@ -22,7 +22,7 @@
             :iconSize="addUnit(iconSize)"
           >
             <HyIcon
-              class="hy-checkbox__icon-wrap__icon"
+              class="hy-checkbox--icon-wrap__icon"
               :name="IconConfig.CHECK_MASK"
               :size="addUnit(sizeType[size] ?? iconSize)"
               :color="iconColor || '#ffffff'"
@@ -31,9 +31,9 @@
         </view>
         <view
           :class="[
-            'hy-checkbox__label-wrap',
+            'hy-checkbox--label__wrap',
             'cursor-pointer',
-            disabled && 'hy-checkbox__label-wrap--disabled',
+            disabled && 'hy-checkbox--label__wrap--disabled',
           ]"
           @tap.stop="labelClickHandler($event, item)"
         >
@@ -229,14 +229,14 @@ const iconClasses = computed(() => {
   return (temp: CheckboxColumnsVo): string[] => {
     let classes: string[] = [];
     // 组件的形状
-    classes.push("hy-checkbox__icon-wrap--" + props.shape);
+    classes.push("hy-checkbox--icon-wrap--" + props.shape);
     if (isDisabled(temp?.disabled)) {
-      classes.push("hy-checkbox__icon-wrap--disabled");
+      classes.push("hy-checkbox--icon-wrap--disabled");
     }
     if (temp[props.fieldNames.checked]) {
-      classes.push("hy-checkbox__icon-wrap--checked");
+      classes.push("hy-checkbox--icon-wrap--checked");
       if (isDisabled(temp?.disabled)) {
-        classes.push("hy-checkbox__icon-wrap--disabled--checked");
+        classes.push("hy-checkbox--icon-wrap--disabled--checked");
       }
     }
     return classes;

package/components/hy-checkbox/index.scss

@@ -11,29 +11,42 @@
   margin-bottom: 5px;
   margin-top: 5px;
 
-  &-group {
-    &--row {
+  @include m(group) {
+    @include m(row) {
       /* #ifndef APP-NVUE */
       display: flex;
       /* #endif */
       flex-flow: row wrap;
     }
 
-    &--column {
+    @include m(column) {
       @include flex(column);
     }
   }
 
-  &-label--left {
-    flex-direction: row;
-  }
+  @include m(label) {
+    @include e(left) {
+      flex-direction: row;
+    }
+    @include e(right) {
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    @include e( ){
+      /* #ifndef APP-NVUE */
+      word-wrap: break-word;
+      /* #endif */
+      font-size: $hy-font-size-base;
+      margin-right: $hy-border-margin-padding-sm;
 
-  &-label--right {
-    flex-direction: row-reverse;
-    justify-content: space-between;
+      @include m(disabled) {
+        color: $hy-text-color--disabled;
+      }
+    }
   }
 
-  &__icon-wrap {
+  @include m(icon-wrap) {
     /* #ifndef APP-NVUE */
     box-sizing: border-box;
     // nvue下，border-color过渡有问题
@@ -50,7 +63,7 @@
 
     /* #ifdef MP-TOUTIAO */
     // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
-    &__icon {
+    @include e(icon) {
       line-height: 0;
     }
 
@@ -86,16 +99,4 @@
       }
     }
   }
-
-  &__label-wrap {
-    /* #ifndef APP-NVUE */
-    word-wrap: break-word;
-    /* #endif */
-    font-size: $hy-font-size-base;
-    margin-right: $hy-border-margin-padding-sm;
-
-    @include m(disabled) {
-      color: $hy-text-color--disabled;
-    }
-  }
 }

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

@@ -1,22 +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
+        emptyDescription || emptyIcon[mode].desc
       }}</text>
-      <view class="hy-empty__button" v-if="button?.text">
+      <view class="hy-empty--button" v-if="button?.text">
         <HyButton
           :text="button?.text"
           :size="button?.size"
@@ -51,7 +51,7 @@ 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 HyImage from "../hy-image/hy-image.vue";
 
 /**
  * 加载的第一页数据就为空
@@ -67,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,
@@ -81,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,

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;
   }
 }

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

@@ -1,83 +1,96 @@
-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'
+  | "car"
+  | "page"
+  | "search"
+  | "address"
+  | "wifi"
+  | "order"
+  | "coupon"
+  | "favor"
+  | "permission"
+  | "history"
+  | "message"
+  | "image"
+  | "video"
+  | "comment"
+  | "integral"
+  | "subscribe"
+  | "earnings"
+  | "announcement"
+  | "signIn";
+
+export type IEmptyIcon = {
+  [key: string]: {
+    /**
+     * 提示信息
+     * */
+    desc: string;
+    /**
+     * 空状态图片地址
+     * */
+    icon: string;
+  };
+};
 
 export default interface HyEmptyProps {
   /**
    * @description 是否显示空状态
    * */
-  show?: boolean
+  show?: boolean;
   /**
    * @description 缺省页内容
    * */
-  mode?: EmptyModeType
+  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;
 }
 
 export interface IEmptyEmits {
   /** 点击按钮触发 */
-  (e: 'click'): void
+  (e: "click"): void;
 }

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

@@ -8,8 +8,8 @@
     </slot>
     <swiper
       :disable-touch="disableTouch"
-      :vertical="step ? false : true"
-      circular
+      :vertical="!step"
+      :circular="true"
       :interval="duration"
       :autoplay="true"
       class="hy-notice__swiper"

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

@@ -53,7 +53,7 @@ import type IProps from "./typing";
 import defaultProps from "./props";
 import { addUnit, getRect, sleep } from "../../utils";
 import { IconConfig } from "../../config";
-
+// 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);

package/components/hy-notice-bar/index.scss

@@ -24,6 +24,12 @@
     }
   }
 
+  &__right-icon {
+    :deep(.hy-icon) {
+      color: $hy-warning;
+    }
+  }
+
   &__right-icon {
     margin-left: 5px;
     align-items: center;

package/components/hy-popover/index.scss

@@ -31,7 +31,7 @@ $z-index: 998;
     white-space: nowrap;
     z-index: $z-index;
     position: relative;
-    background-color: $hy-background--container;
+    background-color: $hy-background--box;
     border-radius: $hy-border-radius-sm;
   }
 
@@ -63,7 +63,7 @@ $z-index: 998;
     padding: $hy-border-margin-padding-base;
     line-height: 22px;
     z-index: $z-index;
-    background-color: $hy-background--container;
+    background-color: $hy-background--box;
     border-radius: $hy-border-radius-sm;
     box-sizing: content-box;
     width: 200px;
@@ -79,5 +79,5 @@ $z-index: 998;
     z-index: $z-index;
   }
 
-  @include squareArrow(6px, $hy-background--container, $z-index, $hy-box-shadow);
+  @include squareArrow(6px, $hy-background--box, $z-index, $hy-box-shadow);
 }

package/components/hy-search/hy-search.vue

@@ -17,7 +17,7 @@
         borderColor: borderColor,
       }"
     >
-      <template v-if="$slots.label || label !== null">
+      <template v-if="$slots.label || label">
         <slot name="label">
           <text class="hy-search__content__label">{{ label }}</text>
         </slot>
@@ -72,14 +72,7 @@
         v-if="keyword && clear && focused"
         @click="clear"
       >
-        <HyIcon
-          :name="IconConfig.CLOSE"
-          size="11"
-          color="#ffffff"
-          :customStyle="{
-            lineHeight: '12px',
-          }"
-        ></HyIcon>
+        <HyIcon :name="IconConfig.CLOSE" color="#ffffff"></HyIcon>
       </view>
     </view>
     <text

package/components/hy-slider/hy-slider.vue

@@ -187,7 +187,7 @@ const props = defineProps({
   },
   /** 滑块的大小，取值范围为 12 - 28 */
   blockSize: {
-    type: Number,
+    type: [String, Number],
     default: 18,
   },
   /** 最小值 */