element-plus/packages/components/input/src/input.ts
opengraphica 42ff59fc39
feat(components): [date-picker] work with modal focus trap; a11y controls and attributes (#7598)
* feat(components): [date-picker] a11y controls and attributes

* feat(components): [date-picker] keyboard controls for picker

* feat(components): [date-picker] unit test complete

* feat(components): [date-picker] remove immediate watch date
2022-05-10 21:51:17 +08:00

125 lines
2.9 KiB
TypeScript

import { isString } from '@vue/shared'
import {
buildProps,
definePropType,
iconPropType,
mutable,
} from '@element-plus/utils'
import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
import { useSizeProp } from '@element-plus/hooks'
import type Input from './input.vue'
import type { ExtractPropTypes, StyleValue } from 'vue'
export type InputAutoSize = { minRows?: number; maxRows?: number } | boolean
export const inputProps = buildProps({
id: {
type: String,
default: undefined,
},
size: useSizeProp,
disabled: Boolean,
modelValue: {
type: definePropType<string | number | null | undefined>([
String,
Number,
Object,
]),
default: '',
},
type: {
type: String,
default: 'text',
},
resize: {
type: String,
values: ['none', 'both', 'horizontal', 'vertical'],
},
autosize: {
type: definePropType<InputAutoSize>([Boolean, Object]),
default: false,
},
autocomplete: {
type: String,
default: 'off',
},
formatter: {
type: Function,
},
parser: {
type: Function,
},
placeholder: {
type: String,
},
form: {
type: String,
default: '',
},
readonly: {
type: Boolean,
default: false,
},
clearable: {
type: Boolean,
default: false,
},
showPassword: {
type: Boolean,
default: false,
},
showWordLimit: {
type: Boolean,
default: false,
},
suffixIcon: {
type: iconPropType,
default: '',
},
prefixIcon: {
type: iconPropType,
default: '',
},
containerRole: {
type: String,
default: undefined,
},
label: {
type: String,
default: undefined,
},
tabindex: {
type: [String, Number],
default: 0,
},
validateEvent: {
type: Boolean,
default: true,
},
inputStyle: {
type: definePropType<StyleValue>([Object, Array, String]),
default: () => mutable({} as const),
},
} as const)
export type InputProps = ExtractPropTypes<typeof inputProps>
export const inputEmits = {
[UPDATE_MODEL_EVENT]: (value: string) => isString(value),
input: (value: string) => isString(value),
change: (value: string) => isString(value),
focus: (evt: FocusEvent) => evt instanceof FocusEvent,
blur: (evt: FocusEvent) => evt instanceof FocusEvent,
clear: () => true,
mouseleave: (evt: MouseEvent) => evt instanceof MouseEvent,
mouseenter: (evt: MouseEvent) => evt instanceof MouseEvent,
// NOTE: when autofill by browser, the keydown event is instanceof Event, not KeyboardEvent
// relative bug report https://github.com/element-plus/element-plus/issues/6665
keydown: (evt: KeyboardEvent | Event) => evt instanceof Event,
compositionstart: (evt: CompositionEvent) => evt instanceof CompositionEvent,
compositionupdate: (evt: CompositionEvent) => evt instanceof CompositionEvent,
compositionend: (evt: CompositionEvent) => evt instanceof CompositionEvent,
}
export type InputEmits = typeof inputEmits
export type InputInstance = InstanceType<typeof Input>