hy-app 0.3.16 → 0.4.0

package/components/hy-rate/hy-rate.vue

@@ -6,14 +6,14 @@
       @touchend.stop="touchEnd"
     >
       <view
-        class="hy-rate__content__item cursor-pointer"
+        class="hy-rate__content--item cursor-pointer"
         v-for="(item, index) in Number(count)"
         :key="index"
         :class="[elClass]"
       >
         <view
-          class="hy-rate__content__item__icon-wrap"
-          ref="hy-rate__content__item__icon-wrap"
+          class="hy-rate__content--item__icon-wrap"
+          ref="hy-rate__content--item__icon-wrap"
           @tap.stop="clickHandler($event)"
         >
           <HyIcon
@@ -34,13 +34,13 @@
         <view
           v-if="allowHalf"
           @tap.stop="clickHandler($event)"
-          class="hy-rate__content__item__icon-wrap hy-rate__content__item__icon-wrap--half"
+          class="hy-rate__content--item__icon-wrap hy-rate__content--item__icon-wrap--half"
           :style="[
             {
               width: addUnit(rateWidth / 2),
             },
           ]"
-          ref="hy-rate__content__item__icon-wrap"
+          ref="hy-rate__content--item__icon-wrap"
         >
           <HyIcon
             :name="Math.ceil(activeIndex) > index ? activeIcon : inactiveIcon"

package/components/hy-rate/index.scss

@@ -9,14 +9,14 @@
   touch-action: none;
   /* #endif */
 
