hongluan-ui
Version:
Hongluan Component Library for Vue 3
233 lines (232 loc) • 7.09 kB
TypeScript
import type { Dayjs } from 'dayjs';
import type { ExtractPropTypes, PropType } from 'vue';
import type { Options } from '@popperjs/core';
export declare type SingleOrRange<T> = T | [T, T];
export declare type DateModelType = number | string | Date;
export declare type ModelValueType = SingleOrRange<DateModelType> | string[];
export declare type DayOrDays = SingleOrRange<Dayjs>;
export declare type DateOrDates = SingleOrRange<Date>;
export declare type UserInput = SingleOrRange<string | null>;
export declare type GetDisabledHours = (role: string, comparingDate?: Dayjs) => number[];
export declare type GetDisabledMinutes = (hour: number, role: string, comparingDate?: Dayjs) => number[];
export declare type GetDisabledSeconds = (hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[];
export declare const timePickerDefaultProps: {
ariaLabel: StringConstructor;
emptyValues: ArrayConstructor;
valueOnClear: {
readonly type: PropType<import("hongluan-ui/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: (val: unknown) => boolean;
__epPropKey: true;
};
/**
* @description a function determining if a date is disabled with that date as its parameter. Should return a Boolean
*/
disabledDate: {
type: FunctionConstructor;
};
/**
* @description set custom className
*/
cellClassName: {
type: FunctionConstructor;
};
/**
* @description an object array to set shortcut options
*/
shortcuts: {
type: ArrayConstructor;
default: () => any[];
};
/**
* @description whether to pick time using arrow buttons
*/
arrowControl: BooleanConstructor;
/**
* @deprecated same as `aria-label` in native input
*/
label: {
type: StringConstructor;
default: any;
};
/**
* @description input tabindex
*/
tabindex: {
type: (StringConstructor | NumberConstructor)[];
default: number;
};
/**
* @description whether to trigger form validation
*/
validateEvent: {
type: BooleanConstructor;
default: boolean;
};
fill: BooleanConstructor;
/**
* @description unlink two date-panels in range-picker
*/
unlinkPanels: BooleanConstructor;
block: BooleanConstructor;
thin: BooleanConstructor;
teleported: import("hongluan-ui/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
disabledHours: {
readonly type: PropType<import("../props/shared").GetDisabledHours>;
readonly required: false;
readonly validator: (val: unknown) => boolean;
__epPropKey: true;
};
disabledMinutes: {
readonly type: PropType<import("../props/shared").GetDisabledMinutes>;
readonly required: false;
readonly validator: (val: unknown) => boolean;
__epPropKey: true;
};
disabledSeconds: {
readonly type: PropType<import("../props/shared").GetDisabledSeconds>;
readonly required: false;
readonly validator: (val: unknown) => boolean;
__epPropKey: true;
};
/**
* @description same as `id` in native input
*/
id: {
type: PropType<SingleOrRange<string>>;
};
/**
* @description same as `name` in native input
*/
name: {
type: PropType<SingleOrRange<string>>;
default: string;
};
/**
* @description custom class name for TimePicker's dropdown
*/
popperClass: {
type: StringConstructor;
default: string;
};
popperOffset: {
type: NumberConstructor;
default: number;
};
/**
* @description format of the displayed value in the input box
*/
format: StringConstructor;
/**
* @description optional, format of binding value. If not specified, the binding value will be a Date object
*/
valueFormat: StringConstructor;
/**
* @description optional, format of the date displayed value in TimePicker's dropdown
*/
dateFormat: StringConstructor;
/**
* @description optional, format of the time displayed value in TimePicker's dropdown
*/
timeFormat: StringConstructor;
/**
* @description type of the picker
*/
type: {
type: StringConstructor;
default: string;
};
/**
* @description whether to show clear button
*/
clearable: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description whether the input is editable
*/
editable: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description size of Input
*/
size: {
type: PropType<"xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl">;
validator: (val: string) => boolean;
};
/**
* @description whether TimePicker is read only
*/
readonly: BooleanConstructor;
/**
* @description whether TimePicker is disabled
*/
disabled: BooleanConstructor;
/**
* @description placeholder in non-range mode
*/
placeholder: {
type: StringConstructor;
default: string;
};
/**
* @description binding value, if it is an array, the length should be 2
*/
modelValue: {
type: PropType<ModelValueType>;
default: string;
};
/**
* @description [popper.js](https://popper.js.org/docs/v2/) parameters
*/
popperOptions: {
type: PropType<Partial<Options>>;
default: () => {};
};
/**
* @description range separator
*/
rangeSeparator: {
type: StringConstructor;
default: string;
};
/**
* @description placeholder for the start date in range mode
*/
startPlaceholder: StringConstructor;
/**
* @description placeholder for the end date in range mode
*/
endPlaceholder: StringConstructor;
/**
* @description optional, default date of the calendar
*/
defaultValue: {
type: PropType<SingleOrRange<Date>>;
};
/**
* @description optional, the time value to use when selecting date range
*/
defaultTime: {
type: PropType<SingleOrRange<Date>>;
};
/**
* @description whether to pick a time range
*/
isRange: BooleanConstructor;
};
export declare type TimePickerDefaultProps = ExtractPropTypes<typeof timePickerDefaultProps>;
export interface PickerOptions {
isValidValue: (date: DayOrDays) => boolean;
handleKeydownInput: (event: KeyboardEvent) => void;
parseUserInput: (value: UserInput) => DayOrDays;
formatToString: (value: DayOrDays) => UserInput;
getRangeAvailableTime: (date: DayOrDays) => DayOrDays;
getDefaultValue: () => DayOrDays;
panelReady: boolean;
handleClear: () => void;
handleFocusPicker?: () => void;
}