Skip to content

Commit 201a391

Browse files
haoziqaqhaoziqaq
committed
feat(input): add filled variant and update examples
- Introduced a new filled variant for input components. - Updated input examples to include filled variant alongside standard and outlined variants. - Enhanced documentation in zh-CN.md to reflect changes in input styles. - Modified locale files to include translations for filled variant. - Updated snapshots for select component tests to ensure consistency with new styles. - Added new CSS variables for filled variant styling in themes.
1 parent 92f1e12 commit 201a391

10 files changed

Lines changed: 459 additions & 324 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ exports[`auto-complete hint and line 1`] = `
6565
<div class="var-menu var--box var-menu-select var-auto-complete__menu-select" tabindex="-1" auto-complete-cover="">
6666
<div class="var-input var--box">
6767
<div class="var-field-decorator var--box var-field-decorator--standard">
68-
<div class="var-field-decorator__controller" style="cursor: text; overflow: hidden; --field-decorator-middle-offset-left: 0px; --field-decorator-middle-offset-width: 0px; --field-decorator-middle-offset-height: 0px;">
68+
<div class="var-field-decorator__controller var-field-decorator--bottom-border-radius" style="cursor: text; overflow: hidden; --field-decorator-middle-offset-left: 0px; --field-decorator-middle-offset-width: 0px; --field-decorator-middle-offset-height: 0px;">
6969
<div class="var-field-decorator__icon var-field-decorator--icon-non-hint"></div>
7070
<div class="var-field-decorator__middle var-field-decorator--middle-non-hint">
7171
<!--v-if--><input id="var-input-mock-id" class="var-input__input" autocomplete="off" type="text" style="--input-placeholder-color: var(--field-decorator-placeholder-color, var(--field-decorator-blur-color));">

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -598,11 +598,11 @@ exports[`form with select 1`] = `
598598
<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--default 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>
599599
</div>
600600
</div>
601-
<!--v-if--><i class="var-icon var-icon--set var-icon-menu-down var-select__arrow" style="transition-duration: 300ms;" var-select-cover=""></i>
601+
<!--v-if-->
602602
</div>
603603
</div>
604604
<!--v-if-->
605-
<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></div>
605+
<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>
606606
</div>
607607
<div class="var-field-decorator__line var-field-decorator--line-disabled">
608608
<div class="var-field-decorator__dot var-field-decorator--line-disabled"></div>
@@ -632,11 +632,11 @@ exports[`form with select 2`] = `
632632
<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--default 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>
633633
</div>
634634
</div>
635-
<!--v-if--><i class="var-icon var-icon--set var-icon-menu-down var-select__arrow" style="transition-duration: 300ms;" var-select-cover=""></i>
635+
<!--v-if-->
636636
</div>
637637
</div>
638638
<!--v-if-->
639-
<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></div>
639+
<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>
640640
</div>
641641
<div class="var-field-decorator__line">
642642
<div class="var-field-decorator__dot"></div>
@@ -666,11 +666,11 @@ exports[`form with select 3`] = `
666666
<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>
667667
</div>
668668
</div>
669-
<!--v-if--><i class="var-icon var-icon--set var-icon-menu-down var-select__arrow" style="transition-duration: 300ms;" var-select-cover=""></i>
669+
<!--v-if-->
670670
</div>
671671
</div>
672672
<!--v-if-->
673-
<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></div>
673+
<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>
674674
</div>
675675
<div class="var-field-decorator__line var-field-decorator--line-error">
676676
<div class="var-field-decorator__dot var-field-decorator--line-error"></div>
@@ -709,12 +709,12 @@ exports[`form with select 4`] = `
709709
<div class="var-select__label">
710710
<!--v-if-->
711711
</div>
712-
<!--v-if--><i class="var-icon var-icon--set var-icon-menu-down var-select__arrow" style="transition-duration: 300ms;" var-select-cover=""></i>
712+
<!--v-if-->
713713
</div>
714714
</div>
715715
<!--v-if-->
716716
<div class="var-field-decorator__icon">
717-
<!--v-if-->
717+
<!--v-if--><i class="var-icon var-icon--set var-icon-menu-down var-select__arrow" style="transition-duration: 300ms;" var-select-cover=""></i>
718718
</div>
719719
</div>
720720
<div class="var-field-decorator__line">

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -514,6 +514,29 @@ exports[`input variant 2`] = `
514514
</div>"
515515
`;
516516
517+
exports[`input variant 3`] = `
518+
"<div class="var-input var--box">
519+
<div class="var-field-decorator var--box var-field-decorator--filled">
520+
<div class="var-field-decorator__controller" style="cursor: text; overflow: visible; --field-decorator-middle-offset-left: 0px; --field-decorator-middle-offset-width: 0px; --field-decorator-middle-offset-height: 0px;">
521+
<div class="var-field-decorator__icon"></div>
522+
<div class="var-field-decorator__middle">
523+
<!--v-if--><input id="var-input-mock-id" class="var-input__input" autocomplete="new-password" type="text" value="text">
524+
</div>
525+
<!--v-if-->
526+
<div class="var-field-decorator__icon">
527+
<!--v-if-->
528+
</div>
529+
</div>
530+
<div class="var-field-decorator__line">
531+
<div class="var-field-decorator__dot"></div>
532+
</div>
533+
</div>
534+
<transition-stub name="var-form-details" appear="false" persisted="false" css="true">
535+
<!--v-if-->
536+
</transition-stub>
537+
</div>"
538+
`;
539+
517540
exports[`test input component slots > input append-icon slot 1`] = `
518541
"<div class="var-input var--box">
519542
<div class="var-field-decorator var--box var-field-decorator--standard">

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ test('input plugin', () => {
1212
})
1313

1414
test('input variant', () => {
15-
;['standard', 'outlined'].forEach((variant) => {
15+
;['standard', 'outlined', 'filled'].forEach((variant) => {
1616
const wrapper = mount(VarInput, {
1717
props: {
1818
modelValue: 'text',
@@ -29,6 +29,13 @@ test('input variant', () => {
2929
break
3030
}
3131

32+
case 'filled': {
33+
expect(
34+
wrapper.find('.var-field-decorator__line').wrapperElement.querySelector('.var-field-decorator__dot'),
35+
).toBeTruthy()
36+
break
37+
}
38+
3239
case 'outlined': {
3340
expect(wrapper.find('.var-field-decorator__line').wrapperElement.querySelector('legend')).toBeTruthy()
3441
break

0 commit comments

Comments
 (0)