hy-app 0.6.8 → 0.7.0

package/components/hy-price/props.ts

@@ -1,54 +1,54 @@
-import type { CSSProperties, PropType } from 'vue'
-
-const priceProps = {
-    /** 传入金额值 */
-    text: {
-        type: [String, Number],
-        default: 0,
-        required: true
-    },
-    /** 金额符号 */
-    symbol: {
-        type: String,
-        default: '￥'
-    },
-    /** 比例大小 */
-    ratio: {
-        type: Number,
-        default: 1.4
-    },
-    /** 保留小数点后几位数 */
-    num: {
-        type: Number,
-        default: 2
-    },
-    /** 字体颜色 */
-    color: {
-        type: String,
-        default: '#FE3232'
-    },
-    /** 字体大小 */
-    size: {
-        type: [Number, String],
-        default: 12
-    },
-    /** 字体粗细 */
-    weight: {
-        type: Number,
-        default: 500
-    },
-    /** 是否倾斜 */
-    slant: {
-        type: Boolean,
-        default: false
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: () => {}
-    },
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default priceProps
+import type { CSSProperties, PropType } from 'vue'
+
+const priceProps = {
+    /** 传入金额值 */
+    text: {
+        type: [String, Number],
+        default: 0,
+        required: true
+    },
+    /** 金额符号 */
+    symbol: {
+        type: String,
+        default: '￥'
+    },
+    /** 比例大小 */
+    ratio: {
+        type: Number,
+        default: 1.4
+    },
+    /** 保留小数点后几位数 */
+    num: {
+        type: Number,
+        default: 2
+    },
+    /** 字体颜色 */
+    color: {
+        type: String,
+        default: '#FE3232'
+    },
+    /** 字体大小 */
+    size: {
+        type: [Number, String],
+        default: 12
+    },
+    /** 字体粗细 */
+    weight: {
+        type: Number,
+        default: 500
+    },
+    /** 是否倾斜 */
+    slant: {
+        type: Boolean,
+        default: false
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => {}
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default priceProps

package/components/hy-radio/props.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, PropType } from 'vue'
-import type { CheckboxColumnsVo, IFieldNames } from '../hy-check-button/typing'
+import type { CheckboxColumnsVo, IFieldNames } from '../../index'
 
 const radioProps = {
     /** 双向绑定值，数组类型 */

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

@@ -1,4 +1,8 @@
-import { CheckboxColumnsVo } from '../hy-check-button/typing'
+import type { ExtractPropTypes } from 'vue'
+import type radioProps from './props'
+import type { CheckboxColumnsVo } from '../../index'
+
+export interface HyRadioProps extends ExtractPropTypes<typeof radioProps> {}
 
 export interface IRadioEmits {
     /** 选择触发 */

package/components/hy-rolling-num/typing.d.ts

@@ -0,0 +1 @@
+export interface HyRollingNum {}

package/components/hy-scroll-list/index.scss

@@ -28,14 +28,14 @@
     @include m(line) {
       width: 60px;
       height: 4px;
-      border-radius: $hy-border-radius-semicircle;
+      border-radius: $hy-radius-semicircle;
       overflow: hidden;
       background-color: $hy-background--empty;
 
       @include e(bar) {
         width: 20px;
         height: 4px;
-        border-radius: $hy-border-radius-semicircle;
+        border-radius: $hy-radius-semicircle;
         background-color: $hy-primary;
       }
     }

package/components/hy-search/index.scss

@@ -42,7 +42,7 @@ $hy-search-close-size: 20px !default;
     @include e(close) {
       width: $hy-search-close-size;
       height: $hy-search-close-size;
-      border-radius: $hy-border-radius-circle;
+      border-radius: $hy-radius-circle;
       background-color: $hy-background--track;
       @include flex(row);
       align-items: center;

package/components/hy-signature/index.scss

@@ -8,7 +8,7 @@
     display: flex;
     overflow: hidden;
     background: $hy-background--3;
-    border-radius: $hy-border-radius-base;
+    border-radius: $hy-radius-base;
     border: $hy-border-line;
   }
 

package/components/hy-skeleton/index.scss

@@ -1,6 +1,23 @@
 @use "../../libs/css/theme" as *;
 @use "../../libs/css/mixin" as *;
 
+@include b(theme--dark) {
+  .hy-skeleton--animation-gradient {
+    &::after {
+      content: ' ';
+      position: absolute;
+      animation: wd-skeleton-gradient 1.5s linear 2s infinite;
+      background: linear-gradient(
+                      90deg,
+                      transparent,
+                      rgba(255, 255, 255, 0.1),
+                      transparent
+      );
+      inset: 0;
+    }
+  }
+}
+
 
 @include b(skeleton) {
   box-sizing: border-box;
@@ -17,7 +34,7 @@
     }
   }
   @include e(col) {
-    border-radius: $hy-border-radius-sm;
+    border-radius: $hy-radius-sm;
     background-color: $hy-background--skeleton;
     display: flex;
     align-items: center;
@@ -32,20 +49,20 @@
     &-text {
       width: 100%;
       height: 20px;
-      border-radius: $hy-border-radius-sm;
+      border-radius: $hy-radius-sm;
     }
 
     &-rect {
       width: 100%;
       height: 20px;
-      border-radius: $hy-border-radius-base;
+      border-radius: $hy-radius-base;
     }
 
     &-circle {
       flex-shrink: 0;
       width: 48px;
       height: 48px;
-      border-radius: $hy-border-radius-circle;
+      border-radius: $hy-radius-circle;
     }
   }
   @include m(animation) {

package/components/hy-slider/index.scss

@@ -15,7 +15,7 @@
     flex: 1;
     @include flex(column);
     position: relative;
-    border-radius: $hy-border-radius-semicircle;
+    border-radius: $hy-radius-semicircle;
     padding: $hy-border-margin-padding-base $hy-border-margin-padding-lg;
     justify-content: center;
   }
@@ -34,7 +34,7 @@
 
   @include e(base) {
     background-color: $hy-background--empty;
-    border-radius: $hy-border-radius-semicircle;
+    border-radius: $hy-radius-semicircle;
   }
 
   /* #ifndef APP-NVUE */
@@ -51,7 +51,7 @@
 
   @include e(gap) {
     position: relative;
-    border-radius: $hy-border-radius-semicircle;
+    border-radius: $hy-radius-semicircle;
     transition: width 0.2s;
     background-color: $hy-primary;
     &-0 {

package/components/hy-steps/hy-steps.vue

@@ -91,7 +91,7 @@
                     :class="[`hy-steps-item__content--${direction}`]"
                     :style="[contentStyle]"
                 >
-                    <slot v-if="$slots.content" name="content" :record="item" :index="i"></slot>
+                    <slot v-if="$slots.content" name="content" :item="item" :index="i"></slot>
                     <template v-else>
                         <slot
                             v-if="$slots.title"

package/components/hy-steps/index.scss

@@ -40,7 +40,7 @@
       align-items: center;
       position: relative;
       background-color: transparent;
-      border-radius: $hy-border-radius-semicircle;
+      border-radius: $hy-radius-semicircle;
 
       /* 选择 */
       &.process {
@@ -70,7 +70,7 @@
         @include e(item) {
           width: 10px;
           height: 10px;
-          border-radius: $hy-border-radius-circle;
+          border-radius: $hy-radius-circle;
           background-color: $hy-info;
           border: none;
         }
@@ -89,7 +89,7 @@
         box-sizing: border-box;
         flex-shrink: 0;
         /* #endif */
-        border-radius: $hy-border-radius-semicircle;
+        border-radius: $hy-radius-semicircle;
         border: $hy-border-line;
         @include flex(row);
         align-items: center;

package/components/hy-submit-bar/typing.d.ts

@@ -2,15 +2,15 @@ import type BadgeProps from '../hy-badge/props'
 
 export interface SubmitBarIconMenus {
     /**
-     * @description icon图标
+     * icon图标
      * */
     icon: string
     /**
-     * @description 文本
+     * 文本
      * */
     text: string
     /**
-     * @description 徽标值
+     * 徽标值
      * */
     badge?: BadgeProps['badge']
     [key: string]: any

package/components/hy-subsection/index.scss

@@ -15,12 +15,12 @@
     height: 35px;
     background-color: $hy-background--3;
     padding: 3px;
-    border-radius: $hy-border-radius-sm;
+    border-radius: $hy-radius-sm;
     align-items: stretch;
 
     @include m(bar) {
       background-color: $hy-background--container !important;
-      border-radius: $hy-border-radius-sm;
+      border-radius: $hy-radius-sm;
     }
   }
 
@@ -38,7 +38,7 @@
     background-color: $hy-primary;
 
     @include m(first) {
-      border-radius: $hy-border-radius-sm 0 0 $hy-border-radius-sm;
+      border-radius: $hy-radius-sm 0 0 $hy-radius-sm;
     }
 
     @include m(center) {
@@ -46,7 +46,7 @@
     }
 
     @include m(last) {
-      border-radius: 0 $hy-border-radius-sm $hy-border-radius-sm 0;
+      border-radius: 0 $hy-radius-sm $hy-radius-sm 0;
     }
   }
 
@@ -67,13 +67,13 @@
     }
 
     @include m(first) {
-      border-top-left-radius: $hy-border-radius-sm;
-      border-bottom-left-radius: $hy-border-radius-sm;
+      border-top-left-radius: $hy-radius-sm;
+      border-bottom-left-radius: $hy-radius-sm;
     }
 
     @include m(last) {
-      border-top-right-radius: $hy-border-radius-sm;
-      border-bottom-right-radius: $hy-border-radius-sm;
+      border-top-right-radius: $hy-radius-sm;
+      border-bottom-right-radius: $hy-radius-sm;
     }
 
     @include m(text) {

package/components/hy-swipe-action/hy-swipe-action.vue

@@ -2,6 +2,7 @@
     <!--注意阻止横向滑动的穿透：横向移动时阻止冒泡-->
     <view
         class="hy-swipe-action"
+        :style="touchActionStyle"
         @click.stop="onClick"
         @touchstart="startDrag"
         @touchmove="onDrag"
@@ -17,7 +18,13 @@
             <!--左侧操作-->
 
             <!--内容-->
-            <view :class="['hy-swipe-action__center', borderBottom && 'hy-border__bottom']">
+            <view
+                :class="[
+                    'hy-swipe-action__center',
+                    centerClass,
+                    borderBottom && 'hy-border__bottom'
+                ]"
+            >
                 <slot></slot>
             </view>
             <!--内容-->
@@ -29,6 +36,7 @@
                         <view
                             class="hy-swipe-action__right--action__btn"
                             v-for="(item, i) in options"
+                            :key="i"
                             :style="item.style"
                             @tap.stop="onActiveClick(item, i)"
                         >
@@ -83,11 +91,13 @@ const props = defineProps(swipeActionProps)
 const emit = defineEmits<ISwipeActionEmits>()
 const leftClass = `hy-swipe-action__left--${guid()}`
 const rightClass = `hy-swipe-action__right--${guid()}`
+const centerClass = `hy-swipe-action__center--${guid()}`
 
 const slots = useSlots()
 const wrapperStyle = ref<string>('')
+const touchActionStyle = ref<Record<string, string>>({ touchAction: 'pan-y' })
 
-// 滑动开始时，wrapper的偏移量
+// 滑动开始时，wrapper 的偏移量
 const originOffset = ref<number>(0)
 // wrapper现在的偏移量
 const wrapperOffset = ref<number>(0)
@@ -150,7 +160,7 @@ function changeState(value?: SwipeActionStatus, old?: SwipeActionStatus) {
 }
 
 /**
- * @description 获取左/右操作按钮的宽度
+ * 获取左/右操作按钮的宽度
  * @return {Promise<[Number, Number]>} 左宽度、右宽度
  */
 const getWidths = (): Promise<number[]> => {
@@ -164,7 +174,7 @@ const getWidths = (): Promise<number[]> => {
     ])
 }
 /**
- * @description wrapper滑动函数
+ * wrapper滑动函数
  * @param {Number} offset 滑动漂移量
  */
 function swipeMove(offset = 0) {
@@ -182,7 +192,7 @@ function swipeMove(offset = 0) {
     wrapperOffset.value = offset
 }
 /**
- * @description click的handler
+ * click的handler
  * @param position
  */
 function onClick(position?: SwipeActionPosition) {
@@ -195,7 +205,7 @@ function onClick(position?: SwipeActionPosition) {
     emit('click', position)
 }
 /**
- * @description 开始滑动
+ * 开始滑动
  */
 function startDrag(event: TouchEvent) {
     if (props.disabled) return
@@ -203,9 +213,13 @@ function startDrag(event: TouchEvent) {
     originOffset.value = wrapperOffset.value
     touch.touchStart(event)
     closeOther(proxy)
+
+    // 设置 touch-action 为 none，阻止默认的滚动行为
+    // 这样可以在 touchmove 中安全调用 preventDefault 而不产生警告
+    touchActionStyle.value = { touchAction: 'none' }
 }
 /**
- * @description 滑动时，逐渐展示按钮
+ * 滑动时，逐渐展示按钮
  * @param event
  */
 function onDrag(event: TouchEvent) {
@@ -214,22 +228,24 @@ function onDrag(event: TouchEvent) {
     touch.touchMove(event)
     if (touch.direction.value === 'vertical') {
         return
-    } else {
-        event.preventDefault()
-        event.stopPropagation()
     }
 
+    // 阻止默认行为和事件冒泡
+    // 由于在 touchstart 时设置了 touch-action: none，这里可以安全调用 preventDefault
+    event.preventDefault()
+    event.stopPropagation()
+
     touching.value = true
 
-    // 本次滑动，wrapper应该设置的偏移量
+    // 本次滑动，wrapper 应该设置的偏移量
     const offset = originOffset.value + touch.deltaX.value
     getWidths().then(([leftWidth, rightWidth]) => {
-        // 如果需要想滑出来的按钮不存在，对应的按钮肯定滑不出来，容器处于初始状态。此时需要模拟一下位于此处的start事件。
+        // 如果需要想滑出来的按钮不存在，对应的按钮肯定滑不出来，容器处于初始状态。此时需要模拟一下位于此处的 start 事件。
         if ((leftWidth === 0 && offset > 0) || (rightWidth === 0 && offset < 0)) {
             swipeMove(0)
             return startDrag(event)
         }
-        // 按钮已经展示完了，再滑动没有任何意义，相当于滑动结束。此时需要模拟一下位于此处的start事件。
+        // 按钮已经展示完了，再滑动没有任何意义，相当于滑动结束。此时需要模拟一下位于此处的 start 事件。
         if (leftWidth !== 0 && offset >= leftWidth) {
             swipeMove(leftWidth)
             return startDrag(event)
@@ -241,7 +257,7 @@ function onDrag(event: TouchEvent) {
     })
 }
 /**
- * @description 滑动结束，自动修正位置
+ * 滑动结束，自动修正位置
  */
 function endDrag() {
     if (props.disabled) return
@@ -249,6 +265,9 @@ function endDrag() {
     const THRESHOLD = 0.3
     touching.value = false
 
+    // 恢复 touch-action，允许正常滚动
+    touchActionStyle.value = { touchAction: 'pan-y' }
+
     getWidths().then(([leftWidth, rightWidth]) => {
         if (
             originOffset.value < 0 && // 之前展示的是右按钮
@@ -287,7 +306,7 @@ function endDrag() {
     })
 }
 /**
- * @description 关闭操过按钮，并在合适的时候调用 beforeClose
+ * 关闭操过按钮，并在合适的时候调用 beforeClose
  */
 function close(reason: SwipeActionReason, position?: SwipeActionPosition) {
     if (reason === 'swipe' && originOffset.value === 0) {

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

@@ -22,7 +22,6 @@
 
     @include m(action) {
       display: flex;
-      align-items: center;
       height: 100%;
 
       @include e(btn) {

package/components/hy-swiper/index.scss

@@ -61,7 +61,7 @@
       @include e(bar) {
         width: 22px;
         height: 4px;
-        border-radius: $hy-border-radius-semicircle;
+        border-radius: $hy-radius-semicircle;
         background-color: #ffffff;
         transition: transform 0.3s;
       }
@@ -70,7 +70,7 @@
     @include m(dot) {
       width: 5px;
       height: 5px;
-      border-radius: $hy-border-radius-semicircle;
+      border-radius: $hy-radius-semicircle;
       margin: 0 $hy-border-margin-padding-sm;
 
       @include e(active) {

package/components/hy-switch/index.scss

@@ -8,7 +8,7 @@
   /* #endif */
   background-color: $hy-background--3;
   position: relative;
-  border-radius: $hy-border-radius-semicircle;
+  border-radius: $hy-radius-semicircle;
   transition: background-color 0.4s;
   border: 1px solid rgba(0, 0, 0, 0.12);
   justify-content: flex-end;
@@ -25,7 +25,7 @@
     align-items: center;
     justify-content: center;
     background-color: $hy-background--container;
-    border-radius: $hy-border-radius-semicircle;
+    border-radius: $hy-radius-semicircle;
     box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
     transition-property: transform;
     transition-duration: 0.4s;
@@ -34,7 +34,7 @@
 
   @include e(bg) {
     position: absolute;
-    border-radius: $hy-border-radius-semicircle;
+    border-radius: $hy-radius-semicircle;
     background-color: $hy-background--3;
     transition-property: transform;
     transition-duration: 0.4s;

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

@@ -1,3 +1,7 @@
+import type { ExtractPropTypes } from 'vue'
+import type switchProps from './props'
+
+export interface HySwitchProps extends ExtractPropTypes<typeof switchProps> {}
 export type SwitchValue = boolean | number | string
 
 export interface ISwitchEmits {

package/components/hy-tabbar/props.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties, PropType } from 'vue'
 import type { HyBadgeProps } from '../hy-badge/typing'
+import type { TabBarItem } from './typing'
 
 const tabBarProps = {
     /** 选中项的索引值 */
@@ -9,7 +10,7 @@ const tabBarProps = {
     },
     /** 导航栏数据集合 */
     list: {
-        type: Array,
+        type: Array as PropType<TabBarItem[]>,
         default: () => []
     },
     /** 是否固定在底部 */

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

@@ -1,14 +1,15 @@
-export interface TabListVo {
+/** 导航栏列表项类型 */
+export interface TabBarItem {
     /**
-     * @description 标题
+     * 标题
      * */
     name: string
     /**
-     * @description icon图标或者图片
+     * icon 图标或者图片
      * */
     icon: string
     /**
-     * @description 徽标值
+     * 徽标值
      * */
     badge?: number
 }

package/components/hy-tabbar-group/index.scss

@@ -19,8 +19,8 @@
   @include m(circle) {
     margin-left: $hy-border-margin-padding-lg;
     margin-right: $hy-border-margin-padding-lg;
-    border-radius: $hy-border-radius-semicircle;
-    box-shadow: $hy-box-shadow;
+    border-radius: $hy-radius-semicircle;
+    box-shadow: $hy-shadow-base;
 
     @include is(fixed) {
       @include is(safe) {