Skip to content

Commit e22a250

Browse files
AybreaAybrea
committed
feat(ui/field-decorator): filled variant
1 parent 119ead6 commit e22a250

File tree

8 files changed

+197
-2
lines changed

8 files changed

+197
-2
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,24 @@
8888
</legend>
8989
</fieldset>
9090

91+
<div
92+
v-else-if="variant === 'filled'"
93+
:class="classes(n('line'), [formDisabled || disabled, n('--line-disabled')], [isError, n('--line-error')])"
94+
:style="{ background: !isError ? blurColor : undefined }"
95+
>
96+
<div
97+
:class="
98+
classes(
99+
n('dot'),
100+
[isFocusing, n('--line-focus')],
101+
[formDisabled || disabled, n('--line-disabled')],
102+
[isError, n('--line-error')],
103+
)
104+
"
105+
:style="{ background: !isError ? focusColor : undefined }"
106+
/>
107+
</div>
108+
91109
<div
92110
v-else
93111
:class="classes(n('line'), [formDisabled || disabled, n('--line-disabled')], [isError, n('--line-error')])"

‎packages/varlet-ui/src/field-decorator/fieldDecorator.less‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,15 @@
1010
--field-decorator-line-border-radius: 4px;
1111
--field-decorator-disabled-color: var(--color-text-disabled);
1212
--field-decorator-standard-normal-margin-top: 22px;
13+
--field-decorator-filled-normal-margin: 16px;
14+
--field-decorator-filled-normal-margin-top: 24px;
15+
--field-decorator-filled-normal-margin-bottom: 8px;
1316
--field-decorator-standard-normal-margin-bottom: 4px;
1417
--field-decorator-standard-normal-icon-margin-top: 22px;
1518
--field-decorator-standard-normal-icon-margin-bottom: 4px;
1619
--field-decorator-standard-normal-non-hint-margin-top: 4px;
20+
--field-decorator-filled-small-margin-top: 16px;
21+
--field-decorator-filled-small-margin-bottom: 0px;
1722
--field-decorator-standard-small-margin-top: 18px;
1823
--field-decorator-standard-small-margin-bottom: 4px;
1924
--field-decorator-standard-small-icon-margin-top: 18px;
@@ -193,6 +198,88 @@
193198
}
194199
}
195200

201+
&--filled {
202+
background-color: var(--field-decorator-filled-color);
203+
border-radius: var(--field-decorator-line-border-radius);
204+
205+
&:hover {
206+
background-color: var(--field-decorator-filled-hover-color);
207+
}
208+
209+
.var-field-decorator__controller {
210+
padding: 0 var(--field-decorator-outlined-normal-padding-right) 0
211+
var(--field-decorator-outlined-normal-padding-left);
212+
}
213+
214+
.var-field-decorator__middle {
215+
margin-top: var(--field-decorator-filled-normal-margin-top);
216+
margin-bottom: var(--field-decorator-filled-normal-margin-bottom);
217+
}
218+
219+
.var-field-decorator__icon {
220+
margin-top: var(--field-decorator-outlined-normal-icon-margin-top);
221+
margin-bottom: var(--field-decorator-outlined-normal-icon-margin-bottom);
222+
}
223+
224+
.var-field-decorator__placeholder {
225+
transform: translate(var(--field-decorator-middle-offset-left), var(--field-decorator-filled-normal-margin));
226+
}
227+
228+
.var-field-decorator--placeholder-hint {
229+
max-width: 133%;
230+
transform: translate(
231+
var(--field-decorator-middle-offset-left),
232+
calc(var(--field-decorator-filled-normal-margin) + var(--field-decorator-middle-offset-height) / 2 - 90%)
233+
)
234+
scale(0.75) !important;
235+
}
236+
237+
.var-field-decorator__line {
238+
width: 100%;
239+
height: var(--field-decorator-line-size);
240+
background: var(--field-decorator-blur-color);
241+
transition: background-color 0.25s;
242+
}
243+
244+
.var-field-decorator--line-disabled {
245+
background: var(--field-decorator-disabled-color);
246+
}
247+
248+
.var-field-decorator__dot {
249+
width: 100%;
250+
height: var(--field-decorator-line-focus-size);
251+
background: var(--field-decorator-focus-color);
252+
transform: scaleX(0);
253+
transform-origin: center;
254+
transition:
255+
transform 0.3s var(--cubic-bezier),
256+
background-color 0.25s;
257+
}
258+
259+
.var-field-decorator--middle-non-hint {
260+
margin-top: var(--field-decorator-standard-normal-non-hint-margin-top);
261+
}
262+
263+
.var-field-decorator--icon-non-hint {
264+
margin-top: var(--field-decorator-standard-normal-non-hint-margin-top);
265+
}
266+
267+
.var-field-decorator--hint-center {
268+
transform: translate(
269+
var(--field-decorator-middle-offset-left),
270+
calc(var(--field-decorator-filled-normal-margin) + var(--field-decorator-middle-offset-height) / 2 - 50%)
271+
);
272+
}
273+
274+
.var-field-decorator--line-focus {
275+
transform: scaleX(1);
276+
}
277+
278+
.var-field-decorator--line-error {
279+
background: var(--field-decorator-error-color);
280+
}
281+
}
282+
196283
&--outlined {
197284
.var-field-decorator__controller {
198285
padding: 0 var(--field-decorator-outlined-normal-padding-right) 0
@@ -325,6 +412,30 @@
325412
}
326413
}
327414

