Hide description when field not focused

This commit is contained in:
nemunaire 2020-11-30 08:57:27 +01:00
parent be5e70f9cc
commit 55db4db0c8
2 changed files with 12 additions and 2 deletions

View File

@ -38,8 +38,8 @@
<label v-if="specs.label" :for="'spec-' + index + '-' + specs.id" :title="specs.label" class="col-md-4 col-form-label text-truncate text-md-right text-primary">{{ specs.label }}</label> <label v-if="specs.label" :for="'spec-' + index + '-' + specs.id" :title="specs.label" class="col-md-4 col-form-label text-truncate text-md-right text-primary">{{ specs.label }}</label>
<label v-else :for="'spec-' + index + '-' + specs.id" :title="specs.label" class="col-md-4 col-form-label text-truncate text-md-right text-primary">{{ specs.id }}</label> <label v-else :for="'spec-' + index + '-' + specs.id" :title="specs.label" class="col-md-4 col-form-label text-truncate text-md-right text-primary">{{ specs.id }}</label>
<b-col md="8"> <b-col md="8">
<h-resource-value-input-raw v-model="val" :edit="edit" :index="index" :specs="specs" /> <h-resource-value-input-raw v-model="val" :edit="edit" :index="index" :specs="specs" @focus="show_description = true" @blur="show_description = false" />
<p v-if="specs.description" class="text-justify" style="line-height: 1.1"> <p v-if="specs.description" v-show="show_description" class="text-justify" style="line-height: 1.1">
<small class="text-muted">{{ specs.description }}</small> <small class="text-muted">{{ specs.description }}</small>
</p> </p>
</b-col> </b-col>
@ -77,6 +77,12 @@ export default {
} }
}, },
data: function () {
return {
show_description: false
}
},
computed: { computed: {
val: { val: {
get () { get () {

View File

@ -39,6 +39,8 @@
v-model="val" v-model="val"
:required="specs.required !== undefined && specs.required" :required="specs.required !== undefined && specs.required"
:options="specs.choices" :options="specs.choices"
@focus="$emit('focus')"
@blur="$emit('blur')"
/> />
<b-form-input <b-form-input
v-else v-else
@ -49,6 +51,8 @@
:required="specs.required !== undefined && specs.required" :required="specs.required !== undefined && specs.required"
:placeholder="specs.placeholder" :placeholder="specs.placeholder"
:plaintext="!edit" :plaintext="!edit"
@focus="$emit('focus')"
@blur="$emit('blur')"
/> />
</b-input-group> </b-input-group>
</template> </template>