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

docs: integrate @nuxt/ui-pro (#739)

Browse Source 
Co-authored-by: Pooya Parsa <pooya@pi0.io>
Co-authored-by: Florent Delerue <florentdelerue@hotmail.com>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
2023-11-02 16:44:44 +01:00
committed by GitHub
parent ed4b5e0077
commit 844b3185e9
42 changed files with 610 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/components/content/ComponentExample.vue
View File

@@ -1,10 +1,14 @@
<template>
<div class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0">
<div
class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md"
:class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode }, backgroundClass, overflowClass]"
class="flex border border-gray-200 dark:border-gray-700 relative rounded-t-md"
:class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode, 'not-prose': !prose }, backgroundClass, extraClass]"
>
<component :is="camelName" v-if="component" v-bind="componentProps" />
<template v-if="component">
<iframe v-if="iframe" :src="`/examples/${component}`" v-bind="iframeProps" :class="backgroundClass" class="w-full" />
<component :is="camelName" v-else v-bind="componentProps" :class="componentClass" />
</template>
<ContentSlot v-if="$slots.default" :use="$slots.default" />
</div>
<template v-if="hasCode">
@@ -43,18 +47,36 @@ const props = defineProps({
type: Boolean,
default: true
},
prose: {
type: Boolean,
default: false
},
iframe: {
type: Boolean,
default: false
},
iframeProps: {
type: Object,
default: () => ({})
},
backgroundClass: {
type: String,
default: 'bg-white dark:bg-gray-900'
},
overflowClass: {
extraClass: {
type: String,
default: ''
}
})
let component = props.component
// TODO: Remove once merged on `main` branch
if (['command-palette-theme-algolia', 'command-palette-theme-raycast', 'vertical-navigation-theme-tailwind', 'pagination-theme-rounded'].includes(component)) {
component = component.replace('-theme', '-example-theme')
}
const instance = getCurrentInstance()
const camelName = camelCase(props.component)
const camelName = camelCase(component)
const data = await fetchContentExampleCode(camelName)
const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))