props.d.ts 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. import type { FocusEventHandler, MouseEventHandler } from '../../_util/EventInterface';
  2. import type { CSSProperties, PropType } from 'vue';
  3. import type { PickerLocale } from '.';
  4. import type { SizeType } from '../../config-provider';
  5. import type { AlignType } from '../../vc-align/interface';
  6. import type { CustomFormat, DisabledTime, DisabledTimes, EventValue, PanelMode, PickerMode, RangeValue } from '../../vc-picker/interface';
  7. import type { DateRender } from '../../vc-picker/panels/DatePanel/DateBody';
  8. import type { MonthCellRender } from '../../vc-picker/panels/MonthPanel/MonthBody';
  9. import type { SharedTimeProps } from '../../vc-picker/panels/TimePanel';
  10. import type { RangeDateRender, RangeInfo, RangeType } from '../../vc-picker/RangePicker';
  11. import type { VueNode } from '../../_util/type';
  12. declare function commonProps<DateType = any>(): {
  13. id: StringConstructor;
  14. dropdownClassName: StringConstructor;
  15. dropdownAlign: {
  16. type: PropType<AlignType>;
  17. };
  18. popupStyle: {
  19. type: PropType<CSSProperties>;
  20. };
  21. transitionName: StringConstructor;
  22. placeholder: StringConstructor;
  23. allowClear: {
  24. type: BooleanConstructor;
  25. default: any;
  26. };
  27. autofocus: {
  28. type: BooleanConstructor;
  29. default: any;
  30. };
  31. disabled: {
  32. type: BooleanConstructor;
  33. default: any;
  34. };
  35. tabindex: NumberConstructor;
  36. open: {
  37. type: BooleanConstructor;
  38. default: any;
  39. };
  40. defaultOpen: {
  41. type: BooleanConstructor;
  42. default: any;
  43. };
  44. /** Make input readOnly to avoid popup keyboard in mobile */
  45. inputReadOnly: {
  46. type: BooleanConstructor;
  47. default: any;
  48. };
  49. getPopupContainer: {
  50. type: PropType<(node: HTMLElement) => HTMLElement>;
  51. };
  52. panelRender: {
  53. type: PropType<(originPanel: VueNode) => VueNode>;
  54. };
  55. onChange: {
  56. type: PropType<(value: DateType | string | null, dateString: string) => void>;
  57. };
  58. 'onUpdate:value': {
  59. type: PropType<(value: DateType | string | null) => void>;
  60. };
  61. onOk: {
  62. type: PropType<(value: DateType | string | null) => void>;
  63. };
  64. onOpenChange: {
  65. type: PropType<(open: boolean) => void>;
  66. };
  67. 'onUpdate:open': {
  68. type: PropType<(open: boolean) => void>;
  69. };
  70. onFocus: {
  71. type: PropType<FocusEventHandler>;
  72. };
  73. onBlur: {
  74. type: PropType<FocusEventHandler>;
  75. };
  76. onMousedown: {
  77. type: PropType<MouseEventHandler>;
  78. };
  79. onMouseup: {
  80. type: PropType<MouseEventHandler>;
  81. };
  82. onMouseenter: {
  83. type: PropType<MouseEventHandler>;
  84. };
  85. onMouseleave: {
  86. type: PropType<MouseEventHandler>;
  87. };
  88. onClick: {
  89. type: PropType<MouseEventHandler>;
  90. };
  91. onContextmenu: {
  92. type: PropType<MouseEventHandler>;
  93. };
  94. onKeydown: {
  95. type: PropType<(event: KeyboardEvent, preventDefault: () => void) => void>;
  96. };
  97. role: StringConstructor;
  98. name: StringConstructor;
  99. autocomplete: StringConstructor;
  100. direction: {
  101. type: PropType<"ltr" | "rtl">;
  102. };
  103. showToday: {
  104. type: BooleanConstructor;
  105. default: any;
  106. };
  107. showTime: {
  108. type: PropType<boolean | SharedTimeProps<DateType>>;
  109. default: any;
  110. };
  111. locale: {
  112. type: PropType<PickerLocale>;
  113. };
  114. size: {
  115. type: PropType<SizeType>;
  116. };
  117. bordered: {
  118. type: BooleanConstructor;
  119. default: any;
  120. };
  121. dateRender: {
  122. type: PropType<DateRender<DateType>>;
  123. };
  124. disabledDate: {
  125. type: PropType<(date: DateType) => boolean>;
  126. };
  127. mode: {
  128. type: PropType<PanelMode>;
  129. };
  130. picker: {
  131. type: PropType<PickerMode>;
  132. };
  133. valueFormat: StringConstructor;
  134. /** @deprecated Please use `disabledTime` instead. */
  135. disabledHours: PropType<() => number[]>;
  136. /** @deprecated Please use `disabledTime` instead. */
  137. disabledMinutes: PropType<(hour: number) => number[]>;
  138. /** @deprecated Please use `disabledTime` instead. */
  139. disabledSeconds: PropType<(hour: number, minute: number) => number[]>;
  140. };
  141. export interface CommonProps<DateType> {
  142. id?: string;
  143. prefixCls?: string;
  144. dropdownClassName?: string;
  145. dropdownAlign?: AlignType;
  146. popupStyle?: CSSProperties;
  147. transitionName?: string;
  148. placeholder?: string;
  149. allowClear?: boolean;
  150. autofocus?: boolean;
  151. disabled?: boolean;
  152. tabindex?: number;
  153. open?: boolean;
  154. defaultOpen?: boolean;
  155. inputReadOnly?: boolean;
  156. suffixIcon?: VueNode;
  157. clearIcon?: VueNode;
  158. prevIcon?: VueNode;
  159. nextIcon?: VueNode;
  160. superPrevIcon?: VueNode;
  161. superNextIcon?: VueNode;
  162. getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  163. panelRender?: (originPanel: VueNode) => VueNode;
  164. onChange?: (value: DateType | string | null, dateString: string) => void;
  165. 'onUpdate:value'?: (value: DateType | string | null) => void;
  166. onOk?: (value: DateType | string | null) => void;
  167. onOpenChange?: (open: boolean) => void;
  168. 'onUpdate:open'?: (open: boolean) => void;
  169. onFocus?: FocusEventHandler;
  170. onBlur?: FocusEventHandler;
  171. onMousedown?: MouseEventHandler;
  172. onMouseup?: MouseEventHandler;
  173. onMouseenter?: MouseEventHandler;
  174. onMouseleave?: MouseEventHandler;
  175. onClick?: MouseEventHandler;
  176. onContextmenu?: MouseEventHandler;
  177. onKeydown?: (event: KeyboardEvent, preventDefault: () => void) => void;
  178. role?: string;
  179. name?: string;
  180. autocomplete?: string;
  181. direction?: 'ltr' | 'rtl';
  182. showToday?: boolean;
  183. showTime?: boolean | SharedTimeProps<DateType>;
  184. locale?: PickerLocale;
  185. size?: SizeType;
  186. bordered?: boolean;
  187. dateRender?: DateRender<DateType>;
  188. disabledDate?: (date: DateType) => boolean;
  189. mode?: PanelMode;
  190. picker?: PickerMode;
  191. valueFormat?: string;
  192. }
  193. declare function datePickerProps<DateType = any>(): {
  194. defaultPickerValue: {
  195. type: PropType<string | DateType>;
  196. };
  197. defaultValue: {
  198. type: PropType<string | DateType>;
  199. };
  200. value: {
  201. type: PropType<string | DateType>;
  202. };
  203. disabledTime: {
  204. type: PropType<DisabledTime<DateType>>;
  205. };
  206. format: {
  207. type: PropType<string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[]>;
  208. };
  209. renderExtraFooter: {
  210. type: PropType<(mode: PanelMode) => VueNode>;
  211. };
  212. showNow: {
  213. type: BooleanConstructor;
  214. default: any;
  215. };
  216. monthCellRender: {
  217. type: PropType<MonthCellRender<DateType>>;
  218. };
  219. monthCellContentRender: {
  220. type: PropType<MonthCellRender<DateType>>;
  221. };
  222. };
  223. export interface DatePickerProps<DateType> {
  224. defaultPickerValue?: DateType | string;
  225. defaultValue?: DateType | string;
  226. value?: DateType | string;
  227. disabledTime?: DisabledTime<DateType>;
  228. format?: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
  229. renderExtraFooter?: (mode: PanelMode) => VueNode;
  230. showNow?: boolean;
  231. monthCellRender?: MonthCellRender<DateType>;
  232. monthCellContentRender?: MonthCellRender<DateType>;
  233. }
  234. declare function rangePickerProps<DateType>(): {
  235. allowEmpty: {
  236. type: PropType<[boolean, boolean]>;
  237. };
  238. dateRender: {
  239. type: PropType<RangeDateRender<DateType>>;
  240. };
  241. defaultPickerValue: {
  242. type: PropType<[DateType, DateType] | [string, string]>;
  243. };
  244. defaultValue: {
  245. type: PropType<[DateType, DateType] | [string, string]>;
  246. };
  247. value: {
  248. type: PropType<[DateType, DateType] | [string, string]>;
  249. };
  250. disabledTime: {
  251. type: PropType<(date: EventValue<DateType>, type: RangeType) => DisabledTimes>;
  252. };
  253. disabled: {
  254. type: PropType<boolean | [boolean, boolean]>;
  255. };
  256. format: StringConstructor;
  257. renderExtraFooter: {
  258. type: PropType<() => VueNode>;
  259. };
  260. separator: {
  261. type: StringConstructor;
  262. };
  263. ranges: {
  264. type: PropType<Record<string, [DateType, DateType] | (() => Exclude<RangeValue<DateType>, null>)>>;
  265. };
  266. placeholder: ArrayConstructor;
  267. mode: {
  268. type: PropType<[PanelMode, PanelMode]>;
  269. };
  270. onChange: {
  271. type: PropType<(value: RangeValue<DateType> | RangeValue<string> | null, dateString: [string, string]) => void>;
  272. };
  273. 'onUpdate:value': {
  274. type: PropType<(value: RangeValue<DateType> | RangeValue<string> | null) => void>;
  275. };
  276. onCalendarChange: {
  277. type: PropType<(values: RangeValue<DateType> | RangeValue<string>, formatString: [string, string], info: RangeInfo) => void>;
  278. };
  279. onPanelChange: {
  280. type: PropType<(values: RangeValue<DateType> | RangeValue<string>, modes: [PanelMode, PanelMode]) => void>;
  281. };
  282. onOk: {
  283. type: PropType<(dates: RangeValue<DateType> | RangeValue<string>) => void>;
  284. };
  285. };
  286. export interface RangePickerProps<DateType> {
  287. allowEmpty?: [boolean, boolean];
  288. dateRender?: RangeDateRender<DateType>;
  289. defaultPickerValue?: RangeValue<DateType> | RangeValue<string>;
  290. defaultValue?: RangeValue<DateType> | RangeValue<string>;
  291. value?: RangeValue<DateType> | RangeValue<string>;
  292. disabledTime?: (date: EventValue<DateType>, type: RangeType) => DisabledTimes;
  293. disabled?: [boolean, boolean];
  294. format?: string;
  295. renderExtraFooter?: () => VueNode;
  296. separator?: string;
  297. ranges?: Record<string, Exclude<RangeValue<DateType>, null> | (() => Exclude<RangeValue<DateType>, null>)>;
  298. placeholder?: [string, string];
  299. mode?: [PanelMode, PanelMode];
  300. onChange?: (value: RangeValue<DateType> | RangeValue<string> | null, dateString: [string, string]) => void;
  301. 'onUpdate:value'?: (value: RangeValue<DateType> | RangeValue<string> | null) => void;
  302. onCalendarChange?: (values: RangeValue<DateType> | RangeValue<string>, formatString: [string, string], info: RangeInfo) => void;
  303. onPanelChange?: (values: RangeValue<DateType> | RangeValue<string>, modes: [PanelMode, PanelMode]) => void;
  304. onOk?: (dates: RangeValue<DateType> | RangeValue<string>) => void;
  305. }
  306. export declare type ExtraDatePickerProps<DateType> = {
  307. valueFormat?: string;
  308. defaultPickerValue?: DateType | string;
  309. defaultValue?: DateType | string;
  310. value?: DateType | string;
  311. };
  312. export declare type ExtraRangePickerProps<DateType> = {
  313. valueFormat?: string;
  314. defaultPickerValue?: RangeValue<DateType> | RangeValue<string>;
  315. defaultValue?: RangeValue<DateType> | RangeValue<string>;
  316. value?: RangeValue<DateType> | RangeValue<string>;
  317. };
  318. export { commonProps, datePickerProps, rangePickerProps };