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): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-05 16:19:28 +02:00
parent 2934a280e8
commit e36a48c684
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,7 +38,7 @@ const name = `U${upperFirst(camelName)}`
const componentProps = reactive({ ...(props.props || {}) }) const componentProps = reactive({ ...(props.props || {}) })
function getComponentProp(name: string) { function getComponentProp(name: string) {
return get(componentProps, name) return get(componentProps, name) || undefined
} }
function setComponentProp(name: string, value: any) { function setComponentProp(name: string, value: any) {
@@ -76,8 +76,8 @@ const options = computed(() => {
: Object.keys(componentTheme?.variants?.[key] || {}).map(variant => ({ : Object.keys(componentTheme?.variants?.[key] || {}).map(variant => ({
value: variant, value: variant,
label: variant, label: variant,
chip: key === 'color' ? { color: variant } : undefined chip: key.toLowerCase().endsWith('color') ? { color: variant } : undefined
})).filter(variant => key === 'color' ? !['error'].includes(variant.value) : true) })).filter(variant => key.toLowerCase().endsWith('color') ? !['error'].includes(variant.value) : true)
return { return {
name: key, name: key,
@@ -219,13 +219,13 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringif
value-key="value" value-key="value"
color="gray" color="gray"
variant="soft" variant="soft"
class="rounded rounded-l-none" class="rounded rounded-l-none min-w-12"
:search="false" :search="false"
:class="[option.name === 'color' && 'pl-6']" :class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
:ui="{ itemLeadingChip: 'size-2' }" :ui="{ itemLeadingChip: 'size-2' }"
@update:model-value="setComponentProp(option.name, $event)" @update:model-value="setComponentProp(option.name, $event)"
> >
<template v-if="option.name === 'color'" #leading="{ modelValue, ui }"> <template v-if="option.name.toLowerCase().endsWith('color')" #leading="{ modelValue, ui }">
<UChip <UChip
v-if="modelValue" v-if="modelValue"
inset inset
@@ -249,7 +249,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringif
</template> </template>
</div> </div>
<div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4" :class="[!options.length && 'rounded-t-md', props.class]"> <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class]">
<component :is="name" v-bind="componentProps" @update:model-value="!!componentProps.modelValue && setComponentProp('modelValue', $event)"> <component :is="name" v-bind="componentProps" @update:model-value="!!componentProps.modelValue && setComponentProp('modelValue', $event)">
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]> <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
<ContentSlot :name="slot" unwrap="p"> <ContentSlot :name="slot" unwrap="p">