hy-app 0.5.5 → 0.5.7

package/components/hy-cell-item/props.ts

@@ -0,0 +1,66 @@
+import type { CSSProperties, PropType } from 'vue'
+import type { HyIconProps } from '../hy-icon/typing'
+
+const cellItemProps = {
+    /** 头部标题 */
+    title: String,
+    /** 标题下面小提示 */
+    sub: String,
+    /** 是否禁用cell */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 右侧的内容 */
+    value: String,
+    /** 图标，接收icon对象 */
+    icon: {
+        type: Object as PropType<HyIconProps>
+    },
+    /** 右边图标，默认是向左图标 */
+    rightIcon: {
+        type: Object as PropType<HyIconProps>
+    },
+    /**
+     * 右侧箭头的方向
+     * @values left,up,down
+     * */
+    arrowDirection: {
+        type: String,
+        default: 'right'
+    },
+    /**
+     * 点击后跳转的URL地址
+     * */
+    url: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 链接跳转的方式，内部使用的是uview-plus封装的route方法，可能会进行拦截操作
+     * */
+    linkType: {
+        type: String,
+        default: 'navigateTo'
+    },
+    /**
+     * 点击cell是否阻止事件传播
+     * */
+    stop: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 标识符，用于在click事件中进行返回
+     * */
+    name: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default cellItemProps

package/components/hy-cell-item/typing.d.ts

@@ -0,0 +1,7 @@
+import type { ExtractPropTypes, ToRefs } from 'vue'
+import type cellProps from '../hy-cell/props'
+
+export interface ICellContext extends ToRefs<ExtractPropTypes<typeof cellProps>> {
+    /** 点击事件 */
+    onClick: (name: string | number) => void
+}

package/components/hy-checkbox-group/props.ts

@@ -75,6 +75,6 @@ const checkboxGroupProps = {
     customStyle: {
         type: Object as PropType<CSSProperties>
     }
-}
+} as const
 
 export default checkboxGroupProps

package/components/hy-checkbox-item/typing.d.ts

@@ -1,7 +1,7 @@
-import type HyCheckboxGroupProps from '../hy-checkbox-group/typing'
-import type { ToRefs } from 'vue'
+import type checkboxGroupProps from '../hy-checkbox-group/props'
+import type { ExtractPropTypes, ToRefs } from 'vue'
 
-export interface ICheckboxGroupContext extends ToRefs<HyCheckboxGroupProps> {
+export interface ICheckboxGroupContext extends ToRefs<ExtractPropTypes<typeof checkboxGroupProps>> {
     /** 设置check的状态 */
     setCheckedStatus: (name: string | number) => void
 }

package/components/hy-grid/props.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, PropType } from 'vue'
-import type HyIconProps from '../hy-icon/typing'
+import type { HyIconProps } from '../hy-icon/typing'
 import type { CustomKeysVo, GridItemVo } from './typing'
 
 const gridProps = {

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

@@ -1,5 +1,4 @@
-import { CSSProperties } from 'vue'
-import type HyIconProps from '../hy-icon/typing'
+import type { HyIconProps } from '../hy-icon/typing'
 
 export interface GridItemVo {
     /**

package/components/hy-icon/props.ts

@@ -74,6 +74,6 @@ const iconProps = {
     customStyle: Object as PropType<CSSProperties>,
     /** 自定义外部类名 */
     customClass: String
-}
+} as const
 
 export default iconProps

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

