75 lines
1.8 KiB
Vue
Executable File
75 lines
1.8 KiB
Vue
Executable File
<template>
|
|
<field-wrapper :stacked="field.stacked">
|
|
<div class="px-8" :class="field.stacked ? 'pt-6 w-full' : 'py-6 w-1/5'">
|
|
<slot>
|
|
<form-label
|
|
:label-for="field.attribute"
|
|
:class="{ 'mb-2': showHelpText && field.helpText }"
|
|
>
|
|
{{ fieldLabel }} <span
|
|
v-if="field.required"
|
|
class="text-danger text-sm"
|
|
>{{ __('*') }}</span
|
|
>
|
|
</form-label>
|
|
</slot>
|
|
</div>
|
|
|
|
<div class="py-6 px-8" :class="fieldClasses">
|
|
<slot name="field" />
|
|
|
|
<help-text
|
|
class="error-text mt-2 text-danger"
|
|
v-if="showErrors && hasError"
|
|
>
|
|
{{ firstError }}
|
|
</help-text>
|
|
|
|
<help-text class="help-text mt-2" v-if="showHelpText">
|
|
{{ field.helpText }}
|
|
</help-text>
|
|
</div>
|
|
</field-wrapper>
|
|
</template>
|
|
|
|
<script>
|
|
import { HandlesValidationErrors, mapProps } from 'laravel-nova'
|
|
|
|
export default {
|
|
mixins: [HandlesValidationErrors],
|
|
|
|
props: {
|
|
field: { type: Object, required: true },
|
|
fieldName: { type: String },
|
|
showErrors: { type: Boolean, default: true },
|
|
fullWidthContent: { type: Boolean, default: false },
|
|
...mapProps(['showHelpText']),
|
|
},
|
|
|
|
computed: {
|
|
/**
|
|
* 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
|
|
},
|
|
|
|
/**
|
|
* Return the classes that should be used for the field content.
|
|
*/
|
|
fieldClasses() {
|
|
return this.fullWidthContent
|
|
? this.field.stacked
|
|
? 'w-full'
|
|
: 'w-4/5'
|
|
: 'w-1/2'
|
|
},
|
|
},
|
|
}
|
|
</script>
|