@tplc/wot/types/components/wd-datetime-picker/types.d.ts

import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
import type {
  DateTimeType,
  DatetimePickerViewFilter,
  DatetimePickerViewFormatter,
} from '../wd-datetime-picker-view/types'
import type { FormItemRule } from '../wd-form/types'
export declare const datetimePickerProps: {
  /**
   * 选择器左侧文案，label可以不传
   */
  label: StringConstructor
  /**
   * 选择器占位符
   */
  placeholder: StringConstructor
  /**
   * 禁用
   */
  disabled: {
    type: BooleanConstructor
    default: boolean
  }
  /**
   * 只读
   */
  readonly: {
    type: BooleanConstructor
    default: boolean
  }
  /**
   * 加载中
   */
  loading: {
    type: BooleanConstructor
    default: boolean
  }
  /**
   * 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写
   */
  loadingColor: {
    type: PropType<string>
    default: string
  }
  /**
   * 弹出层标题
   */
  title: StringConstructor
  /**
   * 取消按钮文案
   */
  cancelButtonText: StringConstructor
  /**
   * 确认按钮文案
   */
  confirmButtonText: StringConstructor
  /**
   * 是否必填
   */
  required: {
    type: BooleanConstructor
    default: boolean
  }
  /**
   * 设置选择器大小，可选值：large
   */
  size: StringConstructor
  /**
   * 设置左侧标题宽度
   */
  labelWidth: {
    type: PropType<string>
    default: string
  }
  /**
   * 使用默认插槽
   */
  useDefaultSlot: {
    type: BooleanConstructor
    default: boolean
  }
  /**
   * label 使用插槽
   */
  useLabelSlot: {
    type: BooleanConstructor
    default: boolean
  }
  /**
   * 是否为错误状态，错误状态时右侧内容为红色
   */
  error: {
    type: BooleanConstructor
    default: boolean
  }
  /**
   * 选择器的值靠右展示
   */
  alignRight: {
    type: BooleanConstructor
    default: boolean
  }
  /**
   * 点击遮罩是否关闭
   */
  closeOnClickModal: {
    type: BooleanConstructor
    default: boolean
  }
  /**
   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
   */
  safeAreaInsetBottom: {
    type: BooleanConstructor
    default: boolean
  }
  /**
   * 是否超出隐藏
   */
  ellipsis: {
    type: BooleanConstructor
    default: boolean
  }
  /**
   * picker内部滚筒高
   */
  columnsHeight: {
    type: NumberConstructor
    default: number
  }
  valueKey: {
    type: PropType<string>
    default: string
  }
  labelKey: {
    type: PropType<string>
    default: string
  }
  /**
   * 选中项，当 type 为 time 时，类型为字符串；当 type 为 Array 时，类型为范围选择；否则为 时间戳
   */
  modelValue: {
    type: PropType<string | number | Date | (string | number | Date)[]>
    required: true
  }
  /**
   * 选择器类型，可选值为：date / year-month / time
   */
  type: {
    type: PropType<DateTimeType>
    default: DateTimeType
  }
  /**
   * 最小日期
   */
  minDate: {
    type: NumberConstructor
    default: number
  }
  /**
   * 最大日期
   */
  maxDate: {
    type: NumberConstructor
    default: number
  }
  /**
   * 最小小时，time类型时生效
   */
  minHour: {
    type: NumberConstructor
    default: number
  }
  /**
   * 最大小时，time类型时生效
   */
  maxHour: {
    type: NumberConstructor
    default: number
  }
  /**
   * 最小分钟，time类型时生效
   */
  minMinute: {
    type: NumberConstructor
    default: number
  }
  /**
   * 最大分钟，time类型时生效
   */
  maxMinute: {
    type: NumberConstructor
    default: number
  }
  /**
   * 自定义过滤选项的函数，返回列的选项数组
   */
  filter: PropType<DatetimePickerViewFilter>
  /**
   * 自定义弹出层选项文案的格式化函数，返回一个字符串
   */
  formatter: PropType<DatetimePickerViewFormatter>
  /**
   * 自定义展示文案的格式化函数，返回一个字符串
   */
  displayFormat: PropType<DatetimePickerDisplayFormat>
  /**
   * 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数
   */
  beforeConfirm: PropType<DatetimePickerBeforeConfirm>
  /**
   * 在区域选择模式下，自定义展示tab标签文案的格式化函数，返回一个字符串
   */
  displayFormatTabLabel: PropType<DatetimePickerDisplayFormatTabLabel>
  /**
   * 默认日期，类型保持与 value 一致，打开面板时面板自动选到默认日期
   */
  defaultValue: PropType<string | number | Array<string | number>>
  /**
   * 弹窗层级
   */
  zIndex: {
    type: NumberConstructor
    default: number
  }
  /**
   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
   */
  prop: StringConstructor
  /**
   * 表单验证规则，结合wd-form组件使用
   */
  rules: {
    type: PropType<FormItemRule[]>
    default: () => never[]
  }
  /**
   * picker cell 外部自定义样式
   */
  customCellClass: {
    type: PropType<string>
    default: string
  }
  /**
   * pickerView 外部自定义样式
   */
  customViewClass: {
    type: PropType<string>
    default: string
  }
  /**
   * label 外部自定义样式
   */
  customLabelClass: {
    type: PropType<string>
    default: string
  }
  /**
   * value 外部自定义样式
   */
  customValueClass: {
    type: PropType<string>
    default: string
  }
  /**
   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
   */
  immediateChange: {
    type: BooleanConstructor
    default: boolean
  }
  customStyle: {
    type: PropType<string>
    default: string
  }
  customClass: {
    type: PropType<string>
    default: string
  }
}
export type DatetimePickerDisplayFormat = (items: Record<string, any>[]) => string
export type DatetimePickerBeforeConfirm = (
  value: number | string | (number | string)[],
  resolve: (isPass: boolean) => void,
  picker: DatetimePickerInstance,
) => void
export type DatetimePickerDisplayFormatTabLabel = (items: Record<string, any>[]) => string
export type DatetimePickerExpose = {
  /**
   * 打开picker弹框
   */
  open: () => void
  /**
   * 关闭picker弹框
   */
  close: () => void
  /**
   * 设置加载状态
   * @param loading 加载状态
   * @returns
   */
  setLoading: (loading: boolean) => void
}
export type DatetimePickerProps = ExtractPropTypes<typeof datetimePickerProps>
export type DatetimePickerInstance = ComponentPublicInstance<
  DatetimePickerProps,
  DatetimePickerExpose
>