docs(ComponentExample): handle iframe container on mobile

nuxt · Dec 18, 2024 · f3f4eda · f3f4eda
1 parent 7302a84
commit f3f4eda
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { camelCase } from 'scule'
+import { useElementSize } from '@vueuse/core'
 import { get, set } from '#ui/utils'
 
 const props = withDefaults(defineProps<{
@@ -61,7 +62,10 @@ const slots = defineSlots<{
   code(props?: {}): any
 }>()
 
+const el = ref<HTMLElement | null>(null)
+
 const { $prettier } = useNuxtApp()
+const { width } = useElementSize(el)
 
 const camelName = camelCase(props.name)
 
@@ -123,11 +127,11 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
   return acc
 }, {} as Record<string, any>) || {})
 
-const urlSearchParams = computed(() => new URLSearchParams({ ...optionsValues.value, ...componentProps }).toString())
+const urlSearchParams = computed(() => new URLSearchParams({ ...optionsValues.value, ...componentProps, width: width.value.toString() }).toString())
 </script>
 
 <template>
-  <div class="my-5">
+  <div ref="el" class="my-5">
     <template v-if="preview">
       <div class="border border-[var(--ui-border-muted)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source, 'overflow-hidden': props.overflowHidden }]">
         <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-border-muted)]">
@@ -185,8 +189,7 @@ const urlSearchParams = computed(() => new URLSearchParams({ ...optionsValues.va
           v-if="iframe"
           v-bind="typeof iframe === 'object' ? iframe : {}"
           :src="`/examples/${name}?${urlSearchParams}`"
-          width="1024"
-          class="relative left-1/2 -translate-x-1/2"
+          class="relative w-full lg:left-1/2 lg:-translate-x-1/2 lg:w-[1024px]"
           :class="props.class"
         />
         <div v-else class="flex justify-center p-4" :class="props.class">

diff --git a/docs/app/pages/examples/[...slug].vue b/docs/app/pages/examples/[...slug].vue
@@ -2,6 +2,8 @@
 const route = useRoute()
 
 const name = route.params.slug?.[0]
+
+const width = computed(() => route.query.width && Number.parseInt(route.query.width as string) > 0 ? `${Number.parseInt(route.query.width as string) - 2}px` : '864px')
 </script>
 
 <template>
@@ -11,7 +13,9 @@ const name = route.params.slug?.[0]
 </template>
 
 <style scoped>
-.example {
-  --ui-container: 54rem;
+@media (min-width: 1024px) {
+  .example {
+    --ui-container: v-bind(width);
+  }
 }
 </style>