hy-app 0.6.9 → 0.7.1

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-signature/hy-signature.vue

@@ -99,7 +99,7 @@ export default {
 import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch } from 'vue'
 import type { CSSProperties } from 'vue'
 import { addUnit, getRect, guid } from '../../libs'
-import type { SignatureExpose, SignatureResult, Point, Line, ISignatureEmits } from './typing'
+import type { ISignatureExpose, SignatureResult, Point, Line, ISignatureEmits } from './typing'
 // #ifdef MP-WEIXIN
 import { canvas2dAdapter } from './canvasHelper'
 // #endif
@@ -165,7 +165,7 @@ const currentLine = ref<Line>() // 当前正在绘制的线
 const currentStep = ref(0) // 当前步骤
 
 /**
- * @description 添加计算笔画宽度的方法
+ * 添加计算笔画宽度的方法
  * */
 function calculateLineWidth(speed: number): number {
     if (!props.pressure) return props.lineWidth
@@ -178,7 +178,7 @@ function calculateLineWidth(speed: number): number {
 }
 
 /**
- * @description 获取默认笔画宽度
+ * 获取默认笔画宽度
  * */
 const getDefaultLineWidth = () => {
     if (props.pressure) {
@@ -189,7 +189,7 @@ const getDefaultLineWidth = () => {
 }
 
 /**
- * @description 开始画线
+ * 开始画线
  * */
 const startDrawing = (e: any) => {
     e.preventDefault()
@@ -219,7 +219,7 @@ const startDrawing = (e: any) => {
 }
 
 /**
- * @description 结束画线
+ * 结束画线
  * */
 const stopDrawing = (e: TouchEvent) => {
     e.preventDefault()
@@ -250,7 +250,7 @@ const stopDrawing = (e: TouchEvent) => {
 }
 
 /**
- * @description 初始化 canvas
+ * 初始化 canvas
  * @param forceUpdate 是否强制更新
  */
 const initCanvas = (forceUpdate: boolean = false) => {
@@ -269,7 +269,7 @@ const initCanvas = (forceUpdate: boolean = false) => {
 }
 
 /**
- * @description 清空 canvas
+ * 清空 canvas
  * */
 const clear = () => {
     lines.value = []
@@ -285,7 +285,7 @@ const confirmSignature = () => {
 }
 
 /**
- * @description canvas划线
+ * canvas划线
  * */
 const draw = (e: any) => {
     e.preventDefault()
@@ -349,7 +349,7 @@ const draw = (e: any) => {
 }
 
 /**
- * @description 重绘整个画布
+ * 重绘整个画布
  * */
 const redrawCanvas = () => {
     const { ctx } = canvasState
@@ -422,7 +422,7 @@ const redrawCanvas = () => {
 }
 
 /**
- * @description 修改撤销功能
+ * 修改撤销功能
  * */
 const revoke = () => {
     if (!lines.value.length) return
@@ -434,7 +434,7 @@ const revoke = () => {
 }
 
 /**
- * @description 修改恢复功能
+ * 修改恢复功能
  * */
 const restore = () => {
     if (!redoLines.value.length) return
@@ -446,7 +446,7 @@ const restore = () => {
 }
 
 /**
- * @description 添加平滑线条绘制方法
+ * 添加平滑线条绘制方法
  * */
 function drawSmoothLine(prePoint: Point, point: Point) {
     const { ctx } = canvasState
@@ -513,7 +513,7 @@ onBeforeMount(() => {
 })
 
 /**
- * @description 获取canvas上下文
+ * 获取canvas上下文
  */
 function getContext() {
     return new Promise<UniApp.CanvasContext>((resolve) => {
@@ -557,7 +557,7 @@ function getContext() {
 }
 
 /**
- * @description 设置 canvasState
+ * 设置 canvasState
  */
 function setCanvasState(width: number, height: number) {
     canvasState.canvasHeight = height * pixelRatio.value
@@ -565,7 +565,7 @@ function setCanvasState(width: number, height: number) {
 }
 
 /**
- * @description 设置线段
+ * 设置线段
  * */
 function setLine() {
     const { ctx } = canvasState
@@ -578,7 +578,7 @@ function setLine() {
 }
 
 /**
- *  @description canvas 绘制图片输出成文件类型
+ *  canvas 绘制图片输出成文件类型
  */
 function canvasToImage() {
     const { fileType, quality, exportScale } = props
@@ -633,7 +633,7 @@ function clearCanvas() {
     }
 }
 
-defineExpose<SignatureExpose>({
+defineExpose<ISignatureExpose>({
     init: initCanvas,
     clear,
     confirm: confirmSignature,

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

@@ -64,7 +64,7 @@ export interface Point {
  * @property restore - 恢复上一步操作
  * @property revoke - 撤销上一步操作
  */
-export type SignatureExpose = {
+export type ISignatureExpose = {
     /** 初始化签名板
      * @param forceUpdate - 是否强制更新
      */

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;

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