arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +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>
<template>
<div>
<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">
<template v-for="option in options" :key="option.name">
<UFormField
:label="option.label"
size="sm"
class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
:ui="{
wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
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' }"
<div class="my-5">
<div>
<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">
<template v-for="option in options" :key="option.name">
<UFormField
:label="option.label"
size="sm"
class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
:ui="{
wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5',
container: 'mt-0'
}"
>
<template v-if="option.name === 'color'" #leading="{ modelValue, ui }">
<UChip
v-if="modelValue"
inset
standalone
:color="(modelValue as any)"
:size="ui.itemLeadingChipSize()"
class="size-2"
/>
</template>
</USelectMenu>
<UInput v-else v-model="componentProps[option.name]" color="gray" variant="soft" :ui="{ base: 'rounded rounded-l-none' }" />
</UFormField>
</template>
</div>
<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>
<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 }">
<UChip
v-if="modelValue"
inset
standalone
:color="(modelValue as any)"
:size="ui.itemLeadingChipSize()"
class="size-2"
/>
</template>
</USelectMenu>
<UInput v-else v-model="componentProps[option.name]" color="gray" variant="soft" :ui="{ base: 'rounded rounded-l-none' }" />
</UFormField>
</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>