hy-app 0.3.2 → 0.3.3

package/components/hy-address-picker/index.scss

@@ -1,7 +1,7 @@
 @use "../../libs/css/mixin.scss" as *;
 @include b(address-picker) {
   flex: 1;
-  &__has-input {
+  @include e(has-input) {
     position: relative;
     display: flex;
     flex-direction: column;

package/components/hy-avatar/hy-avatar.vue

@@ -62,7 +62,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import type { CSSProperties, PropType } from "vue";
 import type { IAvatarEmit } from "./typing";
 import { addUnit, isNumber, random } from "../../utils";
@@ -92,7 +92,7 @@ const props = defineProps({
    * @values large, medium, small
    * */
   size: {
-    type: [String, Number],
+    type: [String, Number] as PropType<string | number>,
     default: "medium",
   },
   /**
@@ -140,7 +140,10 @@ const props = defineProps({
     default: 0,
   },
   /** 组件标识符 */
-  name: String,
+  name: {
+    type: String,
+    default: "",
+  },
   /** 自定义输入框外部样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
@@ -203,10 +206,10 @@ const avatarStyle = computed<CSSProperties>(() => {
     style.height = addUnit(props.size);
   }
 
-  return Object.assign(style, customStyle.value);
+  return Object.assign(style, props.customStyle);
 });
 const avatarClass = computed<string[]>(() => {
-  const classes: string[] = [`hy-avatar--${shape.value}`];
+  const classes: string[] = [`hy-avatar--${props.shape}`];
   if (typeof props.size === "string") {
     classes.push(`hy-avatar--${props.size}`);
   }
@@ -224,22 +227,16 @@ const init = () => {
 };
 init();
 
-/**
- * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
- * */
-const isImg = () => {
-  return props.src.indexOf("/") !== -1;
-};
 // 图片加载时失败时触发
 function errorHandler() {
-  avatarUrl.value = defaultUrl.value || base64Avatar;
+  avatarUrl.value = props.defaultUrl || base64Avatar;
 }
 
 /**
  * @description 点击头像
  * */
 const clickHandler = (e: Event) => {
-  emit("click", name.value, e);
+  emit("click", props.name, e);
 };
 </script>
 

package/components/hy-avatar/index.scss

@@ -29,7 +29,7 @@
     height: $hy-avatar-size-lg;
   }
 
-  &__image {
+  @include e(image) {
     width: 100%;
     height: 100%;
 

package/components/hy-back-top/index.scss

@@ -10,7 +10,7 @@
   justify-content: center;
   background-color: $hy-background--3;
 
-  &__tips {
+  @include e(tips) {
     font-size: 12px;
     transform: scale(0.8);
   }

package/components/hy-button/index.scss

@@ -14,11 +14,11 @@
   /* #endif */
   flex-direction: row;
 
-  &__text {
+  @include e(text) {
     font-size: 15px;
   }
 
-  &__loading-text {
+  @include e(loading-text) {
     font-size: 15px;
     margin-left: 4px;
   }

package/components/hy-calendar/header.vue

@@ -1,29 +1,29 @@
 <template>
-  <view class="hy-calendar-header hy-border-bottom">
-    <text class="hy-calendar-header__title" v-if="showTitle">{{ title }}</text>
-    <text class="hy-calendar-header__subtitle" v-if="showSubtitle">{{
+  <view class="hy-calendar--header hy-border-bottom">
+    <text class="hy-calendar--header__title" v-if="showTitle">{{ title }}</text>
+    <text class="hy-calendar--header__subtitle" v-if="showSubtitle">{{
       subtitle
     }}</text>
-    <view class="hy-calendar-header__weekdays">
-      <text class="hy-calendar-header__weekdays__weekday">{{
+    <view class="hy-calendar--header__weekdays">
+      <text class="hy-calendar--header__weekdays__weekday">{{
         weekText[0]
       }}</text>
-      <text class="hy-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar--header__weekdays__weekday">{{
         weekText[1]
       }}</text>
-      <text class="hy-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar--header__weekdays__weekday">{{
         weekText[2]
       }}</text>
-      <text class="hy-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar--header__weekdays__weekday">{{
         weekText[3]
       }}</text>
-      <text class="hy-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar--header__weekdays__weekday">{{
         weekText[4]
       }}</text>
-      <text class="hy-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar--header__weekdays__weekday">{{
         weekText[5]
       }}</text>
-      <text class="hy-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar--header__weekdays__weekday">{{
         weekText[6]
       }}</text>
     </view>

package/components/hy-calendar/index.scss

@@ -10,12 +10,12 @@
   }
 
   /* 头部样式 */
-  &-header {
+  @include m(header) {
     display: flex;
     flex-direction: column;
     padding-bottom: 4px;
 
-    &__title {
+    @include e(title) {
       font-size: 16px;
       text-align: center;
       height: 42px;
@@ -23,7 +23,7 @@
       font-weight: bold;
     }
 
-    &__subtitle {
+    @include e(subtitle) {
       font-size: 14px;
       color: $hy-text-color--2;
       height: 40px;
@@ -32,11 +32,11 @@
       font-weight: bold;
     }
 
-    &__weekdays {
+    @include e(weekdays) {
       @include flex;
       justify-content: space-between;
 
-      &__weekday {
+      @include e(weekday) {
         font-size: 13px;
         color: $hy-text-color--grey;
         line-height: 30px;
@@ -47,8 +47,8 @@
   }
 
 
-  &-month {
-    &__title {
+  @include m(month) {
+    @include e(title) {
       display: flex;
       flex-direction: column;
       font-size: 14px;
@@ -60,16 +60,16 @@
     }
 
     /* 内容样式 */
-    &-wrapper {
+    @include e(wrapper) {
       margin-top: 4px;
     }
 
-    &__days {
+    @include e(days) {
       position: relative;
       @include flex;
       flex-wrap: wrap;
 
-      &__month-mark-wrapper {
+      @include e(month-mark-wrapper) {
         position: absolute;
         top: 0;
         bottom: 0;
@@ -79,13 +79,13 @@
         justify-content: center;
         align-items: center;
 
-        &__text {
+        @include e(text) {
           font-size: 155px;
           color: $hy-text-color--4;
         }
       }
 
-      &__day {
+      @include e(day) {
         @include flex;
         padding: 2px;
         /* #ifndef APP-NVUE */
@@ -94,13 +94,13 @@
         box-sizing: border-box;
         /* #endif */
 
-        &__select {
+        @include e(select) {
           flex: 1;
           @include flex;
           align-items: center;
           justify-content: center;
           position: relative;
-          &--selected {
+          @include m(selected) {
             background-color: $hy-primary;
             @include flex;
             justify-content: center;
@@ -114,7 +114,7 @@
             }
           }
 
-          &__dot {
+          @include e(dot) {
             width: 7px;
             height: 7px;
             border-radius: 100px;
@@ -124,7 +124,7 @@
             right: 7px;
           }
 
-          &__buttom-info {
+          @include e(button-info) {
             color: $hy-text-color--2;
             text-align: center;
             position: absolute;
@@ -133,40 +133,40 @@
             left: 0;
             right: 0;
 
-            &--selected {
+            @include m(selected) {
               color: #ffffff;
             }
 
-            &--disabled {
-              background-color: $hy-primary-disabled;
+            @include m(disabled) {
+              color: $hy-text-color--disabled;
             }
           }
 
-          &__info {
+          @include e(info) {
             text-align: center;
             font-size: 16px;
 
-            &--selected {
+            @include m(selected) {
               color: #ffffff;
               background-color: $hy-primary;
             }
 
-            &--disabled {
+            @include m(disabled) {
               color: $hy-text-color--disabled;
             }
           }
 
-          &--range-selected {
+          @include m(range-selected) {
             opacity: 0.3;
             border-radius: 0;
           }
 
-          &--range-start-selected {
+          @include m(range-start-selected) {
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
           }
 
-          &--range-end-selected {
+          @include m(range-end-selected ) {
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
           }

package/components/hy-calendar/month.vue

@@ -1,26 +1,26 @@
 <template>
-  <view class="hy-calendar-month-wrapper" ref="hy-calendar-month-wrapper">
+  <view class="hy-calendar--month__wrapper" ref="hy-calendar--month__wrapper">
     <view
       v-for="(item, index) in months"
       :key="index"
-      :class="[`hy-calendar-month-${index}`]"
-      :ref="`hy-calendar-month-${index}`"
+      :class="[`hy-calendar--month__${index}`]"
+      :ref="`hy-calendar--month__${index}`"
       :id="`month-${index}`"
     >
-      <text v-if="index !== 0" class="hy-calendar-month__title"
+      <text v-if="index !== 0" class="hy-calendar--month__title"
         >{{ item.year }}年{{ item.month }}月</text
       >
-      <view class="hy-calendar-month__days">
+      <view class="hy-calendar--month__days">
         <view
           v-if="showMark"
-          class="hy-calendar-month__days__month-mark-wrapper"
+          class="hy-calendar--month__days__month-mark-wrapper"
         >
-          <text class="hy-calendar-month__days__month-mark-wrapper__text">{{
+          <text class="hy-calendar--month__days__month-mark-wrapper__text">{{
             item.month
           }}</text>
         </view>
         <view
-          class="hy-calendar-month__days__day"
+          class="hy-calendar--month__days__day"
           v-for="(item1, index1) in item.date"
           :key="index1"
           :style="[dayStyle(index, index1, item1)]"
@@ -31,10 +31,10 @@
             :style="[daySelectStyle(index, index1, item1)]"
           >
             <text
-              class="hy-calendar-month__days__day__select__info"
+              class="hy-calendar--month__days__day__select__info"
               :class="[
                 item1.disabled || isForbid(item1)
-                  ? 'hy-calendar-month__days__day__select__info--disabled'
+                  ? 'hy-calendar--month__days__day__select__info--disabled'
                   : '',
               ]"
               :style="[textStyle(item1)]"
@@ -42,10 +42,10 @@
             >
             <text
               v-if="getBottomInfo(index, index1, item1)"
-              class="hy-calendar-month__days__day__select__buttom-info"
+              class="hy-calendar--month__days__day__select__button-info"
               :class="[
                 item1.disabled || isForbid(item1)
-                  ? 'hy-calendar-month__days__day__select__buttom-info--disabled'
+                  ? 'hy-calendar--month__days__day__select__button-info--disabled'
                   : '',
               ]"
               :style="[textStyle(item1)]"
@@ -53,7 +53,7 @@
             >
             <text
               v-if="item1.dot"
-              class="hy-calendar-month__days__day__select__dot"
+              class="hy-calendar--month__days__day__select__dot"
             ></text>
           </view>
         </view>
@@ -65,7 +65,6 @@
 <script>
 import { addUnit, colorGradient, deepClone, getRect, sleep } from "../../utils";
 import dayjs from "dayjs/esm";
-import { formatTime } from "../../utils";
 export default {
   name: "hy-calendar-month",
   props: {
@@ -219,10 +218,10 @@ export default {
       return (index1, index2, item) => {
         const date = dayjs(item.date).format("YYYY-MM-DD");
         const len = this.selected.length - 1;
-        const classes = ["hy-calendar-month__days__day__select"];
+        const classes = ["hy-calendar--month__days__day__select"];
         // 判断选中的
         if (this.selected.some((item) => this.dateSame(item, date))) {
-          classes.push("hy-calendar-month__days__day__select--selected");
+          classes.push("hy-calendar--month__days__day__select--selected");
           if (this.selected.length >= 2) {
             // 判断非两边选中内容
             if (
@@ -230,7 +229,7 @@ export default {
               !this.dateSame(date, this.selected[len])
             ) {
               classes.push(
-                "hy-calendar-month__days__day__select--selected--center",
+                "hy-calendar--month__days__day__select--selected--center",
               );
             }
           }
@@ -385,7 +384,7 @@ export default {
     // 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度
     getWrapperWidth() {
       // #ifndef APP-NVUE
-      getRect(".hy-calendar-month-wrapper").then((size) => {
+      getRect(".hy-calendar--month__wrapper").then((size) => {
         this.width = size.width;
       });
       // #endif
@@ -393,7 +392,7 @@ export default {
     getMonthRect() {
       // 获取每个月份数据的尺寸，用于父组件在scroll-view滚动事件中，监听当前滚动到了第几个月份
       const promiseAllArr = this.months.map((item, index) =>
-        this.getMonthRectByPromise(`hy-calendar-month-${index}`),
+        this.getMonthRectByPromise(`hy-calendar--month__${index}`),
       );
       // 一次性返回
       Promise.all(promiseAllArr).then((sizes) => {

package/components/hy-card/hy-card.vue

@@ -2,18 +2,18 @@
   <view class="hy-card" @tap.stop="click" :class="cardClass" :style="cardStyle">
     <view
       v-if="showHead"
-      class="hy-card__head"
+      class="hy-card--head"
       :style="[{ padding: addUnit(paddingHead || padding) }, headStyle]"
       :class="{
         'hy-border__bottom': headBorderBottom,
       }"
       @tap="headClick"
     >
-      <view v-if="!$slots.header" class="hy-card__head--flex">
-        <view class="hy-card__head--left" v-if="title">
+      <view v-if="!$slots.header" class="hy-card--head__flex">
+        <view class="hy-card--head__left" v-if="title">
           <image
             :src="thumb"
-            class="hy-card__head--left__thumb"
+            class="hy-card--head__left__thumb"
             mode="aspectFill"
             v-if="thumb"
             :style="{
@@ -23,7 +23,7 @@
             }"
           ></image>
           <text
-            class="hy-card__head--left__title"
+            class="hy-card--head__left__title"
             :style="{
               fontSize: addUnit(titleSize),
               color: titleColor,
@@ -32,9 +32,9 @@
             {{ title }}
           </text>
         </view>
-        <view class="hy-card__head--right hy-line-1" v-if="subTitle">
+        <view class="hy-card--head__right hy-line-1" v-if="subTitle">
           <text
-            class="hy-card__head__title__text"
+            class="hy-card--head__title__text"
             :style="{
               fontSize: addUnit(subTitleSize),
               color: subTitleColor,
@@ -88,7 +88,7 @@ export default {
 import { computed } from "vue";
 import type { CSSProperties, PropType } from "vue";
 import type { ICardEmits } from "./typing";
-import { addUnit } from "../../utils";
+import { addUnit, getPx } from "../../utils";
 
 /**
  * 卡片组件一般用于多个列表条目，且风格统一的场景。
@@ -203,13 +203,11 @@ const props = defineProps({
 });
 const emit = defineEmits<ICardEmits>();
 
-const hasBorder =
-  +(props.borderRadius.toString().replace(/\D.*$/, "") || 0) > 0;
 const cardClass = computed(() => {
+  const hasBorder = getPx(props.borderRadius) > 0;
   return [
     props.border && "hy-border",
-    props.full && "hy-border",
-    props.border && "hy-card-full",
+    props.full && "hy-card--full",
     hasBorder && "hy-card--border",
   ].filter(Boolean);
 });

package/components/hy-card/index.scss

@@ -9,38 +9,40 @@
   background-color: $hy-background--container;
   box-sizing: border-box;
 
-  &-full {
+  @include m(full) {
     // 如果是与屏幕之间不留空隙，应该设置左右边距为0
     margin-left: 0 !important;
     margin-right: 0 !important;
     width: 100%;
   }
 
-  &--border:after {
-    border-radius: 16rpx;
+  @include m(border) {
+    @include pseudo(after) {
+      border-radius: 16rpx;
+    }
   }
 
-  &__head {
-    &--flex {
+  @include m(head) {
+    @include e(flex) {
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
 
-    &--left {
+    @include e(left) {
       display: flex;
 
-      &__thumb {
+      @include e(thumb) {
         margin-right: 16rpx;
       }
 
-      &__title {
+      @include e(title) {
         max-width: 400rpx;
         @include lineEllipsis;
       }
     }
 
-    &--right {
+    @include e(right) {
       color: $hy-text-color--grey;
       margin-left: 6rpx;
     }

package/components/hy-cell/hy-cell.vue

@@ -10,7 +10,7 @@
       </slot>
     </view>
     <view
-      class="hy-cell__body"
+      class="hy-cell--body"
       :style="{ 'border-radius': addUnit(borderRadius) }"
     >
       <!-- @slot 整体插槽 -->
@@ -26,10 +26,10 @@
             }"
             @tap="clickHandler($event, item, i)"
           >
-            <view class="hy-cell__body--container__content">
+            <view class="hy-cell--body__container__content">
               <view
                 v-if="item?.icon?.name || $slots.icon"
-                class="hy-cell__body--container__content-icon"
+                class="hy-cell--body__container__content-icon"
               >
                 <!-- @slot 图标插槽 -->
                 <slot name="icon" :icon="item?.icon">
@@ -51,12 +51,12 @@
                   ></HyIcon>
                 </slot>
               </view>
-              <view class="hy-cell__body--container__content-title">
+              <view class="hy-cell--body__container__content-title">
                 <!-- 将slot与默认内容用if/else分开主要是因为微信小程序不支持slot嵌套传递，这样才能解决collapse组件的slot不失效问题，label暂时未用到。 -->
                 <!-- @slot 列表标题插槽 -->
                 <slot name="cell-title" :title="item?.title">
                   <text
-                    class="hy-cell__body--container__content-title--text"
+                    class="hy-cell--body__container__content-title--text"
                     :class="[
                       (disabled || item?.disabled) && 'hy-cell--disabled',
                     ]"
@@ -67,7 +67,7 @@
                 <!-- @slot 列表小标题插槽 -->
                 <slot name="sub" v-if="item?.subhead" :sub="item.subhead">
                   <text
-                    class="hy-cell__body--container__content-title--sub"
+                    class="hy-cell--body__container__content-title--sub"
                     :class="[disabled && 'hy-cell--disabled']"
                   >
                     {{ item.subhead }}
@@ -76,7 +76,7 @@
               </view>
             </view>
             <view
-              class="hy-cell__body--container__center"
+              class="hy-cell--body__container__center"
               :style="{
                 justifyContent:
                   arrange === 'left'
@@ -89,7 +89,7 @@
               <!-- @slot 值内容插槽 -->
               <slot name="value" :record="item">
                 <text
-                  class="hy-cell__body--container__center__value"
+                  class="hy-cell--body__container__center__value"
                   :class="[disabled && 'hy-cell--disabled']"
                   v-if="value || item?.value"
                 >
@@ -98,9 +98,9 @@
               </slot>
             </view>
             <view
-              class="hy-cell__body--container__right-icon"
+              class="hy-cell--body__container__right-icon"
               :class="[
-                `hy-cell__body--container__right-icon--${item?.arrowDirection || arrowDirection}`,
+                `hy-cell--body__container__right-icon--${item?.arrowDirection || arrowDirection}`,
               ]"
             >
               <!-- @slot 右边按钮插槽 -->
@@ -246,7 +246,7 @@ const containerClass = computed(() => {
       !props.disabled &&
         !temp?.disabled &&
         props.clickable &&
-        "hy-cell__body--container__clickable",
+        "hy-cell--body__container__clickable",
     ]
       .filter(Boolean)
       .join();
@@ -254,8 +254,8 @@ const containerClass = computed(() => {
 });
 const ItemClass = computed(() => {
   return [
-    "hy-cell__body--container",
-    `hy-cell__body--container__${props.size}`,
+    "hy-cell--body__container",
+    `hy-cell--body__container__${props.size}`,
   ];
 });