arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 11:20:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve slots component display

Browse Source
This commit is contained in:
Benjamin Canac
2022-03-14 16:51:40 +01:00
parent fb3ff2e5fa
commit dca0ff4a60
1 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/pages/components/[component].vue
View File

@@ -8,17 +8,18 @@
<template v-if="Array.isArray(slot)"> <template v-if="Array.isArray(slot)">
<div :key="key"> <div :key="key">
<component <component
:is="slot.component ? `U${slot.component}` : slot.tag" :is="slot.component ? `U${slot.component.name}` : slot.tag"
v-for="(slot, index) of slot" v-for="(slot, index) of slot"
:key="index" :key="index"
:class="slot.class" :class="slot.class"
v-bind="slot.props || defaultProps[slot.component]" v-bind="slot.component?.props || defaultProps[slot.component]"
v-html="slot.html" v-html="slot.html"
/> />
</div> </div>
</template> </template>
<template v-else> <template v-else>
<component :is="slot.component ? `U${slot.component}` : slot.tag" :key="key" :class="slot.class" v-bind="slot.props || defaultProps[slot.component]" v-html="slot.html" /> <component :is="`U${slot.component.name}`" v-if="slot.component" :key="`${key}-component`" v-bind="slot.component?.props || defaultProps[slot.component]" />
<component :is="slot.tag" v-else :key="`${key}-tag`" :class="slot.class" v-html="slot.html" />
</template> </template>
</template> </template>
</component> </component>
@@ -202,10 +203,12 @@ const defaultProps = {
label: 'Input group', label: 'Input group',
slots: { slots: {
default: { default: {
component: 'Input', component: {
props: { name: 'Input',
name: 'input', props: {
placeholder: 'Works with every form element' name: 'input',
placeholder: 'Works with every form element'
}
} }
} }
} }
@@ -258,10 +261,12 @@ const defaultProps = {
html: 'Modal content' html: 'Modal content'
}, },
footer: { footer: {
component: 'Button', component: {
props: { name: 'Button',
label: 'Close', props: {
onClick: () => { modal.value = false } label: 'Close',
onClick: () => { modal.value = false }
}
} }
} }
} }