112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
<template>
|
|
<div v-if="field.visible" :class="fieldWrapperClasses">
|
|
<div v-if="field.withLabel" :class="labelClasses">
|
|
<slot>
|
|
<FormLabel
|
|
:label-for="labelFor || field.uniqueKey"
|
|
class="space-x-1"
|
|
:class="{ 'mb-2': shouldShowHelpText }"
|
|
>
|
|
<span>
|
|
{{ fieldLabel }}
|
|
</span>
|
|
<span v-if="field.required" class="text-red-500 text-sm">
|
|
{{ __('*') }}
|
|
</span>
|
|
</FormLabel>
|
|
</slot>
|
|
</div>
|
|
|
|
<div :class="controlWrapperClasses">
|
|
<slot name="field" />
|
|
|
|
<HelpText class="help-text-error" v-if="showErrors && hasError">
|
|
{{ firstError }}
|
|
</HelpText>
|
|
|
|
<HelpText
|
|
class="help-text"
|
|
v-if="shouldShowHelpText"
|
|
v-html="field.helpText"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { HandlesValidationErrors, mapProps } from '@/mixins'
|
|
|
|
export default {
|
|
mixins: [HandlesValidationErrors],
|
|
|
|
props: {
|
|
field: { type: Object, required: true },
|
|
fieldName: { type: String },
|
|
showErrors: { type: Boolean, default: true },
|
|
fullWidthContent: { type: Boolean, default: false },
|
|
labelFor: { default: null },
|
|
...mapProps(['showHelpText']),
|
|
},
|
|
|
|
computed: {
|
|
fieldWrapperClasses() {
|
|
// prettier-ignore
|
|
return [
|
|
'space-y-2',
|
|
'md:flex @md/modal:flex',
|
|
'md:flex-row @md/modal:flex-row',
|
|
'md:space-y-0 @md/modal:space-y-0',
|
|
this.field.withLabel && !this.field.inline && (this.field.compact ? 'py-3' : 'py-5'),
|
|
this.field.stacked && 'md:flex-col @md/modal:flex-col md:space-y-2 @md/modal:space-y-2',
|
|
]
|
|
},
|
|
|
|
labelClasses() {
|
|
// prettier-ignore
|
|
return [
|
|
'w-full',
|
|
this.field.compact ? '!px-3' : 'px-6',
|
|
!this.field.stacked && 'md:mt-2 @md/modal:mt-2',
|
|
this.field.stacked && !this.field.inline && 'md:px-8 @md/modal:px-8',
|
|
!this.field.stacked && !this.field.inline && 'md:px-8 @md/modal:px-8',
|
|
this.field.compact && 'md:!px-6 @md/modal:!px-6',
|
|
!this.field.stacked && !this.field.inline && 'md:w-1/5 @md/modal:w-1/5',
|
|
]
|
|
},
|
|
|
|
controlWrapperClasses() {
|
|
// prettier-ignore
|
|
return [
|
|
'w-full space-y-2',
|
|
this.field.compact ? '!px-3' : 'px-6',
|
|
this.field.compact && 'md:!px-4 @md/modal:!px-4',
|
|
this.field.stacked && !this.field.inline && 'md:px-8 @md/modal:px-8',
|
|
!this.field.stacked && !this.field.inline && 'md:px-8 @md/modal:px-8',
|
|
!this.field.stacked && !this.field.inline && !this.field.fullWidth && 'md:w-3/5 @md/modal:w-3/5',
|
|
this.field.stacked && !this.field.inline && !this.field.fullWidth && 'md:w-3/5 @md/modal:w-3/5',
|
|
!this.field.stacked && !this.field.inline && this.field.fullWidth && 'md:w-4/5 @md/modal:w-4/5',
|
|
]
|
|
},
|
|
|
|
/**
|
|
* Return the label that should be used for the field.
|
|
*/
|
|
fieldLabel() {
|
|
// If the field name is purposefully an empty string, then let's show it as such
|
|
if (this.fieldName === '') {
|
|
return ''
|
|
}
|
|
|
|
return this.fieldName || this.field.name || this.field.singularLabel
|
|
},
|
|
|
|
/**
|
|
* Determine help text should be shown.
|
|
*/
|
|
shouldShowHelpText() {
|
|
return this.showHelpText && this.field.helpText?.length > 0
|
|
},
|
|
},
|
|
}
|
|
</script>
|