hy-app 0.7.0 → 0.7.1

package/components/hy-calendar/hy-calendar.vue

@@ -75,7 +75,6 @@ export default {
 </script>
 
 <script setup lang="ts">
-import type { ICalendarEmits } from './typing'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import {
     addUnit,
@@ -87,6 +86,7 @@ import {
     range,
     useTranslate
 } from '../../libs'
+import type { ICalendarEmits, ICalendarExpose } from './typing'
 import Calendar from '../../libs/utils/calendar.js'
 import calendarProps from './props'
 import dayjs from 'dayjs/esm'
@@ -367,7 +367,7 @@ const updateMonthTop = (topArr = []) => {
     scrollIntoDefaultMonth(selected)
 }
 
-defineExpose({
+defineExpose<ICalendarExpose>({
     setFormatter
 })
 </script>

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

@@ -45,3 +45,12 @@ export interface ICalendarEmits {
     /** 触发关闭属性 */
     (e: 'update:show', value: boolean): void
 }
+
+/** HyCalendar 组件实例暴露的方法 */
+export interface ICalendarExpose {
+    /**
+     * 设置日期格式化函数
+     * @param formatter 格式化函数，接收日期字符串参数，返回格式化后的值
+     */
+    setFormatter: (formatter: (value: string) => string) => void
+}

package/components/hy-count-down/hy-count-down.vue

@@ -24,7 +24,7 @@ export default {
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 import { isSameSecond, parseFormat, parseTimeData } from './index'
-import type { ICountDownEmits } from './typing'
+import type { ICountDownEmits, ICountDownExpose } from './typing'
 import countDownProps from './props'
 
 /**
@@ -62,7 +62,7 @@ onUnmounted(() => {
 })
 
 /**
- * @description 开始倒计时
+ * 开始倒计时
  */
 const start = () => {
     if (runing.value) return
@@ -74,7 +74,7 @@ const start = () => {
 }
 
 /**
- * @description 根据是否展示毫秒，执行不同操作函数
+ * 根据是否展示毫秒，执行不同操作函数
  */
 const toTick = () => {
     if (props.millisecond) {
@@ -112,14 +112,14 @@ const microTick = () => {
 }
 
 /**
- * @description 获取剩余的时间
+ * 获取剩余的时间
  */
 const getRemainTime = () => {
     // 取最大值，防止出现小于0的剩余时间值
     return Math.max(endTime.value - Date.now(), 0)
 }
 /**
- * @description 设置剩余的时间
+ * 设置剩余的时间
  */
 const setRemainTime = (remain: number) => {
     remainTime.value = remain
@@ -144,21 +144,21 @@ const reset = () => {
     }
 }
 /**
- * @description 暂停倒计时
+ * 暂停倒计时
  * */
 const pause = () => {
     runing.value = false
     clearTimeoutFn()
 }
 /**
- * @description 清空定时器
+ * 清空定时器
  * */
 const clearTimeoutFn = () => {
     clearTimeout(timer)
     timer = null
 }
 
-defineExpose({
+defineExpose<ICountDownExpose>({
     reset,
     start,
     pause

package/components/hy-count-down/typing.d.ts

@@ -12,3 +12,19 @@ export interface ICountDownEmits {
     /** 倒计时结束触发 */
     (e: 'finish'): void
 }
+
+/** HyCountDown 组件实例暴露的方法 */
+export interface ICountDownExpose {
+    /**
+     * 重置倒计时
+     */
+    reset: () => void
+    /**
+     * 开始倒计时
+     */
+    start: () => void
+    /**
+     * 暂停倒计时
+     */
+    pause: () => void
+}

package/components/hy-count-to/hy-count-to.vue

@@ -26,7 +26,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import type { ICountToEmits } from './typing'
+import type { ICountToEmits, ICountToExpose } from './typing'
 import { computed, onMounted, ref, watch } from 'vue'
 import { addUnit, isNumber } from '../../libs'
 import countToProps from './props'
@@ -107,7 +107,7 @@ const cancelAnimationFrame = (id?: number) => {
 }
 
 /**
- * @description 开始滚动数字
+ * 开始滚动数字
  * */
 const start = () => {
     localStartVal.value = props.startVal
@@ -118,7 +118,7 @@ const start = () => {
 }
 
 /**
- * @description 暂定状态，重新再开始滚动；或者滚动状态下，暂停
+ * 暂定状态，重新再开始滚动；或者滚动状态下，暂停
  * */
 const reStart = () => {
     if (paused.value) {
@@ -131,14 +131,14 @@ const reStart = () => {
 }
 
 /**
- * @description 暂停
+ * 暂停
  * */
 const stop = () => {
     cancelAnimationFrame(rAF.value)
 }
 
 /**
- * @description 重新开始(暂停的情况下)
+ * 重新开始(暂停的情况下)
  * */
 const resume = () => {
     if (!remaining.value) return
@@ -151,7 +151,7 @@ const resume = () => {
 }
 
 /**
- * @description 重置
+ * 重置
  * */
 const reset = () => {
     startTime.value = null
@@ -204,7 +204,7 @@ const destroyed = () => {
     cancelAnimationFrame(rAF.value)
 }
 
-defineExpose({
+defineExpose<ICountToExpose>({
     start,
     stop,
     reStart,

package/components/hy-count-to/typing.d.ts

@@ -2,3 +2,27 @@ export interface ICountToEmits {
     /** 结束执行函数 */
     (e: 'end'): void
 }
+
+/** HyCountTo 组件实例暴露的方法 */
+export interface ICountToExpose {
+    /**
+     * 开始滚动数字
+     */
+    start: () => void
+    /**
+     * 停止滚动
+     */
+    stop: () => void
+    /**
+     * 重新开始或暂停滚动
+     */
+    reStart: () => void
+    /**
+     * 恢复滚动（暂停状态下）
+     */
+    resume: () => void
+    /**
+     * 重置到初始值
+     */
+    reset: () => void
+}

package/components/hy-dropdown-item/hy-dropdown-item.vue

@@ -172,8 +172,8 @@ const onSelect = (item: DropdownMenuItem, index: number) => {
     isOpen.value = false
     if (index !== currentIndex.value) {
         currentIndex.value = index
-        emit('change', item, index)
         emit('update:modelValue', item.value)
+        emit('change', item, index)
     }
 }
 

package/components/hy-folding-panel/hy-folding-panel.vue

@@ -12,7 +12,7 @@ export default {
 
 <script setup lang="ts">
 import { provide, ref, watch, toRefs } from 'vue'
-import type { IFoldingPanelGroupEmits } from './typing'
+import type { IFoldingPanelGroupEmits, IFoldingPanelExpose } from './typing'
 import foldingPanelProps from './props'
 
 const props = defineProps(foldingPanelProps)
@@ -36,7 +36,7 @@ watch(activeIndex, (newVal) => {
 })
 
 // 提供给子组件的方法
-const updateActiveIndex = (index: number) => {
+const updateActiveIndex = (index: number | string) => {
     if (props.disabled) return
 
     if (props.accordion) {
@@ -63,7 +63,7 @@ provide('hy-folding-panel', {
     updateActiveIndex
 })
 // 对外暴露的方法
-defineExpose({
+defineExpose<IFoldingPanelExpose>({
     /**
      * 打开指定索引的面板
      */

package/components/hy-folding-panel/typing.d.ts

@@ -17,3 +17,26 @@ export interface IFoldingPanelGroupEmits {
      */
     (e: 'close', index: number | string): void
 }
+
+/** HyFoldingPanel 组件实例暴露的方法 */
+export interface IFoldingPanelExpose {
+    /**
+     * 打开指定索引的面板
+     * @param index 面板索引
+     */
+    open: (index: number | string) => void
+    /**
+     * 关闭所有面板
+     */
+    closeAll: () => void
+    /**
+     * 切换指定索引面板的状态
+     * @param index 面板索引
+     */
+    toggle: (index: number | string) => void
+    /**
+     * 关闭指定索引的面板
+     * @param index 面板索引
+     */
+    close: (index: number | string) => void
+}

package/components/hy-folding-panel-item/hy-folding-panel-item.vue

@@ -67,7 +67,7 @@ export default {
 
 <script setup lang="ts">
 import { ref, computed, inject, onMounted } from 'vue'
-import type { IFoldingPanelConfig, IFoldingPanelItemEmits } from './typing'
+import type { IFoldingPanelConfig, IFoldingPanelItemEmits, IFoldingPanelItemExpose } from './typing'
 import { addUnit, IconConfig } from '../../libs'
 import foldingPanelItemProps from './props'
 // 组件
@@ -124,7 +124,7 @@ const handleClick = () => {
 }
 
 // 对外暴露的方法
-defineExpose({
+defineExpose<IFoldingPanelItemExpose>({
     /**
      * 打开面板
      */

package/components/hy-folding-panel-item/typing.d.ts

@@ -35,3 +35,24 @@ export interface IFoldingPanelItemEmits {
      */
     (e: 'child-click', index: number | string): void
 }
+
+/** HyFoldingPanelItem 组件实例暴露的方法 */
+export interface IFoldingPanelItemExpose {
+    /**
+     * 打开面板
+     */
+    open: () => void
+    /**
+     * 关闭面板
+     */
+    close: () => void
+    /**
+     * 切换面板状态
+     */
+    toggle: () => void
+    /**
+     * 获取当前展开状态
+     * @returns 当前展开状态
+     */
+    getExpanded: () => boolean
+}

package/components/hy-form/hy-form.vue

@@ -19,7 +19,7 @@ export default {
 import { provide, reactive, ref, toRefs } from 'vue'
 import { clearVal, isArray } from '../../libs'
 import formProps from './props'
-import type { IFormEmits } from './typing'
+import type { IFormEmits, IFormExpose } from './typing'
 
 /**
  * 表单组件父组件，需要搭配hy-form-item
@@ -203,7 +203,7 @@ const submit = async () => {
     return false
 }
 
-defineExpose({
+defineExpose<IFormExpose>({
     validate,
     resetFields,
     clearValidate,

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

@@ -1,9 +1,9 @@
-import type { ExtractPropTypes } from 'vue'
-import type formProps from './props'
-
-export interface HyFormProps extends ExtractPropTypes<typeof formProps> {}
-export type HyFormSimpleProps = HyFormProps
-
+import type { ExtractPropTypes } from 'vue'
+import type formProps from './props'
+
+export interface HyFormProps extends ExtractPropTypes<typeof formProps> {}
+export type HyFormSimpleProps = HyFormProps
+
 export interface FormRule {
     /**
      * 是否必填
@@ -45,3 +45,34 @@ export interface IFormEmits {
     /** 表单校验 */
     (e: 'validate', valid: boolean, errors: AnyObject): void
 }
+
+/** HyForm 组件实例暴露的方法和属性 */
+export interface IFormExpose {
+    /**
+     * 验证所有表单字段
+     * @returns Promise，验证成功时 resolve，失败时 reject 并返回错误信息
+     */
+    validate: () => Promise<unknown>
+    /**
+     * 重置表单所有字段到初始值
+     */
+    resetFields: () => void
+    /**
+     * 清除表单验证错误
+     * @param fields 可选，指定要清除的字段名数组，不传则清除所有
+     */
+    clearValidate: (fields?: string[]) => void
+    /**
+     * 提交表单（会先执行验证）
+     * @returns Promise，验证成功时返回表单数据，失败时返回 false
+     */
+    submit: () => Promise<AnyObject | false>
+    /**
+     * 表单数据对象
+     */
+    formData: AnyObject
+    /**
+     * 表单错误信息
+     */
+    errors: Record<string, string>
+}

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

@@ -114,7 +114,6 @@ const waterfall: {
 })
 // 排列方式
 const arrange = computed(() => (props.line === 1 ? 'column' : 'row'))
-const boxHeight = getPx(props.itemHeight) + getPx(props.marginBottom)
 const listHeight = addUnit(props.containerHeight)
 const instance = getCurrentInstance()
 
@@ -125,6 +124,9 @@ onMounted(() => {
     })
 })
 
+const boxHeight = computed(() => {
+    return getPx(props.itemHeight) + getPx(props.marginBottom)
+})
 const itemStyle = computed((): CSSProperties => {
     return {
         height: addUnit(props.itemHeight),
@@ -137,32 +139,32 @@ const itemStyle = computed((): CSSProperties => {
 })
 
 /**
- * @description 虚拟列表真实展示数据：起始下标
+ * 虚拟列表真实展示数据：起始下标
  */
 const start = computed(() => {
-    const s = Math.floor(scrollTop.value / boxHeight)
+    const s = Math.floor(scrollTop.value / boxHeight.value)
     return Math.max(0, s * props.line)
 })
 
 /**
- * @description 虚拟列表真实展示数据：结束下标
+ * 虚拟列表真实展示数据：结束下标
  */
 const over = computed(() => {
-    const o = Math.floor((scrollTop.value + viewHeight.value + 1) / boxHeight + 5)
+    const o = Math.floor((scrollTop.value + viewHeight.value + 1) / boxHeight.value + 5)
     return Math.min(props.list.length, o * props.line)
 })
 
 /**
- * @description 计算虚拟列表的padding(保持列表高度完整且滚动条能正常滚动)
+ * 计算虚拟列表的padding(保持列表高度完整且滚动条能正常滚动)
  */
 const paddingAttr = computed(() => {
-    const paddingTop = start.value * boxHeight
-    const paddingBottom = (props.list.length - over.value) * boxHeight
+    const paddingTop = start.value * boxHeight.value
+    const paddingBottom = (props.list.length - over.value) * boxHeight.value
     return `${paddingTop / props.line}px 0 ${paddingBottom / props.line}px`
 })
 
 /**
- * @description 虚拟列表真实展示数据
+ * 虚拟列表真实展示数据
  */
 const virtualData = computed<(string | Record<string, any>)[]>(() => {
     return props.list.slice(start.value, over.value)
@@ -187,28 +189,28 @@ watch(
 )
 
 /**
- * @description 监听滚动条距离顶部距离，实时更新
+ * 监听滚动条距离顶部距离，实时更新
  */
 const onScroll = async (e: any) => {
     scrollTop.value = e.detail.scrollTop || 0
 }
 
 /**
- * @description 滚动底部函数
+ * 滚动底部函数
  * */
 const scrollToLower = () => {
     emit('scrollToLower')
 }
 
 /**
- * @description 点击行触发函数
+ * 点击行触发函数
  * */
 const handleClick = (temp: string | AnyObject) => {
     emit('click', temp)
 }
 
 /**
- * @description 获取默认插槽
+ * 获取默认插槽
  */
 const slotDefault = useSlots().default
 </script>

package/components/hy-list/props.ts

@@ -19,7 +19,7 @@ const listProps = {
     /** 子容器的底部，会计算到容器内 */
     marginBottom: {
         type: [String, Number],
-        default: 10
+        default: 0
     },
     /** 子容器的内边距 */
     padding: {

package/components/hy-notify/hy-notify.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import type { NotifyOptions } from './typing'
+import type { NotifyOptions, INotifyExpose } from './typing'
 import { computed, ref } from 'vue'
 import type { CSSProperties } from 'vue'
 import { addUnit, IconConfig } from '../../libs'
@@ -163,7 +163,7 @@ const clearTimer = () => {
     clearTimeout(timer)
 }
 
-defineExpose({
+defineExpose<INotifyExpose>({
     show,
     close
 })

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

@@ -1,22 +1,35 @@
-export interface NotifyOptions {
-    /** 到顶部的距离 */
-    top?: number
-    /** 主题类型 */
-    type?: NotifyType
-    /** 字体颜色 */
-    color?: string
-    /** 背景颜色 */
-    bgColor?: string
-    /** 自定义图标 */
-    icon?: string
-    /** 展示的文字内容 */
-    message?: string
-    /** 展示时长，为0时不消失 */
-    duration?: number
-    /** 字体大小 */
-    fontSize?: number | string
-    /** 是否留出顶部安全距离 */
-    safeAreaInsetTop?: boolean
-    /** 关闭后的回调函数 */
-    complete?: () => void
+export interface NotifyOptions {
+    /** 到顶部的距离 */
+    top?: number
+    /** 主题类型 */
+    type?: NotifyType
+    /** 字体颜色 */
+    color?: string
+    /** 背景颜色 */
+    bgColor?: string
+    /** 自定义图标 */
+    icon?: string
+    /** 展示的文字内容 */
+    message?: string
+    /** 展示时长，为 0 时不消失 */
+    duration?: number
+    /** 字体大小 */
+    fontSize?: number | string
+    /** 是否留出顶部安全距离 */
+    safeAreaInsetTop?: boolean
+    /** 关闭后的回调函数 */
+    complete?: () => void
+}
+
+/** HyNotify 组件实例暴露的方法 */
+export interface INotifyExpose {
+    /**
+     * 显示 Notify 提示
+     * @param options Notify 配置选项
+     */
+    show: (options: NotifyOptions) => void
+    /**
+     * 关闭 Notify 提示
+     */
+    close: () => void
 }