-  &__content {
+  @include e(content) {
     @include flex;
 
-    &__item {
+    @include m(item) {
       position: relative;
 
-      &__icon-wrap {
-        &--half {
+      @include e(icon-wrap) {
+        @include m(half) {
           position: absolute;
           overflow: hidden;
           top: 0;

package/components/hy-read-more/hy-read-more.vue

@@ -26,27 +26,26 @@
       :style="[innerShadowStyle]"
       v-if="isLongContent"
     >
-      <slot name="toggle">
-        <view class="hy-read-more__toggle__text" @tap="toggleReadMore">
-          <text
-            :style="{
-              color: color,
-              fontSize: addUnit(fontSize),
-              lineHeight: addUnit(fontSize),
-              marginRight: '5px',
-            }"
-          >
-            {{ status === "close" ? closeText : openText }}
-          </text>
-          <view class="hy-read-more__toggle__icon">
-            <HyIcon
-              :color="color"
-              :size="fontSize + 2"
-              :name="status === 'close' ? IconConfig.DOWN : IconConfig.UP"
-            ></HyIcon>
-          </view>
+      <slot v-if="$slots.toggle" name="toggle"></slot>
+      <view v-else class="hy-read-more__toggle--content" @tap="toggleReadMore">
+        <text
+          class="hy-read-more__toggle--content__text"
+          :style="{
+            color: color,
+            fontSize: addUnit(fontSize),
+            lineHeight: addUnit(fontSize),
+          }"
+        >
+          {{ status === "close" ? closeText : openText }}
+        </text>
+        <view class="hy-read-more__toggle--icon">
+          <HyIcon
+            :color="color"
+            :size="fontSize + 2"
+            :name="status === 'close' ? IconConfig.DOWN : IconConfig.UP"
+          ></HyIcon>
         </view>
-      </slot>
+      </view>
     </view>
   </view>
 </template>

package/components/hy-read-more/index.scss

@@ -2,31 +2,37 @@
 @use "../../libs/css/mixin.scss" as *;
 
 @include b(read-more) {
-  &__content {
+  @include e(content) {
     overflow: hidden;
     font-size: 15px;
     text-align: left;
     transition: height 0.3s ease;
   }
 
-  &__toggle {
+  @include e(toggle) {
     @include flex;
     justify-content: center;
     position: relative;
 
-    &--mask {
+    @include m(mask) {
       background-image:
               linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, $hy-background--2 80%);
       padding-top: 100px;
       margin-top: -100px;
     }
 
-    &__text {
+    @include m(content) {
       @include flex;
       align-items: center;
       justify-content: center;
-      margin-top: 5px;
-      color: $hy-primary;
+      margin: $hy-border-margin-padding-sm 0;
+      line-height: 30px;
+
+      @include e(text) {
+        color: $hy-primary;
+        margin-right: $hy-border-margin-padding-sm;
+      }
+
       :deep(.hy-icon) {
         color: $hy-primary;
       }

package/components/hy-scroll-list/hy-scroll-list.vue

@@ -1,7 +1,5 @@
 <template>
   <view class="hy-scroll-list" ref="hy-scroll-list">
-    <!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
-    <!-- 以上平台，支持wxs -->
     <scroll-view
       class="hy-scroll-list__scroll-view scroll-view-native"
       scroll-x
@@ -18,13 +16,12 @@
     >
       <slot></slot>
     </scroll-view>
-    <!--	#endif		-->
     <view class="hy-scroll-list__indicator" v-if="indicator">
-      <view class="hy-scroll-list__indicator__line" :style="lineStyle">
+      <view class="hy-scroll-list__indicator--line" :style="lineStyle">
         <view
-          class="hy-scroll-list__indicator__line__bar"
+          class="hy-scroll-list__indicator--line__bar"
           :style="barStyle"
-          ref="hy-scroll-list__indicator__line__bar"
+          ref="hy-scroll-list__indicator--line__bar"
         ></view>
       </view>
     </view>

package/components/hy-scroll-list/index.scss

@@ -11,7 +11,7 @@
 @include b(scroll-list) {
   padding-bottom: $hy-border-margin-padding-base;
 
-  &__scroll-view {
+  @include e(scroll-view) {
     @include flex;
     // 缺少会在enable-flex模式下高度异常
     align-items: flex-start;
@@ -20,19 +20,19 @@
     }
   }
 
-  &__indicator {
+  @include e(indicator) {
     @include flex;
     justify-content: center;
     margin-top: $hy-border-margin-padding-lg;
 
-    &__line {
+    @include m(line) {
       width: 60px;
       height: 4px;
       border-radius: $hy-border-radius-semicircle;
       overflow: hidden;
       background-color: $hy-background--empty;
 
-      &__bar {
+      @include e(bar) {
         width: 20px;
         height: 4px;
         border-radius: $hy-border-radius-semicircle;

package/components/hy-search/index.scss

@@ -15,7 +15,7 @@ $hy-search-close-size: 20px !default;
   align-items: center;
   flex: 1;
 
-  &__content {
+  @include e(content) {
     @include flex;
     align-items: center;
     padding: 0 $hy-border-margin-padding-lg;
@@ -27,19 +27,19 @@ $hy-search-close-size: 20px !default;
     overflow: hidden;
     background-color: $hy-background--empty;
 
-    &__icon {
+    @include e(icon) {
       @include flex;
       align-items: center;
     }
 
-    &__label {
+    @include e(label) {
       color: $hy-text-color;
       font-size: $hy-font-size-base;
       margin: 0 4px;
     }
 
     /*清除icon样式*/
-    &__close {
+    @include e(close) {
       width: $hy-search-close-size;
       height: $hy-search-close-size;
       border-radius: $hy-border-radius-circle;
@@ -51,21 +51,22 @@ $hy-search-close-size: 20px !default;
     }
 
     /*输入框样式*/
-    &__input {
+    @include e(input) {
       flex: 1;
       font-size: $hy-font-size-base;
       line-height: 1;
       margin: 0 $hy-border-margin-padding-sm;
       color: $hy-text-color;
+      background-color: $hy-background--empty;
 
-      &--placeholder {
+      @include m(placeholder) {
         font-size: 25rpx;
         color: $hy-text-color--placeholder;
       }
     }
   }
 
-  &__action {
+  @include e(action) {
     font-size: $hy-font-size-base;
     color: $hy-text-color;
     width: 0;
@@ -77,7 +78,7 @@ $hy-search-close-size: 20px !default;
     /* #endif */
     text-align: center;
 
-    &--active {
+    @include m(active) {
       width: 40px;
       margin-left: $hy-border-margin-padding-sm;
     }

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

@@ -2,14 +2,14 @@
   <view :class="['hy-slider', customClass]" :style="[customStyle]">
     <template v-if="!useNative || isRange">
       <view
-        ref="hy-slider-inner"
-        class="hy-slider-inner"
+        ref="hy-slider__inner"
+        class="hy-slider__inner"
         @tap="onClick"
         @onTouchStart="onTouchStart2($event, 1)"
         @touchmove="onTouchMove2($event, 1)"
         @touchend="onTouchEnd2($event, 1)"
         @touchcancel="onTouchEnd2($event, 1)"
-        :class="[disabled ? 'hy-slider--disabled' : '']"
+        :class="[disabled ? 'hy-slider__disabled' : '']"
         :style="{
           height:
             isRange && showValue
@@ -71,7 +71,7 @@
         </text>
         <template v-if="isRange">
           <view
-            class="hy-slider__button-wrap hy-slider__button-wrap-0"
+            class="hy-slider__button--wrap hy-slider__button--wrap-0"
             @touchstart="onTouchStart($event, 0)"
             @touchmove="onTouchMove($event, 0)"
             @touchend="onTouchEnd($event, 0)"
@@ -96,7 +96,7 @@
           </view>
         </template>
         <view
-          class="hy-slider__button-wrap"
+          class="hy-slider__button--wrap"
           @touchstart="onTouchStart"
           @touchmove="onTouchMove"
           @touchend="onTouchEnd"

package/components/hy-slider/index.scss

@@ -7,11 +7,11 @@
   @include flex;
   align-items: center;
 
-  &__native {
+  @include e(native) {
     flex: 1;
   }
 
-  &-inner {
+  @include e(inner) {
     flex: 1;
     @include flex(column);
     position: relative;
@@ -20,11 +20,11 @@
     justify-content: center;
   }
 
-  &__show-value {
+  @include e(show-value) {
     margin: $hy-border-margin-padding-base $hy-border-margin-padding-lg $hy-border-margin-padding-base 0;
   }
 
-  &__show-range-value {
+  @include e(show-range-value) {
     padding-top: 2px;
     font-size: 12px;
     line-height: 12px;
@@ -32,7 +32,7 @@
     bottom: 0;
   }
 
-  &__base {
+  @include e(base) {
     background-color: $hy-background--empty;
     border-radius: $hy-border-radius-semicircle;
   }
@@ -49,7 +49,7 @@
   }
   /* #endif */
 
-  &__gap {
+  @include e(gap) {
     position: relative;
     border-radius: $hy-border-radius-semicircle;
     transition: width 0.2s;
@@ -59,7 +59,7 @@
     }
   }
 
-  &__button {
+  @include e(button) {
     width: 24px;
     height: 24px;
     border-radius: 50%;
@@ -69,14 +69,14 @@
     /* #ifdef H5 */
     cursor: pointer;
     /* #endif */
-  }
 
-  &__button-wrap {
-    position: absolute;
-    // transform: translate3d(50%, -50%, 0);
+    @include m(wrap) {
+      position: absolute;
+      // transform: translate3d(50%, -50%, 0);
+    }
   }
 
-  @include m(disabled) {
+  @include e(disabled) {
     opacity: 0.5;
   }
 }

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

@@ -1,4 +1,6 @@
-.hy-status-bar {
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(status-bar) {
   // nvue会默认100%，如果nvue下，显式写100%的话，会导致宽度不为100%而异常
   /* #ifndef APP-NVUE */
   width: 100%;

package/components/hy-steps/hy-steps.vue

@@ -26,7 +26,13 @@
           ]"
           :style="itemStyleInner"
         >
-          <slot name="icon" :error="item?.error" :index="i">
+          <slot
+            v-if="$slots.icon"
+            name="icon"
+            :error="item?.error"
+            :index="i"
+          ></slot>
+          <template v-else>
             <view
               :class="[
                 'hy-steps-item__wrapper--dot__item',
@@ -83,7 +89,7 @@
                 "
               ></HyIcon>
             </view>
-          </slot>
+          </template>
         </view>
         <!-- 步骤状态 -->
 
@@ -93,26 +99,32 @@
           :class="[`hy-steps-item__content--${direction}`]"
           :style="[contentStyle]"
         >
-          <slot name="content" :record="item" :index="i">
-            <slot name="title" :title="item.title" :index="i">
-              <text
-                :class="[
-                  'hy-steps-item__content__title',
-                  current == i && 'hy-steps-item__content__title--active',
-                  current == i &&
-                    item.error &&
-                    'hy-steps-item__content__title--error',
-                ]"
-              >
-                {{ item.title }}
-              </text>
-            </slot>
-            <slot name="desc" :desc="item.desc" :index="i">
-              <text :style="{ fontSize: '12px', color: '#999' }">{{
-                item.desc
-              }}</text>
-            </slot>
-          </slot>
+          <slot
+            v-if="$slots.content"
+            name="content"
+            :record="item"
+            :index="i"
+          ></slot>
+          <template v-else>
+            <slot
+              v-if="$slots.title"
+              name="title"
+              :title="item.title"
+              :index="i"
+            ></slot>
+            <text v-else :class="titleClass(i, item.error)">
+              {{ item.title }}
+            </text>
+            <slot
+              v-if="$slots.desc"
+              name="desc"
+              :desc="item.desc"
+              :index="i"
+            ></slot>
+            <text v-else :style="{ fontSize: '12px', color: '#999' }">{{
+              item.desc
+            }}</text>
+          </template>
         </view>
         <!-- 内容区域 -->
       </view>
@@ -212,10 +224,25 @@ watch(
   },
 );
 
+// 字体标题类名
+const titleClass = computed(() => {
+  return (index: number, error: boolean) => {
+    const classes = ["hy-steps-item__content__title"];
+    if (props.current === index) {
+      classes.push("hy-steps-item__content__title--active");
+
+      if (error) {
+        classes.push("hy-steps-item__content__title--error");
+      }
+    }
+
+    return classes;
+  };
+});
 // 字体颜色
 const textColor = computed(() => {
   return (index: number) =>
-    index == props.current ? "#ffffff" : props.inactiveColor;
+    index === props.current ? "#ffffff" : props.inactiveColor;
 });
 
 /**

package/components/hy-submit-bar/hy-submit-bar.vue

@@ -23,7 +23,7 @@
           <HyBadge
             :value="item?.badge?.value"
             :absolute="true"
-            :offset="item?.badge?.offset ?? [-5, 20]"
+            :offset="item?.badge?.offset || [-5, 20]"
             :isDot="item?.badge?.isDot"
             :type="item?.badge?.type"
             :color="item?.badge?.color"

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

@@ -8,25 +8,26 @@
   padding: $hy-border-margin-padding-base;
   width: 100%;
   box-sizing: border-box;
+
   /*左边内容*/
-  &__left {
+  @include e(left) {
     display: flex;
     font-size: 20rpx;
     flex: 1;
-    &--item {
+    @include m(item) {
       margin: 0 $hy-border-margin-padding-base;
       position: relative;
     }
   }
 
   /*右边内容*/
-  &__right {
+  @include e(right) {
     display: flex;
     justify-content: flex-end;
     font-size: 26rpx;
     align-items: center;
     width: 400rpx;
-    &--button {
+    @include m(button) {
       padding: $hy-border-margin-padding-base $hy-border-margin-padding-lg;
       color: #ffffff;
       display: flex;

package/components/hy-subsection/hy-subsection.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     ref="hy-subsection"
-    :class="[`hy-subsection--${mode}`, 'hy-subsection', customClass]"
+    :class="[`hy-subsection__${mode}`, 'hy-subsection', customClass]"
     :style="[customStyle, wrapperStyle]"
   >
     <view ref="hy-subsection__bar" :style="barStyle" :class="barClass"></view>
@@ -13,7 +13,7 @@
       v-for="(item, index) in list"
       :key="index"
     >
-      <text class="hy-subsection__item__text" :style="[textStyle(index)]">{{
+      <text class="hy-subsection__item--text" :style="[textStyle(index)]">{{
         getName(item)
       }}</text>
     </view>
@@ -150,7 +150,7 @@ const barStyle = computed<CSSProperties>(() => {
 const barClass = computed(() => {
   let className: string[] = ["hy-subsection__bar", "cursor-pointer"];
   const className_2 = [
-    props.mode === "button" && "hy-subsection--button__bar",
+    props.mode === "button" && "hy-subsection__button--bar",
     innerCurrent.value === 0 &&
       props.mode === "subsection" &&
       "hy-subsection__bar--first",

package/components/hy-subsection/index.scss

@@ -11,24 +11,24 @@
   box-sizing: border-box;
   /* #endif */
 
-  @include m(button) {
+  @include e(button) {
     height: 35px;
     background-color: $hy-background--3;
     padding: 3px;
     border-radius: $hy-border-radius-sm;
     align-items: stretch;
 
-    &__bar {
+    @include m(bar) {
       background-color: $hy-background--container !important;
       border-radius: $hy-border-radius-sm;
     }
   }
 
-  @include m(subsection) {
+  @include e(subsection) {
     height: 32px;
   }
 
-  &__bar {
+  @include e(bar) {
     position: absolute;
     /* #ifndef APP-NVUE */
     transition-property: transform, color;
@@ -50,7 +50,7 @@
     }
   }
 
-  &__item {
+  @include e(item) {
     @include flex;
     flex: 1;
     justify-content: center;
@@ -62,7 +62,7 @@
       border: 1px solid $hy-primary;
     }
 
-    &--no-border-right {
+    @include m(no-border-right) {
       border-right-width: 0 !important;
     }
 
@@ -76,7 +76,7 @@
       border-bottom-right-radius: $hy-border-radius-sm;
     }
 
-    &__text {
+    @include m(text) {
       font-size: 12px;
       line-height: 14px;
       @include flex;

package/components/hy-swipe-action/hy-swipe-action.vue

@@ -9,10 +9,10 @@
     @touchcancel="endDrag"
   >
     <!--容器-->
-    <view class="hy-swipe-action--wrapper" :style="wrapperStyle">
+    <view class="hy-swipe-action__wrapper" :style="wrapperStyle">
       <!--左侧操作-->
       <view
-        :class="['hy-swipe-action--left', leftClass]"
+        :class="['hy-swipe-action__left', leftClass]"
         @click="onClick('left')"
       >
         <slot name="left" />
@@ -22,7 +22,7 @@
       <!--内容-->
       <view
         :class="[
-          'hy-swipe-action--center',
+          'hy-swipe-action__center',
           borderBottom && 'hy-border__bottom',
         ]"
       >
@@ -32,13 +32,13 @@
 
       <!--右侧操作-->
       <view
-        :class="['hy-swipe-action--right', rightClass]"
+        :class="['hy-swipe-action__right', rightClass]"
         @click="onClick('right')"
       >
         <slot name="right">
-          <view v-if="!slots.left" class="hy-swipe-action--right__action">
+          <view v-if="!slots.left" class="hy-swipe-action__right--action">
             <view
-              class="hy-swipe-action--right__action-btn"
+              class="hy-swipe-action__right--action__btn"
               v-for="(item, i) in options"
               :style="item.style"
               @tap.stop="onActiveClick(item, i)"
@@ -135,8 +135,8 @@ const props = defineProps({
   beforeClose: Function,
 });
 const emit = defineEmits<ISwipeActionEmits>();
-const leftClass = `hy-swipe-action--left--${guid()}`;
-const rightClass = `hy-swipe-action--right--${guid()}`;
+const leftClass = `hy-swipe-action__left--${guid()}`;
+const rightClass = `hy-swipe-action__right--${guid()}`;
 
 const slots = useSlots();
 const wrapperStyle = ref<string>("");