hy-app 0.3.2 → 0.3.4

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}`,
   ];
 });
 

package/components/hy-cell/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/mixin.scss" as *;
-@use "../../theme.scss" as *;
+@use "../../libs/css/theme" as *;
 
 
 @include b(cell) {
@@ -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

@@ -1,5 +1,5 @@
 @use "../../libs/css/mixin.scss" as *;
-@use "../../theme.scss" as *;
+@use "../../libs/css/theme" as *;
 
 @include b(checkbox) {
   /* #ifndef APP-NVUE */
@@ -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(wrap){
+      /* #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;
-    }
-  }
 }