hy-app 0.6.4 → 0.6.6

package/components/hy-coupon/props.ts

@@ -1,108 +1,108 @@
-import type { CSSProperties, PropType } from 'vue'
-import type { HyButtonProps } from '../hy-button/typing'
-
-const couponProps = {
-    /** 优惠券标题 */
-    title: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 优惠券类型：moneyOff：满减券，discount：折扣券，fixedAmount：无门槛券
-     * @values moneyOff,discount,fixedAmount
-     * */
-    type: {
-        type: String,
-        default: ''
-    },
-    /** 金额底部优惠券类型文字描述 */
-    typeText: {
-        type: String,
-        default: ''
-    },
-    /** 优惠券状态 */
-    status: {
-        type: String,
-        default: ''
-    },
-    /** 优惠券禁用状态 */
-    disabledStatus: {
-        type: Array,
-        default: () => ['']
-    },
-    /** 优惠券描述备注 */
-    description: {
-        type: String,
-        default: ''
-    },
-    /** 描述省略行数，none不省略，1代表一行省略 */
-    desEllipsis: {
-        type: [String, Number],
-        default: 'none'
-    },
-    /** 优惠券金额 */
-    amount: {
-        type: [String, Number],
-        default: ''
-    },
-    /** 优惠券单位，没有就用默认值 */
-    unit: {
-        type: String,
-        default: ''
-    },
-    /** 优惠券开始时间 */
-    startDate: {
-        type: String,
-        default: ''
-    },
-    /** 优惠券结束时间 */
-    endDate: {
-        type: String,
-        default: ''
-    },
-    /** 时间格式 */
-    format: {
-        type: String,
-        default: 'yyyy-MM-dd'
-    },
-    /** 日期描述，没有日期描述就用开始时间到结束时间 */
-    dateDesc: {
-        type: String,
-        default: ''
-    },
-    /** 背景色 */
-    bgColor: {
-        type: String,
-        default: ''
-    },
-    /** 是否显示阴影 */
-    boxShadow: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 按钮类型
-     * @values test,button,none
-     * */
-    btnMode: {
-        type: String,
-        default: 'button'
-    },
-    /** 按钮文字 */
-    btnText: {
-        type: String,
-        default: '立即领取'
-    },
-    buttonProp: {
-        type: Object as PropType<HyButtonProps>,
-        default: () => ({})
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>
-    },
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default couponProps
+import type { CSSProperties, PropType } from 'vue'
+import type { HyButtonProps } from '../hy-button/typing'
+
+const couponProps = {
+    /** 优惠券标题 */
+    title: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 优惠券类型：moneyOff：满减券，discount：折扣券，fixedAmount：无门槛券
+     * @values moneyOff,discount,fixedAmount
+     * */
+    type: {
+        type: String,
+        default: ''
+    },
+    /** 金额底部优惠券类型文字描述 */
+    typeText: {
+        type: String,
+        default: ''
+    },
+    /** 优惠券状态 */
+    status: {
+        type: String,
+        default: ''
+    },
+    /** 优惠券禁用状态 */
+    disabledStatus: {
+        type: Array,
+        default: () => ['']
+    },
+    /** 优惠券描述备注 */
+    description: {
+        type: String,
+        default: ''
+    },
+    /** 描述省略行数，none不省略，1代表一行省略 */
+    desEllipsis: {
+        type: [String, Number],
+        default: 'none'
+    },
+    /** 优惠券金额 */
+    amount: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 优惠券单位，没有就用默认值 */
+    unit: {
+        type: String,
+        default: ''
+    },
+    /** 优惠券开始时间 */
+    startDate: {
+        type: String,
+        default: ''
+    },
+    /** 优惠券结束时间 */
+    endDate: {
+        type: String,
+        default: ''
+    },
+    /** 时间格式 */
+    format: {
+        type: String,
+        default: 'yyyy-MM-dd'
+    },
+    /** 日期描述，没有日期描述就用开始时间到结束时间 */
+    dateDesc: {
+        type: String,
+        default: ''
+    },
+    /** 背景色 */
+    bgColor: {
+        type: String,
+        default: ''
+    },
+    /** 是否显示阴影 */
+    boxShadow: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 按钮类型
+     * @values test,button,none
+     * */
+    btnMode: {
+        type: String,
+        default: 'button'
+    },
+    /** 按钮文字 */
+    btnText: {
+        type: String,
+        default: '立即领取'
+    },
+    buttonProp: {
+        type: Object as PropType<HyButtonProps>,
+        default: () => ({})
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default couponProps

package/components/hy-datetime-picker/hy-datetime-picker.vue

@@ -219,9 +219,7 @@ const times = (n: number, iteratee: Function) => {
  * */
 const close = () => {
     if (props.closeOnClickOverlay) {
-        if (props.hasInput) {
-            showByClickInput.value = false
-        }
+        props.hasInput ? (showByClickInput.value = false) : emit('update:show', false)
         emit('close')
     }
 }
@@ -230,37 +228,54 @@ const close = () => {
  * 点击工具栏的取消按钮
  * */
 const cancel = () => {
-    if (props.hasInput) {
-        showByClickInput.value = false
-    }
+    props.hasInput ? (showByClickInput.value = false) : emit('update:show', false)
     emit('cancel')
 }
 
+/**
+ * 根据索引和列数据获取选中值
+ * */
+const getSelectValue = (indexs: number[], values: any[][]): string | number => {
+    let selectValue: string | number = ''
+    if (validModes.has(props.mode) && props.mode !== DateModeEnum.MONTH_DAY) {
+        selectValue = `${intercept(values[0][indexs[0]])}:${intercept(values[1][indexs[1]])}`
+    } else if (props.mode === DateModeEnum.MONTH_DAY) {
+        selectValue = `${intercept(values[0][indexs[0]])}-${intercept(values[1][indexs[1]])}`
+    } else {
+        const year = parseInt(intercept(values[0][indexs[0]], 'year'))
+        const month = parseInt(intercept(values[1][indexs[1]]))
+        let date = parseInt(values[2] ? intercept(values[2][indexs[2]]) : 1)
+        let hour = 0,
+            minute = 0,
+            second = 0
+        const maxDate = dayjs(`${year}-${month}`).daysInMonth()
+        date = Math.min(maxDate, date)
+        if (props.mode === DateModeEnum.DATETIME) {
+            hour = parseInt(intercept(values[3][indexs[3]]))
+            minute = parseInt(intercept(values[4][indexs[4]]))
+            second = parseInt(intercept(values[5][indexs[5]]))
+        }
+        selectValue = Number(new Date(year, month - 1, date, hour, minute, second))
+    }
+    return correctValue(selectValue)
+}
+
 /**
  * 点击工具栏的确定按钮
  * */
 const confirm = () => {
-    //如果用户还没有触发过change
     if (!innerValue.value) {
-        let arr = [0]
-        //如果有默认值&&默认值的数组长度是正确的，就用默认值
-        if (
-            Array.isArray(props.defaultIndex) &&
-            props.defaultIndex.length === columns.value.length
-        ) {
-            arr = [...props.defaultIndex]
-        } else {
-            //否则默认都选中第一个
-            arr = Array(columns.value.length).fill(0)
-        }
-        console.log(arr)
-        getInputValue(arr)
-    }
-    emit('update:modelValue', innerValue.value)
-    if (props.hasInput) {
-        getInputValue(innerValue.value)
-        showByClickInput.value = false
+        const indexs =
+            innerDefaultIndex.value.length > 0
+                ? innerDefaultIndex.value
+                : Array(columns.value.length).fill(0)
+        const values = columns.value.map((column: any[]) => column)
+        const selectValue = getSelectValue(indexs, values)
+        innerValue.value = selectValue
     }
+    getInputValue(innerValue.value)
+    emit('update:modelValue', inputValue.value)
+    props.hasInput ? (showByClickInput.value = false) : emit('update:show', false)
     emit('confirm', {
         value: innerValue.value,
         mode: props.mode
@@ -292,38 +307,9 @@ const intercept = (e: any, type?: string) => {
  * */
 const change = (e: any) => {
     const { indexs, values } = e
-    let selectValue: string | number = ''
-    if (validModes.has(props.mode) && props.mode !== DateModeEnum.MONTH_DAY) {
-        // 根据value各列索引，从各列数组中，取出当前时间的选中值
-        selectValue = `${intercept(values[0][indexs[0]])}:${intercept(values[1][indexs[1]])}`
-    } else if (props.mode === DateModeEnum.MONTH_DAY) {
-        // 根据value各列索引，从各列数组中，取出当前时间的选中值
-        selectValue = `${intercept(values[0][indexs[0]])}-${intercept(values[1][indexs[1]])}`
-    } else {
-        // 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
-        const year = parseInt(intercept(values[0][indexs[0]], 'year'))
-        const month = parseInt(intercept(values[1][indexs[1]]))
-        let date = parseInt(values[2] ? intercept(values[2][indexs[2]]) : 1)
-        let hour = 0,
-            minute = 0,
-            second = 0
-        // 此月份的最大天数
-        const maxDate = dayjs(`${year}-${month}`).daysInMonth()
-        // 不允许超过maxDate值
-        date = Math.min(maxDate, date)
-        if (props.mode === DateModeEnum.DATETIME) {
-            hour = parseInt(intercept(values[3][indexs[3]]))
-            minute = parseInt(intercept(values[4][indexs[4]]))
-            second = parseInt(intercept(values[5][indexs[5]]))
-        }
-        // 转为时间模式
-        selectValue = Number(new Date(year, month - 1, date, hour, minute, second))
-    }
-    // 取出准确的合法值，防止超越边界的情况
-    selectValue = correctValue(selectValue)
+    const selectValue = getSelectValue(indexs, values)
     innerValue.value = selectValue
     updateColumnValue(selectValue)
-    // 发出change时间，value为当前选中的时间戳
     emit('change', {
         value: selectValue,
         mode: props.mode

package/components/hy-datetime-picker/props.ts

@@ -1,144 +1,144 @@
-import { DateModeEnum, useTranslate } from '../../libs'
-import type { CSSProperties, PropType } from 'vue'
-import type { HyInputProps } from '../hy-input/typing'
-
-const { t } = useTranslate('datetimePicker')
-
-const datetimePickerProps = {
-    /** 用于控制选择器的弹出和收起 */
-    show: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 弹出层弹出方向
-     * @values bottom,top
-     * */
-    popupMode: {
-        type: String,
-        default: 'bottom'
-    },
-    /** 是否显示顶部的操作栏 */
-    showToolbar: {
-        type: Boolean,
-        default: true
-    },
-    /** 绑定值 */
-    modelValue: {
-        type: [String, Number, Date],
-        default: ''
-    },
-    /** 顶部标题 */
-    title: String,
-    /**
-     * 展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
-     * @values date,time,year-month,datetime
-     * */
-    mode: {
-        type: String,
-        default: DateModeEnum.DATETIME
-    },
-    /** 可选的最大时间  默认值为后10年 */
-    maxDate: {
-        type: Number,
-        default: new Date(new Date().getFullYear() + 10, 0, 1).getTime()
-    },
-    /** 可选的最小时间  默认值为前10年 */
-    minDate: {
-        type: Number,
-        default: new Date(new Date().getFullYear() - 10, 0, 1).getTime()
-    },
-    /** 可选的最小小时，仅mode=time有效 */
-    minHour: {
-        type: Number,
-        default: 0
-    },
-    /** 可选的最大小时，仅mode=time有效 */
-    maxHour: {
-        type: Number,
-        default: 23
-    },
-    /** 可选的最小分钟，仅mode=time有效 */
-    minMinute: {
-        type: Number,
-        default: 0
-    },
-    /** 可选的最大分钟，仅mode=time有效 */
-    maxMinute: {
-        type: Number,
-        default: 59
-    },
-    /** 选项过滤函数 */
-    filter: Function,
-    /** 选项格式化函数 */
-    formatter: Function,
-    /** 是否显示加载中状态 */
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    /** 各列中，单个选项的高度 */
-    itemHeight: {
-        type: Number,
-        default: 44
-    },
-    /** 取消按钮的文字 */
-    cancelText: {
-        type: String,
-        default: () => t('cancel')
-    },
-    /** 确认按钮的文字 */
-    confirmText: {
-        type: String,
-        default: () => t('confirm')
-    },
-    /** 取消按钮的颜色 */
-    cancelColor: {
-        type: String,
-        default: '#909193'
-    },
-    /** 确认按钮的颜色 */
-    confirmColor: {
-        type: String,
-        default: '#3c9cff'
-    },
-    /** 每列中可见选项的数量 */
-    visibleItemCount: {
-        type: Number,
-        default: 5
-    },
-    /** 是否允许点击遮罩关闭选择器 */
-    closeOnClickOverlay: {
-        type: Boolean,
-        default: false
-    },
-    /** 各列的默认索引 */
-    defaultIndex: {
-        type: Array,
-        default: () => []
-    },
-    /** 输入框是否显示边框 */
-    hasInput: {
-        type: Boolean,
-        default: false
-    },
-    /** 输入框集合属性 */
-    input: {
-        type: Object as PropType<HyInputProps>
-    },
-    /** 自定义时间格式 */
-    format: String,
-    /** 右边插槽 */
-    toolbarRightSlot: {
-        type: Boolean,
-        default: false
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>
-    },
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default datetimePickerProps
+import { DateModeEnum, useTranslate } from '../../libs'
+import type { CSSProperties, PropType } from 'vue'
+import type { HyInputProps } from '../hy-input/typing'
+
+const { t } = useTranslate('datetimePicker')
+
+const datetimePickerProps = {
+    /** 用于控制选择器的弹出和收起 */
+    show: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 弹出层弹出方向
+     * @values bottom,top
+     * */
+    popupMode: {
+        type: String,
+        default: 'bottom'
+    },
+    /** 是否显示顶部的操作栏 */
+    showToolbar: {
+        type: Boolean,
+        default: true
+    },
+    /** 绑定值 */
+    modelValue: {
+        type: [String, Number, Date],
+        default: ''
+    },
+    /** 顶部标题 */
+    title: String,
+    /**
+     * 展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
+     * @values date,time,year-month,datetime
+     * */
+    mode: {
+        type: String,
+        default: DateModeEnum.DATETIME
+    },
+    /** 可选的最大时间  默认值为后10年 */
+    maxDate: {
+        type: Number,
+        default: new Date(new Date().getFullYear() + 10, 0, 1).getTime()
+    },
+    /** 可选的最小时间  默认值为前10年 */
+    minDate: {
+        type: Number,
+        default: new Date(new Date().getFullYear() - 10, 0, 1).getTime()
+    },
+    /** 可选的最小小时，仅mode=time有效 */
+    minHour: {
+        type: Number,
+        default: 0
+    },
+    /** 可选的最大小时，仅mode=time有效 */
+    maxHour: {
+        type: Number,
+        default: 23
+    },
+    /** 可选的最小分钟，仅mode=time有效 */
+    minMinute: {
+        type: Number,
+        default: 0
+    },
+    /** 可选的最大分钟，仅mode=time有效 */
+    maxMinute: {
+        type: Number,
+        default: 59
+    },
+    /** 选项过滤函数 */
+    filter: Function,
+    /** 选项格式化函数 */
+    formatter: Function,
+    /** 是否显示加载中状态 */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /** 各列中，单个选项的高度 */
+    itemHeight: {
+        type: Number,
+        default: 44
+    },
+    /** 取消按钮的文字 */
+    cancelText: {
+        type: String,
+        default: () => t('cancel')
+    },
+    /** 确认按钮的文字 */
+    confirmText: {
+        type: String,
+        default: () => t('confirm')
+    },
+    /** 取消按钮的颜色 */
+    cancelColor: {
+        type: String,
+        default: '#909193'
+    },
+    /** 确认按钮的颜色 */
+    confirmColor: {
+        type: String,
+        default: '#3c9cff'
+    },
+    /** 每列中可见选项的数量 */
+    visibleItemCount: {
+        type: Number,
+        default: 5
+    },
+    /** 是否允许点击遮罩关闭选择器 */
+    closeOnClickOverlay: {
+        type: Boolean,
+        default: false
+    },
+    /** 各列的默认索引 */
+    defaultIndex: {
+        type: Array,
+        default: () => []
+    },
+    /** 输入框是否显示边框 */
+    hasInput: {
+        type: Boolean,
+        default: false
+    },
+    /** 输入框集合属性 */
+    input: {
+        type: Object as PropType<HyInputProps>
+    },
+    /** 自定义时间格式 */
+    format: String,
+    /** 右边插槽 */
+    toolbarRightSlot: {
+        type: Boolean,
+        default: false
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default datetimePickerProps

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

@@ -17,4 +17,6 @@ export interface IDatetimePickerEmits {
     (e: 'change', param: IParam): void
     /** 更新值触发 */
     (e: 'update:modelValue', value: IParam['value']): void
+    /** 更新值关闭值 */
+    (e: 'update:show', value: boolean): void
 }