From d75f47419d74b72c592f06f632a3ce31cbe02f4d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 19 Nov 2024 15:18:06 +0100
Subject: [PATCH] docs(ComponentCode/ComponentExample): use relative imports

---
 docs/app/components/content/ComponentCode.vue    | 3 ++-
 docs/app/components/content/ComponentExample.vue | 9 +++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index c92ab9db..19ebc775 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -43,7 +43,8 @@ const { $prettier } = useNuxtApp()
 
 const camelName = camelCase(props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
-const component = defineAsyncComponent(() => import(`#ui/components/${upperFirst(camelName)}.vue`))
+
+const component = defineAsyncComponent(() => import(`../../../../src/runtime/components/${upperFirst(camelName)}.vue`))
 
 const componentProps = reactive({ ...(props.props || {}) })
 const componentEvents = reactive({
diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
index 348fb601..f67126ff 100644
--- a/docs/app/components/content/ComponentExample.vue
+++ b/docs/app/components/content/ComponentExample.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { camelCase } from 'scule'
+import { upperFirst, camelCase } from 'scule'
 import { get, set } from '#ui/utils'
 
 const props = withDefaults(defineProps<{
@@ -52,11 +52,16 @@ const slots = defineSlots<{
 }>()
 
 const { $prettier } = useNuxtApp()
+const route = useRoute()
 
 const camelName = camelCase(props.name)
 
 const data = await fetchComponentExample(camelName)
 
+const dir = route.params.slug?.[route.params.slug.length - 1]
+
+const component = defineAsyncComponent(() => import(`./examples/${dir}/${upperFirst(camelName)}.vue`))
+
 const componentProps = reactive({ ...(props.props || {}) })
 
 const code = computed(() => {
@@ -170,7 +175,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
         </div>
 
         <div class="flex justify-center p-4" :class="props.class">
-          <component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
+          <component :is="component" v-bind="{ ...componentProps, ...optionsValues }" />
         </div>
       </div>
     </template>