hy-app 0.6.9 → 0.7.1

package/components/hy-cascader/index.scss

@@ -0,0 +1,84 @@
+@use "../../libs/css/theme" as *;
+@use "../../libs/css/mixin" as *;
+
+@include b(cascader) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  &-input {
+    position: relative;
+    .input-cover {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+  }
+
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $hy-border-margin-padding-base;
+    border-bottom: $hy-border-line;
+  }
+
+  @include e(header-title) {
+    font-size: $hy-font-size-base;
+    font-weight: $hy-font-weight-bold;
+    color: $hy-text-color;
+  }
+
+  @include e(header-close) {
+    width: 60rpx;
+    height: 60rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include e(content) {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+    height: 100%;
+  }
+
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $hy-border-margin-padding-lg $hy-border-margin-padding-base;
+    font-size: $hy-font-size-base;
+    color: $hy-text-color;
+    position: relative;
+
+    @include m(active) {
+      color: $hy-primary;
+      font-weight: $hy-font-weight-bold;
+      background: $hy-background--hover;
+      border-left: $hy-border-width-lg solid $hy-primary;
+    }
+  }
+
+  @include e(panel) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include edeep(loading) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+  }
+}

package/components/hy-cascader/props.ts

@@ -0,0 +1,88 @@
+import type { CascaderOption, CascaderValue, CascaderLazyLoad } from './typing'
+import type { PropType } from 'vue'
+import type { HyInputProps } from '../hy-input/typing'
+import { useTranslate } from '../../libs'
+
+const { t } = useTranslate('cascader')
+
+const cascaderProps = {
+    /** 当前选中的值 */
+    modelValue: {
+        type: Object as PropType<CascaderValue>,
+        default: () => ({ value: [], label: [] })
+    },
+    /** 是否显示级联选择器弹窗 */
+    show: {
+        type: Boolean,
+        default: false
+    },
+    /** 级联选择器数据源 */
+    options: {
+        type: Array as PropType<CascaderOption[]>,
+        default: () => []
+    },
+    /** 是否显示顶部工具栏 */
+    showToolbar: {
+        type: Boolean,
+        default: true
+    },
+    /** 顶部标题 */
+    title: String,
+    /** 输入框占位提示文字 */
+    placeholder: {
+        type: String,
+        default: () => t('placeholder')
+    },
+    /** 点击遮罩层是否关闭 */
+    closeOnClickOverlay: {
+        type: Boolean,
+        default: false
+    },
+    /** 弹出层的 z-index 值 */
+    zIndex: {
+        type: Number,
+        default: 10076
+    },
+    /** 是否显示输入框 */
+    hasInput: {
+        type: Boolean,
+        default: false
+    },
+    /** 输入框配置 */
+    input: {
+        type: Object as PropType<HyInputProps>,
+        default: () => {}
+    },
+    /** 多选时的分隔符 */
+    separator: {
+        type: String,
+        default: ' / '
+    },
+    /** 选项值对应的 key */
+    valueKey: {
+        type: String,
+        default: 'value'
+    },
+    /** 选项标签对应的 key */
+    labelKey: {
+        type: String,
+        default: 'label'
+    },
+    /** 选项子级对应的 key */
+    childrenKey: {
+        type: String,
+        default: 'children'
+    },
+    /** 异步加载子节点的回调函数，提供后将启用异步加载模式 */
+    lazyLoad: {
+        type: Function as PropType<CascaderLazyLoad>,
+        default: undefined
+    },
+    /** 选项对象中，标识叶子节点的 key */
+    isLeafKey: {
+        type: String,
+        default: 'isLeaf'
+    }
+}
+
+export default cascaderProps

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

