test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 03:08:21 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(components): add validate-event for form types component (#8173)

Browse Source 
* fix(components): add validate-event for form types component

* chore: format code
This commit is contained in:
Hefty 2022-07-02 21:01:05 +08:00 committed by GitHub
parent d20e58ecbb
commit 72d0bc2177
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 94 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/en-US/component/cascader.md
View File

@ -159,6 +159,7 @@ cascader/panel
| teleported | whether cascader popup is teleported | boolean | true / false | true |
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true |
| tag-type | tag type | string | success/info/warning/danger | info |
| validate-event | whether to trigger form validation | boolean | - | true |
## Cascader Events

2
docs/en-US/component/checkbox.md
View File

@ -89,6 +89,7 @@ checkbox/with-border
| name | native 'name' attribute | string | — | — |
| checked | if the Checkbox is checked | boolean | — | false |
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
| validate-event | whether to trigger form validation | boolean | - | true |
## Checkbox Events
@ -114,6 +115,7 @@ checkbox/with-border
| label | label for screen reader | string | — | — |
| text-color | font color when button is active | string | — | #ffffff |
| fill | border and background color when button is active | string | — | #409EFF |
| validate-event | whether to trigger form validation | boolean | - | true |
## Checkbox-group Events

1
docs/en-US/component/color-picker.md
View File

@ -50,6 +50,7 @@ color-picker/sizes
| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
| predefine | predefined color options | array | — | — |
| validate-event | whether to trigger form validation | boolean | - | true |
## Events

1
docs/en-US/component/input-number.md
View File

@ -97,6 +97,7 @@ input-number/controlled
| label | label text | string | — | — |
| placeholder | placeholder in input | string | - | - |
| value-on-clear **(\> 2.2.0)** | value should be set when input box is cleared | string / number / null | min/max | - |
| validate-event | whether to trigger form validation | boolean | - | true |
## Events

1
docs/en-US/component/radio.md
View File

@ -87,6 +87,7 @@ radio/with-borders
| disabled | whether the nesting radios are disabled | boolean | — | false |
| text-color | font color when button is active | string | — | #ffffff |
| fill | border and background color when button is active | string | — | #409EFF |
| validate-event | whether to trigger form validation | boolean | - | true |
## Radio-group Events

1
docs/en-US/component/select-v2.md
View File

@ -157,6 +157,7 @@ select-v2/remote-search
| scrollbar-always-on | Controls whether the scrollbar is always displayed | boolean | - | false |
| remote | whether search data from server | boolean | — | false |
| remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | function(keyword: string) | — | — |
| validate-event | whether to trigger form validation | boolean | - | true |
<span style="display: none;">
<!-- | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |

1
docs/en-US/component/select.md
View File

@ -146,6 +146,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
| fit-input-width | whether the width of the dropdown is the same as the input | boolean | — | false |
| suffix-icon | Custom suffix icon component | string / Component | — | ArrowUp |
| tag-type | tag type | string | success/info/warning/danger | info |
| validate-event | whether to trigger form validation | boolean | - | true |
## Select Events

1
docs/en-US/component/slider.md
View File

@ -97,6 +97,7 @@ slider/show-marks
| debounce | debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
| tooltip-class | custom class name for the tooltip | string | — | — |
| marks | marks， type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style | object | — | — |
| validate-event | whether to trigger form validation | boolean | - | true |
## Events

1
docs/en-US/component/transfer.md
View File

@ -42,6 +42,7 @@ transfer/prop-alias
| props | prop aliases for data source | object`{key, label, disabled}` | — | — |
| left-default-checked | key array of initially checked data items of the left list | array | — | [ ] |
| right-default-checked | key array of initially checked data items of the right list | array | — | [ ] |
| validate-event | whether to trigger form validation | boolean | - | true |
## Slots

12
packages/components/cascader/src/index.vue
View File

@ -177,7 +177,9 @@
@click="handleSuggestionClick(item)"
>
<span>{{ item.text }}</span>
<el-icon v-if="item.checked"><check /></el-icon>
<el-icon v-if="item.checked">
<check />
</el-icon>
</li>
</template>
<slot v-else name="empty">
@ -339,6 +341,10 @@ export default defineComponent({
teleported: useTooltipContentProps.teleported,
// eslint-disable-next-line vue/require-prop-types
tagType: { ...tagProps.type, default: 'info' },
validateEvent: {
type: Boolean,
default: true,
},
},
emits: [
@ -421,7 +427,9 @@ export default defineComponent({
set(val) {
emit(UPDATE_MODEL_EVENT, val)
emit(CHANGE_EVENT, val)
elFormItem.validate?.('change').catch((err) => debugWarn(err))
if (props.validateEvent) {
elFormItem.validate?.('change').catch((err) => debugWarn(err))
}
},
})

4
packages/components/checkbox/src/checkbox-group.vue
View File

@ -65,7 +65,9 @@ provide('CheckboxGroup', {
watch(
() => props.modelValue,
() => {
elFormItem.validate?.('change').catch((err) => debugWarn(err))
if (props.validateEvent) {
elFormItem.validate?.('change').catch((err) => debugWarn(err))
}
}
)
</script>

18
packages/components/checkbox/src/checkbox.ts
View File

@ -50,6 +50,10 @@ export const useCheckboxGroupProps = {
type: String,
default: 'div',
},
validateEvent: {
type: Boolean,
default: true,
},
}
export type IUseCheckboxGroupProps = ExtractPropTypes<
@ -90,6 +94,10 @@ export const checkboxProps = {
border: Boolean,
size: useSizeProp,
tabindex: [String, Number],
validateEvent: {
type: Boolean,
default: true,
},
}
export const useCheckboxGroup = () => {
@ -259,7 +267,7 @@ const useEvent = (
ReturnType<typeof useFormItemInputId>
>
) => {
const { elFormItem } = useCheckboxGroup()
const { elFormItem, checkboxGroup } = useCheckboxGroup()
const { emit } = getCurrentInstance()!
function getLabeledValue(value: string | number | boolean) {
@ -296,10 +304,16 @@ const useEvent = (
}
}
const validateEvent = computed(
() => checkboxGroup.validateEvent?.value || props.validateEvent
)
watch(
() => props.modelValue,
() => {
elFormItem?.validate?.('change').catch((err) => debugWarn(err))
if (validateEvent.value) {
elFormItem?.validate?.('change').catch((err) => debugWarn(err))
}
}
)

1
packages/components/checkbox/src/checkbox.type.ts
View File

@ -10,5 +10,6 @@ export interface ICheckboxGroupInstance {
fill?: ComputedRef<string>
textColor?: ComputedRef<string>
checkboxGroupSize?: ComputedRef<ComponentSize>
validateEvent?: ComputedRef<boolean>
changeEvent?: (...args: any[]) => any
}

10
packages/components/color-picker/src/index.vue
View File

@ -178,6 +178,10 @@ export default defineComponent({
default: 0,
},
predefine: Array,
validateEvent: {
type: Boolean,
default: true,
},
},
emits: ['change', 'active-change', UPDATE_MODEL_EVENT],
setup(props, { emit }) {
@ -313,7 +317,9 @@ export default defineComponent({
const value = color.value
emit(UPDATE_MODEL_EVENT, value)
emit('change', value)
elFormItem.validate?.('change').catch((err) => debugWarn(err))
if (props.validateEvent) {
elFormItem.validate?.('change').catch((err) => debugWarn(err))
}
debounceSetShowPicker(false)
// check if modelValue change, if not change, then reset color.
nextTick(() => {
@ -332,7 +338,7 @@ export default defineComponent({
debounceSetShowPicker(false)
emit(UPDATE_MODEL_EVENT, null)
emit('change', null)
if (props.modelValue !== null) {
if (props.modelValue !== null && props.validateEvent) {
elFormItem.validate?.('change').catch((err) => debugWarn(err))
}
resetColor()

4
packages/components/input-number/src/input-number.ts
View File

@ -53,6 +53,10 @@ export const inputNumberProps = buildProps({
validator: (val: number) =>
val >= 0 && val === Number.parseInt(`${val}`, 10),
},
validateEvent: {
type: Boolean,
default: true,
},
} as const)
export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>

8
packages/components/input-number/src/input-number.vue
View File

@ -220,7 +220,9 @@ const setCurrentValue = (value: number | string | null | undefined) => {
emit('update:modelValue', newVal!)
emit('input', newVal)
emit('change', newVal!, oldVal!)
formItem?.validate?.('change').catch((err) => debugWarn(err))
if (props.validateEvent) {
formItem?.validate?.('change').catch((err) => debugWarn(err))
}
data.currentValue = newVal
}
const handleInput = (value: string) => {
@ -248,7 +250,9 @@ const handleFocus = (event: MouseEvent | FocusEvent) => {
const handleBlur = (event: MouseEvent | FocusEvent) => {
emit('blur', event)
formItem?.validate?.('blur').catch((err) => debugWarn(err))
if (props.validateEvent) {
formItem?.validate?.('blur').catch((err) => debugWarn(err))
}
}
watch(

4
packages/components/radio/src/radio-group.ts
View File

@ -31,6 +31,10 @@ export const radioGroupProps = buildProps({
type: String,
default: undefined,
},
validateEvent: {
type: Boolean,
default: true,
},
} as const)
export type RadioGroupProps = ExtractPropTypes<typeof radioGroupProps>

6
packages/components/radio/src/radio-group.vue
View File

@ -78,6 +78,10 @@ provide(
watch(
() => props.modelValue,
() => formItem?.validate('change').catch((err) => debugWarn(err))
() => {
if (props.validateEvent) {
formItem?.validate('change').catch((err) => debugWarn(err))
}
}
)
</script>

4
packages/components/select-v2/src/defaults.ts
View File

@ -97,6 +97,10 @@ export const SelectProps = {
type: Boolean,
default: false,
},
validateEvent: {
type: Boolean,
default: true,
},
}
export const OptionProps = {

2
packages/components/select-v2/src/useSelect.ts
View File

@ -714,7 +714,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
if (!val || val.toString() !== states.previousValue) {
initStates()
}
if (!isEqual(val, oldVal)) {
if (!isEqual(val, oldVal) && props.validateEvent) {
elFormItem?.validate?.('change').catch((err) => debugWarn(err))
}
},

4
packages/components/select/src/select.vue
View File

@ -383,6 +383,10 @@ export default defineComponent({
},
// eslint-disable-next-line vue/require-prop-types
tagType: { ...tagProps.type, default: 'info' },
validateEvent: {
type: Boolean,
default: true,
},
},
emits: [
UPDATE_MODEL_EVENT,

2
packages/components/select/src/useSelect.ts
View File

@ -210,7 +210,7 @@ export const useSelect = (props, states: States, ctx) => {
if (props.filterable && !props.multiple) {
states.inputLength = 20
}
if (!isEqual(val, oldVal)) {
if (!isEqual(val, oldVal) && props.validateEvent) {
elFormItem.validate?.('change').catch((err) => debugWarn(err))
}
},

8
packages/components/slider/src/composables/use-watch.ts
View File

@ -48,7 +48,9 @@ export const useWatch = (
initData.firstValue = val[0]
initData.secondValue = val[1]
if (valueChanged()) {
elFormItem?.validate?.('change').catch((err) => debugWarn(err))
if (props.validateEvent) {
elFormItem?.validate?.('change').catch((err) => debugWarn(err))
}
initData.oldValue = val.slice()
}
}
@ -60,7 +62,9 @@ export const useWatch = (
} else {
initData.firstValue = val
if (valueChanged()) {
elFormItem?.validate?.('change').catch((err) => debugWarn(err))
if (props.validateEvent) {
elFormItem?.validate?.('change').catch((err) => debugWarn(err))
}
initData.oldValue = val
}
}

4
packages/components/slider/src/slider.ts
View File

@ -93,6 +93,10 @@ export const sliderProps = buildProps({
marks: {
type: definePropType<SliderMarks>(Object),
},
validateEvent: {
type: Boolean,
default: true,
},
} as const)
export type SliderProps = ExtractPropTypes<typeof sliderProps>

4
packages/components/transfer/src/transfer.ts
View File

@ -89,6 +89,10 @@ export const transferProps = buildProps({
values: ['original', 'push', 'unshift'],
default: 'original',
},
validateEvent: {
type: Boolean,
default: true,
},
} as const)
export type TransferProps = ExtractPropTypes<typeof transferProps>

4
packages/components/transfer/src/transfer.vue
View File

@ -135,7 +135,9 @@ const panelFilterPlaceholder = computed(
watch(
() => props.modelValue,
() => {
formItem?.validate?.('change').catch((err) => debugWarn(err))
if (props.validateEvent) {
formItem?.validate?.('change').catch((err) => debugWarn(err))
}
}
)