Skip to content

Commit 3c9c9e9

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

File tree

8 files changed

+207
-2
lines changed

8 files changed

+207
-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: 121 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,95 @@
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+
&.var-field-decorator--placeholder-hint {
227+
max-width: 133%;
228+
transform: translate(
229+
var(--field-decorator-middle-offset-left),
230+
calc(var(--field-decorator-filled-normal-margin) - 50%)
231+
)
232+
scale(0.75) !important;
233+
}
234+
}
235+
236+
.var-field-decorator--hint-center {
237+
transform: translate(
238+
var(--field-decorator-middle-offset-left),
239+
calc(var(--field-decorator-filled-normal-margin) + var(--field-decorator-middle-offset-height) / 2 - 50%)
240+
);
241+
&.var-field-decorator--placeholder-hint {
242+
max-width: 133%;
243+
transform: translate(
244+
var(--field-decorator-middle-offset-left),
245+
calc(var(--field-decorator-middle-offset-height) / 2 - 25%)
246+
)
247+
scale(0.75) !important;
248+
}
249+
}
250+
251+
.var-field-decorator__line {
252+
width: 100%;
253+
height: var(--field-decorator-line-size);
254+
background: var(--field-decorator-blur-color);
255+
transition: background-color 0.25s;
256+
}
257+
258+
.var-field-decorator--line-disabled {
259+
background: var(--field-decorator-disabled-color);
260+
}
261+
262+
.var-field-decorator__dot {
263+
width: 100%;
264+
height: var(--field-decorator-line-focus-size);
265+
background: var(--field-decorator-focus-color);
266+
transform: scaleX(0);
267+
transform-origin: center;
268+
transition:
269+
transform 0.3s var(--cubic-bezier),
270+
background-color 0.25s;
271+
}
272+
273+
.var-field-decorator--middle-non-hint {
274+
margin-top: var(--field-decorator-standard-normal-non-hint-margin-top);
275+
}
276+
277+
.var-field-decorator--icon-non-hint {
278+
margin-top: var(--field-decorator-standard-normal-non-hint-margin-top);
279+
}
280+
281+
.var-field-decorator--line-focus {
282+
transform: scaleX(1);
283+
}
284+
285+
.var-field-decorator--line-error {
286+
background: var(--field-decorator-error-color);
287+
}
288+
}
289+
196290
&--outlined {
197291
.var-field-decorator__controller {
198292
padding: 0 var(--field-decorator-outlined-normal-padding-right) 0
@@ -325,6 +419,33 @@
325419
}
326420
}
327421

422+
.var-field-decorator--filled& {
423+
.var-field-decorator__middle {
424+
margin-top: var(--field-decorator-filled-small-margin-top);
425+
margin-bottom: var(--field-decorator-filled-small-margin-bottom);
426+
}
427+
428+
.var-field-decorator--placeholder-hint {
429+
max-width: 133%;
430+
transform: translate(var(--field-decorator-middle-offset-left), 0) scale(0.75) !important;
431+
}
432+
433+
.var-field-decorator--middle-non-hint {
434+
margin-top: var(--field-decorator-standard-small-non-hint-margin-top);
435+
}
436+
437+
.var-field-decorator--icon-non-hint {
438+
margin-top: var(--field-decorator-standard-small-non-hint-margin-top);
439+
}
440+
441+
.var-field-decorator--hint-center {
442+
transform: translate(
443+
var(--field-decorator-middle-offset-left),
444+
calc(var(--field-decorator-filled-small-margin-top) - 25%)
445+
);
446+
}
447+
}
448+
328449
.var-field-decorator--outlined& {
329450
.var-field-decorator__controller {
330451
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)