Skip to content

Commit

Permalink
added placeholder to Textfield.vue
Browse files Browse the repository at this point in the history
  • Loading branch information
DanielTerletzkiy committed Nov 24, 2021
1 parent bbfae7c commit d32706f
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 10 deletions.
2 changes: 1 addition & 1 deletion src/DEMO/HelloWorld.vue
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
</d-card-title>

<div class="ma-4" style="display: flex; gap: 12px; flex-wrap: wrap">
<d-text-field color="primary" outlined depressed label="Text" type="text" v-model="text"/>
<d-text-field color="primary" outlined depressed label="Text" type="text" v-model="text" placeholder="Input Text pls"/>
<d-text-field color="primary" outlined depressed label="Number" type="number" v-model="number"/>
<d-text-field color="primary" outlined depressed label="Date" type="date" v-model="date"/>
</div>
Expand Down
28 changes: 19 additions & 9 deletions src/components/textfield/Textfield.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<template>
<d-function-wrapper :classes="['d-text-field', ...classesObject]" v-bind="{...$props, ...$attrs}"
:style="textFieldStylesObject"
@mouseenter="()=> this.hover = true" @mouseleave="()=> this.hover = false">
<input v-bind="$attrs" :id="label" class="d-text-field__input" autocomplete="off" placeholder=" "
:value="value" @input="onInput"
@focusin="()=>this.selected = true" @focusout="()=>this.selected = false">
<label :for="label" class="d-text-field__label">{{ label }}</label>
:style="textFieldStylesObject"
@mouseenter="()=> this.hover = true" @mouseleave="()=> this.hover = false">
<input v-bind="$attrs" :id="label" class="d-text-field__input" autocomplete="off"
:placeholder="placeholderActive ? placeholder : ' '"
:value="value" @input="onInput"
@focusin="()=>this.selected = true" @focusout="()=>this.selected = false">
<label :for="label" class="d-text-field__label">{{ label }}</label>
</d-function-wrapper>
</template>

Expand All @@ -15,11 +16,12 @@ export default {
props: {
value: undefined,
label: String,
placeholder: String
},
data: () => ({
hover: false,
selected: false
selected: false,
}),
methods: {
Expand All @@ -34,7 +36,15 @@ export default {
},
classesObject() {
return {'d-text-field--active': (this.hover || this.selected), elevation: true}
return {
'd-text-field--active': (this.hover || this.selected),
elevation: true,
'd-text-field--placeholder':this.placeholderActive
}
},
placeholderActive(){
return this.placeholder && !this.value;
}
}
}
Expand Down Expand Up @@ -129,7 +139,7 @@ reduce the size of the label and move upwards
2. Keep label state when content is in input field
*/
.d-text-field__input:focus ~ .d-text-field__label,
.d-text-field__input:focus ~ .d-text-field__label, .d-text-field--placeholder .d-text-field__input ~ .d-text-field__label,
.d-text-field__input:not(:placeholder-shown).d-text-field__input:not(:focus) ~ .d-text-field__label {
font-size: 1rem;
padding: 0 0.3rem;
Expand Down

0 comments on commit d32706f

Please sign in to comment.