37 lines
1.0 KiB
Vue
37 lines
1.0 KiB
Vue
<template>
|
|
<span class="text-gray-600 flex bg-white items-center text-xs @sm:text-sm" :class="{'left-0 ': inline, 'left-2 px-1 absolute -top-3': !inline}">
|
|
<span v-text="name"></span> <span v-show="required" class="text-red-800 ml-1">*</span>
|
|
<hint :value="hint" class="ml-2" v-if="hint" small></hint>
|
|
<button
|
|
v-if="button"
|
|
@click.prevent="$emit('buttonclick')"
|
|
class="text-primary hover:outline-none px-2 ml-3 py-1 leading-none hover:bg-primary hover:text-font transition rounded-full text-xs"
|
|
v-text="button"
|
|
></button>
|
|
</span>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Hint from './Hint.vue';
|
|
|
|
defineEmits(['buttonclick']);
|
|
|
|
defineProps({
|
|
name: {},
|
|
required: {},
|
|
inline: {
|
|
type: Boolean,
|
|
default: () => false,
|
|
},
|
|
button: {
|
|
required: false,
|
|
default: () => '',
|
|
},
|
|
hint: {
|
|
required: false,
|
|
validator: (value) => value === null || typeof value === 'string',
|
|
default: () => null,
|
|
},
|
|
});
|
|
</script>
|