hy-app 0.3.16 → 0.4.1

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;
     }
   }
 }

package/components/hy-qrcode/hy-qrcode.vue

@@ -3,7 +3,7 @@
     <view class="hy-qrcode__content" @click="preview">
       <!-- #ifndef APP-NVUE -->
       <canvas
-        class="hy-qrcode__canvas"
+        class="hy-qrcode__content--canvas"
         :id="cid"
         :canvas-id="cid"
         :style="{ width: addUnit(size), height: addUnit(size) }"
@@ -11,7 +11,7 @@
       <!-- #endif -->
       <view
         v-if="showLoading && loading"
-        class="hy-qrcode__loading"
+        class="hy-qrcode__content--loading"
         :style="{ width: addUnit(size), height: addUnit(size) }"
       >
         <HyLoading></HyLoading>
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { getCurrentInstance, toRefs, ref, onMounted } from "vue";
+import { getCurrentInstance, ref, onMounted } from "vue";
 import type { IQrcodeEmits } from "./typing";
 import QRCode from "./qrcode.js";
 import { addUnit, error } from "../../utils";

package/components/hy-qrcode/index.scss

@@ -2,25 +2,26 @@
 @use "../../libs/css/mixin.scss" as *;
 
 @include b(qrcode) {
-  &__loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: $hy-background;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-  &__content {
+  @include e(content) {
     position: relative;
 
-    &__canvas {
-      position: fixed;
-      top: -99999rpx;
-      left: -99999rpx;
-      z-index: -99999;
+    //@include m(canvas) {
+    //  position: fixed;
+    //  top: -99999rpx;
+    //  left: -99999rpx;
+    //  z-index: -99999;
+    //}
+
+    @include m(loading) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: $hy-background;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
     }
   }
 }

package/components/hy-radio/hy-radio.vue

@@ -6,7 +6,7 @@
         @tap.stop="wrapperClickHandler($event, item)"
         :style="radioStyle"
         :class="[
-          `hy-radio-label--${iconPlacement}`,
+          `hy-radio__label--${iconPlacement}`,
           borderBottom && placement === 'column' && 'hy-border__bottom',
         ]"
       >
@@ -16,32 +16,36 @@
           :class="iconClasses(item)"
           :style="iconWrapStyle(item)"
         >
-          <slot
-            name="icon"
-            :iconColor="iconColor"
-            :iconSize="addUnit(sizeType[size] ?? iconSize)"
-          >
+          <template v-if="item[fieldNames.checked]">
+            <slot
+              v-if="$slots.icon"
+              name="icon"
+              :iconColor="iconColor"
+              :iconSize="addUnit(sizeType[size] || iconSize)"
+            >
+            </slot>
             <HyIcon
+              v-else
               class="hy-radio__icon-wrap__icon"
               :name="IconConfig.CHECK_MASK"
-              :size="addUnit(sizeType[size] ?? iconSize)"
+              :size="addUnit(sizeType[size] || iconSize)"
               :color="iconColorCom(item.checked)"
             />
-          </slot>
+          </template>
         </view>
         <view
-          class="hy-radio__label-wrap cursor-pointer"
+          class="hy-radio__label--wrap cursor-pointer"
           @tap.stop="labelClickHandler($event, item)"
         >
           <slot name="label" :record="item">
             <text
               :class="[
                 'hy-radio__text',
-                disabled && 'hy-radio__label-wrap--disabled',
+                disabled && 'hy-radio__label--wrap--disabled',
               ]"
               :style="{
                 color: labelColor,
-                fontSize: addUnit(sizeType[size] ?? labelSize),
+                fontSize: addUnit(sizeType[size] || labelSize),
               }"
             >
               {{ item[fieldNames.label] }}
@@ -179,7 +183,7 @@ const columns_1 = ref<CheckboxColumnsVo[]>();
 const sizeType: AnyObject = reactive({
   small: 14,
   medium: 18,
-  large: 22,
+  large: 24,
 });
 
 watch(
@@ -220,7 +224,7 @@ const radioStyle = computed(() => {
   const style: CSSProperties = {};
   if (props.borderBottom && props.placement === "row") {
     error(
-      "检测到您将borderBottom设置为true，需要同时将u-checkbox-group的placement设置为column才有效",
+      "检测到您将borderBottom设置为true，需要同时将hy-checkbox-group的placement设置为column才有效",
     );
   }
   // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
@@ -264,15 +268,13 @@ const iconWrapStyle = computed(() => {
     style.backgroundColor =
       temp[props.fieldNames.checked] && !isDisabled(temp?.disabled)
         ? props.activeColor
-        : !isDisabled(temp?.disabled)
-          ? "#ffffff"
-          : "";
+        : "";
     style.borderColor =
       temp[props.fieldNames.checked] && !isDisabled(temp?.disabled)
         ? props.activeColor
         : props.inactiveColor;
-    style.width = addUnit(sizeType[props.size] ?? props.size);
-    style.height = addUnit(sizeType[props.size] ?? props.size);
+    style.width = addUnit(sizeType[props.size] || props.size);
+    style.height = addUnit(sizeType[props.size] || props.size);
     return style;
   };
 });

package/components/hy-radio/index.scss

@@ -24,16 +24,34 @@
     }
   }
 
-  &-label--left {
-    flex-direction: row;
-  }
+  @include e(label) {
+
+    @include m(left) {
+      flex-direction: row;
+    }
+
+    @include m(right) {
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    @include m(wrap) {
+      /* #ifndef APP-NVUE */
+      word-wrap: break-word;
+      /* #endif */
+
+      color: $hy-text-color;
+      font-size: $hy-font-size-base;
+      margin-right: $hy-border-margin-padding-sm;
+
+      @include m(disabled) {
+        color: $hy-text-color--disabled;
+      }
+    }
 
-  &-label--right {
-    flex-direction: row-reverse;
-    justify-content: space-between;
   }
 
-  &__icon-wrap {
+  @include e(icon-wrap) {
     /* #ifndef APP-NVUE */
     box-sizing: border-box;
     // nvue下，border-color过渡有问题
@@ -50,7 +68,7 @@
 
     /* #ifdef MP-TOUTIAO */
     // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
-    &__icon {
+    @include e(icon) {
       line-height: 0;
     }
 
@@ -86,18 +104,4 @@
       }
     }
   }
-
-  &__label-wrap {
-    /* #ifndef APP-NVUE */
-    word-wrap: break-word;
-    /* #endif */
-
-    color: $hy-text-color;
-    font-size: $hy-font-size-base;
-    margin-right: $hy-border-margin-padding-sm;
-
-    @include m(disabled) {
-      color: $hy-text-color--disabled;
-    }
-  }
 }

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;