arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-21 07:21:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(ComponentExample): add

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-11 17:36:50 +02:00
parent 57e62f36c4
commit 96e18ef233
10 changed files with 68 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/app/components/content/ComponentCode.vue
View File

@@ -101,7 +101,7 @@ const code = computed(() => {
return code
})
const { data: ast } = await useAsyncData(`${name}-code-${JSON.stringify({ props: componentProps, slots: props.slots })}`, async () => {
const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringify({ props: componentProps, slots: props.slots })}`, async () => {
let formatted = ''
try {
formatted = await $prettier.format(code.value)

26
docs/app/components/content/ComponentExample.vue Normal file
View File

@@ -0,0 +1,26 @@
<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>

2
docs/app/components/content/ComponentTheme.vue
View File

@@ -33,7 +33,7 @@ const component = computed(() => {
return stripCompoundVariants(component)
})
const { data: ast } = await useAsyncData(`${name}-theme`, () => parseMarkdown(`
const { data: ast } = await useAsyncData(`component-theme-${name}`, () => parseMarkdown(`
\`\`\`yml
${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
\`\`\`\

2
docs/app/components/content/HighlightInlineType.vue
View File

@@ -14,7 +14,7 @@ const type = computed(() => {
return props.type
})
const { data: ast } = await useAsyncData(`hightlight-inline-code-` + props.type, () => parseMarkdown(`\`${type.value}\`{lang="ts-type"}`))
const { data: ast } = await useAsyncData(`hightlight-inline-code-${props.type}`, () => parseMarkdown(`\`${type.value}\`{lang="ts-type"}`))
</script>
<template>