Skip to content

Commit c039f23

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

6 files changed

Lines changed: 173 additions & 1 deletion

File tree

‎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: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,83 @@
193193
}
194194
}
195195

196+
&--filled {
197+
background: #0000000d;
198+
border-radius: 4px;
199+
200+
.var-field-decorator__controller {
201+
padding: 0 var(--field-decorator-outlined-normal-padding-right) 0
202+
var(--field-decorator-outlined-normal-padding-left);
203+
}
204+
205+
.var-field-decorator__middle {
206+
margin-top: var(--field-decorator-standard-normal-margin-top);
207+
margin-bottom: var(--field-decorator-standard-normal-margin-bottom);
208+
}
209+
210+
.var-field-decorator__icon {
211+
margin-top: var(--field-decorator-outlined-normal-icon-margin-top);
212+
margin-bottom: var(--field-decorator-outlined-normal-icon-margin-bottom);
213+
}
214+
215+
.var-field-decorator__placeholder {
216+
transform: translate(
217+
var(--field-decorator-middle-offset-left),
218+
var(--field-decorator-standard-normal-margin-top)
219+
);
220+
}
221+
222+
.var-field-decorator--placeholder-hint {
223+
max-width: 133%;
224+
transform: translate(var(--field-decorator-middle-offset-left), 0) scale(0.75) !important;
225+
}
226+
227+
.var-field-decorator__line {
228+
width: 100%;
229+
height: var(--field-decorator-line-size);
230+
background: var(--field-decorator-blur-color);
231+
transition: background-color 0.25s;
232+
}
233+
234+
.var-field-decorator--line-disabled {
235+
background: var(--field-decorator-disabled-color);
236+
}
237+
238+
.var-field-decorator__dot {
239+
width: 100%;
240+
height: var(--field-decorator-line-focus-size);
241+
background: var(--field-decorator-focus-color);
242+
transform: scaleX(0);
243+
transform-origin: center;
244+
transition:
245+
transform 0.3s var(--cubic-bezier),
246+
background-color 0.25s;
247+
}
248+
249+
.var-field-decorator--middle-non-hint {
250+
margin-top: var(--field-decorator-standard-normal-non-hint-margin-top);
251+
}
252+
253+
.var-field-decorator--icon-non-hint {
254+
margin-top: var(--field-decorator-standard-normal-non-hint-margin-top);
255+
}
256+
257+
.var-field-decorator--hint-center {
258+
transform: translate(
259+
var(--field-decorator-middle-offset-left),
260+
calc(var(--field-decorator-standard-normal-margin-top) + var(--field-decorator-middle-offset-height) / 2 - 75%)
261+
);
262+
}
263+
264+
.var-field-decorator--line-focus {
265+
transform: scaleX(1);
266+
}
267+
268+
.var-field-decorator--line-error {
269+
background: var(--field-decorator-error-color);
270+
}
271+
}
272+
196273
&--outlined {
197274
.var-field-decorator__controller {
198275
padding: 0 var(--field-decorator-outlined-normal-padding-right) 0
@@ -325,6 +402,35 @@
325402
}
326403
}
327404

405+
.var-field-decorator--filled& {
406+
.var-field-decorator__middle {
407+
margin-top: var(--field-decorator-standard-small-margin-top);
408+
margin-bottom: var(--field-decorator-standard-small-margin-bottom);
409+
}
410+
411+
.var-field-decorator__placeholder {
412+
transform: translate(
413+
var(--field-decorator-middle-offset-left),
414+
var(--field-decorator-standard-small-margin-top)
415+
);
416+
}
417+
418+
.var-field-decorator--middle-non-hint {
419+
margin-top: var(--field-decorator-standard-small-non-hint-margin-top);
420+
}
421+
422+
.var-field-decorator--icon-non-hint {
423+
margin-top: var(--field-decorator-standard-small-non-hint-margin-top);
424+
}
425+
426+
.var-field-decorator--hint-center {
427+
transform: translate(
428+
var(--field-decorator-middle-offset-left),
429+
calc(var(--field-decorator-standard-small-margin-top) + var(--field-decorator-middle-offset-height) / 2 - 50%)
430+
);
431+
}
432+
}
433+
328434
.var-field-decorator--outlined& {
329435
.var-field-decorator__controller {
330436
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: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,52 @@ onThemeChange()
126126
<var-input v-model.trim="outlinedValue12" variant="outlined" :placeholder="t('trim')" />
127127
</var-space>
128128

129+
<app-type style="margin-top: 10vmin">{{ t('filled') }}</app-type>
130+
<var-space direction="column" :size="['6vmin', 0]">
131+
<var-input v-model="outlinedValue" variant="filled" :placeholder="t('placeholder')" />
132+
<var-input v-model="outlinedValue13" variant="filled" :placeholder="t('numberPlaceholder')" type="number" />
133+
<var-input v-model="outlinedValue2" variant="filled" :placeholder="t('readonly')" readonly />
134+
<var-input v-model="outlinedValue3" variant="filled" :placeholder="t('disabled')" disabled />
135+
<var-input v-model="outlinedValue4" variant="filled" :placeholder="t('clearable')" clearable />
136+
<var-input v-model="outlinedValue5" variant="filled" :placeholder="t('clearIconSlot')" clearable>
137+
<template #clear-icon="{ clear }">
138+
<var-icon name="error" @click="clear" />
139+
</template>
140+
</var-input>
141+
<var-input
142+
v-model="outlinedValue6"
143+
variant="filled"
144+
:placeholder="t('validate')"
145+
:rules="(v) => v.length > 6 || t('maxMessage')"
146+
/>
147+
<var-input
148+
v-model="outlinedValue14"
149+
variant="filled"
150+
:placeholder="t('validateWithZod')"
151+
:rules="z.string().min(7, t('maxMessage'))"
152+
/>
153+
<var-input v-model="outlinedValue7" variant="filled" :placeholder="t('displayIcon')">
154+
<template #prepend-icon>
155+
<var-icon class="prepend-icon" name="github" />
156+
</template>
157+
<template #append-icon>
158+
<var-icon class="append-icon" name="github" />
159+
</template>
160+
</var-input>
161+
<var-input v-model="outlinedValue8" variant="filled" :placeholder="t('customIconSize')">
162+
<template #prepend-icon>
163+
<var-icon class="prepend-icon" name="github" size="8vmin" />
164+
</template>
165+
<template #append-icon>
166+
<var-icon class="append-icon" name="github" size="12vmin" />
167+
</template>
168+
</var-input>
169+
<var-input v-model="outlinedValue9" variant="filled" :placeholder="t('maxlength')" :maxlength="10" />
170+
<var-input v-model="outlinedValue10" variant="filled" :placeholder="t('textarea')" textarea />
171+
<var-input v-model="outlinedValue11" variant="filled" :placeholder="t('smallSize')" size="small" />
172+
<var-input v-model.trim="outlinedValue12" variant="filled" :placeholder="t('trim')" />
173+
</var-space>
174+
129175
<div style="height: 40px"></div>
130176
</template>
131177

‎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: '文本域',

0 commit comments

Comments
 (0)