mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<template>
|
|
<div
|
|
:class="{ 'sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-tw-gray-200': inline }"
|
|
>
|
|
<slot name="label">
|
|
<div :class="{ 'flex content-center justify-between': !inline }">
|
|
<label
|
|
v-if="label"
|
|
:for="name"
|
|
class="block text-sm font-medium leading-5 text-tw-gray-700"
|
|
:class="{'sm:mt-px sm:pt-2': inline }"
|
|
>
|
|
{{ label }}
|
|
<span v-if="required" class="text-red-400">*</span>
|
|
</label>
|
|
<span
|
|
v-if="$slots.hint || hint"
|
|
class="text-sm leading-5 text-tw-gray-500"
|
|
:class="{ 'mt-1 max-w-2xl': inline }"
|
|
><slot name="hint">{{ hint }}</slot></span>
|
|
</div>
|
|
</slot>
|
|
<div
|
|
:class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }"
|
|
>
|
|
<slot />
|
|
<p v-if="help" class="mt-2 text-sm text-tw-gray-500">
|
|
{{ help }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
help: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
hint: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
inline: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
}
|
|
}
|
|
</script>
|