50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<template>
|
|
<div class="space-y-2">
|
|
<label for="text" class="block text-sm">{{ label[langcode]}} <span>{{ required ? '*' : '' }}</span></label>
|
|
<div class="h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600">
|
|
<input
|
|
id="text"
|
|
type="text"
|
|
name="text"
|
|
:placeholder="placeholder[langcode]"
|
|
class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500"
|
|
:required="required"
|
|
:value="modelValue"
|
|
@input="updateValue"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
export default {
|
|
props: {
|
|
label: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
modelValue: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
placeholder: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
emits: ['input-value'],
|
|
computed: {
|
|
...mapGetters(["langcode"]),
|
|
},
|
|
methods: {
|
|
updateValue(event) {
|
|
this.$emit('input-value', event.target.value)
|
|
}
|
|
},
|
|
}
|
|
</script> |