@@ -1,3 +1,8 @@
+import type { ExtractPropTypes } from 'vue'
+import iconProps from './props'
+
+export interface HyIconProps extends ExtractPropTypes<typeof iconProps> {}
+
 export interface IIconEmits {
     /** 点击图标触发 */
     (e: 'click', index: string, e: Event): void

package/components/hy-input/hy-input.vue

@@ -40,7 +40,7 @@
                     :type="type"
                     :focus="focus"
                     :cursor="cursor"
-                    :value="String(innerValue)"
+                    :value="innerValue"
                     :auto-blur="autoBlur"
                     :disabled="disabled || readonly"
                     :maxlength="maxlength"
@@ -148,13 +148,14 @@ const innerFormatter = (value: string) => value
 watch(
     () => props.modelValue,
     (newVal) => {
-        if (changeFromInner.value || innerValue.value === newVal) {
-            changeFromInner.value = false // 重要否则会出现双向绑定失效问题https://github.com/ijry/uview-plus/issues/419
+        if (changeFromInner.value || innerValue.value === newVal || newVal === undefined) {
+            changeFromInner.value = false
             return
         }
+        console.log(newVal, 'newVal')
         innerValue.value = newVal
         // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
-        if (firstChange.value === false && changeFromInner.value === false) {
+        if (!firstChange.value && !changeFromInner.value) {
             valueChange(innerValue.value, true)
         }
         firstChange.value = false
@@ -165,14 +166,14 @@ watch(
 )
 
 /**
- * @description 是否显示清除控件
+ * 是否显示清除控件
  * */
 const isShowClear = computed(() => {
     const { clearable, readonly, disabled } = props
     return clearable && !readonly && !disabled && innerValue.value !== ''
 })
 /**
- * @description 组件的类名
+ * 组件的类名
  * */
 const inputClass = computed((): string => {
     let classes: string[] = [],
@@ -185,7 +186,7 @@ const inputClass = computed((): string => {
 })
 
 /**
- * @description 组件的样式
+ * 组件的样式
  * */
 const wrapperStyle = computed((): CSSProperties => {
     const style: CSSProperties = {}
@@ -200,9 +201,9 @@ const wrapperStyle = computed((): CSSProperties => {
     return Object.assign(style, props.customStyle)
 })
 /**
- * @description 输入框的样式
+ * 输入框的样式
  * */
-const inputStyle = computed((): CSSProperties => {
+const inputStyle = computed(() => {
     return {
         color: props.color,
         fontSize: addUnit(props.fontSize),
@@ -211,7 +212,7 @@ const inputStyle = computed((): CSSProperties => {
 })
 
 /**
- * @description 边框颜色
+ * 边框颜色
  * */
 const borderStyle = computed(() => {
     return (isFocus: boolean) => {
@@ -233,13 +234,10 @@ const borderStyle = computed(() => {
 })
 
 /**
- * @description 当键盘输入时，触发input事件
+ * 当键盘输入时，触发input事件
  */
 const onInput = (e: any) => {
     let { value = '' } = e.detail || {}
-    // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
-    // console.log('onInput', value, this.innerValue)
-    innerValue.value = value
     nextTick(() => {
         let formatValue = innerFormatter(value)
         innerValue.value = formatValue
@@ -247,7 +245,7 @@ const onInput = (e: any) => {
     })
 }
 /**
- * @description 输入框失去焦点时触发
+ * 输入框失去焦点时触发
  * */
 const onBlur = async (event: InputOnBlurEvent) => {
     emit('blur', event, event.detail.value)
@@ -256,7 +254,7 @@ const onBlur = async (event: InputOnBlurEvent) => {
     focused.value = false
 }
 /**
- * @description 输入框聚焦时触发
+ * 输入框聚焦时触发
  * */
 const onFocus = (e: InputOnFocusEvent) => {
     focused.value = true
@@ -264,7 +262,7 @@ const onFocus = (e: InputOnFocusEvent) => {
 }
 
 /**
- * @description 点击完成按钮时触发
+ * 点击完成按钮时触发
  * */
 const onConfirm = (e: InputOnConfirmEvent) => {
     emit('confirm', e, innerValue.value)
@@ -288,15 +286,14 @@ const valueChange = (value: string | number, isOut = false) => {
         if (!isOut || clearInput.value) {
             // 标识value值的变化是由内部引起的
             changeFromInner.value = true
+            emit('update:modelValue', value)
             emit('change', value)
             if (formItem) formItem.handleChange(value)
-
-            emit('update:modelValue', value)
         }
     })
 }
 /**
- * @description 点击清除控件
+ * 点击清除控件
  */
 const onClear = () => {
     clearInput.value = true
@@ -319,13 +316,13 @@ const clickHandler = () => {
 }
 
 /**
- * @description 点击前缀
+ * 点击前缀
  * */
 const onPrefix = () => {
     emit('onPrefix')
 }
 /**
- * @description 点击后缀
+ * 点击后缀
  * */
 const onSuffix = () => {
     emit('onSuffix')

package/components/hy-input/props.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, PropType } from 'vue'
 import type { InputConfirmType } from '@uni-helper/uni-types'
-import type HyIconProps from '../hy-icon/typing'
+import type { HyIconProps } from '../hy-icon/typing'
 
 const inputProps = {
     /** 输入的值 */

package/components/hy-menu/props.ts

@@ -1,7 +1,7 @@
 import type { MenusType, ModelValueVo } from './typing'
 import type { CSSProperties, PropType } from 'vue'
-import type HyIconProps from '../hy-icon/typing'
-import type HyBadgeProps from '../hy-badge/typing'
+import type { HyIconProps } from '../hy-icon/typing'
+import type { HyBadgeProps } from '../hy-badge/typing'
 
 const menuProps = {
     /** 当前值 */

package/components/hy-number-step/props.ts

@@ -1,4 +1,4 @@
-import type HyIconProps from './typing'
+import type { HyIconProps } from '../hy-icon/typing'
 import type { PropType } from 'vue'
 
 const numberStepProps = {

package/components/hy-price/hy-price.vue

@@ -54,10 +54,17 @@ const priceOne = computed(() => {
     if (props.text === undefined || props.text === null) return error('text值不能为空')
 
     let value = typeof props.text === 'string' ? props.text : props.text.toString()
+
+    // 格式化整数部分为千分位
+    const formatValue = (val: string) => {
+        return val.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    }
+
     if (/\./g.test(value)) {
-        return Number(value) ? value.split('.') : ['0', '000000']
+        const [integer, decimal] = value.split('.')
+        return [formatValue(integer), decimal]
     } else {
-        return [value, '000000']
+        return [formatValue(value), '000000']
     }
 })
 

package/components/hy-search/props.ts

@@ -1,7 +1,6 @@
 import type { CSSProperties, PropType } from 'vue'
-import type { InputConfirmType } from '@uni-helper/uni-types'
 import { IconConfig } from '../../libs'
-import type HyIconProps from '../hy-icon/typing'
+import type { HyIconProps } from '../hy-icon/typing'
 
 const searchProps = {
     /** 输入框初始值 */

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

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'vue'
+
+export default interface HyStatusBarProps {
+    /**
+     * @description 背景色 (默认 'transparent' )
+     * */
+    bgColor?: string
+    /**
+     * @description 自定义样式
+     * */
+    customStyle?: CSSProperties
+}

package/components/hy-sticky/hy-sticky.vue

@@ -0,0 +1,226 @@
+<template>
+    <view>
+        <!-- 哨兵必须在 sticky 前面 -->
+        <view :id="sentinelId" class="hy-sticky__sentinel"></view>
+
+        <!-- 占位元素：当吸顶后占据原高度，避免页面抖动 -->
+        <view v-if="isFixed" :style="{ height: placeholderHeight + 'px' }" />
+
+        <view
+            ref="stickyRef"
+            :class="['hy-sticky', isFixed ? 'hy-sticky__fixed' : '']"
+            :style="mergedStyle"
+        >
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, nextTick, getCurrentInstance, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { onPageScroll } from '@dcloudio/uni-app'
+import { addUnit, getRect } from '../../libs'
+import type { IStickyEmits } from './typing'
+import stickyProps from './props'
+
+const props = defineProps(stickyProps)
+const emit = defineEmits<IStickyEmits>()
+
+const instance = getCurrentInstance()
+const sentinelId = `hy-sticky-sentinel-${Math.random().toString(36).slice(2, 9)}`
+const stickyRef = ref<HTMLElement | null>(null)
+const isFixed = ref(false)
+const placeholderHeight = ref(0)
+let observer: UniApp.IntersectionObserver | null = null
+let rafTimer = 0
+
+// 组件样式（吸顶时使用 fixed/fallback）
+// 注意：position: sticky 在部分平台失效时，我们使用绝对 fixed 样式做回退
+const mergedStyle = computed<CSSProperties>(() => {
+    if (!props.enable) return {}
+    if (isFixed.value) {
+        // fixed 样式回退，尽量跟 sticky 表现一致
+        return {
+            position: 'fixed',
+            top: addUnit(props.offsetTop),
+            left: '0px',
+            right: '0px',
+            zIndex: props.zIndex
+            // 保持宽度，如果需要你可以传入宽度样式到 custom style slot
+        }
+    } else {
+        return {
+            position: 'sticky',
+            top: addUnit(props.offsetTop),
+            zIndex: props.zIndex
+        }
+    }
+})
+
+// Helper: 查询哨兵和 sticky 高度/位置
+const querySentinel = (): Promise<{
+    sentinelTop: number
+    sentinelBottom: number
+    stickyHeight: number
+}> => {
+    return new Promise((resolve) => {
+        const query = uni.createSelectorQuery().in(instance!)
+        query
+            .select(`#${sentinelId}`)
+            .boundingClientRect()
+            .selectViewport()
+            .exec((res: any[]) => {
+                // res 结构：[ sentinelRect, viewportRect ]
+                const sentinelRect = res[0] || {}
+                const viewportRect = res[1] || {}
+                const stickyRectQuery = uni.createSelectorQuery().in(instance!)
+                stickyRectQuery
+                    .select('.hy-sticky')
+                    .boundingClientRect()
+                    .exec((r2: any[]) => {
+                        const stickyRect = (r2 && r2[0]) || {}
+                        resolve({
+                            sentinelTop: sentinelRect.top ?? 0,
+                            sentinelBottom: sentinelRect.bottom ?? 0,
+                            stickyHeight: stickyRect.height ?? 0
+                        })
+                    })
+            })
+    })
+}
+
+// IntersectionObserver 初始化（优先）
+const initObserver = async () => {
+    if (!props.enable) return
+    // 先断开之前的
+    observer?.disconnect()
+    observer = null
+
+    try {
+        // 若用户传入 scrollSelector，则使用 relativeTo(container)
+        const ins = instance!
+        const io = uni.createIntersectionObserver(ins, {
+            thresholds: [0, 1]
+        })
+
+        if (props.scrollSelector) {
+            // 使用相对容器（scroll-view）
+            io.relativeTo(`.${props.scrollSelector}`, { top: props.offsetTop })
+        } else {
+            // 使用视口
+            io.relativeToViewport({ top: -props.offsetTop })
+        }
+
+        io.observe(`#${sentinelId}`, (res) => {
+            const fixed = res.boundingClientRect.top <= props.offsetTop
+            if (fixed !== isFixed.value) {
+                // 当切换为 fixed，记录占位高度
+                if (fixed) {
+                    // 获取 sticky 高度作为占位
+                    getRect('.hy-sticky', false, instance).then((rect) => {
+                        placeholderHeight.value = rect?.height ? rect.height : 0
+                    })
+                } else {
+                    placeholderHeight.value = 0
+                }
+                isFixed.value = fixed
+                emit('change', fixed)
+            }
+        })
+
+        observer = io
+    } catch (e) {
+        // createIntersectionObserver 在极少数平台可能抛错，交给回退逻辑
+        observer = null
+    }
+}
+
+const pageScrollHandler = () => {
+    if (rafTimer) return
+    rafTimer = requestAnimationFrame(async () => {
+        rafTimer = 0
+
+        const { sentinelBottom, stickyHeight } = await querySentinel()
+        const offset = props.offsetTop
+
+        // 用 bottom 判断，保证吸顶时位置保持 offset
+        const fixed = sentinelBottom <= offset
+
+        if (fixed !== isFixed.value) {
+            isFixed.value = fixed
+
+            if (fixed) {
+                placeholderHeight.value = stickyHeight
+            } else {
+                placeholderHeight.value = 0
+            }
+
+            emit('change', fixed)
+        }
+    })
+}
+
+const onPageScrollListener = (e: any) => {
+    // 仅当 enable 时才处理
+    if (!props.enable) return
+    // 如果我们已经有 observer 且工作正常，则可以不必依赖回退（但保留检查以防万一）
+    // 这里仍然执行 pageScrollHandler 以防 observer 未触发
+    pageScrollHandler()
+}
+
+// 供外部触发重置（比如内容加载高度变化）
+const refresh = async () => {
+    await nextTick()
+    // 重新测高度
+    getRect('.hy-sticky', false, instance).then((rect) => {
+        placeholderHeight.value = rect?.height ? rect.height : 0
+    })
+    // 重新 init observer
+    await initObserver()
+    // 手动触发一次检测
+    pageScrollHandler()
+}
+
+onMounted(() => {
+    nextTick(async () => {
+        await initObserver()
+
+        // 始终绑定 page scroll 回退（能兼容大多数场景）
+        // 注意：如果页面使用 scroll-view（而非页面滚动），你应传入 scrollSelector 以使用 relativeTo(container)
+        onPageScroll && onPageScroll(onPageScrollListener)
+    })
+})
+
+onUnmounted(() => {
+    observer?.disconnect()
+    observer = null
+    // 解除 pageScroll 监听：uni-app 没有 onPageScroll.off，onPageScroll 是全局注册的，通常不需要解绑
+    // 但是我们清理 raf
+    if (rafTimer) cancelAnimationFrame(rafTimer)
+})
+
+// 如果 enable 改变，重置
+watch(
+    () => props.enable,
+    (v) => {
+        if (v) {
+            refresh()
+        } else {
+            observer?.disconnect()
+            observer = null
+            isFixed.value = false
+            placeholderHeight.value = 0
+        }
+    }
+)
+
+defineExpose({
+    refresh
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+@import './index.scss';
+</style>

package/components/hy-sticky/index.scss

@@ -0,0 +1,29 @@
+@use "../../libs/css/theme" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(sticky) {
+  width: 100%;
+  /* 默认 sticky（非 fixed）样式 */
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  box-sizing: border-box;
+
+  @include e(fixed) {
+    /* 在这里加过渡 */
+    transition:
+            box-shadow 0.18s ease,
+            transform 0.18s ease;
+  }
+
+  /* 哨兵样式：不可见但参与布局 */
+  @include e(sentinel) {
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+}

package/components/hy-sticky/props.ts

@@ -0,0 +1,24 @@
+const stickyProps = {
+    /** 吸顶时距离顶部的偏移量（单位：px） */
+    zIndex: {
+        type: [String, Number],
+        default: 99
+    },
+    /** 吸顶时的层级 */
+    offsetTop: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 是否启用吸顶功能 */
+    enable: {
+        type: Boolean,
+        default: true
+    },
+    /** 在scroll-view内使用时，指定scroll-view的类名（不含点） */
+    scrollSelector: {
+        type: String,
+        default: ''
+    }
+}
+
+export default stickyProps

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

@@ -0,0 +1,4 @@
+export interface IStickyEmits {
+    /** 固定时候执行 */
+    (e: 'change', isFixed: boolean): void
+}

package/components/hy-switch/props.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, PropType } from 'vue'
 import type { SwitchValue } from './typing'
-import type HyIconProps from '../hy-icon/typing'
+import type { HyIconProps } from '../hy-icon/typing'
 
 const switchProps = {
     /** 通过v-model双向绑定的值 */

package/components/hy-tabbar/props.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, PropType } from 'vue'
-import type HyBadgeProps from '../hy-badge/typing'
+import type { HyBadgeProps } from '../hy-badge/typing'
 
 const tabBarProps = {
     /** 选中项的索引值 */