@@ -0,0 +1,34 @@
+export interface CascaderOption {
+    value: string | number
+    label: string
+    children?: CascaderOption[]
+    disabled?: boolean
+    isLeaf?: boolean
+    [key: string]: any
+}
+
+export interface CascaderValue {
+    value: (string | number)[]
+    label: string[]
+}
+
+export interface CascaderEmitValue {
+    value: (string | number)[]
+    label: string[]
+    selectedOptions: CascaderOption[]
+}
+
+export type CascaderLazyLoad = (
+    option: CascaderOption | null,
+    tabIndex: number,
+    resolve: (children: CascaderOption[]) => void
+) => void
+
+export interface ICascaderEmits {
+    (e: 'close'): void
+    (e: 'cancel'): void
+    (e: 'confirm', params: CascaderEmitValue): void
+    (e: 'change', params: CascaderEmitValue): void
+    (e: 'update:show', show: boolean): void
+    (e: 'update:modelValue', value: CascaderValue): void
+}

package/components/hy-check-button/typing.d.ts

@@ -1,33 +1,38 @@
+import type { ExtractPropTypes } from 'vue'
+import type checkButtonProps from './props'
+
+export interface HyCheckButtonProps extends ExtractPropTypes<typeof checkButtonProps> {}
+
 export interface CheckboxColumnsVo extends FieldNamesType {
     /**
-     * @description 显示文本内容
+     * 显示文本内容
      * */
     label?: string
     /**
-     * @description 值
+     * 值
      * */
     value?: string | number
     /**
-     * @description 是否选中
+     * 是否选中
      * */
     checked?: boolean
 
     /**
-     * @description 是否禁用
+     * 是否禁用
      * */
     disabled?: boolean
 }
 export interface IFieldNames {
     /**
-     * @description 自定义columns的文本键
+     * 自定义columns的文本键
      * */
     label: string
     /**
-     * @description 自定义columns的值键
+     * 自定义columns的值键
      * */
     value: string
     /**
-     * @description 自定义columns的选中键
+     * 自定义columns的选中键
      * */
     checked: string
 }

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

@@ -35,8 +35,8 @@
             :style="{
                 height: boxSize
             }"
-            @focus="isFocus = true"
-            @blur="isFocus = false"
+            @focus="handleFocus"
+            @blur="handleBlur"
         />
     </view>
 </template>
