hy-app 0.3.16 → 0.4.0

package/components/hy-swipe-action/index.scss

@@ -4,24 +4,28 @@
 @include b(swipe-action) {
   position: relative;
   overflow: hidden;
-  @include m(left) {
+
+  @include e(left) {
     left: 0;
     transform: translate3d(-100%, 0, 0);
     position: absolute;
     top: 0;
     height: 100%;
   }
-  @include m(right) {
+
+  @include e(right) {
     right: 0;
     transform: translate3d(100%, 0, 0);
     position: absolute;
     top: 0;
     height: 100%;
-    &__action {
+
+    @include m(action) {
       display: flex;
       align-items: center;
       height: 100%;
-      &-btn {
+
+      @include e(btn) {
         padding: 0 15px;
         line-height: 46px;
         display: flex;

package/components/hy-swiper/hy-swiper-indicator.vue

@@ -18,11 +18,11 @@
     </view>
     <view class="hy-swiper-indicator__wrapper" v-if="indicatorMode === 'dot'">
       <view
-        class="hy-swiper-indicator__wrapper__dot"
+        class="hy-swiper-indicator__wrapper--dot"
         v-for="(item, index) in length"
         :key="index"
         :class="[
-          index === current && 'hy-swiper-indicator__wrapper__dot--active',
+          index === current && 'hy-swiper-indicator__wrapper--dot__active',
         ]"
         :style="[dotStyle(index)]"
       >

package/components/hy-swiper/hy-swiper.vue

@@ -31,18 +31,18 @@
       :easingFunction="easingFunction"
     >
       <swiper-item
-        class="hy-swiper__wrapper__item"
+        class="hy-swiper__wrapper--item"
         v-for="(item, index) in list"
         :key="index"
       >
         <slot :record="item" :index="index">
           <view
-            class="hy-swiper__wrapper__item__wrapper"
+            class="hy-swiper__wrapper--item__wrapper"
             :style="[itemStyle(index)]"
           >
             <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
             <image
-              class="hy-swiper__wrapper__item__wrapper__image"
+              class="hy-swiper__wrapper--item__wrapper--image"
               v-if="getItemType(item) === 'image'"
               :src="getSource(item)"
               :mode="imgMode"
@@ -53,7 +53,7 @@
               }"
             ></image>
             <video
-              class="hy-swiper__wrapper__item__wrapper__video"
+              class="hy-swiper__wrapper--item__wrapper--video"
               v-if="getItemType(item) === 'video'"
               :id="`video-${index}`"
               :enable-progress-gesture="false"
@@ -68,7 +68,7 @@
             ></video>
             <view
               v-if="showTitle && hasTitle(item)"
-              class="hy-swiper__wrapper__item__wrapper__title"
+              class="hy-swiper__wrapper--item__wrapper--title"
             >
               <text class="hy-line-1">{{ hasTitle(item) }}</text>
             </view>
@@ -258,7 +258,7 @@ watch(
 const hasTitle = computed(() => {
   return (item: string | Record<string, any>) => {
     if (typeof item === "object") {
-      return item.title ?? "";
+      return item.title || "";
     } else {
       return "";
     }

package/components/hy-swiper/index.scss

@@ -9,14 +9,14 @@
   position: relative;
   overflow: hidden;
 
-  &__wrapper {
+  @include e(wrapper) {
     flex: 1;
     background-color: $hy-background;
 
-    &__item {
+    @include m(item) {
       flex: 1;
 
-      &__wrapper {
+      @include e(wrapper){
         @include flex;
         position: relative;
         overflow: hidden;
@@ -24,15 +24,11 @@
         flex: 1;
 
 
-        &__image {
-          flex: 1;
-        }
-
-        &__video {
+        @include m([image, video]){
           flex: 1;
         }
 
-        &__title {
+        @include m(title) {
           position: absolute;
           background-color: rgba(0, 0, 0, 0.3);
           bottom: 0;
@@ -47,7 +43,7 @@
     }
   }
 
-  &__indicator {
+  @include e(indicator) {
     position: absolute;
     bottom: $hy-border-margin-padding-sm;
   }

package/components/hy-switch/hy-switch.vue

@@ -2,16 +2,16 @@
   <view
     :class="[
       'hy-switch cursor-pointer',
-      disabled && 'hy-switch--disabled',
-      isActive ? 'hy-switch--active' : 'hy-switch--container',
+      disabled && 'hy-switch__disabled',
+      isActive ? 'hy-switch__active' : 'hy-switch__container',
       customClass,
     ]"
     :style="[switchStyle, customStyle]"
     @tap="clickHandler"
   >
-    <view class="hy-switch--bg" :style="[bgStyle]"></view>
+    <view class="hy-switch__bg" :style="[bgStyle]"></view>
     <view
-      :class="['hy-switch--node', modelValue && 'hy-switch__node--on']"
+      :class="['hy-switch__node', modelValue && 'hy-switch__node--on']"
       :style="[nodeStyle]"
       ref="hy-switch__node"
     >

package/components/hy-switch/index.scss

@@ -1,24 +1,6 @@
 @use "../../libs/css/theme" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-//@include b(theme){
-//  @include m(dark) {
-//    @include b(switch) {
-//      color: $hy-dark-color;
-//      @include m(container) {
-//        background-color: $hy-dark-background--track;
-//      }
-//      @include m(node) {
-//        background-color: $hy-dark-background--container;
-//      }
-//      @include m(bg) {
-//        background-color: $hy-dark-background--track;
-//      }
-//    }
-//  }
-//}
-
 @include b(switch) {
   @include flex(row);
   /* #ifndef APP-NVUE */
@@ -34,11 +16,11 @@
   // 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
   // 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
   overflow: hidden;
-  @include m(active){
+  @include e(active){
     background: $hy-primary;
   }
 
-  @include m(node) {
+  @include e(node) {
     @include flex(row);
     align-items: center;
     justify-content: center;
@@ -50,7 +32,7 @@
     transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
   }
 
-  @include m(bg) {
+  @include e(bg) {
     position: absolute;
     border-radius: $hy-border-radius-semicircle;
     background-color: $hy-background--3;
@@ -59,7 +41,7 @@
     transition-timing-function: ease;
   }
 
-  @include m(disabled) {
+  @include e(disabled) {
     opacity: 0.6;
   }
 }

package/components/hy-tabs/hy-tabs.vue

@@ -2,29 +2,29 @@
   <view class="hy-tabs">
     <view class="hy-tabs__wrapper">
       <slot name="left" />
-      <view class="hy-tabs__wrapper__scroll-view-wrapper">
+      <view class="hy-tabs__wrapper--scroll-view__wrapper">
         <scroll-view
           :scroll-x="scrollable"
           :scroll-left="scrollLeft"
           :scroll-with-animation="true"
-          class="hy-tabs__wrapper__scroll-view"
+          class="hy-tabs__wrapper--scroll-view"
           :show-scrollbar="false"
-          ref="hy-tabs__wrapper__scroll-view"
+          ref="hy-tabs__wrapper--scroll-view"
         >
-          <view class="hy-tabs__wrapper__nav" ref="hy-tabs__wrapper__nav">
+          <view class="hy-tabs__wrapper--nav" ref="hy-tabs__wrapper__nav">
             <view
               v-for="(item, index) in list"
               :key="index"
               @tap="clickHandler(item, index)"
               @longpress="longPressHandler(item, index)"
-              :ref="`u-tabs__wrapper__nav__item-${index}`"
+              :ref="`u-tabs__wrapper--nav__item-${index}`"
               :style="[itemStyle, { flex: scrollable ? '' : 1 }]"
               :class="[
-                'hy-tabs__wrapper__nav__item',
-                `hy-tabs__wrapper__nav__item-${index}`,
-                item.disabled && 'hy-tabs__wrapper__nav__item--disabled',
+                'hy-tabs__wrapper--nav__item',
+                `hy-tabs__wrapper--nav__item-${index}`,
+                item.disabled && 'hy-tabs__wrapper--nav__item--disabled',
                 innerCurrent == index
-                  ? 'hy-tabs__wrapper__nav__item--active'
+                  ? 'hy-tabs__wrapper--nav__item--active'
                   : '',
               ]"
             >
@@ -36,7 +36,7 @@
               />
               <template v-else>
                 <view
-                  class="hy-tabs__wrapper__nav__item__prefix-icon"
+                  class="hy-tabs__wrapper--nav__item--prefix-icon"
                   v-if="item.icon"
                 >
                   <HyIcon :name="item.icon" :customStyle="iconStyle"></HyIcon>
@@ -51,10 +51,10 @@
               <text
                 v-else
                 :class="[
+                  'hy-tabs__wrapper--nav__item--text',
                   item.disabled &&
-                    'hy-tabs__wrapper__nav__item__text--disabled',
+                    'hy-tabs__wrapper--nav__item--text__disabled',
                 ]"
-                class="hy-tabs__wrapper__nav__item--text"
                 :style="[textStyle(index)]"
               >
                 {{ item[keyName] }}
@@ -102,8 +102,8 @@
             </view>
             <!-- #ifndef APP-NVUE -->
             <view
-              class="hy-tabs__wrapper__nav__line"
-              ref="hy-tabs__wrapper__nav__line"
+              class="hy-tabs__wrapper--nav__line"
+              ref="hy-tabs__wrapper--nav__line"
               :style="[
                 {
                   width: addUnit(lineWidth),
@@ -406,7 +406,7 @@ const resize = () => {
  * */
 const getTabsRect = () => {
   return new Promise((resolve) => {
-    getRect(".hy-tabs__wrapper__scroll-view", false, instance).then((size) =>
+    getRect(".hy-tabs__wrapper--scroll-view", false, instance).then((size) =>
       resolve(size),
     );
   });
@@ -417,7 +417,7 @@ const getTabsRect = () => {
 const getAllItemRect = () => {
   return new Promise((resolve) => {
     const promiseAllArr = props.list.map((item, index) =>
-      getRect(`.hy-tabs__wrapper__nav__item-${index}`, false, instance),
+      getRect(`.hy-tabs__wrapper--nav__item-${index}`, false, instance),
     );
     Promise.all(promiseAllArr).then((sizes) => resolve(sizes));
   });

package/components/hy-tabs/index.scss

@@ -2,27 +2,27 @@
 @use "../../libs/css/mixin.scss" as *;
 
 @include b(tabs) {
-  &__wrapper {
+  @include e(wrapper) {
     @include flex;
     align-items: center;
 
-    &__scroll-view-wrapper {
-      flex: 1;
-      /* #ifndef APP-NVUE */
-      overflow: auto hidden;
-      /* #endif */
-    }
-
-    &__scroll-view {
+    @include m(scroll-view) {
       @include flex;
       flex: 1;
+
+      @include e(wrapper) {
+        flex: 1;
+        /* #ifndef APP-NVUE */
+        overflow: auto hidden;
+        /* #endif */
+      }
     }
 
-    &__nav {
+    @include m(nav) {
       @include flex;
       position: relative;
 
-      &__item {
+      @include e(item) {
         height: 44px;
         padding: 0 11px;
         @include flex;
@@ -32,30 +32,30 @@
         cursor: pointer;
         /* #endif */
 
-        &--disabled {
+        @include m(disabled) {
           /* #ifdef H5 */
           cursor: not-allowed;
           /* #endif */
         }
 
-        &--active {
+        @include m(active) {
           .hy-tabs__wrapper__nav__item--text {
             color: $hy-text-color;
           }
         }
 
-        &--text {
+        @include m(text) {
           font-size: 15px;
           color: $hy-text-color;
           white-space: nowrap;
 
-          &--disabled {
+          @include e(disabled) {
             color: $hy-background--disabled !important;
           }
         }
       }
 
-      &__line {
+      @include e(line) {
         height: 3px;
         background: $hy-primary;
         width: 30px;

package/components/hy-tag/index.scss

@@ -6,7 +6,7 @@
   border-style: solid;
   @include flex;
   align-items: center;
-  &__wrapper {
+  @include e(wrapper) {
     @include flex;
     position: relative;
     box-sizing: border-box;

package/components/hy-text/index.scss

@@ -8,12 +8,12 @@
   flex-wrap: nowrap;
   color: $hy-text-color;
 
-  &__price {
+  @include e(price) {
     font-size: 14px;
     color: $hy-text-color--grey;
   }
 
-  &__value {
+  @include e(value) {
     font-size: 14px;
     @include flex;
     flex-wrap: wrap;
@@ -22,7 +22,7 @@
     align-items: center;
 
     /*链接*/
-    &--link {
+    @include m(link) {
       text-decoration: underline;
       color: $hy-primary;
     }

package/components/hy-textarea/hy-textarea.vue

@@ -1,10 +1,10 @@
 <template>
-  <View
+  <view
     :class="['hy-textarea', customClass, textareaClass]"
     :style="[textareaStyle, borderStyle(isFocus)]"
   >
-    <Textarea
-      class="hy-textarea--field"
+    <textarea
+      class="hy-textarea__field"
       :value="innerValue"
       :style="{ height: autoHeight ? 'auto' : addUnit(height) }"
       :placeholder="placeholder || ''"
@@ -30,19 +30,19 @@
       @input="onInput"
       @confirm="onConfirm"
       @keyboardheightchange="onKeyboardheightchange"
-    ></Textarea>
+    ></textarea>
     <!-- #ifndef MP-ALIPAY -->
-    <Text
-      class="hy-textarea--count"
+    <text
+      class="hy-textarea__count"
       :style="{
         'background-color': disabled ? 'transparent' : '',
       }"
       v-if="count"
     >
       {{ innerValue.length }}/{{ maxlength }}
-    </Text>
+    </text>
     <!-- #endif -->
-  </View>
+  </view>
 </template>
 
 <script lang="ts">
@@ -220,10 +220,10 @@ watch(
 const textareaClass = computed(() => {
   let classes: string[] = [];
   props.border === "surround" &&
-    (classes = classes.concat(["hy-border", "hy-textarea--radius"]));
+    (classes = classes.concat(["hy-border", "hy-textarea__radius"]));
   props.border === "bottom" &&
-    (classes = classes.concat(["hy-border__bottom", "hy-textarea--no-radius"]));
-  props.disabled && classes.push("hy-textarea--disabled");
+    (classes = classes.concat(["hy-border__bottom", "hy-textarea__no-radius"]));
+  props.disabled && classes.push("hy-textarea__disabled");
   return classes.join(" ");
 });
 // 组件的样式

package/components/hy-textarea/index.scss

@@ -8,25 +8,26 @@
   flex: 1;
   padding: $hy-border-margin-padding-sm;
 
-  @include m(field) {
+  @include e(field) {
     min-height: 50rpx;
     max-height: 200rpx;
+    color: $hy-text-color;
   }
 
-  @include m(radius) {
+  @include e(radius) {
     border-radius: $hy-border-radius-sm;
   }
 
-  @include m(no-radius) {
+  @include e(no-radius) {
     border-radius: $hy-border-radius-no;
   }
 
-  @include m(disabled) {
+  @include e(disabled) {
     background-color: $hy-background--disabled;
     color: $hy-text-color--disabled;
   }
 
-  @include m(field) {
+  @include e(field) {
     flex: 1;
     font-size: 15px;
     width: 100%;
@@ -34,7 +35,7 @@
     border: none;
   }
 
-  @include m(count) {
+  @include e(count) {
     position: absolute;
     right: 5px;
     bottom: 2px;
@@ -44,7 +45,7 @@
     border-radius: $hy-border-radius-sm;
   }
 }
-textarea {
-  background-color: transparent;
-  border: none;
-}
+//textarea {
+//  background-color: transparent;
+//  border: none;
+//}

package/components/hy-toast/hy-toast.vue

@@ -8,7 +8,7 @@
       :style="[contentStyle]"
       :class="[
         'hy-toast__content',
-        'hy-toast--' + tmpConfig.type,
+        'hy-toast__' + tmpConfig.type,
         tmpConfig.type === 'loading' || tmpConfig.loading
           ? 'hy-toast__content--loading'
           : '',
@@ -31,8 +31,8 @@
       ></HyIcon>
       <text
         :class="[
-          'hy-toast__content__text',
-          'hy-toast__content__text--' + tmpConfig.type,
+          'hy-toast__content--text',
+          'hy-toast__content--text__' + tmpConfig.type,
         ]"
         style="max-width: 400rpx"
       >
@@ -139,10 +139,10 @@ const contentStyle = computed(() => {
 
 const loadingIconColor = computed(() => {
   let colorTmp = "rgb(255, 255, 255)";
-  if (isThemeType(tmpConfig.value.type)) {
+  if (isThemeType(tmpConfig.value.type!)) {
     // loading-icon组件内部会对color参数进行一个透明度处理，该方法要求传入的颜色值
     // 必须为rgb格式的，所以这里做一个处理
-    colorTmp = hexToRgb(ColorConfig[tmpConfig.value.type]) as string;
+    colorTmp = hexToRgb(ColorConfig[tmpConfig.value.type!]) as string;
   }
   return colorTmp;
 });

package/components/hy-toast/index.scss

@@ -2,7 +2,7 @@
 @use "../../libs/css/theme" as *;
 
 @include b(toast){
-  &__content {
+  @include e(content) {
     @include flex;
     padding: 12px 20px;
     border-radius: 4px;
@@ -14,33 +14,33 @@
     /* #endif */
     position: relative;
 
-    &--loading {
+    @include m(loading) {
       flex-direction: column;
       padding: 20px;
     }
 
-    &__text {
+    @include m(text) {
       color: #ffffff;
       font-size: 15px;
       line-height: 15px;
 
-      &--default {
+      @include e(default) {
         color: #ffffff;
       }
 
-      &--error {
+      @include e(error) {
         color: $hy-error;
       }
 
-      &--primary {
+      @include e(primary) {
         color: $hy-primary;
       }
 
-      &--success {
+      @include e(success) {
         color: $hy-success;
       }
 
-      &--warning {
+      @include e(warning) {
         color: $hy-warning;
       }
     }