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

docs(ComponentCode/ComponentExample): add missing margin

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-17 11:55:02 +02:00
parent 8563ea157b
commit 4e99ebf605
2 changed files with 59 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -114,57 +114,59 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringif
</script> </script>
<template> <template>
<div> <div class="my-5">
<div v-if="options.length" class="flex items-center gap-2.5 border border-gray-300 dark:border-gray-700 border-b-0 relative rounded-t-md px-4 py-2.5"> <div>
<template v-for="option in options" :key="option.name"> <div v-if="options.length" class="flex items-center gap-2.5 border border-gray-300 dark:border-gray-700 border-b-0 relative rounded-t-md px-4 py-2.5">
<UFormField <template v-for="option in options" :key="option.name">
:label="option.label" <UFormField
size="sm" :label="option.label"
class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded" size="sm"
:ui="{ class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700', :ui="{
label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5', wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
container: 'mt-0' label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5',
}" container: 'mt-0'
> }"
<USelectMenu
v-if="option.items?.length"
v-model="componentProps[option.name]"
:items="option.items"
value-key="value"
color="gray"
variant="soft"
class="rounded rounded-l-none"
:search="false"
:class="[option.name === 'color' && 'pl-6']"
:ui="{ itemLeadingChip: 'size-2' }"
> >
<template v-if="option.name === 'color'" #leading="{ modelValue, ui }"> <USelectMenu
<UChip v-if="option.items?.length"
v-if="modelValue" v-model="componentProps[option.name]"
inset :items="option.items"
standalone value-key="value"
:color="(modelValue as any)" color="gray"
:size="ui.itemLeadingChipSize()" variant="soft"
class="size-2" class="rounded rounded-l-none"
/> :search="false"
</template> :class="[option.name === 'color' && 'pl-6']"
</USelectMenu> :ui="{ itemLeadingChip: 'size-2' }"
<UInput v-else v-model="componentProps[option.name]" color="gray" variant="soft" :ui="{ base: 'rounded rounded-l-none' }" /> >
</UFormField> <template v-if="option.name === 'color'" #leading="{ modelValue, ui }">
</template> <UChip
</div> v-if="modelValue"
inset
<div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4" :class="[!options.length && 'rounded-t-md']"> standalone
<component :is="name" v-bind="componentProps"> :color="(modelValue as any)"
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]> :size="ui.itemLeadingChipSize()"
<ContentSlot :name="slot" unwrap="p"> class="size-2"
{{ slots[slot] }} />
</ContentSlot> </template>
</USelectMenu>
<UInput v-else v-model="componentProps[option.name]" color="gray" variant="soft" :ui="{ base: 'rounded rounded-l-none' }" />
</UFormField>
</template> </template>
</component> </div>
</div>
</div>
<MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&>div>pre]:!rounded-t-none [&>div]:!mt-0" /> <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4" :class="[!options.length && 'rounded-t-md']">
<component :is="name" v-bind="componentProps">
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
<ContentSlot :name="slot" unwrap="p">
{{ slots[slot] }}
</ContentSlot>
</template>
</component>
</div>
</div>
<MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&>div>pre]:!rounded-t-none [&>div]:!mt-0" />
</div>
</template> </template>

12
docs/app/components/content/ComponentExample.vue
View File

@@ -16,11 +16,13 @@ const { data: ast } = await useAsyncData(`component-example-${camelName}`, () =>
</script> </script>
<template> <template>
<div> <div class="my-5">
<div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 rounded-t-md"> <div>
<component :is="camelName" v-bind="componentProps" /> <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> </div>
</div>
<MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&>div>pre]:!rounded-t-none [&>div]:!mt-0" /> <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&>div>pre]:!rounded-t-none [&>div]:!mt-0" />
</div>
</template> </template>