53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<template>
|
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
|
<jet-section-title>
|
|
<template #title><slot name="title"></slot></template>
|
|
<template #description><slot name="description"></slot></template>
|
|
</jet-section-title>
|
|
|
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
|
<form @submit.prevent="$emit('submitted')">
|
|
<div :class="classnames">
|
|
<div class="grid grid-cols-6 gap-6">
|
|
<slot name="form"></slot>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md" v-if="hasActions">
|
|
<slot name="actions"></slot>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import JetSectionTitle from './SectionTitle';
|
|
|
|
export default {
|
|
emits: ['submitted'],
|
|
|
|
props: {
|
|
emptyBg: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
|
|
components: {
|
|
JetSectionTitle,
|
|
},
|
|
|
|
computed: {
|
|
hasActions() {
|
|
return !!this.$slots.actions;
|
|
},
|
|
classnames() {
|
|
let classnames = !this.emptyBg ? 'px-4 py-5 bg-white sm:p-6 shadow ' : '';
|
|
classnames += this.hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md';
|
|
return classnames;
|
|
},
|
|
},
|
|
};
|
|
</script>
|