Skip to content

Commit e79303b

Browse files
william-xuehaoziqaqxueyuan
authored
fix(field-decorator): hide clear icon when readonly (#1948)
* feat: add name * feat: add function signature * fix: adjust css * fix: adjust css * feat: signature finish * feat: add test cases * feat: add test cases * feat: test cases * feat: resolve * feat: fix * feat: test case * feat: expose empty * refactor: optimize event handling with useEventListener hook * refactor: remove duplicate onMounted hook and clean up unnecessary code * refactor: add * refactor: add * feat: resolve comment * feat: resolve comment * feat: resolve comment * feat: cleanup * feat: test cases * feat: docs finish * feat: resolve comment * feat: "resolve comment" * refactor: cleanup * types: fix types * types: fix types * fix(field-decorator): hide clear icon when readonly Add readonly and formReadonly props to FieldDecorator and update the clear icon visibility condition to also check these flags. Pass the new props from Input and Select to FieldDecorator. Closes #1946 * test(form): update snapshots for readonly clear icon --------- Co-authored-by: haoziqaq <357229046@qq.com> Co-authored-by: xueyuan <xueyuan@tode.com>
1 parent 9c0c7e6 commit e79303b

8 files changed

Lines changed: 103 additions & 8 deletions

File tree

‎packages/varlet-ui/src/field-decorator/FieldDecorator.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
</label>
5252

5353
<div :class="classes(n('icon'), [!hint, n('--icon-non-hint')])">
54-
<slot v-if="clearable && !isEmpty(value)" name="clear-icon" :clear="handleClear">
54+
<slot v-if="clearable && !isEmpty(value) && !readonly && !formReadonly" name="clear-icon" :clear="handleClear">
5555
<var-icon :class="n('clear-icon')" var-field-decorator-cover name="close-circle" @click="handleClear" />
5656
</slot>
5757
<slot name="append-icon" />

‎packages/varlet-ui/src/field-decorator/props.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ export const props = {
4242
blurColor: String,
4343
isError: Boolean,
4444
formDisabled: Boolean,
45+
formReadonly: Boolean,
4546
disabled: Boolean,
47+
readonly: Boolean,
4648
clearable: Boolean,
4749
cursor: String,
4850
composing: Boolean,

‎packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap‎

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,90 @@ exports[`form with select 2`] = `
302302
</div>
303303
</div>
304304
<!--v-if-->
305-
<div class="var-field-decorator__icon"><i class="var-icon var-icon--set var-icon-close-circle var-field-decorator__clear-icon" style="transition-duration: 0ms;" var-field-decorator-cover=""></i><i class="var-icon var-icon--set var-icon-menu-down var-select__arrow" style="transition-duration: 300ms;" var-select-cover=""></i></div>
305+
<div class="var-field-decorator__icon">
306+
<!--v-if--><i class="var-icon var-icon--set var-icon-menu-down var-select__arrow" style="transition-duration: 300ms;" var-select-cover=""></i>
307+
</div>
308+
</div>
309+
<div class="var-field-decorator__line">
310+
<div class="var-field-decorator__dot"></div>
311+
</div>
312+
</div>
313+
<!--teleport start-->
314+
<!--teleport end-->
315+
</div>
316+
<transition-stub name="var-form-details" appear="false" persisted="false" css="true">
317+
<!--v-if-->
318+
</transition-stub>
319+
</div>
320+
</form>"
321+
`;
322+
323+
exports[`form with select 3`] = `
324+
"<form class="var-form">
325+
<div class="var-select" tabindex="0">
326+
<div class="var-menu var--box var-select__menu" var-select-cover="">
327+
<div class="var-field-decorator var--box var-field-decorator--standard">
328+
<div class="var-field-decorator__controller var-field-decorator--error" style="cursor: pointer; overflow: visible; --field-decorator-middle-offset-left: 0px; --field-decorator-middle-offset-width: 0px; --field-decorator-middle-offset-height: 0px;">
329+
<div class="var-field-decorator__icon"></div>
330+
<div class="var-field-decorator__middle">
331+
<div class="var-select__select var-select--error" style="text-align: left;">
332+
<div class="var-select__label">
333+
<div class="var-select__chips">
334+
<transition-stub name="var-fade" appear="false" persisted="false" css="true"><span class="var-chip var--box var-chip--small var--inline-flex var-chip--danger var-chip--round var-select__chip" var-select-cover=""><span class="var-chip__text-small"><span>option1</span></span><span class="var-chip--close"><i class="var-icon var-icon--set var-icon-close-circle" style="transition-duration: 0ms;"></i></span></span></transition-stub>
335+
</div>
336+
</div>
337+
<!--v-if--><i class="var-icon var-icon--set var-icon-menu-down var-select__arrow" style="transition-duration: 300ms;" var-select-cover=""></i>
338+
</div>
339+
</div>
340+
<!--v-if-->
341+
<div class="var-field-decorator__icon">
342+
<!--v-if-->
343+
</div>
344+
</div>
345+
<div class="var-field-decorator__line var-field-decorator--line-error">
346+
<div class="var-field-decorator__dot var-field-decorator--line-error"></div>
347+
</div>
348+
</div>
349+
<!--teleport start-->
350+
<!--teleport end-->
351+
</div>
352+
<transition-stub name="var-form-details" appear="false" persisted="false" css="true">
353+
<div class="var-form-details">
354+
<div class="var-form-details__error-message">
355+
<transition-stub name="var-form-details__message" appear="false" persisted="false" css="true">
356+
<div>You must choose one option at least</div>
357+
</transition-stub>
358+
</div>
359+
<div class="var-form-details__extra-message">
360+
<transition-stub name="var-form-details__message" appear="false" persisted="false" css="true">
361+
<!--v-if-->
362+
</transition-stub>
363+
</div>
364+
</div>
365+
</transition-stub>
366+
</div>
367+
</form>"
368+
`;
369+
370+
exports[`form with select 4`] = `
371+
"<form class="var-form">
372+
<div class="var-select" tabindex="0">
373+
<div class="var-menu var--box var-select__menu" var-select-cover="">
374+
<div class="var-field-decorator var--box var-field-decorator--standard">
375+
<div class="var-field-decorator__controller" style="cursor: pointer; overflow: hidden; --field-decorator-middle-offset-left: 0px; --field-decorator-middle-offset-width: 0px; --field-decorator-middle-offset-height: 0px;">
376+
<div class="var-field-decorator__icon"></div>
377+
<div class="var-field-decorator__middle">
378+
<div class="var-select__select" style="text-align: left;">
379+
<div class="var-select__label">
380+
<!--v-if-->
381+
</div>
382+
<!--v-if--><i class="var-icon var-icon--set var-icon-menu-down var-select__arrow" style="transition-duration: 300ms;" var-select-cover=""></i>
383+
</div>
384+
</div>
385+
<!--v-if-->
386+
<div class="var-field-decorator__icon">
387+
<!--v-if-->
388+
</div>
306389
</div>
307390
<div class="var-field-decorator__line">
308391
<div class="var-field-decorator__dot"></div>

‎packages/varlet-ui/src/form/__tests__/index.spec.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,10 @@ test('form with select', async () => {
152152

153153
const triggerEvents = async () => {
154154
await wrapper.find('.var-chip--close').trigger('click')
155-
await wrapper.find('.var-field-decorator__clear-icon').trigger('click')
155+
const clearIcon = wrapper.find('.var-field-decorator__clear-icon')
156+
if (clearIcon.exists()) {
157+
await clearIcon.trigger('click')
158+
}
156159
await wrapper.find('.var-field-decorator').trigger('click')
157160
}
158161

@@ -165,7 +168,7 @@ test('form with select', async () => {
165168
expect(wrapper.html()).toMatchSnapshot()
166169

167170
await triggerEvents()
168-
expect(onClick).toHaveBeenCalledTimes(2)
171+
expect(onClick).toHaveBeenCalledTimes(1)
169172
expect(onClear).toHaveBeenCalledTimes(0)
170173
expect(onClose).toHaveBeenCalledTimes(0)
171174

‎packages/varlet-ui/src/input/Input.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
isFocusing: isForceFocusingEffect != null ? isForceFocusingEffect : isFocusing,
1717
isError: isForceErrorEffect != null ? isForceErrorEffect : !!errorMessage,
1818
formDisabled,
19+
formReadonly,
1920
disabled,
21+
readonly,
2022
clearable,
2123
cursor,
2224
composing: isComposing,

‎packages/varlet-ui/src/input/__tests__/index.spec.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -290,11 +290,15 @@ test('input readonly', async () => {
290290
},
291291
})
292292

293-
await triggerEvents(wrapper)
293+
expect(wrapper.find('.var-field-decorator__clear-icon').exists()).toBeFalsy()
294+
295+
await wrapper.find('.var-input__input').trigger('input')
296+
await wrapper.find('.var-input__input').trigger('change')
297+
await wrapper.find('.var-field-decorator').trigger('click')
294298

295299
expect(onInput).toHaveBeenCalledTimes(1)
296300
expect(onClear).toHaveBeenCalledTimes(0)
297-
expect(onClick).toHaveBeenCalledTimes(2)
301+
expect(onClick).toHaveBeenCalledTimes(1)
298302
expect(onChange).toHaveBeenCalledTimes(1)
299303
expect(onUpdateModelValue).toHaveBeenCalledTimes(1)
300304

‎packages/varlet-ui/src/select/Select.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@
3030
isError: !!errorMessage,
3131
formDisabled,
3232
composing: isComposing,
33+
formReadonly,
3334
disabled,
35+
readonly,
3436
clearable: clearable ? !filterable || !pattern : false,
3537
cursor,
3638
onClick: handleClick,

‎packages/varlet-ui/src/select/__tests__/index.spec.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -308,8 +308,7 @@ test('select readonly', async () => {
308308
await trigger(document.querySelector('.var-option'), 'click')
309309
expect(wrapper.vm.value).toBe('sleep')
310310

311-
await wrapper.find('.var-icon-close-circle').trigger('click')
312-
expect(wrapper.vm.value).toBe('sleep')
311+
expect(wrapper.find('.var-icon-close-circle').exists()).toBeFalsy()
313312

314313
wrapper.unmount()
315314
document.body.innerHTML = ''

0 commit comments

Comments
 (0)