415+
.var-field-decorator--filled& {
416+
.var-field-decorator__middle {
417+
margin-top: var(--field-decorator-filled-small-margin-top);
418+
margin-bottom: var(--field-decorator-filled-small-margin-bottom);
419+
}
420+
421+
.var-field-decorator--placeholder-hint {
422+
max-width: 133%;
423+
transform: translate(var(--field-decorator-middle-offset-left), 0) scale(0.75) !important;
424+
}
425+
426+
.var-field-decorator--middle-non-hint {
427+
margin-top: var(--field-decorator-standard-small-non-hint-margin-top);
428+
}
429+
430+
.var-field-decorator--icon-non-hint {
431+
margin-top: var(--field-decorator-standard-small-non-hint-margin-top);
432+
}
433+
434+
.var-field-decorator--hint-center {
435+
transform: translate(var(--field-decorator-middle-offset-left), 0) scale(0.75) !important;
436+
}
437+
}
438+
328439
.var-field-decorator--outlined& {
329440
.var-field-decorator__controller {
330441
padding: 0 var(--field-decorator-outlined-small-padding-right) 0

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { defineListenerProp } from '../utils/components'
33

44
export type FieldDecoratorSize = 'small' | 'normal'
55

6-
export type FieldDecoratorVariant = 'outlined' | 'standard'
6+
export type FieldDecoratorVariant = 'outlined' | 'filled' | 'standard'
77

88
export const props = {
99
value: {

‎packages/varlet-ui/src/input/example/index.vue‎

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,21 @@ const outlinedValue12 = ref('')
3434
const outlinedValue13 = ref('')
3535
const outlinedValue14 = ref('')
3636
37+
const filledValue = ref('')
38+
const filledValue2 = ref('')
39+
const filledValue3 = ref('')
40+
const filledValue4 = ref('')
41+
const filledValue5 = ref('')
42+
const filledValue6 = ref('')
43+
const filledValue7 = ref('')
44+
const filledValue8 = ref('')
45+
const filledValue9 = ref('')
46+
const filledValue10 = ref('')
47+
const filledValue11 = ref('')
48+
const filledValue12 = ref('')
49+
const filledValue13 = ref('')
50+
const filledValue14 = ref('')
51+
3752
watchLang(use)
3853
onThemeChange()
3954
</script>
@@ -65,7 +80,6 @@ onThemeChange()
6580
<var-icon class="append-icon" name="github" />
6681
</template>
6782
</var-input>
68-
6983
<var-input v-model="standardValue8" :placeholder="t('customIconSize')">
7084
<template #prepend-icon>
7185
<var-icon class="prepend-icon" name="github" size="8vmin" />
@@ -126,6 +140,52 @@ onThemeChange()
126140
<var-input v-model.trim="outlinedValue12" variant="outlined" :placeholder="t('trim')" />
127141
</var-space>
128142

143+
<app-type style="margin-top: 10vmin">{{ t('filled') }}</app-type>
144+
<var-space direction="column" :size="['6vmin', 0]">
145+
<var-input v-model="filledValue" variant="filled" :placeholder="t('placeholder')" />
146+
<var-input v-model="filledValue13" variant="filled" :placeholder="t('numberPlaceholder')" type="number" />
147+
<var-input v-model="filledValue2" variant="filled" :placeholder="t('readonly')" readonly />
148+
<var-input v-model="filledValue3" variant="filled" :placeholder="t('disabled')" disabled />
149+
<var-input v-model="filledValue4" variant="filled" :placeholder="t('clearable')" clearable />
150+
<var-input v-model="filledValue5" variant="filled" :placeholder="t('clearIconSlot')" clearable>
151+
<template #clear-icon="{ clear }">
152+
<var-icon name="error" @click="clear" />
153+
</template>
154+
</var-input>
155+
<var-input
156+
v-model="filledValue6"
157+
variant="filled"
158+
:placeholder="t('validate')"
159+
:rules="(v) => v.length > 6 || t('maxMessage')"
160+
/>
161+
<var-input
162+
v-model="filledValue14"
163+
variant="filled"
164+
:placeholder="t('validateWithZod')"
165+
:rules="z.string().min(7, t('maxMessage'))"
166+
/>
167+
<var-input v-model="filledValue7" variant="filled" :placeholder="t('displayIcon')">
168+
<template #prepend-icon>
169+
<var-icon class="prepend-icon" name="github" />
170+
</template>
171+
<template #append-icon>
172+
<var-icon class="append-icon" name="github" />
173+
</template>
174+
</var-input>
175+
<var-input v-model="filledValue8" variant="filled" :placeholder="t('customIconSize')">
176+
<template #prepend-icon>
177+
<var-icon class="prepend-icon" name="github" size="8vmin" />
178+
</template>
179+
<template #append-icon>
180+
<var-icon class="append-icon" name="github" size="12vmin" />
181+
</template>
182+
</var-input>
183+
<var-input v-model="filledValue9" variant="filled" :placeholder="t('maxlength')" :maxlength="10" />
184+
<var-input v-model="filledValue10" variant="filled" :placeholder="t('textarea')" textarea />
185+
<var-input v-model="filledValue11" variant="filled" :placeholder="t('smallSize')" size="small" />
186+
<var-input v-model.trim="filledValue12" variant="filled" :placeholder="t('trim')" />
187+
</var-space>
188+
129189
<div style="height: 40px"></div>
130190
</template>
131191

‎packages/varlet-ui/src/input/example/locale/en-US.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export default {
22
standard: 'Standard Variant',
33
outlined: 'Outlined Variant',
4+
filled: 'Filled Variant',
45
smallSize: 'Small Size',
56
plainMode: 'Plain Mode',
67
textarea: 'Textarea',

‎packages/varlet-ui/src/input/example/locale/zh-CN.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export default {
22
standard: '标准外观',
33
outlined: '外边框外观',
4+
filled: '填充外观',
45
smallSize: '小尺寸',
56
plainMode: '朴素模式',
67
textarea: '文本域',

‎packages/varlet-ui/src/themes/md3-dark/fieldDecorator.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,6 @@ export default {
3333
'--field-decorator-outlined-small-placeholder-space': '2px',
3434
'--field-decorator-outlined-small-icon-margin-top': '8px',
3535
'--field-decorator-outlined-small-icon-margin-bottom': '8px',
36+
'--field-decorator-filled-color': '#2f2e33',
37+
'--field-decorator-filled-hover-color': '#3c3a40',
3638
}

‎packages/varlet-ui/src/themes/md3-light/fieldDecorator.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,6 @@ export default {
3333
'--field-decorator-outlined-small-placeholder-space': '2px',
3434
'--field-decorator-outlined-small-icon-margin-top': '8px',
3535
'--field-decorator-outlined-small-icon-margin-bottom': '8px',
36+
'--field-decorator-filled-color': '#e2dce5',
37+
'--field-decorator-filled-hover-color': '#d0cad3',
3638
}

0 commit comments

Comments
 (0)