Files
solidtime/resources/js/Components/FormSection.vue
Gregor Vostrak 27140d4ffc add linter, prettier and typescript support for jetstream (#1)
* add linter, prettier and typescript support for jetstream

* add github actions for lint, build and typecheck

* add composer install to build action

* fix composer lock

* add ext-intl and fixed php version

* fix intl php extension install

* add tip php extension to github npm build action

* fix php version to 8.3.1

* change github php base action

* fix primary button default type

* updated typescript types from Team to Organization

---------

Co-authored-by: Gregor Vostrak <gregorvostrak@Gregors-MacBook-Pro.local>
2024-01-21 22:35:43 +01:00

44 lines
1.4 KiB
Vue

<script setup lang="ts">
import { computed, useSlots } from 'vue';
import SectionTitle from './SectionTitle.vue';
defineEmits(['submitted']);
const hasActions = computed(() => !!useSlots().actions);
</script>
<template>
<div class="md:grid md:grid-cols-3 md:gap-6">
<SectionTitle>
<template #title>
<slot name="title" />
</template>
<template #description>
<slot name="description" />
</template>
</SectionTitle>
<div class="mt-5 md:mt-0 md:col-span-2">
<form @submit.prevent="$emit('submitted')">
<div
class="px-4 py-5 bg-white dark:bg-gray-800 sm:p-6 shadow"
:class="
hasActions
? 'sm:rounded-tl-md sm:rounded-tr-md'
: 'sm:rounded-md'
">
<div class="grid grid-cols-6 gap-6">
<slot name="form" />
</div>
</div>
<div
v-if="hasActions"
class="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-gray-800 text-end sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
<slot name="actions" />
</div>
</form>
</div>
</div>
</template>