mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-17 21:48:07 +01:00
55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<template>
|
|
<component
|
|
:is="$attrs.onSubmit ? 'form': as"
|
|
:class="[ui.base, ui.rounded, ui.divide, ui.ring, ui.shadow, ui.background]"
|
|
v-bind="$attrs"
|
|
>
|
|
<div v-if="$slots.header" :class="[ui.header.base, ui.header.padding, ui.header.background]">
|
|
<slot name="header" />
|
|
</div>
|
|
<div :class="[ui.body.base, ui.body.padding, ui.body.background]">
|
|
<slot />
|
|
</div>
|
|
<div v-if="$slots.footer" :class="[ui.footer.base, ui.footer.padding, ui.footer.background]">
|
|
<slot name="footer" />
|
|
</div>
|
|
</component>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent } from 'vue'
|
|
import type { PropType } from 'vue'
|
|
import { defu } from 'defu'
|
|
import { useAppConfig } from '#imports'
|
|
// TODO: Remove
|
|
// @ts-expect-error
|
|
import appConfig from '#build/app.config'
|
|
|
|
// const appConfig = useAppConfig()
|
|
|
|
export default defineComponent({
|
|
inheritAttrs: false,
|
|
props: {
|
|
as: {
|
|
type: String,
|
|
default: 'div'
|
|
},
|
|
ui: {
|
|
type: Object as PropType<Partial<typeof appConfig.ui.card>>,
|
|
default: () => appConfig.ui.card
|
|
}
|
|
},
|
|
setup (props) {
|
|
// TODO: Remove
|
|
const appConfig = useAppConfig()
|
|
|
|
const ui = computed<Partial<typeof appConfig.ui.card>>(() => defu({}, props.ui, appConfig.ui.card))
|
|
|
|
return {
|
|
// eslint-disable-next-line vue/no-dupe-keys
|
|
ui
|
|
}
|
|
}
|
|
})
|
|
</script>
|