mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
27 lines
775 B
Vue
27 lines
775 B
Vue
<script setup lang="ts">
|
|
import { camelCase } from 'scule'
|
|
|
|
const props = defineProps<{
|
|
name: string
|
|
props?: { [key: string]: any }
|
|
}>()
|
|
|
|
const camelName = camelCase(props.name)
|
|
|
|
const data = await fetchComponentExample(camelName)
|
|
|
|
const componentProps = reactive({ ...(props.props || {}) })
|
|
|
|
const { data: ast } = await useAsyncData(`component-example-${camelName}`, () => parseMarkdown(`\`\`\`vue\n${data?.code ?? ''}\n\`\`\``))
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 rounded-t-md">
|
|
<component :is="camelName" v-bind="componentProps" />
|
|
</div>
|
|
</div>
|
|
|
|
<MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&>div>pre]:!rounded-t-none [&>div]:!mt-0" />
|
|
</template>
|