blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 05:42:44 +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-cell van-field">
<div
class="van-cell__title van-field__label"
class="van-cell__title van-field__label van-field__label--required"
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">
<div class="van-contact-edit__fields">
<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
id="van-field-label"
for="van-field-input"

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

@ -193,6 +193,10 @@ export default defineComponent({
return props.modelValue;
});
const isRequired = computed(() => {
return props.rules?.some((rule: FieldRule) => rule.required);
});
const runRules = (rules: FieldRule[]) =>
rules.reduce(
(promise, rule) =>
@ -696,7 +700,10 @@ export default defineComponent({
titleStyle={labelStyle.value}
valueClass={bem('value')}
titleClass={[
bem('label', [labelAlign, { required: props.required }]),
bem('label', [
labelAlign,
{ required: isRequired.value || props.required },
]),
props.labelClass,
]}
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();
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 () => {
const wrapper = mount(Field, {
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__title van-field__label"
class="van-cell__title van-field__label van-field__label--required"
style
>
<!--[-->
@ -38,7 +38,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell van-field">
<div
class="van-cell__title van-field__label"
class="van-cell__title van-field__label van-field__label--required"
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">
<div class="van-cell-group van-cell-group--inset">
<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
id="van-field-label"
for="van-field-input"
@ -27,7 +27,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<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
id="van-field-label"
for="van-field-input"