@@ -80,9 +80,19 @@ const boxSize = addUnit(props.size)
 
 watch(
     () => props.modelValue,
-    (newValue: string | number) => {
-        inputValue.value = String(newValue).substring(0, props.maxlength)
-        current.value = newValue.toString().length
+    (newValue: string | number | undefined, oldValue: string | number | undefined) => {
+        const newValueStr = String(newValue).substring(0, props.maxlength)
+        inputValue.value = newValueStr
+        current.value = newValueStr.length
+
+        // 当值从外部更新时（如键盘组件），也触发change事件
+        if (newValue !== oldValue) {
+            emit('change', newValueStr)
+        }
+
+        if (String(inputValue.value).length >= Number(props.maxlength)) {
+            emit('finish', inputValue.value)
+        }
     },
 
     { immediate: true }
@@ -178,14 +188,30 @@ const itemClass = computed(() => {
 })
 
 /**
- * @description 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
+ * 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
  */
 const codeArray = computed(() => {
     return String(inputValue.value).split('')
 })
 
 /**
- * @description 监听输入框的值发生变化
+ * 输入框获取焦点时触发
+ * */
+const handleFocus = () => {
+    isFocus.value = true
+    emit('focus')
+}
+
+/**
+ * 输入框失去焦点时触发
+ * */
+const handleBlur = () => {
+    isFocus.value = false
+    emit('blur')
+}
+
+/**
+ * 监听输入框的值发生变化
  * */
 const inputHandler = (e: InputOnInputEvent) => {
     const value = e.detail.value
@@ -200,10 +226,6 @@ const inputHandler = (e: InputOnInputEvent) => {
     emit('change', value)
     // 修改通过v-model双向绑定的值
     emit('update:modelValue', value)
-    // 达到用户指定输入长度时，发出完成事件
-    if (String(value).length >= Number(props.maxlength)) {
-        emit('finish', value)
-    }
 }
 </script>
 

package/components/hy-code-input/typing.d.ts

@@ -5,4 +5,8 @@ export interface ICodeInputEmits {
     (e: 'finish', value: string | number): void
     /** 更新值 */
     (e: 'update:modelValue', value: string | number): void
+    /** 输入框获取焦点时触发 */
+    (e: 'focus'): void
+    /** 输入框失去焦点时触发 */
+    (e: 'blur'): void
 }

package/components/hy-config-provider/hy-config-provider.vue

@@ -1,53 +1,58 @@
-<template>
-    <view :class="themeClass" :style="[themeStyle, { height: height ? addUnit(height) : '' }]">
-        <!-- @slot 默认插槽 -->
-        <slot />
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-config-provider',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { addUnit, colorGradient } from '../../libs'
-import configProviderProps from './props'
-
-/**
- * 将 ConfigProvider 组件的 theme 属性设置为 dark，可以开启深色模式。 深色模式会全局生效，使页面上的所有 Wot 组件变为深色风格。
- * @displayName hy-config-provider
- */
-defineOptions({})
-
-const props = defineProps(configProviderProps)
-
-const themeClass = computed(() => {
-    return [props.customClass, 'hy-config-provider', `hy-theme--${props.theme}`]
-})
-
-const themeStyle = computed(() => {
-    return [
-        {
-            '--hy-theme-color': props.themeColor,
-            '--hy-theme--light':
-                props.theme === 'dark'
-                    ? colorGradient(props.themeColor, '#000')[60]
-                    : colorGradient(props.themeColor)[80],
-            padding: addUnit(props.padding)
-        },
-        props.customStyle
-    ]
-})
-</script>
-
-<style scoped lang="scss">
-@import './index.scss';
-</style>
+<template>
+    <view :class="themeClass" :style="[themeStyle, { height: height ? addUnit(height) : '' }]">
+        <!-- @slot 默认插槽 -->
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-config-provider',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, provide, toRefs } from 'vue'
+import { addUnit, colorGradient } from '../../libs'
+import configProviderProps from './props'
+
+/**
+ * 将 ConfigProvider 组件的 theme 属性设置为 dark，可以开启深色模式。 深色模式会全局生效，使页面上的所有 Wot 组件变为深色风格。
+ * @displayName hy-config-provider
+ */
+defineOptions({})
+
+const props = defineProps(configProviderProps)
+
+const themeClass = computed(() => {
+    return [props.customClass, 'hy-config-provider', `hy-theme--${props.theme}`]
+})
+
+const themeStyle = computed(() => {
+    return [
+        {
+            '--hy-theme-color': props.themeColor,
+            '--hy-theme--light':
+                props.theme === 'dark'
+                    ? colorGradient(props.themeColor, '#000')[60]
+                    : colorGradient(props.themeColor)[80],
+            padding: addUnit(props.padding)
+        },
+        props.customStyle
+    ]
+})
+
+// 提供给所有后代组件
+provide('hy-config-provider', {
+    ...toRefs(props)
+})
+</script>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>

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-datetime-picker/props.ts

@@ -1,6 +1,6 @@
 import { DateModeEnum, useTranslate } from '../../libs'
 import type { CSSProperties, PropType } from 'vue'
-import type { HyInputProps } from '../hy-input/typing'
+import type { HyInputProps } from '../../index'
 
 const { t } = useTranslate('datetimePicker')
 

package/components/hy-datetime-picker/typing.d.ts

@@ -1,4 +1,4 @@
-import { DateModeEnum } from '../../typing'
+import type { DateModeEnum } from '../../index'
 
 type IParam = {
     /** 值 */

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

@@ -0,0 +1,5 @@
+import type { ExtractPropTypes } from 'vue'
+import type dropdownProps from './props'
+
+export interface HyDropdownProps extends ExtractPropTypes<typeof dropdownProps> {}
+export type FatherIProps = HyDropdownProps

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>({
     /**
      * 打开指定索引的面板
      */