blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Field): required label css will active when rules contain required (#12376)

Browse Source 
* chore: required label css will active when rules contain required

* chore: update snapshot
This commit is contained in:
morance 2023-10-21 19:44:54 +08:00 committed by GitHub
parent 40f67d7e48
commit d7fc56e3f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/contact-edit/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -8,7 +8,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-contact-edit__fields"> <div class="van-contact-edit__fields">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div <div
class="van-cell__title van-field__label" class="van-cell__title van-field__label van-field__label--required"
style style
> >
<!--[--> <!--[-->

2
packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
View File

@ -5,7 +5,7 @@ exports[`should render demo and match snapshot 1`] = `
<form class="van-form van-contact-edit"> <form class="van-form van-contact-edit">
<div class="van-contact-edit__fields"> <div class="van-contact-edit__fields">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label van-field__label--required">
<label <label
id="van-field-label" id="van-field-label"
for="van-field-input" for="van-field-input"

9
packages/vant/src/field/Field.tsx
View File

@ -193,6 +193,10 @@ export default defineComponent({
return props.modelValue; return props.modelValue;
}); });
const isRequired = computed(() => {
return props.rules?.some((rule: FieldRule) => rule.required);
});
const runRules = (rules: FieldRule[]) => const runRules = (rules: FieldRule[]) =>
rules.reduce( rules.reduce(
(promise, rule) => (promise, rule) =>
@ -696,7 +700,10 @@ export default defineComponent({
titleStyle={labelStyle.value} titleStyle={labelStyle.value}
valueClass={bem('value')} valueClass={bem('value')}
titleClass={[ titleClass={[
bem('label', [labelAlign, { required: props.required }]), bem('label', [
labelAlign,
{ required: isRequired.value || props.required },
]),
props.labelClass, props.labelClass,
]} ]}
arrowDirection={props.arrowDirection} arrowDirection={props.arrowDirection}

12
packages/vant/src/field/test/index.spec.js
View File

@ -106,7 +106,19 @@ test('should render textarea when type is textarea', async () => {
await later(); await later();
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
test('should show required icon when using rules which contian required', async () => {
const wrapper = mount(Field, {
props: {
modelValue: '123',
label: '123',
rules: [{ required: false }],
},
});
expect(wrapper.find('.van-field__label--required').exists()).toBeFalsy();
await wrapper.setProps({ rules: [{ required: true }] });
expect(wrapper.find('.van-field__label--required').exists()).toBeTruthy();
});
test('should autosize textarea field', async () => { test('should autosize textarea field', async () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
props: { props: {

4
packages/vant/src/form/test/__snapshots__/demo-ssr.spec.ts.snap
View File

@ -10,7 +10,7 @@ exports[`should render demo and match snapshot 1`] = `
<!--[--> <!--[-->
<div class="van-cell van-field"> <div class="van-cell van-field">
<div <div
class="van-cell__title van-field__label" class="van-cell__title van-field__label van-field__label--required"
style style
> >
<!--[--> <!--[-->
@ -38,7 +38,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div class="van-cell van-field"> <div class="van-cell van-field">
<div <div
class="van-cell__title van-field__label" class="van-cell__title van-field__label van-field__label--required"
style style
> >
<!--[--> <!--[-->

4
packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
View File

@ -5,7 +5,7 @@ exports[`should render demo and match snapshot 1`] = `
<form class="van-form"> <form class="van-form">
<div class="van-cell-group van-cell-group--inset"> <div class="van-cell-group van-cell-group--inset">
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label van-field__label--required">
<label <label
id="van-field-label" id="van-field-label"
for="van-field-input" for="van-field-input"
@ -27,7 +27,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"> <div class="van-cell__title van-field__label van-field__label--required">
<label <label
id="van-field-label" id="van-field-label"
for="van-field-input" for="van-field-input"