hy-app 0.3.16 → 0.4.0

package/components/hy-line-progress/index.scss

@@ -9,13 +9,13 @@
   overflow: hidden;
   border-radius: $hy-border-radius-semicircle;
 
-  &__background {
+  @include e(background) {
     background-color: $hy-background--empty;
     border-radius: $hy-border-radius-semicircle;
     flex: 1;
   }
 
-  &__line {
+  @include e(line) {
     position: absolute;
     top: 0;
     left: 0;
@@ -29,7 +29,7 @@
     background-color: $hy-primary;
   }
 
-  &__text {
+  @include e(text) {
     font-size: 10px;
     color: #ffffff;
     margin-bottom: 1px;

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

@@ -186,7 +186,7 @@ const instance = getCurrentInstance();
 onMounted(() => {
   nextTick(async () => {
     const res = await getRect(".hy-virtual-container", false, instance);
-    viewHeight.value = (res as UniApp.NodeInfo).height ?? 0;
+    viewHeight.value = (res as UniApp.NodeInfo).height || 0;
   });
 });
 
@@ -257,7 +257,7 @@ watch(
  * @description 监听滚动条距离顶部距离，实时更新
  */
 const onScroll = async (e: any) => {
-  scrollTop.value = e.detail.scrollTop ?? 0;
+  scrollTop.value = e.detail.scrollTop || 0;
 };
 
 /**

package/components/hy-list/index.scss

@@ -5,16 +5,16 @@
   padding: 0 $hy-border-margin-padding-base;
   box-sizing: border-box;
 
-  &__list {
+  @include e(list) {
     overflow-anchor: none;
-    &--item {
+    @include m(item) {
       box-sizing: border-box;
     }
 
-    &--left {
+    @include m(left) {
       margin-right: $hy-border-margin-padding-base;
     }
-    &--box {
+    @include m(box) {
       box-sizing: border-box;
       width: 50%;
       display: flex;

package/components/hy-loading/hy-loading.vue

@@ -2,13 +2,12 @@
   <view
     class="hy-loading-icon"
     :style="customStyle"
-    :class="[vertical && 'hy-loading-icon--vertical']"
+    :class="[vertical && 'hy-loading-icon__vertical']"
     v-if="show"
   >
     <view
       v-if="!webviewHide"
-      class="hy-loading-icon__spinner"
-      :class="[`hy-loading-icon__spinner--${mode}`]"
+      :class="['hy-loading-icon__spinner', `hy-loading-icon__spinner--${mode}`]"
       ref="ani"
       :style="{
         color: color,

package/components/hy-loading/index.scss

@@ -8,14 +8,14 @@
   justify-content: center;
   color: #c8c9cc;
 
-  &__text {
+  @include e(text) {
     margin-left: 4px;
     color: $hy-text-color--grey;
     font-size: 14px;
     line-height: 20px;
   }
 
-  &__spinner {
+  @include e(spinner) {
     width: 30px;
     height: 30px;
     position: relative;
@@ -25,19 +25,19 @@
     max-height: 100%;
     animation: hy-rotate 1s linear infinite;
     /* #endif */
-  }
 
-  &__spinner--semicircle {
-    border: 2px solid transparent;
-    border-radius: 50%;
-  }
+    @include m(semicircle) {
+      border: 2px solid transparent;
+      border-radius: 50%;
+    }
 
-  &__spinner--circle {
-    border-radius: 50%;
-    border: 2px solid #e5e5e5;
+    @include m(circle) {
+      border-radius: 50%;
+      border: 2px solid #e5e5e5;
+    }
   }
 
-  &--vertical {
+  @include m(vertical) {
     flex-direction: column;
   }
 }
@@ -49,20 +49,22 @@
 }
 
 @include b(loading-icon) {
-  &__spinner--spinner {
-    animation-timing-function: steps(12);
+  @include e(spinner) {
+    @include m(spinner) {
+      animation-timing-function: steps(12);
+    }
   }
 
   &__text:empty {
     display: none;
   }
 
-  &--vertical &__text {
+  @include e(vertical, text) {
     margin: 6px 0 0;
     color: $hy-text-color--grey;
   }
 
-  &__dot {
+  @include e(dot) {
     position: absolute;
     top: 0;
     left: 0;

package/components/hy-menu/hy-menu.vue

@@ -6,26 +6,25 @@
         :class="menuItemClass(item, i)"
         :style="customStyle"
       >
-        <slot name="icon">
-          <hy-icon
-            class="hy-menu-item__icon"
-            :name="item.icon"
-            :color="current === i ? color || 'var(--hy-theme-color)' : ''"
-            :size="icon?.size || 16"
-            :bold="icon?.bold"
-            :customPrefix="icon?.customPrefix"
-            :imgMode="icon?.imgMode"
-            :width="icon?.width"
-            :height="icon?.height"
-            :top="icon?.top"
-            :stop="icon?.stop"
-            :round="icon?.round"
-            :customStyle="icon?.customStyle || { marginRight: '2px' }"
-          ></hy-icon>
-        </slot>
-        <slot>
-          <text class="hy-menu-item--title">{{ item.title }}</text>
-        </slot>
+        <slot v-if="$slots.icon" name="icon"></slot>
+        <hy-icon
+          v-else
+          class="hy-menu__item__icon"
+          :name="item.icon"
+          :color="current === i ? color || 'var(--hy-theme-color)' : ''"
+          :size="icon?.size || 16"
+          :bold="icon?.bold"
+          :customPrefix="icon?.customPrefix"
+          :imgMode="icon?.imgMode"
+          :width="icon?.width"
+          :height="icon?.height"
+          :top="icon?.top"
+          :stop="icon?.stop"
+          :round="icon?.round"
+          :customStyle="icon?.customStyle || { marginRight: '2px' }"
+        ></hy-icon>
+        <slot v-if="$slots.default"></slot>
+        <text v-else class="hy-menu__item--title">{{ item.title }}</text>
         <hy-badge
           :value="item?.badge"
           :offset="badge?.offset"
@@ -83,6 +82,15 @@ const props = defineProps({
     type: Array as PropType<Array<MenusType>>,
     default: [],
   },
+  /** 对应的键 */
+  id: {
+    type: String,
+    default: "id",
+  },
+  name: {
+    type: String,
+    default: "id",
+  },
   /** 侧边菜单栏宽度 */
   width: {
     type: [String, Number],
@@ -110,23 +118,23 @@ const current = ref<string | number>(0);
 watch(
   () => props.modelValue,
   (newVal) => {
-    current.value = props.list.findIndex((item) => item.id === newVal);
-    // current.value = newVal;
+    if (newVal) current.value = newVal;
   },
+  { immediate: true },
 );
 
 const menuItemClass = computed(() => {
   return (temp: MenusType, i: number) => {
     const classes = [
-      "hy-menu-item",
-      prefix.value && "hy-menu-item--prefix",
-      suffix.value && "hy-menu-item--suffix",
-      temp.disabled && "hy-menu-item--disabled",
+      "hy-menu__item",
+      prefix.value && "hy-menu__item--prefix",
+      suffix.value && "hy-menu__item--suffix",
+      temp.disabled && "hy-menu__item--disabled",
     ];
-    if (current.value === i) {
+    if (current.value === temp[props.id]) {
       classes.push(
-        "hy-menu-item--active",
-        props.color && "hy-menu-item--active__color",
+        "hy-menu__item--active",
+        props.color && "hy-menu__item--active__color",
       );
     }
 
@@ -182,7 +190,7 @@ function handleClick(temp: MenusType, i: number) {
 
 <style lang="scss" scoped>
 @import "./index.scss";
-.hy-menu-item--active__color {
+.hy-menu__item--active__color {
   color: v-bind(color);
   &::before {
     background: v-bind(color);

package/components/hy-menu/index.scss

@@ -6,7 +6,7 @@
   max-width: 260rpx;
   background-color: $hy-background--track;
 
-  &-item {
+  @include e(item) {
     display: flex;
     align-items: center;
     justify-content: flex-start;

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

@@ -5,54 +5,58 @@ import type HyIconProps from "../hy-icon/typing";
 export type ModelValueVo = string | number;
 export interface MenusType {
   /**
-   * @description 唯一id
+   *  唯一id
    * */
   id: string | number;
   /**
-   * @description 标题
+   *  标题
    * */
   title: string;
   /**
-   * @description 是否禁用
+   *  是否禁用
    * */
   disabled?: boolean;
   /**
-   * @description icon
+   *  icon
    * */
   icon?: string;
   /**
-   * @description 徽标值
+   *  徽标值
    * */
   badge?: number;
+  /**
+   *  键值
+   * */
+  [key: string]: string | number;
 }
 
 export default interface HyMenuProps {
   /**
-   * @description 当前值
+   *  当前值
    * */
   modelValue: string | number;
   /**
-   * @description 菜单数据集
+   *  菜单数据集
    * */
   list: MenusType[];
   /**
-   * @description 侧边菜单栏宽度
+   *  侧边菜单栏宽度
    * */
   width?: string | number;
   /**
-   * @description 选中颜色
+   *  选中颜色
    * */
   color?: string;
   /**
-   * @description 图标属性值
+   *  图标属性值
    * */
   icon?: Partial<HyIconProps>;
   /**
-   * @description 徽标属性值
+   *  徽标属性值
    * */
   badge?: Partial<HyBadgeProps>;
   /**
-   * @description 定义需要用到的外部样式
+   *  定义需要用到的外部样式
    * */
   customStyle?: CSSProperties;
 }

package/components/hy-modal/hy-modal.vue

@@ -27,13 +27,13 @@
         }"
       >
         <slot>
-          <text class="hy-modal__content__text">
+          <text class="hy-modal__content--text">
             {{ content }}
           </text>
         </slot>
       </view>
       <view
-        class="hy-modal__button-group--confirm-button"
+        class="hy-modal__button--group__confirm-button"
         v-if="$slots.confirmButton"
       >
         <slot name="confirmButton"></slot>
@@ -41,26 +41,26 @@
       <template v-else>
         <view
           :class="[
-            'hy-modal__button-group',
+            'hy-modal__button--group',
             showCancelButton &&
               showConfirmButton &&
               (!buttonReverse
-                ? 'hy-modal__button-exact'
-                : 'hy-modal__button-exact--reverse'),
+                ? 'hy-modal__button--exact'
+                : 'hy-modal__button--exact--reverse'),
           ]"
           :style="{
             flexDirection: buttonReverse ? 'row-reverse' : 'row',
           }"
         >
           <view
-            class="hy-modal__button-group__wrapper hy-modal__button-group__wrapper--cancel"
+            class="hy-modal__button--group__wrapper first hy-modal__button--group__wrapper--cancel"
             :hover-stay-time="150"
-            hover-class="hy-modal__button-group__wrapper--hover"
+            hover-class="hy-modal__button--group__wrapper--hover"
             v-if="showCancelButton"
             @tap.stop="cancelHandler"
           >
             <text
-              class="hy-modal__button-group__wrapper__text hy-modal__button-group__wrapper--cancel-text"
+              class="hy-modal__button--group__wrapper--text hy-modal__button--group__wrapper--cancel__text"
               :style="{
                 color: cancelColor,
               }"
@@ -69,16 +69,16 @@
             </text>
           </view>
           <view
-            class="hy-modal__button-group__wrapper hy-modal__button-group__wrapper--confirm"
+            class="hy-modal__button--group__wrapper last hy-modal__button--group__wrapper--confirm"
             :hover-stay-time="150"
-            hover-class="hy-modal__button-group__wrapper--hover"
+            hover-class="hy-modal__button--group__wrapper--hover"
             v-if="showConfirmButton"
             @tap="confirmHandler"
           >
             <HyLoading v-if="load" mode="circle"></HyLoading>
             <text
               v-else
-              class="hy-modal__button-group__wrapper__text hy-modal__button-group__wrapper--confirm-text"
+              class="hy-modal__button--group__wrapper--text hy-modal__button--group__wrapper--confirm__text"
               :style="{
                 color: confirmColor,
               }"

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%