82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
field: {
|
|
type: [String, Number, Date]
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
filled: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true,
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'text',
|
|
},
|
|
helpText: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
error: {
|
|
type: String,
|
|
},
|
|
step: {
|
|
type: Number,
|
|
default: 0.1
|
|
}
|
|
})
|
|
|
|
defineEmits(['update:field'])
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="d-flex flex-column gap-2 mb-4">
|
|
<label class="custom-label" :for="name">{{ label }}</label>
|
|
<input
|
|
class="custom-input"
|
|
:class="[!filled ? 'custom-input-light' : '']"
|
|
:type="type"
|
|
:id="name"
|
|
:name="name"
|
|
:min="0"
|
|
:step="step"
|
|
:value="field"
|
|
:disabled="readonly"
|
|
:readonly="readonly"
|
|
:required="required"
|
|
@input="$event => $emit('update:field', $event.target.value)">
|
|
<span class="help" v-if="helpText.length > 0">{{ helpText }}</span>
|
|
<span class="error-msg" v-if="error">{{ error }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.help {
|
|
font-size: 12px;
|
|
font-weight: 300;
|
|
color: rgb(108, 92, 92);
|
|
}
|
|
|
|
.error-msg {
|
|
color: red;
|
|
font-size: 12px;
|
|
font-weight: 300;
|
|
}
|
|
</style> |