hy-app 0.3.15 → 0.4.0

package/components/hy-modal/index.scss

@@ -7,7 +7,7 @@
   overflow: hidden;
 
   /* 标题 */
-  &__title {
+  @include e(title) {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -20,12 +20,12 @@
   }
 
   /* 内容 */
-  &__content {
+  @include e(content) {
     padding: 20px;
     @include flex;
     justify-content: center;
 
-    &__text {
+    @include m(text) {
       font-size: $hy-font-size-sm;
       color: $hy-text-color--grey;
       flex: 1;
@@ -34,32 +34,32 @@
   }
 
   /* 底部按钮 */
-  &__button {
+  @include e(button) {
     /* 两个按钮的样式 */
-    &-exact {
-      .hy-modal__button-group__wrapper:first-child {
+    @include m(exact) {
+      .first {
         margin-right: $hy-border-margin-padding-lg;
       }
-      &--reverse {
-        .hy-modal__button-group__wrapper:last-child {
+      @include m(reverse) {
+        .last {
           margin-right: $hy-border-margin-padding-lg;
         }
       }
     }
 
 
-    &-group {
+    @include m(group) {
       @include flex;
       padding: 20px;
 
       /* 自定义底部按钮 */
-      &--confirm-button {
+      @include e(confirm-button) {
         flex-direction: column;
         padding: 0 25px 15px;
       }
 
 
-      &__wrapper {
+      @include e(wrapper) {
         flex: 1;
         @include flex;
         justify-content: center;
@@ -68,28 +68,28 @@
         border-radius: $hy-border-radius-semicircle;
 
         /* 确认 */
-        &--confirm {
+        @include m(confirm) {
           background-color: $hy-primary;
-          &-text {
+          @include e(text) {
             color: #FFFFFF;
           }
         }
 
         /* 取消 */
-        &--cancel {
+        @include m(cancel) {
           //background-color: $hy-background--empty;
           background-color: $hy-background--empty;
 
-          &-text {
+          @include e(text) {
             color: $hy-text-color;
           }
         }
 
-        &--hover {
+        @include m(hover) {
           opacity: 0.7;
         }
 
-        &__text {
+        @include m(text) {
           font-size: 16px;
           text-align: center;
         }

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

@@ -1,5 +1,3 @@
-import { RowCenterType } from "hy-app/typing/modules/common";
-
 export default interface HyModalProps {
   /**
    * @description 是否显示模态框，请赋值给show （默认 false ）

package/components/hy-navbar/hy-navbar.vue

@@ -7,7 +7,7 @@
         height: addUnit(getPx(height) + statusBarHeight),
       }"
     ></view>
-    <view :class="[fixed && 'hy-navbar--fixed']">
+    <view :class="[fixed && 'hy-navbar__fixed']">
       <HyStatusBar v-if="safeAreaInsetTop" :bgColor="bgColor"></HyStatusBar>
       <view
         :class="[border && 'hy-border__bottom', 'hy-navbar__content']"
@@ -34,7 +34,7 @@
               :style="{
                 color: leftIconColor,
               }"
-              class="hy-navbar__content__left__text"
+              class="hy-navbar__content__left--text"
             >
               {{ leftText }}
             </text>
@@ -75,7 +75,7 @@
         >
           <slot name="right">
             <HyIcon v-if="rightIcon" :name="rightIcon" size="20"></HyIcon>
-            <text v-if="rightText" class="hy-navbar__content__right__text">{{
+            <text v-if="rightText" class="hy-navbar__content__right--text">{{
               rightText
             }}</text>
           </slot>

package/components/hy-navbar/index.scss

@@ -11,7 +11,7 @@
     z-index: 11;
   }
 
-  &__content {
+  @include e(content) {
     @include flex(row);
     align-items: center;
     height: 44px;
@@ -19,8 +19,7 @@
     position: relative;
     justify-content: center;
 
-    &__left,
-    &__right {
+    @include e(left, right) {
       padding: 0 13px;
       position: absolute;
       top: 0;
@@ -29,36 +28,36 @@
       align-items: center;
     }
 
-    &__left {
+    @include e(left){
       left: 0;
 
-      &--hover {
+      @include m(hover) {
         opacity: 0.7;
       }
 
-      &__text {
+      @include m(text) {
         font-size: 15px;
         margin-left: 3px;
       }
     }
 
-    &__center {
+    @include e(center) {
       display: flex;
       flex-direction: column;
       text-align: center;
-      &--title {
+      @include m(title) {
         font-size: $hy-font-size-base;
       }
-      &--sub {
+      @include m(sub) {
         font-size: $hy-font-size-sm;
         color: $hy-text-color--grey;
       }
     }
 
-    &__right {
+    @include e(right) {
       right: 0;
 
-      &__text {
+      @include m(text) {
         font-size: 15px;
         margin-left: 3px;
       }

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

@@ -18,10 +18,10 @@
       <swiper-item
         v-for="(item, index) in text"
         :key="index"
-        class="hy-notice__swiper__item"
+        class="hy-notice__swiper--item"
         :style="{ justifyContent: justifyContent }"
       >
-        <text class="hy-notice__swiper__item__text" :style="[textStyle]">{{
+        <text class="hy-notice__swiper--item__text" :style="[textStyle]">{{
           item
         }}</text>
       </swiper-item>

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

@@ -7,8 +7,8 @@
     </slot>
     <view class="hy-notice__content" ref="hy-notice__content">
       <view
-        ref="hy-notice__content__text"
-        class="hy-notice__content__text"
+        ref="hy-notice__content--text"
+        class="hy-notice__content--text"
         :style="animationStyle"
       >
         <text
@@ -74,7 +74,7 @@ watch(
     // 进行一定的延时
     await sleep();
     // 查询盒子和文字的宽度
-    textWidth = (await getRect(".hy-notice__content__text", false, instance))
+    textWidth = (await getRect(".hy-notice__content--text", false, instance))
       .width;
     boxWidth = (await getRect(".hy-notice__content", false, instance)).width;
     // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%

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

@@ -16,7 +16,7 @@
     border-radius: $hy-border-radius-sm;
   }
 
-  &__left-icon {
+  @include e(left-icon) {
     align-items: center;
     margin-right: 5px;
     :deep(.hy-icon) {
@@ -24,25 +24,22 @@
     }
   }
 
-  &__right-icon {
+  @include e(right-icon) {
+    margin-left: 5px;
+    align-items: center;
     :deep(.hy-icon) {
       color: $hy-warning;
     }
   }
 
-  &__right-icon {
-    margin-left: 5px;
-    align-items: center;
-  }
-
-  &__content {
+  @include e(content) {
     text-align: right;
     flex: 1;
     @include flex;
     flex-wrap: nowrap;
     overflow: hidden;
 
-    &__text {
+    @include m(text) {
       font-size: 14px;
       color: $hy-warning;
       /* #ifndef APP-NVUE */
@@ -57,18 +54,18 @@
     }
   }
 
-  &__swiper {
+  @include e(swiper) {
     height: 16px;
     @include flex;
     align-items: center;
     flex: 1;
 
-    &__item {
+    @include m(item) {
       @include flex;
       align-items: center;
       overflow: hidden;
 
-      &__text {
+      @include e(text) {
         font-size: 14px;
         color: $hy-warning;
       }

package/components/hy-notify/hy-notify.vue

@@ -5,18 +5,21 @@
       :style="[backgroundColor, customStyle]"
     >
       <hy-status-bar v-if="tmpConfig?.safeAreaInsetTop"></hy-status-bar>
-      <view class="hy-notify--wrapper">
-        <slot name="icon">
+      <view class="hy-notify__wrapper">
+        <template
+          v-if="['success', 'warning', 'error'].includes(tmpConfig.type)"
+        >
+          <slot v-if="$slots.icon" name="icon"></slot>
           <hy-icon
-            v-if="['success', 'warning', 'error'].includes(tmpConfig.type)"
+            v-else
             :name="tmpConfig?.icon || icon"
             :color="tmpConfig?.color"
             :size="tmpConfig.fontSize"
             :customStyle="{ marginRight: '4px' }"
           ></hy-icon>
-        </slot>
+        </template>
         <text
-          class="hy-notify--wrapper__text"
+          class="hy-notify__wrapper--text"
           :style="{
             fontSize: addUnit(tmpConfig?.fontSize),
             color: tmpConfig?.color,

package/components/hy-notify/index.scss

@@ -5,13 +5,13 @@
 @include b(notify) {
   padding: $hy-border-margin-padding-base;
 
-  @include m(wrapper) {
+  @include e(wrapper) {
     @include flex;
     align-items: center;
     text-align: center;
     justify-content: center;
 
-    &__text {
+    @include m(text) {
       font-size: $hy-font-size-base;
       text-align: center;
     }

package/components/hy-number-step/index.scss

@@ -6,15 +6,13 @@
   @include flex(row);
   align-items: center;
 
-  &__slot {
+  @include e(slot) {
     /* #ifndef APP-NVUE */
     touch-action: none;
     /* #endif */
   }
 
-  &__input,
-  &__plus,
-  &__minus {
+  @include e(input, plus, minus) {
     background-color: $hy-background--empty;
     width: 35px;
     @include flex;
@@ -24,27 +22,27 @@
     touch-action: none;
     /* #endif */
 
-    &--hover {
+    @include m(hover) {
       background-color: $hy-background--hover;
     }
 
-    &--disabled {
+    @include m(disabled) {
       color: $hy-text-color--disabled;
       background-color: $hy-background--disabled;
     }
   }
 
-  &__plus {
+  @include e(plus) {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
   }
 
-  &__minus {
+  @include e(minus) {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
   }
 
-  &__input {
+  @include e(input) {
     position: relative;
     text-align: center;
     font-size: 15px;
@@ -53,8 +51,9 @@
     @include flex;
     align-items: center;
     justify-content: center;
+    color: $hy-text-color;
 
-    &--disabled {
+    @include m(disabled) {
       color: $hy-text-color--disabled;
       background-color: $hy-background--disabled;
     }

package/components/hy-pagination/index.scss

@@ -15,12 +15,14 @@
     align-items: center;
     padding: $hy-border-margin-padding-base;
   }
+
   @include e(message) {
     text-align: center;
     font-size: $hy-font-size-sm;
     padding: 1px 0 16px 0;
   }
-  &__nav {
+
+  @include e(nav) {
     min-width: 60px;
     @include m(active){
       color: rgba(0,0,0,0.65)
@@ -29,15 +31,18 @@
       color: rgba(0,0,0,0.15)
     }
   }
+
   @include e(size){
     flex: 1;
     text-align: center;
     font-size: $hy-font-size-sm;
   }
+
   @include e(separator){
     padding:  0 4px;
   }
-  &__left {
+
+  @include e(left) {
     display: inline-block;
   }
   @include e(current){

package/components/hy-parse/index.scss

@@ -1,9 +0,0 @@
-
-.hy-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-}

package/components/hy-picker/hy-picker.vue

@@ -81,8 +81,8 @@
           >
             <view
               v-if="Array.isArray(item)"
-              class="hy-picker--view__column__item u-line-1"
               :class="[
+                'hy-picker--view__column__item',
                 index1 === innerIndex[index] &&
                   'hy-picker--view__column__item--selected',
               ]"

package/components/hy-picker/index.scss

@@ -17,22 +17,22 @@
     }
   }
 
-  &__title {
+  @include e(title) {
     @include flex();
     justify-content: space-between;
     padding: $hy-border-margin-padding-lg;
-    &--center {
+    @include m(center) {
       font-size: $hy-font-size-base;
       color: $hy-text-color--grey;
     }
 
-    &--right {
+    @include m(right) {
       color: $hy-primary;
     }
   }
 
   @include m(view) {
-    &__column {
+    @include e(column) {
       @include flex;
       flex: 1;
       justify-content: center;
@@ -41,17 +41,10 @@
         background: $hy-background--hover;
       }
 
-      &__item {
-        @include flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 16px;
-        text-align: center;
-        /* #ifndef APP-NVUE */
-        display: block;
-        /* #endif */
-
-        &--disabled {
+      @include e(item) {
+        color: $hy-text-color;
+        @include lineEllipsis;
+        @include m(disabled) {
           /* #ifndef APP-NVUE */
           cursor: not-allowed;
           /* #endif */
@@ -60,7 +53,7 @@
       }
     }
 
-    :deep(.hy-picker--view__mask) {
+    @include edeep(mask) {
       background-image: none;
     }
   }

package/components/hy-popover/hy-popover.vue

@@ -34,11 +34,11 @@
         </view>
       </view>
     </view>
+
     <hy-transition
       custom-class="hy-popover__pos"
       :custom-style="popover.popStyle.value"
       :show="showPopover"
-      name="fade"
       :duration="200"
     >
       <view class="hy-popover__container">
@@ -195,6 +195,7 @@ const emit = defineEmits<IPopoverEmits>();
 const slots = useSlots();
 const queue = inject<Queue | null>(queueKey, null);
 const selector: string = "popover";
+const visibleArrow = ref<boolean>(true);
 const { proxy } = getCurrentInstance() as any;
 const popover = usePopover();
 const showPopover = ref<boolean>(false); // 控制popover显隐
@@ -213,7 +214,7 @@ watch(
 watch(
   () => props.placement,
   (newVal) => {
-    popover.init(newVal, true, selector);
+    popover.init(newVal, visibleArrow.value, selector);
   },
 );
 
@@ -229,7 +230,6 @@ watch(
   (newValue) => {
     if (newValue) {
       popover.control(props.placement, props.offset);
-      // provide/inject在微信小程序不能使用，所以执行两个保存方法
       if (queue && queue.closeOther) {
         queue.closeOther(proxy);
       } else {
@@ -245,7 +245,9 @@ watch(
 );
 
 onMounted(() => {
-  popover.init(props.placement, true, selector);
+  setTimeout(() => {
+    popover.init(props.placement, visibleArrow.value, selector);
+  }, 2000);
 });
 
 onBeforeMount(() => {

package/components/hy-popup/hy-popup.vue

@@ -24,8 +24,10 @@
         <view
           v-if="closeable"
           @tap.stop="close"
-          class="hy-popup__content__close"
-          :class="['hy-popup__content__close--' + closeIconPos]"
+          :class="[
+            'hy-popup__content__close',
+            'hy-popup__content__close--' + closeIconPos,
+          ]"
           hover-class="hy-popup__content__close--hover"
           hover-stay-time="150"
         >

package/components/hy-popup/index.scss

@@ -5,56 +5,69 @@
 @include b(popup) {
   flex: 1;
 
-  &__content {
+  @include e(content) {
     background-color: $hy-background--container;
     position: relative;
 
-    &--round-top {
-      border-radius: 0 0 $hy-border-radius-lg $hy-border-radius-lg;
-    }
+    @include m(round) {
 
-    &--round-left {
-      border-radius: 0 $hy-border-radius-lg $hy-border-radius-lg 0;
-    }
+      &-top {
+        border-radius: 0 0 $hy-border-radius-lg $hy-border-radius-lg;
+      }
 
-    &--round-right {
-      border-radius: $hy-border-radius-lg 0 0 $hy-border-radius-lg;
-    }
+      &-left {
+        border-radius: 0 $hy-border-radius-lg $hy-border-radius-lg 0;
+      }
 
-    &--round-bottom {
-      border-radius: $hy-border-radius-lg $hy-border-radius-lg 0 0;
-    }
+      &-right {
+        border-radius: $hy-border-radius-lg 0 0 $hy-border-radius-lg;
+      }
 
-    &--round-center {
-      border-radius: $hy-border-radius-lg;
+      &-bottom {
+        border-radius: $hy-border-radius-lg $hy-border-radius-lg 0 0;
+      }
+
+      &-center {
+        border-radius: $hy-border-radius-lg;
+      }
     }
 
-    &__close {
+    @include e(close) {
       position: absolute;
 
-      &--hover {
+      @include m(hover) {
         opacity: 0.4;
       }
     }
 
-    &__close--top-left {
-      top: $hy-border-margin-padding-lg;
-      left: $hy-border-margin-padding-lg;
-    }
+    @include e(close) {
 
-    &__close--top-right {
-      top: $hy-border-margin-padding-lg;
-      right: $hy-border-margin-padding-lg;
-    }
+      @include m(top) {
 
-    &__close--bottom-left {
-      bottom: $hy-border-margin-padding-lg;
-      left: $hy-border-margin-padding-lg;
-    }
+        &-left {
+          top: $hy-border-margin-padding-lg;
+          left: $hy-border-margin-padding-lg;
+        }
+
+        &-right {
+          top: $hy-border-margin-padding-lg;
+          right: $hy-border-margin-padding-lg;
+        }
+
+      }
+      @include m(bottom) {
+
+        &-left {
+          bottom: $hy-border-margin-padding-lg;
+          left: $hy-border-margin-padding-lg;
+        }
+
+        &-right {
+          right: $hy-border-margin-padding-lg;
+          bottom: $hy-border-margin-padding-lg;
+        }
+      }
 
-    &__close--bottom-right {
-      right: $hy-border-margin-padding-lg;
-      bottom: $hy-border-margin-padding-lg;
     }
   }
 }