mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-19 06:21:46 +01:00
chore(Container): add component
This commit is contained in:
36
src/runtime/components/Container.vue
Normal file
36
src/runtime/components/Container.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<script lang="ts">
|
||||
import { tv } from 'tailwind-variants'
|
||||
// import appConfig from '#build/app.config'
|
||||
import theme from '#ui/theme/container'
|
||||
|
||||
const appContainer = tv(theme)
|
||||
// const appContainer = tv({ extend: container, ...(appConfig.ui?.container || {}) })
|
||||
|
||||
export interface ContainerProps {
|
||||
as?: string
|
||||
class?: any
|
||||
ui?: Partial<typeof appContainer>
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
defineOptions({ inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(defineProps<ContainerProps>(), {
|
||||
as: 'div',
|
||||
class: undefined,
|
||||
ui: undefined
|
||||
})
|
||||
|
||||
// Computed
|
||||
|
||||
const ui = computed(() => tv({ extend: appContainer, ...props.ui })({ class: props.class }))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="as" :class="ui" v-bind="$attrs">
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
3
src/runtime/theme/container.ts
Normal file
3
src/runtime/theme/container.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
base: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'
|
||||
}
|
||||
Reference in New Issue
Block a user